node load props impl - naive

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 || []).filter(x => x != column.codeName),
+                  ? [...(node.checkedColumns || []), column.columnName]
+                  : (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)}