Ref NOAA-EMC#72

Placate Copilot, add config.title to menu header.

Author: Ed Safford

UIdev/ObsMon/src/App.jsx

@@ -24,6 +24,7 @@ function App() {
   const [qTypes, setQTypes] = useState([]);
   const [tTypes, setTTypes] = useState([]);
   const [uvTypes, setUvTypes] = useState([]);
+  const [config, setConfig] = useState(null);
 
   useEffect(() => {
     fetch(withBase('data/gpstypes.json'), { cache: 'no-store' })
@@ -88,6 +89,17 @@ function App() {
       .catch(err => console.error("Failed to load geostationarySatellites:", err));
   }, []);
 
+  // Fetch config on mount
+  useEffect(() => {
+    fetch(withBase("data/configIndex.json"))
+      .then(res => {
+        if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
+        return res.json();
+      })
+      .then(data => setConfig(data))
+      .catch(err => console.error("Failed to load configIndex.json:", err));
+  }, []);
+
   const toggleSection = (name) => {
     setOpenSection(openSection === name ? null : name);
   };
@@ -136,7 +148,17 @@ function App() {
 
     <div className="flex min-h-screen">
       <aside className="w-64  shrink-0 bg-blue-100 p-4 border-r">
-        <h1 className="text-lg font-bold mb-4 underline">Monitoring Dashboard</h1>
+        <h1 className="text-lg font-bold mb-4">
+          <span className="underline" style={{ display: 'block', textAlign: 'center', marginBottom: '0.1rem' }} >
+            Monitoring Dashboard</span>
+
+          {/* Render config.name here if loaded */}
+          {config?.name && (
+            <span style={{ display: 'block', fontWeight: 'normal', textAlign: 'center', marginTop: '0.1rem', fontSize: '1rem' }}>
+              {config.name}
+            </span>
+          )}
+        </h1>
 
         {/* Add current cycle below header */}
         <p className="text-base text-black mb-4">

UIdev/ObsMon/src/components/Home.jsx

@@ -6,6 +6,8 @@ export default function Home() {
     const [config, setConfig] = useState(null);
 
     useEffect(() => {
+        let isMounted = true; // Track if component is mounted
+
         fetch(withBase("data/configIndex.json"))
             .then((res) => {
                 if (!res.ok) {
@@ -14,15 +16,27 @@ export default function Home() {
                 return res.json();
             })
             .then((data) => {
-                setConfig(data);
+                if (isMounted) {
+                    setConfig(data);
+                }
             })
             .catch((err) => {
-                console.error("Failed to load config.json:", err);
+                if (isMounted) {
+                    console.error("Failed to load configIndex.json:", err);
+                }
             });
+
+        return () => {
+            isMounted = false; // Cleanup flag on unmount
+        };
     }, []);
 
     if (!config) {
-        return <div style={{ padding: "2rem" }}>Loading...</div>;
+        return (
+            <div style={{ padding: "2rem" }} role="status" aria-live="polite">
+                Loading...
+            </div>
+        );
     }
 
     return (