Mercurial > code > home > repos > streamed-graph

annotate src/render/StreamedGraph.ts @ 107:042bd3361339

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