# HG changeset patch
# User drewp@bigasterisk.com
# Date 2022-05-24 06:53:07
# Node ID fddd07e694ab5f46820d38d8bca877cb4d1bd6f1
# Parent  1a96f8647126de3c3ac5fc120324755e9b7d0675

cleanup nested class mess

diff --git a/light9/collector/web/Light9CollectorUi.ts b/light9/collector/web/Light9CollectorUi.ts
--- a/light9/collector/web/Light9CollectorUi.ts
+++ b/light9/collector/web/Light9CollectorUi.ts
@@ -18,8 +18,6 @@ const log = debug("collector");
 
 @customElement("light9-collector-ui")
 export class Light9CollectorUi extends GraphAwarePage {
-  graph?: SyncedGraph;
-  static styles = [];
   render() {
     return html`${super.render()}
       <h1>Collector <a href="metrics">[metrics]</a></h1>
@@ -37,7 +35,6 @@ export class Light9CollectorDeviceList e
   render() {
     return html`
       <h2>Devices</h2>
-      <light9-collector-device uri="http://light9.bigasterisk.com/theater/skyline/device/strip1"></light9-collector-device>
       <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div>
     `;
   }
diff --git a/light9/web/RdfdbSyncedGraph.ts b/light9/web/RdfdbSyncedGraph.ts
--- a/light9/web/RdfdbSyncedGraph.ts
+++ b/light9/web/RdfdbSyncedGraph.ts
@@ -18,74 +18,71 @@ export class GraphChangedEvent extends C
   }
 }
 
-let RdfdbSyncedGraph
-
-(window as any).topSyncedGraph = new Promise((res, rej) => {
-  // Contains a SyncedGraph,
-  // displays a little status box,
-  // and emits 'changed' events with the graph and latest patch when it changes
-  
-  RdfdbSyncedGraph=customElement("rdfdb-synced-graph")(class RdfdbSyncedGraph extends LitElement {
-    /*@property()*/ graph: SyncedGraph;
-    /*@property()*/ status: string;
-    /*@property()*/ testGraph = false;
-    static styles = [
-      css`
-        :host {
-          display: inline-block;
-          border: 1px solid gray;
-          min-width: 22em;
-          background: #05335a;
-          color: #4fc1d4;
-        }
-      `,
-    ];
-    render() {
-      return html`graph: ${this.status}`;
-    }
-
-    onClear() {
-      console.log("reset");
-    }
-
-    constructor() {
-      super();
-      this.status = "startup";
-      this.graph = new SyncedGraph(
-        this.testGraph ? null : "/rdfdb/api/syncedGraph",
-        {
-          "": "http://light9.bigasterisk.com/",
-          dev: "http://light9.bigasterisk.com/device/",
-          rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
-          rdfs: "http://www.w3.org/2000/01/rdf-schema#",
-          xsd: "http://www.w3.org/2001/XMLSchema#",
-        },
-        (s: string) => {
-          this.status = s;
-        },
-        this.onClear.bind(this),
-        this.onGraphChanged.bind(this)
-      );
-      // (window as any).topSyncedGraph = this.graph;
-      res(this.graph);
-    }
-
-    private onGraphChanged(graph: SyncedGraph, patch: Patch) {
-      this.dispatchEvent(
-        new GraphChangedEvent("changed", {
-          detail: { graph, patch },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
-  });
+let setTopGraph: (sg: SyncedGraph) => void;
+(window as any).topSyncedGraph = new Promise<SyncedGraph>((res, rej) => {
+  setTopGraph = res;
 });
 
+// Contains a SyncedGraph,
+// displays a little status box,
+// and emits 'changed' events with the graph and latest patch when it changes
+@customElement("rdfdb-synced-graph")
+export class RdfdbSyncedGraph extends LitElement {
+  @property() graph: SyncedGraph;
+  @property() status: string;
+  @property() testGraph = false;
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        border: 1px solid gray;
+        min-width: 22em;
+        background: #05335a;
+        color: #4fc1d4;
+      }
+    `,
+  ];
+  render() {
+    return html`graph: ${this.status}`;
+  }
 
-async function getTopGraph(): Promise<SyncedGraph> {
+  onClear() {
+    console.log("reset");
+  }
+
+  constructor() {
+    super();
+    this.status = "startup";
+    this.graph = new SyncedGraph(
+      this.testGraph ? null : "/rdfdb/api/syncedGraph",
+      {
+        "": "http://light9.bigasterisk.com/",
+        dev: "http://light9.bigasterisk.com/device/",
+        rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
+        rdfs: "http://www.w3.org/2000/01/rdf-schema#",
+        xsd: "http://www.w3.org/2001/XMLSchema#",
+      },
+      (s: string) => {
+        this.status = s;
+      },
+      this.onClear.bind(this),
+      this.onGraphChanged.bind(this)
+    );
+    setTopGraph(this.graph);
+  }
+
+  private onGraphChanged(graph: SyncedGraph, patch: Patch) {
+    this.dispatchEvent(
+      new GraphChangedEvent("changed", {
+        detail: { graph, patch },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}
+
+export async function getTopGraph(): Promise<SyncedGraph> {
   const s = (window as any).topSyncedGraph;
   return await s;
 }
-
-export { RdfdbSyncedGraph, getTopGraph };
\ No newline at end of file