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