Skip to content

Commit 8c6895a

Browse files
jtkleinjtklein
authored
Replace react-split-pane component with allotment (#369)
* Replace package * Change indentation * Replace split pane component * Remove unused css
1 parent a3560d5 commit 8c6895a

4 files changed

Lines changed: 117 additions & 156 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"@mui/material": "^6.5.0",
6565
"@mui/styles": "^6.5.0",
6666
"@sentry/electron": "^4.0.2",
67+
"allotment": "^1.20.4",
6768
"classnames": "^2.3.2",
6869
"clean-stack": "3.0.1",
6970
"clsx": "^1.2.1",
@@ -91,7 +92,6 @@
9192
"react-dom": "^18.3.1",
9293
"react-dropzone": "14.2.10",
9394
"react-scripts": "^5.0.1",
94-
"react-split-pane": "^0.1.92",
9595
"serialize-error": "^8.1.0",
9696
"source-map-support": "^0.5.21",
9797
"yup": "^0.32.11"

‎src/app/App.css‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -15,53 +15,3 @@
1515
.alignment + .alignment {
1616
margin-left: 10px;
1717
}
18-
19-
.Resizer {
20-
background: #000;
21-
opacity: .2;
22-
z-index: 1;
23-
-moz-box-sizing: border-box;
24-
-webkit-box-sizing: border-box;
25-
box-sizing: border-box;
26-
-moz-background-clip: padding;
27-
-webkit-background-clip: padding;
28-
background-clip: padding-box;
29-
}
30-
31-
.Resizer:hover {
32-
-webkit-transition: all 2s ease;
33-
transition: all 2s ease;
34-
}
35-
36-
.Resizer.horizontal {
37-
height: 11px;
38-
margin: -5px 0;
39-
border-top: 5px solid rgba(255, 255, 255, 0);
40-
border-bottom: 5px solid rgba(255, 255, 255, 0);
41-
cursor: row-resize;
42-
width: 100%;
43-
}
44-
45-
.Resizer.horizontal:hover {
46-
border-top: 5px solid rgba(0, 0, 0, 0.5);
47-
border-bottom: 5px solid rgba(0, 0, 0, 0.5);
48-
}
49-
50-
.Resizer.vertical {
51-
width: 11px;
52-
margin: 0 -5px;
53-
border-left: 5px solid rgba(255, 255, 255, 0);
54-
border-right: 5px solid rgba(255, 255, 255, 0);
55-
cursor: col-resize;
56-
}
57-
58-
.Resizer.vertical:hover {
59-
border-left: 5px solid rgba(0, 0, 0, 0.5);
60-
border-right: 5px solid rgba(0, 0, 0, 0.5);
61-
}
62-
.Resizer.disabled {
63-
cursor: not-allowed;
64-
}
65-
.Resizer.disabled:hover {
66-
border-color: transparent;
67-
}

‎src/app/App.js‎

Lines changed: 79 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import { observer } from 'mobx-react';
33
import clsx from 'clsx';
4-
import SplitPane from 'react-split-pane';
4+
import { Allotment } from 'allotment';
5+
import 'allotment/dist/style.css';
56
import { makeStyles } from '@mui/styles';
67
import CssBaseline from '@mui/material/CssBaseline';
78
import IconButton from '@mui/material/IconButton';
@@ -43,8 +44,6 @@ const useStyles = makeStyles(theme => ({
4344
height: '100vh',
4445
backgroundColor: theme.palette.primary.background,
4546
},
46-
splitPane: {
47-
},
4847
ioContainer: {
4948
// height: 'calc(100vh - 20px)',
5049
height: '100%',
@@ -296,98 +295,97 @@ const App = () => {
296295
</AppBar>
297296
)}
298297

299-
<SplitPane
300-
split="vertical"
301-
size={640}
302-
minSize={100}
303-
style={{ position: 'static' }}
304-
>
305-
<Box
306-
display="flex"
307-
flexDirection="column"
308-
className={clsx(classes.ioContainer, classes.leftPanel)}
309-
>
298+
<Allotment defaultSizes={[640, 400]} minSize={100}>
299+
<Allotment.Pane>
310300
<Box
311301
display="flex"
312-
className={`${classes.ioWrapper} ${classes.input}`}
302+
flexDirection="column"
303+
className={clsx(classes.ioContainer, classes.leftPanel)}
313304
>
314-
<Typography
315-
className={`${classes.verticalHeading} ${classes.inputHeading}`}
305+
<Box
306+
display="flex"
307+
className={`${classes.ioWrapper} ${classes.input}`}
316308
>
317-
Input
318-
</Typography>
319-
<div className={clsx(classes.ioItem, classes.inputContainer)}>
320-
<Input run={run} />
321-
</div>
322-
</Box>
323-
<Box
324-
display="flex"
325-
className={`${classes.ioWrapper} ${classes.model}`}
326-
>
327-
<Typography
328-
className={`${classes.verticalHeading} ${classes.modelHeading}`}
309+
<Typography
310+
className={`${classes.verticalHeading} ${classes.inputHeading}`}
311+
>
312+
Input
313+
</Typography>
314+
<div className={clsx(classes.ioItem, classes.inputContainer)}>
315+
<Input run={run} />
316+
</div>
317+
</Box>
318+
<Box
319+
display="flex"
320+
className={`${classes.ioWrapper} ${classes.model}`}
329321
>
330-
Analysis
331-
</Typography>
332-
<div className={clsx(classes.ioItem, classes.modelContainer)}>
333-
<Model run={run} />
334-
</div>
335-
</Box>
336-
<Box
337-
display="flex"
338-
className={`${classes.ioWrapper} ${classes.output}`}
339-
>
340-
<Typography
341-
className={`${classes.verticalHeading} ${classes.outputHeading}`}
322+
<Typography
323+
className={`${classes.verticalHeading} ${classes.modelHeading}`}
324+
>
325+
Analysis
326+
</Typography>
327+
<div className={clsx(classes.ioItem, classes.modelContainer)}>
328+
<Model run={run} />
329+
</div>
330+
</Box>
331+
<Box
332+
display="flex"
333+
className={`${classes.ioWrapper} ${classes.output}`}
342334
>
343-
Output
344-
</Typography>
345-
<div className={clsx(classes.ioItem, classes.outputContainer)}>
346-
<Output run={run} />
347-
</div>
335+
<Typography
336+
className={`${classes.verticalHeading} ${classes.outputHeading}`}
337+
>
338+
Output
339+
</Typography>
340+
<div className={clsx(classes.ioItem, classes.outputContainer)}>
341+
<Output run={run} />
342+
</div>
343+
</Box>
348344
</Box>
349-
</Box>
345+
</Allotment.Pane>
350346

351-
<Box
352-
display="flex"
353-
flexDirection="column"
354-
className={clsx(classes.ioContainer, classes.rightPanel)}
355-
>
347+
<Allotment.Pane>
356348
<Box
357349
display="flex"
358-
className={`${classes.ioWrapper} ${classes.raxml}`}
350+
flexDirection="column"
351+
className={clsx(classes.ioContainer, classes.rightPanel)}
359352
>
360-
<Typography
361-
className={`${classes.verticalHeading} ${classes.raxmlHeading}`}
353+
<Box
354+
display="flex"
355+
className={`${classes.ioWrapper} ${classes.raxml}`}
362356
>
363-
RAxML
364-
</Typography>
365-
<div className={classes.ioItem}>
366-
<Raxml run={run} store={store} />
367-
</div>
368-
</Box>
369-
<Box
370-
display="flex"
371-
className={`${classes.ioWrapper} ${classes.console}`}
372-
>
373-
<Typography
374-
className={`${classes.verticalHeading} ${classes.consoleHeading}`}
357+
<Typography
358+
className={`${classes.verticalHeading} ${classes.raxmlHeading}`}
359+
>
360+
RAxML
361+
</Typography>
362+
<div className={classes.ioItem}>
363+
<Raxml run={run} store={store} />
364+
</div>
365+
</Box>
366+
<Box
367+
display="flex"
368+
className={`${classes.ioWrapper} ${classes.console}`}
375369
>
376-
Console
377-
{run.stdout === '' && run.stderr === '' ? null : (
378-
<DeleteIcon
379-
onClick={run.clearConsole}
380-
className={classes.deleteIcon}
381-
title="Clear console"
382-
/>
383-
)}
384-
</Typography>
385-
<div className={classes.ioItem}>
386-
<Console run={run} />
387-
</div>
370+
<Typography
371+
className={`${classes.verticalHeading} ${classes.consoleHeading}`}
372+
>
373+
Console
374+
{run.stdout === '' && run.stderr === '' ? null : (
375+
<DeleteIcon
376+
onClick={run.clearConsole}
377+
className={classes.deleteIcon}
378+
title="Clear console"
379+
/>
380+
)}
381+
</Typography>
382+
<div className={classes.ioItem}>
383+
<Console run={run} />
384+
</div>
385+
</Box>
388386
</Box>
389-
</Box>
390-
</SplitPane>
387+
</Allotment.Pane>
388+
</Allotment>
391389
<AppBar position="fixed" color="primary" className={classes.statusBar}>
392390
<Toolbar className={classes.statusToolbar}>
393391
<IconButton

‎yarn.lock‎

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2639,6 +2639,11 @@
26392639
"@jridgewell/resolve-uri" "^3.1.0"
26402640
"@jridgewell/sourcemap-codec" "^1.4.14"
26412641

2642+
"@juggle/resize-observer@^3.3.1":
2643+
version "3.4.0"
2644+
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
2645+
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
2646+
26422647
"@leichtgewicht/ip-codec@^2.0.1":
26432648
version "2.0.5"
26442649
resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
@@ -4086,6 +4091,18 @@ ajv@^8.0.0, ajv@^8.6.0, ajv@^8.6.3, ajv@^8.9.0:
40864091
json-schema-traverse "^1.0.0"
40874092
require-from-string "^2.0.2"
40884093

4094+
allotment@^1.20.4:
4095+
version "1.20.4"
4096+
resolved "https://registry.yarnpkg.com/allotment/-/allotment-1.20.4.tgz#91d81f31b461e1ad4c9d89b4cdc85d6b6c30ac0f"
4097+
integrity sha512-LMM5Xe5nLePFOLAlW/5k3ARqznYGUyNekV4xJrfDKn1jimW3nlZE6hT/Tu0T8s0VgAkr9s2P7+uM0WvJKn5DAw==
4098+
dependencies:
4099+
classnames "^2.3.0"
4100+
eventemitter3 "^5.0.0"
4101+
lodash.clamp "^4.0.0"
4102+
lodash.debounce "^4.0.0"
4103+
lodash.isequal "^4.5.0"
4104+
use-resize-observer "^9.0.0"
4105+
40894106
ansi-colors@^3.0.0:
40904107
version "3.2.4"
40914108
resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
@@ -5253,7 +5270,7 @@ class-utils@^0.3.5:
52535270
isobject "^3.0.0"
52545271
static-extend "^0.1.1"
52555272

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

7336+
eventemitter3@^5.0.0:
7337+
version "5.0.1"
7338+
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
7339+
integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
7340+
73197341
events@^3.2.0:
73207342
version "3.3.0"
73217343
resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -10377,7 +10399,12 @@ lodash-es@^4.17.21:
1037710399
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
1037810400
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
1037910401

10380-
lodash.debounce@^4.0.8:
10402+
lodash.clamp@^4.0.0:
10403+
version "4.0.3"
10404+
resolved "https://registry.yarnpkg.com/lodash.clamp/-/lodash.clamp-4.0.3.tgz#5c24bedeeeef0753560dc2b4cb4671f90a6ddfaa"
10405+
integrity sha512-HvzRFWjtcguTW7yd8NJBshuNaCa8aqNFtnswdT7f/cMd/1YKy5Zzoq4W/Oxvnx9l7aeY258uSdDfM793+eLsVg==
10406+
10407+
lodash.debounce@^4.0.0, lodash.debounce@^4.0.8:
1038110408
version "4.0.8"
1038210409
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
1038310410
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -12415,7 +12442,7 @@ prompts@^2.0.1, prompts@^2.4.2:
1241512442
kleur "^3.0.3"
1241612443
sisteransi "^1.0.5"
1241712444

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

12650-
react-lifecycles-compat@^3.0.4:
12651-
version "3.0.4"
12652-
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
12653-
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
12654-
1265512677
react-refresh@^0.11.0:
1265612678
version "0.11.0"
1265712679
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -12712,22 +12734,6 @@ react-scripts@^5.0.1:
1271212734
optionalDependencies:
1271312735
fsevents "^2.3.2"
1271412736

12715-
react-split-pane@^0.1.92:
12716-
version "0.1.92"
12717-
resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41"
12718-
integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==
12719-
dependencies:
12720-
prop-types "^15.7.2"
12721-
react-lifecycles-compat "^3.0.4"
12722-
react-style-proptype "^3.2.2"
12723-
12724-
react-style-proptype@^3.2.2:
12725-
version "3.2.2"
12726-
resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
12727-
integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
12728-
dependencies:
12729-
prop-types "^15.5.4"
12730-
1273112737
react-transition-group@^4.4.5:
1273212738
version "4.4.5"
1273312739
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -15062,6 +15068,13 @@ url@^0.11.0:
1506215068
punycode "^1.4.1"
1506315069
qs "^6.12.3"
1506415070

15071+
use-resize-observer@^9.0.0:
15072+
version "9.1.0"
15073+
resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
15074+
integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
15075+
dependencies:
15076+
"@juggle/resize-observer" "^3.3.1"
15077+
1506515078
use@^3.1.0:
1506615079
version "3.1.1"
1506715080
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

0 commit comments

Comments
 (0)