--- a/light9/collector/web/Light9CollectorUi.ts	Mon May 23 23:53:07 2022 -0700
+++ b/light9/collector/web/Light9CollectorUi.ts	Tue May 24 00:00:38 2022 -0700
@@ -1,44 +1,31 @@
 import debug from "debug";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import ReconnectingWebSocket from "reconnectingwebsocket";
+import { customElement, property } from "lit/decorators.js";
+import { NamedNode } from "n3";
 import { sortBy, uniq } from "underscore";
+import { Patch } from "../../web/patch";
+import { getTopGraph } from "../../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../../web/SyncedGraph";
-import { GraphAwarePage } from "../../web/GraphAwarePage";
-import { getTopGraph, GraphChangedEvent } from "../../web/RdfdbSyncedGraph";
-import { NamedNode } from "n3";
-import { Patch } from "../../web/patch";
-import { linkHorizontal } from "d3";
 
+export { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
 export { RdfdbSyncedGraph } from "../../web/RdfdbSyncedGraph";
-export { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
 
 debug.enable("*");
 const log = debug("collector");
 
 @customElement("light9-collector-ui")
-export class Light9CollectorUi extends GraphAwarePage {
+export class Light9CollectorUi extends LitElement {
+  graph!: SyncedGraph;
   render() {
-    return html`${super.render()}
+    return html`<rdfdb-synced-graph></rdfdb-synced-graph>
       <h1>Collector <a href="metrics">[metrics]</a></h1>
 
       <h2>Devices</h2>
-      <light9-collector-device-list></light9-collector-device-list> `;
+      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div> `;
   }
-}
 
-@customElement("light9-collector-device-list")
-export class Light9CollectorDeviceList extends LitElement {
-  graph!: SyncedGraph;
   @property() devices: NamedNode[] = [];
-  
-  render() {
-    return html`
-      <h2>Devices</h2>
-      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div>
-    `;
-  }
-  
+
   constructor() {
     super();
     getTopGraph().then((g) => {
@@ -46,10 +33,10 @@
       this.graph.runHandler(this.findDevices.bind(this), "findDevices");
     });
   }
-  
+
   findDevices(patch?: Patch) {
     const U = this.graph.U();
-    
+
     this.devices = [];
     let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass"));
     uniq(sortBy(classes, "value"), true).forEach((dc) => {

--- a/light9/web/GraphAwarePage.ts	Mon May 23 23:53:07 2022 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,25 +0,0 @@
-import debug from "debug";
-import { html, LitElement } from "lit";
-import { patchSizeSummary } from "../web/patch";
-import { GraphChangedEvent } from "../web/RdfdbSyncedGraph";
-import { SyncedGraph } from "./SyncedGraph";
-
-const log = debug("graphaware");
-
-export class GraphAwarePage extends LitElement {
-  constructor() {
-    super();
-    this.classList.add("graph-events");
-  }
-  // prepend this to your subclass's render output, like
-  // render() { return html`${super.render()} ....your page`; }
-  render() {
-    return html`<rdfdb-synced-graph @changed="${this.onGraphChanged}"></rdfdb-synced-graph>`;
-  }
-  onGraphChanged(ev: GraphChangedEvent) {
-    log("patch from server [3]", patchSizeSummary(ev.detail.patch));
-    // this.dispatchEvent(new CustomEvent("changed", { detail: ev.detail }));
-    log("patch from server [4]");
-  }
-}
-

--- a/light9/web/RdfdbSyncedGraph.ts	Mon May 23 23:53:07 2022 -0700
+++ b/light9/web/RdfdbSyncedGraph.ts	Tue May 24 00:00:38 2022 -0700
@@ -6,17 +6,6 @@
 
 const log = debug("syncedgraph-el");
 
-// consider https://vitaly-t.github.io/sub-events/ for this stuff
-export interface GraphChangedDetail {
-  graph: SyncedGraph;
-  patch: Patch;
-}
-
-export class GraphChangedEvent extends CustomEvent<GraphChangedDetail> {
-  constructor(type: string, opts: { detail: GraphChangedDetail; bubbles: boolean; composed: boolean }) {
-    super(type, opts);
-  }
-}
 
 let setTopGraph: (sg: SyncedGraph) => void;
 (window as any).topSyncedGraph = new Promise<SyncedGraph>((res, rej) => {
@@ -66,20 +55,10 @@
         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> {

--- a/light9/web/SyncedGraph.ts	Mon May 23 23:53:07 2022 -0700
+++ b/light9/web/SyncedGraph.ts	Tue May 24 00:00:38 2022 -0700
@@ -33,8 +33,7 @@
     public prefixes: { [short: string]: string },
     private setStatus: any,
     // called if we clear the graph
-    private clearCb: any,
-    private onGraphChanged: (graph: SyncedGraph, newPatch: Patch)=>void
+    private clearCb: any
   ) {
     this.graph = new N3.Store();
     this._autoDeps = new AutoDependencies();
@@ -185,7 +184,6 @@
     }
     log("applied patch locally", patchSizeSummary(patch));
     this._autoDeps.graphChanged(patch);
-    this.onGraphChanged(this, patch);
   }
 
   getObjectPatch(s: N3.NamedNode, p: N3.NamedNode, newObject: N3.Quad_Object, g: N3.NamedNode): Patch {

--- a/light9/web/collector/Light9CollectorDevice.ts	Mon May 23 23:53:07 2022 -0700
+++ b/light9/web/collector/Light9CollectorDevice.ts	Tue May 24 00:00:38 2022 -0700
@@ -2,8 +2,8 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
-import { GraphChangedEvent } from "../RdfdbSyncedGraph";
-export {ResourceDisplay} from "../ResourceDisplay"
+export { ResourceDisplay } from "../ResourceDisplay";
+
 debug.enable("*");
 const log = debug("device-el");
 
@@ -66,10 +66,6 @@
 
   constructor() {
     super();
-    // addGraphChangeListener(this.onGraphChanged.bind(this));
-  }
-  onChanged(ev: GraphChangedEvent) {
-    log("patch from server [5]");
   }
   //  observers: [
   //    "initUpdates(updates)",