@gingkoo/pandora-metabase 1.0.126 → 1.0.128

package/lib/es/components/dialog/formula-list/index.js

@@ -2,15 +2,15 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 var _excluded = ["notExistsToolbar", "toolbar"],
   _excluded2 = ["subToolbar", "notExistsColumns", "showFields", "isExit", "toolbar"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useMemo, useRef, forwardRef } from 'react';
 import './index.less';
-import { FieldString, FieldNumber, FfPlus } from '@gingkoo/pandora-icons';
+import { FieldString, FieldNumber, FfPlus, FullscreenOExpand } from '@gingkoo/pandora-icons';
 import cx from 'classnames';
 import Metabase from '../../../index';
 import { __ } from '../../../locale';
@@ -34,9 +34,99 @@ import storage from '../../../utils/storage';
 import { getTopLayerZIndex } from '../../../utils/helper-dom';
 import CaseWhenGroup from './CaseWhenGroup';
 import LogicGroup from './LogicGroup';
+import { SummarizeAlias } from '../../../store/helper';
 var CASE_FIXED_OPERATORS = ['case', 'when', 'then', 'else', 'end'];
 var LOGIC_FIXED_OPERATORS = ['(', ')'];
 var LOGIC_REQUIRED_OPERATORS = ['(', ')'];
+var TOKEN_DELETE_ICON_SIZE = 10;
+var ADD_TRIGGER_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minHeight: 28,
+  minWidth: 36,
+  padding: '4px 7px',
+  border: '1px solid transparent',
+  borderRadius: 5,
+  boxSizing: 'border-box',
+  color: '#fff',
+  backgroundColor: 'rgb(147, 161, 171)',
+  fontSize: 13,
+  lineHeight: '18px',
+  cursor: 'pointer'
+};
+var ZOOM_FOOTER_BUTTON_STYLE = {
+  minWidth: 72,
+  height: 30,
+  borderRadius: 6
+};
+var ZOOM_FOOTER_CANCEL_STYLE = _objectSpread(_objectSpread({}, ZOOM_FOOTER_BUTTON_STYLE), {}, {
+  borderColor: 'rgba(83, 92, 112, 0.18)',
+  background: '#fff',
+  color: 'rgba(83, 92, 112, 0.82)'
+});
+var ZOOM_FOOTER_CONFIRM_STYLE = _objectSpread(_objectSpread({}, ZOOM_FOOTER_BUTTON_STYLE), {}, {
+  borderColor: 'rgb(80, 158, 227)',
+  background: 'rgb(80, 158, 227)',
+  color: '#fff'
+});
+var FORMULA_LIST_ZOOM_BUTTON_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 22,
+  minWidth: 22,
+  height: 22,
+  margin: 0,
+  padding: 0,
+  border: 'none',
+  borderRadius: 999,
+  background: 'transparent',
+  color: 'rgba(83, 92, 112, 0.58)',
+  cursor: 'pointer',
+  lineHeight: 0
+};
+var TOKEN_BASE_STYLE = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  minHeight: 28,
+  padding: '4px 7px',
+  border: '1px solid transparent',
+  borderRadius: 5,
+  boxSizing: 'border-box',
+  fontSize: 13,
+  lineHeight: '18px',
+  cursor: 'pointer'
+};
+var TOKEN_PALETTE = {
+  blue: 'rgb(80, 158, 227)',
+  purple: 'rgb(113, 114, 173)',
+  gray: 'rgb(147, 161, 171)',
+  green: 'rgb(136, 191, 77)'
+};
+var getTokenStyleByClassName = function getTokenStyleByClassName(className, extraStyle) {
+  var names = " ".concat(className || '', " ");
+  var color = TOKEN_PALETTE.blue;
+  if (names.includes(' purple-name ')) {
+    color = TOKEN_PALETTE.purple;
+  } else if (names.includes(' gray-name ')) {
+    color = TOKEN_PALETTE.gray;
+  } else if (names.includes(' green-name ')) {
+    color = TOKEN_PALETTE.green;
+  }
+  var selectedStyle = _objectSpread(_objectSpread({}, TOKEN_BASE_STYLE), {}, {
+    color: '#fff',
+    backgroundColor: color
+  });
+  var notSelectedStyle = _objectSpread(_objectSpread({}, TOKEN_BASE_STYLE), {}, {
+    borderColor: color.replace('rgb', 'rgba').replace(')', ', 0.25)'),
+    color: color,
+    backgroundColor: 'transparent'
+  });
+  return _objectSpread(_objectSpread(_objectSpread({}, names.includes(' notSelected ') ? notSelectedStyle : selectedStyle), names.includes(' operator-trigger ') ? {
+    padding: '4px 7px'
+  } : {}), extraStyle);
+};
 var FormulaList = forwardRef(function (props, ref) {
   var _storage$_metabaseCop;
   var _useState = useState((storage === null || storage === void 0 || (_storage$_metabaseCop = storage._metabaseCopyItems) === null || _storage$_metabaseCop === void 0 ? void 0 : _storage$_metabaseCop.length) || 0),
@@ -76,6 +166,8 @@ var FormulaList = forwardRef(function (props, ref) {
     embedded = _props$embedded === void 0 ? false : _props$embedded,
     _props$enableCopy = props.enableCopy,
     enableCopy = _props$enableCopy === void 0 ? true : _props$enableCopy,
+    _props$enableZoom = props.enableZoom,
+    enableZoom = _props$enableZoom === void 0 ? true : _props$enableZoom,
     parentPopupChannel = props.parentPopupChannel;
   var parentPopupLockCountRef = useRef(0);
   var parentPopupUnlockTimerRef = useRef(null);
@@ -216,21 +308,6 @@ var FormulaList = forwardRef(function (props, ref) {
     _useState0 = _slicedToArray(_useState9, 2),
     filterVal = _useState0[0],
     setFilterVal = _useState0[1];
-  var setCaseList = function setCaseList(data) {
-    var quotes = data.map(function (v) {
-      if (v !== null && v !== void 0 && v.quotes) return v.quotes;
-      if (v !== null && v !== void 0 && v.fieldName) return v.fieldName;
-      return v === null || v === void 0 ? void 0 : v.val;
-    }).join(' ');
-    caseList = data;
-    caseListRef.current = data;
-    onChange === null || onChange === void 0 || onChange(data, quotes);
-  };
-  var updateAtomAt = function updateAtomAt(index, nextItem) {
-    var nextList = caseList.slice();
-    nextList[index] = nextItem;
-    setCaseList(nextList);
-  };
   function getSelectDisplayText(item) {
     var displayField = item.displayField || 'value';
     var getOptionText = function getOptionText(value) {
@@ -248,36 +325,42 @@ var FormulaList = forwardRef(function (props, ref) {
     }
     return getOptionText(String(item.val || ''));
   }
+  function getFieldDisplayName(field) {
+    if (!field) return '';
+    if (field.tableId === SummarizeAlias) {
+      return field.fieldAlias || field.fieldName || '';
+    }
+    return field.fieldName || field.fieldAlias || '';
+  }
   function getItemDisplayText(v) {
     if (!v) return '';
     if (v.quotes) return v.quotes;
+    if (v.type === AtomsTypeEnum.FIELD) return getFieldDisplayName(v);
     if (v.fieldName) return v.fieldName;
     if (v.type === AtomsTypeEnum.FORMULA) {
       return v.name ? getQuotes(v, v.args, formulaList) : '';
     }
     if (v.type === AtomsTypeEnum.CASE_WHEN) {
-      var caseValueText = (v.caseValue || []).map(function (item) {
+      var caseAtomsText = (v.caseAtoms || []).map(function (item) {
         return getItemDisplayText(item);
       }).join(' ');
-      var branchText = (v.branches || []).map(function (branch) {
-        var whenText = (branch.when || []).map(function (item) {
-          return getItemDisplayText(item);
-        }).join(' ');
-        var thenText = (branch.then || []).map(function (item) {
-          return getItemDisplayText(item);
-        }).join(' ');
+      var whenClausesText = (v.whenClauses || []).map(function (branch) {
+        var whenText = (branch.whenAtoms || []).map(getItemDisplayText).join(' ');
+        var thenText = (branch.thenAtoms || []).map(getItemDisplayText).join(' ');
         return "when ".concat(whenText, " then ").concat(thenText).trim();
       }).join(' ');
-      var elseText = (v.elseValue || []).length ? " else ".concat((v.elseValue || []).map(function (item) {
-        return getItemDisplayText(item);
-      }).join(' ')) : '';
-      return "case ".concat(caseValueText, " ").concat(branchText).concat(elseText, " end").replace(/\s+/g, ' ').trim();
+      var elseAtomsText = (v.elseAtoms || []).length ? " else ".concat((v.elseAtoms || []).map(getItemDisplayText).join(' ')) : '';
+      return "case ".concat(caseAtomsText, " ").concat(whenClausesText).concat(elseAtomsText, " end").replace(/\s+/g, ' ').trim();
     }
     if (v.type === AtomsTypeEnum.AND_OR) {
-      var listText = (v.list || []).map(function (item) {
-        return getItemDisplayText(item);
-      }).join(' ');
-      return "".concat(v.operator || 'and', " ( ").concat(listText, " )").replace(/\s+/g, ' ').trim();
+      var hasBinarySides = Array.isArray(v.leftAtoms) || Array.isArray(v.rightAtoms);
+      if (hasBinarySides) {
+        var leftText = (v.leftAtoms || []).map(getItemDisplayText).join(' ');
+        var rightText = (v.rightAtoms || []).map(getItemDisplayText).join(' ');
+        return "( ".concat(leftText, " ").concat(v.operator || 'and', " ").concat(rightText, " )").replace(/\s+/g, ' ').trim();
+      }
+      var atomsText = (v.atoms || []).map(getItemDisplayText).join(' ');
+      return "".concat(v.operator || 'and', " ( ").concat(atomsText, " )").replace(/\s+/g, ' ').trim();
     }
     if (v.type === AtomsTypeEnum.SELECT) {
       return getSelectDisplayText(v);
@@ -287,6 +370,73 @@ var FormulaList = forwardRef(function (props, ref) {
     }
     return v.val || '';
   }
+  var getItemQuotes = function getItemQuotes(item) {
+    return getItemDisplayText(_objectSpread(_objectSpread({}, item), {}, {
+      quotes: ''
+    }));
+  };
+  var _withSyncedQuotes = function withSyncedQuotes(item) {
+    if (item.type === AtomsTypeEnum.CASE_WHEN) {
+      var _item$elseAtoms;
+      var nextItem = _objectSpread(_objectSpread({}, item), {}, {
+        caseAtoms: (item.caseAtoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        }),
+        whenClauses: (item.whenClauses || []).map(function (clause) {
+          return _objectSpread(_objectSpread({}, clause), {}, {
+            whenAtoms: (clause.whenAtoms || []).map(function (currentItem) {
+              return _withSyncedQuotes(currentItem);
+            }),
+            thenAtoms: (clause.thenAtoms || []).map(function (currentItem) {
+              return _withSyncedQuotes(currentItem);
+            })
+          });
+        }),
+        elseAtoms: (_item$elseAtoms = item.elseAtoms) === null || _item$elseAtoms === void 0 ? void 0 : _item$elseAtoms.map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        })
+      });
+      return _objectSpread(_objectSpread({}, nextItem), {}, {
+        quotes: getItemQuotes(nextItem)
+      });
+    }
+    if (item.type === AtomsTypeEnum.AND_OR) {
+      var hasBinarySides = Array.isArray(item.leftAtoms) || Array.isArray(item.rightAtoms);
+      var _nextItem = _objectSpread(_objectSpread({}, item), hasBinarySides ? {
+        atoms: undefined,
+        leftAtoms: (item.leftAtoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        }),
+        rightAtoms: (item.rightAtoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        })
+      } : {
+        atoms: (item.atoms || []).map(function (currentItem) {
+          return _withSyncedQuotes(currentItem);
+        })
+      });
+      return _objectSpread(_objectSpread({}, _nextItem), {}, {
+        quotes: getItemQuotes(_nextItem)
+      });
+    }
+    return item;
+  };
+  var setCaseList = function setCaseList(data) {
+    var nextData = data.map(function (item) {
+      return _withSyncedQuotes(item);
+    });
+    var quotes = nextData.map(function (item) {
+      return getItemDisplayText(item);
+    }).join(' ');
+    caseList = nextData;
+    caseListRef.current = nextData;
+    onChange === null || onChange === void 0 || onChange(nextData, quotes);
+  };
+  var updateAtomAt = function updateAtomAt(index, nextItem) {
+    var nextList = caseList.slice();
+    nextList[index] = nextItem;
+    setCaseList(nextList);
+  };
   var getPreviewStr = function getPreviewStr() {
     var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     return data.map(function (v) {
@@ -308,9 +458,256 @@ var FormulaList = forwardRef(function (props, ref) {
       children: children
     });
   };
+  var openCaseWhenFormulaModal = function openCaseWhenFormulaModal(e, value, index) {
+    e.preventDefault();
+    e.stopPropagation();
+    var childModalZIndex = getTopLayerZIndex() + 1;
+    var modalInstance;
+    var CaseWhenZoomEditor = function CaseWhenZoomEditor() {
+      var _useState1 = useState(function () {
+          return cloneDeep(value);
+        }),
+        _useState10 = _slicedToArray(_useState1, 2),
+        draftValue = _useState10[0],
+        setDraftValue = _useState10[1];
+      var _useState11 = useState(null),
+        _useState12 = _slicedToArray(_useState11, 2),
+        activeZoomRegionKey = _useState12[0],
+        setActiveZoomRegionKey = _useState12[1];
+      var updateDraftValue = function updateDraftValue(nextValue) {
+        setDraftValue(_withSyncedQuotes(nextValue));
+      };
+      var handleOk = function handleOk() {
+        var _modalInstance2, _modalInstance2$close;
+        updateAtomAt(index, cloneDeep(draftValue));
+        (_modalInstance2 = modalInstance) === null || _modalInstance2 === void 0 || (_modalInstance2$close = _modalInstance2.close) === null || _modalInstance2$close === void 0 || _modalInstance2$close.call(_modalInstance2);
+      };
+      return _jsx(Provider, {
+        value: store,
+        children: _jsxs("div", {
+          className: 'Sqb-FormulaListZoomEditor',
+          children: [_jsx("div", {
+            className: 'Sqb-FormulaListZoomEditor-body',
+            children: _jsx("div", {
+              className: 'Sqb-NotebookCell Sqb-FormulaListZoomEditor-cell',
+              children: _jsx(CaseWhenGroup, {
+                showTools: false,
+                useBranchScrollInner: true,
+                caseRegionKey: 'case-zoom-case',
+                elseRegionKey: 'case-zoom-else',
+                activeRegionKey: activeZoomRegionKey,
+                onActivateRegion: setActiveZoomRegionKey,
+                caseAtomsContent: renderNestedFormulaList(draftValue.caseAtoms || [], function (nextList) {
+                  updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                    caseAtoms: nextList
+                  }));
+                }),
+                whenClauses: (draftValue.whenClauses || []).map(function (branch, branchIndex) {
+                  return {
+                    key: "case-zoom-".concat(branchIndex),
+                    canDelete: (draftValue.whenClauses || []).length > 1,
+                    whenContent: renderNestedFormulaList(branch.whenAtoms || [], function (nextList) {
+                      var nextWhenClauses = (draftValue.whenClauses || []).slice();
+                      nextWhenClauses[branchIndex] = _objectSpread(_objectSpread({}, branch), {}, {
+                        whenAtoms: nextList
+                      });
+                      updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                        whenClauses: nextWhenClauses
+                      }));
+                    }),
+                    thenContent: renderNestedFormulaList(branch.thenAtoms || [], function (nextList) {
+                      var nextWhenClauses = (draftValue.whenClauses || []).slice();
+                      nextWhenClauses[branchIndex] = _objectSpread(_objectSpread({}, branch), {}, {
+                        thenAtoms: nextList
+                      });
+                      updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                        whenClauses: nextWhenClauses
+                      }));
+                    }),
+                    onAddAfter: function onAddAfter(event) {
+                      event.stopPropagation();
+                      var nextWhenClauses = (draftValue.whenClauses || []).slice();
+                      nextWhenClauses.splice(branchIndex + 1, 0, {
+                        whenAtoms: [{
+                          val: '',
+                          type: AtomsTypeEnum.UNKNOWN
+                        }],
+                        thenAtoms: [{
+                          val: '',
+                          type: AtomsTypeEnum.UNKNOWN
+                        }]
+                      });
+                      updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                        whenClauses: nextWhenClauses
+                      }));
+                    },
+                    onDelete: function onDelete(event) {
+                      event.stopPropagation();
+                      var whenClauses = draftValue.whenClauses || [];
+                      if (whenClauses.length <= 1) return;
+                      updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                        whenClauses: whenClauses.filter(function (_, currentIndex) {
+                          return currentIndex !== branchIndex;
+                        })
+                      }));
+                    }
+                  };
+                }),
+                elseContent: draftValue.elseAtoms ? renderNestedFormulaList(draftValue.elseAtoms || [], function (nextList) {
+                  updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                    elseAtoms: nextList
+                  }));
+                }) : undefined,
+                onAddBranch: function onAddBranch(event) {
+                  event.stopPropagation();
+                  updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                    whenClauses: [].concat(_toConsumableArray(draftValue.whenClauses || []), [{
+                      whenAtoms: [{
+                        val: '',
+                        type: AtomsTypeEnum.UNKNOWN
+                      }],
+                      thenAtoms: [{
+                        val: '',
+                        type: AtomsTypeEnum.UNKNOWN
+                      }]
+                    }])
+                  }));
+                },
+                onAddElse: function onAddElse(event) {
+                  event.stopPropagation();
+                  updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                    elseAtoms: [{
+                      val: '',
+                      type: AtomsTypeEnum.UNKNOWN
+                    }]
+                  }));
+                },
+                onRemoveElse: function onRemoveElse(event) {
+                  event.stopPropagation();
+                  updateDraftValue(_objectSpread(_objectSpread({}, draftValue), {}, {
+                    elseAtoms: undefined
+                  }));
+                }
+              })
+            })
+          }), _jsxs("div", {
+            className: 'Sqb-FormulaListZoomEditor-footer',
+            children: [_jsx(Button, {
+              className: 'sqb-formula-list-zoom-editor-cancel',
+              style: ZOOM_FOOTER_CANCEL_STYLE,
+              onClick: function onClick() {
+                var _modalInstance3, _modalInstance3$close;
+                return (_modalInstance3 = modalInstance) === null || _modalInstance3 === void 0 || (_modalInstance3$close = _modalInstance3.close) === null || _modalInstance3$close === void 0 ? void 0 : _modalInstance3$close.call(_modalInstance3);
+              },
+              children: "\u53D6\u6D88"
+            }), _jsx(Button, {
+              className: 'sqb-formula-list-zoom-editor-confirm',
+              primary: true,
+              style: ZOOM_FOOTER_CONFIRM_STYLE,
+              onClick: handleOk,
+              children: "\u786E\u5B9A"
+            })]
+          })]
+        })
+      });
+    };
+    modalInstance = openChildModal({
+      zIndex: childModalZIndex,
+      className: 'sqb-formula-list-zoom-modal',
+      title: '编辑',
+      transparentMask: true,
+      modalWidth: 1180,
+      modalHeight: 680,
+      content: _jsx(CaseWhenZoomEditor, {}),
+      onClose: function onClose() {}
+    });
+  };
+  var openFormulaListModal = function openFormulaListModal(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var childModalZIndex = getTopLayerZIndex() + 1;
+    var modalInstance;
+    var FormulaListZoomEditor = function FormulaListZoomEditor() {
+      var _useState13 = useState(function () {
+          return cloneDeep(caseList || []);
+        }),
+        _useState14 = _slicedToArray(_useState13, 2),
+        draftList = _useState14[0],
+        setDraftList = _useState14[1];
+      var updateDraftList = function updateDraftList(nextList) {
+        setDraftList(nextList.map(function (item) {
+          return _withSyncedQuotes(item);
+        }));
+      };
+      var handleOk = function handleOk() {
+        var _modalInstance4, _modalInstance4$close;
+        setCaseList(cloneDeep(draftList));
+        (_modalInstance4 = modalInstance) === null || _modalInstance4 === void 0 || (_modalInstance4$close = _modalInstance4.close) === null || _modalInstance4$close === void 0 || _modalInstance4$close.call(_modalInstance4);
+      };
+      return _jsx(Provider, {
+        value: store,
+        children: _jsxs("div", {
+          className: 'Sqb-FormulaListZoomEditor',
+          children: [_jsx("div", {
+            className: 'Sqb-FormulaListZoomEditor-body Sqb-FormulaListZoomEditor-body--formulaList',
+            children: _jsx(FormulaList, {
+              ref: ref,
+              value: draftList,
+              data: data,
+              exitData: exitData,
+              onChange: function onChange(atoms) {
+                return updateDraftList(atoms);
+              },
+              customTypes: _customTypes,
+              otherTypes: otherTypes,
+              isCustom: isCustom,
+              showPreview: showPreview,
+              check: check,
+              _type: _type,
+              enableCopy: false,
+              enableZoom: false,
+              parentPopupChannel: parentPopupChannel
+            })
+          }), _jsxs("div", {
+            className: 'Sqb-FormulaListZoomEditor-footer',
+            children: [_jsx(Button, {
+              className: 'sqb-formula-list-zoom-editor-cancel',
+              style: ZOOM_FOOTER_CANCEL_STYLE,
+              onClick: function onClick() {
+                var _modalInstance5, _modalInstance5$close;
+                return (_modalInstance5 = modalInstance) === null || _modalInstance5 === void 0 || (_modalInstance5$close = _modalInstance5.close) === null || _modalInstance5$close === void 0 ? void 0 : _modalInstance5$close.call(_modalInstance5);
+              },
+              children: "\u53D6\u6D88"
+            }), _jsx(Button, {
+              className: 'sqb-formula-list-zoom-editor-confirm',
+              primary: true,
+              style: ZOOM_FOOTER_CONFIRM_STYLE,
+              onClick: handleOk,
+              children: "\u786E\u5B9A"
+            })]
+          })]
+        })
+      });
+    };
+    modalInstance = openChildModal({
+      zIndex: childModalZIndex,
+      className: 'sqb-formula-list-zoom-modal',
+      title: '编辑',
+      transparentMask: true,
+      modalWidth: 1180,
+      modalHeight: 680,
+      content: _jsx(FormulaListZoomEditor, {}),
+      onClose: function onClose() {}
+    });
+  };
   var renderNestedFormulaList = function renderNestedFormulaList(list, onNestedChange) {
+    var hasNestedCaseWhen = list.some(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.type) === AtomsTypeEnum.CASE_WHEN;
+    });
     return _jsx("div", {
-      className: 'Sqb-NestedFormulaList',
+      className: cx('Sqb-NestedFormulaList', {
+        'Sqb-NestedFormulaList--hasCaseWhen': hasNestedCaseWhen
+      }),
       children: _jsx(FormulaList, {
         ref: ref,
         embedded: true,
@@ -326,80 +723,94 @@ var FormulaList = forwardRef(function (props, ref) {
         showPreview: false,
         check: check,
         _type: _type,
+        enableZoom: false,
         parentPopupChannel: parentPopupChannel
       })
     });
   };
   var renderCaseWhenEditor = function renderCaseWhenEditor(value, index) {
+    var caseAtoms = value.caseAtoms || [];
+    var whenClauses = value.whenClauses || [];
+    var elseAtoms = value.elseAtoms;
+    var caseRegionKey = "case-".concat(index, "-case");
+    var elseRegionKey = "case-".concat(index, "-else");
     return _jsx(CaseWhenGroup, {
-      caseValueContent: renderNestedFormulaList(value.caseValue || [], function (nextList) {
+      isNested: embedded,
+      useBranchScrollInner: !embedded,
+      caseRegionKey: caseRegionKey,
+      elseRegionKey: elseRegionKey,
+      activeRegionKey: hoveredCaseGroupKey,
+      onActivateRegion: setHoveredCaseGroupKey,
+      caseAtomsContent: renderNestedFormulaList(caseAtoms, function (nextList) {
         updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          caseValue: nextList
+          caseAtoms: nextList
         }));
       }),
-      branches: (value.branches || []).map(function (branch, branchIndex) {
+      whenClauses: whenClauses.map(function (branch, branchIndex) {
         return {
           key: "case-".concat(index, "-branch-").concat(branchIndex),
-          whenContent: renderNestedFormulaList(branch.when || [], function (nextList) {
-            var nextBranches = (value.branches || []).slice();
-            nextBranches[branchIndex] = _objectSpread(_objectSpread({}, branch), {}, {
-              when: nextList
+          canDelete: whenClauses.length > 1,
+          whenContent: renderNestedFormulaList(branch.whenAtoms || [], function (nextList) {
+            var nextWhenClauses = whenClauses.slice();
+            nextWhenClauses[branchIndex] = _objectSpread(_objectSpread({}, branch), {}, {
+              whenAtoms: nextList
             });
             updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           }),
-          thenContent: renderNestedFormulaList(branch.then || [], function (nextList) {
-            var nextBranches = (value.branches || []).slice();
-            nextBranches[branchIndex] = _objectSpread(_objectSpread({}, branch), {}, {
-              then: nextList
+          thenContent: renderNestedFormulaList(branch.thenAtoms || [], function (nextList) {
+            var nextWhenClauses = whenClauses.slice();
+            nextWhenClauses[branchIndex] = _objectSpread(_objectSpread({}, branch), {}, {
+              thenAtoms: nextList
             });
             updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           }),
           onAddAfter: function onAddAfter(e) {
             e.stopPropagation();
-            var nextBranches = (value.branches || []).slice();
-            nextBranches.splice(branchIndex + 1, 0, {
-              when: [{
+            var nextWhenClauses = whenClauses.slice();
+            nextWhenClauses.splice(branchIndex + 1, 0, {
+              whenAtoms: [{
                 val: '',
                 type: AtomsTypeEnum.UNKNOWN
               }],
-              then: [{
+              thenAtoms: [{
                 val: '',
                 type: AtomsTypeEnum.UNKNOWN
               }]
             });
             updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           },
           onDelete: function onDelete(e) {
             e.stopPropagation();
-            var nextBranches = (value.branches || []).filter(function (_, currentIndex) {
+            if (whenClauses.length <= 1) return;
+            var nextWhenClauses = whenClauses.filter(function (_, currentIndex) {
               return currentIndex !== branchIndex;
             });
             updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-              branches: nextBranches
+              whenClauses: nextWhenClauses
             }));
           }
         };
       }),
-      elseContent: value.elseValue ? renderNestedFormulaList(value.elseValue || [], function (nextList) {
+      elseContent: elseAtoms ? renderNestedFormulaList(elseAtoms || [], function (nextList) {
         updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          elseValue: nextList
+          elseAtoms: nextList
         }));
       }) : undefined,
       onAddBranch: function onAddBranch(e) {
         e.stopPropagation();
         updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          branches: [].concat(_toConsumableArray(value.branches || []), [{
-            when: [{
+          whenClauses: [].concat(_toConsumableArray(whenClauses), [{
+            whenAtoms: [{
               val: '',
               type: AtomsTypeEnum.UNKNOWN
             }],
-            then: [{
+            thenAtoms: [{
               val: '',
               type: AtomsTypeEnum.UNKNOWN
             }]
@@ -409,7 +820,7 @@ var FormulaList = forwardRef(function (props, ref) {
       onAddElse: function onAddElse(e) {
         e.stopPropagation();
         updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          elseValue: [{
+          elseAtoms: [{
             val: '',
             type: AtomsTypeEnum.UNKNOWN
           }]
@@ -418,25 +829,48 @@ var FormulaList = forwardRef(function (props, ref) {
       onRemoveElse: function onRemoveElse(e) {
         e.stopPropagation();
         updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          elseValue: undefined
+          elseAtoms: undefined
         }));
       },
+      onZoomCase: function onZoomCase(e) {
+        return openCaseWhenFormulaModal(e, value, index);
+      },
       onDeleteCase: function onDeleteCase(e) {
         return handleDel(e, index);
       }
     });
   };
   var renderAndOrEditor = function renderAndOrEditor(value, index) {
+    var createUnknownAtom = function createUnknownAtom() {
+      return {
+        val: '',
+        type: AtomsTypeEnum.UNKNOWN
+      };
+    };
+    var leftAtoms = Array.isArray(value.leftAtoms) ? value.leftAtoms : value.atoms || [createUnknownAtom()];
+    var rightAtoms = Array.isArray(value.rightAtoms) ? value.rightAtoms : [createUnknownAtom()];
     return _jsx(LogicGroup, {
       operator: value.operator || 'and',
       onToggleOperator: function onToggleOperator() {
         updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          atoms: undefined,
+          leftAtoms: leftAtoms,
+          rightAtoms: rightAtoms,
           operator: value.operator === 'or' ? 'and' : 'or'
         }));
       },
-      content: renderNestedFormulaList(value.list || [], function (nextList) {
+      leftContent: renderNestedFormulaList(leftAtoms, function (nextList) {
+        updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
+          atoms: undefined,
+          rightAtoms: rightAtoms,
+          leftAtoms: nextList
+        }));
+      }),
+      rightContent: renderNestedFormulaList(rightAtoms, function (nextList) {
         updateAtomAt(index, _objectSpread(_objectSpread({}, value), {}, {
-          list: nextList
+          atoms: undefined,
+          leftAtoms: leftAtoms,
+          rightAtoms: nextList
         }));
       }),
       onDelete: function onDelete(e) {
@@ -444,43 +878,43 @@ var FormulaList = forwardRef(function (props, ref) {
       }
     });
   };
-  var _useState1 = useState(-1),
-    _useState10 = _slicedToArray(_useState1, 2),
-    ind = _useState10[0],
-    setInd = _useState10[1];
+  var _useState15 = useState(-1),
+    _useState16 = _slicedToArray(_useState15, 2),
+    ind = _useState16[0],
+    setInd = _useState16[1];
   var filterCustomType = store.filterCustomType;
   var _ref = useRef(null);
-  var _useState11 = useState({
+  var _useState17 = useState({
       isError: false
     }),
-    _useState12 = _slicedToArray(_useState11, 2),
-    errorInfo = _useState12[0],
-    setErrorInfo = _useState12[1];
-  var _useState13 = useState(false),
-    _useState14 = _slicedToArray(_useState13, 2),
-    isCheck = _useState14[0],
-    setIsCheck = _useState14[1];
-  var myInstanceIdRef = useRef(Math.random().toString(36).slice(2));
-  var _useState15 = useState(null),
-    _useState16 = _slicedToArray(_useState15, 2),
-    hoveredCaseGroupKey = _useState16[0],
-    setHoveredCaseGroupKey = _useState16[1];
-  var _useState17 = useState(!!window.__sqb_selection_active__),
     _useState18 = _slicedToArray(_useState17, 2),
-    globalSelectionActive = _useState18[0],
-    setGlobalSelectionActive = _useState18[1];
-  var _useState19 = useState(window.__sqb_selection_owner__ || null),
+    errorInfo = _useState18[0],
+    setErrorInfo = _useState18[1];
+  var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    globalSelectionOwner = _useState20[0],
-    setGlobalSelectionOwner = _useState20[1];
-  var _useState21 = useState([]),
+    isCheck = _useState20[0],
+    setIsCheck = _useState20[1];
+  var myInstanceIdRef = useRef(Math.random().toString(36).slice(2));
+  var _useState21 = useState(null),
     _useState22 = _slicedToArray(_useState21, 2),
-    selectedIndices = _useState22[0],
-    setSelectedIndices = _useState22[1];
-  var _useState23 = useState(null),
+    hoveredCaseGroupKey = _useState22[0],
+    setHoveredCaseGroupKey = _useState22[1];
+  var _useState23 = useState(!!window.__sqb_selection_active__),
     _useState24 = _slicedToArray(_useState23, 2),
-    hoveredCopyIndex = _useState24[0],
-    setHoveredCopyIndex = _useState24[1];
+    globalSelectionActive = _useState24[0],
+    setGlobalSelectionActive = _useState24[1];
+  var _useState25 = useState(window.__sqb_selection_owner__ || null),
+    _useState26 = _slicedToArray(_useState25, 2),
+    globalSelectionOwner = _useState26[0],
+    setGlobalSelectionOwner = _useState26[1];
+  var _useState27 = useState([]),
+    _useState28 = _slicedToArray(_useState27, 2),
+    selectedIndices = _useState28[0],
+    setSelectedIndices = _useState28[1];
+  var _useState29 = useState(null),
+    _useState30 = _slicedToArray(_useState29, 2),
+    hoveredCopyIndex = _useState30[0],
+    setHoveredCopyIndex = _useState30[1];
   var getCaseGroupEnd = function getCaseGroupEnd(list, startIndex) {
     var depth = 0;
     for (var index = startIndex; index < list.length; index++) {
@@ -635,6 +1069,9 @@ var FormulaList = forwardRef(function (props, ref) {
     }
     return true;
   };
+  var canShowItemInsertArrows = function canShowItemInsertArrows(item, groupType) {
+    return canShowInsertArrows(item, groupType);
+  };
   useEffect(function () {
     var _errorInfo = validateExpressionIntegrity(caseList);
     setErrorInfo(_errorInfo);
@@ -1183,15 +1620,16 @@ var FormulaList = forwardRef(function (props, ref) {
       };
     }
     if (type === AtomsTypeEnum.FIELD) {
+      var displayName = getFieldDisplayName(v);
       return {
         className: cx({
-          notSelected: !(v !== null && v !== void 0 && v.fieldName)
+          notSelected: !displayName
         }),
         onClick: function onClick(e) {
           return handleField(e, index, v);
         },
         node: _jsxs(_Fragment, {
-          children: [!(v !== null && v !== void 0 && v.fieldName) && __('customColumn.selectField'), v.fieldName, renderDeleteIcon(v, index, groupType)]
+          children: [!displayName && __('customColumn.selectField'), displayName, renderDeleteIcon(v, index, groupType)]
         })
       };
     }
@@ -1359,32 +1797,41 @@ var FormulaList = forwardRef(function (props, ref) {
     if (groupType === 'logic') {
       return {
         className: cx('gray-name', 'notSelected'),
-        style: {
-          minWidth: 44,
-          justifyContent: 'center'
-        },
+        style: _objectSpread(_objectSpread({}, ADD_TRIGGER_STYLE), {}, {
+          minWidth: 44
+        }),
         node: selectOperator({
           triggerElement: function triggerElement() {
-            return renderTokenContent(_jsx(AddIcon, {}));
+            return renderTokenContent(_jsx(Tooltip, {
+              title: "\u6DFB\u52A0",
+              children: _jsx(AddIcon, {})
+            }));
           },
           ind: index,
           position: ''
         })
       };
     }
+    var customInputClassName = cx({
+      notSelected: true
+    });
     return {
-      className: cx({
-        notSelected: true
-      }),
-      node: selectOperator({
-        triggerElement: function triggerElement() {
-          return renderTokenContent(_jsxs(_Fragment, {
-            children: [__('customColumn.selectCustomInput'), renderDeleteIcon(v, index, groupType)]
-          }));
-        },
-        ind: index,
-        position: ''
-      })
+      raw: true,
+      node: _jsx(ItemName, _objectSpread(_objectSpread({}, getItemNameProps(v)), {}, {
+        children: selectOperator({
+          triggerElement: function triggerElement() {
+            return _jsx("div", {
+              className: cx('Sqb-TableName', customInputClassName),
+              style: getTokenStyleByClassName(customInputClassName),
+              children: renderTokenContent(_jsxs(_Fragment, {
+                children: [__('customColumn.selectCustomInput'), renderDeleteIcon(v, index, groupType)]
+              }))
+            });
+          },
+          ind: index,
+          position: ''
+        })
+      }))
     };
   };
   var copyDom = function copyDom() {
@@ -1422,6 +1869,8 @@ var FormulaList = forwardRef(function (props, ref) {
     var showCheckbox = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
     var itemContent = itemDom(v, i, groupType);
     var isCompositeAtom = v.type === AtomsTypeEnum.CASE_WHEN || v.type === AtomsTypeEnum.AND_OR;
+    var showAfterArrow = canShowItemInsertArrows(v, groupType);
+    var showBeforeArrow = canShowItemInsertArrows(v, groupType);
     return _jsx(React.Fragment, {
       children: _jsxs("div", {
         className: cx('Sqb-Filter-item', _defineProperty({
@@ -1429,6 +1878,8 @@ var FormulaList = forwardRef(function (props, ref) {
           'item-fixed': v.fixed || false,
           'item-selected': isCheck,
           'item-composite': isCompositeAtom,
+          'has-left-arrow': showBeforeArrow,
+          'has-right-arrow': showAfterArrow,
           'group-child': groupType !== 'single',
           'group-flow-child': groupType === 'caseWhen',
           'group-logic-child': groupType === 'logic'
@@ -1441,7 +1892,7 @@ var FormulaList = forwardRef(function (props, ref) {
           if (isCheck) return;
           setInd(-1);
         },
-        children: [copyDom(i), canShowInsertArrows(v, groupType) && selectOperator({
+        children: [copyDom(i), showBeforeArrow && selectOperator({
           triggerElement: function triggerElement() {
             return _jsx("div", {
               className: 'left-arrow',
@@ -1470,19 +1921,19 @@ var FormulaList = forwardRef(function (props, ref) {
           style: {
             pointerEvents: isCheck || store.isMetabaseCopy ? 'none' : 'auto'
           },
-          className: cx({
-            openCheck: isCheck
+          className: cx('Sqb-Filter-item-node', {
+            openCheck: isCheck && !isCompositeAtom
           }),
-          children: _jsx(ItemName, _objectSpread(_objectSpread({}, getItemNameProps(v)), {}, {
-            children: itemContent.raw ? itemContent.node : _jsx("div", _objectSpread(_objectSpread({
+          children: itemContent.raw ? itemContent.node : _jsx(ItemName, _objectSpread(_objectSpread({}, getItemNameProps(v)), {}, {
+            children: _jsx("div", _objectSpread(_objectSpread({
               className: cx('Sqb-TableName', itemContent.className),
               onClick: itemContent.onClick,
-              style: itemContent.style
+              style: getTokenStyleByClassName(itemContent.className, itemContent.style)
             }, itemContent.attrs || {}), {}, {
               children: itemContent.node
             }))
           }))
-        }), canShowInsertArrows(v, groupType) && selectOperator({
+        }), showAfterArrow && selectOperator({
           triggerElement: function triggerElement(value) {
             return _jsx("div", {
               className: 'right-arrow',
@@ -1510,25 +1961,34 @@ var FormulaList = forwardRef(function (props, ref) {
   };
   var renderDeleteIcon = function renderDeleteIcon(item, index, groupType) {
     if (!canDeleteItem(item, groupType)) return null;
-    return _jsx("span", {
-      className: 'item-del',
-      style: {
-        fontSize: 0
-      },
-      onClick: function onClick(e) {
-        return handleDel(e, index);
-      },
-      children: _jsx(CloseIcon, {})
+    return _jsx(Tooltip, {
+      title: "\u5220\u9664",
+      children: _jsx("span", {
+        className: 'item-del',
+        style: {
+          fontSize: 0
+        },
+        onClick: function onClick(e) {
+          return handleDel(e, index);
+        },
+        children: _jsx(CloseIcon, {
+          width: TOKEN_DELETE_ICON_SIZE,
+          height: TOKEN_DELETE_ICON_SIZE
+        })
+      })
     });
   };
   var renderCaseRecoverButton = function renderCaseRecoverButton(onClick, className, label) {
-    return _jsxs("button", {
-      type: 'button',
-      className: cx('Sqb-CaseRecover', className),
-      onClick: onClick,
-      children: [_jsx(FfPlus, {}), _jsx("span", {
-        children: label
-      })]
+    return _jsx(Tooltip, {
+      title: label,
+      children: _jsxs("button", {
+        type: 'button',
+        className: cx('Sqb-CaseRecover', className),
+        onClick: onClick,
+        children: [_jsx(FfPlus, {}), _jsx("span", {
+          children: label
+        })]
+      })
     });
   };
   var renderGroupInsertArrow = function renderGroupInsertArrow(index, position) {
@@ -1552,57 +2012,81 @@ var FormulaList = forwardRef(function (props, ref) {
       trigger: 'hover'
     });
   };
+  var showFormulaListZoom = !embedded && enableZoom;
+  var showCopyTools = !embedded && isCopy && caseList.length > 0;
+  var renderFormulaListZoomButton = function renderFormulaListZoomButton() {
+    return _jsx(Tooltip, {
+      title: "\u7F16\u8F91",
+      children: _jsx("button", {
+        type: 'button',
+        className: 'Sqb-FormulaList-zoom formula-node-tool',
+        style: FORMULA_LIST_ZOOM_BUTTON_STYLE,
+        onClick: openFormulaListModal,
+        children: _jsx(FullscreenOExpand, {})
+      })
+    });
+  };
   return _jsx(_Fragment, {
     children: _jsxs("div", {
       className: cx('Sqb-NotebookCell', {
         'Sqb-NotebookCell--embedded': embedded
       }),
-      children: [!embedded && isCopy && caseList.length > 0 && _jsxs(Space, {
-        size: 'small',
-        direction: 'vertical',
-        className: cx('item-isCheck', {
-          isCheck: isCheck
-        }),
-        children: [_jsx(Button, {
-          className: cx('primary-color', {}),
-          size: 'small',
-          onClick: function onClick() {
-            return _setIsCheck(!isCheck);
-          },
-          primary: true,
-          children: isCheck ? __('customColumn.closeCopy') : __('customColumn.openCopy')
-        }), _jsx(Button, {
-          className: cx('', 'primary-color', {}),
-          size: 'small',
-          onClick: function onClick() {
-            return copyAll();
-          },
-          primary: true,
-          children: __('customColumn.copyAll')
-        }), selectedIndices.length > 0 && _jsx(Button, {
-          primary: true,
-          danger: true,
-          size: 'small',
-          onClick: function onClick() {
-            return delSelect();
-          },
-          children: __('customColumn.delSelect')
-        }), !isCheck && checkedItemsCount > 0 && _jsx(Button, {
-          primary: true,
-          warning: true,
+      children: [showCopyTools ? _jsxs("div", {
+        className: 'Sqb-FormulaListTopTools',
+        children: [_jsxs(Space, {
           size: 'small',
-          onClick: function onClick() {
-            return initPaste();
-          },
-          children: "\u6E05\u9664\u590D\u5236"
-        })]
+          direction: 'horizontal',
+          className: cx('item-isCheck', {
+            isCheck: isCheck
+          }),
+          children: [_jsx(Button, {
+            className: cx('primary-color', {}),
+            size: 'small',
+            onClick: function onClick() {
+              return _setIsCheck(!isCheck);
+            },
+            primary: true,
+            children: isCheck ? __('customColumn.closeCopy') : __('customColumn.openCopy')
+          }), _jsx(Button, {
+            className: cx('', 'primary-color', {}),
+            size: 'small',
+            onClick: function onClick() {
+              return copyAll();
+            },
+            primary: true,
+            children: __('customColumn.copyAll')
+          }), selectedIndices.length > 0 && _jsx(Button, {
+            primary: true,
+            danger: true,
+            size: 'small',
+            onClick: function onClick() {
+              return delSelect();
+            },
+            children: __('customColumn.delSelect')
+          }), !isCheck && checkedItemsCount > 0 && _jsx(Button, {
+            primary: true,
+            warning: true,
+            size: 'small',
+            onClick: function onClick() {
+              return initPaste();
+            },
+            children: "\u6E05\u9664\u590D\u5236"
+          })]
+        }), showFormulaListZoom && renderFormulaListZoomButton()]
+      }) : showFormulaListZoom && _jsx("div", {
+        className: 'Sqb-FormulaListFloatingTools',
+        children: renderFormulaListZoomButton()
       }), caseList.map(function (item, itemIndex) {
         return renderItemShell(item, itemIndex, 'single');
       }), Array.from(caseList).length < 1 && selectOperator({
         triggerElement: function triggerElement() {
-          return _jsx("div", {
-            className: cx("Sqb-TableName gray-name"),
-            children: _jsx(AddIcon, {})
+          return _jsx(Tooltip, {
+            title: "\u6DFB\u52A0",
+            children: _jsx("div", {
+              className: cx("Sqb-TableName gray-name"),
+              style: ADD_TRIGGER_STYLE,
+              children: _jsx(AddIcon, {})
+            })
           });
         },
         ind: -1,