Improve the knowledge table.

open-prophetdb · May 9, 2024 · a326cbe · a326cbe
1 parent 2040308
commit a326cbe
Show file tree

Hide file tree

Showing 3 changed files with 306 additions and 190 deletions.
diff --git a/studio/src/NodeInfoPanel/Components/GTexViewer/Components/GTexTranscriptViewer/index.tsx b/studio/src/NodeInfoPanel/Components/GTexViewer/Components/GTexTranscriptViewer/index.tsx
@@ -52,7 +52,7 @@ const GTexTranscriptViewer: React.FC<TranscriptViewerProps> = (props) => {
   return (
     <div className="gtex-transcript-viewer">
       {title && <h3>{title}</h3>}
-      <div id={rootId} style={{ width: '1250px' }} ref={ref} />
+      <div id={rootId} style={{ width: '100%' }} ref={ref} />
       {/* <div id={`${rootId}-isoformToolbar`}></div> */}
       {/* <div id={`${rootId}-isoformClone`} ></div> */}
     </div>

diff --git a/studio/src/pages/KnowledgeTable/index.less b/studio/src/pages/KnowledgeTable/index.less
@@ -1,8 +1,42 @@
-.knowledge-table-container {
+.knowledge-table-wrapper {
     display: flex;
     width: 100%;
+    height: calc(100vh - 54px);
+    overflow: scroll;
+    padding: 0 15px;
+    background-color: #fff;
+
+    .ant-collapse {
+        width: 100%;
+
+        .ant-collapse-item:nth-child(2) {
+            .ant-collapse-header {
+                border-bottom: 1px solid #f0f0f0;
+            }
+        }
+
+        .ant-collapse-item:nth-child(2) {
+            .ant-collapse-header {
+                border-top: 1px solid #f0f0f0;
+            }
+        }
+
+        .ant-collapse-header-text {
+            font-size: 1.2em;
+        }
+
+        .ant-collapse-header,
+        .ant-collapse-content-box {
+            border-radius: 0;
+            padding: 20px 0;
+        }
+    }
+}
+
+.knowledge-table-container {
+    display: flex;
     height: 100%;
-    padding: 0 20px;
+    position: relative;
     background-color: #fff;
 
     .ant-select-multiple {
@@ -22,19 +56,30 @@
     }
 
     .button-container {
+        // z-index: 100;
+        // top: 10px;
+        // right: 10px;
+        // position: absolute;
         z-index: 100;
-        top: 10px;
-        right: 10px;
+        top: -70px;
+        right: 0px;
         position: absolute;
 
         .ant-btn {
             margin-right: 5px;
         }
     }
 
-    .ant-spin-nested-loading, .ant-spin-container {
+    .ant-spin-nested-loading,
+    .ant-spin-container {
         width: 100%;
         height: 100%;
+
+        .ant-pagination {
+            position: absolute;
+            top: -75px;
+            left: 170px;
+        }
     }
 }
 
@@ -62,4 +107,4 @@
 
 .popover-note {
     width: 300px;
-}
+}