fix!: ensure select category value label is string and type key as unknown (#298) (#299)

Author: hunterckx

src/apis/azul/common/filterTransformer.ts

@@ -131,7 +131,7 @@ export function transformTermFacets(
       categoryValues.push({
         count: 0,
         key: term,
-        label: term ?? LABEL.UNSPECIFIED,
+        label: String(term ?? LABEL.UNSPECIFIED),
         selected: false, // Selected state updated in filter hook
       });
     }

src/apis/azul/common/utils.ts

@@ -5,7 +5,7 @@ import { ParamValue } from "./filterTransformer";
  * @param value - Filter value.
  * @returns filter parameter value.
  */
-export function getFilterParameterValue(value: string): ParamValue {
+export function getFilterParameterValue(value: unknown): ParamValue {
   if (value === "Unspecified") {
     return null;
   }
@@ -15,5 +15,7 @@ export function getFilterParameterValue(value: string): ParamValue {
   if (value === "false") {
     return false;
   }
-  return value;
+  if (typeof value === "string" || typeof value === "boolean") return value;
+  if (value === null || value === undefined) return null;
+  return String(value);
 }

src/common/entities.ts

@@ -15,7 +15,7 @@ export interface CategoryTag {
 /**
  * Category values to be used as keys. For example, "Homo sapiens" or "10X 3' v2 sequencing".
  */
-export type CategoryValueKey = string;
+export type CategoryValueKey = unknown;
 
 /**
  * Set of selected category values.
@@ -53,7 +53,7 @@ export interface SelectCategory {
  */
 export interface SelectCategoryValue {
   count: number;
-  key: CategoryKey;
+  key: CategoryValueKey;
   label: string; // Allows for displaying null values as "Unspecified"
   selected: boolean;
 }
@@ -73,7 +73,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
   isDisabled?: boolean;
-  key: CategoryValueKey;
+  key: CategoryKey;
   label: string;
   values: SelectCategoryValueView[];
 }

src/components/Filter/common/utils.ts

@@ -74,7 +74,7 @@ export function getSortMatchesFn(
       let match = matchString(value.label || "");
       if (match) {
         matches.push({ labelRanges: match.ranges, score: match.score, value });
-      } else {
+      } else if (typeof value.key === "string") {
         match = matchString(value.key || "");
         if (match) matches.push({ score: match.score, value });
       }

src/components/Filter/components/VariableSizeList/VariableSizeList.tsx

@@ -17,7 +17,7 @@ import { FilterMenuSearchMatch } from "../../common/entities";
 import { List as FilterList } from "../FilterList/filterList.styles";
 import VariableSizeListItem from "../VariableSizeListItem/variableSizeListItem";
 
-export type ItemSizeByItemKey = Map<string, number>;
+export type ItemSizeByItemKey = Map<unknown, number>;
 
 export interface VariableSizeListProps {
   categoryKey: CategoryKey;

src/components/Filter/components/VariableSizeListItem/variableSizeListItem.tsx

@@ -19,7 +19,7 @@ interface Props {
   categorySection?: string;
   matchedItem: FilterMenuSearchMatch;
   onFilter: OnFilterFn;
-  onUpdateItemSizeByItemKey: (itemKey: string, itemSize: number) => void;
+  onUpdateItemSizeByItemKey: (itemKey: unknown, itemSize: number) => void;
   style: CSSProperties;
 }
 

src/components/Table/common/utils.ts

@@ -88,7 +88,7 @@ export function buildCategoryViews<T extends RowData>(
       const values = [...getFacetedUniqueValues()].map(([value, count]) => ({
         count,
         key: value,
-        label: value,
+        label: String(value ?? ""),
         selected: false, // Selected state updated in reducer.
       }));
       categoryViews.push({

src/config/entities.ts

@@ -324,7 +324,7 @@ export interface TrackFilterAppliedPayload {
   searchTerm: string;
   section: string;
   selected: boolean;
-  value: string;
+  value: unknown;
 }
 
 /**

src/hooks/useCategoryFilter.ts

@@ -273,7 +273,11 @@ function sortCategoryValueViews(
   cvv0: SelectCategoryValueView,
   cvv1: SelectCategoryValueView
 ): number {
-  return COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
+  return !cvv0.label
+    ? 1
+    : !cvv1.label
+    ? -1
+    : COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
 }
 
 /**

src/hooks/useFileManifest/common/utils.ts

@@ -70,7 +70,7 @@ function bindFacets(
 function bindFacetTerms(
   facetName: string,
   responseTerms: AzulTerm[],
-  searchTermNames: string[]
+  searchTermNames: unknown[]
 ): Term[] {
   return responseTerms.reduce((accum: Term[], responseTerm) => {
     // Default term name to "Unspecified" if term name is null.
@@ -203,7 +203,7 @@ export function isFacetTermSelected(
 function listFacetSearchTermNames(
   facetName: string,
   searchTermsBySearchKey: SelectedSearchTermsBySearchKey
-): string[] {
+): unknown[] {
   return [...(searchTermsBySearchKey.get(facetName) ?? [])];
 }
 

src/providers/fileManifestState.tsx

@@ -262,7 +262,7 @@ function fileManifestReducer(
       const filters = buildNextFilterState(
         state.filters,
         payload.categoryKey,
-        getFilterParameterValue(payload.selectedValue) as unknown as string, // TODO CategoryValueKey may be boolean or null.
+        getFilterParameterValue(payload.selectedValue),
         payload.selected
       );
       // Get file summary filters.
@@ -322,9 +322,7 @@ function buildNextFileSummaryFilterState(
  * @returns all terms for the given category.
  */
 function getFileFacetTerms(fileFacet: FileFacet): SelectedFilterValue {
-  return fileFacet.terms.map(
-    (term) => getFilterParameterValue(term.name) as unknown as string // TODO CategoryValueKey may be boolean or null.
-  );
+  return fileFacet.terms.map((term) => getFilterParameterValue(term.name));
 }
 
 /**

src/viewModelBuilders/common/utils.ts

@@ -19,27 +19,27 @@ export function mapCategoryKeyLabel(
 }
 
 /**
- * Sanitizes a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
- * @param str - String to sanitize.
+ * Sanitizes a value to a string for display i.e. any empty, null or undefined value is sanitized to "Unspecified".
+ * @param value - Value to sanitize.
  * @returns the string or sanitized string value.
  */
-export function sanitizeString(str: string): string {
-  if (str === "" || str === null || str === undefined) {
+export function sanitizeString(value: unknown): string {
+  if (value === "" || value === null || value === undefined) {
     return "Unspecified";
   } else {
-    return str;
+    return String(value);
   }
 }
 
 /**
- * Sanitizes a string array for display i.e. any string element within the string array that is an empty, null or
+ * Sanitizes array elements to strings for display i.e. any element within the string array that is an empty, null or
  * undefined value is sanitized to "Unspecified".
- * @param strArray - String array to sanitize.
+ * @param array - Array to sanitize.
  * @returns the string array, sanitized.
  */
-export function sanitizeStringArray(strArray: string[]): string[] {
-  if (!strArray || strArray.length === 0) {
+export function sanitizeStringArray(array: unknown[]): string[] {
+  if (!array || array.length === 0) {
     return ["Unspecified"];
   }
-  return strArray.map(sanitizeString);
+  return array.map(sanitizeString);
 }

src/views/ExploreView/exploreView.tsx

@@ -114,7 +114,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     if (selected) {
       track(EVENT_NAME.FILTER_SELECTED, {
         [EVENT_PARAM.FILTER_NAME]: categoryKey,
-        [EVENT_PARAM.FILTER_VALUE]: selectedCategoryValue,
+        [EVENT_PARAM.FILTER_VALUE]: String(selectedCategoryValue),
       });
     }
   };