--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/NodeDisplay.ts	Thu Jan 13 21:32:18 2022 -0800
@@ -0,0 +1,55 @@
+import { html, TemplateResult } from "lit";
+import { Literal, NamedNode, Term, Util } from "n3";
+import { SuffixLabels } from "./suffixLabels";
+
+export class NodeDisplay {
+  labels: SuffixLabels;
+  constructor(labels: SuffixLabels) {
+    this.labels = labels;
+  }
+  render(n: Term | NamedNode): TemplateResult {
+    if (Util.isLiteral(n)) {
+      n = n as Literal;
+      let dtPart: any = "";
+      if (n.datatype &&
+        n.datatype.value != "http://www.w3.org/2001/XMLSchema#string" && // boring
+        n.datatype.value !=
+        "http://www.w3.org/1999/02/22-rdf-syntax-ns#langString" //  boring
+      ) {
+        dtPart = html`
+          ^^<span class="literalType"> ${this.render(n.datatype)} </span>
+        `;
+      }
+      return html` <span class="literal">${n.value}${dtPart}</span> `;
+    }
+
+    if (Util.isNamedNode(n)) {
+      n = n as NamedNode;
+      let shortened = false;
+      let uriValue: string = n.value;
+      for (let [long, short] of [
+        ["http://www.w3.org/1999/02/22-rdf-syntax-ns#", "rdf:"],
+        ["http://www.w3.org/2000/01/rdf-schema#", "rdfs:"],
+        ["http://purl.org/dc/elements/1.1/", "dc:"],
+        ["http://www.w3.org/2001/XMLSchema#", "xsd:"],
+      ]) {
+        if (uriValue.startsWith(long)) {
+          uriValue = short + uriValue.substr(long.length);
+          shortened = true;
+          break;
+        }
+      }
+      if (!shortened) {
+        let dn: string | undefined = this.labels.getLabelForNode(uriValue);
+        if (dn === undefined) {
+          throw new Error(`dn=${dn}`);
+        }
+        uriValue = dn;
+      }
+
+      return html` <a class="graphUri" href="${n.value}">${uriValue}</a> `;
+    }
+
+    return html` [${n.termType} ${n.value}] `;
+  }
+}

--- a/src/graph_view.ts	Wed Jan 12 22:15:13 2022 -0800
+++ b/src/graph_view.ts	Thu Jan 13 21:32:18 2022 -0800
@@ -1,5 +1,6 @@
 import { html, TemplateResult } from "lit";
 import { DataFactory, Literal, NamedNode, Quad, Store, Term, Util } from "n3";
+import { NodeDisplay } from "./NodeDisplay";
 import { SuffixLabels } from "./suffixLabels";
 import {
   groupByRdfType,
@@ -18,59 +19,6 @@
 if ((NamedNode.prototype as any).hashCode === undefined) {
   (NamedNode.prototype as any).hashCode = () => 0;
 }
-class NodeDisplay {
-  labels: SuffixLabels;
-  constructor(labels: SuffixLabels) {
-    this.labels = labels;
-  }
-  render(n: Term | NamedNode): TemplateResult {
-    if (Util.isLiteral(n)) {
-      n = n as Literal;
-      let dtPart: any = "";
-      if (
-        n.datatype &&
-        n.datatype.value != "http://www.w3.org/2001/XMLSchema#string" && // boring
-        n.datatype.value !=
-          "http://www.w3.org/1999/02/22-rdf-syntax-ns#langString" //  boring
-      ) {
-        dtPart = html`
-          ^^<span class="literalType"> ${this.render(n.datatype)} </span>
-        `;
-      }
-      return html` <span class="literal">${n.value}${dtPart}</span> `;
-    }
-
-    if (Util.isNamedNode(n)) {
-      n = n as NamedNode;
-      let shortened = false;
-      let uriValue: string = n.value;
-      for (let [long, short] of [
-        ["http://www.w3.org/1999/02/22-rdf-syntax-ns#", "rdf:"],
-        ["http://www.w3.org/2000/01/rdf-schema#", "rdfs:"],
-        ["http://purl.org/dc/elements/1.1/", "dc:"],
-        ["http://www.w3.org/2001/XMLSchema#", "xsd:"],
-      ]) {
-        if (uriValue.startsWith(long)) {
-          uriValue = short + uriValue.substr(long.length);
-          shortened = true;
-          break;
-        }
-      }
-      if (!shortened) {
-        let dn: string | undefined = this.labels.getLabelForNode(uriValue);
-        if (dn === undefined) {
-          throw new Error(`dn=${dn}`);
-        }
-        uriValue = dn;
-      }
-
-      return html` <a class="graphUri" href="${n.value}">${uriValue}</a> `;
-    }
-
-    return html` [${n.termType} ${n.value}] `;
-  }
-}
-
 export class GraphView {
   url: string;
   view: View;