Media view modes package (#1120)

Author: camiloHimura

web_ui/packages/ui/index.ts

@@ -149,6 +149,9 @@ export { VirtualizedHorizontalGrid } from './src/virtualized-horizontal-grid/vir
 export { ToggleButtons } from './src/toggle-buttons/toggle-buttons.component';
 export { PhotoPlaceholder } from './src/photo-placeholder/photo-placeholder.component';
 export { FullscreenAction } from './src/fullscreen-action/fullscreen-action.component';
+export { MediaViewModes } from './src/view-modes/media-view-modes.component';
+export { ViewModes, INITIAL_VIEW_MODE, VIEW_MODE_LABEL } from './src/view-modes/utils';
+export { useViewMode } from './src/view-modes/use-view-mode.hook';
 
 export {
     ListBox as AriaComponentsListBox,

web_ui/packages/ui/src/view-modes/media-view-modes.component.tsx

@@ -0,0 +1,62 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+import { Dispatch, Key, SetStateAction } from 'react';
+
+import { Item, Menu, MenuTrigger, Tooltip, TooltipTrigger } from '@adobe/react-spectrum';
+import { capitalize } from 'lodash-es';
+
+import { Grid, GridMedium, GridSmall, List } from '../../icons';
+import { ActionButton } from '../button/button.component';
+import { VIEW_MODE_LABEL, ViewModes } from './utils';
+
+const ITEMS = [ViewModes.LARGE, ViewModes.MEDIUM, ViewModes.SMALL, ViewModes.DETAILS];
+
+const ICON_PER_MODE: Record<ViewModes, JSX.Element> = {
+    [ViewModes.DETAILS]: <List />,
+    [ViewModes.SMALL]: <GridSmall />,
+    [ViewModes.MEDIUM]: <GridMedium />,
+    [ViewModes.LARGE]: <Grid />,
+};
+
+interface MediaViewModesProps {
+    items?: ViewModes[];
+    isDisabled?: boolean;
+    viewMode: ViewModes;
+    setViewMode: Dispatch<SetStateAction<ViewModes>>;
+}
+
+export const MediaViewModes = ({ items = ITEMS, isDisabled = false, viewMode, setViewMode }: MediaViewModesProps) => {
+    const handleAction = (key: Key): void => {
+        const convertedKeyToViewMode = capitalize(String(key));
+
+        if (convertedKeyToViewMode === viewMode) {
+            return;
+        }
+
+        setViewMode(convertedKeyToViewMode as ViewModes);
+    };
+
+    return (
+        <MenuTrigger>
+            <TooltipTrigger placement='bottom'>
+                <ActionButton isQuiet isDisabled={isDisabled} aria-label='View mode'>
+                    {ICON_PER_MODE[viewMode]}
+                </ActionButton>
+                <Tooltip>{VIEW_MODE_LABEL}</Tooltip>
+            </TooltipTrigger>
+            <Menu
+                items={items}
+                selectionMode='single'
+                onAction={handleAction}
+                selectedKeys={[viewMode.toLocaleLowerCase()]}
+            >
+                {items.map((item: string) => (
+                    <Item key={item.toLocaleLowerCase()} aria-label={item.toLocaleLowerCase()} textValue={item}>
+                        {item}
+                    </Item>
+                ))}
+            </Menu>
+        </MenuTrigger>
+    );
+};

web_ui/packages/ui/src/view-modes/use-view-mode.hook.ts

@@ -0,0 +1,14 @@
+// Copyright (C) 2022-2025 Intel Corporation
+// LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
+
+import { useLocalStorage } from 'usehooks-ts';
+
+import { INITIAL_VIEW_MODE, VIEW_MODE_KEY } from './utils';
+
+const getMediaViewModeKey = (suffix: string) => {
+    return `${VIEW_MODE_KEY}-${suffix}`;
+};
+
+export const useViewMode = (suffix: string, defaultViewMode = INITIAL_VIEW_MODE) => {
+    return useLocalStorage(getMediaViewModeKey(suffix), defaultViewMode);
+};

…red/components/media-view-modes/utils.ts …b_ui/packages/ui/src/view-modes/utils.tsweb_ui/src/shared/components/media-view-modes/utils.ts renamed to web_ui/packages/ui/src/view-modes/utils.ts web_ui/src/shared/components/media-view-modes/utils.ts renamed to web_ui/packages/ui/src/view-modes/utils.ts

@@ -10,10 +10,4 @@ export enum ViewModes {
 
 export const INITIAL_VIEW_MODE = ViewModes.MEDIUM;
 export const VIEW_MODE_LABEL = 'View mode';
-
-export const VIEW_MODE_SETTINGS = {
-    [ViewModes.LARGE]: { minItemSize: 300, gap: 12, maxColumns: 4 },
-    [ViewModes.MEDIUM]: { minItemSize: 150, gap: 8, maxColumns: 8 },
-    [ViewModes.SMALL]: { minItemSize: 112, gap: 4, maxColumns: 11 },
-    [ViewModes.DETAILS]: { size: 81, gap: 0 },
-};
+export const VIEW_MODE_KEY = 'view-mode';

web_ui/src/hooks/use-view-mode/use-view-mode.hook.ts

@@ -1,8 +1,9 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
+import { ViewModes } from '@geti/ui';
+
 import { usePrevious } from '../../../../../hooks/use-previous/use-previous.hook';
-import { ViewModes } from '../../../../../shared/components/media-view-modes/utils';
 import { useDataset } from '../../../providers/dataset-provider/dataset-provider.component';
 import { useSelectedMediaItem } from '../../../providers/selected-media-item-provider/selected-media-item-provider.component';
 import { useSelectMediaItemWithSaveConfirmation } from '../../../providers/submit-annotations-provider/use-select-media-item-with-save-confirmation.hook';

web_ui/src/pages/annotator/components/sidebar/dataset/annotator-dataset-list.component.tsx

@@ -4,15 +4,13 @@
 import { CSSProperties, Dispatch, SetStateAction } from 'react';
 
 import QUERY_KEYS from '@geti/core/src/requests/query-keys';
-import { Flex, View } from '@geti/ui';
+import { Flex, MediaViewModes, View, ViewModes } from '@geti/ui';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { isAnomalyDomain, isKeypointDetection } from '../../../../../core/projects/domains';
 import { TUTORIAL_CARD_KEYS } from '../../../../../core/user-settings/dtos/user-settings.interface';
 import { useSortingParams } from '../../../../../hooks/use-sorting-params/use-sorting-params.hook';
 import { Accordion } from '../../../../../shared/components/accordion/accordion.component';
-import { MediaViewModes } from '../../../../../shared/components/media-view-modes/media-view-modes.component';
-import { ViewModes } from '../../../../../shared/components/media-view-modes/utils';
 import { RefreshButton } from '../../../../../shared/components/refresh-button/refresh-button.component';
 import { TutorialCardBuilder } from '../../../../../shared/components/tutorial-card/tutorial-card-builder.component';
 import { MediaFilterChips } from '../../../../media/components/media-filter-chips.component';

web_ui/src/pages/annotator/components/sidebar/dataset/dataset-accordion.component.tsx

@@ -1,10 +1,9 @@
 // Copyright (C) 2022-2025 Intel Corporation
 // LIMITED EDGE SOFTWARE DISTRIBUTION LICENSE
 
-import { PressableElement, Tooltip, TooltipTrigger } from '@geti/ui';
+import { PressableElement, Tooltip, TooltipTrigger, ViewModes } from '@geti/ui';
 
 import { MediaItem } from '../../../../../core/media/media.interface';
-import { ViewModes } from '../../../../../shared/components/media-view-modes/utils';
 import { DatasetItemGridMenu } from './dataset-item-grid-menu.component';
 import { DatasetItemMenu } from './dataset-item-menu.component';
 import { DatasetListItemDetails } from './dataset-list-item-details.component';

web_ui/src/pages/annotator/components/sidebar/dataset/dataset-item-factory.component.tsx

@@ -3,13 +3,12 @@
 
 import { useMemo } from 'react';
 
-import { Flex, Loading } from '@geti/ui';
+import { Flex, Loading, ViewModes } from '@geti/ui';
 import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { isEmpty } from 'lodash-es';
 
 import { MediaAdvancedFilterResponse, MediaItem, MediaItemResponse } from '../../../../../core/media/media.interface';
 import { MediaItemsList } from '../../../../../shared/components/media-items-list/media-items-list.component';
-import { ViewModes } from '../../../../../shared/components/media-view-modes/utils';
 import { NotFound } from '../../../../../shared/components/not-found/not-found.component';
 import { useGroupedMediaItems } from '../../../../../shared/hooks/use-grouped-media-items.hook';
 import { useSelectedMediaItemIndex } from '../../../../../shared/hooks/use-selected-media-item-index.hook';

web_ui/src/pages/annotator/components/sidebar/dataset/dataset-list.component.tsx

@@ -5,7 +5,6 @@ import { screen, waitFor } from '@testing-library/react';
 
 import { MEDIA_TYPE } from '../../../../../core/media/base-media.interface';
 import { createInMemoryMediaService } from '../../../../../core/media/services/in-memory-media-service/in-memory-media-service';
-import { ViewModes } from '../../../../../shared/components/media-view-modes/utils';
 import {
     getMockedImageMediaItem,
     getMockedVideoFrameMediaItem,
@@ -15,6 +14,8 @@ import { annotatorRender as render } from '../../../test-utils/annotator-render'
 
 import './../../../../../test-utils/mock-resize-observer';
 
+import { ViewModes } from '@geti/ui';
+
 import { AnnotatorDatasetList } from './annotator-dataset-list.component';
 
 describe('AnnotatorDatasetList', () => {