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

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
line wrap: on
line diff
--- a/src/streamed-graph.ts	Fri Dec 13 01:36:57 2019 -0800
+++ b/src/streamed-graph.ts	Fri Dec 13 01:39:29 2019 -0800
@@ -2,98 +2,97 @@
 // these are just for timebank- move them out
 import '@polymer/polymer/lib/elements/dom-bind.js';
 
-
 import { PolymerElement, html } from '@polymer/polymer';
-import { customElement, property, computed } from '@polymer/decorators';
 import { render } from 'lit-html';
+import { N3Store } from "n3"
+import { customElement, property, computed } from '@polymer/decorators';
+
 import { GraphView } from './graph_view';
-import { N3Store } from "n3"
+import { StreamedGraphClient } from './streamed_graph_client';
 
-import { 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: {version: number, store!: N3Store};
+    @property({ type: Object })
+    graph!: VersionedGraph;
 
-    // @property({ type: boolean })
-    // expanded: boolean = false;
+    @property({ type: Boolean })
+    expanded: boolean = false;
 
     // @computed('expanded')
-    // expandAction(): string {
-    //     return this.expanded ? '-' : '+';
-    // }
+    expandAction(): string {
+        return this.expanded ? '-' : '+';
+    }
 
-    // @property({ type: string })
-    // status: string = '';
+    @property({ type: String })
+    status: string = '';
 
-    // sg: StreamedGraphClient;
-    // graphView: Element;
-    // graphViewDirty = true;
+    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>`;
-    // }
+    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: null};
-    //     this.graphView = (this.shadowRoot as ShadowRoot).getElementById("graphView") as Element;
+    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
-    // }
+        this._onUrl(this.url); // todo: watch for changes and rebuild
+    }
 
-    // toggleExpand(ev) {
-    //     this.expanded = !this.expanded;
-    //     if (this.expanded) {
-    //         this.redrawGraph()
-    //     } else {
-    //         this.graphViewDirty = false;
-    //         render(null, this.graphView);
-    //     }
-    // }
+    toggleExpand(ev: Event) {
+        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));
-    // }
+    redrawGraph() {
+        this.graphViewDirty = true;
+        requestAnimationFrame(this._redrawLater.bind(this));
+    }
 
-    // _onUrl(url) {
-    //     if (this.sg) { this.sg.close(); }
-    //     this.sg = new StreamedGraphClient(
-    //         url,
-    //         this.onGraphChanged.bind(this),
-    //         this.set.bind(this, 'status'),
-    //         [],//window.NS,
-    //         []
-    //     );
-    // }
+    _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();
-    //     }
-    // }
+    onGraphChanged() {
+        this.graph = {
+            version: this.graph.version + 1,
+            store: this.sg.store
+        };
+        if (this.expanded) {
+            this.redrawGraph();
+        }
+    }
 
-    // _redrawLater() {
-    //     if (!this.graphViewDirty) return;
-    //     render(new GraphView(this.url, this.graph.store).makeTemplate(), this.graphView);
-    //     this.graphViewDirty = false;
-    // }
-
-
+    _redrawLater() {
+        if (!this.graphViewDirty) return;
+        render(new GraphView(this.url, (this.graph as VersionedGraph).store as N3Store).makeTemplate(), this.graphView);
+        this.graphViewDirty = false;
+    }
 }
\ No newline at end of file