Skip to content

Commit

Permalink
Fear(website): allow modal to be half screen (#1824)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theosanderson
theosanderson authored May 10, 2024
1 parent 1dbfcba commit ac470d4
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 47 deletions.
5 changes: 5 additions & 0 deletions website/src/components/SearchPage/SearchFullUI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export const SearchFullUI = ({
accessToken,
}: SearchFullUIProps) => {
const [previewedSeqId, setPreviewedSeqId] = useState<string | null>(null);
const [previewHalfScreen, setPreviewHalfScreen] = useState(false);

if (error !== null) {
return (
Expand All @@ -79,6 +80,8 @@ export const SearchFullUI = ({
onClose={() => setPreviewedSeqId(null)}
referenceGenomeSequenceNames={referenceGenomesSequenceNames}
myGroups={myGroups}
isHalfScreen={previewHalfScreen}
setIsHalfScreen={setPreviewHalfScreen}
/>
<div className='md:w-72'>
<SearchForm
Expand Down Expand Up @@ -119,6 +122,7 @@ export const SearchFullUI = ({
orderBy={orderBy}
classOfSearchPage={SEARCH}
setPreviewedSeqId={setPreviewedSeqId}
previewedSeqId={previewedSeqId}
/>
<div className='mt-4 flex justify-center'>
<SearchPagination
Expand All @@ -132,6 +136,7 @@ export const SearchFullUI = ({
classOfSearchPage={SEARCH}
/>
</div>
{previewHalfScreen && previewedSeqId !== null && <div className='h-[calc(50vh)]'></div>}
</div>
</div>
);
Expand Down
113 changes: 69 additions & 44 deletions website/src/components/SearchPage/SeqPreviewModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,22 @@ import { type ReferenceGenomesSequenceNames } from '../../types/referencesGenome
import { SequenceDataUI } from '../SequenceDetailsPage/SequenceDataUI';
import IcBaselineDownload from '~icons/ic/baseline-download';
import MaterialSymbolsClose from '~icons/material-symbols/close';
import MaterialSymbolsLightWidthFull from '~icons/material-symbols-light/width-full';
import MdiDockBottom from '~icons/mdi/dock-bottom';
import OouiNewWindowLtr from '~icons/ooui/new-window-ltr';

const BUTTONCLASS =
'inline-flex justify-center px-4 py-2 text-sm font-medium text-gray-900 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500';

interface SeqPreviewModalProps {
seqId: string;
accessToken?: string;
isOpen: boolean;
onClose: () => void;
referenceGenomeSequenceNames: ReferenceGenomesSequenceNames;
myGroups: Group[];
isHalfScreen?: boolean;
setIsHalfScreen: (isHalfScreen: boolean) => void;
}

export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
Expand All @@ -27,6 +32,8 @@ export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
onClose,
referenceGenomeSequenceNames,
myGroups,
isHalfScreen = false,
setIsHalfScreen,
}) => {
const [isLoading, setIsLoading] = useState(true);
const [data, setData] = useState<any | null>(null);
Expand All @@ -43,54 +50,72 @@ export const SeqPreviewModal: React.FC<SeqPreviewModalProps> = ({
}
}, [accessToken, seqId]);

return (
<Transition appear show={isOpen}>
<Dialog as='div' className='fixed inset-0 z-10 overflow-y-auto' onClose={onClose}>
<div className='min-h-screen px-8 text-center'>
<Dialog.Overlay className='fixed inset-0 bg-black opacity-30' />

<div className='inline-block w-full p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pb-0'>
<div className='flex justify-between items-center'>
<Dialog.Title as='h3' className='text-xl font-medium leading-6 text-primary-700 pl-6'>
{seqId}
</Dialog.Title>
<div>
<a href={routes.sequencesFastaPage(seqId, true)} className={BUTTONCLASS}>
<IcBaselineDownload className='w-6 h-6' />
</a>
<a
href={routes.sequencesDetailsPage(seqId)}
title='Open in full window'
className={BUTTONCLASS}
>
<OouiNewWindowLtr className='w-6 h-6' />
</a>
const content = (
<div
className={`mt-4 text-gray-700 overflow-y-auto ${isHalfScreen ? 'h-[calc(50vh-9rem)]' : 'h-[calc(100vh-9rem)]'}`}
>
{isLoading ? (
<div>Loading...</div>
) : data !== null && !isError ? (
<SequenceDataUI
{...data}
referenceGenomeSequenceNames={referenceGenomeSequenceNames}
myGroups={myGroups}
accessToken={accessToken}
/>
) : (
<div>Failed to load sequence data</div>
)}
</div>
);

<button type='button' className={BUTTONCLASS} onClick={onClose} title='Close'>
<MaterialSymbolsClose className='w-6 h-6' />
</button>
</div>
</div>
const controls = (
<div className='flex justify-between items-center'>
<div className='text-xl font-medium leading-6 text-primary-700 pl-6'>{seqId}</div>
<div>
<button
type='button'
className={BUTTONCLASS}
onClick={() => setIsHalfScreen(!isHalfScreen)}
title={isHalfScreen ? 'Expand sequence details view' : 'Dock sequence details view'}
>
{isHalfScreen ? (
<MaterialSymbolsLightWidthFull className='w-6 h-6' />
) : (
<MdiDockBottom className='w-6 h-6' />
)}
</button>
<a href={routes.sequencesFastaPage(seqId, true)} className={BUTTONCLASS}>
<IcBaselineDownload className='w-6 h-6' />
</a>
<a href={routes.sequencesDetailsPage(seqId)} title='Open in full window' className={BUTTONCLASS}>
<OouiNewWindowLtr className='w-6 h-6' />
</a>
<button type='button' className={BUTTONCLASS} onClick={onClose} title='Close'>
<MaterialSymbolsClose className='w-6 h-6' />
</button>
</div>
</div>
);

<div className='mt-4 text-gray-700 overflow-y-auto h-[calc(100vh-150px)]'>
{isLoading ? (
<div>Loading...</div>
) : data !== null && !isError ? (
<div className=''>
<SequenceDataUI
{...data}
referenceGenomeSequenceNames={referenceGenomeSequenceNames}
myGroups={myGroups}
accessToken={accessToken}
/>
</div>
) : (
<div>Failed to load sequence data</div>
)}
return (
<Transition appear show={isOpen} as={React.Fragment}>
{isHalfScreen ? (
<div className='fixed bottom-0 w-full left-0 z-10 bg-white p-6 border-t border-gray-400'>
{controls}
{content}
</div>
) : (
<Dialog as='div' className='fixed inset-0 z-10 overflow-y-auto' onClose={onClose}>
<div className='min-h-screen px-8 text-center'>
<Dialog.Overlay className='fixed inset-0 bg-black opacity-30' />
<div className='inline-block w-full p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl pb-0'>
{controls}
{content}
</div>
</div>
</div>
</Dialog>
</Dialog>
)}
</Transition>
);
};
14 changes: 11 additions & 3 deletions website/src/components/SearchPage/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ type TableProps = {
classOfSearchPage: ClassOfSearchPageType;
groupId?: number;
setPreviewedSeqId: (seqId: string | null) => void;
previewedSeqId: string | null;
};

export const Table: FC<TableProps> = ({
Expand All @@ -38,6 +39,7 @@ export const Table: FC<TableProps> = ({
classOfSearchPage,
groupId,
setPreviewedSeqId,
previewedSeqId,
}) => {
const primaryKey = schema.primaryKey;

Expand Down Expand Up @@ -130,11 +132,16 @@ export const Table: FC<TableProps> = ({
</thead>
<tbody className='bg-white'>
{data.map((row, index) => (
<tr key={index} className='hover:bg-primary-100 border-gray-100 '>
<tr
key={index}
className={`hover:bg-primary-100 border-gray-100 ${
row[primaryKey] === previewedSeqId ? 'bg-gray-200' : ''
} `}
>
<td className='px-2 whitespace-nowrap text-primary-900 pl-6'>
<a
href={routes.sequencesDetailsPage(row[primaryKey] as string)}
className='text-primary-900 hover:text-primary-800'
className='text-primary-900 hover:text-primary-800 hover:no-underline'
onClick={(e) => {
function detectMob() {
const toMatch = [
Expand All @@ -159,7 +166,8 @@ export const Table: FC<TableProps> = ({
}
}}
>
{row[primaryKey]}
{' '}
{row[primaryKey]}{' '}
</a>
</td>
{columns.map((c) => (
Expand Down

0 comments on commit ac470d4

Please sign in to comment.