Working visual explain UX

Author: worksofliam

package.json

@@ -92,6 +92,19 @@
           "name": "Results",
           "when": "code-for-ibmi:connected == true",
           "contextualTitle": "IBM i"
+        },
+        {
+          "type": "tree",
+          "id": "vscode-db2i.dove.nodes",
+          "name": "Visual Explain",
+          "when": "vscode-db2i:explaining == true",
+          "contextualTitle": "IBM i"
+        },
+        {
+          "type": "tree",
+          "id": "vscode-db2i.dove.node",
+          "name": "Node Detail",
+          "when": "vscode-db2i:explainingNode == true"
         }
       ],
       "db2-explorer": [
@@ -328,6 +341,18 @@
         "title": "Delete configuration",
         "category": "Db2 for i",
         "icon": "$(trash)"
+      },
+      {
+        "command": "vscode-db2i.dove.close",
+        "title": "Close detail",
+        "category": "Db2 for i",
+        "icon": "$(close-all)"
+      },
+      {
+        "command": "vscode-db2i.dove.nodeDetail",
+        "title": "See detail",
+        "category": "Db2 for i",
+        "icon": "$(info)"
       }
     ],
     "menus": {
@@ -375,6 +400,10 @@
         {
           "command": "vscode-db2i.jobManager.deleteConfig",
           "when": "never"
+        },
+        {
+          "command": "vscode-db2i.dove.nodeDetail",
+          "when": "never"
         }
       ],
       "editor/context": [
@@ -436,6 +465,11 @@
           "command": "vscode-db2i.jobManager.endAll",
           "group": "navigation",
           "when": "view == jobManager"
+        },
+        {
+          "command": "vscode-db2i.dove.close",
+          "group": "navigation",
+          "when": "view == vscode-db2i.dove.nodes"
         }
       ],
       "view/item/context": [
@@ -553,6 +587,11 @@
           "command": "vscode-db2i.jobManager.deleteConfig",
           "when": "view == jobManager && viewItem == savedConfig",
           "group": "inline"
+        },
+        {
+          "command": "vscode-db2i.dove.nodeDetail",
+          "when": "view == vscode-db2i.dove.nodes && viewItem == explainTreeItem",
+          "group": "inline"
         }
       ]
     }

src/connection/sqlJob.ts

@@ -1,7 +1,7 @@
 import { CommandResult } from "@halcyontech/vscode-ibmi-types";
 import { getInstance } from "../base";
 import { ServerComponent } from "./serverComponent";
-import { JDBCOptions, ConnectionResult, Rows, QueryResult, JobLogEntry, CLCommandResult, VersionCheckResult, GetTraceDataResult, ServerTraceDest, ServerTraceLevel, SetConfigResult, QueryOptions } from "./types";
+import { JDBCOptions, ConnectionResult, Rows, QueryResult, JobLogEntry, CLCommandResult, VersionCheckResult, GetTraceDataResult, ServerTraceDest, ServerTraceLevel, SetConfigResult, QueryOptions, ExplainResults } from "./types";
 import { Query } from "./query";
 import { EventEmitter } from "stream";
 
@@ -214,7 +214,7 @@ export class SQLJob {
     return version;
   }
 
-  async explain(statement: string, type: ExplainType = ExplainType.Run) {
+  async explain(statement: string, type: ExplainType = ExplainType.Run): Promise<ExplainResults<any>> {
     if (type !== ExplainType.Run) {
       throw new Error("TODO: support more types of explains");
     }
@@ -226,12 +226,13 @@ export class SQLJob {
     const explainRequest = {
       id: SQLJob.getNewUniqueId(),
       type: `dove`,
-      sql: statement
+      sql: statement,
+      run: type === ExplainType.Run
     }
 
     const result = await this.send(JSON.stringify(explainRequest));
 
-    const explainResult: any = JSON.parse(result);
+    const explainResult: ExplainResults<any> = JSON.parse(result);
 
     if (explainResult.success !== true) {
       this.dispose();

src/connection/types.ts

@@ -14,6 +14,11 @@ export interface VersionCheckResult extends ServerResponse {
   version: string;
 }
 
+export interface ExplainResults<T> extends QueryResult<T> {
+  veMetadata: QueryMetaData,
+  veData: any;
+}
+
 export interface GetTraceDataResult extends ServerResponse {
   tracedata: string
 }

src/testing/jobs.ts

@@ -5,7 +5,7 @@ import { getInstance } from "../base";
 import { ServerComponent } from "../connection/serverComponent";
 import { ServerTraceDest, ServerTraceLevel } from "../connection/types";
 import { Query } from "../connection/query";
-import { ExplainTree } from "../views/explain/nodes";
+import { ExplainTree } from "../views/results/nodes";
 
 export const JobsSuite: TestSuite = {
   name: `Connection tests`,

src/views/results/doveNodeView.ts

@@ -0,0 +1,44 @@
+import { CancellationToken, Event, EventEmitter, ProviderResult, TreeDataProvider, TreeItem, TreeItemCollapsibleState, commands } from "vscode";
+import { ExplainNode, ExplainProperty } from "./nodes";
+
+export class DoveNodeView implements TreeDataProvider<any> {
+  private _onDidChangeTreeData: EventEmitter<PropertyNode | undefined | null | void> = new EventEmitter<PropertyNode | undefined | null | void>();
+  readonly onDidChangeTreeData: Event<PropertyNode | undefined | null | void> = this._onDidChangeTreeData.event;
+
+  private propertyNodes: PropertyNode[];
+
+  setNode(currentNode: ExplainNode) {
+    this.propertyNodes = currentNode.props.map(p => new PropertyNode(p));
+    this._onDidChangeTreeData.fire();
+
+    // Show tree in the view
+    commands.executeCommand(`setContext`, `vscode-db2i:explainingNode`, true);
+  }
+
+  close() {
+    commands.executeCommand(`setContext`, `vscode-db2i:explainingNode`, false);
+  }
+
+  getTreeItem(element: PropertyNode): PropertyNode | Thenable<PropertyNode> {
+    return element;
+  }
+
+  getChildren(element?: PropertyNode): ProviderResult<PropertyNode[]> {
+    return this.propertyNodes;
+  }
+
+  getParent?(element: any) {
+    throw new Error("Method not implemented.");
+  }
+  resolveTreeItem?(item: TreeItem, element: any, token: CancellationToken): ProviderResult<PropertyNode> {
+    throw new Error("Method not implemented.");
+  }
+}
+
+export class PropertyNode extends TreeItem {
+  constructor(property: ExplainProperty) {
+    super(property.title);
+
+    this.description = String(property.value);
+  }
+}

src/views/results/doveResultsView.ts

@@ -0,0 +1,60 @@
+import { CancellationToken, Event, EventEmitter, ProviderResult, TreeDataProvider, TreeItem, TreeItemCollapsibleState, commands } from "vscode";
+import { ExplainNode } from "./nodes";
+
+export class DoveResultsView implements TreeDataProvider<any> {
+  private _onDidChangeTreeData: EventEmitter<ExplainTreeItem | undefined | null | void> = new EventEmitter<ExplainTreeItem | undefined | null | void>();
+  readonly onDidChangeTreeData: Event<ExplainTreeItem | undefined | null | void> = this._onDidChangeTreeData.event;
+
+  private topNode: ExplainTreeItem;
+
+  setRootNode(topNode: ExplainNode) {
+    this.topNode = new ExplainTreeItem(topNode);
+    this._onDidChangeTreeData.fire();
+
+    // Show tree in the view
+    commands.executeCommand(`setContext`, `vscode-db2i:explaining`, true);
+  }
+
+  close() {
+    commands.executeCommand(`setContext`, `vscode-db2i:explaining`, false);
+  }
+
+  getTreeItem(element: ExplainTreeItem): ExplainTreeItem | Thenable<ExplainTreeItem> {
+    return element;
+  }
+
+  getChildren(element?: ExplainTreeItem): ProviderResult<ExplainTreeItem[]> {
+    if (element) {
+      return element.getChildren();
+    }
+    else if (this.topNode) {
+      return [this.topNode];
+    } else {
+      return [];
+    }
+  }
+
+  getParent?(element: any) {
+    throw new Error("Method not implemented.");
+  }
+  resolveTreeItem?(item: TreeItem, element: any, token: CancellationToken): ProviderResult<ExplainTreeItem> {
+    throw new Error("Method not implemented.");
+  }
+}
+
+export class ExplainTreeItem extends TreeItem {
+  children: ExplainTreeItem[];
+  explainNode: ExplainNode;
+  constructor(node: ExplainNode) {
+    super(node.title, node.childrenNodes > 0 ? TreeItemCollapsibleState.Expanded : TreeItemCollapsibleState.None);
+
+    this.explainNode = node;
+    this.contextValue = `explainTreeItem`;
+
+    // TODO: icons
+  }
+
+  getChildren() {
+    return this.explainNode.children.map(c => new ExplainTreeItem(c));
+  }
+}