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 @@ -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`

Collector [metrics]

Devices

- `; +
${this.devices.map((d) => html``)}
`; } -} -@customElement("light9-collector-device-list") -export class Light9CollectorDeviceList extends LitElement { - graph!: SyncedGraph; @property() devices: NamedNode[] = []; - - render() { - return html` -

Devices

-
${this.devices.map((d) => html``)}
- `; - } - + constructor() { super(); getTopGraph().then((g) => { @@ -46,10 +33,10 @@ export class Light9CollectorDeviceList e 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) => { diff --git a/light9/web/GraphAwarePage.ts b/light9/web/GraphAwarePage.ts deleted file mode 100644 --- a/light9/web/GraphAwarePage.ts +++ /dev/null @@ -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``; - } - 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]"); - } -} - diff --git a/light9/web/RdfdbSyncedGraph.ts b/light9/web/RdfdbSyncedGraph.ts --- a/light9/web/RdfdbSyncedGraph.ts +++ b/light9/web/RdfdbSyncedGraph.ts @@ -6,17 +6,6 @@ import { SyncedGraph } from "./SyncedGra 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 { - constructor(type: string, opts: { detail: GraphChangedDetail; bubbles: boolean; composed: boolean }) { - super(type, opts); - } -} let setTopGraph: (sg: SyncedGraph) => void; (window as any).topSyncedGraph = new Promise((res, rej) => { @@ -66,20 +55,10 @@ export class RdfdbSyncedGraph extends Li 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 { diff --git a/light9/web/SyncedGraph.ts b/light9/web/SyncedGraph.ts --- a/light9/web/SyncedGraph.ts +++ b/light9/web/SyncedGraph.ts @@ -33,8 +33,7 @@ export class SyncedGraph { 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 @@ export class SyncedGraph { } 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 { diff --git a/light9/web/collector/Light9CollectorDevice.ts b/light9/web/collector/Light9CollectorDevice.ts --- a/light9/web/collector/Light9CollectorDevice.ts +++ b/light9/web/collector/Light9CollectorDevice.ts @@ -2,8 +2,8 @@ import debug from "debug"; 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 @@ export class Light9CollectorDevice exten constructor() { super(); - // addGraphChangeListener(this.onGraphChanged.bind(this)); - } - onChanged(ev: GraphChangedEvent) { - log("patch from server [5]"); } // observers: [ // "initUpdates(updates)",