@gingkoo/pandora-metabase 1.0.139 → 1.0.141-alpha.4

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

@@ -1,15 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
@@ -41,9 +43,10 @@ var _helperDom = require("../../../utils/helper-dom");
 var _CaseWhenGroup = _interopRequireDefault(require("./CaseWhenGroup"));
 var _LogicGroup = _interopRequireDefault(require("./LogicGroup"));
 var _helper = require("../../../store/helper");
-var _excluded = ["notExistsToolbar", "toolbar"],
-  _excluded2 = ["subToolbar", "notExistsColumns", "showFields", "isExit", "toolbar"];
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var _excluded = ["operator", "leftAtoms", "rightAtoms", "atoms"],
+  _excluded2 = ["notExistsToolbar", "toolbar"],
+  _excluded3 = ["subToolbar", "notExistsColumns", "showFields", "isExit", "toolbar"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
 var CASE_FIXED_OPERATORS = ['case', 'when', 'then', 'else', 'end'];
 var LOGIC_FIXED_OPERATORS = ['(', ')'];
 var LOGIC_REQUIRED_OPERATORS = ['(', ')'];
@@ -113,6 +116,12 @@ var TOKEN_PALETTE = {
   gray: 'rgb(147, 161, 171)',
   green: 'rgb(136, 191, 77)'
 };
+var createUnknownAtom = function createUnknownAtom() {
+  return {
+    val: '',
+    type: _types.AtomsTypeEnum.UNKNOWN
+  };
+};
 var getTokenStyleByClassName = function getTokenStyleByClassName(className, extraStyle) {
   var names = " ".concat(className || '', " ");
   var color = TOKEN_PALETTE.blue;
@@ -282,22 +291,29 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     });
     return map;
   }, [otherTypes]);
-  var caseList = value || [];
+  var normalizedValue = (0, _react.useMemo)(function () {
+    return (0, _utils2.normalizeAndOrStructure)(value || []);
+  }, [value]);
+  var caseList = normalizedValue;
+  var initialValueRef = (0, _react.useRef)((0, _cloneDeep["default"])(caseList));
   var caseListRef = (0, _react.useRef)(caseList);
+  caseListRef.current = caseList;
+  var hasFormulaSqlAction = Boolean(store.showFormulaSql && store.hasFormulaSqlCode);
+  var hasFormulaDiffAction = Boolean(store.showFormulaDiff && store.hasFormulaDiffCode);
   var operatorList = (0, _react.useMemo)(function () {
     if (store.operatorList.length > 0) {
       return store.operatorList;
     }
     return _utils3.operatorList;
   }, [store.operatorList]);
-  var _useState3 = (0, _react.useState)(''),
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    oldCode = _useState4[0],
-    setOldCode = _useState4[1];
-  var _useState5 = (0, _react.useState)('code'),
+    sqlLoading = _useState4[0],
+    setSqlLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    previewMode = _useState6[0],
-    setPreviewMode = _useState6[1];
+    diffLoading = _useState6[0],
+    setDiffLoading = _useState6[1];
   var _useState7 = (0, _react.useState)(function () {
       if (!enableCopy) {
         return false;
@@ -341,8 +357,54 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     }
     return field.fieldName || field.fieldAlias || '';
   }
+  var normalizeAndOrItems = function normalizeAndOrItems() {
+    var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var legacyItem = item;
+    if (Array.isArray(legacyItem.items) && legacyItem.items.length > 0) {
+      return legacyItem.items.map(function (currentItem, index) {
+        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, index > 0 ? {
+          operator: currentItem.operator || legacyItem.operator || 'and'
+        } : {}), {}, {
+          atoms: Array.isArray(currentItem.atoms) && currentItem.atoms.length > 0 ? currentItem.atoms : [createUnknownAtom()]
+        });
+      });
+    }
+    if (Array.isArray(legacyItem.leftAtoms) || Array.isArray(legacyItem.rightAtoms)) {
+      return [{
+        atoms: Array.isArray(legacyItem.leftAtoms) && legacyItem.leftAtoms.length > 0 ? legacyItem.leftAtoms : [createUnknownAtom()]
+      }, {
+        operator: legacyItem.operator || 'and',
+        atoms: Array.isArray(legacyItem.rightAtoms) && legacyItem.rightAtoms.length > 0 ? legacyItem.rightAtoms : [createUnknownAtom()]
+      }];
+    }
+    return [{
+      atoms: Array.isArray(legacyItem.atoms) && legacyItem.atoms.length > 0 ? legacyItem.atoms : [createUnknownAtom()]
+    }];
+  };
+  var buildAndOrItem = function buildAndOrItem(item, items) {
+    var normalizedItems = normalizeAndOrItems({
+      items: items
+    });
+    var operator = item.operator,
+      leftAtoms = item.leftAtoms,
+      rightAtoms = item.rightAtoms,
+      atoms = item.atoms,
+      nextItem = (0, _objectWithoutProperties2["default"])(item, _excluded);
+    var itemForQuotes = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItem), {}, {
+      items: normalizedItems
+    });
+    return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItem), {}, {
+      items: normalizedItems,
+      quotes: getItemQuotes(itemForQuotes)
+    });
+  };
   function getItemDisplayText(v) {
+    var visited = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new WeakSet();
     if (!v) return '';
+    if ((0, _typeof2["default"])(v) === 'object') {
+      if (visited.has(v)) return v.quotes || '';
+      visited.add(v);
+    }
     if (v.quotes) return v.quotes;
     if (v.type === _types.AtomsTypeEnum.FIELD) return getFieldDisplayName(v);
     if (v.fieldName) return v.fieldName;
@@ -351,25 +413,30 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     }
     if (v.type === _types.AtomsTypeEnum.CASE_WHEN) {
       var caseAtomsText = (v.caseAtoms || []).map(function (item) {
-        return getItemDisplayText(item);
+        return getItemDisplayText(item, visited);
       }).join(' ');
       var whenClausesText = (v.whenClauses || []).map(function (branch) {
-        var whenText = (branch.whenAtoms || []).map(getItemDisplayText).join(' ');
-        var thenText = (branch.thenAtoms || []).map(getItemDisplayText).join(' ');
+        var whenText = (branch.whenAtoms || []).map(function (item) {
+          return getItemDisplayText(item, visited);
+        }).join(' ');
+        var thenText = (branch.thenAtoms || []).map(function (item) {
+          return getItemDisplayText(item, visited);
+        }).join(' ');
         return "when ".concat(whenText, " then ").concat(thenText).trim();
       }).join(' ');
-      var elseAtomsText = (v.elseAtoms || []).length ? " else ".concat((v.elseAtoms || []).map(getItemDisplayText).join(' ')) : '';
+      var elseAtomsText = (v.elseAtoms || []).length ? " else ".concat((v.elseAtoms || []).map(function (item) {
+        return getItemDisplayText(item, visited);
+      }).join(' ')) : '';
       return "case ".concat(caseAtomsText, " ").concat(whenClausesText).concat(elseAtomsText, " end").replace(/\s+/g, ' ').trim();
     }
     if (v.type === _types.AtomsTypeEnum.AND_OR) {
-      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();
+      var itemsText = normalizeAndOrItems(v).map(function (item, index) {
+        var atomsText = (item.atoms || []).map(function (atom) {
+          return getItemDisplayText(atom, visited);
+        }).join(' ');
+        return index === 0 ? atomsText : "".concat(item.operator || 'and', " ").concat(atomsText);
+      }).join(' ');
+      return "( ".concat(itemsText, " )").replace(/\s+/g, ' ').trim();
     }
     if (v.type === _types.AtomsTypeEnum.SELECT) {
       return getSelectDisplayText(v);
@@ -384,55 +451,61 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       quotes: ''
     }));
   };
-  var _withSyncedQuotes = function withSyncedQuotes(item) {
+  var _withSyncedQuotesInner = function withSyncedQuotesInner(item, visited) {
+    if (!item || (0, _typeof2["default"])(item) !== 'object') return item;
+    if (visited.has(item)) return visited.get(item);
     if (item.type === _types.AtomsTypeEnum.CASE_WHEN) {
       var _item$elseAtoms;
       var nextItem = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, item), {}, {
-        caseAtoms: (item.caseAtoms || []).map(function (currentItem) {
-          return _withSyncedQuotes(currentItem);
-        }),
-        whenClauses: (item.whenClauses || []).map(function (clause) {
-          return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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);
-        })
+        caseAtoms: [],
+        whenClauses: [],
+        elseAtoms: []
       });
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItem), {}, {
-        quotes: getItemQuotes(nextItem)
+      visited.set(item, nextItem);
+      nextItem.caseAtoms = (item.caseAtoms || []).map(function (currentItem) {
+        return _withSyncedQuotesInner(currentItem, visited);
       });
-    }
-    if (item.type === _types.AtomsTypeEnum.AND_OR) {
-      var hasBinarySides = Array.isArray(item.leftAtoms) || Array.isArray(item.rightAtoms);
-      var _nextItem = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, 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);
-        })
+      nextItem.whenClauses = (item.whenClauses || []).map(function (clause) {
+        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, clause), {}, {
+          whenAtoms: (clause.whenAtoms || []).map(function (currentItem) {
+            return _withSyncedQuotesInner(currentItem, visited);
+          }),
+          thenAtoms: (clause.thenAtoms || []).map(function (currentItem) {
+            return _withSyncedQuotesInner(currentItem, visited);
+          })
+        });
       });
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _nextItem), {}, {
-        quotes: getItemQuotes(_nextItem)
+      nextItem.elseAtoms = (_item$elseAtoms = item.elseAtoms) === null || _item$elseAtoms === void 0 ? void 0 : _item$elseAtoms.map(function (currentItem) {
+        return _withSyncedQuotesInner(currentItem, visited);
       });
+      nextItem.quotes = getItemQuotes(nextItem);
+      return nextItem;
+    }
+    if (item.type === _types.AtomsTypeEnum.AND_OR) {
+      var _nextItem = {
+        type: item.type,
+        quotes: item.quotes || '',
+        items: []
+      };
+      visited.set(item, _nextItem);
+      var syncedItem = buildAndOrItem(item, normalizeAndOrItems(item).map(function (currentItem) {
+        return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, currentItem), {}, {
+          atoms: (currentItem.atoms || []).map(function (atom) {
+            return _withSyncedQuotesInner(atom, visited);
+          })
+        });
+      }));
+      (0, _extends2["default"])(_nextItem, syncedItem);
+      return _nextItem;
     }
     return item;
   };
+  var withSyncedQuotes = function withSyncedQuotes(item) {
+    return _withSyncedQuotesInner(item, new WeakMap());
+  };
   var setCaseList = function setCaseList(data) {
     var nextData = data.map(function (item) {
-      return _withSyncedQuotes(item);
+      return withSyncedQuotes(item);
     });
     var quotes = nextData.map(function (item) {
       return getItemDisplayText(item);
@@ -446,21 +519,160 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     nextList[index] = nextItem;
     setCaseList(nextList);
   };
-  var getPreviewStr = function getPreviewStr() {
+  var getFormulaSqlText = function getFormulaSqlText(result) {
+    var _ref3, _result$sql;
+    if (typeof result === 'string') return result;
+    if (!result) return '';
+    return String((_ref3 = (_result$sql = result.sql) !== null && _result$sql !== void 0 ? _result$sql : result.code) !== null && _ref3 !== void 0 ? _ref3 : '');
+  };
+  var getFormulaDiffData = function getFormulaDiffData(result) {
+    var _result$oldCode, _ref4, _result$newCode;
+    if (typeof result === 'string') {
+      return {
+        oldCode: '',
+        newCode: result
+      };
+    }
+    if (!result) {
+      return {
+        oldCode: '',
+        newCode: ''
+      };
+    }
+    return {
+      oldCode: String((_result$oldCode = result.oldCode) !== null && _result$oldCode !== void 0 ? _result$oldCode : ''),
+      newCode: String((_ref4 = (_result$newCode = result.newCode) !== null && _result$newCode !== void 0 ? _result$newCode : result.code) !== null && _ref4 !== void 0 ? _ref4 : '')
+    };
+  };
+  var normalizeFormulaValueForOutput = function normalizeFormulaValueForOutput() {
     var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    return data.map(function (v) {
-      if (v.type === _types.AtomsTypeEnum.OPERATOR && (v.val === 'and' || v.val === 'or')) {
-        return "\r".concat(v.val, "\r");
-      }
-      if (v.type === _types.AtomsTypeEnum.OPERATOR && (v.val === '(' || v.val === ')')) {
-        return "".concat(v.val);
-      }
-      return getItemDisplayText(v);
-    }).join(' ');
+    return data.map(function (item) {
+      return withSyncedQuotes(item);
+    });
   };
-  (0, _react.useEffect)(function () {
-    setOldCode(getPreviewStr(caseList));
-  }, []);
+  var getCurrentFormulaValue = function getCurrentFormulaValue() {
+    return (0, _cloneDeep["default"])(normalizeFormulaValueForOutput(caseListRef.current || caseList || []));
+  };
+  var getInitialFormulaValue = function getInitialFormulaValue() {
+    return (0, _cloneDeep["default"])(normalizeFormulaValueForOutput(initialValueRef.current || []));
+  };
+  var showFormulaSql = function () {
+    var _ref5 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
+      var result, sql, _t;
+      return _regenerator["default"].wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!hasFormulaSqlAction || sqlLoading)) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            setSqlLoading(true);
+            _context.prev = 2;
+            _context.next = 3;
+            return store.getFormulaSqlCode(getCurrentFormulaValue());
+          case 3:
+            result = _context.sent;
+            sql = getFormulaSqlText(result);
+            if (sql) {
+              _context.next = 4;
+              break;
+            }
+            _pandora.Toast.warning('暂无可展示的SQL');
+            return _context.abrupt("return");
+          case 4:
+            openChildModal({
+              title: '查看SQL',
+              transparentMask: true,
+              content: (0, _jsxRuntime.jsx)("div", {
+                className: 'Sqb-FormulaSqlPreview  scroller',
+                children: (0, _jsxRuntime.jsx)(_pandora.Code, {
+                  mode: 'code',
+                  language: 'sql',
+                  children: sql
+                })
+              }),
+              onClose: function onClose() {}
+            });
+            _context.next = 6;
+            break;
+          case 5:
+            _context.prev = 5;
+            _t = _context["catch"](2);
+            _pandora.Toast.error('获取SQL失败');
+          case 6:
+            _context.prev = 6;
+            setSqlLoading(false);
+            return _context.finish(6);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 5, 6, 7]]);
+    }));
+    return function showFormulaSql() {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var showFormulaDiff = function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee2() {
+      var result, _getFormulaDiffData, oldCode, newCode, _t2;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(!hasFormulaDiffAction || diffLoading)) {
+              _context2.next = 1;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 1:
+            setDiffLoading(true);
+            _context2.prev = 2;
+            _context2.next = 3;
+            return store.getFormulaDiffCode({
+              oldValue: getInitialFormulaValue(),
+              newValue: getCurrentFormulaValue()
+            });
+          case 3:
+            result = _context2.sent;
+            _getFormulaDiffData = getFormulaDiffData(result), oldCode = _getFormulaDiffData.oldCode, newCode = _getFormulaDiffData.newCode;
+            if (!(!oldCode && !newCode)) {
+              _context2.next = 4;
+              break;
+            }
+            _pandora.Toast.warning('暂无可展示的对比结果');
+            return _context2.abrupt("return");
+          case 4:
+            openChildModal({
+              title: '对比结果',
+              transparentMask: true,
+              content: (0, _jsxRuntime.jsx)(_diffViewer["default"], {
+                oldCode: oldCode,
+                newCode: newCode
+              }),
+              onClose: function onClose() {}
+            });
+            _context2.next = 6;
+            break;
+          case 5:
+            _context2.prev = 5;
+            _t2 = _context2["catch"](2);
+            _pandora.Toast.error('获取对比结果失败');
+          case 6:
+            _context2.prev = 6;
+            setDiffLoading(false);
+            return _context2.finish(6);
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 5, 6, 7]]);
+    }));
+    return function showFormulaDiff() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
   var renderTokenContent = function renderTokenContent(children) {
     return (0, _jsxRuntime.jsx)("span", {
       className: 'Sqb-TokenContent',
@@ -484,7 +696,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         activeZoomRegionKey = _useState12[0],
         setActiveZoomRegionKey = _useState12[1];
       var updateDraftValue = function updateDraftValue(nextValue) {
-        setDraftValue(_withSyncedQuotes(nextValue));
+        setDraftValue(withSyncedQuotes(nextValue));
       };
       var handleOk = function handleOk() {
         var _modalInstance2, _modalInstance2$close;
@@ -645,7 +857,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         setDraftList = _useState14[1];
       var updateDraftList = function updateDraftList(nextList) {
         setDraftList(nextList.map(function (item) {
-          return _withSyncedQuotes(item);
+          return withSyncedQuotes(item);
         }));
       };
       var handleOk = function handleOk() {
@@ -850,38 +1062,66 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     });
   };
   var renderAndOrEditor = function renderAndOrEditor(value, index) {
-    var createUnknownAtom = function createUnknownAtom() {
-      return {
-        val: '',
-        type: _types.AtomsTypeEnum.UNKNOWN
-      };
+    var items = normalizeAndOrItems(value);
+    var updateItems = function updateItems(nextItems) {
+      updateAtomAt(index, buildAndOrItem(value, nextItems));
     };
-    var leftAtoms = Array.isArray(value.leftAtoms) ? value.leftAtoms : value.atoms || [createUnknownAtom()];
-    var rightAtoms = Array.isArray(value.rightAtoms) ? value.rightAtoms : [createUnknownAtom()];
     return (0, _jsxRuntime.jsx)(_LogicGroup["default"], {
-      operator: value.operator || 'and',
-      onToggleOperator: function onToggleOperator() {
-        updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          atoms: undefined,
-          leftAtoms: leftAtoms,
-          rightAtoms: rightAtoms,
-          operator: value.operator === 'or' ? 'and' : 'or'
-        }));
-      },
-      leftContent: renderNestedFormulaList(leftAtoms, function (nextList) {
-        updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          atoms: undefined,
-          rightAtoms: rightAtoms,
-          leftAtoms: nextList
-        }));
-      }),
-      rightContent: renderNestedFormulaList(rightAtoms, function (nextList) {
-        updateAtomAt(index, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, value), {}, {
-          atoms: undefined,
-          leftAtoms: leftAtoms,
-          rightAtoms: nextList
-        }));
+      items: items.map(function (item, itemIndex) {
+        return {
+          operator: item.operator,
+          content: renderNestedFormulaList(item.atoms, function (nextList) {
+            var nextItems = items.slice();
+            nextItems[itemIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItems[itemIndex]), {}, {
+              atoms: nextList
+            });
+            updateItems(nextItems);
+          })
+        };
       }),
+      onChangeOperator: function onChangeOperator(itemIndex, operator) {
+        var nextItems = items.slice();
+        if (itemIndex <= 0 || !nextItems[itemIndex]) return;
+        nextItems[itemIndex] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItems[itemIndex]), {}, {
+          operator: operator
+        });
+        updateItems(nextItems);
+      },
+      onAddItem: function onAddItem() {
+        var nextItems = items.slice();
+        nextItems.push({
+          operator: 'and',
+          atoms: [createUnknownAtom()]
+        });
+        if (nextItems[0]) {
+          nextItems[0] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItems[0]), {}, {
+            operator: undefined
+          });
+        }
+        updateItems(nextItems);
+      },
+      onDeleteItem: function onDeleteItem(operatorIndex, side) {
+        if (items.length <= 2) return;
+        var nextItems = items.slice();
+        if (side === 'left') {
+          var _nextItems;
+          var previousOperator = (_nextItems = nextItems[operatorIndex - 1]) === null || _nextItems === void 0 ? void 0 : _nextItems.operator;
+          nextItems.splice(operatorIndex - 1, 1);
+          if (nextItems[operatorIndex - 1]) {
+            nextItems[operatorIndex - 1] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItems[operatorIndex - 1]), {}, {
+              operator: previousOperator
+            });
+          }
+        } else {
+          nextItems.splice(operatorIndex, 1);
+        }
+        if (nextItems[0]) {
+          nextItems[0] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, nextItems[0]), {}, {
+            operator: undefined
+          });
+        }
+        updateItems(nextItems);
+      },
       onDelete: function onDelete(e) {
         return handleDel(e, index);
       }
@@ -1335,10 +1575,10 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       title: (0, _locale.__)('metabase.prompt'),
       content: (0, _locale.__)('customColumn.confirmDelete'),
       onOk: function () {
-        var _onOk = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee() {
+        var _onOk = (0, _asyncToGenerator2["default"])(_regenerator["default"].mark(function _callee3() {
           var selectedIndexSet, _caseList;
-          return _regenerator["default"].wrap(function (_context) {
-            while (1) switch (_context.prev = _context.next) {
+          return _regenerator["default"].wrap(function (_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
               case 0:
                 selectedIndexSet = new Set(selectedIndices);
                 _caseList = caseList.filter(function (_, index) {
@@ -1348,9 +1588,9 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
                 initPaste();
               case 1:
               case "end":
-                return _context.stop();
+                return _context3.stop();
             }
-          }, _callee);
+          }, _callee3);
         }));
         function onOk() {
           return _onOk.apply(this, arguments);
@@ -1454,7 +1694,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     var _store$preProps = store.preProps,
       notExistsToolbar = _store$preProps.notExistsToolbar,
       toolbar = _store$preProps.toolbar,
-      other = (0, _objectWithoutProperties2["default"])(_store$preProps, _excluded);
+      other = (0, _objectWithoutProperties2["default"])(_store$preProps, _excluded2);
     var _value = ((_caseList$i = caseList[i]) === null || _caseList$i === void 0 ? void 0 : _caseList$i.notExists) || [];
     var oldList = (0, _cloneDeep["default"])(((_caseList$i2 = caseList[i]) === null || _caseList$i2 === void 0 ? void 0 : _caseList$i2.notExists) || []);
     var childModalZIndex = (0, _helperDom.getTopLayerZIndex)() + 1;
@@ -1502,7 +1742,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       showFields = _store$preProps2.showFields,
       isExit = _store$preProps2.isExit,
       toolbar = _store$preProps2.toolbar,
-      other = (0, _objectWithoutProperties2["default"])(_store$preProps2, _excluded2);
+      other = (0, _objectWithoutProperties2["default"])(_store$preProps2, _excluded3);
     var _value = ((_caseList$i3 = caseList[i]) === null || _caseList$i3 === void 0 ? void 0 : _caseList$i3.subQuery) || [];
     var oldList = (0, _cloneDeep["default"])(((_caseList$i4 = caseList[i]) === null || _caseList$i4 === void 0 ? void 0 : _caseList$i4.subQuery) || []);
     var childModalZIndex = (0, _helperDom.getTopLayerZIndex)() + 1;
@@ -2113,50 +2353,31 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
           size: 'middle',
           className: 'preview-container',
           children: [(0, _jsxRuntime.jsxs)("div", {
+            className: 'Sqb-FormulaPreviewHeader',
             children: [(0, _jsxRuntime.jsx)("p", {
               children: "\u9884\u89C8\uFF1A"
-            }), (0, _jsxRuntime.jsxs)(_pandora.Radio.Group, {
-              direction: 'vertical',
-              defaultValue: previewMode,
-              buttonStyle: 'solid',
-              type: 'button',
+            }), hasFormulaSqlAction && (0, _jsxRuntime.jsx)(_pandora.Button, {
               size: 'small',
-              onChange: setPreviewMode,
-              children: [(0, _jsxRuntime.jsx)(_pandora.Radio, {
-                value: 'code',
-                children: "\u9884\u89C8\u6A21\u5F0F"
-              }), (0, _jsxRuntime.jsx)(_pandora.Radio, {
-                value: 'diff',
-                children: "\u6BD4\u5BF9\u6A21\u5F0F"
-              })]
-            })]
-          }), (0, _jsxRuntime.jsxs)("div", {
-            style: {
-              maxHeight: '700px',
-              overflow: 'auto',
-              wordBreak: 'break-word'
-            },
-            children: [previewMode === 'diff' && (0, _jsxRuntime.jsx)(_diffViewer["default"], {
-              oldCode: oldCode,
-              newCode: getPreviewStr(caseList)
-            }), previewMode === 'code' && (0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames["default"])({
-                isSqlError: errorInfo.isError
-              }),
-              children: caseList.map(function (v, i) {
-                return (0, _jsxRuntime.jsx)("span", {
-                  className: 'mr-1',
-                  children: getItemDisplayText(v)
-                }, i);
-              })
-            }), (0, _jsxRuntime.jsx)("div", {
-              className: 'errorMsg mt-2',
-              children: errorInfo.isError && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: ["\u63D0\u793A\uFF1A", (0, _jsxRuntime.jsx)("span", {
-                  children: errorInfo.error
-                })]
-              })
+              type: 'link',
+              loading: sqlLoading,
+              disabled: sqlLoading,
+              onClick: showFormulaSql,
+              children: "\u9884\u89C8SQL"
+            }), hasFormulaDiffAction && (0, _jsxRuntime.jsx)(_pandora.Button, {
+              size: 'small',
+              type: 'link',
+              loading: diffLoading,
+              disabled: diffLoading,
+              onClick: showFormulaDiff,
+              children: "\u5BF9\u6BD4\u7ED3\u679C"
             })]
+          }), (0, _jsxRuntime.jsx)("div", {
+            className: 'errorMsg mt-2',
+            children: errorInfo.isError && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: ["\u63D0\u793A\uFF1A", (0, _jsxRuntime.jsx)("span", {
+                children: errorInfo.error
+              })]
+            })
           })]
         })
       })]