Skip to content

Commit

Permalink
Improve the styles for the home page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@yjcyxky
yjcyxky committed Aug 11, 2024
1 parent e39cad9 commit 5d8dc27
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 71 deletions.
2 changes: 1 addition & 1 deletion src/api/publication.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ impl Publication {
let json: serde_json::Value = serde_json::from_str(&body)?;
let summary = match json["summary"].as_str() {
Some(s) => s.to_string(),
None => "No AI answer for the above question, because not enough relevant results for AI to analyze.".to_string(),
None => "No AI answer for the above question, because there aren't enough relevant direct results for analysis. Please carefully read the most relevant references and make your own judgment.".to_string(),
};
let daily_limit_reached = json["dailyLimitReached"].as_bool().unwrap();
let is_disputed = json["isDisputed"].as_bool().unwrap();
Expand Down
63 changes: 31 additions & 32 deletions studio/custom/components/rapex/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -342,38 +342,37 @@ const HomePage: React.FC = () => {
</span>
</Col>
<Row className="statistics" gutter={16}>
<Col sm={0} md={1} xs={1} xxl={1}></Col>
<Col className="data-stat" sm={24} md={11} xs={11} xxl={11}>
<p className="desc" style={{ textAlign: 'justify' }}>
<span>
Air pollution emerged as the leading contributor to the global disease burden in 2021 and the second most significant risk factor for premature death worldwide. It is linked to severe health issues, including cancer and cardiovascular diseases. Traditional studies often isolate health outcomes without a broader, multidimensional approach, focusing solely on specific diseases. This deficiency underscores the importance of conducting integrated analyses of air pollution health impacts. Unfortunately, there is a notable absence of a comprehensive, integrated knowledge graph for detailed analysis, to better understand and mitigate the effects of air pollution.
</span>
<span>
To bridge this gap, we have developed a knowledge graph-based RAPEX database to systematically explore the toxicological mechanisms and health effects of air pollutants. RAPEX integrates a diverse array of air pollutants and links them with genes, proteins, pathway, diseases, and other multi-omics data, marking the first comprehensive resource exploring the intricate associations between air pollution, genes, and diseases. To enhance user engagement and understanding, we have created a user-friendly web portal (https://rapex.prophetdb.org). This portal allows users to effortlessly query, compare, analyze, or predict the potential relationships between air pollution and various biological and environmental entities. It has two uniq features:
</span>
<span>
1. Comprehensive data coverage. We implement ontology mapping and leverage large language models and semantic similarity techniques to integrate 10 published databases, enhancing the quality of the knowledge graph. This approach aligns entity and relationship types, reducing entity ambiguity and relationship type fragmentation. These cleaned knowledges are incorporated into the system to establish a comprehensive knowledge graph. RAPEX houses an extensive array of biomedical knowledge, encompassing 12,857,601 knowledges that link air pollution with symptoms, genes, diseases, proteins, pathways, and metabolites etc. The resulting knowledge graph features a more balanced and diverse distribution of relationships between entities and includes phenotype databases, making the dataset suitable for representing pollutant-gene-phenotype/disease relationships. This profound integration offers deep and wide-ranging insights into the intricate interactions between air pollution and biological systems, aiding in the understanding of air pollution exposure, gene, and phenotype/disease relationships.
</span>
<span>
2. Database Uniqueness and Innovation. Meticulously curated and annotated knowledge from 865 rigorously selected publications, categorized into 13 entity types and 12 relationship types. Each of the 1,134 distinct knowledge points in this dataset has been annotated and reviewed by at least two independent experts, ensuring high quality and reliability.This dataset is a significant contribution to the field, offering rapid access to original research on air pollutants. It serves as an invaluable resource for validating the knowledge extraction capabilities of large language models and the predictive capabilities of air pollution exposure mechanism models. This comprehensive and expertly vetted dataset is poised to advance research and understanding in the intricate interactions between air pollution and biological systems.
</span>
More resources about the platform can be found in the <a href={`https://${window.location.host}/#/about`}>About</a> page.
</p>
</Col>
<Col sm={0} md={1} xs={1} xxl={1}></Col>
<Col className="image-container" sm={24} md={10} xs={10} xxl={10}>
<Carousel autoPlay dynamicHeight={false} infiniteLoop showThumbs={false}>
{images.map((item: ImageItem) => {
return (
<div key={item.title}>
<img src={item.src} />
<p className="legend">{item.title}</p>
</div>
);
})}
</Carousel>
</Col>
<Col sm={0} md={1} xs={1} xxl={1}></Col>
<Row style={{ width: '80%', maxWidth: '1800px', margin: '0 auto' }}>
<Col className="data-stat">
<p className="desc" style={{ textAlign: 'justify' }}>
<span>
Air pollution emerged as the leading contributor to the global disease burden in 2021 and the second most significant risk factor for premature death worldwide. It is linked to severe health issues, including cancer and cardiovascular diseases. Traditional studies often isolate health outcomes without a broader, multidimensional approach, focusing solely on specific diseases. This deficiency underscores the importance of conducting integrated analyses of air pollution health impacts. Unfortunately, there is a notable absence of a comprehensive, integrated knowledge graph for detailed analysis, to better understand and mitigate the effects of air pollution.
</span>
<span>
To bridge this gap, we have developed a knowledge graph-based RAPEX database to systematically explore the toxicological mechanisms and health effects of air pollutants. RAPEX integrates a diverse array of air pollutants and links them with genes, proteins, pathway, diseases, and other multi-omics data, marking the first comprehensive resource exploring the intricate associations between air pollution, genes, and diseases. To enhance user engagement and understanding, we have created a user-friendly web portal (https://rapex.prophetdb.org). This portal allows users to effortlessly query, compare, analyze, or predict the potential relationships between air pollution and various biological and environmental entities. It has two uniq features:
</span>
<span>
1. Comprehensive data coverage. We implement ontology mapping and leverage large language models and semantic similarity techniques to integrate 10 published databases, enhancing the quality of the knowledge graph. This approach aligns entity and relationship types, reducing entity ambiguity and relationship type fragmentation. These cleaned knowledges are incorporated into the system to establish a comprehensive knowledge graph. RAPEX houses an extensive array of biomedical knowledge, encompassing 12,857,601 knowledges that link air pollution with symptoms, genes, diseases, proteins, pathways, and metabolites etc. The resulting knowledge graph features a more balanced and diverse distribution of relationships between entities and includes phenotype databases, making the dataset suitable for representing pollutant-gene-phenotype/disease relationships. This profound integration offers deep and wide-ranging insights into the intricate interactions between air pollution and biological systems, aiding in the understanding of air pollution exposure, gene, and phenotype/disease relationships.
</span>
<span>
2. Database Uniqueness and Innovation. Meticulously curated and annotated knowledge from 865 rigorously selected publications, categorized into 13 entity types and 12 relationship types. Each of the 1,134 distinct knowledge points in this dataset has been annotated and reviewed by at least two independent experts, ensuring high quality and reliability.This dataset is a significant contribution to the field, offering rapid access to original research on air pollutants. It serves as an invaluable resource for validating the knowledge extraction capabilities of large language models and the predictive capabilities of air pollution exposure mechanism models. This comprehensive and expertly vetted dataset is poised to advance research and understanding in the intricate interactions between air pollution and biological systems.
</span>
More resources about the platform can be found in the <a href={`https://${window.location.host}/#/about`}>About</a> page.
</p>
</Col>
<Col className="image-container">
<Carousel autoPlay dynamicHeight={false} infiniteLoop showThumbs={false}>
{images.map((item: ImageItem) => {
return (
<div key={item.title}>
<img src={item.src} />
<p className="legend">{item.title}</p>
</div>
);
})}
</Carousel>
</Col>
</Row>
</Row>
<Row className="text-statistics">
{stats.map((item) => {
Expand Down
37 changes: 28 additions & 9 deletions studio/src/pages/Home/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
overflow: scroll;

.header {
height: 40%;
// height: 40%;
width: 100%;
display: flex;
flex-direction: column;
Expand All @@ -25,7 +25,7 @@
margin: 0;

h4 {
max-width: 800px;
max-width: 1000px;
}

.ant-select {
Expand All @@ -39,7 +39,7 @@

.text-statistics {
display: flex;
padding: 0 6%;
padding: 0 10%;
flex-direction: row;
width: 100%;

Expand Down Expand Up @@ -80,16 +80,37 @@
}
}

.statistics {
height: 50%;
padding: 0 60px;
@media screen and (max-width: 1024px) {
.data-stat {
width: 100%;
margin-bottom: 30px;
}

.image-container {
width: 100%;
}
}

@media screen and (min-width: 1024px) {
.data-stat {
height: 100%;
width: calc(50% - 30px);
margin-right: 30px;
}

.image-container {
width: 50%;
}

}

.statistics {
width: 100%;

.data-stat {
.desc {
font-size: 1rem;
height: calc(100% - 30px);
max-height: 350px;
overflow: scroll;

span {
Expand All @@ -112,8 +133,6 @@
}

.image-container {
height: 100%;

.carousel-status {
display: none;
}
Expand Down
57 changes: 28 additions & 29 deletions studio/src/pages/Home/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -336,35 +336,34 @@ const HomePage: React.FC = () => {
</span>
</Col>
<Row className="statistics" gutter={16}>
<Col sm={0} md={1} xs={1} xxl={1}></Col>
<Col className="data-stat" sm={24} md={11} xs={11} xxl={11}>
<p className="desc" style={{ textAlign: 'justify' }}>
A platform with biomedical knowledge graph and graph neural network for drug repurposing and disease mechanism.
<br />
<br />
The Network Medicine Platform, BioMedGPS, integrates a biomedical knowledge graph, multi-omics data, and deep learning models, aiming to unravel the molecular mechanisms of diseases and facilitate drug repurposing. It features a predictive module for discovering new drug indications and understanding disease mechanisms, alongside an explanatory module offering a knowledge graph studio and graph neural network analysis. The platform supports custom data sources, models, and omics datasets, enhanced by large language models for dynamic querying. Demonstrations showcase its capabilities in drug prediction, disease similarity analysis, and graphical pathfinding.
<br />
<br />
Its unique integration enables precise prediction of drug efficacy and discovery of novel drug indications, offering a faster, cost-effective alternative to traditional drug development. By harnessing the power of graph neural networks and large language models, BioMedGPS provides deep insights into the complex biological networks underlying diseases, facilitating breakthroughs in personalized medicine and therapeutic strategies. This platform stands out by allowing customization across data sources, models, and omics datasets, ensuring versatility and applicability across a wide range of biomedical research areas.
<br />
<br />
More resources about the platform can be found in the <a href={`https://${window.location.host}/#/about`}>About</a> page.
</p>
</Col>
<Col sm={0} md={1} xs={1} xxl={1}></Col>
<Col className="image-container" sm={24} md={10} xs={10} xxl={10}>
<Carousel autoPlay dynamicHeight={false} infiniteLoop showThumbs={false}>
{images.map((item: ImageItem) => {
return (
<div key={item.title}>
<img src={item.src} />
<p className="legend">{item.title}</p>
</div>
);
})}
</Carousel>
</Col>
<Col sm={0} md={1} xs={1} xxl={1}></Col>
<Row style={{ width: '80%', maxWidth: '1800px', margin: '0 auto' }}>
<Col className="data-stat">
<p className="desc" style={{ textAlign: 'justify' }}>
A platform with biomedical knowledge graph and graph neural network for drug repurposing and disease mechanism.
<br />
<br />
The Network Medicine Platform, BioMedGPS, integrates a biomedical knowledge graph, multi-omics data, and deep learning models, aiming to unravel the molecular mechanisms of diseases and facilitate drug repurposing. It features a predictive module for discovering new drug indications and understanding disease mechanisms, alongside an explanatory module offering a knowledge graph studio and graph neural network analysis. The platform supports custom data sources, models, and omics datasets, enhanced by large language models for dynamic querying. Demonstrations showcase its capabilities in drug prediction, disease similarity analysis, and graphical pathfinding.
<br />
<br />
Its unique integration enables precise prediction of drug efficacy and discovery of novel drug indications, offering a faster, cost-effective alternative to traditional drug development. By harnessing the power of graph neural networks and large language models, BioMedGPS provides deep insights into the complex biological networks underlying diseases, facilitating breakthroughs in personalized medicine and therapeutic strategies. This platform stands out by allowing customization across data sources, models, and omics datasets, ensuring versatility and applicability across a wide range of biomedical research areas.
<br />
<br />
More resources about the platform can be found in the <a href={`https://${window.location.host}/#/about`}>About</a> page.
</p>
</Col>
<Col className="image-container">
<Carousel autoPlay dynamicHeight={false} infiniteLoop showThumbs={false}>
{images.map((item: ImageItem) => {
return (
<div key={item.title}>
<img src={item.src} />
<p className="legend">{item.title}</p>
</div>
);
})}
</Carousel>
</Col>
</Row>
</Row>
<Row className="text-statistics">
{stats.map((item) => {
Expand Down

0 comments on commit 5d8dc27

Please sign in to comment.