Mercurial > code > home > repos > streamed-graph

comparison src/index.ts @ 32:db0e9cbf52e5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
WIP converting to the package system that i found can work
author drewp@bigasterisk.com
date Tue, 24 Dec 2019 18:37:03 -0800
parents src/streamed-graph.ts@e0f5da648199
children
comparison
equal deleted inserted replaced
28:c751380b70c5 32:db0e9cbf52e5
1
2 // these are just for timebank- move them out
3 import '@polymer/polymer/lib/elements/dom-bind.js';
4
5 import { PolymerElement, html } from '@polymer/polymer';
6 import { render } from 'lit-html';
7 import { N3Store } from "n3"
8 import { customElement, property, computed } from '@polymer/decorators';
9
10 import { GraphView } from './graph_view';
11 import { StreamedGraphClient } from './streamed_graph_client';
12
13 interface VersionedGraph { version: number, store: N3Store | undefined };
14
15 @customElement('streamed-graph')
16 class StreamedGraph extends PolymerElement {
17 @property({ type: String })
18 url: string = '';
19
20 @property({ type: Object })
21 graph!: VersionedGraph;
22
23 @property({ type: Boolean })
24 expanded: boolean = false;
25
26 @computed('expanded')
27 get expandAction() {
28 return this.expanded ? '-' : '+';
29 }
30
31 @property({ type: String })
32 status: string = '';
33
34 sg!: StreamedGraphClient;
35 graphView!: Element;
36 graphViewDirty = true;
37
38 static get template() {
39 return html`
40 <link rel="stylesheet" href="../src/streamed-graph.css">
41 <div id="ui">
42 <span class="expander"><button on-click="toggleExpand">{{expandAction}}</button></span>
43 StreamedGraph <a href="{{url}}">[source]</a>:
44 {{status}}
45 </div>
46 <div id="graphView"></div>`;
47 }
48
49 ready() {
50 super.ready();
51 this.graph = { version: -1, store: undefined };
52 this.graphView = (this.shadowRoot as ShadowRoot).getElementById("graphView") as Element;
53
54 this._onUrl(this.url); // todo: watch for changes and rebuild
55 if (this.expanded) {
56 this.redrawGraph();
57 }
58 }
59
60 toggleExpand(ev: Event) {
61 this.expanded = !this.expanded;
62 if (this.expanded) {
63 this.redrawGraph()
64 } else {
65 this.graphViewDirty = false;
66 render(null, this.graphView);
67 }
68 }
69
70 redrawGraph() {
71 this.graphViewDirty = true;
72 requestAnimationFrame(this._redrawLater.bind(this));
73 }
74
75 _onUrl(url: string) {
76 if (this.sg) { this.sg.close(); }
77 this.sg = new StreamedGraphClient(
78 url,
79 this.onGraphChanged.bind(this),
80 this.set.bind(this, 'status'),
81 [],//window.NS,
82 []
83 );
84 }
85
86 onGraphChanged() {
87 this.graph = {
88 version: this.graph.version + 1,
89 store: this.sg.store
90 };
91 if (this.expanded) {
92 this.redrawGraph();
93 }
94 }
95
96 _redrawLater() {
97 if (!this.graphViewDirty) return;
98
99 if ((this.graph as VersionedGraph).store && this.graph.store) {
100 render(new GraphView(this.url, this.graph.store).makeTemplate(), this.graphView);
101 this.graphViewDirty = false;
102 } else {
103 render(html`<span>waiting for data...</span>`, this.graphView);
104 }
105 }
106 }