Merge pull request #117 from RENCI/obs-data-error-msgs

Adding a better error msg on funky obs data returns.
RENCI · Jul 17, 2024 · 1b010c0 · 1b010c0
2 parents 0b3b7fe + f301e4a
commit 1b010c0
Showing 1 changed file with 59 additions and 41 deletions.
diff --git a/src/components/dialog/observation-chart.js b/src/components/dialog/observation-chart.js
@@ -27,6 +27,9 @@ console.error = (...args) => {
   error(...args);
 };
 
+// define a global variable for the error message
+const errorMsg = "";
+
 /**
  * Retrieves and returns the chart data in json format
  *
@@ -42,53 +45,29 @@ function getObsChartData(url) {
         // create the function to call for data
         queryFn: async () => {
             // make the call to get the data
-            const { data } = await axios.get(url);
+            const ret_val = await axios
+                // make the call to get the data
+                .get(url)
+                // use the data returned
+                .then (( response ) => {
+                    // return the data
+                    return response.data;
+                })
+                // otherwise post the issue to the console log
+                .catch (( error ) => {
+                    // send the error message to the console
+                    console.error(error.message);
+
+                    // make sure we dont render anything
+                    return "";
+                });
 
             // return the csv data in json format
-            return csvToJSON(data);
+            return csvToJSON(ret_val);
         }
     });
 }
 
-/**
- * Creates the chart.
- *
- * @param url
- * @returns {JSX.Element}
- * @constructor
- */
-function CreateObsChart(url) {
-    // get the settings for the Y-axis min/max values
-    const { obsChartY } = useSettings();
-
-    // call to get the data. expect back some information too
-    const { status, data, error } = getObsChartData(url.url);
-
-    // render the chart
-    return (
-        <ResponsiveContainer width="100%" height="100%">
-            { status === 'pending' ? (
-                <div>Loading...</div>
-            ) : status === 'error' ? (
-                <div>Error: { error.message }</div>
-            ) : (
-                <LineChart data={ data } margin={{ left: -10 }}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="time" allowDuplicatedCategory={ false } />
-                    <YAxis tickCount="10" domain={ obsChartY } />
-                    <Tooltip />
-                    <Legend align={ 'center' } />
-                    <Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" strokeDasharray="3 1" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" strokeDasharray="4 1 2" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} />
-                    <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
-                </LineChart>
-            )}
-        </ResponsiveContainer>
-    );
-}
-
 /**
  * converts CSV data into json format
  *
@@ -160,3 +139,42 @@ function csvToJSON(csvData) {
         return ret_val;
     }
 }
+
+/**
+ * Creates the chart.
+ *
+ * @param url
+ * @returns {JSX.Element}
+ * @constructor
+ */
+function CreateObsChart(url) {
+    // get the settings for the Y-axis min/max values
+    const { obsChartY } = useSettings();
+
+    // call to get the data. expect back some information too
+    const { status, data } = getObsChartData(url.url);
+
+    // render the chart
+    return (
+        <ResponsiveContainer width="100%" height="100%">
+            { status === 'pending' ? (
+                <div>Gathering chart data...</div>
+            ) : status === 'error' ? (
+                <div>There was a problem getting observation data for this location.</div>
+            ) : (
+                <LineChart data={ data } margin={{ left: -10 }}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="time" allowDuplicatedCategory={ false } />
+                    <YAxis tickCount="10" domain={ obsChartY } />
+                    <Tooltip />
+                    <Legend align={ 'center' } />
+                    <Line type="monotone" dataKey="Observations" stroke="black" strokeWidth={2} dot={false} isAnimationActive={false} />
+                    <Line type="monotone" strokeDasharray="3 1" dataKey="NOAA Tidal Predictions" stroke="teal" strokeWidth={2} dot={false} isAnimationActive={false} />
+                    <Line type="monotone" dataKey="APS Nowcast" stroke="CornflowerBlue" strokeWidth={2} dot={false} isAnimationActive={false} />
+                    <Line type="monotone" strokeDasharray="4 1 2" dataKey="APS Forecast" stroke="LimeGreen" strokeWidth={2} dot={false} isAnimationActive={false} />
+                    <Line type="monotone" dataKey="Difference (APS-OBS)" stroke="red" strokeWidth={2} dot={false} isAnimationActive={false} />
+                </LineChart>
+            )}
+        </ResponsiveContainer>
+    );
+}