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