From 8be47ee7e010d3a051360ff81fde9c877fffb6f0 Mon Sep 17 00:00:00 2001
From: yisehak <yisehak.aw@gmail.com>
Date: Fri, 13 Sep 2019 15:12:50 +0300
Subject: [PATCH 1/7] Removed react DOM line and added default export

---
 .../thirdPartyServices/snet/gene_annotation_service/index.js   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js
index b1972cdc3..dfea8bbf1 100644
--- 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";
@@ -15,4 +14,4 @@ const App = props => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById("app"));
+export default App;

From 04ab4f00457fb8d1ddd2be87501e354f519e69e1 Mon Sep 17 00:00:00 2001
From: yisehak <yisehak.aw@gmail.com>
Date: Fri, 13 Sep 2019 15:16:51 +0300
Subject: [PATCH 2/7] removed margins  from form

---
 .../snet/gene_annotation_service/form/index.js                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
index da481c6e6..0c630dffb 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
@@ -188,7 +188,7 @@ const AnnotationForm = props => {
   };
 
   return (
-    <div className="container form-wrapper" style={{ padding: "30px 450px" }}>
+    <div className="container form-wrapper">
       {/* Gene List */}
       <Typography variant="h6" gutterBottom>
         Input Genes

From 61884bab507f58e119d5d5400ec0d0c68b51b809 Mon Sep 17 00:00:00 2001
From: yisehak <yisehak.aw@gmail.com>
Date: Fri, 13 Sep 2019 15:21:08 +0300
Subject: [PATCH 3/7] removed this

---
 .../snet/gene_annotation_service/form/index.js                  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
index 0c630dffb..8c5e7957d 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
@@ -184,7 +184,7 @@ const AnnotationForm = props => {
       },
     };
 
-    this.props.serviceClient.unary(Annotate.Annotate, requestProps);
+    props.serviceClient.unary(Annotate.Annotate, requestProps);
   };
 
   return (

From 975d46e053f4b7cd4d09f3fb90f17dc05e8e9e67 Mon Sep 17 00:00:00 2001
From: yisehak <yisehak.aw@gmail.com>
Date: Fri, 13 Sep 2019 16:48:15 +0300
Subject: [PATCH 4/7] pass serviceClient as prop to form

---
 package-lock.json                                            | 5 +++++
 .../thirdPartyServices/snet/gene_annotation_service/index.js | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index fac506d18..1dfc30b51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31752,6 +31752,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "validate.js": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/validate.js/-/validate.js-0.13.1.tgz",
+      "integrity": "sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g=="
+    },
     "value-equal": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js
index dfea8bbf1..21572e877 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/index.js
@@ -9,7 +9,9 @@ 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>
   );
 };

From 4dac8ab19aa013b8eac495ba99387e47f231401e Mon Sep 17 00:00:00 2001
From: Abdulrahman Semrie <hsamireh@gmail.com>
Date: Fri, 13 Sep 2019 17:53:49 +0300
Subject: [PATCH 5/7] Fixed issues with the date-fn library and added minor css
 improvements

---
 .../snet/gene_annotation_service/form/index.js                | 2 +-
 .../snet/gene_annotation_service/result/index.js              | 4 ++--
 .../snet/gene_annotation_service/result/style.css             | 2 +-
 .../snet/gene_annotation_service/visualizer/index.js          | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
index 8c5e7957d..a9212c5f8 100644
--- 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 };
 
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
index d4688298a..0811a9f93 100644
--- 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";
@@ -82,7 +82,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
index ea2ed303b..650af96da 100644
--- 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/visualizer/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js
index f06bb1b2c..dd10d978f 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js
@@ -562,7 +562,7 @@ const Visualizer = props => {
 
         <ExpansionPanel defaultExpanded={true}>
           <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} id="genes">
-            <Typography>Genes</Typography>
+            <Typography>Node Types</Typography>
           </ExpansionPanelSummary>
           <ExpansionPanelDetails>
             {nodeTypes.map(n => (

From b8da30972c30624462db2ed98ce984b672f33026 Mon Sep 17 00:00:00 2001
From: yisehak <yisehak.aw@gmail.com>
Date: Fri, 13 Sep 2019 20:12:27 +0300
Subject: [PATCH 6/7] bug fixes for gene-annotation service

---
 .../snet/gene_annotation_service/form/index.js    |  3 ++-
 .../snet/gene_annotation_service/result/index.js  |  3 +--
 .../snet/gene_annotation_service/tables/index.js  |  9 +++++----
 .../gene_annotation_service/visualizer/index.js   | 15 +++++++++------
 .../gene_annotation_service/visualizer/style.css  | 12 ++++++++----
 5 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
index a9212c5f8..6e5a2c4ac 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/form/index.js
@@ -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 }) => {
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
index 0811a9f93..eb8a3197b 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
@@ -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>
@@ -86,7 +85,7 @@ const AnnotationResult = props => {
         </Typography>
         <div className="inline-buttons">
           <Button variant="contained" onClick={e => setTableShown(true)}>
-            <TableChartOutlinedIcon style={{ marginRight: 15 }} /> View results table
+            <TableChartOutlinedIcon style={{ marginRight: "15px !important" }} /> View results table
           </Button>
           <Button variant="contained" onClick={() => downloadSchemeFile(id)}>
             <CloudDownloadIcon style={{ marginRight: 15 }} /> Download Scheme File
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js
index 04cb019ea..1530e9e26 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js
@@ -239,9 +239,11 @@ const ResultTables = props => {
                       .map((row, j) => {
                         const values = row.slice(i * 4 + 1, i * 4 + 5);
                         const protien = values[1]
-                          .trim()
-                          .split(" ")
-                          .filter(s => s);
+                          ? values[1]
+                              .trim()
+                              .split(" ")
+                              .filter(s => s)
+                          : [];
                         return (
                           <TableRow key={row.name}>
                             <TableCell>{j + 1}</TableCell>
@@ -256,7 +258,6 @@ const ResultTables = props => {
                                       )}`}
                                       style={{ marginRight: 15 }}
                                     >
-                                      {console.log(values[1])}
                                       {protien[0]}
                                     </a>{" "}
                                   </Typography>
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js
index dd10d978f..72c28d4a0 100644
--- 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,7 +498,7 @@ 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="Go back">
           <IconButton onClick={props.onClose}>
             <ArrowBackIcon />
           </IconButton>
@@ -529,12 +531,12 @@ const Visualizer = props => {
         <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 => {
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/style.css b/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/style.css
index 2cfd45ee5..a852d230d 100644
--- 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;
 }

From 9e3dbc123d0880c5b46455df70d81a6e921a9b07 Mon Sep 17 00:00:00 2001
From: yisehak <yisehak.aw@gmail.com>
Date: Fri, 13 Sep 2019 21:24:53 +0300
Subject: [PATCH 7/7] biogrid tables fix

---
 .../gene_annotation_service/result/index.js   |  2 +-
 .../gene_annotation_service/tables/index.js   | 65 ++++++++-----------
 .../visualizer/index.js                       | 17 ++---
 3 files changed, 37 insertions(+), 47 deletions(-)

diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
index eb8a3197b..d7ebf7b65 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/result/index.js
@@ -85,7 +85,7 @@ const AnnotationResult = props => {
         </Typography>
         <div className="inline-buttons">
           <Button variant="contained" onClick={e => setTableShown(true)}>
-            <TableChartOutlinedIcon style={{ marginRight: "15px !important" }} /> View results table
+            <TableChartOutlinedIcon style={{ marginRight: 15 }} /> View results table
           </Button>
           <Button variant="contained" onClick={() => downloadSchemeFile(id)}>
             <CloudDownloadIcon style={{ marginRight: 15 }} /> Download Scheme File
diff --git a/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js b/src/assets/thirdPartyServices/snet/gene_annotation_service/tables/index.js
index 1530e9e26..8ff54e92a 100644
--- 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,63 +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]
-                          ? 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 }}
                                     >
-                                      {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}
@@ -321,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
index 72c28d4a0..9a9cf15db 100644
--- a/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js
+++ b/src/assets/thirdPartyServices/snet/gene_annotation_service/visualizer/index.js
@@ -498,32 +498,32 @@ const Visualizer = props => {
     <Fragment>
       <div className="visualizer-wrapper" ref={cy_wrapper} />
       <div className="visualizer-controls-wrapper">
-        <Tooltip placement="right" title="Go back">
+        <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>
@@ -582,6 +582,7 @@ const Visualizer = props => {
                   />
                 }
                 label={n}
+                key={n}
               />
             ))}
           </ExpansionPanelDetails>
@@ -594,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") && (
@@ -617,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