Skip to content

Replace react-split-pane component with allotment #369

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 4 commits into from
Jul 14, 2025
Merged

Replace react-split-pane component with allotment #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
45d0391
Replace package
jtklein Jul 14, 2025
a5abc96
Change indentation
jtklein Jul 14, 2025
7b768c5
Replace split pane component
jtklein Jul 14, 2025
b4d0632
Remove unused css
jtklein Jul 14, 2025
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 @@ -64,6 +64,7 @@
"@mui/material": "^6.5.0",
"@mui/styles": "^6.5.0",
"@sentry/electron": "^4.0.2",
"allotment": "^1.20.4",
"classnames": "^2.3.2",
"clean-stack": "3.0.1",
"clsx": "^1.2.1",
Expand Down Expand Up @@ -91,7 +92,6 @@
"react-dom": "^18.3.1",
"react-dropzone": "14.2.10",
"react-scripts": "^5.0.1",
"react-split-pane": "^0.1.92",
"serialize-error": "^8.1.0",
"source-map-support": "^0.5.21",
"yup": "^0.32.11"
Expand Down
50 changes: 0 additions & 50 deletions src/app/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,53 +15,3 @@
.alignment + .alignment {
margin-left: 10px;
}

.Resizer {
background: #000;
opacity: .2;
z-index: 1;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}

.Resizer:hover {
-webkit-transition: all 2s ease;
transition: all 2s ease;
}

.Resizer.horizontal {
height: 11px;
margin: -5px 0;
border-top: 5px solid rgba(255, 255, 255, 0);
border-bottom: 5px solid rgba(255, 255, 255, 0);
cursor: row-resize;
width: 100%;
}

.Resizer.horizontal:hover {
border-top: 5px solid rgba(0, 0, 0, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}

.Resizer.vertical {
width: 11px;
margin: 0 -5px;
border-left: 5px solid rgba(255, 255, 255, 0);
border-right: 5px solid rgba(255, 255, 255, 0);
cursor: col-resize;
}

.Resizer.vertical:hover {
border-left: 5px solid rgba(0, 0, 0, 0.5);
border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {
cursor: not-allowed;
}
.Resizer.disabled:hover {
border-color: transparent;
}
160 changes: 79 additions & 81 deletions src/app/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import { observer } from 'mobx-react';
import clsx from 'clsx';
import SplitPane from 'react-split-pane';
import { Allotment } from 'allotment';
import 'allotment/dist/style.css';
import { makeStyles } from '@mui/styles';
import CssBaseline from '@mui/material/CssBaseline';
import IconButton from '@mui/material/IconButton';
Expand Down Expand Up @@ -43,8 +44,6 @@ const useStyles = makeStyles(theme => ({
height: '100vh',
backgroundColor: theme.palette.primary.background,
},
splitPane: {
},
ioContainer: {
// height: 'calc(100vh - 20px)',
height: '100%',
Expand Down Expand Up @@ -296,98 +295,97 @@ const App = () => {
</AppBar>
)}

<SplitPane
split="vertical"
size={640}
minSize={100}
style={{ position: 'static' }}
>
<Box
display="flex"
flexDirection="column"
className={clsx(classes.ioContainer, classes.leftPanel)}
>
<Allotment defaultSizes={[640, 400]} minSize={100}>
<Allotment.Pane>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.input}`}
flexDirection="column"
className={clsx(classes.ioContainer, classes.leftPanel)}
>
<Typography
className={`${classes.verticalHeading} ${classes.inputHeading}`}
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.input}`}
>
Input
</Typography>
<div className={clsx(classes.ioItem, classes.inputContainer)}>
<Input run={run} />
</div>
</Box>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.model}`}
>
<Typography
className={`${classes.verticalHeading} ${classes.modelHeading}`}
<Typography
className={`${classes.verticalHeading} ${classes.inputHeading}`}
>
Input
</Typography>
<div className={clsx(classes.ioItem, classes.inputContainer)}>
<Input run={run} />
</div>
</Box>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.model}`}
>
Analysis
</Typography>
<div className={clsx(classes.ioItem, classes.modelContainer)}>
<Model run={run} />
</div>
</Box>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.output}`}
>
<Typography
className={`${classes.verticalHeading} ${classes.outputHeading}`}
<Typography
className={`${classes.verticalHeading} ${classes.modelHeading}`}
>
Analysis
</Typography>
<div className={clsx(classes.ioItem, classes.modelContainer)}>
<Model run={run} />
</div>
</Box>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.output}`}
>
Output
</Typography>
<div className={clsx(classes.ioItem, classes.outputContainer)}>
<Output run={run} />
</div>
<Typography
className={`${classes.verticalHeading} ${classes.outputHeading}`}
>
Output
</Typography>
<div className={clsx(classes.ioItem, classes.outputContainer)}>
<Output run={run} />
</div>
</Box>
</Box>
</Box>
</Allotment.Pane>

<Box
display="flex"
flexDirection="column"
className={clsx(classes.ioContainer, classes.rightPanel)}
>
<Allotment.Pane>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.raxml}`}
flexDirection="column"
className={clsx(classes.ioContainer, classes.rightPanel)}
>
<Typography
className={`${classes.verticalHeading} ${classes.raxmlHeading}`}
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.raxml}`}
>
RAxML
</Typography>
<div className={classes.ioItem}>
<Raxml run={run} store={store} />
</div>
</Box>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.console}`}
>
<Typography
className={`${classes.verticalHeading} ${classes.consoleHeading}`}
<Typography
className={`${classes.verticalHeading} ${classes.raxmlHeading}`}
>
RAxML
</Typography>
<div className={classes.ioItem}>
<Raxml run={run} store={store} />
</div>
</Box>
<Box
display="flex"
className={`${classes.ioWrapper} ${classes.console}`}
>
Console
{run.stdout === '' && run.stderr === '' ? null : (
<DeleteIcon
onClick={run.clearConsole}
className={classes.deleteIcon}
title="Clear console"
/>
)}
</Typography>
<div className={classes.ioItem}>
<Console run={run} />
</div>
<Typography
className={`${classes.verticalHeading} ${classes.consoleHeading}`}
>
Console
{run.stdout === '' && run.stderr === '' ? null : (
<DeleteIcon
onClick={run.clearConsole}
className={classes.deleteIcon}
title="Clear console"
/>
)}
</Typography>
<div className={classes.ioItem}>
<Console run={run} />
</div>
</Box>
</Box>
</Box>
</SplitPane>
</Allotment.Pane>
</Allotment>
<AppBar position="fixed" color="primary" className={classes.statusBar}>
<Toolbar className={classes.statusToolbar}>
<IconButton
Expand Down
61 changes: 37 additions & 24 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2639,6 +2639,11 @@
"@jridgewell/resolve-uri" "^3.1.0"
"@jridgewell/sourcemap-codec" "^1.4.14"

"@juggle/resize-observer@^3.3.1":
version "3.4.0"
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==

"@leichtgewicht/ip-codec@^2.0.1":
version "2.0.5"
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
Expand Down Expand Up @@ -4086,6 +4091,18 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.6.3, ajv@^8.9.0:
json-schema-traverse "^1.0.0"
require-from-string "^2.0.2"

allotment@^1.20.4:
version "1.20.4"
resolved "https://registry.yarnpkg.com/allotment/-/allotment-1.20.4.tgz#91d81f31b461e1ad4c9d89b4cdc85d6b6c30ac0f"
integrity sha512-LMM5Xe5nLePFOLAlW/5k3ARqznYGUyNekV4xJrfDKn1jimW3nlZE6hT/Tu0T8s0VgAkr9s2P7+uM0WvJKn5DAw==
dependencies:
classnames "^2.3.0"
eventemitter3 "^5.0.0"
lodash.clamp "^4.0.0"
lodash.debounce "^4.0.0"
lodash.isequal "^4.5.0"
use-resize-observer "^9.0.0"

ansi-colors@^3.0.0:
version "3.2.4"
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
Expand Down Expand Up @@ -5253,7 +5270,7 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"

classnames@^2.3.2:
classnames@^2.3.0, classnames@^2.3.2:
version "2.5.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
Expand Down Expand Up @@ -7316,6 +7333,11 @@ eventemitter3@^4.0.0:
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==

eventemitter3@^5.0.0:
version "5.0.1"
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==

events@^3.2.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
Expand Down Expand Up @@ -10377,7 +10399,12 @@ lodash-es@^4.17.21:
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==

lodash.debounce@^4.0.8:
lodash.clamp@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa"
integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==

lodash.debounce@^4.0.0, lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
Expand Down Expand Up @@ -12415,7 +12442,7 @@ prompts@^2.0.1, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"

prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand Down Expand Up @@ -12647,11 +12674,6 @@ react-is@^19.0.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.0.0.tgz#d6669fd389ff022a9684f708cf6fa4962d1fea7a"
integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==

react-lifecycles-compat@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==

react-refresh@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
Expand Down Expand Up @@ -12712,22 +12734,6 @@ react-scripts@^5.0.1:
optionalDependencies:
fsevents "^2.3.2"

react-split-pane@^0.1.92:
version "0.1.92"
resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41"
integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==
dependencies:
prop-types "^15.7.2"
react-lifecycles-compat "^3.0.4"
react-style-proptype "^3.2.2"

react-style-proptype@^3.2.2:
version "3.2.2"
resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
dependencies:
prop-types "^15.5.4"

react-transition-group@^4.4.5:
version "4.4.5"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
Expand Down Expand Up @@ -15062,6 +15068,13 @@ url@^0.11.0:
punycode "^1.4.1"
qs "^6.12.3"

use-resize-observer@^9.0.0:
version "9.1.0"
resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
dependencies:
"@juggle/resize-observer" "^3.3.1"

use@^3.1.0:
version "3.1.1"
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
Expand Down
Loading