Merge pull request #25 from microbiomedata/24-refgraph-display-names-…

…of-fields-containing-references `refgraph`: Display names of fields represented by edges connected to selected node
microbiomedata · Sep 12, 2024 · 2fcfd9f · 2fcfd9f
2 parents cd648df + 8e3246d
commit 2fcfd9f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/refscan/refgraph.py b/refscan/refgraph.py
@@ -181,7 +181,20 @@ def graph(
         edge_id = f"{source_name}__to__{target_name}"
         edge_ids = [e["data"]["id"] for e in edges]
         if edge_id not in edge_ids:
-            edges.append(dict(data=dict(id=edge_id, source=source_name, target=target_name)))
+            edge = dict(data=dict(id=edge_id, source=source_name, target=target_name, source_fields=[]))
+            edges.append(edge)
+
+        # Ensure this edge's `data.source_fields` list accounts for this reference's source field name.
+        edge = next(e for e in edges if e["data"]["id"] == edge_id)  # gets the matching edge
+        if r.source_field_name not in edge["data"]["source_fields"]:  # avoids repeating the field name
+            edge["data"]["source_fields"].append(r.source_field_name)
+
+    # Replace each edge's `source_fields` property with a `label` property containing a comma-delimited string.
+    # Example: if `source_fields` contains ["a", "b", "c"] -> `label` will contain "a, b, c"
+    # Reference: https://docs.python.org/3/library/stdtypes.html#dict.pop
+    for edge in edges:
+        source_fields: list = edge["data"].pop("source_fields", [])  # removes the `source_fields` property
+        edge["data"]["label"] = ", ".join(source_fields)
 
     console.print(f"Nodes: {len(nodes)}")
     console.print(f"Edges: {len(edges)}")

diff --git a/refscan/templates/graph.template.html b/refscan/templates/graph.template.html
@@ -100,7 +100,7 @@
             container: document.getElementById("graph-container"),
             elements: graphData,
             layout: {
-                name: "circle" // Options include: "circle", "grid", and maybe others
+                name: "circle" // For other options, see: https://js.cytoscape.org/#layouts
             },
             style: [
                 {
@@ -113,6 +113,8 @@
                 {
                     selector: "edge",
                     style: {
+                        fontSize: "0.75em",
+                        textRotation: "autorotate", // parallel to the edge
                         lineColor: "#999999",
                         targetArrowColor: "#999999",
                         targetArrowShape: "triangle",
@@ -131,6 +133,7 @@
                 {
                     selector: "edge.outgoer",
                     style: {
+                        label: "data(label)",
                         lineColor: "#00FF00",
                         targetArrowColor: "#00FF00",
                         width: 3,
@@ -147,6 +150,7 @@
                 {
                     selector: "edge.incomer",
                     style: {
+                        label: "data(label)",
                         lineColor: "#FFA500",
                         targetArrowColor: "#FFA500",
                         width: 3,