add graph depth config

Signal-K · Dec 27, 2021 · 3959234 · 3959234
1 parent 165d338
commit 3959234
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/data/graphConfig.yaml b/data/graphConfig.yaml
@@ -1,5 +1,6 @@
 enableLegend: false
 enableDrag: true
 enableZoom: true
+depth: -1 # set to -1 to show full graph
 paths:
   - /moc: "#4388cc"
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html
@@ -16,12 +16,35 @@ <h3>Interactive Graph</h3>
   const content = {{$.Site.Data.contentIndex}}
   const curPage = {{ strings.TrimRight "/" .Page.RelPermalink }}
   const pathColors = {{$.Site.Data.graphConfig.paths}}
+  let depth = {{$.Site.Data.graphConfig.depth}}
 
   const parseIdsFromLinks = (links) => [...(new Set(links.flatMap(link => ([link.source, link.target]))))]
 
+  const neighbours = new Set()
+  const wl = [curPage || "/", "__SENTINEL"]
+  if (depth >= 0) {
+    while (depth >= 0 && wl.length > 0) {
+      // compute neighbours
+      const cur = wl.shift()
+      console.log(depth, cur, wl)
+      if (cur === "__SENTINEL") {
+        depth--
+        wl.push("__SENTINEL")
+      } else {
+        neighbours.add(cur)
+        const outgoing = index.links[cur] || []
+        const incoming = index.backlinks[cur] || []
+        console.log(incoming)
+        wl.push(...outgoing.map(l => l.target), ...incoming.map(l => l.source))
+      }
+    }
+  } else {
+    parseIdsFromLinks(links).forEach(id => neighbours.add(id))
+  }
+
   const data = {
-    nodes: parseIdsFromLinks(links).map(id => ({id})),
-    links,
+    nodes: [...neighbours].map(id => ({id})),
+    links: links.filter(l => neighbours.has(l.source) && neighbours.has(l.target)),
   }
 
   const color = (d) => {
@@ -70,10 +93,8 @@ <h3>Interactive Graph</h3>
   const width = document.getElementById("graph-container").offsetWidth
 
   const simulation = d3.forceSimulation(data.nodes)
-    .force("charge", d3.forceManyBody().strength(-20))
-    .force("link", d3.forceLink(data.links)
-      .id(d => d.id)
-    )
+    .force("charge", d3.forceManyBody().strength(-30))
+    .force("link", d3.forceLink(data.links).id(d => d.id))
     .force("center", d3.forceCenter());
 
   const svg = d3.select('#graph-container')