Merge pull request #222 from EGA-archive/frontend

Frontend
EGA-archive · Oct 10, 2023 · 868668d · 868668d
2 parents 8f576dc + 668dcff
commit 868668d
Show file tree

Hide file tree

Showing 39 changed files with 3,794 additions and 2,353 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -12,6 +12,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local
@@ -21,5 +22,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-.env
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,9 +17,11 @@
     "bootswatch": "5.2.2",
     "devextreme": "^22.2.4",
     "devextreme-react": "^22.2.4",
+    "dotenv": "^16.3.1",
     "flatted": "^3.2.7",
     "formik": "2.2.9",
     "jquery": "^3.6.4",
+    "oidc-client": "^1.11.5",
     "oidc-react": "^3.2.2",
     "prettyjson": "^1.2.5",
     "react": "^18.2.0",

diff --git a/frontend/public/adelante.png b/frontend/public/adelante.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -24,7 +24,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>Beacon network demo</title>
+    <title>Beacon demo</title>
   </head>
   <body class="dx-viewport">
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/public/next.png b/frontend/public/next.png
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -59,7 +59,7 @@ html {
 }
 
 .newSearchButton:hover {
-  color: #4fb5f0;
+  color: rgb(118, 151, 228);
 }
 
 .searchButton2 {
@@ -90,6 +90,7 @@ html {
   border-color: black;
   height: 30px;
   margin-left: 14px;
+  z-index: 0;
 }
 
 .container-fluid {
@@ -158,7 +159,7 @@ html {
   /* margin: 10px; */
   border-radius: 10px;
   /* box-shadow: 2px 1px 2px #cecece; */
-  height: 34px;
+  height: 32px;
 }
 
 .searchIcon {
@@ -171,12 +172,13 @@ html {
 }
 
 .forwardIcon {
-  width: 24px;
-  margin-left: 4px;
+  width: 25px;
 }
 
 .forwardIcon:hover {
-  margin-left: 12px;
+  background-color: #c8d4e6;
+  padding: 4px;
+  border-radius: 16px;
 }
 
 .navbar {
@@ -272,7 +274,9 @@ html {
   margin-top: -10px;
   margin-bottom: 35px;
   background: rgba(0, 0, 0, 0.09);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
 }
 .spanQE {
   display: block;
@@ -450,15 +454,14 @@ html {
 .container1 a {
   display: flex;
   align-content: center;
-  justify-content: center;
   text-underline-offset: 4px;
   align-items: center;
 }
 
 .elixirLogo {
-  height: 100px;
+  height: 91px;
   margin-top: 29px;
-  margin-right: 12px;
+  margin-right: 21px;
 }
 
 .comming_message {
@@ -935,19 +938,19 @@ h5 {
   position: absolute !important;
   inset: 35% !important;
   border: 1px solid rgb(204, 204, 204) !important;
-  background: #e16e00 !important;
+  background: #e2842b !important;
   overflow: auto !important;
   border-radius: 4px !important;
   outline: none !important;
   padding: 20px !important;
 }
 
 .ReactModal__Content--after-open p {
-  font-size: 21px;
+  font-size: 18px;
   font-weight: normal;
   color: white;
-  line-height: 38px;
-  padding: 4px;
+  line-height: 30px;
+  padding: 2px;
 }
 
 @media (max-width: 800px) {

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -12,7 +12,7 @@ import Cohorts from './components/Cohorts/Cohorts'
 import ErrorPage from './pages/ErrorPage'
 import Navbar from './components/NavBar/Navbar'
 import SignInForm from './components/SignIn/SignInForm'
-import ResultsDatasets from './components/Datasets/ResultsDatasets'
+import BeaconInfo from './components/Dataset/BeaconInfo';
 import CrossQueries from './components/CrossQueries/CrossQueries'
 import LoggedIn from './components/SignIn/LoggedIn'
 import Verifier from './components/Verifier/Verifier'
@@ -30,7 +30,7 @@ function App () {
         <Route path='/runs' element={<Runs />} />
         <Route path='/analyses' element={<Analyses />} />
         <Route path='/cohorts' element={<Cohorts />} />
-        <Route path='/members' element={<ResultsDatasets />} />
+        <Route path='/info' element={<BeaconInfo />} />
         <Route path='/sign-in' element={<SignInForm />} />
         <Route path='/sign-in-noLS' element={<SignInFormNoLS />} />
         <Route path='/loggedOut' element={<LoggedIn />} />

diff --git a/frontend/src/components/Analyses/Analyses.js b/frontend/src/components/Analyses/Analyses.js
@@ -1,11 +1,6 @@
-import '../../App.css'
-import Layout from '../Layout/Layout'
+import '../../App.css';
 
-function Analyses () {
-  return (
-    <div>
-      <Layout collection={'Analyses'} />
-    </div>
-  )
+function Analyses(){
+    return (<><h2 className="comming_message">Comming soon...</h2></>)
 }
-export default Analyses
+export default Analyses
diff --git a/frontend/src/components/Biosamples/Biosamples.js b/frontend/src/components/Biosamples/Biosamples.js
@@ -1,12 +1,7 @@
-import '../../App.css'
-import Layout from '../Layout/Layout'
+import '../../App.css';
 
-function Biosamples () {
-  return (
-    <div>
-      <Layout collection={'Biosamples'} />
-    </div>
-  )
+function Biosamples(){
+    return (<><h2 className="comming_message">Comming soon...</h2></>)
 }
 
-export default Biosamples
+export default Biosamples
diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css
@@ -21,6 +21,15 @@
   padding-left: 10px;
 }
 
+.chartModule {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
 .back:hover {
   background: #ffffff;
   border-radius: 2px;
@@ -30,6 +39,22 @@
   padding-left: 10px;
 }
 
+.buttonGoBack {
+  margin-top: 63px;
+  /* display: flex; */
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  border: solid #f9f9f9;
+  box-shadow: 1px 1px 1px 1px #f5f5f5;
+  padding: 10px;
+  border-radius: 3px;
+}
+
+.buttonGoBack:hover {
+  background-color: #5be57b;
+}
+
 #chartFilteredEthnicity {
   width: 700px !important;
   display: flex;
@@ -199,8 +224,9 @@ h12 {
   font-weight: 500;
   text-transform: uppercase;
   margin-left: 40px;
-  margin-top: 106px;
-  font-size: 14px;
+  margin-top: 57px;
+  font-weight: 600 !important;
+  font-size: 13px !important;
   display: flex;
   align-content: center;
   justify-content: center;
@@ -222,12 +248,28 @@ h12 {
 
 .graphsDiv h3 {
   color: #e16e00;
+  width: 100vw;
   text-transform: uppercase;
   margin-top: 32px;
+  margin-bottom: 20px;
   font-size: 14px;
   display: flex;
+  align-content: space-around;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 160px;
+}
+.chartModule {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
   align-content: center;
   justify-content: center;
+  align-items: center;
+}
+.apexcharts-menu {
+  background-color: #27293d !important;
+  border: 0px;
 }
 
 .middle {