Mercurial > code > home > repos > streamed-graph
annotate src/index.ts @ 44:bcccfcb037ab
use global path for css
| author | drewp@bigasterisk.com |
|---|---|
| date | Thu, 02 Jan 2020 00:23:06 -0800 |
| parents | 895ae7c5b0f4 |
| children | 3e414d575d96 |
| 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 |
|
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
|
9 export interface VersionedGraph { |
| 36 | 10 version: number; |
| 11 store: N3Store | undefined; | |
| 12 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
13 |
| 36 | 14 @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
|
15 export class StreamedGraph extends PolymerElement { |
| 36 | 16 @property({ type: String }) |
| 17 url: string = ""; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
18 |
| 36 | 19 @property({ type: Object }) |
| 20 graph!: VersionedGraph; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
21 |
| 36 | 22 @property({ type: Boolean }) |
| 23 expanded: boolean = false; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
24 |
| 36 | 25 @computed("expanded") |
| 26 get expandAction() { | |
| 27 return this.expanded ? "-" : "+"; | |
| 28 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
29 |
| 36 | 30 @property({ type: String }) |
| 31 status: string = ""; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
32 |
| 36 | 33 sg!: StreamedGraphClient; |
| 34 graphView!: Element; | |
| 35 graphViewDirty = true; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
36 |
| 36 | 37 static get template() { |
| 38 return html` | |
| 44 | 39 <link rel="stylesheet" href="/rdf/streamed-graph.css" /> |
| 36 | 40 <div id="ui"> |
| 41 <span class="expander" | |
| 42 ><button on-click="toggleExpand">{{expandAction}}</button></span | |
| 43 > | |
| 44 StreamedGraph <a href="{{url}}">[source]</a>: {{status}} | |
| 45 </div> | |
| 46 <div id="graphView"></div> | |
| 47 `; | |
| 48 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
49 |
| 36 | 50 ready() { |
| 51 super.ready(); | |
| 52 this.graph = { version: -1, store: undefined }; | |
| 53 this.graphView = (this.shadowRoot as ShadowRoot).getElementById( | |
| 54 "graphView" | |
| 55 ) as Element; | |
|
8
6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
6
diff
changeset
|
56 |
| 36 | 57 this._onUrl(this.url); // todo: watch for changes and rebuild |
| 58 if (this.expanded) { | |
| 59 this.redrawGraph(); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
60 } |
| 36 | 61 } |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
62 |
| 36 | 63 toggleExpand() { |
| 64 this.expanded = !this.expanded; | |
| 65 if (this.expanded) { | |
| 66 this.redrawGraph(); | |
| 67 } else { | |
| 68 this.graphViewDirty = false; | |
| 69 render(null, this.graphView); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
70 } |
| 36 | 71 } |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
72 |
| 36 | 73 redrawGraph() { |
| 74 this.graphViewDirty = true; | |
| 75 requestAnimationFrame(this._redrawLater.bind(this)); | |
| 76 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
77 |
| 36 | 78 _onUrl(url: string) { |
| 79 if (this.sg) { | |
| 80 this.sg.close(); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
81 } |
| 36 | 82 this.sg = new StreamedGraphClient( |
| 83 url, | |
| 84 this.onGraphChanged.bind(this), | |
| 85 this.set.bind(this, "status"), | |
| 86 [], //window.NS, | |
| 87 [] | |
| 88 ); | |
| 89 } | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
90 |
| 36 | 91 onGraphChanged() { |
| 92 this.graph = { | |
| 93 version: this.graph.version + 1, | |
| 94 store: this.sg.store | |
| 95 }; | |
| 96 if (this.expanded) { | |
| 97 this.redrawGraph(); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
98 } |
| 36 | 99 } |
| 100 | |
| 101 _redrawLater() { | |
| 102 if (!this.graphViewDirty) return; | |
|
3
a7ba8627a7b6
still trying to make imports work. add other files too
drewp@bigasterisk.com
parents:
diff
changeset
|
103 |
| 36 | 104 if ((this.graph as VersionedGraph).store && this.graph.store) { |
| 105 render( | |
| 106 new GraphView(this.url, this.graph.store).makeTemplate(), | |
| 107 this.graphView | |
| 108 ); | |
| 109 this.graphViewDirty = false; | |
| 110 } else { | |
| 111 render( | |
| 112 html` | |
| 113 <span>waiting for data...</span> | |
| 114 `, | |
| 115 this.graphView | |
| 116 ); | |
|
22
e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
drewp@bigasterisk.com
parents:
15
diff
changeset
|
117 } |
| 36 | 118 } |
| 119 } |