add graph depth config

Jacky Zhao

2021-12-27 39592347cc742838a1d078031b897fe26a94adaf

add graph depth config

 data/graphConfig.yaml

@@ -1,5 +1,6 @@
enableLegend: false
enableDrag: true
enableZoom: true
depth: -1 # set to -1 to show full graph
paths:
  - /moc: "#4388cc"

 layouts/_default/section.html

 layouts/partials/graph.html

@@ -16,12 +16,35 @@
  const content = {{$.Site.Data.contentIndex}}
  const curPage = {{ strings.TrimRight "/" .Page.RelPermalink }}
  const pathColors = {{$.Site.Data.graphConfig.paths}}
  let depth = {{$.Site.Data.graphConfig.depth}}

  const parseIdsFromLinks = (links) => [...(new Set(links.flatMap(link => ([link.source, link.target]))))]

  const neighbours = new Set()
  const wl = [curPage || "/", "__SENTINEL"]
  if (depth >= 0) {
    while (depth >= 0 && wl.length > 0) {
      // compute neighbours
      const cur = wl.shift()
      console.log(depth, cur, wl)
      if (cur === "__SENTINEL") {
        depth--
        wl.push("__SENTINEL")
      } else {
        neighbours.add(cur)
        const outgoing = index.links[cur] || []
        const incoming = index.backlinks[cur] || []
        console.log(incoming)
        wl.push(...outgoing.map(l => l.target), ...incoming.map(l => l.source))
      }
    }
  } else {
    parseIdsFromLinks(links).forEach(id => neighbours.add(id))
  }

  const data = {
    nodes: parseIdsFromLinks(links).map(id => ({id})),
    links,
    nodes: [...neighbours].map(id => ({id})),
    links: links.filter(l => neighbours.has(l.source) && neighbours.has(l.target)),
  }

  const color = (d) => {
@@ -70,10 +93,8 @@
  const width = document.getElementById("graph-container").offsetWidth

  const simulation = d3.forceSimulation(data.nodes)
    .force("charge", d3.forceManyBody().strength(-20))
    .force("link", d3.forceLink(data.links)
      .id(d => d.id)
    )
    .force("charge", d3.forceManyBody().strength(-30))
    .force("link", d3.forceLink(data.links).id(d => d.id))
    .force("center", d3.forceCenter());

  const svg = d3.select('#graph-container')