Merge pull request #31 from ioos/asset_inventory

adding asset inventory to metrics page

.gitignore

@@ -2,4 +2,5 @@
 __pycache__/
 bufr_messages/
 website/deploy/gts_regional.html
-website/deploy/gts_atn.html
+website/deploy/gts_atn.html
+/website/deploy/asset_inventory.html

environment.yml

@@ -5,7 +5,7 @@ dependencies:
   - python=3.11
   - bs4
   - fiscalyear
-  - geopandas
+  - geopandas>=0.13.2
   - jupyter
   - jinja2
   - lxml

website/asset_inventory_config.json

@@ -0,0 +1,10 @@
+{
+  "general_info_text": "Browse the IOOS Asset Inventory.",
+  "general_title": "Browse IOOS asset inventory",
+  "githubpage": "https://ioos.github.io/ioos_metrics/browse",
+  "githubrepo": "https://github.com/ioos/ioos_metrics/",
+  "google_analytics": "https://tag_url.google.co",
+  "google_analytics_code": "some-code",
+  "location_of_metrics": "https://raw.githubusercontent.com/ioos/ioos-asset-inventory/main/2022/processed_inventory.geojson",
+  "main_title": "IOOS Asset Inventory"
+}

website/create_asset_inventory_page.py

@@ -0,0 +1,121 @@
+# This script run once creates a catalog landing page based on the *_config.json file
+# reference when called. E.g., python create_gts_regional_landing_page.py EcoSys_config.json
+from jinja2 import Environment, FileSystemLoader
+import json
+import os
+import pandas as pd
+import geopandas
+import plotly.express as px
+import plotly
+import folium
+
+
+def write_html_index(template, configs, org_config):
+    root = os.path.dirname(os.path.abspath(__file__))
+    # root = path to output directory
+    filename = os.path.join(root, "deploy", "asset_inventory.html")
+    with open(filename, "w", encoding="utf-8") as fh:
+        fh.write(template.render(org_config=org_config, configs=configs))
+
+
+def load_template():
+    root = os.path.dirname(os.path.abspath(__file__))
+    templates_dir = os.path.join(root, "templates")
+    env = Environment(loader=FileSystemLoader(templates_dir))
+    template = env.get_template("asset_inventory_page.html")
+    return template
+
+
+def write_templates(configs, org_config):
+    template = load_template()
+    write_html_index(template, configs, org_config)
+
+
+def map_plot(gdf):
+
+    m = folium.Map(tiles=None,
+                   zoom_start=1,
+                   )
+
+    # Base Layers
+    tiles = "https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Base/MapServer/tile/{z}/{y}/{x}"
+    gh_repo = "https://github.com/ioos/ioos-metrics"
+    attr = f"Tiles &copy; Esri &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri | <a href=\"{gh_repo}\" target=\"_blank\">{gh_repo}</a>"
+    folium.raster_layers.TileLayer(
+        name="Ocean",
+        tiles=tiles,
+        attr=attr,
+    ).add_to(m)
+
+    folium.raster_layers.TileLayer(
+        'cartodbdark_matter',
+        name="CartoDB",
+    ).add_to(m)
+
+    folium.raster_layers.TileLayer(
+        name="Toner",
+        tiles="Stamen Toner",
+    ).add_to(m)
+
+    tiles = "https://server.arcgisonline.com/ArcGIS/rest/services/Ocean/World_Ocean_Reference/MapServer/tile/{z}/{y}/{x}"
+    folium.raster_layers.TileLayer(
+        tiles=tiles,
+        name="OceanRef",
+        attr=attr,
+        overlay=True,
+        control=False,
+    ).add_to(m)
+
+    columns = gdf.columns.tolist()
+    columns.remove('geometry')
+    #print(columns)
+    for name, group in gdf.groupby(by='RA'):
+        #group["ref"] = [f"<a href=\"{url}\" target=\"_blank\">{url}</a>" for url in group["url"]]
+
+        folium.GeoJson(
+            data=group,
+            name="{}".format(name),
+            marker=folium.CircleMarker(radius=1, color='black'),
+            tooltip=folium.features.GeoJsonTooltip(
+                fields=["RA","station_long_name"],
+#                aliases=["",""],
+            ),
+            popup=folium.features.GeoJsonPopup(
+                fields=columns,
+                #aliases=[""],
+            ), show=True,
+        ).add_to(m)
+
+    folium.LayerControl(collapsed=True).add_to(m)
+
+    m.fit_bounds(m.get_bounds())
+    #m.save("test.html")
+
+    map_out = m._repr_html_()
+
+    return map_out
+
+
+def main(org_config):
+    configs = dict()
+
+    file = org_config["location_of_metrics"]
+
+    gdf = geopandas.read_file(file)
+
+    #print(gdf)
+
+    fig = map_plot(gdf)
+
+    #print(fig)
+
+    configs = {'table': gdf.to_html(), 'figure': fig}
+
+    write_templates(configs, org_config)
+
+
+if __name__ == "__main__":
+    org_config_file = "asset_inventory_config.json"
+    with open(org_config_file) as f:
+        org_config = json.load(f)
+    main(org_config)

website/deploy/index.html

@@ -34,6 +34,10 @@ <h1 class="header_title">NOAA Integrated Ocean Observing System Metrics</h1>
         <button class="main_button" onclick="location.href='./gts_atn.html';"
                 value="Browse ATN GTS Metrics">Browse ATN GTS Metrics
         </button>
+
+        <button class="main_button" onclick="location.href='./asset_inventory.html';"
+                value="Browse ATN GTS Metrics">Asset Inventory
+        </button>
         &nbsp;&nbsp;&nbsp;
         <button class="main_button" onclick="location.href='mailto:someone@email.com';" value="Contact IOOS">
             Contact IOOS

website/deploy/static/main.css

@@ -381,6 +381,19 @@ button.icon_small[disabled] {
 
 }
 
+.mapbox {
+  width: 900px;
+  height: 550px;
+  border: 1px solid black;
+  /*border-width: 0 1px 0 1px;*/
+  margin-left: 40px;
+  margin-bottom: 40px;
+  color: black;
+  display: flex;
+  flex-direction: column;
+
+}
+
 .box2 {
   color: white;
   height: auto;

website/templates/asset_inventory_page.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {#<!-- Global site tag (gtag.js) - Google Analytics --> #}
+    <script async src="{{org_config.google_analytics}}"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config',"{{org_config.google_analytics_code}}" );
+
+
+
+    </script>
+    <title>{{org_config.main_title}}</title>
+    <link rel="icon" type="image/png"
+          href="https://github.com/ioos/documentation-theme-jekyll/raw/main/images/favicon.ico">
+    <link type="text/css" rel="stylesheet" href="./static/main.css"/>
+
+</head>
+<body>
+<main role="main" class="container">
+    <div class="mywrap_head">
+        <img src="https://github.com/ioos/documentation-theme-jekyll/raw/main/images/logo-navbar.png"
+             alt="NOAA IOOS Logo" height="75">&nbsp;&nbsp;&nbsp;
+        <h1 class="header_title">NOAA Integrated Ocean Observing System Metrics</h1>
+    </div>
+    <div class="divider"></div>
+    <div class="mywrap_head">
+        <button class="header_button" onclick="location.href='./index.html';" value="Metrics homepage">Metrics
+            Homepage
+        </button>
+        {#<!--<button class="header_button" onclick="location.href='{{org_config.githubrepo}}';" value="Explore Resources">
+            Explore Resources
+        </button>
+        <button class="header_button" onclick="location.href='{{org_config.githubrepo}}';" value="Contact IOOS">Contact
+            IOOS
+        </button>-->#}
+    </div>
+    <div class="divider"></div>
+    <div class="mywrap">
+        <h2 class="title">{{org_config.general_title}} <a href=https://github.com/ioos/ioos-asset-inventory/tree/main/2022>here</a>
+        </h2>
+    </div>
+
+    <div class="mapbox">
+    {{configs.figure}}
+    </div>
+
+    <div>
+        {{configs.table}}
+    </div>
+
+    <div class="divider_thin"></div>
+
+
+    <div class="divider"></div>
+
+    <footer>
+        <img src="https://github.com/ioos/documentation-theme-jekyll/raw/main/images/IOOS_Emblem_Tertiary_B_RGB.png"
+             alt="NOAA IOOS Logo" height="75">
+        <div class="mywrap_center">
+            <a class="mylink line" href="https://www.commerce.gov/">U.S. Department of Commerce</a>
+            <a class="mylink line" href="https://www.noaa.gov">National Oceanographic and Atmospheric Administration</a>
+            <a class="mylink" href="https://www.ioos.noaa.gov/">NOAA IOOS</a>
+        </div>
+    </footer>
+    {#<!--<div class ="attribution">Icons by icons8 https://icons8.com/</div>--> #}
+</main>
+<script>
+        var sidenav = document.getElementsByClassName("sidenav");
+        var menu = document.getElementById("menu");
+        var menulabel = document.getElementsByClassName("menulabel");
+
+
+            // sidenav[0].style.display="none";
+
+        function simpleSearch(val) {
+            var input, filter, ul, box, box_each, box_each_abbrev, box_each_keywords, box_each_drawer, i, txtValue;
+            if(val === undefined){
+              input = document.getElementById("myInput");
+              filter = input.value.toUpperCase();
+            }
+            else {
+              filter = val.toUpperCase();
+            }
+            box = document.getElementsByClassName("box");
+            for (i = 0; i < box.length; i++) {
+                box_each = box[i].getElementsByClassName("longTitle")[0];
+                box_each_abbrev = box[i].getElementsByClassName("shortTitle")[0];
+                box_each_keywords = box[i].getElementsByClassName("keywords")[0];
+                box_each_drawer = box[i].getElementsByClassName("toolbox_drawers")[0];
+                //console.log(box_each_keywords); // For Debugging
+                txtValue = box_each_abbrev.innerText; //box_each.textContent + " " + box_each_abbrev.innerText + " " + box_each_keywords.innerText + " " + box_each_drawer.innerText;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                    box[i].style.display = "";
+                } else {
+                    box[i].style.display = "none";
+                }
+            }
+        }
+
+        function drawerSearch(val) {
+            var input, filter, ul, box, box_each, i, txtValue;
+            if(val === undefined){
+              input = document.getElementById("myInput");
+              filter = input.value.toUpperCase();
+            }
+            else {
+              filter = val.toUpperCase();
+            }
+            box = document.getElementsByClassName("box");
+            for (i = 0; i < box.length; i++) {
+                box_each = box[i].getElementsByClassName("toolbox_drawers")[0];
+                txtValue = box_each.textContent;
+                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                    box[i].style.display = "";
+                } else {
+                    box[i].style.display = "none";
+                }
+            }
+        }
+
+        function resetSearch() {
+            var box, i;
+            box = document.getElementsByClassName("box");
+            for (i = 0; i < box.length; i++) {
+              box[i].style.display = "";
+            }
+        }
+
+        function menuClick(x) {
+          // x.classList.toggle("change");
+          menulabel[0].classList.toggle("change");
+          sidenav[0].classList.toggle("open");
+          menu.classList.toggle("is_active");
+          let y =x.getAttribute("aria-expanded");
+          let t;
+          if (y == "true"){
+            y = "false"
+            t="-1";
+          }
+          else {
+            y = "true";
+            t="0";
+          }
+          x.setAttribute("aria-expanded", x);
+
+           }
+          // boxcontainer
+
+
+
+
+
+
+
+
+
+</script>
+</body>
+</html>