Merge pull request #21063 from guerler/remove_jquery.001

Remove jquery from legacy onload helpers and Rule Builder

Author: guerler

client/src/components/RuleBuilder/ColumnSelector.vue

@@ -1,14 +1,12 @@
 <template>
     <div v-if="!multiple || !ordered" class="rule-column-selector">
-        <label class="d-flex justify-content-end align-items-center">
+        <div class="d-flex justify-content-end align-items-center">
             <span v-b-tooltip.hover class="mr-auto help-text" :title="help">{{ label }}</span>
             <div v-b-tooltip.hover class="mr-1" :title="title">
-                <Select2 :value="target" :multiple="multiple" @input="handleInput">
-                    <option v-for="(col, index) in colHeaders" :key="col" :value="index">{{ col }}</option>
-                </Select2>
+                <SelectBasic :value="target" :multiple="multiple" :options="columnOptions" @input="handleInput" />
             </div>
             <slot></slot>
-        </label>
+        </div>
     </div>
     <div v-else class="rule-column-selector">
         <span class="help-text" :title="help">{{ label }}</span>
@@ -28,25 +26,21 @@
                     <i @click="$emit('update:orderedEdit', true)">... {{ l("Assign Another Column") }}</i>
                 </span>
                 <span v-else class="rule-column-selector-target-select">
-                    <Select2 placeholder="Select a column" @input="handleAdd">
-                        <option />
-                        <!-- empty option selection for placeholder -->
-                        <option v-for="(col, index) in remainingHeaders" :key="col" :value="index">{{ col }}</option>
-                    </Select2>
+                    <SelectBasic placeholder="Select a column" :options="remainingOptions" @input="handleAdd" />
                 </span>
             </li>
         </ol>
     </div>
 </template>
 
 <script>
-import Select2 from "components/Select2";
+import SelectBasic from "components/RuleBuilder/SelectBasic";
 import _l from "utils/localization";
 import Vue from "vue";
 
 export default {
     components: {
-        Select2,
+        SelectBasic,
     },
     props: {
         target: {
@@ -86,18 +80,15 @@ export default {
         },
     },
     computed: {
-        remainingHeaders() {
-            const colHeaders = this.colHeaders;
+        columnOptions() {
+            return this.colHeaders.map((col, index) => ({ id: index, text: col }));
+        },
+        remainingOptions() {
             if (!this.multiple) {
-                return colHeaders;
-            }
-            const remaining = {};
-            for (const key in colHeaders) {
-                if (this.target.indexOf(parseInt(key)) === -1) {
-                    remaining[key] = colHeaders[key];
-                }
+                return this.columnOptions;
             }
-            return remaining;
+            const exclude = new Set(this.target.map(Number));
+            return this.columnOptions.filter((opt) => !exclude.has(opt.id));
         },
         title() {
             return _l("Select a column");

client/src/components/RuleBuilder/SelectBasic.vue

@@ -0,0 +1,45 @@
+<template>
+    <VueMultiselect
+        class="select-basic"
+        :allow-empty="multiple"
+        :close-on-select="!multiple"
+        :options="options"
+        :multiple="multiple"
+        :placeholder="placeholder || 'Select an option'"
+        :value="selectedValue"
+        deselect-label=""
+        label="text"
+        select-label=""
+        track-by="id"
+        @input="onInput" />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import VueMultiselect from "vue-multiselect";
+
+const props = defineProps({
+    value: { required: false },
+    multiple: { type: Boolean, default: false },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: null },
+});
+
+const emit = defineEmits(["input"]);
+
+const selectedValue = computed(() => {
+    if (!props.value) {
+        return props.multiple ? [] : null;
+    }
+    if (props.multiple) {
+        return props.options.filter((opt) => props.value.includes(opt.id));
+    }
+    const singleValue = Array.isArray(props.value) ? props.value[0] : props.value;
+    return props.options.find((opt) => opt.id === singleValue) || null;
+});
+
+const onInput = (selected) => {
+    const outputValue = props.multiple ? selected.map((opt) => opt.id) : selected ? selected.id : null;
+    emit("input", outputValue);
+};
+</script>

client/src/components/RuleCollectionBuilder.vue

@@ -56,7 +56,7 @@
                             :display-rule-type.sync="displayRuleType"
                             @saveRule="handleRuleSave">
                             <ColumnSelector :target.sync="addSortingTarget" :col-headers="activeRuleColHeaders" />
-                            <label v-b-tooltip.hover :title="titleNumericSort">
+                            <label v-b-tooltip.hover.noninteractive :title="titleNumericSort">
                                 <input v-model="addSortingNumeric" type="checkbox" />
                                 {{ l("Numeric sorting.") }}
                             </label>
@@ -141,7 +141,7 @@
                                 {{ l("Replacement Expression") }}
                                 <input v-model="addColumnRegexReplacement" type="text" class="rule-replacement" />
                             </label>
-                            <label v-b-tooltip.hover>
+                            <label v-b-tooltip.hover.noninteractive>
                                 <input v-model="addColumnRegexAllowUnmatched" type="checkbox" />
                                 {{ l("Allow regular expression unmatched.") }}
                             </label>
@@ -401,7 +401,7 @@
                             <div class="rules-buttons btn-group">
                                 <div class="dropup">
                                     <button
-                                        v-b-tooltip.hover.bottom
+                                        v-b-tooltip.hover.bottom.noninteractive
                                         type="button"
                                         :title="titleRulesMenu"
                                         class="rule-menu-rules-button primary-button dropdown-toggle"
@@ -425,7 +425,7 @@
                                 </div>
                                 <div class="dropup">
                                     <button
-                                        v-b-tooltip.hover.bottom
+                                        v-b-tooltip.hover.bottom.noninteractive
                                         type="button"
                                         :title="titleFilterMenu"
                                         class="rule-menu-filter-button primary-button dropdown-toggle"
@@ -444,7 +444,7 @@
                                 </div>
                                 <div class="dropup">
                                     <button
-                                        v-b-tooltip.hover.bottom
+                                        v-b-tooltip.hover.bottom.noninteractive
                                         type="button"
                                         :title="titleColumMenu"
                                         class="rule-menu-column-button primary-button dropdown-toggle"
@@ -520,17 +520,15 @@
                     <input v-if="elementsType == 'datasets'" v-model="hideSourceItems" type="checkbox" />
                     <div v-if="extension && showFileTypeSelector" class="rule-footer-extension-group">
                         <label>{{ l("Type") }}:</label>
-                        <Select2 v-model="extension" name="extension" class="extension-select">
-                            <option v-for="col in extensions" :key="col.id" :value="col['id']">
-                                {{ col["text"] }}
-                            </option>
-                        </Select2>
+                        <SelectBasic
+                            v-model="extension"
+                            name="extension"
+                            class="extension-select"
+                            :options="extensions" />
                     </div>
                     <div v-if="genome && showGenomeSelector" class="rule-footer-genome-group">
                         <label>{{ l("Genome") }}:</label>
-                        <Select2 v-model="genome" class="genome-select">
-                            <option v-for="col in genomes" :key="col.id" :value="col['id']">{{ col["text"] }}</option>
-                        </Select2>
+                        <SelectBasic v-model="genome" class="genome-select" :options="genomes" />
                     </div>
                     <label v-if="showAddNameTag">{{ l("Add nametag for name") }}:</label>
                     <input v-if="showAddNameTag" v-model="addNameTag" type="checkbox" />
@@ -625,10 +623,9 @@ import RuleModalMiddle from "components/RuleBuilder/RuleModalMiddle";
 import RuleTargetComponent from "components/RuleBuilder/RuleTargetComponent";
 import SavedRulesSelector from "components/RuleBuilder/SavedRulesSelector";
 import SaveRules from "components/RuleBuilder/SaveRules";
+import SelectBasic from "components/RuleBuilder/SelectBasic";
 import StateDiv from "components/RuleBuilder/StateDiv";
-import Select2 from "components/Select2";
 import UploadUtils from "components/Upload/utils";
-import $ from "jquery";
 import { getAppRoot } from "onload/loadConfig";
 import { useHistoryStore } from "stores/historyStore";
 import _ from "underscore";
@@ -662,7 +659,7 @@ export default {
         RuleModalHeader,
         RuleModalMiddle,
         RuleModalFooter,
-        Select2,
+        SelectBasic,
         GButton,
     },
     mixins: [SaveRules],
@@ -1496,25 +1493,6 @@ export default {
                 this.errorMessage = "Unknown error encountered: " + error;
             }
         },
-        swapOrientation() {
-            this.orientation = this.orientation == "horizontal" ? "vertical" : "horizontal";
-            const hotTable = this.$refs.hotTable.table;
-            if (this.orientation == "horizontal") {
-                this.$nextTick(function () {
-                    const fullWidth = $(".rule-builder-body").width();
-                    hotTable.updateSettings({
-                        width: fullWidth,
-                    });
-                });
-            } else {
-                this.$nextTick(function () {
-                    const fullWidth = $(".rule-builder-body").width();
-                    hotTable.updateSettings({
-                        width: fullWidth - 270,
-                    });
-                });
-            }
-        },
         attemptCreate() {
             this.createCollection();
         },
@@ -1856,16 +1834,16 @@ export default {
             return { data, sources };
         },
         highlightColumn(n) {
-            const headerSelection = $(`.htCore > thead > tr > th:nth-child(${n + 1})`);
-            headerSelection.addClass("ht__highlight");
-            const bodySelection = $(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
-            bodySelection.addClass("rule-highlight");
+            const headerSelection = document.querySelectorAll(`.htCore > thead > tr > th:nth-child(${n + 1})`);
+            headerSelection.forEach((el) => el.classList.add("ht__highlight"));
+            const bodySelection = document.querySelectorAll(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
+            bodySelection.forEach((el) => el.classList.add("rule-highlight"));
         },
         unhighlightColumn(n) {
-            const headerSelection = $(`.htCore > thead > tr > th:nth-child(${n + 1})`);
-            headerSelection.removeClass("ht__highlight");
-            const bodySelection = $(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
-            bodySelection.removeClass("rule-highlight");
+            const headerSelection = document.querySelectorAll(`.htCore > thead > tr > th:nth-child(${n + 1})`);
+            headerSelection.forEach((el) => el.classList.remove("ht__highlight"));
+            const bodySelection = document.querySelectorAll(`.htCore > tbody > tr > td:nth-child(${n + 1})`);
+            bodySelection.forEach((el) => el.classList.remove("rule-highlight"));
         },
         _datasetFor(dataIndex, data, mappingAsDict) {
             const res = {};
@@ -1976,7 +1954,7 @@ export default {
         width: 100%;
         overflow: hidden;
     }
-    .select2-container {
+    .select-basic {
         min-width: 60px;
     }
     .vertical #hot-table {
@@ -2066,33 +2044,33 @@ export default {
         font-style: italic;
         font-weight: bold;
     }
-    .rules-buttons {
-    }
     .rule-footer-inputs label {
-        padding-left: 20px;
+        margin-left: 1rem;
+        margin-right: 1rem;
         align-self: baseline;
     }
-    .rule-footer-inputs .select2-container {
+    .rule-footer-inputs .select-basic {
         align-self: baseline;
     }
     .rule-footer-inputs {
         display: flex;
         justify-content: space-between;
         flex-wrap: wrap;
         align-items: baseline;
+        margin-top: 1rem;
     }
     .rule-footer-inputs input {
         align-self: baseline;
     }
     .extension-select {
         flex: 1;
-        max-width: 120px;
-        min-width: 60px;
+        max-width: 200px;
+        min-width: 200px;
     }
     .genome-select {
         flex: 1;
         max-width: 300px;
-        min-width: 120px;
+        min-width: 300px;
     }
     .collection-name {
         flex: 1;

client/src/components/Select2.vue

@@ -11,7 +11,6 @@ import GridModel from "legacy/grid/grid-model";
 import Templates from "legacy/grid/grid-template";
 import PopupMenu from "./popup-menu";
 import { setWindowTitle } from "./utils";
-import { init_refresh_on_change } from "onload/globalInits/init_refresh_on_change";
 
 var $ = jQuery;
 
@@ -114,10 +113,6 @@ export default Backbone.View.extend({
         // configure elements
         this.init_grid_elements();
         this.init_grid_controls();
-
-        // attach global event handler
-        // TODO: redundant (the onload/standard page handlers do this) - but needed because these are constructed after page ready
-        init_refresh_on_change();
     },
 
     // Initialize grid controls