manual open and close - fix layouts a bit

VEuPathDB · Sep 20, 2023 · 4addd3a · 4addd3a
1 parent 3f3b378
commit 4addd3a
Showing 1 changed file with 112 additions and 88 deletions.
diff --git a/packages/libs/eda/src/lib/map/analysis/EZTimeFilter.tsx b/packages/libs/eda/src/lib/map/analysis/EZTimeFilter.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useCallback, useState } from 'react';
-import { H6, Toggle } from '@veupathdb/coreui';
+import { ChevronRight, H6, Toggle } from '@veupathdb/coreui';
 import EzTimeFilterWidget, {
   EZTimeFilterDataProp,
 } from '@veupathdb/components/lib/components/plotControls/EzTimeFilter';
@@ -16,7 +16,7 @@ import { VariableDescriptor } from '../../core/types/variable';
 import { SubsettingClient } from '../../core/api';
 import Spinner from '@veupathdb/components/lib/components/Spinner';
 import { useFindEntityAndVariable, Filter } from '../../core';
-import { debounce, zip } from 'lodash';
+import { zip } from 'lodash';
 import { AppState } from './appState';
 import { timeSliderVariableConstraints } from './config/eztimeslider';
 import { useUITheme } from '@veupathdb/coreui/lib/components/theming';
@@ -51,12 +51,6 @@ export default function EZTimeFilter({
   const theme = useUITheme();
   const [minimized, setMinimized] = useState(true);
 
-  const autoMinimizeTime = 5000;
-  const debouncedMinimize = useMemo(
-    () => debounce(() => setMinimized(true), autoMinimizeTime),
-    []
-  );
-
   const { variable, active, selectedRange } = config;
   const variableMetadata = findEntityAndVariable(variable);
   const { siteName } = siteInformation;
@@ -144,98 +138,128 @@ export default function EZTimeFilter({
   // (easily) centering the variable picker requires two same-width divs either side
   const sideElementStyle = { width: '70px' };
 
+  const sliderHeight = minimized ? 55 : 75;
+
+  const background =
+    siteName === 'VectorBase'
+      ? '#F5FAF1D0'
+      : (theme?.palette.primary.hue[100] ?? mapNavigationBackgroundColor) +
+        'D0'; // add transparency
+
+  const borderRadius = '0px 0px 7px 7px'; // TO DO: add border radius and box shadow to the theme?
+  const boxShadow =
+    'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,rgba(0, 0, 0, 0.3) 0px 1px 3px -1px';
+
   // if no variable in a study is suitable to time slider, do not show time slider
   return variable != null && variableMetadata != null ? (
     <div
-      style={{
-        width: timeFilterWidth,
-        height: minimized ? 70 : 140,
-        background:
-          siteName === 'VectorBase'
-            ? '#F5FAF1D0'
-            : (theme?.palette.primary.hue[100] ??
-                mapNavigationBackgroundColor) + 'D0', // add transparency
-        borderRadius: '0px 0px 7px 7px', // TO DO: add border radius and box shadow to the theme?
-        boxShadow:
-          'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,rgba(0, 0, 0, 0.3) 0px 1px 3px -1px',
-      }}
-      onMouseMove={() => {
-        setMinimized(false);
-        debouncedMinimize();
-      }}
-      onWheel={() => {
-        setMinimized(false);
-        debouncedMinimize();
-      }}
+      style={
+        {
+          //  zIndex: 10, // still need to figure out z-index stuff
+        }
+      }
     >
-      {/* display data loading spinner while requesting data to the backend */}
-      {getTimeSliderData.pending && (
-        <div style={{ marginTop: '2em', height: 50, position: 'relative' }}>
-          <Spinner size={50} />
+      <div
+        style={{
+          width: timeFilterWidth,
+          height: sliderHeight + (minimized ? 25 : 45),
+          background,
+          borderRadius,
+          boxShadow,
+        }}
+      >
+        {/* container for the slider widget or spinner */}
+        <div style={{ height: sliderHeight, position: 'relative' }}>
+          {/* conditional loading for EzTimeFilter */}
+          {!getTimeSliderData.pending &&
+          getTimeSliderData.value != null &&
+          timeFilterData.length > 0 ? (
+            <EzTimeFilterWidget
+              data={timeFilterData}
+              selectedRange={selectedRange}
+              setSelectedRange={(selectedRange) =>
+                updateConfig({ ...config, selectedRange })
+              }
+              width={timeFilterWidth - 30}
+              height={sliderHeight}
+              // fill color of the selectedRange
+              brushColor={'lightpink'}
+              brushOpacity={0.4}
+              // axis tick and tick label color
+              barColor={!active ? '#aaa' : '#000'}
+              axisColor={!active ? '#888' : '#000'}
+              // disable user-interaction
+              disabled={!active}
+            />
+          ) : (
+            <Spinner size={25} />
+          )}
         </div>
-      )}
-      {/* conditional loading for EzTimeFilter */}
-      {!getTimeSliderData.pending &&
-        getTimeSliderData.value != null &&
-        timeFilterData.length > 0 && (
-          <EzTimeFilterWidget
-            data={timeFilterData}
-            selectedRange={selectedRange}
-            setSelectedRange={(selectedRange) =>
-              updateConfig({ ...config, selectedRange })
-            }
-            width={timeFilterWidth - 30}
-            height={minimized ? 60 : 75}
-            // fill color of the selectedRange
-            brushColor={'lightpink'}
-            brushOpacity={0.4}
-            // axis tick and tick label color
-            barColor={!active ? '#aaa' : '#000'}
-            axisColor={!active ? '#888' : '#000'}
-            // disable user-interaction
-            disabled={!active}
-          />
-        )}
-      {!minimized && (
         <div
           style={{
             display: 'flex',
-            padding: '10px 10px 0px 10px',
-            justifyContent: 'space-between',
+            padding: '5px 10px 0px 10px',
+            justifyContent: minimized ? 'center' : 'space-between',
             alignItems: 'center',
           }}
         >
-          <div style={sideElementStyle}></div>
-          <div style={{}}>
-            <InputVariables
-              inputs={[
-                {
-                  name: 'overlayVariable',
-                  label: '',
-                  noTitle: true,
-                  isNonNullable: true,
-                },
-              ]}
-              entities={entities}
-              selectedVariables={{
-                overlayVariable: variable,
-              }}
-              onChange={handleInputVariablesOnChange}
-              starredVariables={starredVariables}
-              toggleStarredVariable={toggleStarredVariable}
-              constraints={timeSliderVariableConstraints}
-            />
-          </div>
-          <div style={sideElementStyle}>
-            <Toggle
-              label={active ? 'On' : 'Off'}
-              labelPosition="left"
-              value={!!active}
-              onChange={(active) => updateConfig({ ...config, active })}
-            />
-          </div>
+          {minimized /* just show the variable name as text */ ? (
+            <div style={{}}>{variableMetadata.variable.displayName}</div>
+          ) : (
+            <>
+              <div style={sideElementStyle}></div>
+              <div style={{}}>
+                <InputVariables
+                  inputs={[
+                    {
+                      name: 'overlayVariable',
+                      label: '',
+                      noTitle: true,
+                      isNonNullable: true,
+                    },
+                  ]}
+                  entities={entities}
+                  selectedVariables={{
+                    overlayVariable: variable,
+                  }}
+                  onChange={handleInputVariablesOnChange}
+                  starredVariables={starredVariables}
+                  toggleStarredVariable={toggleStarredVariable}
+                  constraints={timeSliderVariableConstraints}
+                />
+              </div>
+              <div style={sideElementStyle}>
+                <Toggle
+                  label={active ? 'On' : 'Off'}
+                  labelPosition="left"
+                  value={!!active}
+                  onChange={(active) => updateConfig({ ...config, active })}
+                />
+              </div>
+            </>
+          )}
         </div>
-      )}
+      </div>
+
+      <div
+        onClick={() => setMinimized(!minimized)}
+        style={{
+          margin: 'auto',
+          fontSize: 18, // controls the SVG chevron size
+          width: 50,
+          height: 20,
+          textAlign: 'center',
+          background,
+          borderRadius,
+          boxShadow,
+        }}
+      >
+        <ChevronRight
+          transform={
+            minimized ? 'matrix(0,1,-1,0,0,0)' : 'matrix(0,-1,1,0,0,0)'
+          }
+        />
+      </div>
     </div>
   ) : null;
 }