form mode variants improved

elixir-europe · Jan 4, 2024 · bcd2c47 · bcd2c47
1 parent e6da39d
commit bcd2c47
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 33 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -38,8 +38,8 @@ html {
   font-variant-caps: all-petite-caps;
 }
 
-.modeVariants:hover h2{
-  color: rgb(236, 149, 0)!important;
+.modeVariants:hover h2 {
+  color: rgb(236, 149, 0) !important;
 }
 
 .variantsFilters {
@@ -196,11 +196,12 @@ html {
 }
 
 .inputVariants {
-  height: 18px;
+  height: 20px;
   border: 1.5px solid #dfdfdf;
   border-radius: 2px;
   margin-bottom: 30px;
-  font-size: 14.5px;
+  font-size: 12.5px;
+  padding: 5px;
 }
 
 .labelVariants {
@@ -362,11 +363,10 @@ html {
 }
 
 .buttonVariants {
-  margin-top: 12px;
-  margin-bottom: 20px;
-  box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px,
-    rgba(179, 179, 179, 0.22) 0px 1px 1px;
-  padding: 7px;
+  margin-top: 9px;
+  margin-bottom: -14px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px, rgba(179, 179, 179, 0.22) 0px 1px 1px;
+  padding: 6px;
   cursor: pointer;
 }
 
@@ -394,6 +394,26 @@ html {
   flex-direction: column;
 }
 
+.sequenceExampleButton {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  border: solid #d6d5e1;
+  padding: 4px;
+  margin-left: 13px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  font-size: 10px;
+  box-shadow: 1px 1px 1px -1px #ffd8d8;
+  text-transform: uppercase;
+  color: rgba(12, 16, 64, 0.606);
+  font-weight: 700;
+}
+.sequenceExampleButton:hover{
+  background-color: #3498db;
+  border: solid #3498db;
+}
+
 .divFlex {
   width: 168%;
   display: flex;

diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js
@@ -492,14 +492,50 @@ function VariantsResults (props) {
             setBoolean(false)
           } else {
             res.data.response.resultSets.forEach((element, index) => {
+              console.log(res.data.response)
               if (element.id && element.id !== '') {
-                let arrayResultsPerDataset = [
-                  element.beaconId,
-                  element.id,
-                  element.exists,
-                  element.resultsCount
-                ]
-                resultsPerDataset.push(arrayResultsPerDataset)
+                console.log(resultsPerDataset)
+                if (resultsPerDataset.length > 0) {
+                  resultsPerDataset.forEach(element2 => {
+                    console.log(element2[0])
+                    console.log(element.beaconId)
+                    if (element2[0] === element.beaconId) {
+                      element2[1].push(element.id)
+                      element2[2].push(element.exists)
+                      element2[3].push(element.resultsCount)
+                    } else {
+                      console.log('hola')
+
+                      let arrayResultsPerDataset = [
+                        element.beaconId,
+                        [element.id],
+                        [element.exists],
+                        [element.resultsCount]
+                      ]
+                      let found = false
+
+                      console.log(arrayResultsPerDataset)
+                      resultsPerDataset.forEach(element => {
+                        if (element[0] === arrayResultsPerDataset[0]) {
+                          found = true
+                        }
+                        console.log(found)
+                      })
+                      if (found === false) {
+                        resultsPerDataset.push(arrayResultsPerDataset)
+                      }
+                    }
+                  })
+                } else {
+                  let arrayResultsPerDataset = [
+                    element.beaconId,
+                    [element.id],
+                    [element.exists],
+                    [element.resultsCount]
+                  ]
+                  console.log(arrayResultsPerDataset)
+                  resultsPerDataset.push(arrayResultsPerDataset)
+                }
               }
 
               if (element.id === undefined || element.id === '') {

diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
@@ -373,6 +373,13 @@ function Layout (props) {
     setExpansionSection(true)
   }
 
+  const handleSequenceExample = e => {
+    setAssemblyId('hg19')
+    setAlternateBases('A')
+    setRefBases('G')
+    setStart('16050114')
+  }
+
   useEffect(() => {
     if (props.collection === 'Individuals') {
       setPlaceholder('filtering term comma-separated, ID><=value')
@@ -801,28 +808,30 @@ function Layout (props) {
                 type='radio'
                 name='tabset'
                 id='tab1'
-                aria-controls='marzen'
+                aria-controls='sequence'
               />
               <label for='tab1'>Sequence queries</label>
 
               <input
                 type='radio'
                 name='tabset'
                 id='tab2'
-                aria-controls='rauchbier'
+                aria-controls='range'
               />
               <label for='tab2'>Range queries</label>
 
               <input
                 type='radio'
                 name='tabset'
                 id='tab3'
-                aria-controls='dunkles'
+                aria-controls='gene'
               />
               <label for='tab3'>Gene ID queries</label>
 
               <div className='tab-panels'>
-                <section id='marzen' class='tab-panel'>
+                <section id='sequence' class='tab-panel'>
+
+                  <button className='sequenceExampleButton'onClick={handleSequenceExample}>Query example</button>
                   <div>
                     <label className='labelVariants'>AssemblyID*</label>
                     <input
@@ -878,7 +887,7 @@ function Layout (props) {
                     />
                   </div>
                 </section>
-                <section id='rauchbier' className='tab-panel'>
+                <section id='range' className='tab-panel'>
                   <div>
                     <label className='labelVariants'>AssemblyID*</label>
                     <input
@@ -967,7 +976,7 @@ function Layout (props) {
                     />
                   </div>
                 </section>
-                <section id='dunkles' className='tab-panel'>
+                <section id='gene' className='tab-panel'>
                   <div>
                     <label className='labelVariants'>Gene ID*</label>
                     <input

diff --git a/frontend/src/components/Layout/LayoutVariantsTable.css b/frontend/src/components/Layout/LayoutVariantsTable.css
@@ -81,4 +81,8 @@
 
   .tabset {
     max-width: 65em;
-  }
+  }
+
+
+
+
diff --git a/frontend/src/components/NavBar/Navbar.css b/frontend/src/components/NavBar/Navbar.css
@@ -494,7 +494,7 @@
     justify-content: flex-start;
   }
   .nav4 {
-    height: 32vh;
+
     /* width: 100%; */
     display: flex;
     /* place-content: center flex-start; */
@@ -742,21 +742,21 @@
 
   .Variants2 {
     width: 157px;
-    height: 21px;
+    height: 23px;
     margin-left: 2px;
     border-radius: 4px;
   }
 
   .Biosamples2 {
     width: 157px;
-    height: 21px;
+    height: 23px;
     margin-left: 2px;
     border-radius: 4px;
   }
 
   .Members2 {
     width: 146px;
-    height: 21px;
+    height: 23px;
     border-radius: 4px;
     background-color: #4961b8;
   }
@@ -772,21 +772,21 @@
 
   .Runs2 {
     width: 157px;
-    height: 21px;
+    height: 23px;
     margin-left: 2px;
     border-radius: 4px;
   }
 
   .Cohorts2 {
     width: 157px;
-    height: 22px;
+    height: 23px;
     margin-left: 2px;
     border-radius: 4px;
   }
 
   .Cross-queries2 {
     width: 157px;
-    height: 21px;
+    height: 23px;
     margin-left: 2px;
     border-radius: 4px;
   }
@@ -803,7 +803,7 @@
 
   .Analyses2 {
     width: 157px;
-    height: 21px;
+    height: 23px;
     margin-left: 2px;
     border-radius: 4px;
   }
@@ -837,7 +837,6 @@
   }
 
   .nav4 {
-    height: 32vh;
     width: 83%;
     display: flex;
     /* flex-direction: column; */
@@ -869,7 +868,7 @@
 
   .menuNav2 {
     background-color: #235c94;
-    height: 290px;
+    height: 266px;
     width: 161px;
     margin-top: 22px;
     border-radius: 9px;