diff options
| -rw-r--r-- | components/Tweaks/GraphColorSelect.tsx | 13 | ||||
| -rw-r--r-- | components/Tweaks/VisualsPanel.tsx | 4 | ||||
| -rw-r--r-- | components/Tweaks/index.tsx | 3 | ||||
| -rw-r--r-- | components/config.ts | 3 | ||||
| -rw-r--r-- | 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 ] } |