Skip to content

Commit 4417cc2

Browse files
bw2phildarnowsky-broad
bw2
authored and
phildarnowsky-broad
committed
update wording and layout to be more consistent
1 parent f88fab4 commit 4417cc2

File tree

6 files changed

+45
-37
lines changed

6 files changed

+45
-37
lines changed

‎browser/src/ShortTandemRepeatPage/ShortTandemRepeatAdjacentRepeatSection.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ import {
2626
maxGenotypeDistributionRepeats,
2727
} from './shortTandemRepeatHelpers'
2828
import { PopulationId } from '@gnomad/dataset-metadata/gnomadPopulations'
29+
import styled from "styled-components";
30+
31+
const Label = styled.label`
32+
white-space: nowrap;
33+
`
2934

3035
type Props = {
3136
adjacentRepeat: ShortTandemRepeatAdjacentRepeat
@@ -93,8 +98,8 @@ const ShortTandemRepeatAdjacentRepeatSection = ({
9398
setSelectedSex={setSelectedSex}
9499
/>
95100

96-
<label htmlFor={`short-tandem-repeat-${adjacentRepeat.id}-repeat-unit`}>
97-
Repeat unit: {/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
101+
<Label htmlFor={`short-tandem-repeat-${adjacentRepeat.id}-repeat-unit`}>
102+
Repeat unit: &nbsp;{/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
98103
<Select
99104
id={`short-tandem-repeat-${adjacentRepeat.id}-repeat-unit`}
100105
value={selectedRepeatUnit}
@@ -112,10 +117,10 @@ const ShortTandemRepeatAdjacentRepeatSection = ({
112117
</option>
113118
))}
114119
</Select>
115-
</label>
120+
</Label>
116121

117-
<label htmlFor={`short-tandem-repeat-${adjacentRepeat.id}-repeat-counts-scale`}>
118-
y-scale: {/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
122+
<Label htmlFor={`short-tandem-repeat-${adjacentRepeat.id}-repeat-counts-scale`}>
123+
y-scale: &nbsp;{/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
119124
<Select
120125
id={`short-tandem-repeat-${adjacentRepeat.id}-repeat-counts-scale`}
121126
value={selectedScaleType}
@@ -129,7 +134,7 @@ const ShortTandemRepeatAdjacentRepeatSection = ({
129134
<option value="linear-truncated-200">Linear: Truncated at 200</option>
130135
<option value="linear-truncated-1000">Linear: Truncated at 1000</option>
131136
</Select>
132-
</label>
137+
</Label>
133138
</ControlSection>
134139

135140
<h4 style={{ marginBottom: '0.66em' }}>Genotype Distribution</h4>

‎browser/src/ShortTandemRepeatPage/ShortTandemRepeatColorBySelect.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { ColorBy, ScaleType } from './ShortTandemRepeatAlleleSizeDistributionPlo
66

77
const Label = styled.label`
88
padding-right: 1em;
9+
white-space: nowrap;
910
`
1011

1112
type Props = {
@@ -30,7 +31,7 @@ const ShortTandemRepeatColorBySelect = ({
3031
}: Props) => {
3132
return (
3233
<Label htmlFor={`short-tandem-repeat-${id}-color-by-select`}>
33-
Color by: {/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
34+
Color by: &nbsp;{/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
3435
<Select
3536
id={`short-tandem-repeat-${id}-color-by-select`}
3637
value={selectedColorBy}

‎browser/src/ShortTandemRepeatPage/ShortTandemRepeatPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,7 @@ const ShortTandemRepeatPage = ({ datasetId, shortTandemRepeat }: ShortTandemRepe
370370

371371
{alleleSizeDistributionRepunits.length > 1 && (
372372
<label htmlFor={`short-tandem-repeat-${shortTandemRepeat.id}-repeat-unit`}>
373-
Repeat unit: {/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
373+
Repeat unit: &nbsp;{/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
374374
<Select
375375
id={`short-tandem-repeat-${shortTandemRepeat.id}-repeat-unit`}
376376
value={selectedAlleleSizeRepeatUnit}
@@ -436,7 +436,7 @@ const ShortTandemRepeatPage = ({ datasetId, shortTandemRepeat }: ShortTandemRepe
436436
<label
437437
htmlFor={`short-tandem-repeat-${shortTandemRepeat.id}-allele-size-distribution-scale`}
438438
>
439-
y-Scale: {/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
439+
y-Scale: &nbsp;{/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
440440
<Select
441441
id={`short-tandem-repeat-${shortTandemRepeat.id}-allele-size-distribution-scale`}
442442
value={selectedScaleType}

‎browser/src/ShortTandemRepeatPage/ShortTandemRepeatPopulationOptions.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@ const Wrapper = styled.div`
1919
}
2020
`
2121

22+
2223
const Label = styled.label`
2324
padding-right: 1em;
25+
white-space: nowrap;
2426
`
2527

2628
type Props = {
@@ -66,7 +68,7 @@ const ShortTandemRepeatPopulationOptions = ({
6668
</Label>
6769

6870
<Label htmlFor={`short-tandem-repeat-${id}-population-options-sex`}>
69-
Sex: {/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
71+
Sex: &nbsp;{/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
7072
<Select
7173
id={`short-tandem-repeat-${id}-population-options-sex`}
7274
value={selectedSex}

‎browser/src/ShortTandemRepeatPage/ShortTandemRepeatReads.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -72,33 +72,33 @@ const ShortTandemRepeatRead = ({ read }: ShortTandemRepeatReadProps) => {
7272
return (
7373
<div>
7474
<AttributeList style={{ marginBottom: '1em' }}>
75-
<AttributeListItem label="Population">
75+
<AttributeListItem label="Genetic ancestry group">
7676
{GNOMAD_POPULATION_NAMES[read.population]}
7777
</AttributeListItem>
7878
<AttributeListItem label="Sex">{read.sex}</AttributeListItem>
7979
<AttributeListItem label="Age">
8080
{read.age || 'Not available for this sample'}
8181
</AttributeListItem>
8282
<AttributeListItem label="Allele 1">
83-
{read.alleles[0].repeats} x {read.alleles[0].repeat_unit} with confidence interval:{' '}
83+
{read.alleles[0].repeat_unit} repeated {read.alleles[0].repeats} times with a{' '}
8484
{read.alleles[0].repeats_confidence_interval.lower}-
85-
{read.alleles[0].repeats_confidence_interval.upper}
85+
{read.alleles[0].repeats_confidence_interval.upper} confidence interval
8686
</AttributeListItem>
8787
<AttributeListItem label="Allele 2">
8888
{read.alleles.length > 1 ? (
8989
<>
90-
{read.alleles[1].repeats} x {read.alleles[1].repeat_unit} with confidence interval:{' '}
90+
{read.alleles[1].repeat_unit} repeated {read.alleles[1].repeats} times with a{' '}
9191
{read.alleles[1].repeats_confidence_interval.lower}-
92-
{read.alleles[1].repeats_confidence_interval.upper}
92+
{read.alleles[1].repeats_confidence_interval.upper} confidence interval
9393
</>
9494
) : (
9595
'None'
9696
)}
9797
</AttributeListItem>
98-
<AttributeListItem label="Manual review genotype quality">
98+
<AttributeListItem label="Manual review">
9999
{qualityDescriptionLabels[read.quality_description]}
100100
</AttributeListItem>
101-
<AttributeListItem label="Q genotype quality">{read.q_score.toFixed(3)}</AttributeListItem>
101+
<AttributeListItem label="Q score">{read.q_score.toFixed(3)}</AttributeListItem>
102102
</AttributeList>
103103
<ShortTandemRepeatReadImageWrapper>
104104
<ShortTandemRepeatReadImage
@@ -516,7 +516,7 @@ const ShortTandemRepeatReadsQualityFilterControls = ({
516516
</ShortTandemRepeatReadsFilterControlWrapper>
517517
<ShortTandemRepeatReadsFilterControlWrapper key="q-score">
518518
<Label htmlFor="short-tandem-repeat-reads-q-score-filter">
519-
Q-score: &nbsp;
519+
Q score: &nbsp;
520520
{/* @ts-expect-error TS(2769) FIXME: No overload matches this call. */}
521521
<Select
522522
id="short-tandem-repeat-reads-q-score-filter"

‎browser/src/ShortTandemRepeatPage/__snapshots__/ShortTandemRepeatPage.spec.tsx.snap

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@ exports[`ShortTandemRepeatPage with "exac" dataset has no unexected changes 1`]
478478
<label
479479
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
480480
>
481-
y-Scale:
481+
y-Scale:  
482482
<Select
483483
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
484484
onChange={[Function]}
@@ -1451,7 +1451,7 @@ exports[`ShortTandemRepeatPage with "gnomad_cnv_r4" dataset has no unexected cha
14511451
<label
14521452
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
14531453
>
1454-
y-Scale:
1454+
y-Scale:  
14551455
<Select
14561456
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
14571457
onChange={[Function]}
@@ -2424,7 +2424,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r2_1" dataset has no unexected chang
24242424
<label
24252425
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
24262426
>
2427-
y-Scale:
2427+
y-Scale:  
24282428
<Select
24292429
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
24302430
onChange={[Function]}
@@ -3397,7 +3397,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r2_1_controls" dataset has no unexec
33973397
<label
33983398
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
33993399
>
3400-
y-Scale:
3400+
y-Scale:  
34013401
<Select
34023402
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
34033403
onChange={[Function]}
@@ -4370,7 +4370,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r2_1_non_cancer" dataset has no unex
43704370
<label
43714371
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
43724372
>
4373-
y-Scale:
4373+
y-Scale:  
43744374
<Select
43754375
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
43764376
onChange={[Function]}
@@ -5343,7 +5343,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r2_1_non_neuro" dataset has no unexe
53435343
<label
53445344
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
53455345
>
5346-
y-Scale:
5346+
y-Scale:  
53475347
<Select
53485348
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
53495349
onChange={[Function]}
@@ -6316,7 +6316,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r2_1_non_topmed" dataset has no unex
63166316
<label
63176317
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
63186318
>
6319-
y-Scale:
6319+
y-Scale:  
63206320
<Select
63216321
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
63226322
onChange={[Function]}
@@ -7289,7 +7289,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r3" dataset has no unexected changes
72897289
<label
72907290
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
72917291
>
7292-
y-Scale:
7292+
y-Scale:  
72937293
<Select
72947294
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
72957295
onChange={[Function]}
@@ -8262,7 +8262,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r3_controls_and_biobanks" dataset ha
82628262
<label
82638263
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
82648264
>
8265-
y-Scale:
8265+
y-Scale:  
82668266
<Select
82678267
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
82688268
onChange={[Function]}
@@ -9235,7 +9235,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r3_non_cancer" dataset has no unexec
92359235
<label
92369236
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
92379237
>
9238-
y-Scale:
9238+
y-Scale:  
92399239
<Select
92409240
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
92419241
onChange={[Function]}
@@ -10208,7 +10208,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r3_non_neuro" dataset has no unexect
1020810208
<label
1020910209
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1021010210
>
10211-
y-Scale:
10211+
y-Scale:  
1021210212
<Select
1021310213
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1021410214
onChange={[Function]}
@@ -11181,7 +11181,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r3_non_topmed" dataset has no unexec
1118111181
<label
1118211182
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1118311183
>
11184-
y-Scale:
11184+
y-Scale:  
1118511185
<Select
1118611186
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1118711187
onChange={[Function]}
@@ -12154,7 +12154,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r3_non_v2" dataset has no unexected
1215412154
<label
1215512155
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1215612156
>
12157-
y-Scale:
12157+
y-Scale:  
1215812158
<Select
1215912159
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1216012160
onChange={[Function]}
@@ -13127,7 +13127,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r4" dataset has no unexected changes
1312713127
<label
1312813128
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1312913129
>
13130-
y-Scale:
13130+
y-Scale:  
1313113131
<Select
1313213132
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1313313133
onChange={[Function]}
@@ -14100,7 +14100,7 @@ exports[`ShortTandemRepeatPage with "gnomad_r4_non_ukb" dataset has no unexected
1410014100
<label
1410114101
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1410214102
>
14103-
y-Scale:
14103+
y-Scale:  
1410414104
<Select
1410514105
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1410614106
onChange={[Function]}
@@ -15073,7 +15073,7 @@ exports[`ShortTandemRepeatPage with "gnomad_sv_r2_1" dataset has no unexected ch
1507315073
<label
1507415074
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1507515075
>
15076-
y-Scale:
15076+
y-Scale:  
1507715077
<Select
1507815078
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1507915079
onChange={[Function]}
@@ -16046,7 +16046,7 @@ exports[`ShortTandemRepeatPage with "gnomad_sv_r2_1_controls" dataset has no une
1604616046
<label
1604716047
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1604816048
>
16049-
y-Scale:
16049+
y-Scale:  
1605016050
<Select
1605116051
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1605216052
onChange={[Function]}
@@ -17019,7 +17019,7 @@ exports[`ShortTandemRepeatPage with "gnomad_sv_r2_1_non_neuro" dataset has no un
1701917019
<label
1702017020
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1702117021
>
17022-
y-Scale:
17022+
y-Scale:  
1702317023
<Select
1702417024
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1702517025
onChange={[Function]}
@@ -17992,7 +17992,7 @@ exports[`ShortTandemRepeatPage with "gnomad_sv_r4" dataset has no unexected chan
1799217992
<label
1799317993
htmlFor="short-tandem-repeat-STR1-allele-size-distribution-scale"
1799417994
>
17995-
y-Scale:
17995+
y-Scale:  
1799617996
<Select
1799717997
id="short-tandem-repeat-STR1-allele-size-distribution-scale"
1799817998
onChange={[Function]}

0 commit comments

Comments
 (0)