Merge pull request #439 from DigitalSlideArchive/searchable-fields-metadata-plot

Make metadata plot dialog select boxes searchable

Author: manthey

.pre-commit-config.yaml

@@ -53,17 +53,17 @@ repos:
   rev: v0.0.18
   hooks:
   - id: circleci-config-validate
-- repo: https://github.com/ThisIsManta/stylus-supremacy
-  rev: v4.0.0
-  hooks:
-    - id: stylus-supremacy
-      language_version: "22.10.0"
-      args:
-        - '--options'
-        - './histomicsui/web_client/package.json'
+# - repo: https://github.com/ThisIsManta/stylus-supremacy
+#   rev: v4.0.0
+#   hooks:
+#     - id: stylus-supremacy
+#       language_version: "22.12.0"
+#       args:
+#         - '--options'
+#         - './histomicsui/web_client/package.json'
 - repo: https://github.com/astral-sh/ruff-pre-commit
   # Ruff version.
-  rev: v0.7.0
+  rev: v0.8.3
   hooks:
     - id: ruff
       args: [--fix, --exit-non-zero-on-fix]

histomicsui/web_client/dialogs/metadataPlot.js

@@ -1,4 +1,6 @@
 import $ from 'jquery';
+import 'select2';
+import 'select2/dist/css/select2.css';
 
 import View from '@girder/core/views/View';
 
@@ -23,6 +25,13 @@ const MetadataPlotDialog = View.extend({
                 plotOptions: this.plotOptions
             })
         ).girderModal(this);
+        // this adds search functionality to the select boxes, but not to the
+        // multiple select, since the select2 tool breaks some traditional
+        // aspects of multiple select
+        this.$('.h-plot-select').not('[multiple]').select2({
+            dropdownParent: $('.modal-body'),
+            width: '100%'
+        });
 
         return this;
     },

histomicsui/web_client/package.json

@@ -39,6 +39,7 @@
         "copy-webpack-plugin": "^4.5.2",
         "petite-vue": "^0.4.1",
         "plotly.js": "2.34.0",
+        "select2": "4.1.0-rc.0",
         "sinon": "^2.1.0",
         "tinycolor2": "~1.4.1",
         "url-search-params-polyfill": "^8.1.1",

histomicsui/web_client/stylesheets/dialogs/metadataPlot.styl

@@ -5,3 +5,12 @@
 
     select
       height calc(100% - 24px)
+
+  .select2-container
+    display block
+    font-size 14px
+    line-height 1.42857143
+    color #222
+
+  .select2-results__option
+    padding 0 6px

histomicsui/web_client/templates/dialogs/metadataPlot.pug

@@ -32,7 +32,7 @@
             label(for='h-plot-series-' + series.key) #{series.label}
             if series.comment
               p.g-hui-description #{series.comment}
-            select.form-control(id='h-plot-series-' + series.key, multiple=series.multiple)
+            select.h-plot-select.form-control(id='h-plot-series-' + series.key, multiple=series.multiple)
               if !series.number
                 option(value='_none_', selected=plotConfig[series.key] === undefined) None
               each opt, optidx in plotOptions