From eb75bb4cabf09f6a5478f1c5e9f4940013c05895 Mon Sep 17 00:00:00 2001 From: fredzhu Date: Wed, 27 Mar 2024 17:27:32 +0800 Subject: [PATCH] feat(dataset): support for random access to dataset images --- packages/app/src/assets/svg/random.svg | 1 + .../src/components/CategoryFilter/index.tsx | 5 +- packages/app/src/locales/en-US.ts | 3 + packages/app/src/locales/zh-CN.ts | 3 + packages/app/src/models/dataset/common.tsx | 9 +++ .../app/src/models/dataset/comparisons.ts | 3 +- packages/app/src/models/dataset/filters.ts | 9 +++ packages/app/src/models/dataset/type.ts | 7 +++ .../Dataset/components/Header/index.less | 21 +++++++ .../pages/Dataset/components/Header/index.tsx | 59 ++++++++++++++++--- packages/app/src/pages/Dataset/index.tsx | 3 +- 11 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 packages/app/src/assets/svg/random.svg diff --git a/packages/app/src/assets/svg/random.svg b/packages/app/src/assets/svg/random.svg new file mode 100644 index 0000000..9aecaf4 --- /dev/null +++ b/packages/app/src/assets/svg/random.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/app/src/components/CategoryFilter/index.tsx b/packages/app/src/components/CategoryFilter/index.tsx index 2bacd76..cda3027 100644 --- a/packages/app/src/components/CategoryFilter/index.tsx +++ b/packages/app/src/components/CategoryFilter/index.tsx @@ -32,7 +32,10 @@ const CategoryFilter: React.FC = (props) => { optionFilterProp="label" value={categoryId} onChange={onCategoryChange} - getPopupContainer={() => document.getElementById('filterWrap')!} + // @ts-ignore + getPopupContainer={() => + document.getElementById('filterWrap')?.parentElement || null + } /> ); diff --git a/packages/app/src/locales/en-US.ts b/packages/app/src/locales/en-US.ts index 92feb7d..e97d494 100644 --- 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 index c85a5ce..ed96ec4 100644 --- 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 index d1fa21d..f819e6b 100644 --- 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 index 3516256..e0b50a8 100644 --- 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 index 33d1b15..a35ac2b 100644 --- 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 index 193558d..7867e02 100644 --- 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 index 2aeb374..35fcfbc 100644 --- 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 index b8593a8..6d94ee2 100644 --- 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 ? ( + <> + + onQueryModeChanged(e.target.value) + } + > + + {localeText('dataset.detail.pagination')} + + + {localeText('dataset.detail.random')} + + + {queryMode === QueryMode.random && ( + + )} + + ) : null}
{/* labels options */} diff --git a/packages/app/src/pages/Dataset/index.tsx b/packages/app/src/pages/Dataset/index.tsx index cb34fb6..f305623 100644 --- 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 = () => {
{/* Pagination */} - {!loading && ( + {!loading && pageState.queryMode === QueryMode.pagination && (