Mercurial > code > home > repos > streamed-graph
annotate src/render/GraphView.ts @ 117:069c1f70afa5
cleanup
author | drewp@bigasterisk.com |
---|---|
date | Sat, 19 Mar 2022 17:45:01 -0700 |
parents | 4822d5621463 |
children | c2923b20bf5c |
rev | line source |
---|---|
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
1 import Immutable from "immutable"; |
88
ac7ad087d474
graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents:
84
diff
changeset
|
2 import { html, TemplateResult } from "lit"; |
109 | 3 import { NamedNode, Quad, Store, Term } from "n3"; |
110 | 4 import { |
5 AlignedTable, | |
6 FreeStatements, | |
7 Layout, | |
8 PredRow, | |
9 SubjRow, | |
10 } from "../layout/Layout"; | |
109 | 11 import { SuffixLabels } from "../layout/suffixLabels"; |
12 import { ViewConfig } from "../layout/ViewConfig"; | |
13 import { NodeDisplay } from "./NodeDisplay"; | |
20
9ec3cbc8791a
build is running, but no tests, and lots of code is disabled
drewp@bigasterisk.com
parents:
15
diff
changeset
|
14 |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
15 type UriSet = Immutable.Set<NamedNode>; |
109 | 16 |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
17 export class GraphView { |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
18 nodeDisplay!: NodeDisplay; |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
19 constructor( |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
20 public dataSourceUrls: string[], |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
21 public graph: Store, |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
22 public viewConfig?: ViewConfig |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
23 ) {} |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
24 |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
25 async makeTemplate(): Promise<TemplateResult> { |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
26 const layout = new Layout(this.viewConfig); |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
27 const lr = layout.plan(this.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
|
28 |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
29 const labels = new SuffixLabels(); |
97 | 30 this._addLabelsForAllTerms(this.graph, labels); |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
31 |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
32 this.nodeDisplay = new NodeDisplay(labels); |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
33 let viewTitle = html` (no view)`; |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
34 if (this.viewConfig?.url) { |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
35 viewTitle = html` using view |
110 | 36 <a href="${this.viewConfig?.url}">${this.viewConfig?.label()}</a>`; |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
37 } |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
38 return html` |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
39 <section> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
40 <h2> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
41 Current graph (<a href="${this.dataSourceUrls[0]}" |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
42 >${this.dataSourceUrls[0]}</a |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
43 >)${viewTitle} |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
44 </h2> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
45 <div> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
46 <!-- todo: graphs and provenance. |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
47 These statements are all in the |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
48 <span data-bind="html: $root.createCurie(graphUri())">...</span> graph.--> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
49 </div> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
50 ${lr.sections.map(this._renderSection.bind(this))} |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
51 </section> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
52 `; |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
53 } |
8
6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff
changeset
|
54 |
97 | 55 _addLabelsForAllTerms(graph: Store, labels: SuffixLabels) { |
56 graph.forEach( | |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
57 (q: Quad) => { |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
58 if (q.subject.termType === "NamedNode") { |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
59 labels.planDisplayForNode(q.subject); |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
60 } |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
61 if (q.predicate.termType === "NamedNode") { |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
62 labels.planDisplayForNode(q.predicate); |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
63 } |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
64 if (q.object.termType === "NamedNode") { |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
65 labels.planDisplayForNode(q.object); |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
66 } |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
67 if (q.object.termType === "Literal" && q.object.datatype) { |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
68 labels.planDisplayForNode(q.object.datatype); |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
69 } |
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 null, |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
72 null, |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
73 null, |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
74 null |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
75 ); |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
76 } |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
77 _renderSection(section: AlignedTable | FreeStatements) { |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
78 if ((section as any).columnHeaders) { |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
79 return this._renderAlignedTable(section as AlignedTable); |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
80 } else { |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
81 return this._renderFreeStatements(section as FreeStatements); |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
82 } |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
83 } |
8
6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff
changeset
|
84 |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
85 _renderAlignedTable(section: AlignedTable): TemplateResult { |
113 | 86 let anyType: NamedNode = new NamedNode(''); |
110 | 87 const heads = section.columnHeaders.map((ch) => { |
113 | 88 anyType = ch.rdfType; |
110 | 89 return html`<th>${this.nodeDisplay.render(ch.pred)}</th>`; |
90 }); | |
91 const cells = []; | |
92 | |
93 for (let rowIndex in section.rows) { | |
94 const headerCol = html`<th>${this.nodeDisplay.render(section.rowHeaders[rowIndex])}</th>`; | |
95 const bodyCols = [] | |
96 for (let cellObjs of section.rows[rowIndex]) { | |
97 const display = cellObjs.map( | |
98 (t) => html`<div>${this.nodeDisplay.render(t)}</div>` | |
99 ); | |
100 bodyCols.push(html`<td>${display}</td>`); | |
101 } | |
102 cells.push(html`<tr>${headerCol}${bodyCols}</tr>`); | |
103 } | |
104 return html` | |
113 | 105 <div>[icon] Resources of type ${this.nodeDisplay.render(anyType)}</div> |
110 | 106 <div class="typeBlockScroll"> |
113 | 107 <table class="typeBlock"> |
108 <thead> | |
109 <th>Subject</th> | |
110 ${heads} | |
111 </thead> | |
112 <tbody> | |
113 ${cells} | |
114 </tbody> | |
115 </table> | |
110 | 116 </div> |
117 `; | |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
118 } |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
119 |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
120 _renderFreeStatements(section: FreeStatements): TemplateResult { |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
121 const subjects: NamedNode[] = []; |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
122 let subjPreds = Immutable.Map<NamedNode, UriSet>(); |
110 | 123 |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
124 return html`<div class="spoGrid"> |
110 | 125 grid has rowcount ${section.subjRows.length} |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
126 ${section.subjRows.map(this._subjPredObjsBlock.bind(this))} |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
127 </div>`; |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
128 } |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
129 |
110 | 130 _subjPredObjsBlock(row: SubjRow): TemplateResult { |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
131 return html` |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
132 <div class="subject"> |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
133 ${this.nodeDisplay.render(row.subj)} |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
134 <!-- todo: special section for uri/type-and-icon/label/comment --> |
110 | 135 <div>${row.predRows.map(this._predObjsBlock.bind(this))}</div> |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
136 </div> |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
137 `; |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
138 } |
8
6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff
changeset
|
139 |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
140 _predObjsBlock(row: PredRow): TemplateResult { |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
141 return html` |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
142 <div class="predicate"> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
143 ${this.nodeDisplay.render(row.pred)} |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
144 <div>${row.objs.map(this._objCell.bind(this))}</div> |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
145 </div> |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
146 `; |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
147 } |
8
6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff
changeset
|
148 |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
149 _objCell(obj: Term): TemplateResult { |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
150 return html` |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
151 <div class="object"> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
152 ${this.nodeDisplay.render(obj)} |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
153 <!-- indicate what source or graph said this stmt --> |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
154 </div> |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
155 `; |
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
156 } |
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
|
157 |
88
ac7ad087d474
graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents:
84
diff
changeset
|
158 _drawObj(obj: Term): TemplateResult { |
ac7ad087d474
graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents:
84
diff
changeset
|
159 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
|
160 } |
8
6fefd287aff9
closer- element now holds a changing graph, but can't draw it yet
drewp@bigasterisk.com
parents:
diff
changeset
|
161 |
88
ac7ad087d474
graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents:
84
diff
changeset
|
162 _drawColumnHead(pred: NamedNode): TemplateResult { |
ac7ad087d474
graph view rewrites and fixes for the multi-subject table
drewp@bigasterisk.com
parents:
84
diff
changeset
|
163 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
|
164 } |
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
|
165 |
108
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
166 |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
167 // return html` |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
168 // <div>[icon] Resources of type ${typeNames}</div> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
169 // <div class="typeBlockScroll"> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
170 // <table class="typeBlock"> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
171 // ${this._thead(layout)} ${layout.subjs.map(this._instanceRow(layout))} |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
172 // </table> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
173 // </div> |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
174 // `; |
5e6840229a05
rewrite freeStatements rendering to put more planning in layout
drewp@bigasterisk.com
parents:
107
diff
changeset
|
175 // } |
84
067d66a45a51
enable more code. factor out setGraphView
drewp@bigasterisk.com
parents:
79
diff
changeset
|
176 } |