Merge pull request #1627 from merico-dev/fix-destroy-created-viz-componest-after-model-recreated

fix(dashboard): destroy created viz components after model recreation

Author: GerilLeto

dashboard/src/components/plugins/service/use-top-level-services.ts

@@ -3,11 +3,14 @@ import { IPluginContextProps, tokens } from '~/components/plugins';
 import { IServiceLocator } from '~/components/plugins/service/service-locator';
 
 export function useTopLevelServices(pluginContext: IPluginContextProps) {
-  return React.useCallback((services: IServiceLocator) => {
-    return services
-      .provideValue(tokens.pluginManager, pluginContext.pluginManager)
-      .provideValue(tokens.vizManager, pluginContext.vizManager)
-      .provideValue(tokens.panelAddonManager, pluginContext.panelAddonManager)
-      .provideValue(tokens.colorManager, pluginContext.colorManager);
-  }, []);
+  return React.useCallback(
+    (services: IServiceLocator) => {
+      return services
+        .provideValue(tokens.pluginManager, pluginContext.pluginManager)
+        .provideValue(tokens.vizManager, pluginContext.vizManager)
+        .provideValue(tokens.panelAddonManager, pluginContext.panelAddonManager)
+        .provideValue(tokens.colorManager, pluginContext.colorManager);
+    },
+    [pluginContext],
+  );
 }

dashboard/src/dashboard-render/dashboard-render.tsx

@@ -76,7 +76,7 @@ const _ReadOnlyDashboard = ({
         filterValues ?? {},
         activeTab ?? null,
       ),
-    [dashboard, content, activeTab],
+    [dashboard, content],
   );
   useInteractionOperationHacks(model.content, false);
 
@@ -113,7 +113,7 @@ const _ReadOnlyDashboard = ({
     }
   }, [activeTab, model.content.views.setFirstVisibleTabsViewActiveTab]);
 
-  const pluginContext = useCreation(createPluginContext, []);
+  const pluginContext = useCreation(createPluginContext, [model]);
   const configureServices = useTopLevelServices(pluginContext);
 
   useWhyDidYouUpdate('@devtable/dashboard render', {