Merge pull request #120 from org-roam/feat/community-detection

Feat/community detection

1 files changed, 36 insertions, 7 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index aa376d1..1d8ae78 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -24,6 +24,8 @@ import React, {
   useRef,
   useState,
 } from 'react'
+//@ts-expect-error
+import jLouvain from 'jlouvain.js'
 import type {
   ForceGraph2D as TForceGraph2D,
   ForceGraph3D as TForceGraph3D,
@@ -39,6 +41,7 @@ import {
   algos,
   colorList,
   initialBehavior,
+  initialColoring,
   initialFilter,
   initialLocal,
   initialMouse,
@@ -107,7 +110,9 @@ export function GraphPage() {
   const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
   const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior)
   const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
+  const [coloring, setColoring] = usePersistantState('coloring', initialColoring)
   const [local, setLocal] = usePersistantState('local', initialLocal)
+
   const [
     previewNodeState,
     {
@@ -133,6 +138,7 @@ export function GraphPage() {
   const tagsRef = useRef<Tags>([])
   const graphRef = useRef<any>(null)
   const variablesRef = useRef<{ [variable: string]: string }>({})
+  const clusterRef = useRef<{ [id: string]: number }>({})
 
   const currentGraphDataRef = useRef<GraphData>({ nodes: [], links: [] })
 
@@ -542,6 +548,8 @@ export function GraphPage() {
           setBehavior,
           tagColors,
           setTagColors,
+          coloring,
+          setColoring,
           local,
           setLocal,
         }}
@@ -578,6 +586,8 @@ export function GraphPage() {
               setMainWindowWidth,
               setContextMenuTarget,
               graphRef,
+              clusterRef,
+              coloring,
               local,
             }}
           />
@@ -703,6 +713,8 @@ export interface GraphProps {
   setMainWindowWidth: any
   variables: { [variable: string]: string }
   graphRef: any
+  clusterRef: any
+  coloring: typeof initialColoring
 }
 
 export const Graph = function (props: GraphProps) {
@@ -732,6 +744,8 @@ export const Graph = function (props: GraphProps) {
     contextMenu,
     handleLocal,
     variables,
+    clusterRef,
+    coloring,
   } = props
 
   const { dailyDir, roamDir } = variables
@@ -892,8 +906,22 @@ export const Graph = function (props: GraphProps) {
       }
     }, {})
 
+    const weightedLinks = filteredLinks.map((l) => {
+      const [target, source] = normalizeLinkEnds(l)
+      const link = l as OrgRoamLink
+      return { target, source, weight: link.type === 'cite' ? 1 : 2 }
+    })
+
+    if (coloring.method === 'community') {
+      const community = jLouvain().nodes(filteredNodeIds).edges(weightedLinks)
+      clusterRef.current = community()
+    }
+    /* clusterRef.current = Object.fromEntries(
+     *   Object.entries(community()).sort(([, a], [, b]) => a - b),
+     * ) */
+    //console.log(clusterRef.current)
     return { nodes: filteredNodes, links: filteredLinks }
-  }, [filter, graphData])
+  }, [filter, graphData, coloring.method])
 
   const [scopedGraphData, setScopedGraphData] = useState<GraphData>({ nodes: [], links: [] })
 
@@ -1081,15 +1109,16 @@ export const Graph = function (props: GraphProps) {
 
   const getNodeColorById = (id: string) => {
     const linklen = filteredLinksByNodeIdRef.current[id!]?.length ?? 0
-    /* const parentCiteNeighbors = linklen
-     *   ? linksByNodeId[id!]?.filter((link) => ['parent', 'heading', 'cite', 'ref'].includes(link.type)).length
-     *   : 0
-     * const neighbors = filter.parent ? linklen : linklen - parentCiteNeighbors! */
-
+    if (coloring.method === 'degree') {
+      return visuals.nodeColorScheme[
+        numberWithinRange(linklen, 0, visuals.nodeColorScheme.length - 1)
+      ]
+    }
     return visuals.nodeColorScheme[
-      numberWithinRange(linklen, 0, visuals.nodeColorScheme.length - 1)
+      linklen && clusterRef.current[id] % visuals.nodeColorScheme.length
     ]
   }
+
   const getLinkNodeColor = (sourceId: string, targetId: string) => {
     return filteredLinksByNodeIdRef.current[sourceId]!.length >
       filteredLinksByNodeIdRef.current[targetId]!.length