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