Bugfix/tagging rerender (#66)

* Fix tag re-render bug Had to prop drill rather than update a context variable. * Improve analysis window performance
WardAnalytics · Feb 8, 2024 · 9dd5093 · 9dd5093
1 parent 2876abf
commit 9dd5093
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/firebase.json b/firebase.json
@@ -1,11 +1,7 @@
 {
   "hosting": {
     "public": "build",
-    "ignore": [
-      "firebase.json",
-      "**/.*",
-      "**/node_modules/**"
-    ],
+    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
       {
         "source": "**",
@@ -32,4 +28,4 @@
       "port": 5000
     }
   }
-}
+}
diff --git a/src/components/graph/Graph.tsx b/src/components/graph/Graph.tsx
@@ -98,7 +98,6 @@ interface GraphContextProps {
   getNodeCount: () => number;
   setShowTutorial: (show: boolean) => void;
   addNewAddressToCenter: (address: string) => void;
-  storedSetNodeCustomTags: null | ((tags: string[]) => void);
   storeSetNodeCustomTags: (setter: (tags: string[]) => void) => void;
   addMultipleDifferentPaths: (pathArgs: PathExpansionArgs[]) => void;
   focusedAddressData: AddressAnalysis | null;
@@ -692,7 +691,6 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     setShowTutorial,
     addNewAddressToCenter,
     addMultipleDifferentPaths,
-    storedSetNodeCustomTags,
     storeSetNodeCustomTags,
     focusedAddressData,
   };
@@ -704,6 +702,7 @@ const GraphProvided: FC<GraphProvidedProps> = ({
           <MemoedDraggableWindow
             analysisData={focusedAddressData}
             onExit={onAddressFocusOff}
+            setNodeCustomTags={storedSetNodeCustomTags}
           />
           <ReactFlow
             nodes={nodes}

diff --git a/src/components/graph/analysis_window/AnalysisWindow.tsx b/src/components/graph/analysis_window/AnalysisWindow.tsx
@@ -1,4 +1,4 @@
-import { FC, createContext, useRef, useState, useEffect } from "react";
+import { FC, createContext, memo, useRef, useState, useEffect } from "react";
 import clsx from "clsx";
 import {
   PresentationChartLineIcon,
@@ -39,23 +39,24 @@ export const AnalysisModes: AnalysisMode[] = [
   {
     name: AnalysisModeNames.Overview,
     icon: EyeIcon,
-    component: Overview,
+    component: memo(Overview),
   },
   {
     name: AnalysisModeNames.Transactions,
     icon: ArrowsRightLeftIcon,
-    component: Transactions,
+    component: memo(Transactions),
   },
   {
     name: AnalysisModeNames.Advanced,
     icon: PresentationChartLineIcon,
-    component: Advanced,
+    component: memo(Advanced),
   },
 ];
 
 interface DraggableWindowProps {
   analysisData: AddressAnalysis | null;
   onExit: () => void;
+  setNodeCustomTags: null | ((tags: string[]) => void);
 }
 
 /** The draggable window that appears when an address is clicked on.
@@ -74,6 +75,7 @@ interface DraggableWindowProps {
 const DraggableWindow: FC<DraggableWindowProps> = ({
   analysisData,
   onExit,
+  setNodeCustomTags,
 }) => {
   const [hasBeenHovered, setHasBeenHovered] = useState<boolean>(false);
   const [analysisMode, setAnalysisMode] = useState<AnalysisMode>(
@@ -159,6 +161,7 @@ const DraggableWindow: FC<DraggableWindowProps> = ({
                   onExit={onExit}
                   setAnalysisMode={setAnalysisMode}
                   analysisMode={analysisMode}
+                  setNodeCustomTags={setNodeCustomTags}
                 />
               </div>
               <div className="relative flex-auto overflow-hidden">

diff --git a/src/components/graph/analysis_window/header/Header.tsx b/src/components/graph/analysis_window/header/Header.tsx
@@ -139,9 +139,12 @@ function getCategoryRisk(category: string): number {
 
 // Label + Tag + Tag Input Wrapped Component
 
-const LabelsAndTags: FC = () => {
+interface LabelsAndTagsProps {
+  setNodeCustomTags: null | ((tags: string[]) => void);
+}
+
+const LabelsAndTags: FC<LabelsAndTagsProps> = ({ setNodeCustomTags }) => {
   const { analysisData, address } = useContext(AnalysisContext);
-  const { storedSetNodeCustomTags } = useContext(GraphContext);
 
   // Labels get displayed first in the flex-wrap
   const labels = analysisData!.labels;
@@ -198,8 +201,8 @@ const LabelsAndTags: FC = () => {
   );
 
   useEffect(() => {
-    if (storedSetNodeCustomTags && addressCustomTags !== null) {
-      storedSetNodeCustomTags(addressCustomTags);
+    if (setNodeCustomTags && addressCustomTags !== null) {
+      setNodeCustomTags(addressCustomTags);
     }
   }, [addressCustomTags]);
 
@@ -234,12 +237,14 @@ interface HeaderProps {
   onExit: () => void;
   setAnalysisMode: (mode: AnalysisMode) => void;
   analysisMode: AnalysisMode;
+  setNodeCustomTags: null | ((tags: string[]) => void);
 }
 
 const Header: FC<HeaderProps> = ({
   onExit,
   setAnalysisMode,
   analysisMode,
+  setNodeCustomTags,
 }: HeaderProps) => {
   // Extract analysisData from context
   const { addMultipleDifferentPaths } = useContext(GraphContext);
@@ -349,7 +354,7 @@ const Header: FC<HeaderProps> = ({
           </span>
           <span className="flex flex-row items-center justify-start gap-x-1.5">
             {/* List of labels using Badges shown underneath the address. */}
-            <LabelsAndTags />
+            <LabelsAndTags setNodeCustomTags={setNodeCustomTags} />
           </span>
         </div>
       </span>