Latest release

app/src/App.jsx

@@ -10,6 +10,7 @@ import { HelmetProvider } from "react-helmet-async";
 import { ViewProvider } from "./contexts/ViewContext";
 import { useView } from "./hooks/useView";
 import DataVisualizationContainer from "./components/DataVisualizationContainer";
+import MyPlots from "./components/myplots/MyPlots";
 import NarrativeBrowser from "./components/narratives/NarrativeBrowser";
 import SlideNarrativeViewer from "./components/narratives/SlideNarrativeViewer";
 import ForecastleGame from "./components/forecastle/ForecastleGame";
@@ -20,7 +21,6 @@ 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
 
 const ForecastApp = () => {
   // This component uses the view context, so it must be inside the provider.
@@ -59,6 +59,7 @@ const AppLayout = () => {
         <Route path="/narratives/:id" element={<SlideNarrativeViewer />} />
         <Route path="/forecastle" element={<ForecastleGame />} />
         <Route path="/epidemics10" element={<TournamentDashboard />} />
+        <Route path="/myplots" element={<MyPlots />} />
         <Route path="/myrespilens" element={<MyRespiLensDashboard />} />
         <Route path="/toolbox" element={<ToolsPage />} />
         <Route path="/reporting-triangle" element={<ReportingDelayPage />} />

app/src/components/DataVisualizationContainer.jsx

@@ -12,12 +12,17 @@ import {
   List,
 } from "@mantine/core";
 import { useView } from "../hooks/useView";
+import { extractPlotData } from "../hooks/extractPlotDataFromURL";
 import DateSelector from "./DateSelector";
 import ViewSwitchboard from "./ViewSwitchboard";
 import ErrorBoundary from "./ErrorBoundary";
 import AboutHubOverlay from "./AboutHubOverlay";
 import FrontPage from "./FrontPage";
-import { IconShare, IconBrandGithub } from "@tabler/icons-react";
+import {
+  IconShare,
+  IconBrandGithub,
+  IconChartScatter,
+} from "@tabler/icons-react";
 import { useClipboard } from "@mantine/hooks";
 
 const DataVisualizationContainer = () => {
@@ -51,6 +56,17 @@ const DataVisualizationContainer = () => {
   });
   const clipboard = useClipboard({ timeout: 2000 });
 
+  const [isAdded, setIsAdded] = useState(false);
+  const handleSaveToMyPlots = () => {
+    const plotData = extractPlotData(viewType, window.location.href, data);
+    // visual cue to signal it has been added
+    setIsAdded(true);
+    // Reset text after 2 seconds
+    setTimeout(() => setIsAdded(false), 2000);
+    // Temporary console feedback for development
+    console.log("Saved the plot", plotData);
+  };
+
   // Configuration for AboutHubOverlay based on viewType
   const aboutHubConfig = {
     covid_forecasts: {
@@ -552,22 +568,38 @@ const DataVisualizationContainer = () => {
                     </AboutHubOverlay>
                   )}
                   {windowSize.width <= 800 && (
-                    <Tooltip
-                      label={
-                        clipboard.copied
-                          ? "Link copied"
-                          : "Copy link to this view"
-                      }
-                    >
-                      <Button
-                        variant="light"
-                        size="xs"
-                        leftSection={<IconShare size={16} />}
-                        onClick={handleShare}
+                    <Group gap="xs">
+                      {viewType !== "flu_peak" && (
+                        <Button
+                          variant="light"
+                          size="xs"
+                          mr="xs"
+                          color={isAdded ? "green" : "blue"}
+                          className={isAdded ? "added-text-pulse" : ""}
+                          leftSection={<IconChartScatter size={16} />}
+                          onClick={handleSaveToMyPlots}
+                        >
+                          {isAdded ? "Added!" : "Add to My Plots"}
+                        </Button>
+                      )}
+                      <Tooltip
+                        label={
+                          clipboard.copied
+                            ? "Link copied"
+                            : "Copy link to this view"
+                        }
                       >
-                        {clipboard.copied ? "URL Copied" : "Share View"}
-                      </Button>
-                    </Tooltip>
+                        <Button
+                          variant="light"
+                          size="xs"
+                          color={clipboard.copied ? "green" : "blue"}
+                          leftSection={<IconShare size={16} />}
+                          onClick={handleShare}
+                        >
+                          {clipboard.copied ? "URL Copied!" : "Share View"}
+                        </Button>
+                      </Tooltip>
+                    </Group>
                   )}
                 </div>
                 {currentDataset?.hasDateSelector && windowSize.width > 800 && (
@@ -585,6 +617,19 @@ const DataVisualizationContainer = () => {
                 )}
                 {windowSize.width > 800 && (
                   <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                    {viewType !== "flu_peak" && (
+                      <Button
+                        variant="light"
+                        size="xs"
+                        mr="xs"
+                        color={isAdded ? "green" : "blue"}
+                        className={isAdded ? "added-text-pulse" : ""}
+                        leftSection={<IconChartScatter size={16} />}
+                        onClick={handleSaveToMyPlots}
+                      >
+                        {isAdded ? "Added!" : "Add to My Plots"}
+                      </Button>
+                    )}
                     <Tooltip
                       label={
                         clipboard.copied
@@ -595,10 +640,11 @@ const DataVisualizationContainer = () => {
                       <Button
                         variant="light"
                         size="xs"
+                        color={clipboard.copied ? "green" : "blue"}
                         leftSection={<IconShare size={16} />}
                         onClick={handleShare}
                       >
-                        {clipboard.copied ? "URL Copied" : "Share View"}
+                        {clipboard.copied ? "URL Copied!" : "Share View"}
                       </Button>
                     </Tooltip>
                   </div>

app/src/components/ForecastPlotView.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { useMantineColorScheme, Stack, Text } from "@mantine/core";
+import { useMantineColorScheme, Stack, Text, Box, Center } from "@mantine/core";
 import Plot from "react-plotly.js";
 import Plotly from "plotly.js/dist/plotly";
 import ModelSelector from "./ModelSelector";
@@ -359,6 +359,7 @@ const ForecastPlotView = ({
     return baseConfig;
   }, [calculateYRange, configOverrides]);
 
+  const hasForecasts = projectionsData.length > 1;
   if (requireTarget && !selectedTarget) {
     return (
       <Stack align="center" justify="center" style={{ height: "300px" }}>
@@ -374,12 +375,40 @@ const ForecastPlotView = ({
         timestamp={metadata?.last_updated}
       />
       <div
-        style={{ width: "100%", height: "min(800px, 60vh)", minHeight: 320 }}
+        style={{
+          width: "100%",
+          height: "min(800px, 60vh)",
+          minHeight: 320,
+          position: "relative", // Ensure the container is relative for absolute positioning
+        }}
       >
+        {!hasForecasts && (
+          <Box
+            style={{
+              position: "absolute",
+              top: 80, // Adjusted slightly for the larger main view
+              left: 0,
+              right: 0,
+              zIndex: 1,
+              pointerEvents: "none",
+            }}
+          >
+            <Center>
+              <Text size="sm" c="dimmed" fs="italic">
+                No forecast data available for the current selection
+              </Text>
+            </Center>
+          </Box>
+        )}
+
         <Plot
           ref={plotRef}
           useResizeHandler
-          style={{ width: "100%", height: "100%" }}
+          style={{
+            width: "100%",
+            height: "100%",
+            opacity: hasForecasts ? 1 : 0.6, // Dim the plot if no forecasts exist
+          }}
           data={finalTraces}
           layout={layout}
           config={config}

app/src/components/FrontPage.jsx

@@ -4,6 +4,23 @@ import NHSNOverviewGraph from "./NHSNOverviewGraph";
 import Announcement from "./Announcement";
 import { useView } from "../hooks/useView";
 
+const MyPlotsLink = () => {
+  return (
+    <span>
+      Check out the new{" "}
+      <Anchor
+        href="/myplots"
+        fw={700}
+        c="blue.7"
+        style={{ fontSize: "inherit", verticalAlign: "baseline" }}
+      >
+        My Plots
+      </Anchor>{" "}
+      feature, where you can assemble your own dashboard of saved plots.
+    </span>
+  );
+};
+
 const MetroCastLink = () => {
   const { setViewType } = useView();
 
@@ -41,6 +58,13 @@ const FrontPage = () => {
         announcementType={"update"}
         text={<MetroCastLink />}
       />
+      <Announcement
+        id="new-myplots-feature"
+        startDate="2026-04-06"
+        endDate="2026-06-30"
+        announcementType={"update"}
+        text={<MyPlotsLink />}
+      />
       <Announcement
         id={"hub-seasonal-warning"}
         startDate={"2026-05-31"}

app/src/components/InfoOverlay.jsx

@@ -52,14 +52,15 @@ const InfoOverlay = () => {
         opened={opened}
         onClose={close}
         title={
-          <Group gap="md">
+          <Group gap="sm" wrap="nowrap" align="center">
             <Image
               src="respilens-logo.svg"
               alt="RespiLens logo"
               h={32}
               w={32}
+              fit="contain"
             />
-            <Title order={2} c="blue">
+            <Title order={2} c="blue" style={{ lineHeight: 1 }}>
               RespiLens
             </Title>
           </Group>
@@ -78,12 +79,14 @@ const InfoOverlay = () => {
             <List.Item>
               URL-shareable views for specific forecast settings
             </List.Item>
-            <List.Item>Responsive and mobile-friendly site</List.Item>
-            <List.Item>Frequent and automatic site updates</List.Item>
+            <List.Item>
+              Responsive and mobile-friendly site with frequent and automatic
+              updates
+            </List.Item>
             <List.Item>Multi date, target, and model comparison</List.Item>
             <List.Item>the Forecastle game!</List.Item>
             <List.Item>
-              MyRespiLens, a safe visualization tool for your own data
+              MyRespiLens: a safe visualization tool for your own data
             </List.Item>
           </List>
 
@@ -96,8 +99,8 @@ const InfoOverlay = () => {
             <Anchor href="https://hubverse.io" target="_blank" rel="noopener">
               Hubverse
             </Anchor>{" "}
-            project which standardizes and consolidates forecast data formats.
-            For each of the hub displayed on RespiLens, the data, organization
+            project, which standardizes and consolidates forecast data formats.
+            For each of the hubs displayed on RespiLens, the data, organization,
             and forecasts belong to their respective teams.{" "}
             <strong>
               RespiLens is only a visualization layer, and contains no original
@@ -106,7 +109,7 @@ const InfoOverlay = () => {
           </div>
 
           <Text>
-            You can find information and alternative visualization for each
+            You can find information (and alternative visualization) for each
             pathogen at the following locations:
           </Text>
           <List spacing="xs" size="sm">
@@ -119,15 +122,15 @@ const InfoOverlay = () => {
               >
                 official CDC page
               </Anchor>{" "}
-              –{" "}
+              |{" "}
               <Anchor
                 href="https://reichlab.io/flusight-dashboard/"
                 target="_blank"
                 rel="noopener"
               >
                 Hubverse dashboard
               </Anchor>{" "}
-              –{" "}
+              |{" "}
               <Anchor
                 href="https://github.com/cdcepi/FluSight-forecast-hub"
                 target="_blank"
@@ -155,15 +158,15 @@ const InfoOverlay = () => {
               >
                 official CDC page
               </Anchor>{" "}
-              –{" "}
+              |{" "}
               <Anchor
                 href="https://reichlab.io/covidhub-dashboard"
                 target="_blank"
                 rel="noopener"
               >
                 Hubverse dashboard
               </Anchor>{" "}
-              – 
+              | 
               <Anchor
                 href="https://github.com/CDCgov/covid19-forecast-hub"
                 target="_blank"
@@ -181,15 +184,15 @@ const InfoOverlay = () => {
               >
                 official dashboard
               </Anchor>{" "}
-              –{" "}
+              |{" "}
               <Anchor
                 href="https://reichlab.io/metrocast-dashboard/"
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 site
               </Anchor>{" "}
-              – 
+              |
               <Anchor
                 href="https://github.com/reichlab/flu-metrocast"
                 target="_blank"

app/src/components/layout/MainNavigation.jsx

@@ -1,6 +1,11 @@
 import { useLocation, Link } from "react-router-dom";
 import { Group, Button, Image, Title, Anchor } from "@mantine/core";
-import { IconChartLine, IconTarget, IconDashboard } from "@tabler/icons-react";
+import {
+  IconChartLine,
+  IconTarget,
+  IconDashboard,
+  IconChartScatter,
+} from "@tabler/icons-react";
 import InfoOverlay from "../InfoOverlay";
 import { useView } from "../../hooks/useView";
 
@@ -30,6 +35,12 @@ const MainNavigation = () => {
       icon: IconDashboard,
       active: isActive("/myrespilens"),
     },
+    {
+      href: "/myplots",
+      label: "My Plots (α)",
+      icon: IconChartScatter,
+      active: isActive("/myplots"),
+    },
     // { href: '/documentation', label: 'Documentation', icon: IconClipboard, active: isActive('/documentation')}
   ];