test date input for time slider and adjust input element

packages/libs/components/src/components/plotControls/AxisRangeControl.tsx

@@ -24,6 +24,8 @@ export interface AxisRangeControlProps
   logScale?: boolean;
   /** specify step for increment/decrement buttons in MUI number inputs; MUI's default is 1 */
   step?: number;
+  /** specify the height of the input element */
+  inputHeight?: number;
 }
 
 export default function AxisRangeControl({
@@ -36,6 +38,7 @@ export default function AxisRangeControl({
   disabled = false,
   logScale = false,
   step = undefined,
+  inputHeight,
 }: AxisRangeControlProps) {
   const validator = useCallback(
     (
@@ -79,6 +82,7 @@ export default function AxisRangeControl({
         validator={validator}
         // add disabled prop to disable input fields
         disabled={disabled}
+        inputHeight={inputHeight}
       />
     ) : (
       <NumberRangeInput
@@ -91,6 +95,7 @@ export default function AxisRangeControl({
         // add disabled prop to disable input fields
         disabled={disabled}
         step={step}
+        inputHeight={inputHeight}
       />
     )
   ) : null;

packages/libs/components/src/components/plotControls/TimeSlider.tsx

@@ -91,46 +91,6 @@ function TimeSlider(props: TimeSliderProps) {
   const getXData = (d: TimeSliderDataProp) => new Date(d.x);
   const getYData = (d: TimeSliderDataProp) => d.y;
 
-  const onBrushChange = useMemo(
-    () =>
-      debounce((domain: Bounds | null) => {
-        if (!domain) return;
-        const { x0, x1 } = domain;
-
-        // computing the offset of 2 pixel (SAFE_PIXEL) in domain (milliseconds)
-        // https://github.com/airbnb/visx/blob/86a851cb3bf622b013b186f02f955bcd6548a87f/packages/visx-brush/src/Brush.tsx#L14
-        const brushOffset =
-          xBrushScale.invert(2).getTime() - xBrushScale.invert(0).getTime();
-
-        // compensating the offset
-        // x0 and x1 are millisecond value
-        const startDate = millisecondTodate(x0 + brushOffset);
-        const endDate = millisecondTodate(x1 - brushOffset);
-
-        setSelectedRange({
-          // don't let range go outside the xAxisRange, if provided
-          start: xAxisRange
-            ? startDate < xAxisRange.start
-              ? xAxisRange.start
-              : startDate
-            : startDate,
-          end: xAxisRange
-            ? endDate > xAxisRange.end
-              ? xAxisRange.end
-              : endDate
-            : endDate,
-        });
-      }, debounceRateMs),
-    [setSelectedRange, xAxisRange]
-  );
-
-  // Cancel any pending onBrushChange requests when this component is unmounted
-  useEffect(() => {
-    return () => {
-      onBrushChange.cancel();
-    };
-  }, []);
-
   // bounds
   const xBrushMax = Math.max(width - margin.left - margin.right, 0);
   // take 70 % of given height considering axis tick/tick labels at the bottom
@@ -176,10 +136,50 @@ function TimeSlider(props: TimeSliderProps) {
   );
 
   // `brushKey` makes/fakes the brush as a controlled component,
-  const brushKey = 'not_fake_controlled';
-  //    selectedRange != null
-  //      ? selectedRange.start + ':' + selectedRange.end
-  //      : 'no_brush';
+  const brushKey =
+    selectedRange != null
+      ? selectedRange.start + ':' + selectedRange.end
+      : 'no_brush';
+
+  const onBrushChange = useMemo(
+    () =>
+      debounce((domain: Bounds | null) => {
+        if (!domain) return;
+        const { x0, x1 } = domain;
+
+        // computing the offset of 2 pixel (SAFE_PIXEL) in domain (milliseconds)
+        // https://github.com/airbnb/visx/blob/86a851cb3bf622b013b186f02f955bcd6548a87f/packages/visx-brush/src/Brush.tsx#L14
+        const brushOffset =
+          xBrushScale.invert(2).getTime() - xBrushScale.invert(0).getTime();
+
+        // compensating the offset
+        // x0 and x1 are millisecond value
+        const startDate = millisecondTodate(x0 + brushOffset);
+        const endDate = millisecondTodate(x1 - brushOffset);
+
+        setSelectedRange({
+          // don't let range go outside the xAxisRange, if provided
+          start: xAxisRange
+            ? startDate < xAxisRange.start
+              ? xAxisRange.start
+              : startDate
+            : startDate,
+          end: xAxisRange
+            ? endDate > xAxisRange.end
+              ? xAxisRange.end
+              : endDate
+            : endDate,
+        });
+      }, debounceRateMs),
+    [setSelectedRange, xAxisRange, debounceRateMs, xBrushScale]
+  );
+
+  // Cancel any pending onBrushChange requests when this component is unmounted
+  useEffect(() => {
+    return () => {
+      onBrushChange.cancel();
+    };
+  }, [onBrushChange]);
 
   return (
     <div

packages/libs/components/src/components/widgets/NumberAndDateInputs.tsx

@@ -35,6 +35,8 @@ type BaseProps<M extends NumberOrDate> = {
   disabled?: boolean;
   /** Style the Text Field with the warning color and bold stroke */
   applyWarningStyles?: boolean;
+  /** specify the height of the input element */
+  inputHeight?: number;
 };
 
 export type NumberInputProps = BaseProps<number> & { step?: number };
@@ -86,6 +88,8 @@ function BaseInput({
   displayRangeViolationWarnings = true,
   disabled = false,
   applyWarningStyles = false,
+  // default value is 36.5
+  inputHeight = 36.5,
   ...props
 }: BaseInputProps) {
   if (validator && (required || minValue != null || maxValue != null))
@@ -102,7 +106,7 @@ function BaseInput({
 
   const classes = makeStyles({
     root: {
-      height: 36.5, // default height is 56 and is waaaay too tall
+      height: inputHeight, // default height is 56 and is waaaay too tall
       // 34.5 is the height of the reset button, but 36.5 lines up better
       // set width for date
       width: valueType === 'date' ? 165 : '',

packages/libs/components/src/components/widgets/NumberAndDateRangeInputs.tsx

@@ -43,6 +43,8 @@ export type BaseProps<M extends NumberOrDateRange> = {
   clearButtonLabel?: string;
   /** add disabled prop to disable input fields */
   disabled?: boolean;
+  /** specify the height of the input element */
+  inputHeight?: number;
 };
 
 export type NumberRangeInputProps = BaseProps<NumberRange> & { step?: number };
@@ -86,6 +88,7 @@ function BaseInput({
   clearButtonLabel = 'Clear',
   // add disabled prop to disable input fields
   disabled = false,
+  inputHeight,
   ...props
 }: BaseInputProps) {
   if (validator && required)
@@ -175,7 +178,9 @@ function BaseInput({
           {label}
         </Typography>
       )}
-      <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <div
+        style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+      >
         {valueType === 'number' ? (
           <NumberInput
             value={min as number}
@@ -192,6 +197,7 @@ function BaseInput({
             // add disabled prop to disable input fields
             disabled={disabled}
             step={step}
+            inputHeight={inputHeight}
           />
         ) : (
           <DateInput
@@ -208,6 +214,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            inputHeight={inputHeight}
           />
         )}
         <div style={{ display: 'flex', flexDirection: 'row' }}>
@@ -241,6 +248,7 @@ function BaseInput({
             // add disabled prop to disable input fields
             disabled={disabled}
             step={step}
+            inputHeight={inputHeight}
           />
         ) : (
           <DateInput
@@ -257,6 +265,7 @@ function BaseInput({
             }}
             // add disabled prop to disable input fields
             disabled={disabled}
+            inputHeight={inputHeight}
           />
         )}
         {showClearButton && (

packages/libs/components/src/stories/plotControls/TimeSlider.stories.tsx

@@ -1,11 +1,14 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { LinePlotProps } from '../../plots/LinePlot';
 import TimeSlider, {
   TimeSliderDataProp,
 } from '../../components/plotControls/TimeSlider';
 import { DraggablePanel } from '@veupathdb/coreui/lib/components/containers';
 
+import AxisRangeControl from '../../components/plotControls/AxisRangeControl';
+import { NumberOrDateRange } from '../../types/general';
+
 export default {
   title: 'Plot Controls/TimeSlider',
   component: TimeSlider,
@@ -301,7 +304,56 @@ export const TimeFilter: Story<LinePlotProps> = (args: any) => {
 
   // set constant values
   const defaultSymbolSize = 0.8;
-  const defaultColor = '#333';
+
+  // control selectedRange
+  const handleAxisRangeChange = useCallback(
+    (newRange?: NumberOrDateRange) => {
+      if (newRange)
+        setSelectedRange({
+          start: newRange.min as string,
+          end: newRange.max as string,
+        });
+    },
+    [setSelectedRange]
+  );
+
+  const handleArrowClick = useCallback(
+    (arrow: string) => {
+      // let's assume that selectedRange has the format of 'yyyy-mm-dd'
+      if (
+        selectedRange &&
+        selectedRange.start != null &&
+        selectedRange.end != null
+      ) {
+        const selectedRangeArray =
+          arrow === 'left'
+            ? selectedRange.start.split('-')
+            : selectedRange.end.split('-');
+        const addSubtractYear =
+          arrow === 'left'
+            ? String(Number(selectedRangeArray[0]) - 1)
+            : String(Number(selectedRangeArray[0]) + 1);
+        const changeYear =
+          addSubtractYear +
+          '-' +
+          selectedRangeArray[1] +
+          '-' +
+          selectedRangeArray[2];
+        setSelectedRange((prev) => {
+          return arrow === 'left'
+            ? {
+                start: changeYear as string,
+                end: prev?.end as string,
+              }
+            : {
+                start: prev?.start as string,
+                end: changeYear as string,
+              };
+        });
+      }
+    },
+    [selectedRange, setSelectedRange]
+  );
 
   return (
     <DraggablePanel
@@ -322,16 +374,47 @@ export const TimeFilter: Story<LinePlotProps> = (args: any) => {
       >
         <div
           style={{
-            display: 'grid',
-            gridTemplateColumns: '1fr repeat(1, auto) 1fr',
-            gridColumnGap: '5px',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
             justifyContent: 'center',
-            paddingTop: '1em',
           }}
         >
-          {/* display start to end value */}
-          <div style={{ gridColumnStart: 2 }}>
-            {selectedRange?.start} ~ {selectedRange?.end}
+          <div>
+            <button
+              style={{ marginRight: '1em' }}
+              onClick={() => handleArrowClick('left')}
+            >
+              <i className="fa fa-arrow-left" aria-hidden="true"></i>
+            </button>
+          </div>
+          {/* add axis range control */}
+          <AxisRangeControl
+            range={
+              selectedRange != null
+                ? {
+                    min: selectedRange.start,
+                    max: selectedRange.end,
+                  }
+                : undefined
+            }
+            onRangeChange={handleAxisRangeChange}
+            valueType={'date'}
+            // set maxWidth
+            containerStyles={{
+              maxWidth: '350px',
+            }}
+            // default height of the input element is 36.5 which may be too high for timeSlider
+            // thus, introduced new prop to control it
+            inputHeight={20}
+          />
+          <div>
+            <button
+              style={{ marginLeft: '2em' }}
+              onClick={() => handleArrowClick('right')}
+            >
+              <i className="fa fa-arrow-right" aria-hidden="true"></i>
+            </button>
           </div>
         </div>
         <TimeSlider