variant changes

EGA-archive · Sep 25, 2023 · 5b08315 · 5b08315
1 parent 0b84963
commit 5b08315
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 52 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -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
@@ -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(',')
 
@@ -110,9 +114,10 @@ function VariantsResults (props) {
               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 !== '') {
@@ -232,62 +237,66 @@ function VariantsResults (props) {
       }
     }
     apiCall()
-  }, [])
+  }, [props.showBar])
 
   return (
-    <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>
+      {showVariantsResults === true && (
+        <div className='resultsOptions'>
+          {logInRequired === true && (
+            <div className='variantsResultsError'>
+              <h3>{messageLogin}</h3>
             </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>
+          )}
+          {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>
 
-          <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>
+              {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>
+          )}
         </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 => {
@@ -1061,6 +1064,7 @@ function Layout (props) {
             <VariantsResults
               query={query}
               resultSets={resultSet}
+              showResultsVariants={showResultsVariants}
               setHideForm={setHideForm}
               showBar={showBar}
               aminoacid2={aminoacid2}