Send externalApiUsages data to details view whenever new data is calculated

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-module.ts

@@ -22,11 +22,13 @@ import { isQueryLanguage } from "../common/query-language";
 import { setUpPack } from "./external-api-usage-query";
 import { DisposableObject } from "../common/disposable-object";
 import { ModelDetailsPanel } from "./model-details/model-details-panel";
+import { Mode } from "./shared/mode";
 
 const SUPPORTED_LANGUAGES: string[] = ["java", "csharp"];
 
 export class DataExtensionsEditorModule extends DisposableObject {
   private readonly queryStorageDir: string;
+  private readonly modelDetailsPanel: ModelDetailsPanel;
 
   private constructor(
     private readonly ctx: ExtensionContext,
@@ -41,7 +43,7 @@ export class DataExtensionsEditorModule extends DisposableObject {
       baseQueryStorageDir,
       "data-extensions-editor-results",
     );
-    this.push(new ModelDetailsPanel());
+    this.modelDetailsPanel = this.push(new ModelDetailsPanel());
   }
 
   public static async initialize(
@@ -142,6 +144,8 @@ export class DataExtensionsEditorModule extends DisposableObject {
               queryDir,
               db,
               modelFile,
+              Mode.Application,
+              (usages) => this.modelDetailsPanel.setExternalApiUsages(usages),
             );
             await view.openView();
           },

extensions/ql-vscode/src/data-extensions-editor/data-extensions-editor-view.ts

@@ -76,7 +76,10 @@ export class DataExtensionsEditorView extends AbstractWebview<
     private readonly queryDir: string,
     private readonly databaseItem: DatabaseItem,
     private readonly extensionPack: ExtensionPack,
-    private mode: Mode = Mode.Application,
+    private mode: Mode,
+    private readonly onExternalApiUsagesChanged: (
+      externalApiUsages: ExternalApiUsage[],
+    ) => void,
   ) {
     super(ctx);
   }
@@ -307,6 +310,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
             t: "setExternalApiUsages",
             externalApiUsages,
           });
+          this.onExternalApiUsagesChanged(externalApiUsages);
         } catch (err) {
           void showAndLogExceptionWithTelemetry(
             this.app.logger,
@@ -588,6 +592,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
         addedDatabase,
         modelFile,
         Mode.Framework,
+        this.onExternalApiUsagesChanged,
       );
       await view.openView();
     });

extensions/ql-vscode/src/data-extensions-editor/external-api-usage.ts

@@ -13,7 +13,7 @@ export enum CallClassification {
   Generated = "generated",
 }
 
-type Usage = Call & {
+export type Usage = Call & {
   classification: CallClassification;
 };
 

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-data-provider.ts

@@ -1,17 +1,61 @@
-import { TreeDataProvider, TreeItem } from "vscode";
+import {
+  Event,
+  EventEmitter,
+  TreeDataProvider,
+  TreeItem,
+  TreeItemCollapsibleState,
+} from "vscode";
 import { DisposableObject } from "../../common/disposable-object";
+import { ExternalApiUsage, Usage } from "../external-api-usage";
 
 export class ModelDetailsDataProvider
   extends DisposableObject
   implements TreeDataProvider<ModelDetailsTreeViewItem>
 {
-  getTreeItem(): TreeItem {
-    throw new Error("Method not implemented.");
+  private externalApiUsages: ExternalApiUsage[] = [];
+
+  private readonly onDidChangeTreeDataEmitter = this.push(
+    new EventEmitter<void>(),
+  );
+
+  public get onDidChangeTreeData(): Event<void> {
+    return this.onDidChangeTreeDataEmitter.event;
   }
 
-  getChildren(): ModelDetailsTreeViewItem[] {
-    return [];
+  public setExternalApiUsages(externalApiUsages: ExternalApiUsage[]): void {
+    this.externalApiUsages = externalApiUsages;
+    this.onDidChangeTreeDataEmitter.fire();
+  }
+
+  getTreeItem(item: ModelDetailsTreeViewItem): TreeItem {
+    if (isExternalApiUsage(item)) {
+      return {
+        label: item.signature,
+        collapsibleState: TreeItemCollapsibleState.Collapsed,
+      };
+    } else {
+      return {
+        label: item.label,
+        collapsibleState: TreeItemCollapsibleState.None,
+      };
+    }
+  }
+
+  getChildren(item?: ModelDetailsTreeViewItem): ModelDetailsTreeViewItem[] {
+    if (item === undefined) {
+      return this.externalApiUsages;
+    } else if (isExternalApiUsage(item)) {
+      return item.usages;
+    } else {
+      return [];
+    }
   }
 }
 
-interface ModelDetailsTreeViewItem {}
+type ModelDetailsTreeViewItem = ExternalApiUsage | Usage;
+
+function isExternalApiUsage(
+  item: ModelDetailsTreeViewItem,
+): item is ExternalApiUsage {
+  return (item as any).usages !== undefined;
+}

extensions/ql-vscode/src/data-extensions-editor/model-details/model-details-panel.ts

@@ -1,16 +1,23 @@
 import { window } from "vscode";
 import { DisposableObject } from "../../common/disposable-object";
 import { ModelDetailsDataProvider } from "./model-details-data-provider";
+import { ExternalApiUsage } from "../external-api-usage";
 
 export class ModelDetailsPanel extends DisposableObject {
+  private readonly dataProvider: ModelDetailsDataProvider;
+
   public constructor() {
     super();
 
-    const dataProvider = new ModelDetailsDataProvider();
+    this.dataProvider = new ModelDetailsDataProvider();
 
     const treeView = window.createTreeView("codeQLModelDetails", {
-      treeDataProvider: dataProvider,
+      treeDataProvider: this.dataProvider,
     });
     this.push(treeView);
   }
+
+  public setExternalApiUsages(externalApiUsages: ExternalApiUsage[]): void {
+    this.dataProvider.setExternalApiUsages(externalApiUsages);
+  }
 }