pacificclimate · QSparks · May 19, 2026 · Apr 22, 2026 · Apr 22, 2026 · Apr 22, 2026
diff --git a/app/index.html b/app/index.html
@@ -3,7 +3,9 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="https://services.pacificclimate.org/plan2adapt/app/favicon.ico" />
+  <link rel="preconnect" href="https://swarm.pacificclimate.org" crossorigin />
+  <link rel="dns-prefetch" href="//delivery.maps.gov.bc.ca" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="preload" as="image" href="https://swarm.pacificclimate.org/tiles/bc-albers-lite/6/33/29.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vector Hydrologic Model Output</title>
@@ -14,4 +16,4 @@
   <script type="module" src="/src/main.jsx"></script>
 </body>
 
-</html>
+</html>
diff --git a/app/public/favicon.ico b/app/public/favicon.ico
diff --git a/app/src/App.jsx b/app/src/App.jsx
@@ -1,12 +1,5 @@
-import React from 'react';
 import MapComponent from "./components/map/MapComponent.jsx";
 
-console.log("Rendering App...");
-const App = () => {
-  console.log("Rendering MapComponent from App...");
-  return <MapComponent />;
-};
-
-console.log("Rendering MapComponent...");
+const App = () => <MapComponent />;
 
 export default App;
diff --git a/app/src/assets/logo.png b/app/src/assets/logo.png
diff --git a/app/src/assets/logo.webp b/app/src/assets/logo.webp
diff --git a/app/src/components/info/HelpGuide.jsx b/app/src/components/info/HelpGuide.jsx
@@ -4,6 +4,26 @@ import "./HelpGuide.css";
 
 const OGL_URL =
   "https://www2.gov.bc.ca/gov/content/data/policy-standards/data-policies/open-data/open-government-licence-bc";
+const CNRM_ESM2_1_URL =
+  "https://www.wdc-climate.de/ui/cmip6?input=CMIP6.CMIP.CNRM-CERFACS.CNRM-ESM2-1";
+const FGOALS_G3_URL =
+  "https://www.wdc-climate.de/ui/cmip6?input=CMIP6.CMIP.CAS.FGOALS-g3";
+const IPSL_CM6A_LR_URL =
+  "https://www.wdc-climate.de/ui/cmip6?input=CMIP6.CMIP.IPSL.IPSL-CM6A-LR";
+const MIROC_ES2L_URL =
+  "https://www.wdc-climate.de/ui/cmip6?input=CMIP6.ScenarioMIP.MIROC.MIROC-ES2L";
+const MPI_ESM1_2_HR_URL =
+  "https://mpimet.mpg.de/en/communication/news/development-of-a-high-resolution-earth-system-model-and-its-application-in-cmip6";
+const MRI_ESM2_0_URL =
+  "https://www.wdc-climate.de/ui/cmip6?input=CMIP6.CMIP.MRI.MRI-ESM2-0";
+const NORESM2_LM_URL = "https://noresm-docs.readthedocs.io/en/noresm2/";
+const TAIESM1_URL = "https://github.com/rceclccr/TaiESM-docs";
+const UKESM1_0_LL_URL =
+  "https://ukesm.ac.uk/cmip-es-documentation/ukesm1-0-ll/";
+const PNWNAMET_URL =
+  "https://www.uvic.ca/pcic/data-analysis-tools/data-portal/daily-gridded-meteorology/index.php";
+const SSP_URL =
+  "https://climatedata.ca/resource/understanding-shared-socio-economic-pathways-ssps/";
 
 const HelpGuide = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -92,6 +112,16 @@ const HelpGuide = () => {
                 </ul>
               </section>
 
+              <section>
+                <h3>Feature Name Search</h3>
+                <ul>
+                  <li>Use top-left panel to search for features by name</li>
+                  <li>Enter the lake or river name</li>
+                  <li>Select a name from the drop-down of filtered names</li>
+                  <li>The selected feature will be highlighted in light blue</li>
+                </ul>
+              </section>
+
               <section>
                 <h3>Downloading Data</h3>
                 <ol>
@@ -107,40 +137,162 @@ const HelpGuide = () => {
                 <h3>Variables</h3>
                 <ul>
                   <li>
-                    <strong>Simulated outflows (m³/s)</strong>
+                    <strong>Streamflow (m³/s)</strong>
                   </li>
                   <li>
-                    <strong>Observed outflows (m³/s)</strong>
+                    <strong>Water Temperature or lake surface temperature (°C)</strong>
                   </li>
                   <li>
-                    <strong>Simulated reservoir inflows (m³/s)</strong>
+                    <strong>Saturated dissolved oxygen (mg/L)</strong>
                   </li>
                 </ul>
               </section>
 
               <section>
-                <h3>Models</h3>
+                <h3>Models (Forcing)</h3>
+                <p>
+                  <strong>Downscaled Climate Projections</strong>
+                </p>
                 <ul>
                   <li>
-                    <strong>CanESM2</strong>:{" "}
+                    <strong>CNRM-ESM2-1</strong>:{" "}
+                    <a
+                      href={CNRM_ESM2_1_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      CNRM-CERFACS, Earth Systems Model second generation
+                    </a>
+                  </li>
+                  <li>
+                    <strong>FGOALS-g3</strong>:{" "}
+                    <a
+                      href={FGOALS_G3_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Chinese Academy of Sciences, Flexible Global
+                      Ocean-Atmosphere-Land System Model grid-point Version 3
+                    </a>
+                  </li>
+                  <li>
+                    <strong>IPSL-CM6A-LR</strong>:{" "}
                     <a
-                      href="https://climate-modelling.canada.ca/climatemodeldata/cgcm4/CanESM2/index.shtml"
+                      href={IPSL_CM6A_LR_URL}
                       target="_blank"
                       rel="noopener noreferrer"
                     >
-                      Canadian Centre for Climate Modelling and Analysis ESM2
-                      (Earth System Model ver. 2)
+                      Institut Pierre Simon Laplace Climate Modelling Centre,
+                      Climate Model Phase 6, low resolution
                     </a>
                   </li>
                   <li>
-                    <strong>PCIC-HYDRO</strong>: An ensemble mean of the six GCM
-                    runs ACCESS1-0_r1i1p1, CanESM2_r1i1pi, CCSM_r2i1p1,
-                    CNRM-CM5_r1i1p1, HadGEM2-ES_r1i1p1 and MPI-ESM-LR_r3i1p1
+                    <strong>MIROC-ES2L</strong>:{" "}
+                    <a
+                      href={MIROC_ES2L_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Model for Interdisciplinary Research on Climate, Earth
+                      System version 2 for Long-term simulations
+                    </a>
                   </li>
+                  <li>
+                    <strong>MPI-ESM1-2-HR</strong>:{" "}
+                    <a
+                      href={MPI_ESM1_2_HR_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Max Planck Institute, Earth System Model version 1.2 high
+                      resolution
+                    </a>
+                  </li>
+                  <li>
+                    <strong>MRI-ESM2-0</strong>:{" "}
+                    <a
+                      href={MRI_ESM2_0_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Meteorological Research Institute, Earth System Model
+                      version 2.0
+                    </a>
+                  </li>
+                  <li>
+                    <strong>NorESM2-LM</strong>:{" "}
+                    <a
+                      href={NORESM2_LM_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Norwegian Earth System Model second version
+                    </a>
+                  </li>
+                  <li>
+                    <strong>TaiESM1</strong>:{" "}
+                    <a
+                      href={TAIESM1_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Taiwan Earth System Model version 1
+                    </a>
+                  </li>
+                  <li>
+                    <strong>UKESM1-0-LL</strong>:{" "}
+                    <a
+                      href={UKESM1_0_LL_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      The UK Meteorological Office, Earth System Model version
+                      1
+                    </a>
+                  </li>
+                </ul>
+                <p>
+                  <strong>Gridded Observations</strong>
+                </p>
+                <ul>
+                  <li>
+                    <strong>PNWNAmet</strong>:{" "}
+                    <a
+                      href={PNWNAMET_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Gridded observations of temperature and precipitation for
+                      Northwest North America.
+                    </a>
+                  </li>
+                </ul>
+              </section>
+
+              <section>
+                <h3>Scenarios</h3>
+                <p>
+                  <strong>Climate Projections</strong>: Historical (1950-2014)
+                  {" + "}
+                  <a href={SSP_URL} target="_blank" rel="noopener noreferrer">
+                    Socio-economic Pathways
+                  </a>{" "}
+                  (2015-2100)
+                </p>
+                <ul>
+                  <li>Historical, SSP2-4.5</li>
+                  <li>Historical, SSP5-8.5</li>
+                </ul>
+                <p>
+                  <strong>Gridded Observations</strong>: Historical only
+                  (1945-2012)
+                </p>
+                <ul>
+                  <li>Historical (PNWNAmet only)</li>
                 </ul>
               </section>
               <section>
-                <h3>Credits & licensing</h3>
+                <h3>Credits & Licensing</h3>
                 <p>
                   This application uses data and services from the BC Geographic
                   Warehouse (DataBC).

diff --git a/app/src/components/info/LogoBox.jsx b/app/src/components/info/LogoBox.jsx
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import logo from "../../assets/logo.png";
+import logo from "../../assets/logo.webp";
 import "./LogoBox.css";
 
 const LogoBox = ({ projectName }) => {
@@ -10,7 +10,14 @@ const LogoBox = ({ projectName }) => {
 
   return (
     <div className="logo-box">
-      <img src={logo} alt="PCIC Logo" className="logo" />
+      <img
+        src={logo}
+        alt="PCIC Logo"
+        className="logo"
+        width="328"
+        height="38"
+        fetchPriority="high"
+      />
       <div className="project-name-container">
         <h1 className="project-name">
           {firstLine}<br />{secondLine}
@@ -24,4 +31,4 @@ LogoBox.propTypes = {
   projectName: PropTypes.string.isRequired,
 };
 
-export default LogoBox;
+export default LogoBox;
diff --git a/app/src/components/map/FwaNameSearch.jsx b/app/src/components/map/FwaNameSearch.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useMap } from "react-leaflet";
+import PropTypes from "prop-types";
 import L from "leaflet";
 import "./FwaNameSearch.css";
 
@@ -126,6 +127,7 @@ export default function FwaNameSearch({ onPickedFeature, fwaStyles }) {
   const map = useMap();
   const [q, setQ] = useState("");
   const [busy, setBusy] = useState(false);
+  const [indexLoading, setIndexLoading] = useState(false);
   const [results, setResults] = useState([]);
   const [error, setError] = useState("");
   const [index, setIndex] = useState(null);
@@ -137,6 +139,7 @@ export default function FwaNameSearch({ onPickedFeature, fwaStyles }) {
   const abortRef = useRef(null);
   const activeKindRef = useRef(null);
   const containerRef = useRef(null);
+  const indexRequestRef = useRef(null);
 
   const SERVER_ERR =
     "The BC Geographic Warehouse Public webserver is unavailable right now. Please try again later.";
@@ -150,9 +153,26 @@ export default function FwaNameSearch({ onPickedFeature, fwaStyles }) {
     clearUnderlay();
   };
 
-  useEffect(() => {
-    loadIndex().then(setIndex).catch(console.error);
-  }, []);
+  const ensureIndexLoaded = async () => {
+    if (index) return index;
+    if (!indexRequestRef.current) {
+      setIndexLoading(true);
+      indexRequestRef.current = loadIndex()
+        .then((data) => {
+          setIndex(data);
+          return data;
+        })
+        .catch((e) => {
+          indexRequestRef.current = null;
+          console.error(e);
+          throw e;
+        })
+        .finally(() => {
+          setIndexLoading(false);
+        });
+    }
+    return indexRequestRef.current;
+  };
 
   useEffect(() => {
     ensureUnderlayPane(map);
@@ -344,15 +364,22 @@ export default function FwaNameSearch({ onPickedFeature, fwaStyles }) {
           placeholder="Search river or lake name…"
           value={q}
           onChange={(e) => {
-            setQ(e.target.value);
+            const nextValue = e.target.value;
+            setQ(nextValue);
             setError("");
-            search(e.target.value);
+            ensureIndexLoaded()
+              .then(() => search(nextValue))
+              .catch(() => {});
           }}
           aria-autocomplete="list"
           aria-expanded={!!results.length}
           aria-controls="fwa-results"
           onFocus={() => {
-            if (q) search(q); // repopulate results when focusing back in
+            ensureIndexLoaded()
+              .then(() => {
+                if (q) search(q); // repopulate results when focusing back in
+              })
+              .catch(() => {});
           }}
         />
         {q && (
@@ -370,7 +397,9 @@ export default function FwaNameSearch({ onPickedFeature, fwaStyles }) {
             ×
           </button>
         )}
-        {busy && <span className="fwa-spinner" aria-label="Loading" />}
+        {(busy || indexLoading) && (
+          <span className="fwa-spinner" aria-label="Loading" />
+        )}
         {error && (
           <div className="fwa-error" role="alert">
             {error}
@@ -454,3 +483,8 @@ export default function FwaNameSearch({ onPickedFeature, fwaStyles }) {
     </div>
   );
 }
+
+FwaNameSearch.propTypes = {
+  onPickedFeature: PropTypes.func,
+  fwaStyles: PropTypes.object,
+};