Enable forward twohop links

src/main.tsx

@@ -39,11 +39,18 @@ export default class TwohopLinksPlugin extends Plugin {
       this.app.metadataCache.getFileCache(activeFile);
 
     // Aggregate links
-    const twoHopLinks = this.getTwohopLinks(activeFile);
+    const unresolvedTwoHopLinks = this.getTwohopLinks(
+      activeFile,
+      this.app.metadataCache.unresolvedLinks
+    );
+    const resolvedTwoHopLinks = this.getTwohopLinks(
+      activeFile,
+      this.app.metadataCache.resolvedLinks
+    );
     const [connectedLinks, newLinks] = await this.getLinks(
       activeFile,
       activeFileCache,
-      twoHopLinks
+      unresolvedTwoHopLinks.concat(resolvedTwoHopLinks)
     );
 
     const tagLinksList = this.getTagLinksList(activeFile, activeFileCache);
@@ -58,14 +65,16 @@ export default class TwohopLinksPlugin extends Plugin {
     await this.injectTwohopLinks(
       connectedLinks,
       newLinks,
-      twoHopLinks,
+      unresolvedTwoHopLinks,
+      resolvedTwoHopLinks,
       tagLinksList,
       markdownEditingEl
     );
     await this.injectTwohopLinks(
       connectedLinks,
       newLinks,
-      twoHopLinks,
+      unresolvedTwoHopLinks,
+      resolvedTwoHopLinks,
       tagLinksList,
       previewEl
     );
@@ -115,7 +124,8 @@ export default class TwohopLinksPlugin extends Plugin {
   private async injectTwohopLinks(
     connectedLinks: FileEntity[],
     newLinks: FileEntity[],
-    twoHopLinks: TwohopLink[],
+    unresolvedTwoHopLinks: TwohopLink[],
+    resolvedTwoHopLinks: TwohopLink[],
     tagLinksList: TagLinks[],
     el: Element
   ) {
@@ -129,7 +139,8 @@ export default class TwohopLinksPlugin extends Plugin {
       <TwohopLinksRootView
         connectedLinks={connectedLinks}
         newLinks={newLinks}
-        twoHopLinks={twoHopLinks}
+        unresolvedTwoHopLinks={unresolvedTwoHopLinks}
+        resolvedTwoHopLinks={resolvedTwoHopLinks}
         tagLinksList={tagLinksList}
         onClick={this.openFile.bind(this)}
         getPreview={this.readPreview.bind(this)}
@@ -138,26 +149,36 @@ export default class TwohopLinksPlugin extends Plugin {
     );
   }
 
-  private async openFile(fileEntity: FileEntity) {
-    if (fileEntity.sourcePath == null) {
+  private async openFile(fileEntity: FileEntity): Promise<void> {
+    console.debug(
+      `Open file: linkText='${fileEntity.linkText}', sourcePath='${fileEntity.sourcePath}'`
+    );
+    const file = this.app.metadataCache.getFirstLinkpathDest(
+      fileEntity.linkText,
+      fileEntity.sourcePath
+    );
+    if (file == null) {
       if (!confirm(`Create new file: ${fileEntity.linkText}?`)) {
         console.log("Canceled!!");
-        return false;
+        return;
       }
     }
-    await this.app.workspace.openLinkText(
+    return this.app.workspace.openLinkText(
       fileEntity.linkText,
       fileEntity.sourcePath
     );
   }
 
-  private getTwohopLinks(activeFile: TFile): TwohopLink[] {
+  private getTwohopLinks(
+    activeFile: TFile,
+    links: Record<string, Record<string, number>>
+  ): TwohopLink[] {
     const twoHopLinks: Record<string, FileEntity[]> = {};
     // no unresolved links in this file
-    if (this.app.metadataCache.unresolvedLinks[activeFile.path] == null) {
+    if (links[activeFile.path] == null) {
       return [];
     }
-    const unresolved = this.aggregate2hopLinks(activeFile);
+    const unresolved = this.aggregate2hopLinks(activeFile, links);
     if (unresolved == null) {
       return [];
     }
@@ -170,17 +191,22 @@ export default class TwohopLinksPlugin extends Plugin {
       }
     }
 
-    return Object.keys(this.app.metadataCache.unresolvedLinks[activeFile.path])
+    return Object.keys(links[activeFile.path])
       .map((path) => {
         return twoHopLinks[path]
-          ? new TwohopLink(FileEntity.fromLink(path), twoHopLinks[path])
+          ? new TwohopLink(
+              new FileEntity(activeFile.path, path),
+              twoHopLinks[path]
+            )
           : null;
       })
       .filter((it) => it);
   }
 
-  private aggregate2hopLinks(activeFile: TFile): Record<string, string[]> {
-    const links = this.app.metadataCache.unresolvedLinks;
+  private aggregate2hopLinks(
+    activeFile: TFile,
+    links: Record<string, Record<string, number>>
+  ): Record<string, string[]> {
     const result: Record<string, string[]> = {};
     const activeFileLinks = new Set(Object.keys(links[activeFile.path]));
 

src/model/FileEntity.tsx

@@ -13,8 +13,4 @@ export class FileEntity {
   key(): string {
     return this.linkText;
   }
-
-  static fromLink(link: string): FileEntity {
-    return new FileEntity(null, link);
-  }
 }

src/ui/ConnectedLinksView.tsx

@@ -4,7 +4,7 @@ import LinkView from "./LinkView";
 
 interface ConnectedLinksViewProps {
   fileEntities: FileEntity[];
-  onClick: (fileEntity: FileEntity) => void;
+  onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
 }
 

src/ui/LinkView.tsx

@@ -3,7 +3,7 @@ import { FileEntity } from "../model/FileEntity";
 
 interface LinkViewProps {
   fileEntity: FileEntity;
-  onClick: (fileEntity: FileEntity) => void;
+  onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
 }
 
@@ -29,7 +29,9 @@ export default class LinkView extends React.Component<
     return (
       <div
         className={"twohop-links-box"}
-        onClick={() => this.props.onClick(this.props.fileEntity)}
+        onClick={async () => this.props.onClick(this.props.fileEntity)}
+        // To overwrite CodeMirror's handler
+        onMouseDown={async () => this.props.onClick(this.props.fileEntity)}
       >
         <div className="twohop-links-box-title">
           {this.props.fileEntity.linkText}

src/ui/NewLinksView.tsx

@@ -4,7 +4,7 @@ import LinkView from "./LinkView";
 
 interface NewLinksViewProps {
   fileEntities: FileEntity[];
-  onClick: (fileEntity: FileEntity) => void;
+  onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
 }
 

src/ui/TagLinksListView.tsx

@@ -5,7 +5,7 @@ import { TagLinks } from "../model/TagLinks";
 
 interface TagLinksListViewProps {
   tagLinksList: TagLinks[];
-  onClick: (fileEntity: FileEntity) => void;
+  onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
 }
 
@@ -19,7 +19,7 @@ export default class TagLinksListView extends React.Component<TagLinksListViewPr
       <div>
         {this.props.tagLinksList.map((link) => (
           <div className="twohop-links-section" key={link.tag}>
-            <div className={"twohop-links-twohop-header twohop-links-box"}>
+            <div className={"twohop-links-tag-header twohop-links-box"}>
               {link.tag}
             </div>
             {link.fileEntities.map((it) => (

src/ui/TwohopLinksRootView.tsx

@@ -11,9 +11,10 @@ import TagLinksListView from "./TagLinksListView";
 interface TwohopLinksRootViewProps {
   connectedLinks: FileEntity[];
   newLinks: FileEntity[];
-  twoHopLinks: TwohopLink[];
+  resolvedTwoHopLinks: TwohopLink[];
+  unresolvedTwoHopLinks: TwohopLink[];
   tagLinksList: TagLinks[];
-  onClick: (fileEntity: FileEntity) => void;
+  onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
 }
 
@@ -31,7 +32,14 @@ export default class TwohopLinksRootView extends React.Component<TwohopLinksRoot
           getPreview={this.props.getPreview}
         />
         <TwohopLinksView
-          twoHopLinks={this.props.twoHopLinks}
+          twoHopLinks={this.props.unresolvedTwoHopLinks}
+          resolved={false}
+          onClick={this.props.onClick}
+          getPreview={this.props.getPreview}
+        />
+        <TwohopLinksView
+          twoHopLinks={this.props.resolvedTwoHopLinks}
+          resolved={true}
           onClick={this.props.onClick}
           getPreview={this.props.getPreview}
         />

src/ui/TwohopLinksView.tsx

@@ -6,7 +6,8 @@ import LinkView from "./LinkView";
 
 interface TwohopLinksViewProps {
   twoHopLinks: TwohopLink[];
-  onClick: (fileEntity: FileEntity) => void;
+  resolved: boolean;
+  onClick: (fileEntity: FileEntity) => Promise<void>;
   getPreview: (fileEntity: FileEntity) => Promise<string>;
 }
 
@@ -19,17 +20,26 @@ export default class TwohopLinksView extends React.Component<TwohopLinksViewProp
     return (
       <div>
         {this.props.twoHopLinks.map((link) => (
-          <div className="twohop-links-section" key={link.link.sourcePath}>
+          <div
+            className={
+              "twohop-links-section " +
+              (this.props.resolved
+                ? "twohop-links-resolved"
+                : "twohop-links-unresolved")
+            }
+            key={link.link.linkText}
+          >
             <div
               className={"twohop-links-twohop-header twohop-links-box"}
-              onClick={() => this.props.onClick(link.link)}
+              onClick={async () => this.props.onClick(link.link)}
+              onMouseDown={async () => this.props.onClick(link.link)}
             >
-              {link.link.linkText}
+              {link.link.linkText.replace(/\.md$/, "")}
             </div>
             {link.fileEntities.map((it) => (
               <LinkView
                 fileEntity={it}
-                key={it.key()}
+                key={link.link.linkText + it.key()}
                 onClick={this.props.onClick}
                 getPreview={this.props.getPreview}
               />

styles.css

@@ -40,10 +40,20 @@
 }
 
 /* two hop links */
-.twohop-links-twohop-header {
+.twohop-links-resolved .twohop-links-twohop-header {
   clear: both;
   background-color: burlywood;
 }
+.twohop-links-unresolved .twohop-links-twohop-header {
+  clear: both;
+  background-color: dimgrey;
+}
+
+/* tags */
+.twohop-links-tag-header {
+  clear: both;
+  background-color: darkseagreen;
+}
 
 /* new links */
 .twohop-links-new-links-header {