node load props impl - naive

packages/datalib/src/PerspectiveTreeNode.ts

@@ -22,6 +22,7 @@ import {
   PerspectiveReferenceConfig,
 } from './PerspectiveConfig';
 import _isEqual from 'lodash/isEqual';
+import _isArray from 'lodash/isArray';
 import _cloneDeep from 'lodash/cloneDeep';
 import _compact from 'lodash/compact';
 import _uniq from 'lodash/uniq';
@@ -764,10 +765,12 @@ export class PerspectivePatternColumnNode extends PerspectiveTreeNode {
     return this.parentNode instanceof PerspectivePatternColumnNode;
   }
 
-  // matchChildRow(parentRow: any, childRow: any): boolean {
+  matchChildRow(parentRow: any, childRow: any): boolean {
+    console.log('MATCH PATTENR ROW', parentRow, childRow);
+    return false;
     // if (!this.foreignKey) return false;
     // return parentRow[this.foreignKey.columns[0].columnName] == childRow[this.foreignKey.columns[0].refColumnName];
-  // }
+  }
 
   // getChildMatchColumns() {
   //   if (!this.foreignKey) return [];
@@ -1153,6 +1156,7 @@ export class PerspectiveCustomJoinTreeNode extends PerspectiveTableNode {
   }
 
   matchChildRow(parentRow: any, childRow: any): boolean {
+    // console.log('MATCH ROW', parentRow, childRow);
     for (const column of this.customJoin.columns) {
       if (parentRow[column.baseColumnName] != childRow[column.refColumnName]) {
         return false;
@@ -1171,17 +1175,65 @@ export class PerspectiveCustomJoinTreeNode extends PerspectiveTableNode {
 
   getNodeLoadProps(parentRows: any[]): PerspectiveDataLoadProps {
     // console.log('CUSTOM JOIN', this.customJoin);
+
     // console.log('this.getDataLoadColumns()', this.getDataLoadColumns());
     const isMongo = isCollectionInfo(this.table);
 
+    const bindingValues = [];
+
+    for (const row of parentRows) {
+      const rowBindingValueArrays = [];
+      for (const col of this.customJoin.columns) {
+        const path = col.baseColumnName.split('::');
+        const values = [];
+
+        function processSubpath(parent, subpath) {
+          if (subpath.length == 0) {
+            values.push(parent);
+            return;
+          }
+          if (parent == null) {
+            return;
+          }
+
+          const obj = parent[subpath[0]];
+          if (_isArray(obj)) {
+            for (const elem of obj) {
+              processSubpath(elem, subpath.slice(1));
+            }
+          } else {
+            processSubpath(obj, subpath.slice(1));
+          }
+        }
+
+        processSubpath(row, path);
+
+        rowBindingValueArrays.push(values);
+      }
+
+      const valueCount = Math.max(...rowBindingValueArrays.map(x => x.length));
+
+      for (let i = 0; i < valueCount; i += 1) {
+        const value = Array(this.customJoin.columns.length);
+        for (let col = 0; col < this.customJoin.columns.length; col++) {
+          value[col] = rowBindingValueArrays[col][i % rowBindingValueArrays[col].length];
+        }
+        bindingValues.push(value);
+      }
+    }
+    // const bindingValues = parentRows.map(row => this.customJoin.columns.map(x => row[x.baseColumnName]));
+
+    // console.log('bindingValues', bindingValues);
+    // console.log(
+    //   'bindingValues UNIQ',
+    //   _uniqBy(bindingValues, x => JSON.stringify(x))
+    // );
+
     return {
       schemaName: this.table.schemaName,
       pureName: this.table.pureName,
       bindingColumns: this.getParentMatchColumns(),
-      bindingValues: _uniqBy(
+      bindingValues: _uniqBy(bindingValues, x => JSON.stringify(x)),
-        parentRows.map(row => this.customJoin.columns.map(x => row[x.baseColumnName])),
-        stableStringify
-      ),
       dataColumns: this.getDataLoadColumns(),
       allColumns: isMongo,
       databaseConfig: this.databaseConfig,

packages/web/src/designer/ColumnLine.svelte

@@ -164,7 +164,13 @@
       }}
     />
   {/if}
-  <ColumnLabel {...column} {foreignKey} forceIcon {iconOverride} />
+  <ColumnLabel
+    {...column}
+    columnName={settings?.getColumnDisplayName ? settings?.getColumnDisplayName(column) : column.columnName}
+    {foreignKey}
+    forceIcon
+    {iconOverride}
+  />
   {#if designerColumn?.filter}
     <FontIcon icon="img filter" />
   {/if}

packages/web/src/designer/DesignerTable.svelte

@@ -177,7 +177,7 @@
   export function getDomTable() {
     const domRefs = { ...columnRefs };
     domRefs[''] = domWrapper;
-    return new DomTableRef(table, domRefs, domCanvas);
+    return new DomTableRef(table, domRefs, domCanvas, settings);
   }
 
   const handleSetTableAlias = () => {
@@ -300,7 +300,7 @@
     {/if}
   </div>
   <div class="columns" on:scroll={() => tick().then(onMoveReferences)} class:scroll={settings?.allowScrollColumns}>
-    {#each flatColumns || [] as column}
+    {#each flatColumns || [] as column (column.columnName)}
       <ColumnLine
         nestingSupported={!!settings?.isColumnExpandable && columns.find(x => settings?.isColumnExpandable(x))}
         isExpandable={settings?.isColumnExpandable && settings?.isColumnExpandable(column)}

packages/web/src/designer/DomTableRef.ts

@@ -6,13 +6,15 @@ export default class DomTableRef {
   table: DesignerTableInfo;
   designerId: string;
   domRefs: { [column: string]: Element };
+  settings: any;
 
-  constructor(table: DesignerTableInfo, domRefs, domWrapper: Element) {
+  constructor(table: DesignerTableInfo, domRefs, domWrapper: Element, settings) {
     this.domTable = domRefs[''];
     this.domWrapper = domWrapper;
     this.table = table;
     this.designerId = table.designerId;
     this.domRefs = domRefs;
+    this.settings = settings;
   }
 
   getRect() {
@@ -31,6 +33,10 @@ export default class DomTableRef {
 
   getColumnY(columnName: string) {
     let col = this.domRefs[columnName];
+    while (col == null && this.settings?.getParentColumnName && this.settings?.getParentColumnName(columnName)) {
+      columnName = this.settings?.getParentColumnName(columnName);
+      col = this.domRefs[columnName];
+    }
     if (!col) return null;
     const rect = col.getBoundingClientRect();
     const wrap = this.domWrapper.getBoundingClientRect();

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -37,13 +37,13 @@
     codeNamePrefix: string
   ) {
     return {
-      columnName: column.name,
+      columnName: codeNamePrefix + column.name,
+      shortName: column.name,
       getChildColumns:
         column.columns?.length > 0
           ? () => column.columns.map(x => mapDataPatternColumn(x, node, codeNamePrefix + column.name + '::'))
           : null,
       isExpanded: node.expandedColumns.includes(codeNamePrefix + column.name),
-      codeName: codeNamePrefix + column.name,
       toggleExpanded: value =>
         setConfig(cfg => ({
           ...cfg,
@@ -227,7 +227,7 @@
     },
     createReferenceText: reference => (reference.isAutoGenerated ? 'FK' : 'Custom'),
     isColumnChecked: (designerId, column) => {
-      return config.nodes.find(x => x.designerId == designerId)?.checkedColumns?.includes(column.codeName);
+      return config.nodes.find(x => x.designerId == designerId)?.checkedColumns?.includes(column.columnName);
     },
     setColumnChecked: (designerId, column, value) => {
       setConfig(cfg => ({
@@ -237,8 +237,8 @@
             ? {
                 ...node,
                 checkedColumns: value
-                  ? [...(node.checkedColumns || []), column.codeName]
+                  ? [...(node.checkedColumns || []), column.columnName]
-                  : (node.checkedColumns || []).filter(x => x != column.codeName),
+                  : (node.checkedColumns || []).filter(x => x != column.columnName),
               }
             : node
         ),
@@ -331,6 +331,12 @@
     isColumnExpanded: column => column.isExpanded,
     columnExpandLevel: column => column.expandLevel,
     toggleExpandedColumn: (column, value) => column.toggleExpanded(value),
+    getColumnDisplayName: column => column.shortName,
+    getParentColumnName: columnName => {
+      const path = columnName.split('::');
+      if (path.length >= 2) return path.slice(0, -1).join('::');
+      return null;
+    },
   }}
   referenceComponent={QueryDesignerReference}
   value={createDesignerModel(config, dbInfos, dataPatterns)}