ajthinking · stone-lyl · Oct 22, 2024 · Oct 16, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/cypress/e2e/Playground.cy.ts b/cypress/e2e/Playground.cy.ts
@@ -12,6 +12,7 @@ describe('add console.log node to playground', () => {
   });
 
   it('trigger addNodeModal', () => {
+    cy.wait(500);
     getEl('add-node-button').click();
 
     cy.wait(1000);

diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "husky": "^8.0.0",
     "kill-port": "^2.0.1",
     "lint-staged": "^15.0.2",
-    "nodemon": "^3.1.4",
+    "pm2": "^5.4.2",
     "postcss-cli": "^11.0.0",
     "release-it": "^17.0.0",
     "start-server-and-test": "^2.0.3",

diff --git a/packages/docs/components/splash/CustomizeJSClient.tsx b/packages/docs/components/splash/CustomizeJSClient.tsx
@@ -4,6 +4,7 @@ import { ClientRunParams, createJSClient, WorkspaceApiClient, WorkspaceApiClient
 export class CustomizeJSClient implements WorkspaceApiClient {
   private nodeDescriptions: NodeDescription[];
   private app: Application;
+  private diagram: Diagram;
 
   constructor({ diagram, app, nodeDescriptions }: {
     app: Application,
@@ -12,6 +13,7 @@ export class CustomizeJSClient implements WorkspaceApiClient {
   }) {
     this.nodeDescriptions = nodeDescriptions || [];
     this.app = app;
+    this.diagram = diagram;
   }
 
   getNodeDescriptions = async({ path }) => {
@@ -23,4 +25,7 @@ export class CustomizeJSClient implements WorkspaceApiClient {
     jsClient.run(params);
   };
 
+  getDiagram = async({ path }) => {
+    return this.diagram;
+  };
 }
diff --git a/packages/ds-ext/src/DiagramEditorProvider.ts b/packages/ds-ext/src/DiagramEditorProvider.ts
@@ -5,7 +5,7 @@ import { MessageHandler } from './MessageHandler';
 import { onRun } from './messageHandlers/onRun';
 import { onGetNodeDescriptions } from './messageHandlers/onGetNodeDescriptions';
 import { onUpdateDiagram } from './messageHandlers/onUpdateDiagram';
-import { onGetDirtyFileContent } from './messageHandlers/onGetDirtyFileContent';
+import { getDiagram } from './messageHandlers/getDiagram';
 import { onToast } from './messageHandlers/onToast';
 
 export class DiagramEditorProvider implements vscode.CustomEditorProvider<DiagramDocument> {
@@ -55,13 +55,15 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
         run: onRun,
         getNodeDescriptions: onGetNodeDescriptions,
         updateDiagram: onUpdateDiagram,
-        getDirtyFileContent: onGetDirtyFileContent,
+        getDiagram: getDiagram,
         toast: onToast,
       };
 
       const handler = handlers[event.type];
-      if(!handler) throw Error(`No handler found for event type: ${event.type}. Available handlers: ${Object.keys(handlers).join(', ')}`);
-
+      if (!handler) {
+        console.error(`No handler found for event type: ${event.type}. Available handlers: ${Object.keys(handlers).join(', ')}`);
+        return;
+      }
       handler({ webviewPanel, event, document });
     });
   }
@@ -75,9 +77,6 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
       vscode.Uri.file(mainScript)
     );
 
-    // Inject file URI and diagram data into the window object
-    const fileUri = webview.asWebviewUri(document.uri);
-
     // Return HTML content for the Webview
     return `
         <!DOCTYPE html>
@@ -93,9 +92,6 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
             <script>
                 // Provide the VS Code API and initial data (file URI and diagram content)
                 window.vscode = acquireVsCodeApi();
-                window.initialData = {
-                    fileUri: "${fileUri}",  // Pass file URI
-                };
             </script>
         </body>
         </html>

diff --git a/packages/ds-ext/src/app/App.tsx b/packages/ds-ext/src/app/App.tsx
@@ -5,58 +5,13 @@ import { VsCodeToast } from './VsCodeToast';
 import { onDrop } from './onDrop';
 import { createVsCodeClient } from './createVsCodeClient';
 
-export const fileUri = window.initialData.fileUri;
-
 export default function App() {
-  const [diagram, setDiagram] = useState<Diagram | undefined>();
-
-  useEffect(() => {
-    if (window.vscode) {
-      window.vscode.postMessage({
-        type: 'getDirtyFileContent',
-      });
-    }
-
-    const handleMessage = (event: any) => {
-      const message = event.data;
-
-      if (message.type === 'dirtyFileContent') {
-        setDiagram(
-          message.fileContent
-            ? new Diagram(JSON.parse(message.fileContent))
-            : new Diagram()
-        );
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    // Cleanup the listener on unmount
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
+  const client = createVsCodeClient(window.vscode);
   const handleChange = useCallback(
     debounce(async (diagram: Diagram) => {
-      // Construct the message payload with updated diagram data
-      const updatedData = {
-        type: 'updateDiagram',
-        fileUri, // Include the file URI to specify the target file
-        diagram: JSON.stringify(diagram),
-      };
-
-      // Send the message to VS Code extension
-      window.vscode.postMessage(updatedData);
+      client!.updateDiagram?.(diagram);
     }, 100), // Debounced with 100ms delay
-    [fileUri]
-  );
-
-  const client = createVsCodeClient(window.vscode);
-  // Only render DataStory if diagramData is available
-  if (!diagram) {
-    return <div>Loading diagram...</div>;
-  }
+    [client]);
 
   return (
     <div style={{ width: '100%', height: '100vh' }}>
@@ -66,9 +21,9 @@ export default function App() {
         hideActivityBar={true}
         initSidebarKey={undefined}
         key={'abc'}
-        initDiagram={diagram}
         onChange={handleChange}
         onDrop={onDrop}
+        hideControls={['save']}
       />
       <VsCodeToast postMessage={window.vscode.postMessage} />
     </div>

diff --git a/packages/ds-ext/src/app/VsCodeToast.tsx b/packages/ds-ext/src/app/VsCodeToast.tsx
@@ -27,7 +27,7 @@ export function VsCodeToast({ postMessage }: {
         info.status = 'error';
         break;
       case DataStoryEvents.SAVE_SUCCESS:
-        info.message = 'Diagram saved successfully!';
+        // info.message = 'Diagram saved successfully!';
         break;
       case DataStoryEvents.SAVE_ERROR:
         console.error(event.payload);
@@ -40,4 +40,4 @@ export function VsCodeToast({ postMessage }: {
   return (
     <div></div>
   );
-}
+}
diff --git a/packages/ds-ext/src/messageHandlers/getDiagram.ts b/packages/ds-ext/src/messageHandlers/getDiagram.ts
@@ -0,0 +1,16 @@
+import { Diagram } from '@data-story/core';
+import { MessageHandler } from '../MessageHandler';
+
+export const getDiagram: MessageHandler = async ({ event, webviewPanel, document }) => {
+  const diagramData = new TextDecoder().decode(document.data);
+  let diagram = new Diagram();
+  if(diagramData) {
+    diagram = JSON.parse(diagramData);
+  }
+
+  webviewPanel.webview.postMessage({
+    ...event,
+    type: 'getDiagram',
+    diagram: diagram,
+  });
+};
diff --git a/packages/ds-ext/src/messageHandlers/onGetDirtyFileContent.ts b/packages/ds-ext/src/messageHandlers/onGetDirtyFileContent.ts
diff --git a/packages/ds-ext/src/messageHandlers/onUpdateDiagram.ts b/packages/ds-ext/src/messageHandlers/onUpdateDiagram.ts
@@ -5,6 +5,6 @@ export const onUpdateDiagram: MessageHandler = async ({
   event,
   document,
 }) => {
-  document.update(new TextEncoder().encode(event.diagram));
+  document.update(new TextEncoder().encode(JSON.stringify(event.diagram)));
   await document.save();
 };
diff --git a/packages/nodejs/nodemon.json b/packages/nodejs/nodemon.json
diff --git a/packages/nodejs/package.json b/packages/nodejs/package.json
@@ -16,7 +16,7 @@
     "test": "yarn run -T vitest",
     "build": "tsc",
     "release": "yarn run -T release-it",
-    "watch:server": "nodemon"
+    "watch:server": "pm2 start ./test-server.ts --watch --no-daemon"
   },
   "release-it": {
     "git": false,

diff --git a/packages/nodejs/src/server/SocketServer.ts b/packages/nodejs/src/server/SocketServer.ts
@@ -53,7 +53,10 @@ export class SocketServer {
     const parsed: { type: string } & Record<string, any> = JSON.parse(message);
 
     const handler = this.messageHandlers[parsed.type];
-    if (!handler) throw new Error('Unknown message type (server): ' + parsed.type);
+    if (!handler) {
+      console.warn('Unknown message type (server): ' + parsed.type);
+      return;
+    }
 
     await handler(ws, parsed, this.app, storage);
   }

diff --git a/packages/nodejs/src/server/messageHandlers/getDiagram.ts b/packages/nodejs/src/server/messageHandlers/getDiagram.ts
@@ -0,0 +1,20 @@
+import { Diagram } from '@data-story/core';
+import WebSocket from 'ws';
+import { MessageHandler } from '../MessageHandler';
+
+interface GetDiagramMessage {
+  type: 'getDiagram';
+  msgId: string;
+}
+
+export const getDiagram: MessageHandler<GetDiagramMessage> = async(
+  ws: WebSocket,
+  data: GetDiagramMessage,
+) => {
+  const diagram = new Diagram();
+  ws.send(JSON.stringify({
+    ...data,
+    type: 'getDiagram',
+    diagram,
+  }));
+}
diff --git a/packages/nodejs/src/server/messageHandlers/getNodeDescriptions.ts b/packages/nodejs/src/server/messageHandlers/getNodeDescriptions.ts
@@ -4,7 +4,7 @@ import WebSocket from 'ws';
 
 export type DescribeMessage = {
   type: 'getNodeDescriptions',
-  id: string,
+  msgId: string;
 }
 
 export const getNodeDescriptions: MessageHandler<DescribeMessage> = async (

diff --git a/packages/nodejs/src/server/messageHandlers/index.ts b/packages/nodejs/src/server/messageHandlers/index.ts
@@ -1,3 +1,4 @@
 export { getNodeDescriptions } from './getNodeDescriptions'
 export { getItems } from './getItems'
 export { run } from './run'
+export { getDiagram } from './getDiagram'
diff --git a/packages/nodejs/src/server/messageHandlers/run.ts b/packages/nodejs/src/server/messageHandlers/run.ts
@@ -51,7 +51,6 @@ export const run: MessageHandler<RunMessage> = async(
 
   const execution = executor.execute()
 
-  console.log('sendMsg', sendMsg);
   try {
     for await(const update of execution) {
       ws.send(JSON.stringify({

diff --git a/packages/ui/src/components/DataStory/DataStory.tsx b/packages/ui/src/components/DataStory/DataStory.tsx
@@ -9,8 +9,6 @@ import { DataStoryCanvasProvider } from './store/store';
 import { DataStoryCanvas } from './DataStoryCanvas';
 import { useRequest } from 'ahooks';
 import { LoadingMask } from './common/loadingMask';
-import { Diagram, } from '@data-story/core';
-import { LocalStorageKey } from './common/method';
 
 function handleRequestError(requestError?: Error): void {
   if (requestError) console.error(`Error fetching : ${requestError?.message}`);
@@ -23,24 +21,32 @@ export const DataStoryComponent = (
   const [selectedNode, setSelectedNode] = useState<ReactFlowNode>();
   const [isSidebarClose, setIsSidebarClose] = useState(!!props.hideSidebar);
   const partialStoreRef = useRef<Partial<StoreSchema>>(null);
-  const [diagram] = useState<Diagram | null>(initDiagram || new Diagram());
   const [sidebarKey, setSidebarKey] = useState(() => {
-    // If initDiagram isn't provided, default to 'addNode' to show the sidebar
-    const defaultKey = initDiagram ? '' : 'addNode';
-    return initSidebarKey ?? defaultKey;
+    return initSidebarKey ?? '';
   });
 
   const {
     data: nodeDescriptions,
     loading: nodeDescriptionsLoading,
     error: getNodeDescriptionsError
   } = useRequest(async() => {
-    return client.getNodeDescriptions({ path: LocalStorageKey })
+    return client.getNodeDescriptions({})
   }, {
     refreshDeps: [client], // Will re-fetch if client changes
   });
   handleRequestError(getNodeDescriptionsError);
 
+  const {
+    data: diagramData,
+    loading: diagramDataLoading,
+    error: diagramDataError
+  } = useRequest(async() => {
+    return client.getDiagram?.({});
+  }, {
+    refreshDeps: [client], // Will re-fetch if client changes
+  });
+  handleRequestError(diagramDataError);
+
   useEffect(() => {
     if (sidebarKey !== 'node') {
       setSelectedNode(undefined);
@@ -66,7 +72,7 @@ export const DataStoryComponent = (
       <div className="relative h-full w-full">
         {children}
         {
-          (false) // TODO isLoading?
+          (diagramDataLoading || nodeDescriptionsLoading) // TODO isLoading?
             ? <LoadingMask/>
             : <Allotment className='h-full border-0.5 relative'>
               {/*The Allotment.Pane will recalculate the width and height of the child components.*/}
@@ -76,7 +82,7 @@ export const DataStoryComponent = (
                   {...props}
                   onSave={client.updateDiagram}
                   key={'data-story-canvas'}
-                  initDiagram={diagram}
+                  initDiagram={diagramData}
                   ref={partialStoreRef}
                   setSidebarKey={setSidebarKey}
                   sidebarKey={sidebarKey}

diff --git a/packages/ui/src/components/DataStory/DataStoryCanvas.tsx b/packages/ui/src/components/DataStory/DataStoryCanvas.tsx
@@ -13,7 +13,6 @@ import { onDropDefault } from './onDropDefault';
 import type { NodeTypes } from '@xyflow/react/dist/esm/types';
 import { HotkeyManager, useHotkeys } from './useHotkeys';
 import { useEscapeKey } from './hooks/useEscapeKey';
-import { Placeholder } from './common/placeholder';
 
 const nodeTypes = {
   commentNodeComponent: CommentNodeComponent,
@@ -25,12 +24,11 @@ const nodeTypes = {
 
 const DataStoryCanvasComponent = forwardRef((props: DataStoryCanvasProps, ref) => {
   useGetStore(ref);
-  const showPlaceholder = !props.initDiagram;
 
   return (
     <>
       <ReactFlowProvider>
-        {showPlaceholder ? <Placeholder content={'No diagram found'}/> : <Flow {...props}/>}
+        <Flow {...props}/>
       </ReactFlowProvider>
     </>
   );

diff --git a/packages/ui/src/components/DataStory/clients/WorkspaceApiClient.ts b/packages/ui/src/components/DataStory/clients/WorkspaceApiClient.ts
@@ -3,7 +3,7 @@ import { Diagram, NodeDescription } from '@data-story/core';
 
 export interface WorkspaceApiClient {
   run(params: ClientRunParams): void;
-  getNodeDescriptions: ({ path }: { path: string}) => Promise<NodeDescription[]>
+  getNodeDescriptions: ({ path }: { path?: string}) => Promise<NodeDescription[]>
   updateDiagram?: (diagram: Diagram) => Promise<void>;
-
+  getDiagram?: ({ path }: { path?: string}) => Promise<Diagram>;
 }