Add info text that explains the filters

[fengelniederhammer]

No description provided.

[JonasKellerer]

Possible implementation idea:

In SequencingEffortsPageStateSelector, CompareVariantsToBaselineStateSelector, CompareVariantsPageStateSelector and SingleVariantPageStateSelector above the filters.

<div className='mb-2 flex justify-end gap-4 text-sm'>
                <ButtonWithIcon icon={'mdi--tooltip-help-outline'}>
                    <div>Help</div>
                </ButtonWithIcon>
                <ButtonWithIcon icon={'mdi--wrench'}>
                    <div>Add filter fields</div>
                </ButtonWithIcon>
                <ButtonWithIcon icon={'mdi--circle-arrows'}>
                    <div>Reset</div>
                </ButtonWithIcon>
            </div>
            <hr className='mb-2 border-gray-200' />

with

import type { JSX, PropsWithChildren } from 'react';

export function ButtonWithIcon({
    children,
    icon,
    onClick,
}: PropsWithChildren<{
    icon: string;
    onClick?: JSX.IntrinsicElements['button']['onClick'];
}>) {
    return (
        <button className='flex items-center gap-1 hover:underline' onClick={onClick}>
            <div className={`iconify ${icon}`}></div>
            {children}
        </button>
    );
}

and in CompareSideBySidePageStateSelector:

<hr className='my-2 border-gray-200' />
            <div className='mb-2 flex justify-end gap-4 text-sm'>
                <ButtonWithIcon icon={'mdi--tooltip-help-outline'}>
                    <div>Help</div>
                </ButtonWithIcon>
                <ButtonWithIcon icon={'mdi--wrench'}>
                    <div>Add filter fields</div>
                </ButtonWithIcon>
                <ButtonWithIcon icon={'mdi--circle-arrows'}>
                    <div>Reset</div>
                </ButtonWithIcon>
            </div>