diff options
| -rw-r--r-- | pages/index.tsx | 44 |
1 files changed, 29 insertions, 15 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 8bc3157..6221750 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import React, { ComponentPropsWithoutRef, useEffect, useRef, useState } from 'react' +import React, { ComponentPropsWithoutRef, useEffect, useRef, useState, useMemo } from 'react' import { usePersistantState } from '../util/persistant-state' const d3promise = import('d3-force-3d') @@ -46,7 +46,7 @@ import { Flex, } from '@chakra-ui/react' -import { InfoOutlineIcon, RepeatClockIcon, ChevronDownIcon } from '@chakra-ui/icons' +import { InfoOutlineIcon, RepeatClockIcon, ChevronDownIcon, SettingsIcon } from '@chakra-ui/icons' // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 @@ -182,7 +182,7 @@ export function GraphPage() { }, []) const [threeDim, setThreeDim] = useState(false) - const [showTweeks, setShowTweeks] = useState(true) + const [showTweaks, setShowTweaks] = useState(true) if (!graphData) { return null @@ -190,7 +190,7 @@ export function GraphPage() { return ( <div> - {showTweeks && ( + {showTweaks ? ( <Tweaks {...{ physics, @@ -198,9 +198,17 @@ export function GraphPage() { threeDim, }} onClose={() => { - setShowTweeks(false) + setShowTweaks(false) }} /> + ) : ( + <Box position="absolute" zIndex="overlay" marginTop="2%" marginLeft="2%"> + <IconButton + aria-label="Settings" + icon={<SettingsIcon />} + onClick={() => setShowTweaks(true)} + /> + </Box> )} <Graph nodeById={nodeByIdRef.current!} @@ -318,7 +326,7 @@ export const Tweaks = function (props: TweakProps) { </Tooltip> <CloseButton onClick={onClose} /> </Box> - <Accordion allowMultiple defaultIndex={[0]} allowToggle> + <Accordion allowMultiple allowToggle> <AccordionItem> <AccordionButton display="flex" justifyContent="space-between"> <Box display="flex"> @@ -489,7 +497,10 @@ export const Tweaks = function (props: TweakProps) { onChange={(value) => setPhysics({ ...physics, highlightNodeSize: value })} /> <Flex justifyContent="space-between"> - <Text></Text> + <Text> Highlight node color </Text> + </Flex> + <Flex justifyContent="space-between"> + <Text> Highlight link color </Text> </Flex> </EnableSection> </VStack> @@ -606,13 +617,16 @@ export const Graph = function (props: GraphProps) { return scopedNodeIds.includes(sourceId as string) && scopedNodeIds.includes(targetId as string) }) - const scopedGraphData = - scope.nodeIds.length === 0 - ? graphData - : { - nodes: scopedNodes, - links: scopedLinks, - } + const scopedGraphData = useMemo( + () => + scope.nodeIds.length === 0 + ? graphData + : { + nodes: scopedNodes, + links: scopedLinks, + }, + [scope], + ) useEffect(() => { ;(async () => { @@ -751,7 +765,7 @@ export const Graph = function (props: GraphProps) { ctx.textBaseline = 'middle' ctx.fillStyle = 'rgb(255, 255, 255, ' + - (highlightedNodes.length === 0 + (Object.keys(highlightedNodes).length === 0 ? fadeFactor : highlightedNodes[node.id!] ? 1 |