Improve the styles for the KnowledgeTable component.

open-prophetdb · Mar 25, 2024 · 00daf8a · 00daf8a
1 parent ea299e7
commit 00daf8a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/studio/src/pages/KnowledgeTable/index.less b/studio/src/pages/KnowledgeTable/index.less
@@ -5,6 +5,22 @@
     padding: 0 20px;
     background-color: #fff;
 
+    .ant-select-multiple {
+        .option-description {
+            display: none;
+        }
+
+        .ant-select-selection-item {
+            max-width: 120px;
+        }
+    }
+
+    .ant-select-open {
+        .option-description {
+            display: block;
+        }
+    }
+
     .button-container {
         z-index: 100;
         top: 10px;

diff --git a/studio/src/pages/KnowledgeTable/index.tsx b/studio/src/pages/KnowledgeTable/index.tsx
@@ -91,6 +91,7 @@ const KnowledgeTable: React.FC = (props) => {
     const [edgeInfo, setEdgeInfo] = useState<EdgeInfo | undefined>(undefined);
     const [currentNode, setCurrentNode] = useState<GraphNode | undefined>(undefined);
     const [relationTypeOptions, setRelationTypeOptions] = useState<OptionType[]>([]);
+    const [selectedRelationTypes, setSelectedRelationTypes] = useState<string[]>([]);
     const [relationTypeDescs, setRelationTypeDescs] = useState<Record<string, string>>({});
 
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
@@ -548,7 +549,7 @@ const KnowledgeTable: React.FC = (props) => {
             return;
         }
 
-        fetchTableData(nodeId, page, pageSize);
+        fetchTableData(nodeId, page, pageSize, selectedRelationTypes);
     }, [nodeId, page, pageSize, refreshKey]);
 
     const getRowKey = (record: GraphEdge) => {
@@ -600,14 +601,20 @@ const KnowledgeTable: React.FC = (props) => {
                     mode="multiple"
                     allowClear
                     maxTagCount={2}
-                    maxTagTextLength={12}
+                    // It's not working, I use css to limit the tag text length instead.
+                    // maxTagTextLength={12}
                     style={{ width: '350px', marginRight: '10px' }}
                     size="large"
                     placeholder="Please select relation types to filter."
                     defaultValue={[]}
                     onChange={(value: string[]) => {
                         if (nodeId) {
                             fetchTableData(nodeId, page, pageSize, value);
+                            setSelectedRelationTypes(value);
+
+                            // The total number of items has been changed, so we need to reset the page and page size.
+                            setPage(1);
+                            setPageSize(30);
                         }
                     }}
                 // options={relationTypeOptions}