feature(dataset): fix dataset visualization for large-scale categories

IDEA-Research · Jan 4, 2024 · 16fb75a · 16fb75a
1 parent 63eb5f3
commit 16fb75a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/packages/app/src/components/CategoryFilter/index.tsx b/packages/app/src/components/CategoryFilter/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Select } from 'antd';
+import React, { useMemo } from 'react';
+import { Select, SelectProps } from 'antd';
 import { useLocale } from 'dds-utils/locale';
 import styles from './index.less';
 import { Category } from '@/types';
@@ -14,30 +14,26 @@ const CategoryFilter: React.FC<IProps> = (props) => {
   const { localeText } = useLocale();
   const { categoryId, categories, onCategoryChange } = props;
 
+  const options: SelectProps['options'] = useMemo(() => {
+    return categories.map((item) => ({
+      label: item.name,
+      value: item.id,
+    }));
+  }, [categories]);
+
   return (
     <div className={styles.wrapper}>
       {localeText('dataset.detail.category')}:
       <Select
         showSearch
         style={{ width: '160px', marginLeft: '10px' }}
-        dropdownMatchSelectWidth={false}
         placeholder="Select a category"
-        optionFilterProp="children"
+        options={options}
+        optionFilterProp="label"
         value={categoryId}
         onChange={onCategoryChange}
-        filterOption={(input, option) =>
-          (option!.children as unknown as string)
-            .toLowerCase()
-            .includes(input.toLowerCase())
-        }
         getPopupContainer={() => document.getElementById('filterWrap')!}
-      >
-        {categories.map((item) => (
-          <Select.Option key={item.id} value={item.id}>
-            {item.name}
-          </Select.Option>
-        ))}
-      </Select>
+      />
     </div>
   );
 };

diff --git a/packages/components/src/Annotator/utils/color.ts b/packages/components/src/Annotator/utils/color.ts
@@ -43,7 +43,12 @@ export const hexToRgba = (hex: string, opacity = 1) => {
   )},${op})`;
 };
 
-/** Generate a color list based on the number of categories. */
+/**
+ * Generate a color list based on the number of categories.
+ * max random 1000
+ * @param count 
+ * @returns 
+ */
 export const createColorList = (count: number) => {
   const colors = [
     '#FFFF00',
@@ -75,7 +80,7 @@ export const createColorList = (count: number) => {
         .padStart(2, '0')}${rgb[2]
         .toString(16)
         .padStart(2, '0')}`.toUpperCase();
-      if (!colors.includes(hexColor)) {
+      if (count > 1000 || !colors.includes(hexColor)) {
         colors.push(hexColor);
       }
     }
@@ -87,10 +92,10 @@ export const getCategoryColors = (list: string[]) => {
   if (!list.length) return {};
 
   const sortList = [...list];
-  const colors = createColorList(sortList.length);
+  const colors = createColorList(sortList.length) ;
   const result: Record<string, string> = {};
   sortList.forEach((item, index) => {
-    result[item] = colors[index];
+    result[item] = colors[index] || '#fff';
   });
   return result;
 };