optimize selection-based graph layout using node distance (#56)

treymo · Feb 25, 2022 · d5dfde2 · d5dfde2
1 parent 01fcc33
commit d5dfde2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/data.ts b/src/data.ts
@@ -27,6 +27,13 @@ export interface Note {
   title: string;
   links: Set<string>;
   linkedToCurrentNote?: boolean;
+  /**
+   * (Minimal) distance of this note to current/selected note in Joplin
+   * 0 => current note itself
+   * 1 => directly adjacent note
+   * x => ... and so on
+   */
+  distanceToCurrentNote?: number;
 }
 
 interface JoplinNote {
@@ -174,6 +181,7 @@ async function getLinkedNotes(
     for (const joplinNote of joplinNotes) {
       // store note data to be returned at the end of the traversal
       const note = buildNote(joplinNote);
+      note.distanceToCurrentNote = degree;
       noteMap.set(joplinNote.id, note);
 
       const allLinks = [

diff --git a/src/index.ts b/src/index.ts
@@ -14,6 +14,7 @@ interface Node {
   id: string;
   title: string;
   focused: boolean;
+  distanceToCurrentNote?: number;
 }
 
 interface GraphData {
@@ -23,6 +24,7 @@ interface GraphData {
   nodeFontSize: number;
   nodeDistanceRatio: number;
   showLinkDirection: boolean;
+  maxDegree: number;
 }
 
 let data: GraphData;
@@ -208,7 +210,8 @@ async function fetchData() {
     nodeFontSize: await joplin.settings.value("SETTING_NODE_FONT_SIZE"),
     nodeDistanceRatio:
       (await joplin.settings.value("SETTING_NODE_DISTANCE")) / 100.0,
-    showLinkDirection
+    showLinkDirection,
+    maxDegree
   };
 
   notes.forEach(function (note, id) {
@@ -245,6 +248,7 @@ async function fetchData() {
       id: id,
       title: note.title,
       focused: note.linkedToCurrentNote,
+      distanceToCurrentNote: note.distanceToCurrentNote
     });
   });
 

diff --git a/src/ui/index.js b/src/ui/index.js
@@ -40,17 +40,31 @@ function buildGraph(data) {
     .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
+  const forceLink = d3
+    .forceLink()
+    .distance(200)
+    .id(function (d) {
+      return d.id;
+    })
+
+  if (data.maxDegree > 0) {
+    // we are in selection-based graph
+    forceLink.strength((link) => {
+      const minDistance = Math.min(
+        link.source.distanceToCurrentNote,
+        link.target.distanceToCurrentNote
+      );
+      if (minDistance === 0) {
+        return 1;
+      } else if (minDistance === 1) {
+        return 0.5;
+      } else return 0.1;
+    });
+  }
+
   simulation = d3
     .forceSimulation()
-    .force(
-      "link",
-      d3
-        .forceLink()
-        .distance(200)
-        .id(function (d) {
-          return d.id;
-        })
-    )
+    .force("link", forceLink)
     .force(
       "charge",
       d3.forceManyBody().strength(function () {