From 85c8b5c4056b12b8711ea48afe86b15bb628a80f Mon Sep 17 00:00:00 2001 From: Johannes Klein <17345891+jtklein@users.noreply.github.com> Date: Tue, 15 Sep 2026 11:31:12 +0200 Subject: [PATCH 1/7] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9f497ac..85cd011 100644 --- a/package.json +++ b/package.json @@ -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", From e00f1bf3f502246e3972ca44572e48bd26ea8e89 Mon Sep 17 00:00:00 2001 From: Johannes Klein <17345891+jtklein@users.noreply.github.com> Date: Tue, 15 Sep 2026 11:31:15 +0200 Subject: [PATCH 2/7] Update yarn.lock --- yarn.lock | 36 ++++++++++++++---------------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/yarn.lock b/yarn.lock index b363cf8..255d02a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4592,10 +4592,10 @@ atomically@^1.7.0: resolved "https://registry.yarnpkg.com/atomically/-/atomically-1.7.0.tgz#c07a0458432ea6dbc9a3506fffa424b48bccaafe" integrity sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w== -attr-accept@^2.2.2: - version "2.2.5" - resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e" - integrity sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ== +attr-accept@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-4.0.0.tgz#e038002c875830b2b98774918abfd4bdeb7d9c97" + integrity sha512-hmCnJClmeKNKlsBHgbM8yLZRiQZ4/20UXbLJb6OUT16eWcM5/xNZerr80a/zCYob768KIGq++aLrQNTuwPsIOQ== autoprefixer@^10.4.12, autoprefixer@^10.4.13: version "10.4.20" @@ -7679,12 +7679,10 @@ file-loader@^6.0.0, file-loader@^6.2.0: loader-utils "^2.0.0" schema-utils "^3.0.0" -file-selector@^0.6.0: - version "0.6.0" - resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc" - integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw== - dependencies: - tslib "^2.4.0" +file-selector@^5.0.0: + version "5.0.1" + resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-5.0.1.tgz#9a8f7a944559efe4115bef40df885ac2092b0651" + integrity sha512-v0g/PTeuQgvKCBrVRsfVudvwXlRHSWHEQkVgKawgCGHkEpKA1clp3Om5jvEVhz8G9W/mOYjJH9FhkH4C888PgQ== file-type@^11.1.0: version "11.1.0" @@ -12572,14 +12570,13 @@ react-dom@^18.3.1: loose-envify "^1.1.0" scheduler "^0.23.2" -react-dropzone@14.2.10: - version "14.2.10" - resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.10.tgz#b8d86775c616534b44a30bd9c962044d2925c1a2" - integrity sha512-Y98LOCYxGO2jOFWREeKJlL7gbrHcOlTBp+9DCM1dh9XQ8+P/8ThhZT7kFb05C+bPcTXq/rixpU+5+LzwYrFLUw== +react-dropzone@20.1.2: + version "20.1.2" + resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-20.1.2.tgz#f05d27cb331800c8019f1faf3c2699e21d66806d" + integrity sha512-gj2m31ZmYOZjTuW6CDfx38/WW2JlbuQ/X2Il8cOwIWa7Znp7vQSPJFtRfDbAjusBuoXzAYktI+r2R6iKMaRTPw== dependencies: - attr-accept "^2.2.2" - file-selector "^0.6.0" - prop-types "^15.8.1" + attr-accept "^4.0.0" + file-selector "^5.0.0" react-error-overlay@^6.0.11: version "6.0.11" @@ -14641,11 +14638,6 @@ tslib@^2.0.3, tslib@^2.1.0, tslib@^2.5.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01" integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA== -tslib@^2.4.0: - version "2.8.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" - integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== - tsutils@^3.21.0: version "3.21.0" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623" From 8ecafa7dc86abe1b547397e9d5a9957d255f369e Mon Sep 17 00:00:00 2001 From: Johannes Klein <17345891+jtklein@users.noreply.github.com> Date: Tue, 15 Sep 2026 11:31:29 +0200 Subject: [PATCH 3/7] Update Input.js --- src/app/Input.js | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/app/Input.js b/src/app/Input.js index edc7e86..83bbb4c 100644 --- a/src/app/Input.js +++ b/src/app/Input.js @@ -43,8 +43,22 @@ const Input = ({ run }) => { run.addAlignments(droppedPathes); }} > - {({ getRootProps, getInputProps }) => ( -
+ {({ getRootProps, getInputProps, isDragActive }) => ( + + 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', + }} + > + {run.inputIsAlignment ? run.alignments.map((alignment) => ( @@ -90,7 +104,7 @@ const Input = ({ run }) => { ) : null} -
+ )} From dd605315296921cc032132f006d22ffdfcea698e Mon Sep 17 00:00:00 2001 From: Johannes Klein <17345891+jtklein@users.noreply.github.com> Date: Tue, 15 Sep 2026 12:04:08 +0200 Subject: [PATCH 4/7] Add some styling when drop is active, and change what are children --- src/app/Input.js | 63 ++++++++++++++++++++++++++++++------------------ 1 file changed, 40 insertions(+), 23 deletions(-) diff --git a/src/app/Input.js b/src/app/Input.js index 83bbb4c..42d4dcb 100644 --- a/src/app/Input.js +++ b/src/app/Input.js @@ -47,6 +47,8 @@ const Input = ({ run }) => { isDragActive @@ -71,36 +73,18 @@ const Input = ({ run }) => { {run.inputIsTree && run.hasAstralTree ? ( ) : null} - - - - {run.canLoadAstralTree ? ( + {run.canLoadAlignment && + !run.haveAlignments && + !run.canLoadPartitionFile ? ( - ) : null} - {run.canLoadAlignment && !run.canLoadPartitionFile ? ( - ) : null} @@ -108,6 +92,39 @@ const Input = ({ run }) => { )} + + + + {run.canLoadAstralTree ? ( + + ) : null} + {run.canLoadAlignment && + !run.canLoadPartitionFile && + run.haveAlignments ? ( + + ) : null} + {run.canLoadAlignment && run.canLoadPartitionFile ? ( Date: Tue, 15 Sep 2026 12:26:25 +0200 Subject: [PATCH 5/7] Add Dropzone s also around the other ADD ALIGNMENT buttons --- src/app/Input.js | 124 ++++++++++++++++++++++++++++------------------- 1 file changed, 73 insertions(+), 51 deletions(-) diff --git a/src/app/Input.js b/src/app/Input.js index 42d4dcb..975ebf7 100644 --- a/src/app/Input.js +++ b/src/app/Input.js @@ -18,6 +18,28 @@ 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 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 ( @@ -32,34 +54,9 @@ const Input = ({ run }) => { padding: '10px', }} > - { - const droppedPathes = acceptedFiles.map((file) => { - return { - path: webUtils.getPathForFile(file), - }; - }); - run.addAlignments(droppedPathes); - }} - > + {({ getRootProps, getInputProps, isDragActive }) => ( - - 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', - }} - > + {run.inputIsAlignment @@ -110,19 +107,28 @@ const Input = ({ run }) => { {run.canLoadAlignment && !run.canLoadPartitionFile && run.haveAlignments ? ( - + + {({ getRootProps, getInputProps, isDragActive }) => ( + + + + + )} + ) : null} {run.canLoadAlignment && run.canLoadPartitionFile ? ( @@ -132,17 +138,33 @@ const Input = ({ run }) => { alignItems="center" style={{ height: '200px' }} > - + + {({ getRootProps, getInputProps, isDragActive }) => ( + + + + + )} + OR + + {({ getRootProps, getInputProps, isDragActive }) => ( + + + + + )} + ) : null} diff --git a/src/app/store/Run.js b/src/app/store/Run.js index 43c0c87..a4099e2 100644 --- a/src/app/store/Run.js +++ b/src/app/store/Run.js @@ -2149,11 +2149,20 @@ Results saved to: ${this.outputDir} ipcRenderer.send(ipc.PARTITION_FILE_SELECT, this.id); }; + @action + addPartitionFiles = async (files) => { + if (!files.length) { + return; + } + const { path } = files[0]; + const content = await readFile(path, 'utf-8'); + this.partitionFile = path; + this.partitionFileContent = content; + }; + @action onPartitionSelected = async (event, { id, filePath }) => { if (id === this.id) { - const content = await readFile(filePath, 'utf-8'); - this.partitionFile = filePath; - this.partitionFileContent = content; + await this.addPartitionFiles([{ path: filePath }]); } }; From acfce6212df99a3570815e986af4339ec40d7d95 Mon Sep 17 00:00:00 2001 From: Johannes Klein <17345891+jtklein@users.noreply.github.com> Date: Tue, 15 Sep 2026 14:03:43 +0200 Subject: [PATCH 7/7] Add Dropzones around all tree input buttons --- src/app/Input.js | 148 +++++++++++++++++++++++++++++++------------ src/app/store/Run.js | 35 ++++++---- 2 files changed, 130 insertions(+), 53 deletions(-) diff --git a/src/app/Input.js b/src/app/Input.js index 6085408..bea578e 100644 --- a/src/app/Input.js +++ b/src/app/Input.js @@ -33,6 +33,22 @@ const Input = ({ run }) => { 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', @@ -100,16 +116,29 @@ const Input = ({ run }) => { {run.canLoadAstralTree ? ( - + + {({ getRootProps, getInputProps, isDragActive }) => ( + + + + + )} + ) : null} {run.canLoadAlignment && !run.canLoadPartitionFile && @@ -226,16 +255,29 @@ const Input = ({ run }) => { }} /> ) : ( - + + {({ getRootProps, getInputProps, isDragActive }) => ( + + + + + )} + )} @@ -259,16 +301,29 @@ const Input = ({ run }) => { }} /> ) : ( - + + {({ getRootProps, getInputProps, isDragActive }) => ( + + + + + )} + )} @@ -292,16 +347,29 @@ const Input = ({ run }) => { }} /> ) : ( - + + {({ getRootProps, getInputProps, isDragActive }) => ( + + + + + )} + )} diff --git a/src/app/store/Run.js b/src/app/store/Run.js index a4099e2..a1007b2 100644 --- a/src/app/store/Run.js +++ b/src/app/store/Run.js @@ -2166,6 +2166,27 @@ Results saved to: ${this.outputDir} } }; + @action + addTreeFiles = (type, files) => { + if (!files.length) { + return; + } + const { path } = files[0]; + switch (type) { + case 'tree': + this.tree.setFilePath(path); + break; + case 'backboneConstraint': + this.backboneConstraint.setFilePath(path); + break; + case 'multifurcatingConstraint': + this.multifurcatingConstraint.setFilePath(path); + break; + default: + break; + } + }; + @action removePartitionFile = () => { this.partitionFile = ''; this.partitionFileContent = ''; @@ -2223,19 +2244,7 @@ Results saved to: ${this.outputDir} @action onTreeSelected = (event, { id, type, filePath }) => { if (id === this.id) { - switch (type) { - case 'tree': - this.tree.setFilePath(filePath); - break; - case 'backboneConstraint': - this.backboneConstraint.setFilePath(filePath); - break; - case 'multifurcatingConstraint': - this.multifurcatingConstraint.setFilePath(filePath); - break; - default: - break; - } + this.addTreeFiles(type, [{ path: filePath }]); } };