forked from kids-first/kf-portal-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(VariantDb): kids-first#2468 variant db page
- Loading branch information
1 parent
363bf8c
commit 8198f16
Showing
6 changed files
with
158 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
|
|
||
| .ant-list-item { | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .white-background { | ||
| background: #FFFFFF; | ||
| } | ||
|
|
||
| .middle-align { | ||
| text-align: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import * as React from 'react'; | ||
| import { Button, Col, List, Row } from 'antd'; | ||
| import { Typography } from 'antd'; | ||
| import { RocketOutlined } from '@ant-design/icons'; | ||
| import azicon from 'assets/appache-zeppelin.png'; | ||
|
|
||
| import './index.css'; | ||
|
|
||
| const { Title } = Typography; | ||
|
|
||
| class VariantDb extends React.Component { | ||
| data = [ | ||
| { | ||
| name: 'Studies', | ||
| value: 13, | ||
| }, | ||
| { | ||
| name: 'Participants', | ||
| value: <div>14494</div>, | ||
| }, | ||
| { | ||
| name: 'Genes', | ||
| value: 21393, | ||
| }, | ||
| { | ||
| name: 'Variants', | ||
| value: 29848393, | ||
| }, | ||
| { | ||
| name: 'Exomic variants', | ||
| value: 2387298, | ||
| }, | ||
| ]; | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="background-container" style={{ padding: 32 }}> | ||
| <Row> | ||
| <Col flex={'auto'} span={16}> | ||
| <Title level={2}>Germline Small Variant Database</Title> | ||
| <Title level={4}> | ||
| The Kids First germline small variant data warehouse contains harmonized variant calls | ||
| and clinical data on probands and their parents. | ||
| </Title> | ||
| </Col> | ||
| <Col span={8}></Col> | ||
| </Row> | ||
| <Row justify={'center'} gutter={24}> | ||
| <Col span={16}> | ||
| <div | ||
| className={'white-background middle-align'} | ||
| style={{ height: '100%', paddingTop: 24, paddingBottom: 24 }} | ||
| > | ||
| <img alt="AppacheZeppelin" src={azicon} /> | ||
| <div style={{ paddingTop: 24, paddingBottom: 24 }}> | ||
| Kids First is providing members with their own SPARK cluster running a web-based | ||
| Zeppelin notrebooks dansbox to explore, query and visualize its germline variant | ||
| datasets. Using Zeppelin, bioinformaticians can create interactive data analytics | ||
| and collaborative documents with SQL, Scala, Python, and more.. | ||
| </div> | ||
| <Button type={'primary'} icon={<RocketOutlined />}> | ||
| Launch your SPARK cluster with Zeppelin | ||
| </Button> | ||
| </div> | ||
| </Col> | ||
| <Col className={'white-background'} span={8}> | ||
| <List | ||
| header={ | ||
| <Row justify={'space-between'}> | ||
| <Title level={4}>Data Release 1</Title> | ||
| <div>May 13, 2020</div> | ||
| </Row> | ||
| } | ||
| dataSource={this.data} | ||
| renderItem={(item) => ( | ||
| <List.Item> | ||
| <Row style={{ display: 'contents' }}> | ||
| <Col>{item.name}:</Col> | ||
| <Col>{item.value}</Col> | ||
| </Row> | ||
| </List.Item> | ||
| )} | ||
| /> | ||
| </Col> | ||
| </Row> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default VariantDb; |