1 files changed, 57 insertions, 0 deletions
diff --git a/apps/dreki_web/assets/lib/controllers/graphviz_controller.js b/apps/dreki_web/assets/lib/controllers/graphviz_controller.js
new file mode 100644
index 0000000..7023b35
--- /dev/null
+++ b/apps/dreki_web/assets/lib/controllers/graphviz_controller.js
@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus"
+import * as d3 from 'd3'
+import graphviz from 'd3-graphviz'
+
+window.d3 = d3;
+window.graphviz = graphviz;
+
+export default class extends Controller {
+  static targets = ["loading", "error", "graph"]
+  static values = {
+    url: String
+  }
+
+  static graphvizOptions = {
+        useWorker: false,
+        useSharedWorker: false,
+        engine: 'dot',
+        keyMode: 'title',
+        fade: true,
+        tweenPaths: true,
+        tweenShapes: true,
+        convertEqualSidedPolygons: true,
+        tweenPrecision: 1,
+        growEnteringEdges: true,
+        zoom: false,
+        zoomScaleExtent: [0.1, 10],
+        zoomTranslateExtent: [[-Infinity, -Infinity], [+Infinity, +Infinity]],
+        width: null,
+        height: null,
+        scale: 1,
+        fit: true
+  }
+
+  connect() {
+    console.log("loading graph", this.element.id, this.urlValue)
+    fetch(this.urlValue).then((response) => {
+      if (!response.ok) {
+        throw new Error(`Failed to load graph: ${response.status}`)
+      }
+      return response.text()
+    }).then((text) => {
+      return this.load(text)
+    }).catch((error) => {
+      this.loadingTarget.classList.add("hidden");
+      this.errorTarget.classList.remove("hidden");
+      console.log("graph_controller", this.urlValue, error)
+    });
+  }
+
+  load(data) {
+    console.log("Data loaded...", data, this.graphTarget.id);
+    this.loadingTarget.classList.add("hidden");
+    var target = d3.select("#" + this.graphTarget.id);
+    graphviz.graphviz("#" + this.graphTarget.id, this.graphvizOptions).dot(data).render();
+  }
+
+}