[24.1] Disable state filter for collections in HistoryFilters

Adds a `disablesFilters` property to the `ValidFilter` class which allows for the functionality of disabling other filters given certain values for a given filter. Note: This only works for ranged, input-field and dropdown type filters in the `FilterMenu` Fixes galaxyproject#18264
ahmedhamidawan · Jun 4, 2024 · f3ed250 · f3ed250
1 parent c681c0c
commit f3ed250
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 6 deletions.
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
@@ -4,7 +4,7 @@ import { faAngleDoubleUp, faQuestion, faSearch } from "@fortawesome/free-solid-s
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BModal, BPopover } from "bootstrap-vue";
 import { kebabCase } from "lodash";
-import { computed, ref } from "vue";
+import { computed, ref, set, watch } from "vue";
 
 import type Filtering from "@/utils/filtering";
 import { type Alias, type ErrorType, getOperatorForAlias, type ValidFilter } from "@/utils/filtering";
@@ -91,6 +91,8 @@ const toggleMenuButton = computed(() => {
 // Boolean for showing the help modal for the whole filter menu (if provided)
 const showHelp = ref(false);
 
+const isDisabled = ref<Record<string, boolean>>({});
+
 const formattedSearchError = computed<ErrorType | null>(() => {
     if (props.searchError) {
         const { column, col, operation, op, value, val, err_msg, ValueError } = props.searchError;
@@ -144,6 +146,8 @@ function getValidFilter(filter: string): ValidFilter<any> {
 function onOption(filter: string, value: any) {
     filters.value[filter] = value;
 
+    setDisabled(filter, value);
+
     // for the compact view, we want to immediately search
     if (props.view === "compact") {
         onSearch();
@@ -177,6 +181,21 @@ function onToggle() {
     emit("update:show-advanced", !props.showAdvanced);
 }
 
+function setDisabled(filter: string, newVal: any) {
+    const disablesFilters = validFilters.value[filter]?.disablesFilters;
+    const type = validFilters.value[filter]?.type;
+    if (disablesFilters && type !== Boolean) {
+        for (const [disabledFilter, disablingValues] of Object.entries(disablesFilters)) {
+            if (newVal && (disablingValues === null || disablingValues.includes(newVal))) {
+                set(isDisabled.value, disabledFilter, true);
+                filters.value[disabledFilter] = undefined;
+            } else {
+                set(isDisabled.value, disabledFilter, false);
+            }
+        }
+    }
+}
+
 function updateFilterText(newFilterText: string) {
     emit("update:filter-text", newFilterText);
 }
@@ -243,6 +262,7 @@ function updateFilterText(newFilterText: string) {
                             :filters="filters"
                             :error="formattedSearchError || undefined"
                             :identifier="identifier"
+                            :disabled="isDisabled[filter] || false"
                             @change="onOption"
                             @on-enter="onSearch"
                             @on-esc="onToggle" />
@@ -269,6 +289,7 @@ function updateFilterText(newFilterText: string) {
                             :filter="getValidFilter(filter)"
                             :filters="filters"
                             :identifier="identifier"
+                            :disabled="isDisabled[filter] || false"
                             @change="onOption" />
                         <FilterMenuInput
                             v-else-if="validFilters[filter]?.type !== Boolean"
@@ -277,6 +298,7 @@ function updateFilterText(newFilterText: string) {
                             :filters="filters"
                             :error="errorForField(filter) || undefined"
                             :identifier="identifier"
+                            :disabled="isDisabled[filter] || false"
                             @change="onOption"
                             @on-enter="onSearch"
                             @on-esc="onToggle" />

diff --git a/client/src/components/Common/FilterMenuDropdown.vue b/client/src/components/Common/FilterMenuDropdown.vue
@@ -31,6 +31,7 @@ interface Props {
         [k: string]: FilterValue;
     };
     identifier: string;
+    disabled?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -76,7 +77,9 @@ const helpToggle = ref(false);
 const modalTitle = `${capitalize(props.filter.placeholder)} Help`;
 function onHelp(_: string, value: string) {
     helpToggle.value = false;
-    localValue.value = value;
+    if (!props.disabled) {
+        localValue.value = value;
+    }
 }
 
 // Quota Source refs and operations
@@ -140,6 +143,7 @@ function setValue(val: string | QuotaUsage | undefined) {
                 menu-class="w-100"
                 size="sm"
                 boundary="window"
+                :disabled="props.disabled"
                 :toggle-class="props.error ? 'text-danger' : ''">
                 <BDropdownItem href="#" @click="setValue(undefined)"><i>(any)</i></BDropdownItem>
 

diff --git a/client/src/components/Common/FilterMenuInput.vue b/client/src/components/Common/FilterMenuInput.vue
@@ -28,6 +28,7 @@ interface Props {
     filters: {
         [k: string]: FilterType;
     };
+    disabled?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -47,14 +48,18 @@ const modalTitle = `${capitalize(props.filter.placeholder)} Help`;
 
 function onHelp(_: string, value: string) {
     helpToggle.value = false;
-    localValue.value = value;
+
+    if (!props.disabled) {
+        localValue.value = value;
+    }
 }
 
 watch(
     () => localValue.value,
     (newFilter) => {
         emit("change", props.name, newFilter);
-    }
+    },
+    { immediate: true }
 );
 
 watch(
@@ -79,6 +84,7 @@ watch(
                 size="sm"
                 :state="props.error ? false : null"
                 :placeholder="`any ${props.filter.placeholder}`"
+                :disabled="props.disabled"
                 :list="props.filter.datalist ? `${identifier}-${props.name}-selectList` : null"
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
@@ -99,6 +105,7 @@ watch(
                     v-model="localValue"
                     reset-button
                     button-only
+                    :disabled="props.disabled"
                     size="sm" />
             </BInputGroupAppend>
         </BInputGroup>

diff --git a/client/src/components/Common/FilterMenuRanged.vue b/client/src/components/Common/FilterMenuRanged.vue
@@ -14,6 +14,7 @@ interface Props {
     filters: {
         [k: string]: FilterType;
     };
+    disabled?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -93,11 +94,12 @@ watch(
                 size="sm"
                 :state="hasError(localNameGt) ? false : null"
                 :placeholder="localPlaceholder('gt')"
+                :disabled="props.disabled"
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
 
             <BInputGroupAppend v-if="isDateType">
-                <BFormDatepicker v-model="localValueGt" reset-button button-only size="sm" />
+                <BFormDatepicker v-model="localValueGt" reset-button button-only size="sm" :disabled="props.disabled" />
             </BInputGroupAppend>
             <!--------------------------------------------------------------------->
 
@@ -109,11 +111,12 @@ watch(
                 size="sm"
                 :state="hasError(localNameLt) ? false : null"
                 :placeholder="localPlaceholder('lt')"
+                :disabled="props.disabled"
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
 
             <BInputGroupAppend v-if="isDateType">
-                <BFormDatepicker v-model="localValueLt" reset-button button-only size="sm" />
+                <BFormDatepicker v-model="localValueLt" reset-button button-only size="sm" :disabled="props.disabled" />
             </BInputGroupAppend>
             <!--------------------------------------------------------------------->
         </BInputGroup>

diff --git a/client/src/components/History/Content/model/StatesInfo.vue b/client/src/components/History/Content/model/StatesInfo.vue
@@ -39,6 +39,8 @@ function onFilter(value: string) {
                 (Note that the colors for each state correspond to content item state colors in the history, and if it
                 exists, hovering over the icon on a history item will display the state message.)
             </i>
+            <br />
+            <b>You cannot filter a history for collections given a state.</b>
         </p>
         <dl v-for="(state, key, index) in states" :key="index">
             <div :class="['alert', 'content-item', 'alert-' + state.status]" :data-state="dataState(key)">

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -509,6 +509,7 @@ function setItemDragstart(
 
                 <FilterMenu
                     v-if="filterable"
+                    :key="props.history.id"
                     class="content-operations-filters mx-3"
                     name="History Items"
                     placeholder="search datasets"

diff --git a/client/src/components/History/HistoryFilters.js b/client/src/components/History/HistoryFilters.js
@@ -26,6 +26,7 @@ const validFilters = {
             { value: "dataset_collection", text: "Collections Only" },
         ],
         menuItem: true,
+        disablesFilters: { state: ["dataset_collection"] },
     },
     tag: { placeholder: "tag", type: String, handler: contains("tags", "tag", expandNameTag), menuItem: true },
     state: {
@@ -35,6 +36,7 @@ const validFilters = {
         datalist: states,
         helpInfo: StatesInfo,
         menuItem: true,
+        disablesFilters: { history_content_type: null },
     },
     genome_build: { placeholder: "database", type: String, handler: contains("genome_build"), menuItem: true },
     genome_build_eq: { handler: equals("genome_build"), menuItem: false },

diff --git a/client/src/utils/filtering.ts b/client/src/utils/filtering.ts
@@ -85,6 +85,12 @@ export type ValidFilter<T> = {
     helpInfo?: DefineComponent | string;
     /** A default value (will make this a default filter for an empty `filterText`) */
     default?: T;
+    /** A dict of filters and corresponding values for this filter that disable them.
+     * Note: if value is null, the filter is disabled for any value of this filter.
+     */
+    disablesFilters?: {
+        [filter: string]: T[] | null;
+    };
 };
 
 /** Converts user input to backend compatible date