diff --git a/app/eslint.config.js b/app/eslint.config.js index ff64412..0053866 100644 --- a/app/eslint.config.js +++ b/app/eslint.config.js @@ -35,6 +35,7 @@ export default [ ], 'react/prop-types': 'off', 'react/no-unescaped-entities': 'off', + "no-irregular-whitespace": "off", }, }, ] diff --git a/app/src/components/COVID19View.jsx b/app/src/components/COVID19View.jsx index be61ce6..8daa93e 100644 --- a/app/src/components/COVID19View.jsx +++ b/app/src/components/COVID19View.jsx @@ -300,6 +300,17 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se onRelayout={handlePlotUpdate} /> +
+

+ Note that forecasts should be interpreted with great caution and may not reliably predict rapid changes in disease trends. +

+
{ const url = window.location.href; clipboard.copy(url); }; + + // for when switching from one flu view to flu_peak and there are multiple dates selected + useEffect(() => { + if (viewType === 'flu_peak' && selectedDates.length > 1) { + // keep only the active date, or the first date if activeDate isn't set + const singleDate = activeDate || selectedDates[0]; + setSelectedDates([singleDate]); + } + }, [viewType, selectedDates, activeDate, setSelectedDates]); return ( window.location.reload()}> @@ -295,8 +304,10 @@ const DataVisualizationContainer = () => { activeDate={activeDate} setActiveDate={setActiveDate} loading={loading} + multi={viewType !== 'flu_peak'} /> + )} {windowSize.width > 800 && (
@@ -321,6 +332,7 @@ const DataVisualizationContainer = () => { activeDate={activeDate} setActiveDate={setActiveDate} loading={loading} + multi={viewType !== 'flu_peak'} //disable multi date select if flu peak />
)} diff --git a/app/src/components/DateSelector.jsx b/app/src/components/DateSelector.jsx index dac3328..8f40bbe 100644 --- a/app/src/components/DateSelector.jsx +++ b/app/src/components/DateSelector.jsx @@ -1,7 +1,7 @@ import { Group, Text, ActionIcon, Button } from '@mantine/core'; import { IconChevronLeft, IconChevronRight, IconX, IconPlus } from '@tabler/icons-react'; -const DateSelector = ({ availableDates, selectedDates, setSelectedDates, activeDate, setActiveDate }) => { +const DateSelector = ({ availableDates, selectedDates, setSelectedDates, activeDate, setActiveDate, multi = true }) => { return ( {selectedDates.map((date) => ( @@ -43,16 +43,18 @@ const DateSelector = ({ availableDates, selectedDates, setSelectedDates, activeD > {date} - setSelectedDates(dates => dates.filter(d => d !== date))} - disabled={selectedDates.length === 1} - variant="subtle" - size="xs" - color="red" - aria-label={`Remove date ${date}`} - > - - + {multi && ( // only show `x` icon when multi == True + setSelectedDates(dates => dates.filter(d => d !== date))} + disabled={selectedDates.length === 1} + variant="subtle" + size="xs" + color="red" + aria-label={`Remove date ${date}`} + > + + + )} ))} - {selectedDates.length < 5 && ( + {multi && selectedDates.length < 5 && ( // only show add button if multi == True