Skip to content

Commit

Permalink
feat(website): fix responsivity
Browse files Browse the repository at this point in the history
  • Loading branch information
@TobiasKampmann
TobiasKampmann committed Feb 13, 2024
1 parent bf2c31c commit 8c21720
Showing 1 changed file with 76 additions and 57 deletions.
133 changes: 76 additions & 57 deletions website/src/components/ReviewPage/ReviewCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,18 +48,19 @@ export const ReviewCard: FC<ReviewCardProps> = ({

return (
<div className='p-3 border rounded-md shadow-lg relative transition-all duration-500'>
<div className='absolute top-3 right-3 '>
<div className='absolute top-3 right-3 flex flex-wrap space-x-2'>
<button
className='text-gray-500 hover:text-gray-900 hover:cursor-pointer inline-block mr-2 text-xl'
className='text-gray-500 hover:text-gray-900 hover:cursor-pointer inline-block mr-2 mb-2 text-xl'
onClick={approveAccessionVersion}
data-tooltip-id='approve-tooltip'
disabled={sequenceEntryStatus.status !== awaitingApprovalStatus}
>
<Send />
</button>
<Tooltip id='approve-tooltip' content='Release this sequence entry' />

<button
className='text-gray-500 hover:text-gray-900 hover:cursor-pointer inline-block text-xl'
className='text-gray-500 hover:text-gray-900 hover:cursor-pointer inline-block mr-2 mb-2 text-xl'
data-tooltip-id='edit-tooltip'
onClick={editAccessionVersion}
disabled={
Expand All @@ -70,8 +71,9 @@ export const ReviewCard: FC<ReviewCardProps> = ({
<Edit />
</button>
<Tooltip id='edit-tooltip' content='Edit this sequence entry' />

<button
className='text-gray-500 hover:text-gray-900 hover:cursor-pointer inline-block ml-2 text-xl'
className='text-gray-500 hover:text-gray-900 hover:cursor-pointer inline-block mb-2 text-xl'
onClick={deleteAccessionVersion}
data-tooltip-id='delete-tooltip'
disabled={
Expand All @@ -84,52 +86,64 @@ export const ReviewCard: FC<ReviewCardProps> = ({
<Tooltip id='delete-tooltip' content='Discard this sequence entry' />
</div>
<div className='flex flex-wrap '>
<StatusIcon status={sequenceEntryStatus.status} dataUseTerms={sequenceEntryStatus.dataUseTerms} />
<StatusIcon
status={sequenceEntryStatus.status}
dataUseTerms={sequenceEntryStatus.dataUseTerms}
accession={sequenceEntryStatus.accession}
/>
<KeyValueComponent
keyName={sequenceEntryStatus.submissionId}
value={sequenceEntryStatus.accession}
extraStyle='font-medium'
keyStyle=' text-gray-600'
/>

{isLoading !== true &&
data !== undefined &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
(data.status === hasErrorsStatus || data.status === awaitingApprovalStatus)
? Object.keys(data.processedData.metadata).map((key, index) => (
<KeyValueComponent
key={index}
keyName={key}
value={key}
warnings={
data.warnings?.filter((item: ProcessingAnnotation) => item.source[0].name === key) ??
[]
}
errors={
data.errors?.filter((item: ProcessingAnnotation) => item.source[0].name === key) ?? []
}
/>
))
: null}

<div className='flex flex-row flex-wrap'>
{isLoading !== true &&
data !== undefined &&
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
(data.status === hasErrorsStatus || data.status === awaitingApprovalStatus)
? Object.keys(data.processedData.metadata).map((key, index) => {
return (
<KeyValueComponent
key={index}
keyName={key}
value={key}
warnings={
data.warnings?.filter(
(item: ProcessingAnnotation) => item.source[0].name === key,
) ?? []
}
errors={
data.errors?.filter(
(item: ProcessingAnnotation) => item.source[0].name === key,
) ?? []
}
/>
);
})
: null}
</div>
<div>
{data !== undefined && data.errors !== null && data.errors.length > 0 && (
<div className='flex flex-col m-2 '>
{data.errors.map((error: ProcessingAnnotation) => (
<>
<p
key={error.source.map((source) => source.type + source.name).join('.')}
className='text-red-600'
data-tooltip-id='error-tooltip'
>
{error.message}
</p>
<Tooltip
id='error-tooltip'
content='You must fix this error before releasing this sequence entry'
/>
</>
))}
{data.errors.map((error: ProcessingAnnotation) => {
const uniqueKey = error.source.map((source) => source.type + source.name).join('.');
return (
<>
<p
key={uniqueKey}
className='text-red-600'
data-tooltip-id={'error-tooltip' + uniqueKey}
>
{error.message}
</p>
<Tooltip
id={'error-tooltip' + uniqueKey}
content='You must fix this error before releasing this sequence entry'
/>
</>
);
})}
</div>
)}
{data !== undefined && data.warnings !== null && data.warnings.length > 0 && (
Expand All @@ -152,71 +166,76 @@ export const ReviewCard: FC<ReviewCardProps> = ({

type DataUseTermsIconProps = {
dataUseTerms: DataUseTerms;
accession: string;
};
const DataUseTermsIcon: FC<DataUseTermsIconProps> = ({ dataUseTerms }) => {
const DataUseTermsIcon: FC<DataUseTermsIconProps> = ({ dataUseTerms, accession }) => {
const hintText =
dataUseTerms.type === restrictedDataUseTermsType
? `Data use restricted until ${dataUseTerms.restrictedUntil}`
: `Data open to use`;

return (
<>
<div data-tooltip-id='dataTermUse-tooltip'>
<div data-tooltip-id={'dataUseTerm-tooltip' + accession}>
{dataUseTerms.type === restrictedDataUseTermsType ? <Locked /> : <Unlocked />}
</div>
<Tooltip id='dataTermUse-tooltip' content={hintText} />
<Tooltip id={'dataUseTerm-tooltip' + accession} content={hintText} />
</>
);
};

type StatusIconProps = {
status: SequenceEntryStatusNames;
dataUseTerms: DataUseTerms;
accession: string;
};

const StatusIcon: FC<StatusIconProps> = ({ status, dataUseTerms }) => {
const StatusIcon: FC<StatusIconProps> = ({ status, dataUseTerms, accession }) => {
if (status === receivedStatus) {
return (
<div className='p-2 flex flex-col justify-between'>
<div data-tooltip-id='awaitingProcessing-tooltip'>
<div data-tooltip-id={'awaitingProcessing-tooltip' + accession}>
<EmptyCircle className='text-gray-500' />
</div>
<Tooltip id='awaitingProcessing-tooltip' content='Awaiting processing' />
<DataUseTermsIcon dataUseTerms={dataUseTerms} />
<Tooltip id={'awaitingProcessing-tooltip' + accession} content='Awaiting processing' />
<DataUseTermsIcon dataUseTerms={dataUseTerms} accession={accession} />
</div>
);
}
if (status === hasErrorsStatus) {
return (
<div className='p-2 flex flex-col justify-between'>
<div data-tooltip-id={`error-tooltip-${status}`}>
<div data-tooltip-id={`error-tooltip` + accession}>
<QuestionMark className='text-red-600' />
</div>
<Tooltip id={`error-tooltip-${status}`} content='Error detected' />
<DataUseTermsIcon dataUseTerms={dataUseTerms} />
<Tooltip id={`error-tooltip` + accession} content='Error detected' />
<DataUseTermsIcon dataUseTerms={dataUseTerms} accession={accession} />
</div>
);
}
if (status === inProcessingStatus) {
return (
<div className='p-2 flex flex-col justify-between'>
<div data-tooltip-id='inProcessing-tooltip'>
<div data-tooltip-id={'inProcessing-tooltip' + accession}>
<span className='loading loading-spinner loading-sm' />
</div>
<Tooltip id='inProcessing-tooltip' content='In processing' />
<DataUseTermsIcon dataUseTerms={dataUseTerms} />
<Tooltip id={'inProcessing-tooltip' + accession} content='In processing' />
<DataUseTermsIcon dataUseTerms={dataUseTerms} accession={accession} />
</div>
);
}
if (status === awaitingApprovalStatus) {
return (
// TODO(#702): When queries are implemented, this should be a yellow tick with a warning note if there are warnings
<div className='p-2 flex flex-col justify-between' title='Passed QC [TODO: sometimes (with warnings)]'>
<div data-tooltip-id='awaitingApproval-tooltip'>
<div data-tooltip-id={'awaitingApproval-tooltip' + accession}>
<TickOutline className='text-green-500' />
</div>
<Tooltip id='awaitingApproval-tooltip' content='Passed QC [TODO: sometimes (with warnings)]' />
<DataUseTermsIcon dataUseTerms={dataUseTerms} />
<Tooltip
id={'awaitingApproval-tooltip' + accession}
content='Passed QC [TODO: sometimes (with warnings)]'
/>
<DataUseTermsIcon dataUseTerms={dataUseTerms} accession={accession} />
</div>
);
}
Expand Down

0 comments on commit 8c21720

Please sign in to comment.