react-autoql 3.4.9 → 3.5.2

package/dist/autoql.esm.js

@@ -6,7 +6,8 @@ import LocalizedFormat from 'dayjs/plugin/localizedFormat';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import axios from 'axios';
-import React, { Fragment, Component } from 'react';
+import _$1 from 'lodash';
+import React, { Fragment, Component, createRef } from 'react';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import PropTypes, { shape, string, number, bool, oneOf, arrayOf, func, instanceOf, oneOfType, array } from 'prop-types';
 import { BsArrowBarDown, BsArrowBarUp } from 'react-icons/bs';
@@ -15,7 +16,7 @@ import { MdError, MdLockOpen, MdPlayCircleOutline, MdLock, MdInfoOutline, MdCont
 import { FiAlertTriangle, FiTrash2, FiSettings, FiSend, FiPlus, FiPauseCircle, FiBellOff, FiBell, FiMoreHorizontal, FiMoreVertical, FiFilter, FiEye, FiDownload, FiDatabase, FiCheck, FiCalendar, FiArrowLeft } from 'react-icons/fi';
 import { IoIosSearch, IoIosHourglass, IoIosGlobe, IoIosCloseCircleOutline } from 'react-icons/io';
 import { TiSortNumerically } from 'react-icons/ti';
-import { AiOutlineBook, AiOutlineQuestionCircle, AiOutlineMenu, AiOutlineBulb, AiOutlineEdit, AiOutlineFileText, AiOutlineDashboard, AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
+import { AiOutlineBook, AiOutlineQuestionCircle, AiOutlineMenu, AiOutlineBulb, AiOutlineEdit, AiOutlineFileText, AiOutlineDashboard, AiFillCaretUp, AiFillCaretDown, AiFillCaretLeft, AiFillCaretRight } from 'react-icons/ai';
 import { FaMicrophoneAlt } from 'react-icons/fa';
 import { GoReport } from 'react-icons/go';
 import ReactTooltip from 'react-tooltip';
@@ -23,7 +24,6 @@ import _isEqual from 'lodash.isequal';
 import _cloneDeep from 'lodash.clonedeep';
 import InfiniteScroll from 'react-infinite-scroller';
 import uuid from 'uuid';
-import _$1 from 'lodash';
 import parseNum from 'parse-num';
 import Popover from 'react-tiny-popover';
 import momentTZ from 'moment-timezone';
@@ -31,6 +31,8 @@ import ReactSelect from 'react-select';
 import ReactModal from 'react-modal';
 import _isEmpty from 'lodash.isempty';
 import disableScroll from 'disable-scroll';
+import moment from 'moment';
+import { UnmountClosed } from 'react-collapse';
 import HTMLRenderer from 'react-html-renderer';
 import { scaleOrdinal, scaleBand, scaleLinear } from 'd3-scale';
 import Autosuggest from 'react-autosuggest';
@@ -46,11 +48,11 @@ import { symbol, symbolCircle, pie, arc } from 'd3-shape';
 import { entries } from 'd3-collection';
 import 'd3-transition';
 import Drawer from 'rc-drawer';
-import _includes from 'lodash.includes';
 import _has from 'lodash.has';
 import { Scrollbars } from 'react-custom-scrollbars';
 import LocalizedStrings from 'react-localization';
 import 'rc-drawer/assets/index.css';
+import Switch from 'react-switch';
 import sqlFormatter from 'sql-formatter';
 import ReactPaginate from 'react-paginate';
 import RGL, { WidthProvider } from 'react-grid-layout';
@@ -354,6 +356,63 @@ function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+
+      var F = function () {};
+
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var normalCompletion = true,
+      didErr = false,
+      err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
+
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   _inherits(ErrorBoundary, _React$Component);
 
@@ -473,6 +532,8 @@ var autoQLConfigDefault = {
   debug: false,
   test: false,
   enableAutocomplete: true,
+  enableQueryInterpretation: true,
+  defaultShowInterpretation: false,
   enableQueryValidation: true,
   enableQuerySuggestions: true,
   enableColumnVisibilityManager: true,
@@ -1659,8 +1720,10 @@ var lang = new LocalizedStrings({
     queryPrompt: 'Type your queries here ',
     seeMore: 'See more',
     dataMessengerOptions: 'Options menu',
-    openConditionLocking: 'Open condition locking menu',
-    closeConditionLocking: 'Close condition locking menu',
+    openFilterLocking: 'Manage Filters',
+    closeFilterLocking: 'Close filter menu',
+    filterLockingTitle: 'Filter Locking',
+    noFiltersLocked: 'No Filters are locked yet',
     clearDataResponses: 'Clear all queries & responses',
     closeDataMessenger: 'Close Data Messenger',
     searchQueries: 'Search relevant queries by topic',
@@ -1697,8 +1760,10 @@ var lang = new LocalizedStrings({
     queryPrompt: 'Escribe tus consultas aquí',
     seeMore: 'Ver más',
     dataMessengerOptions: 'Menú de opciones',
-    openConditionLocking: 'Abrir menú de bloqueo de condición',
-    closeConditionLocking: 'Cerrar menú de bloqueo de condición',
+    openFilterLocking: 'Administrar filtros',
+    closeFilterLocking: 'Cerrar menú de filtrar',
+    filterLockingTitle: 'Menú de Filtro',
+    noFiltersLocked: 'Ningún filtro está bloqueado todavía',
     clearDataResponses: 'Borrar todas las consultas y respuestas',
     closeDataMessenger: 'Cerrar Data mesenger',
     searchQueries: 'Buscar consultas relevantes por tema',
@@ -2178,6 +2243,18 @@ var Icon = /*#__PURE__*/function (_React$Component) {
             break;
           }
 
+        case 'caret-down':
+          {
+            icon = /*#__PURE__*/React.createElement(AiFillCaretDown, null);
+            break;
+          }
+
+        case 'caret-up':
+          {
+            icon = /*#__PURE__*/React.createElement(AiFillCaretUp, null);
+            break;
+          }
+
         case 'react-autoql-bubbles':
           {
             icon = /*#__PURE__*/React.createElement("img", {
@@ -2726,12 +2803,37 @@ var runQueryOnly = function runQueryOnly() {
 
   var url = "".concat(domain, "/autoql/api/v1/query?key=").concat(apiKey);
   var finalUserSelection = transformUserSelection(userSelection);
+  var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+  var conditions = {};
+
+  if (sessionConditions !== null) {
+    var _loop = function _loop(i) {
+      if (Object.keys(conditions).some(function (item) {
+        return item === sessionConditions[i].key;
+      })) {
+        item = Object.keys(conditions).find(function (key) {
+          return key === sessionConditions[i].key;
+        });
+        conditions[item].push(sessionConditions[i].value);
+      } else {
+        conditions[sessionConditions[i].key] = [sessionConditions[i].value];
+      }
+    };
+
+    for (var i = 0; i < sessionConditions.length; i++) {
+      var item;
+
+      _loop(i);
+    }
+  }
+
   var data = {
     text: query,
     source: formatSourceString(source),
     translation: debug ? 'include' : 'exclude',
     user_selection: finalUserSelection,
-    test: test
+    test: test,
+    session_locked_conditions: conditions
   };
 
   if (!query || !query.trim()) {
@@ -3035,8 +3137,7 @@ var setConditions = function setConditions() {
     array.push({
       key: obj.key,
       keyword: obj.keyword,
-      // lock_flag: obj.lock_flag,
-      lock_flag: 1,
+      lock_flag: obj.lock_flag,
       show_message: obj.show_message,
       value: obj.value
     });
@@ -3309,15 +3410,24 @@ _defineProperty(Dictaphone, "defaultProps", {});
 
 var SpeechToTextButtonBrowser = SpeechRecognition(options$1)(Dictaphone);
 
-var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
-  _inherits(SpeechToTextBtn, _React$Component);
+function LoadingDots() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: "response-loading",
+    "data-test": "loading-dots"
+  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
+}
 
-  var _super = _createSuper(SpeechToTextBtn);
+var autoCompleteArray$2 = [];
 
-  function SpeechToTextBtn() {
+var QueryInput = /*#__PURE__*/function (_React$Component) {
+  _inherits(QueryInput, _React$Component);
+
+  var _super = _createSuper(QueryInput);
+
+  function QueryInput() {
     var _this;
 
-    _classCallCheck(this, SpeechToTextBtn);
+    _classCallCheck(this, QueryInput);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -3325,14 +3435,15 @@ var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "UNIQUE_ID", uuid.v4());
+
+    _defineProperty(_assertThisInitialized(_this), "autoCompleteTimer", undefined);
+
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isRecording: false,
-      currentQuery: 0,
-      resultHistory: [],
-      currentFile: '',
-      currentBlob: '',
-      showPopoverMessage: false,
-      errorMessage: ''
+      inputValue: '',
+      lastQuery: '',
+      suggestions: [],
+      isQueryRunning: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -3340,323 +3451,115 @@ var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-      if (_this.props.finalTranscript !== prevProps.finalTranscript) {
-        _this.props.onFinalTranscript(_this.props.finalTranscript);
-      } else if (_this.props.transcript !== prevProps.transcript) {
-        _this.props.onTranscriptChange(_this.props.transcript);
-      } else if (_this.props.interimTranscript !== prevProps.interimTranscript) {
-        _this.props.onTranscriptChange(_this.props.interimTranscript);
+      if (!_isEqual(getThemeConfig(_this.props.themeConfig), getThemeConfig(prevProps.themeConfig))) {
+        setCSSVars(getThemeConfig(_this.props.themeConfig));
       }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "startRecording", function () {
-      _this.setState({
-        isRecording: true
-      });
 
-      navigator.getUserMedia({
-        audio: true
-      }, function (stream) {
-        _this.stream = stream;
-        _this.recordAudio = RecordRTC(_this.stream, {
-          type: 'audio',
-          mimeType: 'audio/webm',
-          desiredSampRate: 16000,
-          recorderType: StereoAudioRecorder,
-          numberOfAudioChannels: 1
+      if (_this.props.inputValue && _this.props.inputValue !== prevProps.inputValue) {
+        _this.setState({
+          inputValue: _this.props.inputValue
         });
-
-        _this.recordAudio.startRecording();
-      }, function (error) {
-        console.error(JSON.stringify(error));
-      });
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onRecordStop", function (file, blob) {
-      _this.setState({
-        //  isConfirmingRecording: true,
-        currentFile: file,
-        currentBlob: blob //hasPlayedBack: false,
+    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
+      if (_this.autoCompleteTimer) {
+        clearTimeout(_this.autoCompleteTimer);
+      }
 
-      }, function () {
-        _this.sendWavFile(file);
-      });
+      if (_this.queryValidationTimer) {
+        clearTimeout(_this.queryValidationTimer);
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "stopRecording", function () {
-      _this.setState({
-        isRecording: false
-      });
+    _defineProperty(_assertThisInitialized(_this), "animateInputTextAndSubmit", function (_ref) {
+      var query = _ref.query,
+          userSelection = _ref.userSelection;
+          _ref.skipQueryValidation;
+          var source = _ref.source;
 
-      _this.recordAudio.stopRecording(function () {
-        var blob = _this.recordAudio.getBlob();
+      if (typeof query === 'string' && _get(query, 'length')) {
+        var _loop = function _loop(i) {
+          setTimeout(function () {
+            _this.setState({
+              inputValue: query.slice(0, i)
+            });
 
-        _this.onRecordStop(_this.blobToFile(blob), blob);
+            if (i === query.length) {
+              setTimeout(function () {
+                _this.submitQuery({
+                  queryText: query,
+                  userSelection: userSelection,
+                  skipQueryValidation: true,
+                  source: source
+                });
+              }, 300);
+            }
+          }, i * 50);
+        };
 
-        try {
-          _this.stream.getTracks().forEach(function (track) {
-            return track.stop();
-          });
-        } catch (error) {
-          console.error(error);
+        for (var i = 1; i <= query.length; i++) {
+          _loop(i);
         }
-      });
+      }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "blobToFile", function (theBlob) {
-      //A Blob() is almost a File() - it's just missing the two properties below which we will add
-      theBlob.lastModifiedDate = new Date();
-      theBlob.name = 'speech.wav';
-      return theBlob;
-    });
+    _defineProperty(_assertThisInitialized(_this), "submitQuery", function () {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          queryText = _ref2.queryText,
+          userSelection = _ref2.userSelection,
+          skipQueryValidation = _ref2.skipQueryValidation,
+          source = _ref2.source;
 
-    _defineProperty(_assertThisInitialized(_this), "getMediaPermissionStatus", function () {
-      return navigator.permissions.query({
-        name: 'microphone'
-      }).then(function (permissionStatus) {
-        return permissionStatus.state;
+      // Cancel subscription to autocomplete since query was already submitted
+      if (_this.autoCompleteTimer) {
+        clearTimeout(_this.autoCompleteTimer);
+      }
+
+      _this.setState({
+        isQueryRunning: true,
+        inputValue: '',
+        suggestions: [],
+        queryValidationResponse: undefined,
+        queryValidationComponentId: uuid.v4()
       });
-    });
 
-    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function () {
-      ReactTooltip.hide();
+      var query = queryText || _this.state.inputValue;
+      var newSource = [].concat(_toConsumableArray(_this.props.source), [source || 'user']);
 
-      _this.startRecording();
-    });
+      if (query.trim()) {
+        _this.props.onSubmit(query);
+
+        if (skipQueryValidation) {
+          runQueryOnly(_objectSpread2(_objectSpread2(_objectSpread2({
+            query: query,
+            userSelection: userSelection
+          }, getAuthentication(_this.props.authentication)), getAutoQLConfig$1(_this.props.autoQLConfig)), {}, {
+            source: newSource,
+            AutoAEId: _this.props.AutoAEId
+          })).then(function (response) {
+            _this.props.onResponseCallback(response, query);
 
-    _defineProperty(_assertThisInitialized(_this), "sendWavFile", function (file) {
-      var url = "".concat(_this.props.authentication.domain, "/autoql/api/v1/query/speech-to-text?key=").concat(_this.props.authentication.apiKey);
-      var data = new FormData();
-      data.append('file', file, 'speech.wav');
-      var config = {
-        headers: {
-          Authorization: "Bearer ".concat(_this.props.authentication.token)
-        },
-        timeout: 30000
-      };
-      axios.post(url, data, config).then(function (res) {
-        _this.props.onTranscriptChange(res.data.data.transcription);
-      }).catch(function (error) {
-        if (error.response.status === 404) {
-          _this.setState({
-            errorMessage: 'Oops! Speech-to-text has not been enabled. Try typing a query instead.'
-          }, function () {
             _this.setState({
-              showPopoverMessage: true
+              isQueryRunning: false
             });
-          });
-        } else {
-          _this.setState({
-            errorMessage: 'Oops! Something wrong with your account'
-          }, function () {
+          }).catch(function (error) {
+            console.error(error);
+
+            _this.props.onResponseCallback(error);
+
             _this.setState({
-              showPopoverMessage: true
+              isQueryRunning: false
             });
           });
-        }
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "render", function () {
-      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Popover, {
-        isOpen: _this.state.showPopoverMessage,
-        padding: 20,
-        content: function content() {
-          return /*#__PURE__*/React.createElement("div", {
-            style: {
-              backgroundColor: '#FFD2D2',
-              opacity: 1,
-              paddingLeft: '10px',
-              paddingRight: '10px'
-            }
-          }, /*#__PURE__*/React.createElement(Icon, {
-            type: "warning-triangle"
-          }), " ", _this.state.errorMessage);
-        },
-        onClickOutside: function onClickOutside() {
-          return _this.setState({
-            showPopoverMessage: false
-          });
-        }
-      }, /*#__PURE__*/React.createElement("button", {
-        id: "react-autoql-voice-record-button",
-        "data-test": "speech-to-text-btn",
-        className: "chat-voice-record-button".concat(_this.state.isRecording ? ' listening' : ''),
-        onMouseDown: _this.onMouseDown,
-        onMouseUp: _this.stopRecording,
-        onMouseLeave: _this.state.isRecording ? _this.stopRecording : undefined,
-        "data-tip": "Hold for voice-to-text",
-        "data-for": "react-autoql-speech-to-text-tooltip",
-        "data-tip-disable": _this.state.isRecording
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "microphone"
-      }))), /*#__PURE__*/React.createElement(ReactTooltip, {
-        className: "react-autoql-tooltip",
-        id: "react-autoql-speech-to-text-tooltip",
-        effect: "solid",
-        delayShow: 800
-      }));
-    });
-
-    return _this;
-  }
-
-  return SpeechToTextBtn;
-}(React.Component);
-
-_defineProperty(SpeechToTextBtn, "propTypes", {
-  authentication: authenticationType,
-  themeConfig: themeConfigType,
-  transcript: PropTypes.string,
-  interimTranscript: PropTypes.string,
-  finalTranscript: PropTypes.string,
-  resetTranscript: PropTypes.func,
-  onTranscriptChange: PropTypes.func,
-  onFinalTranscript: PropTypes.func
-});
-
-_defineProperty(SpeechToTextBtn, "defaultProps", {
-  authentication: authenticationDefault,
-  themeConfig: themeConfigDefault
-});
-
-function LoadingDots() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "response-loading",
-    "data-test": "loading-dots"
-  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null));
-}
-
-var autoCompleteArray$2 = [];
-
-var QueryInput = /*#__PURE__*/function (_React$Component) {
-  _inherits(QueryInput, _React$Component);
-
-  var _super = _createSuper(QueryInput);
-
-  function QueryInput() {
-    var _this;
-
-    _classCallCheck(this, QueryInput);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _defineProperty(_assertThisInitialized(_this), "UNIQUE_ID", uuid.v4());
-
-    _defineProperty(_assertThisInitialized(_this), "autoCompleteTimer", undefined);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      inputValue: '',
-      lastQuery: '',
-      suggestions: [],
-      isQueryRunning: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
-      setCSSVars(getThemeConfig(_this.props.themeConfig));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
-      if (!_isEqual(getThemeConfig(_this.props.themeConfig), getThemeConfig(prevProps.themeConfig))) {
-        setCSSVars(getThemeConfig(_this.props.themeConfig));
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
-      if (_this.autoCompleteTimer) {
-        clearTimeout(_this.autoCompleteTimer);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "animateInputTextAndSubmit", function (_ref) {
-      var query = _ref.query,
-          userSelection = _ref.userSelection;
-          _ref.skipQueryValidation;
-          var source = _ref.source;
-
-      if (typeof query === 'string' && _get(query, 'length')) {
-        var _loop = function _loop(i) {
-          setTimeout(function () {
-            _this.setState({
-              inputValue: query.slice(0, i)
-            });
-
-            if (i === query.length) {
-              setTimeout(function () {
-                _this.submitQuery({
-                  queryText: query,
-                  userSelection: userSelection,
-                  skipQueryValidation: true,
-                  source: source
-                });
-              }, 300);
-            }
-          }, i * 50);
-        };
-
-        for (var i = 1; i <= query.length; i++) {
-          _loop(i);
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "submitQuery", function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          queryText = _ref2.queryText,
-          userSelection = _ref2.userSelection,
-          skipQueryValidation = _ref2.skipQueryValidation,
-          source = _ref2.source;
-
-      // Cancel subscription to autocomplete since query was already submitted
-      if (_this.autoCompleteTimer) {
-        clearTimeout(_this.autoCompleteTimer);
-      }
-
-      var query = queryText || _this.state.inputValue;
-      var newSource = [].concat(_toConsumableArray(_this.props.source), [source || 'user']);
-
-      _this.setState({
-        isQueryRunning: true,
-        inputValue: ''
-      });
-
-      if (query.trim()) {
-        _this.props.onSubmit(query);
-
-        if (skipQueryValidation) {
-          runQueryOnly(_objectSpread2(_objectSpread2(_objectSpread2({
-            query: query,
-            userSelection: userSelection
-          }, getAuthentication(_this.props.authentication)), getAutoQLConfig$1(_this.props.autoQLConfig)), {}, {
-            source: newSource,
-            AutoAEId: _this.props.AutoAEId
-          })).then(function (response) {
-            _this.props.onResponseCallback(response, query);
-
-            _this.setState({
-              isQueryRunning: false
-            });
-          }).catch(function (error) {
-            console.error(error);
-
-            _this.props.onResponseCallback(error);
-
-            _this.setState({
-              isQueryRunning: false
-            });
-          });
-        } else {
-          runQuery(_objectSpread2(_objectSpread2(_objectSpread2({
-            query: query
-          }, getAuthentication(_this.props.authentication)), getAutoQLConfig$1(_this.props.autoQLConfig)), {}, {
-            source: newSource,
-            AutoAEId: _this.props.AutoAEId
-          })).then(function (response) {
-            _this.props.onResponseCallback(response, query);
+        } else {
+          runQuery(_objectSpread2(_objectSpread2(_objectSpread2({
+            query: query
+          }, getAuthentication(_this.props.authentication)), getAutoQLConfig$1(_this.props.autoQLConfig)), {}, {
+            source: newSource,
+            AutoAEId: _this.props.AutoAEId
+          })).then(function (response) {
+            _this.props.onResponseCallback(response, query);
 
             _this.setState({
               isQueryRunning: false
@@ -3716,6 +3619,9 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "focus", function () {
+      // if (this.queryValidationInputRef) {
+      //   this.queryValidationInputRef.focus()
+      // }
       if (_this.inputRef) {
         _this.inputRef.focus();
       } else {
@@ -3738,8 +3644,37 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onSuggestionsFetchRequested", function (_ref3) {
-      var value = _ref3.value;
+    _defineProperty(_assertThisInitialized(_this), "runQueryValidation", function (_ref3) {
+      var text = _ref3.text;
+
+      // Reset validation configuration since text has changed
+      _this.setState({
+        queryValidationResponse: undefined,
+        queryValidationComponentId: uuid.v4()
+      });
+
+      if (_this.queryValidationTimer) {
+        clearTimeout(_this.queryValidationTimer);
+      }
+
+      _this.queryValidationTimer = setTimeout(function () {
+        runQueryValidation(_objectSpread2({
+          text: text
+        }, getAuthentication(_this.props.authentication))).then(function (response) {
+          if (_this.state.inputValue === _get(response, 'data.data.query')) {
+            _this.setState({
+              queryValidationResponse: response,
+              queryValidationComponentId: uuid.v4()
+            });
+          }
+        }).catch(function (error) {
+          console.error(error);
+        });
+      }, 300);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSuggestionsFetchRequested", function (_ref4) {
+      var value = _ref4.value;
 
       if (_this.autoCompleteTimer) {
         clearTimeout(_this.autoCompleteTimer);
@@ -3791,6 +3726,8 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputChange", function (e) {
+      //WIP
+      // this.runQueryValidation({ text: e.target.value })
       if (_this.userSelectedSuggestion && (e.keyCode === 38 || e.keyCode === 40)) {
         // keyup or keydown
         return; // return to let the component handle it...
@@ -3806,6 +3743,12 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
           queryText: _this.userSelectedValue
         });
       }
+
+      if (_this.props.isBackButtonClicked) {
+        _this.setState({
+          inputValue: ''
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "moveCaretAtEnd", function (e) {
@@ -3818,14 +3761,16 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-bar-container ".concat(_this.props.className, " ").concat(_this.props.autoCompletePlacement === 'below' ? 'autosuggest-bottom' : 'autosuggest-top'),
         "data-test": "chat-bar"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-chatbar-input-container"
       }, getAutoQLConfig$1(_this.props.autoQLConfig).enableAutocomplete ? /*#__PURE__*/React.createElement(Autosuggest, {
-        className: "auto-complete-chata",
+        lassName: "auto-complete-chata",
         onSuggestionsFetchRequested: _this.onSuggestionsFetchRequested,
         onSuggestionsClearRequested: _this.onSuggestionsClearRequested,
         getSuggestionValue: _this.userSelectedSuggestionHandler,
         suggestions: _this.state.suggestions,
-        ref: function ref(_ref4) {
-          _this.autoSuggest = _ref4;
+        ref: function ref(_ref5) {
+          _this.autoSuggest = _ref5;
         },
         renderSuggestion: function renderSuggestion(suggestion) {
           return /*#__PURE__*/React.createElement(Fragment, null, suggestion.name);
@@ -3841,9 +3786,26 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
           onFocus: _this.moveCaretAtEnd,
           autoFocus: true
         }
-      }) : /*#__PURE__*/React.createElement("div", {
-        className: "react-autoql-chatbar-input-container"
-      }, /*#__PURE__*/React.createElement("input", {
+      }) :
+      /*#__PURE__*/
+      // <QueryInputWithValidation
+      //   authentication={getAuthentication(this.props.authentication)}
+      //   themeConfig={getThemeConfig(this.props.themeConfig)}
+      //   ref={(ref) => (this.queryValidationInputRef = ref)}
+      //   key={this.state.queryValidationComponentId}
+      //   response={this.state.queryValidationResponse}
+      //   placeholder={this.props.placeholder}
+      //   disabled={this.props.isDisabled}
+      //   showChataIcon={this.props.showChataIcon}
+      //   showLoadingDots={this.props.showLoadingDots}
+      //   submitQuery={this.submitQuery}
+      //   onKeyDown={this.onKeyDown}
+      //   onQueryValidationSelectOption={(query) => {
+      //     this.setState({ inputValue: query })
+      //     this.focus()
+      //   }}
+      // />
+      React.createElement("input", {
         className: "react-autoql-chatbar-input".concat(_this.props.showChataIcon ? ' left-padding' : ''),
         placeholder: _this.props.placeholder || 'Type your queries here',
         value: _this.state.inputValue,
@@ -3865,12 +3827,21 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
         type: "react-autoql-bubbles-outlined"
       })), _this.props.showLoadingDots && _this.state.isQueryRunning && /*#__PURE__*/React.createElement("div", {
         className: "input-response-loading-container"
-      }, /*#__PURE__*/React.createElement(LoadingDots, null)), _this.props.enableVoiceRecord && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpeechToTextButtonBrowser, {
+      }, /*#__PURE__*/React.createElement(LoadingDots, null)), _this.props.enableVoiceRecord &&
+      /*#__PURE__*/
+      // KEEP THIS FOR NOW
+      // <SpeechToTextBtn
+      //   onTranscriptChange={this.onTranscriptChange}
+      //   onFinalTranscript={this.onFinalTranscript}
+      //   themeConfig={this.props.themeConfig}
+      //   authentication={getAuthentication(this.props.authentication)}
+      // />
+      React.createElement(SpeechToTextButtonBrowser, {
         onTranscriptChange: _this.onTranscriptChange,
         onFinalTranscript: _this.onFinalTranscript,
         themeConfig: _this.props.themeConfig,
         authentication: getAuthentication(_this.props.authentication)
-      }))));
+      })));
     });
 
     return _this;
@@ -3891,7 +3862,8 @@ _defineProperty(QueryInput, "propTypes", {
   className: string,
   autoCompletePlacement: string,
   showLoadingDots: bool,
-  showChataIcon: bool
+  showChataIcon: bool,
+  inputValue: string
 });
 
 _defineProperty(QueryInput, "defaultProps", {
@@ -3905,6 +3877,8 @@ _defineProperty(QueryInput, "defaultProps", {
   className: null,
   showLoadingDots: true,
   showChataIcon: true,
+  isBackButtonClicked: false,
+  inputValue: undefined,
   source: [],
   onSubmit: function onSubmit() {},
   onResponseCallback: function onResponseCallback() {}
@@ -3996,7 +3970,7 @@ var ChataTable = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "saveAsCSV", function () {
       if (_this.ref && _this.ref.table) {
         _this.ref.table.download('csv', 'table.csv', {
-          delimiter: '\t'
+          delimiter: ','
         });
       }
     });
@@ -4064,7 +4038,7 @@ var ChataTable = /*#__PURE__*/function (_React$Component) {
         options: options,
         "data-custom-attr": "test-custom-attribute",
         className: "react-autoql-table",
-        height: "100%",
+        height: "98%",
         clipboard: true,
         download: true
       })));
@@ -7938,6 +7912,10 @@ var ChataChart = /*#__PURE__*/function (_Component) {
         _this.updateMargins();
       }
 
+      if (!_isEqual(_this.props.isShowingInterpretation, prevProps.isShowingInterpretation)) {
+        _this.updateMargins();
+      }
+
       if (_this.props.type && _this.props.type !== prevProps.type && _this.props.type !== 'pie') {
         _this.updateMargins();
 
@@ -7998,6 +7976,10 @@ var ChataChart = /*#__PURE__*/function (_Component) {
       });
       var leftMargin = Math.ceil(maxYLabelWidth) + 55; // margin to include axis label
 
+      if (isNaN(leftMargin)) {
+        leftMargin = 96; // if there is no yAxisLabels, set leftMargin to default value as 96
+      }
+
       if (xAxisBBox.width > _this.props.width) {
         leftMargin += xAxisBBox.width - _this.props.width;
       }
@@ -8053,7 +8035,11 @@ var ChataChart = /*#__PURE__*/function (_Component) {
       var xAxis = select(_this.chartRef).select('.axis-Bottom').node();
       var xAxisBBox = xAxis ? xAxis.getBBox() : {};
       var bottomMargin = Math.ceil(xAxisBBox.height) + bottomLegendMargin + 40; // margin to include axis label
-      // only for bar charts (vertical grid lines mess with the axis size)
+
+      if (xAxisBBox.height === 0) {
+        bottomMargin = 463; // if no xAxisBBox available, set bottomMarigin to default as 463
+      } // only for bar charts (vertical grid lines mess with the axis size)
+
 
       if (_this.props.type === 'bar' || _this.props.type === 'stacked_bar') {
         var innerTickSize = _this.props.height - _this.state.topMargin - _this.state.bottomMargin;
@@ -8337,7 +8323,9 @@ var ChataChart = /*#__PURE__*/function (_Component) {
           currencySelectorState = _this$state2.currencySelectorState,
           quantitySelectorState = _this$state2.quantitySelectorState,
           ratioSelectorState = _this$state2.ratioSelectorState;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
+        id: "chata-chart-popover"
+      }, /*#__PURE__*/React.createElement("div", {
         className: "axis-selector-container"
       }, !!currencySelectorState.length && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "number-selector-header"
@@ -9241,14 +9229,15 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "supportedDisplayTypes", []);
 
-    _defineProperty(_assertThisInitialized(_this), "SAFETYNET_KEY", uuid.v4());
+    _defineProperty(_assertThisInitialized(_this), "QUERY_VALIDATION_KEY", uuid.v4());
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       displayType: null,
       tableFilters: [],
       suggestionSelection: _this.props.selectedSuggestion,
       QandAResponseCorrect: false,
-      QandASuggestions: []
+      QandASuggestions: [],
+      isShowingInterpretation: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -9270,6 +9259,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
 
 
         _this.setState({
+          isShowingInterpretation: getAutoQLConfig$1(_this.props.autoQLConfig).defaultShowInterpretation,
           displayType: isDisplayTypeValid(_this.props.queryResponse, _this.props.displayType) ? _this.props.displayType : getDefaultDisplayType(_this.props.queryResponse, _this.props.autoChartAggregations)
         });
 
@@ -9345,6 +9335,10 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           disableScroll.off();
         }
 
+        if (prevState.isShowingInterpretation !== _this.state.isShowingInterpretation) {
+          _this.forceUpdate();
+        }
+
         if (_this.props.optionsToolbarRef) {
           _this.props.optionsToolbarRef._isMounted && _this.props.optionsToolbarRef.forceUpdate();
         }
@@ -10268,7 +10262,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       var formattedColumns = columns.map(function (col, i) {
         /**
          * EDIT:
-         * We no longer want to default to one over the other. Howeever, 
+         * We no longer want to default to one over the other. Howeever,
          * I would like to hang onto this code for now incase we do want to
          * include either/or in some cases in the future
          */
@@ -10670,7 +10664,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       }
 
       if (_this.state.displayType === 'pivot_table') {
-        return /*#__PURE__*/React.createElement(ChataTable, {
+        return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(ChataTable, {
           themeConfig: getThemeConfig(_this.props.themeConfig),
           key: _this.pivotTableID,
           ref: function ref(_ref6) {
@@ -10683,7 +10677,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           onFilterCallback: _this.onTableFilter,
           setFilterTagsCallback: _this.props.setFilterTagsCallback,
           enableColumnHeaderContextMenu: _this.props.enableColumnHeaderContextMenu
-        });
+        }));
       }
 
       return /*#__PURE__*/React.createElement(Fragment, null, _this.renderAllColumnsHiddenMessage(), /*#__PURE__*/React.createElement(ChataTable, {
@@ -10725,6 +10719,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
         columns: _this.chartTableColumns,
         height: height,
         width: width,
+        isShowingInterpretation: _this.state.isShowingInterpretation,
         dataFormatting: getDataFormatting(_this.props.dataFormatting),
         backgroundColor: _this.props.backgroundColor,
         activeChartElementKey: _this.props.activeChartElementKey,
@@ -10859,7 +10854,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       if (_get(queryResponse, 'data.data.replacements')) {
         return /*#__PURE__*/React.createElement(QueryValidationMessage, {
           themeConfig: getThemeConfig(_this.props.themeConfig),
-          key: _this.SAFETYNET_KEY,
+          key: _this.QUERY_VALIDATION_KEY,
           response: _this.props.queryResponse,
           onSuggestionClick: function onSuggestionClick(_ref9) {
             var query = _ref9.query,
@@ -10984,30 +10979,103 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", null));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "render", function () {
-      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY));
-      var height = 0;
-      var width = 0;
+    _defineProperty(_assertThisInitialized(_this), "handleShowHide", function (e) {
+      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY)); // make room in response container for reverse translation text
 
-      if (responseContainer) {
-        height = responseContainer.clientHeight - getPadding(responseContainer).top - getPadding(responseContainer).bottom;
-        width = responseContainer.clientWidth - getPadding(responseContainer).left - getPadding(responseContainer).right;
+      if (document.getElementById("reverse-translation-".concat(_this.COMPONENT_KEY)) && getAutoQLConfig$1(_this.props.autoQLConfig).enableQueryInterpretation) {
+        if (e.isFullyOpened) {
+          responseContainer.style.height = "calc(100% - ".concat(e.contentHeight, "px)");
+        } else {
+          responseContainer.style.height = "calc(100% - 26px)";
+        }
       }
+    });
 
-      if (_this.props.height) {
-        height = _this.props.height;
-      }
+    _defineProperty(_assertThisInitialized(_this), "renderReverseTranslation", function () {
+      var queryResponse = _this.props.queryResponse;
+      var id = "reverse-translation-".concat(_this.COMPONENT_KEY);
+      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY));
 
-      if (_this.props.width) {
-        width = _this.props.width;
-      }
+      if (responseContainer && _get(queryResponse, 'data.data.interpretation')) {
+        // manipulate interpretation string to properly format various substrings
+        var reverseTranslation = _get(queryResponse, 'data.data.interpretation').replace(/(["'])(?:(?=(\\?))\2.)*?\1/gi, function (output) {
+          var text = output.replace(/'/g, '');
 
-      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
-        key: _this.COMPONENT_KEY,
-        id: "react-autoql-response-content-container-".concat(_this.COMPONENT_KEY),
+          if (_get(queryResponse, 'data.data.persistent_locked_conditions').includes(text) || _get(queryResponse, 'data.data.session_locked_conditions').includes(text)) {
+            return "\n              <a id=\"react-autoql-interpreted-value-label\" class=\"react-autoql-condition-link-filtered\">\n                <span class=\"material-icons react-autoql-custom-icon\">lock</span>\n                ".concat(' ', text, "\n              </a>\n            ");
+          } else {
+            return "<a id=\"react-autoql-interpreted-value-label\" class=\"react-autoql-condition-link\">".concat(text, "</a>");
+          }
+        }).replace(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/gi, function (output) {
+          return moment.utc(output).format('ll').toString();
+        });
+
+        return /*#__PURE__*/React.createElement("div", {
+          id: id,
+          className: "react-autoql-condition-lock-reverse-translation"
+        }, /*#__PURE__*/React.createElement("span", {
+          style: {
+            float: 'left',
+            minHeight: 20
+          } // onClick={() => {
+          //   this.setState({
+          //     isShowingInterpretation: !this.state.isShowingInterpretation
+          //   })
+          // }}
+
+        }, /*#__PURE__*/React.createElement(Icon // type={this.state.isShowingInterpretation ? 'caret-down' : 'caret-right' }
+        // data-tip={this.state.isShowingInterpretation ? "Hide query interpretation" : "Show query interpretation" }
+        , {
+          type: "info" // data-for="react-autoql-interpretation"
+
+        }), ' '), /*#__PURE__*/React.createElement(UnmountClosed, {
+          onRest: _this.handleShowHide,
+          isOpened: true // isOpened={this.state.isShowingInterpretation}
+
+        }, /*#__PURE__*/React.createElement("strong", null, "Interpreted as:", ' '), /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick(e) {
+            return _this.props.onConditionClickCallback(e);
+          },
+          dangerouslySetInnerHTML: {
+            __html: "".concat(reverseTranslation)
+          }
+        })));
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "render", function () {
+      var responseContainer = document.getElementById("react-autoql-response-content-container-".concat(_this.COMPONENT_KEY));
+      var translationContainer = document.getElementById("reverse-translation-".concat(_this.COMPONENT_KEY));
+      var height = 0;
+      var width = 0;
+
+      if (responseContainer) {
+        height = responseContainer.clientHeight - getPadding(responseContainer).top - getPadding(responseContainer).bottom;
+        width = responseContainer.clientWidth - getPadding(responseContainer).left - getPadding(responseContainer).right;
+      }
+
+      if (_this.props.height) {
+        if (translationContainer && getAutoQLConfig$1(_this.props.autoQLConfig).enableQueryInterpretation && _this.state.isShowingInterpretation) {
+          if (_this.state.isShowingInterpretation) {
+            height = _this.props.height - translationContainer.offsetHeight - 20;
+          } else {
+            height = _this.props.height - translationContainer.offsetHeight - 40;
+          }
+        } else {
+          height = _this.props.height;
+        }
+      }
+
+      if (_this.props.width) {
+        width = _this.props.width;
+      }
+
+      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
+        key: _this.COMPONENT_KEY,
+        id: "react-autoql-response-content-container-".concat(_this.COMPONENT_KEY),
         "data-test": "query-response-wrapper",
         className: "react-autoql-response-content-container\n          ".concat(isTableType(_this.state.displayType) ? 'table' : '', "\n          ").concat(_this.state.displayType === 'html' ? 'html-content' : '')
-      }, _this.renderResponse(width, height), _get(getAuthentication(_this.props.authentication), 'isQandA') && _this.renderQandAResponseConfirmation()), _this.renderContextMenu());
+      }, _this.renderResponse(width, height), _get(getAuthentication(_this.props.authentication), 'isQandA') && _this.renderQandAResponseConfirmation()), !_this.props.isDashboardQuery && getAutoQLConfig$1(_this.props.autoQLConfig).enableQueryInterpretation ? _this.renderReverseTranslation() : null, _this.renderContextMenu());
     });
 
     return _this;
@@ -11022,13 +11090,13 @@ _defineProperty(QueryOutput, "propTypes", (_defineProperty2$1 = {
   authentication: authenticationType,
   themeConfig: themeConfigType,
   autoQLConfig: autoQLConfigType
-}, _defineProperty(_defineProperty2$1, "authentication", authenticationType), _defineProperty(_defineProperty2$1, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2$1, "dataConfig", shape({})), _defineProperty(_defineProperty2$1, "onSuggestionClick", func), _defineProperty(_defineProperty2$1, "displayType", string), _defineProperty(_defineProperty2$1, "renderTooltips", bool), _defineProperty(_defineProperty2$1, "onQueryValidationSelectOption", func), _defineProperty(_defineProperty2$1, "autoSelectQueryValidationSuggestion", bool), _defineProperty(_defineProperty2$1, "queryValidationSelections", arrayOf(shape({}))), _defineProperty(_defineProperty2$1, "renderSuggestionsAsDropdown", bool), _defineProperty(_defineProperty2$1, "suggestionSelection", string), _defineProperty(_defineProperty2$1, "height", number), _defineProperty(_defineProperty2$1, "width", number), _defineProperty(_defineProperty2$1, "hideColumnCallback", func), _defineProperty(_defineProperty2$1, "activeChartElementKey", string), _defineProperty(_defineProperty2$1, "onTableFilterCallback", func), _defineProperty(_defineProperty2$1, "enableColumnHeaderContextMenu", bool), _defineProperty(_defineProperty2$1, "isResizing", bool), _defineProperty(_defineProperty2$1, "enableDynamicCharting", bool), _defineProperty(_defineProperty2$1, "onDataConfigChange", func), _defineProperty(_defineProperty2$1, "onDisplayTypeUpdate", func), _defineProperty(_defineProperty2$1, "onColumnsUpdate", func), _defineProperty(_defineProperty2$1, "onNoneOfTheseClick", func), _defineProperty(_defineProperty2$1, "autoChartAggregations", bool), _defineProperty(_defineProperty2$1, "onSupportedDisplayTypesChange", func), _defineProperty2$1));
+}, _defineProperty(_defineProperty2$1, "authentication", authenticationType), _defineProperty(_defineProperty2$1, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2$1, "dataConfig", shape({})), _defineProperty(_defineProperty2$1, "onSuggestionClick", func), _defineProperty(_defineProperty2$1, "displayType", string), _defineProperty(_defineProperty2$1, "renderTooltips", bool), _defineProperty(_defineProperty2$1, "onQueryValidationSelectOption", func), _defineProperty(_defineProperty2$1, "autoSelectQueryValidationSuggestion", bool), _defineProperty(_defineProperty2$1, "queryValidationSelections", arrayOf(shape({}))), _defineProperty(_defineProperty2$1, "renderSuggestionsAsDropdown", bool), _defineProperty(_defineProperty2$1, "suggestionSelection", string), _defineProperty(_defineProperty2$1, "height", number), _defineProperty(_defineProperty2$1, "width", number), _defineProperty(_defineProperty2$1, "hideColumnCallback", func), _defineProperty(_defineProperty2$1, "activeChartElementKey", string), _defineProperty(_defineProperty2$1, "onTableFilterCallback", func), _defineProperty(_defineProperty2$1, "enableColumnHeaderContextMenu", bool), _defineProperty(_defineProperty2$1, "isResizing", bool), _defineProperty(_defineProperty2$1, "enableDynamicCharting", bool), _defineProperty(_defineProperty2$1, "onDataConfigChange", func), _defineProperty(_defineProperty2$1, "onDisplayTypeUpdate", func), _defineProperty(_defineProperty2$1, "onColumnsUpdate", func), _defineProperty(_defineProperty2$1, "onNoneOfTheseClick", func), _defineProperty(_defineProperty2$1, "autoChartAggregations", bool), _defineProperty(_defineProperty2$1, "onSupportedDisplayTypesChange", func), _defineProperty(_defineProperty2$1, "onConditionClickCallback", func), _defineProperty(_defineProperty2$1, "isDashboardQuery", bool), _defineProperty(_defineProperty2$1, "enableQueryInterpretation", bool), _defineProperty(_defineProperty2$1, "defaultShowInterpretation", bool), _defineProperty2$1));
 
 _defineProperty(QueryOutput, "defaultProps", (_defineProperty3 = {
   authentication: authenticationDefault,
   themeConfig: themeConfigDefault,
   autoQLConfig: autoQLConfigDefault
-}, _defineProperty(_defineProperty3, "authentication", authenticationDefault), _defineProperty(_defineProperty3, "dataFormatting", dataFormattingDefault), _defineProperty(_defineProperty3, "dataConfig", undefined), _defineProperty(_defineProperty3, "queryResponse", undefined), _defineProperty(_defineProperty3, "displayType", undefined), _defineProperty(_defineProperty3, "queryInputRef", undefined), _defineProperty(_defineProperty3, "onSuggestionClick", undefined), _defineProperty(_defineProperty3, "renderTooltips", true), _defineProperty(_defineProperty3, "autoSelectQueryValidationSuggestion", true), _defineProperty(_defineProperty3, "queryValidationSelections", undefined), _defineProperty(_defineProperty3, "renderSuggestionsAsDropdown", false), _defineProperty(_defineProperty3, "selectedSuggestion", undefined), _defineProperty(_defineProperty3, "height", undefined), _defineProperty(_defineProperty3, "width", undefined), _defineProperty(_defineProperty3, "activeChartElementKey", undefined), _defineProperty(_defineProperty3, "enableColumnHeaderContextMenu", false), _defineProperty(_defineProperty3, "isResizing", false), _defineProperty(_defineProperty3, "enableDynamicCharting", true), _defineProperty(_defineProperty3, "onNoneOfTheseClick", undefined), _defineProperty(_defineProperty3, "autoChartAggregations", true), _defineProperty(_defineProperty3, "onDataClick", function onDataClick() {}), _defineProperty(_defineProperty3, "onQueryValidationSelectOption", function onQueryValidationSelectOption() {}), _defineProperty(_defineProperty3, "onSupportedDisplayTypesChange", function onSupportedDisplayTypesChange() {}), _defineProperty(_defineProperty3, "hideColumnCallback", function hideColumnCallback() {}), _defineProperty(_defineProperty3, "onTableFilterCallback", function onTableFilterCallback() {}), _defineProperty(_defineProperty3, "onDataConfigChange", function onDataConfigChange() {}), _defineProperty(_defineProperty3, "onErrorCallback", function onErrorCallback() {}), _defineProperty(_defineProperty3, "onDisplayTypeUpdate", function onDisplayTypeUpdate() {}), _defineProperty(_defineProperty3, "onColumnsUpdate", function onColumnsUpdate() {}), _defineProperty3));
+}, _defineProperty(_defineProperty3, "authentication", authenticationDefault), _defineProperty(_defineProperty3, "dataFormatting", dataFormattingDefault), _defineProperty(_defineProperty3, "dataConfig", undefined), _defineProperty(_defineProperty3, "queryResponse", undefined), _defineProperty(_defineProperty3, "displayType", undefined), _defineProperty(_defineProperty3, "queryInputRef", undefined), _defineProperty(_defineProperty3, "onSuggestionClick", undefined), _defineProperty(_defineProperty3, "renderTooltips", true), _defineProperty(_defineProperty3, "autoSelectQueryValidationSuggestion", true), _defineProperty(_defineProperty3, "queryValidationSelections", undefined), _defineProperty(_defineProperty3, "renderSuggestionsAsDropdown", false), _defineProperty(_defineProperty3, "selectedSuggestion", undefined), _defineProperty(_defineProperty3, "height", undefined), _defineProperty(_defineProperty3, "width", undefined), _defineProperty(_defineProperty3, "activeChartElementKey", undefined), _defineProperty(_defineProperty3, "enableColumnHeaderContextMenu", false), _defineProperty(_defineProperty3, "isResizing", false), _defineProperty(_defineProperty3, "enableDynamicCharting", true), _defineProperty(_defineProperty3, "onNoneOfTheseClick", undefined), _defineProperty(_defineProperty3, "autoChartAggregations", true), _defineProperty(_defineProperty3, "isDashboardQuery", false), _defineProperty(_defineProperty3, "enableFilterLocking", false), _defineProperty(_defineProperty3, "onDataClick", function onDataClick() {}), _defineProperty(_defineProperty3, "onQueryValidationSelectOption", function onQueryValidationSelectOption() {}), _defineProperty(_defineProperty3, "onSupportedDisplayTypesChange", function onSupportedDisplayTypesChange() {}), _defineProperty(_defineProperty3, "hideColumnCallback", function hideColumnCallback() {}), _defineProperty(_defineProperty3, "onTableFilterCallback", function onTableFilterCallback() {}), _defineProperty(_defineProperty3, "onDataConfigChange", function onDataConfigChange() {}), _defineProperty(_defineProperty3, "onErrorCallback", function onErrorCallback() {}), _defineProperty(_defineProperty3, "onDisplayTypeUpdate", function onDisplayTypeUpdate() {}), _defineProperty(_defineProperty3, "onColumnsUpdate", function onColumnsUpdate() {}), _defineProperty(_defineProperty3, "onConditionClickCallback", function onConditionClickCallback() {}), _defineProperty3));
 
 var VizToolbar = /*#__PURE__*/function (_React$Component) {
   _inherits(VizToolbar, _React$Component);
@@ -12086,8 +12154,18 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
           switch (_context.prev = _context.next) {
             case 0:
               _this._isMounted = true;
-
-              _this.subscribeToNotificationCount();
+              /**
+               * If Data Messenger has enableNotificationsTab = true and
+               * the NotificationIcon is also present, subscribeToNotificationCount()
+               * will occasionally trigger an infinite loop.
+               * 
+               * Data Messenger will first check to see that the NotificationIcon
+               * isn't already present before triggering this function inside.
+               */
+
+              if (!_this.props.isAlreadyMountedInDOM) {
+                _this.subscribeToNotificationCount();
+              }
 
             case 2:
             case "end":
@@ -12221,7 +12299,8 @@ _defineProperty(NotificationIcon, "propTypes", {
   useDot: PropTypes.bool,
   clearCountOnClick: PropTypes.bool,
   onNewNotification: PropTypes.func,
-  onErrorCallback: PropTypes.func
+  onErrorCallback: PropTypes.func,
+  isAlreadyMountedInDOM: PropTypes.bool
 });
 
 _defineProperty(NotificationIcon, "defaultProps", {
@@ -12231,7 +12310,8 @@ _defineProperty(NotificationIcon, "defaultProps", {
   style: {},
   clearCountOnClick: true,
   onNewNotification: function onNewNotification() {},
-  onErrorCallback: function onErrorCallback() {}
+  onErrorCallback: function onErrorCallback() {},
+  isAlreadyMountedInDOM: false
 });
 
 var _excluded$1 = ["icon", "type"];
@@ -12538,7 +12618,7 @@ var RuleSimple = /*#__PURE__*/function (_React$Component) {
             return '<';
           }
 
-        case 'EQUALS':
+        case 'EQUAL_TO':
           {
             return '=';
           }
@@ -12596,9 +12676,9 @@ var RuleSimple = /*#__PURE__*/function (_React$Component) {
           label: '<',
           tooltip: 'Less Than'
         }, {
-          value: 'EQUALS',
+          value: 'EQUAL_TO',
           label: '=',
-          tooltip: 'Equals'
+          tooltip: 'EQUAL_TO'
         }, {
           value: 'EXISTS',
           label: 'Exists',
@@ -13199,6 +13279,7 @@ var NotificationItem = /*#__PURE__*/function (_React$Component) {
         ref: function ref(r) {
           return _this.OUTPUT_REF = r;
         },
+        isDashboardQuery: true,
         queryResponse: queryResponse,
         autoQLConfig: {
           enableDrilldowns: false
@@ -15014,6 +15095,8 @@ var DataAlerts = /*#__PURE__*/function (_React$Component) {
         }
       }
 
+      _this.props.onSuccessAlert('Notification created!');
+
       _this.setState({
         isEditModalVisible: false,
         customAlertsList: newDataAlertList
@@ -15202,7 +15285,7 @@ var DataAlerts = /*#__PURE__*/function (_React$Component) {
           className: "react-autoql-re-initialize-btn-text"
         }, /*#__PURE__*/React.createElement(Icon, {
           type: "warning-triangle"
-        }), ' ', " Resend")), /*#__PURE__*/React.createElement(Checkbox, {
+        }), " Resend")), /*#__PURE__*/React.createElement(Checkbox, {
           themeConfig: getThemeConfig(_this.props.themeConfig),
           type: "switch",
           className: "react-autoql-notification-disable-checkbox"
@@ -15282,7 +15365,8 @@ _defineProperty(DataAlerts, "propTypes", {
   authentication: authenticationType,
   themeConfig: themeConfigType,
   onErrorCallback: PropTypes.func,
-  showCreateAlertBtn: PropTypes.bool
+  showCreateAlertBtn: PropTypes.bool,
+  onSuccessAlert: PropTypes.func
 });
 
 _defineProperty(DataAlerts, "defaultProps", {
@@ -15290,7 +15374,8 @@ _defineProperty(DataAlerts, "defaultProps", {
   themeConfig: themeConfigDefault,
   showCreateAlertBtn: false,
   onErrorCallback: function onErrorCallback() {},
-  onAlertInitializationCallback: function onAlertInitializationCallback() {}
+  onAlertInitializationCallback: function onAlertInitializationCallback() {},
+  onSuccessAlert: function onSuccessAlert() {}
 });
 
 var getInitialStateData$2 = function getInitialStateData(initialData) {
@@ -15559,7 +15644,7 @@ var Rule = /*#__PURE__*/function (_React$Component) {
             return '<';
           }
 
-        case 'EQUALS':
+        case 'EQUAL_TO':
           {
             return '=';
           }
@@ -15622,9 +15707,9 @@ var Rule = /*#__PURE__*/function (_React$Component) {
           label: '<',
           tooltip: 'Less Than'
         }, {
-          value: 'EQUALS',
+          value: 'EQUAL_TO',
           label: '=',
-          tooltip: 'Equals'
+          tooltip: 'EQUAL_TO'
         }, {
           value: 'EXISTS',
           label: /*#__PURE__*/React.createElement("span", null, "\u2203"),
@@ -18228,12 +18313,17 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
           optionsToolbarRef: _this.optionsToolbarRef,
           onNoneOfTheseClick: _this.props.onNoneOfTheseClick,
           autoChartAggregations: _this.props.autoChartAggregations,
+          enableQueryInterpretation: _this.props.enableQueryInterpretation,
+          enableFilterLocking: _this.props.enableFilterLocking,
           reportProblemCallback: function reportProblemCallback() {
             if (_this.optionsToolbarRef) {
               _this.optionsToolbarRef.setState({
                 activeMenu: 'other-problem'
               });
             }
+          },
+          onConditionClickCallback: function onConditionClickCallback(e) {
+            _this.props.onConditionClickCallback(e);
           }
         }));
       }
@@ -18253,7 +18343,7 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
 
           _this.scrollIntoView();
         } else {
-          messageElement.style.maxHeight = '85%';
+          messageElement.style.maxHeight = '90%';
           messageElement.style.height = "".concat(messageElement.offsetHeights, "px");
         }
       } catch (error) {
@@ -18387,7 +18477,7 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
       if (_this.props.type === 'text' || _this.state.displayType === 'html') {
         return undefined;
       } else if (chartHeight) {
-        return chartHeight + 40;
+        return chartHeight + 120;
       }
 
       return '85%';
@@ -18408,23 +18498,6 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderLockedConditions", function () {
-      var response = _this.props.response;
-
-      var numRows = _get(response, 'data.data.rows.length');
-
-      var maxRowLimit = _get(response, 'data.data.row_limit');
-
-      if (_get(response, 'data.data.persistent_locked_conditions.length') > 0) {
-        return /*#__PURE__*/React.createElement(Icon, {
-          type: "lock",
-          className: maxRowLimit && numRows === maxRowLimit && !_this.allColumnsAreHidden() ? 'condition-info-icon-left-align' : 'condition-info-icon',
-          "data-tip": response.data.data.persistent_locked_conditions,
-          "data-for": "chart-element-tooltip"
-        });
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this), "render", function () {
       var _this$getChartDimensi2 = _this.getChartDimensions(),
           chartWidth = _this$getChartDimensi2.chartWidth,
@@ -18449,7 +18522,7 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
             return !col.visible;
           }) || _this.allColumnsAreHidden() ? '400px' : undefined
         }
-      }, _this.renderContent(chartWidth, chartHeight), _this.props.isDataMessengerOpen && _this.renderRightToolbar(), _this.props.isDataMessengerOpen && _this.renderLeftToolbar(), _this.renderDataLimitWarning(), _this.renderLockedConditions())));
+      }, _this.renderContent(chartWidth, chartHeight), _this.props.isDataMessengerOpen && _this.renderRightToolbar(), _this.props.isDataMessengerOpen && _this.renderLeftToolbar(), _this.renderDataLimitWarning())));
     });
 
     return _this;
@@ -18477,7 +18550,7 @@ _defineProperty(ChatMessage, "propTypes", (_defineProperty2 = {
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]),
   tableOptions: PropTypes.shape({}),
   enableColumnVisibilityManager: PropTypes.bool
-}, _defineProperty(_defineProperty2, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2, "onErrorCallback", PropTypes.func), _defineProperty(_defineProperty2, "onSuccessAlert", PropTypes.func), _defineProperty(_defineProperty2, "isResizing", PropTypes.bool), _defineProperty(_defineProperty2, "enableDynamicCharting", PropTypes.bool), _defineProperty(_defineProperty2, "scrollToBottom", PropTypes.func), _defineProperty(_defineProperty2, "onNoneOfTheseClick", PropTypes.func), _defineProperty(_defineProperty2, "autoChartAggregations", PropTypes.bool), _defineProperty2));
+}, _defineProperty(_defineProperty2, "dataFormatting", dataFormattingType), _defineProperty(_defineProperty2, "onErrorCallback", PropTypes.func), _defineProperty(_defineProperty2, "onSuccessAlert", PropTypes.func), _defineProperty(_defineProperty2, "isResizing", PropTypes.bool), _defineProperty(_defineProperty2, "enableDynamicCharting", PropTypes.bool), _defineProperty(_defineProperty2, "scrollToBottom", PropTypes.func), _defineProperty(_defineProperty2, "onNoneOfTheseClick", PropTypes.func), _defineProperty(_defineProperty2, "autoChartAggregations", PropTypes.bool), _defineProperty(_defineProperty2, "onConditionClickCallback", PropTypes.func), _defineProperty2));
 
 _defineProperty(ChatMessage, "defaultProps", {
   authentication: authenticationDefault,
@@ -18502,7 +18575,8 @@ _defineProperty(ChatMessage, "defaultProps", {
   enableDynamicCharting: true,
   autoChartAggregations: true,
   scrollToBottom: function scrollToBottom() {},
-  onNoneOfTheseClick: function onNoneOfTheseClick() {}
+  onNoneOfTheseClick: function onNoneOfTheseClick() {},
+  onConditionClickCallback: function onConditionClickCallback() {}
 });
 
 var QueryTipsTab = /*#__PURE__*/function (_React$Component) {
@@ -18804,15 +18878,30 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "UNIQUE_ID", uuid.v4());
 
+    _defineProperty(_assertThisInitialized(_this), "mouseInfoRef", /*#__PURE__*/createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "mouseSettingRef", /*#__PURE__*/createRef());
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       inputValue: '',
       lastQuery: '',
       suggestions: [],
-      selectedConditions: []
+      selectedConditions: [],
+      isFetchingConditions: false,
+      isShowingInfo: false,
+      isShowingSettingInfo: false,
+      showMessage: {
+        type: 'unlock',
+        message: 'filter removed'
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
       try {
+        _this.setState({
+          isFetchingConditions: true
+        });
+
         fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
           var conditions = _get(response, 'data.data.data');
 
@@ -18829,42 +18918,79 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             });
           }
 
-          _this.setState({
-            selectedConditions: array,
-            inputValue: ''
-          });
+          if (JSON.parse(sessionStorage.getItem("conditions")) !== null) {
+            var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+            for (var _i = 0; _i < sessionConditions.length; _i++) {
+              array.push({
+                id: sessionConditions[_i].id,
+                keyword: sessionConditions[_i].value,
+                value: sessionConditions[_i].value,
+                show_message: sessionConditions[_i].show_message,
+                key: sessionConditions[_i].key,
+                lock_flag: sessionConditions[_i].lock_flag
+              });
+            }
+          }
+
+          if (_this.props.initFilterText && _this.props.initFilterText !== '') {
+            _this.setState({
+              selectedConditions: array.sort(),
+              isFetchingConditions: false
+            });
+
+            for (var _i2 = 0; _i2 < array.length; _i2++) {
+              if (array[_i2].keyword === _this.props.initFilterText) {
+                _this.handleHighlightFilterRow(_i2);
+
+                return;
+              }
+            }
+
+            _this.animateInputTextAndSubmit(_this.props.initFilterText);
+          } else {
+            _this.setState({
+              selectedConditions: array.sort(),
+              inputValue: '',
+              isFetchingConditions: false
+            });
+          }
         });
       } catch (error) {
         console.error(error);
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSuggestions", function (value) {
-      var inputValue = value.trim().toLowerCase();
-      var inputLength = inputValue.length;
-      return inputLength === 0 ? [] : languages.filter(function (lang) {
-        return lang.name.toLowerCase().slice(0, inputLength) === inputValue;
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "getSuggestionValue", function (suggestion) {
       var array = _this.state.selectedConditions;
-      array.push({
-        keyword: suggestion.name.keyword,
-        value: suggestion.name.keyword,
-        show_message: suggestion.name.show_message,
-        key: suggestion.name.canonical,
-        lock_flag: suggestion.name.lock_flag
-      });
+      var tempId = uuid.v4();
 
-      _this.setState({
-        selectedConditions: array,
-        inputValue: ''
-      });
-    });
+      if (array.some(function (item) {
+        return item.key === suggestion.name.canonical && item.value === suggestion.name.keyword;
+      })) {
+        _this.handleShowMessage('warning', 'This condition has already been applied.');
+      } else {
+        array.push({
+          id: tempId,
+          keyword: suggestion.name.keyword,
+          value: suggestion.name.keyword,
+          show_message: suggestion.name.show_message,
+          key: suggestion.name.canonical,
+          lock_flag: 1 // persist by default
+
+        });
+
+        _this.setState({
+          selectedConditions: array,
+          inputValue: ''
+        });
 
-    _defineProperty(_assertThisInitialized(_this), "renderSuggestion", function (suggestion) {
-      return /*#__PURE__*/React.createElement("div", null, _get(suggestion, 'name.keyword'));
+        setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
+          conditions: array
+        })).then(function () {
+          _this.handleShowMessage('lock', "".concat(suggestion.name.keyword, " has been locked"));
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputChange", function (e) {
@@ -18881,27 +19007,64 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "removeCondition", function (item, index) {
-      var isSaved;
-      fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
-        _get(response, 'data.data.data').map(function (r) {
-          if (_includes(r, item.id)) {
-            isSaved = true;
-          }
+      var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+      var sessionIndex;
+
+      if (sessionConditions) {
+        sessionIndex = sessionConditions.findIndex(function (condition) {
+          return _get(condition, 'key') === _get(item, 'key');
         });
+      }
 
-        if (isSaved) {
-          unsetCondition(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
-            condition: item
-          }));
-        }
+      if (sessionIndex !== -1 && sessionIndex !== undefined && sessionIndex !== null) {
+        sessionConditions.splice(sessionIndex, 1);
+        sessionStorage.setItem('conditions', JSON.stringify(sessionConditions));
+      } else {
+        unsetCondition(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
+          condition: item
+        }));
+      }
+
+      var array = _this.state.selectedConditions;
+      array.splice(index, 1);
+
+      _this.setState({
+        selectedConditions: array
+      });
 
-        var array = _this.state.selectedConditions;
-        array.splice(index, 1);
+      _this.handleShowMessage('unlock', 'Filter removed.');
 
+      ReactTooltip.hide();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handlePersistConditionToggle", function (item) {
+      var index = _this.state.selectedConditions.findIndex(function (condition) {
+        return condition.id === item.id;
+      });
+
+      var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+      if (index === -1) ; else {
         _this.setState({
-          selectedConditions: array
+          selectedConditions: [].concat(_toConsumableArray(_this.state.selectedConditions.slice(0, index)), [Object.assign({}, _this.state.selectedConditions[index], item.lock_flag === 1 ? _this.state.selectedConditions[index].lock_flag = 0 : _this.state.selectedConditions[index].lock_flag = 1)], _toConsumableArray(_this.state.selectedConditions.slice(index + 1)))
+        }, function () {
+          setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
+            conditions: _this.state.selectedConditions
+          }));
+
+          if (item.lock_flag === 0) {
+            if (sessionConditions == null) sessionConditions = [];
+            sessionConditions.push(item);
+            sessionStorage.setItem("conditions", JSON.stringify(sessionConditions));
+          } else {
+            var sessionIndex = sessionConditions.findIndex(function (condition) {
+              return condition.id === item.id;
+            });
+            sessionConditions.splice(sessionIndex, 1);
+            sessionStorage.setItem('conditions', JSON.stringify(sessionConditions));
+          }
         });
-      });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onSuggestionsFetchRequested", function (_ref) {
@@ -18925,13 +19088,13 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
           for (var i = 0; i < suggestionsMatchArray.length; i++) {
             sortingArray.push(suggestionsMatchArray[i]);
 
-            if (i === 4) {
+            if (i === 5) {
               break;
             }
           }
 
           sortingArray.sort(function (a, b) {
-            return b.length - a.length;
+            return a.keyword.toUpperCase() < b.keyword.toUpperCase() ? -1 : a.keyword > b.keyword ? 1 : 0;
           });
 
           for (var idx = 0; idx < sortingArray.length; idx++) {
@@ -18956,6 +19119,65 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "timer", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "onEnterFilterHeaderInfo", function () {
+      var el = document.getElementById('react-autoql-filter-description-id');
+      _this.timer = setTimeout(function () {
+        el.className = 'show';
+      }, 500);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onLeaveFilterHeaderInfo", function () {
+      var el = document.getElementById('react-autoql-filter-description-id');
+      el.className = el.className.replace('show', '');
+      clearTimeout(_this.timer);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onEnterFilterSettingInfo", function () {
+      var el = document.getElementById('react-autoql-filter-setting-info-card');
+      _this.timer = setTimeout(function () {
+        el.className = 'show';
+      }, 500);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onLeaveFilterSettingInfo", function () {
+      var el = document.getElementById('react-autoql-filter-setting-info-card');
+      el.className = el.className.replace('show', '');
+      clearTimeout(_this.timer);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "animateInputTextAndSubmit", function (text) {
+      if (typeof text === 'string' && _get(text, 'length')) {
+        var _loop = function _loop(i) {
+          setTimeout(function () {
+            _this.setState({
+              inputValue: text.slice(0, i)
+            });
+
+            if (i === text.length) {
+              setTimeout(function () {
+                var input = document.querySelector('#react-autoql-filter-menu-input');
+                input.focus();
+              }, 300);
+            }
+          }, i * 50);
+        };
+
+        for (var i = 1; i <= text.length; i++) {
+          _loop(i);
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderShowMessage", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        id: "react-autoql-condition-show-message"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: _this.state.showMessage.type
+      }), " ", _this.state.showMessage.message);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderAcceptConditionsButton", function () {
       return /*#__PURE__*/React.createElement("div", {
         key: "accept-conditions-btn",
@@ -18986,107 +19208,211 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         style: {
           width: containerWidth
         }
-      }, /*#__PURE__*/React.createElement("div", {
+      }, _this.renderShowMessage(), /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-condition-lock-header"
       }, /*#__PURE__*/React.createElement("div", {
-        className: "autoql-condition-locking-menu-container"
-      }, /*#__PURE__*/React.createElement("button", {
+        className: "react-autoql-filter-locking-title-container"
+      }, /*#__PURE__*/React.createElement("h3", {
+        className: "react-autoql-filter-locking-title"
+      }, lang.filterLockingTitle, " ", ' ', /*#__PURE__*/React.createElement(Icon, {
+        type: "info",
+        ref: _this.mouseInfoRef,
+        onMouseEnter: _this.onEnterFilterHeaderInfo,
+        onMouseLeave: _this.onLeaveFilterHeaderInfo
+      })), /*#__PURE__*/React.createElement("button", {
         onClick: function onClick() {
           _this.props.onClose();
         },
         className: "autoql-close-button",
-        "data-tip": lang.closeConditionLocking,
+        "data-tip": lang.closeFilterLocking,
         "data-for": "react-autoql-header-tooltip"
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "close"
-      })), /*#__PURE__*/React.createElement(Autosuggest, {
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: "autoql-condition-locking-menu-container"
+      }, /*#__PURE__*/React.createElement("div", {
+        id: "react-autoql-filter-description-id"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "info"
+      }), /*#__PURE__*/React.createElement("p", {
+        className: "react-autoql-filter-info-text"
+      }, "Filters can be applied to narrow down your query results. Locking a filter ensures that only the specific data you wish to see is returned.")), /*#__PURE__*/React.createElement(Autosuggest, {
         ref: function ref(_ref2) {
           _this.autoSuggest = _ref2;
         },
+        id: "react-autoql-filter-menu-input",
+        highlightFirstSuggestion: true,
         suggestions: _this.state.suggestions,
         onSuggestionsFetchRequested: _this.onSuggestionsFetchRequested,
         onSuggestionsClearRequested: _this.onSuggestionsClearRequested,
         getSuggestionValue: _this.getSuggestionValue,
         renderSuggestion: function renderSuggestion(suggestion) {
-          return /*#__PURE__*/React.createElement(Fragment, null, suggestion.name.keyword);
+          return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+            id: "react-autoql-filter-table",
+            className: "autoql-condition-locking-menu-list"
+          }, /*#__PURE__*/React.createElement("tr", {
+            id: "react-autoql-filter-table-row"
+          }, /*#__PURE__*/React.createElement("td", {
+            id: "react-autoql-filter-table-data",
+            style: {
+              width: 300
+            }
+          }, suggestion.name.keyword), /*#__PURE__*/React.createElement("td", {
+            id: "react-autoql-filter-table-data"
+          }, suggestion.name.show_message))));
         },
         inputProps: {
           onChange: _this.onInputChange,
           value: _this.state.inputValue,
-          placeholder: 'Search for a condition.',
-          className: 'react-autoql-condition-locking-input'
+          disabled: _this.state.isFetchingConditions,
+          placeholder: 'Search & select a filter',
+          className: 'react-autoql-condition-locking-input',
+          id: 'react-autoql-filter-menu-input'
         }
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: "condition-list"
+      }), /*#__PURE__*/React.createElement("div", {
+        id: "react-autoql-filter-setting-info-card"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "react-autoql-filter-info-text"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "info"
+      }), ' ', /*#__PURE__*/React.createElement("strong", null, "Persistent"), " filters remain locked at all times, unless the filter is removed.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Icon, {
+        type: "info"
+      }), ' ', /*#__PURE__*/React.createElement("strong", null, "Session"), " filters remain locked until you end your browser session.")))), _this.state.isFetchingConditions ? /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-condition-list-loading-container"
+      }, /*#__PURE__*/React.createElement(LoadingDots, null)) : /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-condition-list"
       }, _get(_this.state.selectedConditions, 'length') === 0 ? /*#__PURE__*/React.createElement("div", {
-        className: "empty-condition-list"
-      }, /*#__PURE__*/React.createElement("p", null, "Condition locking is a tool to help you track a condition across many queries. This is useful if you want to focus on a specific location or timeframe but don't want to have to type it out for every query."), /*#__PURE__*/React.createElement("p", null, "You currently have no conditions locked. Use the search bar to find a condition you would like to track.")) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-empty-condition-list"
+      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("i", null, lang.noFiltersLocked))) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", {
+        className: "react-autoql-condition-table"
+      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         style: {
-          minHeight: 100
-        }
-      }, /*#__PURE__*/React.createElement("table", {
-        className: "condition-table"
-      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("th", {
-        scope: "col"
-      }, "Condition"), /*#__PURE__*/React.createElement("th", {
-        scope: "col"
-      }, "Category"), /*#__PURE__*/React.createElement("th", {
-        scope: "col",
+          width: '60%'
+        }
+      }, "Filter"), /*#__PURE__*/React.createElement("th", null, "Settings", /*#__PURE__*/React.createElement(Icon, {
+        type: "info",
+        ref: _this.mouseSettingRef,
+        onMouseEnter: _this.onEnterFilterSettingInfo,
+        onMouseLeave: _this.onLeaveFilterSettingInfo
+      })), /*#__PURE__*/React.createElement("th", {
         style: {
           display: 'table-cell',
           verticalAlign: 'middle',
-          textAlign: 'right'
+          textAlign: 'right',
+          width: '35px'
         }
-      }, "Actions")), /*#__PURE__*/React.createElement("tbody", null, _this.state.selectedConditions.map(function (item, index) {
+      }))), /*#__PURE__*/React.createElement("tbody", null, _this.state.selectedConditions.map(function (item, index) {
         return /*#__PURE__*/React.createElement("tr", {
-          key: index
-        }, /*#__PURE__*/React.createElement("td", null, item.keyword), /*#__PURE__*/React.createElement("td", null, item.show_message), /*#__PURE__*/React.createElement("td", {
+          key: index,
+          id: "react-autoql-condition-table-list-item-".concat(index)
+        }, /*#__PURE__*/React.createElement("td", {
+          className: "react-autoql-condition-table-list-item"
+        }, item.keyword, ' ', "(".concat(item.show_message, ")")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Switch, {
+          onChange: function onChange() {
+            return _this.handlePersistConditionToggle(item, index);
+          },
+          checked: item.lock_flag,
+          onColor: "#86d3ff",
+          onHandleColor: "#2693e6",
+          uncheckedIcon: false,
+          checkedIcon: false,
+          boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
+          activeBoxShadow: "0px 0px 1px 1px rgba(0, 0, 0, 0.2)",
+          handleDiameter: 16,
+          height: 18,
+          width: 34
+        }), ' ', item.lock_flag ? 'Persistent' : 'Session')), /*#__PURE__*/React.createElement("td", {
+          id: "react-autoql-remove-filter-container",
           style: {
             display: 'table-cell',
             verticalAlign: 'middle',
-            textAlign: 'right'
+            textAlign: 'right',
+            width: '35px'
           }
         }, /*#__PURE__*/React.createElement(ReactTooltip, {
-          className: "react-autoql-chart-tooltip",
-          id: "condition-lock-persist",
-          effect: "solid",
-          html: true
-        }), /*#__PURE__*/React.createElement(ReactTooltip, {
           className: "react-autoql-chart-tooltip",
           id: "react-autoql-remove-condition",
           effect: "solid",
           html: true
         }), /*#__PURE__*/React.createElement(Icon, {
+          id: "react-autoql-remove-filtered-condition-icon",
           style: {
             paddingLeft: 5,
-            color: 'red'
+            color: 'red',
+            cursor: 'pointer'
           },
-          "data-tip": "Remove this condition",
+          "data-tip": "Remove filter",
           "data-for": "react-autoql-remove-condition",
           type: "trash",
           onClick: function onClick() {
             return _this.removeCondition(item, index);
           }
         })));
-      })), /*#__PURE__*/React.createElement("tfoot", null)))), _this.renderAcceptConditionsButton())));
+      })), /*#__PURE__*/React.createElement("tfoot", null))))), /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-condition-lock-menu-footer"
+      }, /*#__PURE__*/React.createElement(Button, {
+        size: "small",
+        disabled: _this.state.isFetchingConditions,
+        onClick: function onClick() {
+          _this.props.onClose();
+        }
+      }, "Continue"))));
     });
 
     return _this;
   }
 
+  _createClass(ConditionLockMenu, [{
+    key: "handleShowMessage",
+    value: function handleShowMessage(type, message) {
+      var el = document.getElementById('react-autoql-condition-show-message');
+      el.className = 'show';
+      el.style.animation = 'none';
+      setTimeout(function () {
+        el.style.animation = '';
+      }, 10);
+      setTimeout(function () {
+        el.className = el.className.replace('show', '');
+      }, 3000);
+      this.setState({
+        inputValue: '',
+        showMessage: {
+          type: type,
+          message: message
+        }
+      });
+    }
+  }, {
+    key: "handleHighlightFilterRow",
+    value: function handleHighlightFilterRow(index) {
+      var el = document.getElementById("react-autoql-condition-table-list-item-".concat(index));
+
+      if (el) {
+        el.className = 'react-autoql-highlight-row';
+        setTimeout(function () {
+          el.className = el.className.replace('react-autoql-highlight-row', '');
+        }, 1800);
+      }
+    }
+  }]);
+
   return ConditionLockMenu;
 }(React.Component);
 
 _defineProperty(ConditionLockMenu, "propTypes", {
-  containerWidth: PropTypes.string,
+  containerWidth: PropTypes.number,
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
-  authentication: authenticationType
+  authentication: authenticationType,
+  initFilterText: PropTypes.string
 });
 
 _defineProperty(ConditionLockMenu, "defaultProps", {
   containerWidth: undefined,
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  isOpen: false,
+  authentication: undefined,
+  initFilterText: undefined
 });
 
 var DataMessenger = /*#__PURE__*/function (_React$Component) {
@@ -19113,7 +19439,8 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       isResizing: false,
       lastMessageId: undefined,
       isOptionsDropdownOpen: false,
-      isConditionLockingMenuOpen: false,
+      isFilterLockingMenuOpen: false,
+      selectedValueLabel: undefined,
       conditions: undefined,
       messages: [],
       queryTipsList: undefined,
@@ -19145,11 +19472,20 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       } // WIP
 
 
-      fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
-        _this.setState({
-          conditions: _get(response, 'data.data.data')
+      try {
+        fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
+          var sessionConditions = JSON.parse(sessionStorage.getItem('conditions'));
+
+          _this.setState({
+            conditions: {
+              persistent: _get(response, 'data.data.data'),
+              session: sessionConditions
+            }
+          });
         });
-      });
+      } catch (e) {
+        console.error(e);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps, prevState) {
@@ -19179,6 +19515,26 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         if (thisTheme && thisTheme !== prevTheme) {
           setCSSVars(getThemeConfig(getThemeConfig(_this.props.themeConfig)));
         }
+
+        if (_this.state.isFilterLockingMenuOpen !== prevState.isFilterLockingMenuOpen) {
+          fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
+            var sessionConditions = JSON.parse(sessionStorage.getItem('conditions'));
+
+            _this.setState({
+              conditions: {
+                persistent: _get(response, 'data.data.data'),
+                session: sessionConditions
+              }
+            });
+          });
+        }
+
+        if (_this.state.activePage !== prevState.activePage) {
+          _this.setState({
+            isFilterLockingMenuOpen: false,
+            selectedValueLabel: undefined
+          });
+        }
       } catch (error) {
         console.error(error);
 
@@ -19297,7 +19653,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         messages: introMessages,
         lastMessageId: introMessages[introMessages.length - 1].id,
         isOptionsDropdownOpen: false,
-        isConditionLockingMenuOpen: false
+        isFilterLockingMenuOpen: false
       });
     });
 
@@ -19359,7 +19715,10 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       }
 
       if (_this.props.onMaskClick) {
-        _this.props.onMaskClick();
+        _this.setState({
+          isFilterLockingMenuOpen: false,
+          selectedValueLabel: undefined
+        }, _this.props.onMaskClick());
       }
 
       if (_this.props.onHandleClick) {
@@ -19639,7 +19998,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getConditionMenuPosition", function () {
+    _defineProperty(_assertThisInitialized(_this), "getFilterMenuPosition", function () {
       switch (_this.getPlacementProp()) {
         case 'right':
           return {
@@ -19733,6 +20092,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           },
           overflowCount: 9,
           useDot: true,
+          isAlreadyMountedInDOM: /*#__PURE__*/React.isValidElement( /*#__PURE__*/React.createElement(NotificationIcon, null)),
           onNewNotification: function onNewNotification() {
             // If a new notification is detected, refresh the list
             if (_this.notificationListRef && _this.state.activePage === 'notifications') {
@@ -19747,24 +20107,24 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "renderOptionsDropdown", function () {
       if (_this.state.activePage === 'data-messenger') {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-          id: "condition-dropdown",
+          id: "react-autoql-filter-menu-dropdown",
           style: {
             justifyContent: 'left',
             position: 'absolute',
             right: 30
           }
-        }, window.location.href.includes('localhost') || window.location.href.includes('chata-ai-test-page') ? /*#__PURE__*/React.createElement("button", {
-          id: "condition-dropdown",
+        }, getAutoQLConfig$1(getAutoQLConfig$1(_this.props.autoQLConfig)).enableFilterLocking ? /*#__PURE__*/React.createElement("button", {
+          id: "react-autoql-filter-menu-dropdown-button",
           onClick: function onClick() {
             _this.setState({
-              isConditionLockingMenuOpen: !_this.state.isConditionLockingMenuOpen
+              isFilterLockingMenuOpen: !_this.state.isFilterLockingMenuOpen
             });
           },
           className: "react-autoql-drawer-header-btn clear-all",
-          "data-tip": lang.dataMessengerOptions,
+          "data-tip": lang.openFilterLocking,
           "data-for": "react-autoql-header-tooltip"
         }, /*#__PURE__*/React.createElement(Icon, {
-          type: _get(_this.state.conditions, 'length') > 0 ? "lock" : "unlock"
+          type: _get(_this.state.conditions, 'persistent.length') > 0 || _get(_this.state.conditions, 'session.length') > 0 ? 'lock' : 'unlock'
         })) : /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement(Popover, {
           isOpen: _this.state.isOptionsDropdownOpen,
           onClickOutside: function onClickOutside() {
@@ -19812,7 +20172,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
             });
           },
           className: "react-autoql-drawer-header-btn clear-all",
-          "data-tip": lang.dataMessengerOptions,
+          "data-tip": lang.clearDataResponses,
           "data-for": "react-autoql-header-tooltip"
         }, /*#__PURE__*/React.createElement(Icon, {
           type: "trash"
@@ -19840,23 +20200,11 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       }, title);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderShowSuccessMessage", function () {
-      return /*#__PURE__*/React.createElement("div", {
-        id: "condition-lock-snackbar-success"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "check"
-      }), " Conditions Applied");
-    });
-
     _defineProperty(_assertThisInitialized(_this), "renderHeaderContent", function () {
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-header-left-container"
       }, /*#__PURE__*/React.createElement("button", {
         onClick: function onClick() {
-          _this.setState({
-            isConditionLockingMenuOpen: false
-          });
-
           _this.props.onHandleClick();
         },
         className: "react-autoql-drawer-header-btn close",
@@ -19864,9 +20212,25 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         "data-for": "react-autoql-header-tooltip"
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "close"
-      }))), /*#__PURE__*/React.createElement(Popover, {
-        containerStyle: _this.getConditionMenuPosition(),
-        isOpen: _this.state.isConditionLockingMenuOpen,
+      }))), !getAutoQLConfig$1(getAutoQLConfig$1(_this.props.autoQLConfig)).enableFilterLocking && _this.state.isFilterLockingMenuOpen ? /*#__PURE__*/React.createElement("div", {
+        className: "react-autoql-header-center-container"
+      }, _this.renderHeaderTitle()) : /*#__PURE__*/React.createElement(Popover, {
+        containerStyle: _this.getFilterMenuPosition(),
+        isOpen: _this.state.isFilterLockingMenuOpen,
+        onClickOutside: function onClickOutside(e) {
+          /**
+           * Because the popover anchor is over the header title instead of the button,
+           * the button is considered part of an "outside" event. This also includes
+           * some elements inside of the popover as well for some reason.
+           * 
+           * This is a hacky solution, but it works.
+           */
+          if (_get(e, 'target.id') !== 'react-autoql-interpreted-value-label' && _get(e, 'target.parentElement.parentElement.parentElement.id') !== 'react-autoql-filter-menu-dropdown-button' && _get(e, 'target.parentElement.parentElement.parentElement.id') !== 'react-autoql-filter-menu-dropdown' && _get(e, 'target.parentElement.id') !== 'react-autoql-filter-table-row' && _get(e, 'target.parentElement.id') !== 'react-autoql-remove-filtered-condition-icon' && _get(e, 'target.parentElement.parentElement.id') !== 'react-autoql-remove-filtered-condition-icon' && _get(e, 'target.parentElement.id') !== 'react-autoql-remove-filter-container' && !_get(e, 'target.classList.value').includes('react-autoql-drawer-resize-handle')) {
+            _this.setState({
+              isFilterLockingMenuOpen: false
+            });
+          }
+        },
         position: "bottom",
         padding: 2,
         align: "center",
@@ -19878,24 +20242,18 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(ConditionLockMenu, {
           authentication: getAuthentication(getAuthentication(_this.props.authentication)),
           containerWidth: _this.getDrawerWidth(),
-          isOpen: _this.state.isConditionLockingMenuOpen,
-          onClose: function onClose(isSaved) {
-            if (isSaved) {
-              var el = document.getElementById('condition-lock-snackbar-success');
-              el.className = 'show';
-              setTimeout(function () {
-                el.className = el.className.replace('show', '');
-              }, 3000);
-            }
-
+          isOpen: _this.state.isFilterLockingMenuOpen,
+          initFilterText: _this.state.selectedValueLabel,
+          onClose: function onClose() {
             _this.setState({
-              isConditionLockingMenuOpen: false
+              isFilterLockingMenuOpen: false,
+              selectedValueLabel: undefined
             });
           }
         }))
       }, /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-header-center-container"
-      }, _this.renderHeaderTitle(), _this.renderShowSuccessMessage())), /*#__PURE__*/React.createElement("div", {
+      }, _this.renderHeaderTitle())), /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-header-right-container"
       }, _this.renderOptionsDropdown()));
     });
@@ -19978,7 +20336,18 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           isResizing: _this.state.isResizing,
           enableDynamicCharting: _this.props.enableDynamicCharting,
           onNoneOfTheseClick: _this.onNoneOfTheseClick,
-          autoChartAggregations: _this.props.autoChartAggregations
+          autoChartAggregations: _this.props.autoChartAggregations,
+          onConditionClickCallback: function onConditionClickCallback(e) {
+            if (_get(e, 'target.classList.value').includes('react-autoql-condition-link')) {
+              _this.setState({
+                selectedValueLabel: _get(e, 'target.innerText').replace('lock ', '').trim()
+              });
+            }
+
+            _this.setState({
+              isFilterLockingMenuOpen: true
+            });
+          }
         });
       })), _this.state.isChataThinking && /*#__PURE__*/React.createElement("div", {
         className: "response-loading-container"
@@ -20324,7 +20693,12 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         width: _this.getDrawerWidth(),
         height: _this.getDrawerHeight(),
         onMaskClick: _this.handleMaskClick,
-        onHandleClick: _this.props.onHandleClick,
+        onHandleClick: function onHandleClick() {
+          _this.setState({
+            isFilterLockingMenuOpen: false,
+            selectedValueLabel: undefined
+          }, _this.props.onHandleClick);
+        },
         afterVisibleChange: _this.props.onVisibleChange,
         handler: _this.getHandlerProp(),
         level: _this.props.shiftScreen ? 'all' : null,
@@ -20380,6 +20754,36 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
+  }, {
+    key: "removeDuplicateMessengerInstance",
+    value:
+    /**
+     * For some indiscernible reason, the Data Messenger drawer duplicates itself in the DOM.
+     * three times when first opened, then a number more times with each and every query
+     * being made.
+     *
+     * This function removes unnecessary duplicate instances of the Data Messenger Drawer
+     * and should help improve performance a bit by reducing the amount of renders.
+     *
+     * https://stackoverflow.com/questions/57946748/remove-duplicate-dom-element-javascript-not-jquery
+     */
+    function removeDuplicateMessengerInstance() {
+      var instance = {};
+
+      var _iterator = _createForOfIteratorHelper(document.querySelectorAll('.ReactModalPortal')),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+          if (instance[item]) item.parentNode.removeChild(item);else instance[item] = true;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
   }]);
 
   return DataMessenger;
@@ -20415,6 +20819,9 @@ _defineProperty(DataMessenger, "propTypes", {
   enableDynamicCharting: bool,
   defaultTab: string,
   autoChartAggregations: bool,
+  enableQueryInterpretation: bool,
+  defaultShowInterpretation: bool,
+  enableFilterLocking: bool,
   // Callbacks
   onVisibleChange: func,
   onHandleClick: func,
@@ -20452,6 +20859,9 @@ _defineProperty(DataMessenger, "defaultProps", {
   enableDynamicCharting: true,
   defaultTab: 'data-messenger',
   autoChartAggregations: true,
+  enableQueryInterpretation: false,
+  defaultShowInterpretation: false,
+  enableFilterLocking: false,
   // Callbacks
   onHandleClick: function onHandleClick() {},
   onVisibleChange: function onVisibleChange() {},
@@ -21299,6 +21709,8 @@ var DashboardTile = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderQueryOutput", function (_ref12) {
+      var _extends2;
+
       var _ref12$queryOutputPro = _ref12.queryOutputProps,
           queryOutputProps = _ref12$queryOutputPro === void 0 ? {} : _ref12$queryOutputPro,
           _ref12$vizToolbarProp = _ref12.vizToolbarProps,
@@ -21320,24 +21732,24 @@ var DashboardTile = /*#__PURE__*/function (_React$Component) {
       }, !queryOutputProps.queryResponse || isExecuting || _this.props.isUnExecuted ? _this.renderContentPlaceholder({
         isExecuting: isExecuting,
         isExecuted: isExecuted
-      }) : /*#__PURE__*/React.createElement(Fragment, null, _this.getIsSuggestionResponse(queryOutputProps.queryResponse) && _this.renderSuggestionMessage(customMessage), !customMessage && /*#__PURE__*/React.createElement(QueryOutput, _extends({
+      }) : /*#__PURE__*/React.createElement(Fragment, null, _this.getIsSuggestionResponse(queryOutputProps.queryResponse) && _this.renderSuggestionMessage(customMessage), !customMessage && /*#__PURE__*/React.createElement(QueryOutput, _extends((_extends2 = {
         authentication: getAuthentication(_this.props.authentication),
         themeConfig: getThemeConfig(_this.props.themeConfig),
         autoQLConfig: getAutoQLConfig$1(_this.props.autoQLConfig),
         dataFormatting: getDataFormatting(_this.props.dataFormatting),
         renderTooltips: false,
         autoSelectQueryValidationSuggestion: false,
+        isDashboardQuery: true,
         autoChartAggregations: _this.props.autoChartAggregations,
         renderSuggestionsAsDropdown: _this.props.tile.h < 4,
         enableDynamicCharting: _this.props.enableDynamicCharting,
-        backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary'),
-        onDisplayTypeUpdate: function onDisplayTypeUpdate() {
-          // This is necessary to update the toolbar with the newly rendered QueryOutput
-          setTimeout(function () {
-            _this.forceUpdate();
-          }, 0);
-        }
-      }, queryOutputProps)), _this.renderDataLimitWarning()), _this.props.isEditing && /*#__PURE__*/React.createElement("div", {
+        backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary')
+      }, _defineProperty(_extends2, "isDashboardQuery", true), _defineProperty(_extends2, "onDisplayTypeUpdate", function onDisplayTypeUpdate() {
+        // This is necessary to update the toolbar with the newly rendered QueryOutput
+        setTimeout(function () {
+          _this.forceUpdate();
+        }, 0);
+      }), _extends2), queryOutputProps)), _this.renderDataLimitWarning()), _this.props.isEditing && /*#__PURE__*/React.createElement("div", {
         className: "dashboard-tile-viz-toolbar-container"
       }, _this.props.isEditing && showSplitViewBtn && _this.renderSplitViewBtn(), /*#__PURE__*/React.createElement(VizToolbar$1, _extends({
         themeConfig: getThemeConfig(_this.props.themeConfig)
@@ -21974,6 +22386,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
           dataFormatting: getDataFormatting(_this.props.dataFormatting),
           queryResponse: _this.state.activeDrilldownResponse,
           renderTooltips: false,
+          isDashboardQuery: true,
           autoChartAggregations: _this.props.autoChartAggregations,
           backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary'),
           reportProblemCallback: _this.reportProblemCallback,
@@ -21995,6 +22408,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
         dataFormatting: getDataFormatting(_this.props.dataFormatting),
         queryResponse: _this.state.activeDrilldownResponse,
         renderTooltips: false,
+        isDashboardQuery: true,
         autoChartAggregations: _this.props.autoChartAggregations,
         backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary'),
         reportProblemCallback: _this.reportProblemCallback,
@@ -22053,7 +22467,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
           displayType = tile.secondDisplayType;
           dataConfig = tile.secondDataConfig;
         } else if (tile && !_this.state.isDrilldownSecondHalf) {
-          title = tile.query;
+          title = tile.title;
           queryResponse = tile.queryResponse;
           displayType = tile.displayType;
           dataConfig = tile.dataConfig;
@@ -22092,6 +22506,7 @@ var Dashboard = /*#__PURE__*/function (_React$Component) {
           queryResponse: queryResponse,
           displayType: displayType,
           dataConfig: dataConfig,
+          isDashboardQuery: true,
           autoChartAggregations: _this.props.autoChartAggregations,
           onDataClick: function onDataClick(drilldownData, queryID) {
             _this.startDrilldown(drilldownData, queryID, tile.i);
@@ -22272,4 +22687,215 @@ _defineProperty(Dashboard, "defaultProps", {
   onChange: function onChange() {}
 });
 
+var SpeechToTextBtn = /*#__PURE__*/function (_React$Component) {
+  _inherits(SpeechToTextBtn, _React$Component);
+
+  var _super = _createSuper(SpeechToTextBtn);
+
+  function SpeechToTextBtn() {
+    var _this;
+
+    _classCallCheck(this, SpeechToTextBtn);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isRecording: false,
+      currentQuery: 0,
+      resultHistory: [],
+      currentFile: '',
+      currentBlob: '',
+      showPopoverMessage: false,
+      errorMessage: ''
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+      setCSSVars(getThemeConfig(_this.props.themeConfig));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps) {
+      if (_this.props.finalTranscript !== prevProps.finalTranscript) {
+        _this.props.onFinalTranscript(_this.props.finalTranscript);
+      } else if (_this.props.transcript !== prevProps.transcript) {
+        _this.props.onTranscriptChange(_this.props.transcript);
+      } else if (_this.props.interimTranscript !== prevProps.interimTranscript) {
+        _this.props.onTranscriptChange(_this.props.interimTranscript);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "startRecording", function () {
+      _this.setState({
+        isRecording: true
+      });
+
+      navigator.getUserMedia({
+        audio: true
+      }, function (stream) {
+        _this.stream = stream;
+        _this.recordAudio = RecordRTC(_this.stream, {
+          type: 'audio',
+          mimeType: 'audio/webm',
+          desiredSampRate: 16000,
+          recorderType: StereoAudioRecorder,
+          numberOfAudioChannels: 1
+        });
+
+        _this.recordAudio.startRecording();
+      }, function (error) {
+        console.error(JSON.stringify(error));
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onRecordStop", function (file, blob) {
+      _this.setState({
+        //  isConfirmingRecording: true,
+        currentFile: file,
+        currentBlob: blob //hasPlayedBack: false,
+
+      }, function () {
+        _this.sendWavFile(file);
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "stopRecording", function () {
+      _this.setState({
+        isRecording: false
+      });
+
+      _this.recordAudio.stopRecording(function () {
+        var blob = _this.recordAudio.getBlob();
+
+        _this.onRecordStop(_this.blobToFile(blob), blob);
+
+        try {
+          _this.stream.getTracks().forEach(function (track) {
+            return track.stop();
+          });
+        } catch (error) {
+          console.error(error);
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "blobToFile", function (theBlob) {
+      //A Blob() is almost a File() - it's just missing the two properties below which we will add
+      theBlob.lastModifiedDate = new Date();
+      theBlob.name = 'speech.wav';
+      return theBlob;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getMediaPermissionStatus", function () {
+      return navigator.permissions.query({
+        name: 'microphone'
+      }).then(function (permissionStatus) {
+        return permissionStatus.state;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function () {
+      ReactTooltip.hide();
+
+      _this.startRecording();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "sendWavFile", function (file) {
+      var url = "".concat(_this.props.authentication.domain, "/autoql/api/v1/query/speech-to-text?key=").concat(_this.props.authentication.apiKey);
+      var data = new FormData();
+      data.append('file', file, 'speech.wav');
+      var config = {
+        headers: {
+          Authorization: "Bearer ".concat(_this.props.authentication.token)
+        },
+        timeout: 30000
+      };
+      axios.post(url, data, config).then(function (res) {
+        _this.props.onTranscriptChange(res.data.data.transcription);
+      }).catch(function (error) {
+        if (error.response.status === 404) {
+          _this.setState({
+            errorMessage: 'Oops! Speech-to-text has not been enabled. Try typing a query instead.'
+          }, function () {
+            _this.setState({
+              showPopoverMessage: true
+            });
+          });
+        } else {
+          _this.setState({
+            errorMessage: 'Oops! Something wrong with your account'
+          }, function () {
+            _this.setState({
+              showPopoverMessage: true
+            });
+          });
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "render", function () {
+      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(Popover, {
+        isOpen: _this.state.showPopoverMessage,
+        padding: 20,
+        content: function content() {
+          return /*#__PURE__*/React.createElement("div", {
+            style: {
+              backgroundColor: '#FFD2D2',
+              opacity: 1,
+              paddingLeft: '10px',
+              paddingRight: '10px'
+            }
+          }, /*#__PURE__*/React.createElement(Icon, {
+            type: "warning-triangle"
+          }), " ", _this.state.errorMessage);
+        },
+        onClickOutside: function onClickOutside() {
+          return _this.setState({
+            showPopoverMessage: false
+          });
+        }
+      }, /*#__PURE__*/React.createElement("button", {
+        id: "react-autoql-voice-record-button",
+        "data-test": "speech-to-text-btn",
+        className: "chat-voice-record-button".concat(_this.state.isRecording ? ' listening' : ''),
+        onMouseDown: _this.onMouseDown,
+        onMouseUp: _this.stopRecording,
+        onMouseLeave: _this.state.isRecording ? _this.stopRecording : undefined,
+        "data-tip": "Hold for voice-to-text",
+        "data-for": "react-autoql-speech-to-text-tooltip",
+        "data-tip-disable": _this.state.isRecording
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "microphone"
+      }))), /*#__PURE__*/React.createElement(ReactTooltip, {
+        className: "react-autoql-tooltip",
+        id: "react-autoql-speech-to-text-tooltip",
+        effect: "solid",
+        delayShow: 800
+      }));
+    });
+
+    return _this;
+  }
+
+  return SpeechToTextBtn;
+}(React.Component);
+
+_defineProperty(SpeechToTextBtn, "propTypes", {
+  authentication: authenticationType,
+  themeConfig: themeConfigType,
+  transcript: PropTypes.string,
+  interimTranscript: PropTypes.string,
+  finalTranscript: PropTypes.string,
+  resetTranscript: PropTypes.func,
+  onTranscriptChange: PropTypes.func,
+  onFinalTranscript: PropTypes.func
+});
+
+_defineProperty(SpeechToTextBtn, "defaultProps", {
+  authentication: authenticationDefault,
+  themeConfig: themeConfigDefault
+});
+
 export { Dashboard, DashboardTile, DataAlertModal, DataAlerts, DataMessenger, ExpressionBuilder, ExpressionBuilderSimple, Icon, LoadingDots, NotificationFeed, NotificationIcon, NotificationItem, QueryInput, QueryOutput, ScheduleBuilder, SpeechToTextBtn as SpeechToTextButton, SpeechToTextButtonBrowser, executeDashboard, fetchQueryTips, getDefaultDisplayType, getSupportedDisplayTypes, isDisplayTypeValid, unExecuteDashboard };