3D viewer: add filtering for volume drop-down

Closes #1635
catmaid · Oct 2, 2017 · f29ef34 · f29ef34
1 parent 3dba32e
commit f29ef34
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -149,6 +149,12 @@ CATMAID extensions:
 - More details can be found in the docs.
 
 
+3D viewer:
+
+- Volumes can now be filtered in the volume drop-down menu with the help of a
+  built-in text box.
+
+
 Miscellaneous:
 
 - The Open Widget dialog now displays a table that includes more information on

diff --git a/django/applications/catmaid/static/css/screen.css b/django/applications/catmaid/static/css/screen.css
@@ -1191,6 +1191,10 @@ div.selection-table.windowContent {
   display: inline-block;
 }
 
+.customselect input[type=text] {
+  display: block;
+}
+
 .customselect-selectbox {
   position: relative;
 }

diff --git a/django/applications/catmaid/static/js/WindowMaker.js b/django/applications/catmaid/static/js/WindowMaker.js
@@ -610,7 +610,7 @@ var WindowMaker = new function()
           var selectedVolumes = WA.getLoadedVolumeIds();
           // Create actual element based on the returned data
           var node = DOM.createCheckboxSelect('Volumes', volumes,
-              selectedVolumes);
+              selectedVolumes, true);
           // Add a selection handler
           node.onchange = function(e) {
             var visible = e.target.checked;
@@ -619,6 +619,9 @@ var WindowMaker = new function()
 
             // Add extra display controls for enabled volumes
             var li = e.target.closest('li');
+            if (!li) {
+              return;
+            }
             if (visible) {
               var volumeControls = li.appendChild(document.createElement('span'));
               volumeControls.setAttribute('data-role', 'volume-controls');

diff --git a/django/applications/catmaid/static/js/dom.js b/django/applications/catmaid/static/js/dom.js
@@ -721,12 +721,15 @@
    * @param options      {Object[]} A list of {title: <>, value: <>} objects.
    * @param selectedKeys {String[]} (Optional) list of keys that should be
    *                                selected initially
+   * @param showFilter   {Bool}     Whether to show a filter input field.
    *
    * @returns a wrapper around the select element
    */
-  DOM.createCheckboxSelect = function(title, options, selectedKeys) {
+  DOM.createCheckboxSelect = function(title, options, selectedKeys, showFilter) {
     var selectedSet = new Set(selectedKeys ? selectedKeys : undefined);
+    var container = document.createElement('div');
     var checkboxes = document.createElement('ul');
+    var entryIndex = new Map();
     for (var i=0; i<options.length; ++i) {
       var o = options[i];
       var entry = document.createElement('label');
@@ -742,14 +745,53 @@
       listElement.style.display = 'flex';
       listElement.appendChild(entry);
       checkboxes.appendChild(listElement);
+      // Save in index
+      if (showFilter) {
+        var labelElements = entryIndex.get(o.title);
+        if (!labelElements) {
+          labelElements = [];
+          entryIndex.set(o.title, labelElements);
+        }
+        labelElements.push(entry);
+      }
     }
+    var entryKeys = Array.from(entryIndex.keys());
+
     checkboxes.onclick = function(e) {
       // Cancel bubbling
       e.cancelBubble = true;
       if (e.stopPropagation) e.stopPropagation();
     };
 
-    return CATMAID.DOM.createCustomContentSelect(title, checkboxes);
+    if (showFilter) {
+      var filterInput = document.createElement('input');
+      filterInput.setAttribute('placeholder', 'Filter');
+      filterInput.setAttribute('type', 'text');
+      filterInput.onclick = function(e) {
+        e.cancelBubble = true;
+        if (e.stopPropagation) e.stopPropagation();
+      };
+      filterInput.onkeyup = function(e) {
+        var filterTerm = this.value;
+        var keys = entryKeys;
+        var regex = new RegExp(CATMAID.tools.escapeRegEx(filterTerm), 'i');
+        for (var i=0, max=keys.length; i<max; ++i) {
+          var key = keys[i];
+          var elements = entryIndex.get(key);
+          var match = key.match(regex);
+          for (var j=0, jmax=elements.length; j<jmax; ++j) {
+            var element = elements[j];
+            element.style.display = match ? 'block' : 'none';
+          }
+          e.cancelBubble = true;
+          if (e.stopPropagation) e.stopPropagation();
+        }
+      };
+      container.appendChild(filterInput);
+    }
+    container.appendChild(checkboxes);
+
+    return CATMAID.DOM.createCustomContentSelect(title, container);
   };
 
   /**