perspective: fixed some table scenarios

packages/datalib/src/PerspectiveDisplay.ts

@@ -7,6 +7,16 @@ import debug from 'debug';
 
 const dbg = debug('dbgate:PerspectiveDisplay');
 
+const SKIP_CELL = {
+  __perspective_skip_cell__: true,
+};
+
+let lastJoinId = 0;
+function getJoinId(): number {
+  lastJoinId += 1;
+  return lastJoinId;
+}
+
 export class PerspectiveDisplayColumn {
   title: string;
   dataField: string;
@@ -63,6 +73,7 @@ export class PerspectiveDisplayRow {
   constructor(public display: PerspectiveDisplay) {
     this.rowData = _fill(Array(display.columns.length), undefined);
     this.rowSpans = _fill(Array(display.columns.length), 1);
+    this.rowJoinIds = _fill(Array(display.columns.length), 0);
   }
 
   getRow(rowIndex): PerspectiveDisplayRow {
@@ -77,6 +88,7 @@ export class PerspectiveDisplayRow {
 
   rowData: any[] = [];
   rowSpans: number[] = null;
+  rowJoinIds: number[] = [];
   incompleteRowsIndicator: string[] = null;
 }
 
@@ -194,28 +206,73 @@ export class PerspectiveDisplay {
   }
 
   fillRowSpans() {
-    const lastFilledColumns = _fill(Array(this.columns.length), 0);
+    for (let col = 0; col < this.columns.length; col++) {
+      // let lastFilledJoinId = null;
+      let lastFilledRow = 0;
       let rowIndex = 0;
+
       for (const row of this.rows) {
-      for (let i = 0; i < this.columns.length; i++) {
+        if (
-        if (row.rowData[i] !== undefined) {
+          row.rowData[col] === undefined &&
-          if (rowIndex - lastFilledColumns[i] > 1) {
+          row.rowJoinIds[col] == this.rows[lastFilledRow].rowJoinIds[col] &&
-            this.rows[lastFilledColumns[i]].rowSpans[i] = rowIndex - lastFilledColumns[i];
+          row.rowJoinIds[col]
-          }
+        ) {
-          lastFilledColumns[i] = rowIndex;
+          row.rowData[col] = SKIP_CELL;
-        }
+          this.rows[lastFilledRow].rowSpans[col] = rowIndex - lastFilledRow + 1;
+        } else {
+          lastFilledRow = rowIndex;
         }
         rowIndex++;
+
+        //   ?.__perspective_joinId__ ||
+        //   row.rowData[col]?.__perspective_joinId__ != lastFilledJoinId?.__perspective_joinId__
+        // ) {
+        //   console.log(row.rowData[col]);
+        //   if (rowIndex - lastFilledRow > 1) {
+        //     this.rows[lastFilledRow].rowSpans[col] = rowIndex - lastFilledRow;
+        //   }
+        //   lastFilledRow = rowIndex;
+        //   lastFilledJoinId = row.rowData[col];
+        //   // row.rowData[i] = undefined;
+      }
+    }
   }
 
   // simulate row after last row
-    for (let i = 0; i < this.columns.length; i++) {
+  // if (rowIndex - lastFilledRow > 1) {
-      if (rowIndex - lastFilledColumns[i] > 1) {
+  //   console.log('S');
-        this.rows[lastFilledColumns[i]].rowSpans[i] = rowIndex - lastFilledColumns[i];
+  //   this.rows[lastFilledRow].rowSpans[col] = rowIndex - lastFilledRow;
-      }
+  // }
-      lastFilledColumns[i] = rowIndex;
+  // lastFilledRow = rowIndex;
-    }
+
-  }
+  // const lastFilledColumns = _fill(Array(this.columns.length), 0);
+  // const lastFilledColumnsJoinId = _fill(Array(this.columns.length), null);
+  // let rowIndex = 0;
+  // for (const row of this.rows) {
+  //   for (let i = 0; i < this.columns.length; i++) {
+  //     if (
+  //       !row.rowData[i]?.__perspective_joinId__ ||
+  //       row.rowData[i]?.__perspective_joinId__ != lastFilledColumnsJoinId[i]?.__perspective_joinId__
+  //     ) {
+  //       if (rowIndex - lastFilledColumns[i] > 1) {
+  //         this.rows[lastFilledColumns[i]].rowSpans[i] = rowIndex - lastFilledColumns[i];
+  //       }
+  //       lastFilledColumns[i] = rowIndex;
+  //       lastFilledColumnsJoinId[i] = row.rowData[i];
+  //       // row.rowData[i] = undefined;
+  //     }
+  //   }
+  //   rowIndex++;
+  // }
+
+  // // simulate row after last row
+  // for (let i = 0; i < this.columns.length; i++) {
+  //   if (rowIndex - lastFilledColumns[i] > 1) {
+  //     this.rows[lastFilledColumns[i]].rowSpans[i] = rowIndex - lastFilledColumns[i];
+  //   }
+  //   lastFilledColumns[i] = rowIndex;
+  // }
+  // }
 
   mergeRows(collectedRows: CollectedPerspectiveDisplayRow[]) {
     const rows = [];
@@ -239,6 +296,7 @@ export class PerspectiveDisplay {
     }
     resultRow.incompleteRowsIndicator = collectedRow.incompleteRowsIndicator;
 
+    let subRowCount = 0;
     for (const subrows of collectedRow.subRowCollections) {
       let rowIndex = 0;
       for (const subrow of subrows.rows) {
@@ -246,6 +304,17 @@ export class PerspectiveDisplay {
         this.mergeRow(subrow, targetRow);
         rowIndex++;
       }
+      if (rowIndex > subRowCount) {
+        subRowCount = rowIndex;
+      }
+    }
+
+    const joinId = getJoinId();
+    for (let ri = 0; ri < subRowCount; ri++) {
+      const targetRow = resultRow.getRow(ri);
+      for (let i = 0; i < collectedRow.columnIndexes.length; i++) {
+        targetRow.rowJoinIds[collectedRow.columnIndexes[i]] = joinId;
+      }
     }
   }
 

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -169,7 +169,9 @@
             {:else}
               {#each display.columns as column}
                 <!-- <td>{row.rowSpans[column.columnIndex]} {row.rowData[column.columnIndex]}</td> -->
-                {#if row.rowData[column.columnIndex] !== undefined}
+                {#if row.rowData[column.columnIndex] === undefined}
+                  <td />
+                {:else if !row.rowData[column.columnIndex]?.__perspective_skip_cell__}
                   <td rowspan={row.rowSpans[column.columnIndex]}>{row.rowData[column.columnIndex]}</td>
                 {/if}
               {/each}