Merge pull request #1568 from afwillia/PORTALS-3410

PORTALS-3410 - Make plotType customizable

Author: afwillia

apps/portals/standards/src/config/synapseConfigs/data.ts

@@ -58,6 +58,7 @@ export const dataQueryWrapperPlotNavProps: QueryWrapperPlotNavProps = {
       'digitalAssessmentDetails',
     ],
   },
+  initialPlotType: 'BAR',
 }
 
 export const dataDetailPageProps: StandaloneQueryWrapperProps = {

packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperPlotNav.tsx

@@ -143,6 +143,7 @@ type QueryWrapperPlotNavContentsProps = Pick<
   | 'fileNameColumnName'
   | 'fileVersionColumnName'
   | 'initialLimit'
+  | 'initialPlotType'
 > & {
   isFullTextSearchEnabled: boolean
   remount: () => void
@@ -168,6 +169,7 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) {
     isFullTextSearchEnabled,
     customPlots,
     initialLimit,
+    initialPlotType,
   } = props
   const queryContext = useQueryContext()
   const [showExportMetadata, setShowExportMetadata] = useState(false)
@@ -257,6 +259,7 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) {
               <PlotsContainer
                 facetsToPlot={facetsToPlot}
                 customPlots={customPlots}
+                initialPlotType={initialPlotType}
               />
               <RowSetView
                 tableConfiguration={tableConfiguration}

packages/synapse-react-client/src/components/widgets/facet-nav/PlotsContainer.tsx

@@ -21,6 +21,7 @@ type ShowMoreState = 'MORE' | 'LESS' | 'NONE'
 export type PlotsContainerProps = {
   facetsToPlot?: string[]
   customPlots?: QueryWrapperSynapsePlotProps[]
+  initialPlotType?: PlotType
 }
 type CustomPlotIdentifier = {
   title: string
@@ -89,6 +90,7 @@ const getCombinedNewPlots = (
     FacetNavPanelProps,
     'applyChangesToFacetFilter' | 'applyChangesToGraphSlice' | 'facetToPlot'
   >[] = [],
+  initialPlotType: PlotType = DEFAULT_PLOT_TYPE,
 ): UiPlotState[] => [
   ...customPlots.map((plotProps, index) => ({
     plotId: getCustomPlotIdentifier(plotProps),
@@ -98,7 +100,7 @@ const getCombinedNewPlots = (
   ...facetNavPanelPropsArray.map((facetPlotProps, index) => ({
     plotId: facetPlotProps.facetToPlot,
     isHidden: index + customPlots.length >= DEFAULT_VISIBLE_PLOTS,
-    plotType: DEFAULT_PLOT_TYPE,
+    plotType: initialPlotType,
   })),
 ]
 
@@ -133,6 +135,7 @@ function PlotsContainer(props: PlotsContainerProps) {
   const {
     facetsToPlot = DEFAULT_FACETS_TO_PLOT,
     customPlots = DEFAULT_CUSTOM_PLOTS,
+    initialPlotType = DEFAULT_PLOT_TYPE,
   } = props
   const { queryMetadataQueryOptions } = useQueryContext()
   const { data: queryMetadata } = useSuspenseQuery(queryMetadataQueryOptions)
@@ -144,13 +147,14 @@ function PlotsContainer(props: PlotsContainerProps) {
     const plotType = plotUiStateArray.find(item =>
       plotMatchesDefinition(plotId, item.plotId),
     )?.plotType
-    return plotType ?? 'PIE'
+    return plotType ?? DEFAULT_PLOT_TYPE
   }
 
   useEffect(() => {
     const combinedNewPlots = getCombinedNewPlots(
       customPlots,
       facetNavPanelPropsArray,
+      initialPlotType,
     )
 
     // Update the state with new plots