Improve the knowledge table.

open-prophetdb · Aug 16, 2024 · e032b23 · e032b23
1 parent 6638a72
commit e032b23
Show file tree

Hide file tree

Showing 6 changed files with 428 additions and 282 deletions.
diff --git a/Makefile b/Makefile
@@ -45,7 +45,7 @@ build-biomedgps-studio:
 	@cp studio/custom/route/rapex.ts frontend/config/routes.ts
 	# @cd studio && yarn && yarn openapi || true
 	# @cd frontend && yarn
-	@cd frontend && yarn build:biomedgps-embed && cd ..
+	@cd frontend && UMI_APP_VERSION=`git describe --tags --always` yarn build:biomedgps-embed && cd ..
 
 build-rapex-studio:
 	@printf "Building studio based on openapi...\n"
@@ -62,7 +62,7 @@ build-rapex-studio:
 	@cp studio/custom/route/rapex.ts frontend/config/routes.ts
 	# @cd studio && yarn && yarn openapi || true
 	# @cd frontend && yarn
-	@cd frontend && yarn build:rapex-embed && cd ..
+	@cd frontend && UMI_APP_VERSION=`git describe --tags --always` yarn build:rapex-embed && cd ..
 
 build-biomedgps:
 	@cargo build --release

diff --git a/studio/src/components/Footer/index.tsx b/studio/src/components/Footer/index.tsx
@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import CookieConsent, { Cookies } from 'react-cookie-consent';
-import { GithubOutlined } from '@ant-design/icons';
+import { GithubOutlined, FieldTimeOutlined } from '@ant-design/icons';
 import { DefaultFooter } from '@ant-design/pro-components';
 import { Row } from 'antd';
+import type { MenuProps } from 'antd';
 import './index.less';
 
 const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
   const [cookieName, setCookieName] = useState<string>('biomedgps-cookie-consent-form');
   const [cookieEnabled, setCookieEnabled] = useState<boolean | undefined>(undefined);
+  const version = process.env.UMI_APP_VERSION || '0.1.0';
 
   useEffect(() => {
     const v = Cookies.get(cookieName);
@@ -40,7 +42,7 @@ const Footer: React.FC = () => {
   return (
     <Row className='footer-container'>
       <DefaultFooter
-        copyright={`${currentYear} OpenProphetDB Team`}
+        copyright={`${currentYear} OpenProphetDB Team | Version ${version}`}
         links={[
           {
             key: 'open-prophetdb',

diff --git a/studio/src/components/Header/index.tsx b/studio/src/components/Header/index.tsx
@@ -93,11 +93,11 @@ const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = (props) => {
     //   key: 'user',
     //   icon: <UserOutlined />,
     // },
-    {
-      label: 'v20240406',
-      key: 'version',
-      icon: <FieldTimeOutlined />
-    },
+    // {
+    //   label: 'v20240406',
+    //   key: 'version',
+    //   icon: <FieldTimeOutlined />
+    // },
   ]
 
   const items: MenuProps['items'] = [
@@ -155,6 +155,10 @@ const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = (props) => {
 
   return (
     <Space className={`${styles.right} ${styles.light} right-content`}>
+      <Row>
+        <Button style={{ marginRight: '0', borderTopRightRadius: '0', borderBottomRightRadius: '0' }}>Default Workspace</Button>
+        <Button type="primary" style={{ borderTopLeftRadius: '0', borderBottomLeftRadius: '0' }} disabled>Switch Workspace</Button>
+      </Row>
       {
         isHeaderHidden() ? null : (
           <Menu onClick={onClick} selectedKeys={[current]} theme="light" mode="inline" items={directItems} />
@@ -171,7 +175,7 @@ const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = (props) => {
         !isHeaderHidden() && (
           isAuthEnabled() && !isAuthenticated ? (
             <Button type={isAuthenticated ? 'default' : 'primary'} onClick={() => loginWithRedirect()}>
-              Sign In / Sign Up
+              Sign In / Up
             </Button>
           ) : (
             isAuthEnabled() ?

diff --git a/studio/src/pages/Home/index.tsx b/studio/src/pages/Home/index.tsx
@@ -233,7 +233,7 @@ const HomePage: React.FC = () => {
         <Row className="welcome">
             <Row className="box">
                 <Col className="header">
-                    <img src={require('@/assets/logo-white.png')} alt="logo" height="80" />
+                    {/* <img src={require('@/assets/logo-white.png')} alt="logo" height="80" /> */}
                     <h4 style={{ textAlign: 'center', fontSize: '1rem', lineHeight: '24px' }}>
                         Enter a gene/protein, disease, drug or symptom name to find and explain related known knowledges in our platform.
                         <br />

diff --git a/studio/src/pages/KnowledgeTable/index.less b/studio/src/pages/KnowledgeTable/index.less
@@ -1,41 +1,56 @@
 .knowledge-table-wrapper {
     display: flex;
     width: 100%;
-    height: calc(100vh - 54px);
-    overflow: scroll;
-    padding: 0 15px;
+    height: 100%;
+    overflow: hidden;
+    flex-direction: column;
+    padding: 0;
     background-color: #fff;
 
-    .ant-collapse {
-        width: 100%;
-
-        .ant-collapse-item:nth-child(1),
-        .ant-collapse-item:nth-child(2) {
-            .ant-collapse-header {
-                border-bottom: 1px solid #f0f0f0;
-            }
-        }
+    .menu-panel {
+        width: fit-content;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #e8e8e8;
 
-        .ant-collapse-item:nth-child(2) {
-            .ant-collapse-header {
-                border-top: 1px solid #f0f0f0;
-            }
+        .ant-menu {
+            height: calc(100% - 40px);
+            border: unset;
         }
 
-        .ant-collapse-header-text {
-            font-size: 1.2em;
+        .ant-btn {
+            width: 80%;
+            margin-bottom: 8px !important;
+            margin: 0 auto;
         }
+    }
 
-        .ant-collapse-header,
-        .ant-collapse-content-box {
-            border-radius: 0 !important;
-            padding: 20px 0;
-        }
+    .plugins4kg,
+    .ant-empty {
+        width: 100%;
+        max-width: 1500px;
+        padding: 20px 10px;
     }
 }
 
+.empty-knowledge-table-container {
+    width: 100%;
+}
+
 .knowledge-table-container {
+    width: calc(100% - 150px);
+}
+
+.collapsed-knowledge-table-container {
+    width: calc(100% - 80px);
+}
+
+.knowledge-table-container,
+.collapsed-knowledge-table-container,
+.empty-knowledge-table-container {
     display: flex;
+    justify-content: center;
     height: 100%;
     position: relative;
     background-color: #fff;
@@ -62,7 +77,7 @@
         // right: 10px;
         // position: absolute;
         z-index: 100;
-        top: -70px;
+        top: 10px;
         right: 0px;
         position: absolute;
 
@@ -75,11 +90,48 @@
     .ant-spin-container {
         width: 100%;
         height: 100%;
+    }
+
+    .model-parameter {
+        background: #fff;
+        margin: 0 !important;
+        border-right: 1px solid #e8e8e8;
+
+        .model-parameter-header {
+            background: #fff;
+            width: 100%;
+            display: flex;
+            padding: 0 20px;
+            line-height: unset;
+            flex-direction: column;
+            justify-content: center;
+
+            p,
+            h3 {
+                margin: 0;
+            }
+
+            p {
+                color: #999;
+                // Clip text to 1 line
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .model-parameter-body {
+            height: calc(100% - 46px);
+            padding: 20px !important;
+        }
 
-        .ant-pagination {
+        .model-parameter-button {
             position: absolute;
-            top: -75px;
-            left: 170px;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 46px;
+            border-radius: 0;
         }
     }
 }