fix cancel click and debounce the selectedRange update

VEuPathDB · Sep 7, 2023 · 1e8fe83 · 1e8fe83
1 parent df41bd4
commit 1e8fe83
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 47 deletions.
diff --git a/packages/libs/components/src/components/plotControls/EzTimeFilter.tsx b/packages/libs/components/src/components/plotControls/EzTimeFilter.tsx
@@ -21,9 +21,11 @@ export type EzTimeFilterProps = {
   /** Ez time filter data  */
   data: EZTimeFilterDataProp[];
   /** current state of selectedRange */
-  selectedRange: { start: string; end: string };
+  selectedRange: { start: string; end: string } | undefined;
   /** update function selectedRange */
-  setSelectedRange: (selectedRange: EzTimeFilterProps['selectedRange']) => void;
+  setSelectedRange: (
+    selectedRange: { start: string; end: string } | undefined
+  ) => void;
   /** width */
   width?: number;
   /** height */
@@ -82,19 +84,30 @@ function EzTimeFilter(props: EzTimeFilterProps) {
   const getXData = (d: EZTimeFilterDataProp) => new Date(d.x);
   const getYData = (d: EZTimeFilterDataProp) => d.y;
 
-  const onBrushChange = (domain: Bounds | null) => {
-    if (!domain) return;
+  const onBrushChange = useMemo(
+    () =>
+      debounce((domain: Bounds | null) => {
+        if (!domain) return;
 
-    const { x0, x1 } = domain;
+        const { x0, x1 } = domain;
 
-    const selectedDomain = {
-      // x0 and x1 are millisecond value
-      start: millisecondTodate(x0),
-      end: millisecondTodate(x1),
-    };
+        const selectedDomain = {
+          // x0 and x1 are millisecond value
+          start: millisecondTodate(x0),
+          end: millisecondTodate(x1),
+        };
 
-    setSelectedRange(selectedDomain);
-  };
+        setSelectedRange(selectedDomain);
+      }, debounceRateMs),
+    [setSelectedRange]
+  );
+
+  // Cancel pending onBrushEnd request when this component is unmounted
+  useEffect(() => {
+    return () => {
+      onBrushChange.cancel();
+    };
+  }, []);
 
   // bounds
   const xBrushMax = Math.max(width - margin.left - margin.right, 0);
@@ -126,34 +139,27 @@ function EzTimeFilter(props: EzTimeFilterProps) {
 
   // initial selectedRange position
   const initialBrushPosition = useMemo(
-    () => ({
-      start: { x: xBrushScale(new Date(selectedRange.start)) },
-      end: { x: xBrushScale(new Date(selectedRange.end)) },
-    }),
+    () =>
+      selectedRange != null
+        ? {
+            start: { x: xBrushScale(new Date(selectedRange.start)) },
+            end: { x: xBrushScale(new Date(selectedRange.end)) },
+          }
+        : undefined,
     [selectedRange, xBrushScale]
   );
 
   // compute bar width manually as scaleTime is used for Bar chart
   const barWidth = xBrushMax / data.length;
 
-  // make an event after dragging ends
-  const onBrushEnd = () => {};
-
   // data bar color
   const defaultColor = '#333';
 
-  // debounce function for onBrushEnd: will be used for submitting filtered range later
-  const debouncedOnBrushEnd = useMemo(
-    () => debounce(onBrushEnd, debounceRateMs),
-    [onBrushEnd]
-  );
-
-  // Cancel pending onBrushEnd request when this component is unmounted
-  useEffect(() => {
-    return () => {
-      debouncedOnBrushEnd.cancel();
-    };
-  }, []);
+  // this makes/fakes the brush as a controlled component
+  const brushKey =
+    initialBrushPosition != null
+      ? initialBrushPosition.start + ':' + initialBrushPosition.end
+      : 'no_brush';
 
   return (
     <div
@@ -197,7 +203,7 @@ function EzTimeFilter(props: EzTimeFilterProps) {
             tickLabelProps={axisBottomTickLabelProps}
           />
           <Brush
-            key={initialBrushPosition.start + ':' + initialBrushPosition.end}
+            key={brushKey}
             xScale={xBrushScale}
             yScale={yBrushScale}
             width={xBrushMax}
@@ -209,10 +215,10 @@ function EzTimeFilter(props: EzTimeFilterProps) {
             brushDirection="horizontal"
             initialBrushPosition={initialBrushPosition}
             onChange={onBrushChange}
+            onClick={() => setSelectedRange(undefined)}
             selectedBoxStyle={selectedBrushStyle}
             useWindowMoveEvents
             disableDraggingSelection={disableDraggingSelection}
-            onBrushEnd={debouncedOnBrushEnd}
             renderBrushHandle={(props) => <BrushHandle {...props} />}
           />
         </Group>

diff --git a/packages/libs/components/src/stories/plotControls/EzTimeFilter.stories.tsx b/packages/libs/components/src/stories/plotControls/EzTimeFilter.stories.tsx
@@ -254,7 +254,9 @@ export const TimeFilter: Story<LinePlotProps> = (args: any) => {
   );
 
   // set initial selectedRange
-  const [selectedRange, setSelectedRange] = useState({
+  const [selectedRange, setSelectedRange] = useState<
+    { start: string; end: string } | undefined
+  >({
     start: timeFilterData[0].x,
     end: timeFilterData[timeFilterData.length - 1].x,
   });

diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableTimeFilter.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableTimeFilter.tsx
@@ -137,18 +137,6 @@ export default function DraggableTimeFilter({
     setSelectedRange(undefined);
   }
 
-  // update selectedRange when the time slider data changes
-  // TO DO: consider only resetting range when the variable changes
-  // so probably when selectedRange is nullish
-  useEffect(() => {
-    if (!getTimeSliderData.pending && getTimeSliderData.value != null) {
-      setSelectedRange({
-        start: getTimeSliderData.value.x[0],
-        end: getTimeSliderData.value.x[getTimeSliderData.value.x.length - 1],
-      });
-    }
-  }, [getTimeSliderData]);
-
   // if no variable in a study is suitable to time slider, do not show time slider
   return variable != null ? (
     <DraggablePanel
@@ -212,7 +200,6 @@ export default function DraggableTimeFilter({
         {/* conditional loading for EzTimeFilter */}
         {!getTimeSliderData.pending &&
           getTimeSliderData.value != null &&
-          selectedRange != null &&
           timeFilterData.length > 0 && (
             <>
               <EzTimeFilter