added teerh visualization

Aquaveo · Nov 8, 2024 · 1560166 · 1560166
1 parent 7805d9e
commit 1560166
Show file tree

Hide file tree

Showing 11 changed files with 414 additions and 5 deletions.
diff --git a/reactapp/features/hydroFabric/components/hydroFabricLinePlot.js b/reactapp/features/hydroFabric/components/hydroFabricLinePlot.js
@@ -39,7 +39,8 @@ const HydroFabricLinePlot = (props) => {
   const { state, actions } = useHydroFabricContext();
 
   useEffect(() => {
-    if (!state.nexus.series) return;    
+    if (!state.nexus.series) return;
+      console.log(state.nexus.series)    
       const nexusSeries = state.nexus.series.map(point => ({x: new Date(point.x), y: point.y}));
 
       const chartData = {
@@ -140,6 +141,47 @@ const HydroFabricLinePlot = (props) => {
     };
   }, [state.troute.series]); // Re-run effect if series data changes
 
+  useEffect(() => {
+    if (!state.teehr.series) return;
+    console.log(state.teehr.series)
+    if (chartRef.current) {
+
+      const teehrSeries = state.teehr.series.map(series =>
+        series.map(point => ({ x: new Date(point.x), y: point.y }))
+      );
+      const chartData = {
+        series: [
+          { name: 'TEERH', data: teehrSeries[0] },
+          { name: 'TEERH 2', data: teehrSeries[1] },
+        ]
+      };
+
+      chartInstance.current = new LineChart(chartRef.current, chartData, chartOptions);
+
+      addAnimationToLineChart(chartInstance.current, easings)
+      makeAxis(
+        chartRef.current,
+        'Time (Date)', 
+        `${state.teehr.variable ? state.teehr.variable.toLowerCase() : state.teehr.variable_list ? state.teehr.variable_list[0].label : null}`
+      )
+
+      makeTitle(
+        chartRef.current, 
+        `${state.teehr.variable ? state.teehr.variable.toLowerCase() : state.teehr.variable_list ? state.teehr.variable_list[0].label : null}: ${state.teehr.id} `)
+    }
+
+    return () => {
+      if(props.singleRowOn){
+        actions.reset_troute();
+        chartRef.current.detach();
+        document.getElementById('x-axis-title')?.remove();
+        document.getElementById('y-axis-title')?.remove();      
+      }
+
+    };
+  }, [state.teehr.series]); // Re-run effect if series data changes
+
+
 
   return (
     <div ref={chartRef} style={{ width: "100%", height: "90%", position: "relative"}}></div>

diff --git a/reactapp/features/hydroFabric/components/teehrSelect.js b/reactapp/features/hydroFabric/components/teehrSelect.js
@@ -0,0 +1,71 @@
+
+
+import {useEffect, Fragment} from 'react';
+import { useHydroFabricContext } from 'features/hydroFabric/hooks/useHydroFabricContext';
+import appAPI from 'services/api/app';
+import SelectComponent from './selectComponent';
+
+
+const TeehrSelect = (props) => {
+  const {state,actions} = useHydroFabricContext();
+
+  useEffect(() => {
+    if (!state.teehr.id) return;
+    actions.reset_teehr();
+    var params = {}   
+    appAPI.getTeehrVariables(params).then((response) => {
+      actions.set_teehr_variable_list(response.teehr_variables);
+      props.toggleSingleRow(false);
+      props.setIsLoading(false);
+
+    }).catch((error) => {
+      props.setIsLoading(false);
+      console.log("Error fetching troute variables", error);
+    })
+    return  () => {
+      if (state.teehr.id) return;
+      actions.reset_teehr();
+    }
+  },[state.teehr.id]);
+
+  useEffect(() => {
+    if (!state.teehr.variable || !state.teehr.id) return;
+    props.setIsLoading(true);
+    var params = {
+      teehr_id: state.teehr.id,
+      teehr_variable: state.teehr.variable
+    }
+    console.log(params)
+    appAPI.getTeehrTimeSeries(params).then((response) => {
+      console.log(response)
+      actions.set_teehr_series(response.data);
+      props.toggleSingleRow(false);
+      props.setIsLoading(false);
+    }).catch((error) => {
+      props.setIsLoading(false);
+      console.log("Error fetching teehr time series", error);
+    })
+    return  () => {
+      if (state.teehr.id) return;
+      actions.reset_teehr();
+    }
+  },[state.teehr.variable]);
+
+  return (
+    <Fragment>
+        {
+          state.teehr.id &&
+          <Fragment>
+            <h5>TEEHR</h5>
+            <label>Current Variable</label>
+            <SelectComponent 
+              optionsList={state.teehr.variable_list} 
+              onChangeHandler={actions.set_teehr_variable}
+            />
+          </Fragment>
+        }
+    </Fragment>
+  );
+};
+
+export default TeehrSelect;
diff --git a/reactapp/features/hydroFabric/components/trouteSelect.js b/reactapp/features/hydroFabric/components/trouteSelect.js
@@ -5,8 +5,6 @@ import { useHydroFabricContext } from 'features/hydroFabric/hooks/useHydroFabric
 import appAPI from 'services/api/app';
 import SelectComponent from './selectComponent';
 
-// const SelectComponent = lazy(() => import('../../features/hydroFabric/components/selectComponent'));
-
 const TRouteSelect = (props) => {
   const {state,actions} = useHydroFabricContext();
 

diff --git a/reactapp/features/hydroFabric/hooks/useHydroFabric.js b/reactapp/features/hydroFabric/hooks/useHydroFabric.js
@@ -20,6 +20,11 @@ const useHydroFabric = () => {
         set_troute_id: (id) => dispatch({ type: hydroFabricActionsTypes.set_troute_id, payload: id }),
         set_troute_variable: (variable) => dispatch({ type: hydroFabricActionsTypes.set_troute_variable, payload: variable }),
         set_troute_variable_list: (list) => dispatch({ type: hydroFabricActionsTypes.set_troute_variable_list, payload: list }),
+        set_teehr_series: (series) => dispatch({ type: hydroFabricActionsTypes.set_teehr_series, payload: series }),
+        set_teehr_id: (id) => dispatch({ type: hydroFabricActionsTypes.set_teehr_id, payload: id }),
+        set_teehr_variable: (variable) => dispatch({ type: hydroFabricActionsTypes.set_teehr_variable, payload: variable }),
+        set_teehr_variable_list: (list) => dispatch({ type: hydroFabricActionsTypes.set_teehr_variable_list, payload: list }),
+        reset_teehr: () => dispatch({ type: hydroFabricActionsTypes.reset_teehr }),
         reset_troute: () => dispatch({ type: hydroFabricActionsTypes.reset_troute }),
         reset_nexus: () => dispatch({ type: hydroFabricActionsTypes.reset_nexus }),
         reset_catchment: () => dispatch({ type: hydroFabricActionsTypes.reset_catchment }),

diff --git a/reactapp/features/hydroFabric/store/actions/actionsTypes.js b/reactapp/features/hydroFabric/store/actions/actionsTypes.js
@@ -11,6 +11,11 @@ const hydroFabricActionsTypes = {
     set_troute_id: 'SET_TROUTE_ID',
     set_troute_variable: 'SET_TROUTE_VARIABLE',
     set_troute_variable_list: 'SET_TROUTE_VARIABLE_LIST',
+    set_teehr_series: 'SET_teehr_SERIES',
+    set_teehr_id: 'SET_teehr_ID',
+    set_teehr_variable: 'SET_teehr_VARIABLE',
+    set_teehr_variable_list: 'SET_teehr_VARIABLE_LIST',
+    set_reset_teehr: 'SET_RESET_teehr',
     reset_nexus: 'RESET_NEXUS',
     reset_catchment: 'RESET_CATCHMENT',
     reset_troute: 'RESET_TROUTE',

diff --git a/reactapp/features/hydroFabric/store/reducers/hydroFabricReducer.js b/reactapp/features/hydroFabric/store/reducers/hydroFabricReducer.js
@@ -21,6 +21,13 @@ const hydroFabricInitialStore = {
             id:null,
             list:null,
             variable_list:null
+        },
+        teehr:{
+            series:null,
+            id:null,
+            list:null,
+            variable:null,
+            variable_list:null
         }
 
     },
@@ -175,6 +182,65 @@ const hydroFabricReducer = (state, action) => {
                     }
                 }
             };
+
+        case hydroFabricActionsTypes.set_teehr_series:
+            return {
+                ...state,
+                state: {
+                    ...state.state,
+                    teehr: {
+                        ...state.state.teehr,
+                        series: action.payload
+                    }
+                }
+            };
+        case hydroFabricActionsTypes.set_teehr_id:
+            return {
+                ...state,
+                state: {
+                    ...state.state,
+                    teehr: {
+                        ...state.state.teehr,
+                        id: action.payload
+                    }
+                }
+            };
+        case hydroFabricActionsTypes.set_teehr_variable:
+            return {
+                ...state,
+                state: {
+                    ...state.state,
+                    teehr: {
+                        ...state.state.teehr,
+                        variable: action.payload
+                    }
+                }
+            };
+        case hydroFabricActionsTypes.set_teehr_variable_list:
+            return {
+                ...state,
+                state: {
+                    ...state.state,
+                    teehr: {
+                        ...state.state.teehr,
+                        variable_list: action.payload
+                    }
+                }
+            };
+        case hydroFabricActionsTypes.reset_teehr:
+            return {
+                ...state,
+                state: {
+                    ...state.state,
+                    teehr: {
+                        series:null,
+                        variable:null,
+                        id:null,
+                        list:null,
+                        variable_list:null
+                    }
+                }
+            };
         case hydroFabricActionsTypes.reset_troute:
             return {
                 ...state,

diff --git a/reactapp/lib/mapUtils.js b/reactapp/lib/mapUtils.js
@@ -282,6 +282,9 @@ const displayFeatureInfo = (event,layer,hydroFabricActions) => {
           if (multipleFeatures.length < 2){
             var nexus_id = multipleFeatures[0].get('id');
             hydroFabricActions.set_nexus_id(nexus_id);
+            if (multipleFeatures[0].get('ngen_usgs') != "none"){
+              hydroFabricActions.set_teehr_id(multipleFeatures[0].get('ngen_usgs'));
+            }
           }
           //zoom it through all the features
           else{

diff --git a/reactapp/services/api/app.js b/reactapp/services/api/app.js
@@ -17,7 +17,14 @@ const appAPI = {
     },
     getTrouteTimeSeries: (params) => {
         return apiClient.get(`${APP_ROOT_URL}getTrouteTimeSeries/`, { params });
+    },
+    getTeehrTimeSeries: (params) => {
+        return apiClient.get(`${APP_ROOT_URL}getTeehrTimeSeries/`, { params });
+    },
+    getTeehrVariables: (params) => {
+        return apiClient.get(`${APP_ROOT_URL}getTeehrVariables/`, { params });
     }
+
 }
 
 export default appAPI;
diff --git a/reactapp/views/ngiab/hydroFabricView2.js b/reactapp/views/ngiab/hydroFabricView2.js
@@ -11,6 +11,8 @@ const HydroFabricLinePlot = lazy(() => import('../../features/hydroFabric/compon
 const CatchmentSelectComponent = lazy(() => import('../../features/hydroFabric/components/catchmentsSelect'));
 const NexusSelectComponent = lazy(() => import('../../features/hydroFabric/components/nexusSelect'));
 const TrouteSelectComponent = lazy(() => import('../../features/hydroFabric/components/trouteSelect'));
+const TeehrSelectComponent = lazy(() => import('../../features/hydroFabric/components/teehrSelect'));
+
 
 const HydroFabricView = (props) => {
   const {state,actions} = useHydroFabricContext();
@@ -41,7 +43,13 @@ const HydroFabricView = (props) => {
                     setIsLoading={props.setIsLoading} 
                 />
             </Suspense>
-
+            <Suspense fallback={<LoadingAnimation />}>
+                <TeehrSelectComponent 
+                    toggleSingleRow = {props.toggleSingleRow} 
+                    singleRowOn={props.singleRowOn} 
+                    setIsLoading={props.setIsLoading} 
+                />
+            </Suspense>
       </SelectContainer>
 
       <Suspense fallback={<LoadingAnimation />}>

diff --git a/tethysapp/ngiab/controllers.py b/tethysapp/ngiab/controllers.py
@@ -11,6 +11,11 @@
     check_troute_id,
     get_troute_vars,
     get_troute_df,
+    append_ngen_usgs_column,
+    append_nwm_usgs_column,
+    get_configuration_variable_pairs,
+    get_teehr_joined_ts_path,
+    get_teehr_ts,
 )
 
 from .app import App
@@ -78,7 +83,13 @@ def getNexuslayer(request, app_workspace):
 
     # Convert the DataFrame to the "EPSG:3857" coordinate system
     gdf = gdf.to_crs("EPSG:3857")
-    data = json.loads(gdf.to_json())
+
+    # Append ngen_usgs and nwm_usgs columns
+    gdf = append_ngen_usgs_column(gdf, app_workspace)
+    gdf = append_nwm_usgs_column(gdf, app_workspace)
+    filtered_gdf = gdf[gdf["ngen_usgs"] != "none"]
+    data = json.loads(filtered_gdf.to_json())
+    # data = json.loads(gdf.to_json())
 
     response_object["geojson"] = data
     # response_object["list_ids"] = nexus_select_list
@@ -145,3 +156,25 @@ def getTrouteTimeSeries(request, app_workspace):
         data = []
 
     return JsonResponse({"data": data})
+
+
+@controller(app_workspace=True)
+def getTeehrTimeSeries(request, app_workspace):
+    teehr_id = request.GET.get("teehr_id")
+    teehr_config_variable = request.GET.get("teehr_variable")
+    teehr_configuration = teehr_config_variable.split("-")[0]
+    teehr_variable = teehr_config_variable.split("-")[1]
+    teehr_ts_path = get_teehr_joined_ts_path(
+        app_workspace, teehr_configuration, teehr_variable
+    )
+    teehr_ts = get_teehr_ts(teehr_ts_path, teehr_id)
+    return JsonResponse({"data": teehr_ts})
+
+
+@controller(app_workspace=True)
+def getTeehrVariables(request, app_workspace):
+    try:
+        vars = get_configuration_variable_pairs(app_workspace)
+    except Exception:
+        vars = []
+    return JsonResponse({"teehr_variables": vars})