Mercurial > code > home > repos > streamed-graph

annotate src/graph_view.ts @ 88:ac7ad087d474

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
graph view rewrites and fixes for the multi-subject table
author drewp@bigasterisk.com
date Tue, 30 Nov 2021 00:14:37 -0800
parents 067d66a45a51
children 955cde1550c3
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
1 import { html, TemplateResult } from "lit";
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
2 import { DataFactory, Literal, NamedNode, Quad, Store, Term, Util } from "n3";
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
3 import { SuffixLabels } from "./suffixLabels";
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
4 import {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
5 groupByRdfType,
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
6 MultiSubjsTypeBlockLayout,
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
7 predsForSubj,
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
8 TypeToSubjs,
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
9 } from "./tabulate";
76
58676ebdce0f sort and dedup imports
drewp@bigasterisk.com
parents: 71
diff changeset
10
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
11 const { namedNode } = DataFactory;
20
9ec3cbc8791a build is running, but no tests, and lots of code is disabled
drewp@bigasterisk.com
parents: 15
diff changeset
12
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
13 // https://github.com/rdfjs/N3.js/issues/265
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
14 if ((Literal.prototype as any).hashCode === undefined) {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
15 (Literal.prototype as any).hashCode = () => 0;
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
16 }
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
17 if ((NamedNode.prototype as any).hashCode === undefined) {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
18 (NamedNode.prototype as any).hashCode = () => 0;
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
19 }
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
20 class NodeDisplay {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
21 labels: SuffixLabels;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
22 constructor(labels: SuffixLabels) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
23 this.labels = labels;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
24 }
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
25 render(n: Term | NamedNode): TemplateResult {
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
26 if (Util.isLiteral(n)) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
27 n = n as Literal;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
28 let dtPart: any = "";
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
29 if (
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
30 n.datatype &&
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
31 n.datatype.value != "http://www.w3.org/2001/XMLSchema#string" && // boring
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
32 n.datatype.value !=
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
33 "http://www.w3.org/1999/02/22-rdf-syntax-ns#langString" // boring
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
34 ) {
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
35 dtPart = html`
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
36 ^^<span class="literalType"> ${this.render(n.datatype)} </span>
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
37 `;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
38 }
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
39 return html` <span class="literal">${n.value}${dtPart}</span> `;
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
40 }
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
41
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
42 if (Util.isNamedNode(n)) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
43 n = n as NamedNode;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
44 let shortened = false;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
45 let uriValue: string = n.value;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
46 for (let [long, short] of [
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
47 ["http://www.w3.org/1999/02/22-rdf-syntax-ns#", "rdf:"],
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
48 ["http://www.w3.org/2000/01/rdf-schema#", "rdfs:"],
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
49 ["http://purl.org/dc/elements/1.1/", "dc:"],
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
50 ["http://www.w3.org/2001/XMLSchema#", "xsd:"],
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
51 ]) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
52 if (uriValue.startsWith(long)) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
53 uriValue = short + uriValue.substr(long.length);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
54 shortened = true;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
55 break;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
56 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
57 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
58 if (!shortened) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
59 let dn: string | undefined = this.labels.getLabelForNode(uriValue);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
60 if (dn === undefined) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
61 throw new Error(`dn=${dn}`);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
62 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
63 uriValue = dn;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
64 }
28
c751380b70c5 uniqueness problem with NamedNodes in set
drewp@bigasterisk.com
parents: 22
diff changeset
65
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
66 return html` <a class="graphUri" href="${n.value}">${uriValue}</a> `;
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
67 }
15
7ca4ff2088c3 managed to use a newer ts or something, so this includes a bunch of type fixes too
drewp@bigasterisk.com
parents: 9
diff changeset
68
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
69 return html` [${n.termType} ${n.value}] `;
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
70 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
71 }
15
7ca4ff2088c3 managed to use a newer ts or something, so this includes a bunch of type fixes too
drewp@bigasterisk.com
parents: 9
diff changeset
72
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
73 export class GraphView {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
74 url: string;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
75 graph: Store;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
76 nodeDisplay: NodeDisplay;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
77 constructor(url: string, graph: Store) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
78 this.url = url;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
79 this.graph = graph;
15
7ca4ff2088c3 managed to use a newer ts or something, so this includes a bunch of type fixes too
drewp@bigasterisk.com
parents: 9
diff changeset
80
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
81 const labels = new SuffixLabels();
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
82 this._addLabelsForAllTerms(labels);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
83 this.nodeDisplay = new NodeDisplay(labels);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
84 }
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
85
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
86 _addLabelsForAllTerms(labels: SuffixLabels) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
87 return this.graph.forEach(
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
88 (q: Quad) => {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
89 if (q.subject.termType === "NamedNode") {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
90 labels.planDisplayForNode(q.subject);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
91 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
92 if (q.predicate.termType === "NamedNode") {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
93 labels.planDisplayForNode(q.predicate);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
94 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
95 if (q.object.termType === "NamedNode") {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
96 labels.planDisplayForNode(q.object);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
97 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
98 if (q.object.termType === "Literal" && q.object.datatype) {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
99 labels.planDisplayForNode(q.object.datatype);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
100 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
101 },
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
102 null,
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
103 null,
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
104 null,
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
105 null
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
106 );
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
107 }
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
108
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
109 _subjPredObjsBlock(subj: NamedNode) {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
110 const columns = predsForSubj(this.graph, subj);
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
111 return html`
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
112 <div class="subject">
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
113 ${this.nodeDisplay.render(subj)}
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
114 <!-- todo: special section for uri/type-and-icon/label/comment -->
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
115 <div>
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
116 ${columns.map((p) => {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
117 return this._predObjsBlock(subj, p);
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
118 })}
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
119 </div>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
120 </div>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
121 `;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
122 }
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
123
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
124 _objCell(obj: Term) {
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
125 return html`
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
126 <div class="object">
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
127 ${this.nodeDisplay.render(obj)}
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
128 <!-- indicate what source or graph said this stmt -->
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
129 </div>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
130 `;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
131 }
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
132
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
133 _predObjsBlock(subj: NamedNode, pred: NamedNode) {
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
134 const objsSet = new Set<Term>();
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
135 this.graph.forEach(
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
136 (q: Quad) => {
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
137 objsSet.add(q.object);
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
138 },
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
139 subj,
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
140 pred,
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
141 null,
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
142 null
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
143 );
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
144 const objs = Array.from(objsSet.values());
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
145 objs.sort();
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
146 return html`
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
147 <div class="predicate">
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
148 ${this.nodeDisplay.render(pred)}
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
149 <div>${objs.map(this._objCell.bind(this))}</div>
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
150 </div>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
151 `;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
152 }
15
7ca4ff2088c3 managed to use a newer ts or something, so this includes a bunch of type fixes too
drewp@bigasterisk.com
parents: 9
diff changeset
153
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
154 _drawObj(obj: Term): TemplateResult {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
155 return html` <div>${this.nodeDisplay.render(obj)}</div> `;
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
156 }
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
157
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
158 _drawColumnHead(pred: NamedNode): TemplateResult {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
159 return html` <th>${this.nodeDisplay.render(pred)}</th> `;
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
160 }
15
7ca4ff2088c3 managed to use a newer ts or something, so this includes a bunch of type fixes too
drewp@bigasterisk.com
parents: 9
diff changeset
161
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
162 _thead(layout: MultiSubjsTypeBlockLayout): TemplateResult {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
163 return html`
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
164 <thead>
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
165 <tr>
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
166 <th></th>
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
167 ${layout.preds.map(this._drawColumnHead.bind(this))}
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
168 </tr>
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
169 </thead>
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
170 `;
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
171 }
49
c16a331f42e5 rewrap; stylesheet
drewp@bigasterisk.com
parents: 40
diff changeset
172
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
173 _msbCell(layout: MultiSubjsTypeBlockLayout, subj: NamedNode) {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
174 return (pred: NamedNode): TemplateResult => {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
175 const objs = layout.graphCells.get(layout.makeCellKey(subj, pred));
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
176 if (!objs || !objs.size) {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
177 return html` <td></td> `;
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
178 }
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
179 const objsList = Array.from(objs);
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
180 objsList.sort();
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
181 return html` <td>${objsList.map(this._drawObj.bind(this))}</td> `;
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
182 };
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
183 }
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
184
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
185 _instanceRow(layout: MultiSubjsTypeBlockLayout) {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
186 return (subj: NamedNode): TemplateResult => {
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
187 return html`
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
188 <tr>
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
189 <td>${this.nodeDisplay.render(subj)}</td>
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
190 ${layout.preds.map(this._msbCell(layout, subj))}
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
191 </tr>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
192 `;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
193 };
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
194 }
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
195
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
196 _multiSubjsTypeBlock(byType: TypeToSubjs, typeUri: NamedNode) {
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
197 const layout = new MultiSubjsTypeBlockLayout(this.graph, byType, typeUri);
15
7ca4ff2088c3 managed to use a newer ts or something, so this includes a bunch of type fixes too
drewp@bigasterisk.com
parents: 9
diff changeset
198
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
199 return html`
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
200 <div>[icon] ${this.nodeDisplay.render(typeUri)} type resources</div>
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
201 <div class="typeBlockScroll">
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
202 <table class="typeBlock">
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
203 ${this._thead(layout)} ${layout.subjs.map(this._instanceRow(layout))}
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
204 </table>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
205 </div>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
206 `;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
207 }
49
c16a331f42e5 rewrap; stylesheet
drewp@bigasterisk.com
parents: 40
diff changeset
208
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
209 makeTemplate(): TemplateResult {
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
210 const { byType, typedSubjs, untypedSubjs } = groupByRdfType(this.graph);
8
6fefd287aff9 closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff changeset
211
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
212 return html`
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
213 <section>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
214 <h2>Current graph (<a href="${this.url}">${this.url}</a>)</h2>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
215 <div>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
216 <!-- todo: graphs and provenance.
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
217 These statements are all in the
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
218 <span data-bind="html: $root.createCurie(graphUri())">...</span> graph.-->
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
219 </div>
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
220 ${typedSubjs.map((t: NamedNode) =>
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
221 this._multiSubjsTypeBlock(byType, t)
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
222 )}
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
223 <div class="spoGrid">
88
ac7ad087d474 graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents: 84
diff changeset
224 ${untypedSubjs.map(this._subjPredObjsBlock.bind(this))}
84
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
225 </div>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
226 </section>
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
227 `;
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
228 }
067d66a45a51 enable more code. factor out setGraphView
drewp@bigasterisk.com
parents: 79
diff changeset
229 }