--- a/src/index.ts	Tue Feb 11 22:55:24 2020 -0800
+++ b/src/index.ts	Wed Nov 17 13:01:08 2021 -0800
@@ -1,145 +1,142 @@
-import { render } from 'lit-html';
-import { N3Store, Store } from 'n3';
-
-import { computed, customElement, property } from '@polymer/decorators';
-import { html, PolymerElement } from '@polymer/polymer';
+import {LitElement, html} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 
-import { GraphView } from './graph_view';
-import { StreamedGraphClient } from './streamed_graph_client';
-import style from './style.styl';
+// import { Store } from 'n3';
 
-export * from "./graph_queries";
 
-export interface VersionedGraph {
-  version: number;
-  store: N3Store;
-}
+// import { GraphView } from './graph_view';
+// import { StreamedGraphClient } from './streamed_graph_client';
+// import style from './style.styl';
 
-function templateWithStyle(style: string, tmpl: HTMLTemplateElement) {
-  const styleEl = document.createElement("style");
-  styleEl.textContent = style;
-  tmpl.content.insertBefore(styleEl, tmpl.content.firstChild);
-  return tmpl;
-}
+// export * from "./graph_queries";
+
+// export interface VersionedGraph {
+//   version: number;
+//   store: Store;
+// }
 
 @customElement("streamed-graph")
-export class StreamedGraph extends PolymerElement {
-  @property({ type: String })
-  url: string = "";
+export class StreamedGraph extends LitElement {
+//   @property({ type: String })
+//   url: string = "";
 
-  @property({ type: Object, notify: true })
-  graph!: VersionedGraph;
+//   @property({ type: Object })
+//   graph!: VersionedGraph;
 
-  @property({ type: Boolean })
-  expanded: boolean = false;
+//   @property({ type: Boolean })
+//   expanded: boolean = false;
 
-  @computed("expanded")
-  get expandAction() {
-    return this.expanded ? "-" : "+";
-  }
+//   // @computed("expanded")
+//   // get expandAction() {
+//   //   return this.expanded ? "-" : "+";
+//   // }
 
-  @property({ type: String })
-  status: string = "";
+//   @property({ type: String })
+//   status: string = "";
 
-  sg!: StreamedGraphClient;
-  graphViewEl!: Element;
-  graphViewDirty = true;
+//   sg!: StreamedGraphClient;
+//   graphViewEl!: Element;
+//   graphViewDirty = true;
 
-  static get template() {
-    return templateWithStyle(
-      style,
-      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>
-      `
-    );
-  }
+//   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>
+//       `
+//     ;
+//   }
 
-  ready() {
-    super.ready();
-    const emptyStore = new Store();
-    this.graph = { version: -1, store: emptyStore };
-    this.graphViewEl = (this.shadowRoot as ShadowRoot).getElementById(
-      "graphView"
-    ) as Element;
+//   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.redrawGraph();
-    }
-  }
+//     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;
+//       this._graphAreaClose();
+//     }
+//   }
 
-  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));
+//   }
 
-  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),
-      this.set.bind(this, "status"),
-      [], //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 } })
+//     );
+//   }
 
-  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 } })
-    );
-  }
+//   _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();
+//     }
+//   }
+
+//   _graphAreaClose() {
+//     render(null, this.graphViewEl);
+//   }
 
-    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() {
-    render(null, this.graphViewEl);
-  }
+//   _graphAreaShowPending() {
+//     render(
+//       html`
+//         <span>waiting for data...</span>
+//       `,
+//       this.graphViewEl
+//     );
+//   }
 
-  _graphAreaShowPending() {
-    render(
-      html`
-        <span>waiting for data...</span>
-      `,
-      this.graphViewEl
-    );
-  }
+//   _graphAreaShowGraph(graphView: GraphView) {
+//     render(graphView.makeTemplate(), this.graphViewEl);
+//   }
+}
 
-  _graphAreaShowGraph(graphView: GraphView) {
-    render(graphView.makeTemplate(), this.graphViewEl);
-  }
-}
+// // allow child nodes to combine a few graphs and statics
+// //<streamed-graph id="timebankGraph"  graph="{{graph}}" expanded="true">
+// //  <member-graph url="graph/timebank/events"></member-graph>
+// //  <member-graph url="/some/static.n3"></member-graph>
+// //</streamed-graph>