Add label UIs

Author: jpggvilaca

application/ui/src/features/annotator/labels/add-label/add-label-dialog.component.tsx

@@ -0,0 +1,22 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { Content, Dialog } from '@geti/ui';
+import { Label as LabelType } from 'src/constants/shared-types';
+
+import { CreateLabelForm } from './create-label-form.component';
+
+interface AddLabelDialogProps {
+    closeDialog: () => void;
+    existingLabels: LabelType[];
+}
+
+export const AddLabelDialog = ({ existingLabels, closeDialog }: AddLabelDialogProps) => {
+    return (
+        <Dialog>
+            <Content>
+                <CreateLabelForm onClose={closeDialog} existingLabels={existingLabels} />
+            </Content>
+        </Dialog>
+    );
+};

application/ui/src/features/annotator/labels/add-label/add-label.component.tsx

@@ -0,0 +1,24 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, DialogTrigger } from '@geti/ui';
+import { Label as LabelType } from 'src/constants/shared-types';
+
+import { AddLabelDialog } from './add-label-dialog.component';
+
+import classes from './add-label.module.scss';
+
+interface AddLabelProps {
+    existingLabels: LabelType[];
+}
+
+export const AddLabel = ({ existingLabels }: AddLabelProps) => {
+    return (
+        <DialogTrigger type={'popover'} hideArrow placement={'bottom right'}>
+            <Button variant={'secondary'} UNSAFE_className={classes.addLabelButton}>
+                Add label
+            </Button>
+            {(close) => <AddLabelDialog closeDialog={close} existingLabels={existingLabels} />}
+        </DialogTrigger>
+    );
+};

application/ui/src/features/annotator/labels/add-label/add-label.module.scss

@@ -0,0 +1,4 @@
+.addLabelButton {
+    border: none;
+    min-width: max-content;
+}

application/ui/src/features/annotator/labels/add-label/create-label-form.component.tsx

@@ -0,0 +1,107 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { useMemo } from 'react';
+
+import { Flex } from '@geti/ui';
+import { Add } from '@geti/ui/icons';
+import { getDistinctColorBasedOnHash } from '@geti/ui/utils';
+import { useProjectIdentifier } from 'hooks/use-project-identifier.hook';
+import { Label as LabelType } from 'src/constants/shared-types';
+import { useAnnotator } from 'src/shared/annotator/annotator-provider.component';
+import { v4 as uuid } from 'uuid';
+
+import { useUpdateLabel } from '../api/use-update-label';
+import { Label } from '../label/label.component';
+
+const getDefaultLabel = (): LabelType => {
+    const id = uuid();
+
+    return {
+        id,
+        name: '',
+        color: getDistinctColorBasedOnHash(id),
+    };
+};
+
+interface CreateLabelProps {
+    onCreateLabel: (newLabel: LabelType) => void;
+    onClose: () => void;
+    existingLabels: LabelType[];
+    isDisabled?: boolean;
+}
+
+const CreateLabel = ({ onCreateLabel, onClose, existingLabels, isDisabled }: CreateLabelProps) => {
+    const defaultLabel = useMemo(() => getDefaultLabel(), []);
+
+    return (
+        <Label label={defaultLabel} existingLabels={existingLabels}>
+            <Label.Form onSubmit={onCreateLabel}>
+                <Flex marginTop={0} gap={'size-50'} justifyContent={'center'}>
+                    <Label.ColorPicker />
+
+                    <Label.NameField onClose={onClose} ariaLabel={'New label name'} />
+
+                    <Label.Button isDisabled={isDisabled} color={'var(--spectrum-global-color-gray-200)'}>
+                        <Add />
+                    </Label.Button>
+                </Flex>
+            </Label.Form>
+        </Label>
+    );
+};
+
+interface CreateLabelFormProps {
+    onClose: () => void;
+    onSuccess?: (label: LabelType) => void;
+    existingLabels?: LabelType[];
+}
+
+export const CreateLabelForm = ({ onClose, existingLabels = [], onSuccess }: CreateLabelFormProps) => {
+    const projectId = useProjectIdentifier();
+
+    const { selectedLabelId, setSelectedLabelId } = useAnnotator();
+
+    const createLabelMutation = useUpdateLabel();
+
+    const addLabel = (label: LabelType) => {
+        createLabelMutation.mutate(
+            {
+                body: {
+                    labels_to_add: [
+                        {
+                            id: label.id,
+                            name: label.name,
+                            color: label.color,
+                        },
+                    ],
+                },
+                params: {
+                    path: {
+                        project_id: projectId,
+                    },
+                },
+            },
+            {
+                onSuccess: async () => {
+                    if (selectedLabelId === null) {
+                        setSelectedLabelId(label.id);
+                    }
+
+                    onSuccess?.(label);
+
+                    onClose();
+                },
+            }
+        );
+    };
+
+    return (
+        <CreateLabel
+            existingLabels={existingLabels}
+            onCreateLabel={addLabel}
+            onClose={onClose}
+            isDisabled={createLabelMutation.isPending}
+        />
+    );
+};

application/ui/src/features/annotator/labels/api/use-update-label.ts

@@ -0,0 +1,8 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { $api } from 'src/api/client';
+
+export const useUpdateLabel = () => {
+    return $api.useMutation('patch', '/api/projects/{project_id}/labels');
+};

application/ui/src/features/annotator/labels/create-label-popover.component.tsx

@@ -0,0 +1,63 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { RefObject } from 'react';
+
+import { ActionButton, Flex, View } from '@geti/ui';
+import { Close } from '@geti/ui/icons';
+import { ThemeProvider } from '@geti/ui/theme';
+import { Popover } from 'react-aria-components';
+
+import { Label } from '../../../constants/shared-types';
+import { Point } from '../types';
+import { CreateLabelForm } from './add-label/create-label-form.component';
+
+interface CreateLabelPopoverProps {
+    onSuccess: (label: Label) => void;
+    existingLabels: Label[];
+    mousePosition: Point | null;
+    onClose: () => void;
+    ref: RefObject<SVGSVGElement | null>;
+}
+
+export const CreateLabelPopover = ({
+    onSuccess,
+    existingLabels,
+    onClose,
+    mousePosition,
+    ref,
+}: CreateLabelPopoverProps) => {
+    if (mousePosition === null) return null;
+
+    return (
+        <Popover
+            isOpen
+            offset={mousePosition.y}
+            crossOffset={mousePosition.x}
+            placement={'bottom start'}
+            onOpenChange={onClose}
+            triggerRef={ref}
+            style={{
+                transform: 'translate(-50%, -50%)',
+            }}
+        >
+            <ThemeProvider>
+                <View
+                    backgroundColor={'gray-50'}
+                    padding={'size-200'}
+                    height={'100%'}
+                    borderRadius={'regular'}
+                    borderWidth={'thin'}
+                    borderColor={'gray-400'}
+                >
+                    <Flex justifyContent={'space-between'} gap={'size-100'}>
+                        <CreateLabelForm onClose={onClose} onSuccess={onSuccess} existingLabels={existingLabels} />
+                        <ActionButton isQuiet onPress={onClose}>
+                            <Close />
+                        </ActionButton>
+                    </Flex>
+                </View>
+            </ThemeProvider>
+        </Popover>
+    );
+};

application/ui/src/features/annotator/labels/edit-label/edit-label.component.tsx

@@ -0,0 +1,82 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { useRef, useState } from 'react';
+
+import { DimensionValue, DOMRefValue, Flex, useUnwrapDOMRef } from '@geti/ui';
+import { Checkmark } from '@geti/ui/icons';
+import { Label as LabelType } from 'src/constants/shared-types';
+import { useOnOutsideClick } from 'src/shared/hooks/use-on-click-outside.hook';
+
+import { Label } from '../label/label.component';
+
+import classes from './edit-label.module.scss';
+
+interface EditLabelProps {
+    label: LabelType;
+    onAccept: (editedLabel: LabelType) => void;
+    onClose: () => void;
+    width?: DimensionValue;
+    isDisabled?: boolean;
+    existingLabels: LabelType[];
+    shouldCloseOnOutsideClick?: boolean;
+}
+
+const useCloseLabelEditionOnOutsideClick = ({
+    onClose,
+    shouldCloseOnOutsideClick,
+    isColorPickerOpen,
+}: {
+    onClose: () => void;
+    shouldCloseOnOutsideClick: boolean;
+    isColorPickerOpen: boolean;
+}) => {
+    const wrappedFormRef = useRef<DOMRefValue<HTMLFormElement>>(null);
+    const formRef = useUnwrapDOMRef(wrappedFormRef);
+
+    useOnOutsideClick(formRef, () => {
+        if (isColorPickerOpen) {
+            return;
+        }
+
+        onClose();
+    });
+
+    return shouldCloseOnOutsideClick ? wrappedFormRef : null;
+};
+
+export const EditLabel = ({
+    label,
+    onAccept,
+    onClose,
+    width,
+    isDisabled,
+    existingLabels,
+    shouldCloseOnOutsideClick = false,
+}: EditLabelProps) => {
+    const [isColorPickerOpen, setIsColorPickerOpen] = useState<boolean>(false);
+
+    const formRef = useCloseLabelEditionOnOutsideClick({ onClose, shouldCloseOnOutsideClick, isColorPickerOpen });
+
+    return (
+        <Label label={label} existingLabels={existingLabels}>
+            <Label.Form onSubmit={onAccept} ref={formRef}>
+                <Flex
+                    marginTop={0}
+                    gap={'size-50'}
+                    width={width}
+                    justifyContent={'center'}
+                    UNSAFE_className={classes.editLabelContainer}
+                >
+                    <Label.ColorPicker onOpenChange={setIsColorPickerOpen} />
+
+                    <Label.NameField isQuiet onClose={onClose} ariaLabel={'Edit label name'} />
+
+                    <Label.Button isDisabled={isDisabled} color={'var(--energy-blue)'}>
+                        <Checkmark />
+                    </Label.Button>
+                </Flex>
+            </Label.Form>
+        </Label>
+    );
+};

application/ui/src/features/annotator/labels/edit-label/edit-label.module.scss

@@ -0,0 +1,5 @@
+.editLabelContainer {
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: var(--spectrum-alias-border-radius-regular);
+    background-color: var(--spectrum-global-color-gray-100);
+}

application/ui/src/features/annotator/labels/label-badge/label-badge.component.tsx

@@ -0,0 +1,37 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { CSSProperties, ReactNode } from 'react';
+
+import { Text } from '@geti/ui';
+import { clsx } from 'clsx';
+import { usePress } from 'react-aria';
+import { Label } from 'src/constants/shared-types';
+
+import classes from './label-badge.module.scss';
+
+interface LabelIndicatorProps {
+    label: Label;
+    isSelected: boolean;
+    onClick: () => void;
+    children: ReactNode;
+}
+
+export const LabelBadge = ({ label, isSelected, onClick, children: actionButtons }: LabelIndicatorProps) => {
+    const { pressProps } = usePress({
+        onPress: onClick,
+    });
+
+    return (
+        <div
+            {...pressProps}
+            style={{ '--labelBgColor': label.color } as CSSProperties}
+            className={clsx(classes.badge, { [classes.selected]: isSelected })}
+            aria-selected={isSelected}
+            aria-label={`Label ${label.name}`}
+        >
+            <Text UNSAFE_className={classes.buttonText}>{label.name}</Text>
+            {actionButtons}
+        </div>
+    );
+};