--- a/src/index.ts	Wed Nov 17 16:42:59 2021 -0800
+++ b/src/index.ts	Wed Nov 17 16:45:10 2021 -0800
@@ -1,84 +1,76 @@
-import {LitElement, html} from 'lit';
-import {customElement, property} from 'lit/decorators.js';
+import { LitElement, html, css, render, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
 
-// import { Store } from 'n3';
-
+import { Store } from "n3";
 
-// import { GraphView } from './graph_view';
-import { StreamedGraphClient } from './streamed_graph_client';
+import { GraphView } from "./graph_view";
+import { StreamedGraphClient } from "./streamed_graph_client";
 import { style, addFontToRootPage } from './style';
 
 // export * from "./graph_queries";
 
-// export interface VersionedGraph {
-//   version: number;
-//   store: Store;
-// }
+export interface VersionedGraph {
+  version: number;
+  store: Store;
+}
 
 @customElement("streamed-graph")
 export class StreamedGraph extends LitElement {
-
   @property({ type: String })
   url: string = "";
 
-//   @property({ type: Object })
-//   graph!: VersionedGraph;
+  @property({ type: Object })
+  graph!: VersionedGraph;
 
   @property({ type: Boolean })
   expanded: boolean = false;
 
-
   @property({ type: String })
   status: string = "";
 
   sg!: StreamedGraphClient;
-//   graphViewEl!: Element;
-//   graphViewDirty = true;
+  graphViewDirty = true;
 
-  render()  {
-    const expandAction = this.expanded ? '-' : '+';
   static styles=style;
+  render() {
+    const expandAction = this.expanded ? "-" : "+";
     return html`
-         <div id="ui">
-           <span class="expander"
-             ><button @click="${this.toggleExpand}">${expandAction}</button></span
-           >
-           StreamedGraph <a href="${this.url}">[source]</a>: ${this.status}
-         </div>
-         <div id="graphView"></div>
-       `
-     ;
-   }
+      <div id="ui">
+        <span class="expander"
+          ><button @click="${this.toggleExpand}">${expandAction}</button></span
+        >
+        StreamedGraph <a href="${this.url}">[source]</a>: ${this.status}
+      </div>
+      <div id="graphView"></div>
+    `;
+  }
 
   connectedCallback() {
     super.connectedCallback();
-//     const emptyStore = new Store();
-//     this.graph = { version: -1, store: emptyStore };
-//     this.graphViewEl = (this.shadowRoot as ShadowRoot).getElementById(
-//       "graphView"
-//     ) as Element;
     addFontToRootPage();
+    const emptyStore = new Store();
+    this.graph = { version: -1, store: emptyStore };
 
     this._onUrl(this.url); // todo: watch for changes and rebuild
     if (this.expanded) {
-//       this.redrawGraph();
+      this.redrawGraph();
     }
   }
 
   toggleExpand() {
     this.expanded = !this.expanded;
-//     if (this.expanded) {
-//       this.redrawGraph();
-//     } else {
-//       this.graphViewDirty = false;
-//       this._graphAreaClose();
-//     }
+    if (this.expanded) {
+      this.redrawGraph();
+    } else {
+      this.graphViewDirty = false;
+      this._graphAreaClose();
+    }
   }
 
-//   redrawGraph() {
-//     this.graphViewDirty = true;
-//     requestAnimationFrame(this._redrawLater.bind(this));
-//   }
+  redrawGraph() {
+    this.graphViewDirty = true;
+    requestAnimationFrame(this._redrawLater.bind(this));
+  }
 
   _onUrl(url: string) {
     if (this.sg) {
@@ -87,52 +79,57 @@
     this.sg = new StreamedGraphClient(
       url,
       this.onGraphChanged.bind(this),
-      (st) => {this.status = st},
+      (st) => {
+        this.status = st;
+      },
       [], //window.NS,
       []
     );
   }
 
   onGraphChanged() {
-//     this.graph = {
-//       version: this.graph.version + 1,
-//       store: this.sg.store
-//     };
-//     if (this.expanded) {
-//       this.redrawGraph();
-//     }
-//     this.dispatchEvent(
-//       new CustomEvent("graph-changed", { detail: { graph: this.graph } })
-//     );
+    this.graph = {
+      version: this.graph.version + 1,
+      store: this.sg.store,
+    };
+    if (this.expanded) {
+      this.redrawGraph();
+    }
+    this.dispatchEvent(
+      new CustomEvent("graph-changed", { detail: { graph: this.graph } })
+    );
   }
 
-//   _redrawLater() {
-//     if (!this.graphViewDirty) return;
+  _redrawLater() {
+    if (!this.graphViewDirty) return;
 
-//     if ((this.graph as VersionedGraph).store && this.graph.store) {
-//       this._graphAreaShowGraph(new GraphView(this.url, this.graph.store));
-//       this.graphViewDirty = false;
-//     } else {
-//       this._graphAreaShowPending();
-//     }
-//   }
+    if ((this.graph as VersionedGraph).store && this.graph.store) {
+      this._graphAreaShowGraph(new GraphView(this.url, this.graph.store));
+      this.graphViewDirty = false;
+    } else {
+      this._graphAreaShowPending();
+    }
+  }
+
+  _graphAreaClose() {
+    this._setGraphArea(html``);
+  }
 
-//   _graphAreaClose() {
-//     render(null, this.graphViewEl);
-//   }
+  _graphAreaShowPending() {
+    this._setGraphArea(html` <span>waiting for data...</span> `);
+  }
+
+  _graphAreaShowGraph(graphView: GraphView) {
+    this._setGraphArea(graphView.makeTemplate());
+  }
 
-//   _graphAreaShowPending() {
-//     render(
-//       html`
-//         <span>waiting for data...</span>
-//       `,
-//       this.graphViewEl
-//     );
-//   }
-
-//   _graphAreaShowGraph(graphView: GraphView) {
-//     render(graphView.makeTemplate(), this.graphViewEl);
-//   }
+  _setGraphArea(tmpl: TemplateResult) {
+    const el = this.shadowRoot?.getElementById("graphView");
+    if (!el) {
+      return;
+    }
+    render(tmpl, el);
+  }
 }
 
 // // allow child nodes to combine a few graphs and statics