From f192f9a23df34d30e223e20ab5e8cb8210a7dfe9 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 16 Feb 2022 04:03:02 +0000
Subject: [PATCH] fix #54: root all image urls

---
 layouts/partials/graph.html |   61 +++++++++++++++++++++---------
 1 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html
index 81ea3f4..14e1fdb 100644
--- a/layouts/partials/graph.html
+++ b/layouts/partials/graph.html
@@ -1,4 +1,5 @@
 <script src="https://cdn.jsdelivr.net/npm/d3@6"></script>
+<h3>Interactive Graph</h3>
 <div id="graph-container"></div>
 <style>
     :root {
@@ -10,16 +11,37 @@
     }
 </style>
 <script>
-  const index = {{$.Site.Data.linkIndex.index}}
-  const links = {{$.Site.Data.linkIndex.links}}
-  const curPage = {{ strings.TrimRight "/" .Page.RelPermalink }}
+async function run() {
+  const { index, links, content } = await fetchData()
+  const curPage = {{ strings.TrimRight "/" .Page.Permalink }}.replace({{strings.TrimRight "/" .Site.BaseURL }}, "")
   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()
+      if (cur === "__SENTINEL") {
+        depth--
+        wl.push("__SENTINEL")
+      } else {
+        neighbours.add(cur)
+        const outgoing = index.links[cur] || []
+        const incoming = index.backlinks[cur] || []
+        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) => {
@@ -68,10 +90,8 @@
   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')
@@ -125,7 +145,7 @@
     .attr("fill", color)
     .style("cursor", "pointer")
     .on("click", (_, d) => {
-      window.location.href = d.id;
+      window.location.href = {{.Site.BaseURL}} + decodeURI(d.id).replace(/\s+/g, '-')
     })
     .on("mouseover", function (_, d) {
       d3.selectAll(".node")
@@ -136,7 +156,7 @@
       const neighbours = parseIdsFromLinks([...(index.links[d.id] || []), ...(index.backlinks[d.id] || [])])
       const neighbourNodes = d3.selectAll(".node").filter(d => neighbours.includes(d.id))
       const currentId = d.id
-      const links = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
+      const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
 
       // highlight neighbour nodes
       neighbourNodes
@@ -145,7 +165,7 @@
         .attr("fill", color)
 
       // highlight links
-      links
+      linkNodes
         .transition()
         .duration(200)
         .attr("stroke", "var(--g-link-active)")
@@ -164,9 +184,9 @@
         .attr("fill", color)
 
       const currentId = d.id
-      const links = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
+      const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
 
-      links
+      linkNodes
         .transition()
         .duration(200)
         .attr("stroke", "var(--g-link)")
@@ -183,7 +203,7 @@
   const labels = graphNode.append("text")
     .attr("dx", 12)
     .attr("dy", ".35em")
-    .text((d) => d.id)
+    .text((d) => content[decodeURI(d.id).replace(/\s+/g, '-')]?.title || "Untitled")
     .style("opacity", 0)
     .style("pointer-events", "none")
     .call(drag(simulation));
@@ -207,12 +227,15 @@
       .attr("x1", d => d.source.x)
       .attr("y1", d => d.source.y)
       .attr("x2", d => d.target.x)
-      .attr("y2", d => d.target.y);
+      .attr("y2", d => d.target.y)
     node
       .attr("cx", d => d.x)
-      .attr("cy", d => d.y);
+      .attr("cy", d => d.y)
     labels
       .attr("x", d => d.x)
-      .attr("y", d => d.y);
+      .attr("y", d => d.y)
   });
-</script>
\ No newline at end of file
+}
+
+run()
+</script>

--
Gitblit v1.10.0