diff options
Diffstat (limited to 'pages')
-rw-r--r-- | pages/index.tsx | 43 |
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 |