refined js

assets/js/scripts.js

@@ -75,3 +75,228 @@ function setupListeners (linkElement) {
 }
 
 document.querySelectorAll('.note-contents a').forEach(setupListeners)
+
+// Notes graph
+
+const d3 = window.d3
+
+if (typeof graphData !== 'undefined') {
+  const MINIMAL_NODE_SIZE = 10
+  const MAX_NODE_SIZE = 12
+  const ACTIVE_RADIUS_FACTOR = 1.5
+  const STROKE = 1
+  const FONT_SIZE = 16
+  const TICKS = 200
+  const FONT_BASELINE = 40
+  const MAX_LABEL_LENGTH = 50
+
+  /* global graphData */
+
+  const nodesData = graphData.nodes
+  const linksData = graphData.edges
+
+  const nodeSize = {}
+
+  const updateNodeSize = () => {
+    nodesData.forEach((el) => {
+      let weight =
+          3 *
+          Math.sqrt(
+            linksData.filter((l) => l.source === el.id || l.target === el.id)
+              .length + 1
+          )
+      if (weight < MINIMAL_NODE_SIZE) {
+        weight = MINIMAL_NODE_SIZE
+      } else if (weight > MAX_NODE_SIZE) {
+        weight = MAX_NODE_SIZE
+      }
+      nodeSize[el.id] = weight
+    })
+  }
+
+  const onClick = (d) => {
+    window.location = d3.select(d.target).data()[0].path
+  }
+
+  const onMouseover = function (d) {
+    const relatedNodesSet = new Set()
+    linksData
+      .filter((n) => n.target.id === d.id || n.source.id === d.id)
+      .forEach((n) => {
+        relatedNodesSet.add(n.target.id)
+        relatedNodesSet.add(n.source.id)
+      })
+
+    node.attr('class', (nodeD) => {
+      if (nodeD.id !== d.id && !relatedNodesSet.has(nodeD.id)) {
+        return 'inactive'
+      }
+      return ''
+    })
+
+    link.attr('class', (linkD) => {
+      if (linkD.source.id !== d.id && linkD.target.id !== d.id) {
+        return 'inactive'
+      }
+      return ''
+    })
+
+    link.attr('stroke-width', (linkD) => {
+      if (linkD.source.id === d.id || linkD.target.id === d.id) {
+        return STROKE * 4
+      }
+      return STROKE
+    })
+    text.attr('class', (textD) => {
+      if (textD.id !== d.id && !relatedNodesSet.has(textD.id)) {
+        return 'inactive'
+      }
+      return ''
+    })
+  }
+
+  const onMouseout = function (d) {
+    node.attr('class', '')
+    link.attr('class', '')
+    text.attr('class', '')
+    link.attr('stroke-width', STROKE)
+  }
+
+  const graphWrapper = document.getElementById('graph-wrapper')
+  const element = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  element.setAttribute('width', graphWrapper.getBoundingClientRect().width)
+  element.setAttribute('height', window.innerHeight * 0.8)
+  graphWrapper.appendChild(element)
+
+  const reportWindowSize = () => {
+    element.setAttribute('width', window.innerWidth)
+    element.setAttribute('height', window.innerHeight)
+  }
+
+  window.onresize = reportWindowSize
+
+  const svg = d3.select('svg')
+  const width = Number(svg.attr('width'))
+  const height = Number(svg.attr('height'))
+  let zoomLevel = 1
+
+  const simulation = d3
+    .forceSimulation(nodesData)
+    .force('forceX', d3.forceX().x(width / 2))
+    .force('forceY', d3.forceY().y(height / 2))
+    .force('charge', d3.forceManyBody())
+    .force(
+      'link',
+      d3
+        .forceLink(linksData)
+        .id((d) => d.id)
+        .distance(70)
+    )
+    .force('center', d3.forceCenter(width / 2, height / 2))
+    .force('collision', d3.forceCollide().radius(80))
+    .stop()
+
+  const g = svg.append('g')
+  let link = g.append('g').attr('class', 'links').selectAll('.link')
+  let node = g.append('g').attr('class', 'nodes').selectAll('.node')
+  let text = g.append('g').attr('class', 'text').selectAll('.text')
+
+  const resize = (event) => {
+    if (event) {
+      const scale = event.transform
+      zoomLevel = scale.k
+      g.attr('transform', scale)
+    }
+
+    const zoomOrKeep = (value) => (zoomLevel >= 1 ? value / zoomLevel : value)
+
+    const font = Math.max(Math.round(zoomOrKeep(FONT_SIZE)), 1)
+
+    text.attr('font-size', (d) => font)
+    text.attr('y', (d) => d.y - zoomOrKeep(FONT_BASELINE) + 8)
+    link.attr('stroke-width', zoomOrKeep(STROKE))
+    node.attr('r', (d) => {
+      return zoomOrKeep(nodeSize[d.id])
+    })
+    svg
+      .selectAll('circle')
+      .filter((_d, i, nodes) => d3.select(nodes[i]).attr('active'))
+      .attr('r', (d) => zoomOrKeep(ACTIVE_RADIUS_FACTOR * nodeSize[d.id]))
+
+    document.getElementById('zoom').innerHTML = zoomLevel.toFixed(2)
+  }
+
+  const ticked = () => {
+    node.attr('cx', (d) => d.x).attr('cy', (d) => d.y)
+    text
+      .attr('x', (d) => d.x)
+      .attr('y', (d) => d.y - (FONT_BASELINE - nodeSize[d.id]) / zoomLevel)
+    link
+      .attr('x1', (d) => d.source.x)
+      .attr('y1', (d) => d.source.y)
+      .attr('x2', (d) => d.target.x)
+      .attr('y2', (d) => d.target.y)
+  }
+
+  const restart = () => {
+    updateNodeSize()
+    node = node.data(nodesData, (d) => d.id)
+    node.exit().remove()
+    node = node
+      .enter()
+      .append('circle')
+      .attr('r', (d) => {
+        return nodeSize[d.id]
+      })
+      .on('click', onClick)
+      .on('mouseover', onMouseover)
+      .on('mouseout', onMouseout)
+      .merge(node)
+
+    link = link.data(linksData, (d) => `${d.source.id}-${d.target.id}`)
+    link.exit().remove()
+    link = link.enter().append('line').attr('stroke-width', STROKE).merge(link)
+
+    text = text.data(nodesData, (d) => d.label)
+    text.exit().remove()
+    text = text
+      .enter()
+      .append('text')
+      .text((d) => shorten(d.label.replace(/_*/g, ''), MAX_LABEL_LENGTH))
+      .attr('font-size', `${FONT_SIZE}px`)
+      .attr('text-anchor', 'middle')
+      .attr('alignment-baseline', 'central')
+      .on('click', onClick)
+      .on('mouseover', onMouseover)
+      .on('mouseout', onMouseout)
+      .merge(text)
+
+    node.attr('active', (d) => isCurrentPath(d.path) ? true : null)
+    text.attr('active', (d) => isCurrentPath(d.path) ? true : null)
+
+    simulation.nodes(nodesData)
+    simulation.force('link').links(linksData)
+    simulation.alpha(1).restart()
+    simulation.stop()
+
+    for (let i = 0; i < TICKS; i++) {
+      simulation.tick()
+    }
+
+    ticked()
+  }
+
+  const zoomHandler = d3.zoom().scaleExtent([0.2, 3]).on('zoom', resize)
+
+  zoomHandler(svg)
+  restart()
+
+  function isCurrentPath (notePath) {
+    return window.location.pathname.includes(notePath)
+  }
+
+  function shorten (str, maxLen, separator = ' ') {
+    if (str.length <= maxLen) return str
+    return str.substr(0, str.lastIndexOf(separator, maxLen)) + '...'
+  }
+}