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

table displays now just barely
author drewp@bigasterisk.com
date Fri, 18 Mar 2022 23:41:24 -0700
parents cbcd82d21356
children 4822d5621463
line wrap: on
line diff
--- a/src/render/GraphView.ts	Fri Mar 18 12:00:33 2022 -0700
+++ b/src/render/GraphView.ts	Fri Mar 18 23:41:24 2022 -0700
@@ -1,7 +1,13 @@
 import Immutable from "immutable";
 import { html, TemplateResult } from "lit";
 import { NamedNode, Quad, Store, Term } from "n3";
-import { AlignedTable, FreeStatements, Layout, PredRow, SubjRow } from "../layout/Layout";
+import {
+  AlignedTable,
+  FreeStatements,
+  Layout,
+  PredRow,
+  SubjRow,
+} from "../layout/Layout";
 import { SuffixLabels } from "../layout/suffixLabels";
 import { ViewConfig } from "../layout/ViewConfig";
 import { NodeDisplay } from "./NodeDisplay";
@@ -27,9 +33,8 @@
     let viewTitle = html` (no view)`;
     if (this.viewConfig?.url) {
       viewTitle = html` using view
-        <a href="${this.viewConfig.url}">${this.viewConfig.label()}</a>`;
+        <a href="${this.viewConfig?.url}">${this.viewConfig?.label()}</a>`;
     }
-    // const tables = this.view.toplevelTables(typesPresent);
     return html`
       <section>
         <h2>
@@ -78,27 +83,54 @@
   }
 
   _renderAlignedTable(section: AlignedTable): TemplateResult {
-    return html`aligned table section`;
+    const heads = section.columnHeaders.map((ch) => {
+      return html`<th>${this.nodeDisplay.render(ch.pred)}</th>`;
+    });
+    const cells = [];
+
+    for (let rowIndex in section.rows) {
+      const headerCol = html`<th>${this.nodeDisplay.render(section.rowHeaders[rowIndex])}</th>`;
+      const bodyCols = []
+      for (let cellObjs of section.rows[rowIndex]) {
+        const display = cellObjs.map(
+          (t) => html`<div>${this.nodeDisplay.render(t)}</div>`
+        );
+        bodyCols.push(html`<td>${display}</td>`);
+      }
+      cells.push(html`<tr>${headerCol}${bodyCols}</tr>`);
+    }
+    return html`
+      <pre> {JSON.stringify(section.rows,null,'   ')}</pre>
+      <div class="typeBlockScroll">
+      <table class="typeBlock">
+        <thead>
+          <th>Subject</th>
+          ${heads}
+        </thead>
+        <tbody>
+          ${cells}
+        </tbody>
+      </table>
+      </div>
+    `;
   }
 
   _renderFreeStatements(section: FreeStatements): TemplateResult {
     const subjects: NamedNode[] = [];
     let subjPreds = Immutable.Map<NamedNode, UriSet>();
-    
+
     return html`<div class="spoGrid">
-      grid has rowcount ${section.subjRows.length} 
+      grid has rowcount ${section.subjRows.length}
       ${section.subjRows.map(this._subjPredObjsBlock.bind(this))}
     </div>`;
   }
 
-  _subjPredObjsBlock( row: SubjRow ): TemplateResult {
+  _subjPredObjsBlock(row: SubjRow): TemplateResult {
     return html`
       <div class="subject">
         ${this.nodeDisplay.render(row.subj)}
         <!-- todo: special section for uri/type-and-icon/label/comment -->
-        <div>
-          ${row.predRows.map(this._predObjsBlock.bind(this))}
-        </div>
+        <div>${row.predRows.map(this._predObjsBlock.bind(this))}</div>
       </div>
     `;
   }