synapse-react-client 4.0.17 → 4.0.19

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

@@ -1 +1 @@
-{"version":3,"file":"FacetNavPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,iCAAiC,CAAA;AAExC,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAW9C,OAAO,EAAE,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wBAAwB,EAAE,CACxB,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE,2BAA2B,GAAG,SAAS,EAC9C,UAAU,EAAE,OAAO,KAChB,IAAI,CAAA;IACT,yBAAyB,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,uBAAuB,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAKD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,wBAAwB,CAAA;AAgB/D,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAA;IACnB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,uBAAuB,EACpC,UAAU,EAAE,cAAc,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;GA+JrB;AAsBD,wBAAgB,YAAY,CAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA8BnC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAyK/C;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"FacetNavPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,2BAA2B,EAC3B,uBAAuB,EACxB,MAAM,iCAAiC,CAAA;AAExC,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAA;AAW9C,OAAO,EAAE,cAAc,EAAY,MAAM,wBAAwB,CAAA;AAGjE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,wBAAwB,EAAE,CACxB,KAAK,EAAE,uBAAuB,EAC9B,KAAK,EAAE,2BAA2B,GAAG,SAAS,EAC9C,UAAU,EAAE,OAAO,KAChB,IAAI,CAAA;IACT,yBAAyB,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAA;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,uBAAuB,CAAA;IACpC,QAAQ,EAAE,QAAQ,CAAA;IAClB,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAKD,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,wBAAwB,CAAA;AAgB/D,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAA;IACnB,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,MAAM,EAAE,MAAM,EAAE,CAAA;CACjB,CAAA;AAED,wBAAsB,oBAAoB,CACxC,WAAW,EAAE,uBAAuB,EACpC,UAAU,EAAE,cAAc,GAAG,SAAS,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,WAAW,CAAC,EAAE,MAAM;;;;;;;;;GA+JrB;AAsBD,wBAAgB,YAAY,CAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CA8BnC;AAED,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CAgL/C;AAED,eAAe,aAAa,CAAA"}

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

@@ -15,15 +15,15 @@ import { getContrastColorPalette as f } from "../../ColorGradient/ColorGradient.
 import p from "../../Plot/PlotPanelHeader.js";
 import { FacetPlotLegendList as m } from "./FacetPlotLegendList.js";
 import { truncate as h } from "./FacetPlotLegendUtils.js";
-import { useMemo as g, useState as _ } from "react";
-import { Box as v, InputLabel as y, MenuItem as b, Select as x, Stack as S, Tooltip as C } from "@mui/material";
-import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
-import { ColumnTypeEnum as D } from "@sage-bionetworks/synapse-types";
-import { useQuery as O } from "@tanstack/react-query";
-import { InfoOutlined as k } from "@mui/icons-material";
-import { useMeasure as A } from "@react-hookz/web";
+import { useId as g, useMemo as _, useState as v } from "react";
+import { Box as y, InputLabel as b, MenuItem as x, Select as S, Stack as C, Tooltip as w } from "@mui/material";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { ColumnTypeEnum as O } from "@sage-bionetworks/synapse-types";
+import { useQuery as k } from "@tanstack/react-query";
+import { InfoOutlined as A } from "@mui/icons-material";
+import { useMeasure as j } from "@react-hookz/web";
 //#region src/components/widgets/facet-nav/FacetNavPanel.tsx
-var j = 19, M = {
+var M = 19, N = {
 	showlegend: !1,
 	annotations: [],
 	margin: {
@@ -42,15 +42,15 @@ var j = 19, M = {
 		showgrid: !1
 	}
 };
-async function N(r, i, a, o, s) {
+async function P(r, i, a, o, s) {
 	let c = f("odd", 0, r.facetValues.length), l = async (r, i, a) => {
 		let o = /* @__PURE__ */ new Map();
 		o.set(t, e);
 		let s = r.map((e) => e.value).filter((e) => e !== t);
-		if (i === D.ENTITYID || i === D.ENTITYID_LIST) {
+		if (i === O.ENTITYID || i === O.ENTITYID_LIST) {
 			let e = await n.getEntityHeadersByIds(s, a);
 			for (let t of e.results) o.set(t.id, t.name);
-		} else if (i === D.USERID || i === D.USERID_LIST) {
+		} else if (i === O.USERID || i === O.USERID_LIST) {
 			let e = await n.getGroupHeadersBatch(s, a);
 			for (let t of e.children) o.set(t.ownerId, t.userName);
 		}
@@ -62,7 +62,7 @@ async function N(r, i, a, o, s) {
 		}));
 	}, u = (e, t, n) => {
 		let r = n.get(e.value) ?? e.value;
-		return t && (r = h(r, j)), r;
+		return t && (r = h(r, M)), r;
 	}, d = await l(r.facetValues, i, s), p = d.map((e) => e.truncatedLabel), m = r.facetValues.some((e) => e.isSelected), g = m ? r.facetValues.map((e, t) => e.isSelected ? c[t] : c[t].replace("rgb(", "rgba(").replace(")", ", 0.25)")) : c, _ = r.facetValues.map((e) => e.count), v;
 	o === "BAR" ? v = r.facetValues.map((e) => d.find((t) => t.facet === e)?.label ?? e.value) : o === "STACKED_HORIZONTAL_BAR" && (v = _);
 	let y;
@@ -95,13 +95,13 @@ async function N(r, i, a, o, s) {
 		colors: o === "PIE" ? b.marker?.colors : b.marker?.color
 	};
 }
-var P = (e, t, n) => {
+var F = (e, t, n) => {
 	if (e.points && e.points[0]) {
 		let r = e.points[0], i = r.data.facetEnumerationValues[r.pointNumber], a = t.facetValues.find((e) => e.value === i);
 		n(t, a, !a.isSelected);
 	}
 };
-function F(e, t, n) {
+function I(e, t, n) {
 	if (e != null) {
 		let r = 1;
 		switch (t) {
@@ -126,80 +126,87 @@ function F(e, t, n) {
 		height: `${n}px`
 	};
 }
-function I(e) {
-	let { onHide: t, isModalView: n, applyChangesToGraphSlice: f, index: h, facetToPlot: D, plotType: j, onSetPlotType: L } = e, { accessToken: R } = r(), { data: z, isLoading: B } = c(), [V, H] = A(), { getColumnDisplayName: U } = l(), [W, G] = _(!1), K = U(D.columnName, D.jsonPath), q = g(() => a(D, z?.columnModels ?? []), [z?.columnModels, D]), J = q?.columnType, { data: Y } = O({
+function L(e) {
+	let { onHide: t, isModalView: n, applyChangesToGraphSlice: f, index: h, facetToPlot: O, plotType: M, onSetPlotType: R } = e, { accessToken: z } = r(), { data: B, isLoading: V } = c(), [H, U] = j(), { getColumnDisplayName: W } = l(), [G, K] = v(!1), q = W(O.columnName, O.jsonPath), J = _(() => a(O, B?.columnModels ?? []), [B?.columnModels, O]), Y = J?.columnType, { data: X } = k({
 		queryKey: [
 			"extractPlotDataArray",
-			D,
-			J,
+			O,
+			Y,
 			h,
-			j,
-			R
+			M,
+			z
 		],
-		queryFn: () => N(D, J, h, j, R),
-		enabled: !!D
-	}), X = /* @__PURE__ */ E(s, {
+		queryFn: () => P(O, Y, h, M, z),
+		enabled: !!O
+	}), Z = g(), Q = g(), $ = /* @__PURE__ */ D(s, {
 		fullWidth: !0,
-		children: [/* @__PURE__ */ T(y, { children: "Chart Type" }), /* @__PURE__ */ E(x, {
-			value: j,
+		children: [/* @__PURE__ */ E(b, {
+			id: Z,
+			children: "Chart Type"
+		}), /* @__PURE__ */ D(S, {
+			labelId: Z,
+			label: "Chart Type",
+			value: M,
 			onChange: (e) => {
-				L(e.target.value);
+				R(e.target.value);
 			},
-			children: [/* @__PURE__ */ T(b, {
+			children: [/* @__PURE__ */ E(x, {
 				value: "BAR",
 				children: "Bar Chart"
-			}), /* @__PURE__ */ T(b, {
+			}), /* @__PURE__ */ E(x, {
 				value: "PIE",
 				children: "Pie Chart"
 			})]
 		})]
 	});
-	return !z && B || !D || !q ? /* @__PURE__ */ T("div", {
+	return !B && V || !O || !J ? /* @__PURE__ */ E("div", {
 		className: "SRC-loadingContainer SRC-centerContentColumn",
 		children: i
-	}) : /* @__PURE__ */ E(w, { children: [/* @__PURE__ */ T(o, {
-		open: W,
-		onCancel: () => G(!1),
-		title: K ?? "",
-		content: /* @__PURE__ */ T(I, {
+	}) : /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(o, {
+		open: G,
+		onCancel: () => K(!1),
+		title: q ?? "",
+		content: /* @__PURE__ */ E(L, {
 			...e,
 			isModalView: !0
 		}),
 		hasCancelButton: !1,
 		confirmButtonProps: { children: "Apply Filters" },
-		onConfirm: () => G(!1),
+		onConfirm: () => K(!1),
 		maxWidth: "md"
-	}), /* @__PURE__ */ E("div", {
+	}), /* @__PURE__ */ D("div", {
 		role: "figure",
 		className: `FacetNavPanel${n ? "--expanded" : ""}`,
 		children: [
-			!n && /* @__PURE__ */ T(p, {
-				data: z,
-				isLoading: B,
-				title: K,
-				facetToPlot: D,
+			!n && /* @__PURE__ */ E(p, {
+				data: B,
+				isLoading: V,
+				title: q,
+				facetToPlot: O,
 				onHide: t,
-				setShowModal: G
+				setShowModal: K
 			}),
-			n && /* @__PURE__ */ E(S, {
+			n && /* @__PURE__ */ D(C, {
 				sx: { gap: 2 },
-				children: [/* @__PURE__ */ E(s, { children: [/* @__PURE__ */ E(y, {
+				children: [/* @__PURE__ */ D(s, { children: [/* @__PURE__ */ D(b, {
+					id: Q,
 					sx: {
 						display: "flex",
 						alignItems: "center",
 						gap: .5
 					},
-					children: [/* @__PURE__ */ T("span", { children: "Filter All Data By" }), /* @__PURE__ */ T(C, {
+					children: [/* @__PURE__ */ E("span", { children: "Filter All Data By" }), /* @__PURE__ */ E(w, {
 						title: "Selecting items in this dropdown will affect all facets on the Explore page.",
-						children: /* @__PURE__ */ T(k, { className: "SRC-hand-cursor SRC-secondary-text-color" })
+						children: /* @__PURE__ */ E(A, { className: "SRC-hand-cursor SRC-secondary-text-color" })
 					})]
-				}), /* @__PURE__ */ T(u, {
-					facet: D,
+				}), /* @__PURE__ */ E(u, {
+					labelId: Q,
+					facet: O,
 					containerAs: "Dropdown",
 					dropdownType: "SelectBox"
-				})] }), X]
+				})] }), $]
 			}),
-			/* @__PURE__ */ E(v, {
+			/* @__PURE__ */ D(y, {
 				sx: {
 					display: "grid",
 					gridTemplateColumns: "50% 50%",
@@ -207,18 +214,18 @@ function I(e) {
 				},
 				role: "graphics-object",
 				className: "FacetNavPanel__body",
-				children: [/* @__PURE__ */ T("div", {
-					ref: H,
-					children: /* @__PURE__ */ T(d, {
-						layout: M,
-						data: Y?.data ?? [],
-						style: F(V?.width, j, n ? 300 : 150),
+				children: [/* @__PURE__ */ E("div", {
+					ref: U,
+					children: /* @__PURE__ */ E(d, {
+						layout: N,
+						data: X?.data ?? [],
+						style: I(H?.width, M, n ? 300 : 150),
 						config: { displayModeBar: !1 },
-						onClick: (e) => P(e, D, f)
-					}, `${D.columnName}-${D.jsonPath}-${j}-${V?.width}`)
-				}), /* @__PURE__ */ T(m, {
-					labels: Y?.labels,
-					colors: Y?.colors,
+						onClick: (e) => F(e, O, f)
+					}, `${O.columnName}-${O.jsonPath}-${M}-${H?.width}`)
+				}), /* @__PURE__ */ E(m, {
+					labels: X?.labels,
+					colors: X?.colors,
 					isExpanded: n
 				})]
 			})
@@ -226,6 +233,6 @@ function I(e) {
 	})] });
 }
 //#endregion
-export { I as default, N as extractPlotDataArray, F as getPlotStyle };
+export { L as default, P as extractPlotDataArray, I as getPlotStyle };
 
 //# sourceMappingURL=FacetNavPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FacetNavPanel.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport { InfoOutlined } from '@mui/icons-material'\nimport {\n  Box,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  Tooltip,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useQuery } from '@tanstack/react-query'\nimport type Plotly from 'plotly.js-basic-dist'\nimport { useMemo, useState } from 'react'\nimport { getContrastColorPalette } from '../../ColorGradient/ColorGradient'\nimport { ConfirmationDialog } from '../../ConfirmationDialog/ConfirmationDialog'\nimport loadingScreen from '../../LoadingScreen/LoadingScreen'\nimport Plot from '../../Plot/Plot'\nimport PlotPanelHeader from '../../Plot/PlotPanelHeader'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilter } from '../query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { FacetPlotLegendList } from './FacetPlotLegendList'\nimport { FacetWithLabel, truncate } from './FacetPlotLegendUtils'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetNavPanelProps = {\n  applyChangesToGraphSlice: (\n    facet: FacetColumnResultValues,\n    value: FacetColumnResultValueCount | undefined,\n    isSelected: boolean,\n  ) => void\n  applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n  index: number\n  facetToPlot: FacetColumnResultValues\n  plotType: PlotType\n  onSetPlotType: (plotType: PlotType) => void\n  onHide: () => void\n  isModalView: boolean\n  onCloseModal?: () => void\n}\n\nconst maxLabelLength: number = 19\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\nexport type PlotType = 'PIE' | 'BAR' | 'STACKED_HORIZONTAL_BAR'\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nexport type GraphData = {\n  data: Plotly.Data[]\n  labels: FacetWithLabel[]\n  colors: string[]\n}\n\nexport async function extractPlotDataArray(\n  facetToPlot: FacetColumnResultValues,\n  columnType: ColumnTypeEnum | undefined,\n  index: number,\n  plotType: PlotType,\n  accessToken?: string,\n) {\n  const colorPalette = getContrastColorPalette(\n    // Use only the odd palette, using the same offset for all plots until palettes are improved.\n    // See PORTALS-2916\n    'odd', // index % 2 === 0 ? 'even' : 'odd',\n    0, // Math.floor(index / 2),\n    facetToPlot.facetValues.length,\n  )\n\n  const getLabels = async (\n    facetValues: FacetColumnResultValueCount[],\n    columnType?: ColumnTypeEnum,\n    accessToken?: string,\n  ) => {\n    const map = new Map<string, string>()\n    map.set(\n      SynapseConstants.VALUE_NOT_SET,\n      SynapseConstants.FRIENDLY_VALUE_NOT_SET,\n    )\n    // Filter out empties\n    const filteredValues = facetValues\n      .map(value => value.value)\n      .filter(val => val !== SynapseConstants.VALUE_NOT_SET)\n    if (\n      columnType === ColumnTypeEnum.ENTITYID ||\n      columnType === ColumnTypeEnum.ENTITYID_LIST\n    ) {\n      // TODO: Pagination\n      const response = await SynapseClient.getEntityHeadersByIds(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.results) {\n        map.set(header.id, header.name)\n      }\n    } else if (\n      columnType === ColumnTypeEnum.USERID ||\n      columnType === ColumnTypeEnum.USERID_LIST\n    ) {\n      const response = await SynapseClient.getGroupHeadersBatch(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.children) {\n        map.set(header.ownerId, header.userName)\n      }\n    }\n\n    return facetValues.map(facetValue => ({\n      facet: facetValue,\n      label: getLabel(facetValue, false, map),\n      truncatedLabel: getLabel(facetValue, true, map),\n      count: facetValue.count,\n    }))\n  }\n\n  const getLabel = (\n    facetValue: FacetColumnResultValueCount,\n    truncateFlag: boolean,\n    labelMap: Map<string, string>,\n  ): string => {\n    let label = labelMap.get(facetValue.value) ?? facetValue.value\n    if (truncateFlag) {\n      label = truncate(label, maxLabelLength)!\n    }\n    return label\n  }\n\n  const labels = await getLabels(\n    facetToPlot.facetValues,\n    columnType,\n    accessToken,\n  )\n  const text = labels.map(el => el.truncatedLabel)\n\n  const anyFacetsSelected = facetToPlot.facetValues.some(\n    value => value.isSelected,\n  )\n  const selectionAwareColorPalette = anyFacetsSelected\n    ? facetToPlot.facetValues.map((facetValue, index) =>\n        facetValue.isSelected\n          ? colorPalette[index]\n          : colorPalette[index]\n              .replace('rgb(', 'rgba(')\n              .replace(')', ', 0.25)'),\n      )\n    : colorPalette\n  const counts: Plotly.Datum[] = facetToPlot.facetValues.map(\n    facet => facet.count,\n  )\n  let x: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n\n  if (plotType === 'BAR') {\n    x = facetToPlot.facetValues.map(\n      facet =>\n        labels.find(label => label.facet === facet)?.label ?? facet.value,\n    )\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    x = counts\n  }\n\n  let y: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  if (plotType === 'BAR') {\n    y = facetToPlot.facetValues.map(facet => facet.count)\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    y = Array(x?.length).fill('Proportional') // single value for every x value\n  }\n\n  const singleChartData: Plotly.Data = {\n    values: plotType === 'PIE' ? counts : undefined,\n    labels: labels.map(el => el.label),\n    text,\n    x,\n    y,\n    orientation: plotType === 'STACKED_HORIZONTAL_BAR' ? 'h' : 'v',\n    // @ts-expect-error\n    facetEnumerationValues: facetToPlot.facetValues.map(\n      facetValue => facetValue.value,\n    ),\n    name: facetToPlot.columnName,\n    textposition:\n      plotType === 'STACKED_HORIZONTAL_BAR' || plotType === 'BAR'\n        ? 'none'\n        : 'inside',\n    hovertemplate:\n      plotType === 'PIE'\n        ? '<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>'\n        : '<b>%{text}: </b><br>%{value} <br><extra></extra>',\n    textinfo: 'none',\n    type: plotType === 'PIE' ? 'pie' : 'bar',\n    pull:\n      plotType === 'PIE'\n        ? facetToPlot.facetValues.map(facetValue =>\n            facetValue.isSelected ? 0.1 : 0,\n          )\n        : undefined,\n    selectedpoints: anyFacetsSelected\n      ? facetToPlot.facetValues\n          .map((facetValue, index) => (facetValue.isSelected ? index : -1))\n          .filter(index => index !== -1)\n      : undefined,\n    selected: { marker: { opacity: 1 } },\n    unselected: { marker: { opacity: 0.25 } },\n\n    marker: {\n      colors: plotType === 'PIE' ? selectionAwareColorPalette : undefined,\n      color: plotType === 'PIE' ? undefined : selectionAwareColorPalette,\n    },\n  }\n  const result = {\n    data: [singleChartData],\n    labels,\n    colors:\n      plotType === 'PIE'\n        ? ((singleChartData as any).marker?.colors as string[])\n        : ((singleChartData as any).marker?.color as string[]),\n  }\n  return result\n}\n\nconst applyFacetFilter = (\n  event: Plotly.PlotMouseEvent,\n  allFacetValues: FacetColumnResultValues,\n  callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n  if (event.points && event.points[0]) {\n    const plotPointData: any = event.points[0]\n    const facetValueClickedValue =\n      plotPointData.data.facetEnumerationValues[plotPointData.pointNumber]\n    const facetValueClicked = allFacetValues.facetValues.find(\n      facet => facet.value === facetValueClickedValue,\n    )\n    callbackApplyFn(\n      allFacetValues,\n      facetValueClicked,\n      !facetValueClicked!.isSelected,\n    )\n  }\n}\n\nexport function getPlotStyle(\n  parentWidth: number | null | undefined,\n  plotType: PlotType,\n  maxHeight: number,\n): { width: string; height: string } {\n  if (parentWidth != undefined) {\n    let quotient = 1\n    switch (plotType) {\n      case 'BAR':\n        quotient = 0.8\n        break\n      case 'PIE':\n        quotient = 0.6\n        break\n      case 'STACKED_HORIZONTAL_BAR':\n        quotient = 1\n        break\n    }\n    const width = parentWidth ? parentWidth * quotient : 200\n    let height = plotType === 'PIE' ? width : width / 3\n    // max height of .PlotsContainer row col* is 200px, so the effective plot height max is around 150 unless it's expanded\n    if (height > maxHeight) {\n      height = maxHeight\n    }\n    return {\n      width: `${width}px`,\n      height: `${height}px`,\n    }\n  }\n  //else parent width is undefined\n  return {\n    width: '100%',\n    height: `${maxHeight}px`,\n  }\n}\n\nfunction FacetNavPanel(props: FacetNavPanelProps) {\n  const {\n    onHide,\n    isModalView,\n    applyChangesToGraphSlice,\n    index,\n    facetToPlot,\n    plotType,\n    onSetPlotType,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata, isLoading: isLoadingQueryMetadata } =\n    useGetQueryMetadata()\n\n  const [plotContainerMeasurements, plotContainerRef] =\n    useMeasure<HTMLDivElement>()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n\n  const [showModal, setShowModal] = useState(false)\n\n  const plotTitle = getColumnDisplayName(\n    facetToPlot.columnName,\n    facetToPlot.jsonPath,\n  )\n\n  const columnModel = useMemo(\n    () =>\n      getCorrespondingColumnForFacet(\n        facetToPlot,\n        queryMetadata?.columnModels ?? [],\n      ),\n    [queryMetadata?.columnModels, facetToPlot],\n  )\n  const columnType = columnModel?.columnType as ColumnTypeEnum\n\n  const { data: plotData } = useQuery({\n    queryKey: [\n      'extractPlotDataArray',\n      facetToPlot,\n      columnType,\n      index,\n      plotType,\n      accessToken,\n    ],\n\n    queryFn: () =>\n      extractPlotDataArray(\n        facetToPlot,\n        columnType,\n        index,\n        plotType,\n        accessToken,\n      ),\n\n    enabled: !!facetToPlot,\n  })\n\n  /* rendering functions */\n  const chartSelectionToggle = (\n    <StyledFormControl fullWidth>\n      <InputLabel>Chart Type</InputLabel>\n      <Select\n        value={plotType}\n        onChange={e => {\n          onSetPlotType(e.target.value as PlotType)\n        }}\n      >\n        <MenuItem value={'BAR'}>Bar Chart</MenuItem>\n        <MenuItem value={'PIE'}>Pie Chart</MenuItem>\n      </Select>\n    </StyledFormControl>\n  )\n\n  if (\n    (!queryMetadata && isLoadingQueryMetadata) ||\n    !facetToPlot ||\n    !columnModel\n  ) {\n    return (\n      <div className=\"SRC-loadingContainer SRC-centerContentColumn\">\n        {loadingScreen}\n      </div>\n    )\n  } else {\n    return (\n      <>\n        <ConfirmationDialog\n          open={showModal}\n          onCancel={() => setShowModal(false)}\n          title={plotTitle ?? ''}\n          content={<FacetNavPanel {...props} isModalView={true} />}\n          hasCancelButton={false}\n          confirmButtonProps={{ children: 'Apply Filters' }}\n          onConfirm={() => setShowModal(false)}\n          maxWidth={'md'}\n        />\n        <div\n          role=\"figure\"\n          className={`FacetNavPanel${isModalView ? '--expanded' : ''}`}\n        >\n          {!isModalView && (\n            <PlotPanelHeader\n              data={queryMetadata}\n              isLoading={isLoadingQueryMetadata}\n              title={plotTitle}\n              facetToPlot={facetToPlot}\n              onHide={onHide}\n              setShowModal={setShowModal}\n            />\n          )}\n          {isModalView && (\n            <Stack\n              sx={{\n                gap: 2,\n              }}\n            >\n              <StyledFormControl>\n                <InputLabel\n                  sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}\n                >\n                  <span>Filter All Data By</span>\n                  <Tooltip title=\"Selecting items in this dropdown will affect all facets on the Explore page.\">\n                    <InfoOutlined className=\"SRC-hand-cursor SRC-secondary-text-color\" />\n                  </Tooltip>\n                </InputLabel>\n                <EnumFacetFilter\n                  facet={facetToPlot}\n                  containerAs=\"Dropdown\"\n                  dropdownType=\"SelectBox\"\n                />\n              </StyledFormControl>\n              {chartSelectionToggle}\n            </Stack>\n          )}\n          <Box\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: '50% 50%',\n              alignItems: 'center',\n            }}\n            role=\"graphics-object\"\n            className=\"FacetNavPanel__body\"\n          >\n            <div ref={plotContainerRef}>\n              <Plot\n                key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotContainerMeasurements?.width}`}\n                layout={layout}\n                data={plotData?.data ?? []}\n                style={getPlotStyle(\n                  plotContainerMeasurements?.width,\n                  plotType,\n                  isModalView ? 300 : 150,\n                )}\n                config={{ displayModeBar: false }}\n                onClick={evt =>\n                  applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                }\n              />\n            </div>\n            <FacetPlotLegendList\n              labels={plotData?.labels}\n              colors={plotData?.colors}\n              isExpanded={isModalView}\n            />\n          </Box>\n        </div>\n      </>\n    )\n  }\n}\n\nexport default FacetNavPanel\n"],"mappings":"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"}
+{"version":3,"file":"FacetNavPanel.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetNavPanel.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport SynapseClient from '@/synapse-client'\nimport { SynapseConstants } from '@/utils'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport { InfoOutlined } from '@mui/icons-material'\nimport {\n  Box,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  Tooltip,\n} from '@mui/material'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n} from '@sage-bionetworks/synapse-types'\nimport { useQuery } from '@tanstack/react-query'\nimport type Plotly from 'plotly.js-basic-dist'\nimport { useId, useMemo, useState } from 'react'\nimport { getContrastColorPalette } from '../../ColorGradient/ColorGradient'\nimport { ConfirmationDialog } from '../../ConfirmationDialog/ConfirmationDialog'\nimport loadingScreen from '../../LoadingScreen/LoadingScreen'\nimport Plot from '../../Plot/Plot'\nimport PlotPanelHeader from '../../Plot/PlotPanelHeader'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilter } from '../query-filter/EnumFacetFilter/EnumFacetFilter'\nimport { FacetPlotLegendList } from './FacetPlotLegendList'\nimport { FacetWithLabel, truncate } from './FacetPlotLegendUtils'\nimport { useMeasure } from '@react-hookz/web'\n\nexport type FacetNavPanelProps = {\n  applyChangesToGraphSlice: (\n    facet: FacetColumnResultValues,\n    value: FacetColumnResultValueCount | undefined,\n    isSelected: boolean,\n  ) => void\n  applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n  index: number\n  facetToPlot: FacetColumnResultValues\n  plotType: PlotType\n  onSetPlotType: (plotType: PlotType) => void\n  onHide: () => void\n  isModalView: boolean\n  onCloseModal?: () => void\n}\n\nconst maxLabelLength: number = 19\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\nexport type PlotType = 'PIE' | 'BAR' | 'STACKED_HORIZONTAL_BAR'\n\nconst layout: Partial<Plotly.Layout> = {\n  showlegend: false,\n  annotations: [],\n  margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n  yaxis: {\n    visible: false,\n    showgrid: false,\n  },\n  xaxis: {\n    visible: false,\n    showgrid: false,\n  },\n}\n\nexport type GraphData = {\n  data: Plotly.Data[]\n  labels: FacetWithLabel[]\n  colors: string[]\n}\n\nexport async function extractPlotDataArray(\n  facetToPlot: FacetColumnResultValues,\n  columnType: ColumnTypeEnum | undefined,\n  index: number,\n  plotType: PlotType,\n  accessToken?: string,\n) {\n  const colorPalette = getContrastColorPalette(\n    // Use only the odd palette, using the same offset for all plots until palettes are improved.\n    // See PORTALS-2916\n    'odd', // index % 2 === 0 ? 'even' : 'odd',\n    0, // Math.floor(index / 2),\n    facetToPlot.facetValues.length,\n  )\n\n  const getLabels = async (\n    facetValues: FacetColumnResultValueCount[],\n    columnType?: ColumnTypeEnum,\n    accessToken?: string,\n  ) => {\n    const map = new Map<string, string>()\n    map.set(\n      SynapseConstants.VALUE_NOT_SET,\n      SynapseConstants.FRIENDLY_VALUE_NOT_SET,\n    )\n    // Filter out empties\n    const filteredValues = facetValues\n      .map(value => value.value)\n      .filter(val => val !== SynapseConstants.VALUE_NOT_SET)\n    if (\n      columnType === ColumnTypeEnum.ENTITYID ||\n      columnType === ColumnTypeEnum.ENTITYID_LIST\n    ) {\n      // TODO: Pagination\n      const response = await SynapseClient.getEntityHeadersByIds(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.results) {\n        map.set(header.id, header.name)\n      }\n    } else if (\n      columnType === ColumnTypeEnum.USERID ||\n      columnType === ColumnTypeEnum.USERID_LIST\n    ) {\n      const response = await SynapseClient.getGroupHeadersBatch(\n        filteredValues,\n        accessToken,\n      )\n      for (const header of response.children) {\n        map.set(header.ownerId, header.userName)\n      }\n    }\n\n    return facetValues.map(facetValue => ({\n      facet: facetValue,\n      label: getLabel(facetValue, false, map),\n      truncatedLabel: getLabel(facetValue, true, map),\n      count: facetValue.count,\n    }))\n  }\n\n  const getLabel = (\n    facetValue: FacetColumnResultValueCount,\n    truncateFlag: boolean,\n    labelMap: Map<string, string>,\n  ): string => {\n    let label = labelMap.get(facetValue.value) ?? facetValue.value\n    if (truncateFlag) {\n      label = truncate(label, maxLabelLength)!\n    }\n    return label\n  }\n\n  const labels = await getLabels(\n    facetToPlot.facetValues,\n    columnType,\n    accessToken,\n  )\n  const text = labels.map(el => el.truncatedLabel)\n\n  const anyFacetsSelected = facetToPlot.facetValues.some(\n    value => value.isSelected,\n  )\n  const selectionAwareColorPalette = anyFacetsSelected\n    ? facetToPlot.facetValues.map((facetValue, index) =>\n        facetValue.isSelected\n          ? colorPalette[index]\n          : colorPalette[index]\n              .replace('rgb(', 'rgba(')\n              .replace(')', ', 0.25)'),\n      )\n    : colorPalette\n  const counts: Plotly.Datum[] = facetToPlot.facetValues.map(\n    facet => facet.count,\n  )\n  let x: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n\n  if (plotType === 'BAR') {\n    x = facetToPlot.facetValues.map(\n      facet =>\n        labels.find(label => label.facet === facet)?.label ?? facet.value,\n    )\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    x = counts\n  }\n\n  let y: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  if (plotType === 'BAR') {\n    y = facetToPlot.facetValues.map(facet => facet.count)\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    y = Array(x?.length).fill('Proportional') // single value for every x value\n  }\n\n  const singleChartData: Plotly.Data = {\n    values: plotType === 'PIE' ? counts : undefined,\n    labels: labels.map(el => el.label),\n    text,\n    x,\n    y,\n    orientation: plotType === 'STACKED_HORIZONTAL_BAR' ? 'h' : 'v',\n    // @ts-expect-error\n    facetEnumerationValues: facetToPlot.facetValues.map(\n      facetValue => facetValue.value,\n    ),\n    name: facetToPlot.columnName,\n    textposition:\n      plotType === 'STACKED_HORIZONTAL_BAR' || plotType === 'BAR'\n        ? 'none'\n        : 'inside',\n    hovertemplate:\n      plotType === 'PIE'\n        ? '<b>%{text}</b><br>%{value} (%{percent})<br><extra></extra>'\n        : '<b>%{text}: </b><br>%{value} <br><extra></extra>',\n    textinfo: 'none',\n    type: plotType === 'PIE' ? 'pie' : 'bar',\n    pull:\n      plotType === 'PIE'\n        ? facetToPlot.facetValues.map(facetValue =>\n            facetValue.isSelected ? 0.1 : 0,\n          )\n        : undefined,\n    selectedpoints: anyFacetsSelected\n      ? facetToPlot.facetValues\n          .map((facetValue, index) => (facetValue.isSelected ? index : -1))\n          .filter(index => index !== -1)\n      : undefined,\n    selected: { marker: { opacity: 1 } },\n    unselected: { marker: { opacity: 0.25 } },\n\n    marker: {\n      colors: plotType === 'PIE' ? selectionAwareColorPalette : undefined,\n      color: plotType === 'PIE' ? undefined : selectionAwareColorPalette,\n    },\n  }\n  const result = {\n    data: [singleChartData],\n    labels,\n    colors:\n      plotType === 'PIE'\n        ? ((singleChartData as any).marker?.colors as string[])\n        : ((singleChartData as any).marker?.color as string[]),\n  }\n  return result\n}\n\nconst applyFacetFilter = (\n  event: Plotly.PlotMouseEvent,\n  allFacetValues: FacetColumnResultValues,\n  callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n  if (event.points && event.points[0]) {\n    const plotPointData: any = event.points[0]\n    const facetValueClickedValue =\n      plotPointData.data.facetEnumerationValues[plotPointData.pointNumber]\n    const facetValueClicked = allFacetValues.facetValues.find(\n      facet => facet.value === facetValueClickedValue,\n    )\n    callbackApplyFn(\n      allFacetValues,\n      facetValueClicked,\n      !facetValueClicked!.isSelected,\n    )\n  }\n}\n\nexport function getPlotStyle(\n  parentWidth: number | null | undefined,\n  plotType: PlotType,\n  maxHeight: number,\n): { width: string; height: string } {\n  if (parentWidth != undefined) {\n    let quotient = 1\n    switch (plotType) {\n      case 'BAR':\n        quotient = 0.8\n        break\n      case 'PIE':\n        quotient = 0.6\n        break\n      case 'STACKED_HORIZONTAL_BAR':\n        quotient = 1\n        break\n    }\n    const width = parentWidth ? parentWidth * quotient : 200\n    let height = plotType === 'PIE' ? width : width / 3\n    // max height of .PlotsContainer row col* is 200px, so the effective plot height max is around 150 unless it's expanded\n    if (height > maxHeight) {\n      height = maxHeight\n    }\n    return {\n      width: `${width}px`,\n      height: `${height}px`,\n    }\n  }\n  //else parent width is undefined\n  return {\n    width: '100%',\n    height: `${maxHeight}px`,\n  }\n}\n\nfunction FacetNavPanel(props: FacetNavPanelProps) {\n  const {\n    onHide,\n    isModalView,\n    applyChangesToGraphSlice,\n    index,\n    facetToPlot,\n    plotType,\n    onSetPlotType,\n  } = props\n  const { accessToken } = useSynapseContext()\n  const { data: queryMetadata, isLoading: isLoadingQueryMetadata } =\n    useGetQueryMetadata()\n\n  const [plotContainerMeasurements, plotContainerRef] =\n    useMeasure<HTMLDivElement>()\n  const { getColumnDisplayName } = useQueryVisualizationContext()\n\n  const [showModal, setShowModal] = useState(false)\n\n  const plotTitle = getColumnDisplayName(\n    facetToPlot.columnName,\n    facetToPlot.jsonPath,\n  )\n\n  const columnModel = useMemo(\n    () =>\n      getCorrespondingColumnForFacet(\n        facetToPlot,\n        queryMetadata?.columnModels ?? [],\n      ),\n    [queryMetadata?.columnModels, facetToPlot],\n  )\n  const columnType = columnModel?.columnType as ColumnTypeEnum\n\n  const { data: plotData } = useQuery({\n    queryKey: [\n      'extractPlotDataArray',\n      facetToPlot,\n      columnType,\n      index,\n      plotType,\n      accessToken,\n    ],\n\n    queryFn: () =>\n      extractPlotDataArray(\n        facetToPlot,\n        columnType,\n        index,\n        plotType,\n        accessToken,\n      ),\n\n    enabled: !!facetToPlot,\n  })\n\n  const chartSelectionInputLabelId = useId()\n  const filterByInputLabelId = useId()\n\n  /* rendering functions */\n  const chartSelectionToggle = (\n    <StyledFormControl fullWidth>\n      <InputLabel id={chartSelectionInputLabelId}>Chart Type</InputLabel>\n      <Select\n        labelId={chartSelectionInputLabelId}\n        label=\"Chart Type\"\n        value={plotType}\n        onChange={e => {\n          onSetPlotType(e.target.value as PlotType)\n        }}\n      >\n        <MenuItem value={'BAR'}>Bar Chart</MenuItem>\n        <MenuItem value={'PIE'}>Pie Chart</MenuItem>\n      </Select>\n    </StyledFormControl>\n  )\n\n  if (\n    (!queryMetadata && isLoadingQueryMetadata) ||\n    !facetToPlot ||\n    !columnModel\n  ) {\n    return (\n      <div className=\"SRC-loadingContainer SRC-centerContentColumn\">\n        {loadingScreen}\n      </div>\n    )\n  } else {\n    return (\n      <>\n        <ConfirmationDialog\n          open={showModal}\n          onCancel={() => setShowModal(false)}\n          title={plotTitle ?? ''}\n          content={<FacetNavPanel {...props} isModalView={true} />}\n          hasCancelButton={false}\n          confirmButtonProps={{ children: 'Apply Filters' }}\n          onConfirm={() => setShowModal(false)}\n          maxWidth={'md'}\n        />\n        <div\n          role=\"figure\"\n          className={`FacetNavPanel${isModalView ? '--expanded' : ''}`}\n        >\n          {!isModalView && (\n            <PlotPanelHeader\n              data={queryMetadata}\n              isLoading={isLoadingQueryMetadata}\n              title={plotTitle}\n              facetToPlot={facetToPlot}\n              onHide={onHide}\n              setShowModal={setShowModal}\n            />\n          )}\n          {isModalView && (\n            <Stack\n              sx={{\n                gap: 2,\n              }}\n            >\n              <StyledFormControl>\n                <InputLabel\n                  id={filterByInputLabelId}\n                  sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}\n                >\n                  <span>Filter All Data By</span>\n                  <Tooltip title=\"Selecting items in this dropdown will affect all facets on the Explore page.\">\n                    <InfoOutlined className=\"SRC-hand-cursor SRC-secondary-text-color\" />\n                  </Tooltip>\n                </InputLabel>\n                <EnumFacetFilter\n                  labelId={filterByInputLabelId}\n                  facet={facetToPlot}\n                  containerAs=\"Dropdown\"\n                  dropdownType=\"SelectBox\"\n                />\n              </StyledFormControl>\n              {chartSelectionToggle}\n            </Stack>\n          )}\n          <Box\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: '50% 50%',\n              alignItems: 'center',\n            }}\n            role=\"graphics-object\"\n            className=\"FacetNavPanel__body\"\n          >\n            <div ref={plotContainerRef}>\n              <Plot\n                key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotContainerMeasurements?.width}`}\n                layout={layout}\n                data={plotData?.data ?? []}\n                style={getPlotStyle(\n                  plotContainerMeasurements?.width,\n                  plotType,\n                  isModalView ? 300 : 150,\n                )}\n                config={{ displayModeBar: false }}\n                onClick={evt =>\n                  applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                }\n              />\n            </div>\n            <FacetPlotLegendList\n              labels={plotData?.labels}\n              colors={plotData?.colors}\n              isExpanded={isModalView}\n            />\n          </Box>\n        </div>\n      </>\n    )\n  }\n}\n\nexport default FacetNavPanel\n"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { FacetColumnResultValues } from '@sage-bionetworks/synapse-types';
 export type EnumFacetFilterProps = {
+    labelId?: string;
     facet: FacetColumnResultValues;
     containerAs?: 'Collapsible' | 'Dropdown';
     dropdownType?: 'Icon' | 'SelectBox';

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,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;AAwLD,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;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"}

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

@@ -17,63 +17,64 @@ import { Fragment as v, jsx as y } from "react/jsx-runtime";
 import { ColumnTypeEnum as b } 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 } = l, { nextQueryRequest: T, addValueToSelectedFacet: E, removeSelectedFacet: D, removeValueFromSelectedFacet: O, resetDebounceTimer: k } = a(), { data: A } = o(), { getColumnDisplayName: j } = s(), M = p(() => {
-		let e = i(f, m(T.query.selectedFacets));
+	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));
 		if (e && !t(e)) {
 			console.error("The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest", f);
 			return;
 		}
 		return e;
-	}, [f, T.query.selectedFacets]), N = u(m(T), f), P = A.columnModels ? r(f, A.columnModels) : void 0, F = p(() => {
-		switch (P?.columnType) {
+	}, [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;
 			default: return !1;
 		}
-	}, [P]), I = n({
-		ids: P?.columnType === b.USERID || P?.columnType === b.USERID_LIST ? f.facetValues.map((e) => e.value) : [],
+	}, [F]), L = n({
+		ids: F?.columnType === b.USERID || F?.columnType === b.USERID_LIST ? f.facetValues.map((e) => e.value) : [],
 		type: "USER_PROFILE"
-	}), L = n({
-		ids: P?.columnType === b.ENTITYID || P?.columnType === b.ENTITYID_LIST ? f.facetValues.map((e) => e.value) : [],
-		type: "ENTITY_HEADER"
 	}), R = n({
-		ids: P?.columnType === b.EVALUATIONID ? f.facetValues.map((e) => e.value) : [],
+		ids: F?.columnType === b.ENTITYID || F?.columnType === b.ENTITYID_LIST ? f.facetValues.map((e) => e.value) : [],
+		type: "ENTITY_HEADER"
+	}), z = n({
+		ids: F?.columnType === b.EVALUATIONID ? f.facetValues.map((e) => e.value) : [],
 		type: "EVALUATION_QUEUE"
-	}), z = p(() => {
+	}), B = p(() => {
 		let t = h(f.facetValues.map((e) => ({
 			...e,
-			isSelected: M?.facetValues.includes(e.value) ?? !1,
-			displayText: d(e, I, L, R)
+			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 (P == null || P.facetSortConfig == null) && (i = F ? _(r, (e) => Number(e.value)) : _(r, (e) => e.displayText.toLowerCase())), [...i, ...n];
+		return (F == null || F.facetSortConfig == null) && (i = I ? _(r, (e) => Number(e.value)) : _(r, (e) => e.displayText.toLowerCase())), [...i, ...n];
 	}, [
 		f.facetValues,
-		P,
-		M?.facetValues,
-		I,
+		F,
+		N?.facetValues,
 		L,
 		R,
-		F
+		z,
+		I
 	]);
-	return P ? /* @__PURE__ */ y(c, {
-		facetTitle: j(f.columnName, f.jsonPath),
-		filterIsActive: !N,
-		facetValues: z,
+	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,
 		onHoverOverValue: () => {
-			k();
+			A();
 		},
 		onAddValueToSelection: (e) => {
-			E(g(f, ["columnName", "jsonPath"]), e, { debounce: !0 });
+			D(g(f, ["columnName", "jsonPath"]), e, { debounce: !0 });
 		},
 		onRemoveValueFromSelection: (e) => {
-			O(g(f, ["columnName", "jsonPath"]), e, { debounce: !0 });
+			k(g(f, ["columnName", "jsonPath"]), e, { debounce: !0 });
 		},
-		onRemoveAllFacetSelections: () => D(g(f, ["columnName", "jsonPath"])),
+		onRemoveAllFacetSelections: () => O(g(f, ["columnName", "jsonPath"])),
 		canMultiSelect: !0
 	}) : /* @__PURE__ */ y(v, {});
 }

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  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  } = 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      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'\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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"}

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

@@ -4,6 +4,7 @@ export type EnumFacetFilterDropdownProps = PropsWithChildren<{
     menuText: string;
     filterIsActive: boolean;
     dropdownType?: 'Icon' | 'SelectBox';
+    labelId?: string;
 }>;
 export default function EnumFacetFilterDropdown(props: EnumFacetFilterDropdownProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EnumFacetFilterDropdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterDropdown.tsx"],"names":[],"mappings":"AASA,OAAO,EAAc,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAG/D,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAAC;IAC3D,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;CACpC,CAAC,CAAA;AA6EF,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,KAAK,EAAE,4BAA4B,2CAQpC"}
+{"version":3,"file":"EnumFacetFilterDropdown.d.ts","sourceRoot":"","sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterDropdown.tsx"],"names":[],"mappings":"AASA,OAAO,EAAc,iBAAiB,EAAY,MAAM,OAAO,CAAA;AAG/D,MAAM,MAAM,4BAA4B,GAAG,iBAAiB,CAAC;IAC3D,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAC,CAAA;AA8EF,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,KAAK,EAAE,4BAA4B,2CAQpC"}

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

@@ -4,8 +4,9 @@ import { Box as n, Fade as r, IconButton as i, Menu as a, MenuItem as o, Select
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterDropdown.tsx
 function d(e) {
-	let { menuText: t, children: r } = e;
+	let { menuText: t, children: r, labelId: i } = e;
 	return /* @__PURE__ */ u(s, {
+		labelId: i,
 		className: "EnumFacetFilter EnumFacetFilterSelect",
 		value: t,
 		renderValue: () => t,

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

@@ -1 +1 @@
-{"version":3,"file":"EnumFacetFilterDropdown.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterDropdown.tsx"],"sourcesContent":["import {\n  Box,\n  Fade,\n  IconButton,\n  Menu,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@mui/material'\nimport { MouseEvent, PropsWithChildren, useState } from 'react'\nimport IconSvg from '../../../IconSvg'\n\nexport type EnumFacetFilterDropdownProps = PropsWithChildren<{\n  facetTitle: string\n  menuText: string\n  filterIsActive: boolean\n  dropdownType?: 'Icon' | 'SelectBox'\n}>\n\nfunction EnumFacetFilterSelectBox(\n  props: Omit<EnumFacetFilterDropdownProps, 'dropdownType'>,\n) {\n  const { menuText, children } = props\n\n  return (\n    <Select\n      className={'EnumFacetFilter EnumFacetFilterSelect'}\n      value={menuText}\n      renderValue={() => menuText}\n      onChange={() => {\n        // noop - the children will handle change events\n      }}\n    >\n      {/* Hack to prevent Select warnings - add a hidden MenuItem */}\n      <MenuItem value={menuText} sx={{ display: 'none' }} />\n      <Box\n        sx={{\n          // expand the dropdown menu width for this component only\n          '& .EnumFacetFilter__dropdown_menu': {\n            maxWidth: '100%',\n          },\n        }}\n      >\n        {children}\n      </Box>\n    </Select>\n  )\n}\n\nfunction EnumFacetFilterIconDropdown(\n  props: Omit<EnumFacetFilterDropdownProps, 'dropdownType'>,\n) {\n  const { children, filterIsActive, facetTitle } = props\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const handleClickDropdownIcon = (event: MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  const open = Boolean(anchorEl)\n\n  return (\n    <div className=\"EnumFacetFilter\">\n      <Tooltip title={`Filter by ${facetTitle}`}>\n        <IconButton onClick={handleClickDropdownIcon} size={'small'}>\n          <IconSvg\n            icon={'filter'}\n            wrap={false}\n            sx={{\n              color: filterIsActive ? 'primary.main' : 'grey.700',\n              fontSize: '20px',\n            }}\n          />\n        </IconButton>\n      </Tooltip>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n        slots={{\n          transition: Fade,\n        }}\n      >\n        {children}\n      </Menu>\n    </div>\n  )\n}\n\nexport default function EnumFacetFilterDropdown(\n  props: EnumFacetFilterDropdownProps,\n) {\n  const { dropdownType } = props\n  if (dropdownType === 'SelectBox') {\n    return <EnumFacetFilterSelectBox {...props} />\n  } else {\n    return <EnumFacetFilterIconDropdown {...props} />\n  }\n}\n"],"mappings":";;;;;AAmBA,SAAS,EACP,GACA;CACA,IAAM,EAAE,aAAU,gBAAa;AAE/B,QACE,kBAAC,GAAD;EACE,WAAW;EACX,OAAO;EACP,mBAAmB;EACnB,gBAAgB;YAJlB,CASE,kBAAC,GAAD;GAAU,OAAO;GAAU,IAAI,EAAE,SAAS,QAAQ;GAAI,CAAA,EACtD,kBAAC,GAAD;GACE,IAAI,EAEF,qCAAqC,EACnC,UAAU,QACX,EACF;GAEA;GACG,CAAA,CACC;;;AAIb,SAAS,EACP,GACA;CACA,IAAM,EAAE,aAAU,mBAAgB,kBAAe,GAE3C,CAAC,GAAU,KAAe,EAA6B,KAAK,EAC5D,KAA2B,MAAmC;AAClE,IAAY,EAAM,cAAc;IAE5B,UAAoB;AACxB,IAAY,KAAK;IAGb,IAAO,EAAQ;AAErB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAS,OAAO,aAAa;aAC3B,kBAAC,GAAD;IAAY,SAAS;IAAyB,MAAM;cAClD,kBAAC,GAAD;KACE,MAAM;KACN,MAAM;KACN,IAAI;MACF,OAAO,IAAiB,iBAAiB;MACzC,UAAU;MACX;KACD,CAAA;IACS,CAAA;GACL,CAAA,EACV,kBAAC,GAAD;GACY;GACJ;GACN,SAAS;GACT,cAAc;IAAE,UAAU;IAAU,YAAY;IAAQ;GACxD,iBAAiB;IAAE,UAAU;IAAO,YAAY;IAAQ;GACxD,OAAO,EACL,YAAY,GACb;GAEA;GACI,CAAA,CACH;;;AAIV,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,oBAAiB;AAIvB,QAFO,EADL,MAAiB,cACX,IAEA,GAFD,EAA0B,GAAI,GAAS,CAEG"}
+{"version":3,"file":"EnumFacetFilterDropdown.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterDropdown.tsx"],"sourcesContent":["import {\n  Box,\n  Fade,\n  IconButton,\n  Menu,\n  MenuItem,\n  Select,\n  Tooltip,\n} from '@mui/material'\nimport { MouseEvent, PropsWithChildren, useState } from 'react'\nimport IconSvg from '../../../IconSvg'\n\nexport type EnumFacetFilterDropdownProps = PropsWithChildren<{\n  facetTitle: string\n  menuText: string\n  filterIsActive: boolean\n  dropdownType?: 'Icon' | 'SelectBox'\n  labelId?: string\n}>\n\nfunction EnumFacetFilterSelectBox(\n  props: Omit<EnumFacetFilterDropdownProps, 'dropdownType'>,\n) {\n  const { menuText, children, labelId } = props\n\n  return (\n    <Select\n      labelId={labelId}\n      className={'EnumFacetFilter EnumFacetFilterSelect'}\n      value={menuText}\n      renderValue={() => menuText}\n      onChange={() => {\n        // noop - the children will handle change events\n      }}\n    >\n      {/* Hack to prevent Select warnings - add a hidden MenuItem */}\n      <MenuItem value={menuText} sx={{ display: 'none' }} />\n      <Box\n        sx={{\n          // expand the dropdown menu width for this component only\n          '& .EnumFacetFilter__dropdown_menu': {\n            maxWidth: '100%',\n          },\n        }}\n      >\n        {children}\n      </Box>\n    </Select>\n  )\n}\n\nfunction EnumFacetFilterIconDropdown(\n  props: Omit<EnumFacetFilterDropdownProps, 'dropdownType'>,\n) {\n  const { children, filterIsActive, facetTitle } = props\n\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)\n  const handleClickDropdownIcon = (event: MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget)\n  }\n  const handleClose = () => {\n    setAnchorEl(null)\n  }\n\n  const open = Boolean(anchorEl)\n\n  return (\n    <div className=\"EnumFacetFilter\">\n      <Tooltip title={`Filter by ${facetTitle}`}>\n        <IconButton onClick={handleClickDropdownIcon} size={'small'}>\n          <IconSvg\n            icon={'filter'}\n            wrap={false}\n            sx={{\n              color: filterIsActive ? 'primary.main' : 'grey.700',\n              fontSize: '20px',\n            }}\n          />\n        </IconButton>\n      </Tooltip>\n      <Menu\n        anchorEl={anchorEl}\n        open={open}\n        onClose={handleClose}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'left' }}\n        slots={{\n          transition: Fade,\n        }}\n      >\n        {children}\n      </Menu>\n    </div>\n  )\n}\n\nexport default function EnumFacetFilterDropdown(\n  props: EnumFacetFilterDropdownProps,\n) {\n  const { dropdownType } = props\n  if (dropdownType === 'SelectBox') {\n    return <EnumFacetFilterSelectBox {...props} />\n  } else {\n    return <EnumFacetFilterIconDropdown {...props} />\n  }\n}\n"],"mappings":";;;;;AAoBA,SAAS,EACP,GACA;CACA,IAAM,EAAE,aAAU,aAAU,eAAY;AAExC,QACE,kBAAC,GAAD;EACW;EACT,WAAW;EACX,OAAO;EACP,mBAAmB;EACnB,gBAAgB;YALlB,CAUE,kBAAC,GAAD;GAAU,OAAO;GAAU,IAAI,EAAE,SAAS,QAAQ;GAAI,CAAA,EACtD,kBAAC,GAAD;GACE,IAAI,EAEF,qCAAqC,EACnC,UAAU,QACX,EACF;GAEA;GACG,CAAA,CACC;;;AAIb,SAAS,EACP,GACA;CACA,IAAM,EAAE,aAAU,mBAAgB,kBAAe,GAE3C,CAAC,GAAU,KAAe,EAA6B,KAAK,EAC5D,KAA2B,MAAmC;AAClE,IAAY,EAAM,cAAc;IAE5B,UAAoB;AACxB,IAAY,KAAK;IAGb,IAAO,EAAQ;AAErB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GAAS,OAAO,aAAa;aAC3B,kBAAC,GAAD;IAAY,SAAS;IAAyB,MAAM;cAClD,kBAAC,GAAD;KACE,MAAM;KACN,MAAM;KACN,IAAI;MACF,OAAO,IAAiB,iBAAiB;MACzC,UAAU;MACX;KACD,CAAA;IACS,CAAA;GACL,CAAA,EACV,kBAAC,GAAD;GACY;GACJ;GACN,SAAS;GACT,cAAc;IAAE,UAAU;IAAU,YAAY;IAAQ;GACxD,iBAAiB;IAAE,UAAU;IAAO,YAAY;IAAQ;GACxD,OAAO,EACL,YAAY,GACb;GAEA;GACI,CAAA,CACH;;;AAIV,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,oBAAiB;AAIvB,QAFO,EADL,MAAiB,cACX,IAEA,GAFD,EAA0B,GAAI,GAAS,CAEG"}

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

@@ -5,6 +5,7 @@ export type RenderedFacetValue<TValue = string> = Omit<SetOptional<FacetColumnRe
     displayText: string;
 };
 export type EnumFacetFilterUIProps<TValue = string> = {
+    labelId?: string;
     facetTitle: string;
     facetValues: RenderedFacetValue<TValue>[];
     filterIsActive: boolean;

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,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,2CA8PtC"}
+{"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"}