--- a/light9/collector/web/Light9CollectorUi.ts	Tue May 24 00:00:38 2022 -0700
+++ b/light9/collector/web/Light9CollectorUi.ts	Tue May 24 01:00:40 2022 -0700
@@ -2,13 +2,14 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
+import ReconnectingWebSocket from "reconnectingwebsocket";
 import { sortBy, uniq } from "underscore";
+import { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
 import { Patch } from "../../web/patch";
 import { getTopGraph } from "../../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../../web/SyncedGraph";
-
-export { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
 export { RdfdbSyncedGraph } from "../../web/RdfdbSyncedGraph";
+export { Light9CollectorDevice };
 
 debug.enable("*");
 const log = debug("collector");
@@ -21,7 +22,7 @@
       <h1>Collector <a href="metrics">[metrics]</a></h1>
 
       <h2>Devices</h2>
-      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div> `;
+      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device .uri=${d}></light9-collector-device>`)}</div> `;
   }
 
   @property() devices: NamedNode[] = [];
@@ -32,12 +33,21 @@
       this.graph = g;
       this.graph.runHandler(this.findDevices.bind(this), "findDevices");
     });
+
+    const ws = new ReconnectingWebSocket(location.href.replace("http", "ws") + "api/updates");
+    ws.addEventListener("message", (ev: any) => {
+      const outputAttrsSet = JSON.parse(ev.data).outputAttrsSet;
+      if (outputAttrsSet) {
+        this.updateDev(outputAttrsSet.dev, outputAttrsSet.attrs);
+      }
+    });
   }
 
   findDevices(patch?: Patch) {
     const U = this.graph.U();
 
     this.devices = [];
+    this.clearDeviceChildElementCache();
     let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass"));
     uniq(sortBy(classes, "value"), true).forEach((dc) => {
       sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => {
@@ -45,4 +55,37 @@
       });
     });
   }
+
+  deviceElements: Map<string, Light9CollectorDevice> = new Map();
+
+  clearDeviceChildElementCache() {
+    this.deviceElements = new Map();
+  }
+
+  findDeviceChildElement(uri: string): Light9CollectorDevice | undefined {
+    const known = this.deviceElements.get(uri);
+    if (known) {
+      return known;
+    }
+
+    for (const el of this.shadowRoot!.querySelectorAll("light9-collector-device")) {
+      const eld = el as Light9CollectorDevice;
+      if (eld.uri.value == uri) {
+        this.deviceElements.set(uri, eld);
+        return eld;
+      }
+    }
+
+    return undefined;
+  }
+
+  updateDev(uri: string, attrs: { attr: string; chan: string; val: string; valClass: string }[]) {
+    const el = this.findDeviceChildElement(uri);
+    if (!el) {
+      // unresolved race: updates come in before we have device elements to display them
+      setTimeout(() => this.updateDev(uri, attrs), 300);
+      return;
+    }
+    el.setAttrs(attrs);
+  }
 }

--- a/light9/web/collector/Light9CollectorDevice.ts	Tue May 24 00:00:38 2022 -0700
+++ b/light9/web/collector/Light9CollectorDevice.ts	Tue May 24 01:00:40 2022 -0700
@@ -4,7 +4,6 @@
 import { NamedNode } from "n3";
 export { ResourceDisplay } from "../ResourceDisplay";
 
-debug.enable("*");
 const log = debug("device-el");
 
 @customElement("light9-collector-device")
@@ -58,26 +57,19 @@
     `;
   }
   @property({
-    // todo don't rebuild uri; pass it right
-    converter: (s: string | null) => new NamedNode(s || ""),
+    converter: acceptStringOrUri(),
   })
   uri: NamedNode = new NamedNode("");
   @property() attrs: Array<{ attr: string; valClass: string; val: string; chan: string }> = [];
 
-  constructor() {
-    super();
+  setAttrs(attrs: any) {
+    this.attrs = attrs;
+    this.attrs.forEach(function (row: any) {
+      row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";
+    });
   }
-  //  observers: [
-  //    "initUpdates(updates)",
-  //  ],
-  // initUpdates(updates) {
-  //   updates.addListener(function (msg) {
-  //     if (msg.outputAttrsSet && msg.outputAttrsSet.dev == this.uri.value) {
-  //       this.set("attrs", msg.outputAttrsSet.attrs);
-  //       this.attrs.forEach(function (row) {
-  //         row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";
-  //       });
-  //     }
-  //   });
-  // }
 }
+
+function acceptStringOrUri() {
+  return (s: string | null) => new NamedNode(s || "");
+}