From 6ab7952d21d1b991c8b2d0fdd265beaea54a056f Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Thu, 24 Jul 2025 23:32:52 +0200 Subject: [PATCH 01/16] Exchange import --- src/app/AlignmentCard.js | 2 +- src/app/App.js | 2 +- src/app/AstralTreeCard.js | 2 +- src/app/CitationModal.js | 2 +- src/app/Input.js | 2 +- src/app/Model.js | 2 +- src/app/Output.js | 2 +- src/app/PartitionEditor.js | 2 +- src/app/PartitionFileCard.js | 2 +- src/app/TreeCard.js | 2 +- src/app/components/OptionCheck.js | 2 +- src/app/components/OptionSelect.js | 2 +- src/app/components/OptionTextField.js | 2 +- src/app/index.js | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/app/AlignmentCard.js b/src/app/AlignmentCard.js index 6e6b97c..f120a19 100644 --- a/src/app/AlignmentCard.js +++ b/src/app/AlignmentCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import IconButton from '@mui/material/IconButton'; import MoreVertIcon from '@mui/icons-material/MoreVert'; diff --git a/src/app/App.js b/src/app/App.js index 3bb69cf..7333ce4 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import { Allotment } from 'allotment'; import 'allotment/dist/style.css'; import { styled } from '@mui/material/styles'; diff --git a/src/app/AstralTreeCard.js b/src/app/AstralTreeCard.js index 95af325..e5948af 100644 --- a/src/app/AstralTreeCard.js +++ b/src/app/AstralTreeCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import IconButton from '@mui/material/IconButton'; import MoreVertIcon from '@mui/icons-material/MoreVert'; diff --git a/src/app/CitationModal.js b/src/app/CitationModal.js index 8dd56a6..26dba36 100644 --- a/src/app/CitationModal.js +++ b/src/app/CitationModal.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import Card from '@mui/material/Card'; diff --git a/src/app/Input.js b/src/app/Input.js index cfc71c2..96c0d35 100644 --- a/src/app/Input.js +++ b/src/app/Input.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import AlignmentCard, { FinalAlignmentCard } from './AlignmentCard'; diff --git a/src/app/Model.js b/src/app/Model.js index a88cdee..eb45d1f 100644 --- a/src/app/Model.js +++ b/src/app/Model.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import OptionSelect from './components/OptionSelect'; diff --git a/src/app/Output.js b/src/app/Output.js index a77f0c3..f872ff6 100644 --- a/src/app/Output.js +++ b/src/app/Output.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; diff --git a/src/app/PartitionEditor.js b/src/app/PartitionEditor.js index f717343..52b7cbc 100644 --- a/src/app/PartitionEditor.js +++ b/src/app/PartitionEditor.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField'; diff --git a/src/app/PartitionFileCard.js b/src/app/PartitionFileCard.js index a9fc114..32b83d3 100644 --- a/src/app/PartitionFileCard.js +++ b/src/app/PartitionFileCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; import Chip from '@mui/material/Chip'; diff --git a/src/app/TreeCard.js b/src/app/TreeCard.js index 2fedc38..b1d3c7c 100644 --- a/src/app/TreeCard.js +++ b/src/app/TreeCard.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import IconButton from '@mui/material/IconButton'; import MoreVertIcon from '@mui/icons-material/MoreVert'; diff --git a/src/app/components/OptionCheck.js b/src/app/components/OptionCheck.js index 3e604e4..9989a48 100644 --- a/src/app/components/OptionCheck.js +++ b/src/app/components/OptionCheck.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; diff --git a/src/app/components/OptionSelect.js b/src/app/components/OptionSelect.js index 4a30c9a..24c964b 100644 --- a/src/app/components/OptionSelect.js +++ b/src/app/components/OptionSelect.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import FormControl from '@mui/material/FormControl'; import FormHelperText from '@mui/material/FormHelperText'; diff --git a/src/app/components/OptionTextField.js b/src/app/components/OptionTextField.js index 6b9d6c1..1875079 100644 --- a/src/app/components/OptionTextField.js +++ b/src/app/components/OptionTextField.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import TextField from '@mui/material/TextField'; diff --git a/src/app/index.js b/src/app/index.js index 0accd91..db7f4d8 100644 --- a/src/app/index.js +++ b/src/app/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles'; import * as Sentry from '@sentry/electron/renderer'; From 7b2e3567330b1ec490a548149134f5c96b49b941 Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Thu, 24 Jul 2025 23:43:17 +0200 Subject: [PATCH 02/16] Update Input.js --- src/app/Input.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/app/Input.js b/src/app/Input.js index 96c0d35..3be0fef 100644 --- a/src/app/Input.js +++ b/src/app/Input.js @@ -256,9 +256,6 @@ const Input = ({ run }) => { ); }; -// -// { run.ok ? null : run.missing } -// Input.propTypes = { run: PropTypes.object.isRequired, From 627313392e3a05795bdd37a123301a6c3d7f0fbb Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Thu, 24 Jul 2025 23:50:55 +0200 Subject: [PATCH 03/16] Update Raxml.js --- src/app/Raxml.js | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/src/app/Raxml.js b/src/app/Raxml.js index 41475ad..0f7a2c3 100644 --- a/src/app/Raxml.js +++ b/src/app/Raxml.js @@ -1,6 +1,6 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { clipboard } from 'electron'; -import { observer } from 'mobx-react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Button from '@mui/material/Button'; import OptionSelect from './components/OptionSelect'; @@ -11,16 +11,11 @@ import IconButton from '@mui/material/IconButton'; import FileCopyIcon from '@mui/icons-material/FileCopy'; import { FormHelperText } from '@mui/material'; -@observer -class Raxml extends React.Component { - copyCommand = () => { - const { run, store } = this.props; +const Raxml = ({ run, store }) => { + const copyCommand = useCallback(() => { clipboard.writeText(run.command); store.setAppSnack(); - }; - - render() { - const { run } = this.props; + }, [run.command, store]); return ( @@ -87,11 +82,11 @@ class Raxml extends React.Component { ); - } -} +}; Raxml.propTypes = { run: PropTypes.object.isRequired, + store: PropTypes.object.isRequired, }; -export default Raxml; +export default observer(Raxml); From 6fb9f2ec9ba0037f88dcdbb0a7bce8eb8f17ab28 Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:47:58 +0200 Subject: [PATCH 04/16] Update Console.js --- src/app/Console.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 15ae338..1acf42e 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -1,15 +1,11 @@ -import React from 'react'; -import { observer } from 'mobx-react'; +import React, { useRef, useEffect, useCallback } from 'react'; +import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; -@observer -class Console extends React.Component { - keepToBottom = true; +const Console = observer(({ run }) => { + const stdoutContainerRef = useRef(null); - onMountStdoutContainer = el => { - this.stdoutContainer = el; - }; componentDidUpdate() { if (this.keepToBottom) { @@ -30,7 +26,6 @@ class Console extends React.Component { this.stdoutContainer.scrollTop = diff; }; - render() { const { run } = this.props; return ( - ); - } -} + return ( + ); +}); Console.propTypes = { run: PropTypes.object.isRequired From cc3b5dd3769eb6f9e2a88a38cab4eaa7e316f79c Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:48:28 +0200 Subject: [PATCH 05/16] Update Console.js --- src/app/Console.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 1acf42e..57ad183 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -58,26 +58,26 @@ const Console = observer(({ run }) => { {run.stdout} )} - {run.stderr && ( - theme.palette.console.contrastText, - fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', - fontSize: '12px', - height: '100%', - position: 'absolute', - width: '100%', - whiteSpace: 'pre-wrap', - wordBreak: 'break-all', - }} - > - {run.stderr} - - )} return ( + {run.stderr && ( + theme.palette.console.contrastText, + fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', + fontSize: '12px', + height: '100%', + position: 'absolute', + width: '100%', + whiteSpace: 'pre-wrap', + wordBreak: 'break-all', + }} + > + {run.stderr} + + )} ); }); From c3c41a2990394f70d7d4119102b236e19af438fd Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:48:41 +0200 Subject: [PATCH 06/16] Update Console.js --- src/app/Console.js | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 57ad183..21adc61 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -41,26 +41,26 @@ const Console = observer(({ run }) => { }} >
- {run.stdout && ( - theme.palette.console.contrastText, - fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', - fontSize: '12px', - height: '100%', - position: 'absolute', - width: '100%', - whiteSpace: 'pre-wrap', - wordBreak: 'break-all', - }} - > - {run.stdout} - - )}
return ( + {run.stdout && ( + theme.palette.console.contrastText, + fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace', + fontSize: '12px', + height: '100%', + position: 'absolute', + width: '100%', + whiteSpace: 'pre-wrap', + wordBreak: 'break-all', + }} + > + {run.stdout} + + )} {run.stderr && ( Date: Fri, 25 Jul 2025 10:48:49 +0200 Subject: [PATCH 07/16] Update Console.js --- src/app/Console.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 21adc61..708bdba 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -40,10 +40,9 @@ const Console = observer(({ run }) => { position: 'relative', }} > -
-
return ( +
{run.stdout && ( { {run.stderr} )} +
); }); From f9da3bca712c3cfcc4efed5ebf3cec477d66ad32 Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:49:03 +0200 Subject: [PATCH 08/16] Update Console.js --- src/app/Console.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 708bdba..01d1e28 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -28,20 +28,19 @@ const Console = observer(({ run }) => { const { run } = this.props; return ( - theme.palette.console.contrastText, - background: (theme) => theme.palette.console.background, - padding: '10px', - width: '100%', - height: '100%', - overflowY: 'auto', - position: 'relative', - }} - > - return ( + theme.palette.console.contrastText, + background: (theme) => theme.palette.console.background, + padding: '10px', + width: '100%', + height: '100%', + overflowY: 'auto', + position: 'relative', + }} + >
{run.stdout && ( { )}
+ ); }); From d18ffc3a4e7fe5c8fe3cd39302f9d0ff94e38eeb Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:49:06 +0200 Subject: [PATCH 09/16] Update Console.js --- src/app/Console.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 01d1e28..1a29b8b 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -26,8 +26,6 @@ const Console = observer(({ run }) => { this.stdoutContainer.scrollTop = diff; }; - const { run } = this.props; - return ( return ( Date: Fri, 25 Jul 2025 10:49:31 +0200 Subject: [PATCH 10/16] Update Console.js --- src/app/Console.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 1a29b8b..1e97d14 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -20,11 +20,12 @@ const Console = observer(({ run }) => { return scrollIsAtBottom; }; - scrollConsoleToBottom = () => { - const { scrollHeight, clientHeight } = this.stdoutContainer; + const scrollConsoleToBottom = useCallback(() => { + if (!stdoutContainerRef.current) return; + const { scrollHeight, clientHeight } = stdoutContainerRef.current; const diff = scrollHeight - clientHeight; - this.stdoutContainer.scrollTop = diff; - }; + stdoutContainerRef.current.scrollTop = diff; + }, []); return ( Date: Fri, 25 Jul 2025 10:49:34 +0200 Subject: [PATCH 11/16] Update Console.js --- src/app/Console.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 1e97d14..d920ef6 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -13,13 +13,6 @@ const Console = observer(({ run }) => { } } - isAtBottom = () => { - const { scrollTop, scrollHeight, clientHeight } = this.stdoutContainer; - const diff = scrollHeight - clientHeight; - const scrollIsAtBottom = scrollTop === diff; - return scrollIsAtBottom; - }; - const scrollConsoleToBottom = useCallback(() => { if (!stdoutContainerRef.current) return; const { scrollHeight, clientHeight } = stdoutContainerRef.current; From 3b5fff193838dd9f5042bbcb4ddeba90c26dacfb Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:50:03 +0200 Subject: [PATCH 12/16] Update Console.js --- src/app/Console.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index d920ef6..054d3df 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -6,13 +6,6 @@ import Box from '@mui/material/Box'; const Console = observer(({ run }) => { const stdoutContainerRef = useRef(null); - - componentDidUpdate() { - if (this.keepToBottom) { - this.scrollConsoleToBottom(); - } - } - const scrollConsoleToBottom = useCallback(() => { if (!stdoutContainerRef.current) return; const { scrollHeight, clientHeight } = stdoutContainerRef.current; @@ -20,6 +13,9 @@ const Console = observer(({ run }) => { stdoutContainerRef.current.scrollTop = diff; }, []); + useEffect(() => { + scrollConsoleToBottom(); + }); // No dependency array = runs after every render (like componentDidUpdate) return ( Date: Fri, 25 Jul 2025 10:50:16 +0200 Subject: [PATCH 13/16] Update Console.js --- src/app/Console.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/Console.js b/src/app/Console.js index 054d3df..459bc7e 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -15,7 +15,8 @@ const Console = observer(({ run }) => { useEffect(() => { scrollConsoleToBottom(); - }); // No dependency array = runs after every render (like componentDidUpdate) + }); + return ( Date: Fri, 25 Jul 2025 10:52:30 +0200 Subject: [PATCH 14/16] Update Console.js --- src/app/Console.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/Console.js b/src/app/Console.js index 459bc7e..58a2a9c 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; -const Console = observer(({ run }) => { +const Console = ({ run }) => { const stdoutContainerRef = useRef(null); const scrollConsoleToBottom = useCallback(() => { @@ -68,10 +68,10 @@ const Console = observer(({ run }) => { ); -}); +}; Console.propTypes = { run: PropTypes.object.isRequired }; -export default Console; +export default observer(Console); From eea447c85560d555a2a29224ca1430d5ffe28fdf Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:53:36 +0200 Subject: [PATCH 15/16] Update Console.js --- src/app/Console.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/Console.js b/src/app/Console.js index 58a2a9c..046558a 100644 --- a/src/app/Console.js +++ b/src/app/Console.js @@ -13,6 +13,7 @@ const Console = ({ run }) => { stdoutContainerRef.current.scrollTop = diff; }, []); + // Every time the component updates, scroll to the bottom useEffect(() => { scrollConsoleToBottom(); }); From fa183a5403a1c0b90608eb2a4cbda2e5e6e8645f Mon Sep 17 00:00:00 2001 From: Johannes Klein Date: Fri, 25 Jul 2025 10:58:36 +0200 Subject: [PATCH 16/16] Remove mobx-react --- package.json | 1 - yarn.lock | 9 +-------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/package.json b/package.json index f6ed8df..66a48a4 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,6 @@ "filenamify": "^4.3.0", "lodash": "^4.17.21", "mobx": "^5.15.7", - "mobx-react": "^6.3.1", "mobx-react-lite": "^2.2.2", "mobx-utils": "^5.6.2", "parse-filepath": "^1.0.2", diff --git a/yarn.lock b/yarn.lock index dcde2b2..3961aab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10700,18 +10700,11 @@ mkdirp@^1.0.3: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== -mobx-react-lite@^2.2.0, mobx-react-lite@^2.2.2: +mobx-react-lite@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-2.2.2.tgz#87c217dc72b4e47b22493daf155daf3759f868a6" integrity sha512-2SlXALHIkyUPDsV4VTKVR9DW7K3Ksh1aaIv3NrNJygTbhXe2A9GrcKHZ2ovIiOp/BXilOcTYemfHHZubP431dg== -mobx-react@^6.3.1: - version "6.3.1" - resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-6.3.1.tgz#204f9756e42e19d91cb6598837063b7e7de87c52" - integrity sha512-IOxdJGnRSNSJrL2uGpWO5w9JH5q5HoxEqwOF4gye1gmZYdjoYkkMzSGMDnRCUpN/BNzZcFoMdHXrjvkwO7KgaQ== - dependencies: - mobx-react-lite "^2.2.0" - mobx-utils@^5.6.2: version "5.6.2" resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-5.6.2.tgz#4858acbdb03f0470e260854f87e8c2ba916ebaec"