new page + nowcasting

app/package.json

@@ -22,6 +22,7 @@
     "@uiw/react-json-view": "^2.0.0-alpha.39",
     "chart.js": "^4.5.0",
     "dayjs": "^1.11.13",
+    "driver.js": "^1.4.0",
     "patch-package": "^8.0.1",
     "plotly.js": "^2.30.0",
     "react": "^18.3.1",
@@ -47,4 +48,4 @@
     "postcss-simple-vars": "^7.0.1",
     "vite": "^6.0.1"
   }
-}
+}

app/src/App.jsx

@@ -10,6 +10,8 @@ import MyRespiLensDashboard from './components/myrespi/MyRespiLensDashboard';
 import TournamentDashboard from './components/tournament/TournamentDashboard';
 import UnifiedAppShell from './components/layout/UnifiedAppShell';
 import Documentation from './components/Documentation'
+import ReportingDelayPage from './components/reporting/ReportingDelayPage';
+import ToolsPage from './components/tools/ToolsPage';
 import { Center, Text } from '@mantine/core';
 // import ShutdownBanner from './components/ShutdownBanner';, no longer necessary
 
@@ -42,6 +44,8 @@ const AppLayout = () => {
           <Route path="/forecastle" element={<ForecastleGame />} />
           <Route path="/epidemics10" element={<TournamentDashboard />} />
           <Route path="/myrespilens" element={<MyRespiLensDashboard />} />
+          <Route path="/toolbox" element={<ToolsPage />} />
+          <Route path="/reporting-triangle" element={<ReportingDelayPage />} />
           <Route path="/documentation" element={<Documentation />} />
         </Routes>
       </UnifiedAppShell>

app/src/components/DataVisualizationContainer.jsx

@@ -6,6 +6,7 @@ import DateSelector from './DateSelector';
 import ViewSwitchboard from './ViewSwitchboard';
 import ErrorBoundary from './ErrorBoundary';
 import AboutHubOverlay from './AboutHubOverlay';
+import PathogenFrontPage from './PathogenFrontPage';
 import { IconShare, IconBrandGithub } from '@tabler/icons-react';
 import { useClipboard } from '@mantine/hooks';
 
@@ -253,15 +254,31 @@ const DataVisualizationContainer = () => {
       setSelectedDates([singleDate]);
     }
   }, [viewType, selectedDates, activeDate, setSelectedDates]);
+
+  if (viewType === 'frontpage') {
+    return (
+      <ErrorBoundary onReset={() => window.location.reload()}>
+        <Helmet>
+          <title>RespiLens | Forecasts</title>
+        </Helmet>
+        <Container size="xl" py="xl" style={{ maxWidth: '1400px' }}>
+          <Stack gap="lg">
+            <PathogenFrontPage />
+          </Stack>
+        </Container>
+      </ErrorBoundary>
+    );
+  }
 
   return (
     <ErrorBoundary onReset={() => window.location.reload()}>
       <Helmet>
         <title>RespiLens | {currentDataset?.fullName || 'Forecasts'}</title>
       </Helmet>
       <Container size="xl" py="xl" style={{ maxWidth: '1400px' }}>
-        <Paper shadow="sm" p="lg" radius="md" withBorder>
-          <Stack gap="md" style={{ minHeight: '70vh' }}>
+        <Stack gap="lg">
+          <Paper shadow="sm" p="lg" radius="md" withBorder>
+            <Stack gap="md" style={{ minHeight: '70vh' }}>
             <div style={{
               display: 'grid',
               gridTemplateColumns: windowSize.width > 800 ? 'auto 1fr auto' : '1fr',
@@ -362,8 +379,9 @@ const DataVisualizationContainer = () => {
                 availablePeakModels={availablePeakModels}
               />
             </div>
-          </Stack>
-        </Paper>
+            </Stack>
+          </Paper>
+        </Stack>
       </Container>
     </ErrorBoundary>
   );

app/src/components/PathogenFrontPage.jsx

@@ -0,0 +1,22 @@
+import { SimpleGrid, Stack, Title, Paper } from '@mantine/core';
+import PathogenOverviewGraph from './PathogenOverviewGraph';
+import { useView } from '../hooks/useView';
+
+const PathogenFrontPage = () => {
+  const { selectedLocation } = useView();
+
+  return (
+    <Paper shadow="sm" p="lg" radius="md" withBorder>
+      <Stack gap="md">
+        <Title order={3}>Explore forecasts by pathogen</Title>
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
+          <PathogenOverviewGraph viewType="covid_projs" title="COVID-19" location={selectedLocation} />
+          <PathogenOverviewGraph viewType="flu_projs" title="Flu" location={selectedLocation} />
+          <PathogenOverviewGraph viewType="rsv_projs" title="RSV" location={selectedLocation} />
+        </SimpleGrid>
+      </Stack>
+    </Paper>
+  );
+};
+
+export default PathogenFrontPage;