From d15a2e5aa35f905fdb0aff9fa793529dac204384 Mon Sep 17 00:00:00 2001
From: Eric Brelsford <ebrelsford@gmail.com>
Date: Mon, 25 Jul 2016 15:46:54 -0400
Subject: [PATCH] Remove an item from the multiselect list

Fixes #2950
---
 css/app.css                  |  8 ++++++++
 modules/ui/selection_list.js | 13 +++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/css/app.css b/css/app.css
index be005e6cc..aba047aa1 100644
--- a/css/app.css
+++ b/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;
 }
diff --git a/modules/ui/selection_list.js b/modules/ui/selection_list.js
index c0eacf1dd..29f9177ba 100644
--- a/modules/ui/selection_list.js
+++ b/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();