From d9d88b8b58fe3346e29f11c4e8ad8c6f02706e0f Mon Sep 17 00:00:00 2001
From: Jin Jun Oh <joh@w245.local>
Date: Mon, 22 Jan 2024 14:35:35 -0800
Subject: [PATCH] render SynapsePlot only when showFacetVisualization is true

---
 .../QueryWrapperSynapsePlot.tsx               | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperSynapsePlot.tsx b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperSynapsePlot.tsx
index 3f35562569..a35b219468 100644
--- a/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperSynapsePlot.tsx
+++ b/packages/synapse-react-client/src/components/QueryWrapperPlotNav/QueryWrapperSynapsePlot.tsx
@@ -11,6 +11,7 @@ import {
   Row,
 } from '@sage-bionetworks/synapse-types'
 import { FacetFilterHeader } from '../widgets/query-filter/FacetFilterHeader'
+import { useQueryVisualizationContext } from '../QueryVisualizationWrapper'
 
 export type QueryWrapperSynapsePlotProps = Pick<
   QueryWrapperPlotNavCustomPlotParams,
@@ -35,6 +36,7 @@ export default function QueryWrapperSynapsePlot(
   const queryContext = useQueryContext()
   const { currentQueryRequest } = queryContext
   const { title, onCustomPlotClick } = props
+  const { showFacetVisualization } = useQueryVisualizationContext()
 
   const widgetParamsMapped: SynapsePlotWidgetParams = useMemo(() => {
     return {
@@ -56,18 +58,22 @@ export default function QueryWrapperSynapsePlot(
   }, [currentQueryRequest.query, onCustomPlotClick, queryContext])
   return (
     <div className="SynapsePlot">
-      {title && (
-        <FacetFilterHeader
-          hideCollapsible={true}
-          label={title}
-          isCollapsed={false}
-          onClick={() => {}}
-        />
+      {showFacetVisualization && (
+        <>
+          {title && (
+            <FacetFilterHeader
+              hideCollapsible={true}
+              label={title}
+              isCollapsed={false}
+              onClick={() => {}}
+            />
+          )}
+          <SynapsePlot
+            synapsePlotWidgetParams={widgetParamsMapped}
+            customPlotParams={customPlotParams}
+          />
+        </>
       )}
-      <SynapsePlot
-        synapsePlotWidgetParams={widgetParamsMapped}
-        customPlotParams={customPlotParams}
-      />
     </div>
   )
 }