Merge pull request #366 from ajthinking/table-view

Prepare full screen table view

packages/ds-ext/src/DiagramEditorProvider.ts

@@ -14,6 +14,7 @@ import { observeNodeStatus } from './messageHandlers/observeNodeStatus';
 import { observeLinkUpdate } from './messageHandlers/observeLinkUpdate';
 import { getDataFromStorage } from './messageHandlers/getDataFromStorage';
 import { cancelObservation } from './messageHandlers/cancelObservation';
+import { onEdgeDoubleClick } from './messageHandlers/onEdgeDoubleClick';
 import { DuckDBStorage } from './duckDBStorage';
 import { FileStorage } from './fileStorage';
 import { loadConfig } from './loadConfig';
@@ -113,6 +114,7 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
         observeLinkUpdate,
         getDataFromStorage,
         cancelObservation,
+        onEdgeDoubleClick,
       };
 
       const handler = handlers[event.type];

packages/ds-ext/src/app/App.tsx → packages/ds-ext/src/app/DiagramApp.tsx

@@ -5,7 +5,7 @@ import { VsCodeToast } from './VsCodeToast';
 import { onDrop } from './onDrop';
 import { createVsCodeClient } from './createVsCodeClient';
 
-export default function App() {
+export default function DiagramApp() {
   const client = createVsCodeClient(window.vscode);
 
   const handleChange = useCallback(

packages/ds-ext/src/app/TableApp.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function TableApp() {
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      This is the TableApp
+    </div>
+  );
+}

packages/ds-ext/src/app/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import DiagramApp from './DiagramApp';
+import TableApp from './TableApp';
 
 // TypeScript null-check or assertion for the root element
 const rootElement = document.getElementById('root') as HTMLElement | null;
@@ -10,7 +11,8 @@ if (rootElement) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <React.StrictMode>
-      <App />
+      <DiagramApp />
+      {/* <TableApp /> */}
     </React.StrictMode>
   );
 } else {

packages/ds-ext/src/messageHandlers/onEdgeDoubleClick.ts

@@ -0,0 +1,16 @@
+import { MessageHandler } from '../MessageHandler';
+import * as vscode from 'vscode';
+import * as path from 'path';
+import * as fs from 'fs';
+
+export const onEdgeDoubleClick: MessageHandler = async ({ event }) => {
+  const workspaceRoot = vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || '';
+  const tempFilePath = path.join(workspaceRoot, 'temp_table_view.txt');
+
+  const content = `TODO: open the Table component here. Use the edge id (${event.edgeId}) to get the relevant data`;
+
+  fs.writeFileSync(tempFilePath, content);
+
+  const document = await vscode.workspace.openTextDocument(tempFilePath);
+  await vscode.window.showTextDocument(document, { preview: false });
+};

packages/ui/src/components/DataStory/DataStoryCanvas.tsx

@@ -205,6 +205,10 @@ const Flow = ({
         onNodeDoubleClick={(_, node) => {
           onNodeDoubleClick?.(node);
         }}
+        onEdgeDoubleClick={(event, edge) => {
+          if (!client) return;
+          if(client.onEdgeDoubleClick) client.onEdgeDoubleClick(edge.id);
+        }}
         onEdgesChange={(changes: EdgeChange[]) => {
           onEdgesChange(changes);
           if (onChange) onChange(toDiagram())

packages/ui/src/components/DataStory/clients/WorkspaceApiClient.ts

@@ -194,6 +194,13 @@ export class WorkspaceApiClient implements WorkspaceApiClientImplement {
     msg$.subscribe(this.receivedMsg$);
   }
 
+  onEdgeDoubleClick(edgeId: string): void {
+    this.transport.sendAndReceive({
+      type: 'onEdgeDoubleClick',
+      edgeId
+    });
+  }
+
   //<editor-fold desc="Message init">
   private initExecutionResult() {
     return this.receivedMsg$.pipe(filter(matchMsgType('ExecutionResult')))

packages/ui/src/components/DataStory/clients/WorkspaceApiClientImplement.ts

@@ -24,4 +24,5 @@ export interface WorkspaceApiClientImplement {
   observeNodeStatus?: (params: ObserveNodeStatus) => Subscription;
   getDataFromStorage?: (params: GetDataFromStorageParams) => Promise<Record<LinkId, ItemValue[]>>;
   cancelObservation?:(params: CancelObservation) => Promise<void>;
+  onEdgeDoubleClick?: (edgeId: string) => void;
 }