Add codicons into graph

Jonathan Zak · Jonathan Zak · commit 96af544f8566 · 2025-07-15T15:28:09.000-04:00
diff --git a/src/views/cytoscape/index.ts b/src/views/cytoscape/index.ts
@@ -1,6 +1,7 @@
 import { ViewColumn, window } from "vscode";
 import * as vscode from 'vscode';
 import { ContextProvider } from "../../contextProvider";
+import { icons } from "../results/explain/icons";
 
 export type Styles = {[key: string]: string};
 
@@ -40,7 +41,7 @@ export class CytoscapeGraph {
     this.elements.push({
       data: {id, label: node.label},
       style: node.styles || {},
-      classes: ".l1"
+      classes: "l1"
     });
 
     if (node.parent) {
@@ -68,8 +69,10 @@ export class CytoscapeGraph {
 
   private getHtml(webview: vscode.Webview): string {
     const data = JSON.stringify([...this.elements, ...this.edges])
+    const iconMap = JSON.stringify(icons);
     const context = ContextProvider.getContext()
     const cssUri = webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri,'src', 'views', 'cytoscape', 'media', 'explain.css'))
+    const codiconsUri = webview.asWebviewUri(vscode.Uri.joinPath(context.extensionUri,'src', 'views', 'cytoscape', 'media', 'codicons', 'dist', 'codicon.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'))
@@ -83,11 +86,13 @@ export class CytoscapeGraph {
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="${cssUri}" rel="stylesheet" />
+      <link href="${codiconsUri}" rel="stylesheet" />
       <script src="${cytoscapeUri}"></script>
       <script src="${cytoscapeHtmlLabelUri}"></script>
       <script src="${explainUri}" defer></script>
       <script>
           window.data = ${data};
+          window.iconMap = ${iconMap}
       </script>
     </head>
     <body>
diff --git a/src/views/cytoscape/media/explain.js b/src/views/cytoscape/media/explain.js
@@ -1,9 +1,9 @@
 // Initialize Cytoscape
 
-// const vscode = acquireVsCodeApi();
-console.log("IN EXPLAIN.JS!!!")
 // @ts-ignore
-const vscode = window.acquireVsCodeApi()
+const iconMap = window.iconMap;
+// @ts-ignore
+const vscode = window.acquireVsCodeApi();
 // @ts-ignore
 const cy = cytoscape({
   container: document.getElementById("diagramContainer"),
@@ -38,10 +38,9 @@ const cy = cytoscape({
 
   // Layout options
   layout: {
-    name: "breadthfirst",
-    directed: true, // Directional tree
-    padding: 10, // Padding around the graph
-    spacingFactor: 1.5, // Spacing between nodes
+    name: "grid",
+    padding: 100, // Padding around the graph
+    spacingFactor: 0.4, // Spacing between nodes
   },
 });
 
@@ -50,26 +49,26 @@ cy.on("tap", "node", function (evt) {
   const id = evt.target.id();
   // @ts-ignore
   vscode.postMessage({
-      command: 'selected',
-      nodeId: id
+    command: "selected",
+    nodeId: id,
   });
 });
 
 const getCodiconClass = (label) => {
-  const codiconClass = new Map([["d", "d"]]);
-  return codiconClass.get(label);
+  const className = iconMap[label];
+  return className !== undefined ? `codicon-${className}` : "";
 };
 
-// cy.nodeHtmlLabel([
-//   {
-//     query: ".l1",
-//     valign: "top",
-//     halign: "center",
-//     valignBox: "top",
-//     halignBox: "center",
-//     tpl: function (data) {
-//       const className = getCodiconClass(data.label);
-//       return `<div><div class="icon"><i class="codicon ${className}"></i></div>`;
-//     },
-//   },
-// ]);
+cy.nodeHtmlLabel([
+  {
+    query: ".l1",
+    valign: "top",
+    halign: "center",
+    valignBox: "top",
+    halignBox: "center",
+    tpl: function (data) {
+      const className = getCodiconClass(data.label);
+      return `<div><div class="icon"><i class="codicon ${className}"></i></div>`;
+    },
+  },
+]);
diff --git a/src/views/results/explain/icons.ts b/src/views/results/explain/icons.ts
@@ -6,7 +6,7 @@
  * @see https://www.ibm.com/docs/en/i/7.5?topic=ssw_ibm_i_75/apis/qqqvexpl.html#icon_labels
  * @see https://code.visualstudio.com/api/references/icons-in-labels
  */
-const icons = {
+export const icons = {
   "Bitmap Merge":                           `merge`,
   "Cache":                                  ``,
   "Cache Probe":                            ``,
diff --git a/src/views/results/index.ts b/src/views/results/index.ts
@@ -389,7 +389,7 @@ 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
