--- a/src/index.ts	Wed Nov 17 13:01:08 2021 -0800
+++ b/src/index.ts	Wed Nov 17 15:00:17 2021 -0800
@@ -5,7 +5,7 @@
 
 
 // import { GraphView } from './graph_view';
-// import { StreamedGraphClient } from './streamed_graph_client';
+import { StreamedGraphClient } from './streamed_graph_client';
 // import style from './style.styl';
 
 // export * from "./graph_queries";
@@ -17,83 +17,81 @@
 
 @customElement("streamed-graph")
 export class StreamedGraph extends LitElement {
-//   @property({ type: String })
-//   url: string = "";
+
+  @property({ type: String })
+  url: string = "";
 
 //   @property({ type: Object })
 //   graph!: VersionedGraph;
 
-//   @property({ type: Boolean })
-//   expanded: boolean = false;
+  @property({ type: Boolean })
+  expanded: boolean = false;
+
 
-//   // @computed("expanded")
-//   // get expandAction() {
-//   //   return this.expanded ? "-" : "+";
-//   // }
+  @property({ type: String })
+  status: string = "";
 
-//   @property({ type: String })
-//   status: string = "";
-
-//   sg!: StreamedGraphClient;
+  sg!: StreamedGraphClient;
 //   graphViewEl!: Element;
 //   graphViewDirty = true;
 
-//   static get template() {
-//     return html`
-//         <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>
-//       `
-//     ;
-//   }
+  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>
+       `
+     ;
+   }
 
-//   connectedCallback() {
-//     super.connectedCallback();
+  connectedCallback() {
+    super.connectedCallback();
 //     const emptyStore = new Store();
 //     this.graph = { version: -1, store: emptyStore };
 //     this.graphViewEl = (this.shadowRoot as ShadowRoot).getElementById(
 //       "graphView"
 //     ) as Element;
 
-//     this._onUrl(this.url); // todo: watch for changes and rebuild
-//     if (this.expanded) {
+    this._onUrl(this.url); // todo: watch for changes and rebuild
+    if (this.expanded) {
 //       this.redrawGraph();
-//     }
-//   }
+    }
+  }
 
-//   toggleExpand() {
-//     this.expanded = !this.expanded;
+  toggleExpand() {
+    this.expanded = !this.expanded;
 //     if (this.expanded) {
 //       this.redrawGraph();
 //     } else {
 //       this.graphViewDirty = false;
 //       this._graphAreaClose();
 //     }
-//   }
+  }
 
 //   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),
-//       function(st){},//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),
+      (st) => {this.status = st},
+      [], //window.NS,
+      []
+    );
+  }
 
-//   onGraphChanged() {
+  onGraphChanged() {
 //     this.graph = {
 //       version: this.graph.version + 1,
 //       store: this.sg.store
@@ -104,7 +102,7 @@
 //     this.dispatchEvent(
 //       new CustomEvent("graph-changed", { detail: { graph: this.graph } })
 //     );
-//   }
+  }
 
 //   _redrawLater() {
 //     if (!this.graphViewDirty) return;