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/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/Console.js b/src/app/Console.js
index 15ae338..046558a 100644
--- a/src/app/Console.js
+++ b/src/app/Console.js
@@ -1,93 +1,78 @@
-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 = ({ run }) => {
+ const stdoutContainerRef = useRef(null);
- onMountStdoutContainer = el => {
- this.stdoutContainer = el;
- };
-
- componentDidUpdate() {
- if (this.keepToBottom) {
- this.scrollConsoleToBottom();
- }
- }
-
- isAtBottom = () => {
- const { scrollTop, scrollHeight, clientHeight } = this.stdoutContainer;
+ const scrollConsoleToBottom = useCallback(() => {
+ if (!stdoutContainerRef.current) return;
+ const { scrollHeight, clientHeight } = stdoutContainerRef.current;
const diff = scrollHeight - clientHeight;
- const scrollIsAtBottom = scrollTop === diff;
- return scrollIsAtBottom;
- };
+ stdoutContainerRef.current.scrollTop = diff;
+ }, []);
- scrollConsoleToBottom = () => {
- const { scrollHeight, clientHeight } = this.stdoutContainer;
- const diff = scrollHeight - clientHeight;
- this.stdoutContainer.scrollTop = diff;
- };
+ // Every time the component updates, scroll to the bottom
+ useEffect(() => {
+ scrollConsoleToBottom();
+ });
- render() {
- 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',
- }}
- >
-
- {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 && (
- 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 (
+ theme.palette.console.contrastText,
+ background: (theme) => theme.palette.console.background,
+ padding: '10px',
+ width: '100%',
+ height: '100%',
+ overflowY: 'auto',
+ position: 'relative',
+ }}
+ >
+
+ {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 && (
+ 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}
+
+ )}
+
+
+ );
+};
Console.propTypes = {
run: PropTypes.object.isRequired
};
-export default Console;
+export default observer(Console);
diff --git a/src/app/Input.js b/src/app/Input.js
index cfc71c2..3be0fef 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';
@@ -256,9 +256,6 @@ const Input = ({ run }) => {
);
};
-//
-// { run.ok ? null : run.missing }
-//
Input.propTypes = {
run: PropTypes.object.isRequired,
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/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);
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';
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"