Skip to content

Commit 6c9d5dc

Browse files
mobastillemobastille
authored
Merge pull request #196 from Ferlab-Ste-Justine/fix/SKFP-554/various-adjustments
🐛fix(variant): SKFP-554 Variant entity page adjustments
2 parents 7ceecd5 + 3839f45 commit 6c9d5dc

File tree

23 files changed

+212
-69
lines changed

23 files changed

+212
-69
lines changed

‎packages/style/Release.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
### 1.23.0 | 2022-09-29
2-
- Feat: Add new AnchorMenu component
1+
### 1.26.0 | 2022-12-02
2+
- Feat: SKFP-554 add VariantEntity page
33

44
### 1.20.0 | 2022-05-11
55
- Feat: New components : UploadIds

‎packages/style/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ferlab/style",
3-
"version": "1.26.0",
3+
"version": "1.26.1",
44
"description": "Core components for scientific research data portals",
55
"publishConfig": {
66
"access": "public"

‎packages/style/pages/variantEntity/CohortsTable.module.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
.notStriped {
22
background-color: inherit !important;
33
}
4+
5+
.dotted {
6+
border-bottom: 1px dotted;
7+
}

‎packages/style/pages/variantEntity/Consequences.module.scss

+26
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'theme.template';
2+
13
.container {
24
max-width: 1600px;
35
margin-bottom: 40px;
@@ -33,3 +35,27 @@
3335
text-overflow: ellipsis;
3436
overflow-wrap: initial;
3537
}
38+
39+
.dotted {
40+
border-bottom: 1px dotted;
41+
}
42+
43+
.bold {
44+
font-weight: 500;
45+
}
46+
47+
.link {
48+
text-decoration: underline;
49+
50+
&:hover {
51+
text-decoration: none;
52+
}
53+
}
54+
55+
.canonicalIcon {
56+
color: $canonical-icon-color;
57+
}
58+
59+
.predictionLabel {
60+
margin-right: 4px;
61+
}

‎packages/style/pages/variantEntity/Pathogenicity.module.scss

+9
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,12 @@
1818
}
1919
}
2020
}
21+
22+
.externalLink {
23+
font-weight: 400;
24+
text-decoration: underline;
25+
26+
&:hover {
27+
text-decoration: none;
28+
}
29+
}

‎packages/style/pages/variantEntity/StudiesTable.module.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
.notStriped {
22
background-color: inherit !important;
33
}
4+
5+
.dotted {
6+
border-bottom: 1px dotted;
7+
}

‎packages/style/pages/variantEntity/StudiesTableSummary.module.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@
66

77
.participantNumLink {
88
text-decoration: underline;
9-
font-weight: bold;
9+
font-weight: 500;
1010
}
1111

1212
.row {
13-
background-color: $gray-2;
13+
background-color: $summary-bg-color;
1414
}
1515

1616
.cell {
17-
font-weight: bold;
17+
font-weight: 500;
18+
color: $heading-color;
1819
}

‎packages/style/pages/variantEntity/Summary.module.scss

+12
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,15 @@
2222
}
2323
}
2424
}
25+
26+
.dotted {
27+
border-bottom: 1px dotted;
28+
}
29+
30+
.link {
31+
text-decoration: underline;
32+
33+
&:hover {
34+
text-decoration: none;
35+
}
36+
}

‎packages/style/pages/variantEntity/VariantEntity.module.scss

+3-2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
margin-bottom: 16px;
2525
display: flex;
2626
align-items: center;
27+
color: $heading-color;
2728

2829
.title {
2930
margin-left: 12px;
@@ -32,8 +33,8 @@
3233

3334
.variantTag {
3435
margin-left: 12px;
35-
color: $green-8;
36-
background-color: $green-2;
36+
color: $variant-tag-color;
37+
background-color: $variant-tag-bg-color;
3738
}
3839
}
3940
}

‎packages/style/themes/default/_theme.template.scss

+9-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ $font-weight-bold: 600;
77
$default-page-content-padding: 24px;
88
$main-header-height: 64px;
99

10+
$heading-color: $gray-9;
11+
1012
// QueryBuilder
1113
$query-default-action-default-color: black;
1214
$query-default-action-hover-color: black;
@@ -147,4 +149,10 @@ $collapse-header-border-color: #e1e8ef;
147149
$prolabel-required-mark-color: #a8071a;
148150

149151
// UploadIds
150-
$file-upload-item-color: #1890ff;
152+
$file-upload-item-color: #1890ff;
153+
154+
// Variant Entity
155+
$variant-tag-color: #531DAB;
156+
$variant-tag-bg-color: #EFDBFF;
157+
$canonical-icon-color: $blue-8;
158+
$summary-bg-color: $gray-3;

‎packages/ui/Release.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
### 4.7.4 | 2022-12-12
2+
- Fix: SKFP-554 Multiple minor fixes on the VariantEntity page
3+
14
### 4.7.0 | 2022-12-02
25
- Feat: SKFP-554 add VariantEntity page
36

‎packages/ui/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ferlab/ui",
3-
"version": "4.7.3",
3+
"version": "4.7.4",
44
"description": "Core components for scientific research data portals",
55
"publishConfig": {
66
"access": "public"

‎packages/ui/src/data/sqon/utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const isNotReference = (sqon: any) => isNaN(sqon);
5858
* @param {ISyntheticSqon} syntheticSqon The synthetic sqon to check
5959
*/
6060
export const isSet = (value: IValueFilter) =>
61-
value.content.value && value.content.value.some((value) => value.toString().startsWith(SET_ID_PREFIX));
61+
value.content.value && value.content.value.some((value) => value?.toString().startsWith(SET_ID_PREFIX));
6262

6363
export const isNotSet = (value: IValueFilter) => !isSet(value);
6464

‎packages/ui/src/pages/VariantEntity/Consequences/index.tsx

+31-14
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ExpandableCell from '../../../components/tables/ExpandableCell';
1111
import ExpandableTable from '../../../components/tables/ExpandableTable';
1212
import { IArrangerEdge } from '../../../graphql/types';
1313
import StackLayout from '../../../layout/StackLayout';
14+
import { removeUnderscoreAndCapitalize } from '../../../utils/stringUtils';
1415
import { IVariantEntity, IVariantEntityDictionary } from '../types';
1516
import { Impact } from '../types';
1617
import { IVariantConsequence, IVariantGene } from '../types';
@@ -144,11 +145,11 @@ export const makeTables = (
144145

145146
export const makeRows = (
146147
consequences: IArrangerEdge<IVariantConsequence>[],
147-
dictionary: IVariantEntityDictionary['consequences']['prediction'],
148+
dictionary: IVariantEntityDictionary['consequences']['predictions'],
148149
) =>
149150
consequences.map((consequence: IArrangerEdge<IVariantConsequence>, index: number) => ({
150-
aa_change: consequence.node.aa_change,
151-
coding_dna_change: consequence.node.coding_dna_change,
151+
aa_change: consequence.node.hgvsp?.split(':')[1],
152+
coding_dna_change: consequence.node.hgvsc?.split(':')[1],
152153
consequences: consequence.node.consequences?.filter((c) => c?.length),
153154
conservation: consequence.node.conservations?.phylo_p17way_primate_rankscore,
154155
impact: [
@@ -190,7 +191,11 @@ export const getColumns = (dictionary: IVariantEntityDictionary['consequences'])
190191
{
191192
dataIndex: 'aa_change',
192193
render: (aa_change: string) => <div className={styles.longValue}>{aa_change || TABLE_EMPTY_PLACE_HOLDER}</div>,
193-
title: <Tooltip title={dictionary.aaColumnTooltip}>{dictionary.aaColumn}</Tooltip>,
194+
title: (
195+
<Tooltip className={styles.dotted} title={dictionary.aaColumnTooltip}>
196+
{dictionary.aaColumn}
197+
</Tooltip>
198+
),
194199
width: '10%',
195200
},
196201
{
@@ -255,15 +260,17 @@ export const getColumns = (dictionary: IVariantEntityDictionary['consequences'])
255260
const description = label ? `${capitalize(label)} - ${score}` : score;
256261
return (
257262
<StackLayout className={styles.cellList} horizontal key={id}>
258-
<Text type={'secondary'}>{predictionField}:</Text>
263+
<Text className={styles.predictionLabel} type={'secondary'}>
264+
{predictionField}:
265+
</Text>
259266
<Text>{description}</Text>
260267
</StackLayout>
261268
);
262269
}}
263270
/>
264271
);
265272
},
266-
title: dictionary.prediction.prediction,
273+
title: dictionary.predictions.predictions,
267274
width: '15%',
268275
},
269276
{
@@ -322,13 +329,12 @@ const Consequences: React.FC<IConsequencesProps> = ({ dictionary, id, loading, v
322329
{dictionary.consequence}
323330
</Title>
324331
<Collapse arrowIcon="caretFilled" className={styles.collapse} defaultActiveKey={['1']}>
325-
<CollapsePanel className={styles.panel} header={dictionary.geneConsequences} key="1">
332+
<CollapsePanel className={styles.panel} header={dictionary.geneConsequence} key="1">
326333
<Card className={styles.card} loading={loading}>
327334
<Space className={styles.consequenceCards} direction="vertical" size={48}>
328335
{tables.length > 0 ? (
329336
tables.map((tableData: TableGroup, index: number) => {
330-
const { symbol } = tableData;
331-
const { omim } = tableData;
337+
const { omim, symbol } = tableData;
332338
const orderedConsequences = sortConsequences(tableData.consequences);
333339

334340
return (
@@ -341,9 +347,10 @@ const Consequences: React.FC<IConsequencesProps> = ({ dictionary, id, loading, v
341347
<Space size={12}>
342348
<Space size={4}>
343349
<span>
344-
<span>{dictionary.gene} </span>
350+
<span className={styles.bold}>{dictionary.gene} </span>
345351
<span>
346352
<ExternalLink
353+
className={styles.link}
347354
href={`https://useast.ensembl.org/Homo_sapiens/Gene/Summary?g=${symbol}`}
348355
>
349356
{symbol}
@@ -354,25 +361,35 @@ const Consequences: React.FC<IConsequencesProps> = ({ dictionary, id, loading, v
354361
<Space size={4}>
355362
{omim && (
356363
<>
357-
<span>{dictionary.omim}</span>
364+
<span className={styles.bold}>{dictionary.omim}</span>
358365
<span>
359-
<ExternalLink href={`https://omim.org/entry/${omim}`}>
366+
<ExternalLink
367+
className={styles.link}
368+
href={`https://omim.org/entry/${omim}`}
369+
>
360370
{omim}
361371
</ExternalLink>
362372
</span>
363373
</>
364374
)}
365375
</Space>
376+
<Space size={4}>
377+
<span className={styles.bold}>
378+
{removeUnderscoreAndCapitalize(
379+
orderedConsequences[0].node.biotype,
380+
)}
381+
</span>
382+
</Space>
366383
</Space>
367384
<ExpandableTable
368385
bordered
369386
buttonText={(showAll, hiddenNum) =>
370387
showAll
371388
? `${dictionary.hideTranscript}`
372-
: `${hiddenNum} ${dictionary.showTranscript}`
389+
: `${dictionary.showTranscript(hiddenNum)}`
373390
}
374391
columns={getColumns(dictionary)}
375-
dataSource={makeRows(orderedConsequences, dictionary['prediction'])}
392+
dataSource={makeRows(orderedConsequences, dictionary['predictions'])}
376393
nOfElementsWhenCollapsed={1}
377394
pagination={false}
378395
size="small"

‎packages/ui/src/pages/VariantEntity/Frequencies/CohortsTable/index.tsx

+15-4
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,31 @@ const getExternalColumns = (dictionary: IVariantEntityDictionary['frequencies'])
4040
dataIndex: 'alt',
4141
key: 'alt',
4242
render: (alt: string) => alt || TABLE_EMPTY_PLACE_HOLDER,
43-
title: <Tooltip title={dictionary.altAllelesTooltip}>{dictionary.altAlleles}</Tooltip>,
43+
title: (
44+
<Tooltip className={styles.dotted} title={dictionary.altAllelesTooltip}>
45+
{dictionary.altAlleles}
46+
</Tooltip>
47+
),
4448
},
4549
{
4650
dataIndex: 'altRef',
4751
key: 'altRef',
4852
render: (altRef: string) => altRef || TABLE_EMPTY_PLACE_HOLDER,
49-
title: <Tooltip title={dictionary.altRefTooltip}>{dictionary.altRef}</Tooltip>,
53+
title: (
54+
<Tooltip className={styles.dotted} title={dictionary.altRefTooltip}>
55+
{dictionary.altRef}
56+
</Tooltip>
57+
),
5058
},
5159
{
5260
dataIndex: 'homozygotes',
5361
key: 'homozygotes',
5462
render: (homozygotes: string) => homozygotes || TABLE_EMPTY_PLACE_HOLDER,
55-
title: <Tooltip title={dictionary.homozygotesTooltip}>{dictionary.homozygotes}</Tooltip>,
63+
title: (
64+
<Tooltip className={styles.dotted} title={dictionary.homozygotesTooltip}>
65+
{dictionary.homozygotes}
66+
</Tooltip>
67+
),
5668
},
5769
{
5870
dataIndex: 'frequency',
@@ -100,7 +112,6 @@ const makeRowFromFrequencies = (frequencies: IVariantFrequencies | undefined, lo
100112
altRef: gnomadGenomes3.an,
101113
cohort: {
102114
cohortName: 'gnomAD Genomes (v3)',
103-
link: `https://gnomad.broadinstitute.org/variant/${locus}?dataset=gnomad_r3`,
104115
},
105116
frequency: toExponentialNotation(gnomadGenomes3.af),
106117
homozygotes: gnomadGenomes3.homozygotes,

0 commit comments

Comments
 (0)