Improve the styles.

open-prophetdb · Mar 29, 2024 · 61a3c63 · 61a3c63
1 parent 5cf3163
commit 61a3c63
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 11 deletions.
diff --git a/studio/src/EdgeInfoPanel/PublicationDesc.tsx b/studio/src/EdgeInfoPanel/PublicationDesc.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button } from 'antd';
+import { Button, Tag } from 'antd';
 import parse from 'html-react-parser';
 import type { PublicationDetail } from 'biominer-components/dist/typings';
 
@@ -61,7 +61,7 @@ const Desc: React.FC<{
                     <p>{parse(highlightWords(abstract, props.queryStr.split(SEPARATOR)))}</p> : null
             }
             <p>
-                {publication.year} | {publication.journal} &nbsp; | &nbsp; {publication.authors ? publication.authors.join(', ') : 'Unknown'}
+                <Tag>{publication.year}</Tag><Tag>Journal&nbsp;|&nbsp;{publication.journal}</Tag>&nbsp;{publication.authors ? publication.authors.join(', ') : 'Unknown'}
             </p>
             {
                 <p>

diff --git a/studio/src/EdgeInfoPanel/PublicationPanel.tsx b/studio/src/EdgeInfoPanel/PublicationPanel.tsx
@@ -93,9 +93,8 @@ const PublicationPanel: React.FC<PublicationPanelProps> = (props) => {
         <>
             <div className='publication-panel-header'>
                 <h3>
-                    Relevant Publications
+                    Top 10 Relevant Publications [<span>Keywords: {props.queryStr.split('#').join(', ')}</span>]
                 </h3>
-                <span>Keywords: {props.queryStr.split('#').join(', ')}</span>
             </div>
             <List
                 loading={loading}

diff --git a/studio/src/EdgeInfoPanel/index.less b/studio/src/EdgeInfoPanel/index.less
@@ -20,7 +20,7 @@
 
   .publication-panel-header {
     position: absolute;
-    top: 10px;
+    top: 5px;
     left: 22px;
     z-index: 100;
 
@@ -29,6 +29,12 @@
     }
   }
 
+  .ant-list {
+    .ant-list-pagination {
+      margin-block-start: 0;
+    }
+  }
+
   .highlight {
     color: #1890ff;
   }

diff --git a/studio/src/global.less b/studio/src/global.less
@@ -132,7 +132,7 @@ ol {
 //   }
 // }
 
-&::-webkit-scrollbar {
+::-webkit-scrollbar {
   display: none;
 }
 

diff --git a/studio/src/pages/Home/index.tsx b/studio/src/pages/Home/index.tsx
@@ -255,11 +255,13 @@ const HomePage: React.FC = () => {
         <Row className="welcome">
             <Row className="box">
                 <Col className="header">
-                    <h4 style={{ textAlign: 'center' }}>Enter a gene/protein, disease, drug or symptom name to find and explain related known knowledges in our platform.<br /> If you want to predict new knowledges, please go to the <a onClick={
-                        () => {
-                            history.push('/predict-model');
-                        }
-                    }>Predict Drug/Target</a> page.</h4>
+                    <h4 style={{ textAlign: 'center', fontSize: '16px', lineHeight: '24px' }}>
+                        Enter a gene/protein, disease, drug or symptom name to find and explain related known knowledges in our platform.
+                        <br />
+                        If you want to predict new knowledges, please go to the <a onClick={() => { history.push('/predict-model'); }}>Predict Drug/Target</a> page.
+                        <br />
+                        Please click the following examples to see the results.
+                    </h4>
                     <Select
                         showSearch
                         allowClear

diff --git a/studio/src/pages/KnowledgeTable/index.less b/studio/src/pages/KnowledgeTable/index.less
@@ -59,3 +59,7 @@
     max-width: 450px;
     white-space: wrap;
 }
+
+.popover-note {
+    width: 300px;
+}
diff --git a/studio/src/pages/KnowledgeTable/index.tsx b/studio/src/pages/KnowledgeTable/index.tsx
@@ -448,6 +448,7 @@ const KnowledgeTable: React.FC = (props) => {
                             </>
                         }
                         title="Note"
+                        overlayClassName='popover-note'
                     >
                         <Button type="primary" onClick={() => {
                             setEdgeInfo({