Latest release to beta site

app/eslint.config.js

@@ -35,6 +35,7 @@ export default [
       ],
       'react/prop-types': 'off',
       'react/no-unescaped-entities': 'off',
+      "no-irregular-whitespace": "off",
     },
   },
 ]

app/src/components/COVID19View.jsx

@@ -300,6 +300,17 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
           onRelayout={handlePlotUpdate} 
         />
       </div>
+      <div style={{ borderTop: '1px solid #FFF', paddingTop: '1px', marginTop: 'auto' }}>
+              <p style={{ 
+                fontStyle: 'italic', 
+                fontSize: '12px', 
+                color: '#868e96', 
+                textAlign: 'right',
+                margin: 0 
+              }}>
+               Note that forecasts should be interpreted with great caution and may not reliably predict rapid changes in disease trends.
+              </p>
+      </div>
       <ModelSelector
         models={models}
         selectedModels={selectedModels}

app/src/components/DataVisualizationContainer.jsx

@@ -244,6 +244,15 @@ const DataVisualizationContainer = () => {
     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 (
     <ErrorBoundary onReset={() => window.location.reload()}>
@@ -295,8 +304,10 @@ const DataVisualizationContainer = () => {
                     activeDate={activeDate}
                     setActiveDate={setActiveDate}
                     loading={loading}
+                    multi={viewType !== 'flu_peak'}
                   />
                 </div>
+
               )}
               {windowSize.width > 800 && (
                 <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
@@ -321,6 +332,7 @@ const DataVisualizationContainer = () => {
                     activeDate={activeDate}
                     setActiveDate={setActiveDate}
                     loading={loading}
+                    multi={viewType !== 'flu_peak'} //disable multi date select if flu peak
                   />
                 </div>
               )}

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 (
     <Group gap={{ base: 'xs', sm: 'md' }} justify="center" wrap="wrap">
       {selectedDates.map((date) => (
@@ -43,16 +43,18 @@ const DateSelector = ({ availableDates, selectedDates, setSelectedDates, activeD
             >
               {date}
             </Text>
-            <ActionIcon
-              onClick={() => setSelectedDates(dates => dates.filter(d => d !== date))}
-              disabled={selectedDates.length === 1}
-              variant="subtle"
-              size="xs"
-              color="red"
-              aria-label={`Remove date ${date}`}
-            >
-              <IconX size={10} />
-            </ActionIcon>
+            {multi && ( // only show `x` icon when multi == True
+              <ActionIcon
+                onClick={() => setSelectedDates(dates => dates.filter(d => d !== date))}
+                disabled={selectedDates.length === 1}
+                variant="subtle"
+                size="xs"
+                color="red"
+                aria-label={`Remove date ${date}`}
+              >
+                <IconX size={10} />
+              </ActionIcon>
+            )}
           </Group>
 
           <ActionIcon
@@ -82,7 +84,7 @@ const DateSelector = ({ availableDates, selectedDates, setSelectedDates, activeD
         </Group>
       ))}
 
-      {selectedDates.length < 5 && (
+      {multi && selectedDates.length < 5 && ( // only show add button if multi == True
         <Button
           onClick={() => {
             if (selectedDates.length >= 5) return;