From 5b4cb1a04d77cda5d795dbc8525161a10b1e4cd9 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Fri, 14 Jun 2024 12:05:31 +0200
Subject: [PATCH] fix(vis): sync unloading and loading of vis components

---
 .../lib/vis/components/VisualizationPanel.tsx | 42 +++++++++++--------
 .../config/VisualizationSettings.tsx          | 11 +++--
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/libs/shared/lib/vis/components/VisualizationPanel.tsx b/libs/shared/lib/vis/components/VisualizationPanel.tsx
index bbe2ffaac..2e2dd74b7 100644
--- a/libs/shared/lib/vis/components/VisualizationPanel.tsx
+++ b/libs/shared/lib/vis/components/VisualizationPanel.tsx
@@ -42,28 +42,33 @@ export const VisualizationPanel = ({ fullSize }: { fullSize: () => void }) => {
   const graphQueryResult = useGraphQueryResult();
   const dispatch = useAppDispatch();
   const { activeVisualizationIndex, openVisualizationArray } = useVisualization();
-  const activeVisualization = useActiveVisualization();
+  // const activeVisualization = useActiveVisualization();
   const ml = useML();
   const schema = useSchemaGraph();
   const graphMetadata = useGraphQueryResultMeta();
-  const [viz, setViz] = useState<{ component: React.FC<VisualizationPropTypes> } | undefined>(undefined);
+  const [viz, setViz] = useState<{ component: React.FC<VisualizationPropTypes>; id: string } | undefined>(undefined);
+  // const activeVisualization = state.visualize.activeVisualizationIndex !== -1
+  // ? state.visualize.openVisualizationArray?.[state.visualize.activeVisualizationIndex]
+  // : undefined
 
   useEffect(() => {
     loadVisualization();
   }, [activeVisualizationIndex]);
 
   const loadVisualization = async (add = false) => {
-    if (!activeVisualization) {
+    if (activeVisualizationIndex === -1) {
       setViz(undefined);
       return;
     }
+
+    const activeVisualization = openVisualizationArray[activeVisualizationIndex];
     const componentModule = await Visualizations[activeVisualization.id]();
     const component = componentModule.default;
 
     if (add) {
       dispatch(addVisualization(component.settings));
     }
-    setViz({ component: component.component });
+    setViz({ component: component.component, id: activeVisualization.id });
   };
 
   const handleSelect = (selection?: { nodes?: Node[]; edges?: Edge[] }) => {
@@ -94,19 +99,22 @@ export const VisualizationPanel = ({ fullSize }: { fullSize: () => void }) => {
         ) : (
           <div className="w-full h-full flex">
             <Suspense fallback={<div>Loading...</div>}>
-              {!!viz && !!activeVisualization && (
-                <viz.component
-                  data={graphQueryResult}
-                  schema={schema}
-                  ml={ml}
-                  settings={activeVisualization}
-                  dispatch={dispatch}
-                  handleSelect={handleSelect}
-                  graphMetadata={graphMetadata}
-                  updateSettings={updateSettings}
-                  handleHover={() => {}}
-                />
-              )}
+              {!!viz &&
+                activeVisualizationIndex !== -1 &&
+                openVisualizationArray?.[activeVisualizationIndex] &&
+                viz.id === openVisualizationArray[activeVisualizationIndex].id && (
+                  <viz.component
+                    data={graphQueryResult}
+                    schema={schema}
+                    ml={ml}
+                    settings={openVisualizationArray[activeVisualizationIndex]}
+                    dispatch={dispatch}
+                    handleSelect={handleSelect}
+                    graphMetadata={graphMetadata}
+                    updateSettings={updateSettings}
+                    handleHover={() => {}}
+                  />
+                )}
             </Suspense>
           </div>
         )}
diff --git a/libs/shared/lib/vis/components/config/VisualizationSettings.tsx b/libs/shared/lib/vis/components/config/VisualizationSettings.tsx
index 9fdb7269d..ddfe63d15 100644
--- a/libs/shared/lib/vis/components/config/VisualizationSettings.tsx
+++ b/libs/shared/lib/vis/components/config/VisualizationSettings.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
 import { Delete } from '@mui/icons-material';
 import {
   Button,
@@ -25,7 +25,10 @@ export function VisualizationSettings({}: Props) {
   // const manager = VisualizationManager();
   // const activeVisualization = useActiveVisualization();
   const { activeVisualizationIndex, openVisualizationArray } = useVisualization();
-  const activeVisualization = openVisualizationArray[activeVisualizationIndex];
+  const activeVisualization = useMemo(
+    () => openVisualizationArray[activeVisualizationIndex],
+    [activeVisualizationIndex, openVisualizationArray],
+  );
   const graphMetadata = useGraphQueryResultMeta();
 
   const dispatch = useAppDispatch();
@@ -34,6 +37,7 @@ export function VisualizationSettings({}: Props) {
     | undefined
     | {
         component: React.FC<VisualizationSettingsPropTypes>;
+        id: string;
       }
   >(undefined);
 
@@ -52,6 +56,7 @@ export function VisualizationSettings({}: Props) {
 
     setComponent({
       component: component.settingsComponent,
+      id: vis.id,
     });
   };
 
@@ -101,7 +106,7 @@ export function VisualizationSettings({}: Props) {
           <>
             <SettingsHeader name="Visualization Settings" />
             <Suspense fallback={<div>Loading...</div>}>
-              {component && component.component && activeVisualization && (
+              {component && component.component && activeVisualization && component.id === activeVisualization.id && (
                 <component.component settings={activeVisualization} graphMetadata={graphMetadata} updateSettings={updateSettings} />
               )}
             </Suspense>
-- 
GitLab