Add comments

.prettierrc.json

@@ -1,19 +1,6 @@
 {
-  "arrowParens": "always",
-  "bracketSameLine": false,
-  "bracketSpacing": true,
-  "embeddedLanguageFormatting": "auto",
-  "htmlWhitespaceSensitivity": "css",
-  "insertPragma": false,
-  "jsxSingleQuote": false,
   "printWidth": 100,
-  "proseWrap": "preserve",
   "quoteProps": "as-needed",
-  "requirePragma": false,
-  "semi": true,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "vueIndentScriptAndStyle": false
+  "trailingComma": "all",
+  "tabWidth": 2
 }

assets/js/graph.js

@@ -1,6 +1,8 @@
 async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) {
-  if (!document.getElementById("graph-container")) return;
-  document.getElementById("graph-container").textContent = "";
+  const container = document.getElementById("graph-container");
+  // We should clear the graph in case there is anything within it
+  if (!container) return;
+  container.textContent = "";
 
   const { index, links, content } = await fetchData;
   const curPage = url.replace(baseUrl, "");
@@ -8,6 +10,10 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
   const parseIdsFromLinks = (links) => [
     ...new Set(links.flatMap((link) => [link.source, link.target])),
   ];
+
+  // links is mutated by d3
+  // we want to use links later on, so we make a copy and pass
+  // that one to d3
   const copyLinks = JSON.parse(JSON.stringify(links));
 
   const neighbours = new Set();
@@ -77,8 +83,8 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
       .on("end", enableDrag ? dragended : noop);
   };
 
-  const height = Math.max(document.getElementById("graph-container").offsetHeight, 250);
-  const width = document.getElementById("graph-container").offsetWidth;
+  const height = Math.max(container.offsetHeight, 250);
+  const width = container.offsetWidth;
 
   const simulation = d3
     .forceSimulation(data.nodes)
@@ -88,7 +94,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
       d3
         .forceLink(data.links)
         .id((d) => d.id)
-        .distance(40)
+        .distance(40),
     )
     .force("center", d3.forceCenter());
 
@@ -224,7 +230,7 @@ async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLege
           const scale = transform.k;
           const scaledOpacity = Math.max((scale - 1) / 3.75, 0);
           labels.attr("transform", transform).style("opacity", scaledOpacity);
-        })
+        }),
     );
   }
 

layouts/partials/head.html

@@ -51,6 +51,7 @@
     window.navigate = navigate;
     router(".singlePage");
     const callback = () => {
+      // RAF waits for Million to complete diffing, then draw
       requestAnimationFrame(() => {
         drawGraph(
           {{strings.TrimRight "/" .Page.Permalink}},
@@ -63,6 +64,7 @@
         )}
       );
     };
+    // We need on initial load, then subsequent redirs
     window.addEventListener("million:navigate", callback);
     window.addEventListener("DOMContentLoaded", callback);
   </script>