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