base path refactor, more docs

Jacky Zhao

2023-07-13 906f91f8eed5e91a7afae95c7002a3e4553d6aae

 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[] } = {
@@ -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) {
@@ -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)
@@ -274,12 +275,20 @@
function renderGlobalGraph() {
  const slug = document.body.dataset["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)
  }
@@ -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)
})