v2.0.0-beta.1

commit 3b17045
Merge: 8315f4a 5fed4a4
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Mon Sep 30 03:33:10 2019 +0200

    Merge branch 'master' into develop

commit 8315f4a
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Mon Sep 30 03:25:05 2019 +0200

    fix: don't add x scroll outside if multi input

    fixes #12

commit 1ceea7f
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Mon Sep 30 03:03:36 2019 +0200

    fix: enable run ancestral states analysis

    fixes #13

commit 2b41fdc
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Mon Sep 30 02:45:34 2019 +0200

    improvement: rename model to analysis and fix typo

commit a5f99a5
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Mon Sep 30 02:19:38 2019 +0200

    fix: move subst. model from alignment to analysis

    Keep AA Matrix name but also move multistate model.

    fixes #45 and fixes #44

commit 0c40d98
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Sun Sep 29 22:54:26 2019 +0200

    fix: open concatenated alignment

    Write file before run only on open event.
    Also let the user open the partition file.

    fixes #8

commit 774ec0b
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Sun Sep 29 21:33:45 2019 +0200

    fix: specify correction type for ASC prefix

    fixes #14

commit 9736000
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Sun Sep 29 20:00:01 2019 +0200

    fix: don't show error message on cancel raxml

    fixes #11

commit e6f5c7f
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Sun Sep 29 18:08:32 2019 +0200

    feat: spinning indicator while running

    fixes #27

commit 14ddc2b
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Sun Sep 29 17:14:37 2019 +0200

    fix: add missing outgroup option in one analysis

    fixes #42

commit 2cf0a37
Author: Daniel Edler <edler.dev@gmail.com>
Date:   Sun Sep 29 17:01:23 2019 +0200

    style: increase font size in console.

    Fixes #41

src/app/AlignmentCard.js

@@ -152,23 +152,27 @@ function AlignmentCard({ className, alignment }) {
   //   <span>{ alignment.typecheckingComplete ? 'Checking...' : 'Pending...' }</span>
   // );
 
+  const individualSubstitutionModel = false;
+
   const Content = alignment.showPartition ? (
     <Partition alignment={alignment} />
   ) : (
     <div className={classes.content}>
       <div>
-        <FormControl>
-          <Select value={alignment.model} onChange={alignment.onChangeModel}>
-            {
-              (alignment.modelOptions || []).map(model => (
-                <MenuItem key={model} value={model}>
-                  { model }
-                </MenuItem>
-              ))
-            }
-          </Select>
-          <FormHelperText>Substitution model</FormHelperText>
-        </FormControl>
+        { individualSubstitutionModel ? (
+          <FormControl>
+            <Select value={alignment.model} onChange={alignment.onChangeModel}>
+              {
+                (alignment.modelOptions || []).map(model => (
+                  <MenuItem key={model} value={model}>
+                    { model }
+                  </MenuItem>
+                ))
+              }
+            </Select>
+            <FormHelperText>Substitution model</FormHelperText>
+          </FormControl>
+        ) : null }
         { alignment.modelExtra ? (
           <FormControl>
           <Select value={alignment.modelExtra.value} onChange={alignment.modelExtra.onChange}>
@@ -279,6 +283,7 @@ function FinalAlignmentCard({ className, alignment }) {
 
             <Menu id="alignment-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
               <MenuItem onClick={closeMenuAndRun(alignment.openFile)}>Open aligment</MenuItem>
+              <MenuItem onClick={closeMenuAndRun(alignment.openPartition)}>Open partition</MenuItem>
               <MenuItem onClick={closeMenuAndRun(alignment.openFolder)}>Open folder</MenuItem>
             </Menu>
           </div>

src/app/App.js

@@ -59,6 +59,7 @@ const useStyles = makeStyles(theme => ({
   ioItem: {
     width: '100%',
     height: '100%',
+    overflowX: 'hidden',
   },
   model: {
   },
@@ -158,7 +159,7 @@ const App = () => {
               <Typography
                 className={`${classes.verticalHeading} ${classes.modelHeading}`}
               >
-                Model
+                Analysis
               </Typography>
               <div className={classes.ioItem}>
                 <Model run={run} />
@@ -228,8 +229,8 @@ const App = () => {
           >
             <SnackbarMessage
               onClose={run.clearFinished}
-              variant="success"
-              message="RAxML finished!"
+              variant={run.exitCode === 0 ? "success" : "info"}
+              message={run.exitCode === 0 ? "RAxML finished!" : `RAxML cancelled!`}
             />
           </Snackbar>
           <ErrorDialog error={run.error} onClose={run.clearError} />

src/app/Console.js

@@ -20,7 +20,7 @@ const styles = theme => ({
   code: {
     color: 'white',
     fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
-    fontSize: '10px',
+    fontSize: '12px',
     height: '100%',
     overflowWrap: 'break-word',
     whiteSpace: 'pre-wrap',

src/app/Input.js

@@ -27,14 +27,15 @@ const useStyles = makeStyles(theme => ({
     flexWrap: 'nowrap',
     overflowX: 'scroll',
     // borderLeft: `5px solid ${theme.palette.secondary.main}`,
-    // paddingLeft: 10,
+    padding: '10px',
   },
   alignments: {
     display: 'flex',
   },
   addAlignment: {
     width: '200px',
     height: '200px',
+    marginRight: '10px',
   },
   treeCard: {
     width: '350px',

src/app/Model.js

@@ -9,9 +9,8 @@ import OptionCheck from './components/OptionCheck';
 const useStyles = makeStyles(theme => ({
   Model: {
     padding: '10px',
-    // flexGrow: 1,
-    // height: '100%',
-    // maxWidth: '800px',
+    display: 'flex',
+    flexDirection: 'column',
   },
   form: {
     '& > *': {
@@ -36,6 +35,10 @@ const Model = ({ run }) => {
         <OptionSelect option={run.startingTree} />
         <OptionSelect option={run.outGroup} />
       </Box>
+      <Box component="form" mt={1} mb={2} display="flex" alignItems="center" className={classes.form} noValidate autoComplete="off">
+        <OptionSelect option={run.substitutionModel} />
+        <OptionSelect option={run.multistateModel} />
+      </Box>
 
     </div>
   );

src/app/Raxml.js

@@ -5,6 +5,7 @@ import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 import OptionSelect from './components/OptionSelect';
 import Box from '@material-ui/core/Box';
+import LoadingButton from './components/LoadingButton';
 
 const styles = theme => ({
   Raxml: {
@@ -49,15 +50,16 @@ class Raxml extends React.Component {
               Cancel
             </Button>
           ) : null}
-          <Button
+          <LoadingButton
+            loading={run.running}
             size="small"
             variant="contained"
             color="default"
             disabled={run.startDisabled}
             onClick={run.start}
           >
             Run
-          </Button>
+          </LoadingButton>
         </Box>
       </div>
     );

src/app/TreeCard.js

@@ -15,15 +15,7 @@ import CardContent from '@material-ui/core/CardContent';
 
 const useStyles = makeStyles(theme => ({
   TreeCard: {
-    padding: '10px',
-    display: 'flex',
-    alignItems: 'center',
-    marginBottom: '10px',
-    backgroundColor: '#393939',
-    border: `1px solid #999`
-  },
-  card: {
-    // width: '350px',
+    border: `1px solid #999`,
   },
   heading: {
     display: 'flex',
@@ -38,6 +30,7 @@ const useStyles = makeStyles(theme => ({
   },
   chip: {
     height: '30px',
+    backgroundColor: theme.palette.input.main,
   },
   link: {
     cursor: 'pointer',
@@ -101,10 +94,10 @@ function TreeCard({ className, tree }) {
   }
 
   return (
-    <Card className={classNames(className, classes.card)} raised>
+    <Card className={classNames(className, classes.TreeCard)} raised>
       <CardHeader
         avatar={
-          <Chip className={classes.chip} label=".tree" color="secondary" />
+          <Chip classes={{ colorSecondary: classes.chip }} label="tree" color="secondary" />
         }
         action={
           <div>

src/app/components/LoadingButton.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles(theme => ({
+  wrapper: {
+    position: 'relative',
+  },
+  progress: {
+    // color: green[500],
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    marginTop: -12,
+    marginLeft: -12,
+  },
+}));
+
+function LoadingButton(props) {
+  const classes = useStyles();
+  const { loading, className, buttonClassName, progressProps = {}, ...buttonProps } = props;
+
+  return (
+    <div className={clsx(classes.wrapper, className)}>
+      <Button
+        disabled={loading || buttonProps.disabled}
+        {...buttonProps}
+      >
+        { props.children }
+      </Button>
+      {loading && (
+        <CircularProgress size={24} className={classes.progress} {...progressProps} />
+      )}
+    </div>
+  );
+}
+
+LoadingButton.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  loading: PropTypes.bool,
+  buttonClassName: PropTypes.string,
+  progressProps: PropTypes.object
+};
+
+// LoadingButton.defaultProps = {
+//   buttonProps: {},
+//   progressProps: {},
+// }
+
+export default LoadingButton;

src/app/components/OptionSelect.js

@@ -13,7 +13,7 @@ const OptionSelect = observer(({ option, className }) => {
   }
   return (
     <FormControl className={className} title={option.hoverInfo}>
-      <InputLabel htmlFor={option.title}>{option.title}</InputLabel>
+      <InputLabel style={{ whiteSpace: 'nowrap' }} htmlFor={option.title}>{option.title}</InputLabel>
       <Select
         value={option.value}
         onChange={e => option.setValue(e.target.value) }

src/app/components/SnackbarMessage.js

@@ -21,14 +21,14 @@ const variantIcon = {
 
 const useStyles = makeStyles(theme => ({
   success: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.output.main,
   },
   error: {
     // backgroundColor: theme.palette.error.main,
     backgroundColor: '#f2401b',
   },
   info: {
-    backgroundColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.input.main,
   },
   warning: {
     backgroundColor: amber[700],