npm - synapse-react-client - Versions diffs - 4.0.22 → 4.0.24 - Mend

synapse-react-client 4.0.22 → 4.0.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/dist/components/widgets/facet-nav/FacetValueChip.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { Chip as e, Tooltip as t } from "@mui/material";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/widgets/facet-nav/FacetValueChip.tsx
+var r = 220, i = {
+	bgcolor: "var(--synapse-secondary-action-color-alpha-10)",
+	color: "var(--synapse-text-color-dark)",
+	minWidth: 0,
+	"&:hover": { bgcolor: "var(--synapse-secondary-action-color-alpha-20)" },
+	"& .MuiChip-icon": { color: "inherit" },
+	"& .MuiChip-deleteIcon": {
+		color: "inherit",
+		opacity: .7
+	},
+	"& .MuiChip-deleteIcon:hover": {
+		color: "inherit",
+		opacity: 1
+	}
+};
+function a(a) {
+	let { label: o, icon: s, tooltipTitle: c, placement: l = "top", onDelete: u, truncate: d, className: f } = a, p = /* @__PURE__ */ n(e, {
+		className: f,
+		size: "small",
+		icon: s,
+		label: o,
+		onDelete: u,
+		sx: {
+			...i,
+			...d ? { maxWidth: `min(${r}px, 100%)` } : {}
+		}
+	});
+	return c ? /* @__PURE__ */ n(t, {
+		title: c,
+		placement: l,
+		children: p
+	}) : p;
+}
+//#endregion
+export { a as default };
+//# sourceMappingURL=FacetValueChip.js.map

package/dist/components/widgets/facet-nav/FacetValueChip.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FacetValueChip.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetValueChip.tsx"],"sourcesContent":["import { Chip, Tooltip } from '@mui/material'\nimport type { TooltipProps } from '@mui/material'\nimport { ReactElement, ReactNode } from 'react'\n\nexport type FacetValueChipProps = {\n /** The chip label. */\n label: ReactNode\n /** Optional leading icon. */\n icon?: ReactNode\n /** Optional tooltip content. When set, the chip is wrapped in a Tooltip. */\n tooltipTitle?: ReactNode\n /** Tooltip placement. @default 'top' */\n placement?: TooltipProps['placement']\n /** When provided, the chip shows a delete/remove button that calls this. */\n onDelete?: () => void\n /** Cap the width and truncate long labels with an ellipsis (full text in tooltip). */\n truncate?: boolean\n className?: string\n}\n\nconst MAX_CHIP_WIDTH = 220\n\n// One source of truth for the shape, neutral tint, icon, and delete-icon hover\n// styling shared by DUO tags, facet-value chips, and active-filter pills.\nconst chipSx = {\n bgcolor: 'var(--synapse-secondary-action-color-alpha-10)',\n color: 'var(--synapse-text-color-dark)',\n minWidth: 0,\n '&:hover': { bgcolor: 'var(--synapse-secondary-action-color-alpha-20)' },\n '& .MuiChip-icon': { color: 'inherit' },\n '& .MuiChip-deleteIcon': { color: 'inherit', opacity: 0.7 },\n '& .MuiChip-deleteIcon:hover': { color: 'inherit', opacity: 1 },\n}\n\n/**\n * The shared chip used to render a facet value (or DUO term) consistently\n * wherever it appears: in the facet sidebar, as an active-filter pill, and on\n * cards. Owning the icon, tooltip, and delete affordance in one place keeps the\n * styling identical across those contexts.\n */\nexport default function FacetValueChip(props: FacetValueChipProps) {\n const {\n label,\n icon,\n tooltipTitle,\n placement = 'top',\n onDelete,\n truncate,\n className,\n } = props\n const chip = (\n <Chip\n className={className}\n size=\"small\"\n // MUI Chip's `icon` expects a ReactElement; the public prop is ReactNode.\n icon={icon as ReactElement | undefined}\n label={label}\n onDelete={onDelete}\n sx={{\n ...chipSx,\n ...(truncate ? { maxWidth: `min(${MAX_CHIP_WIDTH}px, 100%)` } : {}),\n }}\n />\n )\n return tooltipTitle ? (\n <Tooltip title={tooltipTitle} placement={placement}>\n {chip}\n </Tooltip>\n ) : (\n chip\n )\n}\n"],"mappings":";;;AAoBA,IAAM,IAAiB,KAIjB,IAAS;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,WAAW,EAAE,SAAS,iDAAiD;CACvE,mBAAmB,EAAE,OAAO,UAAU;CACtC,yBAAyB;EAAE,OAAO;EAAW,SAAS;CAAI;CAC1D,+BAA+B;EAAE,OAAO;EAAW,SAAS;CAAE;AAChE;AAQA,SAAwB,EAAe,GAA4B;CACjE,IAAM,EACJ,UACA,SACA,iBACA,eAAY,OACZ,aACA,aACA,iBACE,GACE,IACJ,kBAAC,GAAD;EACa;EACX,MAAK;EAEC;EACC;EACG;EACV,IAAI;GACF,GAAG;GACH,GAAI,IAAW,EAAE,UAAU,OAAO,EAAe,WAAW,IAAI,CAAC;EACnE;CACD,CAAA;CAEH,OAAO,IACL,kBAAC,GAAD;EAAS,OAAO;EAAyB;YACtC;CACM,CAAA,IAET;AAEJ"}

package/dist/components/widgets/facet-nav/PlotsContainer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlotsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAC1D,OAAsB,EAEpB,QAAQ,EACT,MAAM,4BAA4B,CAAA;AAMnC,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAC5C,gCAAgC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAC5D,CAAA;AACD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;CACf,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;~~AA+SD~~,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAO5E"}
1	+ {"version":3,"file":"PlotsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAO/C,OAAgC,EAC9B,4BAA4B,EAC7B,MAAM,mDAAmD,CAAA;AAC1D,OAAsB,EAEpB,QAAQ,EACT,MAAM,4BAA4B,CAAA;AAMnC,MAAM,MAAM,mBAAmB,GAAG;IAChC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,WAAW,CAAC,EAAE,4BAA4B,EAAE,CAAA;IAC5C,gCAAgC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAC5D,CAAA;AACD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,IAAI,CAAA;CACf,CAAA;AACD,MAAM,MAAM,cAAc,GAAG,qBAAqB,GAAG,oBAAoB,CAAA;AAEzE,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAgUD,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,KAAK,EAAE,mBAAmB,2CAO5E"}

package/dist/components/widgets/facet-nav/PlotsContainer.js CHANGED Viewed

@@ -47,7 +47,13 @@ function O(e) {
 			...t,
 			isHidden: n >= _
 		}));
-	}, F = (e) => A.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, I = u(() => A.find((e) => e.isHidden === !0) ? "MORE" : A.length <= _ ? "NONE" : "LESS", [A]), L = (e) => {
+	}, F = (e) => A.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, I = u(() => A.find((e) => e.isHidden === !0) ? "MORE" : A.length <= _ ? "NONE" : "LESS", [A]);
+	l(() => {
+		I === "LESS" && requestAnimationFrame(() => {
+			window.dispatchEvent(new Event("resize"));
+		});
+	}, [I]);
+	let L = (e) => {
 		z(e, "isHidden", !0);
 	}, R = (e, t) => {
 		z(e, "plotType", t);
@@ -71,7 +77,7 @@ function O(e) {
 			children: A.map((e) => {
 				let t = "__custom" in e.plotId, n = c.find((t) => v(S(t), e.plotId)), i = M.find((t) => v(t.facetToPlot, e.plotId));
 				return /* @__PURE__ */ g("div", {
-					className: e.plotType === "BAR" ? "PlotsContainer__row__item--full-width" : void 0,
+					className: [t ? "PlotsContainer__row__item--custom" : void 0, t && n?.fullWidth ? "PlotsContainer__row__item--full-width" : void 0].filter(Boolean).join(" ") || void 0,
 					style: {
 						minWidth: "435px",
 						display: F(e.plotId) ? "none" : "block"

package/dist/components/widgets/facet-nav/PlotsContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n FacetNavPanelProps,\n PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' \| 'LESS' \| 'NONE'\nexport type PlotsContainerProps = {\n facetsToPlot?: string[]\n customPlots?: QueryWrapperSynapsePlotProps[]\n initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n}\ntype CustomPlotIdentifier = {\n title: string\n __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier \| CustomPlotIdentifier\n\nexport type UiPlotState = {\n plotId: PlotIdentifier\n isHidden: boolean\n plotType: PlotType\n index?: number\n}\nconst plotMatchesDefinition = (\n definition: PlotIdentifier,\n plotId: PlotIdentifier,\n) => {\n if ('__custom' in plotId && '__custom' in definition) {\n return definition.title == plotId.title\n } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n return facetObjectMatchesDefinition(definition, plotId)\n } else {\n return false\n }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n plotlyPlotType: PlotlyPlotType,\n): PlotType {\n if (plotlyPlotType === 'bar') {\n return 'BAR'\n } else if (plotlyPlotType === 'pie') {\n return 'PIE'\n }\n return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n if ('__custom' in plotUiState.plotId) {\n // For custom plots\n return `custom-${plotUiState.plotId.title}`\n } else {\n // For facet plots\n return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n }\n}\n\nconst isPlotInState = (\n plotId: PlotIdentifier,\n plotUiStateArray: UiPlotState[],\n): boolean => {\n return !!plotUiStateArray.find(plot => {\n return plotMatchesDefinition(plot.plotId, plotId)\n })\n}\n\nconst getCustomPlotIdentifier = (\n customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n customPlots: QueryWrapperSynapsePlotProps[] = [],\n facetNavPanelPropsArray: Pick<\n FacetNavPanelProps,\n 'applyChangesToFacetFilter' \| 'applyChangesToGraphSlice' \| 'facetToPlot'\n >[] = [],\n initialPlotTypeByFacetColumnName?: Record<string, PlotType>,\n): UiPlotState[] => [\n ...customPlots.map((plotProps, index) => ({\n plotId: getCustomPlotIdentifier(plotProps),\n isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n })),\n ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n plotId: facetPlotProps.facetToPlot,\n isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n plotType:\n initialPlotTypeByFacetColumnName?.[\n facetPlotProps.facetToPlot.columnName\n ] ?? DEFAULT_PLOT_TYPE,\n })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n prevPlot: UiPlotState,\n customPlots: QueryWrapperSynapsePlotProps[],\n facetNavPanelProps: Pick<\n FacetNavPanelProps,\n 'applyChangesToFacetFilter' \| 'applyChangesToGraphSlice' \| 'facetToPlot'\n >[],\n): boolean => {\n return (\n customPlots.some(customPlot =>\n plotMatchesDefinition(\n getCustomPlotIdentifier(customPlot),\n prevPlot.plotId,\n ),\n ) \|\|\n facetNavPanelProps.some(facetPlot =>\n plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n )\n )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n const {\n facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n customPlots = DEFAULT_CUSTOM_PLOTS,\n initialPlotTypeByFacetColumnName,\n } = props\n const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n const getPlotType = (plotId: PlotIdentifier): PlotType => {\n const plotType = plotUiStateArray.find(item =>\n plotMatchesDefinition(plotId, item.plotId),\n )?.plotType\n return plotType ?? DEFAULT_PLOT_TYPE\n }\n\n useEffect(() => {\n const combinedNewPlots = getCombinedNewPlots(\n customPlots,\n facetNavPanelPropsArray,\n initialPlotTypeByFacetColumnName,\n )\n\n // Update the state with new plots\n setPlotUiStateArray(prevPlots => {\n // Filter to only include new plots\n const newPlots = combinedNewPlots.filter(plot => {\n const inState = isPlotInState(plot.plotId, prevPlots)\n return !inState\n })\n\n const updatedPlots = prevPlots.filter(prevPlot =>\n isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n )\n\n // Append new plots\n const combinedPlots = [...updatedPlots, ...newPlots]\n return combinedPlots\n })\n }, [customPlots, facetNavPanelPropsArray, initialPlotTypeByFacetColumnName])\n\n // when 'show more/less' is clicked\n const onShowMoreClick = (shouldShowMore: boolean) => {\n setPlotUiStateArray(plotUiStateArray => {\n return plotUiStateArray.map((item, index) => {\n if (shouldShowMore) {\n // show everything\n return { ...item, isHidden: false }\n }\n // otherwise hide everything except the first few items\n return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n })\n })\n }\n\n const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n const itemHidden = plotUiStateArray.find(\n item =>\n plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n )\n const result = itemHidden !== undefined\n return result\n }\n\n const showMoreButtonState = useMemo<ShowMoreState>(() => {\n if (\n // if at least one item is hidden\n plotUiStateArray.find(item => item.isHidden === true)\n ) {\n return 'MORE'\n } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n return 'NONE'\n } else {\n return 'LESS'\n }\n }, [plotUiStateArray])\n\n // hides plot graph\n const hidePlotInGrid = (plotId: PlotIdentifier) => {\n setUiPropertyForPlot(plotId, 'isHidden', true)\n }\n\n const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n setUiPropertyForPlot(plotId, 'plotType', plotType)\n }\n\n const setUiPropertyForPlot = (\n plotId: PlotIdentifier,\n propName: keyof UiPlotState,\n value: boolean \| PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n ) => {\n setPlotUiStateArray(plotUiStateArray =>\n plotUiStateArray.map(item =>\n plotMatchesDefinition(plotId, item.plotId)\n ? { ...item, [propName]: value }\n : item,\n ),\n )\n }\n\n const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n // TODO: customPlots should use the color index\n // additionally, it is unclear why this object is created\n // We can probably just pass the index from `plotUiStateArray.map)\n getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n return {\n facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n colorIndex: index,\n }\n })\n\n return (\n <>\n {plotUiStateArray.length > 0 && (\n <div\n className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n showMoreButtonState === 'LESS' ? 'less' : ''\n }`}\n >\n <div className=\"PlotsContainer__row\" role=\"list\">\n {plotUiStateArray.map(plotUiState => {\n const isCustomPlot = '__custom' in plotUiState.plotId\n const customPlotProps = customPlots.find(customPlot =>\n plotMatchesDefinition(\n getCustomPlotIdentifier(customPlot),\n plotUiState.plotId,\n ),\n )\n const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n )\n\n return (\n <div\n className={\n plotUiState.plotType === 'BAR'\n ? 'PlotsContainer__row__item--full-width'\n : undefined\n }\n style={{\n minWidth: '435px',\n display: isPlotHiddenInGrid(plotUiState.plotId)\n ? 'none'\n : 'block',\n }}\n key={generatePlotKey(plotUiState)}\n >\n {isCustomPlot && customPlotProps && (\n <QueryWrapperSynapsePlot\n {...customPlotProps}\n onHide={() => hidePlotInGrid(plotUiState.plotId)}\n />\n )}\n {!isCustomPlot && facetNavPanelProps && (\n <FacetNavPanel\n index={\n colorTracker.find(el =>\n plotMatchesDefinition(el.facet, plotUiState.plotId),\n )?.colorIndex!\n }\n onHide={() => hidePlotInGrid(plotUiState.plotId)}\n plotType={getPlotType(plotUiState.plotId)}\n onSetPlotType={(plotType: PlotType) =>\n setPlotType(plotUiState.plotId, plotType)\n }\n isModalView={false}\n {...facetNavPanelProps}\n />\n )}\n </div>\n )\n })}\n </div>\n {showMoreButtonState !== 'NONE' && (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n backgroundColor: 'grey.100',\n p: 2,\n mt: 2,\n }}\n >\n <Button\n variant=\"contained\"\n color=\"secondary\"\n onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n sx={{ width: '150px' }}\n >\n {showMoreButtonState === 'LESS'\n ? 'Hide Charts'\n : 'View All Charts'}\n </Button>\n </Box>\n )}\n </div>\n )}\n </>\n )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n const { showPlots } = useQueryVisualizationContext()\n return (\n <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n <PlotsContainer {...props} />\n </Suspense>\n )\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n FacetNavPanelProps,\n PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' \| 'LESS' \| 'NONE'\nexport type PlotsContainerProps = {\n facetsToPlot?: string[]\n customPlots?: QueryWrapperSynapsePlotProps[]\n initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n}\ntype CustomPlotIdentifier = {\n title: string\n __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier \| CustomPlotIdentifier\n\nexport type UiPlotState = {\n plotId: PlotIdentifier\n isHidden: boolean\n plotType: PlotType\n index?: number\n}\nconst plotMatchesDefinition = (\n definition: PlotIdentifier,\n plotId: PlotIdentifier,\n) => {\n if ('__custom' in plotId && '__custom' in definition) {\n return definition.title == plotId.title\n } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n return facetObjectMatchesDefinition(definition, plotId)\n } else {\n return false\n }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n plotlyPlotType: PlotlyPlotType,\n): PlotType {\n if (plotlyPlotType === 'bar') {\n return 'BAR'\n } else if (plotlyPlotType === 'pie') {\n return 'PIE'\n }\n return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n if ('__custom' in plotUiState.plotId) {\n // For custom plots\n return `custom-${plotUiState.plotId.title}`\n } else {\n // For facet plots\n return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n }\n}\n\nconst isPlotInState = (\n plotId: PlotIdentifier,\n plotUiStateArray: UiPlotState[],\n): boolean => {\n return !!plotUiStateArray.find(plot => {\n return plotMatchesDefinition(plot.plotId, plotId)\n })\n}\n\nconst getCustomPlotIdentifier = (\n customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n customPlots: QueryWrapperSynapsePlotProps[] = [],\n facetNavPanelPropsArray: Pick<\n FacetNavPanelProps,\n 'applyChangesToFacetFilter' \| 'applyChangesToGraphSlice' \| 'facetToPlot'\n >[] = [],\n initialPlotTypeByFacetColumnName?: Record<string, PlotType>,\n): UiPlotState[] => [\n ...customPlots.map((plotProps, index) => ({\n plotId: getCustomPlotIdentifier(plotProps),\n isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n })),\n ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n plotId: facetPlotProps.facetToPlot,\n isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n plotType:\n initialPlotTypeByFacetColumnName?.[\n facetPlotProps.facetToPlot.columnName\n ] ?? DEFAULT_PLOT_TYPE,\n })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n prevPlot: UiPlotState,\n customPlots: QueryWrapperSynapsePlotProps[],\n facetNavPanelProps: Pick<\n FacetNavPanelProps,\n 'applyChangesToFacetFilter' \| 'applyChangesToGraphSlice' \| 'facetToPlot'\n >[],\n): boolean => {\n return (\n customPlots.some(customPlot =>\n plotMatchesDefinition(\n getCustomPlotIdentifier(customPlot),\n prevPlot.plotId,\n ),\n ) \|\|\n facetNavPanelProps.some(facetPlot =>\n plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n )\n )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n const {\n facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n customPlots = DEFAULT_CUSTOM_PLOTS,\n initialPlotTypeByFacetColumnName,\n } = props\n const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n const getPlotType = (plotId: PlotIdentifier): PlotType => {\n const plotType = plotUiStateArray.find(item =>\n plotMatchesDefinition(plotId, item.plotId),\n )?.plotType\n return plotType ?? DEFAULT_PLOT_TYPE\n }\n\n useEffect(() => {\n const combinedNewPlots = getCombinedNewPlots(\n customPlots,\n facetNavPanelPropsArray,\n initialPlotTypeByFacetColumnName,\n )\n\n // Update the state with new plots\n setPlotUiStateArray(prevPlots => {\n // Filter to only include new plots\n const newPlots = combinedNewPlots.filter(plot => {\n const inState = isPlotInState(plot.plotId, prevPlots)\n return !inState\n })\n\n const updatedPlots = prevPlots.filter(prevPlot =>\n isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n )\n\n // Append new plots\n const combinedPlots = [...updatedPlots, ...newPlots]\n return combinedPlots\n })\n }, [customPlots, facetNavPanelPropsArray, initialPlotTypeByFacetColumnName])\n\n // when 'show more/less' is clicked\n const onShowMoreClick = (shouldShowMore: boolean) => {\n setPlotUiStateArray(plotUiStateArray => {\n return plotUiStateArray.map((item, index) => {\n if (shouldShowMore) {\n // show everything\n return { ...item, isHidden: false }\n }\n // otherwise hide everything except the first few items\n return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n })\n })\n }\n\n const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n const itemHidden = plotUiStateArray.find(\n item =>\n plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n )\n const result = itemHidden !== undefined\n return result\n }\n\n const showMoreButtonState = useMemo<ShowMoreState>(() => {\n if (\n // if at least one item is hidden\n plotUiStateArray.find(item => item.isHidden === true)\n ) {\n return 'MORE'\n } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n return 'NONE'\n } else {\n return 'LESS'\n }\n }, [plotUiStateArray])\n\n // When all charts become visible (transition to 'LESS'), trigger a resize event so\n // Plotly recalculates dimensions for charts that were previously hidden (display: none).\n useEffect(() => {\n if (showMoreButtonState === 'LESS') {\n requestAnimationFrame(() => {\n window.dispatchEvent(new Event('resize'))\n })\n }\n }, [showMoreButtonState])\n\n // hides plot graph\n const hidePlotInGrid = (plotId: PlotIdentifier) => {\n setUiPropertyForPlot(plotId, 'isHidden', true)\n }\n\n const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n setUiPropertyForPlot(plotId, 'plotType', plotType)\n }\n\n const setUiPropertyForPlot = (\n plotId: PlotIdentifier,\n propName: keyof UiPlotState,\n value: boolean \| PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n ) => {\n setPlotUiStateArray(plotUiStateArray =>\n plotUiStateArray.map(item =>\n plotMatchesDefinition(plotId, item.plotId)\n ? { ...item, [propName]: value }\n : item,\n ),\n )\n }\n\n const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n // TODO: customPlots should use the color index\n // additionally, it is unclear why this object is created\n // We can probably just pass the index from `plotUiStateArray.map)\n getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n return {\n facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n colorIndex: index,\n }\n })\n\n return (\n <>\n {plotUiStateArray.length > 0 && (\n <div\n className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n showMoreButtonState === 'LESS' ? 'less' : ''\n }`}\n >\n <div className=\"PlotsContainer__row\" role=\"list\">\n {plotUiStateArray.map(plotUiState => {\n const isCustomPlot = '__custom' in plotUiState.plotId\n const customPlotProps = customPlots.find(customPlot =>\n plotMatchesDefinition(\n getCustomPlotIdentifier(customPlot),\n plotUiState.plotId,\n ),\n )\n const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n )\n\n return (\n <div\n className={\n [\n isCustomPlot\n ? 'PlotsContainer__row__item--custom'\n : undefined,\n isCustomPlot && customPlotProps?.fullWidth\n ? 'PlotsContainer__row__item--full-width'\n : undefined,\n ]\n .filter(Boolean)\n .join(' ') \|\| undefined\n }\n style={{\n minWidth: '435px',\n display: isPlotHiddenInGrid(plotUiState.plotId)\n ? 'none'\n : 'block',\n }}\n key={generatePlotKey(plotUiState)}\n >\n {isCustomPlot && customPlotProps && (\n <QueryWrapperSynapsePlot\n {...customPlotProps}\n onHide={() => hidePlotInGrid(plotUiState.plotId)}\n />\n )}\n {!isCustomPlot && facetNavPanelProps && (\n <FacetNavPanel\n index={\n colorTracker.find(el =>\n plotMatchesDefinition(el.facet, plotUiState.plotId),\n )?.colorIndex!\n }\n onHide={() => hidePlotInGrid(plotUiState.plotId)}\n plotType={getPlotType(plotUiState.plotId)}\n onSetPlotType={(plotType: PlotType) =>\n setPlotType(plotUiState.plotId, plotType)\n }\n isModalView={false}\n {...facetNavPanelProps}\n />\n )}\n </div>\n )\n })}\n </div>\n {showMoreButtonState !== 'NONE' && (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n backgroundColor: 'grey.100',\n p: 2,\n mt: 2,\n }}\n >\n <Button\n variant=\"contained\"\n color=\"secondary\"\n onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n sx={{ width: '150px' }}\n >\n {showMoreButtonState === 'LESS'\n ? 'Hide Charts'\n : 'View All Charts'}\n </Button>\n </Box>\n )}\n </div>\n )}\n </>\n )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n const { showPlots } = useQueryVisualizationContext()\n return (\n <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n <PlotsContainer {...props} />\n </Suspense>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,IAAwB,GAmBxB,KACJ,GACA,MAEI,cAAc,KAAU,cAAc,IACjC,EAAW,SAAS,EAAO,QACzB,EAAE,cAAc,MAAW,EAAE,cAAc,KAC7C,EAA6B,GAAY,CAAM,IAE/C;AAIX,SAAS,EACP,GACU;CAMV,OALI,MAAmB,QACd,QAEA;AAGX;AAEA,IAAM,KAAmB,MACnB,cAAc,EAAY,SAErB,UAAU,EAAY,OAAO,UAG7B,SAAS,EAAY,OAAO,WAAW,GAAG,EAAY,OAAO,YAIlE,KACJ,GACA,MAEO,CAAC,CAAC,EAAiB,MAAK,MACtB,EAAsB,EAAK,QAAQ,CAAM,CACjD,GAGG,KACJ,OAEO;CAAE,UAAU;CAAM,OAAO,EAAW,SAAS;AAAG,IAGnD,KACJ,IAA8C,CAAC,GAC/C,IAGM,CAAC,GACP,MACkB,CAClB,GAAG,EAAY,KAAK,GAAW,OAAW;CACxC,QAAQ,EAAwB,CAAS;CACzC,UAAU,KAAS;CACnB,UAAU,EAAwC,EAAU,IAAI;AAClE,EAAE,GACF,GAAG,EAAwB,KAAK,GAAgB,OAAW;CACzD,QAAQ,EAAe;CACvB,UAAU,IAAQ,EAAY,UAAU;CACxC,UACE,IACE,EAAe,YAAY,eACxB;AACT,EAAE,CACJ,GAGM,KACJ,GACA,GACA,MAME,EAAY,MAAK,MACf,EACE,EAAwB,CAAU,GAClC,EAAS,MACX,CACF,KACA,EAAmB,MAAK,MACtB,EAAsB,EAAU,aAAa,EAAS,MAAM,CAC9D,GAIE,IAA8B,OAE9B,IAAmC,CAAC,GACpC,IAAuD,CAAC;AAE9D,SAAS,EAAe,GAA4B;CAClD,IAAM,EACJ,kBAAe,GACf,iBAAc,GACd,wCACE,GACE,EAAE,MAAM,MAAkB,EAA4B,GACtD,EAAE,WAAW,MAA0B,EAA6B,GACpE,CAAC,GAAkB,KAAuB,EAAwB,CAAC,CAAC,GACpE,IAA0B,EAAc,CAAY,GAEpD,KAAe,MACF,EAAiB,MAAK,MACrC,EAAsB,GAAQ,EAAK,MAAM,CAC3C,GAAG,YACgB;CAGrB,QAAgB;EACd,IAAM,IAAmB,EACvB,GACA,GACA,CACF;EAGA,GAAoB,MAAa;GAE/B,IAAM,IAAW,EAAiB,QAAO,MAEhC,CADS,EAAc,EAAK,QAAQ,CACnC,CACT;GAQD,OAAO,CADgB,GALF,EAAU,QAAO,MACpC,EAAmB,GAAU,GAAa,CAAuB,CAIzC,GAAc,GAAG,CACpC;EACT,CAAC;CACH,GAAG;EAAC;EAAa;EAAyB;CAAgC,CAAC;CAG3E,IAAM,KAAmB,MAA4B;EACnD,GAAoB,MACX,EAAiB,KAAK,GAAM,MAC7B,IAEK;GAAE,GAAG;GAAM,UAAU;EAAM,IAG7B;GAAE,GAAG;GAAM,UAAU,KAAS;EAAsB,CAC5D,CACF;CACH,GAEM,KAAsB,MACP,EAAiB,MAClC,MACE,EAAsB,GAAQ,EAAK,MAAM,KAAK,EAAK,aAAa,EAErD,MAAe,KAAA,GAI1B,IAAsB,QAGxB,EAAiB,MAAK,MAAQ,EAAK,aAAa,EAAI,IAE7C,SACE,EAAiB,UAAU,IAC7B,SAEA,QAER,CAAC,CAAgB,CAAC;CAIrB,QAAgB;EACd,AAAI,MAAwB,UAC1B,4BAA4B;GAC1B,OAAO,cAAc,IAAI,MAAM,QAAQ,CAAC;EAC1C,CAAC;CAEL,GAAG,CAAC,CAAmB,CAAC;CAGxB,IAAM,KAAkB,MAA2B;EACjD,EAAqB,GAAQ,YAAY,EAAI;CAC/C,GAEM,KAAe,GAAwB,MAAuB;EAClE,EAAqB,GAAQ,YAAY,CAAQ;CACnD,GAEM,KACJ,GACA,GACA,MACG;EACH,GAAoB,MAClB,EAAiB,KAAI,MACnB,EAAsB,GAAQ,EAAK,MAAM,IACrC;GAAE,GAAG;IAAO,IAAW;EAAM,IAC7B,CACN,CACF;CACF,GAEM,IAIJ,EAAU,GAAe,CAAY,EAAE,KAAK,GAAI,OACvC;EACL,OAAO;GAAE,YAAY,EAAG;GAAY,UAAU,EAAG;EAAS;EAC1D,YAAY;CACd,EACD;CAEH,OACE,kBAAA,GAAA,EAAA,UACG,EAAiB,SAAS,KACzB,kBAAC,OAAD;EACE,WAAW,kBAAkB,IAAwB,KAAK,SAAS,GACjE,MAAwB,SAAS,SAAS;YAF9C,CAKE,kBAAC,OAAD;GAAK,WAAU;GAAsB,MAAK;aACvC,EAAiB,KAAI,MAAe;IACnC,IAAM,IAAe,cAAc,EAAY,QACzC,IAAkB,EAAY,MAAK,MACvC,EACE,EAAwB,CAAU,GAClC,EAAY,MACd,CACF,GACM,IAAqB,EAAwB,MAAK,MACtD,EAAsB,EAAM,aAAa,EAAY,MAAM,CAC7D;IAEA,OACE,kBAAC,OAAD;KACE,WACE,CACE,IACI,sCACA,KAAA,GACJ,KAAgB,GAAiB,YAC7B,0CACA,KAAA,CACN,EACG,OAAO,OAAO,EACd,KAAK,GAAG,KAAK,KAAA;KAElB,OAAO;MACL,UAAU;MACV,SAAS,EAAmB,EAAY,MAAM,IAC1C,SACA;KACN;eAlBF,CAqBG,KAAgB,KACf,kBAAC,GAAD;MACE,GAAI;MACJ,cAAc,EAAe,EAAY,MAAM;KAChD,CAAA,GAEF,CAAC,KAAgB,KAChB,kBAAC,GAAD;MACE,OACE,EAAa,MAAK,MAChB,EAAsB,EAAG,OAAO,EAAY,MAAM,CACpD,GAAG;MAEL,cAAc,EAAe,EAAY,MAAM;MAC/C,UAAU,EAAY,EAAY,MAAM;MACxC,gBAAgB,MACd,EAAY,EAAY,QAAQ,CAAQ;MAE1C,aAAa;MACb,GAAI;KACL,CAAA,CAEA;OAxBE,EAAgB,CAAW,CAwB7B;GAET,CAAC;EACE,CAAA,GACJ,MAAwB,UACvB,kBAAC,GAAD;GACE,IAAI;IACF,SAAS;IACT,gBAAgB;IAChB,iBAAiB;IACjB,GAAG;IACH,IAAI;GACN;aAEA,kBAAC,GAAD;IACE,SAAQ;IACR,OAAM;IACN,eAAe,EAAgB,MAAwB,MAAM;IAC7D,IAAI,EAAE,OAAO,QAAQ;cAEpB,MAAwB,SACrB,gBACA;GACE,CAAA;EACL,CAAA,CAEJ;IAEP,CAAA;AAEN;AAEA,SAAwB,EAA2B,GAA4B;CAC7E,IAAM,EAAE,iBAAc,EAA6B;CACnD,OACE,kBAAC,GAAD;EAAU,UAAU,IAAY,kBAAC,GAAD,CAAyB,CAAA,IAAI;YAC3D,kBAAC,GAAD,EAAgB,GAAI,EAAQ,CAAA;CACpB,CAAA;AAEd"}

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

@@ -1,15 +1,20 @@
+import { ReactNode } from 'react';
 export type SelectionCriteriaPillProps = {
     readonly key: string;
-    readonly innerText: string;
-    readonly tooltipText: string;
+    /** The chip label (plain text, or structured content from `renderFacetValue`). */
+    readonly label: ReactNode;
+    readonly tooltipText?: ReactNode;
+    /** Optional leading icon (e.g. for a DUO term). */
+    readonly icon?: ReactNode;
     readonly onRemoveFilter?: () => void;
     /** When true, the pill is shown without a remove button */
     readonly isLocked?: boolean;
 };
 /**
- * Renders a pill or chicklet to represent a Synapse Table Query filter/selection criterion.
- * @param props
- * @constructor
+ * Renders a pill/chicklet representing a Synapse Table Query filter/selection
+ * criterion. Delegates to the shared `FacetValueChip` so the chip, icon,
+ * tooltip, and remove affordance are styled identically wherever facet values
+ * appear.
  */
 declare function SelectionCriteriaPill(props: SelectionCriteriaPillProps): import("react/jsx-runtime").JSX.Element;
 export default SelectionCriteriaPill;

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

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

	@@ -1 +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"}
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;AAkMD,iBAAS,sBAAsB,4CAoC9B;AAED,eAAe,sBAAsB,CAAA"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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":";;;;;;;;;;;;;;AA+BA,IAAM,IAA4C;AAElD,SAAS,EACP,GAGA,GACA,GACA,GAC8B;CAC9B,IAAM,EAAE,4BAAyB;CAGjC,IACE,EAAY,OAAO,SAAS,KAC5B,CAAC,GACD;EACA,IAAM,IAAO,GAAG,EACd,EAAqB,EAAY,UAAU,CAC7C,EAAE,IAAI,EAAY,OAAO,OAAO,eAAe,EAAE;EAEjD,OAAO,CACL;GACE,KAAK,eAAe,EAAY,aAAa,GAAG,EAAY;GAC5D,OAAO;GACP,aAAa;GACb,sBAAsB;IACpB,EAAa,kBAAkB,CAAW;GAC5C;EACF,CACF;CACF;CAGA,OAAO,EAAY,OAAO,KAAI,MAAS;EACrC,IAAI,IAAc;EAMlB,AAJI,GAAO,WAAW,GAAG,KAAK,GAAO,SAAS,GAAG,MAE/C,IAAc,EAAY,UAAU,GAAG,EAAY,SAAS,CAAC,IAE/D,IAAc,EAA0B,gBACtC,GACA,EAAY,UACd;EACA,IAAM,IAAO,GAAG,EACd,EAAY,UACd,EAAE,IAAI;EACN,OAAO;GACL,KAAK,eAAe,EAAY,aAAa,GAAG,EAAY,WAAW,GAAG;GAC1E,OAAO;GACP,aAAa;GACb,sBAAsB;IACpB,EAAa,2BAA2B,GAAa,CAAK;GAC5D;EACF;CACF,CAAC;AACH;AAEA,SAAgB,EACd,GACA,GACA,GAC4B;CAC5B,IAAI,IAAY,EAAY;CAO5B,OANI,EAAY,cAAc,cAC5B,IAAY,EACV,EAAY,gBACd,IAGK;EACL,KAAK,eAAe,EAAY,aAAa,GAAG,EAAY;EAC5D,OAAO;EACP,aAAa,kBAAkB,EAAU;EACzC,GAAI,IACA,EAAE,UAAU,GAAK,IACjB,EACE,sBAAsB;GACpB,EAAa,kBAAkB,CAAW;EAC5C,EACF;CACN;AACF;AAEA,SAAS,EACP,GACA,GACA,GACA,GACA,GACA,GAC8B;CAC9B,OAAO,EAAa,SAAQ,MAAe;EACzC,IACE,EAA+B,CAAW,KAC1C,EAAsC,CAAW,GACjD;GACA,IAAM,IAAc,EAAa,MAC/B,MAAM,EAAG,SAAS,EAAY,UAChC;GAOA,OALE,EAAY,WAAW,YAAY,MACnC,GAAc,YAAY,YAAY,IAE/B,CAAC,IAEH,EACL,GACA,GACA,GACA,CACF;EACF,OAAO,IAAI,EAAyB,CAAW,GAC7C,OAAO,CACL,EACE,GACA,GACA,CACF,CACF;OAGA,OADA,QAAQ,IAAI,6BAA6B,CAAW,GAC7C,CAAC;CAEZ,CAAC;AACH;AAEA,SAAS,EAAuB,GAAc,GAAc;CAUxD,OATE,KAAO,QAAa,KAAO,OACtB,cACE,KAAO,OACT,SAAS,MACP,KAAO,OACT,GAAG,EAAI,eACL,MAAA,+CAAyB,MAAA,8CAC3B,IAEA,GAAG,EAAI,KAAK;AAEvB;AAEA,SAAS,EACP,GACA,GACA,GACA,GACA,GAC8B;CAC9B,OAAO,EAAe,SACnB,MAAgD;EAC/C,IACE,EAAc,WAAW,YAAY,MACrC,GAAc,YAAY,YAAY,GAEtC,OAAO,CAAC;EAEV,IAAM,IAAc,EAAa,MAC/B,MAAM,EAAG,SAAS,EAAc,UAClC,GACM,EAAE,yBAAsB,oBAAiB,wBAC7C;EACF,IAAI,EAA2B,CAAa,GAAG;GAE7C,IACE,EAAc,YAAY,SACxB,KACF,CAAC,GACD;IACA,IAAM,IAAO,GAAG,EACd,EACE,EAAc,YACd,EAAc,QAChB,CACF,EAAE,IAAI,EAAc,YAAY,OAAO,eAAe,EAAE;IACxD,OAAO,CACL;KACE,KAAK,SAAS,EAAc,aAAa,GAAG,EAAc;KAC1D,OAAO;KACP,aAAa;KACb,sBAAsB;MACpB,EAAa,oBAAoB,CAAa;KAChD;IACF,CACF;GACF;GAIA,OAAO,EAAc,YAAY,KAAI,MAAc;IACjD,IAAM,IAAY,EAAgB,GAAY,EAAY,UAAU,GAG9D,IAAW,IACf,EAAc,YACd,CACF;IACA,OAAO;KACL,KAAK,SAAS,EAAc,aAAa,GAAG,EAAc,WAAW,GAAG;KACxE,OAAO,IAAW,EAAS,QAAQ;KACnC,MAAM,GAAU;KAChB,aAAa,IACT,EAAS,eACT,GAAG,EACD,EAAc,YACd,EAAc,QAChB,EAAE,IAAI;KACV,sBAAsB;MACpB,EAAa,6BACX,GACA,CACF;KACF;IACF;GACF,CAAC;EACH,OAAO,IAAI,EAA0B,CAAa,GAAG;GAEnD,IAAM,EAAE,+BAA4B;GACpC,IACE,MACC,EAAc,cAAc,EAAwB,kBACnD,EAAc,cAAc,EAAwB,iBAEtD;QACE,EAAc,cAAc,EAAwB,gBAEpD,OAAO,CAAC;IACH;KAEL,IAAM,IAAW,GACX,IAAW,EAAe,MAC9B,MAAK,EAAE,cAAc,EAAwB,cAC/C,GACM,IAAY,EAAuB,EAAS,KAAK,EAAS,GAAG;KACnE,OAAO,CACL;MACE,KAAK,SAAS,EAAc,aAAa,GAAG,EAAc,WAAW,GAAG;MACxE,OAAO;MACP,aAAa,GAAG,EAAwB,MAAM,IAAI;MAClD,sBAAsB;OAEpB,EAAa,oBAAoB,CAAC,GAAU,CAAQ,CAAC;MACvD;KACF,CACF;IACF;;GAGF,IAAM,IAAY,EAChB,EAAc,KACd,EAAc,GAChB;GAEA,OAAO,CACL;IACE,KAAK,SAAS,EAAc,aAAa,GAAG,EAAc,WAAW,GAAG,EAAc,IAAI,GAAG,EAAc;IAC3G,OAAO;IACP,aAAa,GAAG,EACd,EAAc,YACd,EAAc,QAChB,EAAE,IAAI;IACN,sBAAsB;KACpB,EAAa,oBAAoB,CAAa;IAChD;GACF,CACF;EACF,OAKE,OAJA,QAAQ,IACN,sBACC,EAAgD,YACnD,GACO,CAAC;CAEZ,CACF;AACF;AAEA,SAAS,IAAyB;CAChC,IAAM,IAAe,EAAgB,GAC/B,IAAe,EAAa,cAC5B,IAA4B,EAA6B,GACzD,EAAE,sCAAmC,GACrC,EAAE,2BAAwB,GAC1B,EAAE,MAAM,MAAkB,EAAoB,GAE9C,IAAuB,EAC3B,EAAoB,OAAO,qBAAqB,CAAC,GACjD,GACA,GAAe,gBAAgB,CAAC,GAChC,GACA,GACA,CACF,GAEM,IAAiB,EACrB,EAAoB,MAAM,kBAAkB,CAAC,GAC7C,GACA,GAAe,gBAAgB,CAAC,GAChC,GACA,CACF;CAIA,OACE,kBAAA,GAAA,EAAA,UACG,CAJa,GAAG,GAAsB,GAAG,CAIzC,EAAS,KAAI,MAAa;EAEzB,IAAM,IAAM,mBAAmB,EAAU,GAAG;EAC5C,OAAO,kBAAC,GAAD;GAAuB,GAAI;GAAgB;EAAM,CAAA;CAC1D,CAAC,EACD,CAAA;AAEN"}

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

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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