synapse-react-client 4.0.22 → 4.0.23

package/dist/components/widgets/facet-nav/SelectionCriteriaPill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCriteriaPill.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPill.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IACpC,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED;;;;GAIG;AACH,iBAAS,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAuB/D;AAED,eAAe,qBAAqB,CAAA"}
+{"version":3,"file":"SelectionCriteriaPill.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPill.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,kFAAkF;IAClF,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAA;IAChC,mDAAmD;IACnD,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IACpC,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED;;;;;GAKG;AACH,iBAAS,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAW/D;AAED,eAAe,qBAAqB,CAAA"}

package/dist/components/widgets/facet-nav/SelectionCriteriaPill.js

@@ -1,24 +1,17 @@
-import { Tooltip as e } from "@mui/material";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Close as r } from "@mui/icons-material";
+import e from "./FacetValueChip.js";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/widgets/facet-nav/SelectionCriteriaPill.tsx
-function i(i) {
-	let { innerText: a, tooltipText: o, onRemoveFilter: s, isLocked: c } = i;
+function n(n) {
+	let { label: r, tooltipText: i, icon: a, onRemoveFilter: o, isLocked: s } = n;
 	return /* @__PURE__ */ t(e, {
-		title: o,
-		placement: "top",
-		children: /* @__PURE__ */ n("div", {
-			className: `SelectionCriteriaPill${c ? " SelectionCriteriaPill--locked" : ""}`,
-			children: [/* @__PURE__ */ t("span", { children: a }), !c && s && /* @__PURE__ */ t("button", {
-				onClick: s,
-				className: "SelectionCriteriaPill__btnRemove",
-				title: "deselect",
-				children: /* @__PURE__ */ t(r, {})
-			})]
-		})
+		className: "SelectionCriteriaPill",
+		label: r,
+		icon: a,
+		tooltipTitle: i,
+		onDelete: s ? void 0 : o
 	});
 }
 //#endregion
-export { i as default };
+export { n as default };
 
 //# sourceMappingURL=SelectionCriteriaPill.js.map

package/dist/components/widgets/facet-nav/SelectionCriteriaPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCriteriaPill.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPill.tsx"],"sourcesContent":["import { Close } from '@mui/icons-material'\nimport { Tooltip } from '@mui/material'\n\nexport type SelectionCriteriaPillProps = {\n  readonly key: string\n  readonly innerText: string\n  readonly tooltipText: string\n  readonly onRemoveFilter?: () => void\n  /** When true, the pill is shown without a remove button */\n  readonly isLocked?: boolean\n}\n\n/**\n * Renders a pill or chicklet to represent a Synapse Table Query filter/selection criterion.\n * @param props\n * @constructor\n */\nfunction SelectionCriteriaPill(props: SelectionCriteriaPillProps) {\n  const { innerText, tooltipText, onRemoveFilter, isLocked } = props\n\n  return (\n    <Tooltip title={tooltipText} placement={'top'}>\n      <div\n        className={`SelectionCriteriaPill${\n          isLocked ? ' SelectionCriteriaPill--locked' : ''\n        }`}\n      >\n        <span>{innerText}</span>\n        {!isLocked && onRemoveFilter && (\n          <button\n            onClick={onRemoveFilter}\n            className=\"SelectionCriteriaPill__btnRemove\"\n            title=\"deselect\"\n          >\n            <Close />\n          </button>\n        )}\n      </div>\n    </Tooltip>\n  )\n}\n\nexport default SelectionCriteriaPill\n"],"mappings":";;;;AAiBA,SAAS,EAAsB,GAAmC;CAChE,IAAM,EAAE,cAAW,gBAAa,mBAAgB,gBAAa;CAE7D,OACE,kBAAC,GAAD;EAAS,OAAO;EAAa,WAAW;YACtC,kBAAC,OAAD;GACE,WAAW,wBACT,IAAW,mCAAmC;aAFlD,CAKE,kBAAC,QAAD,EAAA,UAAO,EAAgB,CAAA,GACtB,CAAC,KAAY,KACZ,kBAAC,UAAD;IACE,SAAS;IACT,WAAU;IACV,OAAM;cAEN,kBAAC,GAAD,CAAQ,CAAA;GACF,CAAA,CAEP;;CACE,CAAA;AAEb"}
+{"version":3,"file":"SelectionCriteriaPill.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPill.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport FacetValueChip from './FacetValueChip'\n\nexport type SelectionCriteriaPillProps = {\n  readonly key: string\n  /** The chip label (plain text, or structured content from `renderFacetValue`). */\n  readonly label: ReactNode\n  readonly tooltipText?: ReactNode\n  /** Optional leading icon (e.g. for a DUO term). */\n  readonly icon?: ReactNode\n  readonly onRemoveFilter?: () => void\n  /** When true, the pill is shown without a remove button */\n  readonly isLocked?: boolean\n}\n\n/**\n * Renders a pill/chicklet representing a Synapse Table Query filter/selection\n * criterion. Delegates to the shared `FacetValueChip` so the chip, icon,\n * tooltip, and remove affordance are styled identically wherever facet values\n * appear.\n */\nfunction SelectionCriteriaPill(props: SelectionCriteriaPillProps) {\n  const { label, tooltipText, icon, onRemoveFilter, isLocked } = props\n  return (\n    <FacetValueChip\n      className=\"SelectionCriteriaPill\"\n      label={label}\n      icon={icon}\n      tooltipTitle={tooltipText}\n      onDelete={!isLocked ? onRemoveFilter : undefined}\n    />\n  )\n}\n\nexport default SelectionCriteriaPill\n"],"mappings":";;;AAqBA,SAAS,EAAsB,GAAmC;CAChE,IAAM,EAAE,UAAO,gBAAa,SAAM,mBAAgB,gBAAa;CAC/D,OACE,kBAAC,GAAD;EACE,WAAU;EACH;EACD;EACN,cAAc;EACd,UAAW,IAA4B,KAAA,IAAjB;CACvB,CAAA;AAEL"}

package/dist/components/widgets/facet-nav/SelectionCriteriaPills.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCriteriaPills.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPills.tsx"],"names":[],"mappings":"AASA,OAAO,EAOL,sBAAsB,EACvB,MAAM,iCAAiC,CAAA;AAGxC,OAAO,EAAE,gBAAgB,EAAmB,MAAM,oBAAoB,CAAA;AAMtE,OAA8B,EAC5B,0BAA0B,EAC3B,MAAM,yBAAyB,CAAA;AA8DhC,wBAAgB,sCAAsC,CACpD,WAAW,EAAE,sBAAsB,EACnC,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,CAAC,EAAE,OAAO,GACjB,0BAA0B,CAoB5B;AAmLD,iBAAS,sBAAsB,4CAoC9B;AAED,eAAe,sBAAsB,CAAA"}
+{"version":3,"file":"SelectionCriteriaPills.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPills.tsx"],"names":[],"mappings":"AASA,OAAO,EAOL,sBAAsB,EACvB,MAAM,iCAAiC,CAAA;AAGxC,OAAO,EAAE,gBAAgB,EAAmB,MAAM,oBAAoB,CAAA;AAMtE,OAA8B,EAC5B,0BAA0B,EAC3B,MAAM,yBAAyB,CAAA;AA8DhC,wBAAgB,sCAAsC,CACpD,WAAW,EAAE,sBAAsB,EACnC,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,CAAC,EAAE,OAAO,GACjB,0BAA0B,CAoB5B;AAkMD,iBAAS,sBAAsB,4CAoC9B;AAED,eAAe,sBAAsB,CAAA"}

package/dist/components/widgets/facet-nav/SelectionCriteriaPills.js

@@ -19,7 +19,7 @@ function g(e, t, n, r) {
 		let n = `${m(i(e.columnName))} (${e.values.length.toLocaleString()})`;
 		return [{
 			key: `queryFilter-${e.concreteType}-${e.columnName}`,
-			innerText: n,
+			label: n,
 			tooltipText: n,
 			onRemoveFilter: () => {
 				t.removeQueryFilter(e);
@@ -32,7 +32,7 @@ function g(e, t, n, r) {
 		let s = `${i(e.columnName)}: ${o}`;
 		return {
 			key: `queryFilter-${e.concreteType}-${e.columnName}-${a}`,
-			innerText: s,
+			label: s,
 			tooltipText: s,
 			onRemoveFilter: () => {
 				t.removeValueFromQueryFilter(e, a);
@@ -44,7 +44,7 @@ function _(e, t, n) {
 	let r = e.searchExpression;
 	return e.searchMode == "BOOLEAN" && (r = u(e.searchExpression)), {
 		key: `queryFilter-${e.concreteType}-${e.searchExpression}`,
-		innerText: r,
+		label: r,
 		tooltipText: `Text matches: "${r}"`,
 		...n ? { isLocked: !0 } : { onRemoveFilter: () => {
 			t.removeQueryFilter(e);
@@ -66,13 +66,13 @@ function y(t, n) {
 function b(e, t, n, a, o) {
 	return e.flatMap((s) => {
 		if (s.columnName.toLowerCase() === o?.columnName?.toLowerCase()) return [];
-		let c = n.find((e) => e.name === s.columnName), { getColumnDisplayName: l, getDisplayValue: u } = a;
+		let c = n.find((e) => e.name === s.columnName), { getColumnDisplayName: l, getDisplayValue: u, renderFacetValue: d } = a;
 		if (i(s)) {
 			if (s.facetValues.length > h || !c) {
 				let e = `${m(l(s.columnName, s.jsonPath))} (${s.facetValues.length.toLocaleString()})`;
 				return [{
 					key: `facet-${s.concreteType}-${s.columnName}`,
-					innerText: e,
+					label: e,
 					tooltipText: e,
 					onRemoveFilter: () => {
 						t.removeSelectedFacet(s);
@@ -80,11 +80,12 @@ function b(e, t, n, a, o) {
 				}];
 			}
 			return s.facetValues.map((e) => {
-				let n = u(e, c.columnType);
+				let n = u(e, c.columnType), r = d?.(s.columnName, e);
 				return {
 					key: `facet-${s.concreteType}-${s.columnName}-${e}`,
-					innerText: n,
-					tooltipText: `${l(s.columnName, s.jsonPath)}: ${n}`,
+					label: r ? r.label : n,
+					icon: r?.icon,
+					tooltipText: r ? r.tooltipTitle : `${l(s.columnName, s.jsonPath)}: ${n}`,
 					onRemoveFilter: () => {
 						t.removeValueFromSelectedFacet(s, e);
 					}
@@ -98,7 +99,7 @@ function b(e, t, n, a, o) {
 					let r = s, i = e.find((e) => e.columnName == n.minFacetColumn), a = y(r.min, i.max);
 					return [{
 						key: `facet-${s.concreteType}-${s.columnName}-${a}`,
-						innerText: a,
+						label: a,
 						tooltipText: `${n.label}: ${a}`,
 						onRemoveFilter: () => {
 							t.removeSelectedFacet([i, r]);
@@ -109,7 +110,7 @@ function b(e, t, n, a, o) {
 			let r = y(s.min, s.max);
 			return [{
 				key: `facet-${s.concreteType}-${s.columnName}-${s.min}-${s.max}`,
-				innerText: r,
+				label: r,
 				tooltipText: `${l(s.columnName, s.jsonPath)}: ${r}`,
 				onRemoveFilter: () => {
 					t.removeSelectedFacet(s);

package/dist/components/widgets/facet-nav/SelectionCriteriaPills.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionCriteriaPills.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPills.tsx"],"sourcesContent":["import {\n  isColumnMultiValueFunctionQueryFilter,\n  isColumnSingleValueQueryFilter,\n  isFacetColumnRangeRequest,\n  isFacetColumnValuesRequest,\n  isTextMatchesQueryFilter,\n  LockedColumn,\n} from '@/utils'\nimport { FRIENDLY_VALUE_NOT_SET, VALUE_NOT_SET } from '@/utils/SynapseConstants'\nimport {\n  ColumnModel,\n  ColumnMultiValueFunctionQueryFilter,\n  ColumnSingleValueQueryFilter,\n  FacetColumnRangeRequest,\n  FacetColumnRequest,\n  QueryFilter,\n  TextMatchesQueryFilter,\n} from '@sage-bionetworks/synapse-types'\nimport pluralize from 'pluralize'\nimport { ReadonlyDeep } from 'type-fest'\nimport { QueryContextType, useQueryContext } from '../../QueryContext'\nimport {\n  QueryVisualizationContextType,\n  useQueryVisualizationContext,\n} from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport SelectionCriteriaPill, {\n  SelectionCriteriaPillProps,\n} from './SelectionCriteriaPill'\nimport { getSearchTextFromBooleanModeSearchExpression } from '@/components/FullTextSearch/FullTextSearchUtils'\n\nconst MAX_VALUES_IN_FILTER_FOR_INDIVIDUAL_PILLS = 4\n\nfunction getPillPropsFromColumnQueryFilter(\n  queryFilter:\n    | ColumnSingleValueQueryFilter\n    | ColumnMultiValueFunctionQueryFilter,\n  queryContext: QueryContextType,\n  columnModel: ColumnModel | undefined,\n  queryVisualizationContext: QueryVisualizationContextType,\n): SelectionCriteriaPillProps[] {\n  const { getColumnDisplayName } = queryVisualizationContext\n  // ColumnSingleValueQueryFilter and ColumnMultiValueQueryFilter both allow for a list of values\n  // If there are more than _n_ values, consolidate to one pill\n  if (\n    queryFilter.values.length > MAX_VALUES_IN_FILTER_FOR_INDIVIDUAL_PILLS ||\n    !columnModel\n  ) {\n    const text = `${pluralize(\n      getColumnDisplayName(queryFilter.columnName),\n    )} (${queryFilter.values.length.toLocaleString()})`\n\n    return [\n      {\n        key: `queryFilter-${queryFilter.concreteType}-${queryFilter.columnName}`,\n        innerText: text,\n        tooltipText: text,\n        onRemoveFilter: () => {\n          queryContext.removeQueryFilter(queryFilter)\n        },\n      },\n    ]\n  }\n\n  // otherwise render one pill per value\n  return queryFilter.values.map(value => {\n    let filterValue = value\n\n    if (value?.startsWith('%') && value?.endsWith('%')) {\n      // strip '%' wildcard character when using a LIKE condition\n      filterValue = filterValue.substring(1, filterValue.length - 1)\n    }\n    filterValue = queryVisualizationContext.getDisplayValue(\n      filterValue,\n      columnModel.columnType,\n    )\n    const text = `${getColumnDisplayName(\n      queryFilter.columnName,\n    )}: ${filterValue}`\n    return {\n      key: `queryFilter-${queryFilter.concreteType}-${queryFilter.columnName}-${value}`,\n      innerText: text,\n      tooltipText: text,\n      onRemoveFilter: () => {\n        queryContext.removeValueFromQueryFilter(queryFilter, value)\n      },\n    }\n  })\n}\n\nexport function getPillPropsFromTextMatchesQueryFilter(\n  queryFilter: TextMatchesQueryFilter,\n  queryContext: QueryContextType,\n  isLocked?: boolean,\n): SelectionCriteriaPillProps {\n  let innerText = queryFilter.searchExpression\n  if (queryFilter.searchMode == 'BOOLEAN') {\n    innerText = getSearchTextFromBooleanModeSearchExpression(\n      queryFilter.searchExpression,\n    )\n  }\n\n  return {\n    key: `queryFilter-${queryFilter.concreteType}-${queryFilter.searchExpression}`,\n    innerText,\n    tooltipText: `Text matches: \"${innerText}\"`,\n    ...(isLocked\n      ? { isLocked: true }\n      : {\n          onRemoveFilter: () => {\n            queryContext.removeQueryFilter(queryFilter)\n          },\n        }),\n  }\n}\n\nfunction getPillPropsFromQueryFilters(\n  queryFilters: ReadonlyDeep<QueryFilter[]>,\n  queryContext: QueryContextType,\n  columnModels: ColumnModel[],\n  queryVisualizationContext: QueryVisualizationContextType,\n  lockedColumn?: LockedColumn,\n  lockTextMatchesQueryFilterPill?: boolean,\n): SelectionCriteriaPillProps[] {\n  return queryFilters.flatMap(queryFilter => {\n    if (\n      isColumnSingleValueQueryFilter(queryFilter) ||\n      isColumnMultiValueFunctionQueryFilter(queryFilter)\n    ) {\n      const columnModel = columnModels.find(\n        cm => cm.name === queryFilter.columnName,\n      )\n      if (\n        queryFilter.columnName.toLowerCase() ===\n        lockedColumn?.columnName?.toLowerCase()\n      ) {\n        return []\n      }\n      return getPillPropsFromColumnQueryFilter(\n        queryFilter,\n        queryContext,\n        columnModel,\n        queryVisualizationContext,\n      )\n    } else if (isTextMatchesQueryFilter(queryFilter)) {\n      return [\n        getPillPropsFromTextMatchesQueryFilter(\n          queryFilter,\n          queryContext,\n          lockTextMatchesQueryFilterPill,\n        ),\n      ]\n    } else {\n      console.log('Unknown query filter type', queryFilter)\n      return []\n    }\n  })\n}\n\nfunction getRangeFacetInnerText(min?: string, max?: string) {\n  if (min == undefined && max == undefined) {\n    return 'Any value'\n  } else if (min == undefined) {\n    return `Up to ${max}`\n  } else if (max == undefined) {\n    return `${min} or greater`\n  } else if (min === VALUE_NOT_SET && max === VALUE_NOT_SET) {\n    return FRIENDLY_VALUE_NOT_SET\n  } else {\n    return `${min} - ${max}`\n  }\n}\n\nfunction getPillPropsFromFacetFilters(\n  selectedFacets: ReadonlyDeep<FacetColumnRequest[]>,\n  queryContext: QueryContextType,\n  columnModels: ColumnModel[],\n  queryVisualizationContext: QueryVisualizationContextType,\n  lockedColumn?: LockedColumn,\n): SelectionCriteriaPillProps[] {\n  return selectedFacets.flatMap(selectedFacet => {\n    if (\n      selectedFacet.columnName.toLowerCase() ===\n      lockedColumn?.columnName?.toLowerCase()\n    ) {\n      return []\n    }\n    const columnModel = columnModels.find(\n      cm => cm.name === selectedFacet.columnName,\n    )\n    const { getColumnDisplayName, getDisplayValue } = queryVisualizationContext\n    if (isFacetColumnValuesRequest(selectedFacet)) {\n      // If there are more than _n_ values, consolidate to one pill\n      if (\n        selectedFacet.facetValues.length >\n          MAX_VALUES_IN_FILTER_FOR_INDIVIDUAL_PILLS ||\n        !columnModel\n      ) {\n        const text = `${pluralize(\n          getColumnDisplayName(\n            selectedFacet.columnName,\n            selectedFacet.jsonPath,\n          ),\n        )} (${selectedFacet.facetValues.length.toLocaleString()})`\n        return [\n          {\n            key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}`,\n            innerText: text,\n            tooltipText: text,\n            onRemoveFilter: () => {\n              queryContext.removeSelectedFacet(selectedFacet)\n            },\n          },\n        ]\n      }\n\n      // otherwise render one pill per value\n\n      return selectedFacet.facetValues.map(facetValue => {\n        const innerText = getDisplayValue(facetValue, columnModel.columnType)\n        return {\n          key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}-${facetValue}`,\n          innerText: innerText,\n          tooltipText: `${getColumnDisplayName(\n            selectedFacet.columnName,\n            selectedFacet.jsonPath,\n          )}: ${innerText}`,\n          onRemoveFilter: () => {\n            queryContext.removeValueFromSelectedFacet(selectedFacet, facetValue)\n          },\n        }\n      })\n    } else if (isFacetColumnRangeRequest(selectedFacet)) {\n      // Include a single pill for both facet filters if a combined range facet filter config is defined\n      const { combineRangeFacetConfig } = queryContext\n      if (\n        combineRangeFacetConfig &&\n        (selectedFacet.columnName == combineRangeFacetConfig.minFacetColumn ||\n          selectedFacet.columnName == combineRangeFacetConfig.maxFacetColumn)\n      ) {\n        if (\n          selectedFacet.columnName == combineRangeFacetConfig.minFacetColumn\n        ) {\n          return []\n        } else {\n          // find the min facet also\n          const maxFacet = selectedFacet\n          const minFacet = selectedFacets.find(\n            v => v.columnName == combineRangeFacetConfig.minFacetColumn,\n          ) as FacetColumnRangeRequest\n          const innerText = getRangeFacetInnerText(maxFacet.min, minFacet.max)\n          return [\n            {\n              key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}-${innerText}`,\n              innerText: innerText,\n              tooltipText: `${combineRangeFacetConfig.label}: ${innerText}`,\n              onRemoveFilter: () => {\n                // Remove both facets on pill click\n                queryContext.removeSelectedFacet([minFacet, maxFacet])\n              },\n            },\n          ]\n        }\n      }\n\n      const innerText = getRangeFacetInnerText(\n        selectedFacet.min,\n        selectedFacet.max,\n      )\n\n      return [\n        {\n          key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}-${selectedFacet.min}-${selectedFacet.max}`,\n          innerText: innerText,\n          tooltipText: `${getColumnDisplayName(\n            selectedFacet.columnName,\n            selectedFacet.jsonPath,\n          )}: ${innerText}`,\n          onRemoveFilter: () => {\n            queryContext.removeSelectedFacet(selectedFacet)\n          },\n        },\n      ]\n    } else {\n      console.log(\n        'Unknown facet type',\n        (selectedFacet as unknown as FacetColumnRequest).concreteType,\n      )\n      return []\n    }\n  })\n}\n\nfunction SelectionCriteriaPills() {\n  const queryContext = useQueryContext()\n  const lockedColumn = queryContext.lockedColumn\n  const queryVisualizationContext = useQueryVisualizationContext()\n  const { lockTextMatchesQueryFilterPill } = queryVisualizationContext\n  const { currentQueryRequest } = queryContext\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  const queryFilterPillProps = getPillPropsFromQueryFilters(\n    currentQueryRequest.query?.additionalFilters ?? [],\n    queryContext,\n    queryMetadata?.columnModels || [],\n    queryVisualizationContext,\n    lockedColumn,\n    lockTextMatchesQueryFilterPill,\n  )\n\n  const facetPillProps = getPillPropsFromFacetFilters(\n    currentQueryRequest.query.selectedFacets ?? [],\n    queryContext,\n    queryMetadata?.columnModels || [],\n    queryVisualizationContext,\n    lockedColumn,\n  )\n\n  const allPills = [...queryFilterPillProps, ...facetPillProps]\n\n  return (\n    <>\n      {allPills.map(pillProps => {\n        // Encode the key because the facet may include an illegal character\n        const key = encodeURIComponent(pillProps.key)\n        return <SelectionCriteriaPill {...pillProps} key={key} />\n      })}\n    </>\n  )\n}\n\nexport default SelectionCriteriaPills\n"],"mappings":"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"}
+{"version":3,"file":"SelectionCriteriaPills.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/SelectionCriteriaPills.tsx"],"sourcesContent":["import {\n  isColumnMultiValueFunctionQueryFilter,\n  isColumnSingleValueQueryFilter,\n  isFacetColumnRangeRequest,\n  isFacetColumnValuesRequest,\n  isTextMatchesQueryFilter,\n  LockedColumn,\n} from '@/utils'\nimport { FRIENDLY_VALUE_NOT_SET, VALUE_NOT_SET } from '@/utils/SynapseConstants'\nimport {\n  ColumnModel,\n  ColumnMultiValueFunctionQueryFilter,\n  ColumnSingleValueQueryFilter,\n  FacetColumnRangeRequest,\n  FacetColumnRequest,\n  QueryFilter,\n  TextMatchesQueryFilter,\n} from '@sage-bionetworks/synapse-types'\nimport pluralize from 'pluralize'\nimport { ReadonlyDeep } from 'type-fest'\nimport { QueryContextType, useQueryContext } from '../../QueryContext'\nimport {\n  QueryVisualizationContextType,\n  useQueryVisualizationContext,\n} from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport SelectionCriteriaPill, {\n  SelectionCriteriaPillProps,\n} from './SelectionCriteriaPill'\nimport { getSearchTextFromBooleanModeSearchExpression } from '@/components/FullTextSearch/FullTextSearchUtils'\n\nconst MAX_VALUES_IN_FILTER_FOR_INDIVIDUAL_PILLS = 4\n\nfunction getPillPropsFromColumnQueryFilter(\n  queryFilter:\n    | ColumnSingleValueQueryFilter\n    | ColumnMultiValueFunctionQueryFilter,\n  queryContext: QueryContextType,\n  columnModel: ColumnModel | undefined,\n  queryVisualizationContext: QueryVisualizationContextType,\n): SelectionCriteriaPillProps[] {\n  const { getColumnDisplayName } = queryVisualizationContext\n  // ColumnSingleValueQueryFilter and ColumnMultiValueQueryFilter both allow for a list of values\n  // If there are more than _n_ values, consolidate to one pill\n  if (\n    queryFilter.values.length > MAX_VALUES_IN_FILTER_FOR_INDIVIDUAL_PILLS ||\n    !columnModel\n  ) {\n    const text = `${pluralize(\n      getColumnDisplayName(queryFilter.columnName),\n    )} (${queryFilter.values.length.toLocaleString()})`\n\n    return [\n      {\n        key: `queryFilter-${queryFilter.concreteType}-${queryFilter.columnName}`,\n        label: text,\n        tooltipText: text,\n        onRemoveFilter: () => {\n          queryContext.removeQueryFilter(queryFilter)\n        },\n      },\n    ]\n  }\n\n  // otherwise render one pill per value\n  return queryFilter.values.map(value => {\n    let filterValue = value\n\n    if (value?.startsWith('%') && value?.endsWith('%')) {\n      // strip '%' wildcard character when using a LIKE condition\n      filterValue = filterValue.substring(1, filterValue.length - 1)\n    }\n    filterValue = queryVisualizationContext.getDisplayValue(\n      filterValue,\n      columnModel.columnType,\n    )\n    const text = `${getColumnDisplayName(\n      queryFilter.columnName,\n    )}: ${filterValue}`\n    return {\n      key: `queryFilter-${queryFilter.concreteType}-${queryFilter.columnName}-${value}`,\n      label: text,\n      tooltipText: text,\n      onRemoveFilter: () => {\n        queryContext.removeValueFromQueryFilter(queryFilter, value)\n      },\n    }\n  })\n}\n\nexport function getPillPropsFromTextMatchesQueryFilter(\n  queryFilter: TextMatchesQueryFilter,\n  queryContext: QueryContextType,\n  isLocked?: boolean,\n): SelectionCriteriaPillProps {\n  let innerText = queryFilter.searchExpression\n  if (queryFilter.searchMode == 'BOOLEAN') {\n    innerText = getSearchTextFromBooleanModeSearchExpression(\n      queryFilter.searchExpression,\n    )\n  }\n\n  return {\n    key: `queryFilter-${queryFilter.concreteType}-${queryFilter.searchExpression}`,\n    label: innerText,\n    tooltipText: `Text matches: \"${innerText}\"`,\n    ...(isLocked\n      ? { isLocked: true }\n      : {\n          onRemoveFilter: () => {\n            queryContext.removeQueryFilter(queryFilter)\n          },\n        }),\n  }\n}\n\nfunction getPillPropsFromQueryFilters(\n  queryFilters: ReadonlyDeep<QueryFilter[]>,\n  queryContext: QueryContextType,\n  columnModels: ColumnModel[],\n  queryVisualizationContext: QueryVisualizationContextType,\n  lockedColumn?: LockedColumn,\n  lockTextMatchesQueryFilterPill?: boolean,\n): SelectionCriteriaPillProps[] {\n  return queryFilters.flatMap(queryFilter => {\n    if (\n      isColumnSingleValueQueryFilter(queryFilter) ||\n      isColumnMultiValueFunctionQueryFilter(queryFilter)\n    ) {\n      const columnModel = columnModels.find(\n        cm => cm.name === queryFilter.columnName,\n      )\n      if (\n        queryFilter.columnName.toLowerCase() ===\n        lockedColumn?.columnName?.toLowerCase()\n      ) {\n        return []\n      }\n      return getPillPropsFromColumnQueryFilter(\n        queryFilter,\n        queryContext,\n        columnModel,\n        queryVisualizationContext,\n      )\n    } else if (isTextMatchesQueryFilter(queryFilter)) {\n      return [\n        getPillPropsFromTextMatchesQueryFilter(\n          queryFilter,\n          queryContext,\n          lockTextMatchesQueryFilterPill,\n        ),\n      ]\n    } else {\n      console.log('Unknown query filter type', queryFilter)\n      return []\n    }\n  })\n}\n\nfunction getRangeFacetInnerText(min?: string, max?: string) {\n  if (min == undefined && max == undefined) {\n    return 'Any value'\n  } else if (min == undefined) {\n    return `Up to ${max}`\n  } else if (max == undefined) {\n    return `${min} or greater`\n  } else if (min === VALUE_NOT_SET && max === VALUE_NOT_SET) {\n    return FRIENDLY_VALUE_NOT_SET\n  } else {\n    return `${min} - ${max}`\n  }\n}\n\nfunction getPillPropsFromFacetFilters(\n  selectedFacets: ReadonlyDeep<FacetColumnRequest[]>,\n  queryContext: QueryContextType,\n  columnModels: ColumnModel[],\n  queryVisualizationContext: QueryVisualizationContextType,\n  lockedColumn?: LockedColumn,\n): SelectionCriteriaPillProps[] {\n  return selectedFacets.flatMap(\n    (selectedFacet): SelectionCriteriaPillProps[] => {\n      if (\n        selectedFacet.columnName.toLowerCase() ===\n        lockedColumn?.columnName?.toLowerCase()\n      ) {\n        return []\n      }\n      const columnModel = columnModels.find(\n        cm => cm.name === selectedFacet.columnName,\n      )\n      const { getColumnDisplayName, getDisplayValue, renderFacetValue } =\n        queryVisualizationContext\n      if (isFacetColumnValuesRequest(selectedFacet)) {\n        // If there are more than _n_ values, consolidate to one pill\n        if (\n          selectedFacet.facetValues.length >\n            MAX_VALUES_IN_FILTER_FOR_INDIVIDUAL_PILLS ||\n          !columnModel\n        ) {\n          const text = `${pluralize(\n            getColumnDisplayName(\n              selectedFacet.columnName,\n              selectedFacet.jsonPath,\n            ),\n          )} (${selectedFacet.facetValues.length.toLocaleString()})`\n          return [\n            {\n              key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}`,\n              label: text,\n              tooltipText: text,\n              onRemoveFilter: () => {\n                queryContext.removeSelectedFacet(selectedFacet)\n              },\n            },\n          ]\n        }\n\n        // otherwise render one pill per value\n\n        return selectedFacet.facetValues.map(facetValue => {\n          const innerText = getDisplayValue(facetValue, columnModel.columnType)\n          // A custom renderer (e.g. DUO) supplies structured chip content; the\n          // pill renders it through the shared chip and owns the remove button.\n          const rendered = renderFacetValue?.(\n            selectedFacet.columnName,\n            facetValue,\n          )\n          return {\n            key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}-${facetValue}`,\n            label: rendered ? rendered.label : innerText,\n            icon: rendered?.icon,\n            tooltipText: rendered\n              ? rendered.tooltipTitle\n              : `${getColumnDisplayName(\n                  selectedFacet.columnName,\n                  selectedFacet.jsonPath,\n                )}: ${innerText}`,\n            onRemoveFilter: () => {\n              queryContext.removeValueFromSelectedFacet(\n                selectedFacet,\n                facetValue,\n              )\n            },\n          }\n        })\n      } else if (isFacetColumnRangeRequest(selectedFacet)) {\n        // Include a single pill for both facet filters if a combined range facet filter config is defined\n        const { combineRangeFacetConfig } = queryContext\n        if (\n          combineRangeFacetConfig &&\n          (selectedFacet.columnName == combineRangeFacetConfig.minFacetColumn ||\n            selectedFacet.columnName == combineRangeFacetConfig.maxFacetColumn)\n        ) {\n          if (\n            selectedFacet.columnName == combineRangeFacetConfig.minFacetColumn\n          ) {\n            return []\n          } else {\n            // find the min facet also\n            const maxFacet = selectedFacet\n            const minFacet = selectedFacets.find(\n              v => v.columnName == combineRangeFacetConfig.minFacetColumn,\n            ) as FacetColumnRangeRequest\n            const innerText = getRangeFacetInnerText(maxFacet.min, minFacet.max)\n            return [\n              {\n                key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}-${innerText}`,\n                label: innerText,\n                tooltipText: `${combineRangeFacetConfig.label}: ${innerText}`,\n                onRemoveFilter: () => {\n                  // Remove both facets on pill click\n                  queryContext.removeSelectedFacet([minFacet, maxFacet])\n                },\n              },\n            ]\n          }\n        }\n\n        const innerText = getRangeFacetInnerText(\n          selectedFacet.min,\n          selectedFacet.max,\n        )\n\n        return [\n          {\n            key: `facet-${selectedFacet.concreteType}-${selectedFacet.columnName}-${selectedFacet.min}-${selectedFacet.max}`,\n            label: innerText,\n            tooltipText: `${getColumnDisplayName(\n              selectedFacet.columnName,\n              selectedFacet.jsonPath,\n            )}: ${innerText}`,\n            onRemoveFilter: () => {\n              queryContext.removeSelectedFacet(selectedFacet)\n            },\n          },\n        ]\n      } else {\n        console.log(\n          'Unknown facet type',\n          (selectedFacet as unknown as FacetColumnRequest).concreteType,\n        )\n        return []\n      }\n    },\n  )\n}\n\nfunction SelectionCriteriaPills() {\n  const queryContext = useQueryContext()\n  const lockedColumn = queryContext.lockedColumn\n  const queryVisualizationContext = useQueryVisualizationContext()\n  const { lockTextMatchesQueryFilterPill } = queryVisualizationContext\n  const { currentQueryRequest } = queryContext\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  const queryFilterPillProps = getPillPropsFromQueryFilters(\n    currentQueryRequest.query?.additionalFilters ?? [],\n    queryContext,\n    queryMetadata?.columnModels || [],\n    queryVisualizationContext,\n    lockedColumn,\n    lockTextMatchesQueryFilterPill,\n  )\n\n  const facetPillProps = getPillPropsFromFacetFilters(\n    currentQueryRequest.query.selectedFacets ?? [],\n    queryContext,\n    queryMetadata?.columnModels || [],\n    queryVisualizationContext,\n    lockedColumn,\n  )\n\n  const allPills = [...queryFilterPillProps, ...facetPillProps]\n\n  return (\n    <>\n      {allPills.map(pillProps => {\n        // Encode the key because the facet may include an illegal character\n        const key = encodeURIComponent(pillProps.key)\n        return <SelectionCriteriaPill {...pillProps} key={key} />\n      })}\n    </>\n  )\n}\n\nexport default SelectionCriteriaPills\n"],"mappings":"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"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAML,uBAAuB,EAIxB,MAAM,iCAAiC,CAAA;AAUxC,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,uBAAuB,CAAA;IAC9B,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AA0LD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAc1D"}
+{"version":3,"file":"EnumFacetFilter.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"names":[],"mappings":"AAMA,OAAO,EAML,uBAAuB,EAIxB,MAAM,iCAAiC,CAAA;AAWxC,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,uBAAuB,CAAA;IAC9B,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AA6MD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAc1D"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.js

@@ -6,89 +6,105 @@ import { getCorrespondingColumnForFacet as r, getCorrespondingSelectedFacet as i
 import { useQueryContext as a } from "../../../QueryContext/QueryContext.js";
 import "../../../QueryContext/index.js";
 import { useSuspenseGetQueryMetadata as o } from "../../../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as s } from "../../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import s from "../../facet-nav/FacetValueChip.js";
+import { useQueryVisualizationContext as c } from "../../../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "../../../QueryVisualizationWrapper/index.js";
-import c from "./EnumFacetFilterUI.js";
-import { EnumFacetFilterSkeleton as l } from "./EnumFacetFilterSkeleton.js";
-import { getAllIsSelected as u, valueToLabel as d } from "./EnumFacetFilterUtils.js";
-import { Suspense as f, useMemo as p } from "react";
-import { cloneDeep as m, partition as h, pick as g, sortBy as _ } from "lodash-es";
-import { Fragment as v, jsx as y } from "react/jsx-runtime";
-import { ColumnTypeEnum as b } from "@sage-bionetworks/synapse-types";
+import l from "./EnumFacetFilterUI.js";
+import { EnumFacetFilterSkeleton as u } from "./EnumFacetFilterSkeleton.js";
+import { getAllIsSelected as d, valueToLabel as f } from "./EnumFacetFilterUtils.js";
+import { Suspense as p, useMemo as m } from "react";
+import { cloneDeep as h, partition as g, pick as _, sortBy as v } from "lodash-es";
+import { Fragment as y, jsx as b } from "react/jsx-runtime";
+import { ColumnTypeEnum as x } from "@sage-bionetworks/synapse-types";
 //#region src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx
-function x(l) {
-	let { facet: f, containerAs: x = "Collapsible", dropdownType: S = "Icon", hideCollapsible: C = !1, defaultShowAllValues: w = !1, labelId: T } = l, { nextQueryRequest: E, addValueToSelectedFacet: D, removeSelectedFacet: O, removeValueFromSelectedFacet: k, resetDebounceTimer: A } = a(), { data: j } = o(), { getColumnDisplayName: M } = s(), N = p(() => {
-		let e = i(f, m(E.query.selectedFacets));
+function S(u) {
+	let { facet: p, containerAs: S = "Collapsible", dropdownType: C = "Icon", hideCollapsible: w = !1, defaultShowAllValues: T = !1, labelId: E } = u, { nextQueryRequest: D, addValueToSelectedFacet: O, removeSelectedFacet: k, removeValueFromSelectedFacet: A, resetDebounceTimer: j } = a(), { data: M } = o(), { getColumnDisplayName: N, renderFacetValue: P } = c(), F = m(() => {
+		let e = i(p, h(D.query.selectedFacets));
 		if (e && !t(e)) {
-			console.error("The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest", f);
+			console.error("The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest", p);
 			return;
 		}
 		return e;
-	}, [f, E.query.selectedFacets]), P = u(m(E), f), F = j.columnModels ? r(f, j.columnModels) : void 0, I = p(() => {
-		switch (F?.columnType) {
-			case b.DOUBLE:
-			case b.DATE:
-			case b.INTEGER: return !0;
+	}, [p, D.query.selectedFacets]), I = d(h(D), p), L = M.columnModels ? r(p, M.columnModels) : void 0, R = m(() => {
+		switch (L?.columnType) {
+			case x.DOUBLE:
+			case x.DATE:
+			case x.INTEGER: return !0;
 			default: return !1;
 		}
-	}, [F]), L = n({
-		ids: F?.columnType === b.USERID || F?.columnType === b.USERID_LIST ? f.facetValues.map((e) => e.value) : [],
+	}, [L]), z = n({
+		ids: L?.columnType === x.USERID || L?.columnType === x.USERID_LIST ? p.facetValues.map((e) => e.value) : [],
 		type: "USER_PROFILE"
-	}), R = n({
-		ids: F?.columnType === b.ENTITYID || F?.columnType === b.ENTITYID_LIST ? f.facetValues.map((e) => e.value) : [],
+	}), B = n({
+		ids: L?.columnType === x.ENTITYID || L?.columnType === x.ENTITYID_LIST ? p.facetValues.map((e) => e.value) : [],
 		type: "ENTITY_HEADER"
-	}), z = n({
-		ids: F?.columnType === b.EVALUATIONID ? f.facetValues.map((e) => e.value) : [],
+	}), V = n({
+		ids: L?.columnType === x.EVALUATIONID ? p.facetValues.map((e) => e.value) : [],
 		type: "EVALUATION_QUEUE"
-	}), B = p(() => {
-		let t = h(f.facetValues.map((e) => ({
-			...e,
-			isSelected: N?.facetValues.includes(e.value) ?? !1,
-			displayText: d(e, L, R, z)
-		})), (t) => t.value === e), n = t[0], r = t[1], i = r;
-		return (F == null || F.facetSortConfig == null) && (i = I ? _(r, (e) => Number(e.value)) : _(r, (e) => e.displayText.toLowerCase())), [...i, ...n];
+	}), H = m(() => {
+		let t = g(p.facetValues.map((e) => {
+			let t = f(e, z, B, V);
+			return {
+				...e,
+				isSelected: F?.facetValues.includes(e.value) ?? !1,
+				displayText: t,
+				renderedLabel: (() => {
+					let t = P?.(p.columnName, e.value);
+					return t ? /* @__PURE__ */ b(s, {
+						label: t.label,
+						icon: t.icon,
+						tooltipTitle: t.tooltipTitle,
+						placement: "right",
+						truncate: !0
+					}) : void 0;
+				})()
+			};
+		}), (t) => t.value === e), n = t[0], r = t[1], i = r;
+		return (L == null || L.facetSortConfig == null) && (i = R ? v(r, (e) => Number(e.value)) : v(r, (e) => e.displayText.toLowerCase())), [...i, ...n];
 	}, [
-		f.facetValues,
-		F,
-		N?.facetValues,
+		p.facetValues,
+		p.columnName,
 		L,
-		R,
+		F?.facetValues,
 		z,
-		I
+		B,
+		V,
+		R,
+		P
 	]);
-	return F ? /* @__PURE__ */ y(c, {
-		labelId: T,
-		facetTitle: M(f.columnName, f.jsonPath),
-		filterIsActive: !P,
-		facetValues: B,
-		containerAs: x,
-		dropdownType: S,
-		hideCollapsible: C,
-		defaultShowAllValues: w,
+	return L ? /* @__PURE__ */ b(l, {
+		labelId: E,
+		facetTitle: N(p.columnName, p.jsonPath),
+		filterIsActive: !I,
+		facetValues: H,
+		containerAs: S,
+		dropdownType: C,
+		hideCollapsible: w,
+		defaultShowAllValues: T,
 		onHoverOverValue: () => {
-			A();
+			j();
 		},
 		onAddValueToSelection: (e) => {
-			D(g(f, ["columnName", "jsonPath"]), e, { debounce: !0 });
+			O(_(p, ["columnName", "jsonPath"]), e, { debounce: !0 });
 		},
 		onRemoveValueFromSelection: (e) => {
-			k(g(f, ["columnName", "jsonPath"]), e, { debounce: !0 });
+			A(_(p, ["columnName", "jsonPath"]), e, { debounce: !0 });
 		},
-		onRemoveAllFacetSelections: () => O(g(f, ["columnName", "jsonPath"])),
+		onRemoveAllFacetSelections: () => k(_(p, ["columnName", "jsonPath"])),
 		canMultiSelect: !0
-	}) : /* @__PURE__ */ y(v, {});
+	}) : /* @__PURE__ */ b(y, {});
 }
-function S(e) {
+function C(e) {
 	let { containerAs: t = "Collapsible", dropdownType: n = "Icon" } = e;
-	return /* @__PURE__ */ y(f, {
-		fallback: /* @__PURE__ */ y(l, {
+	return /* @__PURE__ */ b(p, {
+		fallback: /* @__PURE__ */ b(u, {
 			containerAs: t,
 			dropdownType: n
 		}),
-		children: /* @__PURE__ */ y(x, { ...e })
+		children: /* @__PURE__ */ b(S, { ...e })
 	});
 }
 //#endregion
-export { S as EnumFacetFilter };
+export { C as EnumFacetFilter };
 
 //# sourceMappingURL=EnumFacetFilter.js.map

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilter.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"sourcesContent":["import { isFacetColumnValuesRequest, SynapseConstants } from '@/utils'\nimport {\n  getCorrespondingColumnForFacet,\n  getCorrespondingSelectedFacet,\n} from '@/utils/functions/queryUtils'\nimport useGetInfoFromIds from '@/utils/hooks/useGetInfoFromIds'\nimport {\n  ColumnTypeEnum,\n  EntityHeader,\n  Evaluation,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n  FacetColumnValuesRequest,\n  QueryBundleRequest,\n  UserGroupHeader,\n} from '@sage-bionetworks/synapse-types'\nimport { cloneDeep, partition, pick, sortBy } from 'lodash-es'\nimport { Suspense, useMemo } from 'react'\nimport { useQueryContext } from '../../../QueryContext'\nimport { useQueryVisualizationContext } from '../../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilterSkeleton } from './EnumFacetFilterSkeleton'\nimport EnumFacetFilterUI, { RenderedFacetValue } from './EnumFacetFilterUI'\nimport { getAllIsSelected, valueToLabel } from './EnumFacetFilterUtils'\n\nexport type EnumFacetFilterProps = {\n  labelId?: string\n  facet: FacetColumnResultValues\n  containerAs?: 'Collapsible' | 'Dropdown'\n  dropdownType?: 'Icon' | 'SelectBox'\n  hideCollapsible?: boolean\n  defaultShowAllValues?: boolean\n}\n\nfunction EnumFacetFilterInternal(props: EnumFacetFilterProps) {\n  const {\n    facet,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    defaultShowAllValues = false,\n    labelId,\n  } = props\n  const {\n    nextQueryRequest,\n    addValueToSelectedFacet,\n    removeSelectedFacet,\n    removeValueFromSelectedFacet,\n    resetDebounceTimer,\n  } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n\n  const currentSelectedFacet: FacetColumnValuesRequest | undefined =\n    useMemo(() => {\n      const facetColumnRequest = getCorrespondingSelectedFacet(\n        facet,\n        cloneDeep(nextQueryRequest.query.selectedFacets) as\n          | FacetColumnRequest[]\n          | undefined,\n      )\n\n      if (\n        facetColumnRequest &&\n        !isFacetColumnValuesRequest(facetColumnRequest)\n      ) {\n        console.error(\n          `The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest`,\n          facet,\n        )\n        return undefined\n      }\n      return facetColumnRequest\n    }, [facet, nextQueryRequest.query.selectedFacets])\n\n  // Must compare the known facet values to the \"uncommitted\" current query\n  const allIsSelected = getAllIsSelected(\n    cloneDeep(nextQueryRequest) as QueryBundleRequest,\n    facet,\n  )\n\n  const columnModel = queryMetadata.columnModels\n    ? getCorrespondingColumnForFacet(facet, queryMetadata.columnModels)\n    : undefined\n\n  const isNumberColumnType = useMemo(() => {\n    switch (columnModel?.columnType) {\n      case ColumnTypeEnum.DOUBLE:\n      case ColumnTypeEnum.DATE:\n      case ColumnTypeEnum.INTEGER:\n        return true\n      default:\n        return false\n    }\n  }, [columnModel])\n\n  const userIds =\n    columnModel?.columnType === ColumnTypeEnum.USERID ||\n    columnModel?.columnType === ColumnTypeEnum.USERID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const userGroupHeaders = useGetInfoFromIds<UserGroupHeader>({\n    ids: userIds,\n    type: 'USER_PROFILE',\n  })\n\n  const entityIds =\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID ||\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const entityHeaders = useGetInfoFromIds<EntityHeader>({\n    ids: entityIds,\n    type: 'ENTITY_HEADER',\n  })\n\n  const evaluationIds =\n    columnModel?.columnType === ColumnTypeEnum.EVALUATIONID\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const evaluations = useGetInfoFromIds<Evaluation>({\n    ids: evaluationIds,\n    type: 'EVALUATION_QUEUE',\n  })\n\n  const displayedFacetValues: RenderedFacetValue[] = useMemo(() => {\n    const renderedFacetValues = facet.facetValues.map(\n      (facetValue: FacetColumnResultValueCount): RenderedFacetValue => {\n        return {\n          ...facetValue,\n          // Selected status should be based on the 'nextQuery', not the result data\n          // This ensures the checkboxes respond instantly to user interaction, like while waiting for multiple changes to debounce\n          isSelected:\n            currentSelectedFacet?.facetValues.includes(facetValue.value) ??\n            false,\n          displayText: valueToLabel(\n            facetValue,\n            userGroupHeaders,\n            entityHeaders,\n            evaluations,\n          ),\n        }\n      },\n    )\n    //Abby V's suggestion, always show the VALUE_NOT_SET facet value on the bottom of this sorted list\n    const partitions = partition(\n      renderedFacetValues,\n      facet => facet.value === SynapseConstants.VALUE_NOT_SET,\n    )\n    const valueNotSetFacetArray = partitions[0]\n    const restOfFacetValuesArray = partitions[1]\n\n    // Apply client-side sorting if no server-side sort is specified\n    let sortedValues: RenderedFacetValue[] = restOfFacetValuesArray\n    const isClientSideSort =\n      columnModel == undefined || columnModel.facetSortConfig == undefined\n    if (isClientSideSort) {\n      if (isNumberColumnType) {\n        sortedValues = sortBy(restOfFacetValuesArray, fv => Number(fv.value))\n      } else {\n        sortedValues = sortBy(restOfFacetValuesArray, fv =>\n          fv.displayText.toLowerCase(),\n        )\n      }\n    }\n\n    return [...sortedValues, ...valueNotSetFacetArray]\n  }, [\n    facet.facetValues,\n    columnModel,\n    currentSelectedFacet?.facetValues,\n    userGroupHeaders,\n    entityHeaders,\n    evaluations,\n    isNumberColumnType,\n  ])\n\n  if (!columnModel) {\n    return <></>\n  }\n\n  return (\n    <EnumFacetFilterUI\n      labelId={labelId}\n      facetTitle={getColumnDisplayName(facet.columnName, facet.jsonPath)}\n      filterIsActive={!allIsSelected}\n      facetValues={displayedFacetValues}\n      containerAs={containerAs}\n      dropdownType={dropdownType}\n      hideCollapsible={hideCollapsible}\n      defaultShowAllValues={defaultShowAllValues}\n      onHoverOverValue={() => {\n        // SWC-6698: delay the query execution (via the debounce) when an item is hovered over\n        resetDebounceTimer()\n      }}\n      onAddValueToSelection={value => {\n        addValueToSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveValueFromSelection={value => {\n        removeValueFromSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveAllFacetSelections={() =>\n        removeSelectedFacet(pick(facet, ['columnName', 'jsonPath']))\n      }\n      canMultiSelect={true}\n    />\n  )\n}\n\nexport function EnumFacetFilter(props: EnumFacetFilterProps) {\n  const { containerAs = 'Collapsible', dropdownType = 'Icon' } = props\n  return (\n    <Suspense\n      fallback={\n        <EnumFacetFilterSkeleton\n          containerAs={containerAs}\n          dropdownType={dropdownType}\n        />\n      }\n    >\n      <EnumFacetFilterInternal {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"EnumFacetFilter.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"sourcesContent":["import { isFacetColumnValuesRequest, SynapseConstants } from '@/utils'\nimport {\n  getCorrespondingColumnForFacet,\n  getCorrespondingSelectedFacet,\n} from '@/utils/functions/queryUtils'\nimport useGetInfoFromIds from '@/utils/hooks/useGetInfoFromIds'\nimport {\n  ColumnTypeEnum,\n  EntityHeader,\n  Evaluation,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n  FacetColumnValuesRequest,\n  QueryBundleRequest,\n  UserGroupHeader,\n} from '@sage-bionetworks/synapse-types'\nimport { cloneDeep, partition, pick, sortBy } from 'lodash-es'\nimport { Suspense, useMemo } from 'react'\nimport { useQueryContext } from '../../../QueryContext'\nimport { useQueryVisualizationContext } from '../../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilterSkeleton } from './EnumFacetFilterSkeleton'\nimport EnumFacetFilterUI, { RenderedFacetValue } from './EnumFacetFilterUI'\nimport { getAllIsSelected, valueToLabel } from './EnumFacetFilterUtils'\nimport FacetValueChip from '../../facet-nav/FacetValueChip'\n\nexport type EnumFacetFilterProps = {\n  labelId?: string\n  facet: FacetColumnResultValues\n  containerAs?: 'Collapsible' | 'Dropdown'\n  dropdownType?: 'Icon' | 'SelectBox'\n  hideCollapsible?: boolean\n  defaultShowAllValues?: boolean\n}\n\nfunction EnumFacetFilterInternal(props: EnumFacetFilterProps) {\n  const {\n    facet,\n    containerAs = 'Collapsible',\n    dropdownType = 'Icon',\n    hideCollapsible = false,\n    defaultShowAllValues = false,\n    labelId,\n  } = props\n  const {\n    nextQueryRequest,\n    addValueToSelectedFacet,\n    removeSelectedFacet,\n    removeValueFromSelectedFacet,\n    resetDebounceTimer,\n  } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { getColumnDisplayName, renderFacetValue } =\n    useQueryVisualizationContext()\n\n  const currentSelectedFacet: FacetColumnValuesRequest | undefined =\n    useMemo(() => {\n      const facetColumnRequest = getCorrespondingSelectedFacet(\n        facet,\n        cloneDeep(nextQueryRequest.query.selectedFacets) as\n          | FacetColumnRequest[]\n          | undefined,\n      )\n\n      if (\n        facetColumnRequest &&\n        !isFacetColumnValuesRequest(facetColumnRequest)\n      ) {\n        console.error(\n          `The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest`,\n          facet,\n        )\n        return undefined\n      }\n      return facetColumnRequest\n    }, [facet, nextQueryRequest.query.selectedFacets])\n\n  // Must compare the known facet values to the \"uncommitted\" current query\n  const allIsSelected = getAllIsSelected(\n    cloneDeep(nextQueryRequest) as QueryBundleRequest,\n    facet,\n  )\n\n  const columnModel = queryMetadata.columnModels\n    ? getCorrespondingColumnForFacet(facet, queryMetadata.columnModels)\n    : undefined\n\n  const isNumberColumnType = useMemo(() => {\n    switch (columnModel?.columnType) {\n      case ColumnTypeEnum.DOUBLE:\n      case ColumnTypeEnum.DATE:\n      case ColumnTypeEnum.INTEGER:\n        return true\n      default:\n        return false\n    }\n  }, [columnModel])\n\n  const userIds =\n    columnModel?.columnType === ColumnTypeEnum.USERID ||\n    columnModel?.columnType === ColumnTypeEnum.USERID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const userGroupHeaders = useGetInfoFromIds<UserGroupHeader>({\n    ids: userIds,\n    type: 'USER_PROFILE',\n  })\n\n  const entityIds =\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID ||\n    columnModel?.columnType === ColumnTypeEnum.ENTITYID_LIST\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const entityHeaders = useGetInfoFromIds<EntityHeader>({\n    ids: entityIds,\n    type: 'ENTITY_HEADER',\n  })\n\n  const evaluationIds =\n    columnModel?.columnType === ColumnTypeEnum.EVALUATIONID\n      ? facet.facetValues.map(facet => facet.value)\n      : []\n  const evaluations = useGetInfoFromIds<Evaluation>({\n    ids: evaluationIds,\n    type: 'EVALUATION_QUEUE',\n  })\n\n  const displayedFacetValues: RenderedFacetValue[] = useMemo(() => {\n    const renderedFacetValues = facet.facetValues.map(\n      (facetValue: FacetColumnResultValueCount): RenderedFacetValue => {\n        const displayText = valueToLabel(\n          facetValue,\n          userGroupHeaders,\n          entityHeaders,\n          evaluations,\n        )\n        return {\n          ...facetValue,\n          // Selected status should be based on the 'nextQuery', not the result data\n          // This ensures the checkboxes respond instantly to user interaction, like while waiting for multiple changes to debounce\n          isSelected:\n            currentSelectedFacet?.facetValues.includes(facetValue.value) ??\n            false,\n          displayText,\n          renderedLabel: (() => {\n            const rendered = renderFacetValue?.(\n              facet.columnName,\n              facetValue.value,\n            )\n            return rendered ? (\n              <FacetValueChip\n                label={rendered.label}\n                icon={rendered.icon}\n                tooltipTitle={rendered.tooltipTitle}\n                placement=\"right\"\n                truncate\n              />\n            ) : undefined\n          })(),\n        }\n      },\n    )\n    //Abby V's suggestion, always show the VALUE_NOT_SET facet value on the bottom of this sorted list\n    const partitions = partition(\n      renderedFacetValues,\n      facet => facet.value === SynapseConstants.VALUE_NOT_SET,\n    )\n    const valueNotSetFacetArray = partitions[0]\n    const restOfFacetValuesArray = partitions[1]\n\n    // Apply client-side sorting if no server-side sort is specified\n    let sortedValues: RenderedFacetValue[] = restOfFacetValuesArray\n    const isClientSideSort =\n      columnModel == undefined || columnModel.facetSortConfig == undefined\n    if (isClientSideSort) {\n      if (isNumberColumnType) {\n        sortedValues = sortBy(restOfFacetValuesArray, fv => Number(fv.value))\n      } else {\n        sortedValues = sortBy(restOfFacetValuesArray, fv =>\n          fv.displayText.toLowerCase(),\n        )\n      }\n    }\n\n    return [...sortedValues, ...valueNotSetFacetArray]\n  }, [\n    facet.facetValues,\n    facet.columnName,\n    columnModel,\n    currentSelectedFacet?.facetValues,\n    userGroupHeaders,\n    entityHeaders,\n    evaluations,\n    isNumberColumnType,\n    renderFacetValue,\n  ])\n\n  if (!columnModel) {\n    return <></>\n  }\n\n  return (\n    <EnumFacetFilterUI\n      labelId={labelId}\n      facetTitle={getColumnDisplayName(facet.columnName, facet.jsonPath)}\n      filterIsActive={!allIsSelected}\n      facetValues={displayedFacetValues}\n      containerAs={containerAs}\n      dropdownType={dropdownType}\n      hideCollapsible={hideCollapsible}\n      defaultShowAllValues={defaultShowAllValues}\n      onHoverOverValue={() => {\n        // SWC-6698: delay the query execution (via the debounce) when an item is hovered over\n        resetDebounceTimer()\n      }}\n      onAddValueToSelection={value => {\n        addValueToSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveValueFromSelection={value => {\n        removeValueFromSelectedFacet(\n          pick(facet, ['columnName', 'jsonPath']),\n          value,\n          { debounce: true },\n        )\n      }}\n      onRemoveAllFacetSelections={() =>\n        removeSelectedFacet(pick(facet, ['columnName', 'jsonPath']))\n      }\n      canMultiSelect={true}\n    />\n  )\n}\n\nexport function EnumFacetFilter(props: EnumFacetFilterProps) {\n  const { containerAs = 'Collapsible', dropdownType = 'Icon' } = props\n  return (\n    <Suspense\n      fallback={\n        <EnumFacetFilterSkeleton\n          containerAs={containerAs}\n          dropdownType={dropdownType}\n        />\n      }\n    >\n      <EnumFacetFilterInternal {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 type EnumFacetFilterOptionProps = {
     readonly id: string;
-    readonly label: string;
+    readonly label: ReactNode;
     readonly count?: number;
     readonly isDropdown: boolean;
     readonly checked: boolean;

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterOption.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"names":[],"mappings":"AAEA,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAA;CACzC,CAAA;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CA6DtE"}
+{"version":3,"file":"EnumFacetFilterOption.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,KAAK,0BAA0B,GAAG;IAChC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAA;IACzB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B,QAAQ,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAA;CACzC,CAAA;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAwEtE"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.js

@@ -17,7 +17,15 @@ function s(s) {
 		children: [/* @__PURE__ */ a(n, {
 			control: a(h === "checkbox" ? t : r, {}),
 			className: "EnumFacetFilter__checkbox",
-			sx: { overflowWrap: "anywhere" },
+			sx: {
+				overflowWrap: "anywhere",
+				flex: 1,
+				minWidth: 0,
+				"& .MuiFormControlLabel-label": {
+					minWidth: 0,
+					overflow: "hidden"
+				}
+			},
 			onClick: (e) => e.stopPropagation(),
 			onChange: (e, t) => {
 				p(t);
@@ -26,6 +34,10 @@ function s(s) {
 			label: l
 		}, `${c}`), u != null && /* @__PURE__ */ o(i, { children: [d && /* @__PURE__ */ o("span", {
 			className: "EnumFacetFilter__count",
+			style: {
+				flexShrink: 0,
+				marginLeft: 8
+			},
 			children: [
 				"(",
 				u.toLocaleString(),
@@ -33,6 +45,10 @@ function s(s) {
 			]
 		}), !d && /* @__PURE__ */ a("div", {
 			className: "EnumFacetFilter__count",
+			style: {
+				flexShrink: 0,
+				marginLeft: 8
+			},
 			children: u.toLocaleString()
 		})] })]
 	});

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterOption.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"sourcesContent":["import { Box, Checkbox, FormControlLabel, Radio } from '@mui/material'\n\ntype EnumFacetFilterOptionProps = {\n  readonly id: string\n  readonly label: string\n  readonly count?: number\n  readonly isDropdown: boolean\n  readonly checked: boolean\n  readonly onChange: (selected: boolean) => void\n  readonly onHover: () => void\n  readonly inputType: 'checkbox' | 'radio'\n}\n\nexport function EnumFacetFilterOption(props: EnumFacetFilterOptionProps) {\n  const {\n    id,\n    label,\n    count,\n    isDropdown,\n    checked,\n    onChange,\n    onHover,\n    inputType,\n  } = props\n\n  const control = inputType === 'checkbox' ? <Checkbox /> : <Radio />\n\n  return (\n    <Box\n      className=\"EnumFacetFilter__checkboxContainer\"\n      onClick={() => {\n        // If this is a dropdown option, clicking anywhere in the field should toggle selection\n        if (isDropdown) {\n          onChange(!checked)\n        }\n      }}\n      onMouseEnter={onHover}\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n      }}\n    >\n      <FormControlLabel\n        control={control}\n        className=\"EnumFacetFilter__checkbox\"\n        sx={{\n          overflowWrap: 'anywhere',\n        }}\n        onClick={event => event.stopPropagation()}\n        onChange={(_event, newValue) => {\n          onChange(newValue)\n        }}\n        key={`${id}`}\n        checked={checked}\n        label={label}\n      />\n\n      {count != null && (\n        <>\n          {isDropdown && (\n            <span className=\"EnumFacetFilter__count\">\n              ({count.toLocaleString()})\n            </span>\n          )}\n          {!isDropdown && (\n            <div className=\"EnumFacetFilter__count\">\n              {count.toLocaleString()}\n            </div>\n          )}\n        </>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;AAaA,SAAgB,EAAsB,GAAmC;CACvE,IAAM,EACJ,OACA,UACA,UACA,eACA,YACA,aACA,YACA,iBACE;CAIJ,OACE,kBAAC,GAAD;EACE,WAAU;EACV,eAAe;GAEb,AAAI,KACF,EAAS,CAAC,CAAO;EAErB;EACA,cAAc;EACd,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;EACd;YAbF,CAeE,kBAAC,GAAD;GACW,SAnB4B,EAA3B,MAAc,aAAc,IAAe,GAAhB,CAAW,CAAY;GAoB5D,WAAU;GACV,IAAI,EACF,cAAc,WAChB;GACA,UAAS,MAAS,EAAM,gBAAgB;GACxC,WAAW,GAAQ,MAAa;IAC9B,EAAS,CAAQ;GACnB;GAES;GACF;EACR,GAHM,GAAG,GAGT,GAEA,KAAS,QACR,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;GAAM,WAAU;aAAhB;IAAyC;IACrC,EAAM,eAAe;IAAE;GACrB;MAEP,CAAC,KACA,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAM,eAAe;EACnB,CAAA,CAEP,EAAA,CAAA,CAED;;AAET"}
+{"version":3,"file":"EnumFacetFilterOption.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterOption.tsx"],"sourcesContent":["import { Box, Checkbox, FormControlLabel, Radio } from '@mui/material'\nimport { ReactNode } from 'react'\n\ntype EnumFacetFilterOptionProps = {\n  readonly id: string\n  readonly label: ReactNode\n  readonly count?: number\n  readonly isDropdown: boolean\n  readonly checked: boolean\n  readonly onChange: (selected: boolean) => void\n  readonly onHover: () => void\n  readonly inputType: 'checkbox' | 'radio'\n}\n\nexport function EnumFacetFilterOption(props: EnumFacetFilterOptionProps) {\n  const {\n    id,\n    label,\n    count,\n    isDropdown,\n    checked,\n    onChange,\n    onHover,\n    inputType,\n  } = props\n\n  const control = inputType === 'checkbox' ? <Checkbox /> : <Radio />\n\n  return (\n    <Box\n      className=\"EnumFacetFilter__checkboxContainer\"\n      onClick={() => {\n        // If this is a dropdown option, clicking anywhere in the field should toggle selection\n        if (isDropdown) {\n          onChange(!checked)\n        }\n      }}\n      onMouseEnter={onHover}\n      sx={{\n        display: 'flex',\n        justifyContent: 'space-between',\n        alignItems: 'center',\n      }}\n    >\n      <FormControlLabel\n        control={control}\n        className=\"EnumFacetFilter__checkbox\"\n        sx={{\n          overflowWrap: 'anywhere',\n          // Let the label shrink so the count stays in a consistent column\n          // (and custom node labels can truncate rather than overflow the row).\n          flex: 1,\n          minWidth: 0,\n          '& .MuiFormControlLabel-label': { minWidth: 0, overflow: 'hidden' },\n        }}\n        onClick={event => event.stopPropagation()}\n        onChange={(_event, newValue) => {\n          onChange(newValue)\n        }}\n        key={`${id}`}\n        checked={checked}\n        label={label}\n      />\n\n      {count != null && (\n        <>\n          {isDropdown && (\n            <span\n              className=\"EnumFacetFilter__count\"\n              style={{ flexShrink: 0, marginLeft: 8 }}\n            >\n              ({count.toLocaleString()})\n            </span>\n          )}\n          {!isDropdown && (\n            <div\n              className=\"EnumFacetFilter__count\"\n              style={{ flexShrink: 0, marginLeft: 8 }}\n            >\n              {count.toLocaleString()}\n            </div>\n          )}\n        </>\n      )}\n    </Box>\n  )\n}\n"],"mappings":";;;AAcA,SAAgB,EAAsB,GAAmC;CACvE,IAAM,EACJ,OACA,UACA,UACA,eACA,YACA,aACA,YACA,iBACE;CAIJ,OACE,kBAAC,GAAD;EACE,WAAU;EACV,eAAe;GAEb,AAAI,KACF,EAAS,CAAC,CAAO;EAErB;EACA,cAAc;EACd,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;EACd;YAbF,CAeE,kBAAC,GAAD;GACW,SAnB4B,EAA3B,MAAc,aAAc,IAAe,GAAhB,CAAW,CAAY;GAoB5D,WAAU;GACV,IAAI;IACF,cAAc;IAGd,MAAM;IACN,UAAU;IACV,gCAAgC;KAAE,UAAU;KAAG,UAAU;IAAS;GACpE;GACA,UAAS,MAAS,EAAM,gBAAgB;GACxC,WAAW,GAAQ,MAAa;IAC9B,EAAS,CAAQ;GACnB;GAES;GACF;EACR,GAHM,GAAG,GAGT,GAEA,KAAS,QACR,kBAAA,GAAA,EAAA,UAAA,CACG,KACC,kBAAC,QAAD;GACE,WAAU;GACV,OAAO;IAAE,YAAY;IAAG,YAAY;GAAE;aAFxC;IAGC;IACG,EAAM,eAAe;IAAE;GACrB;MAEP,CAAC,KACA,kBAAC,OAAD;GACE,WAAU;GACV,OAAO;IAAE,YAAY;IAAG,YAAY;GAAE;aAErC,EAAM,eAAe;EACnB,CAAA,CAEP,EAAA,CAAA,CAED;;AAET"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 import { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types';
 import { SetOptional } from 'type-fest';
 export type RenderedFacetValue<TValue = string> = Omit<SetOptional<FacetColumnResultValueCount, 'count'>, 'value'> & {
     value: TValue;
     displayText: string;
+    renderedLabel?: ReactNode;
 };
 export type EnumFacetFilterUIProps<TValue = string> = {
     labelId?: string;

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterUI.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAA;AAK7E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIvC,MAAM,MAAM,kBAAkB,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,CACpD,WAAW,CAAC,2BAA2B,EAAE,OAAO,CAAC,EACjD,OAAO,CACR,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,sBAAsB,CAAC,MAAM,GAAG,MAAM,IAAI;IAEpD,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,UAAU,EAAE,MAAM,CAAA;IAElB,WAAW,EAAE,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IAExC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAEnC,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAE9C,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnD,0BAA0B,EAAE,MAAM,IAAI,CAAA;IAEtC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAMD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,sBAAsB,CAAC,MAAM,CAAC,2CAgQtC"}
+{"version":3,"file":"EnumFacetFilterUI.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,2BAA2B,EAAE,MAAM,iCAAiC,CAAA;AAK7E,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAIvC,MAAM,MAAM,kBAAkB,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,CACpD,WAAW,CAAC,2BAA2B,EAAE,OAAO,CAAC,EACjD,OAAO,CACR,GAAG;IACF,KAAK,EAAE,MAAM,CAAA;IAEb,WAAW,EAAE,MAAM,CAAA;IAEnB,aAAa,CAAC,EAAE,SAAS,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,sBAAsB,CAAC,MAAM,GAAG,MAAM,IAAI;IAEpD,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB,UAAU,EAAE,MAAM,CAAA;IAElB,WAAW,EAAE,kBAAkB,CAAC,MAAM,CAAC,EAAE,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,WAAW,CAAC,EAAE,aAAa,GAAG,UAAU,CAAA;IAExC,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IAEnC,eAAe,CAAC,EAAE,OAAO,CAAA;IAEzB,qBAAqB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAE9C,0BAA0B,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEnD,0BAA0B,EAAE,MAAM,IAAI,CAAA;IAEtC,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAEzC,cAAc,EAAE,OAAO,CAAA;IAEvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B,CAAA;AAMD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,MAAM,GAAG,MAAM,EACvD,KAAK,EAAE,sBAAsB,CAAC,MAAM,CAAC,2CAiQtC"}

package/dist/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.js

@@ -89,25 +89,25 @@ function v(v) {
 			})]
 		}), /* @__PURE__ */ h("div", { children: [
 			H.map((e, t) => {
-				let { isSelected: r, displayText: i, value: a, count: o } = e;
+				let { isSelected: r, displayText: i, renderedLabel: a, value: o, count: s } = e;
 				return /* @__PURE__ */ m(n, {
 					id: [
 						_(D),
-						_(String(a)),
+						_(String(o)),
 						t
 					].join("-"),
-					label: i,
-					count: o,
+					label: a ?? i,
+					count: s,
 					isDropdown: W,
 					checked: r,
 					onHover: () => {
-						k(a);
+						k(o);
 					},
 					onChange: (e) => {
-						e ? T(a) : E(a);
+						e ? T(o) : E(o);
 					},
 					inputType: A ? "checkbox" : "radio"
-				}, String(a));
+				}, String(o));
 			}),
 			!W && /* @__PURE__ */ h(p, { children: [G && /* @__PURE__ */ m("button", {
 				className: "EnumFacetFilter__showMoreFacetsBtn",