From 906f91f8eed5e91a7afae95c7002a3e4553d6aae Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 13 Jul 2023 07:19:35 +0000
Subject: [PATCH] base path refactor, more docs

---
 quartz/components/scripts/graph.inline.ts |   52 +++++++++++++++++++++++++++-------------------------
 1 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 169b8c4..6682d70 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -1,24 +1,25 @@
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from 'd3'
-import { registerEscapeHandler, relative, removeAllChildren } from "./util"
+import { registerEscapeHandler, clientSideRelativePath, removeAllChildren } from "./util"
+import { CanonicalSlug } from "../../path"
 
 type NodeData = {
-  id: string,
+  id: CanonicalSlug,
   text: string,
   tags: string[]
 } & d3.SimulationNodeDatum
 
 type LinkData = {
-  source: string,
-  target: string
+  source: CanonicalSlug,
+  target: CanonicalSlug
 }
 
 const localStorageKey = "graph-visited"
-function getVisited(): Set<string> {
+function getVisited(): Set<CanonicalSlug> {
   return new Set(JSON.parse(localStorage.getItem(localStorageKey) ?? "[]"))
 }
 
-function addToVisited(slug: string) {
+function addToVisited(slug: CanonicalSlug) {
   const visited = getVisited()
   visited.add(slug)
   localStorage.setItem(localStorageKey, JSON.stringify([...visited]))
@@ -72,7 +73,7 @@
       }
     }
   } else {
-    links.flatMap(l => [l.source, l.target]).forEach((id) => neighbourhood.add(id))
+    Object.keys(data).forEach(id => neighbourhood.add(id))
   }
 
   const graphData: { nodes: NodeData[], links: LinkData[] } = {
@@ -110,12 +111,12 @@
     .join("line")
     .attr("class", "link")
     .attr("stroke", "var(--lightgray)")
-    .attr("stroke-width", 2)
+    .attr("stroke-width", 1)
 
   // svg groups
   const graphNode = svg.append("g").selectAll("g").data(graphData.nodes).enter().append("g")
 
-  // calculate radius
+  // calculate color
   const color = (d: NodeData) => {
     const isCurrent = d.id === slug
     if (isCurrent) {
@@ -167,7 +168,7 @@
     .attr("fill", color)
     .style("cursor", "pointer")
     .on("click", (_, d) => {
-      const targ = relative(slug, d.id)
+      const targ = clientSideRelativePath(slug, d.id)
       window.spaNavigate(new URL(targ))
     })
     .on("mouseover", function(_, d) {
@@ -182,7 +183,12 @@
       neighbourNodes.transition().duration(200).attr("fill", color)
 
       // highlight links
-      linkNodes.transition().duration(200).attr("stroke", "var(--gray)")
+      linkNodes
+        .transition()
+        .duration(200)
+        .attr("stroke", "var(--gray)")
+        .attr("stroke-width", 1)
+
 
       const bigFont = fontSize * 1.5
 
@@ -220,7 +226,7 @@
   const labels = graphNode
     .append("text")
     .attr("dx", 0)
-    .attr("dy", (d) => nodeRadius(d) + 8 + "px")
+    .attr("dy", (d) => -nodeRadius(d) + "px")
     .attr("text-anchor", "middle")
     .text((d) => data[d.id]?.title || (d.id.charAt(1).toUpperCase() + d.id.slice(2)).replace("-", " "))
     .style('opacity', (opacityScale - 1) / 3.75)
@@ -266,16 +272,23 @@
   })
 }
 
-async function renderGlobalGraph() {
+function renderGlobalGraph() {
   const slug = document.body.dataset["slug"]!
-  await renderGraph("global-graph-container", slug)
   const container = document.getElementById("global-graph-outer")
+  const sidebar = container?.closest(".sidebar") as HTMLElement
   container?.classList.add("active")
+  if (sidebar) {
+    sidebar.style.zIndex = "1"
+  }
 
+  renderGraph("global-graph-container", slug)
 
   function hideGlobalGraph() {
     container?.classList.remove("active")
     const graph = document.getElementById("global-graph-container")
+    if (sidebar) {
+      sidebar.style.zIndex = "unset"
+    }
     if (!graph) return
     removeAllChildren(graph)
   }
@@ -293,14 +306,3 @@
   containerIcon?.addEventListener("click", renderGlobalGraph)
 })
 
-let resizeEventDebounce: number | undefined = undefined
-window.addEventListener('resize', () => {
-  if (resizeEventDebounce) {
-    clearTimeout(resizeEventDebounce)
-  }
-
-  resizeEventDebounce = window.setTimeout(async () => {
-    const slug = document.body.dataset["slug"]!
-    await renderGraph("graph-container", slug)
-  }, 50)
-})

--
Gitblit v1.10.0