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

Commit 995445e

Browse files
lars-reimannlars-reimann
authored
fix(gui): tooltips for disabled buttons in annotation view (#989)
* fix(gui): show tooltips for disabled buttons in annotation tag * fix(gui): tooltip for complete button
1 parent 935ef95 commit 995445e

File tree

2 files changed

+99
-26
lines changed

2 files changed

+99
-26
lines changed

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

Lines changed: 65 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -390,22 +390,32 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
390390
return (
391391
<>
392392
<ButtonGroup size="sm" variant="outline" isAttached>
393-
<Tooltip label={`${authorText}Click to delete.`}>
393+
<Tooltip
394+
label={!isValidUsername || isReviewed ? authorText : `${authorText}Click to delete.`}
395+
shouldWrapChildren
396+
mt="3"
397+
>
394398
<IconButton
395399
icon={<FaTrash />}
396400
aria-label="Delete annotation"
397401
colorScheme="red"
402+
borderRadius="var(--chakra-radii-md) 0 0 var(--chakra-radii-md)"
398403
disabled={!isValidUsername || isReviewed}
399404
onClick={onDelete}
400405
/>
401406
</Tooltip>
402-
<Tooltip label={`${authorText}Click to change.`}>
407+
<Tooltip
408+
label={!onEdit || !isValidUsername || isReviewed ? authorText : `${authorText}Click to change.`}
409+
shouldWrapChildren
410+
mt="3"
411+
>
403412
<Button
404413
leftIcon={<FaWrench />}
405414
rightIcon={rightIcon}
406415
flexGrow={1}
407416
borderLeft="none"
408417
justifyContent="flex-start"
418+
borderRadius="0 var(--chakra-radii-md) var(--chakra-radii-md) 0"
409419
disabled={!onEdit || !isValidUsername || isReviewed}
410420
onClick={onEdit}
411421
>
@@ -420,7 +430,11 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
420430
</ButtonGroup>
421431
<ButtonGroup size="sm" variant="outline" isAttached>
422432
{(reviewResult === ReviewResult.Correct || (isReviewed && !reviewResult)) && (
423-
<Tooltip label={`Marked as correct by ${reviewer}. Click to undo.`}>
433+
<Tooltip
434+
label={`Marked as correct by ${reviewer}.${!isValidUsername ? '' : ' Click to undo.'}`}
435+
shouldWrapChildren
436+
mt="3"
437+
>
424438
<Button
425439
size="sm"
426440
variant="solid"
@@ -434,7 +448,11 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
434448
</Tooltip>
435449
)}
436450
{reviewResult === ReviewResult.Unsure && (
437-
<Tooltip label={`Marked as unsure by ${reviewer}. Click to undo.`}>
451+
<Tooltip
452+
label={`Marked as unsure by ${reviewer}.${!isValidUsername ? '' : ' Click to undo.'}`}
453+
shouldWrapChildren
454+
mt="3"
455+
>
438456
<Button
439457
size="sm"
440458
variant="solid"
@@ -448,7 +466,11 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
448466
</Tooltip>
449467
)}
450468
{reviewResult === ReviewResult.Wrong && (
451-
<Tooltip label={`Marked as wrong by ${reviewer}. Click to undo.`}>
469+
<Tooltip
470+
label={`Marked as wrong by ${reviewer}.${!isValidUsername ? '' : ' Click to undo.'}`}
471+
shouldWrapChildren
472+
mt="3"
473+
>
452474
<Button
453475
size="sm"
454476
variant="solid"
@@ -463,18 +485,50 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
463485
)}
464486
{!isReviewed && (
465487
<>
466-
<Tooltip label={`${authorText}Click to mark as correct.`}>
467-
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsCorrect}>
488+
<Tooltip
489+
label={`${authorText}${!isValidUsername ? '' : ' Click to mark as correct.'}`}
490+
shouldWrapChildren
491+
mt="3"
492+
>
493+
<Button
494+
size="sm"
495+
variant="outline"
496+
borderRadius="var(--chakra-radii-md) 0 0 var(--chakra-radii-md)"
497+
disabled={!isValidUsername}
498+
onClick={onMarkAsCorrect}
499+
>
468500
Mark as Correct
469501
</Button>
470502
</Tooltip>
471-
<Tooltip label={`${authorText}Click to mark as unsure.`}>
472-
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsUnsure}>
503+
<Tooltip
504+
label={`${authorText}${!isValidUsername ? '' : ' Click to mark as unsure.'}`}
505+
shouldWrapChildren
506+
mt="3"
507+
>
508+
<Button
509+
size="sm"
510+
variant="outline"
511+
borderRadius="0"
512+
borderLeft="none"
513+
borderRight="none"
514+
disabled={!isValidUsername}
515+
onClick={onMarkAsUnsure}
516+
>
473517
Mark as Unsure
474518
</Button>
475519
</Tooltip>
476-
<Tooltip label={`${authorText}Click to mark as wrong.`}>
477-
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsWrong}>
520+
<Tooltip
521+
label={`${authorText}${!isValidUsername ? '' : ' Click to mark as wrong.'}`}
522+
shouldWrapChildren
523+
mt="3"
524+
>
525+
<Button
526+
size="sm"
527+
variant="outline"
528+
borderRadius="0 var(--chakra-radii-md) var(--chakra-radii-md) 0"
529+
disabled={!isValidUsername}
530+
onClick={onMarkAsWrong}
531+
>
478532
Mark as Wrong
479533
</Button>
480534
</Tooltip>

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

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Icon } from '@chakra-ui/react';
1+
import { Button, Icon, Tooltip } from '@chakra-ui/react';
22
import React from 'react';
33
import { FaCheck } from 'react-icons/fa';
44
import { useAppDispatch, useAppSelector } from '../../app/hooks';
@@ -10,22 +10,41 @@ interface CompleteButtonProps {
1010

1111
export const CompleteButton: React.FC<CompleteButtonProps> = function ({ target }) {
1212
const dispatch = useAppDispatch();
13-
const isComplete = useAppSelector(selectComplete(target));
13+
const completeAnnotation = useAppSelector(selectComplete(target));
1414
const isDisabled = !useAppSelector(selectUsernameIsValid);
1515

16-
if (isComplete) {
17-
return (
18-
<Button
19-
size="sm"
20-
variant="solid"
21-
colorScheme="green"
22-
rightIcon={<Icon as={FaCheck} />}
23-
disabled={isDisabled}
24-
onClick={() => dispatch(removeComplete(target))}
25-
>
26-
Complete
27-
</Button>
28-
);
16+
const completeButton = (
17+
<Button
18+
size="sm"
19+
variant="solid"
20+
colorScheme="green"
21+
rightIcon={<Icon as={FaCheck} />}
22+
disabled={isDisabled}
23+
onClick={() => dispatch(removeComplete(target))}
24+
>
25+
Complete
26+
</Button>
27+
);
28+
29+
let completeButtonTooltipLabel = '';
30+
if ((completeAnnotation?.authors?.length ?? 0) > 0) {
31+
completeButtonTooltipLabel += `Marked as complete by ${completeAnnotation!.authors![0]}.`;
32+
}
33+
if (!isDisabled) {
34+
completeButtonTooltipLabel += ` Click to undo.`;
35+
}
36+
37+
if (completeAnnotation) {
38+
if (completeButtonTooltipLabel) {
39+
return (
40+
<Tooltip label={completeButtonTooltipLabel} shouldWrapChildren mt="3">
41+
{completeButton}
42+
</Tooltip>
43+
);
44+
} else {
45+
// eslint-disable-next-line react/jsx-no-useless-fragment
46+
return <>{completeButton}</>;
47+
}
2948
} else {
3049
return (
3150
<Button size="sm" variant="outline" disabled={isDisabled} onClick={() => dispatch(addComplete({ target }))}>

0 commit comments

Comments
 (0)