From aa5ab03d4ad6e7cb4d9efd3f9c177ebde7e4c4af Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 02 Mar 2023 17:14:29 +0000
Subject: [PATCH] docs: update to account for github changes

---
 assets/js/graph.js |   61 +++++++++++++++++++++++-------
 1 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/assets/js/graph.js b/assets/js/graph.js
index c7634cf..ce0c73b 100644
--- a/assets/js/graph.js
+++ b/assets/js/graph.js
@@ -1,4 +1,15 @@
-async function drawGraph(baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) {
+async function drawGraph(baseUrl, isHome, pathColors, graphConfig) {
+
+  let {
+    depth,
+    enableDrag,
+    enableLegend,
+    enableZoom,
+    opacityScale,
+    scale,
+    repelForce,
+    fontSize } = graphConfig;
+
   const container = document.getElementById("graph-container")
   const { index, links, content } = await fetchData
 
@@ -74,7 +85,7 @@
       d.fy = null
     }
 
-    const noop = () => {}
+    const noop = () => { }
     return d3
       .drag()
       .on("start", enableDrag ? dragstarted : noop)
@@ -82,12 +93,12 @@
       .on("end", enableDrag ? dragended : noop)
   }
 
-  const height = Math.max(container.offsetHeight, 250)
+  const height = Math.max(container.offsetHeight, isHome ? 500 : 250)
   const width = container.offsetWidth
 
   const simulation = d3
     .forceSimulation(data.nodes)
-    .force("charge", d3.forceManyBody().strength(-30))
+    .force("charge", d3.forceManyBody().strength(-100 * repelForce))
     .force(
       "link",
       d3
@@ -102,7 +113,7 @@
     .append("svg")
     .attr("width", width)
     .attr("height", height)
-    .attr("viewBox", [-width / 2, -height / 2, width, height])
+    .attr('viewBox', [-width / 2 / scale, -height / 2 / scale, width / scale, height / scale])
 
   if (enableLegend) {
     const legend = [{ Current: "var(--g-node-active)" }, { Note: "var(--g-node)" }, ...pathColors]
@@ -144,7 +155,7 @@
   const nodeRadius = (d) => {
     const numOut = index.links[d.id]?.length || 0
     const numIn = index.backlinks[d.id]?.length || 0
-    return 3 + (numOut + numIn) / 4
+    return 2 + Math.sqrt(numOut + numIn)
   }
 
   // draw individual nodes
@@ -157,9 +168,18 @@
     .style("cursor", "pointer")
     .on("click", (_, d) => {
       // SPA navigation
-      window.Million.navigate(new URL(`${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`), ".singlePage")
+      const targ = `${baseUrl}${decodeURI(d.id).replace(/\s+/g, "-")}/`
+      window.Million.navigate(new URL(targ), ".singlePage")
+      plausible("Link Click", {
+        props: {
+          href: targ,
+          broken: false,
+          internal: true,
+          graph: true,
+        }
+      })
     })
-    .on("mouseover", function (_, d) {
+    .on("mouseover", function(_, d) {
       d3.selectAll(".node").transition().duration(100).attr("fill", "var(--g-node-inactive)")
 
       const neighbours = parseIdsFromLinks([
@@ -179,15 +199,20 @@
       // highlight links
       linkNodes.transition().duration(200).attr("stroke", "var(--g-link-active)")
 
+      const bigFont = fontSize * 1.5
+
       // show text for self
       d3.select(this.parentNode)
         .raise()
         .select("text")
         .transition()
         .duration(200)
-        .style("opacity", 1)
+        .attr('opacityOld', d3.select(this.parentNode).select('text').style("opacity"))
+        .style('opacity', 1)
+        .style('font-size', bigFont + 'em')
+        .attr('dy', d => nodeRadius(d) + 20 + 'px') // radius is in px
     })
-    .on("mouseleave", function (_, d) {
+    .on("mouseleave", function(_, d) {
       d3.selectAll(".node").transition().duration(200).attr("fill", color)
 
       const currentId = d.id
@@ -197,7 +222,13 @@
 
       linkNodes.transition().duration(200).attr("stroke", "var(--g-link)")
 
-      d3.select(this.parentNode).select("text").transition().duration(200).style("opacity", 0)
+      d3.select(this.parentNode)
+        .select("text")
+        .transition()
+        .duration(200)
+        .style('opacity', d3.select(this.parentNode).select('text').attr("opacityOld"))
+        .style('font-size', fontSize + 'em')
+        .attr('dy', d => nodeRadius(d) + 8 + 'px') // radius is in px
     })
     .call(drag(simulation))
 
@@ -207,10 +238,10 @@
     .attr("dx", 0)
     .attr("dy", (d) => nodeRadius(d) + 8 + "px")
     .attr("text-anchor", "middle")
-    .text((d) => content[d.id]?.title || d.id.replace("-", " "))
-    .style("opacity", 0)
+    .text((d) => content[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
+    .style('opacity', (opacityScale - 1) / 3.75)
     .style("pointer-events", "none")
-    .style("font-size", "0.4em")
+    .style('font-size', fontSize + 'em')
     .raise()
     .call(drag(simulation))
 
@@ -228,7 +259,7 @@
         .on("zoom", ({ transform }) => {
           link.attr("transform", transform)
           node.attr("transform", transform)
-          const scale = transform.k
+          const scale = transform.k * opacityScale;
           const scaledOpacity = Math.max((scale - 1) / 3.75, 0)
           labels.attr("transform", transform).style("opacity", scaledOpacity)
         }),

--
Gitblit v1.10.0