diff options
| -rw-r--r-- | pages/index.tsx | 20 |
1 files changed, 12 insertions, 8 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index e5679f2..3200bb9 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -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,13 @@ export function GraphPage() { threeDim, }} onClose={() => { - setShowTweeks(false) + setShowTweaks(false) }} /> + ) : ( + <Box position="absolute" zIndex="overlay" marginTop="2%" marginLeft="2%"> + <IconButton icon={<SettingsIcon />} onClick={() => setShowTweaks(true)} /> + </Box> )} <Graph nodeById={nodeByIdRef.current!} @@ -318,7 +322,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"> @@ -740,8 +744,8 @@ export const Graph = function (props: GraphProps) { // draw label background ctx.fillStyle = 'rgba(20, 20, 20, ' + - (highlightedNodes.length === 0 - ? 0.5 * fadeFactor + (Object.keys(highlightedNodes).length === 0 + ? fadeFactor : highlightedNodes[node.id!] ? 0.5 : 0.15 * fadeFactor) + @@ -757,7 +761,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 |