fix: hidden and highlighted datastreams persist correctly

awslabs · Jan 31, 2024 · 5a85bb7 · 5a85bb7
1 parent 7cc590d
commit 5a85bb7
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 11 deletions.
diff --git a/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx b/packages/dashboard/src/customization/widgets/lineScatterChart/component.tsx
@@ -213,6 +213,7 @@ const LineScatterChartWidgetComponent: React.FC<LineScatterChartWidget> = (
   return (
     <WidgetTile widget={widget} removeable title={title}>
       <Chart
+        id={widget.id}
         queries={queries}
         viewport={viewport}
         gestures={readOnly}

diff --git a/packages/react-components/src/components/chart/store/context.tsx b/packages/react-components/src/components/chart/store/context.tsx
@@ -10,7 +10,7 @@ import useDataStore from '../../../store';
 // Recommended usage from zustand https://docs.pmnd.rs/zustand/previous-versions/zustand-v3-create-context
 export const ChartStoreContext = createContext<
   ReturnType<typeof createChartStore>
->(createChartStore());
+>(createChartStore({ chartId: 'contextStore' }));
 
 export const ChartStoreProvider = ({
   id,

diff --git a/packages/react-components/src/components/chart/store/store.ts b/packages/react-components/src/components/chart/store/store.ts
@@ -3,16 +3,21 @@ import { devtools, persist } from 'zustand/middleware';
 import { createMultiYAxisSlice, MultiYAxisState } from './multiYAxis';
 import { createDataStreamsSlice, DataStreamsState } from './contextDataStreams';
 
-export type StateData = DataStreamsState & MultiYAxisState;
-export const createChartStore = () =>
+export type StateData = DataStreamsState &
+  MultiYAxisState & { chartId: string };
+
+export const createChartStore = (
+  initProps: Partial<StateData> & Required<Pick<Partial<StateData>, 'chartId'>>
+) =>
   create<StateData>()(
     devtools(
       persist(
         (...args) => ({
+          ...initProps,
           ...createMultiYAxisSlice(...args),
           ...createDataStreamsSlice(...args),
         }),
-        { name: 'chartStore' }
+        { name: `chart-store-${initProps?.chartId}` }
       )
     )
   );
diff --git a/packages/react-components/src/store/chartStoreSlice.ts b/packages/react-components/src/store/chartStoreSlice.ts
@@ -13,7 +13,7 @@ export interface ChartStoreState extends ChartStoreData {
 export const createChartStoresSlice: StateCreator<ChartStoreState> = (set) => ({
   chartStores: {},
   addChart: (id) => {
-    const store = createChartStore();
+    const store = createChartStore({ chartId: id }); //repopulate chart store from local storage
     set((state) => ({
       chartStores: {
         ...state.chartStores,

diff --git a/packages/react-components/src/store/index.ts b/packages/react-components/src/store/index.ts
@@ -1,16 +1,23 @@
 import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
+import { devtools, persist } from 'zustand/middleware';
 import { createTrendCursorsSlice, TrendCursorsState } from './trendCusorSlice';
 import { ConfigState, createConfigSlice, Flags } from './config';
 import { ChartStoreState, createChartStoresSlice } from './chartStoreSlice';
 
 export type StateData = TrendCursorsState & ConfigState & ChartStoreState;
 const useDataStore = create<StateData>()(
-  devtools((...args) => ({
-    ...createTrendCursorsSlice(...args),
-    ...createConfigSlice(...args),
-    ...createChartStoresSlice(...args),
-  }))
+  devtools(
+    persist(
+      (...args) => ({
+        ...createTrendCursorsSlice(...args),
+        ...createConfigSlice(...args),
+        ...createChartStoresSlice(...args),
+      }),
+      {
+        name: 'global-store',
+      }
+    )
+  )
 );
 
 export default useDataStore;