refactor explain graph

Jonathan Zak · Jonathan Zak · commit 3c9e48c5aef2 · 2025-07-15T13:58:44.000-04:00
diff --git a/src/views/cytoscape/index.ts b/src/views/cytoscape/index.ts
@@ -1,10 +1,13 @@
 import { ViewColumn, window } from "vscode";
+import * as vscode from 'vscode';
+import { ContextProvider } from "../../contextProvider";
 
-type Styles = {[key: string]: string};
+export type Styles = {[key: string]: string};
 
 export interface Element {
   data: {id: string, label: string},
-  style: Styles
+  style: Styles,
+  classes: string
 }
 
 export interface Edge {
@@ -36,7 +39,8 @@ export class CytoscapeGraph {
 
     this.elements.push({
       data: {id, label: node.label},
-      style: node.styles || {}
+      style: node.styles || {},
+      classes: ".l1"
     });
 
     if (node.parent) {
@@ -50,7 +54,7 @@ export class CytoscapeGraph {
 
   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.html = this.getHtml(webview.webview);
 
     webview.webview.onDidReceiveMessage((message) => {
       if (message.command === 'selected') {
@@ -62,98 +66,33 @@ export class CytoscapeGraph {
     return webview;
   }
 
-  private getHtml(): string {
+  private getHtml(webview: vscode.Webview): string {
+    const data = JSON.stringify([...this.elements, ...this.edges])
+    const context = ContextProvider.getContext()
+    const cssUri = webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri,'src', 'views', 'cytoscape', 'media', 'explain.css'))
+    const cytoscapeUri = webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri,'src', 'views', 'cytoscape', 'media', 'cytoscape.min.js'))
+    const cytoscapeHtmlLabelUri = webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri,'src', 'views', 'cytoscape', 'media', 'cytoscape-node-html-label.min.js'))
+    const explainUri = webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri,'src', 'views', 'cytoscape', 'media', 'explain.js'))
+
+  
     return /*html*/`
     <!DOCTYPE html>
     <html lang="en">
     
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
-      <style>
-        /* html,
-        body {
-          margin: 0;
-          padding: 0;
-          height: 100%;
-          width: 100%;
-          overflow: hidden;
-        } */
-    
-        .diagram-container {
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          border: none;
-          margin: 0;
-        }
-      </style>
+      <link href="${cssUri}" rel="stylesheet" />
+      <script src="${cytoscapeUri}"></script>
+      <script src="${cytoscapeHtmlLabelUri}"></script>
+      <script src="${explainUri}" defer></script>
+      <script>
+          window.data = ${data};
+      </script>
     </head>
-    
     <body>
       <div class="diagram-container" id="diagramContainer"></div>
-    
-      <script>
-        const vscode = acquireVsCodeApi();
-        document.addEventListener("DOMContentLoaded", function () {
-          // Initialize Cytoscape
-          const cy = cytoscape({
-            container: document.getElementById('diagramContainer'),
-    
-            elements: ${JSON.stringify([...this.elements, ...this.edges])},
-    
-            style: [
-              {
-                selector: 'node',
-                style: {
-                  'width': '120px',
-                  'height': '60px',
-                  'background-color': 'var(--vscode-list-activeSelectionBackground)',
-                  'color': 'var(--vscode-list-activeSelectionForeground)',
-                  'label': 'data(label)',
-                  'text-valign': 'center',
-                  'text-halign': 'center',
-                  'font-size': '14px',
-                  'text-wrap': 'wrap',
-                  'text-max-width': '100px'
-                }
-              },
-              {
-                selector: 'edge',
-                style: {
-                  'width': 2,
-                  'line-color': '#5c96bc',
-                  'target-arrow-color': '#5c96bc',
-                  'target-arrow-shape': 'triangle',
-                  'curve-style': 'bezier'
-                }
-              }
-            ],
-    
-            // Layout options
-            layout: {
-              name: 'breadthfirst',
-              directed: true, // Directional tree
-              padding: 10, // Padding around the graph
-              spacingFactor: 1.5 // Spacing between nodes
-            }
-          });
-    
-          // Add click event to show alert for nodes
-          cy.on('tap', 'node', function (evt) {
-            const id = evt.target.id();
-            vscode.postMessage({
-              command: 'selected',
-              nodeId: id
-            });
-          });
-        });
-      </script>
     </body>
-    
     </html>
     `;
   }
diff --git a/src/views/results/explain/doveTreeDecorationProvider.ts b/src/views/results/explain/doveTreeDecorationProvider.ts
@@ -35,7 +35,7 @@ export class DoveTreeDecorationProvider implements FileDecorationProvider {
      * @inheritdoc
      * Provides tree node decorations specific to Db2 for i Visual Explain.
      */
-    async provideFileDecoration(uri: Uri): Promise<FileDecoration | undefined> {
+    provideFileDecoration(uri: Uri): FileDecoration | null {
         // Only decorate tree items tagged with the VE scheme
         if (uri?.scheme === doveUriScheme) {
             // The Uri path should simply be a number that represents the highlight attributes
diff --git a/src/views/results/explain/nodes.ts b/src/views/results/explain/nodes.ts
@@ -2,6 +2,9 @@ import Statement from "../../../database/statement";
 import { ThemeColor } from "vscode";
 import Configuration from "../../../configuration";
 import { DoveNodeView } from "./doveNodeView";
+import { Styles } from "../../cytoscape";
+import * as vscode from 'vscode';
+import * as path from 'path';
 
 export interface ExplainNode {
   id: number;
@@ -15,8 +18,9 @@ export interface ExplainNode {
   highlights: NodeHighlights;
   /** Context objects include advised indexes and statistics */
   contextObjects: ContextObject[];
-  /** Context to set when displaying this node, used to identify additional actions */
+  /** Context to set when displaying t;his node, used to identify additional actions */
   nodeContext: string;
+  styles: Styles
 }
 
 export interface ExplainProperty {
@@ -54,10 +58,21 @@ export class ExplainTree {
   public get(): ExplainNode {
     return this.topNode;
   }
+
+  private setNodeShape(node: ExplainNode, shape:string){
+    node.styles["shape"] = shape
+  }
+
+  private setBackgroundImage(node: ExplainNode, imagePath:string){
+    node.styles['background-image'] = imagePath
+
+  }
   
   private processNode(index: number): ExplainNode {
-    let node = this.newNode(this.order[index]);
     let state = new NodeProcessingState();
+    let node = this.newNode(this.order[index]);
+    this.setNodeShape(node, "roundrectangle");
+    // this.setBackgroundImage(node, `url("../../../../media/explain/racing-finish-svgrepo-com.svg")`) 
 
     for (const data of this.flatNodes[node.id]) {
       // When a DELTA_ATTRIBUTES_INDICATOR row is encountered, the rows following it provide new values for previously processed attributes,
@@ -201,7 +216,8 @@ export class ExplainTree {
       tooltipProps: [],
       highlights: new NodeHighlights(),
       contextObjects: [],
-      nodeContext: ``
+      nodeContext: ``,
+      styles: {}
     };
   }
 
diff --git a/src/views/results/index.ts b/src/views/results/index.ts
@@ -10,7 +10,7 @@ import { ObjectRef, ParsedEmbeddedStatement, StatementGroup, StatementType } fro
 import Statement from "../../language/sql/statement";
 import { ExplainNode, ExplainTree } from "./explain/nodes";
 import { DoveNodeView, PropertyNode } from "./explain/doveNodeView";
-import { DoveTreeDecorationProvider } from "./explain/doveTreeDecorationProvider";
+import { DoveTreeDecorationProvider, toDoveTreeDecorationProviderUri } from "./explain/doveTreeDecorationProvider";
 import { ResultSetPanelProvider, SqlParameter } from "./resultSetPanelProvider";
 import { generateSqlForAdvisedIndexes } from "./explain/advice";
 import { updateStatusBar } from "../jobManager/statusBar";
@@ -389,9 +389,10 @@ async function runHandler(options?: StatementInfo) {
             
             function addNode(node: ExplainNode, parent?: string) {
               const id = graph.addNode({
-                label: node.title,
+                label: ` ${node.title}`,
                 parent: parent,
                 data: node,
+                styles: node.styles
               });
 
               if (node.children) {
@@ -401,6 +402,15 @@ async function runHandler(options?: StatementInfo) {
               }
             }
 
+            const uri = toDoveTreeDecorationProviderUri(topLevel.highlights);
+            const decoration = doveTreeDecorationProvider.provideFileDecoration(uri)
+            // if (decoration?.color){
+            //   topLevel.styles["background-color"] = decoration.color.id;
+            //   topLevel.styles["shape"] = "rectangle"
+            // }
+            // topLevel.styles["shape"] = "rectangle"
+
+            
             addNode(topLevel);
 
             const webview = graph.createView(`Explain Graph`, (data: ExplainNode) => {
