Max recommended organisms gate (#1571)

* Added useMaxRecommendedGate hook and applied to OrganismParam variants

* tidy up unused selectedValues

* model-configurable maxRecommendedMsg and other improvements

Author: bobular

packages/libs/preferred-organisms/src/lib/components/OrganismParam.tsx

@@ -50,6 +50,7 @@ import {
   usePreferredSpecies,
 } from '../hooks/preferredOrganisms';
 import { useReferenceStrains } from '../hooks/referenceStrains';
+import { useMaxRecommendedGate } from '../hooks/maxRecommendedGate';
 
 import { OrganismPreferencesWarning } from './OrganismPreferencesWarning';
 
@@ -64,16 +65,20 @@ export const SHOW_ONLY_PREFERRED_ORGANISMS_PROPERTY =
 export const HIGHLIGHT_REFERENCE_ORGANISMS_PROPERTY =
   'highlightReferenceOrganisms';
 export const IS_SPECIES_PARAM_PROPERTY = 'isSpeciesParam';
+export const MAX_RECOMMENDED_PROPERTY = 'maxRecommended';
+export const MAX_RECOMMENDED_MSG_PROPERTY = 'maxRecommendedMsg';
 
-interface OrganismParamProps<T extends Parameter, S = void>
-  extends DefaultParamProps<T, S> {
+interface OrganismParamProps<
+  T extends Parameter,
+  S = void,
+> extends DefaultParamProps<T, S> {
   isSearchPage?: boolean;
 }
 
 export function OrganismParam(props: OrganismParamProps<Parameter, State>) {
   if (!isOrganismParamProps(props)) {
     throw new Error(
-      `Tried to render non-organism parameter ${props.parameter.name} with OrganismParam.`
+      `Tried to render non-organism parameter ${props.parameter.name} with OrganismParam.`,
     );
   }
 
@@ -87,7 +92,7 @@ export function OrganismParam(props: OrganismParamProps<Parameter, State>) {
 }
 
 export function ValidatedOrganismParam(
-  props: OrganismParamProps<EnumParam, State>
+  props: OrganismParamProps<EnumParam, State>,
 ) {
   return props.parameter.displayType === 'treeBox' ? (
     <TreeBoxOrganismEnumParam
@@ -101,18 +106,31 @@ export function ValidatedOrganismParam(
 }
 
 function TreeBoxOrganismEnumParam(
-  props: OrganismParamProps<TreeBoxEnumParam, State>
+  props: OrganismParamProps<TreeBoxEnumParam, State>,
 ) {
   const [showOnlyReferenceOrganisms, setShowOnlyReferenceOrganisms] =
     useState<boolean>(false);
 
   const { selectedValues, onChange } = useEnumParamSelectedValues(props);
 
+  // Extract maxRecommended and apply the gate
+  const maxRecommended = Number(
+    props.parameter.properties?.[MAX_RECOMMENDED_PROPERTY]?.[0],
+  );
+  const maxRecommendedMsg =
+    props.parameter.properties?.[MAX_RECOMMENDED_MSG_PROPERTY]?.[0];
+
+  const { wrappedOnChange, modalElement } = useMaxRecommendedGate(
+    onChange,
+    maxRecommended,
+    maxRecommendedMsg,
+  );
+
   const paramWithPrunedVocab = useTreeBoxParamWithPrunedVocab(
     props.parameter,
     selectedValues,
-    onChange,
-    props.isSearchPage
+    wrappedOnChange,
+    props.isSearchPage,
   );
 
   const { maxSelectedCount } = paramWithPrunedVocab;
@@ -121,12 +139,12 @@ function TreeBoxOrganismEnumParam(
 
   const shouldHighlightReferenceOrganisms =
     props.parameter.properties?.[ORGANISM_PROPERTIES_KEY].includes(
-      HIGHLIGHT_REFERENCE_ORGANISMS_PROPERTY
+      HIGHLIGHT_REFERENCE_ORGANISMS_PROPERTY,
     ) ?? false;
 
   const renderNode = useRenderOrganismNode(
     shouldHighlightReferenceOrganisms ? referenceStrains : undefined,
-    undefined
+    undefined,
   );
   const searchPredicate = useOrganismSearchPredicate(referenceStrains);
 
@@ -176,52 +194,75 @@ function TreeBoxOrganismEnumParam(
       searchPredicate,
       showOnlyReferenceOrganisms,
       referenceStrains,
-    ]
+    ],
   );
 
-  return hasEmptyVocabularly(paramWithPrunedVocab) ? (
-    <EmptyParamWarning />
-  ) : (
-    <TreeBoxEnumParamComponent
-      {...props}
-      selectedValues={selectedValues}
-      onChange={onChange}
-      context={props.ctx}
-      parameter={paramWithPrunedVocab}
-      wrapCheckboxTreeProps={wrapCheckboxTreeProps}
-    />
+  return (
+    <>
+      {hasEmptyVocabularly(paramWithPrunedVocab) ? (
+        <EmptyParamWarning />
+      ) : (
+        <TreeBoxEnumParamComponent
+          {...props}
+          selectedValues={selectedValues}
+          onChange={wrappedOnChange}
+          context={props.ctx}
+          parameter={paramWithPrunedVocab}
+          wrapCheckboxTreeProps={wrapCheckboxTreeProps}
+        />
+      )}
+      {modalElement}
+    </>
   );
 }
 
 function FlatOrganismEnumParam(
-  props: OrganismParamProps<FlatEnumParam, State>
+  props: OrganismParamProps<FlatEnumParam, State>,
 ) {
   const { selectedValues, onChange } = useEnumParamSelectedValues(props);
 
+  // Extract maxRecommended and apply the gate
+  const maxRecommended = Number(
+    props.parameter.properties?.[MAX_RECOMMENDED_PROPERTY]?.[0],
+  );
+  const maxRecommendedMsg =
+    props.parameter.properties?.[MAX_RECOMMENDED_MSG_PROPERTY]?.[0];
+
+  const { wrappedOnChange, modalElement } = useMaxRecommendedGate(
+    onChange,
+    maxRecommended,
+    maxRecommendedMsg,
+  );
+
   const paramWithPrunedVocab = useFlatParamWithPrunedVocab(
     props.parameter,
     selectedValues,
-    onChange,
-    props.isSearchPage
+    wrappedOnChange,
+    props.isSearchPage,
   );
 
-  return hasEmptyVocabularly(paramWithPrunedVocab) ? (
-    <EmptyParamWarning />
-  ) : (
-    <ParamComponent {...props} parameter={paramWithPrunedVocab} />
+  return (
+    <>
+      {hasEmptyVocabularly(paramWithPrunedVocab) ? (
+        <EmptyParamWarning />
+      ) : (
+        <ParamComponent {...props} parameter={paramWithPrunedVocab} />
+      )}
+      {modalElement}
+    </>
   );
 }
 
 function useTreeBoxParamWithPrunedVocab(
   parameter: TreeBoxEnumParam,
   selectedValues: string[],
   onChange: (newValue: string[]) => void,
-  isSearchPage?: boolean
+  isSearchPage?: boolean,
 ) {
   const preferredValues = usePreferredValues(
     parameter,
     selectedValues,
-    isSearchPage
+    isSearchPage,
   );
 
   const [preferredOrganismsEnabled] = usePreferredOrganismsEnabledState();
@@ -243,7 +284,7 @@ function useTreeBoxParamWithPrunedVocab(
         ? pruneDescendantNodes(
             (node) =>
               node.children.length > 0 || preferredValues.has(node.data.term),
-            prunedVocabulary
+            prunedVocabulary,
           )
         : prunedVocabulary;
 
@@ -259,7 +300,7 @@ function useTreeBoxParamWithPrunedVocab(
     selectedValues,
     onChange,
     preferredValues,
-    paramWithPrunedVocab
+    paramWithPrunedVocab,
   );
 
   return paramWithPrunedVocab;
@@ -269,12 +310,12 @@ function useFlatParamWithPrunedVocab(
   parameter: FlatEnumParam,
   selectedValues: string[],
   onChange: (newValue: string[]) => void,
-  isSearchPage?: boolean
+  isSearchPage?: boolean,
 ) {
   const preferredValues = usePreferredValues(
     parameter,
     selectedValues,
-    isSearchPage
+    isSearchPage,
   );
 
   const [preferredOrganismsEnabled] = usePreferredOrganismsEnabledState();
@@ -287,7 +328,7 @@ function useFlatParamWithPrunedVocab(
       ? {
           ...parameter,
           vocabulary: parameter.vocabulary.filter(([term]) =>
-            preferredValues.has(term)
+            preferredValues.has(term),
           ),
         }
       : parameter;
@@ -297,23 +338,23 @@ function useFlatParamWithPrunedVocab(
     selectedValues,
     onChange,
     preferredValues,
-    paramWithPrunedVocab
+    paramWithPrunedVocab,
   );
 
   return paramWithPrunedVocab;
 }
 
 function useEnumParamSelectedValues(
-  props: OrganismParamProps<EnumParam, State>
+  props: OrganismParamProps<EnumParam, State>,
 ) {
   const paramIsMultiPick = isMultiPick(props.parameter);
 
   const selectedValues = useMemo(() => {
     return paramIsMultiPick
       ? toMultiValueArray(props.value)
       : props.value == null || props.value === ''
-      ? []
-      : [props.value];
+        ? []
+        : [props.value];
   }, [paramIsMultiPick, props.value]);
 
   const transformValue = useCallback(
@@ -324,7 +365,7 @@ function useEnumParamSelectedValues(
         return newValue.length === 0 ? '' : newValue[0];
       }
     },
-    [paramIsMultiPick]
+    [paramIsMultiPick],
   );
 
   const onParamValueChange = props.onParamValueChange;
@@ -333,7 +374,7 @@ function useEnumParamSelectedValues(
     (newValue: string[]) => {
       onParamValueChange(transformValue(newValue));
     },
-    [onParamValueChange, transformValue]
+    [onParamValueChange, transformValue],
   );
 
   return {
@@ -345,7 +386,7 @@ function useEnumParamSelectedValues(
 function usePreferredValues(
   parameter: EnumParam,
   selectedValues: string[],
-  isSearchPageProp?: boolean
+  isSearchPageProp?: boolean,
 ) {
   const [preferredOrganisms] = usePreferredOrganismsState();
   const preferredSpecies = usePreferredSpecies();
@@ -372,9 +413,9 @@ function usePreferredValues(
         initialSelectedValuesRef.current,
         parameter.vocabulary,
         isSearchPage,
-        findPreferenceType(parameter)
+        findPreferenceType(parameter),
       ),
-    [parameter, isSearchPage, preferredOrganisms, preferredSpecies]
+    [parameter, isSearchPage, preferredOrganisms, preferredSpecies],
   );
 
   return preferredValues;
@@ -384,7 +425,7 @@ function useRestrictSelectedValues(
   selectedValues: string[],
   onChange: (newValue: string[]) => void,
   preferredValues: Set<string>,
-  parameter: EnumParam
+  parameter: EnumParam,
 ) {
   const [preferredOrganismsEnabled] = usePreferredOrganismsEnabledState();
 
@@ -409,7 +450,7 @@ function useRestrictSelectedValues(
       !hasEmptyVocabularly(parameter)
     ) {
       const preferredSelectedValues = selectedValues.filter((selectedValue) =>
-        preferredValues.has(selectedValue)
+        preferredValues.has(selectedValue),
       );
 
       if (preferredSelectedValues.length !== selectedValues.length) {
@@ -427,7 +468,7 @@ function useRestrictSelectedValues(
 }
 
 function isOrganismParamProps<S = void>(
-  props: OrganismParamProps<Parameter, S>
+  props: OrganismParamProps<Parameter, S>,
 ): props is OrganismParamProps<EnumParam, S> {
   return isPropsType(props, isOrganismParam);
 }
@@ -441,7 +482,7 @@ export function isOrganismParam(parameter: Parameter): parameter is EnumParam {
 
 function findShouldOnlyShowPreferredOrganisms(parameter: Parameter) {
   return parameter.properties?.[ORGANISM_PROPERTIES_KEY].includes(
-    SHOW_ONLY_PREFERRED_ORGANISMS_PROPERTY
+    SHOW_ONLY_PREFERRED_ORGANISMS_PROPERTY,
   );
 }
 
@@ -465,7 +506,7 @@ function findPreferredValues(
   selectedValues: string[],
   vocabulary: EnumParam['vocabulary'],
   isSearchPage: boolean,
-  preferenceType: 'organism' | 'species'
+  preferenceType: 'organism' | 'species',
 ) {
   const basePreferredValues =
     preferenceType === 'organism' ? preferredOrganismValues : preferredSpecies;
@@ -481,7 +522,7 @@ function findPreferredValues(
 
 function findPreferredDescendants(
   vocabRoot: TreeBoxVocabNode,
-  preferredValues: Set<string>
+  preferredValues: Set<string>,
 ) {
   const preferredDescendants = new Set<string>();
 

packages/libs/preferred-organisms/src/lib/hooks/maxRecommendedGate.scss

@@ -0,0 +1,19 @@
+.MaxRecommendedGate {
+  padding: 1em;
+  width: 450px;
+  display: grid;
+
+  &--Message {
+    > div p {
+      font-size: 1.2em;
+      justify-self: center;
+      text-align: center;
+    }
+  }
+
+  &--Buttons {
+    margin-top: 3em;
+    display: flex;
+    justify-content: space-between;
+  }
+}