From 76c092dcf20959bc52fcb13b28cee50cd4217e40 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 20 Jul 2023 04:59:48 +0000
Subject: [PATCH] add custom.scss

---
 quartz/components/scripts/graph.inline.ts |   58 ++++++++++++++++++++++++++++------------------------------
 1 files changed, 28 insertions(+), 30 deletions(-)

diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index 194a23b..ae4f40f 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -1,30 +1,31 @@
 import { ContentDetails } from "../../plugins/emitters/contentIndex"
 import * as d3 from 'd3'
-import { registerEscapeHandler, relative, removeAllChildren } from "./util"
+import { registerEscapeHandler, removeAllChildren } from "./util"
+import { CanonicalSlug, getCanonicalSlug, getClientSlug, resolveRelative } 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]))
 }
 
-async function renderGraph(container: string, slug: string) {
+async function renderGraph(container: string, slug: CanonicalSlug) {
   const visited = getVisited()
   const graph = document.getElementById(container)
   if (!graph) return
@@ -49,18 +50,17 @@
     const outgoing = details.links ?? []
     for (const dest of outgoing) {
       if (src in data && dest in data) {
-        links.push({ source: src, target: dest })
+        links.push({ source: src as CanonicalSlug, target: dest })
       }
     }
   }
 
-  const neighbourhood = new Set()
-
-  const wl = [slug, "__SENTINEL"]
+  const neighbourhood = new Set<CanonicalSlug>()
+  const wl: (CanonicalSlug | "__SENTINEL")[] = [slug, "__SENTINEL"]
   if (depth >= 0) {
     while (depth >= 0 && wl.length > 0) {
       // compute neighbours
-      const cur = wl.shift()
+      const cur = wl.shift()!
       if (cur === "__SENTINEL") {
         depth--
         wl.push("__SENTINEL")
@@ -72,11 +72,11 @@
       }
     }
   } else {
-    links.flatMap(l => [l.source, l.target]).forEach((id) => neighbourhood.add(id))
+    Object.keys(data).forEach(id => neighbourhood.add(id as CanonicalSlug))
   }
 
   const graphData: { nodes: NodeData[], links: LinkData[] } = {
-    nodes: Object.keys(data).filter(id => neighbourhood.has(id)).map(url => ({ id: url, text: data[url]?.title ?? url, tags: data[url]?.tags ?? [] })),
+    nodes: [...neighbourhood].map(url => ({ id: url, text: data[url]?.title ?? url, tags: data[url]?.tags ?? [] })),
     links: links.filter((l) => neighbourhood.has(l.source) && neighbourhood.has(l.target))
   }
 
@@ -167,12 +167,13 @@
     .attr("fill", color)
     .style("cursor", "pointer")
     .on("click", (_, d) => {
-      const targ = relative(slug, d.id)
-      window.spaNavigate(new URL(targ))
+      const targ = resolveRelative(slug, d.id)
+      window.spaNavigate(new URL(targ, getClientSlug(window)))
     })
     .on("mouseover", function(_, d) {
-      const neighbours: string[] = data[slug].links ?? []
+      const neighbours: CanonicalSlug[] = data[slug].links ?? []
       const neighbourNodes = d3.selectAll<HTMLElement, NodeData>(".node").filter((d) => neighbours.includes(d.id))
+      console.log(neighbourNodes)
       const currentId = d.id
       const linkNodes = d3
         .selectAll(".link")
@@ -225,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)
@@ -272,14 +273,22 @@
 }
 
 function renderGlobalGraph() {
-  const slug = document.body.dataset["slug"]!
+  const slug = getCanonicalSlug(window) 
   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)
   }
@@ -297,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