elixir updated

elixir-europe · Jun 5, 2024 · 2b580d3 · 2b580d3
1 parent d8eb490
commit 2b580d3
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 53 deletions.
diff --git a/frontend/public/horizonEuropeLogo.png b/frontend/public/horizonEuropeLogo.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -22,7 +22,7 @@
       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>EGA Beacon demo</title>
+  <title>Elixir Beacon Network demo</title>
 </head>
 
 <body class="dx-viewport">

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -37,7 +37,7 @@ html {
   margin-left: 10px;
 }
 
-.scopeSelection{
+.scopeSelection {
   position: absolute;
   top: 286px;
   z-index: 5;
@@ -52,7 +52,8 @@ html {
   border-radius: 13px;
   color: #1a4b1a;
   font-size: 17px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
 }
 .resultSetsDiv2 .multi-switch-container {
   margin-left: -5px;
@@ -150,7 +151,6 @@ p a {
   font-variant-caps: all-petite-caps;
 }
 
-
 .variantsForm {
   margin-top: 10px;
   display: flex;
@@ -161,9 +161,6 @@ p a {
   margin-left: -70px;
 }
 
-
-
-
 .variantsFormVariant {
   margin-top: -14px;
   display: flex;
@@ -206,7 +203,6 @@ p a {
   align-items: center;
 }
 
-
 .newSearchButton:hover {
   color: rgb(118, 151, 228);
 }
@@ -227,12 +223,10 @@ p a {
   animation: slide-in-blurred-right 0.4s ease-in both;
 }
 
-.doneButton ion-icon{
+.doneButton ion-icon {
   color: black;
 }
 
-
-
 .removeButton {
   width: 130%;
   display: flex;
@@ -770,7 +764,7 @@ p a {
   transition: 0.2s ease-in-out;
 }
 
-.by-covid-logo{
+.by-covid-logo {
   height: 16px;
   margin-top: 30px;
   margin-bottom: 5px;
@@ -781,23 +775,24 @@ p a {
   transition: 0.2s ease-in-out;
 }
 
-.ega-logo{
+.ega-logo {
   height: 46px;
   margin-top: 30px;
   margin-bottom: 5px;
   margin-right: 35px;
   -webkit-filter: grayscale(20%);
   filter: grayscale(35%);
   -webkit-transition: 0.2s ease-in-out;
-  transition: 0.2s ease-in-out; 
+  transition: 0.2s ease-in-out;
 }
 
-.eosc4cancer,.by-covid-logo,.ega-logo:hover {
+.eosc4cancer,
+.by-covid-logo,
+.ega-logo:hover {
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
 }
 
-
 .federLogo {
   height: 33px;
   margin-top: 42px;
@@ -844,15 +839,37 @@ p a {
 }
 
 .laCaixaLogo {
-  height: 33px;
-  margin-top: 42px;
+  height: 35px;
+  margin-top: 34px;
   margin-right: 30px;
-  -webkit-filter: grayscale(20%);
-  filter: grayscale(100%);
-  -webkit-transition: 0.2s ease-in-out;
+  filter: grayscale(40%);
+  transition: 0.2s ease-in-out;
+}
+.horizonEuropeLogo {
+  height: 30px;
+  margin-right: 10px;
+  filter: grayscale(40%);
+  transition: 0.2s ease-in-out;
+}
+
+.elixirLogo {
+  margin-bottom: -10px;
+  height: 55px;
+  margin-right: 10px;
+  filter: grayscale(40%);
   transition: 0.2s ease-in-out;
 }
 
+.elixirLogo:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
+.horizonEuropeLogo:hover {
+  -webkit-filter: grayscale(0%);
+  filter: grayscale(0%);
+}
+
 .laCaixaLogo:hover {
   -webkit-filter: grayscale(0%);
   filter: grayscale(0%);
@@ -913,7 +930,6 @@ select {
 }
 
 .results {
-
   min-height: 80px;
 }
 
@@ -1468,7 +1484,7 @@ h5 {
     -webkit-transition: 0.2s ease-in-out;
     transition: 0.2s ease-in-out;
   }
-  .by-covid-logo{
+  .by-covid-logo {
     height: 14px;
     margin-top: 20px;
     margin-right: 30px;
@@ -1477,7 +1493,7 @@ h5 {
     -webkit-transition: 0.2s ease-in-out;
     transition: 0.2s ease-in-out;
   }
-  .ega-logo{
+  .ega-logo {
     height: 36px;
     margin-top: 20px;
     margin-right: 30px;
@@ -1486,7 +1502,6 @@ h5 {
     -webkit-transition: 0.2s ease-in-out;
     transition: 0.2s ease-in-out;
   }
-
 
   .federLogo {
     height: 31px;
@@ -1809,7 +1824,7 @@ h5 {
     -webkit-transition: 0.2s ease-in-out;
     transition: 0.2s ease-in-out;
   }
-  .by-covid-logo{
+  .by-covid-logo {
     height: 14px;
     margin-top: 20px;
     margin-right: 30px;
@@ -1819,7 +1834,7 @@ h5 {
     transition: 0.2s ease-in-out;
   }
 
-  .ega-logo{
+  .ega-logo {
     height: 36px;
     margin-top: 20px;
     margin-right: 30px;

diff --git a/frontend/src/components/Layout/Layout.css b/frontend/src/components/Layout/Layout.css
@@ -14,6 +14,8 @@
   background: #f4fdfc;
 }
 
+
+
 .buttonShowExamples:hover {
   background-color: rgb(228, 236, 250);
   box-shadow: 1px 1px 1px 1px #2269bf;

diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
@@ -385,31 +385,35 @@ function Layout (props) {
     }
   }
 
-  const search = (e) => {
-    const newQuery = e.target.value;
-  
+  const search = e => {
+    const newQuery = e.target.value
+
     // Update the query state
-    setQuery(newQuery);
-  
-    const queryTerms = newQuery.split(',').map(term => term.trim());
-  
+    setQuery(newQuery)
+
+    const queryTerms = newQuery.split(',').map(term => term.trim())
+
     // Update the checked state for "tab1" checkboxes
-    const updatedCheckedOptionsTab1 = { ...checkedOptionsTab1 };
+    const updatedCheckedOptionsTab1 = { ...checkedOptionsTab1 }
     Object.keys(updatedCheckedOptionsTab1).forEach(key => {
-      const optionValue = key.split('-').slice(3).join('-');
-      updatedCheckedOptionsTab1[key] = queryTerms.some(term => term.includes(optionValue));
-    });
-    setCheckedOptionsTab1(updatedCheckedOptionsTab1);
-
+      const optionValue = key.split('-').slice(3).join('-')
+      updatedCheckedOptionsTab1[key] = queryTerms.some(term =>
+        term.includes(optionValue)
+      )
+    })
+    setCheckedOptionsTab1(updatedCheckedOptionsTab1)
+
     // Update the checked state for "tab2" checkboxes
-    const updatedCheckedOptionsTab2 = { ...checkedOptionsTab2 };
+    const updatedCheckedOptionsTab2 = { ...checkedOptionsTab2 }
     Object.keys(updatedCheckedOptionsTab2).forEach(key => {
-      const optionValue = key.split('-').slice(3).join('-');
-      updatedCheckedOptionsTab2[key] = queryTerms.some(term => term.includes(optionValue));
-    });
-    setCheckedOptionsTab2(updatedCheckedOptionsTab2);
-  };
-
+      const optionValue = key.split('-').slice(3).join('-')
+      updatedCheckedOptionsTab2[key] = queryTerms.some(term =>
+        term.includes(optionValue)
+      )
+    })
+    setCheckedOptionsTab2(updatedCheckedOptionsTab2)
+  }
+
   const handleShowFilterEx = () => {
     setShowFilters(true)
   }
@@ -441,15 +445,42 @@ function Layout (props) {
           <div className='logosVersionContainer'>
             <div className='logos'>
               <a
-                href='https://ega-archive.org/'
+                href='https://elixir-europe.org/'
+                className='logoInstitution'
+                target='_blank'
+                rel='noreferrer'
+                title='The project "Beacon Infrastructure (2021-23)" has been funded by ELIXIR Europe'
+              >
+                <img
+                  className='elixirLogo'
+                  src='./white-orange-logo.png'
+                  alt='elixirLogo'
+                ></img>
+              </a>
+
+              <a
+                href='https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en'
+                className='logoInstitution'
+                target='_blank'
+                rel='noreferrer'
+                title='Funded by the European Union'
+              >
+                <img
+                  className='horizonEuropeLogo'
+                  src='../horizonEuropeLogo.png'
+                  alt='horizonEuropeLogo'
+                ></img>
+              </a>
+              <a
+                href='https://fundacionlacaixa.org/es/'
                 className='logoInstitution'
                 target='_blank'
                 rel='noreferrer'
               >
                 <img
-                  className='ega-logo'
-                  src='../ega-archive.png'
-                  alt='EGAarchive'
+                  className='laCaixaLogo'
+                  src='../caixa_logo.png'
+                  alt='laCaixaLogo'
                 ></img>
               </a>
             </div>

diff --git a/frontend/src/config.json b/frontend/src/config.json
@@ -1,5 +1,5 @@
 {
-  "API_URL": "https://impact-beacon-network-backend-demo.ega-archive.org/beacon-network/v2.0.0",
-  "REDIRECT_URL": "https://cancer-beacon-demo.ega-archive.org/",
+  "API_URL": "https://beacon-network-backend-demo.ega-archive.org/beacon-network/v2.0.0",
+  "REDIRECT_URL": "https://beacon-network-demo.ega-archive.org/",
   "KEYCLOAK_URL": "https://beacon-network-demo2.ega-archive.org"
 }