Merge branch 'main' into production

Author: sandesh-sp

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>

nist-interface/src/pages/dashboardContainer/index.jsx

@@ -35,7 +35,8 @@ export function DashboardContainer({
       try {
         // fetch in the collection from the features api
         const url = `${config?.featuresApiUrl}/collections`;
-        const collections = await fetchAllFromFeaturesAPI(url);
+        let collections = await fetchAllFromFeaturesAPI(url);
+        collections = collections.filter((elem) => !['public.nist_testbed_lam_usc1_co2_hourly_concentrations', 'public.nist_testbed_lam_usc1_ch4_hourly_concentrations'].includes(elem.id));
         const collectionsMetaData = await extractMetaData(collections, config);
         const metaDataDict = getMetaDataDictionary(collectionsMetaData);
         setStationMetadata(metaDataDict);