Merge pull request #239 from YaleDHLab/lasso

allow shift click to toggle images in lasso - closes #200
pleonard212 · Sep 17, 2021 · f46bf83 · f46bf83
2 parents 88ad12d + d5e7f70
commit f46bf83
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 21 deletions.
diff --git a/pixplot/web/assets/js/tsne.js b/pixplot/web/assets/js/tsne.js
@@ -1936,26 +1936,10 @@ Lasso.prototype.draw = function() {
   this.points = this.getHull();
   // remove the old mesh
   this.removeMesh();
-  // get the indices of images that are inside the polygon
+  // store the indices of images that are inside the polygon
   this.selected = this.getSelectedMap();
-  var indices = [],
-      keys = Object.keys(this.selected);
-  for (var i=0; i<keys.length; i++) {
-    if (this.selected[keys[i]]) indices.push(i)
-  }
-  if (indices.length) {
-    // hide the modal describing the lasso behavior
-    world.hideSelectTooltip();
-    // allow users to see the selected images if desired
-    this.elems.viewSelectedContainer.style.display = 'block';
-    this.elems.countTarget.textContent = indices.length;
-    // allow cluster persistence
-    data.hotspots.setCreateHotspotVisibility(true);
-  }
-  // indicate the number of cells that are selected
-  this.setNSelected(indices.length);
-  // illuminate the points that are inside the polyline
-  world.setBorderedImages(indices);
+  // highlight the selected images
+  this.highlightSelected();
   // obtain and store a mesh, then add the mesh to the scene
   this.mesh = this.getMesh();
   world.scene.add(this.mesh);
@@ -2083,10 +2067,32 @@ Lasso.prototype.getSelectedMap = function() {
   return selected;
 }
 
+Lasso.prototype.highlightSelected = function() {
+  // get the indices of selected cells
+  var indices = [],
+      keys = Object.keys(this.selected);
+  for (var i=0; i<keys.length; i++) {
+    if (this.selected[keys[i]]) indices.push(i)
+  }
+  if (indices.length) {
+    // hide the modal describing the lasso behavior
+    world.hideSelectTooltip();
+    // allow users to see the selected images if desired
+    this.elems.viewSelectedContainer.style.display = 'block';
+    this.elems.countTarget.textContent = indices.length;
+    // allow cluster persistence
+    data.hotspots.setCreateHotspotVisibility(true);
+  }
+  // indicate the number of cells that are selected
+  this.setNSelected(indices.length);
+  // illuminate the points that are inside the polyline
+  world.setBorderedImages(indices);
+}
+
 Lasso.prototype.toggleSelection = function(idx) {
   var image = data.json.images[idx];
   this.selected[image] = !this.selected[image];
-  this.setNSelected();
+  this.highlightSelected();
 }
 
 Lasso.prototype.setNSelected = function(n) {

diff --git a/pixplot/web/index.html b/pixplot/web/index.html
@@ -470,7 +470,7 @@ <h2>Hotspots</h2>
                 <div class='hotspot-action drag-hotspot'>...</div>
                 <img class='hotspot-action refresh-hotspot' src='assets/images/icons/refresh.svg'>
               <% } %>
-              <div class='hotspot-body'>
+              <div class='hotspot-body no-highlight'>
                 <img class='hotspot-image' src='data/thumbs/<%= hotspot.img %>'>
                 <div class='hotspot-bar-container'>
                   <div class='hotspot-bar-inner'></div>