feat: add diagram export to .diagram.json and import from .diagram.json or .ds files

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, AddNodeControl,
+} 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}
+        controls={[<RunControl/>, <AddNodeControl/>, <SaveControl/>, <ExportControl/>, <ImportControl/>]}
       >
         <ToastComponent/>
       </DataStory>

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;
   }
 };
 

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()
           })
         }}
-        hideControls={true}
         hideActivityBar={true}
       />
     </div>

packages/docs/components/demos/HeroFlow.tsx

@@ -29,7 +29,6 @@ export default () => {
         client={client}
         initDiagram={diagram}
         onInitialize={(options) => options.run()}
-        hideControls={true}
       />
     </div>
   );

packages/docs/components/demos/NodeDemo.tsx

@@ -18,7 +18,6 @@ export default ({ nodeName }: { nodeName: string }) => {
       <DataStory
         client={client}
         initDiagram={diagram}
-        hideControls={true}
       />
     </div>
   </div>

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']}
+          controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
           client={client}
         />
       </div>

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']}
+        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
       />
     </div>
   );

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']}
+        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
       />
     </div>
   );

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}
-        hideControls={true}
         hideSidebar={true}
         hideActivityBar={['settings']}
       />

packages/docs/components/demos/Tree/Empty.tsx

@@ -16,7 +16,6 @@ export default () => {
       <DataStory
         client={client}
         onInitialize={(options) => options.run()}
-        hideControls={true}
       />
     </div>
   );

packages/docs/components/demos/Tree/Loading.tsx

@@ -15,7 +15,6 @@ export default () => {
       <DataStory
         client={client}
         onInitialize={(options) => options.run()}
-        hideControls={true}
       />
     </div>
   );

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']}
+        controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
       />
     </div>
   );

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}
-        hideControls={true}
         hideSidebar={true}
         hideActivityBar={true}
       />

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']}
+          controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
           onInitialize={({ run }) => run()}
           client={clients.mainClient}
         />
       )}
       {part === 'NESTED_NODE' && (
-        <DataStory hideControls={['save']} client={clients.nestedNodeClient!} />
+        <DataStory controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]} client={clients.nestedNodeClient!} />
       )}
       {part === 'MAIN_UNFOLDED' && (
-        <DataStory hideControls={['save']} client={clients.mainUnfoldedClient!} />
+        <DataStory controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]} client={clients.mainUnfoldedClient!} />
       )}
     </div>
   );

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']}
+          controls={[<RunControl/>, <AddNodeControl/>, <ExportControl/>]}
           client={client}
         />
       </div>

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, 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']}
+        controls={[<RunControl/>, <AddNodeControl/>]}
       />
       <VsCodeToast postMessage={window.vscode.postMessage} />
     </div>

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);
   });