fix(directory): don't select more than 50 ontology items

apps/directory/src/components/filters/OntologyFilter.vue

@@ -38,7 +38,14 @@
       >
         <div v-show="selectedOntology === ontologyId" class="w-100">
           <div v-if="displayOptions.length">
+            <MessageWarning
+              class="mx-3 position-absolute"
+              v-if="selectionOverflow"
+              >You can only select 50 items at a time under 'Match All'. Please
+              adjust your query.</MessageWarning
+            >
             <TreeComponent
+              :class="{ 'warning-padding': selectionOverflow }"
               :options="displayOptions"
               :filter="ontologyQuery"
               :facetIdentifier="facetIdentifier"
@@ -61,6 +68,8 @@ import TreeComponent from "./base/TreeComponent.vue";
 import { Spinner } from "../../../../molgenis-components";
 import MatchTypeRadiobutton from "./base/MatchTypeRadiobutton.vue";
 import * as _ from "lodash";
+//@ts-ignore
+import { MessageWarning } from "molgenis-components";
 
 const filtersStore = useFiltersStore();
 
@@ -84,6 +93,14 @@ options()
     console.log(`Error resolving ontology facet options: ${error}`);
   });
 
+let selectionOverflow = computed(() => {
+  return (
+    facetIdentifier === "Diagnosisavailable" &&
+    filtersStore.filters["Diagnosisavailable"]?.length >= 50 &&
+    filtersStore.getFilterType("Diagnosisavailable") === "all"
+  );
+});
+
 let displayOptions = computed(() => {
   if (!resolvedOptions.value) return [];
   if (!ontologyQuery.value) {
@@ -163,4 +180,8 @@ function setSelectedOntology(ontologyId: string) {
 .ontology-search {
   width: 100%;
 }
+
+.warning-padding {
+  padding-top: 4rem;
+}
 </style>

apps/directory/src/stores/filtersStore.ts

@@ -223,17 +223,30 @@ export const useFiltersStore = defineStore("filtersStore", () => {
   }
 
   function addOntologyOptions(filterName: string, value: IOntologyItem[]) {
+    const diagnosisavailableCount = filters.value.Diagnosisavailable?.length
+      ? filters.value.Diagnosisavailable.length
+      : 0;
+    const limit = 50;
+    let ontologySet = value;
+    const slotsRemaining = limit - diagnosisavailableCount;
+    if (
+      filterName === "Diagnosisavailable" &&
+      getFilterType("Diagnosisavailable") === "all"
+    ) {
+      ontologySet = ontologySet.slice(0, slotsRemaining);
+    }
+
     if (filters.value[filterName]) {
       const existingValues = filters.value[filterName].map(
         (option: IOntologyItem) => option.name
       );
-      const filterOptionsToAdd = value.filter(
+      const filterOptionsToAdd = ontologySet.filter(
         (newValue: IOntologyItem) => !existingValues.includes(newValue.name)
       );
       filters.value[filterName] =
         filters.value[filterName].concat(filterOptionsToAdd);
     } else {
-      filters.value[filterName] = value;
+      filters.value[filterName] = ontologySet;
     }
   }
 
@@ -346,6 +359,17 @@ export const useFiltersStore = defineStore("filtersStore", () => {
   }
 
   function updateFilterType(filterName: string, value: any, fromBookmark: any) {
+    if (
+      filterName === "Diagnosisavailable" &&
+      (filterType.value[filterName] === "any" ||
+        filterType.value[filterName] === undefined) &&
+      filters.value["Diagnosisavailable"]?.length > 50
+    ) {
+      filters.value["Diagnosisavailable"] = filters.value[
+        "Diagnosisavailable"
+      ].slice(0, 50);
+    }
+
     bookmarkTriggeredFilter.value = fromBookmark;
 
     if (value === "" || value === undefined || value.length === 0) {