Merge pull request #71 from elixir-europe/elixir-bsc

alphanumeric queries
elixir-europe · Feb 21, 2024 · 44a69a3 · 44a69a3
2 parents 1438729 + 83dc8cb
commit 44a69a3
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 54 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -311,6 +311,7 @@ html {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
+    color: #756d6d;
 }
 
 .buttonAlphanum:hover {
@@ -670,6 +671,7 @@ select {
 
 .cohortsModule {
   display: flex;
+  width: 100vw;
 }
 
 .tittleAlph {
@@ -1019,20 +1021,20 @@ h5 {
   margin: 4px;
   padding: 6px;
   box-shadow: 1px 1px 2px #a3a0a0;
-  width: 222px;
-  height: 12px;
+  width: 168px;
+  height: 27px;
   border-radius: 4px;
   overflow: auto;
 }
 
 .ValueForm {
   background: white;
   border: 2px solid rgba(12, 16, 64, 0.606);
-  margin: 20px;
+  margin-left: 5px;
   padding: 6px;
   box-shadow: 1px 1px 2px #a3a0a0;
-  width: 16%;
-  height: 12px;
+  width: 30%;
+  height: 27px;
   border-radius: 4px;
 }
 

diff --git a/frontend/src/components/AboutSection/AboutSection.css b/frontend/src/components/AboutSection/AboutSection.css
@@ -1,3 +1,27 @@
-.aboutContainer{
-    height: 90vh;
-}
+.aboutContainer {
+  height: 90vh;
+}
+
+.message {
+  color: #7fa8a8;
+  font-size: 19px;
+  margin-top: 90px;
+  font-weight: 600;
+  font-family: 'Poppins', sans-serif;
+  margin-right: 26px;
+}
+
+.messageContainer {
+  display: flex;
+  width: 100vw;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.messageContainer a {
+  color: #2f2fb8;
+  margin-top: 2px;
+  font-size: 40px;
+}
diff --git a/frontend/src/components/AboutSection/AboutSection.js b/frontend/src/components/AboutSection/AboutSection.js
@@ -3,7 +3,12 @@ import './AboutSection.css'
 function AboutSection () {
   return (
     <div className='aboutContainer'>
-
+      <div className='messageContainer'>
+        <h8 className='message'> coming soon . . .</h8>
+        <a>
+          <ion-icon color='white' name='rocket-outline'></ion-icon>
+        </a>
+      </div>
     </div>
   )
 }

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

diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -13,8 +13,6 @@ p a {
 
 .logoBeacon {
   height: 30px;
-  margin-top: 7px;
-
   padding-left: 10px;
 }
 
@@ -238,12 +236,12 @@ p a {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
+  align-content: flex-start;
   width: 100vw;
   margin-top: 20px;
   padding-bottom: 60px;
   min-height: 700px;
+  justify-content: center;
 }
 
 @media (max-width: 860px) {
@@ -269,7 +267,7 @@ p a {
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
-    align-content: center;
+    align-content: flex-start;
     width: 100vw;
     margin-top: 20px;
     padding-bottom: 60px;

diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.js b/frontend/src/components/FilteringTerms/FilteringTerms.js
@@ -96,7 +96,7 @@ function FilteringTerms (props) {
     console.log(props.filteringTerms)
     if (state.list === 'error') {
       setError(true)
-      console.log("holi")
+      console.log('holi')
     } else {
       setError(false)
     }
@@ -563,7 +563,7 @@ function FilteringTerms (props) {
                                 className='buttonAlphanum'
                                 onClick={handdleInclude}
                               >
-                                Include
+                                <ion-icon name='add-circle'></ion-icon>
                               </button>
                             </div>
                           </tr>

diff --git a/frontend/src/components/Footer/Footer.css b/frontend/src/components/Footer/Footer.css
@@ -121,7 +121,7 @@ ion-icon {
   }
 
   ion-icon {
-    font-size: 24px;
+    font-size: 28px;
   }
 
   .social-icon__item {
@@ -224,3 +224,18 @@ ion-icon {
     margin-bottom: 10px;
   }
 }
+
+@media (max-width: 350px) {
+  .footerContainer {
+    background-color: #3d72a6;
+    height: 40vh;
+    position: relative;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    text-align: center;
+    justify-content: center;
+  }
+}
diff --git a/frontend/src/components/Footer/Footer.js b/frontend/src/components/Footer/Footer.js
@@ -149,7 +149,7 @@ function Footer (props) {
                 to='/sign-in-options'
                 className='social-icon__link'
               >
-                <ion-icon name='log-out-outline'></ion-icon>
+                <ion-icon name='log-out-outline' ></ion-icon>
               </NavLink>
               <NavLink
                 exact

diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js
@@ -26,7 +26,7 @@ function VariantsResults (props) {
   const [queryArray, setQueryArray] = useState([])
   const [beaconsList, setBeaconsList] = useState([])
 
-  const [limit, setLimit] = useState(10)
+  const [limit, setLimit] = useState(0)
   const [skip, setSkip] = useState(0)
 
   const [showVariantsResults, setShowVariantsResults] = useState(false)

diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
@@ -62,7 +62,7 @@ function Layout (props) {
 
   const [showFilteringTerms, setShowFilteringTerms] = useState(false)
   const [filteringTerms, setFilteringTerms] = useState(false)
-  const [filteringTermsButton,  setShowFilteringTermsButton] = useState(false)
+  const [filteringTermsButton, setShowFilteringTermsButton] = useState(false)
   const [showVariants, setShowVariants] = useState(false)
 
   const [showResultsVariants, setShowResultsVariants] = useState(true)
@@ -313,10 +313,15 @@ function Layout (props) {
   }
 
   const handleRangeExample = e => {
-    setAlternateBases2('A')
-    setRefBases2('G')
-    setStart2('16050114')
-    setEnd('16050115')
+    setAlternateBases2('CTT')
+    setRefBases2('C')
+    setStart2('16055848')
+    setEnd('16055849')
+    setAssemblyId2('GRCh38')
+    setRefName2('22')
+    setVariantMinLength('2')
+    setVariantMaxLength('3')
+
   }
 
   const handleGeneExample = e => {
@@ -325,7 +330,7 @@ function Layout (props) {
   }
 
   useEffect(() => {
-
+    setError('')
     if (props.collection === 'Individuals') {
       setPlaceholder('filtering term comma-separated, ID><=value')
       setExtraIndividuals(true)
@@ -365,17 +370,15 @@ function Layout (props) {
             if (res.data.response.filteringTerms !== undefined) {
               setFilteringTerms(res)
               setResults(null)
-            } else {
-              setError('No filtering terms now available')
-            }
+            } 
             if (res !== null) {
               res.data.response.filteringTerms.forEach(element => {
                 if (element.type !== 'custom') {
                   arrayFilteringTerms.push(element.id)
                   arrayFilteringTermsQE.push(element)
                 }
               })
-    
+
               setstate({
                 query: '',
                 list: arrayFilteringTerms
@@ -471,8 +474,6 @@ function Layout (props) {
             setTimeOut(true)
           }
         }
-
-
       } catch (error) {
         console.log(error)
       }
@@ -711,12 +712,18 @@ function Layout (props) {
                     </div>
                   </div>
                 )}
-              {props.collection !== '' && showBar === true && filteringTermsButton && (
-                <button className='filters' onClick={handleSeeFilteringTerms}>Filtering Terms </button>
-              )}
-               {props.collection !== '' && showBar === true && !filteringTermsButton && (
-                <button className='filters'>Filtering Terms </button>
-              )}
+              {props.collection !== '' &&
+                showBar === true &&
+                filteringTermsButton && (
+                  <button className='filters' onClick={handleSeeFilteringTerms}>
+                    Filtering Terms{' '}
+                  </button>
+                )}
+              {props.collection !== '' &&
+                showBar === true &&
+                !filteringTermsButton && (
+                  <button className='filters'>Filtering Terms </button>
+                )}
             </div>
           </div>
         )}
@@ -758,7 +765,9 @@ function Layout (props) {
                 </div>
               </div>
 
-              <button className='filters' onClick={handleSeeFilteringTerms}>Filtering Terms</button>
+              <button className='filters' onClick={handleSeeFilteringTerms}>
+                Filtering Terms
+              </button>
             </div>
           </div>
         )}
@@ -1261,7 +1270,7 @@ function Layout (props) {
                       Query example
                     </button>
                     <div>
-                      <label className='labelVariants'>AssemblyID*</label>
+                      <label className='labelVariants'>AssemblyID</label>
                       <input
                         className='inputVariants'
                         type='text'
@@ -1270,7 +1279,7 @@ function Layout (props) {
                       ></input>
                     </div>
                     <div>
-                      <label className='labelVariants'>Reference name*</label>
+                      <label className='labelVariants'>Reference name</label>
                       <input
                         className='inputVariants'
                         type='text'
@@ -1280,7 +1289,7 @@ function Layout (props) {
                     </div>
                     <div>
                       <label className='labelVariants'>
-                        Start (single value)*
+                        Start (single value)
                       </label>
                       <input
                         className='inputVariants'
@@ -1299,7 +1308,7 @@ function Layout (props) {
                       ></input>
                     </div>
                     <div>
-                      <label className='labelVariants'>alternateBases*</label>
+                      <label className='labelVariants'>alternateBases</label>
                       <input
                         className='inputVariants'
                         type='text'
@@ -1325,7 +1334,7 @@ function Layout (props) {
                       Query example
                     </button>
                     <div>
-                      <label className='labelVariants'>AssemblyID*</label>
+                      <label className='labelVariants'>AssemblyID</label>
                       <input
                         className='inputVariants'
                         type='text'
@@ -1334,7 +1343,7 @@ function Layout (props) {
                       ></input>
                     </div>
                     <div>
-                      <label className='labelVariants'>Reference name*</label>
+                      <label className='labelVariants'>Reference name</label>
                       <input
                         className='inputVariants'
                         type='text'
@@ -1344,7 +1353,7 @@ function Layout (props) {
                     </div>
                     <div>
                       <label className='labelVariants'>
-                        Start (single value)*
+                        Start (single value)
                       </label>
                       <input
                         className='inputVariants'
@@ -1355,7 +1364,7 @@ function Layout (props) {
                     </div>
                     <div>
                       <label className='labelVariants'>
-                        End (single value)*
+                        End (single value)
                       </label>
                       <input
                         className='inputVariants'
@@ -1450,7 +1459,7 @@ function Layout (props) {
                       Query example
                     </button>
                     <div>
-                      <label className='labelVariants'>Gene ID*</label>
+                      <label className='labelVariants'>Gene ID</label>
                       <input
                         className='inputVariants'
                         type='text'
@@ -1826,8 +1835,8 @@ function Layout (props) {
             setQuery={setQuery}
           />
         )}
-      
-        {timeOut === true && error && <h5>{error}</h5>}
+
+        {timeOut === true && error && showFilteringTerms && <h5>{error}</h5>}
       </div>
     </div>
   )