Refactoring of Backlinks, Placeholder and Orphan panels (#1226)

- Placeholder and Orphan panels using the Folder hierarchy

- Backlinks using the same pattern as the other tree views

packages/foam-vscode/src/features/panels/backlinks.spec.ts

@@ -9,7 +9,6 @@ import {
 import { BacklinksTreeDataProvider } from './backlinks';
 import { toVsCodeUri } from '../../utils/vsc-utils';
 import { FoamGraph } from '../../core/model/graph';
-import { URI } from '../../core/model/uri';
 import {
   ResourceRangeTreeItem,
   ResourceTreeItem,
@@ -56,12 +55,6 @@ describe('Backlinks panel', () => {
     provider.target = undefined;
   });
 
-  // Skipping these as still figuring out how to interact with the provider
-  // running in the test instance of VS Code
-  it.skip('does not target excluded files', async () => {
-    provider.target = URI.file('/excluded-file.txt');
-    expect(await provider.getChildren()).toEqual([]);
-  });
   it.skip('targets active editor', async () => {
     const docA = await workspace.openTextDocument(toVsCodeUri(noteA.uri));
     const docB = await workspace.openTextDocument(toVsCodeUri(noteB.uri));
@@ -75,6 +68,7 @@ describe('Backlinks panel', () => {
 
   it('shows linking resources alphaetically by name', async () => {
     provider.target = noteA.uri;
+    await provider.refresh();
     const notes = (await provider.getChildren()) as ResourceTreeItem[];
     expect(notes.map(n => n.resource.uri.path)).toEqual([
       noteB.uri.path,
@@ -83,6 +77,7 @@ describe('Backlinks panel', () => {
   });
   it('shows references in range order', async () => {
     provider.target = noteA.uri;
+    await provider.refresh();
     const notes = (await provider.getChildren()) as ResourceTreeItem[];
     const linksFromB = (await provider.getChildren(
       notes[0]
@@ -95,14 +90,19 @@ describe('Backlinks panel', () => {
   });
   it('navigates to the document if clicking on note', async () => {
     provider.target = noteA.uri;
+    await provider.refresh();
     const notes = (await provider.getChildren()) as ResourceTreeItem[];
     expect(notes[0].command).toMatchObject({
       command: 'vscode.open',
-      arguments: [expect.objectContaining({ path: noteB.uri.path })],
+      arguments: [
+        expect.objectContaining({ path: noteB.uri.path }),
+        expect.objectContaining({ selection: expect.anything() }),
+      ],
     });
   });
   it('navigates to document with link selection if clicking on backlink', async () => {
     provider.target = noteA.uri;
+    await provider.refresh();
     const notes = (await provider.getChildren()) as ResourceTreeItem[];
     const linksFromB = (await provider.getChildren(
       notes[0]
@@ -120,7 +120,7 @@ describe('Backlinks panel', () => {
   it('refreshes upon changes in the workspace', async () => {
     let notes: ResourceTreeItem[] = [];
     provider.target = noteA.uri;
-
+    await provider.refresh();
     notes = (await provider.getChildren()) as ResourceTreeItem[];
     expect(notes.length).toEqual(2);
 
@@ -129,6 +129,7 @@ describe('Backlinks panel', () => {
       uri: './note-d.md',
     });
     ws.set(noteD);
+    await provider.refresh();
     notes = (await provider.getChildren()) as ResourceTreeItem[];
     expect(notes.length).toEqual(2);
 
@@ -138,8 +139,8 @@ describe('Backlinks panel', () => {
       links: [{ slug: 'note-a' }],
     });
     ws.set(noteDBis);
+    await provider.refresh();
     notes = (await provider.getChildren()) as ResourceTreeItem[];
-    expect(notes.length).toEqual(3);
     expect(notes.map(n => n.resource.uri.path)).toEqual(
       [noteB.uri, noteC.uri, noteD.uri].map(uri => uri.path)
     );

packages/foam-vscode/src/features/panels/backlinks.ts

@@ -1,6 +1,5 @@
 import * as vscode from 'vscode';
 import { URI } from '../../core/model/uri';
-
 import { isNone } from '../../utils';
 import { Foam } from '../../core/model/foam';
 import { FoamWorkspace } from '../../core/model/workspace';
@@ -12,6 +11,7 @@ import {
   createBacklinkItemsForResource,
   groupRangesByResource,
 } from './utils/tree-view-utils';
+import { BaseTreeProvider } from './utils/base-tree-provider';
 
 export default async function activate(
   context: vscode.ExtensionContext,
@@ -20,64 +20,63 @@ export default async function activate(
   const foam = await foamPromise;
 
   const provider = new BacklinksTreeDataProvider(foam.workspace, foam.graph);
+  const treeView = vscode.window.createTreeView('foam-vscode.backlinks', {
+    treeDataProvider: provider,
+    showCollapseAll: true,
+  });
+  const baseTitle = treeView.title;
 
-  vscode.window.onDidChangeActiveTextEditor(async () => {
+  const updateTreeView = async () => {
     provider.target = vscode.window.activeTextEditor
       ? fromVsCodeUri(vscode.window.activeTextEditor?.document.uri)
       : undefined;
     await provider.refresh();
-  });
+    treeView.title = baseTitle + ` (${provider.nValues})`;
+  };
+
+  updateTreeView();
 
   context.subscriptions.push(
-    vscode.window.registerTreeDataProvider('foam-vscode.backlinks', provider),
-    foam.graph.onDidUpdate(() => provider.refresh())
+    provider,
+    treeView,
+    foam.graph.onDidUpdate(() => updateTreeView()),
+    vscode.window.onDidChangeActiveTextEditor(() => updateTreeView())
   );
 }
 
-export class BacklinksTreeDataProvider
-  implements vscode.TreeDataProvider<vscode.TreeItem>
-{
+export class BacklinksTreeDataProvider extends BaseTreeProvider<vscode.TreeItem> {
   public target?: URI = undefined;
-  // prettier-ignore
-  private _onDidChangeTreeDataEmitter = new vscode.EventEmitter<BacklinkPanelTreeItem | undefined | void>();
-  readonly onDidChangeTreeData = this._onDidChangeTreeDataEmitter.event;
+  public nValues = 0;
+  private backlinkItems: ResourceRangeTreeItem[];
 
-  constructor(private workspace: FoamWorkspace, private graph: FoamGraph) {}
-
-  refresh(): void {
-    this._onDidChangeTreeDataEmitter.fire();
+  constructor(private workspace: FoamWorkspace, private graph: FoamGraph) {
+    super();
   }
 
-  getTreeItem(item: BacklinkPanelTreeItem): vscode.TreeItem {
-    return item;
+  async refresh(): Promise<void> {
+    const uri = this.target;
+
+    const backlinkItems =
+      isNone(uri) || isNone(this.workspace.find(uri))
+        ? []
+        : await createBacklinkItemsForResource(this.workspace, this.graph, uri);
+
+    this.backlinkItems = backlinkItems;
+    this.nValues = backlinkItems.length;
+    super.refresh();
   }
 
-  getChildren(item?: BacklinkPanelTreeItem): Promise<vscode.TreeItem[]> {
-    const uri = this.target;
+  async getChildren(item?: BacklinkPanelTreeItem): Promise<vscode.TreeItem[]> {
     if (item && item instanceof ResourceTreeItem) {
       return item.getChildren();
     }
 
-    if (isNone(uri) || isNone(this.workspace.find(uri))) {
-      return Promise.resolve([]);
-    }
-
-    const backlinkItems = createBacklinkItemsForResource(
-      this.workspace,
-      this.graph,
-      uri
-    );
-
     return groupRangesByResource(
       this.workspace,
-      backlinkItems,
+      this.backlinkItems,
       vscode.TreeItemCollapsibleState.Expanded
     );
   }
-
-  resolveTreeItem(item: BacklinkPanelTreeItem): Promise<BacklinkPanelTreeItem> {
-    return item.resolveTreeItem();
-  }
 }
 
 type BacklinkPanelTreeItem = ResourceTreeItem | ResourceRangeTreeItem;

packages/foam-vscode/src/features/panels/notes-explorer.ts

@@ -154,6 +154,10 @@ export class NotesProvider extends FolderTreeProvider<
         this.graph,
         res.uri
       );
+      backlinks.forEach(item => {
+        item.description = item.label;
+        item.label = item.resource.title;
+      });
       return backlinks;
     };
     return res;

packages/foam-vscode/src/features/panels/orphans.ts

@@ -31,14 +31,15 @@ export default async function activate(
   });
   provider.refresh();
   const baseTitle = treeView.title;
-  treeView.title = baseTitle + ` (${provider.numElements})`;
+  treeView.title = baseTitle + ` (${provider.nValues})`;
 
   context.subscriptions.push(
     vscode.window.registerTreeDataProvider('foam-vscode.orphans', provider),
     provider,
+    treeView,
     foam.graph.onDidUpdate(() => {
       provider.refresh();
-      treeView.title = baseTitle + ` (${provider.numElements})`;
+      treeView.title = baseTitle + ` (${provider.nValues})`;
     })
   );
 }
@@ -50,16 +51,16 @@ export class OrphanTreeView extends GroupedResourcesTreeDataProvider {
     private graph: FoamGraph,
     matcher: IMatcher
   ) {
-    super('orphans', 'orphan', state, matcher);
+    super('orphans', state, matcher);
   }
 
-  createTreeItem = uri => {
+  createValueTreeItem = uri => {
     return uri.isPlaceholder()
       ? new UriTreeItem(uri)
       : new ResourceTreeItem(this.workspace.find(uri), this.workspace);
   };
 
-  computeResources = () =>
+  getUris = () =>
     this.graph
       .getAllNodes()
       .filter(

packages/foam-vscode/src/features/panels/placeholders.ts

@@ -13,6 +13,7 @@ import { ContextMemento, fromVsCodeUri } from '../../utils/vsc-utils';
 import { FoamGraph } from '../../core/model/graph';
 import { URI } from '../../core/model/uri';
 import { FoamWorkspace } from '../../core/model/workspace';
+import { FolderTreeItem } from './utils/folder-tree-provider';
 
 export default async function activate(
   context: vscode.ExtensionContext,
@@ -33,9 +34,9 @@ export default async function activate(
     treeDataProvider: provider,
     showCollapseAll: true,
   });
-  const baseTitle = treeView.title;
-  treeView.title = baseTitle + ` (${provider.numElements})`;
   provider.refresh();
+  const baseTitle = treeView.title;
+  treeView.title = baseTitle + ` (${provider.nValues})`;
 
   context.subscriptions.push(
     treeView,
@@ -44,7 +45,7 @@ export default async function activate(
       provider.refresh();
     }),
     provider.onDidChangeTreeData(() => {
-      treeView.title = baseTitle + ` (${provider.numElements})`;
+      treeView.title = baseTitle + ` (${provider.nValues})`;
     }),
     vscode.window.onDidChangeActiveTextEditor(() => {
       if (provider.show.get() === 'for-current-file') {
@@ -67,7 +68,7 @@ export class PlaceholderTreeView extends GroupedResourcesTreeDataProvider {
     private graph: FoamGraph,
     matcher: IMatcher
   ) {
-    super('placeholders', 'placeholder', state, matcher);
+    super('placeholders', state, matcher);
     this.disposables.push(
       vscode.commands.registerCommand(
         `foam-vscode.views.${this.providerId}.show:all`,
@@ -86,21 +87,26 @@ export class PlaceholderTreeView extends GroupedResourcesTreeDataProvider {
     );
   }
 
-  createTreeItem = uri => {
+  createValueTreeItem(uri: URI, parent: FolderTreeItem<URI>): UriTreeItem {
     const item = new UriTreeItem(uri, {
+      parent,
       collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
     });
     item.getChildren = async () => {
       return groupRangesByResource(
         this.workspace,
-        createBacklinkItemsForResource(this.workspace, this.graph, uri)
+        await createBacklinkItemsForResource(
+          this.workspace,
+          this.graph,
+          uri,
+          'link'
+        )
       );
     };
-    item.iconPath = new vscode.ThemeIcon('link');
     return item;
-  };
+  }
 
-  computeResources = (): URI[] => {
+  getUris(): URI[] {
     if (this.show.get() === 'for-current-file') {
       const currentFile = vscode.window.activeTextEditor?.document.uri;
       return currentFile
@@ -111,5 +117,5 @@ export class PlaceholderTreeView extends GroupedResourcesTreeDataProvider {
         : [];
     }
     return this.graph.getAllNodes().filter(uri => uri.isPlaceholder());
-  };
+  }
 }