Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit 5361165

Browse files
DavidTen1lars-reimann
DavidTen1
and
lars-reimann
authored
fix(gui): unreadable annotation tags if space is insufficient (#952)
* overlap prevention with min width * feat(gui): split large button group into multiple smaller pieces * feat(gui): align the three elements of an annotation tag in a grid Co-authored-by: Lars Reimann <[email protected]>
1 parent fc2c9ca commit 5361165

File tree

1 file changed

+88
-82
lines changed

1 file changed

+88
-82
lines changed

‎api-editor/gui/src/features/annotations/AnnotationView.tsx

Lines changed: 88 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, ButtonGroup, Icon, IconButton, Stack, Text as ChakraText, Tooltip } from '@chakra-ui/react';
1+
import { Button, ButtonGroup, Icon, IconButton, SimpleGrid, Text as ChakraText, Tooltip } from '@chakra-ui/react';
22
import React from 'react';
33
import { FaCheck, FaFlag, FaQuestion, FaRobot, FaTimes, FaTrash, FaUser, FaWrench } from 'react-icons/fa';
44
import { useAppDispatch, useAppSelector } from '../../app/hooks';
@@ -101,7 +101,7 @@ export const AnnotationView: React.FC<AnnotationViewProps> = function ({ target
101101
}
102102

103103
return (
104-
<Stack maxW="fit-content">
104+
<SimpleGrid spacing={2} columns={3} templateColumns="max-content max-content max-content">
105105
{boundaryAnnotation && (
106106
<AnnotationTag
107107
type="boundary"
@@ -247,7 +247,7 @@ export const AnnotationView: React.FC<AnnotationViewProps> = function ({ target
247247
reportable
248248
/>
249249
)}
250-
</Stack>
250+
</SimpleGrid>
251251
);
252252
};
253253

@@ -371,109 +371,115 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
371371

372372
// Render
373373
return (
374-
<ButtonGroup size="sm" variant="outline" isAttached>
375-
<Tooltip label={`${authorText}Click to delete.`}>
376-
<IconButton
377-
icon={<FaTrash />}
378-
aria-label="Delete annotation"
379-
colorScheme="red"
380-
disabled={!isValidUsername || isReviewed}
381-
onClick={onDelete}
382-
/>
383-
</Tooltip>
384-
<Tooltip label={`${authorText}Click to change.`}>
385-
<Button
386-
leftIcon={<FaWrench />}
387-
rightIcon={rightIcon}
388-
flexGrow={1}
389-
borderLeft="none"
390-
justifyContent="flex-start"
391-
disabled={!onEdit || !isValidUsername || isReviewed}
392-
onClick={onEdit}
393-
>
394-
@{type}
395-
{name && (
396-
<ChakraText as="span" fontWeight="normal" justifySelf="flex-end">
397-
: {name} {annotation.isRemoved}
398-
</ChakraText>
399-
)}
400-
</Button>
401-
</Tooltip>
402-
{(reviewResult === ReviewResult.Correct || (isReviewed && !reviewResult)) && (
403-
<Tooltip label={`Marked as correct by ${reviewer}. Click to undo.`}>
404-
<Button
405-
size="sm"
406-
variant="solid"
407-
colorScheme="green"
408-
rightIcon={<Icon as={FaCheck} />}
409-
disabled={!isValidUsername}
410-
onClick={() => onReview(ReviewResult.Correct)}
411-
>
412-
Correct
413-
</Button>
414-
</Tooltip>
415-
)}
416-
{reviewResult === ReviewResult.Unsure && (
417-
<Tooltip label={`Marked as unsure by ${reviewer}. Click to undo.`}>
418-
<Button
419-
size="sm"
420-
variant="solid"
421-
colorScheme="yellow"
422-
rightIcon={<Icon as={FaQuestion} />}
423-
disabled={!isValidUsername}
424-
onClick={() => onReview(ReviewResult.Unsure)}
425-
>
426-
Unsure
427-
</Button>
374+
<>
375+
<ButtonGroup size="sm" variant="outline" isAttached>
376+
<Tooltip label={`${authorText}Click to delete.`}>
377+
<IconButton
378+
icon={<FaTrash />}
379+
aria-label="Delete annotation"
380+
colorScheme="red"
381+
disabled={!isValidUsername || isReviewed}
382+
onClick={onDelete}
383+
/>
428384
</Tooltip>
429-
)}
430-
{reviewResult === ReviewResult.Wrong && (
431-
<Tooltip label={`Marked as wrong by ${reviewer}. Click to undo.`}>
385+
<Tooltip label={`${authorText}Click to change.`}>
432386
<Button
433-
size="sm"
434-
variant="solid"
435-
colorScheme="red"
436-
rightIcon={<Icon as={FaTimes} />}
437-
disabled={!isValidUsername}
438-
onClick={() => onReview(ReviewResult.Wrong)}
387+
leftIcon={<FaWrench />}
388+
rightIcon={rightIcon}
389+
flexGrow={1}
390+
borderLeft="none"
391+
justifyContent="flex-start"
392+
disabled={!onEdit || !isValidUsername || isReviewed}
393+
onClick={onEdit}
439394
>
440-
Wrong
395+
@{type}
396+
{name && (
397+
<ChakraText as="span" fontWeight="normal" justifySelf="flex-end">
398+
: {name} {annotation.isRemoved}
399+
</ChakraText>
400+
)}
441401
</Button>
442402
</Tooltip>
443-
)}
444-
{!isReviewed && (
445-
<>
446-
<Tooltip label={`${authorText}Click to mark as correct.`}>
447-
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsCorrect}>
448-
Mark as Correct
403+
</ButtonGroup>
404+
<ButtonGroup size="sm" variant="outline" isAttached>
405+
{(reviewResult === ReviewResult.Correct || (isReviewed && !reviewResult)) && (
406+
<Tooltip label={`Marked as correct by ${reviewer}. Click to undo.`}>
407+
<Button
408+
size="sm"
409+
variant="solid"
410+
colorScheme="green"
411+
rightIcon={<Icon as={FaCheck} />}
412+
disabled={!isValidUsername}
413+
onClick={() => onReview(ReviewResult.Correct)}
414+
>
415+
Correct
449416
</Button>
450417
</Tooltip>
451-
<Tooltip label={`${authorText}Click to mark as unsure.`}>
452-
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsUnsure}>
453-
Mark as Unsure
418+
)}
419+
{reviewResult === ReviewResult.Unsure && (
420+
<Tooltip label={`Marked as unsure by ${reviewer}. Click to undo.`}>
421+
<Button
422+
size="sm"
423+
variant="solid"
424+
colorScheme="yellow"
425+
rightIcon={<Icon as={FaQuestion} />}
426+
disabled={!isValidUsername}
427+
onClick={() => onReview(ReviewResult.Unsure)}
428+
>
429+
Unsure
454430
</Button>
455431
</Tooltip>
456-
<Tooltip label={`${authorText}Click to mark as wrong.`}>
457-
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsWrong}>
458-
Mark as Wrong
432+
)}
433+
{reviewResult === ReviewResult.Wrong && (
434+
<Tooltip label={`Marked as wrong by ${reviewer}. Click to undo.`}>
435+
<Button
436+
size="sm"
437+
variant="solid"
438+
colorScheme="red"
439+
rightIcon={<Icon as={FaTimes} />}
440+
disabled={!isValidUsername}
441+
onClick={() => onReview(ReviewResult.Wrong)}
442+
>
443+
Wrong
459444
</Button>
460445
</Tooltip>
461-
</>
462-
)}
446+
)}
447+
{!isReviewed && (
448+
<>
449+
<Tooltip label={`${authorText}Click to mark as correct.`}>
450+
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsCorrect}>
451+
Mark as Correct
452+
</Button>
453+
</Tooltip>
454+
<Tooltip label={`${authorText}Click to mark as unsure.`}>
455+
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsUnsure}>
456+
Mark as Unsure
457+
</Button>
458+
</Tooltip>
459+
<Tooltip label={`${authorText}Click to mark as wrong.`}>
460+
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsWrong}>
461+
Mark as Wrong
462+
</Button>
463+
</Tooltip>
464+
</>
465+
)}
466+
</ButtonGroup>
463467
{isReportable && (
464468
<Tooltip label="Report a wrong autogenerated annotation.">
465469
<IconButton
466470
icon={<FaFlag />}
467471
aria-label="Report Wrong Annotation"
468472
colorScheme="orange"
473+
size="sm"
474+
variant="outline"
469475
disabled={reviewResult === ReviewResult.Correct || !isValidUsername}
470476
onClick={() => {
471477
window.open(wrongAnnotationURL(type, annotation), '_blank');
472478
}}
473479
/>
474480
</Tooltip>
475481
)}
476-
</ButtonGroup>
482+
</>
477483
);
478484
};
479485

0 commit comments

Comments
 (0)