Improve the styles for the KnowledgeTable component.

open-prophetdb · Mar 26, 2024 · d08f4f0 · d08f4f0
1 parent 00daf8a
commit d08f4f0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 12 deletions.
diff --git a/studio/src/components/EntityCard/index.tsx b/studio/src/components/EntityCard/index.tsx
@@ -7,7 +7,7 @@ const EntityCard = (metadata: Entity | undefined) => {
         return <div>No metadata found!</div>;
     } else {
         return (
-            <div style={{ overflowWrap: 'break-word', width: '500px', maxHeight: '200px', overflow: 'scroll' }}>
+            <div style={{ overflowWrap: 'break-word', width: '420px', maxHeight: '200px', overflow: 'scroll' }}>
                 <p style={{ marginBottom: '5px' }}>
                     <span style={{ fontWeight: 'bold' }}>Species: </span>
                     {guessSpecies(`${metadata.taxid}` || '')}

diff --git a/studio/src/global.less b/studio/src/global.less
@@ -4,6 +4,7 @@ html,
 body,
 #root {
   height: 100%;
+  min-width: 1000px;
 }
 
 .colorWeak {

diff --git a/studio/src/pages/KnowledgeTable/index.less b/studio/src/pages/KnowledgeTable/index.less
@@ -53,4 +53,9 @@
     .ant-drawer-body {
         padding: 0 24px;
     }
-}
+}
+
+.entity-id-popover {
+    max-width: 450px;
+    white-space: wrap;
+}
diff --git a/studio/src/pages/KnowledgeTable/index.tsx b/studio/src/pages/KnowledgeTable/index.tsx
@@ -266,7 +266,7 @@ const KnowledgeTable: React.FC = (props) => {
                         <Popover
                             placement="rightTop"
                             title={
-                                <span>
+                                <span className='entity-id-popover-title'>
                                     <Tag color={guessColor(nodeData.label)}>{nodeData.label}</Tag>
                                     {nodeData.id} | {nodeData.name}
                                 </span>
@@ -282,10 +282,9 @@ const KnowledgeTable: React.FC = (props) => {
                             {truncateString(text)}
                         </Popover>
                     ) : (
-                        truncateString(text)
-                        // <Tooltip title={text}>
-                        //     {truncateString(text)}
-                        // </Tooltip>
+                        <Tooltip title={text}>
+                            {truncateString(text)}
+                        </Tooltip>
                     )}
                     {<br />}
                     {record.source_id.startsWith('ENTREZ:') ?
@@ -361,7 +360,7 @@ const KnowledgeTable: React.FC = (props) => {
                         <Popover
                             placement="rightTop"
                             title={
-                                <span>
+                                <span className='entity-id-popover-title'>
                                     <Tag color={guessColor(nodeData.label)}>{nodeData.label}</Tag>
                                     {nodeData.id} | {nodeData.name}
                                 </span>
@@ -377,10 +376,9 @@ const KnowledgeTable: React.FC = (props) => {
                             {truncateString(text)}
                         </Popover>
                     ) : (
-                        truncateString(text)
-                        // <Tooltip title={text}>
-                        //     {truncateString(text)}
-                        // </Tooltip>
+                        <Tooltip title={text}>
+                            {truncateString(text)}
+                        </Tooltip>
                     )}
                     {<br />}
                     {record.target_id.startsWith('ENTREZ:') ?