Better geo-point data error handling

package.json

@@ -64,6 +64,7 @@
     "@turf/distance": "^7.1.0",
     "@turf/flatten": "^7.1.0",
     "axios": "^1.7.7",
+    "axios-retry": "^4.5.0",
     "core-js": "^3.38.1",
     "cssify": "^0.8.0",
     "d3": "^7.9.0",

src/components/dialog/observation-chart.js

@@ -1,7 +1,10 @@
 import React, { Fragment } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Typography } from '@mui/material';
 import axios from 'axios';
+import axiosRetry from 'axios-retry';
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip, ReferenceLine } from 'recharts';
-import { useQuery } from '@tanstack/react-query';
+
 import dayjs from 'dayjs';
 
 // install day.js for UTC visual formatting
@@ -14,7 +17,7 @@ dayjs.extend(utc);
  * renders the observations as a chart
  *
  * @param dataUrl
- * @returns {JSX.Element}
+ * @returns JSX.Element
  * @constructor
  */
 export default function ObservationChart(chartProps) {
@@ -40,6 +43,12 @@ console.error = (...args) => {
  * @returns { json }
  */
 function getObsChartData(url, setLineButtonView) {
+
+    // configure the retry count to be zero
+    axiosRetry(axios, {
+       retries: 0
+    });
+
     // return the data to the caller
     return useQuery( {
         // specify the data key and url to use
@@ -58,16 +67,19 @@ function getObsChartData(url, setLineButtonView) {
                 })
                 // otherwise post the issue to the console log
                 .catch (( error ) => {
-                    // send the error message to the console
-                    console.error(error.message);
-
                     // make sure we do not render anything
-                    return error.message;
+                    return error.response.status;
                 });
 
-            // return the csv data in json format
-            return csvToJSON(ret_val, setLineButtonView);
-        }
+            // if there was not an error
+            if (ret_val !== 500) {
+                // return the csv data in json format
+                return csvToJSON(ret_val, setLineButtonView);
+            }
+            else
+                // just return nothing and nothing will be rendered
+                return '';
+        }, refetchOnWindowFocus: false
     });
 }
 
@@ -79,7 +91,7 @@ function getObsChartData(url, setLineButtonView) {
  */
 function csvToJSON(csvData, setLineButtonView) {
     // ensure that there is csv data to convert
-    if (csvData !== "" && csvData.indexOf('Error') < 0 && csvData.indexOf('fail') < 0) {
+    if (csvData !== "") {
         // split on carriage returns
         const lines = csvData.split("\n");
 
@@ -183,9 +195,6 @@ function csvToJSON(csvData, setLineButtonView) {
         // return the json data representation
         return ret_val;
     }
-
-    // return something
-    return '';
 }
 
 /**
@@ -265,39 +274,33 @@ function get_yaxis_ticks(data) {
         // return the new y-axis array range
         return ret_val;
     }
-    // else return nothing
-    else
-        return null;
 }
 
 /**
  * Creates the chart.
  *
  * @param url
- * @returns {JSX.Element}
+ * @returns JSX.Element
  * @constructor
  */
 function CreateObsChart(c) {
     // call to get the data. expect back some information too
     const { status, data } = getObsChartData(c.chartProps.url, c.chartProps.setLineButtonView);
 
-    // get the domain bounds
-    const maxValue = get_yaxis_ticks(data);
-
     // render the chart
     return (
         <Fragment>
         {
-            status === 'pending' ? ( <div>Gathering chart data...</div> ) :
-            status === 'error' ? ( <div>There was a problem with collecting data for this location.</div> ) :
+            status === 'pending' ? ( <Typography sx={{ alignItems: 'center', fontSize: 12 }}>Gathering chart data...</Typography> ) :
+                (status === 'error' || data === '') ? ( <Typography sx={{ alignItems: 'center', color: 'red', fontSize: 12 }}>There was a problem collecting data for this location.</Typography> ) :
                 <ResponsiveContainer>
                     <LineChart data={ data } margin={{ left: -25 }} isHide={ c.chartProps.isHideLine }>
                         <CartesianGrid strokeDasharray="1 1" />
 
                         <XAxis tick={{ stroke: 'tan', strokeWidth: .5 }} tickSize="10" dataKey="time" tickFormatter={ (value) => formatX_axis(value) }/>
 
                         <ReferenceLine y={0} stroke="Black" strokeDasharray="3 3" />
-                        <YAxis ticks={ maxValue } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } />
+                        <YAxis ticks={ get_yaxis_ticks(data) } tick={{ stroke: 'tan', strokeWidth: .5 }} tickFormatter={ (value) => formatY_axis(value) } />
 
                         <Tooltip />
 

src/components/map/adcirc-raster-layer.js

@@ -131,7 +131,7 @@ export const AdcircRasterLayer = (layer) => {
                         "station_name": l_props['product_name'] + " " + id,
                         "lat": lat,
                         "lon": lon,
-                        "location_name": l_props['product_name'] + "s over time (lon, lat): " + id,
+                        "location_name": layer.properties['product_name'].split(' ').slice(1).join(' ') + " at (lon, lat): " + id,
                         "model_run_id": layer.group,
                         "data_source": (l_props['event_type'] + '_' + l_props['grid_type']).toUpperCase(),
                         "source_name": l_props['model'],