perspective data pattern

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -3,10 +3,12 @@
     createPerspectiveNodeConfig,
     MultipleDatabaseInfo,
     PerspectiveConfig,
+    PerspectiveDataPatternDict,
     perspectiveNodesHaveStructure,
     PerspectiveTreeNode,
     switchPerspectiveReferenceDirection,
   } from 'dbgate-datalib';
+  import { CollectionInfo } from 'dbgate-types';
   import _ from 'lodash';
   import { tick } from 'svelte';
   import runCommand from '../commands/runCommand';
@@ -18,6 +20,7 @@
 
   export let config: PerspectiveConfig;
   export let dbInfos: MultipleDatabaseInfo;
+  export let dataPatterns: PerspectiveDataPatternDict;
   export let root: PerspectiveTreeNode;
 
   export let conid;
@@ -27,7 +30,11 @@
 
   export let onClickTableHeader = null;
 
-  function createDesignerModel(config: PerspectiveConfig, dbInfos: MultipleDatabaseInfo) {
+  function createDesignerModel(
+    config: PerspectiveConfig,
+    dbInfos: MultipleDatabaseInfo,
+    dataPatterns: PerspectiveDataPatternDict
+  ) {
     return {
       ...config,
       tables: _.compact(
@@ -38,11 +45,26 @@
           const view = dbInfos?.[node.conid || conid]?.[node.database || database]?.views?.find(
             x => x.pureName == node.pureName && x.schemaName == node.schemaName
           );
-          if (!table && !view) return null;
+          let collection: CollectionInfo & { columns?: any[] } = dbInfos?.[node.conid || conid]?.[
+            node.database || database
+          ]?.collections?.find(x => x.pureName == node.pureName && x.schemaName == node.schemaName);
+
+          if (collection) {
+            const pattern = dataPatterns?.[node.designerId];
+            if (!pattern) return null;
+            collection = {
+              ...collection,
+              columns: pattern.columns.map(x => ({
+                columnName: x.name,
+              })),
+            };
+          }
+
+          if (!table && !view && !collection) return null;
 
           const { designerId } = node;
           return {
-            ...(table || view),
+            ...(table || view || collection),
             left: node?.position?.x || 0,
             top: node?.position?.y || 0,
             alias: node.alias,
@@ -55,7 +77,7 @@
 
   function handleChange(value, skipUndoChain, settings) {
     setConfig(oldValue => {
-      const newValue = _.isFunction(value) ? value(createDesignerModel(oldValue, dbInfos)) : value;
+      const newValue = _.isFunction(value) ? value(createDesignerModel(oldValue, dbInfos, dataPatterns)) : value;
       let isArranged = oldValue.isArranged;
       if (settings?.isCalledFromArrange) {
         isArranged = true;
@@ -277,6 +299,6 @@
     onClickTableHeader,
   }}
   referenceComponent={QueryDesignerReference}
-  value={createDesignerModel(config, dbInfos)}
+  value={createDesignerModel(config, dbInfos, dataPatterns)}
   onChange={handleChange}
 />

packages/web/src/perspectives/PerspectiveView.svelte

@@ -28,6 +28,7 @@
   import {
     ChangePerspectiveConfigFunc,
     extractPerspectiveDatabases,
+    PerspectiveCollectionNode,
     PerspectiveConfig,
     PerspectiveDataProvider,
     PerspectiveTableNode,
@@ -65,6 +66,7 @@
   import { sleep } from '../utility/common';
   import FontIcon from '../icons/FontIcon.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
+  import { usePerspectiveDataPatterns } from '../utility/usePerspectiveDataPatterns';
 
   const dbg = debug('dbgate:PerspectiveView');
 
@@ -128,13 +130,17 @@
   }
 
   $: dbInfos = useMultipleDatabaseInfo(perspectiveDatabases);
+  $: loader = new PerspectiveDataLoader(apiCall);
+  $: dataPatterns = usePerspectiveDataPatterns({ conid, database }, config, cache, $dbInfos, loader);
   $: rootObject = config?.nodes?.find(x => x.designerId == config?.rootDesignerId);
   $: rootDb = rootObject ? $dbInfos?.[rootObject.conid || conid]?.[rootObject.database || database] : null;
   $: tableInfo = rootDb?.tables.find(x => x.pureName == rootObject?.pureName && x.schemaName == rootObject?.schemaName);
   $: viewInfo = rootDb?.views.find(x => x.pureName == rootObject?.pureName && x.schemaName == rootObject?.schemaName);
+  $: collectionInfo = rootDb?.collections.find(
+    x => x.pureName == rootObject?.pureName && x.schemaName == rootObject?.schemaName
+  );
 
-  $: loader = new PerspectiveDataLoader(apiCall);
-  $: dataProvider = new PerspectiveDataProvider(cache, loader);
+  $: dataProvider = new PerspectiveDataProvider(cache, loader, $dataPatterns);
   $: root =
     tableInfo || viewInfo
       ? new PerspectiveTableNode(
@@ -147,6 +153,17 @@
           null,
           config.rootDesignerId
         )
+      : collectionInfo
+      ? new PerspectiveCollectionNode(
+          collectionInfo,
+          $dbInfos,
+          config,
+          setConfig,
+          dataProvider,
+          { conid, database },
+          null,
+          config.rootDesignerId
+        )
       : null;
   $: tempRoot = root?.findNodeByDesignerId(tempRootDesignerId);
 
@@ -158,6 +175,7 @@
 
   // $: console.log('PERSPECTIVE', config);
   // $: console.log('VIEW ROOT', root);
+  // $: console.log('dataPatterns', $dataPatterns);
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize} allowCollapseChild1>
@@ -205,6 +223,7 @@
           {database}
           {setConfig}
           dbInfos={$dbInfos}
+          dataPatterns={$dataPatterns}
           {root}
           onClickTableHeader={designerId => {
             sleep(100).then(() => {