refactored timeSliderConfig

VEuPathDB · Sep 9, 2023 · 8b4b84e · 8b4b84e
1 parent 8b4c75f
commit 8b4b84e
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 82 deletions.
diff --git a/packages/libs/eda/src/lib/map/analysis/EZTimeFilter.tsx b/packages/libs/eda/src/lib/map/analysis/EZTimeFilter.tsx
@@ -29,12 +29,8 @@ interface Props {
   starredVariables: VariableDescriptor[];
   toggleStarredVariable: (targetVariableId: VariableDescriptor) => void;
 
-  variable: AppState['timeSliderVariable'];
-  setVariable: (newVariable: AppState['timeSliderVariable']) => void;
-  selectedRange: AppState['timeSliderSelectedRange'];
-  setSelectedRange: (newRange: AppState['timeSliderSelectedRange']) => void;
-  active: AppState['timeSliderActive'];
-  setActive: (newState: AppState['timeSliderActive']) => void;
+  config: NonNullable<AppState['timeSliderConfig']>;
+  updateConfig: (newConfig: NonNullable<AppState['timeSliderConfig']>) => void;
 }
 
 export default function EZTimeFilter({
@@ -44,14 +40,12 @@ export default function EZTimeFilter({
   filters,
   starredVariables,
   toggleStarredVariable,
-  variable,
-  setVariable,
-  selectedRange,
-  setSelectedRange,
-  active, // to do - add a toggle to enable/disable
-  setActive, // the small filter and grey everything out
+  config,
+  updateConfig,
 }: Props) {
   const findEntityAndVariable = useFindEntityAndVariable();
+
+  const { variable, active, selectedRange } = config;
   const variableMetadata = findEntityAndVariable(variable);
 
   // data request to distribution for time slider
@@ -127,9 +121,11 @@ export default function EZTimeFilter({
       return;
     }
 
-    setVariable(selection.overlayVariable);
-    setSelectedRange(undefined);
-    setActive(true);
+    updateConfig({
+      variable: selection.overlayVariable,
+      selectedRange: undefined,
+      active: true,
+    });
   }
 
   // if no variable in a study is suitable to time slider, do not show time slider
@@ -193,7 +189,7 @@ export default function EZTimeFilter({
             label={active ? 'On' : 'Off'}
             labelPosition="left"
             value={!!active}
-            onChange={setActive}
+            onChange={(active) => updateConfig({ ...config, active })}
           />
         </div>
       </div>
@@ -211,7 +207,9 @@ export default function EZTimeFilter({
             <EzTimeFilter
               data={timeFilterData}
               selectedRange={selectedRange}
-              setSelectedRange={setSelectedRange}
+              setSelectedRange={(selectedRange) =>
+                updateConfig({ ...config, selectedRange })
+              }
               width={timeFilterWidth - 30}
               height={100}
               // line color of the selectedRange

diff --git a/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx b/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx
@@ -254,9 +254,7 @@ function MapAnalysisImpl(props: ImplProps) {
     setActiveMarkerConfigurationType,
     setMarkerConfigurations,
     geoConfigs,
-    setTimeSliderVariable,
-    setTimeSliderSelectedRange,
-    setTimeSliderActive,
+    setTimeSliderConfig,
   } = props;
   const { activeMarkerConfigurationType, markerConfigurations } = appState;
   const filters = analysisState.analysis?.descriptor.subset.descriptor;
@@ -281,9 +279,6 @@ function MapAnalysisImpl(props: ImplProps) {
   const { variable: overlayVariable, entity: overlayEntity } =
     findEntityAndVariable(activeMarkerConfiguration?.selectedVariable) ?? {};
 
-  const { variable: timeVariableMetadata } =
-    findEntityAndVariable(appState.timeSliderVariable) ?? {};
-
   const outputEntity = useMemo(() => {
     if (geoConfig == null || geoConfig.entity.id == null) return;
 
@@ -307,35 +302,33 @@ function MapAnalysisImpl(props: ImplProps) {
     [markerConfigurations, setMarkerConfigurations]
   );
 
-  const timeFilter: NumberRangeFilter | DateRangeFilter | undefined = useMemo(
-    () =>
-      timeVariableMetadata &&
-      appState.timeSliderActive &&
-      appState.timeSliderVariable &&
-      appState.timeSliderSelectedRange
+  const timeFilter: NumberRangeFilter | DateRangeFilter | undefined =
+    useMemo(() => {
+      if (appState.timeSliderConfig == null) return undefined;
+
+      const { active, variable, selectedRange } = appState.timeSliderConfig;
+
+      const { variable: timeVariableMetadata } =
+        findEntityAndVariable(variable) ?? {};
+
+      return active && variable && selectedRange
         ? DateVariable.is(timeVariableMetadata)
           ? {
               type: 'dateRange',
-              ...appState.timeSliderVariable,
-              min: appState.timeSliderSelectedRange.start + 'T00:00:00Z',
-              max: appState.timeSliderSelectedRange.end + 'T00:00:00Z',
+              ...variable,
+              min: selectedRange.start + 'T00:00:00Z',
+              max: selectedRange.end + 'T00:00:00Z',
             }
           : NumberVariable.is(timeVariableMetadata)
           ? {
               type: 'numberRange', // this is temporary - I think we should NOT handle non-date variables when we roll this out
-              ...appState.timeSliderVariable, // TO DO: remove number variable handling
-              min: Number(appState.timeSliderSelectedRange.start.split(/-/)[0]), // just take the year number
-              max: Number(appState.timeSliderSelectedRange.end.split(/-/)[0]), // from the YYYY-MM-DD returned from the widget
+              ...variable, // TO DO: remove number variable handling
+              min: Number(selectedRange.start.split(/-/)[0]), // just take the year number
+              max: Number(selectedRange.end.split(/-/)[0]), // from the YYYY-MM-DD returned from the widget
             }
           : undefined
-        : undefined,
-    [
-      timeVariableMetadata,
-      appState.timeSliderActive,
-      appState.timeSliderVariable,
-      appState.timeSliderSelectedRange,
-    ]
-  );
+        : undefined;
+    }, [appState.timeSliderConfig, findEntityAndVariable]);
 
   const viewportFilters = useMemo(
     () =>
@@ -1251,23 +1244,23 @@ function MapAnalysisImpl(props: ImplProps) {
                   overlayActive={overlayVariable != null}
                 >
                   {/* child elements will be distributed across, 'hanging' below the header */}
-                  {/*  Time slider component */}
-                  <EZTimeFilter
-                    studyId={studyId}
-                    entities={studyEntities}
-                    subsettingClient={subsettingClient}
-                    filters={filters}
-                    starredVariables={
-                      analysisState.analysis?.descriptor.starredVariables ?? []
-                    }
-                    toggleStarredVariable={toggleStarredVariable}
-                    variable={appState.timeSliderVariable}
-                    setVariable={setTimeSliderVariable}
-                    selectedRange={appState.timeSliderSelectedRange}
-                    setSelectedRange={setTimeSliderSelectedRange}
-                    active={appState.timeSliderActive}
-                    setActive={setTimeSliderActive}
-                  />
+                  {/*  Time slider component - only if prerequisite variable is available */}
+                  {appState.timeSliderConfig &&
+                    appState.timeSliderConfig.variable && (
+                      <EZTimeFilter
+                        studyId={studyId}
+                        entities={studyEntities}
+                        subsettingClient={subsettingClient}
+                        filters={filters}
+                        starredVariables={
+                          analysisState.analysis?.descriptor.starredVariables ??
+                          []
+                        }
+                        toggleStarredVariable={toggleStarredVariable}
+                        config={appState.timeSliderConfig}
+                        updateConfig={setTimeSliderConfig}
+                      />
+                    )}
                 </MapHeader>
                 <div
                   style={{

diff --git a/packages/libs/eda/src/lib/map/analysis/appState.ts b/packages/libs/eda/src/lib/map/analysis/appState.ts
@@ -99,12 +99,17 @@ export const AppState = t.intersection([
       variableId: t.string,
     }),
     isSubsetPanelOpen: t.boolean,
-    timeSliderVariable: VariableDescriptor,
-    timeSliderSelectedRange: t.type({
-      start: t.string,
-      end: t.string,
+    timeSliderConfig: t.type({
+      variable: t.union([VariableDescriptor, t.undefined]),
+      selectedRange: t.union([
+        t.type({
+          start: t.string,
+          end: t.string,
+        }),
+        t.undefined,
+      ]),
+      active: t.boolean,
     }),
-    timeSliderActive: t.boolean,
   }),
 ]);
 
@@ -141,8 +146,11 @@ export function useAppState(uiStateKey: string, analysisState: AnalysisState) {
       viewport: defaultViewport,
       mouseMode: 'default',
       activeMarkerConfigurationType: 'pie',
-      timeSliderVariable: defaultTimeVariable,
-      timeSliderActive: true,
+      timeSliderConfig: {
+        variable: defaultTimeVariable,
+        active: true,
+        selectedRange: undefined,
+      },
       markerConfigurations: [
         {
           type: 'pie',
@@ -193,15 +201,15 @@ export function useAppState(uiStateKey: string, analysisState: AnalysisState) {
               )
           );
 
-        const timeVariableIsMissing = appState.timeSliderVariable == null;
+        const timeSliderConfigIsMissing = appState.timeSliderConfig == null;
 
-        if (missingMarkerConfigs.length > 0 || timeVariableIsMissing) {
+        if (missingMarkerConfigs.length > 0 || timeSliderConfigIsMissing) {
           setVariableUISettings((prev) => ({
             ...prev,
             [uiStateKey]: {
               ...appState,
-              ...(timeVariableIsMissing
-                ? { timeSliderVariable: defaultTimeVariable }
+              ...(timeSliderConfigIsMissing
+                ? { timeSliderConfig: defaultAppState.timeSliderConfig }
                 : {}),
               markerConfigurations: [
                 ...appState.markerConfigurations,
@@ -213,14 +221,7 @@ export function useAppState(uiStateKey: string, analysisState: AnalysisState) {
       }
       appStateCheckedRef.current = true;
     }
-  }, [
-    analysis,
-    appState,
-    setVariableUISettings,
-    uiStateKey,
-    defaultAppState,
-    defaultTimeVariable,
-  ]);
+  }, [analysis, appState, setVariableUISettings, uiStateKey, defaultAppState]);
 
   function useSetter<T extends keyof AppState>(key: T) {
     return useCallback(
@@ -254,8 +255,6 @@ export function useAppState(uiStateKey: string, analysisState: AnalysisState) {
     setIsSubsetPanelOpen: useSetter('isSubsetPanelOpen'),
     setSubsetVariableAndEntity: useSetter('subsetVariableAndEntity'),
     setViewport: useSetter('viewport'),
-    setTimeSliderVariable: useSetter('timeSliderVariable'),
-    setTimeSliderSelectedRange: useSetter('timeSliderSelectedRange'),
-    setTimeSliderActive: useSetter('timeSliderActive'),
+    setTimeSliderConfig: useSetter('timeSliderConfig'),
   };
 }