Merge pull request #215 from EGA-archive/frontend

Frontend
EGA-archive · Sep 25, 2023 · 7bc42d9 · 7bc42d9
2 parents fa0961c + 5b08315
commit 7bc42d9
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 47 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -166,8 +166,8 @@ html {
   margin-top: -1px;
 }
 .searchIcon:hover {
-  width: 40px;
-  margin-top: -4px;
+  width: 37px;
+  margin-top: -3px;
 }
 
 .forwardIcon {
@@ -955,7 +955,6 @@ h5 {
     display: flex;
     align-content: center;
     justify-content: center;
-    width: 70%;
   }
 
   .searchButton {

diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js
@@ -10,7 +10,7 @@ import TableResultsVariant from '../Results/VariantResults/TableResultsVariant'
 
 function VariantsResults (props) {
   const [error, setError] = useState('')
-
+  const [timeOut, setTimeOut] = useState(false)
   const [logInRequired, setLoginRequired] = useState(true)
   const [messageLogin, setMessageLogin] = useState('')
   const [results, setResults] = useState([])
@@ -22,6 +22,8 @@ function VariantsResults (props) {
   const [boolean, setBoolean] = useState(false)
   const [arrayFilter, setArrayFilter] = useState([])
 
+  const [showVariantsResults, setShowVariantsResults] = useState(false)
+
   let queryStringTerm = ''
   const handleTypeResults1 = () => {
     setShow1(true)
@@ -49,11 +51,13 @@ function VariantsResults (props) {
 
   useEffect(() => {
     const apiCall = async () => {
+
       if (isAuthenticated) {
         setLoginRequired(false)
 
         try {
           if (props.showBar === true) {
+            setShowVariantsResults(true)
             if (props.query.includes(',')) {
               queryStringTerm = props.query.split(',')
 
@@ -89,25 +93,31 @@ function VariantsResults (props) {
               }
             }
             jsonData1 = JSON.stringify(jsonData1)
-
+            console.log(jsonData1)
             // const token = auth.userData.access_token
             // console.log(token)
             //const headers = { 'Authorization': `Bearer ${token}` }
             // const res = await axios.post("https://beacons.bsc.es/beacon-network/v2.0.0/g_variants", jsonData1, {headers: headers})
+            // const res = await axios.post(
+            // configData.API_URL + '/g_variants',
+            //jsonData1
+            // )
             const res = await axios.post(
-              configData.API_URL + '/g_variants',
+              'https://beacon-apis-test.ega-archive.org/api/g_variants',
               jsonData1
             )
+            setTimeOut(true)
             console.log(res)
             if (res.data.responseSummary.exists === false) {
               setBoolean(false)
               setNumberResults(0)
               setError('No results found. Please retry')
             }
           } else {
+            setShowVariantsResults(false)
             //   referenceName={referenceName} start={start} end={end} variantType={variantType} alternateBases={alternateBases} referenceBases={referenceBases} aminoacid={aminoacid} geneID={geneID} />
             //    </div>
-
+       
             var requestParameters = {}
 
             if (props.referenceName !== '') {
@@ -217,6 +227,7 @@ function VariantsResults (props) {
             }
           }
         } catch (error) {
+          setTimeOut(true)
           console.log(error)
           setError(error)
         }
@@ -226,51 +237,66 @@ function VariantsResults (props) {
       }
     }
     apiCall()
-  }, [])
+  }, [props.showBar])
 
   return (
-    <div className='resultsOptions'>
-      {logInRequired === true && (
-        <div className='variantsResultsError'>
-          <h3>{messageLogin}</h3>
-        </div>
-      )}
-      {logInRequired === false && (
-        <div>
-          <div className='selectGranularity'>
-            <h4>Granularity:</h4>
-            <button className='typeResults' onClick={handleTypeResults1}>
-              <h5>Boolean</h5>
-            </button>
-            <button className='typeResults' onClick={handleTypeResults2}>
-              <h5>Count</h5>
-            </button>
-            <button className='typeResults' onClick={handleTypeResults3}>
-              <h5>Full response</h5>
-            </button>
-          </div>
-
-          {show3 && error === '' && (
-            <div>
-              <TableResultsVariant results={results}></TableResultsVariant>
+    <div>
+      {showVariantsResults === true && (
+        <div className='resultsOptions'>
+          {logInRequired === true && (
+            <div className='variantsResultsError'>
+              <h3>{messageLogin}</h3>
+            </div>
+          )}
+          {timeOut === false && (
+            <div className='loaderLogo'>
+              <div className='loader2'>
+                <div id='ld3'>
+                  <div></div>
+                  <div></div>
+                  <div></div>
+                </div>
+              </div>
             </div>
           )}
+          {logInRequired === false && timeOut && (
+            <div>
+              <div className='selectGranularity'>
+                <h4>Granularity:</h4>
+                <button className='typeResults' onClick={handleTypeResults1}>
+                  <h5>Boolean</h5>
+                </button>
+                <button className='typeResults' onClick={handleTypeResults2}>
+                  <h5>Count</h5>
+                </button>
+                <button className='typeResults' onClick={handleTypeResults3}>
+                  <h5>Full response</h5>
+                </button>
+              </div>
+
+              {show3 && error === '' && (
+                <div>
+                  <TableResultsVariant results={results}></TableResultsVariant>
+                </div>
+              )}
 
-          <div className='resultsContainer'>
-            {show1 && boolean && <p className='p1'>YES</p>}
-            {show1 && !boolean && <p className='p1'>NO</p>}
-            {show2 && numberResults !== 1 && (
-              <p className='p1'>{numberResults} &nbsp; Results</p>
-            )}
-            {show2 && numberResults === 1 && (
-              <p className='p1'>{numberResults} &nbsp; Result</p>
-            )}
-            {show3 && error !== '' && (
-              <h5 className='variantsResultsError'>
-                Please check the query and retry
-              </h5>
-            )}
-          </div>
+              <div className='resultsContainer'>
+                {show1 && boolean && <p className='p1'>YES</p>}
+                {show1 && !boolean && <p className='p1'>NO</p>}
+                {show2 && numberResults !== 1 && (
+                  <p className='p1'>{numberResults} &nbsp; Results</p>
+                )}
+                {show2 && numberResults === 1 && (
+                  <p className='p1'>{numberResults} &nbsp; Result</p>
+                )}
+                {show3 && error !== '' && (
+                  <h5 className='variantsResultsError'>
+                    Please check the query and retry
+                  </h5>
+                )}
+              </div>
+            </div>
+          )}
         </div>
       )}
     </div>

diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
@@ -60,6 +60,8 @@ function Layout (props) {
 
   const [showVariants, setShowVariants] = useState(false)
 
+  const [showResultsVariants, setShowResultsVariants] = useState(true)
+
   const [trigger, setTrigger] = useState(false)
   const {
     storeToken,
@@ -376,6 +378,7 @@ function Layout (props) {
 
   const handleClick = () => {
     setShowBar(!showBar)
+    setShowResultsVariants(false)
   }
 
   const handleHideVariantsForm = e => {
@@ -1060,6 +1063,8 @@ function Layout (props) {
           <div>
             <VariantsResults
               query={query}
+              resultSets={resultSet}
+              showResultsVariants={showResultsVariants}
               setHideForm={setHideForm}
               showBar={showBar}
               aminoacid2={aminoacid2}