fix: TrailGrid overlap

src/TrailGrid.svelte

@@ -1,27 +1,39 @@
 <script lang="ts">
-import type { App,TFile } from "obsidian";
+import type { App,TFile,View } from "obsidian";
 import type { BreadcrumbsSettings } from "src/interfaces";
-import { debug,openOrSwitch,padArray,transpose } from "src/sharedFunctions";
-
+import { debug,openOrSwitch,padArray,runs,transpose } from "src/sharedFunctions";
 
 export let sortedTrails: string[][]
 export let app: App;
 export let settings: BreadcrumbsSettings;
 
 const currFile = app.workspace.getActiveFile();
+const activeLeafView = app.workspace.activeLeaf.view;
 
 function resolvedClass(toFile: string, currFile: TFile): string {
     return app.metadataCache.unresolvedLinks[currFile.path][toFile] > 0
-      ? "internal-link is-unresolved breadcrumbs-link"
-      : "internal-link breadcrumbs-link";
-  }
+        ? "internal-link is-unresolved breadcrumbs-link"
+        : "internal-link breadcrumbs-link";
+    }
+
+function hoverPreview(event: MouseEvent, view: View): void {
+  const targetEl = event.target as HTMLElement;
+
+  view.app.workspace.trigger("hover-link", {
+    event,
+    source: view.getViewType(),
+    hoverParent: view,
+    targetEl,
+    linktext: targetEl.innerText,
+  });
+}
 
-const maxLength = sortedTrails.last().length
+const maxLength = Math.max(...sortedTrails.map(trail => trail.length))
 const paddedTrails: string[][] = sortedTrails.map(trail => padArray(trail, maxLength))
 const transposedTrails: string[][] = transpose(paddedTrails);
-const uniqueValuesPerCol = transposedTrails.map(trail => [...new Set(trail)])
+const allRuns = transposedTrails.map(runs);
 
-debug(settings, {maxLength, paddedTrails, transposedTrails, uniqueValuesPerCol})
+debug(settings, {maxLength, paddedTrails, transposedTrails, runs: allRuns})
 
 </script>
 
@@ -30,19 +42,21 @@ debug(settings, {maxLength, paddedTrails, transposedTrails, uniqueValuesPerCol})
     grid-template-rows: {'1fr '.repeat(sortedTrails.length)}">
 {#each transposedTrails as col, i}
 
-    {#each uniqueValuesPerCol[i] as step}
+    {#each allRuns[i] as step}
         <div 
         class="breadcrumbs-trail-grid-item 
-            {resolvedClass(step, currFile)} 
-            {step === '' ? 'breadcrumbs-filler' : ''}" 
+            {resolvedClass(step.value, currFile)} 
+            {step.value === '' ? 'breadcrumbs-filler' : ''}" 
 
         style="
-            grid-area: {col.indexOf(step) + 1} / {i + 1} / 
-                {col.lastIndexOf(step) + 2} / {i + 2};"
-        on:click="{(e) => 
-            openOrSwitch(app, step, currFile, e)
-        }">
-            {step}
+            grid-area: {step.first + 1} / {i + 1} / 
+                {step.last + 2} / {i + 2};"
+
+        on:click={(e) => 
+            openOrSwitch(app, step.value, currFile, e)
+        } 
+        on:mouseover={(e) => hoverPreview(e,activeLeafView)}>
+            {step.value}
         </div>
     {/each}
 
@@ -65,7 +79,7 @@ div.breadcrumbs-trail-grid-item {
     border: 1px solid var(--background-modifier-border);
     align-items: center;
     justify-content: center;
-    padding: 5px;
+    padding: 2px;
     height: auto;
 }
 

src/TrailPath.svelte

@@ -1,14 +1,27 @@
 <script lang="ts">
-import type { App,TFile } from "obsidian";
+import type { App,TFile, View } from "obsidian";
 import type { BreadcrumbsSettings } from "src/interfaces";
 import { openOrSwitch } from "src/sharedFunctions";
 
-
 export let sortedTrails: string[][];
 export let app: App;
 export let settings: BreadcrumbsSettings;
 export let currFile: TFile;
 
+const activeLeafView = app.workspace.activeLeaf.view
+
+function hoverPreview(event: MouseEvent, view: View): void {
+  const targetEl = event.target as HTMLElement;
+
+  view.app.workspace.trigger("hover-link", {
+    event,
+    source: view.getViewType(),
+    hoverParent: view,
+    targetEl,
+    linktext: targetEl.innerText,
+  });
+}
+
 let showAll = settings.showAll;
 $: buttonText = showAll ? "Shortest" : "All";
 $: trailsToShow = showAll ? sortedTrails : [sortedTrails[0]];
@@ -25,7 +38,8 @@ $: trailsToShow = showAll ? sortedTrails : [sortedTrails[0]];
                     {#each trail as crumb, i}
                         <span
                             class="internal-link breadcrumbs-link"
-                            on:click={async (e) => await openOrSwitch(app, crumb,   currFile, e)}>
+                            on:click={async (e) => await openOrSwitch(app, crumb, currFile, e)}
+                            on:mouseover={(e) => hoverPreview(e, activeLeafView)}>
                             {crumb}
                         </span>
                         {#if i < trail.length - 1}

src/main.ts

@@ -14,7 +14,7 @@ import type {
   neighbourObj
 } from "src/interfaces";
 import MatrixView from "src/MatrixView";
-import { closeImpliedLinks, debug, getFileFrontmatterArr, getNeighbourObjArr, isInVault } from "src/sharedFunctions";
+import { closeImpliedLinks, debug, getFileFrontmatterArr, getNeighbourObjArr } from "src/sharedFunctions";
 import TrailGrid from "./TrailGrid.svelte";
 import TrailPath from "./TrailPath.svelte";
 
@@ -190,6 +190,32 @@ export default class BreadcrumbsPlugin extends Plugin {
     return pathsArr;
   }
 
+  dfsAllPaths(g: Graph, startNode: string): string[][] {
+    const queue: { node: string; path: string[] }[] = [
+      { node: startNode, path: [] },
+    ];
+    const pathsArr: string[][] = [];
+
+    let i = 0;
+    while (queue.length > 0 && i < 1000) {
+      i++
+      const currPath = queue.shift();
+
+      const newNodes = (g.successors(currPath.node) ?? []) as string[];
+      const extPath = [currPath.node, ...currPath.path];
+      queue.unshift(
+        ...newNodes.map((n: string) => {
+          return { node: n, path: extPath };
+        })
+      );
+
+      if (newNodes.length === 0) {
+        pathsArr.push(extPath);
+      }
+    }
+    return pathsArr
+  }
+
   getBreadcrumbs(g: Graph): string[][] {
     const from = this.app.workspace.getActiveFile().basename;
     const paths = graphlib.alg.dijkstra(g, from);

src/sharedFunctions.ts

@@ -262,7 +262,7 @@ export async function openOrSwitch(
     }
   });
 
-  
+
   if (openLeaves.length > 0) {
     console.log(openLeaves[0])
     workspace.setActiveLeaf(openLeaves[0]);
@@ -299,4 +299,18 @@ export function transpose(A: any[][]): any[][] {
     A.forEach(row => AT[j].push(row[j]))
   }
   return AT
+}
+
+export function runs(arr: string[]): { value: string, first: number, last: number }[] {
+  const runs: { value: string, first: number, last: number }[] = []
+  let i = 0;
+  while (i < arr.length) {
+    const currValue = arr[i]
+    runs.push({ value: currValue, first: i, last: undefined })
+    while (currValue === arr[i]) {
+      i++
+    }
+    runs.last().last = i - 1;
+  }
+  return runs
 }