react-autoql 3.5.1 → 3.5.2

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',
@@ -3099,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: {
@@ -3454,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 () {
@@ -3737,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) {
@@ -3774,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)}
@@ -3791,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,
@@ -3848,7 +3862,8 @@ _defineProperty(QueryInput, "propTypes", {
   className: string,
   autoCompletePlacement: string,
   showLoadingDots: bool,
-  showChataIcon: bool
+  showChataIcon: bool,
+  inputValue: string
 });
 
 _defineProperty(QueryInput, "defaultProps", {
@@ -3862,6 +3877,8 @@ _defineProperty(QueryInput, "defaultProps", {
   className: null,
   showLoadingDots: true,
   showChataIcon: true,
+  isBackButtonClicked: false,
+  inputValue: undefined,
   source: [],
   onSubmit: function onSubmit() {},
   onResponseCallback: function onResponseCallback() {}
@@ -7959,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;
       }
@@ -8014,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;
@@ -8298,7 +8323,9 @@ var ChataChart = /*#__PURE__*/function (_Component) {
           currencySelectorState = _this$state2.currencySelectorState,
           quantitySelectorState = _this$state2.quantitySelectorState,
           ratioSelectorState = _this$state2.ratioSelectorState;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", {
+        id: "chata-chart-popover"
+      }, /*#__PURE__*/React.createElement("div", {
         className: "axis-selector-container"
       }, !!currencySelectorState.length && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
         className: "number-selector-header"
@@ -10235,7 +10262,7 @@ var QueryOutput = /*#__PURE__*/function (_React$Component) {
       var formattedColumns = columns.map(function (col, i) {
         /**
          * EDIT:
-         * We no longer want to default to one over the other. Howeever, 
+         * We no longer want to default to one over the other. Howeever,
          * I would like to hang onto this code for now incase we do want to
          * include either/or in some cases in the future
          */
@@ -10975,9 +11002,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 +11018,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"
 
@@ -11006,8 +11033,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)
@@ -13252,6 +13279,7 @@ var NotificationItem = /*#__PURE__*/function (_React$Component) {
         ref: function ref(r) {
           return _this.OUTPUT_REF = r;
         },
+        isDashboardQuery: true,
         queryResponse: queryResponse,
         autoQLConfig: {
           enableDrilldowns: false
@@ -15067,6 +15095,8 @@ var DataAlerts = /*#__PURE__*/function (_React$Component) {
         }
       }
 
+      _this.props.onSuccessAlert('Notification created!');
+
       _this.setState({
         isEditModalVisible: false,
         customAlertsList: newDataAlertList
@@ -15255,7 +15285,7 @@ var DataAlerts = /*#__PURE__*/function (_React$Component) {
           className: "react-autoql-re-initialize-btn-text"
         }, /*#__PURE__*/React.createElement(Icon, {
           type: "warning-triangle"
-        }), ' ', " Resend")), /*#__PURE__*/React.createElement(Checkbox, {
+        }), " Resend")), /*#__PURE__*/React.createElement(Checkbox, {
           themeConfig: getThemeConfig(_this.props.themeConfig),
           type: "switch",
           className: "react-autoql-notification-disable-checkbox"
@@ -15335,7 +15365,8 @@ _defineProperty(DataAlerts, "propTypes", {
   authentication: authenticationType,
   themeConfig: themeConfigType,
   onErrorCallback: PropTypes.func,
-  showCreateAlertBtn: PropTypes.bool
+  showCreateAlertBtn: PropTypes.bool,
+  onSuccessAlert: PropTypes.func
 });
 
 _defineProperty(DataAlerts, "defaultProps", {
@@ -15343,7 +15374,8 @@ _defineProperty(DataAlerts, "defaultProps", {
   themeConfig: themeConfigDefault,
   showCreateAlertBtn: false,
   onErrorCallback: function onErrorCallback() {},
-  onAlertInitializationCallback: function onAlertInitializationCallback() {}
+  onAlertInitializationCallback: function onAlertInitializationCallback() {},
+  onSuccessAlert: function onSuccessAlert() {}
 });
 
 var getInitialStateData$2 = function getInitialStateData(initialData) {
@@ -18290,8 +18322,8 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
               });
             }
           },
-          onConditionClickCallback: function onConditionClickCallback() {
-            _this.props.onConditionClickCallback();
+          onConditionClickCallback: function onConditionClickCallback(e) {
+            _this.props.onConditionClickCallback(e);
           }
         }));
       }
@@ -18311,7 +18343,7 @@ var ChatMessage = /*#__PURE__*/function (_React$Component) {
 
           _this.scrollIntoView();
         } else {
-          messageElement.style.maxHeight = '85%';
+          messageElement.style.maxHeight = '90%';
           messageElement.style.height = "".concat(messageElement.offsetHeights, "px");
         }
       } catch (error) {
@@ -18846,6 +18878,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,11 +18933,28 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
             }
           }
 
-          _this.setState({
-            selectedConditions: array.sort(),
-            inputValue: '',
-            isFetchingConditions: false
-          });
+          if (_this.props.initFilterText && _this.props.initFilterText !== '') {
+            _this.setState({
+              selectedConditions: array.sort(),
+              isFetchingConditions: false
+            });
+
+            for (var _i2 = 0; _i2 < array.length; _i2++) {
+              if (array[_i2].keyword === _this.props.initFilterText) {
+                _this.handleHighlightFilterRow(_i2);
+
+                return;
+              }
+            }
+
+            _this.animateInputTextAndSubmit(_this.props.initFilterText);
+          } else {
+            _this.setState({
+              selectedConditions: array.sort(),
+              inputValue: '',
+              isFetchingConditions: false
+            });
+          }
         });
       } catch (error) {
         console.error(error);
@@ -18934,7 +18987,9 @@ var ConditionLockMenu = /*#__PURE__*/function (_React$Component) {
 
         setConditions(_objectSpread2(_objectSpread2({}, getAuthentication(_this.props.authentication)), {}, {
           conditions: array
-        }));
+        })).then(function () {
+          _this.handleShowMessage('lock', "".concat(suggestion.name.keyword, " has been locked"));
+        });
       }
     });
 
@@ -19064,6 +19119,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"
@@ -19110,18 +19216,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 +19230,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, {
@@ -19228,10 +19322,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 +19335,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",
@@ -19284,6 +19382,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;
@@ -19293,12 +19403,16 @@ _defineProperty(ConditionLockMenu, "propTypes", {
   containerWidth: PropTypes.number,
   isOpen: PropTypes.bool,
   onClose: PropTypes.func,
-  authentication: authenticationType
+  authentication: authenticationType,
+  initFilterText: PropTypes.string
 });
 
 _defineProperty(ConditionLockMenu, "defaultProps", {
   containerWidth: undefined,
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  isOpen: false,
+  authentication: undefined,
+  initFilterText: undefined
 });
 
 var DataMessenger = /*#__PURE__*/function (_React$Component) {
@@ -19325,7 +19439,8 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
       isResizing: false,
       lastMessageId: undefined,
       isOptionsDropdownOpen: false,
-      isConditionLockingMenuOpen: false,
+      isFilterLockingMenuOpen: false,
+      selectedValueLabel: undefined,
       conditions: undefined,
       messages: [],
       queryTipsList: undefined,
@@ -19359,7 +19474,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
 
       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 +19516,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 +19531,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 +19653,7 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         messages: introMessages,
         lastMessageId: introMessages[introMessages.length - 1].id,
         isOptionsDropdownOpen: false,
-        isConditionLockingMenuOpen: false
+        isFilterLockingMenuOpen: false
       });
     });
 
@@ -19599,11 +19715,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 +19998,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 +20107,24 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "renderOptionsDropdown", function () {
       if (_this.state.activePage === 'data-messenger') {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-          id: "condition-dropdown",
+          id: "react-autoql-filter-menu-dropdown",
           style: {
             justifyContent: 'left',
             position: 'absolute',
             right: 30
           }
         }, 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 +20205,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 +20212,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",
@@ -20117,10 +20242,12 @@ 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,
+          initFilterText: _this.state.selectedValueLabel,
           onClose: function onClose() {
             _this.setState({
-              isConditionLockingMenuOpen: false
+              isFilterLockingMenuOpen: false,
+              selectedValueLabel: undefined
             });
           }
         }))
@@ -20210,9 +20337,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 +20693,12 @@ var DataMessenger = /*#__PURE__*/function (_React$Component) {
         width: _this.getDrawerWidth(),
         height: _this.getDrawerHeight(),
         onMaskClick: _this.handleMaskClick,
-        onHandleClick: _this.props.onHandleClick,
+        onHandleClick: function onHandleClick() {
+          _this.setState({
+            isFilterLockingMenuOpen: false,
+            selectedValueLabel: undefined
+          }, _this.props.onHandleClick);
+        },
         afterVisibleChange: _this.props.onVisibleChange,
         handler: _this.getHandlerProp(),
         level: _this.props.shiftScreen ? 'all' : null,
@@ -20621,12 +20759,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() {
@@ -21571,6 +21709,8 @@ var DashboardTile = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderQueryOutput", function (_ref12) {
+      var _extends2;
+
       var _ref12$queryOutputPro = _ref12.queryOutputProps,
           queryOutputProps = _ref12$queryOutputPro === void 0 ? {} : _ref12$queryOutputPro,
           _ref12$vizToolbarProp = _ref12.vizToolbarProps,
@@ -21592,25 +21732,24 @@ var DashboardTile = /*#__PURE__*/function (_React$Component) {
       }, !queryOutputProps.queryResponse || isExecuting || _this.props.isUnExecuted ? _this.renderContentPlaceholder({
         isExecuting: isExecuting,
         isExecuted: isExecuted
-      }) : /*#__PURE__*/React.createElement(Fragment, null, _this.getIsSuggestionResponse(queryOutputProps.queryResponse) && _this.renderSuggestionMessage(customMessage), !customMessage && /*#__PURE__*/React.createElement(QueryOutput, _extends({
+      }) : /*#__PURE__*/React.createElement(Fragment, null, _this.getIsSuggestionResponse(queryOutputProps.queryResponse) && _this.renderSuggestionMessage(customMessage), !customMessage && /*#__PURE__*/React.createElement(QueryOutput, _extends((_extends2 = {
         authentication: getAuthentication(_this.props.authentication),
         themeConfig: getThemeConfig(_this.props.themeConfig),
         autoQLConfig: getAutoQLConfig$1(_this.props.autoQLConfig),
         dataFormatting: getDataFormatting(_this.props.dataFormatting),
         renderTooltips: false,
         autoSelectQueryValidationSuggestion: false,
+        isDashboardQuery: true,
         autoChartAggregations: _this.props.autoChartAggregations,
         renderSuggestionsAsDropdown: _this.props.tile.h < 4,
         enableDynamicCharting: _this.props.enableDynamicCharting,
-        backgroundColor: document.documentElement.style.getPropertyValue('--react-autoql-background-color-primary'),
-        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)