feat: Juggl view showing hierarchy on top of note

src/BreadcrumbsSettingTab.ts

@@ -426,7 +426,7 @@ export class BCSettingTab extends PluginSettingTab {
         })
       );
 
-    const trailDetails = subDetails("Trail/Grid", viewDetails);
+    const trailDetails = subDetails("Trail/Grid/Juggl", viewDetails);
 
     new Setting(trailDetails)
       .setName("Show Breadcrumbs")
@@ -473,7 +473,7 @@ export class BCSettingTab extends PluginSettingTab {
     new Setting(trailDetails)
       .setName("Views to show")
       .setDesc(
-        "Choose which of the views to show at the top of the note.\nTrail, Grid, and/or the Next-Previous view."
+        "Choose which of the views to show at the top of the note.\nTrail, Grid, Juggl graph and/or the Next-Previous view."
       )
       .addToggle((toggle) => {
         toggle
@@ -495,6 +495,16 @@ export class BCSettingTab extends PluginSettingTab {
             await plugin.drawTrail();
           });
       })
+    .addToggle((toggle) => {
+        toggle
+            .setTooltip("Show Juggl view")
+            .setValue(settings.showJuggl)
+            .onChange(async (value) => {
+                settings.showJuggl = value;
+                await plugin.saveSettings();
+                await plugin.drawTrail();
+            });
+    })
       .addToggle((toggle) => {
         toggle
           .setTooltip("Show Next/Previous view")

src/Visualisations/CBJuggl.ts

@@ -6,7 +6,7 @@ import {
     ICoreDataStore,
     IDataStore,
     IJuggl,
-    IJugglPlugin, IJugglStores,
+    IJugglPlugin, IJugglSettings, IJugglStores, nodeDangling,
     nodeFromFile,
     VizId
 } from 'juggl-api';
@@ -48,13 +48,7 @@ class BCStore extends Component implements ICoreDataStore {
 
     asString(node: NodeSingular): string {
         const id = VizId.fromNode(node);
-        if (id.storeId === STORE_ID) {
-            const file = this.cache.getFirstLinkpathDest(id.id, '');
-            if (file) {
-                return id.id.slice(0, -3);
-            }
-        }
-        return
+        return id.id.slice(0, -3);
     }
 
     getFile(nodeId: VizId): TFile {
@@ -67,6 +61,7 @@ class BCStore extends Component implements ICoreDataStore {
             .map((node) => this.asString(node))
             .filter((s) => s));
         newNodes.forEach((node) => {
+            console.log({node})
             this.graph.forEachOutEdge(this.asString(node), (key, attr, source, target) => {
                 if (nodesListS.has(target)) {
                     edges.push({
@@ -105,26 +100,21 @@ class BCStore extends Component implements ICoreDataStore {
     get(nodeId: VizId): Promise<cytoscape.NodeDefinition> {
         const file = this.getFile(nodeId);
         if (file === null) {
-            return null;
+            const dangling = nodeDangling(nodeId.id);
+            console.log({dangling});
+            return Promise.resolve(nodeDangling(nodeId.id));
         }
         const cache = this.cache.getFileCache(file);
         if (cache === null) {
             console.log('returning empty cache', nodeId);
-            return null;
+            return Promise.resolve(nodeDangling(nodeId.id));
         }
         return Promise.resolve(nodeFromFile(file, this.plugin, nodeId.toId()));
     }
 
 }
 
-export function createdJugglCB(plugin: BCPlugin,
-                               target: HTMLElement,
-                               args: ParsedCodeblock,
-                               lines: [string, string][],
-                               froms: string[],
-                               source: string,
-                               min: number,
-                               max: number) {
+function createJuggl(plugin: BCPlugin, target: HTMLElement, initialNodes: string[], args: IJugglSettings) {
     try {
         const jugglPlugin = getPlugin(plugin.app);
         if (!jugglPlugin) {
@@ -136,26 +126,54 @@ export function createdJugglCB(plugin: BCPlugin,
                 args[key] = JUGGL_CB_DEFAULTS[key];
             }
         }
-        const nodes = lines
-            .filter(([indent, node]) => meetsConditions(indent, node, froms, min, max))
-            .map(([_, node]) => node + ".md");
-        if (min <= 0) {
-            nodes.push(source + ".md");
-        }
+
 
         const bcStore = new BCStore(plugin.mainG, plugin.app.metadataCache, jugglPlugin);
         const stores: IJugglStores = {
             coreStore: bcStore,
             dataStores: [bcStore]
         }
 
-        console.log({args});
-        const juggl = jugglPlugin.createJuggl(target, args, stores, nodes)
+        console.log({args}, {initialNodes});
+        const juggl = jugglPlugin.createJuggl(target, args, stores, initialNodes)
         plugin.addChild(juggl);
         juggl.load();
         console.log({juggl});
     }
     catch (error) {
         console.log({error});
     }
+}
+
+export function createJugglTrail(plugin: BCPlugin,
+                                 target: HTMLElement,
+                                 paths: string[][],
+                                 source: string,
+                                 args: IJugglSettings) {
+    let nodes = Array.from(
+        new Set(
+            paths.reduce((prev, curr) => prev.concat(curr), [])
+        ));
+    nodes.push(source)
+    nodes = nodes.map(s => s + ".md");
+    createJuggl(plugin, target, nodes, args);
+}
+
+export function createdJugglCB(plugin: BCPlugin,
+                               target: HTMLElement,
+                               args: ParsedCodeblock,
+                               lines: [string, string][],
+                               froms: string[],
+                               source: string,
+                               min: number,
+                               max: number) {
+    const nodes = lines
+        .filter(([indent, node]) => meetsConditions(indent, node, froms, min, max))
+        .map(([_, node]) => node + ".md");
+    if (min <= 0) {
+        nodes.push(source + ".md");
+    }
+    console.log({lines, nodes})
+    createJuggl(plugin, target, nodes, args);
+
 }

src/constants.ts

@@ -85,6 +85,13 @@ export const JUGGL_CB_DEFAULTS: IJugglSettings = {
   width: '100%',
   zoomSpeed: 1,
 };
+
+export const JUGGL_TRAIL_DEFAULTS: IJugglSettings = Object.assign( JUGGL_CB_DEFAULTS, {
+  autoZoom: true,
+  fdgdLayout: 'd3-force',
+  height: '400px',
+  toolbar: false,
+});
 CODEBLOCK_FIELDS.push(...Object.keys(JUGGL_CB_DEFAULTS));
 
 export const blankUserHier = (): UserHier => {
@@ -257,6 +264,7 @@ export const DEFAULT_SETTINGS: BCSettings = {
   showImpliedRelations: true,
   showTrail: true,
   showGrid: true,
+  showJuggl: false,
   showPrevNext: true,
   sortByNameShowAlias: false,
   squareDirectionsOrder: [0, 1, 2, 3, 4],

src/interfaces.ts

@@ -67,6 +67,7 @@ export interface BCSettings {
   showAll: boolean;
   showGrid: boolean;
   showImpliedRelations: boolean;
+  showJuggl: boolean;
   showPrevNext: boolean;
   showRefreshNotice: boolean;
   showTrail: boolean;

src/main.ts

@@ -48,7 +48,7 @@ import {
   dropHeaderOrAlias,
   DUCK_ICON,
   DUCK_ICON_SVG,
-  DUCK_VIEW,
+  DUCK_VIEW, JUGGL_TRAIL_DEFAULTS,
   MATRIX_VIEW,
   splitLinksRegex,
   STATS_VIEW,
@@ -105,7 +105,7 @@ import {
 import StatsView from "./StatsView";
 import TreeView from "./TreeView";
 import { VisModal } from "./VisModal";
-import {createdJugglCB} from "./Visualisations/CBJuggl";
+import {createdJugglCB, createJugglTrail} from "./Visualisations/CBJuggl";
 
 export default class BCPlugin extends Plugin {
   settings: BCSettings;
@@ -1959,6 +1959,7 @@ export default class BCPlugin extends Plugin {
         respectReadableLineLength,
         showTrail,
         showGrid,
+        showJuggl,
         showPrevNext,
         showBCsInEditLPMode,
       } = settings;
@@ -2107,6 +2108,9 @@ export default class BCPlugin extends Plugin {
           props: { app: this.app, plugin: this, next, prev },
         });
       }
+      if (showJuggl && sortedTrails.length) {
+        createJugglTrail(this, trailDiv, props.sortedTrails, basename, JUGGL_TRAIL_DEFAULTS);
+      }
       db.end2G();
     } catch (err) {
       error(err);