When selecting an issue in the Issues pane, highlight the issue after selecting the feature

Use the same behavior when selecting an issue in the commit sidebar as in the issues pane

modules/core/validator.js

@@ -1,6 +1,7 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 
 import { coreDifference } from './difference';
+import { modeSelect } from '../modes/select';
 import { utilArrayGroupBy, utilCallWhenIdle, utilRebind } from '../util';
 import { t } from '../util/locale';
 import { validationIssueFix } from './validation/models';
@@ -8,7 +9,7 @@ import * as Validations from '../validations/index';
 
 
 export function coreValidator(context) {
-    var dispatch = d3_dispatch('validated');
+    var dispatch = d3_dispatch('validated', 'focusedIssue');
     var validator = utilRebind({}, dispatch, 'on');
 
     var _rules = {};
@@ -108,6 +109,24 @@ export function coreValidator(context) {
         });
     };
 
+    validator.focusIssue = function(issue) {
+        var extent = issue.extent(context.graph());
+
+        if (extent) {
+            var setZoom = Math.max(context.map().zoom(), 19);
+            context.map().centerZoomEase(extent.center(), setZoom);
+
+            // select the first entity
+            if (issue.entityIds && issue.entityIds.length) {
+                window.setTimeout(function() {
+                    var ids = issue.entityIds;
+                    context.enter(modeSelect(context, [ids[0]]));
+                    dispatch.call('focusedIssue', this, issue);
+                }, 250);  // after ease
+            }
+        }
+    };
+
 
     validator.getIssuesBySeverity = function(options) {
         var groups = utilArrayGroupBy(validator.getIssues(options), 'severity');
@@ -121,7 +140,7 @@ export function coreValidator(context) {
         var issueIDs = _issuesByEntityID[entityID];
         if (!issueIDs) return [];
 
-        var opts = options || {}; 
+        var opts = options || {};
 
         return Array.from(issueIDs)
             .map(function(id) { return _issuesByIssueID[id]; })

modules/ui/commit_warnings.js

@@ -1,5 +1,4 @@
 import { t } from '../util/locale';
-import { modeSelect } from '../modes/select';
 import { svgIcon } from '../svg/icon';
 import { tooltip } from '../util/tooltip';
 import { utilEntityOrMemberSelector } from '../util';
@@ -85,10 +84,7 @@ export function uiCommitWarnings(context) {
                         .classed('hover', false);
                 })
                 .on('click', function(d) {
-                    if (d.entityIds && d.entityIds.length > 0) {
-                        context.map().zoomTo(context.entity(d.entityIds[0]));
-                        context.enter(modeSelect(context, d.entityIds));
-                    }
+                    context.validator().focusIssue(d);
                 });
         }
     }

modules/ui/entity_issues.js

@@ -12,12 +12,16 @@ export function uiEntityIssues(context) {
     var _entityID;
 
     // Refresh on validated events
-    context.validator().on('validated.entity_issues', function() {
-         _selection.selectAll('.disclosure-wrap-entity_issues')
-             .call(render);
+    context.validator()
+        .on('validated.entity_issues', function() {
+             _selection.selectAll('.disclosure-wrap-entity_issues')
+                 .call(render);
 
-        update();
-    });
+            update();
+        })
+        .on('focusedIssue.entity_issues', function(issue) {
+             makeActiveIssue(issue.id);
+        });
 
 
     function entityIssues(selection) {
@@ -35,6 +39,12 @@ export function uiEntityIssues(context) {
         return context.validator().getEntityIssues(_entityID, { includeDisabledRules: true });
     }
 
+    function makeActiveIssue(issueID) {
+        _activeIssueID = issueID;
+        _selection.selectAll('.issue-container')
+            .classed('active', function(d) { return d.id === _activeIssueID; });
+    }
+
     function update() {
 
         var issues = getIssues();
@@ -86,9 +96,8 @@ export function uiEntityIssues(context) {
             .append('div')
             .attr('class', 'issue-label')
             .on('click', function(d) {
-                _activeIssueID = d.id;   // expand only the clicked item
-                selection.selectAll('.issue-container')
-                    .classed('active', function(d) { return d.id === _activeIssueID; });
+
+                makeActiveIssue(d.id); // expand only the clicked item
 
                 var extent = d.extent(context.graph());
                 if (extent) {

modules/ui/issues.js

@@ -7,7 +7,6 @@ import { tooltip } from '../util/tooltip';
 
 import { actionNoop } from '../actions/noop';
 import { geoSphericalDistance } from '../geo';
-import { modeSelect } from '../modes/select';
 import { svgIcon } from '../svg/icon';
 import { uiDisclosure } from './disclosure';
 import { uiTooltipHtml } from './tooltipHtml';
@@ -84,20 +83,7 @@ export function uiIssues(context) {
             .append('li')
             .attr('class', function (d) { return 'issue severity-' + d.severity; })
             .on('click', function(d) {
-                var extent = d.extent(context.graph());
-                if (extent) {
-                    var setZoom = Math.max(context.map().zoom(), 19);
-                    context.map().centerZoomEase(extent.center(), setZoom);
-
-                    // select the first entity
-                    if (d.entityIds && d.entityIds.length) {
-                        window.setTimeout(function() {
-                            var ids = d.entityIds;
-                            context.enter(modeSelect(context, [ids[0]]));
-                            utilHighlightEntities(ids, true, context);
-                        }, 250);  // after ease
-                    }
-                }
+                context.validator().focusIssue(d);
             })
             .on('mouseover', function(d) {
                 utilHighlightEntities(d.entityIds, true, context);