@gingkoo/pandora-metabase 1.0.152 → 1.0.153

package/lib/cjs/components/dialog/formula-list/CaseWhenGroup.d.ts

@@ -17,6 +17,7 @@ type Props = {
     onZoomCase?: (e: any) => void;
     onDeleteCase?: (e: any) => void;
     showTools?: boolean;
+    readonly?: boolean;
     isNested?: boolean;
     useBranchScrollInner?: boolean;
     caseRegionKey?: string;
@@ -24,5 +25,5 @@ type Props = {
     activeRegionKey?: string | null;
     onActivateRegion?: (key: string) => void;
 };
-declare const CaseWhenGroup: ({ caseAtomsContent, whenClauses, elseContent, onAddBranch, onAddElse, onRemoveElse, onZoomCase, onDeleteCase, showTools, isNested, useBranchScrollInner, caseRegionKey, elseRegionKey, activeRegionKey, onActivateRegion, }: Props) => React.JSX.Element;
+declare const CaseWhenGroup: ({ caseAtomsContent, whenClauses, elseContent, onAddBranch, onAddElse, onRemoveElse, onZoomCase, onDeleteCase, showTools, readonly, isNested, useBranchScrollInner, caseRegionKey, elseRegionKey, activeRegionKey, onActivateRegion, }: Props) => React.JSX.Element;
 export default CaseWhenGroup;

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

@@ -76,6 +76,8 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
     onDeleteCase = _ref.onDeleteCase,
     _ref$showTools = _ref.showTools,
     showTools = _ref$showTools === void 0 ? true : _ref$showTools,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
     _ref$isNested = _ref.isNested,
     isNested = _ref$isNested === void 0 ? false : _ref$isNested,
     _ref$useBranchScrollI = _ref.useBranchScrollInner,
@@ -112,7 +114,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
     className: (0, _classnames["default"])('Sqb-FormulaGroup', 'flow-group', 'formula-node-group', 'Sqb-CaseWhenGroup', {
       'Sqb-CaseWhenGroup--nested': isNested
     }),
-    children: [showTools && (0, _jsxRuntime.jsxs)("div", {
+    children: [showTools && !readonly && (0, _jsxRuntime.jsxs)("div", {
       className: 'Sqb-CaseWhenTools',
       children: [onZoomCase && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
         title: "\u7F16\u8F91 caseWhen",
@@ -184,7 +186,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
               })]
             })]
           }))
-        }), (0, _jsxRuntime.jsxs)("div", {
+        }), !readonly && (0, _jsxRuntime.jsxs)("div", {
           className: 'Sqb-CaseRow-actions when-row-actions',
           children: [(0, _jsxRuntime.jsx)(_pandora.Tooltip, {
             title: "\u65B0\u589E when",
@@ -213,7 +215,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
           })]
         })]
       }, branch.key);
-    }), whenClauses.length < 1 && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+    }), !readonly && whenClauses.length < 1 && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
       title: "\u65B0\u589E when",
       children: (0, _jsxRuntime.jsxs)("button", {
         type: 'button',
@@ -244,7 +246,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
             children: elseContent
           })]
         }))
-      }), (0, _jsxRuntime.jsx)("div", {
+      }), !readonly && (0, _jsxRuntime.jsx)("div", {
         className: 'Sqb-CaseRow-actions when-row-actions',
         children: (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
           title: "\u5220\u9664 else",
@@ -260,7 +262,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
           })
         })
       })]
-    }), !elseContent && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+    }), !readonly && !elseContent && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
       title: "\u65B0\u589E else",
       children: (0, _jsxRuntime.jsxs)("button", {
         type: 'button',

package/lib/cjs/components/dialog/formula-list/LogicGroup.d.ts

@@ -8,6 +8,7 @@ type Props = {
     onAddItem: () => void;
     onDeleteItem: (operatorIndex: number, side: 'left' | 'right') => void;
     onDelete: (e: any) => void;
+    readonly?: boolean;
 };
-declare const LogicGroup: ({ items, onChangeOperator, onAddItem, onDeleteItem, onDelete, }: Props) => React.JSX.Element;
+declare const LogicGroup: ({ items, onChangeOperator, onAddItem, onDeleteItem, onDelete, readonly, }: Props) => React.JSX.Element;
 export default LogicGroup;

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

@@ -26,7 +26,9 @@ var LogicGroup = function LogicGroup(_ref) {
     onChangeOperator = _ref.onChangeOperator,
     onAddItem = _ref.onAddItem,
     onDeleteItem = _ref.onDeleteItem,
-    onDelete = _ref.onDelete;
+    onDelete = _ref.onDelete,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly;
   var canDeleteItem = items.length > 2;
   var handleOperatorMenuChange = function handleOperatorMenuChange(operatorIndex, action) {
     if (action === 'add') {
@@ -83,7 +85,7 @@ var LogicGroup = function LogicGroup(_ref) {
     }), (0, _jsxRuntime.jsx)("span", {
       className: 'Sqb-CaseKeyword',
       children: ")"
-    }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+    }), !readonly && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
       title: "\u5220\u9664 and/or",
       children: (0, _jsxRuntime.jsx)("button", {
         type: 'button',

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

@@ -165,6 +165,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     };
   }, []);
   var store = (0, _useProvider.useStore)();
+  var snapshotMode = Boolean(store.snapshotMode);
   var _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
     data = props.data,
@@ -966,6 +967,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     var caseRegionKey = "case-".concat(index, "-case");
     var elseRegionKey = "case-".concat(index, "-else");
     return (0, _jsxRuntime.jsx)(_CaseWhenGroup["default"], {
+      readonly: snapshotMode,
       isNested: embedded,
       useBranchScrollInner: !embedded,
       caseRegionKey: caseRegionKey,
@@ -1077,6 +1079,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       updateAtomAt(index, buildAndOrItem(value, nextItems));
     };
     return (0, _jsxRuntime.jsx)(_LogicGroup["default"], {
+      readonly: snapshotMode,
       items: items.map(function (item, itemIndex) {
         return {
           operator: item.operator,
@@ -2097,6 +2100,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
   var copyDom = function copyDom() {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
     var positioned = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (snapshotMode) return null;
     if (embedded) return null;
     if (!isCopy || selectedIndices.length === 0 && checkedItemsCount === 0) return null;
     return (0, _jsxRuntime.jsx)("div", {
@@ -2129,8 +2133,8 @@ var FormulaList = (0, _react.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 === _types.AtomsTypeEnum.CASE_WHEN || v.type === _types.AtomsTypeEnum.AND_OR;
-    var showAfterArrow = canShowItemInsertArrows(v, groupType);
-    var showBeforeArrow = canShowItemInsertArrows(v, groupType);
+    var showAfterArrow = !snapshotMode && canShowItemInsertArrows(v, groupType);
+    var showBeforeArrow = !snapshotMode && canShowItemInsertArrows(v, groupType);
     return (0, _jsxRuntime.jsx)(_react["default"].Fragment, {
       children: (0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames["default"])('Sqb-Filter-item', (0, _defineProperty2["default"])({
@@ -2169,7 +2173,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
           ind: i,
           position: 'before',
           trigger: 'hover'
-        }), !embedded && showCheckbox && v.type !== _types.AtomsTypeEnum.UNKNOWN && (0, _jsxRuntime.jsx)(_pandora.Checkbox, {
+        }), !snapshotMode && !embedded && showCheckbox && v.type !== _types.AtomsTypeEnum.UNKNOWN && (0, _jsxRuntime.jsx)(_pandora.Checkbox, {
           className: 'item-check',
           checked: selectedIndices.includes(i),
           disabled: globalSelectionActive && globalSelectionOwner !== myInstanceIdRef.current,
@@ -2179,7 +2183,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
           }
         }), (0, _jsxRuntime.jsx)("div", {
           style: {
-            pointerEvents: isCheck || store.isMetabaseCopy ? 'none' : 'auto'
+            pointerEvents: snapshotMode || isCheck || store.isMetabaseCopy ? 'none' : 'auto'
           },
           className: (0, _classnames["default"])('Sqb-Filter-item-node', {
             openCheck: isCheck && !isCompositeAtom
@@ -2223,6 +2227,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     });
   };
   var renderDeleteIcon = function renderDeleteIcon(item, index, groupType) {
+    if (snapshotMode) return null;
     if (!canDeleteItem(item, groupType)) return null;
     return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
       title: "\u5220\u9664",
@@ -2275,8 +2280,8 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       trigger: 'hover'
     });
   };
-  var showFormulaListZoom = !embedded && enableZoom;
-  var showCopyTools = !embedded && isCopy && caseList.length > 0;
+  var showFormulaListZoom = !snapshotMode && !embedded && enableZoom;
+  var showCopyTools = !snapshotMode && !embedded && isCopy && caseList.length > 0;
   var renderFormulaListZoomButton = function renderFormulaListZoomButton() {
     return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
       title: "\u7F16\u8F91",
@@ -2341,7 +2346,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         children: renderFormulaListZoomButton()
       }), caseList.map(function (item, itemIndex) {
         return renderItemShell(item, itemIndex, 'single');
-      }), Array.from(caseList).length < 1 && selectOperator({
+      }), !snapshotMode && Array.from(caseList).length < 1 && selectOperator({
         triggerElement: function triggerElement() {
           return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
             title: "\u6DFB\u52A0",
@@ -2355,7 +2360,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         ind: -1,
         position: 'add',
         trigger: 'click'
-      }), !embedded && copyDom(-1, false), !embedded && showPreview && (0, _jsxRuntime.jsx)("div", {
+      }), !embedded && !snapshotMode && copyDom(-1, false), !snapshotMode && !embedded && showPreview && (0, _jsxRuntime.jsx)("div", {
         className: (0, _classnames["default"])("mb-2 font-bold uppercase tracking-wider preview-box"),
         style: {
           fontSize: 12,
@@ -2385,7 +2390,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
               onClick: showFormulaDiff,
               children: "\u5BF9\u6BD4\u7ED3\u679C"
             })]
-          }), (0, _jsxRuntime.jsx)("div", {
+          }), !snapshotMode && (0, _jsxRuntime.jsx)("div", {
             className: 'errorMsg mt-2',
             children: errorInfo.isError && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
               children: ["\u63D0\u793A\uFF1A", (0, _jsxRuntime.jsx)("span", {

package/lib/cjs/components/dialog/select-column/index.d.ts

@@ -6,7 +6,8 @@ interface PropsType {
     table?: Partial<MetaData_TableType>;
     metaIndex?: number;
     groupIndex: number;
+    readonly?: boolean;
     onChange: (record: MetaData_ColumnsType[], newMetaList?: any[]) => void;
 }
-declare const SelectColumn: ({ data, table, metaIndex, groupIndex, onChange }: PropsType) => React.JSX.Element;
+declare const SelectColumn: ({ data, table, metaIndex, groupIndex, readonly, onChange, }: PropsType) => React.JSX.Element;
 export default SelectColumn;

package/lib/cjs/components/dialog/select-column/index.js

@@ -28,6 +28,8 @@ var SelectColumn = function SelectColumn(_ref) {
     table = _ref.table,
     metaIndex = _ref.metaIndex,
     groupIndex = _ref.groupIndex,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
     onChange = _ref.onChange;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -94,6 +96,7 @@ var SelectColumn = function SelectColumn(_ref) {
   }, [isAllSelect]);
   function onSelect(columns, newMetaList) {
     var useColumnsDirectly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (readonly) return;
     var originalData = (0, _cloneDeep["default"])(originList);
     var mergedColumns = useColumnsDirectly ? (0, _cloneDeep["default"])(columns) : originalData.map(function (item) {
       var match = columns.find(function (col) {
@@ -106,6 +109,7 @@ var SelectColumn = function SelectColumn(_ref) {
     typeof onChange === 'function' && onChange(mergedColumns, newMetaList);
   }
   var onChangeFieldAlias = function onChangeFieldAlias(val, i) {
+    if (readonly) return;
     var fieldAlias = val || '';
     var currentColumn = columns[i];
     _pandora.Modal.confirm({
@@ -183,11 +187,15 @@ var SelectColumn = function SelectColumn(_ref) {
   return (0, _jsxRuntime.jsx)("div", {
     className: "Sqb-SelectColumn--box",
     children: (0, _jsxRuntime.jsxs)("div", {
+      style: readonly ? {
+        cursor: 'default'
+      } : undefined,
       children: [(0, _jsxRuntime.jsxs)("div", {
         className: 'Sqb-SelectColumn--header pt-2',
         children: [(0, _jsxRuntime.jsx)("div", {
           className: (0, _classnames["default"])("SelectColumn-border mb-2 pb-2 px-2 flex items-center", {}),
           onClick: function onClick() {
+            if (readonly) return;
             var newColumns = columns.map(function (v) {
               return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, v), {}, {
                 select: !isAllSelect
@@ -215,6 +223,7 @@ var SelectColumn = function SelectColumn(_ref) {
           return (0, _jsxRuntime.jsxs)("div", {
             className: 'pb-2 px-2 flex items-center',
             onClick: function onClick() {
+              if (readonly) return;
               var newColumns = (0, _cloneDeep["default"])(columns);
               newColumns[i].select = !v.select;
               onSelect(newColumns);
@@ -224,7 +233,7 @@ var SelectColumn = function SelectColumn(_ref) {
               children: (0, _jsxRuntime.jsx)(_icons.SelectIcon, {})
             }) : (0, _jsxRuntime.jsx)("div", {
               className: 'no-select mr-2'
-            }), v.name, v.name_zh ? " \uFF08".concat(v.name_zh, "\uFF09") : '', v.fieldAlias ? " as ".concat(v.fieldAlias) : '', store.fieldEnableAlias && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            }), v.name, v.name_zh ? " \uFF08".concat(v.name_zh, "\uFF09") : '', v.fieldAlias ? " as ".concat(v.fieldAlias) : '', store.fieldEnableAlias && !readonly && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
               title: (0, _locale.__)('SqlQueryBuilder.alias'),
               children: (0, _jsxRuntime.jsx)(_pandora.Button, {
                 className: ':Sqb-TableName-as',

package/lib/cjs/components/metabase/index.js

@@ -43,6 +43,7 @@ var Metabase = function Metabase(props) {
     rightClickMenu = _props$rightClickMenu === void 0 ? EMPTY_ARRAY : _props$rightClickMenu,
     onRightClickMenuClick = props.onRightClickMenuClick;
   var store = (0, _useProvider.useStore)();
+  var readonlyMode = readonly || store.snapshotMode;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     saveLoading = _useState2[0],
@@ -162,7 +163,18 @@ var Metabase = function Metabase(props) {
     store.setRightClickMenu(rightClickMenu || EMPTY_ARRAY);
     store.setRightClickMenuClick(onRightClickMenuClick);
   }, [rightClickMenu, onRightClickMenuClick]);
+  (0, _react.useEffect)(function () {
+    if (!readonlyMode) return;
+    store.setPopup({
+      visible: false
+    });
+    store.setPopup2({
+      visible: false
+    });
+    store.setRightClickMenuState(null);
+  }, [readonlyMode]);
   var copy = function copy() {
+    if (readonlyMode) return null;
     return (0, _jsxRuntime.jsxs)(_pandora.Space, {
       children: [moduleCopy && (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
         children: (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
@@ -222,10 +234,22 @@ var Metabase = function Metabase(props) {
       })]
     });
   };
+  var stopReadonlyInteraction = function stopReadonlyInteraction(e) {
+    var _target$closest;
+    if (!readonlyMode) return;
+    var target = e.target;
+    if (target !== null && target !== void 0 && (_target$closest = target.closest) !== null && _target$closest !== void 0 && _target$closest.call(target, '[data-sqb-snapshot-allow="true"]')) return;
+    e.preventDefault();
+    e.stopPropagation();
+  };
   return (0, _jsxRuntime.jsx)(VisualBox, {
     ref: store.popupContainer,
     onContextMenu: function onContextMenu(e) {
-      return (0, _rightClickMenu.openSqbRightClickMenu)(store, e);
+      if (readonlyMode) {
+        e.preventDefault();
+        return;
+      }
+      (0, _rightClickMenu.openSqbRightClickMenu)(store, e);
     },
     children: (0, _jsxRuntime.jsxs)("div", {
       className: 'Sqb',
@@ -237,6 +261,8 @@ var Metabase = function Metabase(props) {
         if (v.type === 'union' && v.union) {
           return (0, _jsxRuntime.jsx)("div", {
             className: (0, _classnames["default"])("Sqb-list"),
+            onMouseDownCapture: stopReadonlyInteraction,
+            onClickCapture: stopReadonlyInteraction,
             children: (0, _jsxRuntime.jsx)(_union["default"], {
               union: v.union,
               meta: v,
@@ -246,6 +272,8 @@ var Metabase = function Metabase(props) {
         }
         return (0, _jsxRuntime.jsx)("div", {
           className: (0, _classnames["default"])("Sqb-list"),
+          onMouseDownCapture: stopReadonlyInteraction,
+          onClickCapture: stopReadonlyInteraction,
           children: v === null || v === void 0 || (_v$list2 = v.list) === null || _v$list2 === void 0 ? void 0 : _v$list2.map(function (meta) {
             var metaType = meta.type,
               metaKey = meta.metaKey,
@@ -258,7 +286,7 @@ var Metabase = function Metabase(props) {
             }, metaKey);
           })
         }, 'group' + index);
-      }), !readonly && typeof onOk === 'function' ? (0, _jsxRuntime.jsx)(_pandora.Button, {
+      }), !readonlyMode && typeof onOk === 'function' ? (0, _jsxRuntime.jsx)(_pandora.Button, {
         type: 'primary',
         className: ":Sqb-btn",
         loading: saveLoading,

package/lib/cjs/components/modules/components/header.js

@@ -70,7 +70,7 @@ var Header = function Header(props) {
       })
     }), (0, _jsxRuntime.jsx)(_pandora.Space, {
       className: (0, _classnames["default"])(':Sqb-item-actions'),
-      children: props.onClose && !store.isMetabaseCopy && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      children: props.onClose && !store.isMetabaseCopy && !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
         placement: 'top',
         title: (0, _locale.__)('data.del'),
         children: (0, _jsxRuntime.jsx)(_icons.CloseIcon2, {

package/lib/cjs/components/modules/components/item-name.js

@@ -8,12 +8,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _pandora = require("@gingkoo/pandora");
 var _pandoraIcons = require("@gingkoo/pandora-icons");
 var _locale = require("../../../locale");
+var _useProvider = require("../../../hooks/use-provider");
 var ItemName = function ItemName(props) {
   var children = props.children,
     isError = props.isError,
     message = props.message;
+  var store = (0, _useProvider.useStore)();
+  var showError = isError && !store.snapshotMode;
   return (0, _jsxRuntime.jsx)(_pandora.Badge, {
-    count: isError ? (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+    count: showError ? (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
       title: message || (0, _locale.__)('metabase.verify'),
       children: (0, _jsxRuntime.jsx)(_pandora.Button, {
         className: 'isError',

package/lib/cjs/components/modules/components/item-wrapper.js

@@ -30,7 +30,7 @@ var ItemWrapper = function ItemWrapper(props) {
     store.setMetabaseCopyModule(data);
     _storage["default"]._metabaseCopyModule = data;
   };
-  if (store.isMetabaseCopy && meta.type !== 'union' && meta.type !== 'data') {
+  if (store.isMetabaseCopy && !store.snapshotMode && meta.type !== 'union' && meta.type !== 'data') {
     return (0, _jsxRuntime.jsx)(_pandora.Checkbox, {
       checked: (0, _utils.metaIsCheck)(store.metabaseCopyModule, meta),
       onChange: function onChange(val) {

package/lib/cjs/components/modules/components/meta-icon.js

@@ -323,8 +323,9 @@ var NextDom = function NextDom(props) {
       _storage["default"]._metabaseCopyModule = [];
     }
   };
+  if (store.snapshotMode) return null;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [store.metabaseCopyModule && store.metabaseCopyModule.length > 0 && isShowAdd && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+    children: [store.metabaseCopyModule && store.metabaseCopyModule.length > 0 && isShowAdd && !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
       title: "\u5728\u6B64\u5904\u7C98\u8D34",
       children: (0, _jsxRuntime.jsxs)(_pandora.Button, {
         className: (0, _classnames["default"])(':Sqb-item-copy'),
@@ -348,7 +349,8 @@ var NextDom = function NextDom(props) {
               large: size === IconSIzeEnum.LARGE
             }),
             onClick: function onClick() {
-              return handleClick(v);
+              if (store.snapshotMode) return;
+              handleClick(v);
             },
             children: (0, _jsxRuntime.jsxs)("div", {
               children: [info.icon, size === IconSIzeEnum.LARGE ? (0, _jsxRuntime.jsx)("div", {

package/lib/cjs/components/modules/custom-column.js

@@ -322,7 +322,7 @@ var CustomColumn = function CustomColumn(props) {
                     onClick: function onClick(e) {
                       return showSubQuery(e, i);
                     },
-                    children: [v.name, (0, _jsxRuntime.jsx)("span", {
+                    children: [v.name, !store.snapshotMode && (0, _jsxRuntime.jsx)("span", {
                       style: {
                         fontSize: 0
                       },
@@ -334,7 +334,7 @@ var CustomColumn = function CustomColumn(props) {
                   })
                 })
               }, i);
-            }), (0, _jsxRuntime.jsx)("div", {
+            }), !store.snapshotMode && (0, _jsxRuntime.jsx)("div", {
               className: "Sqb-TableName gray-name",
               onClick: function onClick(e) {
                 showSubQuery(e, -1);

package/lib/cjs/components/modules/join-data.js

@@ -378,6 +378,7 @@ var JoinData = function JoinData(props) {
         table: meta.table2,
         metaIndex: index,
         groupIndex: groupIndex,
+        readonly: store.snapshotMode,
         onChange: function onChange(data, newMetaList) {
           var _newMetaList = newMetaList || store.metaList[groupIndex].list.slice();
           _newMetaList[index].columns = data;
@@ -1307,6 +1308,33 @@ var JoinData = function JoinData(props) {
     }
     return false;
   };
+  var renderSwitchTypeButton = function renderSwitchTypeButton(position, expressionIndex) {
+    if (store.snapshotMode) {
+      return (0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": 'true',
+        style: {
+          display: 'inline-block',
+          marginRight: 8
+        }
+      });
+    }
+    return (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+      title: (0, _locale.__)('SqlQueryBuilder.switch'),
+      children: (0, _jsxRuntime.jsx)(_pandora.Button, {
+        disabled: meta.readonly,
+        primary: true,
+        ghost: true,
+        className: 'mr-2 operator-icon',
+        icon: (0, _jsxRuntime.jsx)(_pandoraIcons.Repeat, {}),
+        onClick: function onClick(e) {
+          onChangeType(e, {
+            position: position,
+            index: expressionIndex
+          });
+        }
+      })
+    });
+  };
   return (0, _jsxRuntime.jsx)(_Wrapper["default"], {
     className: (0, _classnames["default"])("Sqb-item"),
     children: (0, _jsxRuntime.jsxs)("div", {
@@ -1367,7 +1395,7 @@ var JoinData = function JoinData(props) {
                 },
                 children: [subQuerySelected && (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                   children: function () {
-                    var showButton = store.tableEnableAlias || tableIsError() && isDel;
+                    var showButton = !store.snapshotMode && (store.tableEnableAlias || tableIsError() && isDel);
                     var icon = isDel ? (0, _jsxRuntime.jsx)(_pandoraIcons.ExclamationCircleFill, {}) : store.tableEnableAlias ? 'As' : '';
                     return showButton ? (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                       title: (0, _locale.__)(tableIsError() ? isDel ? 'metabase.verify' : 'SqlQueryBuilder.repeatAlias' : 'SqlQueryBuilder.alias'),
@@ -1408,7 +1436,7 @@ var JoinData = function JoinData(props) {
                 onClick: selectTable,
                 children: [table2Selected && (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                   children: function () {
-                    var showButton = store.tableEnableAlias || tableIsError() && isDel;
+                    var showButton = !store.snapshotMode && (store.tableEnableAlias || tableIsError() && isDel);
                     var icon = isDel ? (0, _jsxRuntime.jsx)(_pandoraIcons.ExclamationCircleFill, {}) : store.tableEnableAlias ? 'As' : '';
                     return showButton ? (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                       title: (0, _locale.__)(tableIsError() ? isDel ? 'metabase.verify' : 'SqlQueryBuilder.repeatAlias' : 'SqlQueryBuilder.alias'),
@@ -1440,7 +1468,7 @@ var JoinData = function JoinData(props) {
                   }()
                 }), table2Selected ? "".concat(meta.table2.datasourceName, ".").concat(meta.table2.name, " ").concat((_meta$table7 = meta.table2) !== null && _meta$table7 !== void 0 && _meta$table7.alias && store.tableEnableAlias ? "as ".concat((_meta$table8 = meta.table2) === null || _meta$table8 === void 0 ? void 0 : _meta$table8.alias) : '') : (0, _locale.__)('SqlQueryBuilder.pickTable')]
               })
-            }), store.showSubquery && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            }), store.showSubquery && (!store.snapshotMode || meta.isSubquery) && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
               title: (0, _locale.__)('SqlQueryBuilder.switchSubQuery'),
               children: (0, _jsxRuntime.jsx)(_pandora.Button, {
                 disabled: meta.readonly,
@@ -1457,40 +1485,10 @@ var JoinData = function JoinData(props) {
                   children: [i == 0 && (0, _jsxRuntime.jsx)("span", {
                     className: 'ml-2 mr-4 text-gray-500',
                     children: "on"
-                  }), renderItem(v.lhs, ExpressionsEnum.LEFT, i), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
-                    title: (0, _locale.__)('SqlQueryBuilder.switch'),
-                    children: (0, _jsxRuntime.jsx)(_pandora.Button, {
-                      disabled: meta.readonly,
-                      primary: true,
-                      ghost: true,
-                      className: 'mr-2 operator-icon',
-                      icon: (0, _jsxRuntime.jsx)(_pandoraIcons.Repeat, {}),
-                      onClick: function onClick(e) {
-                        onChangeType(e, {
-                          position: ExpressionsEnum.LEFT,
-                          index: i
-                        });
-                      }
-                    })
-                  }), (0, _jsxRuntime.jsx)("span", {
+                  }), renderItem(v.lhs, ExpressionsEnum.LEFT, i), renderSwitchTypeButton(ExpressionsEnum.LEFT, i), (0, _jsxRuntime.jsx)("span", {
                     className: 'mr-2 text-gray-500',
                     children: "="
-                  }), renderItem(v.rhs, ExpressionsEnum.RIGHT, i), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
-                    title: (0, _locale.__)('SqlQueryBuilder.switch'),
-                    children: (0, _jsxRuntime.jsx)(_pandora.Button, {
-                      disabled: meta.readonly,
-                      primary: true,
-                      ghost: true,
-                      className: 'mr-2 operator-icon',
-                      icon: (0, _jsxRuntime.jsx)(_pandoraIcons.Repeat, {}),
-                      onClick: function onClick(e) {
-                        onChangeType(e, {
-                          position: ExpressionsEnum.RIGHT,
-                          index: i
-                        });
-                      }
-                    })
-                  }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+                  }), renderItem(v.rhs, ExpressionsEnum.RIGHT, i), renderSwitchTypeButton(ExpressionsEnum.RIGHT, i), !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                     title: (0, _locale.__)('SqlQueryBuilder.add'),
                     children: (0, _jsxRuntime.jsx)(_pandora.Dropdown, {
                       trigger: ['click'],
@@ -1506,7 +1504,7 @@ var JoinData = function JoinData(props) {
                         icon: (0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {})
                       })
                     })
-                  }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+                  }), !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                     title: (0, _locale.__)('SqlQueryBuilder.del'),
                     children: (0, _jsxRuntime.jsx)(_pandora.Button, {
                       disabled: meta.readonly,
@@ -1562,7 +1560,7 @@ var JoinData = function JoinData(props) {
                         children: v.quotes || (0, _locale.__)('joinData.selectExpression')
                       }, i)
                     })
-                  }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+                  }), !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                     title: (0, _locale.__)('SqlQueryBuilder.add'),
                     children: (0, _jsxRuntime.jsx)(_pandora.Dropdown, {
                       trigger: ['click'],
@@ -1578,7 +1576,7 @@ var JoinData = function JoinData(props) {
                         icon: (0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {})
                       })
                     })
-                  }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+                  }), !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                     title: (0, _locale.__)('SqlQueryBuilder.del'),
                     children: (0, _jsxRuntime.jsx)(_pandora.Button, {
                       disabled: meta.readonly,
@@ -1613,7 +1611,7 @@ var JoinData = function JoinData(props) {
                         type: _types.ChangeType.expressions
                       });
                     }
-                  }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+                  }), !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                     title: (0, _locale.__)('SqlQueryBuilder.add'),
                     children: (0, _jsxRuntime.jsx)(_pandora.Dropdown, {
                       trigger: ['click'],
@@ -1629,7 +1627,7 @@ var JoinData = function JoinData(props) {
                         icon: (0, _jsxRuntime.jsx)(_pandoraIcons.FfPlus, {})
                       })
                     })
-                  }), (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+                  }), !store.snapshotMode && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
                     title: (0, _locale.__)('SqlQueryBuilder.del'),
                     children: (0, _jsxRuntime.jsx)(_pandora.Button, {
                       disabled: meta.readonly,
@@ -1643,7 +1641,7 @@ var JoinData = function JoinData(props) {
                   })]
                 }, i);
               }
-            })), ((_meta$table1 = meta.table2) === null || _meta$table1 === void 0 ? void 0 : _meta$table1.name) && ((_meta$table10 = meta.table1) === null || _meta$table10 === void 0 ? void 0 : _meta$table10.name) && (((_meta$expressions2 = meta.expressions) === null || _meta$expressions2 === void 0 ? void 0 : _meta$expressions2.length) || 0) < 1 && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
+            })), !store.snapshotMode && ((_meta$table1 = meta.table2) === null || _meta$table1 === void 0 ? void 0 : _meta$table1.name) && ((_meta$table10 = meta.table1) === null || _meta$table10 === void 0 ? void 0 : _meta$table10.name) && (((_meta$expressions2 = meta.expressions) === null || _meta$expressions2 === void 0 ? void 0 : _meta$expressions2.length) || 0) < 1 && (0, _jsxRuntime.jsx)(_pandora.Tooltip, {
               title: (0, _locale.__)('SqlQueryBuilder.add'),
               children: (0, _jsxRuntime.jsx)(_pandora.Dropdown, {
                 trigger: ['click'],
@@ -1661,6 +1659,7 @@ var JoinData = function JoinData(props) {
               })
             }), columnsSelected && (((_store$showMainColumn = store.showMainColumn[groupIndex]) === null || _store$showMainColumn === void 0 ? void 0 : _store$showMainColumn.showColumn) || ((_store$showMainColumn2 = store.showMainColumn[groupIndex]) === null || _store$showMainColumn2 === void 0 ? void 0 : _store$showMainColumn2.index) < index) && (!store.isExit || store.isSubquery) && store.showFields && (0, _jsxRuntime.jsx)("div", {
               className: "Sqb-TableColumns",
+              "data-sqb-snapshot-allow": 'true',
               onClick: selectColumns,
               children: (0, _locale.__)('SqlQueryBuilder.columns')
             })]

package/lib/cjs/components/modules/permission-table.js

@@ -28,6 +28,7 @@ var PermissionTable = function PermissionTable(props) {
   var _getHelper = (0, _utils.getHelper)(store.metaList[groupIndex].list, meta),
     prevTables = _getHelper.prevTables;
   function selectTable(e) {
+    if (store.snapshotMode) return;
     var _getHelper2 = (0, _utils.getHelper)(store.metaList[groupIndex].list, meta),
       ExistAboveGroupBy = _getHelper2.ExistAboveGroupBy,
       prevList = _getHelper2.prevList,

package/lib/cjs/components/modules/row-limit.js

@@ -21,6 +21,7 @@ var RowLimit = function RowLimit(props) {
   var store = (0, _useProvider.useStore)();
   var index = (0, _utils.findIndex)(store.metaList[groupIndex].list, meta);
   function handleChange(inputValue) {
+    if (store.snapshotMode) return;
     var newMeta = store.metaList[groupIndex].list.slice();
     newMeta[index].limit = inputValue;
     store.setMeta(newMeta, groupIndex);

package/lib/cjs/components/modules/sort.js

@@ -207,7 +207,7 @@ var Sort = function Sort(props) {
                     onClick: function onClick() {
                       return handleSort(i);
                     },
-                    children: [v.sort === _enum.SortEnum.asc ? (0, _jsxRuntime.jsx)(_icons.UpArrowIcon, {}) : (0, _jsxRuntime.jsx)(_icons.DownArrowIcon, {}), getName(v.expression), (0, _jsxRuntime.jsx)("span", {
+                    children: [v.sort === _enum.SortEnum.asc ? (0, _jsxRuntime.jsx)(_icons.UpArrowIcon, {}) : (0, _jsxRuntime.jsx)(_icons.DownArrowIcon, {}), getName(v.expression), !store.snapshotMode && (0, _jsxRuntime.jsx)("span", {
                       style: {
                         fontSize: 0
                       },
@@ -219,7 +219,7 @@ var Sort = function Sort(props) {
                   }, i)
                 })
               }, i);
-            }), (0, _jsxRuntime.jsx)("div", {
+            }), !store.snapshotMode && (0, _jsxRuntime.jsx)("div", {
               className: "Sqb-TableName gray-name",
               onClick: addSortColumn,
               children: (0, _jsxRuntime.jsx)(_icons.AddIcon, {})