Mercurial > code > home > repos > streamed-graph

comparison src/render/GraphView.ts @ 118:c2923b20bf5c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
support multi labels per column
author drewp@bigasterisk.com
date Sun, 20 Mar 2022 00:54:19 -0700
parents 4822d5621463
children
comparison
equal deleted inserted replaced
117:069c1f70afa5 118:c2923b20bf5c
6 FreeStatements, 6 FreeStatements,
7 Layout, 7 Layout,
8 PredRow, 8 PredRow,
9 SubjRow, 9 SubjRow,
10 } from "../layout/Layout"; 10 } from "../layout/Layout";
11 import { uniqueSortedTerms } from "../layout/rdf_value";
11 import { SuffixLabels } from "../layout/suffixLabels"; 12 import { SuffixLabels } from "../layout/suffixLabels";
12 import { ViewConfig } from "../layout/ViewConfig"; 13 import { ViewConfig } from "../layout/ViewConfig";
13 import { NodeDisplay } from "./NodeDisplay"; 14 import { NodeDisplay } from "./NodeDisplay";
14 15
15 type UriSet = Immutable.Set<NamedNode>; 16 type UriSet = Immutable.Set<NamedNode>;
72 null, 73 null,
73 null, 74 null,
74 null 75 null
75 ); 76 );
76 } 77 }
78
77 _renderSection(section: AlignedTable | FreeStatements) { 79 _renderSection(section: AlignedTable | FreeStatements) {
78 if ((section as any).columnHeaders) { 80 if ((section as any).columnHeaders) {
79 return this._renderAlignedTable(section as AlignedTable); 81 return this._renderAlignedTable(section as AlignedTable);
80 } else { 82 } else {
81 return this._renderFreeStatements(section as FreeStatements); 83 return this._renderFreeStatements(section as FreeStatements);
82 } 84 }
83 } 85 }
84 86
85 _renderAlignedTable(section: AlignedTable): TemplateResult { 87 _renderAlignedTable(section: AlignedTable): TemplateResult {
86 let anyType: NamedNode = new NamedNode(''); 88 const tableTypes: NamedNode[][] = [];
87 const heads = section.columnHeaders.map((ch) => { 89 const typeHeads: TemplateResult[] = [];
88 anyType = ch.rdfType; 90 const heads: TemplateResult[] = [];
89 return html`<th>${this.nodeDisplay.render(ch.pred)}</th>`; 91 for (let ch of section.columnHeaders) {
90 }); 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
91 const cells = []; 103 const cells = [];
92 104
93 for (let rowIndex in section.rows) { 105 for (let rowIndex in section.rows) {
94 const headerCol = html`<th>${this.nodeDisplay.render(section.rowHeaders[rowIndex])}</th>`; 106 const headerCol = this.nodeDisplay.render(section.rowHeaders[rowIndex]);
95 const bodyCols = [] 107 const bodyCols = [];
96 for (let cellObjs of section.rows[rowIndex]) { 108 for (let cellObjs of section.rows[rowIndex]) {
97 const display = cellObjs.map( 109 const display = cellObjs.map(
98 (t) => html`<div>${this.nodeDisplay.render(t)}</div>` 110 (t) => html`<div>${this.nodeDisplay.render(t)}</div>`
99 ); 111 );
100 bodyCols.push(html`<td>${display}</td>`); 112 bodyCols.push(html`<td>${display}</td>`);
101 } 113 }
102 cells.push(html`<tr>${headerCol}${bodyCols}</tr>`); 114 cells.push(
103 } 115 html`<tr>
104 return html` 116 <th>${headerCol}</th>
105 <div>[icon] Resources of type ${this.nodeDisplay.render(anyType)}</div> 117 ${bodyCols}
118 </tr>`
119 );
120 }
121 const tableTypesUnique = uniqueSortedTerms(tableTypes.flat());
122 const typesDisplay = html`${tableTypesUnique.length == 1 ? "type" : "types"}
123 ${tableTypesUnique.map((n) => this.nodeDisplay.render(n))}`;
124
125 return html`
126 <div>[icon] Resources of ${typesDisplay}</div>
106 <div class="typeBlockScroll"> 127 <div class="typeBlockScroll">
107 <table class="typeBlock"> 128 <table class="typeBlock">
108 <thead> 129 <thead>
109 <th>Subject</th> 130 <tr>
110 ${heads} 131 <th></th>
132 ${typeHeads}
133 </tr>
134 <tr>
135 <th>Subject</th>
136 ${heads}
137 </tr>
111 </thead> 138 </thead>
112 <tbody> 139 <tbody>
113 ${cells} 140 ${cells}
114 </tbody> 141 </tbody>
115 </table> 142 </table>
160 } 187 }
161 188
162 _drawColumnHead(pred: NamedNode): TemplateResult { 189 _drawColumnHead(pred: NamedNode): TemplateResult {
163 return html` <th>${this.nodeDisplay.render(pred)}</th> `; 190 return html` <th>${this.nodeDisplay.render(pred)}</th> `;
164 } 191 }
165
166 192
167 // return html` 193 // return html`
168 // <div>[icon] Resources of type ${typeNames}</div> 194 // <div>[icon] Resources of type ${typeNames}</div>
169 // <div class="typeBlockScroll"> 195 // <div class="typeBlockScroll">
170 // <table class="typeBlock"> 196 // <table class="typeBlock">