Prevent adding features from search-to-add field if they are hidden

css/80_app.css

@@ -653,6 +653,10 @@ button.add-note svg.icon {
     line-height: 1.2em;
     width: 100%;
 }
+.search-add .list-item.disabled .preset-icon-container,
+.search-add .list-item.disabled .label {
+    opacity: 0.55;
+}
 .search-add .list-item > *:not(button) {
     pointer-events: none;
 }
@@ -664,6 +668,9 @@ button.add-note svg.icon {
     top: 0;
     left: 0;
 }
+.search-add .list-item button.choose.disabled {
+    background-color: #ececec;
+}
 .search-add .list-item button.accessory {
     position: relative;
     flex: 0 0 auto;
@@ -4854,22 +4861,29 @@ svg.mouseclick use.right {
 }
 
 /* dark tooltips for sidebar / panels */
+.tooltip.dark.top .tooltip-arrow,
 .map-pane .tooltip.top .tooltip-arrow,
 #sidebar .tooltip.top .tooltip-arrow {
     border-top-color: #000;
 }
+.tooltip.dark.bottom .tooltip-arrow,
 .map-pane .tooltip.bottom .tooltip-arrow,
 #sidebar .tooltip.bottom .tooltip-arrow {
     border-bottom-color: #000;
 }
+.tooltip.dark.left .tooltip-arrow,
 .map-pane .tooltip.left .tooltip-arrow,
 #sidebar .tooltip.left .tooltip-arrow {
     border-left-color: #000;
 }
+.tooltip.dark.right .tooltip-arrow,
 .map-pane .tooltip.right .tooltip-arrow,
 #sidebar .tooltip.right .tooltip-arrow {
     border-right-color: #000;
 }
+.tooltip.dark .tooltip-inner,
+.tooltip.dark .tooltip-heading,
+.tooltip.dark .keyhint-wrap,
 .map-pane .tooltip-inner,
 .map-pane .tooltip-heading,
 .map-pane .keyhint-wrap,

modules/ui/search_add.js

@@ -75,8 +75,16 @@ export function uiSearchAdd(context) {
             .append('div')
             .attr('class', 'list');//
             //.call(drawList, context.presets().defaults(geometry, 36));
+
+        context.features().on('change.search-add', updateForFeatureHiddenState);
     }
 
+    function isSingularItem(item) {
+        if (item.geometry.filter) {
+            return supportedGeometry(item).length === 1;
+        }
+        return false;
+    }
     function supportedGeometry(preset) {
         return preset.geometry.filter(function(geometry) {
             return ['point', 'line', 'area'].indexOf(geometry) !== -1;
@@ -116,9 +124,11 @@ export function uiSearchAdd(context) {
             .append('div')
             .attr('class', function(item) { return 'list-item preset-' + item.id.replace('/', '-'); });
 
-        var button = row.append('button')
+        row.append('button')
             .attr('class', 'choose')
             .on('click', function(d) {
+                if (d3_select(this).classed('disabled')) return;
+
                 var geom = defaultGeometry(d);
                 var markerClass = 'add-preset add-' + geom + ' add-preset-' + d.name()
                     .replace(/\s+/g, '_')
@@ -169,7 +179,41 @@ export function uiSearchAdd(context) {
             }
         });
 
-        //updateForFeatureHiddenState();
+        updateForFeatureHiddenState();
+    }
+
+    function updateForFeatureHiddenState() {
+
+        var listItem = d3_selectAll('.search-add .popover .list-item');
+
+        // remove existing tooltips
+        listItem.selectAll('button.choose').call(tooltip().destroyAny);
+
+        listItem.each(function(item, index) {
+            if (!isSingularItem(item)) {
+                return;
+            }
+            var geometry = defaultGeometry(item);
+
+            var hiddenPresetFeaturesId = context.features().isHiddenPreset(item, geometry);
+            var isHiddenPreset = !!hiddenPresetFeaturesId;
+
+            var button = d3_select(this).selectAll('button.choose');
+
+            d3_select(this).classed('disabled', isHiddenPreset);
+            button.classed('disabled', isHiddenPreset);
+
+            if (isHiddenPreset) {
+                var isAutoHidden = context.features().autoHidden(hiddenPresetFeaturesId);
+                var tooltipIdSuffix = isAutoHidden ? 'zoom' : 'manual';
+                var tooltipObj = { features: t('feature.' + hiddenPresetFeaturesId + '.description') };
+                button.call(tooltip('dark')
+                    .html(true)
+                    .title(t('inspector.hidden_preset.' + tooltipIdSuffix, tooltipObj))
+                    .placement(index < 2 ? 'bottom' : 'top')
+                );
+            }
+        });
     }
 
     return utilRebind(searchAdd, dispatch, 'on');

modules/util/tooltip.js

@@ -3,7 +3,7 @@ import { utilFunctor } from './index';
 
 var _tooltipID = 0;
 
-export function tooltip() {
+export function tooltip(klass) {
     var _id = _tooltipID++;
     var tooltip = function(selection) {
         selection.each(setup);
@@ -98,7 +98,7 @@ export function tooltip() {
 
         var enter = tip.enter()
             .append('div')
-            .attr('class', 'tooltip tooltip-' + _id);
+            .attr('class', 'tooltip tooltip-' + _id + ' ' + (klass ? klass : ''));
 
         enter
             .append('div')