Use sourceLocationPrefix to get relative path inside database

Author: robertbrignull

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

@@ -45,7 +45,7 @@ export class DataExtensionsEditorModule extends DisposableObject {
       baseQueryStorageDir,
       "data-extensions-editor-results",
     );
-    this.modelDetailsPanel = this.push(new ModelDetailsPanel());
+    this.modelDetailsPanel = this.push(new ModelDetailsPanel(cliServer));
   }
 
   public static async initialize(

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

@@ -73,7 +73,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
     private readonly updateModelDetailsPanelState: (
       externalApiUsages: ExternalApiUsage[],
       databaseItem: DatabaseItem,
-    ) => void,
+    ) => Promise<void>,
   ) {
     super(ctx);
 
@@ -302,7 +302,7 @@ export class DataExtensionsEditorView extends AbstractWebview<
             t: "setExternalApiUsages",
             externalApiUsages,
           });
-          this.updateModelDetailsPanelState(
+          await this.updateModelDetailsPanelState(
             externalApiUsages,
             this.databaseItem,
           );

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

@@ -6,32 +6,43 @@ import {
   TreeDataProvider,
   TreeItem,
   TreeItemCollapsibleState,
+  Uri,
 } from "vscode";
 import { DisposableObject } from "../../common/disposable-object";
 import { ExternalApiUsage, Usage } from "../external-api-usage";
 import { DatabaseItem } from "../../databases/local-databases";
+import { relative } from "path";
+import { CodeQLCliServer } from "../../codeql-cli/cli";
 
 export class ModelDetailsDataProvider
   extends DisposableObject
   implements TreeDataProvider<ModelDetailsTreeViewItem>
 {
   private externalApiUsages: ExternalApiUsage[] = [];
   private databaseItem: DatabaseItem | undefined = undefined;
+  private sourceLocationPrefix: string | undefined = undefined;
 
   private readonly onDidChangeTreeDataEmitter = this.push(
     new EventEmitter<void>(),
   );
 
+  public constructor(private readonly cliServer: CodeQLCliServer) {
+    super();
+  }
+
   public get onDidChangeTreeData(): Event<void> {
     return this.onDidChangeTreeDataEmitter.event;
   }
 
-  public setState(
+  public async setState(
     externalApiUsages: ExternalApiUsage[],
     databaseItem: DatabaseItem,
-  ): void {
+  ): Promise<void> {
     this.externalApiUsages = externalApiUsages;
     this.databaseItem = databaseItem;
+    this.sourceLocationPrefix = await this.databaseItem.getSourceLocationPrefix(
+      this.cliServer,
+    );
     this.onDidChangeTreeDataEmitter.fire();
   }
 
@@ -44,7 +55,10 @@ export class ModelDetailsDataProvider
       };
     } else {
       return {
-        label: `${item.label} at ${item.url.uri} [${item.url.startLine}, ${item.url.endLine}]`,
+        label: item.label,
+        description: `${this.relativePathWithinDatabase(item.url.uri)} [${
+          item.url.startLine
+        }, ${item.url.endLine}]`,
         collapsibleState: TreeItemCollapsibleState.None,
         command: {
           title: "Show usage",
@@ -56,6 +70,15 @@ export class ModelDetailsDataProvider
     }
   }
 
+  private relativePathWithinDatabase(uri: string): string {
+    const parsedUri = Uri.parse(uri);
+    if (this.sourceLocationPrefix) {
+      return relative(this.sourceLocationPrefix, parsedUri.fsPath);
+    } else {
+      return parsedUri.fsPath;
+    }
+  }
+
   getChildren(item?: ModelDetailsTreeViewItem): ModelDetailsTreeViewItem[] {
     if (item === undefined) {
       return this.externalApiUsages;

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

@@ -3,27 +3,28 @@ import { DisposableObject } from "../../common/disposable-object";
 import { ModelDetailsDataProvider } from "./model-details-data-provider";
 import { DatabaseItem } from "../../databases/local-databases";
 import { ExternalApiUsage, Usage } from "../external-api-usage";
+import { CodeQLCliServer } from "../../codeql-cli/cli";
 
 export class ModelDetailsPanel extends DisposableObject {
   private readonly dataProvider: ModelDetailsDataProvider;
   private readonly treeView: TreeView<ExternalApiUsage | Usage>;
 
-  public constructor() {
+  public constructor(cliServer: CodeQLCliServer) {
     super();
 
-    this.dataProvider = new ModelDetailsDataProvider();
+    this.dataProvider = new ModelDetailsDataProvider(cliServer);
 
     this.treeView = window.createTreeView("codeQLModelDetails", {
       treeDataProvider: this.dataProvider,
     });
     this.push(this.treeView);
   }
 
-  public setState(
+  public async setState(
     externalApiUsages: ExternalApiUsage[],
     databaseItem: DatabaseItem,
-  ): void {
-    this.dataProvider.setState(externalApiUsages, databaseItem);
+  ): Promise<void> {
+    await this.dataProvider.setState(externalApiUsages, databaseItem);
     this.treeView.badge = {
       value: externalApiUsages.length,
       tooltip: "Number of external APIs",