feat: add diagram source code view, JSON integration, and read-only mode for diagram preview

packages/ds-ext/README.md

@@ -5,4 +5,4 @@
 * In "Run and Debug" tab, click "Run Extension"
 * This opens a new instance of VS Code
 * With the new instance, open a directory
-* Create a *.diagram.json file (must have a content)
+* Create a *.ds file (must have a content)

packages/ds-ext/package.json

@@ -20,9 +20,35 @@
     "commands": [
       {
         "command": "ds-ext.createDemos",
-        "title": "DataStory: Create Demo Diagrams"
+        "title": "Create Demo Diagrams",
+        "category": "DataStory"
+      },
+      {
+        "command": "ds-ext.showDiagramPreview",
+        "title": "Show Diagram Preview11",
+        "category": "DataStory",
+        "icon": {
+          "light": "./themes/preview-dark.svg",
+          "dark": "./themes/preview-white.svg"
+        }
       }
     ],
+    "menus": {
+      "editor/title": [
+        {
+          "command": "ds-ext.showDiagramPreview",
+          "when": "resourceLangId == 'diagramJson'",
+          "group": "navigation"
+        }
+      ],
+      "view/title": [
+        {
+          "command": "ds-ext.showDiagramPreview",
+          "when": "resourceLangId == 'diagramJson'",
+          "group": "navigation"
+        }
+      ]
+    },
     "languages": [
       {
         "id": "diagramJson",
@@ -31,22 +57,24 @@
           "Data Story"
         ],
         "extensions": [
-          ".diagram.json",
           ".ds"
         ],
+        "filenamePatterns": [
+          "*.ds"
+        ],
         "configuration": "./language-configuration.json"
       }
     ],
     "customEditors": [
       {
         "viewType": "ds-ext.diagramEditor",
         "displayName": "Diagram Editor",
+        "language": "diagramJson",
+        "priority": "default",
         "selector": [
           {
-            "filenamePattern": "*.diagram.json"
-          },
-          {
-            "filenamePattern": "*.ds"
+            "filenamePattern": "*.ds",
+            "language": "diagramJson"
           }
         ]
       }

packages/ds-ext/src/DiagramDocument.ts

@@ -9,6 +9,9 @@ export class DiagramDocument implements vscode.CustomDocument {
     return new DiagramDocument(uri, fileData);
   }
 
+  private _onDidChange = new vscode.EventEmitter<vscode.CustomDocumentEditEvent<DiagramDocument>>();
+  readonly onDidChange = this._onDidChange.event;
+
   private constructor(
     public readonly uri: vscode.Uri,
     private documentData: Uint8Array,
@@ -19,7 +22,7 @@ export class DiagramDocument implements vscode.CustomDocument {
   }
 
   dispose(): void {
-    // Clean up resources here if needed
+    this._onDidChange.dispose();
   }
 
   // Save the document to the file system
@@ -50,5 +53,10 @@ export class DiagramDocument implements vscode.CustomDocument {
   // A method to update the document data
   update(newData: Uint8Array) {
     this.documentData = newData;
+    this._onDidChange.fire({
+      document: this,
+      undo: () => {}, // TODO: Implement proper undo if needed
+      redo: () => {},  // TODO: Implement proper redo if needed
+    });
   }
-}
+}

packages/ds-ext/src/DiagramEditorProvider.ts

@@ -21,11 +21,11 @@ import { loadConfig } from './loadConfig';
 import { DataStoryConfig } from './DataStoryConfig';
 
 export class DiagramEditorProvider implements vscode.CustomEditorProvider<DiagramDocument> {
-  private readonly _onDidChangeCustomDocument = new vscode.EventEmitter<vscode.CustomDocumentEditEvent<DiagramDocument>>();
-  public readonly onDidChangeCustomDocument = this._onDidChangeCustomDocument.event;
+  public readonly onDidChangeCustomDocument = new vscode.EventEmitter<vscode.CustomDocumentEditEvent<DiagramDocument>>().event;
   private inputObserverController!: InputObserverController;
   private observerStorage!: ObserverStorage;
   private config: DataStoryConfig;
+  private contentMap = new Map<string, DiagramDocument>();
 
   constructor(private readonly context: vscode.ExtensionContext) {
     this.config = loadConfig(this.context);
@@ -58,6 +58,10 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
     this.inputObserverController = new InputObserverController(this.observerStorage);
   }
 
+  /**
+   * openCustomDocument is called when the first time an editor for a given resource is opened.
+   * When multiple instances of the editor are opened or closed, the OpenCustomDocument method won't be re-invoked.
+   */
   async openCustomDocument(
     uri: vscode.Uri,
     _openContext: vscode.CustomDocumentOpenContext,
@@ -66,7 +70,10 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
     // Initialize storage with diagram ID from the file name
     const diagramId = path.basename(uri.fsPath);
     await this.initializeStorage(diagramId);
-    return DiagramDocument.create(uri);
+
+    const diagramDocument = await DiagramDocument.create(uri);
+    this.contentMap.set(uri.toString(), diagramDocument);
+    return diagramDocument;
   }
 
   resolveCustomEditor(
@@ -152,6 +159,14 @@ export class DiagramEditorProvider implements vscode.CustomEditorProvider<Diagra
     `;
   }
 
+  provideDiagramContent(uri: vscode.Uri): DiagramDocument {
+    const document = this.contentMap.get(uri.toString());
+    if (!document) {
+      throw new Error('Could not find document');
+    }
+
+    return document;
+  }
   // Save changes to the document
   saveCustomDocument(document: DiagramDocument, cancellation: vscode.CancellationToken): Thenable<void> {
     return document.save();

packages/ds-ext/src/JsonReadonlyProvider.ts

@@ -0,0 +1,24 @@
+import vscode from 'vscode';
+
+export class JsonReadonlyProvider implements vscode.TextDocumentContentProvider {
+  // Store the content corresponding to each URI
+  private contentMap = new Map<string, string>();
+  readonly onDidChangeEmitter = new vscode.EventEmitter<vscode.Uri>();
+  readonly onDidChange = this.onDidChangeEmitter.event;
+
+  // Update the content of the specified URI
+  updateContent(uri: vscode.Uri, content: string) {
+    this.contentMap.set(uri.toString(), content);
+    // Notify VS Code that the content has been updated
+    this.onDidChangeEmitter.fire(uri);
+  }
+
+  provideTextDocumentContent(uri: vscode.Uri): string {
+    return this.contentMap.get(uri.toString()) || '';
+  }
+
+  dispose() {
+    this.contentMap.clear();
+    this.onDidChangeEmitter.dispose();
+  }
+}

packages/ds-ext/src/commands/createDemosDirectory.ts

@@ -37,7 +37,7 @@ export async function createDemosDirectory() {
     makeDensityDatasets(path.join(demosDir, 'data', 'densities'));
 
     for (const [moduleName, demoFactory] of Object.entries(demos)) {
-      const filePath = path.join(demosDir, `${moduleName}.diagram.json`);
+      const filePath = path.join(demosDir, `${moduleName}.ds`);
       const demoData = await demoFactory();
       fs.writeFileSync(filePath, JSON.stringify(demoData, null, 2));
     }

packages/ds-ext/src/extension.ts

@@ -3,20 +3,81 @@ import { DiagramEditorProvider } from './DiagramEditorProvider';
 import { createDemosDirectory } from './commands/createDemosDirectory';
 import path from 'path';
 import * as fs from 'fs';
+import { JsonReadonlyProvider } from './JsonReadonlyProvider';
+import { DiagramDocument } from './DiagramDocument';
 
 let diagramEditorProvider: DiagramEditorProvider;
+let jsonReadonlyProvider: JsonReadonlyProvider | undefined;
+
+function createReadonlyUri(args: vscode.Uri): vscode.Uri {
+  const fileName = path.basename(args.path, '.json');
+  const readOnlyUri = vscode.Uri.parse(
+    `json-readonly:Preview_${fileName}.json`,
+  );
+
+  return readOnlyUri;
+}
 
 export function activate(context: vscode.ExtensionContext) {
   let disposable = vscode.commands.registerCommand('ds-ext.createDemos', async () => {
     await createDemosDirectory();
   });
 
+  diagramEditorProvider = new DiagramEditorProvider(context);
+  jsonReadonlyProvider = new JsonReadonlyProvider();
+  context.subscriptions.push(
+    vscode.workspace.registerTextDocumentContentProvider('json-readonly', jsonReadonlyProvider),
+  );
+
+  const registerDiagramChangeAndCloseListeners = (diagramDocument: DiagramDocument, readOnlyUri: vscode.Uri): void => {
+    const changeSubscription = diagramDocument.onDidChange(async(diagramInfo) => {
+      const diagramJson = JSON.parse(new TextDecoder().decode(diagramInfo.document.data));
+
+      // update the content of the read-only document
+      jsonReadonlyProvider!.updateContent(
+        readOnlyUri,
+        JSON.stringify(diagramJson, null, 2),
+      );
+    });
+
+    // stop listening when the document is closed
+    const closeSubscription = vscode.workspace.onDidCloseTextDocument(closedDoc => {
+      if (closedDoc.uri.toString() === readOnlyUri.toString()) {
+        changeSubscription.dispose();
+        closeSubscription .dispose();
+      }
+    });
+    context.subscriptions.push(changeSubscription, closeSubscription );
+  };
+
+  vscode.commands.registerCommand('ds-ext.showDiagramPreview', async (args: vscode.Uri) => {
+    const diagramDocument = diagramEditorProvider.provideDiagramContent(args);
+    const diagramData = diagramDocument?.data;
+    const dataString = JSON.stringify(JSON.parse(new TextDecoder().decode(diagramData)), null, 2);
+    const readOnlyUri = createReadonlyUri(args);
+
+    jsonReadonlyProvider!.updateContent(readOnlyUri, dataString);
+
+    // Open the document and show readonly content
+    const doc = await vscode.workspace.openTextDocument(readOnlyUri);
+    await vscode.languages.setTextDocumentLanguage(doc, 'json');
+    const editor = await vscode.window.showTextDocument(doc, {
+      viewColumn: vscode.ViewColumn.Beside,
+      preview: true,
+      preserveFocus: true,
+    });
+
+    if (diagramDocument) {
+      // Listen for diagram changes and update content and stop listening when the document is closed
+      registerDiagramChangeAndCloseListeners(diagramDocument, readOnlyUri);
+    }
+  });
+
   const outputChannel = vscode.window.createOutputChannel('DS-Ext');
   outputChannel.appendLine('Congratulations, your extension "ds-ext" is now active!');
   outputChannel.appendLine(`ds-ext is installed at ${context.extensionPath}`);
   // outputChannel.show();
 
-  diagramEditorProvider = new DiagramEditorProvider(context);
   context.subscriptions.push(
     vscode.window.registerCustomEditorProvider(
       'ds-ext.diagramEditor',
@@ -52,4 +113,5 @@ export function activate(context: vscode.ExtensionContext) {
 
 export function deactivate(context: any) {
   diagramEditorProvider.dispose();
-}
+  jsonReadonlyProvider?.dispose();
+}

packages/ds-ext/themes/file-icon-theme.json

@@ -5,7 +5,6 @@
     }
   },
   "fileExtensions": {
-    "diagram.json": "diagramIcon",
     "ds": "diagramIcon"
   },
   "fileNames": {},

packages/ui/src/components/DataStory/controls/ImportControl.tsx

@@ -10,7 +10,7 @@ const defaultImport = (): Promise<Diagram> => {
     // create an input element
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = '.diagram.json,.ds';
+    input.accept = '.ds';
     input.style.display = 'none';
 
     // when the user selects a file

packages/ui/src/components/DataStory/hooks/useEscapeKey.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react';
 const KEY_NAME_ESC = 'Escape';
 const KEY_EVENT_TYPE = 'keyup';
 
-export function useEscapeKey(handleClose: () => void,  flowRef?: React.RefObject<HTMLDivElement>) {
+export function useEscapeKey(handleClose: () => void,  flowRef?: React.RefObject<HTMLDivElement | null>) {
   const handleEscKey = useCallback((event: KeyboardEvent) => {
     if (event.key === KEY_NAME_ESC) {
       handleClose();

packages/ui/src/components/DropDown/index.tsx

@@ -1,5 +1,5 @@
 import '../../styles/globals.css';
-import { useCallback, useMemo, useState } from 'react';
+import { JSX, useCallback, useMemo, useState } from 'react';
 import {
   autoUpdate,
   type ExtendedRefs,

packages/ui/src/components/Node/table/TableCell.tsx

@@ -27,7 +27,7 @@ const formatTooltipContent = (content: unknown) => {
   }
 }
 
-export function TableCell(props: { tableRef: React.RefObject<HTMLTableElement>, content?: unknown }): JSX.Element {
+export function TableCell(props: { tableRef: React.RefObject<HTMLTableElement | null>, content?: unknown }) {
   const { content = '', tableRef } = props;
   const [showTooltip, setShowTooltip] = useState(false);