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()}

Collector [metrics]

@@ -37,7 +35,6 @@ export class Light9CollectorDeviceList e render() { return html`

Devices

-
${this.devices.map((d) => html``)}
`; } 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((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 { + 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 { const s = (window as any).topSyncedGraph; return await s; } - -export { RdfdbSyncedGraph, getTopGraph }; \ No newline at end of file