Mercurial > code > home > repos > streamed-graph

comparison src/render/GraphView.ts @ 110:3cdbbd913f1d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
table displays now just barely
author drewp@bigasterisk.com
date Fri, 18 Mar 2022 23:41:24 -0700
parents cbcd82d21356
children 4822d5621463
comparison
equal deleted inserted replaced
109:cbcd82d21356 110:3cdbbd913f1d
1 import Immutable from "immutable"; 1 import Immutable from "immutable";
2 import { html, TemplateResult } from "lit"; 2 import { html, TemplateResult } from "lit";
3 import { NamedNode, Quad, Store, Term } from "n3"; 3 import { NamedNode, Quad, Store, Term } from "n3";
4 import { AlignedTable, FreeStatements, Layout, PredRow, SubjRow } from "../layout/Layout"; 4 import {
5 AlignedTable,
6 FreeStatements,
7 Layout,
8 PredRow,
9 SubjRow,
10 } from "../layout/Layout";
5 import { SuffixLabels } from "../layout/suffixLabels"; 11 import { SuffixLabels } from "../layout/suffixLabels";
6 import { ViewConfig } from "../layout/ViewConfig"; 12 import { ViewConfig } from "../layout/ViewConfig";
7 import { NodeDisplay } from "./NodeDisplay"; 13 import { NodeDisplay } from "./NodeDisplay";
8 14
9 type UriSet = Immutable.Set<NamedNode>; 15 type UriSet = Immutable.Set<NamedNode>;
25 31
26 this.nodeDisplay = new NodeDisplay(labels); 32 this.nodeDisplay = new NodeDisplay(labels);
27 let viewTitle = html` (no view)`; 33 let viewTitle = html` (no view)`;
28 if (this.viewConfig?.url) { 34 if (this.viewConfig?.url) {
29 viewTitle = html` using view 35 viewTitle = html` using view
30 <a href="${this.viewConfig.url}">${this.viewConfig.label()}</a>`; 36 <a href="${this.viewConfig?.url}">${this.viewConfig?.label()}</a>`;
31 } 37 }
32 // const tables = this.view.toplevelTables(typesPresent);
33 return html` 38 return html`
34 <section> 39 <section>
35 <h2> 40 <h2>
36 Current graph (<a href="${this.dataSourceUrls[0]}" 41 Current graph (<a href="${this.dataSourceUrls[0]}"
37 >${this.dataSourceUrls[0]}</a 42 >${this.dataSourceUrls[0]}</a
76 return this._renderFreeStatements(section as FreeStatements); 81 return this._renderFreeStatements(section as FreeStatements);
77 } 82 }
78 } 83 }
79 84
80 _renderAlignedTable(section: AlignedTable): TemplateResult { 85 _renderAlignedTable(section: AlignedTable): TemplateResult {
81 return html`aligned table section`; 86 const heads = section.columnHeaders.map((ch) => {
87 return html`<th>${this.nodeDisplay.render(ch.pred)}</th>`;
88 });
89 const cells = [];
90
91 for (let rowIndex in section.rows) {
92 const headerCol = html`<th>${this.nodeDisplay.render(section.rowHeaders[rowIndex])}</th>`;
93 const bodyCols = []
94 for (let cellObjs of section.rows[rowIndex]) {
95 const display = cellObjs.map(
96 (t) => html`<div>${this.nodeDisplay.render(t)}</div>`
97 );
98 bodyCols.push(html`<td>${display}</td>`);
99 }
100 cells.push(html`<tr>${headerCol}${bodyCols}</tr>`);
101 }
102 return html`
103 <pre> {JSON.stringify(section.rows,null,' ')}</pre>
104 <div class="typeBlockScroll">
105 <table class="typeBlock">
106 <thead>
107 <th>Subject</th>
108 ${heads}
109 </thead>
110 <tbody>
111 ${cells}
112 </tbody>
113 </table>
114 </div>
115 `;
82 } 116 }
83 117
84 _renderFreeStatements(section: FreeStatements): TemplateResult { 118 _renderFreeStatements(section: FreeStatements): TemplateResult {
85 const subjects: NamedNode[] = []; 119 const subjects: NamedNode[] = [];
86 let subjPreds = Immutable.Map<NamedNode, UriSet>(); 120 let subjPreds = Immutable.Map<NamedNode, UriSet>();
87 121
88 return html`<div class="spoGrid"> 122 return html`<div class="spoGrid">
89 grid has rowcount ${section.subjRows.length} 123 grid has rowcount ${section.subjRows.length}
90 ${section.subjRows.map(this._subjPredObjsBlock.bind(this))} 124 ${section.subjRows.map(this._subjPredObjsBlock.bind(this))}
91 </div>`; 125 </div>`;
92 } 126 }
93 127
94 _subjPredObjsBlock( row: SubjRow ): TemplateResult { 128 _subjPredObjsBlock(row: SubjRow): TemplateResult {
95 return html` 129 return html`
96 <div class="subject"> 130 <div class="subject">
97 ${this.nodeDisplay.render(row.subj)} 131 ${this.nodeDisplay.render(row.subj)}
98 <!-- todo: special section for uri/type-and-icon/label/comment --> 132 <!-- todo: special section for uri/type-and-icon/label/comment -->
99 <div> 133 <div>${row.predRows.map(this._predObjsBlock.bind(this))}</div>
100 ${row.predRows.map(this._predObjsBlock.bind(this))}
101 </div>
102 </div> 134 </div>
103 `; 135 `;
104 } 136 }
105 137
106 _predObjsBlock(row: PredRow): TemplateResult { 138 _predObjsBlock(row: PredRow): TemplateResult {