perspectives: show nested columns

packages/datalib/src/PerspectiveDisplay.ts

@@ -1,37 +1,68 @@
 import { PerspectiveTableNode, PerspectiveTreeNode } from './PerspectiveTreeNode';
+import _max from 'lodash/max';
 
 export class PerspectiveDisplayColumn {
-  subColumns: PerspectiveDisplayColumn[] = [];
   title: string;
   dataField: string;
+  parentColumns: string[] = [];
+  display: PerspectiveDisplay;
+  colSpanAtLevel = {};
+
+  get rowSpan() {
+    return this.display.columnLevelCount - this.parentColumns.length;
+  }
+
+  showParent(level: number) {
+    return !!this.colSpanAtLevel[level];
+  }
+
+  getColSpan(level: number) {
+    return this.colSpanAtLevel[level];
+  }
+
+  isVisible(level: number) {
+    return level == this.columnLevel;
+  }
+
+  get columnLevel() {
+    return this.parentColumns.length;
+  }
 
   constructor() {}
 }
 
 export class PerspectiveDisplay {
   columns: PerspectiveDisplayColumn[] = [];
+  readonly columnLevelCount: number;
 
   constructor(public root: PerspectiveTreeNode, public rows: any[]) {
-    const children = root.childNodes;
-    this.fillChildren(root.childNodes, this.columns);
+    this.fillChildren(root.childNodes, []);
+    this.columnLevelCount = _max(this.columns.map(x => x.parentColumns.length)) + 1;
   }
 
-  fillChildren(children: PerspectiveTreeNode[], columns: PerspectiveDisplayColumn[]) {
+  fillChildren(children: PerspectiveTreeNode[], parentColumns: string[]) {
     for (const child of children) {
       if (child.isChecked) {
-        const childColumn = this.nodeToColumn(child);
-        columns.push(childColumn);
+        this.processColumn(child, parentColumns);
       }
     }
   }
 
-  nodeToColumn(node: PerspectiveTreeNode) {
-    const res = new PerspectiveDisplayColumn();
-    res.title = node.columnTitle;
-    res.dataField = node.dataField;
+  processColumn(node: PerspectiveTreeNode, parentColumns: string[]) {
     if (node.isExpandable) {
-      this.fillChildren(node.childNodes, res.subColumns);
+      const countBefore = this.columns.length;
+      this.fillChildren(node.childNodes, [...parentColumns, node.title]);
+
+      if (this.columns.length > countBefore) {
+        this.columns[countBefore].colSpanAtLevel[parentColumns.length] = this.columns.length - countBefore;
+      }
+    } else {
+      const column = new PerspectiveDisplayColumn();
+      column.title = node.columnTitle;
+      column.dataField = node.dataField;
+      column.parentColumns = parentColumns;
+      column.display = this;
+      this.columns.push(column);
     }
-    return res;
   }
 }

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -6,7 +6,7 @@
     PerspectiveDisplay,
     PerspectiveTreeNode,
   } from 'dbgate-datalib';
-  import _ from 'lodash';
+  import _, { range } from 'lodash';
   import { onMount } from 'svelte';
   import { prop_dev } from 'svelte/internal';
 
@@ -60,7 +60,8 @@
     const rows = [];
     await loadLevelData(node, rows);
     dataRows = rows;
-    // console.log('RESULT', rows);
+
+    console.log('DISPLAY ROWS', rows);
     // const rows = await node.loadLevelData();
     // for (const child of node.childNodes) {
     //   const loadProps = [];
@@ -78,17 +79,18 @@
   {#if display}
     <table>
       <thead>
-        <!-- {#each display.columnLevels as columnLevel}
-        <tr>
-
-        </tr>
-        {/each} -->
-
-        <tr>
-          {#each display.columns as column}
-            <th>{column.title}</th>
-          {/each}
-        </tr>
+        {#each _.range(display.columnLevelCount) as columnLevel}
+          <tr>
+            {#each display.columns as column}
+              {#if column.isVisible(columnLevel)}
+                <th rowspan={column.rowSpan}>{column.title}</th>
+              {/if}
+              {#if column.showParent(columnLevel)}
+                <th colspan={column.getColSpan(columnLevel)}>{column.parentColumns[columnLevel]}</th>
+              {/if}
+            {/each}
+          </tr>
+        {/each}
       </thead>
       <tbody>
         {#each display.rows as row}