npm - synapse-react-client - Versions diffs - 4.0.17 → 4.0.18 - Mend

synapse-react-client 4.0.17 → 4.0.18

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 (225) hide show

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

	@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,IAAM,IAAyB,IAKzB,IAAiC;CACrC,YAAY;CACZ,aAAa,EAAE;CACf,QAAQ;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG;EAAG,GAAG;EAAG,KAAK;EAAG;CAC1C,OAAO;EACL,SAAS;EACT,UAAU;EACX;CACD,OAAO;EACL,SAAS;EACT,UAAU;EACX;CACF;AAQD,eAAsB,EACpB,GACA,GACA,GACA,GACA,GACA;CACA,IAAM,IAAe,EAGnB,OACA,GACA,EAAY,YAAY,OACzB,EAEK,IAAY,OAChB,GACA,GACA,MACG;EACH,IAAM,oBAAM,IAAI,KAAqB;AACrC,IAAI,IACF,GACA,EACD;EAED,IAAM,IAAiB,EACpB,KAAI,MAAS,EAAM,MAAM,CACzB,QAAO,MAAO,MAAQ,EAA+B;AACxD,MACE,MAAe,EAAe,YAC9B,MAAe,EAAe,eAC9B;GAEA,IAAM,IAAW,MAAM,EAAc,sBACnC,GACA,EACD;AACD,QAAK,IAAM,KAAU,EAAS,QAC5B,GAAI,IAAI,EAAO,IAAI,EAAO,KAAK;aAGjC,MAAe,EAAe,UAC9B,MAAe,EAAe,aAC9B;GACA,IAAM,IAAW,MAAM,EAAc,qBACnC,GACA,EACD;AACD,QAAK,IAAM,KAAU,EAAS,SAC5B,GAAI,IAAI,EAAO,SAAS,EAAO,SAAS;;AAI5C,SAAO,EAAY,KAAI,OAAe;GACpC,OAAO;GACP,OAAO,EAAS,GAAY,IAAO,EAAI;GACvC,gBAAgB,EAAS,GAAY,IAAM,EAAI;GAC/C,OAAO,EAAW;GACnB,EAAE;IAGC,KACJ,GACA,GACA,MACW;EACX,IAAI,IAAQ,EAAS,IAAI,EAAW,MAAM,IAAI,EAAW;AAIzD,SAHI,MACF,IAAQ,EAAS,GAAO,EAAe,GAElC;IAGH,IAAS,MAAM,EACnB,EAAY,aACZ,GACA,EACD,EACK,IAAO,EAAO,KAAI,MAAM,EAAG,eAAe,EAE1C,IAAoB,EAAY,YAAY,MAChD,MAAS,EAAM,WAChB,EACK,IAA6B,IAC/B,EAAY,YAAY,KAAK,GAAY,MACvC,EAAW,aACP,EAAa,KACb,EAAa,GACV,QAAQ,QAAQ,QAAQ,CACxB,QAAQ,KAAK,UAAU,CAC/B,GACD,GACE,IAAyB,EAAY,YAAY,KACrD,MAAS,EAAM,MAChB,EACG;AAEJ,CAAI,MAAa,QACf,IAAI,EAAY,YAAY,KAC1B,MACE,EAAO,MAAK,MAAS,EAAM,UAAU,EAAM,EAAE,SAAS,EAAM,MAC/D,GACQ,MAAa,6BACtB,IAAI;CAGN,IAAI;AACJ,CAAI,MAAa,QACf,IAAI,EAAY,YAAY,KAAI,MAAS,EAAM,MAAM,GAC5C,MAAa,6BACtB,IAAI,MAAM,GAAG,OAAO,CAAC,KAAK,eAAe;CAG3C,IAAM,IAA+B;EACnC,QAAQ,MAAa,QAAQ,IAAS,KAAA;EACtC,QAAQ,EAAO,KAAI,MAAM,EAAG,MAAM;EAClC;EACA;EACA;EACA,aAAa,MAAa,2BAA2B,MAAM;EAE3D,wBAAwB,EAAY,YAAY,KAC9C,MAAc,EAAW,MAC1B;EACD,MAAM,EAAY;EAClB,cACE,MAAa,4BAA4B,MAAa,QAClD,SACA;EACN,eACE,MAAa,QACT,+DACA;EACN,UAAU;EACV,MAAM,MAAa,QAAQ,QAAQ;EACnC,MACE,MAAa,QACT,EAAY,YAAY,KAAI,MAC1B,EAAW,aAAa,KAAM,EAC/B,GACD,KAAA;EACN,gBAAgB,IACZ,EAAY,YACT,KAAK,GAAY,MAAW,EAAW,aAAa,IAAQ,GAAI,CAChE,QAAO,MAAS,MAAU,GAAG,GAChC,KAAA;EACJ,UAAU,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE;EACpC,YAAY,EAAE,QAAQ,EAAE,SAAS,KAAM,EAAE;EAEzC,QAAQ;GACN,QAAQ,MAAa,QAAQ,IAA6B,KAAA;GAC1D,OAAO,MAAa,QAAQ,KAAA,IAAY;GACzC;EACF;AASD,QAAO;EAPL,MAAM,CAAC,EAAgB;EACvB;EACA,QACE,MAAa,QACP,EAAwB,QAAQ,SAChC,EAAwB,QAAQ;EAEnC;;AAGT,IAAM,KACJ,GACA,GACA,MACG;AACH,KAAI,EAAM,UAAU,EAAM,OAAO,IAAI;EACnC,IAAM,IAAqB,EAAM,OAAO,IAClC,IACJ,EAAc,KAAK,uBAAuB,EAAc,cACpD,IAAoB,EAAe,YAAY,MACnD,MAAS,EAAM,UAAU,EAC1B;AACD,IACE,GACA,GACA,CAAC,EAAmB,WACrB;;;AAIL,SAAgB,EACd,GACA,GACA,GACmC;AACnC,KAAI,KAAe,MAAW;EAC5B,IAAI,IAAW;AACf,UAAQ,GAAR;GACE,KAAK;AACH,QAAW;AACX;GACF,KAAK;AACH,QAAW;AACX;GACF,KAAK;AACH,QAAW;AACX;;EAEJ,IAAM,IAAQ,IAAc,IAAc,IAAW,KACjD,IAAS,MAAa,QAAQ,IAAQ,IAAQ;AAKlD,SAHI,IAAS,MACX,IAAS,IAEJ;GACL,OAAO,GAAG,EAAM;GAChB,QAAQ,GAAG,EAAO;GACnB;;AAGH,QAAO;EACL,OAAO;EACP,QAAQ,GAAG,EAAU;EACtB;;AAGH,SAAS,EAAc,GAA2B;CAChD,IAAM,EACJ,WACA,gBACA,6BACA,UACA,gBACA,aACA,qBACE,GACE,EAAE,mBAAgB,GAAmB,EACrC,EAAE,MAAM,GAAe,WAAW,MACtC,GAAqB,EAEjB,CAAC,GAA2B,KAChC,GAA4B,EACxB,EAAE,4BAAyB,GAA8B,EAEzD,CAAC,GAAW,KAAgB,EAAS,GAAM,EAE3C,IAAY,EAChB,EAAY,YACZ,EAAY,SACb,EAEK,IAAc,QAEhB,EACE,GACA,GAAe,gBAAgB,EAAE,CAClC,EACH,CAAC,GAAe,cAAc,EAAY,CAC3C,EACK,IAAa,GAAa,YAE1B,EAAE,MAAM,MAAa,EAAS;EAClC,UAAU;GACR;GACA;GACA;GACA;GACA;GACA;GACD;EAED,eACE,EACE,GACA,GACA,GACA,GACA,EACD;EAEH,SAAS,CAAC,CAAC;EACZ,CAAC,EAGI,IACJ,kBAAC,GAAD;EAAmB,WAAA;YAAnB,CACE,kBAAC,GAAD,EAAA,UAAY,cAAuB,CAAA,EACnC,kBAAC,GAAD;GACE,OAAO;GACP,WAAU,MAAK;AACb,MAAc,EAAE,OAAO,MAAkB;;aAH7C,CAME,kBAAC,GAAD;IAAU,OAAO;cAAO;IAAoB,CAAA,EAC5C,kBAAC,GAAD;IAAU,OAAO;cAAO;IAAoB,CAAA,CACrC;KACS;;AAcpB,QAVC,CAAC,KAAiB,KACnB,CAAC,KACD,CAAC,IAGC,kBAAC,OAAD;EAAK,WAAU;YACZ;EACG,CAAA,GAIN,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,MAAM;EACN,gBAAgB,EAAa,GAAM;EACnC,OAAO,KAAa;EACpB,SAAS,kBAAC,GAAD;GAAe,GAAI;GAAO,aAAa;GAAQ,CAAA;EACxD,iBAAiB;EACjB,oBAAoB,EAAE,UAAU,iBAAiB;EACjD,iBAAiB,EAAa,GAAM;EACpC,UAAU;EACV,CAAA,EACF,kBAAC,OAAD;EACE,MAAK;EACL,WAAW,gBAAgB,IAAc,eAAe;YAF1D;GAIG,CAAC,KACA,kBAAC,GAAD;IACE,MAAM;IACN,WAAW;IACX,OAAO;IACM;IACL;IACM;IACd,CAAA;GAEH,KACC,kBAAC,GAAD;IACE,IAAI,EACF,KAAK,GACN;cAHH,CAKE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KACE,IAAI;MAAE,SAAS;MAAQ,YAAY;MAAU,KAAK;MAAK;eADzD,CAGE,kBAAC,QAAD,EAAA,UAAM,sBAAyB,CAAA,EAC/B,kBAAC,GAAD;MAAS,OAAM;gBACb,kBAAC,GAAD,EAAc,WAAU,4CAA6C,CAAA;MAC7D,CAAA,CACC;QACb,kBAAC,GAAD;KACE,OAAO;KACP,aAAY;KACZ,cAAa;KACb,CAAA,CACgB,EAAA,CAAA,EACnB,EACK;;GAEV,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;KACb;IACD,MAAK;IACL,WAAU;cAPZ,CASE,kBAAC,OAAD;KAAK,KAAK;eACR,kBAAC,GAAD;MAEU;MACR,MAAM,GAAU,QAAQ,EAAE;MAC1B,OAAO,EACL,GAA2B,OAC3B,GACA,IAAc,MAAM,IACrB;MACD,QAAQ,EAAE,gBAAgB,IAAO;MACjC,UAAS,MACP,EAAiB,GAAK,GAAa,EAAyB;MAE9D,EAZK,GAAG,EAAY,WAAW,GAAG,EAAY,SAAS,GAAG,EAAS,GAAG,GAA2B,QAYjG;KACE,CAAA,EACN,kBAAC,GAAD;KACE,QAAQ,GAAU;KAClB,QAAQ,GAAU;KAClB,YAAY;KACZ,CAAA,CACE;;GACF;IACL,EAAA,CAAA"}
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 { 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 CHANGED Viewed

@@ -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 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,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"}
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"}

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

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

	@@ -1 +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":";;;;;;;;;;;;;;;;;;~~AAkCA~~,SAAS,EAAwB,GAA6B;CAC5D,IAAM,EACJ,UACA,iBAAc,eACd,kBAAe,QACf,qBAAkB,IAClB,0BAAuB,~~OACrB~~,GACE,EACJ,qBACA,4BACA,wBACA,iCACA,0BACE,GAAiB,EAEf,EAAE,MAAM,MAAkB,GAA6B,EACvD,EAAE,4BAAyB,GAA8B,EAEzD,IACJ,QAAc;EACZ,IAAM,IAAqB,EACzB,GACA,EAAU,EAAiB,MAAM,eAAe,CAGjD;AAED,MACE,KACA,CAAC,EAA2B,EAAmB,EAC/C;AACA,WAAQ,MACN,2EACA,EACD;AACD;;AAEF,SAAO;IACN,CAAC,GAAO,EAAiB,MAAM,eAAe,CAAC,EAG9C,IAAgB,EACpB,EAAU,EAAiB,EAC3B,EACD,EAEK,IAAc,EAAc,eAC9B,EAA+B,GAAO,EAAc,aAAa,GACjE,KAAA,GAEE,IAAqB,QAAc;AACvC,UAAQ,GAAa,YAArB;GACE,KAAK,EAAe;GACpB,KAAK,EAAe;GACpB,KAAK,EAAe,QAClB,QAAO;GACT,QACE,QAAO;;IAEV,CAAC,EAAY,CAAC,EAOX,IAAmB,EAAmC;EAC1D,KALA,GAAa,eAAe,EAAe,UAC3C,GAAa,eAAe,EAAe,cACvC,EAAM,YAAY,KAAI,MAAS,EAAM,MAAM,GAC3C,EAAE;EAGN,MAAM;EACP,CAAC,EAOI,IAAgB,EAAgC;EACpD,KALA,GAAa,eAAe,EAAe,YAC3C,GAAa,eAAe,EAAe,gBACvC,EAAM,YAAY,KAAI,MAAS,EAAM,MAAM,GAC3C,EAAE;EAGN,MAAM;EACP,CAAC,EAMI,IAAc,EAA8B;EAChD,KAJA,GAAa,eAAe,EAAe,eACvC,EAAM,YAAY,KAAI,MAAS,EAAM,MAAM,GAC3C,EAAE;EAGN,MAAM;EACP,CAAC,EAEI,IAA6C,QAAc;EAoB/D,IAAM,IAAa,EAnBS,EAAM,YAAY,KAC3C,OACQ;GACL,GAAG;GAGH,YACE,GAAsB,YAAY,SAAS,EAAW,MAAM,IAC5D;GACF,aAAa,EACX,GACA,GACA,GACA,EACD;GACF,EAKH,GACA,MAAS,EAAM,UAAU,EAC1B,EACK,IAAwB,EAAW,IACnC,IAAyB,EAAW,IAGtC,IAAqC;AAazC,UAXE,KAAe,QAAa,EAAY,mBAAmB,UAE3D,AAGE,IAHE,IACa,EAAO,IAAwB,MAAM,OAAO,EAAG,MAAM,CAAC,GAEtD,EAAO,IAAwB,MAC5C,EAAG,YAAY,aAAa,CAC7B,GAIE,CAAC,GAAG,GAAc,GAAG,EAAsB;IACjD;EACD,EAAM;EACN;EACA,GAAsB;EACtB;EACA;EACA;EACA;EACD,CAAC;AAMF,QAJK,IAKH,kBAAC,GAAD;~~EACE~~,YAAY,EAAqB,EAAM,YAAY,EAAM,SAAS;EAClE,gBAAgB,CAAC;EACjB,aAAa;EACA;EACC;EACG;EACK;EACtB,wBAAwB;AAEtB,MAAoB;;EAEtB,wBAAuB,MAAS;AAC9B,KACE,EAAK,GAAO,CAAC,cAAc,WAAW,CAAC,EACvC,GACA,EAAE,UAAU,IAAM,CACnB;;EAEH,6BAA4B,MAAS;AACnC,KACE,EAAK,GAAO,CAAC,cAAc,WAAW,CAAC,EACvC,GACA,EAAE,UAAU,IAAM,CACnB;;EAEH,kCACE,EAAoB,EAAK,GAAO,CAAC,cAAc,WAAW,CAAC,CAAC;EAE9D,gBAAgB;EAChB,CAAA,~~GAlCK~~,kBAAA,GAAA,EAAK,CAAA;;~~AAsChB~~,SAAgB,EAAgB,GAA6B;CAC3D,IAAM,EAAE,iBAAc,eAAe,kBAAe,WAAW;AAC/D,QACE,kBAAC,GAAD;EACE,UACE,kBAAC,GAAD;GACe;GACC;GACd,CAAA;YAGJ,kBAAC,GAAD,EAAyB,GAAI,GAAS,CAAA;EAC7B,CAAA"}
1	+ {"version":3,"file":"EnumFacetFilter.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilter.tsx"],"sourcesContent":["import { isFacetColumnValuesRequest, SynapseConstants } from '@/utils'\nimport {\n getCorrespondingColumnForFacet,\n getCorrespondingSelectedFacet,\n} from '@/utils/functions/queryUtils'\nimport useGetInfoFromIds from '@/utils/hooks/useGetInfoFromIds'\nimport {\n ColumnTypeEnum,\n EntityHeader,\n Evaluation,\n FacetColumnRequest,\n FacetColumnResultValueCount,\n FacetColumnResultValues,\n FacetColumnValuesRequest,\n QueryBundleRequest,\n UserGroupHeader,\n} from '@sage-bionetworks/synapse-types'\nimport { cloneDeep, partition, pick, sortBy } from 'lodash-es'\nimport { Suspense, useMemo } from 'react'\nimport { useQueryContext } from '../../../QueryContext'\nimport { useQueryVisualizationContext } from '../../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../../QueryWrapper/useGetQueryMetadata'\nimport { EnumFacetFilterSkeleton } from './EnumFacetFilterSkeleton'\nimport EnumFacetFilterUI, { RenderedFacetValue } from './EnumFacetFilterUI'\nimport { getAllIsSelected, valueToLabel } from './EnumFacetFilterUtils'\n\nexport type EnumFacetFilterProps = {\n labelId?: string\n facet: FacetColumnResultValues\n containerAs?: 'Collapsible' \| 'Dropdown'\n dropdownType?: 'Icon' \| 'SelectBox'\n hideCollapsible?: boolean\n defaultShowAllValues?: boolean\n}\n\nfunction EnumFacetFilterInternal(props: EnumFacetFilterProps) {\n const {\n facet,\n containerAs = 'Collapsible',\n dropdownType = 'Icon',\n hideCollapsible = false,\n defaultShowAllValues = false,\n labelId,\n } = props\n const {\n nextQueryRequest,\n addValueToSelectedFacet,\n removeSelectedFacet,\n removeValueFromSelectedFacet,\n resetDebounceTimer,\n } = useQueryContext()\n\n const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n const { getColumnDisplayName } = useQueryVisualizationContext()\n\n const currentSelectedFacet: FacetColumnValuesRequest \| undefined =\n useMemo(() => {\n const facetColumnRequest = getCorrespondingSelectedFacet(\n facet,\n cloneDeep(nextQueryRequest.query.selectedFacets) as\n \| FacetColumnRequest[]\n \| undefined,\n )\n\n if (\n facetColumnRequest &&\n !isFacetColumnValuesRequest(facetColumnRequest)\n ) {\n console.error(\n `The facet rendered in EnumFacetFilter is not a FacetColumnValuesRequest`,\n facet,\n )\n return undefined\n }\n return facetColumnRequest\n }, [facet, nextQueryRequest.query.selectedFacets])\n\n // Must compare the known facet values to the \"uncommitted\" current query\n const allIsSelected = getAllIsSelected(\n cloneDeep(nextQueryRequest) as QueryBundleRequest,\n facet,\n )\n\n const columnModel = queryMetadata.columnModels\n ? getCorrespondingColumnForFacet(facet, queryMetadata.columnModels)\n : undefined\n\n const isNumberColumnType = useMemo(() => {\n switch (columnModel?.columnType) {\n case ColumnTypeEnum.DOUBLE:\n case ColumnTypeEnum.DATE:\n case ColumnTypeEnum.INTEGER:\n return true\n default:\n return false\n }\n }, [columnModel])\n\n const userIds =\n columnModel?.columnType === ColumnTypeEnum.USERID \|\|\n columnModel?.columnType === ColumnTypeEnum.USERID_LIST\n ? facet.facetValues.map(facet => facet.value)\n : []\n const userGroupHeaders = useGetInfoFromIds<UserGroupHeader>({\n ids: userIds,\n type: 'USER_PROFILE',\n })\n\n const entityIds =\n columnModel?.columnType === ColumnTypeEnum.ENTITYID \|\|\n columnModel?.columnType === ColumnTypeEnum.ENTITYID_LIST\n ? facet.facetValues.map(facet => facet.value)\n : []\n const entityHeaders = useGetInfoFromIds<EntityHeader>({\n ids: entityIds,\n type: 'ENTITY_HEADER',\n })\n\n const evaluationIds =\n columnModel?.columnType === ColumnTypeEnum.EVALUATIONID\n ? facet.facetValues.map(facet => facet.value)\n : []\n const evaluations = useGetInfoFromIds<Evaluation>({\n ids: evaluationIds,\n type: 'EVALUATION_QUEUE',\n })\n\n const displayedFacetValues: RenderedFacetValue[] = useMemo(() => {\n const renderedFacetValues = facet.facetValues.map(\n (facetValue: FacetColumnResultValueCount): RenderedFacetValue => {\n return {\n ...facetValue,\n // Selected status should be based on the 'nextQuery', not the result data\n // This ensures the checkboxes respond instantly to user interaction, like while waiting for multiple changes to debounce\n isSelected:\n currentSelectedFacet?.facetValues.includes(facetValue.value) ??\n false,\n displayText: valueToLabel(\n facetValue,\n userGroupHeaders,\n entityHeaders,\n evaluations,\n ),\n }\n },\n )\n //Abby V's suggestion, always show the VALUE_NOT_SET facet value on the bottom of this sorted list\n const partitions = partition(\n renderedFacetValues,\n facet => facet.value === SynapseConstants.VALUE_NOT_SET,\n )\n const valueNotSetFacetArray = partitions[0]\n const restOfFacetValuesArray = partitions[1]\n\n // Apply client-side sorting if no server-side sort is specified\n let sortedValues: RenderedFacetValue[] = restOfFacetValuesArray\n const isClientSideSort =\n columnModel == undefined \|\| columnModel.facetSortConfig == undefined\n if (isClientSideSort) {\n if (isNumberColumnType) {\n sortedValues = sortBy(restOfFacetValuesArray, fv => Number(fv.value))\n } else {\n sortedValues = sortBy(restOfFacetValuesArray, fv =>\n fv.displayText.toLowerCase(),\n )\n }\n }\n\n return [...sortedValues, ...valueNotSetFacetArray]\n }, [\n facet.facetValues,\n columnModel,\n currentSelectedFacet?.facetValues,\n userGroupHeaders,\n entityHeaders,\n evaluations,\n isNumberColumnType,\n ])\n\n if (!columnModel) {\n return <></>\n }\n\n return (\n <EnumFacetFilterUI\n labelId={labelId}\n facetTitle={getColumnDisplayName(facet.columnName, facet.jsonPath)}\n filterIsActive={!allIsSelected}\n facetValues={displayedFacetValues}\n containerAs={containerAs}\n dropdownType={dropdownType}\n hideCollapsible={hideCollapsible}\n defaultShowAllValues={defaultShowAllValues}\n onHoverOverValue={() => {\n // SWC-6698: delay the query execution (via the debounce) when an item is hovered over\n resetDebounceTimer()\n }}\n onAddValueToSelection={value => {\n addValueToSelectedFacet(\n pick(facet, ['columnName', 'jsonPath']),\n value,\n { debounce: true },\n )\n }}\n onRemoveValueFromSelection={value => {\n removeValueFromSelectedFacet(\n pick(facet, ['columnName', 'jsonPath']),\n value,\n { debounce: true },\n )\n }}\n onRemoveAllFacetSelections={() =>\n removeSelectedFacet(pick(facet, ['columnName', 'jsonPath']))\n }\n canMultiSelect={true}\n />\n )\n}\n\nexport function EnumFacetFilter(props: EnumFacetFilterProps) {\n const { containerAs = 'Collapsible', dropdownType = 'Icon' } = props\n return (\n <Suspense\n fallback={\n <EnumFacetFilterSkeleton\n containerAs={containerAs}\n dropdownType={dropdownType}\n />\n }\n >\n <EnumFacetFilterInternal {...props} />\n </Suspense>\n )\n}\n"],"mappings":"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"}

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

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

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

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

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

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

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

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

@@ -11,17 +11,17 @@ function _(e) {
 	return e.replace(/\s/g, "").toLowerCase();
 }
 function v(v) {
-	let { filterIsActive: y, containerAs: b = "Collapsible", dropdownType: x = "Icon", hideCollapsible: S = !1, facetValues: C, onAddValueToSelection: w, onRemoveValueFromSelection: T, facetTitle: E, onRemoveAllFacetSelections: D, onHoverOverValue: O, canMultiSelect: k = !0, defaultShowAllValues: A = !1 } = v, [j, M] = o(A), [N, P] = o(!1), [F, I] = o(!1), [L, R] = o(""), z = C.length > g && C.slice(g).some(({ isSelected: e }) => e), B = b === "Dropdown" || j || F || z, V = i(() => F && L.length > 0 ? C.filter(({ displayText: e }) => e.toLowerCase().indexOf(L.trim().toLowerCase()) > -1) : B ? C : C.slice(0, g), [
-		C,
-		L,
-		F,
-		B
-	]), H = a(null), U = b === "Dropdown", W = !B && C.length > g, G = B && !L && !z && C.length > g, K = /* @__PURE__ */ h("div", {
-		className: U ? "EnumFacetFilter__dropdown_menu" : "",
+	let { labelId: y, filterIsActive: b, containerAs: x = "Collapsible", dropdownType: S = "Icon", hideCollapsible: C = !1, facetValues: w, onAddValueToSelection: T, onRemoveValueFromSelection: E, facetTitle: D, onRemoveAllFacetSelections: O, onHoverOverValue: k, canMultiSelect: A = !0, defaultShowAllValues: j = !1 } = v, [M, N] = o(j), [P, F] = o(!1), [I, L] = o(!1), [R, z] = o(""), B = w.length > g && w.slice(g).some(({ isSelected: e }) => e), V = x === "Dropdown" || M || I || B, H = i(() => I && R.length > 0 ? w.filter(({ displayText: e }) => e.toLowerCase().indexOf(R.trim().toLowerCase()) > -1) : V ? w : w.slice(0, g), [
+		w,
+		R,
+		I,
+		V
+	]), U = a(null), W = x === "Dropdown", G = !V && w.length > g, K = V && !R && !B && w.length > g, q = /* @__PURE__ */ h("div", {
+		className: W ? "EnumFacetFilter__dropdown_menu" : "",
 		children: [/* @__PURE__ */ h("div", {
 			className: "EnumFacetFilter__checkboxContainer--forAll",
 			children: [/* @__PURE__ */ m(d, {
-				sx: { display: F ? void 0 : "none" },
+				sx: { display: I ? void 0 : "none" },
 				size: "small",
 				fullWidth: !0,
 				slotProps: { input: {
@@ -30,7 +30,7 @@ function v(v) {
 						children: /* @__PURE__ */ m(u, {
 							size: "small",
 							onClick: () => {
-								I(!1), M(A);
+								L(!1), N(j);
 							},
 							children: /* @__PURE__ */ m(e, {
 								sx: { fontSize: "inherit" },
@@ -39,12 +39,12 @@ function v(v) {
 							})
 						})
 					}),
-					endAdornment: L.length > 0 && /* @__PURE__ */ m(f, {
+					endAdornment: R.length > 0 && /* @__PURE__ */ m(f, {
 						title: "Clear",
 						children: /* @__PURE__ */ m(u, {
 							size: "small",
 							onClick: () => {
-								R(""), H.current?.focus();
+								z(""), U.current?.focus();
 							},
 							children: /* @__PURE__ */ m(e, {
 								sx: { fontSize: "inherit" },
@@ -56,20 +56,20 @@ function v(v) {
 				} },
 				type: "text",
 				placeholder: "Find values",
-				value: L,
-				ref: H,
+				value: R,
+				ref: U,
 				onChange: (e) => {
-					R(e.target.value);
+					z(e.target.value);
 				}
-			}), !F && /* @__PURE__ */ h("div", {
+			}), !I && /* @__PURE__ */ h("div", {
 				className: "EnumFacetFilter__checkAll",
 				children: [/* @__PURE__ */ m(l, {
 					control: /* @__PURE__ */ m(s, {}),
 					className: "EnumFacetFilter__checkbox",
 					onChange: () => {
-						y && D();
+						b && O();
 					},
-					checked: !y,
+					checked: !b,
 					label: "All"
 				}, "select_all"), /* @__PURE__ */ m(f, {
 					title: "Search",
@@ -77,7 +77,7 @@ function v(v) {
 						size: "small",
 						sx: { aspectRatio: "1 / 1" },
 						onClick: () => {
-							R(""), I(!0), H.current?.focus();
+							z(""), L(!0), U.current?.focus();
 						},
 						children: /* @__PURE__ */ m(e, {
 							sx: { fontSize: "inherit" },
@@ -88,44 +88,44 @@ function v(v) {
 				})]
 			})]
 		}), /* @__PURE__ */ h("div", { children: [
-			V.map((e, t) => {
+			H.map((e, t) => {
 				let { isSelected: r, displayText: i, value: a, count: o } = e;
 				return /* @__PURE__ */ m(n, {
 					id: [
-						_(E),
+						_(D),
 						_(String(a)),
 						t
 					].join("-"),
 					label: i,
 					count: o,
-					isDropdown: U,
+					isDropdown: W,
 					checked: r,
 					onHover: () => {
-						O(a);
+						k(a);
 					},
 					onChange: (e) => {
-						e ? w(a) : T(a);
+						e ? T(a) : E(a);
 					},
-					inputType: k ? "checkbox" : "radio"
+					inputType: A ? "checkbox" : "radio"
 				}, String(a));
 			}),
-			!U && /* @__PURE__ */ h(p, { children: [W && /* @__PURE__ */ m("button", {
+			!W && /* @__PURE__ */ h(p, { children: [G && /* @__PURE__ */ m("button", {
 				className: "EnumFacetFilter__showMoreFacetsBtn",
-				onClick: () => M(!0),
+				onClick: () => N(!0),
 				children: /* @__PURE__ */ m("div", {
 					className: "EnumFacetFilter__checkboxContainer",
 					children: /* @__PURE__ */ h("div", {
 						className: "EnumFacetFilter__showMoreFacetsLabel",
 						children: [
 							"Show all (",
-							C.length,
+							w.length,
 							")"
 						]
 					})
 				})
-			}), G && /* @__PURE__ */ m("button", {
+			}), K && /* @__PURE__ */ m("button", {
 				className: "EnumFacetFilter__showMoreFacetsBtn",
-				onClick: () => M(!1),
+				onClick: () => N(!1),
 				children: /* @__PURE__ */ m("div", {
 					className: "EnumFacetFilter__checkboxContainer",
 					children: /* @__PURE__ */ m("div", {
@@ -134,27 +134,28 @@ function v(v) {
 					})
 				})
 			})] }),
-			V.length <= 0 && /* @__PURE__ */ m("div", {
+			H.length <= 0 && /* @__PURE__ */ m("div", {
 				className: "EnumFacetFilter__noMatch",
 				children: "No match found"
 			})
 		] })]
-	}), q = i(() => y ? y && V.filter((e) => e.isSelected).length === 1 ? V.filter((e) => e.isSelected)[0].displayText : "Multiple Values Selected" : "All", [y, V]);
-	return U ? /* @__PURE__ */ m(r, {
-		facetTitle: E,
-		dropdownType: x,
-		menuText: q,
-		filterIsActive: y,
-		children: K
+	}), J = i(() => b ? b && H.filter((e) => e.isSelected).length === 1 ? H.filter((e) => e.isSelected)[0].displayText : "Multiple Values Selected" : "All", [b, H]);
+	return W ? /* @__PURE__ */ m(r, {
+		facetTitle: D,
+		dropdownType: S,
+		menuText: J,
+		filterIsActive: b,
+		labelId: y,
+		children: q
 	}) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(t, {
-		hideCollapsible: S,
-		isCollapsed: N,
-		label: E,
-		onClick: (e) => P(e)
+		hideCollapsible: C,
+		isCollapsed: P,
+		label: D,
+		onClick: (e) => F(e)
 	}), /* @__PURE__ */ m(c, {
 		className: "EnumFacetFilter",
-		in: !N,
-		children: K
+		in: !P,
+		children: q
 	})] });
 }
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EnumFacetFilterUI.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"sourcesContent":["import {\n Checkbox,\n Collapse,\n FormControlLabel,\n IconButton,\n TextField,\n Tooltip,\n} from '@mui/material'\nimport { useMemo, useRef, useState } from 'react'\nimport { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../../../IconSvg/IconSvg'\nimport { FacetFilterHeader } from '../FacetFilterHeader'\nimport { EnumFacetFilterOption } from './EnumFacetFilterOption'\nimport EnumFacetFilterDropdown from './EnumFacetFilterDropdown'\nimport { SetOptional } from 'type-fest'\n\nconst MAX_ENUMERATION_VALUES_TO_SHOW = 5\n\nexport type RenderedFacetValue<TValue = string> = Omit<\n SetOptional<FacetColumnResultValueCount, 'count'>,\n 'value'\n> & {\n value: TValue\n /* Text displayed for the option, and also used to filter in search /\n displayText: string\n}\n\nexport type EnumFacetFilterUIProps<TValue = string> = {\n / The title of the faceted column to be displayed /\n facetTitle: string\n / List of all facet values and information associated with each value /\n facetValues: RenderedFacetValue<TValue>[]\n / Determines how the component is styled and whether the 'All' checkbox should be selected. /\n filterIsActive: boolean // filterIsActive cannot be derived from facetValues[].isSelected. See PORTALS-2680\n /* The EnumFacetFilter can be rendered as a collapsible panel or a dropdown. Default is `'Collapsible'` /\n containerAs?: 'Collapsible' \| 'Dropdown'\n / If `containerAs` is a dropdown, the dropdown can be either an IconButton or a SelectBox. Default is `'Icon'` /\n dropdownType?: 'Icon' \| 'SelectBox'\n / If true, hides the button to collapse the panel (only shown if `containerAs` is 'Collapsible'). Default is false./\n hideCollapsible?: boolean\n / Called when an unselected value is selected /\n onAddValueToSelection: (value: TValue) => void\n / Called when a selected value is unselected /\n onRemoveValueFromSelection: (value: TValue) => void\n / Called when all values should be unselected (e.g. 'All' is clicked) /\n onRemoveAllFacetSelections: () => void\n / Called when an value is hovered over /\n onHoverOverValue: (value: TValue) => void\n / Set to true if multiple values can be selected for the filter /\n canMultiSelect: boolean\n / By default, all values are not shown (defaultShowAllValues = false) */\n defaultShowAllValues?: boolean\n}\n\nfunction removeWhitespace(value: string): string {\n return value.replace(/\\s/g, '').toLowerCase()\n}\n\nexport default function EnumFacetFilterUI<TValue = string>(\n props: EnumFacetFilterUIProps<TValue>,\n) {\n const {\n filterIsActive,\n containerAs = 'Collapsible',\n dropdownType = 'Icon',\n hideCollapsible = false,\n facetValues,\n onAddValueToSelection,\n onRemoveValueFromSelection,\n facetTitle,\n onRemoveAllFacetSelections,\n onHoverOverValue,\n canMultiSelect = true,\n defaultShowAllValues = false,\n } = props\n const [toggleShowAll, setToggleShowAll] =\n useState<boolean>(defaultShowAllValues)\n const [isCollapsed, setIsCollapsed] = useState<boolean>(false)\n const [showSearch, setShowSearch] = useState<boolean>(false)\n const [searchTerm, setSearchText] = useState<string>('')\n\n // e.g. we show a subset of facet values before hiding the rest behind \"Show More\"\n // If the user has selected a value that would normally be hidden, always show all of the values\n const valueIndexedGreaterThanMaxToShowIsSelected =\n facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW &&\n facetValues\n .slice(MAX_ENUMERATION_VALUES_TO_SHOW)\n .some(({ isSelected }) => isSelected)\n const showAll =\n containerAs === 'Dropdown' \|\|\n toggleShowAll \|\|\n showSearch \|\|\n valueIndexedGreaterThanMaxToShowIsSelected\n\n const facetValuesToShow = useMemo(() => {\n if (showSearch && searchTerm.length > 0) {\n return facetValues.filter(({ displayText }) => {\n return (\n displayText.toLowerCase().indexOf(searchTerm.trim().toLowerCase()) >\n -1\n )\n })\n }\n if (showAll) {\n return facetValues\n }\n return facetValues.slice(0, MAX_ENUMERATION_VALUES_TO_SHOW)\n }, [facetValues, searchTerm, showSearch, showAll])\n\n const textInput = useRef<HTMLInputElement>(null)\n\n const isDropdown = containerAs === 'Dropdown'\n const showMoreButtonIsVisible =\n !showAll && facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n const showLessButtonIsVisible =\n showAll &&\n !searchTerm &&\n !valueIndexedGreaterThanMaxToShowIsSelected &&\n facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n\n const content = (\n <div className={isDropdown ? 'EnumFacetFilter__dropdown_menu' : ''}>\n <div className=\"EnumFacetFilter__checkboxContainer--forAll\">\n <TextField // Search Filter Text\n sx={{\n display: showSearch ? undefined : 'none',\n }}\n size={'small'}\n fullWidth={true}\n slotProps={{\n input: {\n startAdornment: (\n <Tooltip title={'Close search'}>\n <IconButton\n size={'small'}\n onClick={() => {\n setShowSearch(false)\n setToggleShowAll(defaultShowAllValues)\n }}\n >\n <IconSvg\n sx={{ fontSize: 'inherit' }}\n wrap={false}\n icon=\"arrowBack\"\n />\n </IconButton>\n </Tooltip>\n ),\n endAdornment: searchTerm.length > 0 && (\n <Tooltip title={'Clear'}>\n <IconButton\n size={'small'}\n onClick={() => {\n setSearchText('')\n textInput.current?.focus()\n }}\n >\n <IconSvg\n sx={{ fontSize: 'inherit' }}\n wrap={false}\n icon=\"close\"\n />\n </IconButton>\n </Tooltip>\n ),\n },\n }}\n type=\"text\"\n placeholder=\"Find values\"\n value={searchTerm}\n ref={textInput}\n onChange={e => {\n setSearchText(e.target.value)\n }}\n />\n {!showSearch && (\n <div className=\"EnumFacetFilter__checkAll\">\n <FormControlLabel\n control={<Checkbox />}\n className=\"EnumFacetFilter__checkbox\"\n onChange={() => {\n if (filterIsActive) {\n onRemoveAllFacetSelections()\n }\n }}\n key=\"select_all\"\n checked={!filterIsActive}\n label=\"All\"\n />\n <Tooltip title={'Search'}>\n <IconButton\n size={'small'}\n sx={{ aspectRatio: '1 / 1' }}\n onClick={() => {\n setSearchText('')\n setShowSearch(true)\n textInput.current?.focus()\n }}\n >\n <IconSvg\n sx={{ fontSize: 'inherit' }}\n wrap={false}\n icon=\"search\"\n />\n </IconButton>\n </Tooltip>\n </div>\n )}\n </div>\n <div>\n {facetValuesToShow.map((facetValueAndCount, index: number) => {\n const { isSelected, displayText, value, count } = facetValueAndCount\n\n return (\n <EnumFacetFilterOption\n key={String(value)}\n id={[\n removeWhitespace(facetTitle),\n removeWhitespace(String(value)),\n index,\n ].join('-')}\n label={displayText}\n count={count}\n isDropdown={isDropdown}\n checked={isSelected}\n onHover={() => {\n onHoverOverValue(value)\n }}\n onChange={(newIsSelected: boolean) => {\n if (newIsSelected) {\n onAddValueToSelection(value)\n } else {\n onRemoveValueFromSelection(value)\n }\n }}\n inputType={canMultiSelect ? 'checkbox' : 'radio'}\n />\n )\n })}\n {!isDropdown && (\n <>\n {showMoreButtonIsVisible && (\n <button\n className=\"EnumFacetFilter__showMoreFacetsBtn\"\n onClick={() => setToggleShowAll(true)}\n >\n <div className=\"EnumFacetFilter__checkboxContainer\">\n <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n Show all ({facetValues.length})\n </div>\n </div>\n </button>\n )}\n {showLessButtonIsVisible && (\n <button\n className=\"EnumFacetFilter__showMoreFacetsBtn\"\n onClick={() => setToggleShowAll(false)}\n >\n <div className=\"EnumFacetFilter__checkboxContainer\">\n <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n Show less\n </div>\n </div>\n </button>\n )}\n </>\n )}\n {facetValuesToShow.length <= 0 && (\n <div className=\"EnumFacetFilter__noMatch\">No match found</div>\n )}\n </div>\n </div>\n )\n\n const menuText = useMemo(() => {\n if (!filterIsActive) {\n return 'All'\n } else if (\n filterIsActive &&\n facetValuesToShow.filter(item => item.isSelected).length === 1\n ) {\n return facetValuesToShow.filter(item => item.isSelected)[0].displayText\n } else {\n return 'Multiple Values Selected'\n }\n }, [filterIsActive, facetValuesToShow])\n\n if (isDropdown) {\n return (\n <EnumFacetFilterDropdown\n facetTitle={facetTitle}\n dropdownType={dropdownType}\n menuText={menuText}\n filterIsActive={filterIsActive}\n >\n {content}\n </EnumFacetFilterDropdown>\n )\n } else {\n return (\n <>\n <FacetFilterHeader\n hideCollapsible={hideCollapsible}\n isCollapsed={isCollapsed}\n label={facetTitle}\n onClick={(isCollapsed: boolean) => setIsCollapsed(isCollapsed)}\n />\n <Collapse className=\"EnumFacetFilter\" in={!isCollapsed}>\n {content}\n </Collapse>\n </>\n )\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"EnumFacetFilterUI.js","names":[],"sources":["../../../../../src/components/widgets/query-filter/EnumFacetFilter/EnumFacetFilterUI.tsx"],"sourcesContent":["import {\n Checkbox,\n Collapse,\n FormControlLabel,\n IconButton,\n TextField,\n Tooltip,\n} from '@mui/material'\nimport { useMemo, useRef, useState } from 'react'\nimport { FacetColumnResultValueCount } from '@sage-bionetworks/synapse-types'\nimport IconSvg from '../../../IconSvg/IconSvg'\nimport { FacetFilterHeader } from '../FacetFilterHeader'\nimport { EnumFacetFilterOption } from './EnumFacetFilterOption'\nimport EnumFacetFilterDropdown from './EnumFacetFilterDropdown'\nimport { SetOptional } from 'type-fest'\n\nconst MAX_ENUMERATION_VALUES_TO_SHOW = 5\n\nexport type RenderedFacetValue<TValue = string> = Omit<\n SetOptional<FacetColumnResultValueCount, 'count'>,\n 'value'\n> & {\n value: TValue\n /* Text displayed for the option, and also used to filter in search /\n displayText: string\n}\n\nexport type EnumFacetFilterUIProps<TValue = string> = {\n / The ID of the corresponding label, for testing and accessibility /\n labelId?: string\n / The title of the faceted column to be displayed /\n facetTitle: string\n / List of all facet values and information associated with each value /\n facetValues: RenderedFacetValue<TValue>[]\n / Determines how the component is styled and whether the 'All' checkbox should be selected. /\n filterIsActive: boolean // filterIsActive cannot be derived from facetValues[].isSelected. See PORTALS-2680\n /* The EnumFacetFilter can be rendered as a collapsible panel or a dropdown. Default is `'Collapsible'` /\n containerAs?: 'Collapsible' \| 'Dropdown'\n / If `containerAs` is a dropdown, the dropdown can be either an IconButton or a SelectBox. Default is `'Icon'` /\n dropdownType?: 'Icon' \| 'SelectBox'\n / If true, hides the button to collapse the panel (only shown if `containerAs` is 'Collapsible'). Default is false./\n hideCollapsible?: boolean\n / Called when an unselected value is selected /\n onAddValueToSelection: (value: TValue) => void\n / Called when a selected value is unselected /\n onRemoveValueFromSelection: (value: TValue) => void\n / Called when all values should be unselected (e.g. 'All' is clicked) /\n onRemoveAllFacetSelections: () => void\n / Called when an value is hovered over /\n onHoverOverValue: (value: TValue) => void\n / Set to true if multiple values can be selected for the filter /\n canMultiSelect: boolean\n / By default, all values are not shown (defaultShowAllValues = false) */\n defaultShowAllValues?: boolean\n}\n\nfunction removeWhitespace(value: string): string {\n return value.replace(/\\s/g, '').toLowerCase()\n}\n\nexport default function EnumFacetFilterUI<TValue = string>(\n props: EnumFacetFilterUIProps<TValue>,\n) {\n const {\n labelId,\n filterIsActive,\n containerAs = 'Collapsible',\n dropdownType = 'Icon',\n hideCollapsible = false,\n facetValues,\n onAddValueToSelection,\n onRemoveValueFromSelection,\n facetTitle,\n onRemoveAllFacetSelections,\n onHoverOverValue,\n canMultiSelect = true,\n defaultShowAllValues = false,\n } = props\n const [toggleShowAll, setToggleShowAll] =\n useState<boolean>(defaultShowAllValues)\n const [isCollapsed, setIsCollapsed] = useState<boolean>(false)\n const [showSearch, setShowSearch] = useState<boolean>(false)\n const [searchTerm, setSearchText] = useState<string>('')\n\n // e.g. we show a subset of facet values before hiding the rest behind \"Show More\"\n // If the user has selected a value that would normally be hidden, always show all of the values\n const valueIndexedGreaterThanMaxToShowIsSelected =\n facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW &&\n facetValues\n .slice(MAX_ENUMERATION_VALUES_TO_SHOW)\n .some(({ isSelected }) => isSelected)\n const showAll =\n containerAs === 'Dropdown' \|\|\n toggleShowAll \|\|\n showSearch \|\|\n valueIndexedGreaterThanMaxToShowIsSelected\n\n const facetValuesToShow = useMemo(() => {\n if (showSearch && searchTerm.length > 0) {\n return facetValues.filter(({ displayText }) => {\n return (\n displayText.toLowerCase().indexOf(searchTerm.trim().toLowerCase()) >\n -1\n )\n })\n }\n if (showAll) {\n return facetValues\n }\n return facetValues.slice(0, MAX_ENUMERATION_VALUES_TO_SHOW)\n }, [facetValues, searchTerm, showSearch, showAll])\n\n const textInput = useRef<HTMLInputElement>(null)\n\n const isDropdown = containerAs === 'Dropdown'\n const showMoreButtonIsVisible =\n !showAll && facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n const showLessButtonIsVisible =\n showAll &&\n !searchTerm &&\n !valueIndexedGreaterThanMaxToShowIsSelected &&\n facetValues.length > MAX_ENUMERATION_VALUES_TO_SHOW\n\n const content = (\n <div className={isDropdown ? 'EnumFacetFilter__dropdown_menu' : ''}>\n <div className=\"EnumFacetFilter__checkboxContainer--forAll\">\n <TextField // Search Filter Text\n sx={{\n display: showSearch ? undefined : 'none',\n }}\n size={'small'}\n fullWidth={true}\n slotProps={{\n input: {\n startAdornment: (\n <Tooltip title={'Close search'}>\n <IconButton\n size={'small'}\n onClick={() => {\n setShowSearch(false)\n setToggleShowAll(defaultShowAllValues)\n }}\n >\n <IconSvg\n sx={{ fontSize: 'inherit' }}\n wrap={false}\n icon=\"arrowBack\"\n />\n </IconButton>\n </Tooltip>\n ),\n endAdornment: searchTerm.length > 0 && (\n <Tooltip title={'Clear'}>\n <IconButton\n size={'small'}\n onClick={() => {\n setSearchText('')\n textInput.current?.focus()\n }}\n >\n <IconSvg\n sx={{ fontSize: 'inherit' }}\n wrap={false}\n icon=\"close\"\n />\n </IconButton>\n </Tooltip>\n ),\n },\n }}\n type=\"text\"\n placeholder=\"Find values\"\n value={searchTerm}\n ref={textInput}\n onChange={e => {\n setSearchText(e.target.value)\n }}\n />\n {!showSearch && (\n <div className=\"EnumFacetFilter__checkAll\">\n <FormControlLabel\n control={<Checkbox />}\n className=\"EnumFacetFilter__checkbox\"\n onChange={() => {\n if (filterIsActive) {\n onRemoveAllFacetSelections()\n }\n }}\n key=\"select_all\"\n checked={!filterIsActive}\n label=\"All\"\n />\n <Tooltip title={'Search'}>\n <IconButton\n size={'small'}\n sx={{ aspectRatio: '1 / 1' }}\n onClick={() => {\n setSearchText('')\n setShowSearch(true)\n textInput.current?.focus()\n }}\n >\n <IconSvg\n sx={{ fontSize: 'inherit' }}\n wrap={false}\n icon=\"search\"\n />\n </IconButton>\n </Tooltip>\n </div>\n )}\n </div>\n <div>\n {facetValuesToShow.map((facetValueAndCount, index: number) => {\n const { isSelected, displayText, value, count } = facetValueAndCount\n\n return (\n <EnumFacetFilterOption\n key={String(value)}\n id={[\n removeWhitespace(facetTitle),\n removeWhitespace(String(value)),\n index,\n ].join('-')}\n label={displayText}\n count={count}\n isDropdown={isDropdown}\n checked={isSelected}\n onHover={() => {\n onHoverOverValue(value)\n }}\n onChange={(newIsSelected: boolean) => {\n if (newIsSelected) {\n onAddValueToSelection(value)\n } else {\n onRemoveValueFromSelection(value)\n }\n }}\n inputType={canMultiSelect ? 'checkbox' : 'radio'}\n />\n )\n })}\n {!isDropdown && (\n <>\n {showMoreButtonIsVisible && (\n <button\n className=\"EnumFacetFilter__showMoreFacetsBtn\"\n onClick={() => setToggleShowAll(true)}\n >\n <div className=\"EnumFacetFilter__checkboxContainer\">\n <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n Show all ({facetValues.length})\n </div>\n </div>\n </button>\n )}\n {showLessButtonIsVisible && (\n <button\n className=\"EnumFacetFilter__showMoreFacetsBtn\"\n onClick={() => setToggleShowAll(false)}\n >\n <div className=\"EnumFacetFilter__checkboxContainer\">\n <div className=\"EnumFacetFilter__showMoreFacetsLabel\">\n Show less\n </div>\n </div>\n </button>\n )}\n </>\n )}\n {facetValuesToShow.length <= 0 && (\n <div className=\"EnumFacetFilter__noMatch\">No match found</div>\n )}\n </div>\n </div>\n )\n\n const menuText = useMemo(() => {\n if (!filterIsActive) {\n return 'All'\n } else if (\n filterIsActive &&\n facetValuesToShow.filter(item => item.isSelected).length === 1\n ) {\n return facetValuesToShow.filter(item => item.isSelected)[0].displayText\n } else {\n return 'Multiple Values Selected'\n }\n }, [filterIsActive, facetValuesToShow])\n\n if (isDropdown) {\n return (\n <EnumFacetFilterDropdown\n facetTitle={facetTitle}\n dropdownType={dropdownType}\n menuText={menuText}\n filterIsActive={filterIsActive}\n labelId={labelId}\n >\n {content}\n </EnumFacetFilterDropdown>\n )\n } else {\n return (\n <>\n <FacetFilterHeader\n hideCollapsible={hideCollapsible}\n isCollapsed={isCollapsed}\n label={facetTitle}\n onClick={(isCollapsed: boolean) => setIsCollapsed(isCollapsed)}\n />\n <Collapse className=\"EnumFacetFilter\" in={!isCollapsed}>\n {content}\n </Collapse>\n </>\n )\n }\n}\n"],"mappings":"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"}

package/dist/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { CurationTask } from '@sage-bionetworks/synapse-client';
+export type CreateOrUpdateCurationTaskDialogProps = {
+    open: boolean;
+    onCancel: () => void;
+    onSuccess: (task: CurationTask) => void;
+    projectId: string;
+    task?: CurationTask;
+};
+/**
+ * Dialog component that guides a user through creating a new CurationTask or editing an existing one.
+ */
+export default function CreateOrUpdateCurationTaskDialog(props: CreateOrUpdateCurationTaskDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CreateOrUpdateCurationTaskDialog.d.ts.map

package/dist/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CreateOrUpdateCurationTaskDialog.d.ts","sourceRoot":"","sources":["../../../../../src/features/entity/metadata-task/components/CreateOrUpdateCurationTaskDialog.tsx"],"names":[],"mappings":"AAgCA,OAAO,EACL,YAAY,EAKb,MAAM,kCAAkC,CAAA;AAgCzC,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,SAAS,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,YAAY,CAAA;CACpB,CAAA;AAsBD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,gCAAgC,CACtD,KAAK,EAAE,qCAAqC,2CAogB7C"}