From 59f8a5401a10052fa9d50bc8ca6a438cda8673be Mon Sep 17 00:00:00 2001
From: Jeremy Wall <jeremy@marzhillstudios.com>
Date: Sat, 10 Feb 2024 16:51:57 -0600
Subject: [PATCH] fix: got rid of shadowRoot

plotly didn't play well with it.
---
 src/routes.rs |  4 ----
 static/lib.js | 11 +++++------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/routes.rs b/src/routes.rs
index 012eb88..4ef2175 100644
--- a/src/routes.rs
+++ b/src/routes.rs
@@ -122,10 +122,6 @@ pub async fn index(State(config): State<Config>) -> Markup {
                 script src="/js/plotly.js" { }
                 script src="/js/htmx.js" {  }
                 script src="/js/lib.js" {  }
-                template id="timeseries_template" {
-                    div;
-                    div;
-                }
                 (app(State(config.clone())).await)
             }
         }
diff --git a/static/lib.js b/static/lib.js
index fe59950..ec87fc3 100644
--- a/static/lib.js
+++ b/static/lib.js
@@ -5,14 +5,13 @@ class TimeseriesGraph extends HTMLElement {
     #intervalId;
     #pollSeconds;
     #label;
+    #targetNode = null;
     constructor() {
         super();
-        const root = this.attachShadow({ mode: "open" });
-        var template = document.getElementById("timeseries_template");
         this.#width = 800;
         this.#height = 600;
         this.#pollSeconds = 30;
-        root.appendChild(template.content.cloneNode(true));
+        this.#targetNode = this.appendChild(document.createElement("div"));
     }
 
     static observedAttributes = ['uri', 'width', 'height', 'poll-seconds'];
@@ -56,8 +55,8 @@ class TimeseriesGraph extends HTMLElement {
     static elementName = "timeseries-graph";
 
     getTargetNode() {
-        console.log("shadowroot: ", this.shadowRoot);
-        return this.shadowRoot.firstChild;
+        console.log("targetNode: ", this.#targetNode);
+        return this.#targetNode;
     }
    
     stopInterval() {
@@ -96,7 +95,7 @@ class TimeseriesGraph extends HTMLElement {
                 const labels = pair[0];
                 var trace = {
                     type: "scatter",
-                    mode: "lines",
+                    mode: "lines+text",
                     x: [],
                     y: []
                 };