Remove an item from the multiselect list

Fixes #2950

css/app.css

@@ -735,6 +735,14 @@ button.save.has-count .count::before {
     opacity: .5;
 }
 
+.feature-list-item .label .close {
+    float: right;
+}
+
+.feature-list-item .label .close .icon {
+    opacity: 1;
+}
+
 .feature-list-item:hover .label {
     background-color: #ececec;
 }

modules/ui/selection_list.js

@@ -10,6 +10,14 @@ export function SelectionList(context, selectedIDs) {
         context.enter(Select(context, [entity.id]).suppressMenu(true));
     }
 
+    function deselectEntity(entity) {
+        d3.event.stopPropagation();
+        var index = selectedIDs.indexOf(entity.id);
+        if (index > -1) {
+            selectedIDs.splice(index, 1);
+        }
+        context.enter(Select(context, selectedIDs).suppressMenu(true));
+    }
 
     function selectionList(selection) {
         selection.classed('selection-list-pane', true);
@@ -65,6 +73,11 @@ export function SelectionList(context, selectedIDs) {
             items.selectAll('.entity-name')
                 .text(function(entity) { return displayName(entity); });
 
+            label.append('span')
+                .attr('class', 'close')
+                .on('click', deselectEntity)
+                .call(Icon('#icon-close'));
+
             // Exit
             items.exit()
                 .remove();