*Now* it works.

ImperialCollegeLondon · Jan 15, 2025 · d3ee256 · d3ee256
1 parent 05695bd
commit d3ee256
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/controller/templates/controller/index.html b/controller/templates/controller/index.html
@@ -30,7 +30,7 @@
         href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css" />
   <script type="module"
           src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js"></script>
-  <script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';</script>
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.min.js"></script>
 {% endblock extra_js %}
 {% block content %}
   <div class="container-fluid no-padding no-margin">
@@ -49,22 +49,6 @@ <h5>Finite State Machine</h5>
           </div>
         </div>
       </div>
-      <div class="fst-panel">
-        <div class="card shadow-sm rounded">
-          <div class="card-header bg-primary text-white rounded-top mb-3">
-            <h5>Flowchart</h5>
-          </div>
-          <div class="card-body">
-            <pre class="mermaid">
-              flowchart TD
-              {% comment %} A[Start] --> B{Decision?} {% endcomment %}
-              {% comment %} B -- Yes --> C[Task 1] {% endcomment %}
-              {% comment %} B -- No --> D[Task 2] {% endcomment %}
-              {% comment %} C & D --> E[End] {% endcomment %}
-            </pre>
-          </div>
-        </div>
-      </div>
       <div class="fst-panel">
         <div class="card shadow-sm rounded">
           <div class="card-header bg-primary text-white rounded-top mb-3">
@@ -85,4 +69,15 @@ <h5>Application Tree</h5>
   </div>
   <!-- Arguments dialog -->
   <div id="arguments-dialog"></div>
+  <script>
+    // Refresh mermaid diagrams after htmx swap.
+    document.body.addEventListener('htmx:afterSwap', (event) => {
+        const target = event.detail.target;
+        if (target && target.querySelector('.mermaid')) {
+            mermaid.run({
+                nodes: target.querySelectorAll('.mermaid')
+            });
+        }
+    });
+  </script>
 {% endblock content %}
diff --git a/controller/templates/controller/partials/state_machine.html b/controller/templates/controller/partials/state_machine.html
@@ -1,6 +1,19 @@
 {% load render_table from django_tables2 %}
 <div _="on load if #argsDialog is not null remove #argsDialog"></div>
-<form>
-  {% csrf_token %}
-  {% render_table table %}
-</form>
+<div class="row">
+  <div class="col-md-auto">
+    <form>
+      {% csrf_token %}
+      {% render_table table %}
+    </form>
+  </div>
+  <div class="col-md-auto">
+    <pre class="mermaid">
+        {% comment %} flowchart TD {% endcomment %}
+        {% comment %} A[Start] --> B{Decision?} {% endcomment %}
+        {% comment %} B -- Yes --> C[Task 1] {% endcomment %}
+        {% comment %} B -- No --> D[Task 2] {% endcomment %}
+        {% comment %} C & D --> E[End] {% endcomment %}
+    </pre>
+  </div>
+</div>