synapse-react-client 4.0.45 → 4.0.47

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 { 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\nexport const MAX_PLOT_HEIGHT_PX = 150\nexport const MAX_EXPANDED_PLOT_HEIGHT_PX = 300\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\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?.[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  // Wait for a non-zero measured width before rendering the plot.\n  // Round width to avoid rebuilds from small pixel fluctuations.\n  const plotWidth = plotContainerMeasurements?.width\n    ? Math.round(plotContainerMeasurements.width)\n    : undefined\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  // Plotly.js mutates the layout object it receives, so each component instance\n  // must have its own layout object. Sharing a single object across instances\n  // (e.g. when the expand modal mounts a second FacetNavPanel) causes Plotly's\n  // mutations on one chart to silently corrupt the other. Use useMemo to\n  // produce a fresh layout object per instance — do NOT hoist this to module scope.\n  const plotLayout = useMemo<Partial<Plotly.Layout>>(\n    () => ({\n      showlegend: false,\n      annotations: [],\n      margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n      yaxis: {\n        visible: plotType === 'BAR',\n        showgrid: false,\n        automargin: true,\n      },\n      xaxis: {\n        // Show category labels on the x-axis for vertical bar charts in modal view\n        visible: isModalView && plotType === 'BAR',\n        showgrid: false,\n        automargin: true,\n      },\n    }),\n    [isModalView, plotType],\n  )\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              {plotWidth !== undefined && (\n                <Plot\n                  key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotWidth}`}\n                  layout={plotLayout}\n                  data={plotData?.data ?? []}\n                  style={getPlotStyle(\n                    plotWidth,\n                    plotType,\n                    isModalView\n                      ? MAX_EXPANDED_PLOT_HEIGHT_PX\n                      : MAX_PLOT_HEIGHT_PX,\n                  )}\n                  config={{ displayModeBar: false }}\n                  onClick={evt =>\n                    applyFacetFilter(evt, facetToPlot, applyChangesToGraphSlice)\n                  }\n                />\n              )}\n            </div>\n            <Box sx={{ alignSelf: 'center' }}>\n              <FacetPlotLegendList\n                labels={plotData?.labels}\n                colors={plotData?.colors}\n                isExpanded={isModalView}\n              />\n            </Box>\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 { formatFacetValueCount } from '@/utils/functions/facetCountUtils'\nimport { getCorrespondingColumnForFacet } from '@/utils/functions/queryUtils'\nimport InfoOutlined from '@mui/icons-material/InfoOutlined'\nimport {\n  Box,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  Tooltip,\n} from '@mui/material'\nimport { EnumerationFacet } from '@/utils/functions/enumerationFacet'\nimport {\n  ColumnTypeEnum,\n  FacetColumnRequest,\n  FacetColumnResultValueCount,\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: EnumerationFacet,\n    value: FacetColumnResultValueCount | undefined,\n    isSelected: boolean,\n  ) => void\n  applyChangesToFacetFilter: (facets: FacetColumnRequest[]) => void\n  index: number\n  facetToPlot: EnumerationFacet\n  plotType: PlotType\n  onSetPlotType: (plotType: PlotType) => void\n  onHide: () => void\n  isModalView: boolean\n  onCloseModal?: () => void\n  /**\n   * When true, the plot cannot change the query: clicking a slice or bar does nothing, and the\n   * filter dropdowns are hidden. Presentation controls (expand, chart type, hide) still work.\n   */\n  disableFiltering?: boolean\n}\n\nconst maxLabelLength: number = 19\nexport const MAX_PLOT_HEIGHT_PX = 150\nexport const MAX_EXPANDED_PLOT_HEIGHT_PX = 300\n\n// STACKED_HORIZONTAL_BAR corresponds to a bar chart where we just want to show the proportion (like a pie chart)\n// HORIZONTAL_BAR has one horizontal bar per value, with the first value at the top\nexport type PlotType =\n  | 'PIE'\n  | 'BAR'\n  | 'HORIZONTAL_BAR'\n  | 'STACKED_HORIZONTAL_BAR'\n\nexport type GraphData = {\n  data: Plotly.Data[]\n  labels: FacetWithLabel[]\n  colors: string[]\n}\n\n/**\n * @param facetPostProcessingApplied the QueryResultBundle's `facetPostProcessingApplied`. When set, counts are shown as\n * approximate (see `formatFacetValueCount`) and pie percentages are omitted.\n */\nexport async function extractPlotDataArray(\n  facetToPlot: EnumerationFacet,\n  columnType: ColumnTypeEnum | undefined,\n  index: number,\n  plotType: PlotType,\n  accessToken?: string,\n  facetPostProcessingApplied?: boolean,\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      countText: formatFacetValueCount(\n        facetValue.count,\n        facetToPlot,\n        facetPostProcessingApplied,\n      ),\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  const valueLabels = facetToPlot.facetValues.map(\n    facet => labels.find(label => label.facet === facet)?.label ?? facet.value,\n  )\n  let x: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  let y: Plotly.Datum[] | Plotly.Datum[][] | Plotly.TypedArray | undefined\n  if (plotType === 'BAR') {\n    x = valueLabels\n    y = counts\n  } else if (plotType === 'HORIZONTAL_BAR') {\n    x = counts\n    y = valueLabels\n  } else if (plotType === 'STACKED_HORIZONTAL_BAR') {\n    x = counts\n    y = new Array(x.length).fill('Proportional') // single value for every x value\n  }\n\n  // Approximate counts are hovered as their display text, without a misleading exact value or percentage.\n  let exactHoverCount = '%{value}'\n  if (plotType === 'PIE') {\n    exactHoverCount = '%{value} (%{percent})'\n  } else if (plotType === 'HORIZONTAL_BAR') {\n    exactHoverCount = '%{x}'\n  }\n  const hoverCount = facetPostProcessingApplied\n    ? '%{customdata}'\n    : exactHoverCount\n  const singleChartData: Plotly.Data = {\n    values: plotType === 'PIE' ? counts : undefined,\n    labels: labels.map(el => el.label),\n    text,\n    customdata: facetPostProcessingApplied\n      ? labels.map(el => el.countText)\n      : undefined,\n    x,\n    y,\n    orientation:\n      plotType === 'STACKED_HORIZONTAL_BAR' || plotType === 'HORIZONTAL_BAR'\n        ? 'h'\n        : 'v',\n    // @ts-expect-error\n    facetEnumerationValues: facetToPlot.facetValues.map(\n      facetValue => facetValue.value,\n    ),\n    name: facetToPlot.columnName,\n    textposition: plotType === 'PIE' ? 'inside' : 'none',\n    hovertemplate: `<b>%{text}: </b><br>${hoverCount} <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: EnumerationFacet,\n  callbackApplyFn: FacetNavPanelProps['applyChangesToGraphSlice'],\n) => {\n  if (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      case 'HORIZONTAL_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    disableFiltering = false,\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  // Wait for a non-zero measured width before rendering the plot.\n  // Round width to avoid rebuilds from small pixel fluctuations.\n  const plotWidth = plotContainerMeasurements?.width\n    ? Math.round(plotContainerMeasurements.width)\n    : undefined\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  // Plotly.js mutates the layout object it receives, so each component instance\n  // must have its own layout object. Sharing a single object across instances\n  // (e.g. when the expand modal mounts a second FacetNavPanel) causes Plotly's\n  // mutations on one chart to silently corrupt the other. Use useMemo to\n  // produce a fresh layout object per instance — do NOT hoist this to module scope.\n  const plotLayout = useMemo<Partial<Plotly.Layout>>(\n    () => ({\n      showlegend: false,\n      annotations: [],\n      margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },\n      yaxis: {\n        // Show category labels on the y-axis for horizontal bar charts in modal view\n        visible:\n          plotType === 'BAR' || (isModalView && plotType === 'HORIZONTAL_BAR'),\n        autorange: plotType === 'HORIZONTAL_BAR' ? 'reversed' : undefined,\n        showgrid: false,\n        automargin: true,\n      },\n      xaxis: {\n        // Show category labels on the x-axis for vertical bar charts in modal view\n        visible:\n          (isModalView && plotType === 'BAR') || plotType === 'HORIZONTAL_BAR',\n        showgrid: false,\n        automargin: true,\n      },\n    }),\n    [isModalView, plotType],\n  )\n\n  const { data: plotData } = useQuery({\n    queryKey: [\n      'extractPlotDataArray',\n      facetToPlot,\n      columnType,\n      index,\n      plotType,\n      accessToken,\n      queryMetadata?.facetPostProcessingApplied,\n    ],\n\n    queryFn: () =>\n      extractPlotDataArray(\n        facetToPlot,\n        columnType,\n        index,\n        plotType,\n        accessToken,\n        queryMetadata?.facetPostProcessingApplied,\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={'HORIZONTAL_BAR'}>Horizontal 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={{\n            children: disableFiltering ? 'Close' : 'Apply Filters',\n          }}\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={disableFiltering ? undefined : facetToPlot}\n              onHide={onHide}\n              setShowModal={setShowModal}\n            />\n          )}\n          {isModalView && (\n            <Stack\n              sx={{\n                gap: 2,\n              }}\n            >\n              {!disableFiltering && (\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              )}\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${disableFiltering ? ' FacetNavPanel__body--filteringDisabled' : ''}`}\n          >\n            <div ref={plotContainerRef}>\n              {plotWidth !== undefined && (\n                <Plot\n                  key={`${facetToPlot.columnName}-${facetToPlot.jsonPath}-${plotType}-${plotWidth}`}\n                  layout={plotLayout}\n                  data={plotData?.data ?? []}\n                  style={getPlotStyle(\n                    plotWidth,\n                    plotType,\n                    isModalView\n                      ? MAX_EXPANDED_PLOT_HEIGHT_PX\n                      : MAX_PLOT_HEIGHT_PX,\n                  )}\n                  config={{ displayModeBar: false }}\n                  onClick={\n                    disableFiltering\n                      ? undefined\n                      : evt =>\n                          applyFacetFilter(\n                            evt,\n                            facetToPlot,\n                            applyChangesToGraphSlice,\n                          )\n                  }\n                />\n              )}\n            </div>\n            <Box sx={{ alignSelf: 'center' }}>\n              <FacetPlotLegendList\n                labels={plotData?.labels}\n                colors={plotData?.colors}\n                isExpanded={isModalView}\n              />\n            </Box>\n          </Box>\n        </div>\n      </>\n    )\n  }\n}\n\nexport default FacetNavPanel\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendList.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,2CAiE9D"}
+{"version":3,"file":"FacetPlotLegendList.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAE7D,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,oBAAoB,2CAsE9D"}

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

@@ -43,9 +43,11 @@ function o(o) {
 						variant: "body2",
 						sx: {
 							color: "grey.600",
-							fontSize: "14px"
+							fontSize: "14px",
+							whiteSpace: "nowrap",
+							flexShrink: 0
 						},
-						children: r.count.toLocaleString()
+						children: r.countText
 					})
 				]
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendList.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { FacetPlotLegendProps } from './FacetPlotLegendUtils'\n\nexport function FacetPlotLegendList(props: FacetPlotLegendProps) {\n  const { labels, colors = [], isExpanded } = props\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <div\n      className={`FacetNavPanel__body__legend${isExpanded ? '--expanded' : ''}`}\n    >\n      {labels.slice(0, numLegendItems).map((facetValue, index) => {\n        return (\n          <Tooltip\n            title={facetValue.label}\n            placement={'top'}\n            key={facetValue.label}\n          >\n            <Box\n              sx={{\n                display: 'grid',\n                gridTemplateColumns: '20px auto 60px',\n                alignItems: 'center',\n                gap: '10px',\n              }}\n            >\n              <Box\n                sx={{\n                  width: '14px',\n                  height: '14px',\n                  cursor: 'default',\n                  backgroundColor: colors[index],\n                }}\n                key={`legendLabel_${index}`}\n                style={{ cursor: 'default' }}\n              />\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: 'block',\n                  width: '100%',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  fontSize: '14px',\n                }}\n              >\n                {facetValue.label}\n              </Typography>\n              <Typography\n                variant=\"body2\"\n                sx={{ color: 'grey.600', fontSize: '14px' }}\n              >\n                {facetValue.count.toLocaleString()}\n              </Typography>\n            </Box>\n          </Tooltip>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAgB,EAAoB,GAA6B;CAC/D,IAAM,EAAE,WAAQ,YAAS,CAAC,GAAG,kBAAe;CAC5C,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAC,OAAD;EACE,WAAW,8BAA8B,IAAa,eAAe;YAEpE,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAE9C,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,WAAW;aAGX,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;KACZ,KAAK;IACP;cANF;KAQE,kBAAC,GAAD;MACE,IAAI;OACF,OAAO;OACP,QAAQ;OACR,QAAQ;OACR,iBAAiB,EAAO;MAC1B;MAEA,OAAO,EAAE,QAAQ,UAAU;KAC5B,GAFM,eAAe,GAErB;KACD,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,SAAS;OACT,OAAO;OACP,UAAU;OACV,cAAc;OACd,YAAY;OACZ,UAAU;MACZ;gBAEC,EAAW;KACF,CAAA;KACZ,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OAAE,OAAO;OAAY,UAAU;MAAO;gBAEzC,EAAW,MAAM,eAAe;KACvB,CAAA;IACT;;EACE,GAxCF,EAAW,KAwCT,CAEZ;CACE,CAAA;AAET"}
+{"version":3,"file":"FacetPlotLegendList.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendList.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { FacetPlotLegendProps } from './FacetPlotLegendUtils'\n\nexport function FacetPlotLegendList(props: FacetPlotLegendProps) {\n  const { labels, colors = [], isExpanded } = props\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <div\n      className={`FacetNavPanel__body__legend${isExpanded ? '--expanded' : ''}`}\n    >\n      {labels.slice(0, numLegendItems).map((facetValue, index) => {\n        return (\n          <Tooltip\n            title={facetValue.label}\n            placement={'top'}\n            key={facetValue.label}\n          >\n            <Box\n              sx={{\n                display: 'grid',\n                gridTemplateColumns: '20px auto 60px',\n                alignItems: 'center',\n                gap: '10px',\n              }}\n            >\n              <Box\n                sx={{\n                  width: '14px',\n                  height: '14px',\n                  cursor: 'default',\n                  backgroundColor: colors[index],\n                }}\n                key={`legendLabel_${index}`}\n                style={{ cursor: 'default' }}\n              />\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  display: 'block',\n                  width: '100%',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                  whiteSpace: 'nowrap',\n                  fontSize: '14px',\n                }}\n              >\n                {facetValue.label}\n              </Typography>\n              <Typography\n                variant=\"body2\"\n                sx={{\n                  color: 'grey.600',\n                  fontSize: '14px',\n                  whiteSpace: 'nowrap',\n                  flexShrink: 0,\n                }}\n              >\n                {facetValue.countText}\n              </Typography>\n            </Box>\n          </Tooltip>\n        )\n      })}\n    </div>\n  )\n}\n"],"mappings":";;;AAGA,SAAgB,EAAoB,GAA6B;CAC/D,IAAM,EAAE,WAAQ,YAAS,CAAC,GAAG,kBAAe;CAC5C,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAC,OAAD;EACE,WAAW,8BAA8B,IAAa,eAAe;YAEpE,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAE9C,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,WAAW;aAGX,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,qBAAqB;KACrB,YAAY;KACZ,KAAK;IACP;cANF;KAQE,kBAAC,GAAD;MACE,IAAI;OACF,OAAO;OACP,QAAQ;OACR,QAAQ;OACR,iBAAiB,EAAO;MAC1B;MAEA,OAAO,EAAE,QAAQ,UAAU;KAC5B,GAFM,eAAe,GAErB;KACD,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,SAAS;OACT,OAAO;OACP,UAAU;OACV,cAAc;OACd,YAAY;OACZ,UAAU;MACZ;gBAEC,EAAW;KACF,CAAA;KACZ,kBAAC,GAAD;MACE,SAAQ;MACR,IAAI;OACF,OAAO;OACP,UAAU;OACV,YAAY;OACZ,YAAY;MACd;gBAEC,EAAW;KACF,CAAA;IACT;;EACE,GA7CF,EAAW,KA6CT,CAEZ;CACE,CAAA;AAET"}

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

@@ -72,7 +72,7 @@ function c(c) {
 					color: "grey.600",
 					textAlign: "right"
 				},
-				children: e.count
+				children: e.countText
 			}) })] }, e.label);
 		}) })]
 	}), p && /* @__PURE__ */ o(n, {

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendTable.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendTable.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport {\n  FacetPlotLegendProps,\n  MAX_LEGEND_LENGTH,\n  truncate,\n} from './FacetPlotLegendUtils'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\n\ntype FacetPlotLegendTableProps = FacetPlotLegendProps & {\n  facetName?: string\n  linkToFullQuery?: string\n}\n\nexport function FacetPlotLegendTable(props: FacetPlotLegendTableProps) {\n  const { facetName, labels, colors = [], isExpanded, linkToFullQuery } = props\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <>\n      <Box\n        component={'table'}\n        className={`FacetNavPanel__body__legend${\n          isExpanded ? '--expanded' : ''\n        }`}\n        sx={{ width: '100%', color: 'grey.800', 'td,th': { py: 0.5 } }}\n      >\n        <thead>\n          <Box\n            component={'tr'}\n            sx={{ borderBottom: '1px solid', borderBottomColor: 'grey.300' }}\n          >\n            <th>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  fontWeight: 700,\n                  size: '14px',\n                }}\n              >\n                {facetName}\n              </Typography>\n            </th>\n            <th style={{ textAlign: 'right', marginRight: '16px' }}>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  size: '14px',\n                  fontWeight: 700,\n                  textAlign: 'right',\n                }}\n              >\n                {unitDescription}\n              </Typography>\n            </th>\n          </Box>\n        </thead>\n        <tbody>\n          {labels.slice(0, numLegendItems).map((facetValue, index) => {\n            const labelDisplay = truncate(facetValue.label, MAX_LEGEND_LENGTH)\n            return (\n              <tr key={facetValue.label}>\n                <td>\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 1,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        width: '14px',\n                        height: '14px',\n                        cursor: 'default',\n                        backgroundColor: colors[index],\n                      }}\n                      key={`legendLabel_${index}`}\n                      style={{ cursor: 'default' }}\n                    />\n                    <Typography variant=\"body1\" sx={{ fontSize: '14px' }}>\n                      {labelDisplay}\n                    </Typography>\n                  </Box>\n                </td>\n                <td>\n                  <Typography\n                    variant=\"body1\"\n                    sx={{\n                      fontSize: '14px',\n                      color: 'grey.600',\n                      textAlign: 'right',\n                    }}\n                  >\n                    {facetValue.count}\n                  </Typography>\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n      </Box>\n      {linkToFullQuery && (\n        <Box sx={{ my: 2 }}>\n          <Link href={linkToFullQuery}>\n            View {labels.length} {facetName} options\n          </Link>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAaA,SAAgB,EAAqB,GAAkC;CACrE,IAAM,EAAE,cAAW,WAAQ,YAAS,CAAC,GAAG,eAAY,uBAAoB,GAElE,EAAE,uBAAoB,EAA6B;CAEzD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAW;EACX,WAAW,8BACT,IAAa,eAAe;EAE9B,IAAI;GAAE,OAAO;GAAQ,OAAO;GAAY,SAAS,EAAE,IAAI,GAAI;EAAE;YAL/D,CAOE,kBAAC,SAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IAAE,cAAc;IAAa,mBAAmB;GAAW;aAFjE,CAIE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAS;IACT,IAAI;KACF,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,EACV,CAAA,GACJ,kBAAC,MAAD;IAAI,OAAO;KAAE,WAAW;KAAS,aAAa;IAAO;cACnD,kBAAC,GAAD;KACE,SAAS;KACT,IAAI;MACF,MAAM;MACN,YAAY;MACZ,WAAW;KACb;eAEC;IACS,CAAA;GACV,CAAA,CACD;KACA,CAAA,GACP,kBAAC,SAAD,EAAA,UACG,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAAU;GAC1D,IAAM,IAAe,EAAS,EAAW,OAAA,EAAwB;GACjE,OACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;IACP;cALF,CAOE,kBAAC,GAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,iBAAiB,EAAO;KAC1B;KAEA,OAAO,EAAE,QAAQ,UAAU;IAC5B,GAFM,eAAe,GAErB,GACD,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,UAAU,OAAO;eAChD;IACS,CAAA,CACT;MACH,CAAA,GACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;IACb;cAEC,EAAW;GACF,CAAA,EACV,CAAA,CACF,EAAA,GApCK,EAAW,KAoChB;EAER,CAAC,EACI,CAAA,CACJ;KACJ,KACC,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,EAAE;YACf,kBAAC,GAAD;GAAM,MAAM;aAAZ;IAA6B;IACrB,EAAO;IAAO;IAAE;IAAU;GAC5B;;CACH,CAAA,CAEP,EAAA,CAAA;AAEN"}
+{"version":3,"file":"FacetPlotLegendTable.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendTable.tsx"],"sourcesContent":["import { Box, Link, Typography } from '@mui/material'\nimport {\n  FacetPlotLegendProps,\n  MAX_LEGEND_LENGTH,\n  truncate,\n} from './FacetPlotLegendUtils'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\n\ntype FacetPlotLegendTableProps = FacetPlotLegendProps & {\n  facetName?: string\n  linkToFullQuery?: string\n}\n\nexport function FacetPlotLegendTable(props: FacetPlotLegendTableProps) {\n  const { facetName, labels, colors = [], isExpanded, linkToFullQuery } = props\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  if (!labels) {\n    return <></>\n  }\n  const numLegendItems = isExpanded\n    ? Math.min(labels.length, 9)\n    : Math.min(labels.length, 4)\n  if (numLegendItems === 0) {\n    return <></>\n  }\n  return (\n    <>\n      <Box\n        component={'table'}\n        className={`FacetNavPanel__body__legend${\n          isExpanded ? '--expanded' : ''\n        }`}\n        sx={{ width: '100%', color: 'grey.800', 'td,th': { py: 0.5 } }}\n      >\n        <thead>\n          <Box\n            component={'tr'}\n            sx={{ borderBottom: '1px solid', borderBottomColor: 'grey.300' }}\n          >\n            <th>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  fontWeight: 700,\n                  size: '14px',\n                }}\n              >\n                {facetName}\n              </Typography>\n            </th>\n            <th style={{ textAlign: 'right', marginRight: '16px' }}>\n              <Typography\n                variant={'body1'}\n                sx={{\n                  size: '14px',\n                  fontWeight: 700,\n                  textAlign: 'right',\n                }}\n              >\n                {unitDescription}\n              </Typography>\n            </th>\n          </Box>\n        </thead>\n        <tbody>\n          {labels.slice(0, numLegendItems).map((facetValue, index) => {\n            const labelDisplay = truncate(facetValue.label, MAX_LEGEND_LENGTH)\n            return (\n              <tr key={facetValue.label}>\n                <td>\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 1,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        width: '14px',\n                        height: '14px',\n                        cursor: 'default',\n                        backgroundColor: colors[index],\n                      }}\n                      key={`legendLabel_${index}`}\n                      style={{ cursor: 'default' }}\n                    />\n                    <Typography variant=\"body1\" sx={{ fontSize: '14px' }}>\n                      {labelDisplay}\n                    </Typography>\n                  </Box>\n                </td>\n                <td>\n                  <Typography\n                    variant=\"body1\"\n                    sx={{\n                      fontSize: '14px',\n                      color: 'grey.600',\n                      textAlign: 'right',\n                    }}\n                  >\n                    {facetValue.countText}\n                  </Typography>\n                </td>\n              </tr>\n            )\n          })}\n        </tbody>\n      </Box>\n      {linkToFullQuery && (\n        <Box sx={{ my: 2 }}>\n          <Link href={linkToFullQuery}>\n            View {labels.length} {facetName} options\n          </Link>\n        </Box>\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAaA,SAAgB,EAAqB,GAAkC;CACrE,IAAM,EAAE,cAAW,WAAQ,YAAS,CAAC,GAAG,eAAY,uBAAoB,GAElE,EAAE,uBAAoB,EAA6B;CAEzD,IAAI,CAAC,GACH,OAAO,kBAAA,GAAA,CAAI,CAAA;CAEb,IAAM,IAAiB,IACnB,KAAK,IAAI,EAAO,QAAQ,CAAC,IACzB,KAAK,IAAI,EAAO,QAAQ,CAAC;CAI7B,OAHI,MAAmB,IACd,kBAAA,GAAA,CAAI,CAAA,IAGX,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAW;EACX,WAAW,8BACT,IAAa,eAAe;EAE9B,IAAI;GAAE,OAAO;GAAQ,OAAO;GAAY,SAAS,EAAE,IAAI,GAAI;EAAE;YAL/D,CAOE,kBAAC,SAAD,EAAA,UACE,kBAAC,GAAD;GACE,WAAW;GACX,IAAI;IAAE,cAAc;IAAa,mBAAmB;GAAW;aAFjE,CAIE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAS;IACT,IAAI;KACF,YAAY;KACZ,MAAM;IACR;cAEC;GACS,CAAA,EACV,CAAA,GACJ,kBAAC,MAAD;IAAI,OAAO;KAAE,WAAW;KAAS,aAAa;IAAO;cACnD,kBAAC,GAAD;KACE,SAAS;KACT,IAAI;MACF,MAAM;MACN,YAAY;MACZ,WAAW;KACb;eAEC;IACS,CAAA;GACV,CAAA,CACD;KACA,CAAA,GACP,kBAAC,SAAD,EAAA,UACG,EAAO,MAAM,GAAG,CAAc,EAAE,KAAK,GAAY,MAAU;GAC1D,IAAM,IAAe,EAAS,EAAW,OAAA,EAAwB;GACjE,OACE,kBAAC,MAAD,EAAA,UAAA,CACE,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;IACP;cALF,CAOE,kBAAC,GAAD;KACE,IAAI;MACF,OAAO;MACP,QAAQ;MACR,QAAQ;MACR,iBAAiB,EAAO;KAC1B;KAEA,OAAO,EAAE,QAAQ,UAAU;IAC5B,GAFM,eAAe,GAErB,GACD,kBAAC,GAAD;KAAY,SAAQ;KAAQ,IAAI,EAAE,UAAU,OAAO;eAChD;IACS,CAAA,CACT;MACH,CAAA,GACJ,kBAAC,MAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAQ;IACR,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;IACb;cAEC,EAAW;GACF,CAAA,EACV,CAAA,CACF,EAAA,GApCK,EAAW,KAoChB;EAER,CAAC,EACI,CAAA,CACJ;KACJ,KACC,kBAAC,GAAD;EAAK,IAAI,EAAE,IAAI,EAAE;YACf,kBAAC,GAAD;GAAM,MAAM;aAAZ;IAA6B;IACrB,EAAO;IAAO;IAAE;IAAU;GAC5B;;CACH,CAAA,CAEP,EAAA,CAAA;AAEN"}

package/dist/components/widgets/facet-nav/FacetPlotLegendUtils.d.ts

@@ -3,6 +3,8 @@ export declare function truncate(str: string | undefined, n: number): string | u
 export type FacetWithLabel = {
     label: string;
     count: number;
+    /** The count as displayed: localized, or a range/approximation for post-processed facet counts. */
+    countText: string;
 };
 export type FacetPlotLegendProps = {
     labels?: FacetWithLabel[];

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,EAAE,MAAW,CAAA;AAE3C,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,MAAM,sBAM1D;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA"}
+{"version":3,"file":"FacetPlotLegendUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,EAAE,MAAW,CAAA;AAE3C,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,MAAM,sBAM1D;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,mGAAmG;IACnG,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,CAAC,EAAE,cAAc,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"FacetPlotLegendUtils.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"sourcesContent":["export const MAX_LEGEND_LENGTH: number = 30\n\nexport function truncate(str: string | undefined, n: number) {\n  if (!str) {\n    return str\n  }\n  const trimmedStr: string = str.trim()\n  return trimmedStr.length > n ? trimmedStr.substring(0, n - 1) + '…' : str\n}\n\nexport type FacetWithLabel = {\n  label: string\n  count: number\n}\n\nexport type FacetPlotLegendProps = {\n  labels?: FacetWithLabel[]\n  colors?: string[]\n  isExpanded: boolean\n}\n"],"mappings":";AAAA,IAAa,IAA4B;AAEzC,SAAgB,EAAS,GAAyB,GAAW;CAC3D,IAAI,CAAC,GACH,OAAO;CAET,IAAM,IAAqB,EAAI,KAAK;CACpC,OAAO,EAAW,SAAS,IAAI,EAAW,UAAU,GAAG,IAAI,CAAC,IAAI,MAAM;AACxE"}
+{"version":3,"file":"FacetPlotLegendUtils.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/FacetPlotLegendUtils.ts"],"sourcesContent":["export const MAX_LEGEND_LENGTH: number = 30\n\nexport function truncate(str: string | undefined, n: number) {\n  if (!str) {\n    return str\n  }\n  const trimmedStr: string = str.trim()\n  return trimmedStr.length > n ? trimmedStr.substring(0, n - 1) + '…' : str\n}\n\nexport type FacetWithLabel = {\n  label: string\n  count: number\n  /** The count as displayed: localized, or a range/approximation for post-processed facet counts. */\n  countText: string\n}\n\nexport type FacetPlotLegendProps = {\n  labels?: FacetWithLabel[]\n  colors?: string[]\n  isExpanded: boolean\n}\n"],"mappings":";AAAA,IAAa,IAA4B;AAEzC,SAAgB,EAAS,GAAyB,GAAW;CAC3D,IAAI,CAAC,GACH,OAAO;CAET,IAAM,IAAqB,EAAI,KAAK;CACpC,OAAO,EAAW,SAAS,IAAI,EAAW,UAAU,GAAG,IAAI,CAAC,IAAI,MAAM;AACxE"}

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

@@ -5,6 +5,13 @@ export type PlotsContainerProps = {
     facetsToPlot?: string[];
     customPlots?: QueryWrapperSynapsePlotProps[];
     initialPlotTypeByFacetColumnName?: Record<string, PlotType>;
+    /** Chart type of facet plots without an entry in `initialPlotTypeByFacetColumnName`. Defaults to a pie chart. */
+    defaultPlotType?: PlotType;
+    /**
+     * When true, the facet plots cannot change the query: slices can't be clicked and the filter
+     * dropdowns are hidden. Set while the Query Builder owns the filters.
+     */
+    disableFiltering?: boolean;
 };
 type CustomPlotIdentifier = {
     title: string;

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

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

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

@@ -1,6 +1,6 @@
-import { facetObjectMatchesDefinition as e } from "../../../utils/functions/queryUtils.js";
-import { useSuspenseGetQueryMetadata as t } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as n } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useQueryVisualizationContext as e } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { facetObjectMatchesDefinition as t } from "../../../utils/functions/queryUtils.js";
+import { useSuspenseGetQueryMetadata as n } from "../../QueryWrapper/useGetQueryMetadata.js";
 import "../../QueryVisualizationWrapper/index.js";
 import r from "./FacetNavPanel.js";
 import i, { getFacets as a } from "./useFacetPlots.js";
@@ -10,92 +10,94 @@ import { Suspense as c, useEffect as l, useMemo as u, useState as d } from "reac
 import { Box as f, Button as p } from "@mui/material";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/widgets/facet-nav/PlotsContainer.tsx
-var _ = 2, v = (t, n) => "__custom" in n && "__custom" in t ? t.title == n.title : !("__custom" in n) && !("__custom" in t) ? e(t, n) : !1;
+var _ = 2, v = (e, n) => "__custom" in n && "__custom" in e ? e.title == n.title : !("__custom" in n) && !("__custom" in e) ? t(e, n) : !1;
 function y(e) {
 	return e === "bar" ? "BAR" : "PIE";
 }
-var b = (e) => "__custom" in e.plotId ? `custom-${e.plotId.title}` : `facet-${e.plotId.columnName}-${e.plotId.jsonPath}`, x = (e, t) => !!t.find((t) => v(t.plotId, e)), S = (e) => ({
+var b = (e) => "__custom" in e.plotId ? `custom-${e.plotId.title}` : `facet-${e.plotId.columnName}-${e.plotId.jsonPath}`, x = (e, t) => t.some((t) => v(t.plotId, e)), S = (e) => ({
 	__custom: !0,
 	title: e.title ?? ""
-}), C = (e = [], t = [], n) => [...e.map((e, t) => ({
+}), C = (e = [], t = [], n, r) => [...e.map((e, t) => ({
 	plotId: S(e),
 	isHidden: t >= _,
 	plotType: y(e.type)
-})), ...t.map((t, r) => ({
+})), ...t.map((t, i) => ({
 	plotId: t.facetToPlot,
-	isHidden: r + e.length >= _,
-	plotType: n?.[t.facetToPlot.columnName] ?? T
+	isHidden: i + e.length >= _,
+	plotType: n?.[t.facetToPlot.columnName] ?? r
 }))], w = (e, t, n) => t.some((t) => v(S(t), e.plotId)) || n.some((t) => v(t.facetToPlot, e.plotId)), T = "PIE", E = [], D = [];
-function O(e) {
-	let { facetsToPlot: s = E, customPlots: c = D, initialPlotTypeByFacetColumnName: y } = e, { data: O } = t(), { showPlots: k } = n(), [A, j] = d([]), M = i(s), N = (e) => A.find((t) => v(e, t.plotId))?.plotType ?? T;
+function O(t) {
+	let { facetsToPlot: s = E, customPlots: c = D, initialPlotTypeByFacetColumnName: y, defaultPlotType: O = T, disableFiltering: k } = t, { data: A } = n(), { showPlots: j } = e(), [M, N] = d([]), P = i(s), F = (e) => M.find((t) => v(e, t.plotId))?.plotType ?? O;
 	l(() => {
-		let e = C(c, M, y);
-		j((t) => {
+		let e = C(c, P, y, O);
+		N((t) => {
 			let n = e.filter((e) => !x(e.plotId, t));
-			return [...t.filter((e) => w(e, c, M)), ...n];
+			return [...t.filter((e) => w(e, c, P)), ...n];
 		});
 	}, [
 		c,
-		M,
-		y
+		P,
+		y,
+		O
 	]);
-	let P = (e) => {
-		j((t) => t.map((t, n) => e ? {
+	let I = (e) => {
+		N((t) => t.map((t, n) => e ? {
 			...t,
 			isHidden: !1
 		} : {
 			...t,
 			isHidden: n >= _
 		}));
-	}, F = (e) => A.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, I = u(() => A.find((e) => e.isHidden === !0) ? "MORE" : A.length <= _ ? "NONE" : "LESS", [A]);
+	}, L = (e) => M.find((t) => v(e, t.plotId) && t.isHidden === !0) !== void 0, R = u(() => M.some((e) => e.isHidden === !0) ? "MORE" : M.length <= _ ? "NONE" : "LESS", [M]);
 	l(() => {
-		I === "LESS" && requestAnimationFrame(() => {
+		R === "LESS" && requestAnimationFrame(() => {
 			window.dispatchEvent(new Event("resize"));
 		});
-	}, [I]);
-	let L = (e) => {
-		z(e, "isHidden", !0);
-	}, R = (e, t) => {
-		z(e, "plotType", t);
-	}, z = (e, t, n) => {
-		j((r) => r.map((r) => v(e, r.plotId) ? {
+	}, [R]);
+	let z = (e) => {
+		V(e, "isHidden", !0);
+	}, B = (e, t) => {
+		V(e, "plotType", t);
+	}, V = (e, t, n) => {
+		N((r) => r.map((r) => v(e, r.plotId) ? {
 			...r,
 			[t]: n
 		} : r));
-	}, B = a(O, s).map((e, t) => ({
+	}, H = a(A, s).map((e, t) => ({
 		facet: {
 			columnName: e.columnName,
 			jsonPath: e.jsonPath
 		},
 		colorIndex: t
 	}));
-	return /* @__PURE__ */ h(m, { children: A.length > 0 && /* @__PURE__ */ g("div", {
-		className: `PlotsContainer ${k ? "" : "hidden"} ${I === "LESS" ? "less" : ""}`,
+	return /* @__PURE__ */ h(m, { children: M.length > 0 && /* @__PURE__ */ g("div", {
+		className: `PlotsContainer ${j ? "" : "hidden"} ${R === "LESS" ? "less" : ""}`,
 		children: [/* @__PURE__ */ h("div", {
 			className: "PlotsContainer__row",
 			role: "list",
-			children: A.map((e) => {
-				let t = "__custom" in e.plotId, n = c.find((t) => v(S(t), e.plotId)), i = M.find((t) => v(t.facetToPlot, e.plotId));
+			children: M.map((e) => {
+				let t = "__custom" in e.plotId, n = c.find((t) => v(S(t), e.plotId)), i = P.find((t) => v(t.facetToPlot, e.plotId));
 				return /* @__PURE__ */ g("div", {
 					className: [t ? "PlotsContainer__row__item--custom" : void 0, t && n?.fullWidth ? "PlotsContainer__row__item--full-width" : void 0].filter(Boolean).join(" ") || void 0,
 					style: {
 						minWidth: "435px",
-						display: F(e.plotId) ? "none" : "block"
+						display: L(e.plotId) ? "none" : "block"
 					},
 					children: [t && n && /* @__PURE__ */ h(o, {
 						...n,
-						onHide: () => L(e.plotId)
+						onHide: () => z(e.plotId)
 					}), !t && i && /* @__PURE__ */ h(r, {
-						index: B.find((t) => v(t.facet, e.plotId))?.colorIndex,
-						onHide: () => L(e.plotId),
-						plotType: N(e.plotId),
-						onSetPlotType: (t) => R(e.plotId, t),
+						index: H.find((t) => v(t.facet, e.plotId))?.colorIndex,
+						onHide: () => z(e.plotId),
+						plotType: F(e.plotId),
+						onSetPlotType: (t) => B(e.plotId, t),
 						isModalView: !1,
+						disableFiltering: k,
 						...i
 					})]
 				}, b(e));
 			})
-		}), I !== "NONE" && /* @__PURE__ */ h(f, {
+		}), R !== "NONE" && /* @__PURE__ */ h(f, {
 			sx: {
 				display: "flex",
 				justifyContent: "center",
@@ -106,18 +108,18 @@ function O(e) {
 			children: /* @__PURE__ */ h(p, {
 				variant: "contained",
 				color: "secondary",
-				onClick: () => P(I === "MORE"),
+				onClick: () => I(R === "MORE"),
 				sx: { width: "150px" },
-				children: I === "LESS" ? "Hide Charts" : "View All Charts"
+				children: R === "LESS" ? "Hide Charts" : "View All Charts"
 			})
 		})]
 	}) });
 }
-function k(e) {
-	let { showPlots: t } = n();
+function k(t) {
+	let { showPlots: n } = e();
 	return /* @__PURE__ */ h(c, {
-		fallback: t ? /* @__PURE__ */ h(s, {}) : null,
-		children: /* @__PURE__ */ h(O, { ...e })
+		fallback: n ? /* @__PURE__ */ h(s, {}) : null,
+		children: /* @__PURE__ */ h(O, { ...t })
 	});
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n  QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n  FacetNavPanelProps,\n  PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' | 'LESS' | 'NONE'\nexport type PlotsContainerProps = {\n  facetsToPlot?: string[]\n  customPlots?: QueryWrapperSynapsePlotProps[]\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n}\ntype CustomPlotIdentifier = {\n  title: string\n  __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier | CustomPlotIdentifier\n\nexport type UiPlotState = {\n  plotId: PlotIdentifier\n  isHidden: boolean\n  plotType: PlotType\n  index?: number\n}\nconst plotMatchesDefinition = (\n  definition: PlotIdentifier,\n  plotId: PlotIdentifier,\n) => {\n  if ('__custom' in plotId && '__custom' in definition) {\n    return definition.title == plotId.title\n  } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n    return facetObjectMatchesDefinition(definition, plotId)\n  } else {\n    return false\n  }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n  plotlyPlotType: PlotlyPlotType,\n): PlotType {\n  if (plotlyPlotType === 'bar') {\n    return 'BAR'\n  } else if (plotlyPlotType === 'pie') {\n    return 'PIE'\n  }\n  return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n  if ('__custom' in plotUiState.plotId) {\n    // For custom plots\n    return `custom-${plotUiState.plotId.title}`\n  } else {\n    // For facet plots\n    return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n  }\n}\n\nconst isPlotInState = (\n  plotId: PlotIdentifier,\n  plotUiStateArray: UiPlotState[],\n): boolean => {\n  return !!plotUiStateArray.find(plot => {\n    return plotMatchesDefinition(plot.plotId, plotId)\n  })\n}\n\nconst getCustomPlotIdentifier = (\n  customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n  return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n  customPlots: QueryWrapperSynapsePlotProps[] = [],\n  facetNavPanelPropsArray: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[] = [],\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>,\n): UiPlotState[] => [\n  ...customPlots.map((plotProps, index) => ({\n    plotId: getCustomPlotIdentifier(plotProps),\n    isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n    plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n  })),\n  ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n    plotId: facetPlotProps.facetToPlot,\n    isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n    plotType:\n      initialPlotTypeByFacetColumnName?.[\n        facetPlotProps.facetToPlot.columnName\n      ] ?? DEFAULT_PLOT_TYPE,\n  })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n  prevPlot: UiPlotState,\n  customPlots: QueryWrapperSynapsePlotProps[],\n  facetNavPanelProps: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[],\n): boolean => {\n  return (\n    customPlots.some(customPlot =>\n      plotMatchesDefinition(\n        getCustomPlotIdentifier(customPlot),\n        prevPlot.plotId,\n      ),\n    ) ||\n    facetNavPanelProps.some(facetPlot =>\n      plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n    )\n  )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n  const {\n    facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n    customPlots = DEFAULT_CUSTOM_PLOTS,\n    initialPlotTypeByFacetColumnName,\n  } = props\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n  const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n  const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n  const getPlotType = (plotId: PlotIdentifier): PlotType => {\n    const plotType = plotUiStateArray.find(item =>\n      plotMatchesDefinition(plotId, item.plotId),\n    )?.plotType\n    return plotType ?? DEFAULT_PLOT_TYPE\n  }\n\n  useEffect(() => {\n    const combinedNewPlots = getCombinedNewPlots(\n      customPlots,\n      facetNavPanelPropsArray,\n      initialPlotTypeByFacetColumnName,\n    )\n\n    // Update the state with new plots\n    setPlotUiStateArray(prevPlots => {\n      // Filter to only include new plots\n      const newPlots = combinedNewPlots.filter(plot => {\n        const inState = isPlotInState(plot.plotId, prevPlots)\n        return !inState\n      })\n\n      const updatedPlots = prevPlots.filter(prevPlot =>\n        isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n      )\n\n      // Append new plots\n      const combinedPlots = [...updatedPlots, ...newPlots]\n      return combinedPlots\n    })\n  }, [customPlots, facetNavPanelPropsArray, initialPlotTypeByFacetColumnName])\n\n  // when 'show more/less' is clicked\n  const onShowMoreClick = (shouldShowMore: boolean) => {\n    setPlotUiStateArray(plotUiStateArray => {\n      return plotUiStateArray.map((item, index) => {\n        if (shouldShowMore) {\n          // show everything\n          return { ...item, isHidden: false }\n        }\n        // otherwise hide everything except the first few items\n        return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n      })\n    })\n  }\n\n  const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n    const itemHidden = plotUiStateArray.find(\n      item =>\n        plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n    )\n    const result = itemHidden !== undefined\n    return result\n  }\n\n  const showMoreButtonState = useMemo<ShowMoreState>(() => {\n    if (\n      // if at least one item is hidden\n      plotUiStateArray.find(item => item.isHidden === true)\n    ) {\n      return 'MORE'\n    } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n      return 'NONE'\n    } else {\n      return 'LESS'\n    }\n  }, [plotUiStateArray])\n\n  // When all charts become visible (transition to 'LESS'), trigger a resize event so\n  // Plotly recalculates dimensions for charts that were previously hidden (display: none).\n  useEffect(() => {\n    if (showMoreButtonState === 'LESS') {\n      requestAnimationFrame(() => {\n        window.dispatchEvent(new Event('resize'))\n      })\n    }\n  }, [showMoreButtonState])\n\n  // hides plot graph\n  const hidePlotInGrid = (plotId: PlotIdentifier) => {\n    setUiPropertyForPlot(plotId, 'isHidden', true)\n  }\n\n  const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n    setUiPropertyForPlot(plotId, 'plotType', plotType)\n  }\n\n  const setUiPropertyForPlot = (\n    plotId: PlotIdentifier,\n    propName: keyof UiPlotState,\n    value: boolean | PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n  ) => {\n    setPlotUiStateArray(plotUiStateArray =>\n      plotUiStateArray.map(item =>\n        plotMatchesDefinition(plotId, item.plotId)\n          ? { ...item, [propName]: value }\n          : item,\n      ),\n    )\n  }\n\n  const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n    // TODO: customPlots should use the color index\n    // additionally, it is unclear why this object is created\n    // We can probably just pass the index from `plotUiStateArray.map)\n    getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n      return {\n        facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n        colorIndex: index,\n      }\n    })\n\n  return (\n    <>\n      {plotUiStateArray.length > 0 && (\n        <div\n          className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n            showMoreButtonState === 'LESS' ? 'less' : ''\n          }`}\n        >\n          <div className=\"PlotsContainer__row\" role=\"list\">\n            {plotUiStateArray.map(plotUiState => {\n              const isCustomPlot = '__custom' in plotUiState.plotId\n              const customPlotProps = customPlots.find(customPlot =>\n                plotMatchesDefinition(\n                  getCustomPlotIdentifier(customPlot),\n                  plotUiState.plotId,\n                ),\n              )\n              const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n                plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n              )\n\n              return (\n                <div\n                  className={\n                    [\n                      isCustomPlot\n                        ? 'PlotsContainer__row__item--custom'\n                        : undefined,\n                      isCustomPlot && customPlotProps?.fullWidth\n                        ? 'PlotsContainer__row__item--full-width'\n                        : undefined,\n                    ]\n                      .filter(Boolean)\n                      .join(' ') || undefined\n                  }\n                  style={{\n                    minWidth: '435px',\n                    display: isPlotHiddenInGrid(plotUiState.plotId)\n                      ? 'none'\n                      : 'block',\n                  }}\n                  key={generatePlotKey(plotUiState)}\n                >\n                  {isCustomPlot && customPlotProps && (\n                    <QueryWrapperSynapsePlot\n                      {...customPlotProps}\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                    />\n                  )}\n                  {!isCustomPlot && facetNavPanelProps && (\n                    <FacetNavPanel\n                      index={\n                        colorTracker.find(el =>\n                          plotMatchesDefinition(el.facet, plotUiState.plotId),\n                        )?.colorIndex!\n                      }\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                      plotType={getPlotType(plotUiState.plotId)}\n                      onSetPlotType={(plotType: PlotType) =>\n                        setPlotType(plotUiState.plotId, plotType)\n                      }\n                      isModalView={false}\n                      {...facetNavPanelProps}\n                    />\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {showMoreButtonState !== 'NONE' && (\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                backgroundColor: 'grey.100',\n                p: 2,\n                mt: 2,\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"secondary\"\n                onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n                sx={{ width: '150px' }}\n              >\n                {showMoreButtonState === 'LESS'\n                  ? 'Hide Charts'\n                  : 'View All Charts'}\n              </Button>\n            </Box>\n          )}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n  const { showPlots } = useQueryVisualizationContext()\n  return (\n    <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n      <PlotsContainer {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"PlotsContainer.js","names":[],"sources":["../../../../src/components/widgets/facet-nav/PlotsContainer.tsx"],"sourcesContent":["import { UniqueFacetIdentifier } from '@/utils'\nimport { facetObjectMatchesDefinition } from '@/utils/functions/queryUtils'\nimport { Box, Button } from '@mui/material'\nimport type { PlotType as PlotlyPlotType } from 'plotly.js-basic-dist'\nimport { Suspense, useEffect, useMemo, useState } from 'react'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport QueryWrapperSynapsePlot, {\n  QueryWrapperSynapsePlotProps,\n} from '../../QueryWrapperPlotNav/QueryWrapperSynapsePlot'\nimport FacetNavPanel, {\n  FacetNavPanelProps,\n  PlotType,\n} from '../facet-nav/FacetNavPanel'\nimport { PlotsContainerSkeleton } from './PlotsContainerSkeleton'\nimport useFacetPlots, { getFacets } from './useFacetPlots'\n\nconst DEFAULT_VISIBLE_PLOTS = 2\ntype ShowMoreState = 'MORE' | 'LESS' | 'NONE'\nexport type PlotsContainerProps = {\n  facetsToPlot?: string[]\n  customPlots?: QueryWrapperSynapsePlotProps[]\n  initialPlotTypeByFacetColumnName?: Record<string, PlotType>\n  /** Chart type of facet plots without an entry in `initialPlotTypeByFacetColumnName`. Defaults to a pie chart. */\n  defaultPlotType?: PlotType\n  /**\n   * When true, the facet plots cannot change the query: slices can't be clicked and the filter\n   * dropdowns are hidden. Set while the Query Builder owns the filters.\n   */\n  disableFiltering?: boolean\n}\ntype CustomPlotIdentifier = {\n  title: string\n  __custom: true\n}\nexport type PlotIdentifier = UniqueFacetIdentifier | CustomPlotIdentifier\n\nexport type UiPlotState = {\n  plotId: PlotIdentifier\n  isHidden: boolean\n  plotType: PlotType\n  index?: number\n}\nconst plotMatchesDefinition = (\n  definition: PlotIdentifier,\n  plotId: PlotIdentifier,\n) => {\n  if ('__custom' in plotId && '__custom' in definition) {\n    return definition.title == plotId.title\n  } else if (!('__custom' in plotId) && !('__custom' in definition)) {\n    return facetObjectMatchesDefinition(definition, plotId)\n  } else {\n    return false\n  }\n}\n\nfunction convertPlotlyPlotTypeToFacetNavPlotType(\n  plotlyPlotType: PlotlyPlotType,\n): PlotType {\n  if (plotlyPlotType === 'bar') {\n    return 'BAR'\n  } else if (plotlyPlotType === 'pie') {\n    return 'PIE'\n  }\n  return 'PIE'\n}\n\nconst generatePlotKey = (plotUiState: UiPlotState) => {\n  if ('__custom' in plotUiState.plotId) {\n    // For custom plots\n    return `custom-${plotUiState.plotId.title}`\n  } else {\n    // For facet plots\n    return `facet-${plotUiState.plotId.columnName}-${plotUiState.plotId.jsonPath}`\n  }\n}\n\nconst isPlotInState = (\n  plotId: PlotIdentifier,\n  plotUiStateArray: UiPlotState[],\n): boolean => {\n  return plotUiStateArray.some(plot => {\n    return plotMatchesDefinition(plot.plotId, plotId)\n  })\n}\n\nconst getCustomPlotIdentifier = (\n  customPlot: QueryWrapperSynapsePlotProps,\n): PlotIdentifier => {\n  return { __custom: true, title: customPlot.title ?? '' }\n}\n\nconst getCombinedNewPlots = (\n  customPlots: QueryWrapperSynapsePlotProps[] = [],\n  facetNavPanelPropsArray: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[] = [],\n  initialPlotTypeByFacetColumnName: Record<string, PlotType> | undefined,\n  defaultPlotType: PlotType,\n): UiPlotState[] => [\n  ...customPlots.map((plotProps, index) => ({\n    plotId: getCustomPlotIdentifier(plotProps),\n    isHidden: index >= DEFAULT_VISIBLE_PLOTS,\n    plotType: convertPlotlyPlotTypeToFacetNavPlotType(plotProps.type),\n  })),\n  ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({\n    plotId: facetPlotProps.facetToPlot,\n    isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,\n    plotType:\n      initialPlotTypeByFacetColumnName?.[\n        facetPlotProps.facetToPlot.columnName\n      ] ?? defaultPlotType,\n  })),\n]\n\n// Remove plots that are no longer in props from prevPlots\nconst isPlotStillPresent = (\n  prevPlot: UiPlotState,\n  customPlots: QueryWrapperSynapsePlotProps[],\n  facetNavPanelProps: Pick<\n    FacetNavPanelProps,\n    'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n  >[],\n): boolean => {\n  return (\n    customPlots.some(customPlot =>\n      plotMatchesDefinition(\n        getCustomPlotIdentifier(customPlot),\n        prevPlot.plotId,\n      ),\n    ) ||\n    facetNavPanelProps.some(facetPlot =>\n      plotMatchesDefinition(facetPlot.facetToPlot, prevPlot.plotId),\n    )\n  )\n} // fn returns true iff the plot id is in customPlots or facetNavPanelPropsArray\n\nconst DEFAULT_PLOT_TYPE: PlotType = 'PIE'\n\nconst DEFAULT_FACETS_TO_PLOT: string[] = []\nconst DEFAULT_CUSTOM_PLOTS: QueryWrapperSynapsePlotProps[] = []\n\nfunction PlotsContainer(props: PlotsContainerProps) {\n  const {\n    facetsToPlot = DEFAULT_FACETS_TO_PLOT,\n    customPlots = DEFAULT_CUSTOM_PLOTS,\n    initialPlotTypeByFacetColumnName,\n    defaultPlotType = DEFAULT_PLOT_TYPE,\n    disableFiltering,\n  } = props\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n  const { showPlots: showPlotVisualization } = useQueryVisualizationContext()\n  const [plotUiStateArray, setPlotUiStateArray] = useState<UiPlotState[]>([])\n  const facetNavPanelPropsArray = useFacetPlots(facetsToPlot)\n\n  const getPlotType = (plotId: PlotIdentifier): PlotType => {\n    const plotType = plotUiStateArray.find(item =>\n      plotMatchesDefinition(plotId, item.plotId),\n    )?.plotType\n    return plotType ?? defaultPlotType\n  }\n\n  useEffect(() => {\n    const combinedNewPlots = getCombinedNewPlots(\n      customPlots,\n      facetNavPanelPropsArray,\n      initialPlotTypeByFacetColumnName,\n      defaultPlotType,\n    )\n\n    // Update the state with new plots\n    setPlotUiStateArray(prevPlots => {\n      // Filter to only include new plots\n      const newPlots = combinedNewPlots.filter(plot => {\n        const inState = isPlotInState(plot.plotId, prevPlots)\n        return !inState\n      })\n\n      const updatedPlots = prevPlots.filter(prevPlot =>\n        isPlotStillPresent(prevPlot, customPlots, facetNavPanelPropsArray),\n      )\n\n      // Append new plots\n      const combinedPlots = [...updatedPlots, ...newPlots]\n      return combinedPlots\n    })\n  }, [\n    customPlots,\n    facetNavPanelPropsArray,\n    initialPlotTypeByFacetColumnName,\n    defaultPlotType,\n  ])\n\n  // when 'show more/less' is clicked\n  const onShowMoreClick = (shouldShowMore: boolean) => {\n    setPlotUiStateArray(plotUiStateArray => {\n      return plotUiStateArray.map((item, index) => {\n        if (shouldShowMore) {\n          // show everything\n          return { ...item, isHidden: false }\n        }\n        // otherwise hide everything except the first few items\n        return { ...item, isHidden: index >= DEFAULT_VISIBLE_PLOTS }\n      })\n    })\n  }\n\n  const isPlotHiddenInGrid = (plotId: PlotIdentifier) => {\n    const itemHidden = plotUiStateArray.find(\n      item =>\n        plotMatchesDefinition(plotId, item.plotId) && item.isHidden === true,\n    )\n    const result = itemHidden !== undefined\n    return result\n  }\n\n  const showMoreButtonState = useMemo<ShowMoreState>(() => {\n    if (\n      // if at least one item is hidden\n      plotUiStateArray.some(item => item.isHidden === true)\n    ) {\n      return 'MORE'\n    } else if (plotUiStateArray.length <= DEFAULT_VISIBLE_PLOTS) {\n      return 'NONE'\n    } else {\n      return 'LESS'\n    }\n  }, [plotUiStateArray])\n\n  // When all charts become visible (transition to 'LESS'), trigger a resize event so\n  // Plotly recalculates dimensions for charts that were previously hidden (display: none).\n  useEffect(() => {\n    if (showMoreButtonState === 'LESS') {\n      requestAnimationFrame(() => {\n        window.dispatchEvent(new Event('resize'))\n      })\n    }\n  }, [showMoreButtonState])\n\n  // hides plot graph\n  const hidePlotInGrid = (plotId: PlotIdentifier) => {\n    setUiPropertyForPlot(plotId, 'isHidden', true)\n  }\n\n  const setPlotType = (plotId: PlotIdentifier, plotType: PlotType) => {\n    setUiPropertyForPlot(plotId, 'plotType', plotType)\n  }\n\n  const setUiPropertyForPlot = (\n    plotId: PlotIdentifier,\n    propName: keyof UiPlotState,\n    value: boolean | PlotType, // 'the possible values of the above type' (currently can't be specified in TS using symbols)\n  ) => {\n    setPlotUiStateArray(plotUiStateArray =>\n      plotUiStateArray.map(item =>\n        plotMatchesDefinition(plotId, item.plotId)\n          ? { ...item, [propName]: value }\n          : item,\n      ),\n    )\n  }\n\n  const colorTracker: { facet: PlotIdentifier; colorIndex: number }[] =\n    // TODO: customPlots should use the color index\n    // additionally, it is unclear why this object is created\n    // We can probably just pass the index from `plotUiStateArray.map)\n    getFacets(queryMetadata, facetsToPlot).map((el, index) => {\n      return {\n        facet: { columnName: el.columnName, jsonPath: el.jsonPath },\n        colorIndex: index,\n      }\n    })\n\n  return (\n    <>\n      {plotUiStateArray.length > 0 && (\n        <div\n          className={`PlotsContainer ${showPlotVisualization ? '' : 'hidden'} ${\n            showMoreButtonState === 'LESS' ? 'less' : ''\n          }`}\n        >\n          <div className=\"PlotsContainer__row\" role=\"list\">\n            {plotUiStateArray.map(plotUiState => {\n              const isCustomPlot = '__custom' in plotUiState.plotId\n              const customPlotProps = customPlots.find(customPlot =>\n                plotMatchesDefinition(\n                  getCustomPlotIdentifier(customPlot),\n                  plotUiState.plotId,\n                ),\n              )\n              const facetNavPanelProps = facetNavPanelPropsArray.find(props =>\n                plotMatchesDefinition(props.facetToPlot, plotUiState.plotId),\n              )\n\n              return (\n                <div\n                  className={\n                    [\n                      isCustomPlot\n                        ? 'PlotsContainer__row__item--custom'\n                        : undefined,\n                      isCustomPlot && customPlotProps?.fullWidth\n                        ? 'PlotsContainer__row__item--full-width'\n                        : undefined,\n                    ]\n                      .filter(Boolean)\n                      .join(' ') || undefined\n                  }\n                  style={{\n                    minWidth: '435px',\n                    display: isPlotHiddenInGrid(plotUiState.plotId)\n                      ? 'none'\n                      : 'block',\n                  }}\n                  key={generatePlotKey(plotUiState)}\n                >\n                  {isCustomPlot && customPlotProps && (\n                    <QueryWrapperSynapsePlot\n                      {...customPlotProps}\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                    />\n                  )}\n                  {!isCustomPlot && facetNavPanelProps && (\n                    <FacetNavPanel\n                      index={\n                        colorTracker.find(el =>\n                          plotMatchesDefinition(el.facet, plotUiState.plotId),\n                        )?.colorIndex!\n                      }\n                      onHide={() => hidePlotInGrid(plotUiState.plotId)}\n                      plotType={getPlotType(plotUiState.plotId)}\n                      onSetPlotType={(plotType: PlotType) =>\n                        setPlotType(plotUiState.plotId, plotType)\n                      }\n                      isModalView={false}\n                      disableFiltering={disableFiltering}\n                      {...facetNavPanelProps}\n                    />\n                  )}\n                </div>\n              )\n            })}\n          </div>\n          {showMoreButtonState !== 'NONE' && (\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                backgroundColor: 'grey.100',\n                p: 2,\n                mt: 2,\n              }}\n            >\n              <Button\n                variant=\"contained\"\n                color=\"secondary\"\n                onClick={() => onShowMoreClick(showMoreButtonState === 'MORE')}\n                sx={{ width: '150px' }}\n              >\n                {showMoreButtonState === 'LESS'\n                  ? 'Hide Charts'\n                  : 'View All Charts'}\n              </Button>\n            </Box>\n          )}\n        </div>\n      )}\n    </>\n  )\n}\n\nexport default function PlotsContainerWithSuspense(props: PlotsContainerProps) {\n  const { showPlots } = useQueryVisualizationContext()\n  return (\n    <Suspense fallback={showPlots ? <PlotsContainerSkeleton /> : null}>\n      <PlotsContainer {...props} />\n    </Suspense>\n  )\n}\n"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { FRIENDLY_VALUE_NOT_SET as e } from "../../../utils/SynapseConstants.js";
 import { isColumnMultiValueFunctionQueryFilter as t, isColumnSingleValueQueryFilter as n, isFacetColumnRangeRequest as r, isFacetColumnValuesRequest as i, isTextMatchesQueryFilter as a } from "../../../utils/types/IsType.js";
+import { useQueryVisualizationContext as o } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
 import "../../../utils/index.js";
-import { useQueryContext as o } from "../../QueryContext/QueryContext.js";
+import { useQueryContext as s } from "../../QueryContext/QueryContext.js";
 import "../../QueryContext/index.js";
-import { useGetQueryMetadata as s } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { useQueryVisualizationContext as c } from "../../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { useGetQueryMetadata as c } from "../../QueryWrapper/useGetQueryMetadata.js";
 import "../../QueryVisualizationWrapper/index.js";
 import l from "./SelectionCriteriaPill.js";
 import { getSearchTextFromBooleanModeSearchExpression as u } from "../../FullTextSearch/FullTextSearchUtils.js";
@@ -120,7 +120,7 @@ function b(e, t, n, a, o) {
 	});
 }
 function x() {
-	let e = o(), t = e.lockedColumn, n = c(), { lockTextMatchesQueryFilterPill: r } = n, { currentQueryRequest: i } = e, { data: a } = s(), u = v(i.query?.additionalFilters ?? [], e, a?.columnModels || [], n, t, r), m = b(i.query.selectedFacets ?? [], e, a?.columnModels || [], n, t);
+	let e = s(), t = e.lockedColumn, n = o(), { lockTextMatchesQueryFilterPill: r } = n, { currentQueryRequest: i } = e, { data: a } = c(), u = v(i.query?.additionalFilters ?? [], e, a?.columnModels || [], n, t, r), m = b(i.query.selectedFacets ?? [], e, a?.columnModels || [], n, t);
 	return /* @__PURE__ */ p(f, { children: [...u, ...m].map((e) => {
 		let t = encodeURIComponent(e.key);
 		return /* @__PURE__ */ d(l, {

package/dist/components/widgets/facet-nav/useFacetPlots.d.ts

@@ -1,5 +1,6 @@
-import { FacetColumnResult, QueryResultBundle } from '@sage-bionetworks/synapse-types';
+import { EnumerationFacet } from '@/utils/functions/enumerationFacet';
+import { QueryResultBundle } from '@sage-bionetworks/synapse-types';
 import { FacetNavPanelProps } from './FacetNavPanel';
 export default function useFacetPlots(facetsToPlot: string[]): Pick<FacetNavPanelProps, 'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'>[];
-export declare function getFacets(data: QueryResultBundle | undefined, facetsToPlot?: string[]): FacetColumnResult[];
+export declare function getFacets(data: QueryResultBundle | undefined, facetsToPlot?: string[]): EnumerationFacet[];
 //# sourceMappingURL=useFacetPlots.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFacetPlots.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,iBAAiB,EAGjB,iBAAiB,EAClB,MAAM,iCAAiC,CAAA;AAKxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,YAAY,EAAE,MAAM,EAAE,GACrB,IAAI,CACL,kBAAkB,EAClB,2BAA2B,GAAG,0BAA0B,GAAG,aAAa,CACzE,EAAE,CAqDF;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,iBAAiB,GAAG,SAAS,EACnC,YAAY,CAAC,EAAE,MAAM,EAAE,GACtB,iBAAiB,EAAE,CAoBrB"}
+{"version":3,"file":"useFacetPlots.d.ts","sourceRoot":"","sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAEjB,MAAM,oCAAoC,CAAA;AAE3C,OAAO,EAGL,iBAAiB,EAClB,MAAM,iCAAiC,CAAA;AAKxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAGpD,MAAM,CAAC,OAAO,UAAU,aAAa,CACnC,YAAY,EAAE,MAAM,EAAE,GACrB,IAAI,CACL,kBAAkB,EAClB,2BAA2B,GAAG,0BAA0B,GAAG,aAAa,CACzE,EAAE,CAqDF;AAED,wBAAgB,SAAS,CACvB,IAAI,EAAE,iBAAiB,GAAG,SAAS,EACnC,YAAY,CAAC,EAAE,MAAM,EAAE,GACtB,gBAAgB,EAAE,CAgBpB"}

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

@@ -1,29 +1,30 @@
-import { isSingleNotSetValue as e } from "../../../utils/functions/queryUtils.js";
-import { useQueryContext as t } from "../../QueryContext/QueryContext.js";
+import { getEnumerationFacets as e } from "../../../utils/functions/enumerationFacet.js";
+import { isSingleNotSetValue as t } from "../../../utils/functions/queryUtils.js";
+import { useQueryContext as n } from "../../QueryContext/QueryContext.js";
 import "../../QueryContext/index.js";
-import { useSuspenseGetQueryMetadata as n } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { applyChangesToValuesColumn as r } from "../query-filter/FacetFilterControls.js";
-import { useCallback as i, useMemo as a } from "react";
+import { useSuspenseGetQueryMetadata as r } from "../../QueryWrapper/useGetQueryMetadata.js";
+import { applyChangesToValuesColumn as i } from "../query-filter/FacetFilterControls.js";
+import { useCallback as a, useMemo as o } from "react";
 //#region src/components/widgets/facet-nav/useFacetPlots.ts
-function o(e) {
-	let { getCurrentQueryRequest: o, executeQueryRequest: c } = t(), { data: l } = n(), u = a(() => o(), [o]), d = a(() => s(l, e), [l, e]), f = i((e) => {
-		c((t) => (t.query.selectedFacets = e, t.query.offset = 0, t), { debounce: !0 });
-	}, [c]);
-	return a(() => d.map((e) => ({
+function s(e) {
+	let { getCurrentQueryRequest: t, executeQueryRequest: s } = n(), { data: l } = r(), u = o(() => t(), [t]), d = o(() => c(l, e), [l, e]), f = a((e) => {
+		s((t) => (t.query.selectedFacets = e, t.query.offset = 0, t), { debounce: !0 });
+	}, [s]);
+	return o(() => d.map((e) => ({
 		facetToPlot: e,
 		applyChangesToFacetFilter: f,
-		applyChangesToGraphSlice: (e, t, n) => r(u, e, f, t?.value, n)
+		applyChangesToGraphSlice: (e, t, n) => i(u, e, f, t?.value, n)
 	})), [
 		d,
 		f,
 		u
 	]);
 }
-function s(t, n) {
-	let r = t?.facets?.filter((t) => t.facetType === "enumeration" && (!n?.length || n.indexOf(t.columnName) > -1) && t.facetValues.length > 0 && !e(t)) ?? [];
-	return n?.length && r.sort((e, t) => n.indexOf(e.columnName) - n.indexOf(t.columnName)), r;
+function c(n, r) {
+	let i = e(n?.facets?.filter((e) => !t(e))).filter((e) => (!r?.length || r.includes(e.columnName)) && e.facetValues.length > 0);
+	return r?.length && i.sort((e, t) => r.indexOf(e.columnName) - r.indexOf(t.columnName)), i;
 }
 //#endregion
-export { o as default, s as getFacets };
+export { s as default, c as getFacets };
 
 //# sourceMappingURL=useFacetPlots.js.map