Skip to content

Commit 158c2aa

Browse files
khoroshevskyikhoroshevskyi
committed
prettier
1 parent 97b3baf commit 158c2aa

File tree

4 files changed

+90
-74
lines changed

4 files changed

+90
-74
lines changed

‎ui/src/components/bed-splash-components/refgenome-modal.tsx‎

Lines changed: 61 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -23,104 +23,119 @@ export const RefGenomeModal = (props: Props) => {
2323
>
2424
<Modal.Header closeButton>Reference Genome Compatibility</Modal.Header>
2525
<Modal.Body>
26-
<p className='text-sm'>
27-
<strong>Note:</strong> Below is a ranking of the compatibility various reference genomes to this BED file (tier 1 is best).
28-
The ranking is based on the following metrics:
26+
<p className="text-sm">
27+
<strong>Note:</strong> Below is a ranking of the compatibility various reference genomes to this BED file
28+
(tier 1 is best).
29+
The ranking is based on the following metrics:
2930
</p>
30-
<ul className='text-sm'>
31-
<li><strong>XS</strong> (eXtra Sequences): the proportion of shared regions in both this BED file and reference genome over the total number of regions in this BED file [recall].</li>
32-
<li><strong>OOBR</strong> (Out Of Bounds Regions): The proportion of shared regions from this BED file that do not exceed the bounds of the corresponding shared region in the reference genome. OOBR is only calculated if XS is 100%.</li>
33-
<li><strong>SF</strong> (Sequence Fit): the proportion of shared <span className='fst-italic'>region lengths</span> in both this BED file and reference genome over the total number of <span className='fst-italic'>region lengths</span> in the reference genome [precision].</li>
31+
<ul className="text-sm">
32+
<li><strong>XS</strong> (eXtra Sequences): the proportion of shared regions in both this BED file and
33+
reference genome over the total number of regions in this BED file [recall].
34+
</li>
35+
<li><strong>OOBR</strong> (Out Of Bounds Regions): The proportion of shared regions from this BED file that do
36+
not exceed the bounds of the corresponding shared region in the reference genome. OOBR is only calculated if
37+
XS is 100%.
38+
</li>
39+
<li><strong>SF</strong> (Sequence Fit): the proportion of shared <span
40+
className="fst-italic">region lengths</span> in both this BED file and reference genome over the total
41+
number of <span className="fst-italic">region lengths</span> in the reference genome [precision].
42+
</li>
3443
</ul>
3544

36-
<div className='row mb-1'>
37-
<div className='col-12'>
38-
<div className='d-flex align-items-center gap-2 px-3 fw-medium text-sm'>
39-
<p className='mb-1' style={{width: '33%'}}>Genome</p>
40-
<p className='mb-1 mx-2' style={{width: '14%'}}>XS</p>
41-
<p className='mb-1 mx-2' style={{width: '14%'}}>OOBR</p>
42-
<p className='mb-1 mx-2' style={{width: '14%'}}>SF</p>
43-
<p className='mb-1 ms-auto'>Tier</p>
45+
<div className="row mb-1">
46+
<div className="col-12">
47+
<div className="d-flex align-items-center gap-2 px-3 fw-medium text-sm">
48+
<p className="mb-1" style={{ width: '33%' }}>Genome</p>
49+
<p className="mb-1 mx-2" style={{ width: '14%' }}>XS</p>
50+
<p className="mb-1 mx-2" style={{ width: '14%' }}>OOBR</p>
51+
<p className="mb-1 mx-2" style={{ width: '14%' }}>SF</p>
52+
<p className="mb-1 ms-auto">Tier</p>
4453
</div>
4554
</div>
4655
</div>
4756

4857
{genomeStats?.compared_genome?.sort((a, b) => a.tier_ranking - b.tier_ranking)
4958
.map(genome => (
50-
<div
51-
className='card mb-2 shadow-sm genome-card'
52-
style={{backgroundColor: (genome.tier_ranking == 1 ? '#C8EFB3A0' : (genome.tier_ranking == 2 ? '#FFF7BAA0' : (genome.tier_ranking == 3 ? '#F9D39DA0' : '#FCB6B6A0'))) }}
59+
<div
60+
className="card mb-2 shadow-sm genome-card"
61+
style={{ backgroundColor: (genome.tier_ranking == 1 ? '#C8EFB3A0' : (genome.tier_ranking == 2 ? '#FFF7BAA0' : (genome.tier_ranking == 3 ? '#F9D39DA0' : '#FCB6B6A0'))) }}
5362
key={genome.compared_genome}
5463
>
55-
<div className='card-body'>
64+
<div className="card-body">
5665

57-
<div className='row'>
58-
<div className='col-12'>
59-
<div className='d-flex align-items-center gap-2'>
60-
<p className='mb-1 fw-semibold' style={{width: '33%'}}>{genome.compared_genome}</p>
66+
<div className="row">
67+
<div className="col-12">
68+
<div className="d-flex align-items-center gap-2">
69+
<p className="mb-1 fw-semibold" style={{ width: '33%' }}>{genome.compared_genome}</p>
6170

62-
<div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{width: '14%'}}>
63-
{ genome.xs ?
71+
<div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{ width: '14%' }}>
72+
{genome.xs ?
6473
<>
65-
<span className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.xs || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
74+
<span
75+
className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.xs || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
6676
{((genome.xs || 0) * 100).toFixed(2) + '%'}
6777
</span>
68-
<div className="rounded-1 bg-primary" style={{height: '16px', width: `${(genome.xs || 0) * 100}%` }} />
78+
<div className="rounded-1 bg-primary"
79+
style={{ height: '16px', width: `${(genome.xs || 0) * 100}%` }} />
6980
</>
70-
:
81+
:
7182
<>
72-
<span className='text-xs position-absolute start-50 top-50 translate-middle text-dark'>
83+
<span className="text-xs position-absolute start-50 top-50 translate-middle text-dark">
7384
N/A
7485
</span>
75-
<div className="rounded-1 bg-primary" style={{height: '16px', width: '0' }} />
86+
<div className="rounded-1 bg-primary" style={{ height: '16px', width: '0' }} />
7687
</>
7788
}
7889
</div>
7990

80-
<div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{width: '14%'}}>
81-
{ genome.oobr ?
91+
<div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{ width: '14%' }}>
92+
{genome.oobr ?
8293
<>
83-
<span className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.oobr || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
94+
<span
95+
className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.oobr || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
8496
{((genome.oobr || 0) * 100).toFixed(2) + '%'}
8597
</span>
86-
<div className="rounded-1 bg-primary" style={{height: '16px', width: `${(genome.oobr || 0) * 100}%` }} />
98+
<div className="rounded-1 bg-primary"
99+
style={{ height: '16px', width: `${(genome.oobr || 0) * 100}%` }} />
87100
</>
88-
:
101+
:
89102
<>
90-
<span className='text-xs position-absolute start-50 top-50 translate-middle text-dark'>
103+
<span className="text-xs position-absolute start-50 top-50 translate-middle text-dark">
91104
N/A
92105
</span>
93-
<div className="rounded-1 bg-primary" style={{height: '16px', width: '0' }} />
106+
<div className="rounded-1 bg-primary" style={{ height: '16px', width: '0' }} />
94107
</>
95108
}
96109
</div>
97-
98-
<div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{width: '14%'}}>
99-
{ genome.sequence_fit ?
110+
111+
<div className="rounded-1 mx-2 bg-white position-relative shadow-sm" style={{ width: '14%' }}>
112+
{genome.sequence_fit ?
100113
<>
101-
<span className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.sequence_fit || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
114+
<span
115+
className={`text-xs position-absolute start-50 top-50 translate-middle ${(genome.sequence_fit || 0) * 100 > 30 ? 'text-white' : 'text-dark'}`}>
102116
{((genome.sequence_fit || 0) * 100).toFixed(2) + '%'}
103117
</span>
104-
<div className="rounded-1 bg-primary" style={{height: '16px', width: `${(genome.sequence_fit || 0) * 100}%` }} />
118+
<div className="rounded-1 bg-primary"
119+
style={{ height: '16px', width: `${(genome.sequence_fit || 0) * 100}%` }} />
105120
</>
106121
:
107122
<>
108-
<span className='text-xs position-absolute start-50 top-50 translate-middle text-dark'>
123+
<span className="text-xs position-absolute start-50 top-50 translate-middle text-dark">
109124
N/A
110125
</span>
111-
<div className="rounded-1 bg-primary" style={{height: '16px', width: '0' }} />
126+
<div className="rounded-1 bg-primary" style={{ height: '16px', width: '0' }} />
112127
</>
113128
}
114129
</div>
115130

116-
<p className='mb-1 fw-medium ms-auto'>Tier {genome.tier_ranking}</p>
131+
<p className="mb-1 fw-medium ms-auto">Tier {genome.tier_ranking}</p>
117132
</div>
118133
</div>
119134
</div>
120135

121136
</div>
122137
</div>
123-
))}
138+
))}
124139
</Modal.Body>
125140
</Modal>
126141
);

‎ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -44,102 +44,102 @@ export const GenomicFeatureBar = (props: Props) => {
4444
if (displayAsPercentage) {
4545
data = [
4646
{
47-
feature: "3' UTR",
47+
feature: '3\' UTR',
4848
value: roundToTwoDecimals((metadata.statistics?.mean?.threeutr_percentage || 0) * 100),
4949
// mean - sd
5050
yMin: roundToTwoDecimals(
5151
(metadata.statistics?.mean?.threeutr_percentage || 0) * 100 -
52-
(metadata.statistics?.sd?.threeutr_percentage || 0) * 100,
52+
(metadata.statistics?.sd?.threeutr_percentage || 0) * 100,
5353
),
5454
// mean + sd
5555
yMax: roundToTwoDecimals(
5656
(metadata.statistics?.mean?.threeutr_percentage || 0) * 100 +
57-
(metadata.statistics?.sd?.threeutr_percentage || 0) * 100,
57+
(metadata.statistics?.sd?.threeutr_percentage || 0) * 100,
5858
),
5959
},
6060
{
61-
feature: "5' UTR",
61+
feature: '5\' UTR',
6262
value: roundToTwoDecimals((metadata.statistics?.mean?.fiveutr_percentage || 0) * 100),
6363
yMin: roundToTwoDecimals(
6464
(metadata.statistics?.mean?.fiveutr_percentage || 0) * 100 -
65-
(metadata.statistics?.sd?.fiveutr_percentage || 0) * 100,
65+
(metadata.statistics?.sd?.fiveutr_percentage || 0) * 100,
6666
),
6767
yMax: roundToTwoDecimals(
6868
(metadata.statistics?.mean?.fiveutr_percentage || 0) * 100 +
69-
(metadata.statistics?.sd?.fiveutr_percentage || 0) * 100,
69+
(metadata.statistics?.sd?.fiveutr_percentage || 0) * 100,
7070
),
7171
},
7272
{
7373
feature: 'Exon',
7474
value: roundToTwoDecimals((metadata.statistics?.mean?.exon_percentage || 0) * 100),
7575
yMin: roundToTwoDecimals(
7676
(metadata.statistics?.mean?.exon_percentage || 0) * 100 -
77-
(metadata.statistics?.sd?.exon_percentage || 0) * 100,
77+
(metadata.statistics?.sd?.exon_percentage || 0) * 100,
7878
),
7979
yMax: roundToTwoDecimals(
8080
(metadata.statistics?.mean?.exon_percentage || 0) * 100 +
81-
(metadata.statistics?.sd?.exon_percentage || 0) * 100,
81+
(metadata.statistics?.sd?.exon_percentage || 0) * 100,
8282
),
8383
},
8484
{
8585
feature: 'Intron',
8686
value: roundToTwoDecimals((metadata.statistics?.mean?.intron_percentage || 0) * 100),
8787
yMin: roundToTwoDecimals(
8888
(metadata.statistics?.mean?.intron_percentage || 0) * 100 -
89-
(metadata.statistics?.sd?.intron_percentage || 0) * 100,
89+
(metadata.statistics?.sd?.intron_percentage || 0) * 100,
9090
),
9191
yMax: roundToTwoDecimals(
9292
(metadata.statistics?.mean?.intron_percentage || 0) * 100 +
93-
(metadata.statistics?.sd?.intron_percentage || 0) * 100,
93+
(metadata.statistics?.sd?.intron_percentage || 0) * 100,
9494
),
9595
},
9696
{
9797
feature: 'Intergenic',
9898
value: roundToTwoDecimals((metadata.statistics?.mean?.intergenic_percentage || 0) * 100),
9999
yMin: roundToTwoDecimals(
100100
(metadata.statistics?.mean?.intergenic_percentage || 0) * 100 -
101-
(metadata.statistics?.sd?.intergenic_percentage || 0) * 100,
101+
(metadata.statistics?.sd?.intergenic_percentage || 0) * 100,
102102
),
103103
yMax: roundToTwoDecimals(
104104
(metadata.statistics?.mean?.intergenic_percentage || 0) * 100 +
105-
(metadata.statistics?.sd?.intergenic_percentage || 0) * 100,
105+
(metadata.statistics?.sd?.intergenic_percentage || 0) * 100,
106106
),
107107
},
108108
{
109109
feature: 'Promoter proc',
110110
value: roundToTwoDecimals((metadata.statistics?.mean?.promoterprox_percentage || 0) * 100),
111111
yMin: roundToTwoDecimals(
112112
(metadata.statistics?.mean?.promoterprox_percentage || 0) * 100 -
113-
(metadata.statistics?.sd?.promoterprox_percentage || 0) * 100,
113+
(metadata.statistics?.sd?.promoterprox_percentage || 0) * 100,
114114
),
115115
yMax: roundToTwoDecimals(
116116
(metadata.statistics?.mean?.promoterprox_percentage || 0) * 100 +
117-
(metadata.statistics?.sd?.promoterprox_percentage || 0) * 100,
117+
(metadata.statistics?.sd?.promoterprox_percentage || 0) * 100,
118118
),
119119
},
120120
{
121121
feature: 'Promoter core',
122122
value: roundToTwoDecimals((metadata.statistics?.mean?.promotercore_percentage || 0) * 100),
123123
yMin: roundToTwoDecimals(
124124
(metadata.statistics?.mean?.promotercore_percentage || 0) * 100 -
125-
(metadata.statistics?.sd?.promotercore_percentage || 0) * 100,
125+
(metadata.statistics?.sd?.promotercore_percentage || 0) * 100,
126126
),
127127
yMax: roundToTwoDecimals(
128128
(metadata.statistics?.mean?.promotercore_percentage || 0) * 100 +
129-
(metadata.statistics?.sd?.promotercore_percentage || 0) * 100,
129+
(metadata.statistics?.sd?.promotercore_percentage || 0) * 100,
130130
),
131131
},
132132
];
133133
} else {
134134
data = [
135135
{
136-
feature: "3' UTR",
136+
feature: '3\' UTR',
137137
value: metadata.statistics?.mean?.threeutr_frequency || 0,
138138
yMin: (metadata.statistics?.mean?.threeutr_frequency || 0) - (metadata.statistics?.sd?.threeutr_frequency || 0),
139139
yMax: (metadata.statistics?.mean?.threeutr_frequency || 0) + (metadata.statistics?.sd?.threeutr_frequency || 0),
140140
},
141141
{
142-
feature: "5' UTR",
142+
feature: '5\' UTR',
143143
value: metadata.statistics?.mean?.fiveutr_frequency || 0,
144144
yMin: (metadata.statistics?.mean?.fiveutr_frequency || 0) - (metadata.statistics?.sd?.fiveutr_frequency || 0),
145145
yMax: (metadata.statistics?.mean?.fiveutr_frequency || 0) + (metadata.statistics?.sd?.fiveutr_frequency || 0),
@@ -188,7 +188,7 @@ export const GenomicFeatureBar = (props: Props) => {
188188
}
189189

190190
return (
191-
<div className="border rounded p-2 shadow-sm" style={{ height: "calc(100% - 0.5rem - 2px)" }}>
191+
<div className="border rounded p-2 shadow-sm" style={{ height: 'calc(100% - 0.5rem - 2px)' }}>
192192
<div className="d-flex flex-column align-items-center justify-content-between h-100">
193193
<div className="d-flex position-relative flex-row align-items-center w-100">
194194
<h4 className="fw-bold text-base text-center w-100">Genomic Features</h4>

‎ui/src/components/metrics/metric-plot.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ ChartJS.register(
1010
Title,
1111
Tooltip,
1212
Legend,
13-
ChartDataLabels
13+
ChartDataLabels,
1414
);
1515

1616
export type MetricPlotType = 'bar' | 'pie';
@@ -49,27 +49,27 @@ export const MetricPlot = (props: Props) => {
4949
];
5050

5151
let colorPalette = [];
52-
52+
5353
// If we need more colors than in our base palette,
5454
// we'll cycle through with different opacities
5555
const cycles = Math.ceil((dataLength - colorPalette.length) / baseColors.length);
56-
56+
5757
for (let cycle = 0; cycle < cycles; cycle++) {
5858
// For each cycle, adjust opacity slightly
5959
const opacity = 0.6 - (cycle * 0.1);
60-
60+
6161
for (let i = 0; i < baseColors.length; i++) {
6262
if (colorPalette.length >= dataLength) break;
63-
63+
6464
// Create a new color with adjusted opacity
6565
const baseColor = baseColors[i];
6666
const rgbPart = baseColor.substring(0, baseColor.lastIndexOf(','));
6767
const newColor = `${rgbPart}, ${opacity})`;
68-
68+
6969
colorPalette.push(newColor);
7070
}
7171
}
72-
72+
7373
return colorPalette;
7474
};
7575

@@ -118,7 +118,8 @@ export const MetricPlot = (props: Props) => {
118118
data={plotData}
119119
options={plotOptions}
120120
/>
121-
)}
121+
);
122+
}
122123

123124
return null;
124125
};

‎ui/src/components/search/bed2bed/b2b-search-results-table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const scoreTooltip = (
4545
</span>
4646

4747
</OverlayTrigger>
48-
)
48+
);
4949

5050
export const Bed2BedSearchResultsTable = (props: Props) => {
5151
const { beds } = props;

0 commit comments

Comments
 (0)