Mercurial > code > home > repos > streamed-graph
annotate src/index.ts @ 55:2936477ba3dd
dispatch graph-changed event. experimental.
| author | drewp@bigasterisk.com |
|---|---|
| date | Mon, 13 Jan 2020 00:07:28 -0800 |
| parents | 6933336a8fae |
| children | 1bb65cb4c685 |
| rev | line source |
|---|---|
|
42
895ae7c5b0f4
don't pile all the deps in our sharable library. other fixes to make it work as a dep.
drewp@bigasterisk.com
parents:
38
diff
changeset
|
1 import { customElement, property, computed } from "@polymer/decorators"; |
|
895ae7c5b0f4
don't pile all the deps in our sharable library. other fixes to make it work as a dep.
drewp@bigasterisk.com
parents:
38
diff
changeset
|
2 import { N3Store } from "n3"; |
| 36 | 3 import { PolymerElement, html } from "@polymer/polymer"; |
| 4 import { render } from "lit-html"; | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
5 |
| 36 | 6 import { GraphView } from "./graph_view"; |
| 7 import { StreamedGraphClient } from "./streamed_graph_client"; | |
|
54
6933336a8fae
better init for VersionedGraph- start with empty graph, not undefined
drewp@bigasterisk.com
parents:
53
diff
changeset
|
8 import { Store } from "n3"; |
|
4
a668a774b162
back up, slowly turn on code again until ts breaks
drewp@bigasterisk.com
parents:
3
diff
changeset
|
9 |
| 48 | 10 import style from "./style.styl"; |
| 53 | 11 export * from "./graph_queries"; |
| 48 | 12 |
|
38
d4036715028b
try exporting the PolymerElement so it can be depended on and therefore not culled by tree-shaking
drewp@bigasterisk.com
parents:
36
diff
changeset
|
13 export interface VersionedGraph { |
| 36 | 14 version: number; |
|
54
6933336a8fae
better init for VersionedGraph- start with empty graph, not undefined
drewp@bigasterisk.com
parents:
53
diff
changeset
|
15 store: N3Store; |
| 36 | 16 } |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
17 |
| 48 | 18 function templateWithStyle(style: string, tmpl: HTMLTemplateElement) { |
| 19 const styleEl = document.createElement("style"); | |
| 20 styleEl.textContent = style; | |
| 21 tmpl.content.insertBefore(styleEl, tmpl.content.firstChild); | |
| 22 return tmpl; | |
| 23 } | |
| 24 | |
| 36 | 25 @customElement("streamed-graph") |
|
38
d4036715028b
try exporting the PolymerElement so it can be depended on and therefore not culled by tree-shaking
drewp@bigasterisk.com
parents:
36
diff
changeset
|
26 export class StreamedGraph extends PolymerElement { |
| 36 | 27 @property({ type: String }) |
| 28 url: string = ""; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
29 |
|
45
3e414d575d96
can't use that graph property so well if it's non-notifying
drewp@bigasterisk.com
parents:
44
diff
changeset
|
30 @property({ type: Object, notify: true }) |
| 36 | 31 graph!: VersionedGraph; |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
32 |
| 36 | 33 @property({ type: Boolean }) |
| 34 expanded: boolean = false; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
35 |
| 36 | 36 @computed("expanded") |
| 37 get expandAction() { | |
| 38 return this.expanded ? "-" : "+"; | |
| 39 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
40 |
| 36 | 41 @property({ type: String }) |
| 42 status: string = ""; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
43 |
| 36 | 44 sg!: StreamedGraphClient; |
| 48 | 45 graphViewEl!: Element; |
| 36 | 46 graphViewDirty = true; |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
47 |
| 36 | 48 static get template() { |
| 48 | 49 return templateWithStyle( |
| 50 style, | |
| 51 html` | |
| 52 <div id="ui"> | |
| 53 <span class="expander" | |
| 54 ><button on-click="toggleExpand">{{expandAction}}</button></span | |
| 55 > | |
| 56 StreamedGraph <a href="{{url}}">[source]</a>: {{status}} | |
| 57 </div> | |
| 58 <div id="graphView"></div> | |
| 59 ` | |
| 60 ); | |
| 36 | 61 } |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
62 |
| 36 | 63 ready() { |
| 64 super.ready(); | |
|
54
6933336a8fae
better init for VersionedGraph- start with empty graph, not undefined
drewp@bigasterisk.com
parents:
53
diff
changeset
|
65 const emptyStore = new Store(); |
|
6933336a8fae
better init for VersionedGraph- start with empty graph, not undefined
drewp@bigasterisk.com
parents:
53
diff
changeset
|
66 this.graph = { version: -1, store: emptyStore }; |
| 48 | 67 this.graphViewEl = (this.shadowRoot as ShadowRoot).getElementById( |
| 36 | 68 "graphView" |
| 69 ) as Element; | |
|
8
6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
6
diff
changeset
|
70 |
| 36 | 71 this._onUrl(this.url); // todo: watch for changes and rebuild |
| 72 if (this.expanded) { | |
| 73 this.redrawGraph(); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
74 } |
| 36 | 75 } |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
76 |
| 36 | 77 toggleExpand() { |
| 78 this.expanded = !this.expanded; | |
| 79 if (this.expanded) { | |
| 80 this.redrawGraph(); | |
| 81 } else { | |
| 82 this.graphViewDirty = false; | |
| 48 | 83 this._graphAreaClose(); |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
84 } |
| 36 | 85 } |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
86 |
| 36 | 87 redrawGraph() { |
| 88 this.graphViewDirty = true; | |
| 89 requestAnimationFrame(this._redrawLater.bind(this)); | |
| 90 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
91 |
| 36 | 92 _onUrl(url: string) { |
| 93 if (this.sg) { | |
| 94 this.sg.close(); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
95 } |
| 36 | 96 this.sg = new StreamedGraphClient( |
| 97 url, | |
| 98 this.onGraphChanged.bind(this), | |
| 99 this.set.bind(this, "status"), | |
| 100 [], //window.NS, | |
| 101 [] | |
| 102 ); | |
| 103 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
104 |
| 36 | 105 onGraphChanged() { |
| 106 this.graph = { | |
| 107 version: this.graph.version + 1, | |
| 108 store: this.sg.store | |
| 109 }; | |
| 110 if (this.expanded) { | |
| 111 this.redrawGraph(); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
112 } |
|
55
2936477ba3dd
dispatch graph-changed event. experimental.
drewp@bigasterisk.com
parents:
54
diff
changeset
|
113 this.dispatchEvent( |
|
2936477ba3dd
dispatch graph-changed event. experimental.
drewp@bigasterisk.com
parents:
54
diff
changeset
|
114 new CustomEvent("graph-changed", { detail: { graph: this.graph } }) |
|
2936477ba3dd
dispatch graph-changed event. experimental.
drewp@bigasterisk.com
parents:
54
diff
changeset
|
115 ); |
| 36 | 116 } |
| 117 | |
| 118 _redrawLater() { | |
| 119 if (!this.graphViewDirty) return; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
120 |
| 36 | 121 if ((this.graph as VersionedGraph).store && this.graph.store) { |
| 48 | 122 this._graphAreaShowGraph(new GraphView(this.url, this.graph.store)); |
| 36 | 123 this.graphViewDirty = false; |
| 124 } else { | |
| 48 | 125 this._graphAreaShowPending(); |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
126 } |
| 36 | 127 } |
| 48 | 128 |
| 129 _graphAreaClose() { | |
| 130 render(null, this.graphViewEl); | |
| 131 } | |
| 132 | |
| 133 _graphAreaShowPending() { | |
| 134 render( | |
| 135 html` | |
| 136 <span>waiting for data...</span> | |
| 137 `, | |
| 138 this.graphViewEl | |
| 139 ); | |
| 140 } | |
| 141 | |
| 142 _graphAreaShowGraph(graphView: GraphView) { | |
| 143 render(graphView.makeTemplate(), this.graphViewEl); | |
| 144 } | |
| 36 | 145 } |