Latest beta release

app/src/components/Announcement.jsx

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { Paper, Group, Text, ThemeIcon, Stack, CloseButton } from '@mantine/core';
+import { IconSpeakerphone, IconAlertSquareRounded } from '@tabler/icons-react';
+
+// Announcement component params:
+// `id` | unique ID for the announcement
+// `startDate` | date for announcement to start being displayed
+// `endDate` | date for announcement to stop being displayed
+// `text` | text for the announcement
+// `announcementType` | alert or update
+const Announcement = ({ id, startDate, endDate, text, announcementType }) => {
+  const storageKey = `dismissed-announcement-${id}`;
+
+  const [dismissed, setDismissed] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return localStorage.getItem(storageKey) === 'true';
+  });
+
+  const currentDate = new Date();
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  const validTypes = ['update', 'alert'];
+  if (!validTypes.includes(announcementType)) {
+    console.error(`[Announcement Error]: Invalid type "${announcementType}".`);
+  }
+
+  const isVisible = currentDate >= start && currentDate <= end;
+  if (!isVisible || dismissed) return null;
+
+  const handleDismiss = () => {
+    localStorage.setItem(storageKey, 'true');
+    setDismissed(true);
+  };
+
+  const isAlert = announcementType === 'alert';
+
+  return (
+    <Stack>
+      <Paper
+        withBorder
+        p="xs"
+        radius="md"
+        shadow="xs"
+        style={{
+          background: isAlert 
+            ? 'linear-gradient(45deg, #fef3c7, #fffbeb)' 
+            : 'linear-gradient(45deg, var(--mantine-color-blue-light), var(--mantine-color-cyan-light))',
+          borderColor: isAlert 
+            ? '#f59e0b' 
+            : 'var(--mantine-color-blue-outline)',
+        }}
+      >
+        <Group justify="space-between" wrap="nowrap">
+          <Group gap="sm">
+            <ThemeIcon 
+              variant="light" 
+              color={isAlert ? "yellow" : "blue"} 
+              radius="xl" 
+              size="sm"
+            >
+              {isAlert ? <IconAlertSquareRounded size={14} /> : <IconSpeakerphone size={14} />}
+            </ThemeIcon>
+            <Text size="sm" fw={500} c={isAlert ? "yellow.9" : "blue.9"}>
+              <strong>{isAlert ? 'Alert' : 'Update'}:</strong> {text}
+            </Text>
+          </Group>
+
+          <CloseButton 
+            size="sm" 
+            iconSize={14} 
+            onClick={handleDismiss}
+            variant="transparent"
+            c={isAlert ? "yellow.9" : "blue.9"}
+            aria-label="Dismiss announcement"
+          />
+        </Group>
+      </Paper>
+    </Stack>
+  );
+};
+
+export default Announcement;

app/src/components/COVID19View.jsx

@@ -14,6 +14,7 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
   const [xAxisRange, setXAxisRange] = useState(null); // Track user's zoom/rangeslider selection
   const plotRef = useRef(null);
   const isResettingRef = useRef(false); // Flag to prevent capturing programmatic resets
+  const stateName = data?.metadata?.location_name;
 
   // This allows the "frozen" Plotly button to access fresh data
   const getDefaultRangeRef = useRef(getDefaultRange);
@@ -69,7 +70,8 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
       type: 'scatter',
       mode: 'lines+markers',
       line: { color: 'black', width: 2, dash: 'dash' },
-      marker: { size: 4, color: 'black' }
+      marker: { size: 4, color: 'black' },
+      hovertemplate: '<b>Observed Data</b><br>Date: %{x}<br>Value: <b>%{y}</b><extra></extra>'
     };
 
     const modelTraces = selectedModels.flatMap(model =>
@@ -79,10 +81,13 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
         if (!forecast || forecast.type !== 'quantile') return []; 
 
         const forecastDates = [], medianValues = [], ci95Upper = [], ci95Lower = [], ci50Upper = [], ci50Lower = [];
+        const hoverTexts = [];
+
         const sortedPredictions = Object.values(forecast.predictions || {}).sort((a, b) => new Date(a.date) - new Date(b.date));
 
         sortedPredictions.forEach((pred) => {
-          forecastDates.push(pred.date);
+          const pointDate = pred.date;
+          forecastDates.push(pointDate);
           const { quantiles = [], values = [] } = pred;
           const findValue = (q) => {
             const index = quantiles.indexOf(q);
@@ -101,6 +106,21 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
               medianValues.push(val_50);
               ci50Upper.push(val_75);
               ci95Upper.push(val_975);
+
+              // Build dynamic hover string
+              const formattedMedian = val_50.toLocaleString(undefined, { maximumFractionDigits: 2 });
+              const formatted50 = `${val_25.toLocaleString(undefined, { maximumFractionDigits: 2 })} - ${val_75.toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
+              const formatted95 = `${val_025.toLocaleString(undefined, { maximumFractionDigits: 2 })} - ${val_975.toLocaleString(undefined, { maximumFractionDigits: 2 })}`;
+
+              hoverTexts.push(
+                `<b>${model}</b><br>` +
+                `Date: ${pointDate}<br>` +
+                `Median: <b>${formattedMedian}</b><br>` +
+                `50% CI: [${formatted50}]<br>` +
+                `95% CI: [${formatted95}]<br>` +
+                `<span style="color: rgba(255,255,255,0.8); font-size: 0.8em">predicted as of ${date}</span>` +
+                `<extra></extra>`
+              );
           } else {
              console.warn(`Missing quantiles for model ${model}, date ${date}, target ${selectedTarget}, prediction date ${pred.date}`);
           }
@@ -114,7 +134,24 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
         return [
           { x: [...forecastDates, ...forecastDates.slice().reverse()], y: [...ci95Upper, ...ci95Lower.slice().reverse()], fill: 'toself', fillcolor: `${modelColor}10`, line: { color: 'transparent' }, showlegend: false, type: 'scatter', name: `${model} 95% CI`, hoverinfo: 'none', legendgroup: model },
           { x: [...forecastDates, ...forecastDates.slice().reverse()], y: [...ci50Upper, ...ci50Lower.slice().reverse()], fill: 'toself', fillcolor: `${modelColor}30`, line: { color: 'transparent' }, showlegend: false, type: 'scatter', name: `${model} 50% CI`, hoverinfo: 'none', legendgroup: model },
-          { x: forecastDates, y: medianValues, name: model, type: 'scatter', mode: 'lines+markers', line: { color: modelColor, width: 2, dash: 'solid' }, marker: { size: 6, color: modelColor }, showlegend: isFirstDate, legendgroup: model }
+          { 
+            x: forecastDates, 
+            y: medianValues, 
+            name: model, 
+            type: 'scatter', 
+            mode: 'lines+markers', 
+            line: { color: modelColor, width: 2, dash: 'solid' }, 
+            marker: { size: 6, color: modelColor }, 
+            showlegend: isFirstDate, 
+            legendgroup: model,
+            text: hoverTexts,
+            hovertemplate: '%{text}',
+            hoverlabel: {
+              bgcolor: modelColor,
+              font: { color: '#ffffff' },
+              bordercolor: '#ffffff'
+            }
+          }
         ];
       })
     );
@@ -195,7 +232,7 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
         size: 10
       }
     },
-    hovermode: 'x unified',
+    hovermode: 'closest',
     dragmode: false, 
     margin: { l: 60, r: 30, t: 30, b: 30 },
     xaxis: {
@@ -300,6 +337,9 @@ const COVID19View = ({ data, metadata, selectedDates, selectedModels, models, se
           onRelayout={handlePlotUpdate} 
         />
       </div>
+      <Text fw={700} size="sm" mb={5} ta="center">
+        {stateName}
+      </Text>
       <div style={{ borderTop: '1px solid #FFF', paddingTop: '1px', marginTop: 'auto' }}>
               <p style={{ 
                 fontStyle: 'italic', 

app/src/components/DataVisualizationContainer.jsx

@@ -35,7 +35,7 @@ const DataVisualizationContainer = () => {
 
   // Configuration for AboutHubOverlay based on viewType
   const aboutHubConfig = {
-    'covid_projs': {
+    'covid_forecasts': {
       title: (
         <Group gap="sm">
           <Title order={4}>COVID-19 Forecast Hub</Title>
@@ -71,7 +71,7 @@ const DataVisualizationContainer = () => {
         </>
       )
     },
-    'rsv_projs': {
+    'rsv_forecasts': {
       title: (
         <Group gap="sm">
           <Title order={4}>RSV Forecast Hub</Title>
@@ -140,7 +140,7 @@ const DataVisualizationContainer = () => {
         </>
       )
     },
-    'flu_projs': {
+    'flu_forecasts': {
       title: (
         <Group gap="sm">
           <Title order={4}>FluSight Forecast Hub</Title>
@@ -206,7 +206,7 @@ const DataVisualizationContainer = () => {
         </>
       )
     },
-    'metrocast_projs': {
+    'metrocast_forecasts': {
       title: (
         <Group gap="sm">
           <Title order={4}>Flu MetroCast</Title>