need both additional filters and selected facets

apps/portals/src/configurations/elportal/synapseConfigs/cohortbuilder.ts

@@ -12,9 +12,39 @@ import {
   handleFilesToParticipants,
   handleSelectedFilesToParticipants,
 } from './handleFilesToParticipants'
+import { QueryWrapperSynapsePlotProps } from 'synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperSynapsePlot'
+import { SynapseUtilityFunctions } from 'synapse-react-client'
 
 const rgbIndex = 1
-
+const getPlotConfig = (tableId: string, title: string) => {
+  const plotConfig: QueryWrapperSynapsePlotProps = {
+    title: title,
+    query: `SELECT cast((case when maxAge >= 0 and maxAge < 10  then ' 0 - 10 ' 
+    when maxAge >= 10 and maxAge < 20  then ' 10 - 20 '
+    when maxAge >= 20 and maxAge < 30  then ' 20 - 30 ' 
+    when maxAge >= 30 and maxAge < 40  then ' 30 - 40 ' 
+    when maxAge >= 40 and maxAge < 50  then ' 40 - 50 ' 
+    when maxAge >= 50 and maxAge < 60  then ' 50 - 60 '
+    when maxAge >= 60 and maxAge < 70  then ' 60 - 70 ' 
+    when maxAge >= 70 and maxAge < 80  then ' 70 - 80 '
+    when maxAge >= 80 and maxAge < 90  then ' 80 - 90 '
+    when maxAge >= 90 and maxAge < 100  then ' 90 - 100 '
+    else '100+' END) AS STRING) AS bucket,
+          count(*) AS totalWithinRange
+            FROM ${tableId}
+            GROUP BY 1
+            ORDER BY bucket`,
+    type: 'bar',
+    // xaxistype: ''
+    xtitle: 'Age',
+    ytitle: 'Count',
+    // barmode: ''
+    showlegend: 'false',
+  }
+  return plotConfig
+}
+const participantsTableId =
+  SynapseUtilityFunctions.parseEntityIdFromSqlStatement(cohortBuilderSql)
 export const individualsView: SynapseConfig = {
   name: 'QueryWrapperPlotNav',
   props: {
@@ -29,32 +59,7 @@ export const individualsView: SynapseConfig = {
       minFacetColumn: 'minAge',
       maxFacetColumn: 'maxAge',
     },
-    synapsePlots: [
-      {
-        query: `SELECT cast((case when maxAge >= 0 and maxAge < 10  then ' 0 - 10 ' 
-        when maxAge >= 10 and maxAge < 20  then ' 10 - 20 '
-        when maxAge >= 20 and maxAge < 30  then ' 20 - 30 ' 
-        when maxAge >= 30 and maxAge < 40  then ' 30 - 40 ' 
-        when maxAge >= 40 and maxAge < 50  then ' 40 - 50 ' 
-        when maxAge >= 50 and maxAge < 60  then ' 50 - 60 '
-        when maxAge >= 60 and maxAge < 70  then ' 60 - 70 ' 
-        when maxAge >= 70 and maxAge < 80  then ' 70 - 80 '
-        when maxAge >= 80 and maxAge < 90  then ' 80 - 90 '
-        when maxAge >= 90 and maxAge < 100  then ' 90 - 100 '
-        else '100+' END) AS STRING) AS bucket,
-              count(*) AS totalWithinRange
-                FROM syn52234652
-                GROUP BY 1
-                ORDER BY bucket`,
-        // title: 'Individuals',
-        type: 'bar',
-        // xaxistype: ''
-        xtitle: 'Age',
-        ytitle: 'Participants',
-        // barmode: ''
-        showlegend: 'false',
-      },
-    ],
+    synapsePlots: [getPlotConfig(participantsTableId, 'Participants')],
     tableConfiguration: {
       showAccessColumn: false,
       showDownloadColumn: false,
@@ -91,6 +96,9 @@ export const individualsView: SynapseConfig = {
   },
 }
 
+const filesTableId = SynapseUtilityFunctions.parseEntityIdFromSqlStatement(
+  cohortBuilderFilesSql,
+)
 export const filesView: SynapseConfig = {
   name: 'QueryWrapperPlotNav',
   props: {
@@ -110,6 +118,7 @@ export const filesView: SynapseConfig = {
       minFacetColumn: 'minAge',
       maxFacetColumn: 'maxAge',
     },
+    synapsePlots: [getPlotConfig(filesTableId, 'Files')],
     tableConfiguration: {
       showAccessColumn: true,
       showDownloadColumn: true,

packages/synapse-react-client/src/components/Plot/SynapsePlot.tsx

@@ -5,9 +5,11 @@ import { SynapseConstants } from '../../utils'
 import {
   FacetColumnRequest,
   QueryBundleRequest,
+  QueryFilter,
 } from '@sage-bionetworks/synapse-types'
 import { parseEntityIdFromSqlStatement } from '../../utils/functions/SqlFunctions'
 import { useGetFullTableQueryResults } from '../../synapse-queries'
+import { Skeleton } from '@mui/material'
 const Plot = createPlotlyComponent(Plotly)
 
 export type SynapsePlotWidgetParams = {
@@ -21,6 +23,7 @@ export type SynapsePlotWidgetParams = {
   horizontal?: string // sets the if a bar chart should be horizontal or vertical ('true' | 'false')
   barmode?: string // Plotly barmode ('stack' | 'group' | 'overlay' | 'relative')
   selectedFacets?: FacetColumnRequest[] // Usually undefined, but is set in the context of a QueryWrapperPlotNav synapsePlots
+  additionalFilters?: QueryFilter[] // Usually undefined, but is set in the context of a QueryWrapperPlotNav synapsePlots
   displayModebar?: string // sets the modebar visibility ('true' | 'false')
 }
 export type SynapsePlotProps = {
@@ -31,19 +34,23 @@ const toBoolean = (v?: string) => {
   return v ? v.toLowerCase() == 'true' : false
 }
 export const SynapsePlot = (props: SynapsePlotProps) => {
-  const { query, selectedFacets } = props.widgetparamsMapped
+  const { query, selectedFacets, additionalFilters } = props.widgetparamsMapped
   const queryRequest: QueryBundleRequest = {
     concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',
     partMask: SynapseConstants.BUNDLE_MASK_QUERY_RESULTS,
     entityId: parseEntityIdFromSqlStatement(query),
     query: {
       sql: query,
       selectedFacets,
+      additionalFilters,
     },
   }
   const { data: queryData, isLoading } =
     useGetFullTableQueryResults(queryRequest)
-  if (isLoading || !queryData) {
+  if (isLoading) {
+    return <Skeleton width={'100%'} height={'200px'} />
+  }
+  if (!queryData) {
     return <></>
   }
 

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

@@ -44,7 +44,7 @@ export const Cards: Story = {
     synapsePlots: [
       {
         query:
-          'SELECT resourceType, count(resourceType) FROM syn26438037 GROUP BY resourceType',
+          'SELECT resourceType, count(resourceType) FROM syn26438037 GROUP BY resourceType ',
         type: 'bar',
         title: 'Resource Type',
       },

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

@@ -2,7 +2,10 @@ import React, { useMemo } from 'react'
 import { SynapsePlot } from '../Plot'
 import { useQueryContext } from '../QueryContext'
 import { SynapsePlotWidgetParams } from '../Plot/SynapsePlot'
-import { FacetColumnRequest } from '@sage-bionetworks/synapse-types'
+import {
+  FacetColumnRequest,
+  QueryFilter,
+} from '@sage-bionetworks/synapse-types'
 import { Typography } from '@mui/material'
 
 export type QueryWrapperSynapsePlotProps = Omit<
@@ -16,11 +19,12 @@ export default function QueryWrapperSynapsePlot(
   const { currentQueryRequest } = useQueryContext()
   const { title } = props
   const widgetParamsMapped: SynapsePlotWidgetParams = useMemo(() => {
-    const { selectedFacets } = currentQueryRequest.query
+    const { selectedFacets, additionalFilters } = currentQueryRequest.query
     return {
       ...props,
       title: undefined, // we are handling the plot title here in this component
       selectedFacets: selectedFacets as FacetColumnRequest[],
+      additionalFilters: additionalFilters as QueryFilter[],
       displayModebar: 'false',
     }
   }, [currentQueryRequest, props])

packages/synapse-react-client/src/style/components/query_filter/_query-wrapper-synapse-plot.scss

@@ -1,17 +1,10 @@
 .SynapsePlots {
   padding-top: 5px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  gap: 4%;
-
   > .SynapsePlot {
-    flex-grow: 1;
-    flex-basis: 45%;
     // Hack around Plotly.  If modebar is hidden, it still takes up space for some reason.
     // Move plot up (closer to title), and make sure the title is on top.
     .plot-container {
-      margin-top: -40px;
+      margin-top: -19px;
     }
     p {
       position: relative;