Skip to content

Commit 1af288a

Browse files
misspranmisspran
committed
fix styling of ModelInterpretation, also fix some render logic for MannWhitneyCompareMetrics
1 parent 5f66cb2 commit 1af288a

File tree

5 files changed

+123
-38
lines changed

5 files changed

+123
-38
lines changed

‎src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,16 @@ exports[`Results View Should display Base, New and Common graphs with replicates
249249
</div>
250250
</div>
251251
</div>
252+
<hr
253+
class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-lhgpb-MuiDivider-root"
254+
/>
255+
<div
256+
class="MuiStack-root css-nen11g-MuiStack-root"
257+
>
258+
<div
259+
style="display: grid; grid-template-columns: .75fr 1fr; gap: 1px;"
260+
/>
261+
</div>
252262
</div>
253263
</section>
254264
`;
@@ -550,6 +560,16 @@ exports[`Results View Should display Base, New and Common graphs with tooltips 1
550560
</div>
551561
</div>
552562
</div>
563+
<hr
564+
class="MuiDivider-root MuiDivider-fullWidth MuiDivider-flexItem css-lhgpb-MuiDivider-root"
565+
/>
566+
<div
567+
class="MuiStack-root css-nen11g-MuiStack-root"
568+
>
569+
<div
570+
style="display: grid; grid-template-columns: .75fr 1fr; gap: 1px;"
571+
/>
572+
</div>
553573
</div>
554574
</section>
555575
`;

‎src/components/CompareResults/MannWhitneyCompareMetrics.tsx‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const MannWhitneyCompareMetrics = ({
2727
return {
2828
backgroundColor,
2929
marginBottom: 2,
30-
width: '100%',
30+
width: '85%',
3131
borderRadius: '5px',
3232
padding: 2,
3333
'& .test-row-container': {
@@ -86,6 +86,39 @@ export const MannWhitneyCompareMetrics = ({
8686
: 'N/A';
8787
const baseMode = result?.silverman_kde?.base_mode_count ?? null;
8888
const newMode = result?.silverman_kde?.new_mode_count ?? null;
89+
90+
// Mode interpretation base on mode counts
91+
const getModeInterpretation = (
92+
baseModeCount: number | null,
93+
newModeCount: number | null,
94+
) => {
95+
if (!baseModeCount && !newModeCount)
96+
return 'Base and New mode counts are null, cannot run silverman test';
97+
if (baseModeCount === 1 && newModeCount === 1)
98+
return 'Base and New revisions unimodal';
99+
if (baseModeCount && newModeCount && baseModeCount > 1 && newModeCount > 1)
100+
return 'Base and New revisions is multimodal';
101+
if (
102+
baseModeCount &&
103+
newModeCount &&
104+
baseModeCount === 1 &&
105+
newModeCount > 1
106+
)
107+
return 'Base is unimodal and New is multimodal';
108+
if (
109+
baseModeCount &&
110+
newModeCount &&
111+
baseModeCount > 1 &&
112+
newModeCount === 1
113+
)
114+
return 'Base is multimodal and New is unimodal';
115+
if (baseModeCount && baseModeCount === 1) return 'Base is unimodal';
116+
if (baseModeCount && baseModeCount > 1) return 'Base is multimodal';
117+
if (newModeCount && newModeCount > 1) return 'New is multimodal';
118+
if (newModeCount && newModeCount === 1) return 'New is unimodal';
119+
return '';
120+
};
121+
89122
return (
90123
<Box sx={{ ...styles[mode] }}>
91124
<table
@@ -177,7 +210,7 @@ export const MannWhitneyCompareMetrics = ({
177210
<td>Estimated Modes</td>
178211
<td>{baseMode}</td>
179212
<td>{newMode}</td>
180-
<td>{result?.silverman_kde?.mode_summary ?? null}</td>
213+
<td>{getModeInterpretation(baseMode, newMode)}</td>
181214
</tr>
182215
</tbody>
183216
</table>

‎src/components/CompareResults/ModeInterpretation.tsx‎

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import { Box } from '@mui/material';
22

3+
import { MANN_WHITNEY_U } from '../../common/constants';
34
import { useAppSelector } from '../../hooks/app';
45
import { Colors } from '../../styles/Colors';
56
import { MannWhitneyResultsItem } from '../../types/state';
67
import { TestVersion } from '../../types/types';
7-
import { MANN_WHITNEY_U } from '../../common/constants';
88

9-
export const ModeInterpretation = ({result, testVersion}:{result: MannWhitneyResultsItem, testVersion: TestVersion}) => {
9+
export const ModeInterpretation = ({
10+
result,
11+
testVersion,
12+
}: {
13+
result: MannWhitneyResultsItem;
14+
testVersion: TestVersion;
15+
}) => {
1016
if (!result || !result.silverman_kde || testVersion !== MANN_WHITNEY_U) {
1117
return null;
1218
}
@@ -17,38 +23,50 @@ export const ModeInterpretation = ({result, testVersion}:{result: MannWhitneyRes
1723

1824
return {
1925
backgroundColor,
20-
display: 'grid',
21-
gridTemplateColumns: '1.5fr 1fr 2fr',
22-
gap: '10px',
26+
display: 'block',
2327
alignItems: 'center',
28+
margin: '15px',
29+
borderRadius: '5px',
30+
padding: 2,
2431
};
2532
}
2633
const mode = useAppSelector((state) => state.theme.mode);
34+
35+
// const result?.silverman_kde?.mode_comments
2736
return (
2837
<Box sx={getStyles(mode)}>
29-
<table
30-
style={{
31-
display: 'grid',
32-
gridTemplateColumns: '1.5fr 1fr 2fr',
33-
gap: '10px',
34-
alignItems: 'center',
35-
}}
36-
>
38+
<table>
3739
<thead>
38-
<td>
39-
<tr></tr>
40-
<tr>Median Shift</tr>
41-
<tr>Interpretation</tr>
42-
</td>
40+
<tr
41+
style={{
42+
display: 'grid',
43+
gridTemplateColumns: '2.75fr 1fr 1.25fr',
44+
gap: 4,
45+
textAlign: 'left',
46+
}}
47+
>
48+
<th></th>
49+
<th>Median Shift</th>
50+
<th>Interpretation</th>
51+
</tr>
4352
</thead>
4453
<tbody>
45-
<td>
46-
<tr>{result.silverman_kde.mode_summary}</tr>
47-
<tr>{result.silverman_kde.shift}</tr>
48-
<tr>{result.silverman_kde.shift_summary ?? 'No significant shift'}</tr>
49-
</td>
54+
<tr
55+
style={{
56+
display: 'grid',
57+
gridTemplateColumns: '2.75fr 1fr 1.25fr',
58+
gap: 4,
59+
textAlign: 'left',
60+
}}
61+
>
62+
<td>{result.silverman_kde.mode_summary}</td>
63+
<td>{result.silverman_kde.shift}</td>
64+
<td>
65+
{result.silverman_kde.shift_summary ?? 'No significant shift'}
66+
</td>
67+
</tr>
5068
</tbody>
5169
</table>
5270
</Box>
5371
);
54-
};
72+
};

‎src/components/CompareResults/RevisionRowExpandable.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack';
55

66
import CommonGraph from './CommonGraph';
77
import Distribution from './Distribution';
8+
import { ModeInterpretation } from './ModeInterpretation';
89
import { MANN_WHITNEY_U, STUDENT_T } from '../../common/constants';
910
import { Strings } from '../../resources/Strings';
1011
import { Spacing } from '../../styles';
@@ -16,7 +17,6 @@ import { TestVersion } from '../../types/types';
1617
import { formatNumber } from './../../utils/format';
1718
import { MannWhitneyCompareMetrics } from './MannWhitneyCompareMetrics';
1819
import { StatisticsWarnings } from './StatisticsWarnings';
19-
import { ModeInterpretation } from './ModeInterpretation';
2020

2121
const strings = Strings.components.expandableRow;
2222
const { singleRun, confidenceNote } = strings;
@@ -87,6 +87,7 @@ function RevisionRowExpandable(props: RevisionRowExpandableProps) {
8787
padding: 1,
8888
borderRadius: '5px',
8989
minWidth: '287px',
90+
marginTop: 2,
9091
}}
9192
>
9293
<table
@@ -158,15 +159,6 @@ function RevisionRowExpandable(props: RevisionRowExpandableProps) {
158159
{testVersion === STUDENT_T && (
159160
<Distribution result={result as CompareResultsItem} />
160161
)}
161-
{/******* mann-whiteney rendering **************/}
162-
<StatisticsWarnings
163-
result={result as MannWhitneyResultsItem}
164-
testVersion={testVersion}
165-
/>
166-
<MannWhitneyCompareMetrics
167-
result={result as MannWhitneyResultsItem}
168-
testVersion={testVersion}
169-
/>
170162
</Stack>
171163
</Grid>
172164
<Grid size={4}>
@@ -225,10 +217,32 @@ function RevisionRowExpandable(props: RevisionRowExpandableProps) {
225217
)}
226218
{/******* mann-whiteney rendering **************/}
227219
{renderPValCliffsDeltaComp(result as MannWhitneyResultsItem)}
228-
<ModeInterpretation result={result as MannWhitneyResultsItem} testVersion={testVersion}/>
229220
</div>
230221
</Grid>
231222
</Grid>
223+
<Stack>
224+
{/******* mann-whiteney rendering **************/}
225+
<div
226+
style={{
227+
display: 'grid',
228+
gridTemplateColumns: '.75fr 1fr',
229+
gap: 1,
230+
}}
231+
>
232+
<StatisticsWarnings
233+
result={result as MannWhitneyResultsItem}
234+
testVersion={testVersion}
235+
/>
236+
<ModeInterpretation
237+
result={result as MannWhitneyResultsItem}
238+
testVersion={testVersion}
239+
/>
240+
</div>
241+
<MannWhitneyCompareMetrics
242+
result={result as MannWhitneyResultsItem}
243+
testVersion={testVersion}
244+
/>
245+
</Stack>
232246
</Stack>
233247
</Box>
234248
);

‎src/components/CompareResults/StatisticsWarnings.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const StatisticsWarnings = ({
2222
flexDirection: 'column',
2323
flexWrap: 'wrap',
2424
borderRadius: 1,
25-
padding: 2,
25+
padding: 1,
2626
'& .warning-row': {
2727
verticalAlign: 'bottom',
2828
display: 'flex',

0 commit comments

Comments
 (0)