Skip to content

Commit

Permalink
💅 add help texts to new document page
Browse files Browse the repository at this point in the history
  • Loading branch information
@anuejn
anuejn committed Apr 28, 2024
1 parent 1449fdf commit 215bf4f
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 25 deletions.
2 changes: 1 addition & 1 deletion frontend/src/components/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export type FormControlProps = {

export function FormControl({ label, error, disabled, children, className }: FormControlProps) {
return (
<label className={clsx('block', className)}>
<label className={clsx('block', 'relative', className)}>
<span
className={clsx(
'text-sm font-medium',
Expand Down
51 changes: 47 additions & 4 deletions frontend/src/components/popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,33 @@ import { cloneElement, ComponentProps, ReactElement, ReactNode, useState } from
import { usePopper } from 'react-popper';
import { useOnClickOutside } from '../utils/use_on_click_outside';
import { useStateDelayed } from '../utils/use_state_delayed';
import { IoHelpCircleOutline } from 'react-icons/io5';
import { IconButton } from './button';
import { Placement } from '@popperjs/core';

export function Popup({
children,
button,
popupClassName = '',
placement = 'bottom',
...props
}: {
children?: ReactNode;
button: ReactElement;
placement?: Placement;
popupClassName?: string;
} & ComponentProps<'div'>) {
const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);

const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
placement: 'bottom',
placement: placement,
modifiers: [
{
name: 'flip',
options: {
fallbackPlacements: ['top'],
fallbackPlacements: ['bottom', 'top', 'right', 'left'],
flipVariations: true,
},
},
Expand Down Expand Up @@ -88,14 +93,30 @@ export function Popup({
ref={setArrowElement}
style={styles.arrow}
className={clsx(
'top-[-7px]',
attributes?.popper?.['data-popper-placement'] == 'bottom' && [
'top-[-7px]',
'before:rotate-45',
],
attributes?.popper?.['data-popper-placement'] == 'top' && [
'bottom-[4px]',
'before:rotate-[225deg]',
],
attributes?.popper?.['data-popper-placement'] == 'right' && [
'left-[-1px]',
'before:top-[-8px]',
'before:rotate-[-45deg]',
],
attributes?.popper?.['data-popper-placement'] == 'left' && [
'right-[-2px]',
'before:top-[-8px]',
'before:rotate-[135deg]',
],
'before:absolute',
'before:w-[11px]',
'before:h-[11px]',
'before:bg-white dark:before:bg-neutral-900',
"before:content-['']",
'before:translate-x-[-6px]',
'before:rotate-45',
'before:border-l-2',
'before:border-t-2',
'before:border-solid',
Expand All @@ -107,3 +128,25 @@ export function Popup({
</div>
);
}

export function HelpPopup({ children, className }: { children?: ReactNode; className?: string }) {
return (
<Popup
className={clsx('inline-block align-text-top absolute right-0', className)}
popupClassName="w-[300px]"
button={
<IconButton
className="inline-block !p-0 !bg-transparent"
icon={IoHelpCircleOutline}
label={`help`}
/>
}
placement="right"
onClick={(e) => {
e.preventDefault();
}}
>
{children}
</Popup>
);
}
85 changes: 65 additions & 20 deletions frontend/src/pages/new_document.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { BlobReader, BlobWriter, ZipReader, Entry } from '@zip.js/zip.js';
import * as Automerge from '@automerge/automerge';
import { getDocumentWsUrl } from '../utils/auth';
import { RequestDataType } from '../api';
import { HelpPopup } from '../components/popup';

type FieldValues = {
name: string;
Expand Down Expand Up @@ -159,6 +160,9 @@ export function NewDocumentPage() {
<form onSubmit={handleSubmit(submitHandler)}>
<div className="flex flex-col gap-6">
<FormControl label="Name" error={errors.name && 'This field is required.'}>
<HelpPopup>
<p>This name will be used in the overview to identify the transcript.</p>
</HelpPopup>
<Input autoFocus {...register('name', { required: true })} />
</FormControl>

Expand Down Expand Up @@ -286,35 +290,62 @@ export function NewDocumentPage() {
<FormControl
label="Transcription Quality"
error={errors.quality?.message}
className="relative mb-6"
className={clsx('p-3 -mx-3 rounded', quality < 3 && 'bg-red-100 text-black')}
>
<div>
<HelpPopup className="mr-3">
<p className="pb-2">
With this slider you can influence the quality of the transcription.
</p>
<p className="pb-2">
Moving the slider to the right produces better transcripts at the cost of
longer wait times. Moving it to the left produces worse transcripts but
shortens the transcription time.
</p>
<p>
The default position of the slider should be a good tradeoff for most uses.
</p>
</HelpPopup>
<div className="relative mb-6">
<Slider min={1} max={5} {...register('quality')} />
<span className="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">
<span
className={clsx(
'text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6',
quality < 3 && 'dark:text-gray-700',
)}
>
Fastest
</span>
<span className="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">
<span
className={clsx(
'text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6',
quality < 3 && 'dark:text-gray-700',
)}
>
Best
</span>
</div>
</FormControl>

{quality < 3 ? (
<>
<div className="block bg-red-100 px-2 py-2 rounded text-red-700">
It is not recommended to use a low quality setting for real work. The result
will be very underwhelming.
</div>
</>
) : (
<></>
)}
{quality < 3 ? (
<>
<p className="py-2 text-red-700">
It is not recommended to use a low quality setting for real work. The result
will be very underwhelming.
</p>
</>
) : (
<></>
)}
</FormControl>

<FormControl
label="Language"
error={errors.language?.message}
className="flex-grow"
>
<FormControl label="Language" error={errors.language?.message}>
<HelpPopup>
<p className="pb-2">
If you know the language of your document (and if only one language is
spoken), you can set it here explicitly. Doing so might result in slightly
better & faster transcriptions.
</p>
<p className="pb-2">It is also fine to leave this control on auto-detect.</p>
</HelpPopup>
<div>
<Select {...register('language')}>
{getLanguages(models)?.map((lang) => (
Expand All @@ -327,6 +358,20 @@ export function NewDocumentPage() {
</FormControl>

<FormControl label={'Speaker Detection'}>
<HelpPopup>
<p className="pb-2">
If multiple persons speek in your recording, transcribee can try to annotate
your text with speaker information. Leaving this setting on &quot;On&quot;
will result in transcribee trying to guess how many people are speaking in the
recording and detect them.
</p>
<p className="pb-2">
If you know how many people speek in your recording, you can set this control
to advanced and manually enter the number of speakers. If only one person is
speeking (or if you dont need speaker information) you can turn the speaker
detection off.
</p>
</HelpPopup>
<div className="flex">
<input
type="radio"
Expand Down

0 comments on commit 215bf4f

Please sign in to comment.