Click on node to show detail

Signed-off-by: worksofliam <[email protected]>

Author: worksofliam

src/views/cytoscape/index.ts

@@ -48,10 +48,17 @@ export class CytoscapeGraph {
     return id;
   }
 
-  createView(title: string) {
+  createView(title: string, onNodeSelected: (data: unknown) => void): any {
     const webview = window.createWebviewPanel(`c`, title, {viewColumn: ViewColumn.One}, {enableScripts: true, retainContextWhenHidden: true});
     webview.webview.html = this.getHtml();
 
+    webview.webview.onDidReceiveMessage((message) => {
+      if (message.command === 'selected') {
+        const data = this.elementData.get(message.nodeId);
+        onNodeSelected(data);
+      }
+    }, undefined, []);
+
     return webview;
   }
 
@@ -90,6 +97,7 @@ export class CytoscapeGraph {
       <div class="diagram-container" id="diagramContainer"></div>
     
       <script>
+        const vscode = acquireVsCodeApi();
         document.addEventListener("DOMContentLoaded", function () {
           // Initialize Cytoscape
           const cy = cytoscape({
@@ -136,8 +144,11 @@ export class CytoscapeGraph {
     
           // Add click event to show alert for nodes
           cy.on('tap', 'node', function (evt) {
-            const node = evt.target;
-            console.log("You clicked: " + node.data('label'));
+            const id = evt.target.id();
+            vscode.postMessage({
+              command: 'selected',
+              nodeId: id
+            });
           });
         });
       </script>

src/views/results/index.ts

@@ -254,16 +254,14 @@ async function runHandler(options?: StatementInfo) {
 
             explainTree = new ExplainTree(explained.vedata);
             const topLevel = explainTree.get();
-            const rootNode = doveResultsView.setRootNode(topLevel);
-            doveNodeView.setNode(rootNode.explainNode);
-            doveTreeDecorationProvider.updateTreeItems(rootNode);
-
+            
             const graph = new CytoscapeGraph();
 
             function addNode(node: ExplainNode, parent?: string) {
               const id = graph.addNode({
                 label: node.title,
                 parent: parent,
+                data: node,
               });
 
               if (node.children) {
@@ -275,7 +273,11 @@ async function runHandler(options?: StatementInfo) {
 
             addNode(topLevel);
 
-            const webview = graph.createView(`Explain Graph`);
+            const webview = graph.createView(`Explain Graph`, (data: ExplainNode) => {
+              if (data) {
+                doveNodeView.setNode(data);
+              }
+            });
 
           } else {
             vscode.window.showInformationMessage(`No job currently selected.`);