@databiosphere/findable-ui 17.0.0 → 18.0.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "17.0.0"
+  ".": "18.0.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [18.0.0](https://github.com/DataBiosphere/findable-ui/compare/v17.0.0...v18.0.0) (2024-12-18)
+
+
+### ⚠ BREAKING CHANGES
+
+* ensure select category value label is string and type key as unknown ([#298](https://github.com/DataBiosphere/findable-ui/issues/298)) (#299)
+
+### Bug Fixes
+
+* ensure select category value label is string and type key as unknown ([#298](https://github.com/DataBiosphere/findable-ui/issues/298)) ([#299](https://github.com/DataBiosphere/findable-ui/issues/299)) ([c7b5baa](https://github.com/DataBiosphere/findable-ui/commit/c7b5baae525f6e54493a2748070fa46cc36d9f67))
+
 ## [17.0.0](https://github.com/DataBiosphere/findable-ui/compare/v16.1.0...v17.0.0) (2024-12-12)
 
 

package/lib/apis/azul/common/filterTransformer.js

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

package/lib/apis/azul/common/utils.d.ts

@@ -4,4 +4,4 @@ import { ParamValue } from "./filterTransformer";
  * @param value - Filter value.
  * @returns filter parameter value.
  */
-export declare function getFilterParameterValue(value: string): ParamValue;
+export declare function getFilterParameterValue(value: unknown): ParamValue;

package/lib/apis/azul/common/utils.js

@@ -13,5 +13,9 @@ export function getFilterParameterValue(value) {
     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);
 }

package/lib/common/entities.d.ts

@@ -13,7 +13,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.
  */
@@ -46,7 +46,7 @@ export interface SelectCategory {
  */
 export interface SelectCategoryValue {
     count: number;
-    key: CategoryKey;
+    key: CategoryValueKey;
     label: string;
     selected: boolean;
 }
@@ -64,7 +64,7 @@ export interface SelectCategoryValueView {
  */
 export interface SelectCategoryView {
     isDisabled?: boolean;
-    key: CategoryValueKey;
+    key: CategoryKey;
     label: string;
     values: SelectCategoryValueView[];
 }

package/lib/components/Filter/common/utils.js

@@ -60,7 +60,7 @@ export function getSortMatchesFn(searchTerm) {
             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 });

package/lib/components/Filter/components/VariableSizeList/VariableSizeList.d.ts

@@ -2,7 +2,7 @@ import { VariableSizeListProps as ListProps } from "react-window";
 import { CategoryKey } from "../../../../common/entities";
 import { OnFilterFn } from "../../../../hooks/useCategoryFilter";
 import { FilterMenuSearchMatch } from "../../common/entities";
-export type ItemSizeByItemKey = Map<string, number>;
+export type ItemSizeByItemKey = Map<unknown, number>;
 export interface VariableSizeListProps {
     categoryKey: CategoryKey;
     categorySection?: string;

package/lib/components/Filter/components/VariableSizeListItem/variableSizeListItem.d.ts

@@ -7,7 +7,7 @@ interface Props {
     categorySection?: string;
     matchedItem: FilterMenuSearchMatch;
     onFilter: OnFilterFn;
-    onUpdateItemSizeByItemKey: (itemKey: string, itemSize: number) => void;
+    onUpdateItemSizeByItemKey: (itemKey: unknown, itemSize: number) => void;
     style: CSSProperties;
 }
 export default function VariableSizeListItem({ categoryKey, categorySection, matchedItem, onFilter, onUpdateItemSizeByItemKey, style, }: Props): JSX.Element;

package/lib/components/Table/common/utils.js

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

package/lib/config/entities.d.ts

@@ -262,7 +262,7 @@ export interface TrackFilterAppliedPayload {
     searchTerm: string;
     section: string;
     selected: boolean;
-    value: string;
+    value: unknown;
 }
 /**
  * Filter applied tracking function

package/lib/hooks/useCategoryFilter.js

@@ -158,7 +158,11 @@ function isCategoryAcceptListed(category, categoryConfigs) {
  * @returns Number indicating sort precedence of cv0 vs cv1.
  */
 function sortCategoryValueViews(cvv0, cvv1) {
-    return COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
+    return !cvv0.label
+        ? 1
+        : !cvv1.label
+            ? -1
+            : COLLATOR_CASE_INSENSITIVE.compare(cvv0.label, cvv1.label);
 }
 /**
  * Sort category views by display label, ascending.

package/lib/providers/fileManifestState.js

@@ -96,8 +96,7 @@ function fileManifestReducer(state, action) {
         // Updates selected file manifest filters with given selected category value.
         case FileManifestActionKind.UpdateFilter: {
             // Build next filter state.
-            const filters = buildNextFilterState(state.filters, payload.categoryKey, getFilterParameterValue(payload.selectedValue), // TODO CategoryValueKey may be boolean or null.
-            payload.selected);
+            const filters = buildNextFilterState(state.filters, payload.categoryKey, getFilterParameterValue(payload.selectedValue), payload.selected);
             // Get file summary filters.
             const fileSummaryFilters = buildNextFileSummaryFilterState(filters, state.fileSummaryFacetName);
             return {
@@ -140,8 +139,7 @@ function buildNextFileSummaryFilterState(filters, facetName) {
  * @returns all terms for the given category.
  */
 function getFileFacetTerms(fileFacet) {
-    return fileFacet.terms.map((term) => getFilterParameterValue(term.name) // TODO CategoryValueKey may be boolean or null.
-    );
+    return fileFacet.terms.map((term) => getFilterParameterValue(term.name));
 }
 /**
  * Build new set of selected filters on de/select of filter category.

package/lib/viewModelBuilders/common/utils.d.ts

@@ -7,15 +7,15 @@ import { CategoryKeyLabel } from "./entities";
  */
 export declare function mapCategoryKeyLabel(CATEGORY_KEY: Record<string, string>, CATEGORY_LABEL: Record<string, string>): CategoryKeyLabel;
 /**
- * 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 declare function sanitizeString(str: string): string;
+export declare function sanitizeString(value: unknown): string;
 /**
- * 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 declare function sanitizeStringArray(strArray: string[]): string[];
+export declare function sanitizeStringArray(array: unknown[]): string[];

package/lib/viewModelBuilders/common/utils.js

@@ -13,27 +13,27 @@ export function mapCategoryKeyLabel(CATEGORY_KEY, CATEGORY_LABEL) {
     return categoryKeyLabel;
 }
 /**
- * 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) {
-    if (str === "" || str === null || str === undefined) {
+export function sanitizeString(value) {
+    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) {
-    if (!strArray || strArray.length === 0) {
+export function sanitizeStringArray(array) {
+    if (!array || array.length === 0) {
         return ["Unspecified"];
     }
-    return strArray.map(sanitizeString);
+    return array.map(sanitizeString);
 }

package/lib/views/ExploreView/exploreView.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/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
       });
     }

package/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);
 }

package/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[];
 }

package/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 });
       }

package/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;

package/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;
 }
 

package/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({

package/src/config/entities.ts

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

package/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);
 }
 
 /**

package/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) ?? [])];
 }
 

package/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));
 }
 
 /**

package/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);
 }

package/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),
       });
     }
   };