MetOffice · cpelley · Mar 4, 2025 · Feb 10, 2025 · Feb 10, 2025 · Feb 10, 2025
diff --git a/dagrunner/tests/results/dagrunner.tests.utils.networkx.test_integration.test_basic.html b/dagrunner/tests/results/dagrunner.tests.utils.networkx.test_integration.test_basic.html
@@ -4,15 +4,6 @@
     <meta charset="UTF-8">
     <title>Mermaid diagram lookup</title>
     <script src="../../../visual/mermaid-table-standard.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
-    <script>
-        mermaid.initialize({
-            startOnLoad: false,
-            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'basis' },
-            securityLevel:'loose',  // required for mermaid@9 tooltip functionality
-            maxTextSize: 99999999  // beyond this "Maximum text size in diagram exceeded"
-        });
-    </script>
 </head>
 
 <body>

diff --git a/...sts/results/dagrunner.tests.utils.networkx.test_integration.test_collapse_properties.html b/...sts/results/dagrunner.tests.utils.networkx.test_integration.test_collapse_properties.html
@@ -4,15 +4,6 @@
     <meta charset="UTF-8">
     <title>Mermaid diagram lookup</title>
     <script src="../../../visual/mermaid-table-standard.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
-    <script>
-        mermaid.initialize({
-            startOnLoad: false,
-            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'basis' },
-            securityLevel:'loose',  // required for mermaid@9 tooltip functionality
-            maxTextSize: 99999999  // beyond this "Maximum text size in diagram exceeded"
-        });
-    </script>
 </head>
 
 <body>

diff --git a/dagrunner/tests/results/dagrunner.tests.utils.networkx.test_integration.test_groupby.html b/dagrunner/tests/results/dagrunner.tests.utils.networkx.test_integration.test_groupby.html
@@ -4,15 +4,6 @@
     <meta charset="UTF-8">
     <title>Mermaid diagram lookup</title>
     <script src="../../../visual/mermaid-table-standard.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
-    <script>
-        mermaid.initialize({
-            startOnLoad: false,
-            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'basis' },
-            securityLevel:'loose',  // required for mermaid@9 tooltip functionality
-            maxTextSize: 99999999  // beyond this "Maximum text size in diagram exceeded"
-        });
-    </script>
 </head>
 
 <body>
@@ -24,31 +15,31 @@
 ---
 graph TD
 
-subgraph a
+subgraph a[a]
 0(["0<br>D:a_L:1"])
 click 0 callback "call: ('module.path.a', {'init_arg': 'ia_a'}, {'call_arg': 'ca_a'})<br>prop: 'prop_a'<br>leadtime: 1<br>diagnostic: 'a'"
 1(["1<br>D:a_L:2"])
 click 1 callback "call: ('module.path.a', {'init_arg': 'ia_a'}, {'call_arg': 'ca_a'})<br>prop: 'prop_a'<br>leadtime: 2<br>diagnostic: 'a'"
 end
-subgraph b
+subgraph b[b]
 2(["2<br>D:b_L:1"])
 click 2 callback "call: ('module.path.b', {'init_arg': 'ia_b'}, {'call_arg': 'ca_b'})<br>prop: 'prop_b'<br>leadtime: 1<br>diagnostic: 'b'"
 3(["3<br>D:b_L:2"])
 click 3 callback "call: ('module.path.b', {'init_arg': 'ia_b'}, {'call_arg': 'ca_b'})<br>prop: 'prop_b'<br>leadtime: 2<br>diagnostic: 'b'"
 end
-subgraph c
+subgraph c[c]
 4(["4<br>D:c_L:1"])
 click 4 callback "call: ('module.path.c', {'init_arg': 'ia_c'}, {'call_arg': 'ca_c'})<br>prop: 'prop_c'<br>leadtime: 1<br>diagnostic: 'c'"
 5(["5<br>D:c_L:2"])
 click 5 callback "call: ('module.path.c', {'init_arg': 'ia_c'}, {'call_arg': 'ca_c'})<br>prop: 'prop_c'<br>leadtime: 2<br>diagnostic: 'c'"
 end
-subgraph d
+subgraph d[d]
 6(["6<br>D:d_L:1"])
 click 6 callback "call: ('module.path.d', {'init_arg': 'ia_d'}, {'call_arg': 'ca_d'})<br>prop: 'prop_d'<br>leadtime: 1<br>diagnostic: 'd'"
 7(["7<br>D:d_L:2"])
 click 7 callback "call: ('module.path.d', {'init_arg': 'ia_d'}, {'call_arg': 'ca_d'})<br>prop: 'prop_d'<br>leadtime: 2<br>diagnostic: 'd'"
 end
-subgraph e
+subgraph e[e]
 8(["8<br>D:e_L:1"])
 click 8 callback "call: ('module.path.e', {'init_arg': 'ia_e'}, {'call_arg': 'ca_e'})<br>prop: 'prop_e'<br>leadtime: 1<br>diagnostic: 'e'"
 9(["9<br>D:e_L:2"])

diff --git a/...tests/results/dagrunner.tests.utils.networkx.test_integration.test_groupby_recursive.html b/...tests/results/dagrunner.tests.utils.networkx.test_integration.test_groupby_recursive.html
@@ -4,15 +4,6 @@
     <meta charset="UTF-8">
     <title>Mermaid diagram lookup</title>
     <script src="../../../visual/mermaid-table-standard.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
-    <script>
-        mermaid.initialize({
-            startOnLoad: false,
-            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'basis' },
-            securityLevel:'loose',  // required for mermaid@9 tooltip functionality
-            maxTextSize: 99999999  // beyond this "Maximum text size in diagram exceeded"
-        });
-    </script>
 </head>
 
 <body>
@@ -24,13 +15,13 @@
 ---
 graph TD
 
-subgraph None
+subgraph None[None]
 style None_cc fill:#D4A76A
 subgraph None_cc[cc]
 0(["0<br>Node(diagnostic='None', model='cc', step='zzz')"])
 end
 end
-subgraph a
+subgraph a[a]
 style a_bb fill:#D4A76A
 subgraph a_bb[bb]
 1(["1<br>Node(diagnostic='a', model='bb', step='aaa')"])
@@ -41,16 +32,16 @@
 3(["3<br>Node(diagnostic='a', model='xx', step='aaa')"])
 end
 end
-subgraph x
+subgraph x[x]
 style x_bb fill:#D4A76A
 subgraph x_bb[bb]
 4(["4<br>Node(diagnostic='x', model='bb', step='aaa')"])
 end
 end
-subgraph y
+subgraph y[y]
 5(["5<br>Node(diagnostic='y', model=None, step='zzz')"])
 end
-subgraph z
+subgraph z[z]
 style z_zz fill:#D4A76A
 subgraph z_zz[zz]
 6(["6<br>Node(diagnostic='z', model='zz', step='zzz')"])

diff --git a/...ests/results/dagrunner.tests.utils.networkx.test_integration.test_properties_of_none.html b/...ests/results/dagrunner.tests.utils.networkx.test_integration.test_properties_of_none.html
@@ -4,15 +4,6 @@
     <meta charset="UTF-8">
     <title>Mermaid diagram lookup</title>
     <script src="../../../visual/mermaid-table-standard.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
-    <script>
-        mermaid.initialize({
-            startOnLoad: false,
-            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'basis' },
-            securityLevel:'loose',  // required for mermaid@9 tooltip functionality
-            maxTextSize: 99999999  // beyond this "Maximum text size in diagram exceeded"
-        });
-    </script>
 </head>
 
 <body>

diff --git a/...esults/dagrunner.tests.utils.networkx.test_integration.test_special_characters_words.html b/...esults/dagrunner.tests.utils.networkx.test_integration.test_special_characters_words.html
@@ -4,15 +4,6 @@
     <meta charset="UTF-8">
     <title>Mermaid diagram lookup</title>
     <script src="../../../visual/mermaid-table-standard.js" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
-    <script>
-        mermaid.initialize({
-            startOnLoad: false,
-            flowchart: { useMaxWidth: false, htmlLabels: true, curve: 'basis' },
-            securityLevel:'loose',  // required for mermaid@9 tooltip functionality
-            maxTextSize: 99999999  // beyond this "Maximum text size in diagram exceeded"
-        });
-    </script>
 </head>
 
 <body>

diff --git a/dagrunner/utils/visualisation.py b/dagrunner/utils/visualisation.py
@@ -21,7 +21,7 @@
 if os.environ.get("PYTEST_VERSION") is not None:
     WEBCOMPONENT_PATH = "../../../visual/mermaid-table-standard.js"
 else:
-    WEBCOMPONENT_PATH = "https://cdn.jsdelivr.net/gh/MetOffice/dagrunner@vvisual_tooltip_table/visual/mermaid-table-standard.js"
+    WEBCOMPONENT_PATH = "https://cdn.jsdelivr.net/gh/MetOffice/dagrunner@0.2.2/visual/mermaid-table-standard.js"
 
 
 MERMAID_SUBGRAPH_COLORS = [
@@ -149,15 +149,6 @@ class MermaidHTML:
     <meta charset="UTF-8">
     <title>Mermaid diagram lookup</title>
     <script src="{webcomponent_path}" defer></script>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
-    <script>
-        mermaid.initialize({{
-            startOnLoad: false,
-            flowchart: {{ useMaxWidth: false, htmlLabels: true, curve: 'basis' }},
-            securityLevel:'loose',  // required for mermaid@9 tooltip functionality
-            maxTextSize: 99999999  // beyond this "Maximum text size in diagram exceeded"
-        }});
-    </script>
 </head>
 
 <body>
@@ -311,7 +302,7 @@ def _add_node(
     label_by,
     tooltip_data=None,
 ):
-    table_delim = "; "  # \n could be useful here
+    table_delim = "\n"
     if node not in node_target_id_map:
         node_target_id_map[node] = node_id
         label = _gen_label(node_id, node, label_by)
@@ -372,6 +363,7 @@ def visualise_graph_mermaid(
         )
 
     curr_subgraphs = None
+    depth = 0
     for target in nodes:
         if group_by:
             subgraphs_raw = [getattr(target, key) for key in group_by]
@@ -402,17 +394,19 @@ def visualise_graph_mermaid(
                         continue
                 gen_subgraph = True
 
-                subg_id = "_".join(subgraphs[: subg_ind + 1])
+                # subgraph ID is a concatenation of all subgraph IDs within its
+                # hierarchy.
+                subg_id = "_".join(
+                    map(lambda x: x.replace(" ", "_"), subgraphs[: subg_ind + 1])
+                )
+                depth = len(subgraphs[: subg_ind + 1])
                 colour_index = subgraphs_raw.index(subgraph) - 1
                 if colour_index >= 0:
                     colour = MERMAID_SUBGRAPH_COLORS[
                         colour_index % len(MERMAID_SUBGRAPH_COLORS)
                     ]
                     mermaid.add_raw(f"style {subg_id} fill:{colour}")
-                if subg_ind > 0:
-                    mermaid.add_raw(f"subgraph {subg_id}[{subgraph}]")
-                else:
-                    mermaid.add_raw(f"subgraph {subg_id}")
+                mermaid.add_raw(f"subgraph {subg_id}[{subgraph}]")
             curr_subgraphs = subgraphs
 
         if node_data_lookup:
@@ -434,8 +428,8 @@ def visualise_graph_mermaid(
             label_by,
             tooltip_data=tooltip_data,
         )
-    if group_by:
-        for _ in range(len(subg_id.split("_"))):
+    if group_by and depth > 0:
+        for _ in range(depth):
             mermaid.add_raw("end")
 
     for target in nodes:

diff --git a/docs/dagrunner.utils.visualisation.md b/docs/dagrunner.utils.visualisation.md
@@ -140,7 +140,7 @@ MermaidHTML(mermaid, table=None)
 
 ### function: `__init__`
 
-[Source](../dagrunner/utils/visualisation.py#L176)
+[Source](../dagrunner/utils/visualisation.py#L167)
 
 #### Call Signature:
 
@@ -152,7 +152,7 @@ Initialize self.  See help(type(self)) for accurate signature.
 
 ### function: `__str__`
 
-[Source](../dagrunner/utils/visualisation.py#L179)
+[Source](../dagrunner/utils/visualisation.py#L170)
 
 #### Call Signature:
 
@@ -164,7 +164,7 @@ Return str(self).
 
 ### function: `save`
 
-[Source](../dagrunner/utils/visualisation.py#L186)
+[Source](../dagrunner/utils/visualisation.py#L177)
 
 #### Call Signature:
 
@@ -176,7 +176,7 @@ save(self, output_filepath)
 
 ## function: `visualise_graph_matplotlib`
 
-[Source](../dagrunner/utils/visualisation.py#L194)
+[Source](../dagrunner/utils/visualisation.py#L185)
 
 ### Call Signature:
 
@@ -197,7 +197,7 @@ Args:
 
 ## function: `visualise_graph_mermaid`
 
-[Source](../dagrunner/utils/visualisation.py#L334)
+[Source](../dagrunner/utils/visualisation.py#L325)
 
 ### Call Signature: