Minor tweaks to bioontolgy views and models

- Includes formatting & linting fixes
- Standardize the behaviour of fetching remote info for preselected values in SsearchSelect view
- Use the SearchSelectOptions view in the SearchSelect view
- Remove unused view property from BioOntologyBrowserView

Issue #1654

src/js/common/Utilities.js

@@ -1,6 +1,6 @@
-define([], () => {
-  "use strict";
+"use strict";
 
+define([], () => {
   /**
    * @namespace Utilities
    * @description A generic utility object that contains functions used throughout MetacatUI to perform useful functions,

src/js/models/connectors/Bioontology-Accordion-SearchSelect.js

@@ -87,7 +87,6 @@ define([
           ontology: firstOntology.ontology,
           subTree: firstOntology.subTree,
         });
-        bioontology.fetch();
         this.set("bioontology", bioontology);
       },
 

src/js/models/ontologies/Bioontology.js

@@ -116,7 +116,6 @@ define(["backbone", "models/ontologies/BioontologyClass"], (
       if (displayContext === false) url += `&display_context=false`;
       if (displayLinks === false) url += `&display_links=false`;
       if (include) url += `&include=${include}`;
-
       return url;
     },
 

src/js/models/searchSelect/AccountSearchSelect.js

@@ -22,7 +22,7 @@ define(["models/searchSelect/SearchSelect", "models/LookupModel"], (
         placeholderText: "Start typing a name",
         inputLabel: "Search for a person or group",
         allowMulti: true,
-        allowAdditions: true,
+        allowAdditions: false,
         apiSettings: {
           responseAsync: this.responseAsync.bind(this),
         },
@@ -33,7 +33,6 @@ define(["models/searchSelect/SearchSelect", "models/LookupModel"], (
     initialize() {
       if (!MetacatUI.appLookupModel)
         MetacatUI.appLookupModel = new LookupModel();
-      this.setOptionsForPreselected();
       SearchSelect.prototype.initialize.call(this);
     },
 

src/js/models/searchSelect/SearchSelect.js

@@ -56,6 +56,8 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], (
      * @property {string|boolean} icon Set this to a FontAwesome icon to use
      * instead of the default dropdown (down arrow) icon. Works will with the
      * buttonStyle option.
+     * @property {boolean} fluid Set this to true to make the dropdown take up
+     * the full width of its container.
      */
     defaults() {
       return {
@@ -75,16 +77,21 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], (
         inputLabel: "Select a value",
         buttonStyle: false,
         icon: false,
+        fluid: true,
       };
     },
 
     /** @inheritdoc */
     initialize(attributes, _options) {
+      this.setOptionsForPreselected();
       const optionsData = attributes?.options;
       // Select options must be parsed if they are not already
       // SearchSelectOption collections
       if (optionsData && !(optionsData instanceof SearchSelectOptions)) {
-        this.updateOptions(optionsData);
+        this.set(
+          "options",
+          new SearchSelectOptions(optionsData, { parse: true }),
+        );
       }
       // Save a reference to the original submenu style to revert to when search
       // term is removed
@@ -116,14 +123,8 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], (
      * @param {object|object[]} options The new options to set for the dropdown
      */
     updateOptions(options) {
-      this.stopListening(this.get("options"));
       const parse = typeof options === "object" && !Array.isArray(options);
-      this.set("options", new SearchSelectOptions(options, { parse }));
-      this.listenTo(
-        this.get("options"),
-        "all",
-        this.trigger.bind(this, "change:options"),
-      );
+      this.get("options").reset(options, { parse });
     },
 
     /**
@@ -167,7 +168,7 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], (
      * not a multi-select dropdown, the selected value will replace any existing
      * value.
      * @param {string} value - The value to add to the selected list.
-     * @param {object} options - Additional options to be passed to the 's set
+     * @param {object} options - Additional options to be passed to the set
      * method.
      */
     addSelected(value, options = {}) {
@@ -267,6 +268,16 @@ define(["backbone", "collections/searchSelect/SearchSelectOptions"], (
         selected.includes(model.get("value")),
       );
     },
+
+    /**
+     * This method is set for extended models that fetch options asynchronously
+     * on search. This method should be overridden to fetch options from the API
+     * for the values that are currently selected in the dropdown. This allows
+     * those values to be populated with the correct label and icon.
+     */
+    setOptionsForPreselected() {
+      // This method should be overridden in extended models
+    },
   });
 
   return SearchSelect;

src/js/models/searchSelect/SolrAutocomplete.js

@@ -53,7 +53,6 @@ define(["models/searchSelect/SearchSelect", "collections/SolrResults"], (
     },
 
     formatOptions() {
-
       const results = this.get("searchResults");
       const queryField = this.get("queryField");
       const facetArray = results.facetCounts[queryField];

src/js/views/ontologies/BioontologyBrowserView.js

@@ -43,12 +43,6 @@ define([
       /** @inheritdoc */
       className: BASE_CLASS,
 
-      /**
-       * The HTML string to display when parts of the view are loading
-       * @type {string}
-       */
-      loadingHTML: `<i class="${CLASS_NAMES.metacatui.loader}"></i><span>Loading...</span>`,
-
       /**
        * The HTML string to display when no term is selected
        */

src/js/views/searchSelect/SearchSelectHeaderView.js

@@ -1,7 +1,6 @@
 "use strict";
 
 define(["backbone", "semantic"], (Backbone, Semantic) => {
-
   // The class for the outermost element of the header.
   const BASE_CLASS = Semantic.CLASS_NAMES.dropdown.header;
 
@@ -70,9 +69,11 @@ define(["backbone", "semantic"], (Backbone, Semantic) => {
       render() {
         this.icons = {};
 
-        this.icons.category = this.createIconEl(
-          [CLASS_NAMES.icon, `${CLASS_NAMES.icon}-${this.categoryIcon}`, CLASS_NAMES.categoryIcon]
-        );
+        this.icons.category = this.createIconEl([
+          CLASS_NAMES.icon,
+          `${CLASS_NAMES.icon}-${this.categoryIcon}`,
+          CLASS_NAMES.categoryIcon,
+        ]);
         this.icons.accordion = this.createIconEl([
           CLASS_NAMES.chevronDown,
           CLASS_NAMES.accordionIcon,

src/js/views/searchSelect/SearchSelectView.js

@@ -227,13 +227,15 @@ define([
        * the selected text elements in a single-select dropdown.
        * @since 0.0.0
        */
-      addClickToTexts(){
-        const showMenu = () => { this.$selectUI.dropdown("show") };
+      addClickToTexts() {
+        const showMenu = () => {
+          this.$selectUI.dropdown("show");
+        };
         const texts = this.getTexts();
-        if(!texts?.length) return;
+        if (!texts?.length) return;
         texts.forEach((text) => text.removeEventListener("click", showMenu));
         const text = this.getTexts()?.[0];
-        if(!text) return;
+        if (!text) return;
         text.addEventListener("click", showMenu);
       },
 

src/js/views/searchSelect/SeparatorView.js

@@ -1,9 +1,6 @@
 "use strict";
 
-define([
-  "backbone",
-  "semantic"
-], (Backbone, _Semantic) => {
+define(["backbone", "semantic"], (Backbone, _Semantic) => {
   // Default class names for the separator element
   const BASE_CLASS = "separator";
   const CLASS_NAMES = {