synapse-react-client 4.0.3 → 4.0.5

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

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

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

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

@@ -1,44 +1,47 @@
-import { isSingleNotSetValue as i } from "../../../utils/functions/queryUtils.js";
-import { useMemo as c, useCallback as m } from "react";
+import { isSingleNotSetValue as f } from "../../../utils/functions/queryUtils.js";
+import { useMemo as c, useCallback as i } from "react";
 import { useQueryContext as y } from "../../QueryContext/QueryContext.js";
 import { useSuspenseGetQueryMetadata as g } from "../../QueryWrapper/useGetQueryMetadata.js";
-import { applyChangesToValuesColumn as F } from "../query-filter/FacetFilterControls.js";
-function N(r) {
-  const { getCurrentQueryRequest: t, executeQueryRequest: o } = y(), { data: e } = g(), n = c(
+import { applyChangesToValuesColumn as d } from "../query-filter/FacetFilterControls.js";
+function S(u) {
+  const { getCurrentQueryRequest: t, executeQueryRequest: a } = y(), { data: e } = g(), r = c(
     () => t(),
     [t]
   ), l = c(
-    () => C(e, r),
-    [e, r]
-  ), u = m(
+    () => F(e, u),
+    [e, u]
+  ), o = i(
     (s) => {
-      o(
-        (a) => (a.query.selectedFacets = s, a.query.offset = 0, a),
+      a(
+        (n) => (n.query.selectedFacets = s, n.query.offset = 0, n),
         { debounce: !0 }
       );
     },
-    [o]
+    [a]
   );
   return c(
     () => l.map((s) => ({
       facetToPlot: s,
-      applyChangesToFacetFilter: u,
-      applyChangesToGraphSlice: (a, p, f) => F(
+      applyChangesToFacetFilter: o,
+      applyChangesToGraphSlice: (n, p, m) => d(
+        r,
         n,
-        a,
-        u,
+        o,
         p?.value,
-        f
+        m
       )
     })),
-    [l, u, n]
+    [l, o, r]
   );
 }
-function C(r, t) {
-  return r?.facets?.filter((e) => e.facetType === "enumeration" && (!t?.length || t.indexOf(e.columnName) > -1) && e.facetValues.length > 0 && !i(e)) ?? [];
+function F(u, t) {
+  const a = u?.facets?.filter((e) => e.facetType === "enumeration" && (!t?.length || t.indexOf(e.columnName) > -1) && e.facetValues.length > 0 && !f(e)) ?? [];
+  return t?.length && a.sort(
+    (e, r) => t.indexOf(e.columnName) - t.indexOf(r.columnName)
+  ), a;
 }
 export {
-  N as default,
-  C as getFacets
+  S as default,
+  F as getFacets
 };
 //# sourceMappingURL=useFacetPlots.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useFacetPlots.js","sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"sourcesContent":["import { isSingleNotSetValue } from '@/utils/functions/queryUtils'\nimport {\n  FacetColumnRequest,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo } from 'react'\nimport { useQueryContext } from '../../QueryContext'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { applyChangesToValuesColumn } from '../query-filter/FacetFilterControls'\nimport { FacetNavPanelProps } from './FacetNavPanel'\n\n// Custom hook for generating properties for FacetNavPanel components with filter controls based on the given facets\nexport default function useFacetPlots(\n  facetsToPlot: string[],\n): Pick<\n  FacetNavPanelProps,\n  'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n>[] {\n  const { getCurrentQueryRequest, executeQueryRequest } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n\n  const lastQueryRequest = useMemo(\n    () => getCurrentQueryRequest(),\n    [getCurrentQueryRequest],\n  )\n  const facets = useMemo(\n    () => getFacets(queryMetadata, facetsToPlot),\n    [queryMetadata, facetsToPlot],\n  )\n\n  const applyChangesFromQueryFilter = useCallback(\n    (facets: FacetColumnRequest[]) => {\n      executeQueryRequest(\n        lastQueryRequest => {\n          lastQueryRequest.query.selectedFacets = facets\n          lastQueryRequest.query.offset = 0\n          return lastQueryRequest\n        },\n        { debounce: true },\n      )\n    },\n    [executeQueryRequest],\n  )\n\n  const facetNavPanelProps = useMemo(\n    () =>\n      facets.map(facet => {\n        return {\n          facetToPlot: facet as FacetColumnResultValues,\n\n          applyChangesToFacetFilter: applyChangesFromQueryFilter,\n\n          applyChangesToGraphSlice: (\n            facet: FacetColumnResultValues,\n            value: FacetColumnResultValueCount | undefined,\n            isSelected: boolean,\n          ) =>\n            applyChangesToValuesColumn(\n              lastQueryRequest,\n              facet,\n              applyChangesFromQueryFilter,\n              value?.value,\n              isSelected,\n            ),\n        }\n      }),\n    [facets, applyChangesFromQueryFilter, lastQueryRequest],\n  )\n  return facetNavPanelProps\n}\n\nexport function getFacets(\n  data: QueryResultBundle | undefined,\n  facetsToPlot?: string[],\n): FacetColumnResult[] {\n  const result =\n    data?.facets?.filter(item => {\n      const isFacetToPlot =\n        item.facetType === 'enumeration' &&\n        (!facetsToPlot?.length || facetsToPlot.indexOf(item.columnName) > -1)\n      // PORTALS-1993: only plot if the facet has count data\n      return (\n        isFacetToPlot &&\n        item.facetValues.length > 0 &&\n        !isSingleNotSetValue(item)\n      )\n    }) ?? []\n  return result\n}\n"],"names":["useFacetPlots","facetsToPlot","getCurrentQueryRequest","executeQueryRequest","useQueryContext","queryMetadata","useSuspenseGetQueryMetadata","lastQueryRequest","useMemo","facets","getFacets","applyChangesFromQueryFilter","useCallback","facet","value","isSelected","applyChangesToValuesColumn","data","item","isSingleNotSetValue"],"mappings":";;;;;AAeA,SAAwBA,EACtBC,GAIE;AACF,QAAM,EAAE,wBAAAC,GAAwB,qBAAAC,EAAA,IAAwBC,EAAA,GAElD,EAAE,MAAMC,EAAA,IAAkBC,EAAA,GAE1BC,IAAmBC;AAAA,IACvB,MAAMN,EAAA;AAAA,IACN,CAACA,CAAsB;AAAA,EAAA,GAEnBO,IAASD;AAAA,IACb,MAAME,EAAUL,GAAeJ,CAAY;AAAA,IAC3C,CAACI,GAAeJ,CAAY;AAAA,EAAA,GAGxBU,IAA8BC;AAAA,IAClC,CAACH,MAAiC;AAChC,MAAAN;AAAA,QACE,CAAAI,OACEA,EAAiB,MAAM,iBAAiBE,GACxCF,EAAiB,MAAM,SAAS,GACzBA;AAAAA,QAET,EAAE,UAAU,GAAA;AAAA,MAAK;AAAA,IAErB;AAAA,IACA,CAACJ,CAAmB;AAAA,EAAA;AA2BtB,SAxB2BK;AAAA,IACzB,MACEC,EAAO,IAAI,CAAAI,OACF;AAAA,MACL,aAAaA;AAAA,MAEb,2BAA2BF;AAAA,MAE3B,0BAA0B,CACxBE,GACAC,GACAC,MAEAC;AAAA,QACET;AAAA,QACAM;AAAAA,QACAF;AAAA,QACAG,GAAO;AAAA,QACPC;AAAA,MAAA;AAAA,IACF,EAEL;AAAA,IACH,CAACN,GAAQE,GAA6BJ,CAAgB;AAAA,EAAA;AAG1D;AAEO,SAASG,EACdO,GACAhB,GACqB;AAarB,SAXEgB,GAAM,QAAQ,OAAO,CAAAC,MAEjBA,EAAK,cAAc,kBAClB,CAACjB,GAAc,UAAUA,EAAa,QAAQiB,EAAK,UAAU,IAAI,OAIlEA,EAAK,YAAY,SAAS,KAC1B,CAACC,EAAoBD,CAAI,CAE5B,KAAK,CAAA;AAEV;"}
+{"version":3,"file":"useFacetPlots.js","sources":["../../../../src/components/widgets/facet-nav/useFacetPlots.ts"],"sourcesContent":["import { isSingleNotSetValue } from '@/utils/functions/queryUtils'\nimport {\n  FacetColumnRequest,\n  FacetColumnResult,\n  FacetColumnResultValueCount,\n  FacetColumnResultValues,\n  QueryResultBundle,\n} from '@sage-bionetworks/synapse-types'\nimport { useCallback, useMemo } from 'react'\nimport { useQueryContext } from '../../QueryContext'\nimport { useSuspenseGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { applyChangesToValuesColumn } from '../query-filter/FacetFilterControls'\nimport { FacetNavPanelProps } from './FacetNavPanel'\n\n// Custom hook for generating properties for FacetNavPanel components with filter controls based on the given facets\nexport default function useFacetPlots(\n  facetsToPlot: string[],\n): Pick<\n  FacetNavPanelProps,\n  'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'\n>[] {\n  const { getCurrentQueryRequest, executeQueryRequest } = useQueryContext()\n\n  const { data: queryMetadata } = useSuspenseGetQueryMetadata()\n\n  const lastQueryRequest = useMemo(\n    () => getCurrentQueryRequest(),\n    [getCurrentQueryRequest],\n  )\n  const facets = useMemo(\n    () => getFacets(queryMetadata, facetsToPlot),\n    [queryMetadata, facetsToPlot],\n  )\n\n  const applyChangesFromQueryFilter = useCallback(\n    (facets: FacetColumnRequest[]) => {\n      executeQueryRequest(\n        lastQueryRequest => {\n          lastQueryRequest.query.selectedFacets = facets\n          lastQueryRequest.query.offset = 0\n          return lastQueryRequest\n        },\n        { debounce: true },\n      )\n    },\n    [executeQueryRequest],\n  )\n\n  const facetNavPanelProps = useMemo(\n    () =>\n      facets.map(facet => {\n        return {\n          facetToPlot: facet as FacetColumnResultValues,\n\n          applyChangesToFacetFilter: applyChangesFromQueryFilter,\n\n          applyChangesToGraphSlice: (\n            facet: FacetColumnResultValues,\n            value: FacetColumnResultValueCount | undefined,\n            isSelected: boolean,\n          ) =>\n            applyChangesToValuesColumn(\n              lastQueryRequest,\n              facet,\n              applyChangesFromQueryFilter,\n              value?.value,\n              isSelected,\n            ),\n        }\n      }),\n    [facets, applyChangesFromQueryFilter, lastQueryRequest],\n  )\n  return facetNavPanelProps\n}\n\nexport function getFacets(\n  data: QueryResultBundle | undefined,\n  facetsToPlot?: string[],\n): FacetColumnResult[] {\n  const result =\n    data?.facets?.filter(item => {\n      const isFacetToPlot =\n        item.facetType === 'enumeration' &&\n        (!facetsToPlot?.length || facetsToPlot.indexOf(item.columnName) > -1)\n      // PORTALS-1993: only plot if the facet has count data\n      return (\n        isFacetToPlot &&\n        item.facetValues.length > 0 &&\n        !isSingleNotSetValue(item)\n      )\n    }) ?? []\n  if (facetsToPlot?.length) {\n    result.sort(\n      (a, b) =>\n        facetsToPlot.indexOf(a.columnName) - facetsToPlot.indexOf(b.columnName),\n    )\n  }\n  return result\n}\n"],"names":["useFacetPlots","facetsToPlot","getCurrentQueryRequest","executeQueryRequest","useQueryContext","queryMetadata","useSuspenseGetQueryMetadata","lastQueryRequest","useMemo","facets","getFacets","applyChangesFromQueryFilter","useCallback","facet","value","isSelected","applyChangesToValuesColumn","data","result","item","isSingleNotSetValue","a","b"],"mappings":";;;;;AAeA,SAAwBA,EACtBC,GAIE;AACF,QAAM,EAAE,wBAAAC,GAAwB,qBAAAC,EAAA,IAAwBC,EAAA,GAElD,EAAE,MAAMC,EAAA,IAAkBC,EAAA,GAE1BC,IAAmBC;AAAA,IACvB,MAAMN,EAAA;AAAA,IACN,CAACA,CAAsB;AAAA,EAAA,GAEnBO,IAASD;AAAA,IACb,MAAME,EAAUL,GAAeJ,CAAY;AAAA,IAC3C,CAACI,GAAeJ,CAAY;AAAA,EAAA,GAGxBU,IAA8BC;AAAA,IAClC,CAACH,MAAiC;AAChC,MAAAN;AAAA,QACE,CAAAI,OACEA,EAAiB,MAAM,iBAAiBE,GACxCF,EAAiB,MAAM,SAAS,GACzBA;AAAAA,QAET,EAAE,UAAU,GAAA;AAAA,MAAK;AAAA,IAErB;AAAA,IACA,CAACJ,CAAmB;AAAA,EAAA;AA2BtB,SAxB2BK;AAAA,IACzB,MACEC,EAAO,IAAI,CAAAI,OACF;AAAA,MACL,aAAaA;AAAA,MAEb,2BAA2BF;AAAA,MAE3B,0BAA0B,CACxBE,GACAC,GACAC,MAEAC;AAAA,QACET;AAAA,QACAM;AAAAA,QACAF;AAAA,QACAG,GAAO;AAAA,QACPC;AAAA,MAAA;AAAA,IACF,EAEL;AAAA,IACH,CAACN,GAAQE,GAA6BJ,CAAgB;AAAA,EAAA;AAG1D;AAEO,SAASG,EACdO,GACAhB,GACqB;AACrB,QAAMiB,IACJD,GAAM,QAAQ,OAAO,CAAAE,MAEjBA,EAAK,cAAc,kBAClB,CAAClB,GAAc,UAAUA,EAAa,QAAQkB,EAAK,UAAU,IAAI,OAIlEA,EAAK,YAAY,SAAS,KAC1B,CAACC,EAAoBD,CAAI,CAE5B,KAAK,CAAA;AACR,SAAIlB,GAAc,UAChBiB,EAAO;AAAA,IACL,CAACG,GAAGC,MACFrB,EAAa,QAAQoB,EAAE,UAAU,IAAIpB,EAAa,QAAQqB,EAAE,UAAU;AAAA,EAAA,GAGrEJ;AACT;"}

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

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as C } from "react/jsx-runtime";
 import { isSingleNotSetValue as q, getCorrespondingColumnForFacet as T, facetObjectMatchesDefinition as v } from "../../../utils/functions/queryUtils.js";
-import { groupBy as M, union as E, sortBy as N, noop as j } from "lodash-es";
+import { groupBy as M, union as E, noop as N, sortBy as j } from "lodash-es";
 import { Suspense as D, useMemo as F, useState as Q, useCallback as A } from "react";
 import { useDeepCompareEffectNoCheck as B } from "use-deep-compare-effect";
 import { useQueryContext as G } from "../../QueryContext/QueryContext.js";
@@ -135,10 +135,10 @@ function X(t) {
           label: "Available Filters",
           hideCollapsible: !0,
           isCollapsed: !1,
-          onClick: j
+          onClick: N
         }
       ),
-      N(d).map((e) => /* @__PURE__ */ s(
+      j(d).map((e) => /* @__PURE__ */ s(
         _,
         {
           onClick: () => S(e),

package/dist/features/curator/GridPage/GridPage.js

@@ -30,7 +30,7 @@ import "universal-cookie";
 import "../../../utils/AppUtils/session/ApplicationSessionContext.js";
 import "../../../utils/context/FullContextProvider.js";
 import "../../../utils/context/DocumentMetadataContext.js";
-import '../../../components/FullWidthAlert/FullWidthAlert.css';import '../../../style/components/_spinner.css';/* empty css                                      */
+import '../../../components/Plot/SynapsePlot.css';import '../../../components/FullWidthAlert/FullWidthAlert.css';import '../../../style/components/_spinner.css';/* empty css                                      */
 import { useSearchParams as g } from "react-router";
 import "@mui/icons-material/Close";
 import "../../../components/styled/StyledPopover.js";
@@ -169,7 +169,6 @@ import "@mui/x-date-pickers/AdapterDayjs";
 import "@mui/x-date-pickers/LocalizationProvider";
 import "../../../components/FeaturedDataTabs/FacetPlotsCardGrid.js";
 import "../../../components/Forum/ForumTable.js";
-import "@mui/material/IconButton";
 import "@mui/icons-material/NavigateNext";
 import "@react-google-maps/api";
 import "../../../components/Markdown/MarkdownUtils.js";
@@ -183,6 +182,7 @@ import "lodash-es/orderBy";
 import "../../../components/styled/LargeButton.js";
 import "../../../assets/illustrations/diagonalLinePattern.svg.js";
 import "@upsetjs/react";
+/* empty css                                        */
 import "reactflow";
 import "../../../components/ProvenanceGraph/ProvenanceUtils.js";
 import "reactflow/dist/style.css";

package/dist/features/curator/GridPage/components/GridPageTitle.js

@@ -31,7 +31,7 @@ import "universal-cookie";
 import "../../../../utils/AppUtils/session/ApplicationSessionContext.js";
 import "../../../../utils/context/FullContextProvider.js";
 import "../../../../utils/context/DocumentMetadataContext.js";
-import '../../../../components/FullWidthAlert/FullWidthAlert.css';import '../../../../style/components/_spinner.css';/* empty css                                         */
+import '../../../../components/Plot/SynapsePlot.css';import '../../../../components/FullWidthAlert/FullWidthAlert.css';import '../../../../style/components/_spinner.css';/* empty css                                         */
 import "react-router";
 import "@mui/icons-material/Close";
 import { StyledPopover as f } from "../../../../components/styled/StyledPopover.js";
@@ -170,7 +170,6 @@ import "@mui/x-date-pickers/AdapterDayjs";
 import "@mui/x-date-pickers/LocalizationProvider";
 import "../../../../components/FeaturedDataTabs/FacetPlotsCardGrid.js";
 import "../../../../components/Forum/ForumTable.js";
-import "@mui/material/IconButton";
 import "@mui/icons-material/NavigateNext";
 import "@react-google-maps/api";
 import "../../../../components/Markdown/MarkdownUtils.js";
@@ -184,6 +183,7 @@ import "lodash-es/orderBy";
 import "../../../../components/styled/LargeButton.js";
 import "../../../../assets/illustrations/diagonalLinePattern.svg.js";
 import "@upsetjs/react";
+/* empty css                                           */
 import "reactflow";
 import "../../../../components/ProvenanceGraph/ProvenanceUtils.js";
 import "reactflow/dist/style.css";

package/dist/features/entity/metadata-task/hooks/useMetadataTaskTable.js

@@ -32,7 +32,7 @@ import "lodash-es/xorWith";
 import "react-router";
 import "@sage-bionetworks/synapse-client";
 import "../../../../utils/types/IsType.js";
-import { useGetEntityBundle as k } from "../../../../synapse-queries/entity/useEntityBundle.js";
+import k from "../../../../synapse-queries/entity/useEntityBundle.js";
 import { formatDate as C } from "../../../../utils/functions/DateFormatter.js";
 import { getLinkToEntityPage as y } from "../../../../utils/functions/getSynapseWebClientLink.js";
 import { useReactTable as I, getCoreRowModel as M, createColumnHelper as B } from "@tanstack/react-table";