From 3a7d4ba6ac5f72f65afe00cd5cf22e2fab898577 Mon Sep 17 00:00:00 2001
From: Maxime Deraspe <maximilien1er@gmail.com>
Date: Tue, 7 Jan 2020 11:44:45 -0500
Subject: [PATCH] update web UI

---
 web/src/components/alignment.jsx |  2 -
 web/src/components/header.jsx    | 65 +++++++++++++++++---------------
 web/src/components/layout.jsx    | 26 +++++++------
 web/src/components/search.jsx    | 51 ++++++++++++++++++-------
 4 files changed, 87 insertions(+), 57 deletions(-)

diff --git a/web/src/components/alignment.jsx b/web/src/components/alignment.jsx
index 0388dee..cb45433 100644
--- a/web/src/components/alignment.jsx
+++ b/web/src/components/alignment.jsx
@@ -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 {
 
diff --git a/web/src/components/header.jsx b/web/src/components/header.jsx
index 24f911a..e0a5b92 100644
--- a/web/src/components/header.jsx
+++ b/web/src/components/header.jsx
@@ -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,
diff --git a/web/src/components/layout.jsx b/web/src/components/layout.jsx
index 13ddc73..1094792 100644
--- a/web/src/components/layout.jsx
+++ b/web/src/components/layout.jsx
@@ -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>
+        </>
     );
 
 };
diff --git a/web/src/components/search.jsx b/web/src/components/search.jsx
index 815c15c..ccb9365 100644
--- a/web/src/components/search.jsx
+++ b/web/src/components/search.jsx
@@ -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';
 
@@ -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';
 
@@ -85,7 +85,7 @@ class FastaForm extends React.Component {
         this.state.domain = window.location.host;
     }
 
-    fetchKaamerResults(){
+    fetchKaamerResults() {
 
         this.setState({
             showResult: false,
@@ -110,6 +110,7 @@ class FastaForm extends React.Component {
                     kaamerResults: res.data.results,
                     kaamerFeatures: res.data.dbProteinFeatures,
                 });
+                console.log(res);
             });
 
     }
@@ -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]}