From b3c1b737e7a52bef96e7170c174cbbeb4d7f623d Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Thu, 22 Jul 2021 21:43:08 +0200
Subject: fix moving around when hovering in local mode

---
 pages/index.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

(limited to 'pages/index.tsx')

diff --git a/pages/index.tsx b/pages/index.tsx
index 06c7dc2..e5679f2 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')
 
@@ -489,7 +489,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 +609,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 () => {
-- 
cgit v1.2.3


From cf5ed86be6ce54e6af697fb0a929c4dc8a40f193 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Thu, 22 Jul 2021 23:06:33 +0200
Subject: fixed the label opacity

---
 pages/index.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

(limited to 'pages/index.tsx')

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
-- 
cgit v1.2.3