From 64b579b4d6e989ea7c71840a1dde2c3dc360365d Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Thu, 14 Oct 2021 23:03:59 +0200 Subject: feat(algos): color by community --- pages/index.tsx | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) (limited to 'pages/index.tsx') diff --git a/pages/index.tsx b/pages/index.tsx index a998c82..f4f4ecd 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, @@ -130,6 +132,7 @@ export function GraphPage() { const tagsRef = useRef([]) const graphRef = useRef(null) const variablesRef = useRef<{ [variable: string]: string }>({}) + const clusterRef = useRef<{ [id: string]: number }>({}) const currentGraphDataRef = useRef({ nodes: [], links: [] }) @@ -573,6 +576,7 @@ export function GraphPage() { setMainWindowWidth, setContextMenuTarget, graphRef, + clusterRef, }} /> )} @@ -696,6 +700,7 @@ export interface GraphProps { setMainWindowWidth: any variables: { [variable: string]: string } graphRef: any + clusterRef: any } export const Graph = function (props: GraphProps) { @@ -724,6 +729,7 @@ export const Graph = function (props: GraphProps) { contextMenu, handleLocal, variables, + clusterRef, } = props const { dailyDir, roamDir } = variables @@ -884,6 +890,19 @@ export const Graph = function (props: GraphProps) { } }, {}) + console.log(filteredLinks) + const weightedLinks = filteredLinks.map((l) => { + const [target, source] = normalizeLinkEnds(l) + const link = l as OrgRoamLink + return { target, source, weight: link.type === 'cite' ? 1 : 2 } + }) + console.log(weightedLinks) + 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]) @@ -1071,10 +1090,9 @@ export const Graph = function (props: GraphProps) { * : 0 * const neighbors = filter.parent ? linklen : linklen - parentCiteNeighbors! */ - return visuals.nodeColorScheme[ - numberWithinRange(linklen, 0, visuals.nodeColorScheme.length - 1) - ] + return visuals.nodeColorScheme[clusterRef.current[id] % (visuals.nodeColorScheme.length - 1)] } + const getLinkNodeColor = (sourceId: string, targetId: string) => { return filteredLinksByNodeIdRef.current[sourceId]!.length > filteredLinksByNodeIdRef.current[targetId]!.length -- cgit v1.2.3