subcolumns in designer

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import {
+    ChangePerspectiveConfigFunc,
     createPerspectiveNodeConfig,
+    PerspectiveDataPatternColumn,
+    PerspectiveNodeConfig,
     perspectiveNodesHaveStructure,
     PerspectiveTreeNode,
     switchPerspectiveReferenceDirection,
@@ -28,6 +31,32 @@
 
   export let onClickTableHeader = null;
 
+  function mapDataPatternColumn(
+    column: PerspectiveDataPatternColumn,
+    node: PerspectiveNodeConfig,
+    codeNamePrefix: string
+  ) {
+    return {
+      columnName: 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,
+          nodes: cfg.nodes.map(node => ({
+            ...node,
+            expandedColumns: value
+              ? [...(node.expandedColumns || []), codeNamePrefix + column.name]
+              : (node.expandedColumns || []).filter(x => x != codeNamePrefix + column.name),
+          })),
+        })),
+    };
+  }
+
   function createDesignerModel(
     config: PerspectiveConfig,
     dbInfos: MultipleDatabaseInfo,
@@ -49,10 +78,7 @@
             if (!pattern) return null;
             collection = {
               ...collection,
-              columns:
-                pattern?.columns.map(x => ({
-                  columnName: x.name,
-                })) || [],
+              columns: pattern?.columns.map(x => mapDataPatternColumn(x, node, '')) || [],
             };
           }
 
@@ -200,10 +226,10 @@
       ];
     },
     createReferenceText: reference => (reference.isAutoGenerated ? 'FK' : 'Custom'),
-    isColumnChecked: (designerId, columnName) => {
-      return config.nodes.find(x => x.designerId == designerId)?.checkedColumns?.includes(columnName);
+    isColumnChecked: (designerId, column) => {
+      return config.nodes.find(x => x.designerId == designerId)?.checkedColumns?.includes(column.codeName);
     },
-    setColumnChecked: (designerId, columnName, value) => {
+    setColumnChecked: (designerId, column, value) => {
       setConfig(cfg => ({
         ...cfg,
         nodes: cfg.nodes.map(node =>
@@ -211,8 +237,8 @@
             ? {
                 ...node,
                 checkedColumns: value
-                  ? [...(node.checkedColumns || []), columnName]
-                  : (node.checkedColumns || []).filter(x => x != columnName),
+                  ? [...(node.checkedColumns || []), column.codeName]
+                  : (node.checkedColumns || []).filter(x => x != column.codeName),
               }
             : node
         ),