@gingkoo/pandora-metabase 1.0.152 → 1.0.154

package/lib/cjs/index.js

@@ -26,6 +26,8 @@ var SqlVisionBuilder = _react["default"].forwardRef(function (props, ref) {
     loading = _props$loading === void 0 ? false : _props$loading,
     _props$showFields = props.showFields,
     showFields = _props$showFields === void 0 ? true : _props$showFields,
+    _props$snapshotMode = props.snapshotMode,
+    snapshotMode = _props$snapshotMode === void 0 ? false : _props$snapshotMode,
     getTables = props.getTables,
     getColumns = props.getColumns,
     onChange = props.onChange,
@@ -131,6 +133,7 @@ var SqlVisionBuilder = _react["default"].forwardRef(function (props, ref) {
     store.setGroupByEnableAlias(groupByEnableAlias);
     store.setIsSelectFields(isSelectFields);
     store.setTableFlat(tableFlat);
+    store.setSnapshotMode(snapshotMode);
     store.setCopyType(copyType || EMPTY_ARRAY);
     store.setMetabaseCopy(metabaseCopy);
     store.setModuleDiff(moduleDiff);
@@ -141,7 +144,7 @@ var SqlVisionBuilder = _react["default"].forwardRef(function (props, ref) {
     store.setModuleCopy(moduleCopy);
     store.setJoinAliasConflictCheck(joinAliasConflictCheck);
     store.setOperatorList(operatorList || EMPTY_ARRAY);
-  }, [showFields, fieldNameTpl, tableNameTpl, toolbar, showSubquery, subShowSubquery, constantList, formulaTemplates, ignoreGroupByType, filterCustomType, isExit, tableEnableAlias, fieldEnableAlias, groupByEnableAlias, isSelectFields, tableFlat, copyType, metabaseCopy, moduleDiff, showFormulaSql, showFormulaDiff, matchBrackets, getFormulaSqlCode, getFormulaDiffCode, isSubquery, moduleCopy, joinAliasConflictCheck, operatorList]);
+  }, [showFields, fieldNameTpl, tableNameTpl, toolbar, showSubquery, subShowSubquery, constantList, formulaTemplates, ignoreGroupByType, filterCustomType, isExit, tableEnableAlias, fieldEnableAlias, groupByEnableAlias, isSelectFields, tableFlat, snapshotMode, copyType, metabaseCopy, moduleDiff, showFormulaSql, showFormulaDiff, matchBrackets, getFormulaSqlCode, getFormulaDiffCode, isSubquery, moduleCopy, joinAliasConflictCheck, operatorList]);
   _react["default"].useImperativeHandle(ref, function () {
     return {
       reset: function reset() {
@@ -161,7 +164,9 @@ var SqlVisionBuilder = _react["default"].forwardRef(function (props, ref) {
     msg: (0, _locale.__)('loading')
   });
   return (0, _jsxRuntime.jsx)(_useProvider.Provider, {
-    value: store,
+    value: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, store), {}, {
+      snapshotMode: snapshotMode
+    }),
     children: (0, _jsxRuntime.jsx)(_metabase["default"], (0, _objectSpread2["default"])({}, props))
   });
 });

package/lib/cjs/types.d.ts

@@ -45,6 +45,7 @@ export interface MetabaseProps {
     btnText?: string;
     showFields?: boolean;
     readonly?: boolean;
+    snapshotMode?: boolean;
     getTables: (datasourceId: string, options: FetchOptions) => Promise<any>;
     getColumns: (table: {
         name: string;

package/lib/es/components/dialog/custom-editor/index.d.ts

@@ -7,6 +7,7 @@ interface PropsType {
     exitData: any;
     onOk: Function;
     onCancel: Function;
+    readonly?: boolean;
 }
 declare const CaseEditor: (props: PropsType) => React.JSX.Element;
 export default CaseEditor;

package/lib/es/components/dialog/custom-editor/index.js

@@ -23,7 +23,9 @@ var CaseEditor = function CaseEditor(props) {
     data = props.data,
     exitData = props.exitData,
     onOk = props.onOk,
-    onCancel = props.onCancel;
+    onCancel = props.onCancel,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly;
   var store = useStore();
   var _useState = useState(value.formulaList || []),
     _useState2 = _slicedToArray(_useState, 2),
@@ -41,6 +43,7 @@ var CaseEditor = function CaseEditor(props) {
     onCancel === null || onCancel === void 0 || onCancel();
   };
   var _onOk = function _onOk() {
+    if (readonly) return;
     if (!isValidSQLAlias(name)) {
       Toast.warning(__('SqlQueryBuilder.nameForRules'));
       return false;
@@ -74,6 +77,7 @@ var CaseEditor = function CaseEditor(props) {
                 placeholder: __('customColumn.somethingAwesomeToDocument'),
                 size: 'large',
                 onChange: function onChange(val) {
+                  if (readonly) return;
                   setName(val);
                 }
               })
@@ -85,7 +89,10 @@ var CaseEditor = function CaseEditor(props) {
             data: data,
             exitData: exitData,
             ref: ref,
-            onChange: setCaseList,
+            onChange: function onChange(nextList) {
+              if (readonly) return;
+              setCaseList(nextList);
+            },
             _type: FormulaTypeEnum.CUSTOM
           })]
         })
@@ -102,7 +109,7 @@ var CaseEditor = function CaseEditor(props) {
             return _onClose();
           },
           children: __('customColumn.cancel')
-        }), _jsx("button", {
+        }), !readonly && _jsx("button", {
           className: cx("btn ml-4", {
             usable: usable
           }),

package/lib/es/components/dialog/formula/index.d.ts

@@ -7,6 +7,7 @@ interface PropsType {
     onOk: Function;
     onCancel: Function;
     className?: string;
+    readonly?: boolean;
 }
 declare const CaseEditor: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<unknown>>;
 export default CaseEditor;

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

@@ -30,7 +30,9 @@ var CaseEditor = React.forwardRef(function (props, ref) {
   var value = props.value,
     data = props.data,
     onOk = props.onOk,
-    onCancel = props.onCancel;
+    onCancel = props.onCancel,
+    _props$readonly = props.readonly,
+    readonly = _props$readonly === void 0 ? false : _props$readonly;
   var _useState = useState(function () {
       return _objectSpread(_objectSpread({}, value), {}, {
         id: value.id || value.name
@@ -85,6 +87,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
     onCancel === null || onCancel === void 0 || onCancel();
   };
   var _onOk = function _onOk() {
+    if (readonly) return;
     typeof onOk === 'function' && (onOk === null || onOk === void 0 ? void 0 : onOk(_objectSpread(_objectSpread({}, fun), {}, {
       arity: effectiveArity,
       id: currentFormulaKey,
@@ -95,6 +98,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
   var handleFunName = function handleFunName(id) {
     var _formulaList$id, _formulaList$id2, _formulaList$id3;
     var isId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (readonly) return;
     setFun(_objectSpread(_objectSpread({}, fun), {}, {
       args: getTemArgs(formulaList === null || formulaList === void 0 ? void 0 : formulaList[id].args, formulaList === null || formulaList === void 0 || (_formulaList$id = formulaList[id]) === null || _formulaList$id === void 0 ? void 0 : _formulaList$id.arity),
       arity: formulaList === null || formulaList === void 0 || (_formulaList$id2 = formulaList[id]) === null || _formulaList$id2 === void 0 ? void 0 : _formulaList$id2.arity,
@@ -103,6 +107,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
     }));
   };
   var addParams = function addParams(index) {
+    if (readonly) return;
     var _args = cloneDeep(fun.args);
     var tem = getTemArgs(currentFormulaTemplate === null || currentFormulaTemplate === void 0 ? void 0 : currentFormulaTemplate.args)[index + 1] || {
       type: AtomsTypeEnum.COLLECTION,
@@ -115,6 +120,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
     }));
   };
   var delParams = function delParams(index) {
+    if (readonly) return;
     var _args = cloneDeep(fun.args);
     _args.splice(index, 1);
     setFun(_objectSpread(_objectSpread({}, fun), {}, {
@@ -165,6 +171,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
                     });
                   },
                   onChange: function onChange(val) {
+                    if (readonly) return;
                     handleFunName(val);
                   },
                   children: (_store$formulaTemplat = store.formulaTemplates) === null || _store$formulaTemplat === void 0 ? void 0 : _store$formulaTemplat.map(function (options, index) {
@@ -214,6 +221,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
                     ref: _ref,
                     _type: FormulaTypeEnum.FORMULA,
                     onChange: function onChange(data, _quotes) {
+                      if (readonly) return;
                       var _args = cloneDeep(fun.args);
                       _args[i].list = data;
                       setFun(_objectSpread(_objectSpread({}, fun), {}, {
@@ -222,7 +230,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
                       }));
                     }
                   })]
-                }), _jsxs("div", {
+                }), !readonly && _jsxs("div", {
                   className: 'Sqb-item-opr',
                   children: [_jsx(Button, {
                     primary: true,
@@ -264,7 +272,7 @@ var CaseEditor = React.forwardRef(function (props, ref) {
             return _onClose();
           },
           children: __('customColumn.cancel')
-        }), _jsx("button", {
+        }), !readonly && _jsx("button", {
           className: cx("btn ml-4", {
             usable: usable
           }),

package/lib/es/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/es/components/dialog/formula-list/CaseWhenGroup.js

@@ -69,6 +69,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,
@@ -105,7 +107,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
     className: cx('Sqb-FormulaGroup', 'flow-group', 'formula-node-group', 'Sqb-CaseWhenGroup', {
       'Sqb-CaseWhenGroup--nested': isNested
     }),
-    children: [showTools && _jsxs("div", {
+    children: [showTools && !readonly && _jsxs("div", {
       className: 'Sqb-CaseWhenTools',
       children: [onZoomCase && _jsx(Tooltip, {
         title: "\u7F16\u8F91 caseWhen",
@@ -177,7 +179,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
               })]
             })]
           }))
-        }), _jsxs("div", {
+        }), !readonly && _jsxs("div", {
           className: 'Sqb-CaseRow-actions when-row-actions',
           children: [_jsx(Tooltip, {
             title: "\u65B0\u589E when",
@@ -206,7 +208,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
           })]
         })]
       }, branch.key);
-    }), whenClauses.length < 1 && _jsx(Tooltip, {
+    }), !readonly && whenClauses.length < 1 && _jsx(Tooltip, {
       title: "\u65B0\u589E when",
       children: _jsxs("button", {
         type: 'button',
@@ -237,7 +239,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
             children: elseContent
           })]
         }))
-      }), _jsx("div", {
+      }), !readonly && _jsx("div", {
         className: 'Sqb-CaseRow-actions when-row-actions',
         children: _jsx(Tooltip, {
           title: "\u5220\u9664 else",
@@ -253,7 +255,7 @@ var CaseWhenGroup = function CaseWhenGroup(_ref) {
           })
         })
       })]
-    }), !elseContent && _jsx(Tooltip, {
+    }), !readonly && !elseContent && _jsx(Tooltip, {
       title: "\u65B0\u589E else",
       children: _jsxs("button", {
         type: 'button',

package/lib/es/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/es/components/dialog/formula-list/LogicGroup.js

@@ -19,7 +19,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') {
@@ -76,7 +78,7 @@ var LogicGroup = function LogicGroup(_ref) {
     }), _jsx("span", {
       className: 'Sqb-CaseKeyword',
       children: ")"
-    }), _jsx(Tooltip, {
+    }), !readonly && _jsx(Tooltip, {
       title: "\u5220\u9664 and/or",
       children: _jsx("button", {
         type: 'button',

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

@@ -156,6 +156,7 @@ var FormulaList = forwardRef(function (props, ref) {
     };
   }, []);
   var store = useStore();
+  var snapshotMode = Boolean(store.snapshotMode);
   var _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
     data = props.data,
@@ -957,6 +958,7 @@ var FormulaList = forwardRef(function (props, ref) {
     var caseRegionKey = "case-".concat(index, "-case");
     var elseRegionKey = "case-".concat(index, "-else");
     return _jsx(CaseWhenGroup, {
+      readonly: snapshotMode,
       isNested: embedded,
       useBranchScrollInner: !embedded,
       caseRegionKey: caseRegionKey,
@@ -1068,6 +1070,7 @@ var FormulaList = forwardRef(function (props, ref) {
       updateAtomAt(index, buildAndOrItem(value, nextItems));
     };
     return _jsx(LogicGroup, {
+      readonly: snapshotMode,
       items: items.map(function (item, itemIndex) {
         return {
           operator: item.operator,
@@ -1420,6 +1423,7 @@ var FormulaList = forwardRef(function (props, ref) {
         multiple: false,
         value: [val],
         theme: ColumnsPopupThemeEnum.skyBlue,
+        readonly: snapshotMode,
         onSelect: function onSelect(fields) {
           var _caseList = caseList.slice();
           _caseList[i] = fields[0];
@@ -1820,6 +1824,7 @@ var FormulaList = forwardRef(function (props, ref) {
           children: _jsx(Formula, {
             data: data,
             value: _value,
+            readonly: snapshotMode,
             onCancel: function onCancel() {
               o.close();
             },
@@ -2088,6 +2093,7 @@ var FormulaList = 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 _jsx("div", {
@@ -2120,8 +2126,9 @@ 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);
+    var showAfterArrow = !snapshotMode && canShowItemInsertArrows(v, groupType);
+    var showBeforeArrow = !snapshotMode && canShowItemInsertArrows(v, groupType);
+    var canOpenInSnapshot = v.type === AtomsTypeEnum.FORMULA || v.type === AtomsTypeEnum.FIELD || v.type === AtomsTypeEnum.SUB_QUERY || v.type === AtomsTypeEnum.EXISTS || v.type === AtomsTypeEnum.NOT_EXISTS;
     return _jsx(React.Fragment, {
       children: _jsxs("div", {
         className: cx('Sqb-Filter-item', _defineProperty({
@@ -2160,7 +2167,7 @@ var FormulaList = forwardRef(function (props, ref) {
           ind: i,
           position: 'before',
           trigger: 'hover'
-        }), !embedded && showCheckbox && v.type !== AtomsTypeEnum.UNKNOWN && _jsx(Checkbox, {
+        }), !snapshotMode && !embedded && showCheckbox && v.type !== AtomsTypeEnum.UNKNOWN && _jsx(Checkbox, {
           className: 'item-check',
           checked: selectedIndices.includes(i),
           disabled: globalSelectionActive && globalSelectionOwner !== myInstanceIdRef.current,
@@ -2170,7 +2177,7 @@ var FormulaList = forwardRef(function (props, ref) {
           }
         }), _jsx("div", {
           style: {
-            pointerEvents: isCheck || store.isMetabaseCopy ? 'none' : 'auto'
+            pointerEvents: snapshotMode && !canOpenInSnapshot || isCheck || store.isMetabaseCopy ? 'none' : 'auto'
           },
           className: cx('Sqb-Filter-item-node', {
             openCheck: isCheck && !isCompositeAtom
@@ -2178,8 +2185,11 @@ var FormulaList = forwardRef(function (props, ref) {
           children: itemContent.raw ? itemContent.node : _jsx(ItemName, _objectSpread(_objectSpread({}, getItemNameProps(v)), {}, {
             children: _jsx(RightClickValue, {
               value: v,
-              children: _jsx("div", _objectSpread(_objectSpread({
-                className: cx('Sqb-TableName', itemContent.className),
+              children: _jsx("div", _objectSpread(_objectSpread(_objectSpread({
+                className: cx('Sqb-TableName', itemContent.className)
+              }, snapshotMode && canOpenInSnapshot ? {
+                'data-sqb-snapshot-allow': 'true'
+              } : {}), {}, {
                 onClick: itemContent.onClick,
                 style: getTokenStyleByClassName(itemContent.className, itemContent.style)
               }, itemContent.attrs || {}), {}, {
@@ -2214,6 +2224,7 @@ var FormulaList = forwardRef(function (props, ref) {
     });
   };
   var renderDeleteIcon = function renderDeleteIcon(item, index, groupType) {
+    if (snapshotMode) return null;
     if (!canDeleteItem(item, groupType)) return null;
     return _jsx(Tooltip, {
       title: "\u5220\u9664",
@@ -2266,8 +2277,8 @@ var FormulaList = 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 _jsx(Tooltip, {
       title: "\u7F16\u8F91",
@@ -2332,7 +2343,7 @@ var FormulaList = 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 _jsx(Tooltip, {
             title: "\u6DFB\u52A0",
@@ -2346,7 +2357,7 @@ var FormulaList = forwardRef(function (props, ref) {
         ind: -1,
         position: 'add',
         trigger: 'click'
-      }), !embedded && copyDom(-1, false), !embedded && showPreview && _jsx("div", {
+      }), !embedded && !snapshotMode && copyDom(-1, false), !snapshotMode && !embedded && showPreview && _jsx("div", {
         className: cx("mb-2 font-bold uppercase tracking-wider preview-box"),
         style: {
           fontSize: 12,
@@ -2376,7 +2387,7 @@ var FormulaList = forwardRef(function (props, ref) {
               onClick: showFormulaDiff,
               children: "\u5BF9\u6BD4\u7ED3\u679C"
             })]
-          }), _jsx("div", {
+          }), !snapshotMode && _jsx("div", {
             className: 'errorMsg mt-2',
             children: errorInfo.isError && _jsxs(_Fragment, {
               children: ["\u63D0\u793A\uFF1A", _jsx("span", {

package/lib/es/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/es/components/dialog/select-column/index.js

@@ -22,6 +22,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 = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -88,6 +90,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 = cloneDeep(originList);
     var mergedColumns = useColumnsDirectly ? cloneDeep(columns) : originalData.map(function (item) {
       var match = columns.find(function (col) {
@@ -100,6 +103,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];
     Modal.confirm({
@@ -177,11 +181,15 @@ var SelectColumn = function SelectColumn(_ref) {
   return _jsx("div", {
     className: "Sqb-SelectColumn--box",
     children: _jsxs("div", {
+      style: readonly ? {
+        cursor: 'default'
+      } : undefined,
       children: [_jsxs("div", {
         className: 'Sqb-SelectColumn--header pt-2',
         children: [_jsx("div", {
           className: cx("SelectColumn-border mb-2 pb-2 px-2 flex items-center", {}),
           onClick: function onClick() {
+            if (readonly) return;
             var newColumns = columns.map(function (v) {
               return _objectSpread(_objectSpread({}, v), {}, {
                 select: !isAllSelect
@@ -209,6 +217,7 @@ var SelectColumn = function SelectColumn(_ref) {
           return _jsxs("div", {
             className: 'pb-2 px-2 flex items-center',
             onClick: function onClick() {
+              if (readonly) return;
               var newColumns = cloneDeep(columns);
               newColumns[i].select = !v.select;
               onSelect(newColumns);
@@ -218,7 +227,7 @@ var SelectColumn = function SelectColumn(_ref) {
               children: _jsx(SelectIcon, {})
             }) : _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 && _jsx(Tooltip, {
+            }), v.name, v.name_zh ? " \uFF08".concat(v.name_zh, "\uFF09") : '', v.fieldAlias ? " as ".concat(v.fieldAlias) : '', store.fieldEnableAlias && !readonly && _jsx(Tooltip, {
               title: __('SqlQueryBuilder.alias'),
               children: _jsx(Button, {
                 className: ':Sqb-TableName-as',

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

@@ -42,6 +42,7 @@ interface PropsType {
     showNextBtn?: boolean;
     nextBtnText?: string;
     onNextStep?: () => void;
+    readonly?: boolean;
 }
-declare const SelectJoinColumn: ({ data, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, showNextBtn, nextBtnText, onNextStep, }: PropsType) => React.JSX.Element;
+declare const SelectJoinColumn: ({ data, value: _value, theme, onSelect, isGroup, onGroup, didUpdate, multiple, showNextBtn, nextBtnText, onNextStep, readonly, }: PropsType) => React.JSX.Element;
 export default SelectJoinColumn;

package/lib/es/components/dialog/select-column-multiple/index.js

@@ -49,7 +49,9 @@ var SelectJoinColumn = function SelectJoinColumn(_ref) {
     showNextBtn = _ref$showNextBtn === void 0 ? false : _ref$showNextBtn,
     _ref$nextBtnText = _ref.nextBtnText,
     nextBtnText = _ref$nextBtnText === void 0 ? __('metabase.nextBtn') : _ref$nextBtnText,
-    onNextStep = _ref.onNextStep;
+    onNextStep = _ref.onNextStep,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly;
   var store = useStore();
   var selectedTableUuid = (_value === null || _value === void 0 || (_value$ = _value[0]) === null || _value$ === void 0 ? void 0 : _value$.tableId) === SummarizeAlias ? '' : (_value === null || _value === void 0 || (_value$2 = _value[0]) === null || _value$2 === void 0 ? void 0 : _value$2.tableUuid) || '';
   var _useState = useState(_value),
@@ -262,11 +264,12 @@ var SelectJoinColumn = function SelectJoinColumn(_ref) {
       return matchedColumn ? syncSelectedFieldByColumn(field, matchedColumn, tableItem) : field;
     });
     setValue(syncedValue);
-    if (!isEqual(syncedValue, _value || [])) {
+    if (!readonly && !isEqual(syncedValue, _value || [])) {
       onSelect === null || onSelect === void 0 || onSelect(syncedValue, getQuotes(syncedValue));
     }
   }, [data, _value]);
   var changeValue = function changeValue(tableUuid, val) {
+    if (readonly) return;
     if (!multiple) {
       var _data = val ? [val] : [];
       setValue(_data);
@@ -512,7 +515,7 @@ var SelectJoinColumn = function SelectJoinColumn(_ref) {
           }, (tableUuid || tableAlias) + '' + i);
         })]
       })
-    }), showNextBtn && multiple && _jsx(Button, {
+    }), !readonly && showNextBtn && multiple && _jsx(Button, {
       block: true,
       disabled: (value === null || value === void 0 ? void 0 : value.length) < 1,
       primary: true,

package/lib/es/components/dialog/select-summarize/index.d.ts

@@ -17,6 +17,7 @@ interface PropsType {
     onChange: (reocrd: ValueType) => void;
     didUpdate?: Function;
     ignoreGroupByType?: boolean;
+    readonly?: boolean;
 }
-declare const SelectSummarize: ({ data, value, onChange, didUpdate, ignoreGroupByType }: PropsType) => React.JSX.Element;
+declare const SelectSummarize: ({ data, value, onChange, didUpdate, ignoreGroupByType, readonly, }: PropsType) => React.JSX.Element;
 export default SelectSummarize;

package/lib/es/components/dialog/select-summarize/index.js

@@ -77,7 +77,8 @@ var SelectSummarize = function SelectSummarize(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     didUpdate = _ref.didUpdate,
-    ignoreGroupByType = _ref.ignoreGroupByType;
+    ignoreGroupByType = _ref.ignoreGroupByType,
+    readonly = _ref.readonly;
   var _useState = useState(value.condition),
     _useState2 = _slicedToArray(_useState, 2),
     condition = _useState2[0],
@@ -113,6 +114,7 @@ var SelectSummarize = function SelectSummarize(_ref) {
     atoms = _useState4[0],
     setAtoms = _useState4[1];
   function goPrevPage() {
+    if (readonly) return;
     setCondition('');
   }
   function getFormulaSummary() {
@@ -227,7 +229,7 @@ var SelectSummarize = function SelectSummarize(_ref) {
             })
           })
         })
-      }), _jsx("div", {
+      }), !readonly && _jsx("div", {
         className: 'Sqb-SelectSummarize-formula-footer',
         children: _jsx(Button, {
           primary: true,
@@ -273,6 +275,7 @@ var SelectSummarize = function SelectSummarize(_ref) {
                 active: condition === v.name
               }),
               onClick: function onClick() {
+                if (readonly) return;
                 if (~Special.indexOf(v.name)) {
                   setAtoms([]);
                   handleSelect(v.name, {});

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

@@ -34,6 +34,7 @@ var Metabase = function Metabase(props) {
     rightClickMenu = _props$rightClickMenu === void 0 ? EMPTY_ARRAY : _props$rightClickMenu,
     onRightClickMenuClick = props.onRightClickMenuClick;
   var store = useStore();
+  var readonlyMode = readonly || store.snapshotMode;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     saveLoading = _useState2[0],
@@ -153,7 +154,18 @@ var Metabase = function Metabase(props) {
     store.setRightClickMenu(rightClickMenu || EMPTY_ARRAY);
     store.setRightClickMenuClick(onRightClickMenuClick);
   }, [rightClickMenu, onRightClickMenuClick]);
+  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 _jsxs(Space, {
       children: [moduleCopy && _jsx(_Fragment, {
         children: _jsx(Tooltip, {
@@ -213,10 +225,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 _jsx(VisualBox, {
     ref: store.popupContainer,
     onContextMenu: function onContextMenu(e) {
-      return openSqbRightClickMenu(store, e);
+      if (readonlyMode) {
+        e.preventDefault();
+        return;
+      }
+      openSqbRightClickMenu(store, e);
     },
     children: _jsxs("div", {
       className: 'Sqb',
@@ -228,6 +252,8 @@ var Metabase = function Metabase(props) {
         if (v.type === 'union' && v.union) {
           return _jsx("div", {
             className: cx("Sqb-list"),
+            onMouseDownCapture: stopReadonlyInteraction,
+            onClickCapture: stopReadonlyInteraction,
             children: _jsx(Union, {
               union: v.union,
               meta: v,
@@ -237,6 +263,8 @@ var Metabase = function Metabase(props) {
         }
         return _jsx("div", {
           className: cx("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,
@@ -249,7 +277,7 @@ var Metabase = function Metabase(props) {
             }, metaKey);
           })
         }, 'group' + index);
-      }), !readonly && typeof onOk === 'function' ? _jsx(Button, {
+      }), !readonlyMode && typeof onOk === 'function' ? _jsx(Button, {
         type: 'primary',
         className: ":Sqb-btn",
         loading: saveLoading,