Skip to content

Commit

Permalink
update web UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@zorino
zorino committed Jan 7, 2020
1 parent 0e033fd commit 3a7d4ba
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 57 deletions.
2 changes: 0 additions & 2 deletions web/src/components/alignment.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React from 'react';
import Box from '@material-ui/core/Box';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';

class Alignment extends React.Component {

Expand Down
65 changes: 35 additions & 30 deletions web/src/components/header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,41 @@ import DescriptionIcon from '@material-ui/icons/Description';
import Grid from '@material-ui/core/Grid';
import Logo from '../images/kaamer_light.svg';

const Header = ({ siteTitle }) => (
<header
style={{
background: `#36454F`,
padding: `0.5em`,
}}
>
<Grid container>
<Grid item xs >
<a href="../docs/#/"
target="_blank"
style={{
color: `white`,
textDecoration: `none`,
}}
>
<DescriptionIcon style={{height: "100%"}} />
</a>

</Grid>
<Grid item xs={6} style={{"text-align": "center"}}>
<img src={Logo} alt={siteTitle} style={{width: "60px", "margin-bottom": "0px !important"}}/>
</Grid>
<Grid item xs>
</Grid>

</Grid>

</header>
);
const Header = ({ siteTitle }) => {

return (
<header
style={{
background: `#36454F`,
padding: `0.5em`,
}}
>
<Grid container>
<Grid item xs >
<a href="../docs/#/"
target="_blank"
style={{
color: `white`,
textDecoration: `none`,
}}
>
<DescriptionIcon style={{height: "100%"}} />
</a>

</Grid>
<Grid item xs={6} style={{"text-align": "center"}}>
<a href="/">
<img src={Logo} alt={siteTitle} style={{width: "60px", "margin-bottom": "0px !important"}}/>
</a>
</Grid>
<Grid item xs>
</Grid>

</Grid>

</header>
);
};

Header.propTypes = {
siteTitle: PropTypes.string,
Expand Down
26 changes: 14 additions & 12 deletions web/src/components/layout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,21 @@ const Layout = ({ children }) => {
`);

return (
<>
<Header siteTitle={data.site.siteMetadata.title} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0px 1.0875rem 1.45rem`,
paddingTop: 0,
}}
>
<>
<Header
siteTitle={data.site.siteMetadata.title}
/>
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0px 1.0875rem 1.45rem`,
paddingTop: 0,
}}
>
<main>{children}</main>
</div>
</>
</div>
</>
);

};
Expand Down
51 changes: 38 additions & 13 deletions web/src/components/search.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import SendIcon from '@material-ui/icons/Send';
// import InfoIcon from '@material-ui/icons/Info';
import SubjectIcon from '@material-ui/icons/Subject';
import Paper from '@material-ui/core/Paper';

Expand All @@ -26,9 +25,10 @@ import TableRow from '@material-ui/core/TableRow';
import Popover from '@material-ui/core/Popover';
import CircularProgress from '@material-ui/core/CircularProgress';

// import List from '@material-ui/core/List';

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import CloseIcon from '@material-ui/icons/Close';

import Alignment from './alignment';

Expand Down Expand Up @@ -85,7 +85,7 @@ class FastaForm extends React.Component {
this.state.domain = window.location.host;
}

fetchKaamerResults(){
fetchKaamerResults() {

this.setState({
showResult: false,
Expand All @@ -110,6 +110,7 @@ class FastaForm extends React.Component {
kaamerResults: res.data.results,
kaamerFeatures: res.data.dbProteinFeatures,
});
console.log(res);
});

}
Expand Down Expand Up @@ -237,15 +238,39 @@ class FastaForm extends React.Component {
}}
>

<Typography variant="h5" component="h5">
Query: {item.Query.Name} | Hit: {item.HitEntries[hit.Key].EntryId}
</Typography>

<Typography>
Sequence Alignment
</Typography>

<Alignment
<Box p={2}>
<Typography variant="h5" component="h5">
Query: {item.Query.Name} | Hit: {item.HitEntries[hit.Key].EntryId}
<span style={{float: "right"}}>
<Fab aria-label="close" size="small" onClick={(e) => this.handlePopoverClose(e)}>
<CloseIcon />
</Fab>
</span>
</Typography>
</Box>

<Box pl={2} pr={2} style={{"font-size": "6px !important"}}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell>Score</TableCell>
<TableCell>Expect</TableCell>
<TableCell>Identities</TableCell>
<TableCell>Positives</TableCell>
<TableCell>Gaps</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableCell>{hit.Alignment.BitScore.toFixed(2)}</TableCell>
<TableCell><Typography noWrap>{hit.Alignment.EValue.toPrecision(2)}</Typography></TableCell>
<TableCell>{hit.Alignment.Identity.toFixed(2)}%</TableCell>
<TableCell>{hit.Alignment.Similarity.toFixed(2)}%</TableCell>
<TableCell>{hit.Alignment.GapOpenings}</TableCell>
</TableBody>
</Table>
</Box>

<Alignment
seq_0={hit.Alignment.AlnString.split("\n")[0]}
seq_1={hit.Alignment.AlnString.split("\n")[1]}
seq_2={hit.Alignment.AlnString.split("\n")[2]}
Expand Down

0 comments on commit 3a7d4ba

Please sign in to comment.