From 85b665b343d63096a3e62c210931040a44b07a1b Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <hello@tefkah.com>
Date: Sun, 17 Oct 2021 01:04:13 +0200
Subject: feat(algos): properly working communities

---
 components/Tweaks/GraphColorSelect.tsx | 13 +++++++++----
 components/Tweaks/VisualsPanel.tsx     |  4 ++--
 components/Tweaks/index.tsx            |  3 ++-
 components/config.ts                   |  3 +++
 pages/index.tsx                        | 13 +++++++------
 5 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/components/Tweaks/GraphColorSelect.tsx b/components/Tweaks/GraphColorSelect.tsx
index b52dde2..60fd8cf 100644
--- a/components/Tweaks/GraphColorSelect.tsx
+++ b/components/Tweaks/GraphColorSelect.tsx
@@ -11,9 +11,10 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { ChevronDownIcon } from '@chakra-ui/icons'
+import { initialColoring } from '../config'
 
 export interface GraphColorSelectProps {
-  coloring: string
+  coloring: typeof initialColoring
   setColoring: any
 }
 
@@ -31,12 +32,14 @@ export const GraphColorSelect = (props: GraphColorSelectProps) => {
           color="black"
           rightIcon={<ChevronDownIcon />}
         >
-          {coloring === 'degree' ? 'Links' : 'Communities'}
+          {coloring.method === 'degree' ? 'Links' : 'Communities'}
         </MenuButton>
         <Portal>
           <MenuList minW={10} zIndex="popover" bgColor="gray.200">
             <MenuItem
-              onClick={() => setColoring('degree')}
+              onClick={() =>
+                setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'degree' }))
+              }
               justifyContent="space-between"
               alignItems="center"
               display="flex"
@@ -44,7 +47,9 @@ export const GraphColorSelect = (props: GraphColorSelectProps) => {
               Number of links
             </MenuItem>
             <MenuItem
-              onClick={() => setColoring('community')}
+              onClick={() =>
+                setColoring((curr: typeof initialColoring) => ({ ...curr, method: 'community' }))
+              }
               justifyContent="space-between"
               alignItems="center"
               display="flex"
diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx
index 015acfc..ca7f20e 100644
--- a/components/Tweaks/VisualsPanel.tsx
+++ b/components/Tweaks/VisualsPanel.tsx
@@ -18,7 +18,7 @@ import {
 import React, { useCallback } from 'react'
 import { HighlightingPanel } from './HighlightingPanel'
 import { ColorsPanel } from './ColorsPanel'
-import { initialVisuals } from '../config'
+import { initialColoring, initialVisuals } from '../config'
 import { NodesNLinksPanel } from './NodesNLinksPanel'
 import { LabelsPanel } from './LabelsPanel'
 import { CitationsPanel } from './CitationsPanel'
@@ -32,7 +32,7 @@ export interface VisualsPanelProps {
   highlightColor: string
   setHighlightColor: any
   threeDim: boolean
-  coloring: string
+  coloring: typeof initialColoring
   setColoring: any
 }
 
diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx
index 078ee99..0af25aa 100644
--- a/components/Tweaks/index.tsx
+++ b/components/Tweaks/index.tsx
@@ -22,6 +22,7 @@ import {
   initialBehavior,
   TagColors,
   colorList,
+  initialColoring,
 } from '../config'
 
 import FilterPanel from './FilterPanel'
@@ -48,7 +49,7 @@ export interface TweakProps {
   tags: string[]
   tagColors: TagColors
   setTagColors: any
-  coloring: string
+  coloring: typeof initialColoring
   setColoring: any
 }
 
diff --git a/components/config.ts b/components/config.ts
index b3f5905..669942b 100644
--- a/components/config.ts
+++ b/components/config.ts
@@ -45,6 +45,9 @@ export const initialFilter = {
   date: [],
   noter: true,
 }
+export const initialColoring = {
+  method: 'degree',
+}
 
 export const initialVisuals = {
   particles: false,
diff --git a/pages/index.tsx b/pages/index.tsx
index 9c2ae37..a2c99be 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -41,6 +41,7 @@ import {
   algos,
   colorList,
   initialBehavior,
+  initialColoring,
   initialFilter,
   initialMouse,
   initialPhysics,
@@ -107,7 +108,7 @@ 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', 'community')
+  const [coloring, setColoring] = usePersistantState('coloring', initialColoring)
   const [
     previewNodeState,
     {
@@ -705,7 +706,7 @@ export interface GraphProps {
   variables: { [variable: string]: string }
   graphRef: any
   clusterRef: any
-  coloring: string
+  coloring: typeof initialColoring
 }
 
 export const Graph = function (props: GraphProps) {
@@ -902,7 +903,7 @@ export const Graph = function (props: GraphProps) {
       return { target, source, weight: link.type === 'cite' ? 1 : 2 }
     })
 
-    if (coloring === 'community') {
+    if (coloring.method === 'community') {
       const community = jLouvain().nodes(filteredNodeIds).edges(weightedLinks)
       clusterRef.current = community()
     }
@@ -911,7 +912,7 @@ export const Graph = function (props: GraphProps) {
      * ) */
     //console.log(clusterRef.current)
     return { nodes: filteredNodes, links: filteredLinks }
-  }, [filter, graphData])
+  }, [filter, graphData, coloring.method])
 
   const [scopedGraphData, setScopedGraphData] = useState<GraphData>({ nodes: [], links: [] })
 
@@ -1092,13 +1093,13 @@ export const Graph = function (props: GraphProps) {
 
   const getNodeColorById = (id: string) => {
     const linklen = filteredLinksByNodeIdRef.current[id!]?.length ?? 0
-    if (coloring === 'degree') {
+    if (coloring.method === 'degree') {
       return visuals.nodeColorScheme[
         numberWithinRange(linklen, 0, visuals.nodeColorScheme.length - 1)
       ]
     }
     return visuals.nodeColorScheme[
-      linklen && clusterRef.current[id] % (visuals.nodeColorScheme.length - 1)
+      linklen && clusterRef.current[id] % visuals.nodeColorScheme.length
     ]
   }
 
-- 
cgit v1.2.3