From 0895967f20ef33bc0f32c99bac0a93761915b87f Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sat, 16 Oct 2021 23:54:48 +0200 Subject: feat(algos): ability to select coloring --- components/Tweaks/GraphColorSelect.tsx | 59 ++++++++++++++++++++++++++++++++++ components/Tweaks/ThemeSelect.tsx | 8 ++++- components/Tweaks/VisualsPanel.tsx | 14 +++++++- components/Tweaks/index.tsx | 8 +++++ 4 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 components/Tweaks/GraphColorSelect.tsx (limited to 'components') diff --git a/components/Tweaks/GraphColorSelect.tsx b/components/Tweaks/GraphColorSelect.tsx new file mode 100644 index 0000000..b52dde2 --- /dev/null +++ b/components/Tweaks/GraphColorSelect.tsx @@ -0,0 +1,59 @@ +import React, { useContext } from 'react' +import { + Box, + Button, + Flex, + Menu, + MenuButton, + MenuItem, + MenuList, + Portal, + Text, +} from '@chakra-ui/react' +import { ChevronDownIcon } from '@chakra-ui/icons' + +export interface GraphColorSelectProps { + coloring: string + setColoring: any +} + +export const GraphColorSelect = (props: GraphColorSelectProps) => { + type Theme = { [key: string]: string } + const { coloring, setColoring } = props + return ( + + Graph coloring + + } + > + {coloring === 'degree' ? 'Links' : 'Communities'} + + + + setColoring('degree')} + justifyContent="space-between" + alignItems="center" + display="flex" + > + Number of links + + setColoring('community')} + justifyContent="space-between" + alignItems="center" + display="flex" + > + Communities + + + + + + ) +} diff --git a/components/Tweaks/ThemeSelect.tsx b/components/Tweaks/ThemeSelect.tsx index 6a6b5d8..d5a7f54 100644 --- a/components/Tweaks/ThemeSelect.tsx +++ b/components/Tweaks/ThemeSelect.tsx @@ -22,7 +22,13 @@ export const ThemeSelect = () => { Theme - }> + } + > {emacsTheme[0]} diff --git a/components/Tweaks/VisualsPanel.tsx b/components/Tweaks/VisualsPanel.tsx index d3c8415..015acfc 100644 --- a/components/Tweaks/VisualsPanel.tsx +++ b/components/Tweaks/VisualsPanel.tsx @@ -24,6 +24,7 @@ import { LabelsPanel } from './LabelsPanel' import { CitationsPanel } from './CitationsPanel' import { ColorMenu } from './ColorMenu' import { ThemeSelect } from './ThemeSelect' +import { GraphColorSelect } from './GraphColorSelect' export interface VisualsPanelProps { visuals: typeof initialVisuals @@ -31,14 +32,25 @@ export interface VisualsPanelProps { highlightColor: string setHighlightColor: any threeDim: boolean + coloring: string + setColoring: any } export const VisualsPanel = (props: VisualsPanelProps) => { - const { visuals, setVisuals, highlightColor, setHighlightColor, threeDim } = props + const { + coloring, + setColoring, + visuals, + setVisuals, + highlightColor, + setHighlightColor, + threeDim, + } = props const setVisualsCallback = useCallback((val) => setVisuals(val), []) return ( + diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx index afd0ea7..078ee99 100644 --- a/components/Tweaks/index.tsx +++ b/components/Tweaks/index.tsx @@ -48,6 +48,8 @@ export interface TweakProps { tags: string[] tagColors: TagColors setTagColors: any + coloring: string + setColoring: any } export const Tweaks = (props: TweakProps) => { @@ -67,6 +69,8 @@ export const Tweaks = (props: TweakProps) => { tags, tagColors, setTagColors, + coloring, + setColoring, } = props const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false) @@ -194,6 +198,10 @@ export const Tweaks = (props: TweakProps) => { highlightColor={highlightColor} setHighlightColor={setHighlightColor} threeDim={threeDim} + {...{ + coloring, + setColoring, + }} /> -- cgit v1.2.3 From 85b665b343d63096a3e62c210931040a44b07a1b Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" 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(-) (limited to 'components') 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={} > - {coloring === 'degree' ? 'Links' : 'Communities'} + {coloring.method === 'degree' ? 'Links' : 'Communities'} 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 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(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({ 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