added changes

CIROH-UA · Nov 22, 2024 · 0aabbeb · 0aabbeb
1 parent f850148
commit 0aabbeb
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 34 deletions.
diff --git a/reactapp/App.scss b/reactapp/App.scss
@@ -1,16 +1,18 @@
-// @import "custom-bootstrap";
-/* Set bootstrap primary color to be app theme color */
-$primary: #2c3e50;
-
 /* import bootstrap to set changes */
 @import "../node_modules/bootstrap/scss/bootstrap";
 
 :root {
     --ts-header-height: 56px;
+    /* Enabling light mode and dark mode*/
+    color-scheme: light dark;
+
+    /* Assigning light/dark color tokens into variable*/
+    --primary: light-dark(#2c3e50, #bbcddf); 
 }
 
 html, body, #root {
     height: 100%;
+    $primary: var (--primary)
 }
 
 body {

diff --git a/reactapp/components/buttons/HeaderButton.js b/reactapp/components/buttons/HeaderButton.js
@@ -23,20 +23,8 @@ const HeaderButton = ({children, tooltipPlacement, tooltipText, href, ...props})
   const styledButton = (
     <StyledButton href={href} variant="light" size="sm" {...props}>{children}</StyledButton>
   );
-  const styledButtonWithTooltip = (
-    <OverlayTrigger
-      key={tooltipPlacement}
-      placement={tooltipPlacement}
-      overlay={
-        <Tooltip id={`tooltip-${tooltipPlacement}`}>
-          {tooltipText}
-        </Tooltip>
-      }
-    >
-      {styledButton}
-    </OverlayTrigger>
-  );
-  return tooltipText ? styledButtonWithTooltip : styledButton;
+
+  return styledButton;
 }
 
 HeaderButton.propTypes = {

diff --git a/reactapp/features/Map/components/mapgl.js b/reactapp/features/Map/components/mapgl.js
@@ -36,11 +36,13 @@ import { useHydroFabricContext } from 'features/hydroFabric/hooks/useHydroFabric
       map.setFilter('catchments', ['any', ['in', 'divide_id', ""]]);
     }
     if(map.getLayer('flowpaths')){
-      map.setFilter('flowpaths', ['any', ['in', 'id', ""]]);
+      map.setFilter('flowpaths', ["any",["in", "id", ""]]);
+
     }
     if (map.getLayer('cluster-count')) {
       map.moveLayer('cluster-count');
-  }
+    }
+
   };
 
   // Define the Cluster Count Layer
@@ -117,6 +119,7 @@ const MapComponent = () => {
   const [teerhAvailableNexusPoints, setTeerhAvailableNexusPoints] = useState(null);
   const [catchmentConfig, setCatchmentConfig] = useState(null);
   const [flowPathsConfig, setFlowPathsConfig] = useState(null);
+  const [conusGaugesConfig, setConusGaugesConfig] = useState(null);
   const mapRef = useRef(null);
   const [theme, setTheme] = useState('light');
 
@@ -161,10 +164,10 @@ const MapComponent = () => {
       const catchmentLayerConfig = {
         id: 'catchments-layer',
         type: 'fill',
-        source: 'conus',
-        'source-layer': 'catchments', // Replace with actual source layer name
+        source: 'hydrofabric',
+        'source-layer': 'conus_divides', // Replace with actual source layer name
         filter: ['any', ['in', 'divide_id', ...response.catchments]],
-        "paint": {
+        paint: {
           "fill-color": ["rgba", 238, 51, 119, 0.316],
           "fill-outline-color": ["rgba", 238, 51, 119, 0.7],
           "fill-opacity": { "stops": [[7, 0], [11, 1]] }
@@ -173,21 +176,34 @@ const MapComponent = () => {
       setCatchmentConfig(catchmentLayerConfig);
 
       const flowPathsLayerConfig = {
-        "id": "flowpaths-layer",
-        "type": "line",
-        "source": "conus",
-        "source-layer": "flowpaths",
-        "layout": {},
-        "paint": {
+        id: "flowpaths-layer",
+        type: "line",
+        source: "hydrofabric",
+        "source-layer": "conus_flowpaths",
+        paint: {
             "line-color": ["rgba", 0, 119, 187, 1],
             "line-width": { "stops": [[7, 1], [10, 2]] },
             "line-opacity": { "stops": [[7, 0], [11, 1]] }
         },
-        "filter": ["any",["in", "id", ...response.flow_paths_ids]] // Replace with actual
+        filter: ["any",["in", "id", ...response.flow_paths_ids]] // Replace with actual
       }
 
       setFlowPathsConfig(flowPathsLayerConfig);
 
+      const conusGaugesLayerConfig = {
+        id: 'gauges-layer',
+        type: "circle",
+        source: "hydrofabric",
+        "source-layer": "conus_gages",
+        filter: ["any",["in", "nex_id", ...response.nexus_ids]],
+        paint: {
+          "circle-radius": { "stops": [[3, 2], [11, 5]] },
+          "circle-color": ["rgba", 200, 200, 200, 1],
+          "circle-opacity": { "stops": [[3, 0], [9, 1]] }
+        }
+      }
+
+      setConusGaugesConfig(conusGaugesLayerConfig);
 
     }).catch(error => {
       console.log(error);
@@ -201,8 +217,8 @@ const MapComponent = () => {
 
   // Define the PMTiles source URL
   const pmtilesUrl =
-    'pmtiles://https://communityhydrofabric.s3.us-east-1.amazonaws.com/conus.pmtiles';
-
+    // 'pmtiles://https://communityhydrofabric.s3.us-east-1.amazonaws.com/conus.pmtiles';
+    'pmtiles://https://communityhydrofabric.s3.us-east-1.amazonaws.com/map/merged.pmtiles';
     const handleMapClick = async (event) => {
       const map = event.target;
 
@@ -289,6 +305,7 @@ const MapComponent = () => {
 
 
       <Source id="conus" type="vector" url={pmtilesUrl}>
+        <Layer {...conusGaugesConfig} />
         <Layer {...catchmentConfig} />
         <Layer {...flowPathsConfig} />
       </Source>

diff --git a/reactapp/index.css b/reactapp/index.css
@@ -6,11 +6,11 @@
   --text-heading: light-dark(#333333, #f0f0f0); 
   --text-body: light-dark(#555555, #e0e0e0); 
   --background-primary: light-dark(#ff7d7d, #6f0000); 
-  --background-secondary: light-dark(#fffef3, #1a1913); 
+  --background-secondary: light-dark(#fffef3, #1a1913);
 }
 body {
   /* Consuming the color tokens */
-  background-color: var(--bg-primary);
+  background-color: var(--bg-primary) !important;
   color: var(--text-body);
   height: 100%;
   margin: 0;

diff --git a/tethysapp/ngiab/controllers.py b/tethysapp/ngiab/controllers.py
@@ -8,6 +8,7 @@
     get_base_output,
     getCatchmentsIds,
     getNexusIDs,
+    getNexusList,
     check_troute_id,
     get_troute_vars,
     get_troute_df,
@@ -115,6 +116,7 @@ def getGeoSpatialData(request, app_workspace):
     teerh_data = json.loads(teerh_gdf.to_json())
 
     response_object["nexus"] = data
+    response_object["nexus_ids"] = getNexusList(app_workspace)
     response_object["bounds"] = bounds
     response_object["teerh"] = teerh_data
     response_object["catchments"] = getCatchmentsList(app_workspace)

diff --git a/tethysapp/ngiab/utils.py b/tethysapp/ngiab/utils.py
@@ -210,6 +210,13 @@ def getCatchmentsList(app_workspace):
     return [id.split(".csv")[0] for id in catchment_ids_list]
 
 
+def getNexusList(app_workspace):
+    output_base_file = get_base_output(app_workspace)
+    nexus_prefix = "nex-"
+    nexus_ids_list = _list_prefixed_csv_files(output_base_file, nexus_prefix)
+    return [id.split(".csv")[0].split("_output")[0] for id in nexus_ids_list]
+
+
 def getNexusIDs(app_workspace):
     """
     Get a list of Nexus IDs.