Mercurial > code > home > repos > light9

annotate web/collector/Light9CollectorUi.ts @ 2421:ac55319a2eac

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
don't drop patches that arrive before we get WS connected
author drewp@bigasterisk.com
date Tue, 21 May 2024 16:10:39 -0700
parents ef3cde3e81e8
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2069
d678c2757cd4 config log() better. note that in chrome, you have to turn on 'verbose' in the console log to see anything :(
drewp@bigasterisk.com
parents: 2065
diff changeset
1 import debug from "debug";
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
2 import { html, LitElement } from "lit";
2076
33f65e2d0e59 who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents: 2075
diff changeset
3 import { customElement, property } from "lit/decorators.js";
33f65e2d0e59 who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents: 2075
diff changeset
4 import { NamedNode } from "n3";
2077
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
5 import ReconnectingWebSocket from "reconnectingwebsocket";
2072
d5f1cc9615af collector: rewrites for asyncio
drewp@bigasterisk.com
parents: 2069
diff changeset
6 import { sortBy, uniq } from "underscore";
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2151
diff changeset
7 import { Patch } from "../patch";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2151
diff changeset
8 import { getTopGraph } from "../RdfdbSyncedGraph";
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2151
diff changeset
9 import { SyncedGraph } from "../SyncedGraph";
2151
drewp@bigasterisk.com
parents: 2077
diff changeset
10 import { Light9CollectorDevice } from "./Light9CollectorDevice";
2372
06bf6dae8e64 reorg tools into light9/web/ and a single vite instance
drewp@bigasterisk.com
parents: 2151
diff changeset
11 export { RdfdbSyncedGraph } from "../RdfdbSyncedGraph";
2077
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
12 export { Light9CollectorDevice };
2395
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
13 import { avro } from "../lib/avro";
2074
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
14 debug.enable("*");
2069
d678c2757cd4 config log() better. note that in chrome, you have to turn on 'verbose' in the console log to see anything :(
drewp@bigasterisk.com
parents: 2065
diff changeset
15 const log = debug("collector");
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
16
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
17 @customElement("light9-collector-ui")
2076
33f65e2d0e59 who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents: 2075
diff changeset
18 export class Light9CollectorUi extends LitElement {
33f65e2d0e59 who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents: 2075
diff changeset
19 graph!: SyncedGraph;
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
20 render() {
2076
33f65e2d0e59 who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents: 2075
diff changeset
21 return html`<rdfdb-synced-graph></rdfdb-synced-graph>
2376
4556eebe5d73 topdir reorgs; let pdm have its src/ dir; separate vite area from light9/
drewp@bigasterisk.com
parents: 2372
diff changeset
22 <h1>Collector</h1>
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
23
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
24 <h2>Devices</h2>
2077
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
25 <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device .uri=${d}></light9-collector-device>`)}</div> `;
2074
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
26 }
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
27
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
28 @property() devices: NamedNode[] = [];
2076
33f65e2d0e59 who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents: 2075
diff changeset
29
2072
d5f1cc9615af collector: rewrites for asyncio
drewp@bigasterisk.com
parents: 2069
diff changeset
30 constructor() {
d5f1cc9615af collector: rewrites for asyncio
drewp@bigasterisk.com
parents: 2069
diff changeset
31 super();
2074
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
32 getTopGraph().then((g) => {
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
33 this.graph = g;
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
34 this.graph.runHandler(this.findDevices.bind(this), "findDevices");
2072
d5f1cc9615af collector: rewrites for asyncio
drewp@bigasterisk.com
parents: 2069
diff changeset
35 });
2077
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
36
2395
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
37 this.setupListener();
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
38 }
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
39
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
40 async setupListener() {
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
41 const CollectorUpdateType = await avro.loadType("CollectorUpdate");
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
42 const ws = new ReconnectingWebSocket(`ws://${location.host}/service/collector/updates`);
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
43 ws.addEventListener("message", async (ev: ReconnectingWebSocket.MessageEvent) => {
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
44 const jsMsg = await avro.parseBlob(CollectorUpdateType, ev.data);
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
45
ef3cde3e81e8 switch collector output from json to avro (still over WS)
drewp@bigasterisk.com
parents: 2384
diff changeset
46 const outputAttrsSet = jsMsg.OutputAttrsSet;
2077
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
47 if (outputAttrsSet) {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
48 this.updateDev(outputAttrsSet.dev, outputAttrsSet.attrs);
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
49 }
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
50 });
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
51 }
2074
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
52 findDevices(patch?: Patch) {
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
53 const U = this.graph.U();
2076
33f65e2d0e59 who needs a single emitter of all graph change events that anyone on the page can find?
drewp@bigasterisk.com
parents: 2075
diff changeset
54
2074
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
55 this.devices = [];
2077
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
56 this.clearDeviceChildElementCache();
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
57 let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass"));
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
58 uniq(sortBy(classes, "value"), true).forEach((dc) => {
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
59 sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => {
2074
1a96f8647126 big graph & autodep porting to make collector display labels from a syncedgraph
drewp@bigasterisk.com
parents: 2072
diff changeset
60 this.devices.push(dev as NamedNode);
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
61 });
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
62 });
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
63 }
2077
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
64
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
65 deviceElements: Map<string, Light9CollectorDevice> = new Map();
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
66
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
67 clearDeviceChildElementCache() {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
68 this.deviceElements = new Map();
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
69 }
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
70
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
71 findDeviceChildElement(uri: string): Light9CollectorDevice | undefined {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
72 const known = this.deviceElements.get(uri);
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
73 if (known) {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
74 return known;
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
75 }
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
76
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
77 for (const el of this.shadowRoot!.querySelectorAll("light9-collector-device")) {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
78 const eld = el as Light9CollectorDevice;
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
79 if (eld.uri.value == uri) {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
80 this.deviceElements.set(uri, eld);
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
81 return eld;
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
82 }
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
83 }
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
84
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
85 return undefined;
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
86 }
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
87
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
88 updateDev(uri: string, attrs: { attr: string; chan: string; val: string; valClass: string }[]) {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
89 const el = this.findDeviceChildElement(uri);
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
90 if (!el) {
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
91 // unresolved race: updates come in before we have device elements to display them
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
92 setTimeout(() => this.updateDev(uri, attrs), 300);
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
93 return;
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
94 }
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
95 el.setAttrs(attrs);
46a8f5a8a4dd fix collector display to show real values from py
drewp@bigasterisk.com
parents: 2076
diff changeset
96 }
2065
6fbc1853c0b1 split collector elements to ts files, minor porting
drewp@bigasterisk.com
parents:
diff changeset
97 }