Merge pull request #29 from singnet/master

Pull from master
singnet · Sep 23, 2019 · 2859dfe · 2859dfe
2 parents 1b966a1 + fd0de4f
commit 2859dfe
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
@@ -29,7 +29,7 @@ const GeneGoOptions = [
   { label: "Molecular Function", value: "molecular_function" },
 ];
 
-const Pathways = [{ label: "SMPDB", value: "smpdb" }, { label: "Reactome", value: "reactome" }];
+const Pathways = [{ label: "Reactome", value: "reactome" }];
 
 const GeneInputMethods = { Manual: 0, Import: 1 };
 
@@ -137,13 +137,14 @@ const AnnotationForm = props => {
         } else if (sa === "biogrid-interaction-annotation") {
           const int = new Filter();
           int.setFilter("interaction");
-          int.setValue(annotations.includes("gene-pathway-annotation") && includeProtiens ? "Proteins" : "Genes");
+          int.setValue(includeProtiens ? "Proteins" : "Genes");
           annotation.setFiltersList([int, ...(annotations.includes("gene-go-annotation") ? [namespace, nop] : [])]);
         }
         return annotation;
       })
     );
 
+
     const requestProps = {
       request: annotationRequest,
       onEnd: ({ status, statusMessage, message: msg }) => {
@@ -184,11 +185,11 @@ const AnnotationForm = props => {
       },
     };
 
-    this.props.serviceClient.unary(Annotate.Annotate, requestProps);
+    props.serviceClient.unary(Annotate.Annotate, requestProps);
   };
 
   return (
-    <div className="container form-wrapper" style={{ padding: "30px 450px" }}>
+    <div className="container form-wrapper">
       {/* Gene List */}
       <Typography variant="h6" gutterBottom>
         Input Genes

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import ReactDOM from "react-dom";
 import { SnackbarProvider } from "notistack";
 import AnnotationForm from "./form";
 import AnnotationResult from "./result";
@@ -10,9 +9,11 @@ const App = props => {
 
   return (
     <div>
-      <SnackbarProvider>{id ? <AnnotationResult id={id} /> : <AnnotationForm onResponse={setId} />}</SnackbarProvider>
+      <SnackbarProvider>
+        {id ? <AnnotationResult id={id} /> : <AnnotationForm serviceClient={props.serviceClient} onResponse={setId} />}
+      </SnackbarProvider>
     </div>
   );
 };
 
-ReactDOM.render(<App />, document.getElementById("app"));
+export default App;
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, Fragment } from "react";
-import { parse, formatDistanceToNow } from "date-fns";
+import { parse, formatDistanceToNow, toDate } from "date-fns";
 import { RESULT_ADDR, downloadSchemeFile } from "../service";
 import TabbedTables from "../tables";
 import Visualizer from "../visualizer";
@@ -68,7 +68,6 @@ const AnnotationResult = props => {
 
   const renderError = () => (
     <Typography variant="body2">
-      {console.log(response)}
       {response.statusMessage}. Try to
       <Button color="primary">run another annotation</Button>
     </Typography>
@@ -82,7 +81,7 @@ const AnnotationResult = props => {
           The result contains {nodes.length} entities and {edges.length} connections between them.
         </Typography>
         <Typography variant="body2">
-          This page will expire in {formatDistanceToNow(parse(response.expire_time * 1000))}.
+          This page will expire in {formatDistanceToNow(toDate(response.expire_time * 1000))}.
         </Typography>
         <div className="inline-buttons">
           <Button variant="contained" onClick={e => setTableShown(true)}>

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/result/style.css b/src/assets/thirdPartyServices/snet/gene_annotation_service/result/style.css
@@ -7,7 +7,7 @@
 }
 
 .landing-page {
-  width: 100vw;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js
@@ -43,7 +43,7 @@ const ResultTables = props => {
     return (
       <div>
         {genes.map((g, i) => (
-          <ExpansionPanel>
+          <ExpansionPanel key={g}>
             <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
               <Typography variant="h6">{g}</Typography>
             </ExpansionPanelSummary>
@@ -118,7 +118,7 @@ const ResultTables = props => {
     return (
       <div>
         {pathways.map((p, i) => (
-          <ExpansionPanel>
+          <ExpansionPanel key={p}>
             <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
               <Typography>{p}</Typography>
             </ExpansionPanelSummary>
@@ -150,7 +150,7 @@ const ResultTables = props => {
                           .split(" ")
                           .filter(s => s);
                         return (
-                          <TableRow>
+                          <TableRow key={"row" + j}>
                             <TableCell>{j + 1}</TableCell>
                             <TableCell>
                               <Typography variant="body1">
@@ -163,11 +163,11 @@ const ResultTables = props => {
                                   <Typography variant="body1">
                                     <a
                                       href={`https://www.uniprot.org/uniprot/${protien[0].slice(
-                                        protien.indexOf(":") + 1
+                                        protien[0].indexOf(":") + 1
                                       )}`}
                                       style={{ marginRight: 15 }}
                                     >
-                                      {protien[0]}
+                                      {protien[0].slice(protien[0].indexOf(":") + 1)}
                                     </a>{" "}
                                   </Typography>
                                 )}
@@ -210,7 +210,7 @@ const ResultTables = props => {
     return (
       <div>
         {interactions.map((b, i) => (
-          <ExpansionPanel>
+          <ExpansionPanel key={b}>
             <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
               <Typography>{b}</Typography>
             </ExpansionPanelSummary>
@@ -225,62 +225,52 @@ const ResultTables = props => {
                     <TableRow>
                       <TableCell>No</TableCell>
                       <TableCell>Location</TableCell>
-                      <TableCell>Protiens</TableCell>
-                      <TableCell>Interacting genes</TableCell>
+                      <TableCell>Interacting features</TableCell>
                       <TableCell>Pubmed ID</TableCell>
                     </TableRow>
                   </TableHead>
                   <TableBody>
                     {tableData
                       .filter(row => {
-                        const values = row.slice(i * 4 + 1, i * 4 + 5);
+                        const values = row.slice(i * 3 + 1, i * 3 + 4);
                         return values[0] || values[1] || values[2] || values[3];
                       })
                       .map((row, j) => {
-                        const values = row.slice(i * 4 + 1, i * 4 + 5);
-                        const protien = values[1]
-                          .trim()
-                          .split(" ")
-                          .filter(s => s);
+                        const values = row.slice(i * 3 + 1, i * 3 + 4);
+
                         return (
                           <TableRow key={row.name}>
                             <TableCell>{j + 1}</TableCell>
                             <TableCell>{values[0] || "-"}</TableCell>
+
                             <TableCell>
-                              <Fragment>
-                                {protien.length > 0 && (
-                                  <Typography variant="body1">
+                              <Typography variant="body1">
+                                {values[1] ? (
+                                  values[1].includes("Uniprot") ? (
                                     <a
-                                      href={`https://www.uniprot.org/uniprot/${protien[0].slice(
-                                        protien.indexOf(":") + 1
+                                      href={`https://www.uniprot.org/uniprot/${values[1].slice(
+                                        values[1].indexOf(":") + 1
                                       )}`}
                                       style={{ marginRight: 15 }}
                                     >
-                                      {console.log(values[1])}
-                                      {protien[0]}
-                                    </a>{" "}
-                                  </Typography>
-                                )}
-                                {protien.length > 1 && (
-                                  <Typography variant="body1">
-                                    <a href={`https://www.ncbi.nlm.nih.gov/gene/?term=${protien[1]}`}>{protien[1]}</a>{" "}
-                                  </Typography>
+                                      {values[1].slice(values[1].indexOf(":") + 1)}
+                                    </a>
+                                  ) : (
+                                    <a href={`https://www.ncbi.nlm.nih.gov/gene/?term=${values[1]}`}>{values[1]}</a>
+                                  )
+                                ) : (
+                                  values[1]
                                 )}
-                              </Fragment>
-                            </TableCell>
-                            <TableCell>
-                              <Typography variant="body1">
-                                <a href={`https://www.ncbi.nlm.nih.gov/gene/?term=${values[2]}`}>{values[2]}</a>{" "}
                               </Typography>
                             </TableCell>
                             <TableCell>
-                              {values[3]
-                                ? values[3]
+                              {values[2]
+                                ? values[2]
                                     .trim()
                                     .split(",")
                                     .map(t =>
                                       t.includes("http") ? (
-                                        <Typography variant="body1">
+                                        <Typography variant="body1" key={t}>
                                           <a
                                             style={{ marginRight: 15 }}
                                             href={t}
@@ -320,7 +310,7 @@ const ResultTables = props => {
         <AppBar position="static" color="default">
           <Tabs indicatorColor="primary" value={tab} onChange={(e, value) => setTab(value)}>
             {tables.map(t => (
-              <Tab label={t.displayName} id={t.displayName} />
+              <Tab key={t} label={t.displayName} id={t.displayName} />
             ))}
           </Tabs>
           <div

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js
@@ -5,6 +5,7 @@ import filterSvg from "../assets/filter.svg";
 import "cytoscape-context-menus/cytoscape-context-menus.css";
 import $ from "jquery";
 import IconButton from "@material-ui/core/IconButton";
+import Button from "@material-ui/core/Button";
 import Tooltip from "@material-ui/core/Tooltip";
 import SearchIcon from "@material-ui/icons/Search";
 import ClearIcon from "@material-ui/icons/Clear";
@@ -484,9 +485,10 @@ const Visualizer = props => {
     return (
       <div className="filter-controls">
         <Tooltip placement="bottom" title="Remove Filter">
-          <IconButton onClick={clearFilter} type="secondary">
+          <Button onClick={clearFilter} color="secondary" variant="contained">
             <ClearIcon />
-          </IconButton>
+            Remove filter
+          </Button>
         </Tooltip>
       </div>
     );
@@ -496,45 +498,45 @@ const Visualizer = props => {
     <Fragment>
       <div className="visualizer-wrapper" ref={cy_wrapper} />
       <div className="visualizer-controls-wrapper">
-        <Tooltip placement="right" title="Randomize layout">
+        <Tooltip placement="right" title={<Typography variant="body1">Go back</Typography>}>
           <IconButton onClick={props.onClose}>
             <ArrowBackIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip placement="right" title="Randomize layout">
+        <Tooltip placement="right" title={<Typography variant="body1">Randomize layout</Typography>}>
           <IconButton onClick={randomLayout}>
             <ShuffleIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip placement="right" title="Breadth-first layout">
+        <Tooltip placement="right" title={<Typography variant="body1">Breadth-first layout</Typography>}>
           <IconButton onClick={breadthFirstLayout}>
             <CategoryIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip placement="right" title="Concentric layout">
+        <Tooltip placement="right" title={<Typography variant="body1">Concentric layout</Typography>}>
           <IconButton onClick={concentricLayout}>
             <AdjustIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip placement="right" title="Save screenshot">
+        <Tooltip placement="right" title={<Typography variant="body1">Save screenshot</Typography>}>
           <IconButton onClick={takeScreenshot}>
             <CameraAltIcon />
           </IconButton>
         </Tooltip>
-        <Tooltip placement="right" title="Download graph as JSON">
+        <Tooltip placement="right" title={<Typography variant="body1">Download graph as JSON</Typography>}>
           <IconButton onClick={downloadGraphJSON}>
             <CloudDownloadIcon />
           </IconButton>
         </Tooltip>
         <Tooltip
           placement="right"
           title={
-            <div>
+            <Typography variant="body1">
               <p>Use the checkboxes to the right to filter the graph by annotations and node types.</p>
               <p>Right click on a node to perform actions on it.</p>
               <p>You may download the graph JSON and view it on Cytoscape desktop.</p>
               <p>The search is case sensitive.</p>
-            </div>
+            </Typography>
           }
         >
           <IconButton>
@@ -543,8 +545,9 @@ const Visualizer = props => {
         </Tooltip>
       </div>
       <div className="annotation-toggle-wrapper">
-        <Paper style={{ marginBottom: 15, padding: 5, paddingLeft: 15 }}>
+        <Paper style={{ display: "flex", marginBottom: 15, padding: 5, paddingLeft: 15 }}>
           <InputBase
+            style={{ flexGrow: 1 }}
             placeholder="Node ID"
             onChange={e => setSearchToken(e.target.value)}
             onKeyPress={e => {
@@ -562,7 +565,7 @@ const Visualizer = props => {
 
         <ExpansionPanel defaultExpanded={true}>
           <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} id="genes">
-            <Typography>Genes</Typography>
+            <Typography>Node Types</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails>
             {nodeTypes.map(n => (
@@ -579,6 +582,7 @@ const Visualizer = props => {
                   />
                 }
                 label={n}
+                key={n}
               />
             ))}
           </ExpansionPanelDetails>
@@ -591,7 +595,7 @@ const Visualizer = props => {
             <div>
               {AnnotationGroups.filter(a => props.annotations.includes(a.group)).map((a, i) => {
                 return (
-                  <div>
+                  <div key={a}>
                     <span>
                       <Typography variant="body1" gutterBottom>
                         {a.group.includes("biogrid") && (
@@ -614,7 +618,7 @@ const Visualizer = props => {
                     {a.subgroups
                       .filter(s => props.annotations.includes(s.subgroup))
                       .map(s => (
-                        <span style={{ paddingLeft: 15 }}>
+                        <span style={{ paddingLeft: 15 }} key={s}>
                           <FormControlLabel
                             control={
                               <Checkbox

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/style.css b/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/style.css
@@ -1,7 +1,10 @@
+div button:first-of-type {
+  margin-right: 0 !important;
+}
+
 .context-menu {
   border: none !important;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
-    0 1px 2px rgba(0, 0, 0, 0.24);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   -ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
@@ -66,8 +69,8 @@
 }
 
 .visualizer-wrapper {
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   position: absolute;
   top: 0;
   left: 0;
@@ -98,4 +101,5 @@
   position: absolute;
   top: 15px;
   left: 90px;
+  z-index: 10;
 }