react-autoql 3.5.1 → 3.5.4

package/dist/autoql.esm.js

@@ -7,7 +7,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import axios from 'axios';
 import _$1 from 'lodash';
-import React, { Fragment, Component } from 'react';
+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';
@@ -48,7 +48,6 @@ import { symbol, symbolCircle, pie, arc } from 'd3-shape';
 import { entries } from 'd3-collection';
 import 'd3-transition';
 import Drawer from 'rc-drawer';
-import 'lodash.includes';
 import _has from 'lodash.has';
 import { Scrollbars } from 'react-custom-scrollbars';
 import LocalizedStrings from 'react-localization';
@@ -1721,7 +1720,7 @@ var lang = new LocalizedStrings({
     queryPrompt: 'Type your queries here ',
     seeMore: 'See more',
     dataMessengerOptions: 'Options menu',
-    openFilterLocking: 'Open filter locking menu',
+    openFilterLocking: 'Manage Filters',
     closeFilterLocking: 'Close filter menu',
     filterLockingTitle: 'Filter Locking',
     noFiltersLocked: 'No Filters are locked yet',
@@ -1761,7 +1760,7 @@ var lang = new LocalizedStrings({
     queryPrompt: 'Escribe tus consultas aquí',
     seeMore: 'Ver más',
     dataMessengerOptions: 'Menú de opciones',
-    openFilterLocking: 'Abrir menú de filtrar',
+    openFilterLocking: 'Administrar filtros',
     closeFilterLocking: 'Cerrar menú de filtrar',
     filterLockingTitle: 'Menú de Filtro',
     noFiltersLocked: 'Ningún filtro está bloqueado todavía',
@@ -2804,7 +2803,7 @@ 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 sessionConditions = JSON.parse(sessionStorage.getItem('conditions'));
   var conditions = {};
 
   if (sessionConditions !== null) {
@@ -2916,9 +2915,6 @@ var runQuery = function runQuery() {
       source = _ref5.source,
       skipQueryValidation = _ref5.skipQueryValidation,
       AutoAEId = _ref5.AutoAEId;
-
-  // Temp for demo: decode token to get project id
-  var id;
   var base64Url;
 
   if (token) {
@@ -2929,38 +2925,35 @@ var runQuery = function runQuery() {
       var buff = Buffer.from(base64, 'base64');
       var payloadinit = buff.toString('ascii');
       var payload = JSON.parse(payloadinit);
-      id = _get(payload, 'project_id');
+      _get(payload, 'project_id');
     }
-  } // temp ignore validation for these projects
+  }
 
+  if (enableQueryValidation && !skipQueryValidation && !isQandA) {
+    return runQueryValidation({
+      text: query,
+      domain: domain,
+      apiKey: apiKey,
+      token: token
+    }).then(function (response) {
+      if (failedValidation(response)) {
+        return Promise.resolve(response);
+      }
 
-  if (id !== 'accounting-demo' && id !== 'operational-demo' && id !== 'stockmarket-demo') {
-    if (enableQueryValidation && !skipQueryValidation && !isQandA) {
-      return runQueryValidation({
-        text: query,
+      return runQueryOnly({
+        query: query,
+        userSelection: userSelection,
+        debug: debug,
+        test: test,
         domain: domain,
         apiKey: apiKey,
-        token: token
-      }).then(function (response) {
-        if (failedValidation(response)) {
-          return Promise.resolve(response);
-        }
-
-        return runQueryOnly({
-          query: query,
-          userSelection: userSelection,
-          debug: debug,
-          test: test,
-          domain: domain,
-          apiKey: apiKey,
-          token: token,
-          source: source,
-          AutoAEId: AutoAEId
-        });
-      }).catch(function (error) {
-        return Promise.reject(error);
+        token: token,
+        source: source,
+        AutoAEId: AutoAEId
       });
-    }
+    }).catch(function (error) {
+      return Promise.reject(error);
+    });
   }
 
   return runQueryOnly({
@@ -3099,9 +3092,10 @@ var fetchConditions = function fetchConditions() {
       token = _ref10.token,
       domain = _ref10.domain;
 
-  // if (!domain || !apiKey || !token) {
-  //   return Promise.reject(new Error('Unauthenticated'))
-  // }
+  if (!domain || !apiKey || !token) {
+    return Promise.reject(new Error('Unauthenticated'));
+  }
+
   var url = "".concat(domain, "/autoql/api/v1/query/condition-locking?key=").concat(apiKey);
   var config = {
     headers: {
@@ -3454,6 +3448,12 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
       if (!_isEqual(getThemeConfig(_this.props.themeConfig), getThemeConfig(prevProps.themeConfig))) {
         setCSSVars(getThemeConfig(_this.props.themeConfig));
       }
+
+      if (_this.props.inputValue !== prevProps.inputValue) {
+        _this.setState({
+          inputValue: _this.props.inputValue
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
@@ -3737,6 +3737,12 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
           queryText: _this.userSelectedValue
         });
       }
+
+      if (_this.props.isBackButtonClicked) {
+        _this.setState({
+          inputValue: ''
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "moveCaretAtEnd", function (e) {
@@ -3774,7 +3780,9 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
           onFocus: _this.moveCaretAtEnd,
           autoFocus: true
         }
-      }) // <QueryInputWithValidation
+      }) :
+      /*#__PURE__*/
+      // <QueryInputWithValidation
       //   authentication={getAuthentication(this.props.authentication)}
       //   themeConfig={getThemeConfig(this.props.themeConfig)}
       //   ref={(ref) => (this.queryValidationInputRef = ref)}
@@ -3791,7 +3799,7 @@ var QueryInput = /*#__PURE__*/function (_React$Component) {
       //     this.focus()
       //   }}
       // />
-      : /*#__PURE__*/React.createElement("input", {
+      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,
@@ -3848,7 +3856,8 @@ _defineProperty(QueryInput, "propTypes", {
   className: string,
   autoCompletePlacement: string,
   showLoadingDots: bool,
-  showChataIcon: bool
+  showChataIcon: bool,
+  inputValue: string
 });
 
 _defineProperty(QueryInput, "defaultProps", {
@@ -3862,6 +3871,8 @@ _defineProperty(QueryInput, "defaultProps", {
   className: null,
   showLoadingDots: true,
   showChataIcon: true,
+  isBackButtonClicked: false,
+  inputValue: undefined,
   source: [],
   onSubmit: function onSubmit() {},
   onResponseCallback: function onResponseCallback() {}
@@ -4876,9 +4887,9 @@ var ChataColumnChart = /*#__PURE__*/function (_Component) {
           numberColumnIndices = _this$props.numberColumnIndices,
           stringColumnIndices = _this$props.stringColumnIndices,
           onLegendTitleClick = _this$props.onLegendTitleClick,
-          bottomLegendMargin = _this$props.bottomLegendMargin;
-          _this$props.stringColumnIndex;
-          var numberColumnIndex = _this$props.numberColumnIndex,
+          bottomLegendMargin = _this$props.bottomLegendMargin,
+          stringColumnIndex = _this$props.stringColumnIndex,
+          numberColumnIndex = _this$props.numberColumnIndex,
           numberAxisTitle = _this$props.numberAxisTitle,
           stringAxisTitle = _this$props.stringAxisTitle,
           dataFormatting = _this$props.dataFormatting,
@@ -4928,7 +4939,7 @@ var ChataColumnChart = /*#__PURE__*/function (_Component) {
           xScale: xScale,
           yScale: yScale
         },
-        xCol: columns[0],
+        xCol: columns[stringColumnIndex],
         yCol: columns[numberColumnIndex],
         margins: {
           left: leftMargin,
@@ -7959,6 +7970,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;
       }
@@ -8014,7 +8029,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;
@@ -8275,7 +8294,8 @@ var ChataChart = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "renderStringColumnSelectorContent", function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: "axis-selector-container"
+        className: "axis-selector-container",
+        id: "string-column-selector-content"
       }, /*#__PURE__*/React.createElement("ul", {
         className: "axis-selector-content"
       }, _this.props.dataConfig.stringColumnIndices.map(function (colIndex, i) {
@@ -8298,7 +8318,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"
@@ -8441,7 +8463,8 @@ var ChataChart = /*#__PURE__*/function (_Component) {
       }
 
       return /*#__PURE__*/React.createElement("div", {
-        className: "axis-selector-container"
+        className: "axis-selector-container",
+        id: "legend-selector-content"
       }, /*#__PURE__*/React.createElement("ul", {
         className: "axis-selector-content"
       }, _this.props.dataConfig.stringColumnIndices.map(function (colIndex, i) {
@@ -9430,6 +9453,20 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
 
 
       if (!aDate || !bDate) {
+        //If one is a YYYY-WW
+        if (a.includes('W')) {
+          var aDateYear = a.substring(0, 4);
+          var bDateYear = b.substring(0, 4);
+
+          if (aDateYear !== bDateYear) {
+            return bDateYear - aDateYear;
+          } else {
+            var aDateWeek = a.substring(6, 8);
+            var bDateWeek = b.substring(6, 8);
+            return bDateWeek - aDateWeek;
+          }
+        }
+
         return b - a;
       }
 
@@ -10235,7 +10272,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
          */
@@ -10279,8 +10316,8 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
         // displayed differently than the data (ie. dates)
 
         col.headerFilterFunc = _this.setFilterFunction(col); // Allow proper chronological sorting for date strings
-
-        col.sorter = _this.setSorterFunction(col); // Context menu when right clicking on column header
+        // col.sorter = this.setSorterFunction(col)
+        // Context menu when right clicking on column header
 
         col.headerContext = function (e, column) {
           // Do not show native context menu
@@ -10358,7 +10395,6 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           title: 'Month',
           name: 'Month',
           field: '0',
-          // sorter: 'date',
           frozen: true,
           visible: true
         }];
@@ -10675,13 +10711,11 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderChart", function (width, height, displayType) {
-      var _React$createElement;
-
       if (!_this.chartData) {
         return 'Error: There was no data supplied for this chart';
       }
 
-      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(ChataChart, (_React$createElement = {
+      return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(ChataChart, {
         themeConfig: getThemeConfig(_this.props.themeConfig),
         ref: function ref(_ref8) {
           return _this.chartRef = _ref8;
@@ -10697,8 +10731,14 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
         backgroundColor: _this.props.backgroundColor,
         activeChartElementKey: _this.props.activeChartElementKey,
         onLegendClick: _this.onLegendClick,
-        dataConfig: _cloneDeep(_this.dataConfig)
-      }, _defineProperty(_React$createElement, "themeConfig", getThemeConfig(_this.props.themeConfig)), _defineProperty(_React$createElement, "changeStringColumnIndex", _this.onChangeStringColumnIndex), _defineProperty(_React$createElement, "changeLegendColumnIndex", _this.onChangeLegendColumnIndex), _defineProperty(_React$createElement, "changeNumberColumnIndices", _this.onChangeNumberColumnIndices), _defineProperty(_React$createElement, "onChartClick", _this.onChartClick), _defineProperty(_React$createElement, "isResizing", _this.props.isResizing), _defineProperty(_React$createElement, "enableDynamicCharting", _this.props.enableDynamicCharting), _React$createElement)));
+        dataConfig: _cloneDeep(_this.dataConfig),
+        changeStringColumnIndex: _this.onChangeStringColumnIndex,
+        changeLegendColumnIndex: _this.onChangeLegendColumnIndex,
+        changeNumberColumnIndices: _this.onChangeNumberColumnIndices,
+        onChartClick: _this.onChartClick,
+        isResizing: _this.props.isResizing,
+        enableDynamicCharting: _this.props.enableDynamicCharting
+      }));
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderHelpResponse", function () {
@@ -10975,9 +11015,9 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           var text = output.replace(/'/g, '');
 
           if (_get(queryResponse, 'data.data.persistent_locked_conditions').includes(text) || _get(queryResponse, 'data.data.session_locked_conditions').includes(text)) {
-            return "\n              <a class=\"react-autoql-condition-link-filtered\">\n                <span class=\"material-icons react-autoql-custom-icon\">lock</span>\n                ".concat(' ', text, "\n              </a>\n            ");
+            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 class=\"react-autoql-condition-link\">".concat(text, "</a>");
+            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();
@@ -10991,13 +11031,13 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
             float: 'left',
             minHeight: 20
           } // onClick={() => {
-          //   this.setState({ 
-          //     isShowingInterpretation: !this.state.isShowingInterpretation 
+          //   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" } 
+        }, /*#__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"
 
@@ -11005,9 +11045,9 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           onRest: _this.handleShowHide,
           isOpened: true // isOpened={this.state.isShowingInterpretation}
 
-        }, /*#__PURE__*/React.createElement("strong", null, "Interpreted as:", ' '), /*#__PURE__*/React.createElement("span", {
-          onClick: function onClick() {
-            return _this.props.onConditionClickCallback();
+        }, /*#__PURE__*/React.createElement("strong", null, "Interpreted as: "), /*#__PURE__*/React.createElement("span", {
+          onClick: function onClick(e) {
+            return _this.props.onConditionClickCallback(e);
           },
           dangerouslySetInnerHTML: {
             __html: "".concat(reverseTranslation)
@@ -11574,7 +11614,7 @@ var fetchNotificationCount = function fetchNotificationCount(_ref2) {
       Authorization: "Bearer ".concat(token)
     }
   });
-  var url = "".concat(domain, "/autoql/api/v1/data-alerts/notifications/summary/poll?key=").concat(apiKey, "&unacknowledged=").concat(unacknowledged);
+  var url = "".concat(domain, "/autoql/api/v1/data-alerts/notifications/summary?key=").concat(apiKey, "&unacknowledged=").concat(unacknowledged);
   var config = {
     timeout: 180000
   };
@@ -12121,6 +12161,8 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
       count: 0
     });
 
+    _defineProperty(_assertThisInitialized(_this), "timerID", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -12150,6 +12192,7 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
       _this._isMounted = false;
+      clearInterval(_this.timerID);
     });
 
     _defineProperty(_assertThisInitialized(_this), "getNotificationCount", function (currentCount) {
@@ -12175,35 +12218,46 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "subscribeToNotificationCount", function (count) {
       if (_this._isMounted) {
-        _this.getNotificationCount(count).then(function (newCount) {
-          // Got a new count, now we want to reconnect
-          _this.subscribeToNotificationCount(newCount);
+        /**
+         * For short polling notifications, we needed to set the interval on FE side.
+         * Interval set to trigger every 90 seconds. 
+         */
+        if (_this.timerID) {
+          clearInterval(_this.timerID);
+        }
 
-          _this.FAILED_POLL_ATTEMPTS = 0;
-        }).catch(function (error) {
-          if (_this.FAILED_POLL_ATTEMPTS === 5) {
-            var _error = new Error('There were 5 failed attempts to poll for notifications. Unsubscribing from notification count.');
+        _this.timerID = setInterval(function () {
+          _this.getNotificationCount(count).then(function (newCount) {
+            // Got a new count, now we want to reconnect
+            _this.subscribeToNotificationCount(newCount);
 
-            console.error(_error);
+            _this.FAILED_POLL_ATTEMPTS = 0;
+          }).catch(function (error) {
+            if (_this.FAILED_POLL_ATTEMPTS === 5) {
+              var _error = new Error('There were 5 failed attempts to poll for notifications. Unsubscribing from notification count.');
 
-            _this.props.onErrorCallback(_error);
+              console.error(_error);
 
-            return;
-          } else if (_get(error, 'response.status') == 504) {
-            // Timed out because there were no changes
-            // Let's connect again
-            _this.subscribeToNotificationCount();
-          } else {
-            // Something else went wrong, wait one second and reconnect
-            new Promise(function (resolve) {
-              return setTimeout(resolve, 1000);
-            }).then(function () {
+              _this.props.onErrorCallback(_error);
+
+              clearInterval(_this.timerID);
+              throw new Error(_error);
+            } else if (_get(error, 'response.status') == 504) {
+              // Timed out because there were no changes
+              // Let's connect again
               _this.subscribeToNotificationCount();
-            });
-          }
+            } else {
+              // Something else went wrong, wait one second and reconnect
+              new Promise(function (resolve) {
+                return setTimeout(resolve, 1000);
+              }).then(function () {
+                _this.subscribeToNotificationCount();
+              });
+            }
 
-          _this.FAILED_POLL_ATTEMPTS += 1;
-        });
+            _this.FAILED_POLL_ATTEMPTS += 1;
+          });
+        }, 90 * 1000);
       }
     });
 
@@ -13252,6 +13306,7 @@ var NotificationItem = /*#__PURE__*/function (_React$Component) {
         ref: function ref(r) {
           return _this.OUTPUT_REF = r;
         },
+        isDashboardQuery: true,
         queryResponse: queryResponse,
         autoQLConfig: {
           enableDrilldowns: false
@@ -15067,6 +15122,8 @@ var DataAlerts = /*#__PURE__*/function (_React$Component) {
         }
       }
 
+      _this.props.onSuccessAlert('Notification created!');
+
       _this.setState({
         isEditModalVisible: false,
         customAlertsList: newDataAlertList
@@ -15255,7 +15312,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"
@@ -15335,7 +15392,8 @@ _defineProperty(DataAlerts, "propTypes", {
   authentication: authenticationType,
   themeConfig: themeConfigType,
   onErrorCallback: PropTypes.func,
-  showCreateAlertBtn: PropTypes.bool
+  showCreateAlertBtn: PropTypes.bool,
+  onSuccessAlert: PropTypes.func
 });
 
 _defineProperty(DataAlerts, "defaultProps", {
@@ -15343,7 +15401,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) {
@@ -17347,7 +17406,8 @@ var Input = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       isHideColumnsModalVisible: false,
-      isSettingColumnVisibility: false
+      isSettingColumnVisibility: false,
+      reportProblemMessage: undefined
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
@@ -17678,23 +17738,29 @@ var Input = /*#__PURE__*/function (_React$Component) {
         isVisible: _this.state.activeMenu === 'other-problem',
         onClose: function onClose() {
           _this.setState({
-            activeMenu: undefined
+            activeMenu: undefined,
+            reportProblemMessage: undefined
           });
         },
         onConfirm: function onConfirm() {
-          _this.reportQueryProblem(_this.reportProblemMessage);
+          _this.reportQueryProblem(_this.state.reportProblemMessage);
 
-          _this.reportProblemMessage = undefined;
+          _this.setState({
+            reportProblemMessage: undefined
+          });
         },
         confirmLoading: _this.state.isReportingProblem,
         title: "Report a Problem",
         enableBodyScroll: true,
         width: "600px",
-        confirmText: "Report"
+        confirmText: "Report",
+        confirmDisabled: _this.state.reportProblemMessage ? false : true
       }, "Please tell us more about the problem you are experiencing:", /*#__PURE__*/React.createElement("textarea", {
         className: "report-problem-text-area",
         onChange: function onChange(e) {
-          return _this.reportProblemMessage = e.target.value;
+          return _this.setState({
+            reportProblemMessage: e.target.value
+          });
         }
       })));
     });
@@ -18290,8 +18356,8 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
               });
             }
           },
-          onConditionClickCallback: function onConditionClickCallback() {
-            _this.props.onConditionClickCallback();
+          onConditionClickCallback: function onConditionClickCallback(e) {
+            _this.props.onConditionClickCallback(e);
           }
         }));
       }
@@ -18311,7 +18377,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) {
@@ -18826,17 +18892,35 @@ _defineProperty(Cascader, "defaultProps", {
   onSeeMoreClick: undefined
 });
 
+function accentColorAssist(col, amt) {
+  var usePound = false;
+
+  if (col[0] == "#") {
+    col = col.slice(1);
+    usePound = true;
+  }
+
+  var num = parseInt(col, 16);
+  var r = (num >> 16) + amt;
+  if (r > 255) r = 255;else if (r < 0) r = 0;
+  var b = (num >> 8 & 0x00FF) + amt;
+  if (b > 255) b = 255;else if (b < 0) b = 0;
+  var g = (num & 0x0000FF) + amt;
+  if (g > 255) g = 255;else if (g < 0) g = 0;
+  return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
+}
+
 var autoCompleteArray$1 = [];
 
-var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(ConditionLockMenu, _React$Component);
+var FilterLockMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(FilterLockMenu, _React$Component);
 
-  var _super = _createSuper(ConditionLockMenu);
+  var _super = _createSuper(FilterLockMenu);
 
-  function ConditionLockMenu() {
+  function FilterLockMenu() {
     var _this;
 
-    _classCallCheck(this, ConditionLockMenu);
+    _classCallCheck(this, FilterLockMenu);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -18846,6 +18930,10 @@ 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: '',
@@ -18897,20 +18985,46 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             }
           }
 
-          _this.setState({
-            selectedConditions: array.sort(),
-            inputValue: '',
-            isFetchingConditions: false
+          array.sort(function (a, b) {
+            return a.keyword.toUpperCase() < b.keyword.toUpperCase() ? -1 : a.keyword > b.keyword ? 1 : 0;
           });
+
+          if (_this.props.initFilterText && _this.props.initFilterText !== '') {
+            _this.setState({
+              selectedConditions: array,
+              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,
+              inputValue: '',
+              isFetchingConditions: false
+            });
+          }
         });
       } catch (error) {
         console.error(error);
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProps, predState) {
+      if (!_isEqual(getThemeConfig(_this.props.themeConfig), getThemeConfig(prevProps.themeConfig))) {
+        setCSSVars(getThemeConfig(_this.props.themeConfig));
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getSuggestionValue", function (suggestion) {
       var array = _this.state.selectedConditions;
-      var tempId = uuid.v4();
 
       if (array.some(function (item) {
         return item.key === suggestion.name.canonical && item.value === suggestion.name.keyword;
@@ -18918,7 +19032,6 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         _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,
@@ -18928,13 +19041,16 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         });
 
         _this.setState({
-          selectedConditions: array,
           inputValue: ''
         });
 
         setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
           conditions: array
-        }));
+        })).then(function () {
+          _this.handleShowMessage('lock', "".concat(suggestion.name.keyword, " has been locked"));
+
+          _this.handleFetchFilteredList();
+        });
       }
     });
 
@@ -18971,11 +19087,7 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       }
 
       var array = _this.state.selectedConditions;
-      array.splice(index, 1);
-
-      _this.setState({
-        selectedConditions: array
-      });
+      array.splice(index, 1); // this.setState({ selectedConditions: array })
 
       _this.handleShowMessage('unlock', 'Filter removed.');
 
@@ -18995,7 +19107,9 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         }, function () {
           setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
             conditions: _this.state.selectedConditions
-          }));
+          })).then(function () {
+            _this.handleFetchFilteredList();
+          });
 
           if (item.lock_flag === 0) {
             if (sessionConditions == null) sessionConditions = [];
@@ -19064,6 +19178,57 @@ 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"
@@ -19072,32 +19237,10 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
       }), " ", _this.state.showMessage.message);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderAcceptConditionsButton", function () {
-      return /*#__PURE__*/React.createElement("div", {
-        key: "accept-conditions-btn",
-        className: "react-autoql-accept-conditions-button"
-      }, /*#__PURE__*/React.createElement("span", {
-        onClick: function onClick() {
-          setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
-            conditions: _this.state.selectedConditions
-          })).then(function () {
-            _this.props.onClose(true);
-          }).catch(function (e) {
-            //WIP showErrorMessage
-            console.error(e);
-          });
-        }
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "lock",
-        style: {
-          verticalAlign: 'middle'
-        }
-      }), " Save"));
-    });
-
     _defineProperty(_assertThisInitialized(_this), "render", function () {
       var containerWidth = _this.props.containerWidth;
       return /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement("div", {
+        "data-test": "react-autoql-filter-menu-container",
         className: "react-autoql-condition-lock-menu",
         style: {
           width: containerWidth
@@ -19110,18 +19253,9 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         className: "react-autoql-filter-locking-title"
       }, lang.filterLockingTitle, " ", ' ', /*#__PURE__*/React.createElement(Icon, {
         type: "info",
-        onMouseEnter: function onMouseEnter() {
-          return setTimeout(function () {
-            _this.setState({
-              isShowingInfo: true
-            });
-          }, 300);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return _this.setState({
-            isShowingInfo: false
-          });
-        }
+        ref: _this.mouseInfoRef,
+        onMouseEnter: _this.onEnterFilterHeaderInfo,
+        onMouseLeave: _this.onLeaveFilterHeaderInfo
       })), /*#__PURE__*/React.createElement("button", {
         onClick: function onClick() {
           _this.props.onClose();
@@ -19133,84 +19267,81 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         type: "close"
       }))), /*#__PURE__*/React.createElement("div", {
         className: "autoql-condition-locking-menu-container"
-      }, _this.state.isShowingInfo ? /*#__PURE__*/React.createElement("div", {
-        className: "react-autoql-filter-locking-empty-list"
+      }, /*#__PURE__*/React.createElement("div", {
+        id: "react-autoql-filter-description-id"
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "info"
-      }), /*#__PURE__*/React.createElement("p", null, "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.")) : null, /*#__PURE__*/React.createElement(Autosuggest, {
+      }), /*#__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, /*#__PURE__*/React.createElement("table", {
+          return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
+            id: "react-autoql-filter-table",
             className: "autoql-condition-locking-menu-list"
-          }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+          }, /*#__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", null, suggestion.name.show_message)))));
+          }, 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,
           disabled: _this.state.isFetchingConditions,
           placeholder: 'Search & select a filter',
-          className: 'react-autoql-condition-locking-input'
+          className: 'react-autoql-condition-locking-input',
+          id: 'react-autoql-filter-menu-input'
         }
-      }), _this.state.isShowingSettingInfo ? /*#__PURE__*/React.createElement("div", {
-        className: "react-autoql-filter-setting-info-card"
-      }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Icon, {
+      }), /*#__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.")) : null)), _this.state.isFetchingConditions ? /*#__PURE__*/React.createElement("div", {
+      }), ' ', /*#__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: "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", {
-        style: {
-          minHeight: 150
-        }
-      }, /*#__PURE__*/React.createElement("table", {
+      }, /*#__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("th", {
-        scope: "col"
-      }, "Filter"), /*#__PURE__*/React.createElement("th", {
-        scope: "col",
+      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
         style: {
-          minWidth: 154
+          width: '60%'
         }
-      }, "Settings", /*#__PURE__*/React.createElement(Icon, {
+      }, "Filter"), /*#__PURE__*/React.createElement("th", null, "Settings", /*#__PURE__*/React.createElement(Icon, {
         type: "info",
-        onMouseEnter: function onMouseEnter() {
-          return setTimeout(function () {
-            _this.setState({
-              isShowingSettingInfo: true
-            });
-          }, 300);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return _this.setState({
-            isShowingSettingInfo: false
-          });
-        }
+        ref: _this.mouseSettingRef,
+        onMouseEnter: _this.onEnterFilterSettingInfo,
+        onMouseLeave: _this.onLeaveFilterSettingInfo
       })), /*#__PURE__*/React.createElement("th", {
-        scope: "col",
         style: {
           display: 'table-cell',
           verticalAlign: 'middle',
-          textAlign: 'right'
+          textAlign: 'right',
+          width: '35px'
         }
-      })), /*#__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
+          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, {
@@ -19218,8 +19349,8 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             return _this.handlePersistConditionToggle(item, index);
           },
           checked: item.lock_flag,
-          onColor: "#86d3ff",
-          onHandleColor: "#2693e6",
+          onColor: accentColorAssist(getThemeConfig(_this.props.themeConfig).accentColor, 180),
+          onHandleColor: getThemeConfig(getThemeConfig(_this.props.themeConfig)).accentColor,
           uncheckedIcon: false,
           checkedIcon: false,
           boxShadow: "0px 1px 5px rgba(0, 0, 0, 0.6)",
@@ -19228,10 +19359,12 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
           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",
@@ -19239,9 +19372,11 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
           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 filter",
           "data-for": "react-autoql-remove-condition",
@@ -19264,7 +19399,61 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
     return _this;
   }
 
-  _createClass(ConditionLockMenu, [{
+  _createClass(FilterLockMenu, [{
+    key: "handleFetchFilteredList",
+    value: function handleFetchFilteredList() {
+      var _this2 = this;
+
+      fetchConditions(_objectSpread2({}, getAuthentication(this.props.authentication))).then(function (response) {
+        var conditions = _get(response, 'data.data.data');
+
+        var array = [];
+
+        for (var i = 0; i < conditions.length; i++) {
+          array.push({
+            id: conditions[i].id,
+            keyword: conditions[i].value,
+            value: conditions[i].value,
+            show_message: conditions[i].show_message,
+            key: conditions[i].key,
+            lock_flag: conditions[i].lock_flag
+          });
+        }
+
+        if (JSON.parse(sessionStorage.getItem("conditions")) !== null) {
+          var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+
+          for (var _i3 = 0; _i3 < sessionConditions.length; _i3++) {
+            array.push({
+              id: sessionConditions[_i3].id,
+              keyword: sessionConditions[_i3].value,
+              value: sessionConditions[_i3].value,
+              show_message: sessionConditions[_i3].show_message,
+              key: sessionConditions[_i3].key,
+              lock_flag: sessionConditions[_i3].lock_flag
+            });
+          }
+        }
+
+        array.sort(function (a, b) {
+          return a.keyword.toUpperCase() < b.keyword.toUpperCase() ? -1 : a.keyword > b.keyword ? 1 : 0;
+        });
+
+        _this2.setState({
+          selectedConditions: array,
+          inputValue: '',
+          isFetchingConditions: false
+        });
+      });
+    }
+    /**
+     * When suggestion is clicked, Autosuggest populates the input
+     * based on the clicked suggestion. Teach Autosuggest how to calculate the
+     * input value for every given suggestion.
+     * @param {*} suggestion
+     */
+
+  }, {
     key: "handleShowMessage",
     value: function handleShowMessage(type, message) {
       var el = document.getElementById('react-autoql-condition-show-message');
@@ -19284,21 +19473,39 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         }
       });
     }
+  }, {
+    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;
+  return FilterLockMenu;
 }(React.Component);
 
-_defineProperty(ConditionLockMenu, "propTypes", {
-  containerWidth: PropTypes.number,
+_defineProperty(FilterLockMenu, "propTypes", {
+  containerWidth: PropTypes.string,
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
-  authentication: authenticationType
+  authentication: authenticationType,
+  initFilterText: PropTypes.string,
+  themeConfig: themeConfigType
 });
 
-_defineProperty(ConditionLockMenu, "defaultProps", {
+_defineProperty(FilterLockMenu, "defaultProps", {
   containerWidth: undefined,
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  isOpen: false,
+  authentication: undefined,
+  initFilterText: undefined,
+  themeConfig: themeConfigDefault
 });
 
 var DataMessenger = /*#__PURE__*/function (_React$Component) {
@@ -19325,7 +19532,8 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       isResizing: false,
       lastMessageId: undefined,
       isOptionsDropdownOpen: false,
-      isConditionLockingMenuOpen: false,
+      isFilterLockingMenuOpen: false,
+      selectedValueLabel: undefined,
       conditions: undefined,
       messages: [],
       queryTipsList: undefined,
@@ -19354,12 +19562,11 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           hasError: true
         });
-      } // WIP
-
+      }
 
       try {
         fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
-          var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+          var sessionConditions = JSON.parse(sessionStorage.getItem('conditions'));
 
           _this.setState({
             conditions: {
@@ -19401,9 +19608,9 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           setCSSVars(getThemeConfig(getThemeConfig(_this.props.themeConfig)));
         }
 
-        if (_this.state.isConditionLockingMenuOpen !== prevState.isConditionLockingMenuOpen) {
+        if (_this.state.isFilterLockingMenuOpen !== prevState.isFilterLockingMenuOpen) {
           fetchConditions(_objectSpread2({}, getAuthentication(_this.props.authentication))).then(function (response) {
-            var sessionConditions = JSON.parse(sessionStorage.getItem("conditions"));
+            var sessionConditions = JSON.parse(sessionStorage.getItem('conditions'));
 
             _this.setState({
               conditions: {
@@ -19416,7 +19623,8 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
 
         if (_this.state.activePage !== prevState.activePage) {
           _this.setState({
-            isConditionLockingMenuOpen: false
+            isFilterLockingMenuOpen: false,
+            selectedValueLabel: undefined
           });
         }
       } catch (error) {
@@ -19537,7 +19745,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         messages: introMessages,
         lastMessageId: introMessages[introMessages.length - 1].id,
         isOptionsDropdownOpen: false,
-        isConditionLockingMenuOpen: false
+        isFilterLockingMenuOpen: false
       });
     });
 
@@ -19599,11 +19807,10 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       }
 
       if (_this.props.onMaskClick) {
-        _this.props.onMaskClick();
-
         _this.setState({
-          isConditionLockingMenuOpen: false
-        });
+          isFilterLockingMenuOpen: false,
+          selectedValueLabel: undefined
+        }, _this.props.onMaskClick());
       }
 
       if (_this.props.onHandleClick) {
@@ -19883,7 +20090,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getConditionMenuPosition", function () {
+    _defineProperty(_assertThisInitialized(_this), "getFilterMenuPosition", function () {
       switch (_this.getPlacementProp()) {
         case 'right':
           return {
@@ -19992,24 +20199,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
           }
         }, getAutoQLConfig$1(getAutoQLConfig$1(_this.props.autoQLConfig)).enableFilterLocking ? /*#__PURE__*/React.createElement("button", {
-          id: "condition-dropdown",
+          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.openFilterLocking,
           "data-for": "react-autoql-header-tooltip"
         }, /*#__PURE__*/React.createElement(Icon, {
-          type: _get(_this.state.conditions, 'persistent.length') > 0 || _get(_this.state.conditions, 'session.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() {
@@ -20090,10 +20297,6 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         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",
@@ -20101,11 +20304,25 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         "data-for": "react-autoql-header-tooltip"
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "close"
-      }))), !getAutoQLConfig$1(getAutoQLConfig$1(_this.props.autoQLConfig)).enableFilterLocking ? /*#__PURE__*/React.createElement("div", {
+      }))), !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.getConditionMenuPosition(),
-        isOpen: _this.state.isConditionLockingMenuOpen,
+        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",
@@ -20114,13 +20331,18 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           style: {
             display: 'block'
           }
-        }, /*#__PURE__*/React.createElement(ConditionLockMenu, {
+        }, /*#__PURE__*/React.createElement(FilterLockMenu, {
+          "data-test": "react-autoql-filter-menu",
+          id: "react-autoql-filter-menu",
           authentication: getAuthentication(getAuthentication(_this.props.authentication)),
           containerWidth: _this.getDrawerWidth(),
-          isOpen: _this.state.isConditionLockingMenuOpen,
+          isOpen: _this.state.isFilterLockingMenuOpen,
+          themeConfig: getThemeConfig(getThemeConfig(_this.props.themeConfig)),
+          initFilterText: _this.state.selectedValueLabel,
           onClose: function onClose() {
             _this.setState({
-              isConditionLockingMenuOpen: false
+              isFilterLockingMenuOpen: false,
+              selectedValueLabel: undefined
             });
           }
         }))
@@ -20210,9 +20432,15 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
           enableDynamicCharting: _this.props.enableDynamicCharting,
           onNoneOfTheseClick: _this.onNoneOfTheseClick,
           autoChartAggregations: _this.props.autoChartAggregations,
-          onConditionClickCallback: function onConditionClickCallback() {
+          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({
-              isConditionLockingMenuOpen: !_this.state.isConditionLockingMenuOpen
+              isFilterLockingMenuOpen: true
             });
           }
         });
@@ -20560,7 +20788,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,
@@ -20621,12 +20854,12 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
     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 
+     * 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() {
@@ -20714,7 +20947,7 @@ _defineProperty(DataMessenger, "defaultProps", {
   maxMessages: undefined,
   introMessage: undefined,
   enableExploreQueriesTab: true,
-  enableNotificationsTab: true,
+  enableNotificationsTab: false,
   resizable: true,
   inputPlaceholder: undefined,
   queryQuickStartTopics: undefined,
@@ -21571,6 +21804,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,
@@ -21592,25 +21827,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'),
-        isDashboardQuery: true,
-        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)
@@ -21684,6 +21918,11 @@ var DashboardTile = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "renderBottomResponse", function () {
       var queryResponse = _this.props.tile.secondQueryResponse || _this.props.queryResponse;
       var displayType = isDisplayTypeValid(queryResponse, _this.props.secondDisplayType) ? _this.props.secondDisplayType : getDefaultDisplayType(queryResponse, _this.props.autoChartAggregations);
+
+      _this.props.setParamsForTile({
+        secondDisplayType: displayType
+      }, _this.props.tile.i);
+
       return _this.renderQueryOutput({
         queryOutputProps: {
           key: "dashboard-tile-query-bottom-".concat(_this.COMPONENT_KEY),
@@ -22759,4 +22998,4 @@ _defineProperty(SpeechToTextBtn, "defaultProps", {
   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 };
+export { Dashboard, DashboardTile, DataAlertModal, DataAlerts, DataMessenger, ExpressionBuilder, ExpressionBuilderSimple, FilterLockMenu, Icon, LoadingDots, NotificationFeed, NotificationIcon, NotificationItem, QueryInput, QueryOutput, ScheduleBuilder, SpeechToTextBtn as SpeechToTextButton, SpeechToTextButtonBrowser, executeDashboard, fetchQueryTips, getDefaultDisplayType, getSupportedDisplayTypes, isDisplayTypeValid, unExecuteDashboard };