Skip to content

Commit 4c1222b

Browse files
chowingtonchowington
authored
Merge pull request #771 from VEuPathDB/faceted-plot-variants
Use new FacetedPlot variants
2 parents b149c30 + b58a24d commit 4c1222b

File tree

7 files changed

+191
-116
lines changed

7 files changed

+191
-116
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"@material-ui/icons": "^4.11.2",
99
"@material-ui/lab": "^4.0.0-alpha.58",
1010
"@types/debounce-promise": "^3.1.3",
11-
"@veupathdb/components": "^0.11.2",
11+
"@veupathdb/components": "^0.11.5",
1212
"@veupathdb/core-components": "^0.2.45",
1313
"@veupathdb/http-utils": "^1.0.1",
1414
"@veupathdb/study-data-access": "^0.1.2",

‎src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx

+18-21
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// load Barplot component
22
import Barplot, { BarplotProps } from '@veupathdb/components/lib/plots/Barplot';
3-
import FacetedPlot from '@veupathdb/components/lib/plots/FacetedPlot';
3+
import FacetedBarplot from '@veupathdb/components/lib/plots/facetedPlots/FacetedBarplot';
44
import {
55
BarplotData,
66
BarplotDataSeries,
@@ -74,17 +74,12 @@ const plotContainerStyles = {
7474
boxShadow: '1px 1px 4px #00000066',
7575
};
7676

77-
const facetedPlotContainerStyles = {
78-
height: plotContainerStyles.height / 1.5,
79-
width: plotContainerStyles.width / 2,
80-
};
81-
8277
const plotSpacingOptions = {};
83-
const facetedPlotSpacingOptions = {
84-
marginRight: 10,
85-
marginLeft: 10,
86-
marginBotton: 10,
87-
marginTop: 50,
78+
79+
const modalPlotContainerStyles = {
80+
width: '100%',
81+
height: '100%',
82+
margin: 'auto',
8883
};
8984

9085
export const barplotVisualization: VisualizationType = {
@@ -316,6 +311,7 @@ function BarplotViz(props: VisualizationProps) {
316311
variable,
317312
entity,
318313
overlayVariable,
314+
facetVariable,
319315
computation.descriptor.type,
320316
])
321317
);
@@ -417,20 +413,16 @@ function BarplotViz(props: VisualizationProps) {
417413
// these props are passed to either a single plot
418414
// or by FacetedPlot to each individual facet plot (where some will be overridden)
419415
const plotProps: BarplotProps = {
420-
containerStyles: isFaceted(data.value)
421-
? facetedPlotContainerStyles
422-
: plotContainerStyles,
423-
spacingOptions: isFaceted(data.value)
424-
? facetedPlotSpacingOptions
425-
: plotSpacingOptions,
416+
containerStyles: !isFaceted(data.value) ? plotContainerStyles : undefined,
417+
spacingOptions: !isFaceted(data.value) ? plotSpacingOptions : undefined,
426418
orientation: 'vertical',
427419
barLayout: 'group',
428420
displayLegend: false,
429421
independentAxisLabel: axisLabelWithUnit(variable) ?? 'Main',
430422
dependentAxisLabel:
431423
vizConfig.valueSpec === 'count' ? 'Count' : 'Proportion',
432424
legendTitle: overlayVariable?.displayName,
433-
interactive: true,
425+
interactive: !isFaceted(data.value) ? true : false,
434426
showSpinner: data.pending || filteredCounts.pending,
435427
dependentAxisLogScale: vizConfig.dependentAxisLogScale,
436428
// set dependent axis range for log scale
@@ -441,10 +433,15 @@ function BarplotViz(props: VisualizationProps) {
441433
const plotNode = (
442434
<>
443435
{isFaceted(data.value) ? (
444-
<FacetedPlot
445-
component={Barplot}
436+
<FacetedBarplot
446437
data={data.value}
447-
props={plotProps}
438+
componentProps={plotProps}
439+
modalComponentProps={{
440+
independentAxisLabel: plotProps.independentAxisLabel,
441+
dependentAxisLabel: plotProps.dependentAxisLabel,
442+
displayLegend: plotProps.displayLegend,
443+
containerStyles: modalPlotContainerStyles,
444+
}}
448445
facetedPlotRef={plotRef}
449446
// for custom legend
450447
checkedLegendItems={vizConfig.checkedLegendItems}

‎src/lib/core/components/visualizations/implementations/BoxplotVisualization.tsx

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// load Boxplot component
22
import Boxplot, { BoxplotProps } from '@veupathdb/components/lib/plots/Boxplot';
3-
import FacetedPlot from '@veupathdb/components/lib/plots/FacetedPlot';
3+
import FacetedBoxplot from '@veupathdb/components/lib/plots/facetedPlots/FacetedBoxplot';
44

55
import { preorder } from '@veupathdb/wdk-client/lib/Utils/TreeUtils';
66
import { getOrElse } from 'fp-ts/lib/Either';
@@ -84,17 +84,12 @@ const plotContainerStyles = {
8484
boxShadow: '1px 1px 4px #00000066',
8585
};
8686

87-
const facetedPlotContainerStyles = {
88-
height: plotContainerStyles.height / 1.5,
89-
width: plotContainerStyles.width / 2,
90-
};
91-
9287
const plotSpacingOptions = {};
93-
const facetedPlotSpacingOptions = {
94-
marginRight: 15,
95-
marginLeft: 15,
96-
marginBotton: 10,
97-
marginTop: 50,
88+
89+
const modalPlotContainerStyles = {
90+
width: '100%',
91+
height: '100%',
92+
margin: 'auto',
9893
};
9994

10095
export const boxplotVisualization: VisualizationType = {
@@ -337,6 +332,10 @@ function BoxplotViz(props: VisualizationProps) {
337332
studyId,
338333
filters,
339334
dataClient,
335+
xAxisVariable,
336+
yAxisVariable,
337+
overlayVariable,
338+
facetVariable,
340339
// using vizConfig only causes issue with onCheckedLegendItemsChange
341340
vizConfig.xAxisVariable,
342341
vizConfig.yAxisVariable,
@@ -433,7 +432,7 @@ function BoxplotViz(props: VisualizationProps) {
433432
}
434433
: undefined;
435434
}
436-
}, [data]);
435+
}, [data, yAxisVariable?.type]);
437436

438437
// custom legend items for checkbox
439438
const legendItems: LegendItemsProps[] = useMemo(() => {
@@ -489,12 +488,8 @@ function BoxplotViz(props: VisualizationProps) {
489488
// data.value
490489
data={data.value}
491490
updateThumbnail={updateThumbnail}
492-
containerStyles={
493-
isFaceted(data.value) ? facetedPlotContainerStyles : plotContainerStyles
494-
}
495-
spacingOptions={
496-
isFaceted(data.value) ? facetedPlotSpacingOptions : plotSpacingOptions
497-
}
491+
containerStyles={!isFaceted(data.value) ? plotContainerStyles : undefined}
492+
spacingOptions={!isFaceted(data.value) ? plotSpacingOptions : undefined}
498493
orientation={'vertical'}
499494
displayLegend={false}
500495
independentAxisLabel={axisLabelWithUnit(xAxisVariable) ?? 'X-axis'}
@@ -504,7 +499,7 @@ function BoxplotViz(props: VisualizationProps) {
504499
showDependentAxisTickLabel={true}
505500
dependentAxisRange={dependentAxisRange}
506501
showMean={true}
507-
interactive={true}
502+
interactive={!isFaceted(data.value) ? true : false}
508503
showSpinner={data.pending || filteredCounts.pending}
509504
showRawData={true}
510505
legendTitle={axisLabelWithUnit(overlayVariable)}
@@ -664,16 +659,21 @@ function BoxplotWithControls({
664659
return (
665660
<>
666661
{isFaceted(data) ? (
667-
<FacetedPlot
668-
component={Boxplot}
662+
<FacetedBoxplot
669663
data={{
670664
...data,
671665
facets: data.facets.map(({ label, data }) => ({
672666
label,
673667
data: data?.series,
674668
})),
675669
}}
676-
props={boxplotComponentProps}
670+
componentProps={boxplotComponentProps}
671+
modalComponentProps={{
672+
independentAxisLabel: boxplotComponentProps.independentAxisLabel,
673+
dependentAxisLabel: boxplotComponentProps.dependentAxisLabel,
674+
displayLegend: boxplotComponentProps.displayLegend,
675+
containerStyles: modalPlotContainerStyles,
676+
}}
677677
facetedPlotRef={plotRef}
678678
// for custom legend: pass checkedLegendItems to PlotlyPlot
679679
checkedLegendItems={checkedLegendItems}

‎src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx

+17-22
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Histogram, {
22
HistogramProps,
33
} from '@veupathdb/components/lib/plots/Histogram';
4-
import FacetedPlot from '@veupathdb/components/lib/plots/FacetedPlot';
4+
import FacetedHistogram from '@veupathdb/components/lib/plots/facetedPlots/FacetedHistogram';
55
import BinWidthControl from '@veupathdb/components/lib/components/plotControls/BinWidthControl';
66
import LabelledGroup from '@veupathdb/components/lib/components/widgets/LabelledGroup';
77
import RadioButtonGroup from '@veupathdb/components/lib/components/widgets/RadioButtonGroup';
@@ -95,21 +95,14 @@ const plotContainerStyles = {
9595
boxShadow: '1px 1px 4px #00000066',
9696
};
9797

98-
const facetedPlotContainerStyles = {
99-
height: plotContainerStyles.height / 1.5,
100-
width: plotContainerStyles.width / 2,
101-
marginBottom: '.5em',
102-
};
103-
10498
const spacingOptions = {
10599
marginTop: 50,
106100
};
107101

108-
const facetedSpacingOption = {
109-
marginTop: 50,
110-
marginBottom: 10,
111-
marginLeft: 10,
112-
marginRight: 10,
102+
const modalPlotContainerStyles = {
103+
width: '100%',
104+
height: '100%',
105+
margin: 'auto',
113106
};
114107

115108
export const histogramVisualization: VisualizationType = {
@@ -373,6 +366,7 @@ function HistogramViz(props: VisualizationProps) {
373366
xAxisVariable,
374367
overlayVariable,
375368
facetVariable,
369+
valueType,
376370
])
377371
);
378372

@@ -529,13 +523,9 @@ function HistogramViz(props: VisualizationProps) {
529523
onValueSpecChange={onValueSpecChange}
530524
updateThumbnail={updateThumbnail}
531525
containerStyles={
532-
isFaceted(data.value)
533-
? facetedPlotContainerStyles
534-
: plotContainerStyles
535-
}
536-
spacingOptions={
537-
isFaceted(data.value) ? facetedSpacingOption : spacingOptions
526+
!isFaceted(data.value) ? plotContainerStyles : undefined
538527
}
528+
spacingOptions={!isFaceted(data.value) ? spacingOptions : undefined}
539529
orientation={'vertical'}
540530
barLayout={'stack'}
541531
displayLegend={false}
@@ -546,7 +536,7 @@ function HistogramViz(props: VisualizationProps) {
546536
independentAxisRange={defaultIndependentRange}
547537
// add dependent axis range for better displaying tick labels in log-scale
548538
dependentAxisRange={defaultDependentAxisRange}
549-
interactive
539+
interactive={!isFaceted(data.value) ? true : false}
550540
showSpinner={data.pending || filteredCounts.pending}
551541
filters={filters}
552542
completeCases={data.pending ? undefined : data.value?.completeCases}
@@ -653,10 +643,15 @@ function HistogramPlotWithControls({
653643
const plotNode = (
654644
<>
655645
{isFaceted(data) ? (
656-
<FacetedPlot
657-
component={Histogram}
646+
<FacetedHistogram
658647
data={data}
659-
props={histogramProps}
648+
componentProps={histogramProps}
649+
modalComponentProps={{
650+
independentAxisLabel: histogramProps.independentAxisLabel,
651+
dependentAxisLabel: histogramProps.dependentAxisLabel,
652+
displayLegend: histogramProps.displayLegend,
653+
containerStyles: modalPlotContainerStyles,
654+
}}
660655
facetedPlotRef={plotRef}
661656
// for custom legend: pass checkedLegendItems to PlotlyPlot
662657
checkedLegendItems={checkedLegendItems}

‎src/lib/core/components/visualizations/implementations/MosaicVisualization.tsx

+25-27
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
import Mosaic, {
33
MosaicPlotProps as MosaicProps,
44
} from '@veupathdb/components/lib/plots/MosaicPlot';
5-
import { FacetedData, MosaicData } from '@veupathdb/components/lib/types/plots';
5+
import {
6+
FacetedData,
7+
MosaicPlotData,
8+
} from '@veupathdb/components/lib/types/plots';
69
import { ContingencyTable } from '@veupathdb/components/lib/components/ContingencyTable';
710
// import { ErrorManagement } from '@veupathdb/components/lib/types/general';
811
import { preorder } from '@veupathdb/wdk-client/lib/Utils/TreeUtils';
@@ -47,7 +50,7 @@ import { VariablesByInputName } from '../../../utils/data-element-constraints';
4750
import { Variable } from '../../../types/study';
4851
import PluginError from '../PluginError';
4952
import { isFaceted } from '@veupathdb/components/lib/types/guards';
50-
import FacetedPlot from '@veupathdb/components/lib/plots/FacetedPlot';
53+
import FacetedMosaicPlot from '@veupathdb/components/lib/plots/facetedPlots/FacetedMosaicPlot';
5154

5255
const plotContainerStyles = {
5356
width: 750,
@@ -57,20 +60,8 @@ const plotContainerStyles = {
5760
boxShadow: '1px 1px 4px #00000066',
5861
};
5962

60-
const facetedPlotContainerStyles = {
61-
width: plotContainerStyles.width / 1.45,
62-
height: plotContainerStyles.height / 1.25,
63-
};
64-
6563
const plotSpacingOptions = {};
6664

67-
const facetedPlotSpacingOptions = {
68-
marginRight: 15,
69-
marginLeft: 15,
70-
marginBotton: 10,
71-
marginTop: 50,
72-
};
73-
7465
const statsTableStyles = {
7566
width: plotContainerStyles.width,
7667
};
@@ -87,14 +78,20 @@ const facetedStatsTableContainerStyles = {
8778
gap: '0.5em',
8879
};
8980

90-
type ContTableData = MosaicData &
81+
const modalPlotContainerStyles = {
82+
width: '100%',
83+
height: '100%',
84+
margin: 'auto',
85+
};
86+
87+
type ContTableData = MosaicPlotData &
9188
Partial<{
9289
pValue: number | string;
9390
degreesFreedom: number;
9491
chisq: number;
9592
}>;
9693

97-
type TwoByTwoData = MosaicData &
94+
type TwoByTwoData = MosaicPlotData &
9895
Partial<{
9996
pValue: number | string;
10097
relativeRisk: number;
@@ -401,19 +398,15 @@ function MosaicViz(props: Props) {
401398
updateThumbnail={updateThumbnail}
402399
data={data.value}
403400
containerStyles={
404-
isFaceted(data.value)
405-
? facetedPlotContainerStyles
406-
: plotContainerStyles
401+
!isFaceted(data.value) ? plotContainerStyles : undefined
407402
}
408403
spacingOptions={
409-
isFaceted(data.value)
410-
? facetedPlotSpacingOptions
411-
: plotSpacingOptions
404+
!isFaceted(data.value) ? plotSpacingOptions : undefined
412405
}
413406
independentAxisLabel={xAxisLabel ?? 'X-axis'}
414407
dependentAxisLabel={yAxisLabel ?? 'Y-axis'}
415-
displayLegend={true}
416-
interactive
408+
displayLegend={false}
409+
interactive={!isFaceted(data.value) ? true : false}
417410
showSpinner={data.pending}
418411
/>
419412
),
@@ -638,11 +631,16 @@ function MosaicPlotWithControls({
638631
return (
639632
<>
640633
{isFaceted(data) ? (
641-
<FacetedPlot
642-
component={Mosaic}
634+
<FacetedMosaicPlot
643635
facetedPlotRef={plotRef}
644636
data={data}
645-
props={mosaicProps}
637+
componentProps={mosaicProps}
638+
modalComponentProps={{
639+
independentAxisLabel: mosaicProps.independentAxisLabel,
640+
dependentAxisLabel: mosaicProps.dependentAxisLabel,
641+
displayLegend: mosaicProps.displayLegend,
642+
containerStyles: modalPlotContainerStyles,
643+
}}
646644
/>
647645
) : (
648646
<Mosaic

0 commit comments

Comments
 (0)