Skip to content

Update react dropzone, add dropzones around all input buttons, add on-active styling #453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jtklein merged 7 commits into from
Sep 15, 2026
Merged

Update react dropzone, add dropzones around all input buttons, add on-active styling #453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
85c8b5c
Update package.json
jtklein Sep 15, 2026
e00f1bf
Update yarn.lock
jtklein Sep 15, 2026
8ecafa7
Update Input.js
jtklein Sep 15, 2026
dd60531
Add some styling when drop is active, and change what are children
jtklein Sep 15, 2026
ef3e772
Add Dropzone s also around the other ADD ALIGNMENT buttons
jtklein Sep 15, 2026
6d4341b
Add dropzone for partition file
jtklein Sep 15, 2026
acfce62
Add Dropzones around all tree input buttons
jtklein Sep 15, 2026
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dropzone": "14.2.10",
"react-dropzone": "20.1.2",
"react-scripts": "^5.0.1",
"serialize-error": "^8.1.0",
"source-map-support": "^0.5.21",
Expand Down
322 changes: 233 additions & 89 deletions src/app/Input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,51 @@ const Input = ({ run }) => {
if (run.hasAstralTree) {
console.log('run.hasAstralTree :>> ', run.hasAstralTree);
}

const onAlignmentDrop = (acceptedFiles) => {
const droppedPathes = acceptedFiles.map((file) => ({
path: webUtils.getPathForFile(file),
}));
run.addAlignments(droppedPathes);
};

const onPartitionDrop = (acceptedFiles) => {
const droppedPathes = acceptedFiles.map((file) => ({
path: webUtils.getPathForFile(file),
}));
run.addPartitionFiles(droppedPathes);
};

const onTreeDrop = (type) => (acceptedFiles) => {
const droppedPathes = acceptedFiles.map((file) => ({
path: webUtils.getPathForFile(file),
}));
run.addTreeFiles(type, droppedPathes);
};

const onAstralTreeDrop = (acceptedFiles) => {
const droppedPathes = acceptedFiles.map((file) => ({
path: webUtils.getPathForFile(file),
}));
if (droppedPathes.length) {
run.addAstralFiles(droppedPathes[0]);
}
};

const dropzoneRootSx = (isDragActive, extra = {}) => ({
width: 'fit-content',
alignSelf: 'flex-start',
borderRadius: 1,
border: (theme) =>
isDragActive
? `2px dashed ${theme.palette.input.darker}`
: '2px dashed transparent',
bgcolor: (theme) =>
isDragActive ? theme.palette.input.lighter : 'transparent',
transition: 'background-color 0.15s ease, border-color 0.15s ease',
...extra,
});

// const SelectNumRuns = run.
return (
<Box display="flex" flexDirection="column" sx={{ width: '100%' }}>
Expand All @@ -32,19 +77,10 @@ const Input = ({ run }) => {
padding: '10px',
}}
>
<Dropzone
noClick
onDrop={(acceptedFiles) => {
const droppedPathes = acceptedFiles.map((file) => {
return {
path: webUtils.getPathForFile(file),
};
});
run.addAlignments(droppedPathes);
}}
>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<Dropzone noClick onDrop={onAlignmentDrop}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box {...getRootProps()} sx={dropzoneRootSx(isDragActive)}>
<input {...getInputProps()} style={{ display: 'none' }} />
<Box display="flex" alignItems="center" sx={{ gap: '10px' }}>
{run.inputIsAlignment
? run.alignments.map((alignment) => (
Expand All @@ -57,73 +93,142 @@ const Input = ({ run }) => {
{run.inputIsTree && run.hasAstralTree ? (
<AstralTreeCard astralTree={run.astralTree} />
) : null}
<Box paddingX={1}>
<PartitionFileCard run={run} />
</Box>
{run.canLoadAstralTree ? (
<Button
variant="outlined"
sx={{
width: '200px',
height: '200px',
}}
onClick={run.loadAstralTree}
>
Load input trees
</Button>
) : null}
{run.canLoadAlignment && !run.canLoadPartitionFile ? (
{run.canLoadAlignment &&
!run.haveAlignments &&
!run.canLoadPartitionFile ? (
<Button
variant="outlined"
sx={{
width: '200px',
width: '550px',
height: '200px',
}}
onClick={run.loadAlignmentFiles}
title={
run.haveAlignments
? 'Concatenate new alignments and create partition'
: ''
}
>
{run.haveAlignments ? 'Add alignment' : 'Load alignment'}
Load alignment
</Button>
) : null}
</Box>
</div>
</Box>
)}
</Dropzone>

<Box paddingX={1}>
<PartitionFileCard run={run} />
</Box>
{run.canLoadAstralTree ? (
<Dropzone noClick onDrop={onAstralTreeDrop}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box
{...getRootProps()}
sx={dropzoneRootSx(isDragActive, {
width: '200px',
height: '200px',
})}
>
<input {...getInputProps()} style={{ display: 'none' }} />
<Button
variant="outlined"
sx={{
width: '100%',
height: '100%',
}}
onClick={run.loadAstralTree}
>
Load input trees
</Button>
</Box>
)}
</Dropzone>
) : null}
{run.canLoadAlignment &&
!run.canLoadPartitionFile &&
run.haveAlignments ? (
<Dropzone noClick onDrop={onAlignmentDrop}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box
{...getRootProps()}
sx={dropzoneRootSx(isDragActive, { flexShrink: 0 })}
>
<input {...getInputProps()} style={{ display: 'none' }} />
<Button
variant="outlined"
sx={{
width: '200px',
minWidth: '200px',
height: '200px',
}}
onClick={run.loadAlignmentFiles}
title="Concatenate new alignments and create partition"
>
Add alignment
</Button>
</Box>
)}
</Dropzone>
) : null}

{run.canLoadAlignment && run.canLoadPartitionFile ? (
<Box
display="flex"
flexDirection="column"
alignItems="center"
style={{ height: '200px' }}
>
<Button
variant="outlined"
sx={{
minWidth: '200px',
flexGrow: 1,
}}
onClick={run.loadAlignmentFiles}
title="Concatenate new alignments and automatically generate a partition"
>
Add alignment
</Button>
<Dropzone noClick onDrop={onAlignmentDrop}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box
{...getRootProps()}
sx={dropzoneRootSx(isDragActive, {
flexGrow: 1,
width: '100%',
minWidth: '200px',
})}
>
<input {...getInputProps()} style={{ display: 'none' }} />
<Button
variant="outlined"
sx={{
minWidth: '200px',
width: '100%',
height: '100%',
flexGrow: 1,
}}
onClick={run.loadAlignmentFiles}
title="Concatenate new alignments and automatically generate a partition"
>
Add alignment
</Button>
</Box>
)}
</Dropzone>
<Box paddingX={2}>OR</Box>
<Button
variant="outlined"
sx={{
minWidth: '200px',
flexGrow: 1,
}}
onClick={run.loadPartitionFile}
title="Load a partition file for the current alignment"
>
Load partition
</Button>
<Dropzone noClick onDrop={onPartitionDrop}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box
{...getRootProps()}
sx={dropzoneRootSx(isDragActive, {
flexGrow: 1,
width: '100%',
minWidth: '200px',
})}
>
<input {...getInputProps()} style={{ display: 'none' }} />
<Button
variant="outlined"
sx={{
minWidth: '200px',
width: '100%',
height: '100%',
flexGrow: 1,
}}
onClick={run.loadPartitionFile}
title="Load a partition file for the current alignment"
>
Load partition
</Button>
</Box>
)}
</Dropzone>
</Box>
) : null}
<Box>
Expand All @@ -150,16 +255,29 @@ const Input = ({ run }) => {
}}
/>
) : (
<Button
variant="outlined"
sx={{
width: '380px',
height: '100px',
}}
onClick={run.loadTreeFile}
>
Add Tree
</Button>
<Dropzone noClick onDrop={onTreeDrop('tree')}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box
{...getRootProps()}
sx={dropzoneRootSx(isDragActive, {
width: '380px',
height: '100px',
})}
>
<input {...getInputProps()} style={{ display: 'none' }} />
<Button
variant="outlined"
sx={{
width: '100%',
height: '100%',
}}
onClick={run.loadTreeFile}
>
Add Tree
</Button>
</Box>
)}
</Dropzone>
)}
</Box>
</Box>
Expand All @@ -183,16 +301,29 @@ const Input = ({ run }) => {
}}
/>
) : (
<Button
variant="outlined"
sx={{
width: '380px',
height: '100px',
}}
onClick={run.loadBackboneConstraintFile}
>
Add Backbone Constraint
</Button>
<Dropzone noClick onDrop={onTreeDrop('backboneConstraint')}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box
{...getRootProps()}
sx={dropzoneRootSx(isDragActive, {
width: '380px',
height: '100px',
})}
>
<input {...getInputProps()} style={{ display: 'none' }} />
<Button
variant="outlined"
sx={{
width: '100%',
height: '100%',
}}
onClick={run.loadBackboneConstraintFile}
>
Add Backbone Constraint
</Button>
</Box>
)}
</Dropzone>
)}
</Box>
</Box>
Expand All @@ -216,16 +347,29 @@ const Input = ({ run }) => {
}}
/>
) : (
<Button
variant="outlined"
sx={{
width: '380px',
height: '100px',
}}
onClick={run.loadMultifurcatingConstraintFile}
>
Add Multifurcating Constraint
</Button>
<Dropzone noClick onDrop={onTreeDrop('multifurcatingConstraint')}>
{({ getRootProps, getInputProps, isDragActive }) => (
<Box
{...getRootProps()}
sx={dropzoneRootSx(isDragActive, {
width: '380px',
height: '100px',
})}
>
<input {...getInputProps()} style={{ display: 'none' }} />
<Button
variant="outlined"
sx={{
width: '100%',
height: '100%',
}}
onClick={run.loadMultifurcatingConstraintFile}
>
Add Multifurcating Constraint
</Button>
</Box>
)}
</Dropzone>
)}
</Box>
</Box>
Expand Down
Loading
Loading