@gingkoo/pandora-metabase 1.0.0-alpha.9 → 1.0.0

package/lib/es/index.js

@@ -1,5 +1,5 @@
 /**
- * @gingkoo/pandora-metabase v1.0.0-alpha.9
+ * @gingkoo/pandora-metabase v1.0.0
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -8,12 +8,12 @@ import cloneDeep from 'lodash/cloneDeep';
 import cx from 'classnames';
 import { Tooltip, Button, Modal, Input, DatePicker, Dropdown, InputNumber, Select, Modal2, Toast } from '@gingkoo/pandora';
 import Styled from 'styled-components';
+import { ChevronODown, Repeat, Function, RelatedWork, FfPlus, FfLine } from '@gingkoo/pandora-icons';
+import isEqual from 'lodash/isEqual';
 import 'underscore';
 import ReactDOM from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
-import { ChevronODown, Repeat, Function, RelatedWork, FfPlus, FfLine } from '@gingkoo/pandora-icons';
 import moment from 'dayjs';
-import isEqual from 'lodash/isEqual';
 
 // 创建 Context
 const Context = /*#__PURE__*/createContext({});
@@ -154,6 +154,36 @@ var EleComponentEnum;
   EleComponentEnum["select"] = "select";
 })(EleComponentEnum || (EleComponentEnum = {}));
 
+//获取指定名称的cookie值
+function getCookie(name) {
+  // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
+  var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
+  if (arr != null) {
+    console.log(arr);
+    return arr[2];
+  }
+  return null;
+}
+
+const locales = {};
+const activeLocale = getCookie('LOCALE') || 'zh';
+const isEn = activeLocale === 'en';
+const register = (name, data) => {
+  if (name in locales) {
+    console.warn(`[i18n] ${name} has been registered`);
+  } else {
+    locales[name] = data;
+  }
+};
+const __ = name => {
+  if (activeLocale in locales) {
+    return locales[activeLocale][name] || '';
+  } else {
+    console.warn(`[i18n] locale not found`);
+    return '';
+  }
+};
+
 // import { SummarizeAlias } from './index';
 const SummarizeAlias$1 = 'source';
 const NUMBER_GROUP$1 = [SQL_COLUMN_TYPE.FLOAT, SQL_COLUMN_TYPE.LONG, SQL_COLUMN_TYPE.CURRENCY];
@@ -340,7 +370,8 @@ const summarizeToSql = (arr, record) => {
   });
   as = as + (count ? '_' + (count + 1) : '');
   return {
-    sql: sql + ' AS ' + as,
+    sql: sql,
+    // + ' AS ' + as,
     fieldAlias: as
   };
 };
@@ -648,7 +679,9 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.fieldAlias,
+          name: v.fieldAlias || v.name,
+          fieldAlias: '',
+          // fieldUuid: uuidv4('field'),
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -662,7 +695,9 @@ const getSubColumns = metaList => {
         return {
           name_zh: v.quotes,
           ...v,
-          name: v.fieldAlias,
+          name: v.fieldAlias || v.name,
+          fieldAlias: '',
+          // fieldUuid: uuidv4('field'),
           realName: v.sql?.split(' AS ')?.[1] || '',
           // name_zh: '',
           database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
@@ -679,10 +714,18 @@ const getSubColumns = metaList => {
       data = data.concat(
       // @ts-ignore
       joinData.map(v => {
+        const columns = v.columns.map(column => {
+          return {
+            ...column,
+            name: column.fieldAlias || column.name,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        });
         return {
           alias: v.table2.alias,
           table: v.table2.name,
-          columns: v.columns
+          columns: columns
         };
       }));
     }
@@ -690,16 +733,51 @@ const getSubColumns = metaList => {
     // @ts-ignore
     data = metaList.slice().map(v => {
       if (v.type === TypeEnum.data) {
+        const columns = v.columns.map(column => {
+          return {
+            ...column,
+            name: column.fieldAlias || column.name,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        }).filter(item => item.select);
         return {
           alias: v.table.alias,
           table: v.table.name,
-          columns: v.columns
+          columns: columns
         };
       } else if (v.type === TypeEnum.joinData) {
+        const columns = v.columns.map(column => {
+          return {
+            ...column,
+            name: column.fieldAlias || column.name,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        }).filter(item => item.select);
         return {
           alias: v.table2.alias,
           table: v.table2.name,
-          columns: v.columns
+          columns: columns
+        };
+      } else if (v.type === TypeEnum.customColumn) {
+        const {
+          customColumn
+        } = v;
+        const columns = customColumn.map(v => {
+          return {
+            database_type: SQL_COLUMN_TYPE.STRING,
+            name_zh: v.name,
+            name: v.name,
+            select: true,
+            fieldAlias: ''
+            // fieldUuid: uuidv4('field'),
+          };
+        });
+        return {
+          columns: columns,
+          alias: '',
+          table: __('SqlQueryBuilder.customColumn')
         };
       } else {
         return {
@@ -724,8 +802,12 @@ const changeTableAlias = (list, curObj) => {
     alias
   } = cloneDeep(curObj);
   const newList = cloneDeep(list);
-  newList.map(v => {
-    if (v.type === TypeEnum.data) ;
+  return newList?.map(v => {
+    if (v.type === TypeEnum.data) {
+      if (v.table.tableUuid === tableUuid) {
+        v.table.alias = alias;
+      }
+    }
     if (v.type === TypeEnum.joinData) {
       if (v.table1.tableUuid === tableUuid) {
         v.table1.alias = alias;
@@ -769,7 +851,7 @@ const changeTableAlias = (list, curObj) => {
       v.by.map(by => {
         if (by.tableUuid === tableUuid) {
           by.alias = alias;
-          by.sql = `${by.alias}.${by.realName || by.name} AS ${by.fieldAlias}`;
+          by.sql = `${by.alias}.${by.realName || by.name}`;
         }
       });
     }
@@ -809,12 +891,21 @@ const changeTableAlias = (list, curObj) => {
           //   }
           // }
           item.table2.alias = alias;
-          item.table2.sql = '';
+          // item.table2.sql = '';
         }
+        // if (item.subquery) {
+        //   item.subquery = changeTableAlias(item.subquery || [], curObj);
+        // }
       });
     }
-  });
-  return newList;
+    // if ((v as MetaData | MetaJoin).subquery) {
+    //   (v as MetaData | MetaJoin).subquery = changeTableAlias(
+    //     (v as MetaData | MetaJoin).subquery || [],
+    //     curObj,
+    //   );
+    // }
+    return v;
+  }) || [];
 };
 const changeFieldAlias = (list, curObj) => {
   const {
@@ -822,7 +913,7 @@ const changeFieldAlias = (list, curObj) => {
     fieldAlias
   } = cloneDeep(curObj);
   const newList = cloneDeep(list);
-  newList.map(v => {
+  return newList?.map(v => {
     if (v.type === TypeEnum.data) ;
     if (v.type === TypeEnum.joinData) {
       if (v.table1.fieldUuid === fieldUuid) {
@@ -879,7 +970,7 @@ const changeFieldAlias = (list, curObj) => {
       v.by.map(by => {
         if (by.fieldUuid === fieldUuid) {
           by.fieldAlias = fieldAlias;
-          by.sql = `${by.alias}.${by.realName || by.name} AS ${by.fieldAlias}`;
+          by.sql = `${by.alias}.${by.realName || by.name}`;
         }
       });
     }
@@ -893,9 +984,9 @@ const changeFieldAlias = (list, curObj) => {
               prevGroupBy
             } = getHelper(list, v);
             let groupBy = prevGroupBy?.by.filter(v => v.fieldUuid === item.fieldUuid)[0] || prevGroupBy?.group.filter(v => v.fieldUuid === item.fieldUuid)[0] || null;
-            groupBy.fieldAlias = fieldAlias;
-            const sql = groupBy.sql;
             if (groupBy) {
+              groupBy.fieldAlias = fieldAlias;
+              const sql = groupBy.sql;
               item.sql = sql;
               item.groupSql = sql;
             }
@@ -918,12 +1009,18 @@ const changeFieldAlias = (list, curObj) => {
           //   }
           // }
         }
+        if (item.notExists) {
+          item.notExists = changeFieldAlias(item.notExists || [], curObj);
+        }
       });
     }
-  });
-  return newList;
+    return {
+      ...v
+    };
+  }) || [];
 };
 function splitByUnion(data) {
+  if (!data) return [];
   const original = cloneDeep(data);
   const result = [];
   let i = 0;
@@ -959,7 +1056,8 @@ function splitByUnion(data) {
   }
   return result;
 }
-function reassembleByUnion(target) {
+function reassembleByUnion(target = []) {
+  if (!target) return [];
   const result = [];
   let i = 0;
   const len = target.length;
@@ -1003,6 +1101,92 @@ function reassembleByUnion(target) {
   }
   return result;
 }
+// export const buildSqlQuery = (data?: MetaListType[]): string => {
+//   if (!data || data.length === 0) return '';
+//   let sqlClauses: string[] = ['not exitis ( '];
+//   data.forEach((item) => {
+//     if (item.type === TypeEnum.data) {
+//       const meta = item as MetaData;
+//       const tableName = meta.table.name;
+//       const alias = meta.table.alias ? `AS ${meta.table.alias}` : '';
+//       const dataSource = meta.table.datasourceName;
+//       sqlClauses.push(`SELECT 1 FROM ${dataSource}.${tableName} ${alias}`);
+//     }
+//        if (item.type === TypeEnum.joinData) {
+//       const meta = item as MetaJoin;
+//       const table1 = meta.table1.alias ? meta.table1.alias : meta.table1.name;
+//       const table2 = `${meta.table2.datasourceName}.${meta.table2.name}`;
+//       const alias2 = meta.table2.alias ? meta.table2.alias : '';
+//       joins.push(`LEFT JOIN ${table2} ${alias2} ON ${table1}.${meta.columns[0]?.name} = ${alias2}.${meta.columns[0]?.name}`);
+//        }
+//     if (item.type === TypeEnum.filter) {
+//       const filterStrings = (item as MetaFilter).filter.map((f) => f.quotes).filter(Boolean); // 排除空条件
+//       if (filterStrings.length > 0) {
+//         sqlClauses.push(`WHERE ${filterStrings.join(' AND ')}`);
+//       }
+//     }
+//   });
+//   // 简单拼接 SQL 片段
+//   return sqlClauses.join(' ') + ' )' + ';';
+// };
+const buildSqlQuery = data => {
+  if (!data || data.length === 0) return '';
+  let sqlClauses = ['NOT EXISTS ('];
+  let tables = [];
+  let joins = [];
+  let wheres = [];
+  data.forEach(item => {
+    if (item.type === TypeEnum.data) {
+      const meta = item;
+      const tableName = `${meta.table.name}`;
+      const alias = meta.table.alias ? ` AS ${meta.table.alias}` : '';
+      tables.push(`${tableName}${alias}`);
+    }
+    if (item.type === TypeEnum.joinData) {
+      const meta = item;
+      const table2Name = `${meta.table2.name}`;
+      const alias2 = meta.table2.alias ? ` AS ${meta.table2.alias}` : '';
+      const table2 = `${meta.table2.alias || meta.table2.name}`;
+      const table1 = `${meta.table1.alias || meta.table1.name}`;
+      joins.push(`LEFT JOIN ${table2Name}${alias2} ON ${table1}.${meta.table1.fieldAlias} = ${table2}.${meta.table2.fieldAlias}`);
+      if (Array.isArray(item.expressions) && item.expressions.length > 0) {
+        item.expressions.forEach(expression => {
+          let left = '',
+            right = '';
+          if (expression.left_type === 'field') {
+            left = `${table1}.${expression.left_fieldAlias}`;
+          } else {
+            left = expression.left_string;
+          }
+          if (expression.right_type === 'field') {
+            right = `${table2}.${expression.right_fieldAlias}`;
+          } else {
+            right = expression.right_string;
+          }
+          joins.push(`AND ${left} = ${right}`);
+        });
+      }
+    }
+    if (item.type === TypeEnum.filter) {
+      const filterStrings = item.filter.map(f => f.quotes).filter(Boolean);
+      if (filterStrings.length > 0) {
+        wheres.push(...filterStrings);
+      }
+    }
+  });
+  // 构建子查询
+  if (tables.length > 0) {
+    sqlClauses.push(`SELECT 1 FROM ${tables[0]}`);
+    if (joins.length > 0) {
+      sqlClauses.push(joins.join(' '));
+    }
+    if (wheres.length > 0) {
+      sqlClauses.push(`WHERE ${wheres.join(' AND ')}`);
+    }
+  }
+  sqlClauses.push(')');
+  return sqlClauses.join(' ') + ';';
+};
 
 let metaKey = 1;
 const SummarizeAlias = 'source';
@@ -1074,7 +1258,7 @@ const useStore = () => {
   };
   // 是否显示主表后面的字段按钮 （如果下面 没有聚合，或者选了聚合但是聚合里面没有选值的时候显示 主表字段按钮）
   const showMainColumn = useMemo(() => {
-    return metaList.map((item, groupIndex) => {
+    return metaList?.map((item, groupIndex) => {
       // 过滤出所有汇总类型的项
       const summarizeItems = item.list.filter(v => v.type === TypeEnum.summarize);
       // 如果没有汇总项，默认显示主列
@@ -1129,7 +1313,7 @@ const useStore = () => {
       columns = await fetchColumnsFn.current(extra, datasourceId);
       setColumns(tableName, columns);
     }
-    const _columns = columns.map(v => {
+    const _columns = columns?.map(v => {
       return {
         ...v,
         fieldUuid: v.fieldAlias || uuidv4('field')
@@ -1143,21 +1327,56 @@ const useStore = () => {
     _setMeta(newMeta);
   };
   // 回显
-  const setPreData = async data => {
+  // 设置column
+  const setQuotes = newMeta => {
+    newMeta.table1 = {
+      ...newMeta.table1,
+      fieldAlias: newMeta.table1.fieldAlias || newMeta.table1.column,
+      fieldUuid: newMeta.table1.fieldUuid || uuidv4('field'),
+      quotes: newMeta.table1.quotes || newMeta.table1.column,
+      tableUuid: newMeta.table1.tableUuid || uuidv4('table')
+    };
+    newMeta.table2 = {
+      ...newMeta.table2,
+      fieldAlias: newMeta.table2.fieldAlias || newMeta.table2.column,
+      fieldUuid: newMeta.table2.fieldUuid || uuidv4('field'),
+      quotes: newMeta.table2.quotes || newMeta.table2.column,
+      tableUuid: newMeta.table2.tableUuid || uuidv4('table')
+    };
+    newMeta.expressions = newMeta.expressions?.map(v => {
+      return {
+        ...v,
+        left_fieldAlias: v.left_fieldAlias || v.left_column,
+        left_fieldUuid: v.left_fieldUuid || uuidv4('field'),
+        left_quotes: v.left_quotes || v.left_column,
+        right_fieldAlias: v.right_fieldAlias || v.right_column,
+        right_fieldUuid: v.right_fieldUuid || uuidv4('field'),
+        right_quotes: v.right_quotes || v.right_column
+      };
+    });
+    return newMeta;
+  };
+  const setPreData = data => {
     if (data.length) {
-      let _metaList = data.map((item, groupIndex) => {
+      let _metaList = data?.map((item, groupIndex) => {
         let newList = item.list?.map((v, i) => {
-          let newMeta = cloneDeep(item.list);
+          let newMeta = item.list;
+          if (v.table) {
+            v.table.tableUuid = v.table.tableUuid || uuidv4('table');
+          }
+          if (v.type === TypeEnum.joinData) {
+            newMeta[i] = setQuotes(newMeta[i]);
+          }
           // 设置右侧column
           if (v.table2?.datasourceId && v.columns.length < 1) {
-            fetchColumns(newMeta[i].table2, newMeta[i].table2.datasourceId, columns => {
+            fetchColumns(newMeta[i].table2, newMeta[i].table2.datasourceId, (columns = []) => {
               if (v.isSubquery) {
                 let newColumns = [];
                 const items = getSubColumns(v.subquery);
-                newColumns = items.flatMap(item => item.columns);
-                newMeta[i].columns = newColumns;
+                newColumns = items?.flatMap(item => item.columns);
+                newMeta[i].columns = newColumns || [];
               } else {
-                newMeta[i].columns = columns;
+                newMeta[i].columns = columns || [];
               }
               setMeta(newMeta, groupIndex);
             });
@@ -1167,15 +1386,18 @@ const useStore = () => {
           }
           // 设置column
           if (v.table?.datasourceId && v.columns.length < 1) {
-            fetchColumns(newMeta[i].table, newMeta[i].table.datasourceId, columns => {
+            fetchColumns(newMeta[i].table, newMeta[i].table.datasourceId, (columns = []) => {
               if (v.isSubquery) {
                 let newColumns = [];
                 const items = getSubColumns(v.subquery);
                 newColumns = items.flatMap(item => item.columns);
-                newMeta[i].columns = newColumns;
+                newMeta[i].columns = newColumns || [];
               } else {
-                newMeta[i].columns = columns;
+                newMeta[i].columns = columns || [];
               }
+              // if (v.type === TypeEnum.joinData) {
+              //   newMeta[i] = setQuotes(newMeta[i]);
+              // }
               setMeta(newMeta, groupIndex);
             });
             return {
@@ -1349,7 +1571,7 @@ const useStore = () => {
     setMeta(_metaList, groupIndex);
   };
   const setColumns = (tableId, columns) => {
-    const _columns = columns.map(v => {
+    const _columns = columns?.map(v => {
       return {
         ...v,
         fieldUuid: v.fieldUuid || uuidv4('field')
@@ -1374,46 +1596,10 @@ const useStore = () => {
   const getDataset = datasourceId => {
     return _cacheSource2TableMap[datasourceId] || [];
   };
-  const changeAlias = (groupIndex, alias) => {
-    let newMetaList = metaList.slice();
-    const _list = newMetaList[groupIndex].list;
-    if (_list.length > 0) {
-      _list.forEach(item => {
-        if (item.type === TypeEnum.joinData && item.table2.alias === alias) {
-          item.table2.alias = alias;
-        } else if (item.type === TypeEnum.data && item.table.alias === alias) {
-          item.table.alias = alias;
-        } else if (item.type === TypeEnum.filter) {
-          //过滤器
-          item.filter.forEach(filterItem => {
-            if (filterItem.alias === alias) {
-              filterItem.alias = alias;
-            }
-          });
-        } else if (item.type === TypeEnum.summarize) {
-          // 汇总
-          item.alias = alias;
-          item.by.forEach(byItem => {
-            if (byItem.alias === alias) {
-              byItem.alias = alias;
-            }
-          });
-          item.group.forEach(groupItem => {
-            if (groupItem.alias === alias) {
-              groupItem.alias = alias;
-              groupItem.sql = alias;
-            }
-          });
-        }
-      });
-      newMetaList[groupIndex].list = _list;
-      _setMeta(newMetaList);
-    }
-  };
   const reset = () => {
     // setSourceList([]);
     _setMeta(defaultMeta);
-    setToolbar(defaultToolbar);
+    // setToolbar(defaultToolbar);
     set_cacheSource2TableMap({});
     set_cacheColumnsMap({});
   };
@@ -1467,41 +1653,10 @@ const useStore = () => {
     _setShowSubquery,
     constantList,
     setConstantList,
-    changeAlias,
     popupContainer
   };
 };
 
-//获取指定名称的cookie值
-function getCookie(name) {
-  // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
-  var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
-  if (arr != null) {
-    console.log(arr);
-    return arr[2];
-  }
-  return null;
-}
-
-const locales = {};
-const activeLocale = getCookie('LOCALE') || 'zh';
-const isEn = activeLocale === 'en';
-const register = (name, data) => {
-  if (name in locales) {
-    console.warn(`[i18n] ${name} has been registered`);
-  } else {
-    locales[name] = data;
-  }
-};
-const __ = name => {
-  if (activeLocale in locales) {
-    return locales[activeLocale][name] || '';
-  } else {
-    console.warn(`[i18n] locale not found`);
-    return '';
-  }
-};
-
 register('en', {
   'data.pleaseSelectDataTable': 'please select data table',
   'data.calculatingNow': 'calculating now...',
@@ -1838,111 +1993,9 @@ const Loading = ({
   });
 };
 
-var css_248z$d = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-Filter-item {\n  position: relative;\n  margin: 0 10px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow,\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  position: absolute;\n  top: 0;\n  height: 40px;\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.4;\n  cursor: pointer;\n  transform: scale(0);\n  transition: all 0.3s;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow img,\n.Sqb-item--content .Sqb-Filter-item .left-arrow img {\n  transform: scale(0.8);\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow:hover,\n.Sqb-item--content .Sqb-Filter-item .left-arrow:hover {\n  opacity: 1;\n}\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  transform: rotate(180deg) scale(0);\n  transform-origin: 50% 50%;\n  left: -30px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow {\n  right: -20px;\n}\n.Sqb-item--content .Sqb-Filter-item.hover .left-arrow {\n  transform: rotate(180deg) scale(1);\n}\n.Sqb-item--content .Sqb-Filter-item.hover .right-arrow {\n  transform: scale(1);\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell-preview {\n  flex-shrink: 0;\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  position: relative;\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s,\n            border 300ms linear 0s;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-as {\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(50%, -50%);\n  margin: 0;\n  border: none;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  font-size: 12px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where.block {\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell .operator-icon,\n.Sqb-item--content .Sqb-NotebookCell .operator-icon button {\n  font-size: 18px !important;\n  border: none !important;\n}\n.Sqb-item--content .Sqb-NotebookCell .subquery-icon {\n  color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background-color: #509ee3 !important;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
+var css_248z$d = ".mx-4 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.m-2 {\n  margin: 0.5rem;\n}\n.mx-2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.ml-2 {\n  margin-left: 0.5rem;\n}\n.mt-2 {\n  margin-top: 0.5rem;\n}\n.mb-2 {\n  margin-bottom: 0.5rem;\n}\n.mt-4 {\n  margin-top: 1rem;\n}\n.ml-4 {\n  margin-left: 1rem;\n}\n.mr-4 {\n  margin-right: 1rem;\n}\n.mr-2 {\n  margin-right: 0.5rem;\n}\n.pt-2 {\n  padding-top: 0.5rem;\n}\n.pb-2 {\n  padding-bottom: 0.5rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.p-4 {\n  padding: 1rem;\n}\n.p-2 {\n  padding: 0.5rem;\n}\n.p-1 {\n  padding: 0.25rem;\n}\n.px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.pb-4 {\n  padding-bottom: 1rem;\n}\n.pt-4 {\n  padding-top: 1rem;\n}\n.block {\n  display: block;\n}\n.w-full {\n  width: 100%;\n}\n.font-bold {\n  font-weight: 700;\n}\n.uppercase {\n  text-transform: uppercase;\n}\n.tracking-wider {\n  letter-spacing: 0.05em;\n}\n.relative {\n  position: relative;\n}\n.absolute {\n  position: absolute;\n}\n.top-0 {\n  top: 0px;\n}\n.left-0 {\n  left: 0;\n}\n.rounded-lg {\n  border-radius: 0.5rem;\n}\n.text-gray-500 {\n  color: #6b7280;\n}\n.flex {\n  display: flex;\n}\n.items-center {\n  align-items: center;\n}\n.justify-center {\n  justify-content: center;\n}\n.visual-box {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  transition: all 0.3s;\n  z-index: 3;\n  background-color: #fff;\n}\n.Sqb {\n  padding: 0 20px 50px;\n}\n.Sqb-list {\n  padding-top: 1.5rem;\n}\n.Sqb-hover-parent {\n  margin-bottom: 16px;\n  padding-bottom: 16px;\n}\n.Sqb-item {\n  font-size: 14px;\n}\n.Sqb-item--text {\n  color: #509ee3;\n  width: 66.6667%;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n}\n.Sqb-item--text.purple-text {\n  color: #7172ad;\n}\n.Sqb-item--text.gray-text {\n  color: #93a1ab;\n}\n.Sqb-item--text.green-text {\n  color: #88bf4d;\n}\n.Sqb-item-close {\n  width: 16px;\n  height: 16px;\n  color: #b8bbc3;\n  margin-left: auto;\n  visibility: hidden;\n  cursor: pointer;\n}\n.Sqb-item--content {\n  width: 66.6667%;\n  box-sizing: border-box;\n}\n.Sqb-item--content .Sqb-Filter-item {\n  position: relative;\n  margin: 0 10px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow,\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  position: absolute;\n  top: 0;\n  height: 40px;\n  width: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.4;\n  cursor: pointer;\n  transform: scale(0);\n  transition: all 0.3s;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow img,\n.Sqb-item--content .Sqb-Filter-item .left-arrow img {\n  transform: scale(0.8);\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow:hover,\n.Sqb-item--content .Sqb-Filter-item .left-arrow:hover {\n  opacity: 1;\n}\n.Sqb-item--content .Sqb-Filter-item .left-arrow {\n  transform: rotate(180deg) scale(0);\n  transform-origin: 50% 50%;\n  left: -30px;\n}\n.Sqb-item--content .Sqb-Filter-item .right-arrow {\n  right: -20px;\n}\n.Sqb-item--content .Sqb-Filter-item.hover .left-arrow {\n  transform: rotate(180deg) scale(1);\n}\n.Sqb-item--content .Sqb-Filter-item.hover .right-arrow {\n  transform: scale(1);\n}\n.Sqb-item--content .Sqb-NotebookCell {\n  box-sizing: border-box;\n  padding: 16px 16px 8px;\n  color: #509ee3;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-align: center;\n  align-items: center;\n  border-radius: 8px;\n  background-color: rgba(80, 158, 227, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell-preview {\n  flex-shrink: 0;\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell.gray-bg {\n  background-color: rgba(147, 161, 171, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell.green-bg {\n  background-color: rgba(136, 191, 77, 0.1);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName {\n  position: relative;\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s,\n            border 300ms linear 0s;\n  box-sizing: border-box;\n  margin-bottom: 8px;\n  margin-right: 8px;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-as {\n  position: absolute;\n  right: 0;\n  top: 0;\n  transform: translate(50%, -50%);\n  margin: 0;\n  border: none;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  font-size: 12px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick {\n  cursor: default;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number {\n  margin-bottom: 0.5rem;\n}\n.Sqb-item--content .Sqb-NotebookCell .ant-input-number .ant-input-number-input {\n  height: 32px;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where {\n  box-sizing: border-box;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-where.block {\n  width: 100%;\n}\n.Sqb-item--content .Sqb-NotebookCell .operator-icon,\n.Sqb-item--content .Sqb-NotebookCell .operator-icon button {\n  font-size: 18px !important;\n  border: none !important;\n}\n.Sqb-item--content .Sqb-NotebookCell .subquery-icon {\n  color: #93a1ab;\n}\n.Sqb-item--content .Sqb-NotebookCell .Sqb-TableColumns {\n  font-weight: 600;\n  margin-bottom: 0.5rem;\n  margin-left: auto;\n  cursor: pointer;\n}\n.Sqb-item--content .flex-row {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex-direction: row;\n}\n.Sqb-item--content .flex-row .Sqb-NotebookCell {\n  width: 50%;\n}\n.Sqb-item--content .flex-row .pass {\n  color: #88bf4d;\n  margin: 4px 16px;\n  font-size: 600;\n}\n.Sqb-item--func {\n  box-sizing: border-box;\n  margin-top: 8px;\n}\n.Sqb-item--func .Sqb-button {\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  cursor: pointer;\n  font-weight: bold;\n  padding: 12px 16px;\n  border-radius: 6px;\n  margin-right: 16px;\n  margin-top: 16px;\n  border: none;\n  transition: background 300ms ease 0s;\n  flex-shrink: 0;\n  color: #93a1ab;\n  background-color: #ffffff;\n}\n.Sqb-item--func .Sqb-button:hover {\n  color: #7e8f9b;\n  background-color: #eceff0;\n}\n.Sqb-item--func .Sqb-button > div {\n  min-width: 60px;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n}\n.Sqb-item--func .Sqb-button > div svg {\n  flex-shrink: 0;\n}\n.Sqb-item--func .Sqb-button > div div {\n  margin-top: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.filter {\n  color: #7172ad;\n  background-color: #e0e0ed;\n}\n.Sqb-item--func .Sqb-button.filter:hover {\n  color: #5d5ea0;\n  background-color: #cccce1;\n}\n.Sqb-item--func .Sqb-button.summarize {\n  color: #88bf4d;\n  background-color: #d8eac5;\n}\n.Sqb-item--func .Sqb-button.summarize:hover {\n  color: #79ae3f;\n  background-color: #cae2af;\n}\n.Sqb-item--func .Sqb-button.joinData {\n  color: #509ee3;\n  background-color: #f1f7fd;\n}\n.Sqb-item--func .Sqb-button.joinData:hover {\n  color: #328dde;\n  background-color: #d4e7f8;\n}\n.Sqb-item--func .Sqb-button.small {\n  margin-right: 8px;\n  margin-top: 0;\n  padding: 0.5rem;\n}\n.Sqb-item--func .Sqb-button.small > div {\n  min-width: 0;\n}\n.Sqb-item--func .Sqb-button.small > div svg {\n  width: 14px;\n  height: 14px;\n}\n.Sqb-item--func .Sqb-button.small > div div {\n  display: none;\n}\n.Sqb-item:hover .Sqb-item-close {\n  visibility: visible;\n}\n.Sqb > .Sqb-btn {\n  min-width: 220px;\n  height: 36px;\n  border-radius: 6px;\n  color: #ffffff;\n  background-color: #509ee3 !important;\n  border: 1px solid #509ee3;\n}\n.Sqb > .Sqb-btn:hover {\n  background-color: rgba(80, 158, 227, 0.8) !important;\n}\n";
 styleInject(css_248z$d);
 
-// 获取元素translate x y值
-const getComputedTranslate = obj => {
-  if (!window.getComputedStyle) return {
-    x: 0,
-    y: 0
-  };
-  var style = getComputedStyle(obj),
-    transform = style.transform || style.webkitTransform || style.mozTransform;
-  var mat = transform.match(/^matrix3d\((.+)\)$/);
-  if (mat) {
-    return {
-      x: parseFloat(mat[1].split(', ')[12]),
-      y: parseFloat(mat[1].split(', ')[13])
-    };
-  }
-  mat = transform.match(/^matrix\((.+)\)$/);
-  if (mat) {
-    return {
-      x: parseFloat(mat[1].split(', ')[4]),
-      y: parseFloat(mat[1].split(', ')[5])
-    };
-  }
-  return {
-    x: 0,
-    y: 0
-  };
-};
-// 获取元素距离浏览器顶部的距离
-const getElementTop = elem => {
-  if (!elem) return 0;
-  let elemTop = elem.offsetTop;
-  let pElem = elem.offsetParent;
-  while (pElem != null) {
-    elemTop += pElem.offsetTop;
-    if (pElem.style.transform) {
-      elemTop += getComputedTranslate(pElem).y;
-    }
-    pElem = pElem.offsetParent;
-  }
-  return elemTop;
-};
-// 获取元素距离浏览器顶部的距离
-const getElementLeft = elem => {
-  if (!elem) return 0;
-  let elemLeft = elem.offsetLeft;
-  let pElem = elem.offsetParent;
-  while (pElem != null) {
-    elemLeft += pElem.offsetLeft;
-    if (pElem.style.transform) {
-      elemLeft += getComputedTranslate(pElem).x;
-    }
-    pElem = pElem.offsetParent;
-  }
-  return elemLeft;
-};
-// 获取元素可见范围内高度
-const getContainerVisibleHeight = container => {
-  if (!container) return 0;
-  const rect = container.getBoundingClientRect();
-  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
-  // 元素顶部在视口上方 -> 不可见
-  if (rect.bottom < 0) return 0;
-  // 元素底部在视口下方 -> 不可见
-  if (rect.top > windowHeight) return 0;
-  // 可见区域的 top 和 bottom
-  const visibleTop = Math.max(rect.top, 0);
-  const visibleBottom = Math.min(rect.bottom, windowHeight);
-  // 可见高度
-  return visibleBottom - visibleTop;
-};
-const getScrollTop = elem => {
-  return elem?.scrollTop || document.documentElement.scrollTop;
-};
-// 浏览器可视宽高
-const getWindowSize = () => {
-  return {
-    width: document.body.clientWidth,
-    height: document.body.clientHeight
-  };
-};
-// 获取元素父级最大的 z-index
-const getMaxZIndexInParents = element => {
-  let currentElement = element;
-  let maxZIndex = -Infinity;
-  // 遍历当前元素及其所有父级元素
-  while (currentElement && currentElement !== document.body) {
-    // 获取当前元素的 z-index
-    const zIndex = window.getComputedStyle(currentElement).zIndex;
-    // 如果 z-index 是数字且比当前最大值大，则更新
-    if (zIndex !== 'auto') {
-      const zIndexNum = parseInt(zIndex, 10);
-      if (!isNaN(zIndexNum) && zIndexNum > maxZIndex) {
-        maxZIndex = zIndexNum;
-      }
-    }
-    // 移动到父级元素
-    currentElement = currentElement.parentElement;
-  }
-  // 如果没有显式设置的 z-index，返回 'auto' 或默认值
-  return maxZIndex !== -Infinity ? maxZIndex : 'auto';
-};
-
 const Wrapper = ({
   children,
   className
@@ -2114,13 +2167,13 @@ const LeftJoinIcon = ({
   })
 });
 const InnerJoinIcon = ({
-  width: _width0 = 32,
-  height: _height0 = 32,
+  width: _width10 = 32,
+  height: _height10 = 32,
   style
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width0,
-  height: _height0,
+  width: _width10,
+  height: _height10,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'join_inner icon',
@@ -2130,13 +2183,13 @@ const InnerJoinIcon = ({
   })
 });
 const UpArrowIcon = ({
-  width: _width1 = 16,
-  height: _height1 = 17
+  width: _width11 = 16,
+  height: _height11 = 17
 }) => jsx("svg", {
   className: 'sort-arrow',
   viewBox: '0 0 32 34',
-  width: _width1,
-  height: _height1,
+  width: _width11,
+  height: _height11,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'arrow_up icon',
@@ -2145,13 +2198,13 @@ const UpArrowIcon = ({
   })
 });
 const DownArrowIcon = ({
-  width: _width10 = 16,
-  height: _height10 = 17
+  width: _width12 = 16,
+  height: _height12 = 17
 }) => jsx("svg", {
   className: 'sort-arrow',
   viewBox: '0 0 32 34',
-  width: _width10,
-  height: _height10,
+  width: _width12,
+  height: _height12,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'arrow_down icon',
@@ -2160,13 +2213,13 @@ const DownArrowIcon = ({
   })
 });
 const CloseIcon = ({
-  width: _width11 = 16,
-  height: _height11 = 16
+  width: _width13 = 16,
+  height: _height13 = 16
 }) => jsx("svg", {
   className: 'closeIcon',
   viewBox: '0 0 32 32',
-  width: _width11,
-  height: _height11,
+  width: _width13,
+  height: _height13,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'close icon',
@@ -2175,12 +2228,12 @@ const CloseIcon = ({
   })
 });
 const AddIcon = ({
-  width: _width12 = 16,
-  height: _height12 = 16
+  width: _width14 = 16,
+  height: _height14 = 16
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width12,
-  height: _height12,
+  width: _width14,
+  height: _height14,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'add icon',
@@ -2189,12 +2242,12 @@ const AddIcon = ({
   })
 });
 const TableIcon = ({
-  width: _width13 = 18,
-  height: _height13 = 18
+  width: _width15 = 18,
+  height: _height15 = 18
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width13,
-  height: _height13,
+  width: _width15,
+  height: _height15,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'table2 icon',
@@ -2203,12 +2256,12 @@ const TableIcon = ({
   })
 });
 const SearchIcon = ({
-  width: _width14 = 16,
-  height: _height14 = 16
+  width: _width16 = 16,
+  height: _height16 = 16
 }) => jsx("svg", {
   viewBox: '0 0 32 32',
-  width: _width14,
-  height: _height14,
+  width: _width16,
+  height: _height16,
   fill: 'currentcolor',
   role: 'img',
   "aria-label": 'search icon',
@@ -3427,6 +3480,87 @@ class TokenizedInput extends React__default.Component {
   }
 }
 
+// 获取元素translate x y值
+const getComputedTranslate = obj => {
+  if (!window.getComputedStyle) return {
+    x: 0,
+    y: 0
+  };
+  var style = getComputedStyle(obj),
+    transform = style.transform || style.webkitTransform || style.mozTransform;
+  var mat = transform.match(/^matrix3d\((.+)\)$/);
+  if (mat) {
+    return {
+      x: parseFloat(mat[1].split(', ')[12]),
+      y: parseFloat(mat[1].split(', ')[13])
+    };
+  }
+  mat = transform.match(/^matrix\((.+)\)$/);
+  if (mat) {
+    return {
+      x: parseFloat(mat[1].split(', ')[4]),
+      y: parseFloat(mat[1].split(', ')[5])
+    };
+  }
+  return {
+    x: 0,
+    y: 0
+  };
+};
+// 获取元素距离浏览器顶部的距离
+const getElementTop = elem => {
+  if (!elem) return 0;
+  let elemTop = elem.offsetTop;
+  let pElem = elem.offsetParent;
+  while (pElem != null) {
+    elemTop += pElem.offsetTop;
+    if (pElem.style.transform) {
+      elemTop += getComputedTranslate(pElem).y;
+    }
+    pElem = pElem.offsetParent;
+  }
+  return elemTop;
+};
+// 获取元素距离浏览器顶部的距离
+const getElementLeft = elem => {
+  if (!elem) return 0;
+  let elemLeft = elem.offsetLeft;
+  let pElem = elem.offsetParent;
+  while (pElem != null) {
+    elemLeft += pElem.offsetLeft;
+    if (pElem.style.transform) {
+      elemLeft += getComputedTranslate(pElem).x;
+    }
+    pElem = pElem.offsetParent;
+  }
+  return elemLeft;
+};
+// 获取元素可见范围内高度
+const getContainerVisibleHeight = container => {
+  if (!container) return 0;
+  const rect = container.getBoundingClientRect();
+  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+  // 元素顶部在视口上方 -> 不可见
+  if (rect.bottom < 0) return 0;
+  // 元素底部在视口下方 -> 不可见
+  if (rect.top > windowHeight) return 0;
+  // 可见区域的 top 和 bottom
+  const visibleTop = Math.max(rect.top, 0);
+  const visibleBottom = Math.min(rect.bottom, windowHeight);
+  // 可见高度
+  return visibleBottom - visibleTop;
+};
+const getScrollTop = elem => {
+  return elem?.scrollTop || document.documentElement.scrollTop;
+};
+// 浏览器可视宽高
+const getWindowSize = () => {
+  return {
+    width: document.body.clientWidth,
+    height: document.body.clientHeight
+  };
+};
+
 class WinResetEvent {
   eventStack = {};
   funcId = 0;
@@ -3467,7 +3601,9 @@ const Portal = /*#__PURE__*/forwardRef((props, ref) => {
     initRef.current = true;
   }
   useEffect(() => {
-    didUpdate?.(props, containerRef.current);
+    setTimeout(() => {
+      didUpdate?.(props, containerRef.current);
+    }, 0);
   });
   useEffect(() => {
     return () => {
@@ -3593,6 +3729,7 @@ function generateTrigger(PortalComponent) {
           borderRadius: 6
         },
         onClick: e => this.props.closable && e.stopPropagation(),
+        onMouseDown: e => e.stopPropagation(),
         children: /*#__PURE__*/React.cloneElement(this.props.children, {
           key: posKey,
           didUpdate: this.didUpdate
@@ -3652,7 +3789,7 @@ styleInject(css_248z$9);
 var css_248z$8 = ".function-tip__container {\n  width: 448px;\n  font-size: 14px;\n  color: #4c5773;\n}\n.function-tip__container .function-name {\n  background: #fffcf2;\n  font-weight: 700;\n  padding: 1rem;\n  font-size: 14px;\n}\n.function-tip__container .function-desc {\n  padding: 1rem;\n  border-top: 1px solid #f0f0f0;\n}\n.function-tip__container .function-desc .desc {\n  font-weight: 700;\n}\n.function-tip__container .function-desc .case {\n  font-family: monospace;\n  color: #949aab;\n  background-color: #edf2f5;\n  border-radius: 2px;\n  padding: 0.2em 0.4em;\n  line-height: 1.4em;\n  white-space: pre-wrap;\n}\n.function-tip__container .funciton-parameter {\n  padding: 1rem;\n  border-top: 1px solid #f0f0f0;\n}\n.function-tip__container .funciton-parameter .key {\n  color: #949aab;\n}\n.function-tip__container .funciton-parameter .explain {\n  font-weight: 700;\n  margin-top: 0.5rem;\n}\n";
 styleInject(css_248z$8);
 
-var css_248z$7 = ".Sqb-SelectColumn--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 300px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectColumn--box .SelectColumn-border {\n  border-bottom: 1px solid #f0f0f0;\n}\n.Sqb-SelectColumn--box .SelectColumn-border.events-none {\n  pointer-events: none;\n  opacity: 0.4;\n}\n.Sqb-SelectColumn--box > div {\n  cursor: pointer;\n  color: #4c5773;\n}\n.Sqb-SelectColumn--box > div .selected {\n  width: 16px;\n  height: 16px;\n  background-color: #509ee3;\n  border: 2px solid #509ee3;\n  border-radius: 4px;\n  color: #fff;\n}\n.Sqb-SelectColumn--box > div .no-select {\n  width: 16px;\n  height: 16px;\n  background-color: white;\n  border: 2px solid #b8bbc3;\n  border-radius: 4px;\n  color: #b8bbc3;\n}\n.Sqb-SelectColumn--box > div .Sqb-TableName-as {\n  margin-left: auto;\n}\n";
+var css_248z$7 = ".Sqb-SelectColumn--box {\n  box-sizing: border-box;\n  min-width: 1em;\n  max-width: 300px;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.Sqb-SelectColumn--box .SelectColumn-border {\n  border-bottom: 1px solid #f0f0f0;\n}\n.Sqb-SelectColumn--box .SelectColumn-border.events-none {\n  pointer-events: none;\n  opacity: 0.4;\n}\n.Sqb-SelectColumn--box > div {\n  cursor: pointer;\n  color: #4c5773;\n}\n.Sqb-SelectColumn--box > div .selected {\n  width: 16px;\n  height: 16px;\n  background-color: #509ee3;\n  border: 2px solid #509ee3;\n  border-radius: 4px;\n  color: #fff;\n}\n.Sqb-SelectColumn--box > div .no-select {\n  width: 16px;\n  height: 16px;\n  background-color: white;\n  border: 2px solid #b8bbc3;\n  border-radius: 4px;\n  color: #b8bbc3;\n}\n.Sqb-SelectColumn--box > div .Sqb-TableName-as {\n  margin-left: auto;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search {\n  display: flex;\n  align-items: center;\n  flex: 1 0 auto;\n  color: #b8bbc3;\n  background-color: #fff;\n  border: 1px solid #f0f0f0;\n  font-size: 14px;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search span {\n  line-height: 0;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search input {\n  box-shadow: none;\n  outline: 0;\n  border: none !important;\n  background: transparent;\n  color: #4c5773;\n  font-size: 1em;\n  font-weight: 600;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search input::-webkit-input-placeholder {\n  color: #b8bbc3;\n}\n.Sqb-SelectColumn--box .Sqb-SelectColumn-search input::-ms-input-placeholder {\n  color: #b8bbc3;\n}\n";
 styleInject(css_248z$7);
 
 // 选择表中参数
@@ -3661,11 +3798,21 @@ const SelectColumn = ({
   groupIndex,
   onChange
 }) => {
-  const [columns, setColumns] = useState(_data.slice());
+  const [columns, setColumns] = useState([]);
+  const [originList, setOriginList] = useState(_data.slice());
   const store = useStore$1();
+  const [filterVal, setFilterVal] = useState('');
+  useEffect(() => {
+    let newList = cloneDeep(originList.slice());
+    setColumns(newList.filter(v => ~(v.name + (v.name_zh || '')).toLocaleLowerCase().indexOf(filterVal.toLocaleLowerCase())));
+  }, [filterVal, originList]);
+  function onInput(e) {
+    let val = e.target.value;
+    setFilterVal(val);
+  }
   const isAllSelect = useMemo(() => {
-    return columns.filter(v => v.select).length === columns.length;
-  }, [columns]);
+    return originList.filter(v => v.select).length === originList.length;
+  }, [originList]);
   const AllSelectElement = useMemo(() => {
     if (isAllSelect) {
       return jsxs(Fragment, {
@@ -3684,8 +3831,14 @@ const SelectColumn = ({
     }
   }, [isAllSelect]);
   function onSelect(columns) {
+    const originalData = cloneDeep(originList); // 原始数据
+    const mergedColumns = originalData.map(item => {
+      const match = columns.find(col => col.fieldUuid === item.fieldUuid);
+      return match ? cloneDeep(match) : item; // 可选：是否需要深拷贝 match
+    });
     setColumns(columns);
-    typeof onChange === 'function' && onChange(columns);
+    setOriginList(mergedColumns);
+    typeof onChange === 'function' && onChange(mergedColumns);
   }
   const onChangeFieldAlias = (val, i) => {
     let fieldAlias = val || '';
@@ -3706,10 +3859,14 @@ const SelectColumn = ({
         newMetaList = changeFieldAlias(newMetaList, newColumns[i]);
         store.setMeta(newMetaList, groupIndex);
         onSelect(newColumns);
-        store.setClosable(true);
+        setTimeout(() => {
+          store.setClosable(true);
+        }, 0);
       },
       onCancel: () => {
-        store.setClosable(true);
+        setTimeout(() => {
+          store.setClosable(true);
+        }, 0);
       }
     });
   };
@@ -3729,6 +3886,18 @@ const SelectColumn = ({
           onSelect(newColumns);
         },
         children: AllSelectElement
+      }), jsxs("div", {
+        className: cx(`Sqb-SelectColumn-search m-2 rounded-lg`),
+        children: [jsx("span", {
+          className: 'px-2',
+          children: jsx(SearchIcon, {})
+        }), jsx("input", {
+          type: 'text',
+          autoFocus: true,
+          className: 'p-1',
+          placeholder: __('data.search'),
+          onInput: onInput
+        })]
       }), Array.isArray(columns) && columns.map((v, i) => {
         return jsxs("div", {
           className: 'pb-2 px-2 flex items-center',
@@ -3797,10 +3966,10 @@ const SelectJoinColumn = ({
 }) => {
   const store = useStore$1();
   const [value, setValue] = useState(_value); // 当前选择的字段
-  const [curTable, setCurTable] = useState(_value.alias); // 当前选择的表
+  const [curTable, setCurTable] = useState(_value.tableUuid); // 当前选择的表
   const [curColumn, setCurColumn] = useState(_value.name); // 当前选择的字段
   const [tableList, setTableList] = useState(_data.map((v, i) => {
-    let open = !i && !_value.alias ? true : v.alias === _value.alias; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
+    let open = !i && !_value.tableUuid ? true : v.tableUuid === _value.tableUuid; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
     return {
       ...v,
       open,
@@ -3810,12 +3979,12 @@ const SelectJoinColumn = ({
   }));
   useEffect(() => {
     setValue(_value);
-    setCurTable(_value.alias);
+    setCurTable(_value.tableUuid);
     setCurColumn(_value.name);
   }, [_value]);
   useEffect(() => {
     setTableList(_data.map((v, i) => {
-      let open = !i && !_value.alias ? true : v.alias === _value.alias; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
+      let open = !i && !_value.tableUuid ? true : v.tableUuid === _value.tableUuid; // TODO.这里只判断表名相等 没有用了 因为表上面加了一层数据源 先这样吧
       return {
         ...v,
         open,
@@ -3875,12 +4044,12 @@ const SelectJoinColumn = ({
                 if (open) {
                   setTableList(newTables.map(v => ({
                     ...v,
-                    open: tableAlias === v.alias ? false : v.open
+                    open: tableUuid === v.tableUuid ? false : v.open
                   })));
                 } else {
                   setTableList(newTables.map(v => ({
                     ...v,
-                    open: tableAlias === v.alias || v.alias === SummarizeAlias$1
+                    open: tableUuid === v.tableUuid || v.alias === SummarizeAlias$1
                   })));
                 }
               },
@@ -3942,7 +4111,7 @@ const SelectJoinColumn = ({
                 className: cx(`Sqb-List-section`),
                 children: jsxs("div", {
                   className: cx(`Sqb-List-item mx-2`, {
-                    active: curColumn === name && curTable === tableAlias
+                    active: curColumn === name && curTable === tableUuid
                   }),
                   onClick: () => {
                     if (isGroup && typeof onGroup === 'function') {
@@ -3950,7 +4119,7 @@ const SelectJoinColumn = ({
                       let quotes = name;
                       return onGroup({
                         ..._value,
-                        tableUuid: _value.tableUuid || tableUuid,
+                        tableUuid: tableUuid || _value.tableUuid,
                         ...v,
                         table,
                         tableId,
@@ -3964,7 +4133,7 @@ const SelectJoinColumn = ({
                     }
                     typeof onSelect === 'function' && onSelect({
                       ..._value,
-                      tableUuid: _value.tableUuid || tableUuid,
+                      tableUuid: tableUuid || _value.tableUuid,
                       ...v,
                       table,
                       tableId,
@@ -4802,7 +4971,7 @@ const SelectSummarize = ({
       availableData = data.map(v => {
         return {
           ...v,
-          columns: v.columns.filter(o => o.database_type && NUMBER_GROUP.includes(o.database_type))
+          columns: v.columns.filter(o => o.database_type && (NUMBER_GROUP.includes(o.database_type) || (condition === '最大值' || condition === '最小值') && DATE_GROUP.includes(o.database_type)))
         };
       }).filter(v => v.columns.length);
     }
@@ -5485,6 +5654,7 @@ const TableData = props => {
   } = props;
   const store = useStore$1();
   let selected = Boolean(meta.table.name);
+  let subQuerySelected = Boolean(meta.subquery?.[0]?.table?.name);
   function selectTable(e) {
     !meta.readonly && store.setPopup({
       visible: true,
@@ -5550,6 +5720,77 @@ const TableData = props => {
       onCancel: () => {}
     });
   };
+  // 子查询弹窗
+  const showSubQuery = (val = []) => {
+    const {
+      subToolbar,
+      toolbar,
+      ...other
+    } = store.preProps;
+    let newMetaList = store.metaList[groupIndex].list.slice()[0];
+    let oldList = cloneDeep(newMetaList.subquery);
+    let _toolbar = subToolbar || toolbar;
+    _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
+    let o = Modal2.openModal({
+      title: __('SqlQueryBuilder.subquery'),
+      transparentMask: true,
+      content: jsx(Fragment, {
+        children: jsx(SqlVisionBuilder, {
+          ...other,
+          showSubquery: store._showSubquery,
+          toolbar: _toolbar,
+          btnText: __('SqlQueryBuilder.confirm'),
+          value: val,
+          onOk: newList => {
+            try {
+              // 子查询未改变不做操作
+              if (isEqual(newList, oldList)) {
+                o.close();
+                return;
+              }
+              newMetaList.subquery = newList;
+              newMetaList.table = {
+                ...newList[0].table,
+                alias: newMetaList.table.alias || '',
+                tableUuid: uuidv4('table')
+              };
+              const items = getSubColumns(newList);
+              const newColumns = items.flatMap(item => item.columns);
+              newMetaList.columns = newColumns;
+              // (newMeta[index] as MetaJoin).expressions = [];
+              store.setMeta([newMetaList], groupIndex);
+              o.close();
+            } catch (e) {
+              console.warn(e);
+            } finally {
+              o.close();
+            }
+          }
+        })
+      }),
+      onClose: () => {}
+    });
+  };
+  // 切换子查询
+  const switchSubQuery = () => {
+    let newMetaList = store.metaList[groupIndex].list.slice()[0];
+    newMetaList.isSubquery = !newMetaList.isSubquery;
+    //重置表数据
+    newMetaList.subquery = [];
+    newMetaList.table = {
+      name: '',
+      // 表名
+      tableUuid: '',
+      id: '',
+      // 表名
+      alias: '',
+      // 表别名
+      datasourceName: '',
+      // 数据源名
+      datasourceId: '' // 数据源id
+    };
+    store.setMeta([newMetaList], groupIndex);
+  };
   return jsx(Wrapper, {
     className: `Sqb-item`,
     children: jsxs("div", {
@@ -5560,7 +5801,29 @@ const TableData = props => {
         className: `Sqb-item--content`,
         children: jsxs("div", {
           className: `Sqb-NotebookCell`,
-          children: [jsxs("div", {
+          children: [meta.isSubquery ? jsxs("div", {
+            className: cx(`Sqb-TableName`, {
+              notSelected: !subQuerySelected
+            }),
+            onClick: () => {
+              showSubQuery(meta.subquery);
+            },
+            children: [subQuerySelected && jsx(Tooltip, {
+              title: __('SqlQueryBuilder.alias'),
+              children: jsx(Button, {
+                className: ':Sqb-TableName-as',
+                shape: 'circle',
+                iconOnly: true,
+                primary: true,
+                icon: 'As',
+                size: 'small',
+                onClick: e => {
+                  e.stopPropagation();
+                  onChangeTableAlias(meta.table?.alias || '');
+                }
+              })
+            }), subQuerySelected ? `${(meta.subquery?.[0]).table.datasourceName}.${(meta.subquery?.[0]).table.name} ${meta.table?.alias ? `as ${meta.table?.alias}` : ''} ` : __('SqlQueryBuilder.setSubQuery')]
+          }) : jsxs("div", {
             className: cx(`Sqb-TableName`, {
               notSelected: !selected
             }),
@@ -5580,7 +5843,19 @@ const TableData = props => {
                 }
               })
             }), selected ? `${meta.table.datasourceName}.${meta.table.name} ${meta.table?.alias ? `as ${meta.table?.alias}` : ''}` : __('SqlQueryBuilder.pickTable')]
-          }), selected && store.showMainColumn[groupIndex] && store.showFields && jsx("div", {
+          }), store.showSubquery && jsx(Tooltip, {
+            title: __('SqlQueryBuilder.switchSubQuery'),
+            children: jsx(Button, {
+              disabled: meta.readonly,
+              primary: meta.isSubquery,
+              ghost: true,
+              className: cx('mr-2 operator-icon', {
+                ['subquery-icon']: !meta.isSubquery
+              }),
+              icon: jsx(RelatedWork, {}),
+              onClick: switchSubQuery
+            })
+          }), selected && store.showFields && jsx("div", {
             className: `Sqb-TableColumns`,
             onClick: selectColumns,
             children: __('SqlQueryBuilder.columns')
@@ -5595,33 +5870,6 @@ const TableData = props => {
 };
 
 const PrevResult$1 = 'Previous results';
-function setQuotes(_meta) {
-  let newMeta = cloneDeep(_meta);
-  newMeta.table1 = {
-    ...newMeta.table1,
-    fieldAlias: newMeta.table1.fieldAlias || newMeta.table1.column,
-    fieldUuid: newMeta.table1.fieldUuid || newMeta.table1.column_id,
-    quotes: newMeta.table1.quotes || newMeta.table1.column
-  };
-  newMeta.table2 = {
-    ...newMeta.table2,
-    fieldAlias: newMeta.table2.fieldAlias || newMeta.table2.column,
-    fieldUuid: newMeta.table2.fieldUuid || newMeta.table2.column_id,
-    quotes: newMeta.table2.quotes || newMeta.table2.column
-  };
-  newMeta.expressions = newMeta.expressions.map(v => {
-    return {
-      ...v,
-      left_fieldAlias: v.fieldAlias || v.left_column,
-      left_fieldUuid: v.fieldUuid || v.left_column_id,
-      left_quotes: v.left_quotes || v.left_column,
-      right_fieldAlias: v.right_fieldAlias || v.right_column,
-      right_fieldUuid: v.right_fieldUuid || v.right_column_id,
-      right_quotes: v.right_quotes || v.right_column
-    };
-  });
-  return newMeta;
-}
 var FlagLocation;
 (function (FlagLocation) {
   FlagLocation["TABLE_1"] = "table1";
@@ -5646,11 +5894,11 @@ const JoinData = props => {
   let table2Selected = Boolean(meta.table2.name);
   let subQuerySelected = Boolean(meta.subquery?.[0]?.table?.name);
   let columnsSelected = meta.table1.quotes && meta.table2.quotes;
-  useEffect(() => {
-    let newMetaList = store.metaList[groupIndex].list.slice();
-    newMetaList[index] = setQuotes(meta);
-    store.setMeta(newMetaList, groupIndex);
-  }, []);
+  // useEffect(() => {
+  //   let newMetaList = store.metaList[groupIndex].list.slice();
+  //   newMetaList[index] = setQuotes(meta);
+  //   store.setMeta(newMetaList, groupIndex);
+  // }, []);
   function selectColumns(e) {
     let columns = meta.columns;
     !meta.readonly && store.setPopup({
@@ -5887,7 +6135,8 @@ const JoinData = props => {
             id = '',
             fieldAlias = '',
             fieldUuid = '',
-            quotes
+            quotes,
+            tableUuid
           } = record;
           let newMeta = store.metaList[groupIndex].list.slice();
           if (alias === SummarizeAlias$1) {
@@ -5903,6 +6152,7 @@ const JoinData = props => {
             if (newMeta[index][type].alias !== alias) {
               newMeta[index][type].alias = alias;
               newMeta[index][type].name = table;
+              newMeta[index][type].tableUuid = tableUuid;
               newMeta[index][type].datasourceId = datasourceId;
               newMeta[index][type].datasourceName = datasourceName;
               newMeta[index].expressions = [];
@@ -6150,11 +6400,9 @@ const JoinData = props => {
     let oldList = cloneDeep(newMeta[index].subquery);
     let _toolbar = subToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
-    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : 0;
     let o = Modal2.openModal({
       title: __('SqlQueryBuilder.subquery'),
       transparentMask: true,
-      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
@@ -6171,14 +6419,14 @@ const JoinData = props => {
               }
               newMeta[index].subquery = newList;
               newMeta[index].table2 = {
-                ...newList[0].table,
-                fieldAlias: '',
-                fieldUuid: ''
+                ...newList[0].table
               };
               const items = getSubColumns(newList);
               const newColumns = items.flatMap(item => item.columns);
               newMeta[index].columns = newColumns;
               newMeta[index].expressions = [];
+              // 关联表变了 下面模块全部删除
+              newMeta = newMeta.filter((v, i) => i <= index);
               store.setMeta(newMeta, groupIndex);
               o.close();
             } catch (e) {
@@ -6293,7 +6541,7 @@ const JoinData = props => {
                   onChangeTableAlias(meta.table2?.alias || '');
                 }
               })
-            }), subQuerySelected ? `${meta.subquery?.[0].table.datasourceName}.${meta.subquery?.[0].table.name} ${meta.table2?.alias ? `as ${meta.table2?.alias}` : ''} ` : __('SqlQueryBuilder.setSubQuery')]
+            }), subQuerySelected ? `${(meta.subquery?.[0]).table.datasourceName}.${(meta.subquery?.[0]).table.name} ${meta.table2?.alias ? `as ${meta.table2?.alias}` : ''} ` : __('SqlQueryBuilder.setSubQuery')]
           }) : jsxs("div", {
             className: cx(`Sqb-TableName`, {
               notSelected: !table2Selected
@@ -6463,7 +6711,7 @@ const JoinData = props => {
                       right_fieldUuid: '',
                       right_quotes: '',
                       right_string: '',
-                      right_isString: false,
+                      // right_isString: false,
                       right_type: 'field',
                       right_constant: ''
                     });
@@ -6509,7 +6757,7 @@ const JoinData = props => {
                   right_fieldUuid: '',
                   right_quotes: '',
                   right_string: '',
-                  right_isString: false,
+                  // right_isString: false,
                   right_constant: '',
                   right_type: 'field'
                 }];
@@ -7200,11 +7448,9 @@ const CustomColumn = props => {
   const showSubQuery = (e, i) => {
     let newMeta = store.metaList[groupIndex].list.slice();
     const _value = newMeta[index].customColumn[i] || [];
-    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : 0;
     let o = Modal2.openModal({
       title: __('SqlQueryBuilder.customExpression'),
       transparentMask: true,
-      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(Provider, {
           value: store,
@@ -7358,6 +7604,9 @@ const Filter = props => {
   let {
     filter
   } = meta;
+  const {
+    notExistsColumns
+  } = store.preProps;
   React__default.useRef(null);
   let index = findIndex(store.metaList[groupIndex].list, meta);
   let notSelected = !meta.filter.length;
@@ -7467,7 +7716,7 @@ const Filter = props => {
       showNotExists(i, '');
       return;
     }
-    let data = getColumns();
+    let data = [...getColumns(), ...cloneDeep(notExistsColumns || [])];
     store.setPopup({
       visible: true,
       node: e.currentTarget,
@@ -7485,8 +7734,8 @@ const Filter = props => {
   function handleAdd(e) {
     let node = e.currentTarget;
     let newMeta = store.metaList[groupIndex].list.slice();
-    let data = getColumns();
-    let _index = node.getAttribute('v-index');
+    let data = [...getColumns(), ...cloneDeep(notExistsColumns || [])];
+    let _index = Number(node.getAttribute('v-index'));
     let _type = node.getAttribute('v-type');
     let value = {
       table: '',
@@ -7522,15 +7771,16 @@ const Filter = props => {
       content: jsx(SelectFilter, {
         data: data,
         value: value,
-        onChange: data => {
+        onChange: val => {
           if (_type) {
             if (_type === 'before') {
-              newMeta[index].filter.splice(_index, 0, data);
+              newMeta[index].filter.splice(_index, 0, val);
             } else {
-              newMeta[index].filter.splice(_index + 1, 0, data);
+              console.log('🚀 ~ ', newMeta[index].filter);
+              newMeta[index].filter.splice(_index + 1, 0, val);
             }
           } else {
-            newMeta[index].filter.push(data);
+            newMeta[index].filter.push(val);
           }
           store.setMeta(newMeta, groupIndex);
           closePopup();
@@ -7572,18 +7822,18 @@ const Filter = props => {
     } = store.preProps;
     let newMeta = store.metaList[groupIndex].list.slice();
     let index = findIndex(store.metaList[groupIndex].list, meta);
-    let _value = position ? [] : newMeta[index].filter[i]?.subquery || [];
-    let oldList = position ? [] : cloneDeep(newMeta[index].filter[i]?.subquery || []);
+    let _value = position ? [] : newMeta[index].filter[i]?.notExists || [];
+    let oldList = position ? [] : cloneDeep(newMeta[index].filter[i]?.notExists || []);
     let _toolbar = notExistsToolbar || toolbar;
     _toolbar = _toolbar.filter(v => v !== 'group'); // 子查询不需要分组
-    let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
+    let notExistsColumns = getColumns();
     let o = Modal2.openModal({
       title: 'NOT EXISTS',
       transparentMask: true,
-      zIndex: Number(zIndex),
       content: jsx(Fragment, {
         children: jsx(SqlVisionBuilder, {
           ...other,
+          notExistsColumns: notExistsColumns,
           showFields: false,
           showSubquery: false,
           toolbar: _toolbar,
@@ -7597,8 +7847,8 @@ const Filter = props => {
                 return;
               }
               const _tem = {
-                subquery: newList,
-                quotes: `${newList?.[0].table.datasourceName}.${newList?.[0].table.alias || newList?.[0].table.name}`,
+                notExists: newList,
+                quotes: buildSqlQuery(newList),
                 condition: '',
                 table: '',
                 tableId: '',
@@ -7784,7 +8034,7 @@ const Filter = props => {
               if (typeof v === 'string') {
                 return v;
               } else if (v.type === Filter_TypeEnum.NOT_EXISTS) {
-                return 'not exitis ( * )';
+                return `${buildSqlQuery(v.notExists)}`;
               } else {
                 return v.quotes;
               }
@@ -7919,7 +8169,7 @@ const GroupBy = props => {
             const fieldAlias = `${v.alias}__${v.name}`;
             return {
               ...v,
-              sql: `${v.alias}.${v.realName || v.name} AS ${fieldAlias}`,
+              sql: `${v.alias}.${v.realName || v.name}`,
               fieldAlias: fieldAlias
             };
           });
@@ -7971,7 +8221,7 @@ const GroupBy = props => {
             const fieldAlias = `${v.alias}__${v.name}`;
             return {
               ...v,
-              sql: `${v.alias}.${v.realName || v.name} AS ${fieldAlias}`,
+              sql: `${v.alias}.${v.realName || v.name}`,
               fieldAlias: fieldAlias,
               fieldUuid: uuidv4('field'),
               summarizeType: MetaSummarize_Enum.BY
@@ -8455,8 +8705,8 @@ const Sort = props => {
     let value = {
       table: '',
       tableId: '',
-      tableUuid: uuidv4('table'),
-      fieldUuid: uuidv4('field'),
+      tableUuid: '',
+      fieldUuid: '',
       fieldAlias: '',
       alias: '',
       name: '',
@@ -8815,7 +9065,6 @@ const Metabase = props => {
     await onOk?.(_metaList);
     setSaveLoading(false);
   };
-  let zIndex = store.popupContainer.current ? getMaxZIndexInParents(store.popupContainer.current) : null;
   return (
     // @ts-ignore
     jsx(VisualBox, {
@@ -8861,7 +9110,6 @@ const Metabase = props => {
           visible: store.popupData.visible,
           node: store.popupData.node,
           closable: store.popupClosable,
-          zIndex: zIndex ? String(zIndex) : null,
           hideVisible: () => {
             store.setPopup({
               visible: false
@@ -8873,7 +9121,6 @@ const Metabase = props => {
           visible: store.popupData2.visible,
           node: store.popupData2.node,
           closable: store.popupClosable2,
-          zIndex: zIndex ? String(zIndex) : null,
           hideVisible: () => {
             store.setClosable(true);
             store.setPopup2({