--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/demo/public/repos.n3	Wed Jan 12 20:26:57 2022 -0800
@@ -0,0 +1,8 @@
+@prefix : <http://example.com/> .
+@prefix demo: <http://example.com/demo/> .
+@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
+
+
+<> a :View ; rdfs:label "repos" .
+<> :table demo:table1 .
+demo:table1 :showsType :Repo .

--- a/src/graph_view.ts	Wed Jan 12 16:53:44 2022 -0800
+++ b/src/graph_view.ts	Wed Jan 12 20:26:57 2022 -0800
@@ -7,6 +7,7 @@
   predsForSubj,
   TypeToSubjs,
 } from "./tabulate";
+import { View } from "./view_loader";
 
 const { namedNode } = DataFactory;
 
@@ -72,10 +73,12 @@
 
 export class GraphView {
   url: string;
+  view: View;
   graph: Store;
   nodeDisplay: NodeDisplay;
-  constructor(url: string, graph: Store) {
+  constructor(url: string, viewUrl: string, graph: Store) {
     this.url = url;
+    this.view = new View(viewUrl);
     this.graph = graph;
 
     const labels = new SuffixLabels();
@@ -206,12 +209,18 @@
     `;
   }
 
-  makeTemplate(): TemplateResult {
+  async makeTemplate(): Promise<TemplateResult> {
+    await this.view.ready;
     const { byType, typedSubjs, untypedSubjs } = groupByRdfType(this.graph);
-
+    let viewTitle = html` (no view)`;
+    if (this.view.url) {
+      viewTitle = html` using view <a href="${this.view.url}">${this.view.label()}</a>`;
+    }
     return html`
       <section>
-        <h2>Current graph (<a href="${this.url}">${this.url}</a>)</h2>
+        <h2>
+          Current graph (<a href="${this.url}">${this.url}</a>)${viewTitle}
+        </h2>
         <div>
           <!-- todo: graphs and provenance.
             These statements are all in the

--- a/src/index.ts	Wed Jan 12 16:53:44 2022 -0800
+++ b/src/index.ts	Wed Jan 12 20:26:57 2022 -0800
@@ -18,7 +18,8 @@
 export class StreamedGraph extends LitElement {
   @property({ type: String })
   url: string = "";
-
+  @property({ type: String })
+  view: string = "";
   @property({ type: Object })
   graph!: VersionedGraph;
 
@@ -70,7 +71,8 @@
 
   redrawGraph() {
     this.graphViewDirty = true;
-    requestAnimationFrame(this._redrawLater.bind(this));
+    const rl: ()=>Promise<void> = this._redrawLater.bind(this)
+    requestAnimationFrame(rl);
   }
 
   _onUrl(url: string) {
@@ -101,11 +103,13 @@
     );
   }
 
-  _redrawLater() {
+  async _redrawLater() {
     if (!this.graphViewDirty) return;
 
     if ((this.graph as VersionedGraph).store && this.graph.store) {
-      this._graphAreaShowGraph(new GraphView(this.url, this.graph.store));
+      await this._graphAreaShowGraph(
+        new GraphView(this.url, this.view, this.graph.store)
+      );
       this.graphViewDirty = false;
     } else {
       this._graphAreaShowPending();
@@ -120,8 +124,8 @@
     this._setGraphArea(html` <span>waiting for data...</span> `);
   }
 
-  _graphAreaShowGraph(graphView: GraphView) {
-    this._setGraphArea(graphView.makeTemplate());
+  async _graphAreaShowGraph(graphView: GraphView) {
+    this._setGraphArea(await graphView.makeTemplate());
   }
 
   _setGraphArea(tmpl: TemplateResult) {

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/view_loader.ts	Wed Jan 12 20:26:57 2022 -0800
@@ -0,0 +1,43 @@
+// Load requested view and provide access to it
+import { Store, Parser } from "n3";
+
+async function fetchAndParse(url: string): Promise<Store> {
+  const store = new Store();
+  const res = await fetch(url);
+  const body = await res.text();
+  const parser = new Parser({ format: "N3" });
+  await new Promise((done, rej) => {
+    parser.parse(body, (err, quad, prefixes) => {
+      if (err) {
+        throw err;
+      }
+      if (quad) {
+        store.addQuad(quad);
+      } else {
+        done(null);
+      }
+    });
+  });
+  return store;
+}
+
+export class View {
+  graph: Store;
+  ready: Promise<null>;
+  constructor(public url: string | "") {
+    this.graph = new Store();
+    this.ready = new Promise((res, rej) => {
+      if (url) {
+        fetchAndParse(url).then((s2) => {
+          this.graph = s2;
+          res(null);
+        });
+      } else {
+        res(null);
+      }
+    });
+  }
+  label() {
+      return "nicelabel";
+  }
+}