Merge pull request #22 from microbiomedata/21-refgraph-display-schema…

…-version-on-web-page `refgraph`: Display app version and schema version on web page
microbiomedata · Sep 7, 2024 · 444746a · 444746a
2 parents 62b9de1 + a729f6a
commit 444746a
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 11 deletions.
diff --git a/refscan/refgraph.py b/refscan/refgraph.py
@@ -9,6 +9,7 @@
 import typer
 import linkml_runtime
 
+from refscan import get_package_metadata
 from refscan.lib.constants import console
 from refscan.lib.helpers import (
     print_section_header,
@@ -46,6 +47,16 @@ def load_template(resource_path: str) -> str:
     return resources.files(package_name).joinpath(resource_path).read_text(encoding="utf-8")
 
 
+def encode_json_value_as_base64_str(json_value: dict | list) -> str:
+    r"""Helper function that encodes the specified JSON value as a base64 string."""
+
+    value_as_string = json.dumps(json_value)
+    string_as_bytes = value_as_string.encode("utf-8")
+    encoded_bytes = base64.b64encode(string_as_bytes)
+    encoded_bytes_as_string = encoded_bytes.decode("utf-8")
+    return encoded_bytes_as_string
+
+
 @app.command("graph")
 def graph(
     # Reference: https://typer.tiangolo.com/tutorial/parameter-types/path/
@@ -182,12 +193,15 @@ def graph(
     html_template = load_template(r"templates/graph.template.html")
 
     # Generate an HTML file (based upon the template) that contains those elements.
-    graph_data_json_str = json.dumps(elements)
-    graph_data_json_bytes = graph_data_json_str.encode("utf-8")
-    graph_data_json_base64 = base64.b64encode(graph_data_json_bytes)
-    graph_data_json_base64_str = graph_data_json_base64.decode("utf-8")
-    html_result = html_template.replace("{{ schema_version }}", schema_view.schema.version)
-    html_result = html_result.replace("{{ graph_data_json_base64 }}", graph_data_json_base64_str)
+    graph_data_json_base64_str = encode_json_value_as_base64_str(elements)
+    graph_metadata_json_base64_str = encode_json_value_as_base64_str(
+        dict(
+            app_version=get_package_metadata("Version"),
+            schema_version=schema_view.schema.version,
+        )
+    )
+    html_result = html_template.replace("{{ graph_data_json_base64 }}", graph_data_json_base64_str)
+    html_result = html_result.replace("{{ graph_metadata_json_base64 }}", graph_metadata_json_base64_str)
 
     if verbose:
         console.print(html_result)

diff --git a/refscan/templates/graph.template.html b/refscan/templates/graph.template.html
@@ -6,20 +6,38 @@
             width: 100%;
             height: 100vh;
         }
+        #metadata-container {
+            font-family: sans-serif;
+            font-size: 0.8em;
+            color: #999999;
+            position: absolute;
+            bottom: 1em;
+            right: 1em;
+            text-align: right;
+        }
+        #metadata-container ul {
+            list-style-type: none;
+            margin: 0;
+        }
     </style>
 </head>
 <body>
 
-<!-- Note: A Python script will replace the `{{ ... }}` placeholder. -->
+<!-- Note: A Python script will replace the `{{ ... }}` placeholders. -->
 <div
         id="graph-data"
         data-graph-data-json-str-base64="{{ graph_data_json_base64 }}"
+        data-graph-metadata-json-str-base64="{{ graph_metadata_json_base64 }}"
 ></div>
 
 <!-- Note: The JavaScript code below will render the above graph data
            as a graph within this HTML element. -->
 <div id="graph-container"></div>
 
+<!-- Note: The JavaScript code below will render metadata about the graph,
+           within this HTML element. -->
+<div id="metadata-container"></div>
+
 <!-- Note: The third-party JavaScript code we're loading here will add a function
            named `cytoscape` to the `window` object (i.e. the global scope).
            Reference: https://js.cytoscape.org/ -->
@@ -32,21 +50,52 @@
         // Note: A Python script will replace the `{{ ... }}` placeholder.
         console.log("Schema version: {{ schema_version }}");
 
-        // Extract the graph data, base64decode it, and parse it as JSON.
+        // Extract the base64-encoded graph metadata and data from the `graph-data` HTML element.
         // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
-        let graphData = []
+        let graphMetadata = {};
+        let graphData = [];
         const graphDataEl = document.getElementById("graph-data");
+        const graphMetadataJsonStrBase64 = graphDataEl.dataset.graphMetadataJsonStrBase64;
         const graphDataJsonStrBase64 = graphDataEl.dataset.graphDataJsonStrBase64;
-        console.log(graphDataJsonStrBase64);
+
+        // Base64-decode the graph metadata and parse it as JSON.
+        try {
+            const graphMetadataJsonStr = atob(graphMetadataJsonStrBase64);
+            graphMetadata = JSON.parse(graphMetadataJsonStr);
+            console.debug("graphMetadata", graphMetadata);
+        } catch (error) {
+            alert("Failed to parse metadata.");
+            console.debug("graphMetadataJsonStrBase64", graphMetadataJsonStrBase64);
+            console.error(error);
+        }
+
+        // Display the graph metadata on the web page.
+        const metadataContainerEl = document.getElementById("metadata-container");
+        const metadataListEl = document.createElement("ul");
+        if (typeof graphMetadata["schema_version"] === "string") {
+            const li = document.createElement("li");
+            li.textContent = `Schema version ${graphMetadata["schema_version"]}`;
+            metadataListEl.appendChild(li);
+        }
+        if (typeof graphMetadata["app_version"] === "string") {
+            const li = document.createElement("li");
+            li.textContent = `refgraph version ${graphMetadata["app_version"]}`;
+            metadataListEl.appendChild(li);
+        }
+        metadataContainerEl.appendChild(metadataListEl);
+
+        // Base64-decode the graph data and parse it as JSON.
         try {
             const graphDataJsonStr = atob(graphDataJsonStrBase64);
             graphData = JSON.parse(graphDataJsonStr);
-            console.log(graphData);
+            console.debug("graphData", graphData);
         } catch (error) {
             alert("Failed to parse reference data.");
+            console.debug("graphDataJsonStrBase64", graphDataJsonStrBase64);
             console.error(error);
         }
 
+        // Display the graph on the web page.
         const cy = window.cytoscape({
             container: document.getElementById("graph-container"),
             elements: graphData,