From dc7730cf5cb2eeb16e0d335730af9055016e6b76 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 15:34:34 +0800
Subject: [PATCH 01/16] feat: add export and import icons

---
 .../src/components/DataStory/icons/export.tsx  | 18 ++++++++++++++++++
 .../components/DataStory/icons/importIcon.tsx  | 15 +++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 packages/ui/src/components/DataStory/icons/export.tsx
 create mode 100644 packages/ui/src/components/DataStory/icons/importIcon.tsx

diff --git a/packages/ui/src/components/DataStory/icons/export.tsx b/packages/ui/src/components/DataStory/icons/export.tsx
new file mode 100644
index 00000000..b8b37bbd
--- /dev/null
+++ b/packages/ui/src/components/DataStory/icons/export.tsx
@@ -0,0 +1,18 @@
+export const ExportIcon: React.FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ fill: 'currentColor' }}
+      viewBox="0 0 24 24"
+      strokeWidth={1.0}
+      stroke="currentColor"
+      className={'w-6 h-6 text-gray-700'}
+    >
+      <path
+        d="M5.552 20.968a2.577 2.577 0 0 1-2.5-2.73c-.012-2.153 0-4.306 0-6.459a.5.5 0 0 1 1 0c0 2.2-.032 4.4 0 6.6c.016 1.107.848 1.589 1.838 1.589h12.463A1.55 1.55 0 0 0 19.825 19a3 3 0 0 0 .1-1.061v-6.16a.5.5 0 0 1 1 0c0 2.224.085 4.465 0 6.687a2.567 2.567 0 0 1-2.67 2.5Z"
+      ></path>
+      <path
+        d="M12.337 3.176a.46.46 0 0 0-.311-.138q-.021.002-.043-.006c-.022-.008-.027 0-.041.006a.46.46 0 0 0-.312.138L7.961 6.845a.5.5 0 0 0 .707.707l2.816-2.815v10.742a.5.5 0 0 0 1 0V4.737L15.3 7.552a.5.5 0 0 0 .707-.707Z"></path>
+    </svg>
+  );
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/icons/importIcon.tsx b/packages/ui/src/components/DataStory/icons/importIcon.tsx
new file mode 100644
index 00000000..648e548f
--- /dev/null
+++ b/packages/ui/src/components/DataStory/icons/importIcon.tsx
@@ -0,0 +1,15 @@
+// Icon depends on stroke control
+export const ImportIcon: React.FC = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ fill: 'none' }}
+      viewBox="0 0 24 24"
+      strokeWidth={2}
+      stroke="currentColor"
+      className={'w-6 h-6 text-gray-700'}  // Add the color class here
+    >
+      <path strokeLinecap="round" strokeLinejoin="round"
+        d="M4 13v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-6M12 3v12m0 0l-3.5-3.5M12 15l3.5-3.5"></path>
+    </svg>);
+};
\ No newline at end of file

From eeb7182da068fc0d5ce399a96fdcadc8fc9eec8a Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 17:06:31 +0800
Subject: [PATCH 02/16] feat: implement the default export function

---
 .../components/DataStory/controls/defaultExport.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 packages/ui/src/components/DataStory/controls/defaultExport.ts

diff --git a/packages/ui/src/components/DataStory/controls/defaultExport.ts b/packages/ui/src/components/DataStory/controls/defaultExport.ts
new file mode 100644
index 00000000..9658ed03
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/defaultExport.ts
@@ -0,0 +1,14 @@
+import { Diagram } from '@data-story/core';
+
+export const defaultExport = (diagram: Diagram) =>{
+  const json = JSON.stringify(diagram, null, 2);
+  const blob = new Blob([json], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `diagram-${new Date().toISOString().slice(0,10)}.diagram.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
\ No newline at end of file

From b0f9b89dded5173126ac9af70a32657e2e22519c Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 17:48:43 +0800
Subject: [PATCH 03/16] refactor: move dataStoryControls to controls directory
 and extract getOnNodesDelete method

---
 .../components/DataStory/DataStoryCanvas.tsx  | 87 +++++++++++--------
 .../{ => controls}/dataStoryControls.tsx      | 35 ++++++--
 packages/ui/src/index.ts                      |  4 +-
 3 files changed, 84 insertions(+), 42 deletions(-)
 rename packages/ui/src/components/DataStory/{ => controls}/dataStoryControls.tsx (79%)

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
index 9a36d35d..e44554a9 100644
--- a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
+++ b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -1,4 +1,4 @@
-import { DataStoryControls } from './dataStoryControls';
+import { DataStoryControls } from './controls/dataStoryControls';
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import {
   Background,
@@ -27,6 +27,9 @@ import { keyManager } from './keyManager';
 import { getNodesWithNewSelection } from './getNodesWithNewSelection';
 import { createDataStoryId, LinkCount, LinkId, NodeStatus, RequestObserverType } from '@data-story/core';
 import { useDragNode } from './useDragNode';
+import { ReactFlowNode } from '../Node/ReactFlowNode';
+import { defaultExport } from './controls/defaultExport';
+import { defaultImport } from './controls/defaultImport';
 
 const nodeTypes = {
   commentNodeComponent: CommentNodeComponent,
@@ -190,6 +193,51 @@ const Flow = ({
     edges,
   });
 
+  const getOnNodesDelete =  useCallback((nodesToDelete: ReactFlowNode[]) => {
+    nodesToDelete.forEach(node => {
+      const store = reactFlowStore.getState();
+      const { edges } = store;
+
+      // Find all incoming and outgoing edges for this node
+      const incomingEdges = edges.filter(e => e.target === node.id);
+      const outgoingEdges = edges.filter(e => e.source === node.id);
+
+      // For each incoming edge, connect it to all outgoing edges
+      incomingEdges.forEach(inEdge => {
+        outgoingEdges.forEach(outEdge => {
+          // Create a connection that will be handled by the store's connect method
+          connect({
+            source: inEdge.source,
+            sourceHandle: inEdge.sourceHandle ?? null,
+            target: outEdge.target,
+            targetHandle: outEdge.targetHandle ?? null,
+          });
+        });
+      });
+    });
+
+    // focus on the diagram after node deletion to enhance hotkey usage
+    focusOnFlow();
+  }, [connect, focusOnFlow, reactFlowStore]);
+
+  const onImport = async () => {
+    console.log('import');
+    const diagram = await defaultImport();
+    console.log('diagram', diagram);
+  }
+
+  const onExport = () => {
+    const diagram = toDiagram();
+
+    // If client has custom export implementation
+    // if (client?.onExport) {
+    //   client.onExport(diagram);
+    //   return;
+    // }
+
+    defaultExport(diagram);
+  }
+
   return (
     <>
       <style>
@@ -240,39 +288,7 @@ const Flow = ({
           onEdgesChange(changes);
           if (onChange) onChange(toDiagram())
         }}
-        onNodesDelete={(nodesToDelete) => {
-          // console.log('onNodesDelete', nodesToDelete);
-
-          nodesToDelete.forEach(node => {
-            const store = reactFlowStore.getState();
-            const { edges } = store;
-
-            // Find all incoming and outgoing edges for this node
-            const incomingEdges = edges.filter(e => e.target === node.id);
-            const outgoingEdges = edges.filter(e => e.source === node.id);
-
-            // console.log({
-            //   incomingEdges,
-            //   outgoingEdges,
-            // });
-
-            // For each incoming edge, connect it to all outgoing edges
-            incomingEdges.forEach(inEdge => {
-              outgoingEdges.forEach(outEdge => {
-                // Create a connection that will be handled by the store's connect method
-                connect({
-                  source: inEdge.source,
-                  sourceHandle: inEdge.sourceHandle ?? null,
-                  target: outEdge.target,
-                  targetHandle: outEdge.targetHandle ?? null,
-                });
-              });
-            });
-          });
-
-          // focus on the diagram after node deletion to enhance hotkey usage
-          focusOnFlow();
-        }}
+        onNodesDelete={getOnNodesDelete}
         onConnect={connect}
         onInit={(rfInstance: StoreInitOptions['rfInstance']) => {
           onInit({
@@ -312,6 +328,9 @@ const Flow = ({
           )}
       >
         <DataStoryControls
+          // todo: onImport and onExport
+          onImport={onImport}
+          onExport={onExport}
           onSave={onSave}
           slotComponents={slotComponents}
           hideControls={hideControls}
diff --git a/packages/ui/src/components/DataStory/dataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
similarity index 79%
rename from packages/ui/src/components/DataStory/dataStoryControls.tsx
rename to packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
index 08dae42b..29ad3896 100644
--- a/packages/ui/src/components/DataStory/dataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
@@ -1,11 +1,13 @@
 import { ControlButton, Controls } from '@xyflow/react';
-import { RunIcon } from './icons/runIcon';
-import { AddNodeIcon } from './icons/addNodeIcon';
+import { RunIcon } from '../icons/runIcon';
+import { AddNodeIcon } from '../icons/addNodeIcon';
 import { Diagram } from '@data-story/core';
-import { useStore } from './store/store';
+import { useStore } from '../store/store';
 import React, { useCallback, useMemo } from 'react';
-import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from './types';
-import { SaveIcon } from './icons/saveIcon';
+import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from '../types';
+import { SaveIcon } from '../icons/saveIcon';
+import { ExportIcon } from '../icons/export';
+import { ImportIcon } from '../icons/importIcon';
 
 export type DataStoryControlsType = {
   getDiagram: () => Diagram;
@@ -29,12 +31,16 @@ export function DataStoryControls({
   setShowAddNode,
   slotComponents,
   onSave,
+  onImport,
+  onExport,
 }: {
   hideControls?: DataStoryProps['hideControls'];
   setShowRun: (showRun: boolean) => void;
   setShowAddNode: (showAddNode: boolean) => void;
   slotComponents?: React.ReactNode[];
   onSave?: DataStoryCanvasProps['onSave'];
+  onImport?:()=>void;
+  onExport?:()=>void;
 }) {
   const selector = (state: StoreSchema) => ({
     toDiagram: state.toDiagram,
@@ -91,7 +97,24 @@ export function DataStoryControls({
       key="save"
       onClick={handleSave}>
       <SaveIcon/>
-    </ControlButton>].filter((ControlButton) => {
+    </ControlButton>,
+    <ControlButton
+      title="Export"
+      aria-label="export"
+      key="export"
+      onClick={onExport}
+    >
+      <ExportIcon />
+    </ControlButton>,
+    <ControlButton
+      title="import"
+      aria-label="import"
+      key="import"
+      onClick={onImport}
+    >
+      <ImportIcon />
+    </ControlButton>,
+    ].filter((ControlButton) => {
       if (Array.isArray(hideControls)) {
         return !hideControls.includes(ControlButton.props['aria-label']);
       }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 85bd0c6c..926a420e 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -4,13 +4,13 @@ export { DataStoryCanvasProvider } from './components/DataStory/store/store';
 export { DropDown } from './components/DropDown';
 export { SaveIcon } from './components/DataStory/icons/saveIcon'
 export { OpenIcon } from './components/DataStory/icons/openIcon'
-export { useDataStoryControls } from './components/DataStory/dataStoryControls';
+export { useDataStoryControls } from './components/DataStory/controls/dataStoryControls';
 export { eventManager, useDataStoryEvent } from './components/DataStory/events/eventManager'
 export { DataStoryEvents, type DataStoryEventType } from './components/DataStory/events/dataStoryEventType'
 export type { DataStoryProps, ClientRunParams, ServerClientObservationConfig } from './components/DataStory/types'
 export { default as NodeComponent } from './components/Node/NodeComponent';
 export { createJSClient } from './components/DataStory/clients/createJSClient';
-export type { DataStoryControlsType } from './components/DataStory/dataStoryControls';
+export type { DataStoryControlsType } from './components/DataStory/controls/dataStoryControls';
 export type { WorkspaceApiClientImplement } from './components/DataStory/clients/WorkspaceApiClientImplement';
 export { processWaitingResponse, waitForResponse } from './components/DataStory/clients/WebSocketHandleResponseMiddleware';
 export { createSocketClient } from './components/DataStory/clients/createSocketClient';

From 414e255044d96f63f93c5fc3bc95c3e2c51bbc1b Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 17:50:15 +0800
Subject: [PATCH 04/16] feat: implement defaultImport method

---
 .../DataStory/controls/defaultImport.ts       | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 packages/ui/src/components/DataStory/controls/defaultImport.ts

diff --git a/packages/ui/src/components/DataStory/controls/defaultImport.ts b/packages/ui/src/components/DataStory/controls/defaultImport.ts
new file mode 100644
index 00000000..36b9953b
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/defaultImport.ts
@@ -0,0 +1,49 @@
+import { Diagram } from '@data-story/core';
+
+export const defaultImport = (): Promise<Diagram> => {
+  return new Promise((resolve, reject) => {
+    // 创建一个 input 元素
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '.diagram.json,.ds'; // 限制文件类型
+    input.style.display = 'none'; // 隐藏 input 元素
+
+    // 当用户选择文件后触发
+    input.onchange = (event: Event) => {
+      const files = (event.target as HTMLInputElement).files;
+      if (files && files.length > 0) {
+        const file = files[0];
+        const reader = new FileReader();
+
+        // 读取文件内容
+        reader.onload = (e: ProgressEvent<FileReader>) => {
+          if (e.target && e.target.result) {
+            try {
+              const diagram = JSON.parse(e.target.result as string);
+              resolve(diagram); // 解析成功，返回 diagram 对象
+            } catch (error) {
+              reject(new Error('Failed to parse the file as JSON.')); // 解析失败
+            }
+          } else {
+            reject(new Error('File reading failed.')); // 文件读取失败
+          }
+        };
+
+        reader.onerror = () => {
+          reject(new Error('Error occurred while reading the file.')); // 读取错误
+        };
+
+        reader.readAsText(file); // 以文本形式读取文件
+      } else {
+        reject(new Error('No file selected.')); // 用户未选择文件
+      }
+
+      // 清理 DOM
+      document.body.removeChild(input);
+    };
+
+    // 将 input 元素添加到 DOM 中并触发文件选择对话框
+    document.body.appendChild(input);
+    input.click();
+  });
+};
\ No newline at end of file

From 11d4320707f36d943a6ab4906d6becf1956c814e Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 18:49:06 +0800
Subject: [PATCH 05/16] refactor: move the handleImport and handleExport to
 control file

---
 .../components/DataStory/DataStoryCanvas.tsx  | 30 ++-----------------
 .../DataStory/controls/dataStoryControls.tsx  | 19 ++++++++----
 .../DataStory/controls/defaultImport.ts       | 28 +++++++++--------
 3 files changed, 30 insertions(+), 47 deletions(-)

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
index e44554a9..cdf1cabf 100644
--- a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
+++ b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -3,7 +3,6 @@ import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useS
 import {
   Background,
   BackgroundVariant,
-  Edge,
   EdgeChange,
   NodeChange,
   ReactFlow,
@@ -28,8 +27,6 @@ import { getNodesWithNewSelection } from './getNodesWithNewSelection';
 import { createDataStoryId, LinkCount, LinkId, NodeStatus, RequestObserverType } from '@data-story/core';
 import { useDragNode } from './useDragNode';
 import { ReactFlowNode } from '../Node/ReactFlowNode';
-import { defaultExport } from './controls/defaultExport';
-import { defaultImport } from './controls/defaultImport';
 
 const nodeTypes = {
   commentNodeComponent: CommentNodeComponent,
@@ -74,12 +71,11 @@ const Flow = ({
     connect: state.connect,
     disconnect: state.disconnect,
     onInit: state.onInit,
-    onRun: state.onRun,
     addNodeFromDescription: state.addNodeFromDescription,
     toDiagram: state.toDiagram,
     updateEdgeCounts: state.updateEdgeCounts,
     updateEdgeStatus: state.updateEdgeStatus,
-    setEdges: state.setEdges,
+    updateDiagram: state.updateDiagram,
   });
 
   const {
@@ -90,12 +86,11 @@ const Flow = ({
     onNodesChange,
     onEdgesChange,
     onInit,
-    onRun,
     addNodeFromDescription,
     toDiagram,
     updateEdgeCounts,
     updateEdgeStatus,
-    setEdges,
+    updateDiagram,
   } = useStore(selector, shallow);
 
   const id = useId()
@@ -220,24 +215,6 @@ const Flow = ({
     focusOnFlow();
   }, [connect, focusOnFlow, reactFlowStore]);
 
-  const onImport = async () => {
-    console.log('import');
-    const diagram = await defaultImport();
-    console.log('diagram', diagram);
-  }
-
-  const onExport = () => {
-    const diagram = toDiagram();
-
-    // If client has custom export implementation
-    // if (client?.onExport) {
-    //   client.onExport(diagram);
-    //   return;
-    // }
-
-    defaultExport(diagram);
-  }
-
   return (
     <>
       <style>
@@ -328,9 +305,6 @@ const Flow = ({
           )}
       >
         <DataStoryControls
-          // todo: onImport and onExport
-          onImport={onImport}
-          onExport={onExport}
           onSave={onSave}
           slotComponents={slotComponents}
           hideControls={hideControls}
diff --git a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
index 29ad3896..765b8400 100644
--- a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
@@ -8,6 +8,8 @@ import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from '../types';
 import { SaveIcon } from '../icons/saveIcon';
 import { ExportIcon } from '../icons/export';
 import { ImportIcon } from '../icons/importIcon';
+import { defaultImport } from './defaultImport';
+import { defaultExport } from './defaultExport';
 
 export type DataStoryControlsType = {
   getDiagram: () => Diagram;
@@ -31,16 +33,12 @@ export function DataStoryControls({
   setShowAddNode,
   slotComponents,
   onSave,
-  onImport,
-  onExport,
 }: {
   hideControls?: DataStoryProps['hideControls'];
   setShowRun: (showRun: boolean) => void;
   setShowAddNode: (showAddNode: boolean) => void;
   slotComponents?: React.ReactNode[];
   onSave?: DataStoryCanvasProps['onSave'];
-  onImport?:()=>void;
-  onExport?:()=>void;
 }) {
   const selector = (state: StoreSchema) => ({
     toDiagram: state.toDiagram,
@@ -60,6 +58,15 @@ export function DataStoryControls({
     onSave: onSave,
   }), [updateDiagram, toDiagram]);
 
+  const handleImport = async () => {
+    const diagram = await defaultImport();
+    updateDiagram(diagram);
+  }
+
+  const handleExport = () => {
+    const diagram = toDiagram();
+    defaultExport(diagram);
+  }
   const handleSave = useCallback(() => {
     onSave?.(toDiagram());
   }, [onSave]);
@@ -102,7 +109,7 @@ export function DataStoryControls({
       title="Export"
       aria-label="export"
       key="export"
-      onClick={onExport}
+      onClick={handleExport}
     >
       <ExportIcon />
     </ControlButton>,
@@ -110,7 +117,7 @@ export function DataStoryControls({
       title="import"
       aria-label="import"
       key="import"
-      onClick={onImport}
+      onClick={handleImport}
     >
       <ImportIcon />
     </ControlButton>,
diff --git a/packages/ui/src/components/DataStory/controls/defaultImport.ts b/packages/ui/src/components/DataStory/controls/defaultImport.ts
index 36b9953b..bd34d275 100644
--- a/packages/ui/src/components/DataStory/controls/defaultImport.ts
+++ b/packages/ui/src/components/DataStory/controls/defaultImport.ts
@@ -2,47 +2,49 @@ import { Diagram } from '@data-story/core';
 
 export const defaultImport = (): Promise<Diagram> => {
   return new Promise((resolve, reject) => {
-    // 创建一个 input 元素
+    // create an input element
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = '.diagram.json,.ds'; // 限制文件类型
-    input.style.display = 'none'; // 隐藏 input 元素
+    input.accept = '.diagram.json,.ds';
+    input.style.display = 'none';
 
-    // 当用户选择文件后触发
+    // when the user selects a file
     input.onchange = (event: Event) => {
       const files = (event.target as HTMLInputElement).files;
       if (files && files.length > 0) {
         const file = files[0];
         const reader = new FileReader();
 
-        // 读取文件内容
+        // read the file content
         reader.onload = (e: ProgressEvent<FileReader>) => {
           if (e.target && e.target.result) {
             try {
               const diagram = JSON.parse(e.target.result as string);
-              resolve(diagram); // 解析成功，返回 diagram 对象
+              resolve(diagram);
             } catch (error) {
-              reject(new Error('Failed to parse the file as JSON.')); // 解析失败
+              reject(new Error('Failed to parse the file as JSON.'));
             }
           } else {
-            reject(new Error('File reading failed.')); // 文件读取失败
+            reject(new Error('File reading failed.'));
           }
         };
 
         reader.onerror = () => {
-          reject(new Error('Error occurred while reading the file.')); // 读取错误
+          reject(new Error('Error occurred while reading the file.'));
         };
 
-        reader.readAsText(file); // 以文本形式读取文件
+        // start reading the file
+        reader.readAsText(file);
       } else {
-        reject(new Error('No file selected.')); // 用户未选择文件
+        // no file selected
+        reject(new Error('No file selected.'));
       }
 
-      // 清理 DOM
+      // clean up the DOM
       document.body.removeChild(input);
     };
 
-    // 将 input 元素添加到 DOM 中并触发文件选择对话框
+    // add the input element to the DOM and trigger the file selection dialog
     document.body.appendChild(input);
     input.click();
   });

From 3a6f55c4ba286c2da524f573c2ddf48994106edd Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 19:10:29 +0800
Subject: [PATCH 06/16] feat: add IMPORT_SUCCESS, IMPORT_ERROR, EXPORT_SUCCESS,
 and EXPORT_ERROR to DataStoryEvent

---
 packages/docs/components/Toast.tsx            | 17 ++++++++
 packages/ds-ext/src/app/VsCodeToast.tsx       | 19 +++++++++
 .../DataStory/controls/defaultExport.ts       | 39 +++++++++++++------
 .../DataStory/events/dataStoryEventType.ts    |  6 ++-
 4 files changed, 68 insertions(+), 13 deletions(-)

diff --git a/packages/docs/components/Toast.tsx b/packages/docs/components/Toast.tsx
index eb03c6fd..4bf45f75 100644
--- a/packages/docs/components/Toast.tsx
+++ b/packages/docs/components/Toast.tsx
@@ -42,6 +42,23 @@ const initToast = (event: DataStoryEventType) => {
     case DataStoryEvents.SAVE_ERROR:
       console.error(event.payload);
       errorToast('Diagram save failed!');
+      break;
+    case DataStoryEvents.IMPORT_SUCCESS:
+      successToast('Diagram imported successfully!');
+      break;
+    case DataStoryEvents.IMPORT_ERROR:
+      console.error(event.payload);
+      errorToast('Diagram import failed!');
+      break;
+    case DataStoryEvents.EXPORT_SUCCESS:
+      successToast('Diagram exported successfully!');
+      break;
+    case DataStoryEvents.EXPORT_ERROR:
+      console.error(event.payload);
+      errorToast('Diagram export failed!');
+      break;
+    default:
+      break;
   }
 };
 
diff --git a/packages/ds-ext/src/app/VsCodeToast.tsx b/packages/ds-ext/src/app/VsCodeToast.tsx
index 5f805346..472abd87 100644
--- a/packages/ds-ext/src/app/VsCodeToast.tsx
+++ b/packages/ds-ext/src/app/VsCodeToast.tsx
@@ -33,6 +33,25 @@ export function VsCodeToast({ postMessage }: {
         console.error(event.payload);
         info.message = 'Diagram save failed!';
         info.status = 'error';
+        break;
+      case DataStoryEvents.IMPORT_SUCCESS:
+        info.message = 'Diagram imported successfully!';
+        break;
+      case DataStoryEvents.IMPORT_ERROR:
+        console.error(event.payload);
+        info.message = 'Diagram import failed!';
+        info.status = 'error';
+        break;
+      case DataStoryEvents.EXPORT_SUCCESS:
+        info.message = 'Diagram exported successfully!';
+        break;
+      case DataStoryEvents.EXPORT_ERROR:
+        console.error(event.payload);
+        info.message = 'Diagram export failed!';
+        info.status = 'error';
+        break;
+      default:
+        break;
     }
     postMessage(info);
   });
diff --git a/packages/ui/src/components/DataStory/controls/defaultExport.ts b/packages/ui/src/components/DataStory/controls/defaultExport.ts
index 9658ed03..82cea171 100644
--- a/packages/ui/src/components/DataStory/controls/defaultExport.ts
+++ b/packages/ui/src/components/DataStory/controls/defaultExport.ts
@@ -1,14 +1,29 @@
 import { Diagram } from '@data-story/core';
 
-export const defaultExport = (diagram: Diagram) =>{
-  const json = JSON.stringify(diagram, null, 2);
-  const blob = new Blob([json], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `diagram-${new Date().toISOString().slice(0,10)}.diagram.json`;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-}
\ No newline at end of file
+export const defaultExport = async (diagram: Diagram) => {
+  try {
+    const json = JSON.stringify(diagram, null, 2);
+
+    const blob = new Blob([json], { type: 'application/json' });
+
+    // use File System Access API to let user choose save location
+    const handle = await (window as any).showSaveFilePicker({
+      suggestedName: `diagram-${new Date().toISOString().slice(0,10)}.diagram.json`,
+      types: [
+        {
+          description: 'JSON Files',
+          accept: { 'application/json': ['.json'] },
+        },
+      ],
+    });
+
+    // Write the Blob to the user-selected file
+    const writable = await handle.createWritable();
+    await writable.write(blob);
+    await writable.close();
+
+    console.log('文件已成功保存！');
+  } catch (error) {
+    console.error('文件保存失败:', error);
+  }
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/events/dataStoryEventType.ts b/packages/ui/src/components/DataStory/events/dataStoryEventType.ts
index d34f8561..14968f5e 100644
--- a/packages/ui/src/components/DataStory/events/dataStoryEventType.ts
+++ b/packages/ui/src/components/DataStory/events/dataStoryEventType.ts
@@ -5,7 +5,11 @@ export enum DataStoryEvents {
   'RUN_SUCCESS' = 'RUN_SUCCESS',
   'RUN_ERROR' = 'RUN_ERROR',
   'SAVE_SUCCESS' = 'SAVE_SUCCESS',
-  'SAVE_ERROR' = 'SAVE_ERROR'
+  'SAVE_ERROR' = 'SAVE_ERROR',
+  'IMPORT_SUCCESS' = 'IMPORT_SUCCESS',
+  'IMPORT_ERROR' = 'IMPORT_ERROR',
+  'EXPORT_SUCCESS' = 'EXPORT_SUCCESS',
+  'EXPORT_ERROR' = 'EXPORT_ERROR'
 }
 
 export type DataStoryEventType = {

From 65069eba2c8fea494b99d802600dc220b6ac17a0 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 19:30:36 +0800
Subject: [PATCH 07/16] feat: implement toast notifications for import and
 export diagram actions

---
 .../DataStory/controls/dataStoryControls.tsx  | 39 ++++++++++++++++---
 .../DataStory/controls/defaultExport.ts       |  5 +--
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
index 765b8400..9c3c056d 100644
--- a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
@@ -10,6 +10,8 @@ import { ExportIcon } from '../icons/export';
 import { ImportIcon } from '../icons/importIcon';
 import { defaultImport } from './defaultImport';
 import { defaultExport } from './defaultExport';
+import { eventManager } from '../events/eventManager';
+import { DataStoryEvents } from '../events/dataStoryEventType';
 
 export type DataStoryControlsType = {
   getDiagram: () => Diagram;
@@ -59,14 +61,39 @@ export function DataStoryControls({
   }), [updateDiagram, toDiagram]);
 
   const handleImport = async () => {
-    const diagram = await defaultImport();
-    updateDiagram(diagram);
+    try {
+      const diagram = await defaultImport();
+      updateDiagram(diagram);
+      eventManager.emit({
+        type: DataStoryEvents.IMPORT_SUCCESS,
+      });
+    } catch (error: any & { message: string }) {
+      eventManager.emit({
+        type: DataStoryEvents.IMPORT_ERROR,
+        payload: {
+          message: error.message,
+        },
+      });
+    }
   }
 
-  const handleExport = () => {
-    const diagram = toDiagram();
-    defaultExport(diagram);
+  const handleExport = async() => {
+    try {
+      const diagram = toDiagram();
+      await defaultExport(diagram);
+      eventManager.emit({
+        type: DataStoryEvents.EXPORT_SUCCESS,
+      });
+    } catch(error: any & { message: string }) {
+      eventManager.emit({
+        type: DataStoryEvents.EXPORT_ERROR,
+        payload: {
+          message: error.message,
+        },
+      });
+    }
   }
+
   const handleSave = useCallback(() => {
     onSave?.(toDiagram());
   }, [onSave]);
@@ -136,4 +163,4 @@ export function DataStoryControls({
       ))}
     </DataStoryControlsContext.Provider>
   </Controls>;
-}
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/controls/defaultExport.ts b/packages/ui/src/components/DataStory/controls/defaultExport.ts
index 82cea171..95c8deab 100644
--- a/packages/ui/src/components/DataStory/controls/defaultExport.ts
+++ b/packages/ui/src/components/DataStory/controls/defaultExport.ts
@@ -21,9 +21,8 @@ export const defaultExport = async (diagram: Diagram) => {
     const writable = await handle.createWritable();
     await writable.write(blob);
     await writable.close();
-
-    console.log('文件已成功保存！');
   } catch (error) {
-    console.error('文件保存失败:', error);
+    console.error('the file save failed!', error);
+    throw new Error('the file save failed');
   }
 };
\ No newline at end of file

From e794c9d6a5dd91f7528f4b0b89a7c807e97297aa Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Thu, 6 Feb 2025 19:37:49 +0800
Subject: [PATCH 08/16] feat: update the docs demo

---
 packages/docs/components/demos/ObserversDemo.tsx            | 2 +-
 packages/docs/components/demos/TinkerDemo.tsx               | 2 +-
 packages/docs/components/demos/Tree/AddNodeDescription.tsx  | 2 +-
 packages/docs/components/demos/Tree/MultipleDiagram.tsx     | 2 +-
 packages/docs/components/demos/UnfoldingDemo.tsx            | 6 +++---
 packages/docs/components/demos/VisualizeDemo.tsx            | 2 +-
 packages/ds-ext/src/app/DiagramApp.tsx                      | 2 +-
 .../src/components/DataStory/controls/dataStoryControls.tsx | 2 +-
 packages/ui/src/components/DataStory/types.ts               | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/docs/components/demos/ObserversDemo.tsx b/packages/docs/components/demos/ObserversDemo.tsx
index 32c146d6..f41fc8b2 100644
--- a/packages/docs/components/demos/ObserversDemo.tsx
+++ b/packages/docs/components/demos/ObserversDemo.tsx
@@ -129,7 +129,7 @@ const ObserversDemo = () => {
             setPoints([]);
             run();
           }}
-          hideControls={['save']}
+          hideControls={['save', 'import']}
           client={client}
         />
       </div>
diff --git a/packages/docs/components/demos/TinkerDemo.tsx b/packages/docs/components/demos/TinkerDemo.tsx
index e314ced1..bede2502 100644
--- a/packages/docs/components/demos/TinkerDemo.tsx
+++ b/packages/docs/components/demos/TinkerDemo.tsx
@@ -40,7 +40,7 @@ export default () => {
     <div className="w-full h-1/2">
       <DataStory
         client={client}
-        hideControls={['save']}
+        hideControls={['save', 'import']}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/AddNodeDescription.tsx b/packages/docs/components/demos/Tree/AddNodeDescription.tsx
index 5039aaf2..d12f733a 100644
--- a/packages/docs/components/demos/Tree/AddNodeDescription.tsx
+++ b/packages/docs/components/demos/Tree/AddNodeDescription.tsx
@@ -36,7 +36,7 @@ export default () => {
       <DataStory
         client={client}
         hideActivityBar={true}
-        hideControls={['save']}
+        hideControls={['save', 'import']}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/MultipleDiagram.tsx b/packages/docs/components/demos/Tree/MultipleDiagram.tsx
index e89ff13e..03724b03 100644
--- a/packages/docs/components/demos/Tree/MultipleDiagram.tsx
+++ b/packages/docs/components/demos/Tree/MultipleDiagram.tsx
@@ -17,7 +17,7 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        hideControls={['save']}
+        hideControls={['save', 'import']}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/UnfoldingDemo.tsx b/packages/docs/components/demos/UnfoldingDemo.tsx
index 733dcf4e..e20cb186 100644
--- a/packages/docs/components/demos/UnfoldingDemo.tsx
+++ b/packages/docs/components/demos/UnfoldingDemo.tsx
@@ -103,16 +103,16 @@ export default ({ part }: { part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED' }) =>
     <div className="w-full h-1/4">
       {part === 'MAIN' && (
         <DataStory
-          hideControls={['save']}
+          hideControls={['save', 'import']}
           onInitialize={({ run }) => run()}
           client={clients.mainClient}
         />
       )}
       {part === 'NESTED_NODE' && (
-        <DataStory hideControls={['save']} client={clients.nestedNodeClient!} />
+        <DataStory hideControls={['save', 'import']} client={clients.nestedNodeClient!} />
       )}
       {part === 'MAIN_UNFOLDED' && (
-        <DataStory hideControls={['save']} client={clients.mainUnfoldedClient!} />
+        <DataStory hideControls={['save', 'import']} client={clients.mainUnfoldedClient!} />
       )}
     </div>
   );
diff --git a/packages/docs/components/demos/VisualizeDemo.tsx b/packages/docs/components/demos/VisualizeDemo.tsx
index d1234936..b42f15a0 100644
--- a/packages/docs/components/demos/VisualizeDemo.tsx
+++ b/packages/docs/components/demos/VisualizeDemo.tsx
@@ -128,7 +128,7 @@ export default () => {
             setPoints([])
             run()
           }}
-          hideControls={['save']}
+          hideControls={['save', 'import']}
           client={client}
         />
       </div>
diff --git a/packages/ds-ext/src/app/DiagramApp.tsx b/packages/ds-ext/src/app/DiagramApp.tsx
index 0520b6a2..19f63cc0 100644
--- a/packages/ds-ext/src/app/DiagramApp.tsx
+++ b/packages/ds-ext/src/app/DiagramApp.tsx
@@ -24,7 +24,7 @@ export default function DiagramApp() {
         key={'abc'}
         onChange={handleChange}
         onDrop={onDrop}
-        hideControls={['save']}
+        hideControls={['save', 'import']}
       />
       <VsCodeToast postMessage={window.vscode.postMessage} />
     </div>
diff --git a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
index 9c3c056d..bc6fa754 100644
--- a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
@@ -141,7 +141,7 @@ export function DataStoryControls({
       <ExportIcon />
     </ControlButton>,
     <ControlButton
-      title="import"
+      title="Import"
       aria-label="import"
       key="import"
       onClick={handleImport}
diff --git a/packages/ui/src/components/DataStory/types.ts b/packages/ui/src/components/DataStory/types.ts
index b137f7a6..e2ffab60 100644
--- a/packages/ui/src/components/DataStory/types.ts
+++ b/packages/ui/src/components/DataStory/types.ts
@@ -27,7 +27,7 @@ export interface ClientRunParams {
 }
 
 export type AcitvityBarType = 'node' | 'diagram' | 'settings' | 'explorer';
-type ControlsType = 'run' | 'addNode' | 'save';
+type ControlsType = 'run' | 'addNode' | 'save' | 'export' | 'import';
 export type DataStoryProps = {
   onNodeDoubleClick?: (node: ReactFlowNode) => void,
   children?: React.ReactNode;

From 655f69449cdfb4257787815846edc4051583a2d3 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Mon, 17 Feb 2025 22:34:51 +0800
Subject: [PATCH 09/16] feat: Add DataStory controls and related components

---
 .../components/DataStory/DataStoryCanvas.tsx  |   2 +-
 .../DataStory/controls/AddNodeControl.tsx     |  17 ++
 .../DataStory/controls/DataStoryControls.tsx  |  95 ++++++++++
 .../DataStory/controls/ExportControl.tsx      |  64 +++++++
 .../{defaultImport.ts => ImportControl.tsx}   |  40 ++++-
 .../DataStory/controls/RunControl.tsx         |  21 +++
 .../DataStory/controls/SaveControl.tsx        |  21 +++
 .../DataStory/controls/dataStoryControls.tsx  | 166 ------------------
 .../DataStory/controls/defaultExport.ts       |  28 ---
 packages/ui/src/index.ts                      |   4 +-
 10 files changed, 259 insertions(+), 199 deletions(-)
 create mode 100644 packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
 create mode 100644 packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
 create mode 100644 packages/ui/src/components/DataStory/controls/ExportControl.tsx
 rename packages/ui/src/components/DataStory/controls/{defaultImport.ts => ImportControl.tsx} (60%)
 create mode 100644 packages/ui/src/components/DataStory/controls/RunControl.tsx
 create mode 100644 packages/ui/src/components/DataStory/controls/SaveControl.tsx
 delete mode 100644 packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
 delete mode 100644 packages/ui/src/components/DataStory/controls/defaultExport.ts

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
index cdf1cabf..f87426d8 100644
--- a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
+++ b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -1,4 +1,4 @@
-import { DataStoryControls } from './controls/dataStoryControls';
+import { DataStoryControls } from './controls/DataStoryControls';
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import {
   Background,
diff --git a/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
new file mode 100644
index 00000000..d550e568
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
@@ -0,0 +1,17 @@
+import { ControlButton } from '@xyflow/react';
+import { AddNodeIcon } from '../icons/addNodeIcon';
+
+export const AddNodeControl = ({ setShowAddNode }: { setShowAddNode: (show: boolean) => void }) => (
+  <ControlButton
+    onClick={() => setShowAddNode(true)}
+    title="Add Node"
+    data-cy="add-node-button"
+    aria-label="addNode"
+  >
+    <AddNodeIcon/>
+  </ControlButton>
+);
+
+AddNodeControl.defaultProps = {
+  ariaLabel: 'addNode'
+};
diff --git a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
new file mode 100644
index 00000000..5ef52734
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
@@ -0,0 +1,95 @@
+import { ControlButton, Controls } from '@xyflow/react';
+import { RunIcon } from '../icons/runIcon';
+import { AddNodeIcon } from '../icons/addNodeIcon';
+import { Diagram } from '@data-story/core';
+import { useStore } from '../store/store';
+import React, { useCallback, useMemo } from 'react';
+import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from '../types';
+import { SaveIcon } from '../icons/saveIcon';
+import { ExportIcon } from '../icons/export';
+import { ImportIcon } from '../icons/importIcon';
+import { eventManager } from '../events/eventManager';
+import { DataStoryEvents } from '../events/dataStoryEventType';
+import { RunControl } from './RunControl';
+import { AddNodeControl } from './AddNodeControl';
+import { SaveControl } from './SaveControl';
+import { ExportControl } from './ExportControl';
+import { ImportControl } from './ImportControl';
+
+export type DataStoryControlsType = {
+  getDiagram: () => Diagram;
+  updateDiagram: (diagram: Diagram) => void;
+  onSave?: DataStoryCanvasProps['onSave'];
+};
+
+const DataStoryControlsContext = React.createContext<DataStoryControlsType>(null as unknown as DataStoryControlsType);
+
+export function useDataStoryControls() {
+  const result = React.useContext(DataStoryControlsContext);
+  if (!result) {
+    throw new Error('useDataStoryControls must be used within a DataStoryControlsContext');
+  }
+  return result;
+}
+
+export function DataStoryControls({
+  hideControls = false,
+  setShowRun,
+  setShowAddNode,
+  slotComponents,
+  onSave,
+}: {
+  hideControls?: DataStoryProps['hideControls'];
+  setShowRun: (showRun: boolean) => void;
+  setShowAddNode: (showAddNode: boolean) => void;
+  slotComponents?: React.ReactNode[];
+  onSave?: DataStoryCanvasProps['onSave'];
+}) {
+  const selector = (state: StoreSchema) => ({
+    toDiagram: state.toDiagram,
+    updateDiagram: state.updateDiagram,
+    onRun: state.onRun,
+  });
+
+  const { toDiagram, updateDiagram, onRun } = useStore(selector);
+
+  const context: DataStoryControlsType = useMemo(() => ({
+    getDiagram: () => {
+      return toDiagram();
+    },
+    updateDiagram: (diagram: Diagram) => {
+      updateDiagram(diagram);
+    },
+    onSave: onSave,
+  }), [updateDiagram, toDiagram]);
+
+  if (hideControls === true) return null;
+
+  return (
+    <DataStoryControlsContext.Provider value={context}>
+      <Controls>
+        {[
+          RunControl,
+          AddNodeControl,
+          SaveControl,
+          ExportControl,
+          ImportControl,
+        ].filter((Component) => {
+          if (Array.isArray(hideControls)) {
+            // @ts-ignore todo
+            return !hideControls.includes(Component.defaultProps?.ariaLabel);
+          }
+          return true;
+        }).map((Component, index) => (
+          <Component key={index} setShowAddNode={setShowAddNode} />
+        ))}
+
+        {(slotComponents || []).map((component, index) => (
+          <React.Fragment key={index}>
+            {component}
+          </React.Fragment>
+        ))}
+      </Controls>
+    </DataStoryControlsContext.Provider>
+  );
+}
diff --git a/packages/ui/src/components/DataStory/controls/ExportControl.tsx b/packages/ui/src/components/DataStory/controls/ExportControl.tsx
new file mode 100644
index 00000000..f6535f3a
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/ExportControl.tsx
@@ -0,0 +1,64 @@
+import { ControlButton } from '@xyflow/react';
+import { ExportIcon } from '../icons/export';
+import { useDataStoryControls } from './DataStoryControls';
+import { eventManager } from '../events/eventManager';
+import { DataStoryEvents } from '../events/dataStoryEventType';
+import { Diagram } from '@data-story/core';
+
+const defaultExport = async (diagram: Diagram) => {
+  try {
+    const json = JSON.stringify(diagram, null, 2);
+
+    const blob = new Blob([json], { type: 'application/json' });
+
+    // use File System Access API to let user choose save location
+    const handle = await (window as any).showSaveFilePicker({
+      suggestedName: `diagram-${new Date().toISOString().slice(0,10)}.diagram.json`,
+      types: [
+        {
+          description: 'JSON Files',
+          accept: { 'application/json': ['.json'] },
+        },
+      ],
+    });
+
+    // Write the Blob to the user-selected file
+    const writable = await handle.createWritable();
+    await writable.write(blob);
+    await writable.close();
+  } catch (error) {
+    console.error('the file save failed!', error);
+    throw new Error('the file save failed');
+  }
+};
+
+export const ExportControl = () => {
+  const { getDiagram } = useDataStoryControls();
+
+  const handleExport = async () => {
+    try {
+      const diagram = getDiagram();
+      await defaultExport(diagram);
+      eventManager.emit({ type: DataStoryEvents.EXPORT_SUCCESS });
+    } catch(error: any) {
+      eventManager.emit({
+        type: DataStoryEvents.EXPORT_ERROR,
+        payload: { message: error.message },
+      });
+    }
+  };
+
+  return (
+    <ControlButton
+      title="Export"
+      aria-label="export"
+      onClick={handleExport}
+    >
+      <ExportIcon />
+    </ControlButton>
+  );
+};
+
+ExportControl.defaultProps = {
+  ariaLabel: 'export',
+};
diff --git a/packages/ui/src/components/DataStory/controls/defaultImport.ts b/packages/ui/src/components/DataStory/controls/ImportControl.tsx
similarity index 60%
rename from packages/ui/src/components/DataStory/controls/defaultImport.ts
rename to packages/ui/src/components/DataStory/controls/ImportControl.tsx
index bd34d275..657deb90 100644
--- a/packages/ui/src/components/DataStory/controls/defaultImport.ts
+++ b/packages/ui/src/components/DataStory/controls/ImportControl.tsx
@@ -1,6 +1,11 @@
+import { ControlButton } from '@xyflow/react';
+import { ImportIcon } from '../icons/importIcon';
+import { useDataStoryControls } from './DataStoryControls';
+import { eventManager } from '../events/eventManager';
+import { DataStoryEvents } from '../events/dataStoryEventType';
 import { Diagram } from '@data-story/core';
 
-export const defaultImport = (): Promise<Diagram> => {
+const defaultImport = (): Promise<Diagram> => {
   return new Promise((resolve, reject) => {
     // create an input element
     const input = document.createElement('input');
@@ -48,4 +53,35 @@ export const defaultImport = (): Promise<Diagram> => {
     document.body.appendChild(input);
     input.click();
   });
-};
\ No newline at end of file
+};
+
+export const ImportControl = () => {
+  const { updateDiagram } = useDataStoryControls();
+
+  const handleImport = async () => {
+    try {
+      const diagram = await defaultImport();
+      updateDiagram(diagram);
+      eventManager.emit({ type: DataStoryEvents.IMPORT_SUCCESS });
+    } catch (error: any) {
+      eventManager.emit({
+        type: DataStoryEvents.IMPORT_ERROR,
+        payload: { message: error.message },
+      });
+    }
+  };
+
+  return (
+    <ControlButton
+      title="Import"
+      aria-label="import"
+      onClick={handleImport}
+    >
+      <ImportIcon />
+    </ControlButton>
+  );
+};
+
+ImportControl.defaultProps = {
+  ariaLabel: 'import',
+};
diff --git a/packages/ui/src/components/DataStory/controls/RunControl.tsx b/packages/ui/src/components/DataStory/controls/RunControl.tsx
new file mode 100644
index 00000000..6347f9d2
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/RunControl.tsx
@@ -0,0 +1,21 @@
+import { ControlButton } from '@xyflow/react';
+import { RunIcon } from '../icons/runIcon';
+import { useStore } from '../store/store';
+
+export const RunControl = () => {
+  const onRun = useStore((state) => state.onRun);
+  
+  return (
+    <ControlButton
+      title="Run"
+      aria-label="run"
+      onClick={() => onRun()}
+    >
+      <RunIcon/>
+    </ControlButton>
+  );
+};
+
+RunControl.defaultProps = {
+  ariaLabel: 'run'
+};
diff --git a/packages/ui/src/components/DataStory/controls/SaveControl.tsx b/packages/ui/src/components/DataStory/controls/SaveControl.tsx
new file mode 100644
index 00000000..19b17e74
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/SaveControl.tsx
@@ -0,0 +1,21 @@
+import { ControlButton } from '@xyflow/react';
+import { SaveIcon } from '../icons/saveIcon';
+import { useDataStoryControls } from './DataStoryControls';
+
+export const SaveControl = () => {
+  const { onSave, getDiagram } = useDataStoryControls();
+  
+  return (
+    <ControlButton
+      title="Save"
+      aria-label="save"
+      onClick={() => onSave?.(getDiagram())}
+    >
+      <SaveIcon/>
+    </ControlButton>
+  );
+};
+
+SaveControl.defaultProps = {
+  ariaLabel: 'save'
+};
diff --git a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
deleted file mode 100644
index bc6fa754..00000000
--- a/packages/ui/src/components/DataStory/controls/dataStoryControls.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import { ControlButton, Controls } from '@xyflow/react';
-import { RunIcon } from '../icons/runIcon';
-import { AddNodeIcon } from '../icons/addNodeIcon';
-import { Diagram } from '@data-story/core';
-import { useStore } from '../store/store';
-import React, { useCallback, useMemo } from 'react';
-import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from '../types';
-import { SaveIcon } from '../icons/saveIcon';
-import { ExportIcon } from '../icons/export';
-import { ImportIcon } from '../icons/importIcon';
-import { defaultImport } from './defaultImport';
-import { defaultExport } from './defaultExport';
-import { eventManager } from '../events/eventManager';
-import { DataStoryEvents } from '../events/dataStoryEventType';
-
-export type DataStoryControlsType = {
-  getDiagram: () => Diagram;
-  updateDiagram: (diagram: Diagram) => void;
-  onSave?: DataStoryCanvasProps['onSave'];
-};
-
-const DataStoryControlsContext = React.createContext<DataStoryControlsType>(null as unknown as DataStoryControlsType);
-
-export function useDataStoryControls() {
-  const result = React.useContext(DataStoryControlsContext);
-  if (!result) {
-    throw new Error('useDataStoryControls must be used within a DataStoryControlsContext');
-  }
-  return result;
-}
-
-export function DataStoryControls({
-  hideControls = false,
-  setShowRun,
-  setShowAddNode,
-  slotComponents,
-  onSave,
-}: {
-  hideControls?: DataStoryProps['hideControls'];
-  setShowRun: (showRun: boolean) => void;
-  setShowAddNode: (showAddNode: boolean) => void;
-  slotComponents?: React.ReactNode[];
-  onSave?: DataStoryCanvasProps['onSave'];
-}) {
-  const selector = (state: StoreSchema) => ({
-    toDiagram: state.toDiagram,
-    updateDiagram: state.updateDiagram,
-    onRun: state.onRun,
-  });
-
-  const { toDiagram, updateDiagram, onRun } = useStore(selector);
-
-  const context: DataStoryControlsType = useMemo(() => ({
-    getDiagram: () => {
-      return toDiagram();
-    },
-    updateDiagram: (diagram: Diagram) => {
-      updateDiagram(diagram);
-    },
-    onSave: onSave,
-  }), [updateDiagram, toDiagram]);
-
-  const handleImport = async () => {
-    try {
-      const diagram = await defaultImport();
-      updateDiagram(diagram);
-      eventManager.emit({
-        type: DataStoryEvents.IMPORT_SUCCESS,
-      });
-    } catch (error: any & { message: string }) {
-      eventManager.emit({
-        type: DataStoryEvents.IMPORT_ERROR,
-        payload: {
-          message: error.message,
-        },
-      });
-    }
-  }
-
-  const handleExport = async() => {
-    try {
-      const diagram = toDiagram();
-      await defaultExport(diagram);
-      eventManager.emit({
-        type: DataStoryEvents.EXPORT_SUCCESS,
-      });
-    } catch(error: any & { message: string }) {
-      eventManager.emit({
-        type: DataStoryEvents.EXPORT_ERROR,
-        payload: {
-          message: error.message,
-        },
-      });
-    }
-  }
-
-  const handleSave = useCallback(() => {
-    onSave?.(toDiagram());
-  }, [onSave]);
-
-  if (hideControls === true) return null;
-
-  return <Controls position={'top-left'} showInteractive={false} showZoom={false} showFitView={false}>
-    {[<ControlButton
-      title="Run"
-      aria-label="run"
-      key="run"
-      onClick={() => {
-        // If no parameters are present, run the diagram immediately
-        onRun();
-
-        // // TODO
-        // // If parameters is present, do show the run modal
-        // setShowRun(true)
-      }}
-    >
-      <RunIcon/>
-    </ControlButton>,
-    <ControlButton
-      onClick={() => setShowAddNode(true)}
-      title="Add Node"
-      data-cy="add-node-button"
-      key="addNode"
-      aria-label="addNode"
-    >
-      <AddNodeIcon/>
-    </ControlButton>,
-    <ControlButton
-      title="Save"
-      aria-label="save"
-      key="save"
-      onClick={handleSave}>
-      <SaveIcon/>
-    </ControlButton>,
-    <ControlButton
-      title="Export"
-      aria-label="export"
-      key="export"
-      onClick={handleExport}
-    >
-      <ExportIcon />
-    </ControlButton>,
-    <ControlButton
-      title="Import"
-      aria-label="import"
-      key="import"
-      onClick={handleImport}
-    >
-      <ImportIcon />
-    </ControlButton>,
-    ].filter((ControlButton) => {
-      if (Array.isArray(hideControls)) {
-        return !hideControls.includes(ControlButton.props['aria-label']);
-      }
-      return true;
-    })}
-
-    <DataStoryControlsContext.Provider value={context}>
-      {(slotComponents || []).map((component, index) => (
-        <React.Fragment key={index}>
-          {component}
-        </React.Fragment>
-      ))}
-    </DataStoryControlsContext.Provider>
-  </Controls>;
-}
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/controls/defaultExport.ts b/packages/ui/src/components/DataStory/controls/defaultExport.ts
deleted file mode 100644
index 95c8deab..00000000
--- a/packages/ui/src/components/DataStory/controls/defaultExport.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Diagram } from '@data-story/core';
-
-export const defaultExport = async (diagram: Diagram) => {
-  try {
-    const json = JSON.stringify(diagram, null, 2);
-
-    const blob = new Blob([json], { type: 'application/json' });
-
-    // use File System Access API to let user choose save location
-    const handle = await (window as any).showSaveFilePicker({
-      suggestedName: `diagram-${new Date().toISOString().slice(0,10)}.diagram.json`,
-      types: [
-        {
-          description: 'JSON Files',
-          accept: { 'application/json': ['.json'] },
-        },
-      ],
-    });
-
-    // Write the Blob to the user-selected file
-    const writable = await handle.createWritable();
-    await writable.write(blob);
-    await writable.close();
-  } catch (error) {
-    console.error('the file save failed!', error);
-    throw new Error('the file save failed');
-  }
-};
\ No newline at end of file
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 926a420e..31fc9d13 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -4,13 +4,13 @@ export { DataStoryCanvasProvider } from './components/DataStory/store/store';
 export { DropDown } from './components/DropDown';
 export { SaveIcon } from './components/DataStory/icons/saveIcon'
 export { OpenIcon } from './components/DataStory/icons/openIcon'
-export { useDataStoryControls } from './components/DataStory/controls/dataStoryControls';
+export { useDataStoryControls } from './components/DataStory/controls/DataStoryControls';
 export { eventManager, useDataStoryEvent } from './components/DataStory/events/eventManager'
 export { DataStoryEvents, type DataStoryEventType } from './components/DataStory/events/dataStoryEventType'
 export type { DataStoryProps, ClientRunParams, ServerClientObservationConfig } from './components/DataStory/types'
 export { default as NodeComponent } from './components/Node/NodeComponent';
 export { createJSClient } from './components/DataStory/clients/createJSClient';
-export type { DataStoryControlsType } from './components/DataStory/controls/dataStoryControls';
+export type { DataStoryControlsType } from './components/DataStory/controls/DataStoryControls';
 export type { WorkspaceApiClientImplement } from './components/DataStory/clients/WorkspaceApiClientImplement';
 export { processWaitingResponse, waitForResponse } from './components/DataStory/clients/WebSocketHandleResponseMiddleware';
 export { createSocketClient } from './components/DataStory/clients/createSocketClient';

From b42eda657770c9e63159f91ab8c26467f6f8f4f8 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Mon, 17 Feb 2025 22:44:45 +0800
Subject: [PATCH 10/16] feat: Add ControlsType to DataStory types and controls
 components

---
 .../DataStory/controls/AddNodeControl.tsx       |  3 ++-
 .../DataStory/controls/DataStoryControls.tsx    | 17 +++++------------
 .../DataStory/controls/ExportControl.tsx        |  3 ++-
 .../DataStory/controls/ImportControl.tsx        |  3 ++-
 .../DataStory/controls/RunControl.tsx           |  5 +++--
 .../DataStory/controls/SaveControl.tsx          |  5 +++--
 packages/ui/src/components/DataStory/types.ts   |  2 +-
 7 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
index d550e568..4305ef37 100644
--- a/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
@@ -1,5 +1,6 @@
 import { ControlButton } from '@xyflow/react';
 import { AddNodeIcon } from '../icons/addNodeIcon';
+import { ControlsType } from '../types';
 
 export const AddNodeControl = ({ setShowAddNode }: { setShowAddNode: (show: boolean) => void }) => (
   <ControlButton
@@ -13,5 +14,5 @@ export const AddNodeControl = ({ setShowAddNode }: { setShowAddNode: (show: bool
 );
 
 AddNodeControl.defaultProps = {
-  ariaLabel: 'addNode'
+  ariaLabel: 'addNode' as ControlsType,
 };
diff --git a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
index 5ef52734..9f0ce6c7 100644
--- a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
@@ -1,15 +1,8 @@
-import { ControlButton, Controls } from '@xyflow/react';
-import { RunIcon } from '../icons/runIcon';
-import { AddNodeIcon } from '../icons/addNodeIcon';
+import { Controls } from '@xyflow/react';
 import { Diagram } from '@data-story/core';
 import { useStore } from '../store/store';
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from '../types';
-import { SaveIcon } from '../icons/saveIcon';
-import { ExportIcon } from '../icons/export';
-import { ImportIcon } from '../icons/importIcon';
-import { eventManager } from '../events/eventManager';
-import { DataStoryEvents } from '../events/dataStoryEventType';
 import { RunControl } from './RunControl';
 import { AddNodeControl } from './AddNodeControl';
 import { SaveControl } from './SaveControl';
@@ -66,8 +59,9 @@ export function DataStoryControls({
   if (hideControls === true) return null;
 
   return (
+
     <DataStoryControlsContext.Provider value={context}>
-      <Controls>
+      <Controls position={'top-left'} showInteractive={false} showZoom={false} showFitView={false}>
         {[
           RunControl,
           AddNodeControl,
@@ -76,12 +70,11 @@ export function DataStoryControls({
           ImportControl,
         ].filter((Component) => {
           if (Array.isArray(hideControls)) {
-            // @ts-ignore todo
             return !hideControls.includes(Component.defaultProps?.ariaLabel);
           }
           return true;
         }).map((Component, index) => (
-          <Component key={index} setShowAddNode={setShowAddNode} />
+          <Component key={index} setShowAddNode={setShowAddNode}/>
         ))}
 
         {(slotComponents || []).map((component, index) => (
diff --git a/packages/ui/src/components/DataStory/controls/ExportControl.tsx b/packages/ui/src/components/DataStory/controls/ExportControl.tsx
index f6535f3a..932c3903 100644
--- a/packages/ui/src/components/DataStory/controls/ExportControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/ExportControl.tsx
@@ -4,6 +4,7 @@ import { useDataStoryControls } from './DataStoryControls';
 import { eventManager } from '../events/eventManager';
 import { DataStoryEvents } from '../events/dataStoryEventType';
 import { Diagram } from '@data-story/core';
+import { ControlsType } from '../types';
 
 const defaultExport = async (diagram: Diagram) => {
   try {
@@ -60,5 +61,5 @@ export const ExportControl = () => {
 };
 
 ExportControl.defaultProps = {
-  ariaLabel: 'export',
+  ariaLabel: 'export' as ControlsType,
 };
diff --git a/packages/ui/src/components/DataStory/controls/ImportControl.tsx b/packages/ui/src/components/DataStory/controls/ImportControl.tsx
index 657deb90..452401f7 100644
--- a/packages/ui/src/components/DataStory/controls/ImportControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/ImportControl.tsx
@@ -4,6 +4,7 @@ import { useDataStoryControls } from './DataStoryControls';
 import { eventManager } from '../events/eventManager';
 import { DataStoryEvents } from '../events/dataStoryEventType';
 import { Diagram } from '@data-story/core';
+import { ControlsType } from '../types';
 
 const defaultImport = (): Promise<Diagram> => {
   return new Promise((resolve, reject) => {
@@ -83,5 +84,5 @@ export const ImportControl = () => {
 };
 
 ImportControl.defaultProps = {
-  ariaLabel: 'import',
+  ariaLabel: 'import' as ControlsType,
 };
diff --git a/packages/ui/src/components/DataStory/controls/RunControl.tsx b/packages/ui/src/components/DataStory/controls/RunControl.tsx
index 6347f9d2..e177e97e 100644
--- a/packages/ui/src/components/DataStory/controls/RunControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/RunControl.tsx
@@ -1,10 +1,11 @@
 import { ControlButton } from '@xyflow/react';
 import { RunIcon } from '../icons/runIcon';
 import { useStore } from '../store/store';
+import { ControlsType } from '../types';
 
 export const RunControl = () => {
   const onRun = useStore((state) => state.onRun);
-  
+
   return (
     <ControlButton
       title="Run"
@@ -17,5 +18,5 @@ export const RunControl = () => {
 };
 
 RunControl.defaultProps = {
-  ariaLabel: 'run'
+  ariaLabel: 'run'  as ControlsType,
 };
diff --git a/packages/ui/src/components/DataStory/controls/SaveControl.tsx b/packages/ui/src/components/DataStory/controls/SaveControl.tsx
index 19b17e74..a32b0c53 100644
--- a/packages/ui/src/components/DataStory/controls/SaveControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/SaveControl.tsx
@@ -1,10 +1,11 @@
 import { ControlButton } from '@xyflow/react';
 import { SaveIcon } from '../icons/saveIcon';
 import { useDataStoryControls } from './DataStoryControls';
+import { ControlsType } from '../types';
 
 export const SaveControl = () => {
   const { onSave, getDiagram } = useDataStoryControls();
-  
+
   return (
     <ControlButton
       title="Save"
@@ -17,5 +18,5 @@ export const SaveControl = () => {
 };
 
 SaveControl.defaultProps = {
-  ariaLabel: 'save'
+  ariaLabel: 'save' as ControlsType,
 };
diff --git a/packages/ui/src/components/DataStory/types.ts b/packages/ui/src/components/DataStory/types.ts
index e2ffab60..22be72fb 100644
--- a/packages/ui/src/components/DataStory/types.ts
+++ b/packages/ui/src/components/DataStory/types.ts
@@ -27,7 +27,7 @@ export interface ClientRunParams {
 }
 
 export type AcitvityBarType = 'node' | 'diagram' | 'settings' | 'explorer';
-type ControlsType = 'run' | 'addNode' | 'save' | 'export' | 'import';
+export type ControlsType = 'run' | 'addNode' | 'save' | 'export' | 'import';
 export type DataStoryProps = {
   onNodeDoubleClick?: (node: ReactFlowNode) => void,
   children?: React.ReactNode;

From 51fd4a54a76d527c4bf1292c4a9bc49b1a63c93b Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Mon, 17 Feb 2025 23:03:38 +0800
Subject: [PATCH 11/16] refactor: Use context for AddNodeControl

---
 .../components/DataStory/controls/AddNodeControl.tsx  | 11 +++++++----
 .../DataStory/controls/DataStoryControls.tsx          |  8 +++++---
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
index 4305ef37..c8db0ff3 100644
--- a/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
@@ -1,17 +1,20 @@
 import { ControlButton } from '@xyflow/react';
 import { AddNodeIcon } from '../icons/addNodeIcon';
 import { ControlsType } from '../types';
+import { useDataStoryControls } from './DataStoryControls';
 
-export const AddNodeControl = ({ setShowAddNode }: { setShowAddNode: (show: boolean) => void }) => (
-  <ControlButton
+export const AddNodeControl = () => {
+  const { setShowAddNode } = useDataStoryControls();
+
+  return (<ControlButton
     onClick={() => setShowAddNode(true)}
     title="Add Node"
     data-cy="add-node-button"
     aria-label="addNode"
   >
     <AddNodeIcon/>
-  </ControlButton>
-);
+  </ControlButton>)
+};
 
 AddNodeControl.defaultProps = {
   ariaLabel: 'addNode' as ControlsType,
diff --git a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
index 9f0ce6c7..eab1b947 100644
--- a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
@@ -13,6 +13,7 @@ export type DataStoryControlsType = {
   getDiagram: () => Diagram;
   updateDiagram: (diagram: Diagram) => void;
   onSave?: DataStoryCanvasProps['onSave'];
+  setShowAddNode: (showAddNode: boolean) => void;
 };
 
 const DataStoryControlsContext = React.createContext<DataStoryControlsType>(null as unknown as DataStoryControlsType);
@@ -33,7 +34,7 @@ export function DataStoryControls({
   onSave,
 }: {
   hideControls?: DataStoryProps['hideControls'];
-  setShowRun: (showRun: boolean) => void;
+  setShowRun?: (showRun: boolean) => void;
   setShowAddNode: (showAddNode: boolean) => void;
   slotComponents?: React.ReactNode[];
   onSave?: DataStoryCanvasProps['onSave'];
@@ -54,7 +55,8 @@ export function DataStoryControls({
       updateDiagram(diagram);
     },
     onSave: onSave,
-  }), [updateDiagram, toDiagram]);
+    setShowAddNode: setShowAddNode,
+  }), [onSave, setShowAddNode, toDiagram, updateDiagram]);
 
   if (hideControls === true) return null;
 
@@ -74,7 +76,7 @@ export function DataStoryControls({
           }
           return true;
         }).map((Component, index) => (
-          <Component key={index} setShowAddNode={setShowAddNode}/>
+          <Component key={index}/>
         ))}
 
         {(slotComponents || []).map((component, index) => (

From 4ce7625882374ff43744157dae3d360eb3abd0a7 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Mon, 17 Feb 2025 23:36:46 +0800
Subject: [PATCH 12/16] feat: Add import, export, save, and run controls to
 DataStory

---
 packages/docs/components/Playground.tsx       | 12 +++++++-
 .../DataStory/controls/DataStoryControls.tsx  | 28 +++++++++----------
 .../components/DataStory/controls/index.tsx   |  5 ++++
 packages/ui/src/index.ts                      |  1 +
 4 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 packages/ui/src/components/DataStory/controls/index.tsx

diff --git a/packages/docs/components/Playground.tsx b/packages/docs/components/Playground.tsx
index fb1653b5..800c2f21 100644
--- a/packages/docs/components/Playground.tsx
+++ b/packages/docs/components/Playground.tsx
@@ -1,5 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { createJSClient, createSocketClient, DataStory, WorkspaceApiClientImplement } from '@data-story/ui';
+import {
+  createJSClient,
+  createSocketClient,
+  DataStory,
+  WorkspaceApiClientImplement,
+  ExportControl,
+  RunControl,
+  ImportControl,
+  SaveControl,
+} from '@data-story/ui';
 import { useRequestApp } from './hooks/useRequestApp';
 import { ToastComponent } from './Toast';
 
@@ -30,6 +39,7 @@ function Playground({ mode }: { mode?: 'js' | 'node' }) {
     <div className="w-full" style={{ height: 'calc(100vh - 72px)' }} data-cy="playground">
       <DataStory
         client={client}
+        slotComponents={[<RunControl />, <ImportControl />, <ExportControl />, <SaveControl />]}
       >
         <ToastComponent/>
       </DataStory>
diff --git a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
index eab1b947..27c0dafb 100644
--- a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
@@ -64,20 +64,20 @@ export function DataStoryControls({
 
     <DataStoryControlsContext.Provider value={context}>
       <Controls position={'top-left'} showInteractive={false} showZoom={false} showFitView={false}>
-        {[
-          RunControl,
-          AddNodeControl,
-          SaveControl,
-          ExportControl,
-          ImportControl,
-        ].filter((Component) => {
-          if (Array.isArray(hideControls)) {
-            return !hideControls.includes(Component.defaultProps?.ariaLabel);
-          }
-          return true;
-        }).map((Component, index) => (
-          <Component key={index}/>
-        ))}
+        {/*{[*/}
+        {/*  RunControl,*/}
+        {/*  AddNodeControl,*/}
+        {/*  SaveControl,*/}
+        {/*  ExportControl,*/}
+        {/*  ImportControl,*/}
+        {/*].filter((Component) => {*/}
+        {/*  if (Array.isArray(hideControls)) {*/}
+        {/*    return !hideControls.includes(Component.defaultProps?.ariaLabel);*/}
+        {/*  }*/}
+        {/*  return true;*/}
+        {/*}).map((Component, index) => (*/}
+        {/*  <Component key={index}/>*/}
+        {/*))}*/}
 
         {(slotComponents || []).map((component, index) => (
           <React.Fragment key={index}>
diff --git a/packages/ui/src/components/DataStory/controls/index.tsx b/packages/ui/src/components/DataStory/controls/index.tsx
new file mode 100644
index 00000000..5bd229bb
--- /dev/null
+++ b/packages/ui/src/components/DataStory/controls/index.tsx
@@ -0,0 +1,5 @@
+export { AddNodeControl } from './AddNodeControl';
+export { ExportControl } from './ExportControl';
+export { ImportControl } from './ImportControl';
+export { SaveControl } from './SaveControl';
+export { RunControl } from './RunControl';
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 31fc9d13..a400b9a0 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -16,3 +16,4 @@ export { processWaitingResponse, waitForResponse } from './components/DataStory/
 export { createSocketClient } from './components/DataStory/clients/createSocketClient';
 export { createTransport, type TransportConfig } from './components/DataStory/clients/createTransport';
 export { WorkspaceApiClient } from './components/DataStory/clients/WorkspaceApiClient';
+export * from './components/DataStory/controls/index';

From e8f1389394bfefaee0423e51c9e8b9c9530e7bb0 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Tue, 18 Feb 2025 13:43:41 +0800
Subject: [PATCH 13/16] Refactor: Replace `hideControls` with `controls` prop
 in DataStory

---
 packages/docs/components/Playground.tsx       | 10 +++++++---
 packages/docs/components/demos/DocsFlow.tsx   |  2 +-
 packages/docs/components/demos/HeroFlow.tsx   |  2 +-
 packages/docs/components/demos/NodeDemo.tsx   |  2 +-
 .../docs/components/demos/ObserversDemo.tsx   |  4 ++--
 packages/docs/components/demos/TinkerDemo.tsx |  4 ++--
 .../demos/Tree/AddNodeDescription.tsx         |  4 ++--
 .../demos/Tree/CustomActivityBar.tsx          |  2 +-
 packages/docs/components/demos/Tree/Empty.tsx |  2 +-
 .../docs/components/demos/Tree/Loading.tsx    |  2 +-
 .../components/demos/Tree/MultipleDiagram.tsx |  4 ++--
 .../components/demos/Tree/SingleDiagram.tsx   |  2 +-
 .../docs/components/demos/UnfoldingDemo.tsx   |  8 ++++----
 .../docs/components/demos/VisualizeDemo.tsx   |  4 ++--
 packages/ds-ext/src/app/DiagramApp.tsx        |  4 ++--
 .../components/DataStory/DataStoryCanvas.tsx  |  7 ++-----
 .../DataStory/controls/DataStoryControls.tsx  | 19 ++++++-------------
 packages/ui/src/components/DataStory/types.ts |  3 +--
 18 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/packages/docs/components/Playground.tsx b/packages/docs/components/Playground.tsx
index 800c2f21..f3360227 100644
--- a/packages/docs/components/Playground.tsx
+++ b/packages/docs/components/Playground.tsx
@@ -7,7 +7,7 @@ import {
   ExportControl,
   RunControl,
   ImportControl,
-  SaveControl,
+  SaveControl, AddNodeControl,
 } from '@data-story/ui';
 import { useRequestApp } from './hooks/useRequestApp';
 import { ToastComponent } from './Toast';
@@ -34,12 +34,16 @@ function Playground({ mode }: { mode?: 'js' | 'node' }) {
   }, [mode, app, loading]);
 
   if (loading || !client) return null;
-
+  /**
+   * todo:
+   * 1. change the controls to controls
+   * 2. change all docs demos and other demos to use the new controls
+   */
   return (
     <div className="w-full" style={{ height: 'calc(100vh - 72px)' }} data-cy="playground">
       <DataStory
         client={client}
-        slotComponents={[<RunControl />, <ImportControl />, <ExportControl />, <SaveControl />]}
+        controls={[<RunControl/>, <AddNodeControl/>, <SaveControl/>, <ExportControl/>, <ImportControl/>]}
       >
         <ToastComponent/>
       </DataStory>
diff --git a/packages/docs/components/demos/DocsFlow.tsx b/packages/docs/components/demos/DocsFlow.tsx
index 179645d5..7f51baaf 100644
--- a/packages/docs/components/demos/DocsFlow.tsx
+++ b/packages/docs/components/demos/DocsFlow.tsx
@@ -56,7 +56,7 @@ export default () => {
             options.run()
           })
         }}
-        hideControls={true}
+        controls={[]}
         hideActivityBar={true}
       />
     </div>
diff --git a/packages/docs/components/demos/HeroFlow.tsx b/packages/docs/components/demos/HeroFlow.tsx
index f2e63397..4979e091 100644
--- a/packages/docs/components/demos/HeroFlow.tsx
+++ b/packages/docs/components/demos/HeroFlow.tsx
@@ -29,7 +29,7 @@ export default () => {
         client={client}
         initDiagram={diagram}
         onInitialize={(options) => options.run()}
-        hideControls={true}
+        controls={[]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/NodeDemo.tsx b/packages/docs/components/demos/NodeDemo.tsx
index f7706836..fa206498 100644
--- a/packages/docs/components/demos/NodeDemo.tsx
+++ b/packages/docs/components/demos/NodeDemo.tsx
@@ -18,7 +18,7 @@ export default ({ nodeName }: { nodeName: string }) => {
       <DataStory
         client={client}
         initDiagram={diagram}
-        hideControls={true}
+        controls={[]}
       />
     </div>
   </div>
diff --git a/packages/docs/components/demos/ObserversDemo.tsx b/packages/docs/components/demos/ObserversDemo.tsx
index f41fc8b2..1ffe301a 100644
--- a/packages/docs/components/demos/ObserversDemo.tsx
+++ b/packages/docs/components/demos/ObserversDemo.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { DataStory } from '@data-story/ui';
+import { AddNodeControl, DataStory, ExportControl, RunControl } from '@data-story/ui';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -129,7 +129,7 @@ const ObserversDemo = () => {
             setPoints([]);
             run();
           }}
-          hideControls={['save', 'import']}
+          controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
           client={client}
         />
       </div>
diff --git a/packages/docs/components/demos/TinkerDemo.tsx b/packages/docs/components/demos/TinkerDemo.tsx
index bede2502..399a0ed7 100644
--- a/packages/docs/components/demos/TinkerDemo.tsx
+++ b/packages/docs/components/demos/TinkerDemo.tsx
@@ -1,4 +1,4 @@
-import { DataStory } from '@data-story/ui'
+import { AddNodeControl, DataStory, ExportControl, RunControl } from '@data-story/ui'
 import { core, str } from '@data-story/core';
 import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
@@ -40,7 +40,7 @@ export default () => {
     <div className="w-full h-1/2">
       <DataStory
         client={client}
-        hideControls={['save', 'import']}
+        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/AddNodeDescription.tsx b/packages/docs/components/demos/Tree/AddNodeDescription.tsx
index d12f733a..a5f47d7b 100644
--- a/packages/docs/components/demos/Tree/AddNodeDescription.tsx
+++ b/packages/docs/components/demos/Tree/AddNodeDescription.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { DataStory } from '@data-story/ui';
+import { AddNodeControl, DataStory, ExportControl, RunControl } from '@data-story/ui';
 import { core, nodes } from '@data-story/core';
 import { CustomizeJSClient } from '../../splash/CustomizeJSClient';
 import { useMemo } from 'react';
@@ -36,7 +36,7 @@ export default () => {
       <DataStory
         client={client}
         hideActivityBar={true}
-        hideControls={['save', 'import']}
+        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/CustomActivityBar.tsx b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
index effe2e48..c1613bc1 100644
--- a/packages/docs/components/demos/Tree/CustomActivityBar.tsx
+++ b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
@@ -22,7 +22,7 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        hideControls={true}
+        controls={[]}
         hideSidebar={true}
         hideActivityBar={['settings']}
       />
diff --git a/packages/docs/components/demos/Tree/Empty.tsx b/packages/docs/components/demos/Tree/Empty.tsx
index 1a7baec6..4f4c7474 100644
--- a/packages/docs/components/demos/Tree/Empty.tsx
+++ b/packages/docs/components/demos/Tree/Empty.tsx
@@ -16,7 +16,7 @@ export default () => {
       <DataStory
         client={client}
         onInitialize={(options) => options.run()}
-        hideControls={true}
+        controls={[]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/Loading.tsx b/packages/docs/components/demos/Tree/Loading.tsx
index 30b8597d..911d0ccf 100644
--- a/packages/docs/components/demos/Tree/Loading.tsx
+++ b/packages/docs/components/demos/Tree/Loading.tsx
@@ -15,7 +15,7 @@ export default () => {
       <DataStory
         client={client}
         onInitialize={(options) => options.run()}
-        hideControls={true}
+        controls={[]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/MultipleDiagram.tsx b/packages/docs/components/demos/Tree/MultipleDiagram.tsx
index 03724b03..6c8ced6f 100644
--- a/packages/docs/components/demos/Tree/MultipleDiagram.tsx
+++ b/packages/docs/components/demos/Tree/MultipleDiagram.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { createJSClient, DataStory } from '@data-story/ui';
+import { AddNodeControl, createJSClient, DataStory, ExportControl, RunControl } from '@data-story/ui';
 import { useMemo } from 'react';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
@@ -17,7 +17,7 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        hideControls={['save', 'import']}
+        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/SingleDiagram.tsx b/packages/docs/components/demos/Tree/SingleDiagram.tsx
index 5a1e46a0..33553e2e 100644
--- a/packages/docs/components/demos/Tree/SingleDiagram.tsx
+++ b/packages/docs/components/demos/Tree/SingleDiagram.tsx
@@ -22,7 +22,7 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        hideControls={true}
+        controls={[]}
         hideSidebar={true}
         hideActivityBar={true}
       />
diff --git a/packages/docs/components/demos/UnfoldingDemo.tsx b/packages/docs/components/demos/UnfoldingDemo.tsx
index e20cb186..263c444a 100644
--- a/packages/docs/components/demos/UnfoldingDemo.tsx
+++ b/packages/docs/components/demos/UnfoldingDemo.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { DataStory } from '@data-story/ui';
+import { AddNodeControl, DataStory, ExportControl, RunControl } from '@data-story/ui';
 import { multiline, str, UnfoldedDiagramFactory } from '@data-story/core';
 import { CustomizeJSClient } from '../splash/CustomizeJSClient';
 import { useRequestApp } from '../hooks/useRequestApp';
@@ -103,16 +103,16 @@ export default ({ part }: { part: 'MAIN' | 'NESTED_NODE' | 'MAIN_UNFOLDED' }) =>
     <div className="w-full h-1/4">
       {part === 'MAIN' && (
         <DataStory
-          hideControls={['save', 'import']}
+          controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
           onInitialize={({ run }) => run()}
           client={clients.mainClient}
         />
       )}
       {part === 'NESTED_NODE' && (
-        <DataStory hideControls={['save', 'import']} client={clients.nestedNodeClient!} />
+        <DataStory controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]} client={clients.nestedNodeClient!} />
       )}
       {part === 'MAIN_UNFOLDED' && (
-        <DataStory hideControls={['save', 'import']} client={clients.mainUnfoldedClient!} />
+        <DataStory controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]} client={clients.mainUnfoldedClient!} />
       )}
     </div>
   );
diff --git a/packages/docs/components/demos/VisualizeDemo.tsx b/packages/docs/components/demos/VisualizeDemo.tsx
index b42f15a0..864e82b1 100644
--- a/packages/docs/components/demos/VisualizeDemo.tsx
+++ b/packages/docs/components/demos/VisualizeDemo.tsx
@@ -1,6 +1,6 @@
 import { core, createDataStoryId, ObserveLinkItems, nodes, RequestObserverType, ItemValue, ObserveLinkCounts } from '@data-story/core';
 import React, { useEffect, useMemo } from 'react';
-import { DataStory } from '@data-story/ui';
+import { AddNodeControl, DataStory, ExportControl, RunControl } from '@data-story/ui';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -128,7 +128,7 @@ export default () => {
             setPoints([])
             run()
           }}
-          hideControls={['save', 'import']}
+          controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
           client={client}
         />
       </div>
diff --git a/packages/ds-ext/src/app/DiagramApp.tsx b/packages/ds-ext/src/app/DiagramApp.tsx
index 19f63cc0..4a80e7f3 100644
--- a/packages/ds-ext/src/app/DiagramApp.tsx
+++ b/packages/ds-ext/src/app/DiagramApp.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { debounce, Diagram } from '@data-story/core';
-import { DataStory } from '@data-story/ui';
+import { AddNodeControl, DataStory, ExportControl, RunControl } from '@data-story/ui';
 import { VsCodeToast } from './VsCodeToast';
 import { onDrop } from './onDrop';
 import { createVsCodeClient } from './createVsCodeClient';
@@ -24,7 +24,7 @@ export default function DiagramApp() {
         key={'abc'}
         onChange={handleChange}
         onDrop={onDrop}
-        hideControls={['save', 'import']}
+        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
       />
       <VsCodeToast postMessage={window.vscode.postMessage} />
     </div>
diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
index f87426d8..f44cb10e 100644
--- a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
+++ b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -53,8 +53,7 @@ export const DataStoryCanvas = React.memo(DataStoryCanvasComponent);
 
 const Flow = ({
   initDiagram,
-  hideControls,
-  slotComponents,
+  controls,
   onInitialize,
   setSidebarKey,
   onSave,
@@ -306,9 +305,7 @@ const Flow = ({
       >
         <DataStoryControls
           onSave={onSave}
-          slotComponents={slotComponents}
-          hideControls={hideControls}
-          setShowRun={setShowRun}
+          controls={controls}
           setShowAddNode={setShowAddNode}
         />
         <Background color='#E7E7E7' variant={BackgroundVariant.Lines}/>
diff --git a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
index 27c0dafb..dd390994 100644
--- a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
@@ -27,16 +27,12 @@ export function useDataStoryControls() {
 }
 
 export function DataStoryControls({
-  hideControls = false,
-  setShowRun,
-  setShowAddNode,
-  slotComponents,
-  onSave,
-}: {
-  hideControls?: DataStoryProps['hideControls'];
-  setShowRun?: (showRun: boolean) => void;
+                                    setShowAddNode,
+                                    controls = [],
+                                    onSave,
+                                  }: {
   setShowAddNode: (showAddNode: boolean) => void;
-  slotComponents?: React.ReactNode[];
+  controls?: React.ReactNode[];
   onSave?: DataStoryCanvasProps['onSave'];
 }) {
   const selector = (state: StoreSchema) => ({
@@ -58,10 +54,7 @@ export function DataStoryControls({
     setShowAddNode: setShowAddNode,
   }), [onSave, setShowAddNode, toDiagram, updateDiagram]);
 
-  if (hideControls === true) return null;
-
   return (
-
     <DataStoryControlsContext.Provider value={context}>
       <Controls position={'top-left'} showInteractive={false} showZoom={false} showFitView={false}>
         {/*{[*/}
@@ -79,7 +72,7 @@ export function DataStoryControls({
         {/*  <Component key={index}/>*/}
         {/*))}*/}
 
-        {(slotComponents || []).map((component, index) => (
+        {(controls || []).map((component, index) => (
           <React.Fragment key={index}>
             {component}
           </React.Fragment>
diff --git a/packages/ui/src/components/DataStory/types.ts b/packages/ui/src/components/DataStory/types.ts
index 22be72fb..ead6ad90 100644
--- a/packages/ui/src/components/DataStory/types.ts
+++ b/packages/ui/src/components/DataStory/types.ts
@@ -33,8 +33,7 @@ export type DataStoryProps = {
   children?: React.ReactNode;
   client: WorkspaceApiClientImplement,
   initDiagram?: Diagram | null;
-  hideControls?: boolean | ControlsType[];
-  slotComponents?: React.ReactNode[];
+  controls?: React.ReactNode[];
   onInitialize?: DataStoryCallback;
   hideSidebar?: boolean;
   onDrop?: (event: any, addNodeFromDescription: any) => void;

From 512e5b721f0d30aaa3691a8aacd5a3984e2dd0f2 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Tue, 18 Feb 2025 14:18:11 +0800
Subject: [PATCH 14/16] refactor: Remove unused controls from DataStory

---
 packages/docs/components/Playground.tsx       |  6 +---
 packages/ds-ext/src/app/DiagramApp.tsx        |  4 +--
 .../DataStory/controls/AddNodeControl.tsx     |  7 +----
 .../DataStory/controls/DataStoryControls.tsx  | 30 ++++---------------
 .../DataStory/controls/ExportControl.tsx      |  7 +----
 .../DataStory/controls/ImportControl.tsx      |  7 +----
 .../DataStory/controls/RunControl.tsx         |  7 +----
 .../DataStory/controls/SaveControl.tsx        |  7 +----
 8 files changed, 13 insertions(+), 62 deletions(-)

diff --git a/packages/docs/components/Playground.tsx b/packages/docs/components/Playground.tsx
index f3360227..da16eb86 100644
--- a/packages/docs/components/Playground.tsx
+++ b/packages/docs/components/Playground.tsx
@@ -34,11 +34,7 @@ function Playground({ mode }: { mode?: 'js' | 'node' }) {
   }, [mode, app, loading]);
 
   if (loading || !client) return null;
-  /**
-   * todo:
-   * 1. change the controls to controls
-   * 2. change all docs demos and other demos to use the new controls
-   */
+
   return (
     <div className="w-full" style={{ height: 'calc(100vh - 72px)' }} data-cy="playground">
       <DataStory
diff --git a/packages/ds-ext/src/app/DiagramApp.tsx b/packages/ds-ext/src/app/DiagramApp.tsx
index 4a80e7f3..af8ab89b 100644
--- a/packages/ds-ext/src/app/DiagramApp.tsx
+++ b/packages/ds-ext/src/app/DiagramApp.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { debounce, Diagram } from '@data-story/core';
-import { AddNodeControl, DataStory, ExportControl, RunControl } from '@data-story/ui';
+import { AddNodeControl, DataStory, RunControl } from '@data-story/ui';
 import { VsCodeToast } from './VsCodeToast';
 import { onDrop } from './onDrop';
 import { createVsCodeClient } from './createVsCodeClient';
@@ -24,7 +24,7 @@ export default function DiagramApp() {
         key={'abc'}
         onChange={handleChange}
         onDrop={onDrop}
-        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
+        controls={[<RunControl/>, <AddNodeControl/>]}
       />
       <VsCodeToast postMessage={window.vscode.postMessage} />
     </div>
diff --git a/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
index c8db0ff3..2c33ed88 100644
--- a/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/AddNodeControl.tsx
@@ -1,6 +1,5 @@
 import { ControlButton } from '@xyflow/react';
 import { AddNodeIcon } from '../icons/addNodeIcon';
-import { ControlsType } from '../types';
 import { useDataStoryControls } from './DataStoryControls';
 
 export const AddNodeControl = () => {
@@ -14,8 +13,4 @@ export const AddNodeControl = () => {
   >
     <AddNodeIcon/>
   </ControlButton>)
-};
-
-AddNodeControl.defaultProps = {
-  ariaLabel: 'addNode' as ControlsType,
-};
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
index dd390994..8e623dd8 100644
--- a/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
+++ b/packages/ui/src/components/DataStory/controls/DataStoryControls.tsx
@@ -2,12 +2,7 @@ import { Controls } from '@xyflow/react';
 import { Diagram } from '@data-story/core';
 import { useStore } from '../store/store';
 import React, { useMemo } from 'react';
-import { DataStoryCanvasProps, DataStoryProps, StoreSchema } from '../types';
-import { RunControl } from './RunControl';
-import { AddNodeControl } from './AddNodeControl';
-import { SaveControl } from './SaveControl';
-import { ExportControl } from './ExportControl';
-import { ImportControl } from './ImportControl';
+import { DataStoryCanvasProps, StoreSchema } from '../types';
 
 export type DataStoryControlsType = {
   getDiagram: () => Diagram;
@@ -27,10 +22,10 @@ export function useDataStoryControls() {
 }
 
 export function DataStoryControls({
-                                    setShowAddNode,
-                                    controls = [],
-                                    onSave,
-                                  }: {
+  setShowAddNode,
+  controls = [],
+  onSave,
+}: {
   setShowAddNode: (showAddNode: boolean) => void;
   controls?: React.ReactNode[];
   onSave?: DataStoryCanvasProps['onSave'];
@@ -57,21 +52,6 @@ export function DataStoryControls({
   return (
     <DataStoryControlsContext.Provider value={context}>
       <Controls position={'top-left'} showInteractive={false} showZoom={false} showFitView={false}>
-        {/*{[*/}
-        {/*  RunControl,*/}
-        {/*  AddNodeControl,*/}
-        {/*  SaveControl,*/}
-        {/*  ExportControl,*/}
-        {/*  ImportControl,*/}
-        {/*].filter((Component) => {*/}
-        {/*  if (Array.isArray(hideControls)) {*/}
-        {/*    return !hideControls.includes(Component.defaultProps?.ariaLabel);*/}
-        {/*  }*/}
-        {/*  return true;*/}
-        {/*}).map((Component, index) => (*/}
-        {/*  <Component key={index}/>*/}
-        {/*))}*/}
-
         {(controls || []).map((component, index) => (
           <React.Fragment key={index}>
             {component}
diff --git a/packages/ui/src/components/DataStory/controls/ExportControl.tsx b/packages/ui/src/components/DataStory/controls/ExportControl.tsx
index 932c3903..fc74d6ec 100644
--- a/packages/ui/src/components/DataStory/controls/ExportControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/ExportControl.tsx
@@ -4,7 +4,6 @@ import { useDataStoryControls } from './DataStoryControls';
 import { eventManager } from '../events/eventManager';
 import { DataStoryEvents } from '../events/dataStoryEventType';
 import { Diagram } from '@data-story/core';
-import { ControlsType } from '../types';
 
 const defaultExport = async (diagram: Diagram) => {
   try {
@@ -58,8 +57,4 @@ export const ExportControl = () => {
       <ExportIcon />
     </ControlButton>
   );
-};
-
-ExportControl.defaultProps = {
-  ariaLabel: 'export' as ControlsType,
-};
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/controls/ImportControl.tsx b/packages/ui/src/components/DataStory/controls/ImportControl.tsx
index 452401f7..17f889f3 100644
--- a/packages/ui/src/components/DataStory/controls/ImportControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/ImportControl.tsx
@@ -4,7 +4,6 @@ import { useDataStoryControls } from './DataStoryControls';
 import { eventManager } from '../events/eventManager';
 import { DataStoryEvents } from '../events/dataStoryEventType';
 import { Diagram } from '@data-story/core';
-import { ControlsType } from '../types';
 
 const defaultImport = (): Promise<Diagram> => {
   return new Promise((resolve, reject) => {
@@ -81,8 +80,4 @@ export const ImportControl = () => {
       <ImportIcon />
     </ControlButton>
   );
-};
-
-ImportControl.defaultProps = {
-  ariaLabel: 'import' as ControlsType,
-};
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/controls/RunControl.tsx b/packages/ui/src/components/DataStory/controls/RunControl.tsx
index e177e97e..1f0a9439 100644
--- a/packages/ui/src/components/DataStory/controls/RunControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/RunControl.tsx
@@ -1,7 +1,6 @@
 import { ControlButton } from '@xyflow/react';
 import { RunIcon } from '../icons/runIcon';
 import { useStore } from '../store/store';
-import { ControlsType } from '../types';
 
 export const RunControl = () => {
   const onRun = useStore((state) => state.onRun);
@@ -15,8 +14,4 @@ export const RunControl = () => {
       <RunIcon/>
     </ControlButton>
   );
-};
-
-RunControl.defaultProps = {
-  ariaLabel: 'run'  as ControlsType,
-};
+};
\ No newline at end of file
diff --git a/packages/ui/src/components/DataStory/controls/SaveControl.tsx b/packages/ui/src/components/DataStory/controls/SaveControl.tsx
index a32b0c53..d67f9a0a 100644
--- a/packages/ui/src/components/DataStory/controls/SaveControl.tsx
+++ b/packages/ui/src/components/DataStory/controls/SaveControl.tsx
@@ -1,7 +1,6 @@
 import { ControlButton } from '@xyflow/react';
 import { SaveIcon } from '../icons/saveIcon';
 import { useDataStoryControls } from './DataStoryControls';
-import { ControlsType } from '../types';
 
 export const SaveControl = () => {
   const { onSave, getDiagram } = useDataStoryControls();
@@ -15,8 +14,4 @@ export const SaveControl = () => {
       <SaveIcon/>
     </ControlButton>
   );
-};
-
-SaveControl.defaultProps = {
-  ariaLabel: 'save' as ControlsType,
-};
+};
\ No newline at end of file

From d567273f3db8ec475e6956a9bed5413baef8209d Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Tue, 18 Feb 2025 16:24:17 +0800
Subject: [PATCH 15/16] fix: resolve undefined issue with cell.getValue by
 using cell?.row.original[cell.column?.id]

---
 packages/ui/src/components/Node/table/CellsMatrix.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Node/table/CellsMatrix.ts b/packages/ui/src/components/Node/table/CellsMatrix.ts
index d5db97b7..9e604599 100644
--- a/packages/ui/src/components/Node/table/CellsMatrix.ts
+++ b/packages/ui/src/components/Node/table/CellsMatrix.ts
@@ -88,7 +88,8 @@ export class CellsMatrix {
     const headerText = columnCells[0]?.cell.column.id || '';
 
     const maxLength = columnCells.reduce((max, { cell }) => {
-      const contentLength = String(cell.getValue() ?? '').length;
+      const originalContent =  cell?.row.original[cell.column?.id] ?? cell.getValue();
+      const contentLength = String(originalContent).length;
       return Math.max(max, contentLength);
     }, headerText.length);
 

From cab36eadb524c5cbc8b13007976373341fe022e7 Mon Sep 17 00:00:00 2001
From: stone <stone-lyl@outlook.com>
Date: Tue, 18 Feb 2025 16:30:56 +0800
Subject: [PATCH 16/16] refactor: remove unnecessary `controls` prop from
 DataStory components when `controls` is empty

---
 packages/docs/components/demos/DocsFlow.tsx               | 2 --
 packages/docs/components/demos/HeroFlow.tsx               | 1 -
 packages/docs/components/demos/NodeDemo.tsx               | 1 -
 packages/docs/components/demos/Tree/CustomActivityBar.tsx | 5 +----
 packages/docs/components/demos/Tree/Empty.tsx             | 1 -
 packages/docs/components/demos/Tree/Loading.tsx           | 1 -
 packages/docs/components/demos/Tree/SingleDiagram.tsx     | 1 -
 7 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/docs/components/demos/DocsFlow.tsx b/packages/docs/components/demos/DocsFlow.tsx
index 7f51baaf..34087f90 100644
--- a/packages/docs/components/demos/DocsFlow.tsx
+++ b/packages/docs/components/demos/DocsFlow.tsx
@@ -8,7 +8,6 @@ export default () => {
   const { app, loading: appLoading } = useRequestApp();
 
   const { data: diagram, loading: diagramLoading } = useRequest(async() => {
-    console.log('Dhe fuck?')
     await core.boot();
     const diagram = core.getDiagramBuilder()
       .add('Signal', { label: 'Read',period: 20, count: 100000 })
@@ -56,7 +55,6 @@ export default () => {
             options.run()
           })
         }}
-        controls={[]}
         hideActivityBar={true}
       />
     </div>
diff --git a/packages/docs/components/demos/HeroFlow.tsx b/packages/docs/components/demos/HeroFlow.tsx
index 4979e091..c60ad56e 100644
--- a/packages/docs/components/demos/HeroFlow.tsx
+++ b/packages/docs/components/demos/HeroFlow.tsx
@@ -29,7 +29,6 @@ export default () => {
         client={client}
         initDiagram={diagram}
         onInitialize={(options) => options.run()}
-        controls={[]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/NodeDemo.tsx b/packages/docs/components/demos/NodeDemo.tsx
index fa206498..d8b26caf 100644
--- a/packages/docs/components/demos/NodeDemo.tsx
+++ b/packages/docs/components/demos/NodeDemo.tsx
@@ -18,7 +18,6 @@ export default ({ nodeName }: { nodeName: string }) => {
       <DataStory
         client={client}
         initDiagram={diagram}
-        controls={[]}
       />
     </div>
   </div>
diff --git a/packages/docs/components/demos/Tree/CustomActivityBar.tsx b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
index c1613bc1..1e42402a 100644
--- a/packages/docs/components/demos/Tree/CustomActivityBar.tsx
+++ b/packages/docs/components/demos/Tree/CustomActivityBar.tsx
@@ -1,13 +1,11 @@
 'use client'
 
 import { DataStory } from '@data-story/ui';
-import { core, nodes } from '@data-story/core';
+import { core } from '@data-story/core';
 import { CustomizeJSClient } from '../../splash/CustomizeJSClient';
 import { useRequestApp } from '../../hooks/useRequestApp';
 
 export default () => {
-  const { Signal, Comment, Ignore } = nodes;
-
   const diagram = core.getDiagramBuilder()
     .add('Signal', { label: 'DataSource', period: 200, count: 100 })
     .add('Ignore', { label: 'Storage' })
@@ -22,7 +20,6 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        controls={[]}
         hideSidebar={true}
         hideActivityBar={['settings']}
       />
diff --git a/packages/docs/components/demos/Tree/Empty.tsx b/packages/docs/components/demos/Tree/Empty.tsx
index 4f4c7474..96ddaf67 100644
--- a/packages/docs/components/demos/Tree/Empty.tsx
+++ b/packages/docs/components/demos/Tree/Empty.tsx
@@ -16,7 +16,6 @@ export default () => {
       <DataStory
         client={client}
         onInitialize={(options) => options.run()}
-        controls={[]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/Loading.tsx b/packages/docs/components/demos/Tree/Loading.tsx
index 911d0ccf..247441e6 100644
--- a/packages/docs/components/demos/Tree/Loading.tsx
+++ b/packages/docs/components/demos/Tree/Loading.tsx
@@ -15,7 +15,6 @@ export default () => {
       <DataStory
         client={client}
         onInitialize={(options) => options.run()}
-        controls={[]}
       />
     </div>
   );
diff --git a/packages/docs/components/demos/Tree/SingleDiagram.tsx b/packages/docs/components/demos/Tree/SingleDiagram.tsx
index 33553e2e..c6d73b7e 100644
--- a/packages/docs/components/demos/Tree/SingleDiagram.tsx
+++ b/packages/docs/components/demos/Tree/SingleDiagram.tsx
@@ -22,7 +22,6 @@ export default () => {
     <div className="w-full h-80 border-gray-400 border-4">
       <DataStory
         client={client}
-        controls={[]}
         hideSidebar={true}
         hideActivityBar={true}
       />