--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/index.ts	Tue Dec 24 20:30:27 2019 -0800
@@ -0,0 +1,107 @@
+
+// these are just for timebank- move them out
+import '@polymer/polymer/lib/elements/dom-bind.js';
+
+import { PolymerElement, html } from '@polymer/polymer';
+import { render } from 'lit-html';
+import { N3Store } from "n3"
+import { customElement, property, computed } from '@polymer/decorators';
+
+import { GraphView } from './graph_view';
+import { StreamedGraphClient } from './streamed_graph_client';
+export { StreamedGraphClient } from './streamed_graph_client';
+
+interface VersionedGraph { version: number, store: N3Store | undefined };
+
+@customElement('streamed-graph')
+class StreamedGraph extends PolymerElement {
+    @property({ type: String })
+    url: string = '';
+
+    @property({ type: Object })
+    graph!: VersionedGraph;
+
+    @property({ type: Boolean })
+    expanded: boolean = false;
+
+    @computed('expanded')
+    get expandAction() {
+        return this.expanded ? '-' : '+';
+    }
+
+    @property({ type: String })
+    status: string = '';
+
+    sg!: StreamedGraphClient;
+    graphView!: Element;
+    graphViewDirty = true;
+
+    static get template() {
+        return html`
+            <link rel="stylesheet" href="../src/streamed-graph.css">
+            <div id="ui">
+                <span class="expander"><button on-click="toggleExpand">{{expandAction}}</button></span>
+                StreamedGraph <a href="{{url}}">[source]</a>:
+                {{status}}
+            </div>
+            <div id="graphView"></div>`;
+    }
+
+    ready() {
+        super.ready();
+        this.graph = { version: -1, store: undefined };
+        this.graphView = (this.shadowRoot as ShadowRoot).getElementById("graphView") as Element;
+
+        this._onUrl(this.url); // todo: watch for changes and rebuild
+        if (this.expanded) {
+            this.redrawGraph();
+        }
+    }
+
+    toggleExpand() {
+        this.expanded = !this.expanded;
+        if (this.expanded) {
+            this.redrawGraph()
+        } else {
+            this.graphViewDirty = false;
+            render(null, this.graphView);
+        }
+    }
+
+    redrawGraph() {
+        this.graphViewDirty = true;
+        requestAnimationFrame(this._redrawLater.bind(this));
+    }
+
+    _onUrl(url: string) {
+        if (this.sg) { this.sg.close(); }
+        this.sg = new StreamedGraphClient(
+            url,
+            this.onGraphChanged.bind(this),
+            this.set.bind(this, 'status'),
+            [],//window.NS,
+            []
+        );
+    }
+
+    onGraphChanged() {
+        this.graph = {
+            version: this.graph.version + 1,
+            store: this.sg.store
+        };
+        if (this.expanded) {
+            this.redrawGraph();
+        }
+    }
+
+    _redrawLater() {
+        if (!this.graphViewDirty) return;
+
+        if ((this.graph as VersionedGraph).store && this.graph.store) {
+            render(new GraphView(this.url, this.graph.store).makeTemplate(), this.graphView);
+            this.graphViewDirty = false;
+        } else {
+            render(html`<span>waiting for data...</span>`, this.graphView);
+        }
+    }
+}
\ No newline at end of file