feat(dataset): support for random access to dataset images

IDEA-Research · Mar 27, 2024 · eb75bb4 · eb75bb4
1 parent d7a3d84
commit eb75bb4
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 12 deletions.
diff --git a/packages/app/src/assets/svg/random.svg b/packages/app/src/assets/svg/random.svg
diff --git a/packages/app/src/components/CategoryFilter/index.tsx b/packages/app/src/components/CategoryFilter/index.tsx
@@ -32,7 +32,10 @@ const CategoryFilter: React.FC<IProps> = (props) => {
         optionFilterProp="label"
         value={categoryId}
         onChange={onCategoryChange}
-        getPopupContainer={() => document.getElementById('filterWrap')!}
+        // @ts-ignore
+        getPopupContainer={() =>
+          document.getElementById('filterWrap')?.parentElement || null
+        }
       />
     </div>
   );

diff --git a/packages/app/src/locales/en-US.ts b/packages/app/src/locales/en-US.ts
@@ -99,6 +99,9 @@ const localeTexts = {
   'dataset.detail.analModal.diff': ' Diff',
   'dataset.detail.analModal.score': 'score',
   'dataset.detail.analModal.exit': 'Exit Analysis',
+  'dataset.detail.pagination': 'Pagination',
+  'dataset.detail.random': 'Random',
+  'dataset.detail.randomQuery': 'Random',
 
   'dataset.toAnalysis.unSupportWarn':
     'You should have a prediction label set with detection annotaion first',

diff --git a/packages/app/src/locales/zh-CN.ts b/packages/app/src/locales/zh-CN.ts
@@ -92,6 +92,9 @@ const localeTexts = {
   'dataset.detail.analModal.diff': '对比',
   'dataset.detail.analModal.score': '分数',
   'dataset.detail.analModal.exit': '退出分析',
+  'dataset.detail.pagination': '按页查询',
+  'dataset.detail.random': '随机查询',
+  'dataset.detail.randomQuery': '更新随机',
 
   'dataset.toAnalysis.unSupportWarn': '您应该先加载包含目标检测结果的预标注集',
   'dataset.toAnalysis.unSelectWarn': '请选择一个预标注集',

diff --git a/packages/app/src/models/dataset/common.tsx b/packages/app/src/models/dataset/common.tsx
@@ -17,6 +17,7 @@ import {
   LabelDiffMode,
   LABEL_SOURCE,
   COMPARE_RESULT_FILL_COLORS,
+  DEFAULT_PAGE_SIZE,
 } from '@/constants';
 import {
   getDefaultDisplayOptions,
@@ -28,6 +29,7 @@ import {
   DEFAULT_PAGE_STATE,
   PageData,
   PageState,
+  QueryMode,
 } from './type';
 import { isNumber } from 'lodash';
 import { NsDataSet } from '@/types/dataset';
@@ -156,6 +158,12 @@ export default () => {
         pageNum: pageState.page,
         pageSize: pageState.pageSize,
       };
+      if (pageState.queryMode === QueryMode.random) {
+        Object.assign(params, {
+          offset: -1,
+          pageSize: DEFAULT_PAGE_SIZE,
+        });
+      }
       if (pageState.comparisons) {
         return fetchComparisonsImgList({
           ...params,
@@ -177,6 +185,7 @@ export default () => {
       refreshDeps: [
         pageState.datasetId,
         pageState.filterValues.categoryId,
+        pageState.queryMode,
         pageState.page,
         pageState.pageSize,
         pageState.comparisons?.precision,

diff --git a/packages/app/src/models/dataset/comparisons.ts b/packages/app/src/models/dataset/comparisons.ts
@@ -9,7 +9,7 @@ import {
   COMPARISONS_DISPLAY_OPTOIONS,
   AnnotationType,
 } from '@/constants';
-import { Comparisons } from './type';
+import { Comparisons, QueryMode } from './type';
 import { floorFloatNum } from 'dds-utils/digit';
 import { NsDataSet } from '@/types/dataset';
 
@@ -29,6 +29,7 @@ export default () => {
   /** Enter the comparison analysis. */
   const compareLabelSet = (label: NsDataSet.Label) => {
     setPageState((s) => {
+      s.queryMode = QueryMode.pagination;
       s.page = 1;
       s.filterValues.displayAnnotationType = AnnotationType.Detection; // just support detection now
       s.flagTools = undefined;

diff --git a/packages/app/src/models/dataset/filters.ts b/packages/app/src/models/dataset/filters.ts
@@ -9,6 +9,7 @@ import {
   IMG_CLOUMN_COUNT_MAX,
 } from '@/constants';
 import { getDefaultDisplayOptions } from '@/utils/datasets';
+import { QueryMode } from './type';
 
 export default () => {
   const { pageState, setPageState, pageData, setPageData } =
@@ -87,6 +88,13 @@ export default () => {
     });
   };
 
+  const onQueryModeChanged = (mode: QueryMode) => {
+    setPageState((s) => {
+      s.queryMode = mode;
+      s.page = 1;
+    });
+  };
+
   return {
     onCategoryChange,
     onColumnCountChange,
@@ -95,5 +103,6 @@ export default () => {
     onLabelsChange,
     onLabelsDiffModeChange,
     onLabelConfidenceChange,
+    onQueryModeChanged,
   };
 };
diff --git a/packages/app/src/models/dataset/type.ts b/packages/app/src/models/dataset/type.ts
@@ -19,12 +19,18 @@ export interface Comparisons {
   score: number;
 }
 
+export enum QueryMode {
+  pagination = 0,
+  random,
+}
+
 /**
  * Saved in the URL.
  */
 export interface PageState {
   datasetId: string;
   datasetName: string;
+  queryMode: QueryMode;
   page: number;
   pageSize: number;
   // config
@@ -62,6 +68,7 @@ export const DEFAULT_FILTER_VALUES = {
 export const DEFAULT_PAGE_STATE = {
   datasetId: '',
   datasetName: '',
+  queryMode: QueryMode.pagination,
   page: 1,
   pageSize: DEFAULT_PAGE_SIZE,
   cloumnCount: 5,

diff --git a/packages/app/src/pages/Dataset/components/Header/index.less b/packages/app/src/pages/Dataset/components/Header/index.less
@@ -8,6 +8,7 @@
   justify-items: center;
   background-color: white;
   border-bottom: 1px solid #f0f0f0;
+  overflow-x: scroll;
 
   .filter {
     position: relative;
@@ -27,5 +28,25 @@
 
   .dropBtn {
     margin-left: 16px;
+    white-space: nowrap;
+  }
+
+  .randomBtn {
+    margin: 0 8px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @colorPrimary;
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: @colorPrimary;
+    }
+
+    &:hover {
+      color: @colorPrimary !important;
+    }
   }
 }
diff --git a/packages/app/src/pages/Dataset/components/Header/index.tsx b/packages/app/src/pages/Dataset/components/Header/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useModel } from '@umijs/max';
-import { Button } from 'antd';
+import { Button, Radio, RadioChangeEvent } from 'antd';
 import { ArrowLeftOutlined, FundViewOutlined } from '@ant-design/icons';
+import { ReactComponent as RandomIcon } from '@/assets/svg/random.svg';
 import { AnnotationType } from '@/constants';
 import { backPath } from 'dds-utils/url';
 import CategoryFilter from '@/components/CategoryFilter';
@@ -10,17 +11,27 @@ import DisplayOptions from '@/components/DisplayOptions';
 import { ColumnSettings } from 'dds-components';
 import { useLocale } from 'dds-utils/locale';
 import styles from './index.less';
+import { QueryMode } from '@/models/dataset/type';
 
 const Header: React.FC = () => {
   const { localeText } = useLocale();
-  const { filters, filterValues, comparisons, isTiledDiff, cloumnCount } =
-    useModel('dataset.common', (model) => ({
-      isTiledDiff: model.isTiledDiff,
-      cloumnCount: model.pageState.cloumnCount,
-      filters: model.pageData.filters,
-      filterValues: model.pageState.filterValues,
-      comparisons: model.pageState.comparisons,
-    }));
+  const {
+    filters,
+    filterValues,
+    comparisons,
+    isTiledDiff,
+    cloumnCount,
+    queryMode,
+    loadImgList,
+  } = useModel('dataset.common', (model) => ({
+    isTiledDiff: model.isTiledDiff,
+    cloumnCount: model.pageState.cloumnCount,
+    filters: model.pageData.filters,
+    filterValues: model.pageState.filterValues,
+    comparisons: model.pageState.comparisons,
+    queryMode: model.pageState.queryMode,
+    loadImgList: model.loadImgList,
+  }));
   const {
     onCategoryChange,
     onDisplayOptionsChange,
@@ -29,6 +40,7 @@ const Header: React.FC = () => {
     onLabelConfidenceChange,
     onLabelsDiffModeChange,
     onColumnCountChange,
+    onQueryModeChanged,
   } = useModel('dataset.filters');
   const { openAnalysisModal } = useModel('dataset.comparisons');
 
@@ -53,6 +65,35 @@ const Header: React.FC = () => {
           categories={filters.categories}
           onCategoryChange={onCategoryChange}
         />
+        {!comparisons ? (
+          <>
+            <Radio.Group
+              value={queryMode}
+              buttonStyle="solid"
+              className={styles.dropBtn}
+              onChange={(e: RadioChangeEvent) =>
+                onQueryModeChanged(e.target.value)
+              }
+            >
+              <Radio.Button value={QueryMode.pagination}>
+                {localeText('dataset.detail.pagination')}
+              </Radio.Button>
+              <Radio.Button value={QueryMode.random}>
+                {localeText('dataset.detail.random')}
+              </Radio.Button>
+            </Radio.Group>
+            {queryMode === QueryMode.random && (
+              <Button
+                type="text"
+                icon={<RandomIcon />}
+                className={styles.randomBtn}
+                onClick={() => loadImgList()}
+              >
+                {localeText('dataset.detail.randomQuery')}
+              </Button>
+            )}
+          </>
+        ) : null}
       </div>
       <div className={styles.rightFilters}>
         {/* labels options */}

diff --git a/packages/app/src/pages/Dataset/index.tsx b/packages/app/src/pages/Dataset/index.tsx
@@ -13,6 +13,7 @@ import { ReactComponent as FlagIcon } from '@/assets/svg/flag.svg';
 import { IMG_FLAG, IMG_FLAG_COLOR } from '@/constants';
 import { doubleImgList } from '@/utils/datasets';
 import styles from './index.less';
+import { QueryMode } from '@/models/dataset/type';
 
 const Page: React.FC = () => {
   const {
@@ -142,7 +143,7 @@ const Page: React.FC = () => {
         </List>
       </div>
       {/* Pagination */}
-      {!loading && (
+      {!loading && pageState.queryMode === QueryMode.pagination && (
         <DynamicPagination
           current={pageState.page}
           size={pageState.pageSize}