Merge pull request #6 from EBI-Metagenomics/danilo

UI overflow, google stuff removal, adhere to current API.

README.md

@@ -8,7 +8,7 @@ The web client for submitting queries to [Deciphon](https://github.com/EBI-Metag
 # Architecture
 
 This is a React app.
-Deciphon Web interacts with Deciphon via [Deciphon's REST API](https://github.com/EBI-Metagenomics/deciphon-api).
+Deciphon Web interacts with Deciphon via [Deciphon's REST API](https://github.com/EBI-Metagenomics/deciphon/tree/main/sched).
 
 # Development
 

cypress/e2e/deciphon.test.js

@@ -42,7 +42,7 @@ describe("Deciphon website tests", () => {
       fixture: "prod_all.json",
     });
 
-    cy.intercept("GET", "http://api/jobs", { fixture: "jobs_list.json" });
+    cy.intercept("GET", "http://api/jobs?limit=*", { fixture: "jobs_list.json" });
 
     cy.intercept("POST", "http://api/scans", {
       fixture: "scan_new.json",
@@ -57,6 +57,7 @@ describe("Deciphon website tests", () => {
         },
       })
     );
+    cy.window().focus();
   });
 
   it("loads successfully", () => {

public/index.html

@@ -4,11 +4,8 @@
   <meta charset="UTF-8">
   <title>Deciphon</title>
 
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.5.7/css/styles.css">
+  <link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.5.19/css/styles.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/ibm-plex-serif.min.css">
 
   <link rel="icon" type="image/x-icon" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/favicon.ico" />
   <link rel="icon" type="image/png" href="https://www.ebi.ac.uk/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/favicon-32x32.png" />
@@ -23,7 +20,7 @@
 
   <!-- Web component polyfill (only loads what it needs) -->
   <script
-          src="https://cdn.jsdelivr.net/npm/@webcomponents/custom-elements@latest"
+          src="https://cdn.jsdelivr.net/npm/@webcomponents/custom-elements@latest/custom-elements.min.js"
           defer
   ></script>
   <!-- Required to polyfill modern browsers as code is ES5 for IE... -->
@@ -39,7 +36,7 @@
 <script defer="defer" src="//ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.4/js/script.js"></script>
 <link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.4.12/assets/ebi-header-footer/ebi-header-footer.css" type="text/css" media="all" />
 
-<section class="vf-hero vf-hero--1200 | vf-u-fullbleed" style="--vf-hero--bg-image: url(https://acxngcvroo.cloudimg.io/v7/https://www.embl.org/files/wp-content/uploads/EBI_webbanner_test_V4.jpg);">
+<section class="vf-hero vf-hero--1200 | vf-u-fullbleed" id="hero">
   <div class="vf-hero__content | vf-box | vf-stack vf-stack--400">
     <p class="vf-hero__kicker"><a href="https://ebi.ac.uk">EMBL-EBI</a> | Deciphon</p>
     <p class="vf-hero__kicker"><span class="vf-badge vf-badge--primary">alpha</span></p>
@@ -49,6 +46,13 @@ <h2 class="vf-hero__heading">Deciphon</h2>
   </div>
 </section>
 
+<script>
+  window.onload = function() {
+    const rootUrl = window.location.origin;
+    document.documentElement.style.setProperty("--vf-hero--bg-image", `url(${rootUrl}/banner.jpg)`);
+  }
+</script>
+
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 
@@ -91,6 +95,6 @@ <h4 class="vf-links__heading">Support</h4>
       </div>
     </footer>
 </div>
-<script src="https://assets.emblstatic.net/vf/v2.5.7/scripts/scripts.js"></script>
+<script src="https://assets.emblstatic.net/vf/v2.5.19/scripts/scripts.js"></script>
 </body>
-</html>
+</html>

src/App.css

@@ -67,4 +67,8 @@ span.heat9 {
 
 span.heatstar {
   background: #999;
-}
+}
+
+body {
+  overflow-x: hidden;
+}

src/components/PreviousJobs.jsx

@@ -13,12 +13,16 @@ const PreviousJobs = () => {
 
   const getJobsAhead = () => {
     api
-      .get(`/jobs`)
+      .get(`/jobs?limit=30`)
       .then((response) => {
         if (response?.data?.length) {
-          const nextPendJob = find(response.data, job => job.state === 'pend');
-          const lastSubmittedJob = last(response.data);
-          setJobsAhead(parseInt(lastSubmittedJob.id) - parseInt(nextPendJob.id));
+          const nextPendJob = find(response.data, job => job.state === 'pend' || job.state === 'run');
+          if (nextPendJob != undefined)
+          {
+            const lastSubmittedJob = last(response.data);
+            setJobsAhead(parseInt(lastSubmittedJob.id) - parseInt(nextPendJob.id));
+          } else
+            setJobsAhead(null);
         } else {
           setJobsAhead(null);
         }

src/components/Result.jsx

@@ -193,11 +193,14 @@ const Result = () => {
             setIsPolling(false);
           } else {
             api
-              .get(`/jobs`)
+              .get(`/jobs?limit=30`)
               .then((response) => {
                 if (response?.data?.length) {
-                    const nextPendJob = find(response.data, job => job.state === 'pend');
-                  setJobsAhead(parseInt(jobid) - parseInt(nextPendJob.id));
+                  const nextPendJob = find(response.data, job => job.state === 'pend' || job.state === 'run');
+                  if (nextPendJob != undefined)
+                    setJobsAhead(parseInt(jobid) - parseInt(nextPendJob.id));
+                  else
+                    setJobsAhead(null);
                 } else {
                   setJobsAhead(null);
                 }