From 3637a62d538509caa2c17b06f6fa04fcc60a6e1d Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 4 Oct 2023 11:34:01 -0400 Subject: [PATCH 1/9] WIP collapse button for floating viz controls --- .../components/layouts/FloatingLayout.tsx | 17 ++- .../src/lib/core/components/layouts/types.ts | 3 + .../visualizations/VisualizationTypes.ts | 2 + .../VisualizationsContainer.tsx | 39 ++++--- .../implementations/BarplotVisualization.tsx | 56 ++++++---- .../implementations/BoxplotVisualization.tsx | 64 ++++++----- .../HistogramVisualization.tsx | 54 +++++---- .../implementations/LineplotVisualization.tsx | 104 ++++++++++-------- .../implementations/MapVisualization.tsx | 82 ++++++++------ .../implementations/MosaicVisualization.tsx | 60 +++++----- .../ScatterplotVisualization.tsx | 62 ++++++----- .../VolcanoPlotVisualization.tsx | 50 +++++---- .../map/analysis/DraggableVisualization.tsx | 21 ++++ .../eda/src/lib/map/analysis/MapAnalysis.tsx | 3 + .../analysis/hooks/standaloneVizPlugins.ts | 7 +- 15 files changed, 364 insertions(+), 260 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/layouts/FloatingLayout.tsx b/packages/libs/eda/src/lib/core/components/layouts/FloatingLayout.tsx index 0f454c7f0e..c616b7a11e 100644 --- a/packages/libs/eda/src/lib/core/components/layouts/FloatingLayout.tsx +++ b/packages/libs/eda/src/lib/core/components/layouts/FloatingLayout.tsx @@ -1,4 +1,5 @@ -import { CSSProperties } from 'react'; +import { FilledButton } from '@veupathdb/coreui'; +import { CSSProperties, useState } from 'react'; import { FloatingDiv } from '../../../map/analysis/FloatingDiv'; import { RequiredInputsPrompt } from './RequiredInputPrompts'; @@ -7,6 +8,7 @@ import { LayoutProps } from './types'; export interface Props extends LayoutProps { showRequiredInputsPrompt?: boolean; isMosaicPlot?: boolean; + hideControls?: boolean; } const defaultContainerStyles: CSSProperties = { @@ -27,15 +29,18 @@ export function FloatingLayout({ plotStyles, showRequiredInputsPrompt, isMosaicPlot, + hideControls, }: Props) { return (
- {showRequiredInputsPrompt && ( - - )} - {plotNode} - {controlsNode} +
+ {showRequiredInputsPrompt && ( + + )} + {plotNode} + {!hideControls && controlsNode} +
); diff --git a/packages/libs/eda/src/lib/core/components/layouts/types.ts b/packages/libs/eda/src/lib/core/components/layouts/types.ts index 33293dbdd5..205e1179f6 100644 --- a/packages/libs/eda/src/lib/core/components/layouts/types.ts +++ b/packages/libs/eda/src/lib/core/components/layouts/types.ts @@ -4,11 +4,13 @@ export interface LayoutProps { containerStyles?: CSSProperties; legendNode?: ReactNode; legendStyles?: CSSProperties; + // inputVariablesNode?: ReactNode; plotNode: ReactNode; controlsNode?: ReactNode; plotStyles?: CSSProperties; tableGroupNode: ReactNode; tableGroupStyles?: CSSProperties; + hideControls?: boolean; } export type StyleProps

= Pick; @@ -19,6 +21,7 @@ export interface LayoutOptions { hideFacetInputs?: boolean; // considering marginal histogram showMarginalHistogram?: boolean; + // hideInputsAndControls?: boolean; } export interface TitleOptions { diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts index fb6526d1d1..475f006b1a 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts +++ b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts @@ -31,6 +31,8 @@ export interface VisualizationProps { geoConfigs: GeoConfig[]; otherVizOverviews: VisualizationOverview[]; computeJobStatus?: JobStatus; + hideInputsAndControls?: boolean; + plotContainerStyles?: React.CSSProperties; } export interface IsEnabledInPickerParams { diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx index 9e22d56848..2709a7372f 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx @@ -66,6 +66,7 @@ interface Props { createComputeJob?: () => void; /** optional dynamic plugins */ plugins?: Partial>; + hideInputsAndControls?: boolean; } /** @@ -449,7 +450,8 @@ type FullScreenVisualizationPropKeys = | 'disableThumbnailCreation' | 'computeJobStatus' | 'createComputeJob' - | 'plugins'; + | 'plugins' + | 'hideInputsAndControls'; interface FullScreenVisualizationProps extends Pick { @@ -479,6 +481,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { computeJobStatus, createComputeJob, plugins = staticPlugins, + hideInputsAndControls, } = props; const themePrimaryColor = useUITheme()?.palette.primary; const history = useHistory(); @@ -643,20 +646,24 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { ) : (

-

- { - if (value) - analysisState.updateVisualization({ - ...viz, - displayName: value, - }); - }} - /> -

-
{overview?.displayName}
- {plugin && analysisState.analysis && ( + {!hideInputsAndControls && ( + <> +

+ { + if (value) + analysisState.updateVisualization({ + ...viz, + displayName: value, + }); + }} + /> +

+
{overview?.displayName}
+ + )} + {!hideInputsAndControls && plugin && analysisState.analysis && (
@@ -741,6 +749,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { geoConfigs={geoConfigs} otherVizOverviews={overviews.others} computeJobStatus={computeJobStatus} + hideInputsAndControls={hideInputsAndControls} /> )}
diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx index 95844b283a..e86c62ae1c 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx @@ -113,6 +113,8 @@ export type BarplotDataWithStatistics = ( ) & CoverageStatistics; +// Do we want to pull this out and pass it in as a prop? +// If so, it will be harder to make sure we honor it as part of the API const plotContainerStyles = { height: 450, width: 750, @@ -191,6 +193,7 @@ function BarplotViz(props: VisualizationProps) { toggleStarredVariable, totalCounts, filteredCounts, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -892,33 +895,37 @@ function BarplotViz(props: VisualizationProps) { return (
- + {!hideInputsAndControls && ( + + )}
- + {!hideInputsAndControls && ( + + )} ) { legendNode={showOverlayLegend ? legendNode : null} tableGroupNode={tableGroupNode} showRequiredInputsPrompt={!areRequiredInputsSelected} + hideControls={hideInputsAndControls} />
); diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx index 516c48e8ba..c8abb5d64f 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx @@ -192,6 +192,7 @@ function BoxplotViz(props: VisualizationProps) { totalCounts, filteredCounts, computeJobStatus, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -871,38 +872,42 @@ function BoxplotViz(props: VisualizationProps) { return (
- + {!hideInputsAndControls && ( + + )}
- + {!hideInputsAndControls && ( + + )} ) { controlsNode={controlsNode} tableGroupNode={tableGroupNode} showRequiredInputsPrompt={!areRequiredInputsSelected} + hideControls={hideInputsAndControls} />
); diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx index 079adf7c18..45a78919b6 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx @@ -223,6 +223,7 @@ function HistogramViz(props: VisualizationProps) { toggleStarredVariable, totalCounts, filteredCounts, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -1364,35 +1365,39 @@ function HistogramViz(props: VisualizationProps) { return (
- + {!hideInputsAndControls && ( + + )}
- + {!hideInputsAndControls && ( + + )} ) { legendNode={showOverlayLegend ? legendNode : null} tableGroupNode={tableGroupNode} showRequiredInputsPrompt={!areRequiredInputsSelected} + hideControls={hideInputsAndControls} />
diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx index 9e1925e924..d883138e3b 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx @@ -275,6 +275,7 @@ function LineplotViz(props: VisualizationProps) { toggleStarredVariable, totalCounts, filteredCounts, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -1229,6 +1230,7 @@ function LineplotViz(props: VisualizationProps) { setTruncatedDependentAxisWarning, ]); + // here const controlsNode = ( <> {/* pre-occupied space for Banner: 1 line = 2.5em */} @@ -1759,58 +1761,63 @@ function LineplotViz(props: VisualizationProps) { return (
- - - Y-axis aggregation{' '} - {vizConfig.yAxisVariable - ? categoricalMode - ? '(categorical Y)' - : '(continuous Y)' - : ''} + {/* Here (input variables) */} + {!hideInputsAndControls && ( + + + Y-axis aggregation{' '} + {vizConfig.yAxisVariable + ? categoricalMode + ? '(categorical Y)' + : '(continuous Y)' + : ''} + + + + ), + order: 75, + content: vizConfig.yAxisVariable ? ( + aggregationInputs + ) : ( + + First choose a Y-axis variable. - - - ), - order: 75, - content: vizConfig.yAxisVariable ? ( - aggregationInputs - ) : ( - - First choose a Y-axis variable. - - ), - }, - ]} - entities={entities} - selectedVariables={selectedVariables} - onChange={handleInputVariableChange} - constraints={dataElementConstraints} - dataElementDependencyOrder={dataElementDependencyOrder} - starredVariables={starredVariables} - toggleStarredVariable={toggleStarredVariable} - enableShowMissingnessToggle={ - (overlayVariable != null || facetVariable != null) && - data.value?.completeCasesAllVars !== - data.value?.completeCasesAxesVars - } - showMissingness={vizConfig.showMissingness} - // this can be used to show and hide no data control - onShowMissingnessChange={ - computation.descriptor.type === 'pass' - ? onShowMissingnessChange - : undefined - } - outputEntity={outputEntity} - /> + ), + }, + ]} + entities={entities} + selectedVariables={selectedVariables} + onChange={handleInputVariableChange} + constraints={dataElementConstraints} + dataElementDependencyOrder={dataElementDependencyOrder} + starredVariables={starredVariables} + toggleStarredVariable={toggleStarredVariable} + enableShowMissingnessToggle={ + (overlayVariable != null || facetVariable != null) && + data.value?.completeCasesAllVars !== + data.value?.completeCasesAxesVars + } + showMissingness={vizConfig.showMissingness} + // this can be used to show and hide no data control + onShowMissingnessChange={ + computation.descriptor.type === 'pass' + ? onShowMissingnessChange + : undefined + } + outputEntity={outputEntity} + /> + )}
- + {!hideInputsAndControls && ( + + )} ) { controlsNode={controlsNode} tableGroupNode={tableGroupNode} showRequiredInputsPrompt={!areRequiredInputsSelected} + hideControls={hideInputsAndControls} />
); diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MapVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MapVisualization.tsx index d49f92eb71..a9a30d6f6a 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MapVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MapVisualization.tsx @@ -113,6 +113,7 @@ function MapViz(props: VisualizationProps) { otherVizOverviews, starredVariables, toggleStarredVariable, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -399,45 +400,57 @@ function MapViz(props: VisualizationProps) { justifyContent: 'space-between', }} > - {geoConfigs.length > 1 && ( - - Map the locations of - - + {!hideInputsAndControls && ( + <> + {geoConfigs.length > 1 && ( + + Map the locations of + + + )} + + )} - - + {!hideInputsAndControls && ( + + )} ) { * thus, we're directly coercing a boolean as to whether or not the required variable has been chosen */ showRequiredInputsPrompt={!vizConfig.xAxisVariable} + hideControls={hideInputsAndControls} /> ); diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx index 2373b0ef95..782eea6b25 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx @@ -200,6 +200,7 @@ function MosaicViz(props: Props) { toggleStarredVariable, totalCounts, filteredCounts, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -982,36 +983,40 @@ function MosaicViz(props: Props) { )}
- + {!hideInputsAndControls && ( + + )}
- + {!hideInputsAndControls && ( + + )} ) { tableGroupNode={tableGroupNode} showRequiredInputsPrompt={!areRequiredInputsSelected} isMosaicPlot={true} + hideControls={hideInputsAndControls} />
diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx index f45617e6f9..5984a05b28 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx @@ -263,6 +263,7 @@ function ScatterplotViz(props: VisualizationProps) { totalCounts, filteredCounts, computeJobStatus, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); @@ -2026,29 +2027,31 @@ function ScatterplotViz(props: VisualizationProps) { return (
- + {!hideInputsAndControls && ( + + )}
) { ]} /> - + {!hideInputsAndControls && ( + + )} ) { controlsNode={controlsNode} tableGroupNode={tableGroupNode} showRequiredInputsPrompt={!areRequiredInputsSelected} + hideControls={hideInputsAndControls} />
); diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx index 686add6c79..b69c232e61 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx @@ -123,6 +123,7 @@ function VolcanoPlotViz(props: VisualizationProps) { dataElementDependencyOrder, filteredCounts, computeJobStatus, + hideInputsAndControls, } = props; const studyMetadata = useStudyMetadata(); @@ -596,35 +597,37 @@ function VolcanoPlotViz(props: VisualizationProps) { return (
- - - updateVizConfig({ log2FoldChangeThreshold: Number(newValue) }) - } - label="log2(Fold Change)" - minValue={0} - value={vizConfig.log2FoldChangeThreshold ?? DEFAULT_FC_THRESHOLD} - containerStyles={{ marginRight: 10 }} - /> + {!hideInputsAndControls && ( + + + updateVizConfig({ log2FoldChangeThreshold: Number(newValue) }) + } + label="log2(Fold Change)" + minValue={0} + value={vizConfig.log2FoldChangeThreshold ?? DEFAULT_FC_THRESHOLD} + containerStyles={{ marginRight: 10 }} + /> - - updateVizConfig({ significanceThreshold: Number(newValue) }) - } - minValue={0} - value={vizConfig.significanceThreshold ?? DEFAULT_SIG_THRESHOLD} - containerStyles={{ marginLeft: 10 }} - step={0.001} - /> - + + updateVizConfig({ significanceThreshold: Number(newValue) }) + } + minValue={0} + value={vizConfig.significanceThreshold ?? DEFAULT_SIG_THRESHOLD} + containerStyles={{ marginLeft: 10 }} + step={0.001} + /> + + )} {/* This should be populated with info from the colections var. So like "Showing 1000 taxa blah". Waiting on collections annotations. */} - {/* */} + />} */} ) { controlsNode={controlsNode} tableGroupNode={tableGroupNode} showRequiredInputsPrompt={false} + hideControls={hideInputsAndControls} />
); diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx index 9f3d47492d..0642ed2b79 100644 --- a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx +++ b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react'; + import { AnalysisState, PromiseHookState } from '../../core'; import { AppState, useAppState } from './appState'; @@ -10,6 +12,7 @@ import { GeoConfig } from '../../core/types/geoConfig'; import { EntityCounts } from '../../core/hooks/entityCounts'; import { VariableDescriptor } from '../../core/types/variable'; import { Filter } from '../../core/types/filter'; +import { FilledButton } from '@veupathdb/coreui'; import { DraggablePanel } from '@veupathdb/coreui/lib/components/containers'; import { ComputationPlugin } from '../../core/components/computations/Types'; @@ -44,6 +47,8 @@ export default function DraggableVisualization({ zIndexForStackingContext = 10, additionalRenderCondition, }: Props) { + const [hideInputsAndControls, setHideInputsAndControls] = useState(false); + const { computation: activeComputation, visualization: activeViz } = analysisState.getVisualizationAndComputation( appState.activeVisualizationId @@ -89,7 +94,22 @@ export default function DraggableVisualization({ minHeight: 200, }} > +
+ setHideInputsAndControls(!hideInputsAndControls)} + /> +
} plugins={plugins} + hideInputsAndControls={hideInputsAndControls} /> diff --git a/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx b/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx index b7daf32ceb..cc82a70859 100755 --- a/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx +++ b/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx @@ -663,6 +663,9 @@ function MapAnalysisImpl(props: ImplProps) { activeMarkerConfigurationType === 'bubble' ? 'Overlay variables are not available for this map type' : undefined, + // vizOptions: { + // hideInputsAndControls: + // } }); const subsetVariableAndEntity = useMemo(() => { diff --git a/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts b/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts index b239a33681..e4fd70ef4f 100644 --- a/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts +++ b/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts @@ -31,16 +31,18 @@ import { scatterplotRequest } from './plugins/scatterplot'; import TimeSeriesSVG from '../../../core/components/visualizations/implementations/selectorIcons/TimeSeriesSVG'; import _ from 'lodash'; +type StandaloneVizOptions = LayoutOptions & OverlayOptions; + interface Props { selectedOverlayConfig?: OverlayConfig | BubbleOverlayConfig; overlayHelp?: ReactNode; + vizOptions?: StandaloneVizOptions; } -type StandaloneVizOptions = LayoutOptions & OverlayOptions; - export function useStandaloneVizPlugins({ selectedOverlayConfig, overlayHelp = 'The overlay variable can be selected via the top-right panel.', + vizOptions, }: Props): Record { return useMemo(() => { function vizWithOptions( @@ -70,6 +72,7 @@ export function useStandaloneVizPlugins({ } }, getOverlayVariableHelp: () => overlayHelp, + ...vizOptions, }); } From d62723be1aab9d867432d3cf0e5c21301db0a044 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 9 Oct 2023 15:13:12 -0400 Subject: [PATCH 2/9] Make hide/show controls button sticky --- .../map/analysis/DraggableVisualization.tsx | 65 ++++++++++--------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx index 0642ed2b79..767c5781f3 100644 --- a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx +++ b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx @@ -86,18 +86,14 @@ export default function DraggableVisualization({ >
setHideInputsAndControls(!hideInputsAndControls)} />
- } - plugins={plugins} - hideInputsAndControls={hideInputsAndControls} - /> +
+ } + plugins={plugins} + hideInputsAndControls={hideInputsAndControls} + /> +
) : null; From db732c2fbb6e3d1cfde3c42ac8cf36a51cd828b5 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 9 Oct 2023 18:30:42 -0400 Subject: [PATCH 3/9] Remove border when controls are collapsed --- .../containers/DraggablePanel/index.tsx | 3 +- .../visualizations/VisualizationTypes.ts | 8 ++- .../VisualizationsContainer.tsx | 8 ++- .../implementations/BarplotVisualization.tsx | 16 +++-- .../implementations/BoxplotVisualization.tsx | 12 +++- .../HistogramVisualization.tsx | 14 +++- .../implementations/LineplotVisualization.tsx | 12 +++- .../implementations/MosaicVisualization.tsx | 20 ++++-- .../ScatterplotVisualization.tsx | 12 +++- .../VolcanoPlotVisualization.tsx | 12 +++- .../map/analysis/DraggableVisualization.tsx | 72 +++++++++++-------- 11 files changed, 138 insertions(+), 51 deletions(-) diff --git a/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx b/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx index 8cdc54e2c6..25ccead962 100644 --- a/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx +++ b/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx @@ -23,6 +23,7 @@ export type DraggablePanelStyleOverrides = { resize?: CSSProperties['resize']; width?: CSSProperties['width']; zIndex?: CSSProperties['zIndex']; + overflow?: CSSProperties['overflow']; }; export type HeightAndWidthInPixels = { @@ -205,7 +206,7 @@ export default function DraggablePanel({ css={css` // Hey, so you need to explicitly set overflow wherever // you plan to use resize. - overflow: auto; + overflow: ${styleOverrides?.overflow ?? 'auto'}; resize: ${styleOverrides?.resize ?? 'none'}; border-radius: 7px; // We want the content to render below the drag handle, so let's put this diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts index 475f006b1a..fd3e0a0550 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts +++ b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts @@ -12,6 +12,12 @@ import { } from '../../types/visualization'; import { JobStatus } from '../computations/ComputeJobStatusHook'; +export interface PlotContainerStylesOverrides + extends Omit { + width?: number; + height?: number; +} + /** * Props passed to viz components */ @@ -32,7 +38,7 @@ export interface VisualizationProps { otherVizOverviews: VisualizationOverview[]; computeJobStatus?: JobStatus; hideInputsAndControls?: boolean; - plotContainerStyles?: React.CSSProperties; + plotContainerStylesOverrides?: PlotContainerStylesOverrides; } export interface IsEnabledInPickerParams { diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx index 2709a7372f..60d2eba1cd 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx @@ -44,6 +44,7 @@ import { RunComputeButton, StatusIcon } from '../computations/RunComputeButton'; import { JobStatus } from '../computations/ComputeJobStatusHook'; import { ComputationStepContainer } from '../computations/ComputationStepContainer'; import { ComputationPlugin } from '../computations/Types'; +import { PlotContainerStylesOverrides } from './VisualizationTypes'; const cx = makeClassNameHelper('VisualizationsContainer'); @@ -67,6 +68,7 @@ interface Props { /** optional dynamic plugins */ plugins?: Partial>; hideInputsAndControls?: boolean; + plotContainerStylesOverrides?: PlotContainerStylesOverrides; } /** @@ -451,7 +453,8 @@ type FullScreenVisualizationPropKeys = | 'computeJobStatus' | 'createComputeJob' | 'plugins' - | 'hideInputsAndControls'; + | 'hideInputsAndControls' + | 'plotContainerStylesOverrides'; interface FullScreenVisualizationProps extends Pick { @@ -482,6 +485,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { createComputeJob, plugins = staticPlugins, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const themePrimaryColor = useUITheme()?.palette.primary; const history = useHistory(); @@ -727,6 +731,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { otherVizOverviews={overviews.others} computeJobStatus={computeJobStatus} hideInputsAndControls={hideInputsAndControls} + plotContainerStylesOverrides={plotContainerStylesOverrides} /> @@ -750,6 +755,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { otherVizOverviews={overviews.others} computeJobStatus={computeJobStatus} hideInputsAndControls={hideInputsAndControls} + plotContainerStylesOverrides={plotContainerStylesOverrides} /> )} diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx index e86c62ae1c..6c845982a3 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx @@ -113,8 +113,6 @@ export type BarplotDataWithStatistics = ( ) & CoverageStatistics; -// Do we want to pull this out and pass it in as a prop? -// If so, it will be harder to make sure we honor it as part of the API const plotContainerStyles = { height: 450, width: 750, @@ -194,11 +192,19 @@ function BarplotViz(props: VisualizationProps) { totalCounts, filteredCounts, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; const entities = useStudyEntities(filters); const dataClient: DataClient = useDataClient(); + const finalPlotContainerStyles = useMemo( + () => ({ + ...plotContainerStyles, + ...plotContainerStylesOverrides, + }), + [plotContainerStylesOverrides] + ); // use useVizConfig hook const [vizConfig, updateVizConfig] = useVizConfig( @@ -635,7 +641,7 @@ function BarplotViz(props: VisualizationProps) { const plotRef = useUpdateThumbnailEffect( updateThumbnail, - plotContainerStyles, + finalPlotContainerStyles, // The dependencies for needing to generate a new thumbnail [ data, @@ -655,7 +661,9 @@ function BarplotViz(props: VisualizationProps) { // these props are passed to either a single plot // or by FacetedPlot to each individual facet plot (where some will be overridden) const plotProps: BarplotProps = { - containerStyles: !isFaceted(data.value) ? plotContainerStyles : undefined, + containerStyles: !isFaceted(data.value) + ? finalPlotContainerStyles + : undefined, spacingOptions: !isFaceted(data.value) ? plotSpacingOptions : undefined, orientation: 'vertical', barLayout: 'group', diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx index ad053008f4..34e442d3ce 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx @@ -197,11 +197,19 @@ function BoxplotViz(props: VisualizationProps) { filteredCounts, computeJobStatus, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; const entities = useStudyEntities(filters); const dataClient: DataClient = useDataClient(); + const finalPlotContainerStyles = useMemo( + () => ({ + ...plotContainerStyles, + ...plotContainerStylesOverrides, + }), + [plotContainerStylesOverrides] + ); const [vizConfig, updateVizConfig] = useVizConfig( visualization.descriptor.configuration, @@ -690,7 +698,9 @@ function BoxplotViz(props: VisualizationProps) { // data.value data={data.value} updateThumbnail={updateThumbnail} - containerStyles={!isFaceted(data.value) ? plotContainerStyles : undefined} + containerStyles={ + !isFaceted(data.value) ? finalPlotContainerStyles : undefined + } spacingOptions={!isFaceted(data.value) ? plotSpacingOptions : undefined} orientation={'vertical'} displayLegend={false} diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx index 45a78919b6..87542369d0 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx @@ -224,11 +224,19 @@ function HistogramViz(props: VisualizationProps) { totalCounts, filteredCounts, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; const entities = useStudyEntities(filters); const dataClient: DataClient = useDataClient(); + const finalPlotContainerStyles = useMemo( + () => ({ + ...plotContainerStyles, + ...plotContainerStylesOverrides, + }), + [plotContainerStylesOverrides] + ); const [vizConfig, updateVizConfig] = useVizConfig( visualization.descriptor.configuration, @@ -982,7 +990,7 @@ function HistogramViz(props: VisualizationProps) { const plotRef = useUpdateThumbnailEffect( updateThumbnail, - plotContainerStyles, + finalPlotContainerStyles, [ data, vizConfig.checkedLegendItems, @@ -1000,7 +1008,9 @@ function HistogramViz(props: VisualizationProps) { ); const histogramProps: HistogramProps = { - containerStyles: !isFaceted(data.value) ? plotContainerStyles : undefined, + containerStyles: !isFaceted(data.value) + ? finalPlotContainerStyles + : undefined, dependentAxisLogScale: vizConfig.dependentAxisLogScale, independentAxisLabel: variableDisplayWithUnit(xAxisVariable) ?? 'Main', dependentAxisLabel: diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx index d883138e3b..4e86c7029d 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx @@ -276,11 +276,19 @@ function LineplotViz(props: VisualizationProps) { totalCounts, filteredCounts, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; const entities = useStudyEntities(filters); const dataClient: DataClient = useDataClient(); + const finalPlotContainerStyles = useMemo( + () => ({ + ...plotContainerStyles, + ...plotContainerStylesOverrides, + }), + [plotContainerStylesOverrides] + ); const [vizConfig, updateVizConfig] = useVizConfig( visualization.descriptor.configuration, @@ -996,7 +1004,7 @@ function LineplotViz(props: VisualizationProps) { const plotRef = useUpdateThumbnailEffect( updateThumbnail, - plotContainerStyles, + finalPlotContainerStyles, [ data, vizConfig.checkedLegendItems, @@ -1028,7 +1036,7 @@ function LineplotViz(props: VisualizationProps) { : 'Y-axis', displayLegend: false, containerStyles: !isFaceted(data.value?.dataSetProcess) - ? plotContainerStyles + ? finalPlotContainerStyles : undefined, spacingOptions: !isFaceted(data.value?.dataSetProcess) ? plotSpacingOptions diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx index 782eea6b25..bc8ff986a0 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx @@ -88,10 +88,6 @@ const plotContainerStyles = { const plotSpacingOptions = {}; -const statsTableStyles = { - width: plotContainerStyles.width, -}; - const facetedStatsTableStyles = {}; const facetedStatsTableContainerStyles = { @@ -201,11 +197,19 @@ function MosaicViz(props: Props) { totalCounts, filteredCounts, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; const entities = useStudyEntities(filters); const dataClient: DataClient = useDataClient(); + const finalPlotContainerStyles = useMemo( + () => ({ + ...plotContainerStyles, + ...plotContainerStylesOverrides, + }), + [plotContainerStylesOverrides] + ); // set default tab to Mosaic in TabbedDisplay component const [activeTab, setActiveTab] = useState( @@ -550,12 +554,14 @@ function MosaicViz(props: Props) { const plotRef = useUpdateThumbnailEffect( updateThumbnail, - plotContainerStyles, + finalPlotContainerStyles, [data] ); const mosaicProps: MosaicPlotProps = { - containerStyles: !isFaceted(data.value) ? plotContainerStyles : undefined, + containerStyles: !isFaceted(data.value) + ? finalPlotContainerStyles + : undefined, spacingOptions: !isFaceted(data.value) ? plotSpacingOptions : undefined, independentAxisLabel: xAxisLabel ?? 'X-axis', dependentAxisLabel: yAxisLabel ?? 'Y-axis', @@ -612,7 +618,7 @@ function MosaicViz(props: Props) { tableContainerStyles={ isFaceted(data.value) ? facetedStatsTableStyles - : statsTableStyles + : { width: finalPlotContainerStyles.width } } facetedContainerStyles={facetedStatsTableContainerStyles} independentVariable={xAxisLabel ?? 'X-axis'} diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx index 146f7e9403..1b1fab8d30 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx @@ -273,12 +273,20 @@ function ScatterplotViz(props: VisualizationProps) { filteredCounts, computeJobStatus, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; const entities = useStudyEntities(filters); const dataClient: DataClient = useDataClient(); + const finalPlotContainerStyles = useMemo( + () => ({ + ...plotContainerStyles, + ...plotContainerStylesOverrides, + }), + [plotContainerStylesOverrides] + ); const [vizConfig, updateVizConfig] = useVizConfig( visualization.descriptor.configuration, @@ -1199,7 +1207,7 @@ function ScatterplotViz(props: VisualizationProps) { const plotRef = useUpdateThumbnailEffect( updateThumbnail, - plotContainerStyles, + finalPlotContainerStyles, [ data, vizConfig.checkedLegendItems, @@ -1312,7 +1320,7 @@ function ScatterplotViz(props: VisualizationProps) { }, }, containerStyles: !isFaceted(data.value?.dataSetProcess) - ? plotContainerStyles + ? finalPlotContainerStyles : undefined, spacingOptions: !isFaceted(data.value?.dataSetProcess) ? plotSpacingOptions diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx index b269933401..0feed031d8 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx @@ -125,6 +125,7 @@ function VolcanoPlotViz(props: VisualizationProps) { filteredCounts, computeJobStatus, hideInputsAndControls, + plotContainerStylesOverrides, } = props; const studyMetadata = useStudyMetadata(); @@ -133,6 +134,13 @@ function VolcanoPlotViz(props: VisualizationProps) { const dataClient: DataClient = useDataClient(); const computationConfiguration: DifferentialAbundanceConfig = computation .descriptor.configuration as DifferentialAbundanceConfig; + const finalPlotContainerStyles = useMemo( + () => ({ + ...plotContainerStyles, + ...plotContainerStylesOverrides, + }), + [plotContainerStylesOverrides] + ); const [vizConfig, updateVizConfig] = useVizConfig( visualization.descriptor.configuration, @@ -375,7 +383,7 @@ function VolcanoPlotViz(props: VisualizationProps) { const plotRef = useUpdateThumbnailEffect( updateThumbnail, - plotContainerStyles, + finalPlotContainerStyles, [ finalData, // vizConfig.checkedLegendItems, TODO @@ -419,7 +427,7 @@ function VolcanoPlotViz(props: VisualizationProps) { markerBodyOpacity: data.value ? vizConfig.markerBodyOpacity ?? DEFAULT_MARKER_OPACITY : 0, - containerStyles: plotContainerStyles, + containerStyles: finalPlotContainerStyles, /** * Let's not display comparisonLabels before we have data for the viz. This prevents what may be * confusing behavior where selecting group values displays on the empty viz placeholder. diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx index 767c5781f3..fbf798346f 100644 --- a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx +++ b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx @@ -76,7 +76,11 @@ export default function DraggableVisualization({ confineToParentContainer showPanelTitle isOpen - styleOverrides={{ zIndex: zIndexForStackingContext, resize: 'both' }} + styleOverrides={{ + zIndex: zIndexForStackingContext, + resize: 'both', + overflow: 'hidden', + }} panelTitle={activeVizOverview?.displayName || ''} defaultPosition={{ x: 535, @@ -106,36 +110,48 @@ export default function DraggableVisualization({
- } - plugins={plugins} - hideInputsAndControls={hideInputsAndControls} - /> +
+ } + plugins={plugins} + hideInputsAndControls={hideInputsAndControls} + plotContainerStylesOverrides={ + hideInputsAndControls + ? { border: 'none', boxShadow: 'none' } + : undefined + } + /> +
From 73c869dc491e142da1da5e2209c6485e06bbfae6 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Mon, 9 Oct 2023 18:40:27 -0400 Subject: [PATCH 4/9] Clean up --- packages/libs/eda/src/lib/core/components/layouts/types.ts | 2 -- .../visualizations/implementations/LineplotVisualization.tsx | 2 -- packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx | 3 --- 3 files changed, 7 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/layouts/types.ts b/packages/libs/eda/src/lib/core/components/layouts/types.ts index 205e1179f6..30f272aed6 100644 --- a/packages/libs/eda/src/lib/core/components/layouts/types.ts +++ b/packages/libs/eda/src/lib/core/components/layouts/types.ts @@ -4,7 +4,6 @@ export interface LayoutProps { containerStyles?: CSSProperties; legendNode?: ReactNode; legendStyles?: CSSProperties; - // inputVariablesNode?: ReactNode; plotNode: ReactNode; controlsNode?: ReactNode; plotStyles?: CSSProperties; @@ -21,7 +20,6 @@ export interface LayoutOptions { hideFacetInputs?: boolean; // considering marginal histogram showMarginalHistogram?: boolean; - // hideInputsAndControls?: boolean; } export interface TitleOptions { diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx index 4e86c7029d..733548407b 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx @@ -1238,7 +1238,6 @@ function LineplotViz(props: VisualizationProps) { setTruncatedDependentAxisWarning, ]); - // here const controlsNode = ( <> {/* pre-occupied space for Banner: 1 line = 2.5em */} @@ -1769,7 +1768,6 @@ function LineplotViz(props: VisualizationProps) { return (
- {/* Here (input variables) */} {!hideInputsAndControls && ( { From 4fc4b5bb2bfd585138ec8b5857e8de4d1c7d3f22 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 11 Oct 2023 17:21:11 -0400 Subject: [PATCH 5/9] Update hide controls button styling --- .../libs/eda/src/lib/map/analysis/DraggableVisualization.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx index fbf798346f..1741b8bcdb 100644 --- a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx +++ b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx @@ -106,6 +106,8 @@ export default function DraggableVisualization({ setHideInputsAndControls(!hideInputsAndControls)} + size="small" + textTransform="none" />
Date: Wed, 11 Oct 2023 17:25:24 -0400 Subject: [PATCH 6/9] Change prop name --- .../components/visualizations/VisualizationTypes.ts | 4 ++-- .../visualizations/VisualizationsContainer.tsx | 12 ++++++------ .../implementations/BarplotVisualization.tsx | 6 +++--- .../implementations/BoxplotVisualization.tsx | 6 +++--- .../implementations/HistogramVisualization.tsx | 6 +++--- .../implementations/LineplotVisualization.tsx | 6 +++--- .../implementations/MosaicVisualization.tsx | 6 +++--- .../implementations/ScatterplotVisualization.tsx | 6 +++--- .../implementations/VolcanoPlotVisualization.tsx | 6 +++--- .../src/lib/map/analysis/DraggableVisualization.tsx | 2 +- 10 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts index fd3e0a0550..38feaf1f16 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts +++ b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationTypes.ts @@ -12,7 +12,7 @@ import { } from '../../types/visualization'; import { JobStatus } from '../computations/ComputeJobStatusHook'; -export interface PlotContainerStylesOverrides +export interface PlotContainerStyleOverrides extends Omit { width?: number; height?: number; @@ -38,7 +38,7 @@ export interface VisualizationProps { otherVizOverviews: VisualizationOverview[]; computeJobStatus?: JobStatus; hideInputsAndControls?: boolean; - plotContainerStylesOverrides?: PlotContainerStylesOverrides; + plotContainerStyleOverrides?: PlotContainerStyleOverrides; } export interface IsEnabledInPickerParams { diff --git a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx index 60d2eba1cd..935586a7fa 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/VisualizationsContainer.tsx @@ -44,7 +44,7 @@ import { RunComputeButton, StatusIcon } from '../computations/RunComputeButton'; import { JobStatus } from '../computations/ComputeJobStatusHook'; import { ComputationStepContainer } from '../computations/ComputationStepContainer'; import { ComputationPlugin } from '../computations/Types'; -import { PlotContainerStylesOverrides } from './VisualizationTypes'; +import { PlotContainerStyleOverrides } from './VisualizationTypes'; const cx = makeClassNameHelper('VisualizationsContainer'); @@ -68,7 +68,7 @@ interface Props { /** optional dynamic plugins */ plugins?: Partial>; hideInputsAndControls?: boolean; - plotContainerStylesOverrides?: PlotContainerStylesOverrides; + plotContainerStyleOverrides?: PlotContainerStyleOverrides; } /** @@ -454,7 +454,7 @@ type FullScreenVisualizationPropKeys = | 'createComputeJob' | 'plugins' | 'hideInputsAndControls' - | 'plotContainerStylesOverrides'; + | 'plotContainerStyleOverrides'; interface FullScreenVisualizationProps extends Pick { @@ -485,7 +485,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { createComputeJob, plugins = staticPlugins, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const themePrimaryColor = useUITheme()?.palette.primary; const history = useHistory(); @@ -731,7 +731,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { otherVizOverviews={overviews.others} computeJobStatus={computeJobStatus} hideInputsAndControls={hideInputsAndControls} - plotContainerStylesOverrides={plotContainerStylesOverrides} + plotContainerStyleOverrides={plotContainerStyleOverrides} />
@@ -755,7 +755,7 @@ export function FullScreenVisualization(props: FullScreenVisualizationProps) { otherVizOverviews={overviews.others} computeJobStatus={computeJobStatus} hideInputsAndControls={hideInputsAndControls} - plotContainerStylesOverrides={plotContainerStylesOverrides} + plotContainerStyleOverrides={plotContainerStyleOverrides} /> )}
diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx index 6c845982a3..0941d30d3e 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx @@ -192,7 +192,7 @@ function BarplotViz(props: VisualizationProps) { totalCounts, filteredCounts, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -201,9 +201,9 @@ function BarplotViz(props: VisualizationProps) { const finalPlotContainerStyles = useMemo( () => ({ ...plotContainerStyles, - ...plotContainerStylesOverrides, + ...plotContainerStyleOverrides, }), - [plotContainerStylesOverrides] + [plotContainerStyleOverrides] ); // use useVizConfig hook diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx index 34e442d3ce..a2c6da8061 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx @@ -197,7 +197,7 @@ function BoxplotViz(props: VisualizationProps) { filteredCounts, computeJobStatus, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -206,9 +206,9 @@ function BoxplotViz(props: VisualizationProps) { const finalPlotContainerStyles = useMemo( () => ({ ...plotContainerStyles, - ...plotContainerStylesOverrides, + ...plotContainerStyleOverrides, }), - [plotContainerStylesOverrides] + [plotContainerStyleOverrides] ); const [vizConfig, updateVizConfig] = useVizConfig( diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx index 87542369d0..89e034f1ef 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx @@ -224,7 +224,7 @@ function HistogramViz(props: VisualizationProps) { totalCounts, filteredCounts, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -233,9 +233,9 @@ function HistogramViz(props: VisualizationProps) { const finalPlotContainerStyles = useMemo( () => ({ ...plotContainerStyles, - ...plotContainerStylesOverrides, + ...plotContainerStyleOverrides, }), - [plotContainerStylesOverrides] + [plotContainerStyleOverrides] ); const [vizConfig, updateVizConfig] = useVizConfig( diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx index 733548407b..a10cc30c52 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/LineplotVisualization.tsx @@ -276,7 +276,7 @@ function LineplotViz(props: VisualizationProps) { totalCounts, filteredCounts, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -285,9 +285,9 @@ function LineplotViz(props: VisualizationProps) { const finalPlotContainerStyles = useMemo( () => ({ ...plotContainerStyles, - ...plotContainerStylesOverrides, + ...plotContainerStyleOverrides, }), - [plotContainerStylesOverrides] + [plotContainerStyleOverrides] ); const [vizConfig, updateVizConfig] = useVizConfig( diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx index bc8ff986a0..a3f91c3681 100644 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx @@ -197,7 +197,7 @@ function MosaicViz(props: Props) { totalCounts, filteredCounts, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const studyMetadata = useStudyMetadata(); const { id: studyId } = studyMetadata; @@ -206,9 +206,9 @@ function MosaicViz(props: Props) { const finalPlotContainerStyles = useMemo( () => ({ ...plotContainerStyles, - ...plotContainerStylesOverrides, + ...plotContainerStyleOverrides, }), - [plotContainerStylesOverrides] + [plotContainerStyleOverrides] ); // set default tab to Mosaic in TabbedDisplay component diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx index 1b1fab8d30..56676e2fae 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/ScatterplotVisualization.tsx @@ -273,7 +273,7 @@ function ScatterplotViz(props: VisualizationProps) { filteredCounts, computeJobStatus, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const studyMetadata = useStudyMetadata(); @@ -283,9 +283,9 @@ function ScatterplotViz(props: VisualizationProps) { const finalPlotContainerStyles = useMemo( () => ({ ...plotContainerStyles, - ...plotContainerStylesOverrides, + ...plotContainerStyleOverrides, }), - [plotContainerStylesOverrides] + [plotContainerStyleOverrides] ); const [vizConfig, updateVizConfig] = useVizConfig( diff --git a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx index 00cc64aefd..3200e9d4e8 100755 --- a/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx +++ b/packages/libs/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx @@ -124,7 +124,7 @@ function VolcanoPlotViz(props: VisualizationProps) { filteredCounts, computeJobStatus, hideInputsAndControls, - plotContainerStylesOverrides, + plotContainerStyleOverrides, } = props; const studyMetadata = useStudyMetadata(); @@ -136,9 +136,9 @@ function VolcanoPlotViz(props: VisualizationProps) { const finalPlotContainerStyles = useMemo( () => ({ ...plotContainerStyles, - ...plotContainerStylesOverrides, + ...plotContainerStyleOverrides, }), - [plotContainerStylesOverrides] + [plotContainerStyleOverrides] ); const [vizConfig, updateVizConfig] = useVizConfig( diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx index 1741b8bcdb..ed8b50da4f 100644 --- a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx +++ b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx @@ -147,7 +147,7 @@ export default function DraggableVisualization({ actions={<>} plugins={plugins} hideInputsAndControls={hideInputsAndControls} - plotContainerStylesOverrides={ + plotContainerStyleOverrides={ hideInputsAndControls ? { border: 'none', boxShadow: 'none' } : undefined From 88408b025f0ebd23c3babe4441f9b45945babadc Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Wed, 11 Oct 2023 17:30:40 -0400 Subject: [PATCH 7/9] Revert changes to file --- .../eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts b/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts index e4fd70ef4f..b239a33681 100644 --- a/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts +++ b/packages/libs/eda/src/lib/map/analysis/hooks/standaloneVizPlugins.ts @@ -31,18 +31,16 @@ import { scatterplotRequest } from './plugins/scatterplot'; import TimeSeriesSVG from '../../../core/components/visualizations/implementations/selectorIcons/TimeSeriesSVG'; import _ from 'lodash'; -type StandaloneVizOptions = LayoutOptions & OverlayOptions; - interface Props { selectedOverlayConfig?: OverlayConfig | BubbleOverlayConfig; overlayHelp?: ReactNode; - vizOptions?: StandaloneVizOptions; } +type StandaloneVizOptions = LayoutOptions & OverlayOptions; + export function useStandaloneVizPlugins({ selectedOverlayConfig, overlayHelp = 'The overlay variable can be selected via the top-right panel.', - vizOptions, }: Props): Record { return useMemo(() => { function vizWithOptions( @@ -72,7 +70,6 @@ export function useStandaloneVizPlugins({ } }, getOverlayVariableHelp: () => overlayHelp, - ...vizOptions, }); } From fea8742d53580cc35b5860d35a5af1640901aac2 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 12 Oct 2023 15:57:57 -0400 Subject: [PATCH 8/9] Change button text --- .../libs/eda/src/lib/map/analysis/DraggableVisualization.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx index ed8b50da4f..0448ad0a02 100644 --- a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx +++ b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx @@ -104,7 +104,7 @@ export default function DraggableVisualization({ }} > setHideInputsAndControls(!hideInputsAndControls)} size="small" textTransform="none" From be595700cfd4778554c5e9e13d644da1dbf142d5 Mon Sep 17 00:00:00 2001 From: Connor Howington Date: Thu, 12 Oct 2023 16:07:50 -0400 Subject: [PATCH 9/9] Ensure controls are shown when new viz is made --- .../eda/src/lib/map/analysis/DraggableVisualization.tsx | 8 ++++---- packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx | 5 +++++ .../libs/eda/src/lib/map/analysis/MapVizManagement.tsx | 3 +++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx index 0448ad0a02..edf62a7429 100644 --- a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx +++ b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx @@ -1,5 +1,3 @@ -import { useState } from 'react'; - import { AnalysisState, PromiseHookState } from '../../core'; import { AppState, useAppState } from './appState'; @@ -31,6 +29,8 @@ interface Props { filters: Filter[]; zIndexForStackingContext: number; additionalRenderCondition?: () => void; + hideInputsAndControls: boolean; + setHideInputsAndControls: (value: boolean) => void; } export default function DraggableVisualization({ @@ -46,9 +46,9 @@ export default function DraggableVisualization({ filters, zIndexForStackingContext = 10, additionalRenderCondition, + hideInputsAndControls, + setHideInputsAndControls, }: Props) { - const [hideInputsAndControls, setHideInputsAndControls] = useState(false); - const { computation: activeComputation, visualization: activeViz } = analysisState.getVisualizationAndComputation( appState.activeVisualizationId diff --git a/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx b/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx index b7daf32ceb..8d3c5f3dfd 100755 --- a/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx +++ b/packages/libs/eda/src/lib/map/analysis/MapAnalysis.tsx @@ -274,6 +274,8 @@ function MapAnalysisImpl(props: ImplProps) { const subsettingClient = useSubsettingClient(); const geoConfig = geoConfigs[0]; const history = useHistory(); + const [hideVizInputsAndControls, setHideVizInputsAndControls] = + useState(false); // FIXME use the sharingUrl prop to construct this const sharingUrl = new URL(`../${analysisId}/import`, window.location.href) @@ -919,6 +921,7 @@ function MapAnalysisImpl(props: ImplProps) { plugins={plugins} geoConfigs={geoConfigs} mapType={activeMarkerConfigurationType} + setHideVizInputsAndControls={setHideVizInputsAndControls} /> ), }, @@ -1444,6 +1447,8 @@ function MapAnalysisImpl(props: ImplProps) { DraggablePanelIds.VIZ_PANEL )} additionalRenderCondition={areMapTypeAndActiveVizCompatible} + hideInputsAndControls={hideVizInputsAndControls} + setHideInputsAndControls={setHideVizInputsAndControls} /> )} diff --git a/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx b/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx index 61b82082ef..caae4da354 100644 --- a/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx +++ b/packages/libs/eda/src/lib/map/analysis/MapVizManagement.tsx @@ -29,6 +29,7 @@ interface Props { // visualizationPlugins: Partial>; geoConfigs: GeoConfig[]; mapType?: MarkerConfiguration['type']; + setHideVizInputsAndControls: (value: boolean) => void; } const mapVizManagementClassName = makeClassNameHelper('MapVizManagement'); @@ -41,12 +42,14 @@ export default function MapVizManagement({ setActiveVisualizationId, plugins, mapType, + setHideVizInputsAndControls, }: Props) { const [isVizSelectorVisible, setIsVizSelectorVisible] = useState(false); function onVisualizationCreated(visualizationId: string) { setIsVizSelectorVisible(false); setActiveVisualizationId(visualizationId); + setHideVizInputsAndControls(false); } if (!analysisState.analysis) return null;