more progress, new SynapsePlot wrapper that is supposed to handle cha…

…nges to the query filters

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

@@ -29,6 +29,32 @@ export const individualsView: SynapseConfig = {
       minFacetColumn: 'minAge',
       maxFacetColumn: 'maxAge',
     },
+    additionalPlots: [
+      {
+        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',
+      },
+    ],
     tableConfiguration: {
       showAccessColumn: false,
       showDownloadColumn: false,

packages/synapse-react-client/src/components/Markdown/widget/MarkdownSynapsePlot.tsx

@@ -1,16 +1,8 @@
 import React from 'react'
 import SynapsePlot, { SynapsePlotProps } from '../../Plot/SynapsePlot'
-import { useWikiContext } from '../SynapseWikiContext'
 
 export type PlotWidgetParams = SynapsePlotProps['widgetparamsMapped']
 
 export default function MarkdownSynapsePlot(props: PlotWidgetParams) {
-  const { ownerId, wikiId, wikiPage } = useWikiContext()
-  return (
-    <SynapsePlot
-      ownerId={ownerId}
-      wikiId={wikiId || wikiPage?.id}
-      widgetparamsMapped={props}
-    />
-  )
+  return <SynapsePlot widgetparamsMapped={props} />
 }

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

@@ -2,37 +2,42 @@ import Plotly, { AxisType, PlotType } from 'plotly.js-basic-dist'
 import React from 'react'
 import createPlotlyComponent from 'react-plotly.js/factory'
 import { SynapseConstants } from '../../utils'
-import { QueryBundleRequest } from '@sage-bionetworks/synapse-types'
+import {
+  QueryBundleRequest,
+  QueryFilter,
+} from '@sage-bionetworks/synapse-types'
 import { parseEntityIdFromSqlStatement } from '../../utils/functions/SqlFunctions'
 import { useGetFullTableQueryResults } from '../../synapse-queries'
 const Plot = createPlotlyComponent(Plotly)
 
 export type SynapsePlotWidgetParams = {
-  query: string
-  title: string
-  xtitle: string
-  ytitle: string
-  type: string
-  xaxistype: string
-  showlegend: string
-  horizontal: string
-  barmode?: string
+  query: string //sql string
+  title: string //plot title
+  xtitle: string // x-axis title
+  ytitle: string // y-axis title
+  type: string // Plotly PlotType
+  xaxistype: string // Plotly AxisType
+  showlegend?: string // sets the legend visibility ('true' | 'false')
+  horizontal?: string // sets the if a bar chart should be horizontal or vertical ('true' | 'false')
+  barmode?: string // Plotly barmode ('stack' | 'group' | 'overlay' | 'relative')
+  additionalFilters?: QueryFilter[] // Usually undefined, but is set in the context of a QueryWrapperPlotNav.additionalPlots
 }
 export type SynapsePlotProps = {
   widgetparamsMapped: SynapsePlotWidgetParams
 }
 
-const toBoolean = (v: string) => {
+const toBoolean = (v?: string) => {
   return v ? v.toLowerCase() == 'true' : false
 }
 export const SynapsePlot = (props: SynapsePlotProps) => {
-  const { query } = props.widgetparamsMapped
+  const { query, 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,
+      additionalFilters,
     },
   }
   const { data: queryData, isLoading } =

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

@@ -37,6 +37,9 @@ import { SynapseErrorBoundary } from '../error/ErrorBanner'
 import { TableQueryDownloadConfirmation } from '../download_list'
 import { useAtomValue } from 'jotai'
 import { isLoadingNewBundleAtom } from '../QueryWrapper/QueryWrapper'
+import QueryWrapperSynapsePlot, {
+  QueryWrapperSynapsePlotProps,
+} from './QueryWrapperSynapsePlot'
 
 export const QUERY_FILTERS_EXPANDED_CSS: string = 'isShowingFacetFilters'
 export const QUERY_FILTERS_COLLAPSED_CSS: string = 'isHidingFacetFilters'
@@ -59,6 +62,7 @@ type QueryWrapperPlotNavOwnProps = {
   >
   facetsToPlot?: string[]
   availableFacets?: FacetFilterControlsProps['availableFacets']
+  additionalPlots?: QueryWrapperSynapsePlotProps[]
   defaultColumn?: string
   defaultShowSearchBox?: boolean
   lockedColumn?: QueryWrapperProps['lockedColumn']
@@ -109,6 +113,7 @@ type QueryWrapperPlotNavContentsProps = Pick<
   | 'fileIdColumnName'
   | 'fileNameColumnName'
   | 'fileVersionColumnName'
+  | 'additionalPlots'
 > & {
   isFullTextSearchEnabled: boolean
   remount: () => void
@@ -133,6 +138,7 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) {
     customControls,
     remount,
     isFullTextSearchEnabled,
+    additionalPlots,
   } = props
   const queryContext = useQueryContext()
   const [showExportMetadata, setShowExportMetadata] = React.useState(false)
@@ -203,6 +209,10 @@ function QueryWrapperPlotNavContents(props: QueryWrapperPlotNavContentsProps) {
                 <FacetFilterControls availableFacets={availableFacets} />
               </>
             )}
+            {additionalPlots &&
+              additionalPlots.map((plotProps, index) => {
+                return <QueryWrapperSynapsePlot key={index} {...plotProps} />
+              })}
             <FacetNav facetsToPlot={facetsToPlot} />
             <FilterAndView
               tableConfiguration={tableConfiguration}

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

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react'
+import { SynapsePlot } from '../Plot'
+import { useQueryContext } from '../QueryContext'
+import { SynapsePlotWidgetParams } from '../Plot/SynapsePlot'
+import { QueryFilter } from '@sage-bionetworks/synapse-types'
+
+export type QueryWrapperSynapsePlotProps = Omit<
+  SynapsePlotWidgetParams,
+  'additionalFilters'
+>
+
+export default function QueryWrapperSynapsePlot(
+  props: QueryWrapperSynapsePlotProps,
+) {
+  const { currentQueryRequest } = useQueryContext()
+
+  const widgetParamsMapped: SynapsePlotWidgetParams = useMemo(() => {
+    const { additionalFilters } = currentQueryRequest.query
+    return {
+      ...props,
+      additionalFilters: additionalFilters as QueryFilter[],
+    }
+  }, [currentQueryRequest, props])
+
+  return <SynapsePlot widgetparamsMapped={widgetParamsMapped} />
+}