[Maps] add indicator when layer is filtered by search bar (#43283)

* [Maps] add indicator when layer is filtered by filter pills and/or query bar * add message about icon to tooltip
elastic · Aug 16, 2019 · f882584 · f882584
1 parent 36b1760
commit f882584
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 22 deletions.
diff --git a/x-pack/legacy/plugins/maps/public/components/__snapshots__/layer_toc_actions.test.js.snap b/x-pack/legacy/plugins/maps/public/components/__snapshots__/layer_toc_actions.test.js.snap
diff --git a/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.js b/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.js
@@ -51,18 +51,30 @@ export class LayerTocActions extends Component {
   };
 
   _renderPopoverToggleButton() {
-    const { icon, tooltipContent, areResultsTrimmed } = this.props.layer.getIconAndTooltipContent(this.props.zoom);
-    const infoButton = areResultsTrimmed ? (<EuiIcon
-      color="subdued"
-      type="iInCircle"
-    />) : null;
-    const tooltip = <Fragment>{infoButton} {tooltipContent}</Fragment>;
+    const {
+      icon,
+      tooltipContent,
+      footnotes,
+    } = this.props.layer.getIconAndTooltipContent(this.props.zoom, this.props.isUsingSearch);
+
+    const footnoteIcons = footnotes.map((footnote, index) => {
+      return <Fragment key={index}>{''}{footnote.icon}</Fragment>;
+    });
+    const footnoteTooltipContent = footnotes.map((footnote, index) => {
+      return <div key={index}>{footnote.icon}{' '}{footnote.message}</div>;
+    });
+
     return (
       <EuiToolTip
         anchorClassName="mapLayTocActions__tooltipAnchor"
         position="top"
         title={this.props.displayName}
-        content={tooltip}
+        content={
+          <Fragment>
+            {tooltipContent}
+            {footnoteTooltipContent}
+          </Fragment>
+        }
       >
         <EuiButtonEmpty
           className="mapTocEntry__layerName eui-textLeft"
@@ -73,9 +85,10 @@ export class LayerTocActions extends Component {
           data-test-subj={`layerTocActionsPanelToggleButton${this.props.escapedDisplayName}`}
         >
           <span className="mapTocEntry__layerNameIcon">{icon}</span>
-          {this.props.displayName}{infoButton}
+          {this.props.displayName}
+          {' '}
+          {footnoteIcons}
         </EuiButtonEmpty>
-
       </EuiToolTip>
     );
   }

diff --git a/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.test.js b/x-pack/legacy/plugins/maps/public/components/layer_toc_actions.test.js
@@ -13,11 +13,14 @@ let supportsFitToBounds;
 const layerMock = {
   supportsFitToBounds: () => { return supportsFitToBounds; },
   isVisible: () => { return true; },
-  getIconAndTooltipContent: (zoom) => {
+  getIconAndTooltipContent: (zoom, isUsingSearch) => {
     return {
-      icon: (<span>mockIcon</span>),
+      icon: <span>mockIcon</span>,
       tooltipContent: `simulated tooltip content at zoom: ${zoom}`,
-      areResultsTrimmed: false
+      footnotes: [{
+        icon: <span>mockFootnoteIcon</span>,
+        message: `simulated footnote at isUsingSearch: ${isUsingSearch}`
+      }],
     };
   }
 };
@@ -27,6 +30,7 @@ const defaultProps = {
   escapedDisplayName: 'layer1',
   zoom: 0,
   layer: layerMock,
+  isUsingSearch: true,
 };
 
 describe('LayerTocActions', () => {

diff --git a/...aps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js b/...aps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js
@@ -22,7 +22,7 @@ import {
   cloneLayer,
 } from '../../../../../actions/map_actions';
 
-import { hasDirtyState, getSelectedLayer } from '../../../../../selectors/map_selectors';
+import { hasDirtyState, getSelectedLayer, isUsingSearch } from '../../../../../selectors/map_selectors';
 
 function mapStateToProps(state = {}, ownProps) {
   return {
@@ -31,6 +31,7 @@ function mapStateToProps(state = {}, ownProps) {
     selectedLayer: getSelectedLayer(state),
     hasDirtyStateSelector: hasDirtyState(state),
     isLegendDetailsOpen: getOpenTOCDetails(state).includes(ownProps.layer.getId()),
+    isUsingSearch: isUsingSearch(state),
   };
 }
 

diff --git a/...maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js b/...maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/view.js
@@ -183,7 +183,8 @@ export class TOCEntry extends React.Component {
       layer,
       zoom,
       toggleVisible,
-      fitToBounds
+      fitToBounds,
+      isUsingSearch
     } = this.props;
 
     return (
@@ -195,6 +196,7 @@ export class TOCEntry extends React.Component {
       >
         <LayerTocActions
           layer={layer}
+          isUsingSearch={isUsingSearch}
           fitToBounds={() => {
             fitToBounds(layer.getId());
           }}

diff --git a/x-pack/legacy/plugins/maps/public/layers/layer.js b/x-pack/legacy/plugins/maps/public/layers/layer.js
@@ -119,10 +119,10 @@ export class AbstractLayer {
     };
   }
 
-  getIconAndTooltipContent(zoomLevel) {
+  getIconAndTooltipContent(zoomLevel, isUsingSearch) {
     let icon;
     let tooltipContent = null;
-    let areResultsTrimmed = false;
+    const footnotes = [];
     if (this.hasErrors()) {
       icon = (
         <EuiIcon
@@ -161,15 +161,30 @@ export class AbstractLayer {
       const customIconAndTooltipContent = this.getCustomIconAndTooltipContent();
       if (customIconAndTooltipContent) {
         icon = customIconAndTooltipContent.icon;
-        tooltipContent = customIconAndTooltipContent.tooltipContent;
-        areResultsTrimmed = customIconAndTooltipContent.areResultsTrimmed;
+        if (!customIconAndTooltipContent.areResultsTrimmed) {
+          tooltipContent = customIconAndTooltipContent.tooltipContent;
+        } else {
+          footnotes.push({
+            icon: <EuiIcon color="subdued" type="iInCircle" />,
+            message: customIconAndTooltipContent.tooltipContent
+          });
+        }
+      }
+
+      if (isUsingSearch && this.getQueryableIndexPatternIds().length) {
+        footnotes.push({
+          icon: <EuiIcon color="subdued" type="filter" size="s" />,
+          message: i18n.translate('xpack.maps.layer.isUsingSearchMsg', {
+            defaultMessage: 'Results narrowed by search bar'
+          })
+        });
       }
     }
 
     return {
       icon,
       tooltipContent,
-      areResultsTrimmed
+      footnotes,
     };
   }
 

diff --git a/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js b/x-pack/legacy/plugins/maps/public/selectors/map_selectors.js
@@ -108,6 +108,12 @@ export const getQuery = ({ map }) => map.mapState.query;
 
 export const getFilters = ({ map }) => map.mapState.filters;
 
+export const isUsingSearch = (state) => {
+  const filters = getFilters(state).filter(filter => !filter.meta.disabled);
+  const queryString = _.get(getQuery(state), 'query', '');
+  return filters.length || queryString.length;
+};
+
 export const getDrawState = ({ map }) => map.mapState.drawState;
 
 export const getRefreshConfig = ({ map }) => {