Rename SearchableSelect to SearchSelect for consistency

issue #2253

src/components/semantic/src/site/modules/dropdown.overrides

@@ -180,15 +180,15 @@
 }
 
 /* For the account service lookup input */
-.searchable-select.account-select .dropdown .menu>.item {
+.search-select.account-select .dropdown .menu>.item {
   min-height: 1.9rem;
 }
-.searchable-select.account-select .dropdown .item .description {
+.search-select.account-select .dropdown .item .description {
   font-size: 0.7rem;
 }
 
 /* separator elements */
-.searchable-select .separator {
+.search-select .separator {
   font-size: 0.72rem;
   margin: 0 0.2rem 0 0;
   padding: 0.2rem;
@@ -198,7 +198,7 @@
   transition-duration: 0.3s;
   transition-property: background-color, color;
 }
-.searchable-select .separator--hover {
+.search-select .separator--hover {
   border-radius: 4px;
   cursor: pointer;
   background-color: #e2eef1;

src/css/metacatui-common.css

@@ -3025,23 +3025,23 @@ ul.ncboTree {
 }
 
 /* --- multiselect annotation filter */
-.annotation-filter .searchable-select #bioportal-tree {
+.annotation-filter .search-select #bioportal-tree {
   display: block;
   margin-top: 0.5rem;
   overflow-x: auto;
 }
-.annotation-filter .searchable-select .menu {
+.annotation-filter .search-select .menu {
   min-height: 10rem;
 }
 /* We use the input in the semantic UI input interface to search */
 /* instead of the NCBO tree interface */
-.annotation-filter .searchable-select input.ncboAutocomplete {
+.annotation-filter .search-select input.ncboAutocomplete {
   display: none;
 }
 /* The contents of the dropdown menu is replaced with the annotation tree */
 /* Hide all of the menu items that semantic UI inserets */
-.annotation-filter .searchable-select .item,
-.annotation-filter .searchable-select .message {
+.annotation-filter .search-select .item,
+.annotation-filter .search-select .message {
   display: none !important;
 }
 
@@ -7065,7 +7065,7 @@ body.mapMode {
 }
 
 /*
-	Overrides for default Bootstrap styling for the searchable select
+	Overrides for default Bootstrap styling for the search select
 	component when we use it as a Portal data search filter. These overrides make
 	the component look nearly identical to other filters (that use native form
 	elements)
@@ -7094,7 +7094,7 @@ body.mapMode {
   line-height: 20px;
   margin: 4px 6px;
 }
-/* End Overrides for default Bootstrap styling for the searchable select */
+/* End Overrides for default Bootstrap styling for the search select */
 
 .filter-group .filter select {
   width: 100%;
@@ -7750,7 +7750,7 @@ Query builder & query rule view
   margin-top: 4.1rem;
 }
 
-.searchable-select-label {
+.search-select-label {
   margin: 0 0 3px 2px;
   font-size: 0.8rem;
 }

src/js/collections/searchSelect/SearchSelectOptions.js

@@ -6,7 +6,7 @@ define(["backbone", "models/searchSelect/SearchSelectOption"], (
 ) => {
   /**
    * @class SearchSelectOptions
-   * @classdesc A collection for managing dropdown options in a searchable
+   * @classdesc A collection for managing dropdown options in a search
    * select view.
    * @classcategory Collections/SearchSelect
    * @since 0.0.0

src/js/models/searchSelect/QueryFieldSearchSelect.js

@@ -95,7 +95,7 @@ define([
 
     /**
      * Fetches the query fields from the query service, converts them to the
-     * format required by the SearchableSelectView, and sets them as the options
+     * format required by the SearchSelectView, and sets them as the options
      * for this model
      */
     async getQueryFieldOptions() {
@@ -181,11 +181,11 @@ define([
 
     /**
      * Converts an object that represents a QueryField model to the format
-     * specified by the SearchableSelectView.options
+     * specified by the SearchSelectView.options
      * @param  {object} field An object with properties corresponding to a
      * QueryField model
      * @returns {object} An object with properties that match the format
-     * specified by the SearchableSelectView.options
+     * specified by the SearchSelectView.options
      */
     fieldToOption(field) {
       if (!field) return {};

src/js/models/searchSelect/SearchSelect.js

@@ -6,7 +6,7 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], (
 ) => {
   /**
    * @class SearchSelect
-   * @classdesc A model for managing dropdown options and state for a searchable
+   * @classdesc A model for managing dropdown options and state for a search
    * select component.
    * @classcategory Models/SearchSelect
    * @since 0.0.0

src/js/models/searchSelect/SearchSelectOption.js

@@ -3,7 +3,7 @@
 define(["backbone"], (Backbone) => {
   /**
    * @class SelectOptionModel
-   * @classdesc A model for representing an option in a searchable select dropdown.
+   * @classdesc A model for representing an option in a search select dropdown.
    * @classcategory Models/SearchSelect
    * @since 0.0.0
    * @augments Backbone.Model

src/js/views/filters/FilterGroupView.js

@@ -10,7 +10,7 @@ define([
   "views/filters/NumericFilterView",
   "views/filters/ToggleFilterView",
   "views/searchSelect/AnnotationFilterView",
-  "views/searchSelect/SearchableSelectView",
+  "views/searchSelect/SearchSelectView",
   "views/filters/SemanticFilterView",
 ], function (
   $,
@@ -24,7 +24,7 @@ define([
   NumericFilterView,
   ToggleFilterView,
   AnnotationFilterView,
-  SearchableSelectView,
+  SearchSelectView,
   SemanticFilterView,
 ) {
   "use strict";

src/js/views/filters/SemanticFilterView.js

@@ -39,7 +39,7 @@ define([
        * Render an instance of a Semantic Filter View.
        *
        * Note that this View doesn't have a template and instead delegates to
-       * the AnnotationFilterView which renders a SearchableSelectView which
+       * the AnnotationFilterView which renders a SearchSelectView which
        * renders an NCBOTree.
        * @since 2.22.0
        */
@@ -52,7 +52,7 @@ define([
           FilterView.prototype.render.call(this, templateVars);
 
           var viewOpts = {
-            useSearchableSelect: true,
+            useSearchSelect: true,
             placeholderText: templateVars.placeholder,
             inputLabel: null, // Hides label and uses FilterView label
             ontology: this.model.get("ontology"),
@@ -92,9 +92,9 @@ define([
 
       /**
        * Helper function which defocuses the dropdown portion of the
-       * SearchableSelectView used by this View's AnnotationFilterView. When the
+       * SearchSelectView used by this View's AnnotationFilterView. When the
        * user clicks an item in the NCBOTree widget, we want the
-       * SearchableSelectView's dropdown to go away and I couldn't find any API
+       * SearchSelectView's dropdown to go away and I couldn't find any API
        * to do that so we have this code. See the render() method to see how it's
        * called.
        *

src/js/views/metadata/EML211View.js

@@ -2558,7 +2558,7 @@ define([
 
           // Create the search selects
           view.taxonSelects = [];
-          const componentPath = "views/searchSelect/SearchableSelectView";
+          const componentPath = "views/searchSelect/SearchSelectView";
           require([componentPath], function (SearchSelect) {
             quickAddTaxa.forEach((taxaList, i) => {
               try {

src/js/views/queryBuilder/QueryBuilderView.js

@@ -4,7 +4,7 @@ define([
   "backbone",
   "collections/Filters",
   "collections/queryFields/QueryFields",
-  "views/searchSelect/SearchableSelectView",
+  "views/searchSelect/SearchSelectView",
   "views/queryBuilder/QueryRuleView",
   "text!templates/queryBuilder/queryBuilder.html",
 ], function (
@@ -13,7 +13,7 @@ define([
   Backbone,
   Filters,
   QueryFields,
-  SearchableSelect,
+  SearchSelect,
   QueryRule,
   Template,
 ) {
@@ -329,7 +329,7 @@ define([
         var excludeContainer = this.$el.find(this.excludeInputSelector);
         var operatorContainer = this.$el.find(this.operatorInputSelector);
         // Create the exclude input
-        var excludeInput = new SearchableSelect({
+        var excludeInput = new SearchSelect({
           options: [
             {
               label: "Include",
@@ -353,7 +353,7 @@ define([
           clearable: false,
         });
         // Create the operator input
-        var operatorInput = new SearchableSelect({
+        var operatorInput = new SearchSelect({
           options: [
             {
               label: "all",
@@ -385,7 +385,7 @@ define([
           excludeInput.model,
           "change:selected",
           function (_model, newValues) {
-            // Convert the string (necessary to be used as a value in SearchableSelect)
+            // Convert the string (necessary to be used as a value in SearchSelect)
             // to a boolean. It should be "true" or "false".
             var newExclude = newValues[0] == "true";
             this.filterGroup.set("exclude", newExclude);

src/js/views/queryBuilder/QueryRuleView.js

@@ -2,7 +2,7 @@ define([
   "jquery",
   "underscore",
   "backbone",
-  "views/searchSelect/SearchableSelectView",
+  "views/searchSelect/SearchSelectView",
   "views/searchSelect/QueryFieldSelectView",
   "views/searchSelect/NodeSelectView",
   "views/searchSelect/AccountSelectView",
@@ -14,7 +14,7 @@ define([
   $,
   _,
   Backbone,
-  SearchableSelect,
+  SearchSelect,
   QueryFieldSelect,
   NodeSelect,
   AccountSelect,
@@ -412,7 +412,7 @@ define([
         {
           queryFields: ["serviceCoupling"],
           uiFunction() {
-            return new SearchableSelect({
+            return new SearchSelect({
               options: [
                 {
                   label: "tight",
@@ -526,7 +526,7 @@ define([
         // The last is the default value selection UI
         {
           uiFunction() {
-            return new SearchableSelect({
+            return new SearchSelect({
               options: [],
               allowMulti: true,
               allowAdditions: true,
@@ -1022,7 +1022,7 @@ define([
           selectedOperator = [selectedOperator];
         }
 
-        this.operatorSelect = new SearchableSelect({
+        this.operatorSelect = new SearchSelect({
           options,
           allowMulti: false,
           inputLabel: "Select an operator",
@@ -1395,7 +1395,7 @@ define([
         this.valueSelect = interfaceProperties.uiFunction.call(this);
         if (interfaceProperties.label && interfaceProperties.label.length) {
           label = $(
-            `<p class='subtle searchable-select-label'>${interfaceProperties.label}</p>`,
+            `<p class='subtle search-select-label'>${interfaceProperties.label}</p>`,
           );
         }
 

src/js/views/searchSelect/AccountSelectView.js

@@ -1,18 +1,18 @@
 define([
-  "views/searchSelect/SearchableSelectView",
+  "views/searchSelect/SearchSelectView",
   "models/searchSelect/AccountSearchSelect",
-], (SearchableSelect, AccountSearchSelect) => {
+], (SearchSelect, AccountSearchSelect) => {
   /**
    * @class AccountSelectView
    * @classdesc A select interface that allows the user to search for and select one or
    * more accountIDs
    * @classcategory Views/SearchSelect
-   * @augments SearchableSelect
+   * @augments SearchSelect
    * @class
    * @since 2.15.0
    * @screenshot views/searchSelect/AccountSelectViewView.png
    */
-  const AccountSelectView = SearchableSelect.extend(
+  const AccountSelectView = SearchSelect.extend(
     /** @lends AccountSelectViewView.prototype */
     {
       /** @inheritdoc */
@@ -22,7 +22,7 @@ define([
       ModelType: AccountSearchSelect,
 
       /** @inheritdoc */
-      className: `${SearchableSelect.prototype.className} account-select`,
+      className: `${SearchSelect.prototype.className} account-select`,
 
       // TODO: We may want to add a custom is valid option to warn the user when
       // a value entered cannot be found in the accounts lookup service.

src/js/views/searchSelect/AnnotationFilterView.js

@@ -59,7 +59,7 @@ define(["jquery", "underscore", "backbone", "bioportal"], function (
        * @type {boolean}
        * @since 2.22.0
        */
-      useSearchableSelect: false,
+      useSearchSelect: false,
 
       /**
        * The acronym of the ontology or ontologies to render a tree from.
@@ -132,7 +132,7 @@ define(["jquery", "underscore", "backbone", "bioportal"], function (
 
           var view = this;
 
-          if (view.multiselect || view.useSearchableSelect) {
+          if (view.multiselect || view.useSearchSelect) {
             view.createMultiselect();
           } else {
             view.setUpTree();
@@ -198,10 +198,10 @@ define(["jquery", "underscore", "backbone", "bioportal"], function (
         try {
           var view = this;
 
-          require(["views/searchSelect/SearchableSelectView"], function (
-            SearchableSelect,
+          require(["views/searchSelect/SearchSelectView"], function (
+            SearchSelect,
           ) {
-            view.multiSelectView = new SearchableSelect({
+            view.multiSelectView = new SearchSelect({
               placeholderText: view.placeholderText
                 ? view.placeholderText
                 : "Search for or select a value",
@@ -220,7 +220,7 @@ define(["jquery", "underscore", "backbone", "bioportal"], function (
               view.updateMultiselect.call(view);
             }
 
-            //Forward the separatorChanged event from the SearchableSelectView to this AnnotationFilterView
+            //Forward the separatorChanged event from the SearchSelectView to this AnnotationFilterView
             //(perhaps this view should have been a subclass?)
             view.multiSelectView.on("separatorChanged", (separatorText) => {
               view.trigger("separatorChanged", separatorText);
@@ -235,7 +235,7 @@ define(["jquery", "underscore", "backbone", "bioportal"], function (
       },
 
       /**
-       * updateMultiselect - Functions to run once a SearchableSelect view has
+       * updateMultiselect - Functions to run once a SearchSelect view has
        * been rendered and inserted into this view, and the labels for any
        * pre-selected annotation values have been fetched. Updates the
        * hidden menu of items and the selected items.