elixir-europe · GMILLA92 · Feb 12, 2024 · Feb 9, 2024 · Feb 12, 2024
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,13 +36,16 @@
     "react-outside-click-handler": "^1.3.0",
     "react-router-bootstrap": "0.26.2",
     "react-router-dom": "^6.4.3",
+    "react-router-scroll-top": "^0.3.1",
     "react-scripts": "^5.0.1",
+    "react-scroll-to-top": "^3.0.0",
     "react-select": "^5.7.2",
     "react-svg-worldmap": "^2.0.0-alpha.16",
     "react-tag-box": "^1.6.0",
     "reaselct": "^2.1.0",
     "rsuite": "^5.33.1",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "with-router": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>ELIXIR Beacon network demo</title>
-  </head>
-  <body class="dx-viewport">
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>ELIXIR Beacon network demo</title>
+</head>
+
+<body class="dx-viewport">
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +38,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+</body>
+
+</html>
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -99,7 +99,7 @@ html {
   margin-bottom: 31px;
   color: rgba(12, 16, 64, 0.606);
   font-size: 16px;
-  font-feature-settings: 'pcap', 'c2pc', "pcap", "c2pc";
+  font-feature-settings: 'pcap', 'c2pc', 'pcap', 'c2pc';
   font-variant-caps: all-petite-caps;
 }
 
@@ -285,7 +285,6 @@ html {
     sans-serif;
 }
 
-
 .labelVariantsTittle {
   font-size: 16px;
   margin-bottom: 27px;
@@ -654,6 +653,8 @@ select {
   /* justify-content: center; */
   align-content: center;
   align-items: center;
+  padding-bottom: 10px;
+  min-height: 630px;
 }
 
 .resultSet2 {

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -19,6 +19,7 @@ import Validator from './components/Validator/Validator'
 import SignInFormNoLS from './components/SignIn/SignInFormNoLS'
 import AboutSection from './components/AboutSection/AboutSection'
 import SignInOptions from './components/SignInOptions/SignInOptions'
+import Footer from './components/Footer/Footer'
 
 function App () {
   return (
@@ -42,6 +43,7 @@ function App () {
         <Route path='/about' element={<AboutSection />} />
         <Route path='*' element={<ErrorPage />} />
       </Routes>
+      <Footer/>
     </div>
   )
 }

diff --git a/frontend/src/components/AboutSection/AboutSection.css b/frontend/src/components/AboutSection/AboutSection.css
@@ -0,0 +1,3 @@
+.aboutContainer{
+    height: 90vh;
+}
diff --git a/frontend/src/components/AboutSection/AboutSection.js b/frontend/src/components/AboutSection/AboutSection.js
@@ -2,7 +2,7 @@ import './AboutSection.css'
 
 function AboutSection () {
   return (
-    <div>
+    <div className='aboutContainer'>
 
     </div>
   )

diff --git a/frontend/src/components/Analyses/AnalysesResults.js b/frontend/src/components/Analyses/AnalysesResults.js
@@ -191,8 +191,9 @@ function AnalysesResults (props) {
           setTimeOut(true)
 
           if (
-            res.data.responseSummary.numTotalResults < 1 ||
-            res.data.responseSummary.numTotalResults === undefined
+            (res.data.responseSummary.numTotalResults < 1 ||
+              res.data.responseSummary.numTotalResults === undefined) &&
+            props.resultSets !== 'MISS'
           ) {
             setError('No results. Please try another query')
             setNumberResults(0)
@@ -295,10 +296,11 @@ function AnalysesResults (props) {
           setTimeOut(true)
 
           if (
-            res.data.responseSummary.numTotalResults < 1 ||
-            res.data.responseSummary.numTotalResults === undefined
+            (res.data.responseSummary.numTotalResults < 1 ||
+              res.data.responseSummary.numTotalResults === undefined) &&
+            props.resultSets !== 'MISS'
           ) {
-            setError('No results. Please try another query')
+            setError('. Please try another query')
             setNumberResults(0)
             setBoolean(false)
           } else {
@@ -417,9 +419,11 @@ function AnalysesResults (props) {
                 <button className='typeResults' onClick={handleTypeResults2}>
                   <h5>Count</h5>
                 </button>
-                <button className='typeResults' onClick={handleTypeResults3}>
-                  <h5>Full response</h5>
-                </button>
+                {props.resultSets !== 'MISS' && (
+                  <button className='typeResults' onClick={handleTypeResults3}>
+                    <h5>Full response</h5>
+                  </button>
+                )}
               </div>
             </div>
           )}

diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js
@@ -194,8 +194,9 @@ function BiosamplesResults (props) {
           setTimeOut(true)
 
           if (
-            res.data.responseSummary.numTotalResults < 1 ||
-            res.data.responseSummary.numTotalResults === undefined
+            (res.data.responseSummary.numTotalResults < 1 ||
+              res.data.responseSummary.numTotalResults === undefined) &&
+            props.resultSets !== 'MISS'
           ) {
             setError('No results. Please try another query')
             setNumberResults(0)
@@ -299,8 +300,9 @@ function BiosamplesResults (props) {
           setTimeOut(true)
 
           if (
-            res.data.responseSummary.numTotalResults < 1 ||
-            res.data.responseSummary.numTotalResults === undefined
+            (res.data.responseSummary.numTotalResults < 1 ||
+              res.data.responseSummary.numTotalResults === undefined) &&
+            props.resultSets !== 'MISS'
           ) {
             setError('No results. Please try another query')
             setNumberResults(0)
@@ -420,9 +422,9 @@ function BiosamplesResults (props) {
                 <button className='typeResults' onClick={handleTypeResults2}>
                   <h5>Count</h5>
                 </button>
-                <button className='typeResults' onClick={handleTypeResults3}>
+                {props.resultSets !== 'MISS' && <button className='typeResults' onClick={handleTypeResults3}>
                   <h5>Full response</h5>
-                </button>
+                </button>}
               </div>
             </div>
           )}

diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css
@@ -259,6 +259,7 @@ h12 {
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  min-height: 1000px;
 }
 
 .graphsDiv h3 {

diff --git a/frontend/src/components/CrossQueries/CrossQueries.css b/frontend/src/components/CrossQueries/CrossQueries.css
@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   /* justify-content: center; */
-  margin-top: 40px;
-  margin-right: 30px;
+  margin-top: -83px;
+  /* margin-right: 30px; */
   align-content: center;
   align-items: flex-start;
 }
@@ -39,6 +39,7 @@ select {
   align-items: center;
   width: 100vw;
   flex-direction: column;
+  height: 100vh;
 }
 
 .crossQueriesForm label {

diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -226,10 +226,11 @@ p a {
 .resultsRecord {
   display: flex;
   flex-direction: row;
-
+  height: 140%;
   flex-wrap: wrap;
   justify-content: center;
   align-content: center;
+  padding-bottom: 10px;
 }
 
 @media (max-width: 860px) {
@@ -257,6 +258,8 @@ p a {
     justify-content: center;
     align-content: center;
     width: 100vw;
+    padding-bottom: 10px;
+    height: 160%;
   }
 
   .tittle4 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ import './AboutSection.css' @@
     function AboutSection () {
       return (
-        <div>
+        <div className='aboutContainer'>
         </div>
       )
@@ Expand Down @@