refactor: Fixed unit tests, removed dependence on BackdropSlice from DatasetSlice

Author: ShrimpCryptid

src/components/Tabs/SettingsTab.tsx

@@ -83,7 +83,7 @@ export default function SettingsTab(): ReactElement {
             <SelectionDropdown
               selected={selectedBackdropKey}
               items={backdropOptions}
-              onChange={(key) => dataset && setBackdropKey(dataset, key)}
+              onChange={(key) => dataset && setBackdropKey(key)}
               disabled={isBackdropOptionsDisabled}
             />
           </SettingsItem>

src/state/ViewerState.ts

@@ -3,7 +3,7 @@ import { StateCreator } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 
 import { Spread } from "../colorizer/utils/type_utils";
-import { BackdropSlice, createBackdropSlice } from "./slices/backdrop_slice";
+import { addBackdropDerivedStateSubscribers, BackdropSlice, createBackdropSlice } from "./slices/backdrop_slice";
 import { CollectionSlice, createCollectionSlice } from "./slices/collection_slice";
 import { addColorRampDerivedStateSubscribers, ColorRampSlice, createColorRampSlice } from "./slices/color_ramp_slice";
 import { ConfigSlice, createConfigSlice } from "./slices/config_slice";
@@ -91,6 +91,7 @@ export const useViewerStateStore: SubscribableStore<ViewerState> = create<Viewer
   subscribeWithSelector(viewerStateStoreCreator)
 );
 
+addBackdropDerivedStateSubscribers(useViewerStateStore);
 addColorRampDerivedStateSubscribers(useViewerStateStore);
 addScatterPlotSliceDerivedStateSubscribers(useViewerStateStore);
 addThresholdDerivedStateSubscribers(useViewerStateStore);

src/state/slices/backdrop_slice.ts

@@ -75,6 +75,6 @@ export const addBackdropDerivedStateSubscribers = (store: SubscribableStore<Back
   // Hide backdrop when backdrop key is null
   store.subscribe(
     (state) => state.backdropKey,
-    (backdropKey) => store.setState({ backdropVisible: backdropKey !== null })
+    (backdropKey) => store.setState({ backdropVisible: store.getState().backdropVisible && backdropKey !== null })
   );
 };

src/state/slices/dataset_slice.ts

@@ -1,7 +1,6 @@
 import { StateCreator } from "zustand";
 
 import { Track } from "../../colorizer";
-import { BackdropSlice } from "./backdrop_slice";
 import { CollectionSlice } from "./collection_slice";
 
 import Dataset from "../../colorizer/Dataset";
@@ -41,10 +40,7 @@ type DatasetSliceActions = {
 
 export type DatasetSlice = DatasetSliceState & DatasetSliceActions;
 
-export const createDatasetSlice: StateCreator<CollectionSlice & DatasetSlice & BackdropSlice, [], [], DatasetSlice> = (
-  set,
-  get
-) => ({
+export const createDatasetSlice: StateCreator<CollectionSlice & DatasetSlice, [], [], DatasetSlice> = (set, get) => ({
   datasetKey: null,
   dataset: null,
   featureKey: null,
@@ -104,12 +100,10 @@ export const createDatasetSlice: StateCreator<CollectionSlice & DatasetSlice & B
     if (backdropKey === null || !dataset.hasBackdrop(backdropKey)) {
       backdropKey = dataset.getDefaultBackdropKey();
     }
-    const backdropVisible = get().backdropVisible && backdropKey !== null;
 
     // TODO: Dispose of old dataset?
-    set({ datasetKey: key, dataset, track: null, featureKey, backdropKey, backdropVisible });
+    set({ datasetKey: key, dataset, track: null, featureKey, backdropKey });
   },
 
-  clearDataset: () =>
-    set({ datasetKey: null, dataset: null, track: null, featureKey: null, backdropKey: null, backdropVisible: false }),
+  clearDataset: () => set({ datasetKey: null, dataset: null, track: null, featureKey: null, backdropKey: null }),
 });

tests/state/ViewerState/backdrop_slice.test.ts

@@ -10,7 +10,7 @@ import {
   BACKDROP_SATURATION_MIN,
 } from "../../../src/constants";
 import { ANY_ERROR } from "../../test_utils";
-import { MOCK_DATASET, MOCK_DATASET_WITHOUT_BACKDROP, MockBackdropKeys } from "./constants";
+import { MOCK_DATASET, MockBackdropKeys } from "./constants";
 import { setDatasetAsync } from "./utils";
 
 import { useViewerStateStore } from "../../../src/state/ViewerState";
@@ -99,7 +99,9 @@ describe("useViewerStateStore: BackdropSlice", () => {
     });
     expect(result.current.backdropVisible).toBe(true);
 
-    await setDatasetAsync(result, MOCK_DATASET_WITHOUT_BACKDROP);
+    act(() => {
+      useViewerStateStore.setState({ backdropKey: null });
+    });
     expect(result.current.backdropVisible).toBe(false);
   });
 });