fix: feedback on GOES interface (#281)

# Description:
This PR addresses several UI/UX improvements and bug fixes for the GOES
Plume Viewer, focusing on date filtering functionality and animation
timeline improvements.

# Changes:
1. Date Picker Temporal Extent Restrictions (Commit: 0eb8684)
Implemented dynamic calculation of min/max dates from regions data and
added constraints to DatePicker components to grey out dates outside the
available data range. Added reset functionality to restore date range
when the home button is clicked, preventing users from selecting dates
with no available data.

2. Animation Timeline First Plume Display Fix (Commit: e51e64f)
Resolved issue where the first plume would disappear when dragging the
animation slider to the beginning by moving the initial plume display
call outside of the timeline onStart handler, ensuring proper rendering
before timeline initialization.

3. Measurement Tool Icon Visibility Fix (Commit: 140ccdf)
Fixed ruler icon turning white and blending with button background when
selected by replacing the undefined CSS variable with the correct color
variable, ensuring proper contrast between icon and button background.

4. Animation Replay Button Fix (Commit: 005d427)
Fixed replay button incorrectly restarting the animation from the middle
of the timeline instead of the beginning. The issue was caused by the
[mapboxgl-timeline](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-browser/workbench/workbench.html)
library passing a string value to the Date constructor. Applied a monkey
patch to correctly parse the slider's minimum value as a number, and
updated the onStart callback to properly reset animation state and clear
all buffered layers.
PR is made on the timeline library too.
[ref](markusand/mapboxgl-timeline#2)

Author: slesaad

goes-plume-viewer/src/components/filter/index.jsx

@@ -1,10 +1,48 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import moment from "moment";
 
-export function FilterByDate({regions, plumes, setFilteredRegions, setFilteredSelectedPlumes}) {
-    const [startDate, setStartDate] = useState(moment("2018-01-01"));
-    const [endDate, setEndDate] = useState(() => moment());
+export function FilterByDate({regions, plumes, setFilteredRegions, setFilteredSelectedPlumes, resetFilterDates, setResetFilterDates}) {
+    // Calculate the overall temporal extent from regions data
+    const { minDate, maxDate } = useMemo(() => {
+        if (!regions.length) {
+            return {
+                minDate: moment("2018-01-01"),
+                maxDate: moment()
+            };
+        }
+
+        let min = moment(regions[0].startDate);
+        let max = moment(regions[0].endDate);
+
+        regions.forEach(region => {
+            const regionStart = moment(region.startDate);
+            const regionEnd = moment(region.endDate);
+
+            if (regionStart.isBefore(min)) min = regionStart;
+            if (regionEnd.isAfter(max)) max = regionEnd;
+        });
+
+        return { minDate: min, maxDate: max };
+    }, [regions]);
+
+    const [startDate, setStartDate] = useState(minDate);
+    const [endDate, setEndDate] = useState(maxDate);
+
+    // Update filter dates when the temporal extent changes
+    useEffect(() => {
+        setStartDate(minDate);
+        setEndDate(maxDate);
+    }, [minDate, maxDate]);
+
+    // Reset filter dates when home button is clicked
+    useEffect(() => {
+        if (resetFilterDates) {
+            setStartDate(minDate);
+            setEndDate(maxDate);
+            setResetFilterDates(false);
+        }
+    }, [resetFilterDates, minDate, maxDate, setResetFilterDates]);
 
     useEffect(() => {
         if (!regions.length) return;
@@ -44,6 +82,8 @@ export function FilterByDate({regions, plumes, setFilteredRegions, setFilteredSe
                     label="Start Date"
                     value={startDate}
                     onChange={setStartDate}
+                    minDate={minDate}
+                    maxDate={maxDate}
                     sx={{
                         "& .MuiOutlinedInput-root": {
                         "& fieldset": {
@@ -67,6 +107,8 @@ export function FilterByDate({regions, plumes, setFilteredRegions, setFilteredSe
                     label="End Date"
                     value={endDate}
                     onChange={setEndDate}
+                    minDate={minDate}
+                    maxDate={maxDate}
                     sx={{
                         "& .MuiOutlinedInput-root": {
                         "& fieldset": {

goes-plume-viewer/src/components/mapControls/measureDistance.jsx

@@ -8,8 +8,8 @@ function MeasureButton({ icon: iconClicked, onClick }) {
     <Tooltip title="Measurement Scale">
       <IconButton className="measure-icon map-control-icon"
         style={{
-          backgroundColor: !iconClicked ? "": "var(--heading-gray)",
-          color: !iconClicked ? "var(--heading-gray)" : "white"
+          backgroundColor: !iconClicked ? "": "var(--light-grey)",
+          color: !iconClicked ? "var(--light-grey)" : "white"
         }}
         onClick={onClick}
       >

goes-plume-viewer/src/components/plumeAnimation/index.jsx

@@ -33,23 +33,14 @@ export const PlumeAnimation = ({ plumes }) => {
 
     let startDatetime = plumes[0]["properties"]["datetime"];
     let endDatetime = plumes[plumes.length - 1]["properties"]["datetime"];
+
+    handleAnimation(map, startDatetime, plumeDateIdxMap, plumes, bufferedLayer, bufferedSource, rasterApiUrl);
+
     timeline.current = new TimelineControl({
       start: startDatetime,
       end: endDatetime,
       initial: startDatetime,
       step: 1000 * 60 * 5, // 5 minute for GOES satellite; TODO: get this from the difference between the time of consecutive elements
-      onStart: (date) => {
-        // executed on initial step tick.
-        handleAnimation(
-          map,
-          date,
-          plumeDateIdxMap,
-          plumes,
-          bufferedLayer,
-          bufferedSource,
-          rasterApiUrl
-        );
-      },
       onChange: (date) => {
         // executed on each changed step tick.
         handleAnimation(
@@ -67,6 +58,20 @@ export const PlumeAnimation = ({ plumes }) => {
                 return dateStr
             }
     });
+
+    /*
+     * Monkey patch reset method to fix issue with slider reseting in mid when replaying.
+     * It was caused by the string timestamp from slider.min incompatible in the mapboxgl-timeline library
+     * Use monkey patch until the fix is made on the library.
+     */
+    timeline.current.reset = function(t) {
+      if (t === undefined) {
+        t = parseFloat(this.slider.min); // fix
+      }
+      this.slider.value = `${new Date(t).getTime()}`;
+      this.slider.dispatchEvent(new Event("change"));
+    };
+
     const timelineElement = timeline.current.onAdd(map);
     timelineComponent.current.append(timelineElement);
 

goes-plume-viewer/src/pages/dashboard/index.jsx

@@ -53,6 +53,7 @@ export function Dashboard({
 
   const [ filteredRegions, setFilteredRegions ] = useState([]); // all regions with the filter applied
   const [ filteredSelectedPlumes, setFilteredSelectedPlumes ] = useState([]); // plumes for the selected region with the filter applied
+  const [ resetFilterDates, setResetFilterDates ] = useState(false); // trigger to reset filter dates
 
   const [ plumeIds, setPlumeIds ] = useState([]); // list of plume_ids for the search feature.
   const [ plumesForAnimation, setPlumesForAnimation ] = useState([]); // list of subdaily_plumes used for animation
@@ -124,6 +125,7 @@ export function Dashboard({
     setOpenDrawer(false);
     setZoomLevel(4);
     setZoomLocation([-98.771556, 32.967243]);
+    setResetFilterDates(true);
   }
 
   const handleResetToSelectedRegion = () => {
@@ -185,6 +187,8 @@ export function Dashboard({
                 plumes={selectedPlumes}
                 setFilteredRegions={setFilteredRegions}
                 setFilteredSelectedPlumes={setFilteredSelectedPlumes}
+                resetFilterDates={resetFilterDates}
+                setResetFilterDates={setResetFilterDates}
               />
             </HorizontalLayout>
             <HorizontalLayout>