Mercurial > code > home > repos > streamed-graph

annotate src/render/StreamedGraph.ts @ 110:3cdbbd913f1d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
table displays now just barely
author drewp@bigasterisk.com
date Fri, 18 Mar 2022 23:41:24 -0700
parents cbcd82d21356
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
109
cbcd82d21356 cleanup
drewp@bigasterisk.com
parents: 108
diff changeset
1 import { html, LitElement, render, TemplateResult } from "lit";
106
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
2 import { customElement, property } from "lit/decorators.js";
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
3 import { Store } from "n3";
109
cbcd82d21356 cleanup
drewp@bigasterisk.com
parents: 108
diff changeset
4 import { StreamedGraphClient } from "../layout/StreamedGraphClient";
cbcd82d21356 cleanup
drewp@bigasterisk.com
parents: 108
diff changeset
5 import { ViewConfig } from "../layout/ViewConfig";
107
042bd3361339 renames
drewp@bigasterisk.com
parents: 106
diff changeset
6 import { GraphView } from "./GraphView";
109
cbcd82d21356 cleanup
drewp@bigasterisk.com
parents: 108
diff changeset
7 import { addFontToRootPage, style } from "./style";
106
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
8
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
9 export interface VersionedGraph {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
10 version: number;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
11 store: Store;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
12 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
13
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
14 @customElement("streamed-graph")
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
15 export class StreamedGraph extends LitElement {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
16 @property({ type: String })
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
17 url: string = "";
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
18 @property({ type: String })
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
19 view: string = "";
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
20 @property({ type: Object })
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
21 graph!: VersionedGraph;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
22
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
23 @property({ type: Boolean })
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
24 expanded: boolean = false;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
25
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
26 @property({ type: String })
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
27 status: string = "";
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
28
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
29 sg!: StreamedGraphClient;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
30 graphViewDirty = true;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
31
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
32 static styles = style;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
33
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
34 render() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
35 const expandAction = this.expanded ? "-" : "+";
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
36 return html`
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
37 <div id="ui">
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
38 <span class="expander"
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
39 ><button @click="${this.toggleExpand}">${expandAction}</button></span
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
40 >
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
41 StreamedGraph <a href="${this.url}">[source]</a>: ${this.status}
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
42 </div>
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
43 <div id="graphView"></div>
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
44 `;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
45 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
46
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
47 connectedCallback() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
48 super.connectedCallback();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
49 addFontToRootPage();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
50 const emptyStore = new Store();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
51 this.graph = { version: -1, store: emptyStore };
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
52
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
53 this._onUrl(this.url); // todo: watch for changes and rebuild
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
54 if (this.expanded) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
55 this.redrawGraph();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
56 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
57 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
58
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
59 toggleExpand() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
60 this.expanded = !this.expanded;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
61 if (this.expanded) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
62 this.redrawGraph();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
63 } else {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
64 this.graphViewDirty = false;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
65 this._graphAreaClose();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
66 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
67 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
68
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
69 redrawGraph() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
70 this.graphViewDirty = true;
109
cbcd82d21356 cleanup
drewp@bigasterisk.com
parents: 108
diff changeset
71 const rl: () => Promise<void> = this._redrawLater.bind(this);
106
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
72 requestAnimationFrame(rl);
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
73 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
74
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
75 _onUrl(url: string) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
76 if (this.sg) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
77 this.sg.close();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
78 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
79 this.sg = new StreamedGraphClient(
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
80 url,
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
81 this.onGraphChanged.bind(this),
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
82 (st) => {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
83 this.status = st;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
84 },
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
85 [], //window.NS,
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
86 []
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
87 );
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
88 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
89
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
90 onGraphChanged() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
91 this.graph = {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
92 version: this.graph.version + 1,
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
93 store: this.sg.store,
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
94 };
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
95 if (this.expanded) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
96 this.redrawGraph();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
97 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
98 this.dispatchEvent(
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
99 new CustomEvent("graph-changed", { detail: { graph: this.graph } })
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
100 );
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
101 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
102
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
103 async _redrawLater() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
104 if (!this.graphViewDirty) return;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
105
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
106 if ((this.graph as VersionedGraph).store && this.graph.store) {
109
cbcd82d21356 cleanup
drewp@bigasterisk.com
parents: 108
diff changeset
107 const vc = new ViewConfig();
110
3cdbbd913f1d table displays now just barely
drewp@bigasterisk.com
parents: 109
diff changeset
108 if (this.view) {
3cdbbd913f1d table displays now just barely
drewp@bigasterisk.com
parents: 109
diff changeset
109 await vc.readFromUrl(this.view); // too often!
3cdbbd913f1d table displays now just barely
drewp@bigasterisk.com
parents: 109
diff changeset
110 }
108
5e6840229a05 rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents: 107
diff changeset
111
106
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
112 await this._graphAreaShowGraph(
108
5e6840229a05 rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents: 107
diff changeset
113 new GraphView([this.url], this.graph.store, vc)
106
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
114 );
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
115 this.graphViewDirty = false;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
116 } else {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
117 this._graphAreaShowPending();
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
118 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
119 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
120
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
121 _graphAreaClose() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
122 this._setGraphArea(html``);
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
123 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
124
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
125 _graphAreaShowPending() {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
126 this._setGraphArea(html` <span>waiting for data...</span> `);
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
127 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
128
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
129 async _graphAreaShowGraph(graphView: GraphView) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
130 this._setGraphArea(await graphView.makeTemplate());
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
131 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
132
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
133 _setGraphArea(tmpl: TemplateResult) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
134 const el = this.shadowRoot?.getElementById("graphView");
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
135 if (!el) {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
136 return;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
137 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
138 render(tmpl, el);
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
139 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
140 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
141
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
142 declare global {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
143 interface HTMLElementTagNameMap {
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
144 "streamed-graph": StreamedGraph;
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
145 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
146 }
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
147
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
148 // // allow child nodes to combine a few graphs and statics
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
149 // //<streamed-graph id="timebankGraph" graph="{{graph}}" expanded="true">
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
150 // // <member-graph url="graph/timebank/events"></member-graph>
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
151 // // <member-graph url="/some/static.n3"></member-graph>
2468f2227d22 make src/layout/ and src/render/ separation
drewp@bigasterisk.com
parents:
diff changeset
152 // //</streamed-graph>