Update fixes UI for icons, link styling, and non-actionable fixes

Fix several bugs

modules/core/validator.js

@@ -222,6 +222,7 @@ export function validationIssue(attrs) {
 
 
 export function validationIssueFix(attrs) {
+    this.icon = attrs.icon;
     this.title = attrs.title;
     this.onClick = attrs.onClick;
     this.entityIds = attrs.entityIds || [];  // Used for hover-higlighting.

modules/ui/entity_issues.js

@@ -14,11 +14,13 @@ export function uiEntityIssues(context) {
     var _entityID;
 
 
-    // context.validator().on('reload.entity_issues', function() {
-    //     _selection.selectAll('.entity-issues')
-    //         .call(render);
-    //     update();
-    // });
+    context.validator().on('reload.entity_issues', function() {
+
+        update();
+
+         _selection.selectAll('.entity-issues')
+             .call(render);
+    });
 
 
     function clamp(num, min, max) {
@@ -64,6 +66,11 @@ export function uiEntityIssues(context) {
         var itemsEnter = items.enter()
             .append('div')
             .attr('class', function(d) { return 'issue severity-' + d.severity; })
+            .call(tooltip()
+                .html(true)
+                .title(function(d) { return uiTooltipHtml(d.tooltip); })
+                .placement('top')
+            )
             .on('mouseover.highlight', function(d) {
                 var ids = d.entities.map(function(e) { return e.id; });
                 utilHighlightEntities(ids, true, context);
@@ -91,13 +98,6 @@ export function uiEntityIssues(context) {
             .append('button')
             .attr('class', 'label');
 
-        labelsEnter
-            .call(tooltip()
-                .html(true)
-                .title(function(d) { return uiTooltipHtml(d.tooltip); })
-                .placement('top')
-            );
-
         labelsEnter
             .append('span')
             .attr('class', 'issue-icon')
@@ -129,14 +129,39 @@ export function uiEntityIssues(context) {
         // fixes
         var fixLists = items.selectAll('.issue-fix-list');
 
-        fixLists.selectAll('.issue-fix-item')
+        var fixes = fixLists.selectAll('.issue-fix-item')
             .data(function(d) { return d.fixes; })
             .enter()
             .append('li')
-            .attr('class', 'issue-fix-item')
+            .attr('class', function(d) {
+                return 'issue-fix-item ' + (!!d.onClick ? 'actionable' : '');
+            })
             .append('button')
-            .text(function(d) { return d.title; })
-            .on('click', function(d) { d.onClick(); });
+            .on('click', function(d) {
+                if (d.onClick) {
+                    utilHighlightEntities(d.entityIds, false, context);
+                    d.onClick();
+                }
+            })
+            .on('mouseover.highlight', function(d) {
+                utilHighlightEntities(d.entityIds, true, context);
+            })
+            .on('mouseout.highlight', function(d) {
+                utilHighlightEntities(d.entityIds, false, context);
+            });
+
+        fixes.append('span')
+            .attr('class', 'fix-icon')
+            .each(function(d) {
+                var iconName = d.icon || 'iD-icon-wrench';
+                if (iconName.startsWith('maki')) {
+                    iconName += '-15';
+                }
+                d3_select(this).call(svgIcon('#' + iconName, 'pre-text'));
+            });
+
+        fixes.append('span')
+            .text(function(d) { return d.title; });
     }
 
 

modules/validations/almost_junction.js

@@ -162,6 +162,7 @@ export function validationAlmostJunction() {
             if (Object.keys(node.tags).length === 0) {
                 // node has no tags, suggest noexit fix
                 fixes.push(new validationIssueFix({
+                    icon: 'maki-barrier',
                     title: t('issues.fix.tag_as_disconnected.title'),
                     onClick: function() {
                         var nodeID = this.issue.entities[1].id;

modules/validations/crossing_ways.js

@@ -398,7 +398,9 @@ export function validationCrossingWays() {
                 }
             }));
         }
-
+        fixes.push(new validationIssueFix({
+            title: t('issues.fix.reposition_features.title')
+        }));
         return new validationIssue({
             type: type,
             severity: 'warning',

modules/validations/deprecated_tag.js

@@ -30,6 +30,7 @@ export function validationDeprecatedTag() {
                     },
                     fixes: [
                         new validationIssueFix({
+                            icon: 'iD-icon-up',
                             title: t('issues.fix.upgrade_tags.title'),
                             onClick: function() {
                                 var entity = this.issue.entities[0];

modules/validations/disconnected_way.js

@@ -38,6 +38,7 @@ export function validationDisconnectedWay() {
 
             if (!entity.isClosed()) {
                 fixes.push(new validationIssueFix({
+                    icon: 'iD-operation-continue-left',
                     title: t('issues.fix.continue_from_start.title'),
                     entityIds: [entity.first()],
                     onClick: function() {
@@ -46,6 +47,7 @@ export function validationDisconnectedWay() {
                     }
                 }));
                 fixes.push(new validationIssueFix({
+                    icon: 'iD-operation-continue',
                     title: t('issues.fix.continue_from_end.title'),
                     entityIds: [entity.last()],
                     onClick: function() {
@@ -56,6 +58,7 @@ export function validationDisconnectedWay() {
             }
 
             fixes.push(new validationIssueFix({
+                icon: 'iD-operation-delete',
                 title: t('issues.fix.delete_feature.title'),
                 entityIds: [entity.id],
                 onClick: function() {
@@ -80,7 +83,7 @@ export function validationDisconnectedWay() {
         function continueDrawing(way, vertex) {
             // make sure the vertex is actually visible and editable
             var map = context.map();
-            if (!map.editable() || !map.contains(vertex.loc)) {
+            if (!map.editable() || !map.trimmedExtent().contains(vertex.loc)) {
                 map.zoomToEase(vertex);
             }
 

modules/validations/generic_name.js

@@ -6,7 +6,7 @@ import { actionChangeTags } from '../actions';
 import { discardNames } from '../../node_modules/name-suggestion-index/config/filters.json';
 
 
-export function validationGenericName(context) {
+export function validationGenericName() {
     var type = 'generic_name';
 
 
@@ -37,7 +37,7 @@ export function validationGenericName(context) {
     }
 
 
-    var validation = function(entity) {
+    var validation = function(entity, context) {
         var issues = [];
         var generic = isGenericName(entity);
         if (generic) {
@@ -50,6 +50,7 @@ export function validationGenericName(context) {
                 entities: [entity],
                 fixes: [
                     new validationIssueFix({
+                        icon: 'iD-operation-delete',
                         title: t('issues.fix.remove_generic_name.title'),
                         onClick: function() {
                             var entity = this.issue.entities[0];

modules/validations/missing_tag.js

@@ -58,12 +58,14 @@ export function validationMissingTag() {
             entities: [entity],
             fixes: [
                 new validationIssueFix({
+                    icon: 'iD-icon-search',
                     title: t('issues.fix.select_preset.title'),
                     onClick: function() {
                         context.ui().sidebar.showPresetList();
                     }
                 }),
                 new validationIssueFix({
+                    icon: 'iD-operation-delete',
                     title: t('issues.fix.delete_feature.title'),
                     onClick: function() {
                         var id = this.issue.entities[0].id;