Commit d1c87699 authored by Xavier Watkins's avatar Xavier Watkins
Browse files

Update stats components

parent 63d7f992
.home-banner {
padding-top: 5vh;
margin-top: -3rem;
background-color: #192B38;
color: #ffffff;
min-height: 18em;
margin-bottom: 4em;
padding-top: 5vh;
margin-top: -3rem;
background-color: #192b38;
color: #ffffff;
min-height: 18em;
margin-bottom: 4em;
}
.home-banner__actions {
margin-top: 5vh;
display: flex;
gap: 1rem;
button {
font-size: 1.2rem;
}
}
.home-banner h2,
.home-banner h3,
.home-banner h5 {
color: #ffffff;
}
\ No newline at end of file
color: #ffffff;
}
......@@ -6,6 +6,39 @@ import Statistics from "./components/stats/Statistics";
import "../styles/Home.scss";
export const species = [
{
name: "Mouse",
taxId: 10090,
icon: "M",
},
{
name: "Human",
taxId: 9606,
icon: "H",
},
{
name: "Rat",
taxId: 10116,
icon: "R",
},
{
name: "Zebrafish",
taxId: 7955,
icon: "Z",
},
{
name: "Zea mays",
taxId: 4577,
icon: "c",
},
{
name: "Glycine max",
taxId: 3847,
icon: "^",
},
];
const Home = (props) => (
<main>
<div className="home-banner">
......@@ -13,52 +46,22 @@ const Home = (props) => (
<h5>Search for a mapping:</h5>
<SearchField {...props} />
<div className="home-banner__actions">
<button
type="button"
className="button"
onClick={() => props.exploreMappingsByOrganism(9606)}
>
Explore Human
</button>{" "}
<button
type="button"
className="button"
onClick={() => props.exploreMappingsByOrganism(10090)}
>
Explore Mouse
</button>{" "}
<button
type="button"
className="button"
onClick={() => props.exploreMappingsByOrganism(4577)}
>
Explore <em>Zea mais</em>
</button>{" "}
<button
type="button"
className="button"
onClick={() => props.exploreMappingsByOrganism(10116)}
>
Explore <em>Rattus norvegicus</em>
</button>{" "}
<button
type="button"
className="button"
onClick={() => props.exploreMappingsByOrganism(3847)}
>
Explore <em>Glycine max</em>
</button>{" "}
<button
type="button"
className="button"
onClick={() => props.exploreMappingsByOrganism(7955)}
>
Explore Zebrafish
</button>{" "}
Explore:{" "}
{species.map((specie) => (
<button
type="button"
className="button"
onClick={() => props.exploreMappingsByOrganism(specie.taxId)}
title={specie.name}
key={specie.taxId}
>
<span className="icon icon-species" data-icon={specie.icon} />
</button>
))}
</div>
</div>
</div>
<Statistics />
<Statistics species={species} />
</main>
);
......
......@@ -61,7 +61,7 @@ const filtersStructure = {
group: "organism",
},
10116: {
label: "Rattus norvegicus",
label: "Rat",
value: "organism:10116",
order: 4,
group: "organism",
......
import React, { Component, Fragment } from "react";
import React from "react";
import { withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import axios from "axios";
import UniProtStats from "./UniProtStats";
import EnsemblStats from "./EnsemblStats";
import LoadingSpinner from "../LoadingSpinner";
import "../../../styles/Statistics.scss";
const mouseTaxid = "10090";
const humanTaxid = "9606";
const zeaMaysTaxid = "4577";
const ratusNorvegicusTaxid = "10116";
const glycineMaxTaxid = "3847";
const zebrafishTaxid = "7955";
class Statistics extends Component {
state = {
stats: null,
};
componentDidMount() {
this.getStats();
}
getStats = () => {
const { history } = this.props;
const promises = [];
promises.push(
axios.get(
`${process.env.REACT_APP_API_URL}/mappings/stats/${humanTaxid}/?format=json`
)
);
promises.push(
axios.get(
`${process.env.REACT_APP_API_URL}/mappings/stats/${mouseTaxid}/?format=json`
)
);
promises.push(
axios.get(
`${process.env.REACT_APP_API_URL}/mappings/release/${humanTaxid}/?format=json`
)
);
promises.push(
axios.get(
`${process.env.REACT_APP_API_URL}/mappings/release/${mouseTaxid}/?format=json`
)
);
axios
.all(promises)
.then((response) => {
this.setState({
stats: {
human: response[0].data,
mouse: response[1].data,
humanRel: response[2].data,
mouseRel: response[3].data,
},
});
})
.catch((e) => {
console.log(e);
history.push(`${process.env.REACT_APP_BASE_URL}/error`);
});
};
render() {
const { stats } = this.state;
if (stats <= 0) {
return <LoadingSpinner />;
}
return (
<Fragment>
<div className="row">
<div className="column medium-2">
<h2>About</h2>
<p>
This project aims to provide a common framework for Ensembl and
UniProt data. This infrastructure will enable both teams to read
and comment on data, track entities between resources and support
mappings between entities.
</p>
<p>
<a
href="https://www.ebi.ac.uk/data-protection/privacy-notice/gifts"
target="_blank"
rel="noopener noreferrer"
>
Privacy Notice for GIFTS Collaborative Annotation Portal
</a>
</p>
</div>
<div className="column medium-10">
<div className="row">
<h2 className="column medium-12">
Human
<span className="icon icon-species" data-icon="H" />
</h2>
<UniProtStats {...stats.human} {...stats.humanRel} />
<EnsemblStats {...stats.human} {...stats.humanRel} />
</div>
<div className="row">
<h2 className="column medium-12">
Mouse
<span className="icon icon-species" data-icon="M" />
</h2>
<UniProtStats {...stats.mouse} {...stats.mouseRel} />
<EnsemblStats {...stats.mouse} {...stats.mouseRel} />
</div>
</div>
import StatsContainer from "./StatsContainer";
const Statistics = ({ species }) => (
<div className="row">
<div className="column medium-2">
<h2>About</h2>
<p>
This project aims to provide a common framework for Ensembl and UniProt
data. This infrastructure will enable both teams to read and comment on
data, track entities between resources and support mappings between
entities.
</p>
<p>
<a
href="https://www.ebi.ac.uk/data-protection/privacy-notice/gifts"
target="_blank"
rel="noopener noreferrer"
>
Privacy Notice for GIFTS Collaborative Annotation Portal
</a>
</p>
</div>
<div className="column medium-10">
{species.map((specie) => (
<div className="row" key={specie.taxId}>
<h2 className="column medium-12">
<span className="icon icon-species" data-icon={specie.icon} />
{specie.name}
</h2>
<StatsContainer taxId={specie.taxId} />
</div>
</Fragment>
);
}
}
Statistics.propTypes = {
history: PropTypes.shape({}).isRequired,
};
))}
</div>
</div>
);
export default withRouter(Statistics);
import axios from "axios";
import React, { useEffect, useState } from "react";
import EnsemblStats from "./EnsemblStats";
import UniProtStats from "./UniProtStats";
const StatsContainer = ({ taxId }) => {
const [stats, setStats] = useState();
const [rel, setRel] = useState();
useEffect(() => {
axios
.get(
`${process.env.REACT_APP_API_URL}/mappings/stats/${taxId}/?format=json`
)
.then((response) => setStats(response.data));
}, [taxId]);
useEffect(() => {
axios
.get(
`${process.env.REACT_APP_API_URL}/mappings/release/${taxId}/?format=json`
)
.then((response) => setRel(response.data));
}, [taxId]);
if (!stats) {
return null;
}
return (
<>
<UniProtStats {...stats} {...rel} />
<EnsemblStats {...stats} {...rel} />
</>
);
};
export default StatsContainer;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment