feat: add ability to add/remove nodes to/from the local graph from emacs

Adds the commands `org-roam-ui-add-to-local-graph` and `org-roam-ui-remove-from-local-graph`

13 files changed, 319 insertions, 3 deletions

diff --git a/util/findNthNeighbour.ts b/util/findNthNeighbour.ts
new file mode 100644
index 0000000..d48adbc
--- /dev/null
+++ b/util/findNthNeighbour.ts
@@ -0,0 +1,42 @@
+import { LinksByNodeId } from '../pages'
+import { normalizeLinkEnds } from './normalizeLinkEnds'
+
+export const findNthNeighbors = ({
+  ids,
+  excludedIds,
+  n,
+  linksByNodeId,
+}: {
+  ids: string[]
+  excludedIds: string[]
+  n: number
+  linksByNodeId: LinksByNodeId
+}) => {
+  let queue = [ids[0]]
+  let todo: string[] = []
+  const completed = [ids[0]]
+  Array.from({ length: n }, () => {
+    queue.forEach((node) => {
+      const links = linksByNodeId[node as string] ?? []
+      links.forEach((link) => {
+        const [sourceId, targetId] = normalizeLinkEnds(link)
+        if (excludedIds.some((id) => [sourceId, targetId].includes(id))) {
+          return
+        }
+        if (!completed.includes(sourceId)) {
+          todo.push(sourceId)
+          return
+        }
+        if (!completed.includes(targetId)) {
+          todo.push(targetId)
+          return
+        }
+        return
+      })
+    })
+    queue = todo
+    todo.forEach((neighbor) => neighbor && completed.push(neighbor))
+    todo = []
+  })
+  return completed
+}
diff --git a/util/getLinkColor.ts b/util/getLinkColor.ts
new file mode 100644
index 0000000..33f7094
--- /dev/null
+++ b/util/getLinkColor.ts
@@ -0,0 +1,82 @@
+import { initialColoring, initialVisuals } from '../components/config'
+import { LinksByNodeId } from '../pages'
+import { getLinkNodeColor } from './getLinkNodeColor'
+import { getThemeColor } from './getThemeColor'
+
+export const getLinkColor = ({
+  sourceId,
+  targetId,
+  needsHighlighting,
+  theme,
+  visuals,
+  highlightColors,
+  opacity,
+  linksByNodeId,
+  coloring,
+  cluster,
+}: {
+  sourceId: string
+  targetId: string
+  needsHighlighting: boolean
+  theme: any
+  visuals: typeof initialVisuals
+  highlightColors: Record<string, any>
+  opacity: number
+  linksByNodeId: LinksByNodeId
+  coloring: typeof initialColoring
+  cluster: any
+}) => {
+  if (!visuals.linkHighlight && !visuals.linkColorScheme && !needsHighlighting) {
+    const nodeColor = getLinkNodeColor({
+      sourceId,
+      targetId,
+      linksByNodeId,
+      visuals,
+      coloring,
+      cluster,
+    })
+    return getThemeColor(nodeColor, theme)
+  }
+
+  if (!needsHighlighting && !visuals.linkColorScheme) {
+    const nodeColor = getLinkNodeColor({
+      sourceId,
+      targetId,
+      linksByNodeId,
+      visuals,
+      coloring,
+      cluster,
+    })
+    return highlightColors[nodeColor][visuals.backgroundColor](visuals.highlightFade * opacity)
+  }
+
+  if (!needsHighlighting) {
+    return highlightColors[visuals.linkColorScheme][visuals.backgroundColor](
+      visuals.highlightFade * opacity,
+    )
+  }
+
+  if (!visuals.linkHighlight && !visuals.linkColorScheme) {
+    const nodeColor = getLinkNodeColor({
+      sourceId,
+      targetId,
+      linksByNodeId,
+      visuals,
+      coloring,
+      cluster,
+    })
+    return getThemeColor(nodeColor, theme)
+  }
+
+  if (!visuals.linkHighlight) {
+    return getThemeColor(visuals.linkColorScheme, theme)
+  }
+
+  if (!visuals.linkColorScheme) {
+    return highlightColors[
+      getLinkNodeColor({ sourceId, targetId, linksByNodeId, visuals, coloring, cluster })
+    ][visuals.linkHighlight](opacity)
+  }
+
+  return highlightColors[visuals.linkColorScheme][visuals.linkHighlight](opacity)
+}
diff --git a/util/getLinkNodeColor.ts b/util/getLinkNodeColor.ts
new file mode 100644
index 0000000..86cfa4b
--- /dev/null
+++ b/util/getLinkNodeColor.ts
@@ -0,0 +1,23 @@
+import { initialColoring, initialVisuals } from '../components/config'
+import { LinksByNodeId } from '../pages'
+import { getNodeColorById } from './getNodeColorById'
+
+export const getLinkNodeColor = ({
+  sourceId,
+  targetId,
+  linksByNodeId,
+  visuals,
+  coloring,
+  cluster,
+}: {
+  sourceId: string
+  targetId: string
+  linksByNodeId: LinksByNodeId
+  visuals: typeof initialVisuals
+  coloring: typeof initialColoring
+  cluster: any
+}) => {
+  return linksByNodeId[sourceId]!.length > linksByNodeId[targetId]!.length
+    ? getNodeColorById({ id: sourceId, linksByNodeId, visuals, cluster, coloring })
+    : getNodeColorById({ id: targetId, visuals, linksByNodeId, cluster, coloring })
+}
diff --git a/util/getNodeColor.ts b/util/getNodeColor.ts
new file mode 100644
index 0000000..f25a15b
--- /dev/null
+++ b/util/getNodeColor.ts
@@ -0,0 +1,75 @@
+import { OrgRoamNode } from '../api'
+import { initialColoring, initialVisuals } from '../components/config'
+import { LinksByNodeId } from '../pages'
+import { getNodeColorById } from './getNodeColorById'
+import { getThemeColor } from './getThemeColor'
+
+export const getNodeColor = ({
+  node,
+  theme,
+  highlightedNodes,
+  previouslyHighlightedNodes,
+  visuals,
+  tagColors,
+  highlightColors,
+  opacity,
+  emacsNodeId,
+  linksByNodeId,
+  cluster,
+  coloring,
+}: {
+  node: OrgRoamNode
+  theme: any
+  visuals: typeof initialVisuals
+  highlightedNodes: Record<string, any>
+  previouslyHighlightedNodes: Record<string, any>
+  tagColors: Record<string, any>
+  highlightColors: Record<string, any>
+  opacity: number
+  emacsNodeId: string | null
+  linksByNodeId: LinksByNodeId
+  cluster: any
+  coloring: typeof initialColoring
+}) => {
+  const needsHighlighting = highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
+  //const needsHighlighting = hoverNode?.id === node.id! || lastHoverNode?.current?.id === node.id
+  // if we are matching the node color and don't have a highlight color
+  // or we don't have our own scheme and we're not being highlighted
+  if (visuals.emacsNodeColor && node.id === emacsNodeId) {
+    return getThemeColor(visuals.emacsNodeColor, theme)
+  }
+  if (tagColors && node?.tags.some((tag) => tagColors[tag])) {
+    const tagColor = tagColors[node?.tags.filter((tag) => tagColors[tag])[0]]
+    return needsHighlighting
+      ? highlightColors[tagColor][tagColor](visuals.highlightFade * opacity)
+      : highlightColors[tagColor][visuals.backgroundColor](visuals.highlightFade * opacity)
+  }
+  if (visuals.citeNodeColor && node?.properties?.ROAM_REFS && node?.properties?.FILELESS) {
+    return needsHighlighting
+      ? getThemeColor(visuals.citeNodeColor, theme)
+      : highlightColors[visuals.citeNodeColor][visuals.backgroundColor](
+          visuals.highlightFade * opacity,
+        )
+  }
+  if (visuals.refNodeColor && node.properties.ROAM_REFS) {
+    return needsHighlighting
+      ? getThemeColor(visuals.refNodeColor, theme)
+      : highlightColors[visuals.refNodeColor][visuals.backgroundColor](
+          visuals.highlightFade * opacity,
+        )
+  }
+  if (!needsHighlighting) {
+    return highlightColors[
+      getNodeColorById({ id: node.id as string, cluster, coloring, linksByNodeId, visuals })
+    ][visuals.backgroundColor](visuals.highlightFade * opacity)
+  }
+  if (!visuals.nodeHighlight) {
+    return getThemeColor(
+      getNodeColorById({ id: node.id as string, cluster, coloring, linksByNodeId, visuals }),
+      theme,
+    )
+  }
+  return highlightColors[
+    getNodeColorById({ id: node.id as string, cluster, coloring, linksByNodeId, visuals })
+  ][visuals.nodeHighlight](opacity)
+}
diff --git a/util/getNodeColorById.ts b/util/getNodeColorById.ts
new file mode 100644
index 0000000..d2c198b
--- /dev/null
+++ b/util/getNodeColorById.ts
@@ -0,0 +1,25 @@
+import { initialColoring, initialVisuals } from '../components/config'
+import { LinksByNodeId } from '../pages'
+import { numberWithinRange } from './numberWithinRange'
+
+export const getNodeColorById = ({
+  id,
+  linksByNodeId,
+  visuals,
+  coloring,
+  cluster,
+}: {
+  id: string
+  linksByNodeId: LinksByNodeId
+  visuals: typeof initialVisuals
+  cluster: any
+  coloring: typeof initialColoring
+}) => {
+  const linklen = linksByNodeId[id!]?.length ?? 0
+  if (coloring.method === 'degree') {
+    return visuals.nodeColorScheme[
+      numberWithinRange(linklen, 0, visuals.nodeColorScheme.length - 1)
+    ]
+  }
+  return visuals.nodeColorScheme[linklen && cluster[id] % visuals.nodeColorScheme.length]
+}
diff --git a/util/getThemeColor.ts b/util/getThemeColor.ts
new file mode 100644
index 0000000..1175a52
--- /dev/null
+++ b/util/getThemeColor.ts
@@ -0,0 +1,3 @@
+export const getThemeColor = (name: string, theme: any) => {
+  return name.split('.').reduce((o, i) => o[i], theme.colors)
+}
diff --git a/util/hexToRGBA.ts b/util/hexToRGBA.ts
new file mode 100644
index 0000000..bacb601
--- /dev/null
+++ b/util/hexToRGBA.ts
@@ -0,0 +1,11 @@
+export function hexToRGBA(hex: string, opacity: number) {
+  return (
+    'rgba(' +
+    (hex = hex.replace('#', ''))
+      .match(new RegExp('(.{' + hex.length / 3 + '})', 'g'))!
+      .map((l) => parseInt(hex.length % 2 ? l + l : l, 16))
+      .concat(isFinite(opacity) ? opacity : 1)
+      .join(',') +
+    ')'
+  )
+}
diff --git a/util/isLinkRelatedToNode.ts b/util/isLinkRelatedToNode.ts
new file mode 100644
index 0000000..eeacab7
--- /dev/null
+++ b/util/isLinkRelatedToNode.ts
@@ -0,0 +1,7 @@
+import { NodeObject, LinkObject } from 'force-graph'
+
+export const isLinkRelatedToNode = (link: LinkObject, node: NodeObject | null) => {
+  return (
+    (link.source as NodeObject)?.id! === node?.id! || (link.target as NodeObject)?.id! === node?.id!
+  )
+}
diff --git a/util/nodeSize.ts b/util/nodeSize.ts
new file mode 100644
index 0000000..3601c1e
--- /dev/null
+++ b/util/nodeSize.ts
@@ -0,0 +1,34 @@
+import { filter } from '@chakra-ui/react'
+import { initialVisuals } from '../components/config'
+import { LinksByNodeId } from '../pages'
+import { NodeObject } from 'force-graph'
+
+export const nodeSize = ({
+  linksByNodeId,
+  visuals,
+  highlightedNodes,
+  previouslyHighlightedNodes,
+  opacity,
+  node,
+}: {
+  node: NodeObject
+  visuals: typeof initialVisuals
+
+  highlightedNodes: Record<string, any>
+  previouslyHighlightedNodes: Record<string, any>
+  opacity: number
+  linksByNodeId: LinksByNodeId
+}) => {
+  const links = linksByNodeId[node.id!] ?? []
+  const parentNeighbors = links.length ? links.filter((link) => link.type === 'parent').length : 0
+  const basicSize =
+    3 + links.length * visuals.nodeSizeLinks - (!filter.parent ? parentNeighbors : 0)
+  if (visuals.highlightNodeSize === 1) {
+    return basicSize
+  }
+  const highlightSize =
+    highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!]
+      ? 1 + opacity * (visuals.highlightNodeSize - 1)
+      : 1
+  return basicSize * highlightSize
+}
diff --git a/util/normalizeLinkEnds.ts b/util/normalizeLinkEnds.ts
new file mode 100644
index 0000000..43eee9c
--- /dev/null
+++ b/util/normalizeLinkEnds.ts
@@ -0,0 +1,12 @@
+import { OrgRoamLink } from '../api'
+import { LinkObject } from 'force-graph'
+
+export function normalizeLinkEnds(link: OrgRoamLink | LinkObject): [string, string] {
+  // we need to cover both because force-graph modifies the original data
+  // but if we supply the original data on each render, the graph will re-render sporadically
+  const sourceId =
+    typeof link.source === 'object' ? (link.source.id! as string) : (link.source as string)
+  const targetId =
+    typeof link.target === 'object' ? (link.target.id! as string) : (link.target as string)
+  return [sourceId, targetId]
+}
diff --git a/util/numberWithinRange.ts b/util/numberWithinRange.ts
new file mode 100644
index 0000000..ae435ce
--- /dev/null
+++ b/util/numberWithinRange.ts
@@ -0,0 +1,3 @@
+export const numberWithinRange = (num: number, min: number, max: number) => {
+  return Math.min(Math.max(num, min), max)
+}
diff --git a/util/processOrg.tsx b/util/processOrg.tsx
index ea868ee..2abc256 100644
--- a/util/processOrg.tsx
+++ b/util/processOrg.tsx
@@ -26,7 +26,7 @@ import remarkSectionize from 'remark-sectionize'
 import remarkRehype from 'remark-rehype'
 
 import { PreviewLink } from '../components/Sidebar/Link'
-import { LinksByNodeId, NodeByCite, NodeById, normalizeLinkEnds } from '../pages'
+import { LinksByNodeId, NodeByCite, NodeById } from '../pages'
 import React, { createContext, ReactNode, useMemo } from 'react'
 import { OrgImage } from '../components/Sidebar/OrgImage'
 import { Section } from '../components/Sidebar/Section'
@@ -36,6 +36,7 @@ import { OrgRoamLink, OrgRoamNode } from '../api'
 // @ts-expect-error non-ESM unified means no types
 import { toString } from 'hast-util-to-string'
 import { Box, chakra } from '@chakra-ui/react'
+import { normalizeLinkEnds } from './normalizeLinkEnds'
 
 export interface ProcessedOrgProps {
   nodeById: NodeById
@@ -126,7 +127,6 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => {
   const isMarkdown = previewNode?.file?.slice(-3) === '.md'
   const baseProcessor = isMarkdown ? mdProcessor : orgProcessor
 
-  console.log(macros)
   const processor = useMemo(
     () =>
       baseProcessor
diff --git a/util/uniorg.tsx b/util/uniorg.tsx
index 4172d7a..8e285e6 100644
--- a/util/uniorg.tsx
+++ b/util/uniorg.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { OrgRoamLink, OrgRoamNode } from '../api'
 import { LinksByNodeId, NodeByCite, NodeById } from '../pages/index'
 import { ProcessedOrg } from './processOrg'