Improve the showing of the node info.

open-prophetdb · Apr 1, 2024 · 4ceb073 · 4ceb073
1 parent 77bb4ab
commit 4ceb073
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 29 deletions.
diff --git a/studio/config/routes.ts b/studio/config/routes.ts
@@ -5,7 +5,7 @@ import type { MenuDataItem } from '@ant-design/pro-components';
 export const routes = [
   {
     path: '/',
-    name: 'Home',
+    name: 'Search Knowledges',
     icon: 'home',
     component: './Home',
   },
@@ -19,7 +19,7 @@ export const routes = [
   },
   {
     path: '/predict-model',
-    name: 'Predict Drug/Target',
+    name: 'Predict Drugs/Targets',
     icon: 'history',
     component: './ModelConfig',
     category: 'predict-model'

diff --git a/studio/src/components/EntityCard/index.tsx b/studio/src/components/EntityCard/index.tsx
@@ -1,6 +1,7 @@
 import type { Entity } from 'biominer-components/dist/typings';
 import { guessColor, guessSpecies } from '../util';
 import { Tag } from 'antd';
+import { uniq } from 'lodash';
 
 const EntityCard = (metadata: Entity | undefined) => {
     if (!metadata) {
@@ -18,7 +19,7 @@ const EntityCard = (metadata: Entity | undefined) => {
                 <p style={{ marginBottom: '5px' }}>
                     <span style={{ fontWeight: 'bold' }}>Synonyms: </span>
                     {
-                        metadata.synonyms ? metadata.synonyms.split("|").map(item => {
+                        metadata.synonyms ? uniq(metadata.synonyms.split("|")).map(item => {
                             return <Tag key={item}>{item}</Tag>;
                         }) : 'No synonyms found!'
                     }

diff --git a/studio/src/components/util.ts b/studio/src/components/util.ts
@@ -102,3 +102,15 @@ export const logoutWithRedirect = () => {
         history.push('/not-authorized');
     }
 }
+
+export const truncateString = (str: string, num?: number) => {
+    if (!num) {
+        num = 20;
+    }
+
+    if (str.length > num) {
+        return str.substring(0, num) + '...';
+    } else {
+        return str;
+    }
+}
diff --git a/studio/src/pages/Home/index.tsx b/studio/src/pages/Home/index.tsx
@@ -152,7 +152,6 @@ const HomePage: React.FC = () => {
     const [nodeOptions, setNodeOptions] = useState<OptionType[] | undefined>(undefined);
     const [cookieName, setCookieName] = useState<string>('biomedgps-cookie-consent-form');
     const [cookieEnabled, setCookieEnabled] = useState<boolean | undefined>(undefined);
-    const [currentNodeOption, setCurrentNodeOption] = useState<string | undefined>(undefined);
 
     useEffect(() => {
         const v = Cookies.get(cookieName);
@@ -274,7 +273,12 @@ const HomePage: React.FC = () => {
                         loading={loading}
                         defaultActiveFirstOption={false}
                         placeholder="Enter a gene/protein, disease, drug or symptom name to start..."
-                        onSearch={(value) => fetchNodes(value, setNodeOptions)}
+                        onSearch={(value) => {
+                            setLoading(true);
+                            fetchNodes(value, setNodeOptions).finally(() => {
+                                setLoading(false);
+                            });
+                        }}
                         filterOption={false}
                         onSelect={(value, options) => {
                             onSearch(value);
@@ -293,15 +297,10 @@ const HomePage: React.FC = () => {
                     >
                         {nodeOptions &&
                             nodeOptions.map((option: any) => (
-                                <Select.Option key={option.value} value={option.value} disabled={option.disabled} onMouseEnter={() => {
-                                    console.log('hover:', option);
-                                    setCurrentNodeOption(option.value);
-                                }} onMouseLeave={() => {
-                                    setCurrentNodeOption(undefined);
-                                }}>
+                                <Select.Option key={option.value} value={option.value} disabled={option.disabled}>
                                     {option.metadata ? (
                                         <Popover
-                                            open={option.value === currentNodeOption}
+                                            mouseEnterDelay={0.5}
                                             placement="rightTop"
                                             title={option.label}
                                             content={EntityCard(option.metadata)}
@@ -353,7 +352,11 @@ const HomePage: React.FC = () => {
                             <Tag color={guessColor("Symptom")}>Symptom | Fatigue</Tag>
                         </a>
                     </span>
-                    <span style={{ textAlign: 'center', color: 'red', fontWeight: 'bold' }}>NOTE: If you cannot find the node you are looking for, this may be due to the lack of knowledges in the current version of the platform.<br /> Please give us feedback or check the <a href="https://drugs.3steps.cn/#/about">About</a> page for more information.</span>
+                    <span style={{ textAlign: 'center', color: 'red', fontWeight: 'bold' }}>
+                        NOTE: If you cannot find the node you are looking for, this may be due to the lack of knowledges in the current version of the platform.
+                        <br />
+                        Please give us feedback or check the <a href="https://drugs.3steps.cn/#/about">About</a> page for more information.
+                    </span>
                 </Col>
                 <Row className="statistics" gutter={16}>
                     <Col sm={0} md={1} xs={1} xxl={1}></Col>

diff --git a/studio/src/pages/KnowledgeTable/index.tsx b/studio/src/pages/KnowledgeTable/index.tsx
@@ -3,7 +3,6 @@ import { history } from 'umi';
 import { Table, Row, Tag, Space, message, Popover, Button, Empty, Tooltip, Drawer, Spin, Select } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
-import { useAuth0 } from "@auth0/auth0-react";
 import { useLocation } from "react-router-dom";
 import { fetchOneStepLinkedNodes, fetchRelationCounts, fetchRelationMetadata } from '@/services/swagger/KnowledgeGraph';
 import type { ComposeQueryItem, OptionType, GraphData, GraphEdge, GraphNode, RelationCount } from 'biominer-components/dist/typings';
@@ -13,7 +12,7 @@ import type { EdgeInfo } from '@/EdgeInfoPanel/index.t';
 import NodeInfoPanel from '@/NodeInfoPanel';
 import EdgeInfoPanel from '@/EdgeInfoPanel';
 import { sortBy, filter, uniqBy, groupBy, map, sumBy, set } from 'lodash';
-import { guessColor } from '@/components/util';
+import { guessColor, truncateString } from '@/components/util';
 import EntityCard from '@/components/EntityCard';
 
 import './index.less';
@@ -147,14 +146,6 @@ const KnowledgeTable: React.FC = (props) => {
         history.push('/knowledge-graph');
     }
 
-    const truncateString = (str: string) => {
-        if (str.length > 20) {
-            return str.substring(0, 20) + '...';
-        } else {
-            return str;
-        }
-    }
-
     const getKnowledgesData = (
         nodeId: string, page: number,
         pageSize: number, relationTypes?: string[]

diff --git a/studio/src/pages/ModelConfig/index.tsx b/studio/src/pages/ModelConfig/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Layout, Menu, Form, Input, InputNumber, Button, Select, Empty, Col, Row, Tooltip, message, Spin } from 'antd';
+import { Layout, Menu, Form, Input, InputNumber, Button, Select, Empty, Col, Row, Tooltip, message, Spin, Popover } from 'antd';
 import { DotChartOutlined, DribbbleOutlined, AimOutlined, BranchesOutlined, BugOutlined, ZoomInOutlined } from '@ant-design/icons';
 import { history } from 'umi';
 // import { createFromIconfontCN } from '@ant-design/icons';
@@ -14,6 +14,8 @@ import { sortBy } from 'lodash';
 import { fetchStatistics } from '@/services/swagger/KnowledgeGraph';
 import { makeRelationTypes } from 'biominer-components/dist/utils';
 import type { OptionType, RelationStat, ComposeQueryItem, QueryItem, GraphEdge, GraphNode } from 'biominer-components/dist/typings';
+import EntityCard from '@/components/EntityCard';
+import { truncateString } from '@/components/util';
 
 import './index.less';
 
@@ -137,7 +139,7 @@ export const fetchNodes = async (
 };
 
 const NodeIdSearcher = (props: NodeIdSearcherProps) => {
-  const [entityOptions, setEntityOptions] = useState(undefined);
+  const [entityOptions, setEntityOptions] = useState<OptionType[] | undefined>(undefined);
   const [loading, setLoading] = useState(false);
 
   const handleSearchNode = function (entityType: string, value: string) {
@@ -158,14 +160,15 @@ const NodeIdSearcher = (props: NodeIdSearcherProps) => {
     allowClear
     defaultActiveFirstOption={false}
     loading={loading}
-    showArrow={true}
     placeholder={props.placeholder}
-    onChange={(value) => { props.onSelect && props.onSelect(value) }}
+    onChange={(value) => {
+      props.onSelect && props.onSelect(value);
+    }}
     onSearch={(value) => handleSearchNode(props.entityType, value)}
     getPopupContainer={(triggerNode: HTMLElement) => {
       return triggerNode.parentNode as HTMLElement;
     }}
-    options={entityOptions}
+    // options={entityOptions}
     filterOption={false}
     notFoundContent={
       <Empty
@@ -180,7 +183,31 @@ const NodeIdSearcher = (props: NodeIdSearcherProps) => {
         }
       />
     }
-  ></Select>;
+  >
+    {entityOptions &&
+      entityOptions.map((option: any) => (
+        <Select.Option key={option.value} value={option.value} disabled={option.disabled}>
+          {option.metadata ? (
+            <Popover
+              mouseEnterDelay={0.5}
+              placement="rightTop"
+              title={option.label}
+              content={EntityCard(option.metadata)}
+              trigger="hover"
+              getPopupContainer={(triggeredNode: any) => document.body}
+              overlayClassName="entity-id-popover"
+              autoAdjustOverflow={false}
+              destroyTooltipOnHide={true}
+              zIndex={1500}
+            >
+              {truncateString(option.label, 50)}
+            </Popover>
+          ) : (
+            option.label
+          )}
+        </Select.Option>
+      ))}
+  </Select>;
 }
 
 type ModelParameter = {
@@ -672,6 +699,7 @@ const ModelConfig: React.FC = (props) => {
         }}
         allowMultiple={item.allowMultiple}
         handleSearchNode={(entityType, value) => console.log(entityType, value)}
+        // @ts-ignore
         getEntities={fetchEntities}
       />
     } else if (item.type === 'RelationTypeSearcher') {

diff --git a/studio/src/pages/util.tsx b/studio/src/pages/util.tsx