Mercurial > code > home > repos > streamed-graph

comparison src/streamed-graph.ts @ 22:e90d9021c6a0

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