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

fix(gui): tooltips for disabled buttons in annotation view #989

Merged
merged 2 commits into from
Jul 13, 2022
Merged

fix(gui): tooltips for disabled buttons in annotation view #989

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8b9d916
fix(gui): show tooltips for disabled buttons in annotation tag
lars-reimann Jul 13, 2022
f44cb37
fix(gui): tooltip for complete button
lars-reimann Jul 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 65 additions & 11 deletions api-editor/gui/src/features/annotations/AnnotationView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,22 +390,32 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
return (
<>
<ButtonGroup size="sm" variant="outline" isAttached>
<Tooltip label={`${authorText}Click to delete.`}>
<Tooltip
label={!isValidUsername || isReviewed ? authorText : `${authorText}Click to delete.`}
shouldWrapChildren
mt="3"
>
<IconButton
icon={<FaTrash />}
aria-label="Delete annotation"
colorScheme="red"
borderRadius="var(--chakra-radii-md) 0 0 var(--chakra-radii-md)"
disabled={!isValidUsername || isReviewed}
onClick={onDelete}
/>
</Tooltip>
<Tooltip label={`${authorText}Click to change.`}>
<Tooltip
label={!onEdit || !isValidUsername || isReviewed ? authorText : `${authorText}Click to change.`}
shouldWrapChildren
mt="3"
>
<Button
leftIcon={<FaWrench />}
rightIcon={rightIcon}
flexGrow={1}
borderLeft="none"
justifyContent="flex-start"
borderRadius="0 var(--chakra-radii-md) var(--chakra-radii-md) 0"
disabled={!onEdit || !isValidUsername || isReviewed}
onClick={onEdit}
>
Expand All @@ -420,7 +430,11 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
</ButtonGroup>
<ButtonGroup size="sm" variant="outline" isAttached>
{(reviewResult === ReviewResult.Correct || (isReviewed && !reviewResult)) && (
<Tooltip label={`Marked as correct by ${reviewer}. Click to undo.`}>
<Tooltip
label={`Marked as correct by ${reviewer}.${!isValidUsername ? '' : ' Click to undo.'}`}
shouldWrapChildren
mt="3"
>
<Button
size="sm"
variant="solid"
Expand All @@ -434,7 +448,11 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
</Tooltip>
)}
{reviewResult === ReviewResult.Unsure && (
<Tooltip label={`Marked as unsure by ${reviewer}. Click to undo.`}>
<Tooltip
label={`Marked as unsure by ${reviewer}.${!isValidUsername ? '' : ' Click to undo.'}`}
shouldWrapChildren
mt="3"
>
<Button
size="sm"
variant="solid"
Expand All @@ -448,7 +466,11 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
</Tooltip>
)}
{reviewResult === ReviewResult.Wrong && (
<Tooltip label={`Marked as wrong by ${reviewer}. Click to undo.`}>
<Tooltip
label={`Marked as wrong by ${reviewer}.${!isValidUsername ? '' : ' Click to undo.'}`}
shouldWrapChildren
mt="3"
>
<Button
size="sm"
variant="solid"
Expand All @@ -463,18 +485,50 @@ const AnnotationTag: React.FC<AnnotationTagProps> = function ({
)}
{!isReviewed && (
<>
<Tooltip label={`${authorText}Click to mark as correct.`}>
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsCorrect}>
<Tooltip
label={`${authorText}${!isValidUsername ? '' : ' Click to mark as correct.'}`}
shouldWrapChildren
mt="3"
>
<Button
size="sm"
variant="outline"
borderRadius="var(--chakra-radii-md) 0 0 var(--chakra-radii-md)"
disabled={!isValidUsername}
onClick={onMarkAsCorrect}
>
Mark as Correct
</Button>
</Tooltip>
<Tooltip label={`${authorText}Click to mark as unsure.`}>
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsUnsure}>
<Tooltip
label={`${authorText}${!isValidUsername ? '' : ' Click to mark as unsure.'}`}
shouldWrapChildren
mt="3"
>
<Button
size="sm"
variant="outline"
borderRadius="0"
borderLeft="none"
borderRight="none"
disabled={!isValidUsername}
onClick={onMarkAsUnsure}
>
Mark as Unsure
</Button>
</Tooltip>
<Tooltip label={`${authorText}Click to mark as wrong.`}>
<Button size="sm" variant="outline" disabled={!isValidUsername} onClick={onMarkAsWrong}>
<Tooltip
label={`${authorText}${!isValidUsername ? '' : ' Click to mark as wrong.'}`}
shouldWrapChildren
mt="3"
>
<Button
size="sm"
variant="outline"
borderRadius="0 var(--chakra-radii-md) var(--chakra-radii-md) 0"
disabled={!isValidUsername}
onClick={onMarkAsWrong}
>
Mark as Wrong
</Button>
</Tooltip>
Expand Down
49 changes: 34 additions & 15 deletions api-editor/gui/src/features/annotations/CompleteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button, Icon } from '@chakra-ui/react';
import { Button, Icon, Tooltip } from '@chakra-ui/react';
import React from 'react';
import { FaCheck } from 'react-icons/fa';
import { useAppDispatch, useAppSelector } from '../../app/hooks';
Expand All @@ -10,22 +10,41 @@ interface CompleteButtonProps {

export const CompleteButton: React.FC<CompleteButtonProps> = function ({ target }) {
const dispatch = useAppDispatch();
const isComplete = useAppSelector(selectComplete(target));
const completeAnnotation = useAppSelector(selectComplete(target));
const isDisabled = !useAppSelector(selectUsernameIsValid);

if (isComplete) {
return (
<Button
size="sm"
variant="solid"
colorScheme="green"
rightIcon={<Icon as={FaCheck} />}
disabled={isDisabled}
onClick={() => dispatch(removeComplete(target))}
>
Complete
</Button>
);
const completeButton = (
<Button
size="sm"
variant="solid"
colorScheme="green"
rightIcon={<Icon as={FaCheck} />}
disabled={isDisabled}
onClick={() => dispatch(removeComplete(target))}
>
Complete
</Button>
);

let completeButtonTooltipLabel = '';
if ((completeAnnotation?.authors?.length ?? 0) > 0) {
completeButtonTooltipLabel += `Marked as complete by ${completeAnnotation!.authors![0]}.`;
}
if (!isDisabled) {
completeButtonTooltipLabel += ` Click to undo.`;
}

if (completeAnnotation) {
if (completeButtonTooltipLabel) {
return (
<Tooltip label={completeButtonTooltipLabel} shouldWrapChildren mt="3">
{completeButton}
</Tooltip>
);
} else {
// eslint-disable-next-line react/jsx-no-useless-fragment
return <>{completeButton}</>;
}
} else {
return (
<Button size="sm" variant="outline" disabled={isDisabled} onClick={() => dispatch(addComplete({ target }))}>
Expand Down