Date filter #178

oskarhurst · 2025-09-03T23:30:48Z

Update the Date Range Slider to fix bugs and allow the user to set a min and max range.

Copilot

Pull Request Overview

This PR updates the Date Range Slider component to fix bugs and allow users to set minimum and maximum date ranges. The changes replace the previous date formatting with interactive DatePicker components and add state management for better user control.

Key changes:

Replaced static date labels with interactive DatePicker components in both the main products page and date range slider
Added state synchronization between parent and child components for date range management
Implemented ResizeObserver for better responsive behavior and layout calculations

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/app-pages/products/products.js	Added DatePicker components to main interface with state management for start/end dates
src/app-pages/products/date-range-slider.js	Refactored slider to use DatePicker components and improved layout calculations with ResizeObserver
src/app-pages/products/DatePickerOverrides.css	Added custom CSS styling for DatePicker components
src/app-bundles/product-bundle.js	Added fallback logic for date range boundaries
package.json	Updated react-datepicker dependency and added react-date-picker and react-calendar

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/app-pages/products/date-range-slider.js

Copilot · 2025-09-05T21:18:47Z

src/app-pages/products/date-range-slider.js

+              calendarIcon={<CalendarIcon className="w-5 h-5 ml-[-10px]"/>}
+              calendarProps={{
+                prevLabel: <ChevronLeftIcon/>,
+                nextLabel: <ChevronRightIcon/>, 


Trailing whitespace after the comma on these lines should be removed.

Suggested change

nextLabel: <ChevronRightIcon/>,

nextLabel: <ChevronRightIcon/>,

Copilot · 2025-09-05T21:18:47Z

src/app-pages/products/date-range-slider.js

+            calendarIcon={<CalendarIcon className="w-5 h-5 ml-[-10px]"/>}
+            calendarProps={{
+              prevLabel: <ChevronLeftIcon/>,
+              nextLabel: <ChevronRightIcon/>, 


Trailing whitespace after the comma on these lines should be removed.

Copilot · 2025-09-05T21:18:47Z

src/app-pages/products/date-range-slider.js

+              calendarIcon={<CalendarIcon className="w-5 h-5 ml-[-10px]"/>}
+              calendarProps={{
+                prevLabel: <ChevronLeftIcon/>,
+                nextLabel: <ChevronRightIcon/>, 


Trailing whitespace after the comma on these lines should be removed.

Suggested change

nextLabel: <ChevronRightIcon/>,

nextLabel: <ChevronRightIcon/>,

Copilot · 2025-09-05T21:18:47Z

src/app-pages/products/products.js

+                calendarIcon={<CalendarIcon className="w-5 h-5"/>}
+                calendarProps={{
+                  prevLabel: <ChevronLeftIcon/>,
+                  nextLabel: <ChevronRightIcon/>, 


Trailing whitespace after the comma on these lines should be removed.

src/app-pages/products/products.js

Co-authored-by: Copilot <[email protected]>

ktarbet · 2025-09-05T22:24:41Z

src/app-bundles/product-bundle.js

Suggestion: define a shared invalid_date (or whatever jan 1, 3000 means)

invalid_date = new Date('01-Jan-3000')

and use everywhere instead of magic date.

ktarbet · 2025-09-05T22:25:54Z

src/app-bundles/product-bundle.js

          }
        });
+        if (out.getTime() === new Date('01-Jan-3000').getTime()) {
+          out = new Date('01-Jan-1980');


consider defining

cumulus_begin = new Date('01-Jan-1980')
and use that wherever used.

ktarbet · 2025-09-05T22:44:06Z

src/app-pages/products/date-range-slider.js

-  if (barRef.current) {
-    barWidth = barRef.current.offsetWidth;
-  }
+  const [offsetFrom, setOffsetFrom] = useState(((from - min) / (max - min)) * (barWidth - labelWidthFrom));


Suggested change

const [offsetFrom, setOffsetFrom] = useState(((from - min) / (max - min)) * (barWidth - labelWidthFrom));

const posPx = ( value, min, max, containerPx, subtractPx = 0, addPx = 0) =>

((value - min) / (max - min)) * (containerPx - subtractPx) + addPx;

const [offsetFrom, setOffsetFrom] = useState(posPx(from,min,max,barWidth,labelWidthFrom));

const [offsetTo, setOffsetTo] = useState(posPx(to, min, max, barWidth, labelWidthTo));

const [rangeBarFrom, setRangeBarFrom] = useState(posPx(from, min, max, barWidth, 14, 7) );

const [rangeBarTo, setRangeBarTo] = useState( posPx(to, min, max, barWidth, 14, 7));

ktarbet · 2025-09-05T22:45:17Z

src/app-pages/products/date-range-slider.js

+  useEffect(() => {
+    setOffsetFrom(((from - min) / (max - min)) * (barWidth - labelWidthFrom));
+    setOffsetTo(((to - min) / (max - min)) * (barWidth - labelWidthTo));
+    setRangeBarFrom(((from - min) / (max - min)) * (barWidth - 14) + 7);
+    setRangeBarTo(((to - min) / (max - min)) * (barWidth - 14) + 7);
+  }, [barWidth, labelWidthFrom, labelWidthTo, min, max, from, to]);


Suggested change

useEffect(() => {

setOffsetFrom(((from - min) / (max - min)) * (barWidth - labelWidthFrom));

setOffsetTo(((to - min) / (max - min)) * (barWidth - labelWidthTo));

setRangeBarFrom(((from - min) / (max - min)) * (barWidth - 14) + 7);

setRangeBarTo(((to - min) / (max - min)) * (barWidth - 14) + 7);

}, [barWidth, labelWidthFrom, labelWidthTo, min, max, from, to]);

useEffect(() => {

setOffsetFrom (posPx(from, min, max, barWidth, labelWidthFrom));

setOffsetTo (posPx(to, min, max, barWidth, labelWidthTo));

setRangeBarFrom(posPx(from, min, max, barWidth, 14, 7));

setRangeBarTo (posPx(to, min, max, barWidth, 14, 7));

}, [barWidth, labelWidthFrom, labelWidthTo, min, max, from, to]);

…USACE/cumulus-ui into date-filter

ktarbet

please consider making:

const MAX_DATE = new Date('3000-01-01'); (or better name if you have one)

for clarity, instead of magic number.

Oskar Hurst and others added 9 commits May 7, 2025 21:43

add calender

aeee7af

fix assignment warning

a7899cc

update initial times

0c82f09

add calender

a5e3a86

fix assignment warning

b92caf8

update initial times

c3d3c62

update range slider

6b233e1

Merge branch 'cwbi-dev' into date-filter

222a12f

Merge branch 'cwbi-dev' into date-filter

2b8e729

oskarhurst requested a review from Copilot September 5, 2025 21:17

Copilot AI reviewed Sep 5, 2025

View reviewed changes

Apply suggestions from code review

1d5b05c

Co-authored-by: Copilot <[email protected]>

ktarbet reviewed Sep 5, 2025

View reviewed changes

oskarhurst added 2 commits September 5, 2025 16:34

Merge branches 'date-filter' and 'date-filter' of https://github.com/…

95030bb

…USACE/cumulus-ui into date-filter

clean code

36852ee

ktarbet reviewed Sep 8, 2025

View reviewed changes

add max date const

851d877

ktarbet approved these changes Sep 8, 2025

View reviewed changes

oskarhurst merged commit 0c0701c into cwbi-dev Sep 8, 2025
1 check passed

	nextLabel: <ChevronRightIcon/>,
	nextLabel: <ChevronRightIcon/>,

-  const [offsetFrom, setOffsetFrom] = useState(((from - min) / (max - min)) * (barWidth - labelWidthFrom));
+const posPx = ( value, min, max,  containerPx, subtractPx = 0, addPx      = 0) =>
+  ((value - min) / (max - min)) * (containerPx - subtractPx) + addPx;
+const [offsetFrom,  setOffsetFrom]  = useState(posPx(from,min,max,barWidth,labelWidthFrom));
+const [offsetTo,    setOffsetTo]    = useState(posPx(to,   min, max, barWidth, labelWidthTo));
+const [rangeBarFrom, setRangeBarFrom] = useState(posPx(from, min, max, barWidth, 14, 7) );
+const [rangeBarTo,  setRangeBarTo]   = useState( posPx(to,   min, max, barWidth, 14, 7));

Date filter #178

Date filter #178

Uh oh!

Conversation

oskarhurst commented Sep 3, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ktarbet Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

ktarbet Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

ktarbet Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

ktarbet Sep 5, 2025

Choose a reason for hiding this comment

Uh oh!

ktarbet left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants