example queries css

elixir-europe · Jan 5, 2024 · 77db9b6 · 77db9b6
1 parent bcd2c47
commit 77db9b6
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 104 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -196,7 +196,7 @@ html {
 }
 
 .inputVariants {
-  height: 20px;
+  height: 24px;
   border: 1.5px solid #dfdfdf;
   border-radius: 2px;
   margin-bottom: 30px;
@@ -365,7 +365,8 @@ html {
 .buttonVariants {
   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;
+  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,7 +395,7 @@ html {
   flex-direction: column;
 }
 
-.sequenceExampleButton {
+.variantExampleButton {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
@@ -409,9 +410,9 @@ html {
   color: rgba(12, 16, 64, 0.606);
   font-weight: 700;
 }
-.sequenceExampleButton:hover{
-  background-color: #3498db;
-  border: solid #3498db;
+.variantExampleButton:hover {
+  background-color: #78beed;
+  border: solid #06c;
 }
 
 .divFlex {
@@ -464,11 +465,14 @@ html {
 }
 
 .NavlinkVerifier {
-  color: #3fa18e;
-  width: 172px;
+  color: rgba(12, 16, 64, 0.606);
+  font-size: 15px !important;
+  font-feature-settings: 'pcap', 'c2pc';
+  font-variant-caps: all-petite-caps;
+  margin-top: -4px;
 }
 .NavlinkVerifier:hover {
-  margin: 0px !important;
+  color: rgb(236, 149, 0) !important;
 }
 
 .alphanumContainer {
@@ -672,7 +676,7 @@ hr {
 }
 
 .questionLogo:hover {
-  background: linear-gradient(356deg, #6ac5ff 50%, #86d2ff 80%);
+  background: linear-gradient(356deg, #3893cb 50%, #419ed3 80%);
   border-radius: 9px;
 }
 
@@ -683,7 +687,7 @@ hr {
 }
 
 .questionLogo2:hover {
-  background: linear-gradient(356deg, #6ac5ff 50%, #86d2ff 80%);
+  background: linear-gradient(356deg, #3ca2e2 50%, #63acd6 80%);
   border-radius: 9px;
 }
 
@@ -999,9 +1003,9 @@ h5 {
 }
 
 .ReactModal__Content--after-open {
-  width: 369px;
-  font-size: 12px;
-  height: 29%;
+  width: 485px;
+  font-size: 11px;
+  height: 33%;
   position: absolute !important;
   inset: 35% !important;
   border: 1px solid rgb(204, 204, 204) !important;
@@ -1028,13 +1032,26 @@ h5 {
   }
 
   .inputVariants {
-    height: 18px;
+    height: 24px;
     border: 1.5px solid #dfdfdf;
     border-radius: 2px;
     margin-bottom: 30px;
     font-size: 12px;
   }
 
+  .exampleQuery {
+    border: none;
+    /* border-color: #5454bc; */
+    padding: 5px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row-reverse;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+  }
+
   .labelVariants {
     font-size: 11.5px;
     margin-bottom: 18px;
@@ -1132,10 +1149,12 @@ h5 {
     font-size: 10px;
     margin-left: 0px !important;
   }
+
   .additionalOptions {
     justify-content: center;
     align-items: center;
     z-index: 0;
+    height: 14px;
   }
 
   .bulbLogo {
@@ -1183,4 +1202,27 @@ h5 {
     height: 30px;
     cursor: pointer;
   }
+
+  .examplesQueriesList {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: flex-start;
+    width: 189px;
+    border-radius: 5px;
+    font-size: 9px;
+    margin-left: -41px;
+    background: #8dbde0;
+
+  }
+
+  .bulbExample {
+    display: flex;
+    border-left: 1.7px solid #f1f1f1;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
 }
diff --git a/frontend/src/components/CrossQueries/CrossQueries.css b/frontend/src/components/CrossQueries/CrossQueries.css
@@ -27,9 +27,8 @@ select {
   border-radius: 5px;
   width: 150px;
   margin-left: 10px;
-  height: 19px;
+  height: 22px;
   box-shadow: 1px 2px 2px #cecece;
-  cursor: pointer;
 }
 
 .divCrossQueries {
@@ -56,7 +55,8 @@ select {
 
 .formButton:hover {
   background: #d4c223;
-  box-shadow: 1px 1px 1px 1px #d2cfcf;
+  box-shadow: 1px 1px 1px 1px #d4c223;
+  border: solid #d4c223;
 }
 
 h5 {

diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js
@@ -504,8 +504,6 @@ function VariantsResults (props) {
                       element2[2].push(element.exists)
                       element2[3].push(element.resultsCount)
                     } else {
-                      console.log('hola')
-
                       let arrayResultsPerDataset = [
                         element.beaconId,
                         [element.id],

diff --git a/frontend/src/components/Individuals/Individuals.css b/frontend/src/components/Individuals/Individuals.css
@@ -348,7 +348,7 @@ h4 {
 
 @media (max-width: 873px) {
   label {
-    font-size: 10px;
+    font-size: 12px;
   }
 
   h3 {
@@ -389,7 +389,7 @@ h4 {
     width: 100vw;
   }
   h2 {
-    font-size: 10px;
+    font-size: 11.5px;
   }
 
   h1 {

diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
@@ -380,6 +380,14 @@ function Layout (props) {
     setStart('16050114')
   }
 
+  const handleRangeExample = e => {
+    setAssemblyId2('hg19')
+    setAlternateBases2('A')
+    setRefBases2('G')
+    setStart2('16050114')
+    setEnd('16050115')
+  }
+
   useEffect(() => {
     if (props.collection === 'Individuals') {
       setPlaceholder('filtering term comma-separated, ID><=value')
@@ -600,6 +608,7 @@ function Layout (props) {
                               setPlaceholder(`${result[0]}`)
                               setQuery(`${result[0]}`)
                               setValue(`${result[0]}`)
+                              setExampleQ([])
                             }}
                           >
                             {result[1] !== undefined && (
@@ -830,8 +839,13 @@ function Layout (props) {
 
               <div className='tab-panels'>
                 <section id='sequence' class='tab-panel'>
-
-                  <button className='sequenceExampleButton'onClick={handleSequenceExample}>Query example</button>
+                  <button
+                    className='variantExampleButton'
+                    onClick={handleSequenceExample}
+                    type="button"
+                  >
+                    Query example
+                  </button>
                   <div>
                     <label className='labelVariants'>AssemblyID*</label>
                     <input
@@ -888,6 +902,13 @@ function Layout (props) {
                   </div>
                 </section>
                 <section id='range' className='tab-panel'>
+                <button
+                    className='variantExampleButton'
+                    onClick={handleRangeExample}
+                    type="button"
+                  >
+                    Query example
+                  </button>
                   <div>
                     <label className='labelVariants'>AssemblyID*</label>
                     <input