feat: Layout type selector for Juggl view

SkepticMystic · Jan 23, 2022 · 4f40700 · 4f40700
1 parent 736b685
commit 4f40700
Show file tree

Hide file tree

Showing 5 changed files with 553 additions and 940 deletions.
diff --git a/src/Settings/TrailSettings.ts b/src/Settings/TrailSettings.ts
@@ -1,11 +1,12 @@
-import { Notice, Setting } from "obsidian";
+import {DropdownComponent, Notice, Setting} from "obsidian";
 import { isInVault } from "obsidian-community-lib/dist/utils";
 import Checkboxes from "../Components/Checkboxes.svelte";
 import type BCPlugin from "../main";
 import { splitAndTrim } from "../Utils/generalUtils";
 import { getFields } from "../Utils/HierUtils";
 import { drawTrail } from "../Views/TrailView";
 import { fragWithHTML, subDetails } from "./BreadcrumbsSettingTab";
+import type {JugglLayouts} from "juggl-api";
 
 export function addTrailViewSettings(
   plugin: BCPlugin,
@@ -257,4 +258,25 @@ export function addTrailViewSettings(
           await drawTrail(plugin);
         })
     );
+
+  new Setting(trailDetails)
+      .setName("Juggl view layout")
+      .setDesc(
+          "The layout type to use for the Juggl view. " +
+          "The hierarchy layout is most natural for Breadcrumbs, but for large graphs D3 Force is recommended."
+      )
+     .addDropdown((dc: DropdownComponent) => {
+         dc.addOption("hierarchy", "Hierarchy");
+         dc.addOption("d3-force", "D3 Force");
+         dc.addOption("cola", "Cola Force");
+         dc.addOption("grid", "Grid");
+         dc.addOption("concentric", "Concentric");
+
+         dc.setValue(settings.jugglLayout);
+         dc.onChange(async (value) => {
+             settings.jugglLayout = value as JugglLayouts;
+             await plugin.saveSettings();
+             await drawTrail(plugin);
+         });
+     });
 }
diff --git a/src/Visualisations/Juggl.ts b/src/Visualisations/Juggl.ts
@@ -305,7 +305,10 @@ export function createJugglTrail(
         nodesS.add(source);
         const nodes = Array.from(nodesS).map((s) => s + ".md");
 
-        const argsDown = Object.assign({}, args, {layout: {
+        const argsDown = Object.assign({}, args);
+        const layout = plugin.settings.jugglLayout;
+        if (layout === 'hierarchy') {
+          argsDown.layout = {
             // @ts-ignore
             name: 'dagre',
             animate: false,
@@ -314,15 +317,23 @@ export function createJugglTrail(
                 const name = VizId.fromId(id).id;
                 if (name in depthMapDown) {
                   graph._nodes[id].rank = depthMapDown[name] + 1;
-                }
-                else {
+                } else {
                   graph._nodes[id].rank = 1;
                 }
               });
             }
-          }});
-        const isFdgd = argsDown.layout === 'force-directed' || argsDown.layout === 'cola' || argsDown.layout === 'd3-force';
-        if (!isFdgd) {
+          }
+        }
+        else {
+          argsDown.layout = layout;
+        }
+        const isFdgd = layout === 'cola' || layout === 'd3-force';
+        if (isFdgd) {
+          // @ts-ignore
+          argsDown.fdgdLayout = layout;
+          argsDown.layout = 'force-directed';
+        }
+        else {
           argsDown.autoZoom = true;
           argsDown.animateLayout = false;
         }
@@ -380,24 +391,37 @@ export function createJugglTrail(
   nodes.push(source);
   nodes = nodes.map((s) => s + ".md");
 
-  const argsUp = Object.assign({}, args, {layout: {
-    // @ts-ignore
-    name: 'dagre',
-    animate: false,
-    ranker: (graph) => {
-      Object.keys(graph._nodes).forEach((id) => {
-        const name = VizId.fromId(id).id;
-        if (name in depthMapUp) {
-          graph._nodes[id].rank = (maxDepthUp - depthMapUp[name]) + 1;
-        }
-        else {
-          graph._nodes[id].rank = 1;
-        }
-      });
+  const argsUp: IJugglSettings = Object.assign({}, args);
+
+  const layout = plugin.settings.jugglLayout;
+  if (layout === 'hierarchy') {
+    argsUp.layout = {
+      // @ts-ignore
+      name: 'dagre',
+      animate: false,
+      ranker: (graph) => {
+        Object.keys(graph._nodes).forEach((id) => {
+          const name = VizId.fromId(id).id;
+          if (name in depthMapUp) {
+            graph._nodes[id].rank = (maxDepthUp - depthMapUp[name]) + 1;
+          } else {
+            graph._nodes[id].rank = 1;
+          }
+        });
+      }
     }
-  }});
-  const isFdgd = argsUp.layout === 'force-directed' || argsUp.layout === 'cola' || argsUp.layout === 'd3-force';
-  if (!isFdgd) {
+  }
+  else {
+    argsUp.layout = layout;
+  }
+  const isFdgd = layout === 'cola' || layout === 'd3-force';
+  console.log({argsUp, isFdgd})
+  if (isFdgd) {
+    // @ts-ignore
+    argsUp.fdgdLayout = layout;
+    argsUp.layout = 'force-directed';
+  }
+  else {
     argsUp.autoZoom = true;
     argsUp.animateLayout = false;
   }

diff --git a/src/constants.ts b/src/constants.ts
@@ -254,6 +254,7 @@ export const DEFAULT_SETTINGS: BCSettings = {
   enableAlphaSort: true,
   fieldSuggestor: true,
   filterImpliedSiblingsOfDifferentTypes: false,
+  jugglLayout: 'hierarchy',
   limitWriteBCCheckboxes: [],
   CHECKBOX_STATES_OVERWRITTEN: false,
   gridDots: false,

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -10,7 +10,7 @@ import type {
 import type DucksView from "./Views/DucksView";
 import type MatrixView from "./Views/MatrixView";
 import type StatsView from "./Views/StatsView";
-import type { IJugglSettings } from "juggl-api";
+import type {IJugglSettings, JugglLayouts} from "juggl-api";
 
 export type DebugLevel = keyof LogLevel;
 export interface BCSettings {
@@ -51,6 +51,8 @@ export interface BCSettings {
     cousinsIsSibling: boolean;
   };
   indexNotes: string[];
+  // Default layout to use for Juggl view
+  jugglLayout: JugglLayouts;
   /** An array of fields going _up_ which **will** be shown in the trail view */
   limitTrailCheckboxes: string[];
   /** An array of fields in all directions which **will** get written when running `Write implied BCs to file` */