Fix 9915 improved finability

src/shared/components/query/filteredSearch/Phrase.tsx

@@ -125,13 +125,14 @@ export class ListPhrase implements Phrase {
     public match(study: CancerTreeNode): boolean {
         let anyFieldMatch = false;
         for (const fieldName of this.fields) {
-            let anyPhraseMatch = false;
+            if (!_.has(study, fieldName)) {
+                continue;
+            }
             const fieldValue = (study as any)[fieldName];
-            if (typeof fieldValue !=='undefined') {
-                for (const phrase of this._phraseList) {
-                    anyPhraseMatch =
-                        anyPhraseMatch || matchPhraseFull(phrase, fieldValue);
-                }
+            let anyPhraseMatch = false;
+            for (const phrase of this._phraseList) {
+                anyPhraseMatch =
+                    anyPhraseMatch || matchPhraseFull(phrase, fieldValue);
             }
             anyFieldMatch = anyFieldMatch || anyPhraseMatch;
         }
@@ -164,6 +165,6 @@ function matchPhrase(phrase: string, fullText: string) {
  * Full match using lowercase
  * Need to convert boolean to string before applying lowercase
  */
-function matchPhraseFull(phrase: string, fullText: any) {
-    return fullText.toString().toLowerCase() === phrase.toLowerCase();
+function matchPhraseFull(phrase: string, toMatch: boolean | string | number) {
+    return _.toString(toMatch).toLowerCase() === phrase.toLowerCase();
 }

src/shared/components/query/filteredSearch/field/CheckboxFilterField.spec.ts

@@ -4,6 +4,10 @@ import {
 } from 'shared/components/query/filteredSearch/field/CheckboxFilterField';
 import { CancerTreeSearchFilter } from 'shared/lib/query/textQueryUtils';
 import { ListPhrase } from 'shared/components/query/filteredSearch/Phrase';
+import {
+    toFilterFieldOption,
+    toFilterFieldValue,
+} from 'shared/components/query/filteredSearch/field/FilterFieldOption';
 
 describe('CheckboxFilterField', () => {
     describe('createQueryUpdate', () => {
@@ -12,7 +16,7 @@ describe('CheckboxFilterField', () => {
             nodeFields: ['studyId'],
             form: {
                 input: FilterCheckbox,
-                options: ['a', 'b', 'c', 'd', 'e'],
+                options: ['a', 'b', 'c', 'd', 'e'].map(toFilterFieldOption),
                 label: 'Test label',
             },
         } as CancerTreeSearchFilter;
@@ -48,7 +52,11 @@ describe('CheckboxFilterField', () => {
         it('removes all update when only And', () => {
             const checked = dummyFilter.form.options;
             const toRemove: ListPhrase[] = [];
-            const result = createQueryUpdate(toRemove, checked, dummyFilter);
+            const result = createQueryUpdate(
+                toRemove,
+                checked.map(toFilterFieldValue),
+                dummyFilter
+            );
             expect(result.toAdd?.length).toEqual(0);
         });
 

src/shared/components/query/filteredSearch/field/CheckboxFilterField.tsx

@@ -13,11 +13,15 @@ import {
 } from 'shared/lib/query/textQueryUtils';
 import { FieldProps } from 'shared/components/query/filteredSearch/field/FilterFormField';
 import { ListPhrase } from 'shared/components/query/filteredSearch/Phrase';
+import {
+    FilterFieldOption,
+    toFilterFieldValue,
+} from 'shared/components/query/filteredSearch/field/FilterFieldOption';
 
 export type CheckboxFilterField = {
     input: typeof FilterCheckbox;
     label: string;
-    options: string[];
+    options: FilterFieldOption[];
 };
 
 export const FilterCheckbox: FunctionComponent<FieldProps> = props => {
@@ -43,19 +47,19 @@ export const FilterCheckbox: FunctionComponent<FieldProps> = props => {
     });
 
     for (const option of options) {
-        const isChecked = isOptionChecked(option, relevantClauses);
+        const isChecked = isOptionChecked(option.value, relevantClauses);
         if (isChecked) {
-            checkedOptions.push(option);
+            checkedOptions.push(option.value);
         }
     }
 
     return (
         <div className="filter-checkbox">
             <h5>{props.filter.form.label}</h5>
             <div>
-                {options.map((option: string) => {
+                {options.map((option: FilterFieldOption) => {
                     const id = `input-${option}`;
-                    let isChecked = checkedOptions.includes(option);
+                    let isChecked = checkedOptions.includes(option.value);
                     return (
                         <div
                             style={{
@@ -66,11 +70,11 @@ export const FilterCheckbox: FunctionComponent<FieldProps> = props => {
                             <input
                                 type="checkbox"
                                 id={id}
-                                value={option}
+                                value={option.displayValue}
                                 checked={isChecked}
                                 onClick={() => {
                                     isChecked = !isChecked;
-                                    updatePhrases(option, isChecked);
+                                    updatePhrases(option.value, isChecked);
                                     const update = createQueryUpdate(
                                         toRemove,
                                         checkedOptions,
@@ -89,7 +93,7 @@ export const FilterCheckbox: FunctionComponent<FieldProps> = props => {
                                     padding: '0 0 0 0.2em',
                                 }}
                             >
-                                {option}
+                                {option.displayValue}
                             </label>
                         </div>
                     );
@@ -159,7 +163,8 @@ export function createQueryUpdate(
         toAdd = [];
     } else if (onlyNot || moreAnd) {
         const phrase = options
-            .filter(o => !optionsToAdd.includes(o))
+            .filter(o => !optionsToAdd.includes(o.value))
+            .map(toFilterFieldValue)
             .join(FILTER_VALUE_SEPARATOR);
         toAdd = [new NotSearchClause(createListPhrase(prefix, phrase, fields))];
     } else {

src/shared/components/query/filteredSearch/field/FilterFieldOption.ts

@@ -0,0 +1,12 @@
+export type FilterFieldOption = {
+    value: string;
+    displayValue: string;
+};
+
+export function toFilterFieldOption(option: string) {
+    return { value: option, displayValue: option };
+}
+
+export function toFilterFieldValue(option: FilterFieldOption) {
+    return option.value;
+}

src/shared/components/query/filteredSearch/field/ListFormField.tsx

@@ -5,22 +5,22 @@ import { SearchClause } from 'shared/components/query/filteredSearch/SearchClaus
 import { Phrase } from 'shared/components/query/filteredSearch/Phrase';
 import './ListFormField.scss';
 import { toQueryString } from 'shared/lib/query/textQueryUtils';
+import { FilterFieldOption } from 'shared/components/query/filteredSearch/field/FilterFieldOption';
 
 export type ListFilterField = {
     label: string;
     input: typeof FilterList;
-    options: string[];
+    options: FilterFieldOption[];
 };
 
 export const FilterList: FunctionComponent<FieldProps> = props => {
     const form = props.filter.form as ListFilterField;
     const allPhrases = toUniquePhrases(props.query);
-    const queryString = toQueryString(props.query);
     return (
         <div className="filter-list">
             <h5>{props.filter.form.label}</h5>
             {form.options.map(option => {
-                const update = props.parser.parseSearchQuery(option);
+                const update = props.parser.parseSearchQuery(option.value);
                 return (
                     <li className="dropdown-item">
                         <a
@@ -32,7 +32,7 @@ export const FilterList: FunctionComponent<FieldProps> = props => {
                                 });
                             }}
                         >
-                            {option}
+                            {option.displayValue}
                         </a>
                     </li>
                 );

src/shared/lib/query/QueryParser.ts

@@ -6,9 +6,9 @@ import {
 import {
     AndSearchClause,
     FILTER_SEPARATOR,
-    SearchClause,
     NOT_PREFIX,
     NotSearchClause,
+    SearchClause,
 } from 'shared/components/query/filteredSearch/SearchClause';
 import { FilterCheckbox } from 'shared/components/query/filteredSearch/field/CheckboxFilterField';
 import { getServerConfig, ServerConfigHelpers } from 'config/config';
@@ -18,6 +18,7 @@ import {
     ListPhrase,
     Phrase,
 } from 'shared/components/query/filteredSearch/Phrase';
+import { toFilterFieldOption } from 'shared/components/query/filteredSearch/field/FilterFieldOption';
 
 export class QueryParser {
     /**
@@ -38,7 +39,7 @@ export class QueryParser {
                     input: FilterList,
                     options: ServerConfigHelpers.skin_example_study_queries(
                         getServerConfig()!.skin_example_study_queries || ''
-                    ),
+                    ).map(toFilterFieldOption),
                 },
             },
             /**
@@ -49,7 +50,7 @@ export class QueryParser {
                 nodeFields: ['referenceGenome'],
                 form: {
                     input: FilterCheckbox,
-                    options: [...referenceGenomes],
+                    options: [...referenceGenomes].map(toFilterFieldOption),
                     label: 'Reference genome',
                 },
             },
@@ -61,7 +62,10 @@ export class QueryParser {
                 nodeFields: ['readPermission'],
                 form: {
                     input: FilterCheckbox,
-                    options: ["true","false"],
+                    options: [
+                        { value: 'true', displayValue: 'authorized' },
+                        { value: 'false', displayValue: 'not authorized' },
+                    ],
                     label: 'Controlled access authorized',
                 },
             },