Add a new home page.

Makefile

@@ -42,7 +42,7 @@ build-biomedgps-studio:
 	@cp studio/custom/logo/biomedgps.png frontend/public/assets/logo-white.png 
 	@cp studio/custom/logo/biomedgps.png frontend/src/assets/logo-white.png
 	@cp studio/custom/logo/biomedgps.png frontend/public/logo.png
-	@cp studio/custom/route/rapex.ts frontend/config/routes.ts
+	@cp studio/custom/route/biomedgps.ts frontend/config/routes.ts
 	# @cd studio && yarn && yarn openapi || true
 	# @cd frontend && yarn
 	@cd frontend && UMI_APP_VERSION=`git describe --tags --always` yarn build:biomedgps-embed && cd ..

studio/config/routes.ts

@@ -5,10 +5,17 @@ import type { MenuDataItem } from '@ant-design/pro-components';
 export const routes = [
   {
     path: '/',
-    name: 'Search Knowledges',
+    name: 'Home',
     icon: 'home',
+    hideInMenu: true,
     component: './Home',
   },
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    icon: 'dashboard',
+    component: './Dashboard',
+  },
   {
     path: '/analyze-omics-data',
     name: 'Analyze Omics Data',

studio/custom/route/biomedgps.ts

@@ -5,17 +5,24 @@ import type { MenuDataItem } from '@ant-design/pro-components';
 export const routes = [
   {
     path: '/',
-    name: 'Search Knowledges',
+    name: 'Home',
     icon: 'home',
+    hideInMenu: true,
     component: './Home',
   },
   {
-    path: '/analyze-omics-data',
-    name: 'Analyze Omics Data',
-    icon: 'LineChartOutlined',
-    disabled: true,
-    component: './Home',
+    path: '/dashboard',
+    name: 'Dashboard',
+    icon: 'dashboard',
+    component: './Dashboard',
   },
+  // {
+  //   path: '/analyze-omics-data',
+  //   name: 'Analyze Omics Data',
+  //   icon: 'LineChartOutlined',
+  //   disabled: true,
+  //   component: './Dashboard',
+  // },
   {
     path: '/predict-explain',
     name: 'Predict & Explain',
@@ -45,6 +52,20 @@ export const routes = [
       },
     ]
   },
+  {
+    path: '/statistics',
+    name: 'Statistics',
+    icon: 'table',
+    component: './Statistics',
+    category: 'knowledge-graph'
+  },
+  {
+    path: '/download',
+    name: 'Download',
+    icon: 'CloudDownloadOutlined',
+    component: './Download',
+    category: 'knowledge-graph'
+  },
   {
     path: '/mecfs-longcovid',
     name: 'ME/CFS & LongCOVID',

studio/src/NodeInfoPanel/ProteinInfoPanel/index.less

@@ -39,7 +39,7 @@
 .composed-protein-panel {
     .ant-tabs-tab {
         text-align: left;
-        width: 90px;
+        width: 100px;
         padding: 8px 0 !important;
     }
 }

studio/src/NodeInfoPanel/index.tsx

@@ -51,7 +51,7 @@ const NodeInfoPanel: React.FC<{ node?: GraphNode, hiddenItems?: string[] }> = ({
     {
       label: "Summary",
       key: "summary",
-      children: <Empty description="Comming soon..." />
+      children: <Empty />
     }
   ]
 

studio/src/app.tsx

@@ -171,6 +171,23 @@ export function rootContainer(container: React.ReactNode): React.ReactNode {
 // https://pro-components.antdigital.dev/components/layout
 export const layout: RuntimeConfig = (initialState: any) => {
   console.log("initialState: ", initialState);
+  const { location } = history;
+  const isHomePage = location.pathname === '/';
+
+  if (isHomePage) {
+    return {
+      headerRender: false,
+      footerRender: () => <Footer />,
+      menuRender: false,
+      childrenRender: (children: any, props: any) => {
+        return (
+          <>
+            {children}
+          </>
+        );
+      }
+    }
+  }
 
   return {
     layout: 'top',

studio/src/components/Header/index.tsx

@@ -156,7 +156,7 @@ 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 style={{ marginRight: '0', borderTopRightRadius: '0', borderBottomRightRadius: '0', borderRight: '0' }}>Default Workspace</Button>
         <Button type="primary" style={{ borderTopLeftRadius: '0', borderBottomLeftRadius: '0' }} disabled>Switch Workspace</Button>
       </Row>
       {
@@ -167,7 +167,7 @@ const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = (props) => {
       {
         isHeaderHidden() ? null : (
           <Dropdown menu={{ items, onClick: onClick }} placement="bottomLeft">
-            <Button type="text" icon={<InfoCircleOutlined />} style={{ height: '40px' }}>About</Button>
+            <Button type="text" icon={<InfoCircleOutlined />} style={{ height: '40px' }}>Help</Button>
           </Dropdown>
         )
       }
@@ -180,9 +180,9 @@ const GlobalHeaderRight: React.FC<GlobalHeaderRightProps> = (props) => {
           ) : (
             isAuthEnabled() ?
               <Dropdown menu={{ items: userItems, onClick: onClick }} placement="bottomLeft">
-                <Button type="primary" icon={<UserOutlined />}>{username}</Button>
+                <Button type="primary" icon={<UserOutlined />} shape='circle' />
               </Dropdown>
-              : <Button type="primary" icon={<UserOutlined />}>{username}</Button>
+              : <Button type="primary" icon={<UserOutlined />} shape='circle' />
           )
         )
       }

studio/src/pages/Dashboard/index.less

@@ -0,0 +1,189 @@
+.dashboard {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border: 1px solid #d6d6d6;
+  border-radius: 5px;
+
+  .box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+
+    .header {
+      // height: 40%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+
+      h4 {
+        max-width: 1000px;
+      }
+
+      .ant-select {
+        width: 50%;
+      }
+
+      .desc {
+        margin: 10px 0;
+      }
+    }
+
+    .text-statistics {
+      display: flex;
+      padding: 0 10%;
+      flex-direction: row;
+      width: 100%;
+
+      .stat-item-container {
+        height: 100%;
+
+        .stat-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          height: calc(100% - 40px);
+          min-height: 160px;
+          margin: 0 20px;
+          border: 1px solid #d6d6d6;
+          border-radius: 5px;
+
+          .stat,
+          .ant-spin-nested-loading {
+            padding: 10px 0;
+            font-size: 1.5rem;
+          }
+
+          .icon {
+            font-size: 3.5rem;
+            color: #108ee9;
+          }
+
+          .title {
+            font-size: 1.2rem;
+          }
+
+          .desc {
+            // display: none;
+            margin: 8px 0;
+          }
+        }
+      }
+    }
+
+    @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 {
+        width: calc(50% - 30px);
+        margin-right: 30px;
+      }
+
+      .image-container {
+        width: 50%;
+      }
+
+    }
+
+    .statistics {
+      width: 100%;
+
+      .data-stat {
+        .desc {
+          font-size: 1rem;
+          max-height: fit-content;
+          overflow: scroll;
+
+          span {
+            display: inline-block;
+            margin-bottom: 10px;
+          }
+
+          // List style
+          ul,
+          li {
+            margin: 0;
+            padding: 0;
+            border-bottom: 1px solid #d6d6d6;
+          }
+
+          li {
+            padding: 5px 0;
+          }
+        }
+      }
+
+      .image-container {
+        .carousel-status {
+          display: none;
+        }
+
+        .legend {
+          opacity: 0.05;
+        }
+
+        .legend:hover {
+          opacity: 1;
+        }
+
+        .control-dots {
+          opacity: 0.1;
+        }
+
+        .control-dots:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+/* Vistor Statistics */
+iframe[style^='background'] {
+  position: absolute !important;
+  top: unset !important;
+  right: 0;
+  bottom: 0;
+  left: unset !important;
+  z-index: 1000;
+  display: block;
+  width: 50px;
+  height: 50px;
+}
+
+div:has(> iframe[style^='background']) {
+  position: fixed !important;
+  right: 0;
+  bottom: 0;
+  width: 100px;
+  height: 50px;
+  padding-top: 0% !important;
+}
+
+body>div[style^='max-width'] {
+  position: absolute;
+  max-width: 100px !important;
+}
+
+.entity-id-popover {
+  max-width: 450px;
+  white-space: wrap;
+}