react-autoql 3.5.0 → 3.5.3

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,8 +1720,9 @@ 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',
     clearDataResponses: 'Clear all queries & responses',
     closeDataMessenger: 'Close Data Messenger',
@@ -1760,8 +1760,9 @@ 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',
     clearDataResponses: 'Borrar todas las consultas y respuestas',
     closeDataMessenger: 'Cerrar Data mesenger',
@@ -3097,9 +3098,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: {
@@ -3452,6 +3454,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 && _this.props.inputValue !== prevProps.inputValue) {
+        _this.setState({
+          inputValue: _this.props.inputValue
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
@@ -3735,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) {
@@ -3772,7 +3786,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)}
@@ -3789,7 +3805,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,
@@ -3846,7 +3862,8 @@ _defineProperty(QueryInput, "propTypes", {
   className: string,
   autoCompletePlacement: string,
   showLoadingDots: bool,
-  showChataIcon: bool
+  showChataIcon: bool,
+  inputValue: string
 });
 
 _defineProperty(QueryInput, "defaultProps", {
@@ -3860,6 +3877,8 @@ _defineProperty(QueryInput, "defaultProps", {
   className: null,
   showLoadingDots: true,
   showChataIcon: true,
+  isBackButtonClicked: false,
+  inputValue: undefined,
   source: [],
   onSubmit: function onSubmit() {},
   onResponseCallback: function onResponseCallback() {}
@@ -7957,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;
       }
@@ -8012,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;
@@ -8273,7 +8300,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) {
@@ -8296,7 +8324,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"
@@ -8439,7 +8469,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) {
@@ -10233,7 +10264,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
          */
@@ -10973,9 +11004,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();
@@ -10983,19 +11014,19 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
 
         return /*#__PURE__*/React.createElement("div", {
           id: id,
-          className: "condition-lock-reverse-translation"
+          className: "react-autoql-condition-lock-reverse-translation"
         }, /*#__PURE__*/React.createElement("span", {
           style: {
             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"
 
@@ -11004,8 +11035,8 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
           isOpened: true // isOpened={this.state.isShowingInterpretation}
 
         }, /*#__PURE__*/React.createElement("strong", null, "Interpreted as:", ' '), /*#__PURE__*/React.createElement("span", {
-          onClick: function onClick() {
-            return _this.props.onConditionClickCallback();
+          onClick: function onClick(e) {
+            return _this.props.onConditionClickCallback(e);
           },
           dangerouslySetInnerHTML: {
             __html: "".concat(reverseTranslation)
@@ -11572,7 +11603,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
   };
@@ -12119,6 +12150,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) {
@@ -12148,6 +12181,7 @@ var NotificationIcon = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
       _this._isMounted = false;
+      clearInterval(_this.timerID);
     });
 
     _defineProperty(_assertThisInitialized(_this), "getNotificationCount", function (currentCount) {
@@ -12173,35 +12207,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);
       }
     });
 
@@ -13250,6 +13295,7 @@ var NotificationItem = /*#__PURE__*/function (_React$Component) {
         ref: function ref(r) {
           return _this.OUTPUT_REF = r;
         },
+        isDashboardQuery: true,
         queryResponse: queryResponse,
         autoQLConfig: {
           enableDrilldowns: false
@@ -15065,6 +15111,8 @@ var DataAlerts = /*#__PURE__*/function (_React$Component) {
         }
       }
 
+      _this.props.onSuccessAlert('Notification created!');
+
       _this.setState({
         isEditModalVisible: false,
         customAlertsList: newDataAlertList
@@ -15253,7 +15301,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"
@@ -15333,7 +15381,8 @@ _defineProperty(DataAlerts, "propTypes", {
   authentication: authenticationType,
   themeConfig: themeConfigType,
   onErrorCallback: PropTypes.func,
-  showCreateAlertBtn: PropTypes.bool
+  showCreateAlertBtn: PropTypes.bool,
+  onSuccessAlert: PropTypes.func
 });
 
 _defineProperty(DataAlerts, "defaultProps", {
@@ -15341,7 +15390,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) {
@@ -18288,8 +18338,8 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
               });
             }
           },
-          onConditionClickCallback: function onConditionClickCallback() {
-            _this.props.onConditionClickCallback();
+          onConditionClickCallback: function onConditionClickCallback(e) {
+            _this.props.onConditionClickCallback(e);
           }
         }));
       }
@@ -18309,7 +18359,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) {
@@ -18824,6 +18874,24 @@ _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) {
@@ -18844,6 +18912,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: '',
@@ -18895,20 +18967,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;
@@ -18916,7 +19014,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,
@@ -18926,13 +19023,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();
+        });
       }
     });
 
@@ -18969,13 +19069,11 @@ 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.');
+
+      ReactTooltip.hide();
     });
 
     _defineProperty(_assertThisInitialized(_this), "handlePersistConditionToggle", function (item) {
@@ -18991,7 +19089,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 = [];
@@ -19060,6 +19160,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"
@@ -19068,29 +19219,6 @@ 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", {
@@ -19102,20 +19230,13 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
         className: "react-autoql-condition-lock-header"
       }, /*#__PURE__*/React.createElement("div", {
         className: "react-autoql-filter-locking-title-container"
-      }, /*#__PURE__*/React.createElement("h3", null, "Filter Locking ", ' ', /*#__PURE__*/React.createElement(Icon, {
+      }, /*#__PURE__*/React.createElement("h3", {
+        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();
@@ -19127,93 +19248,96 @@ 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", {
-            className: "autoql-condition-locking-menu-list"
-          }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
-            style: {
-              width: 300
-            }
-          }, suggestion.name.keyword), /*#__PURE__*/React.createElement("td", null, suggestion.name.show_message)))));
+          console.log(suggestion);
+
+          if (!suggestion) {
+            return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", null, "No Suggestion Found"));
+          } else {
+            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,
           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", {
-        className: "condition-list-loading-container"
+      }), ' ', /*#__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: "condition-list"
+        className: "react-autoql-condition-list"
       }, _get(_this.state.selectedConditions, 'length') === 0 ? /*#__PURE__*/React.createElement("div", {
-        className: "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", {
-        className: "condition-table"
-      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("th", {
-        scope: "col"
-      }, "Filter"), /*#__PURE__*/React.createElement("th", {
-        scope: "col",
+        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: {
-          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: "condition-table-list-item"
+          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",
+          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)",
@@ -19222,10 +19346,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",
@@ -19233,9 +19359,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",
@@ -19259,6 +19387,60 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(ConditionLockMenu, [{
+    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');
@@ -19278,6 +19460,18 @@ 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;
@@ -19287,12 +19481,18 @@ _defineProperty(ConditionLockMenu, "propTypes", {
   containerWidth: PropTypes.number,
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
-  authentication: authenticationType
+  authentication: authenticationType,
+  initFilterText: PropTypes.string,
+  themeConfig: themeConfigType
 });
 
 _defineProperty(ConditionLockMenu, "defaultProps", {
   containerWidth: undefined,
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  isOpen: false,
+  authentication: undefined,
+  initFilterText: undefined,
+  themeConfig: themeConfigDefault
 });
 
 var DataMessenger = /*#__PURE__*/function (_React$Component) {
@@ -19319,7 +19519,8 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       isResizing: false,
       lastMessageId: undefined,
       isOptionsDropdownOpen: false,
-      isConditionLockingMenuOpen: false,
+      isFilterLockingMenuOpen: false,
+      selectedValueLabel: undefined,
       conditions: undefined,
       messages: [],
       queryTipsList: undefined,
@@ -19348,12 +19549,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: {
@@ -19395,9 +19595,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: {
@@ -19410,7 +19610,8 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
 
         if (_this.state.activePage !== prevState.activePage) {
           _this.setState({
-            isConditionLockingMenuOpen: false
+            isFilterLockingMenuOpen: false,
+            selectedValueLabel: undefined
           });
         }
       } catch (error) {
@@ -19531,7 +19732,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         messages: introMessages,
         lastMessageId: introMessages[introMessages.length - 1].id,
         isOptionsDropdownOpen: false,
-        isConditionLockingMenuOpen: false
+        isFilterLockingMenuOpen: false
       });
     });
 
@@ -19593,11 +19794,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) {
@@ -19877,7 +20077,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getConditionMenuPosition", function () {
+    _defineProperty(_assertThisInitialized(_this), "getFilterMenuPosition", function () {
       switch (_this.getPlacementProp()) {
         case 'right':
           return {
@@ -19986,24 +20186,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() {
@@ -20084,10 +20284,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",
@@ -20095,11 +20291,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",
@@ -20111,10 +20321,13 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(ConditionLockMenu, {
           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
             });
           }
         }))
@@ -20204,9 +20417,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
             });
           }
         });
@@ -20554,7 +20773,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,
@@ -20615,12 +20839,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() {
@@ -21565,6 +21789,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,
@@ -21586,25 +21812,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)