results per resultset

elixir-europe · Dec 12, 2023 · 2b94db2 · 2b94db2
1 parent 66e410e
commit 2b94db2
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 28 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -58,6 +58,13 @@ html {
   margin-top: 5px;
 }
 
+.containerTableResults {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
 .newSearchButton:hover {
   color: rgb(118, 151, 228);
 }
@@ -281,9 +288,10 @@ html {
   display: block;
   padding: 8px 4px;
   font-size: 12px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   -webkit-font-smoothing: antialiased;
-
 }
 
 .btn-3::before,

diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js
@@ -367,7 +367,7 @@ function BiosamplesResults (props) {
             </div>
           )}
           {show3 && logInRequired === false && !error && (
-            <div>
+            <div className='containerTableResults'>
               <TableResultsBiosamples
                 show={'full'}
                 results={results}
@@ -378,7 +378,7 @@ function BiosamplesResults (props) {
           {show3 && logInRequired === true && <h3>{messageLoginFullResp}</h3>}
           {show3 && error && <h3>&nbsp; {error} </h3>}
           {show2 && (
-            <div>
+            <div className='containerTableResults'>
               <TableResultsBiosamples
                 show={'count'}
                 results={results}
@@ -387,7 +387,7 @@ function BiosamplesResults (props) {
             </div>
           )}
           {show1 && (
-            <div>
+            <div className='containerTableResults'>
               <TableResultsBiosamples
                 show={'boolean'}
                 results={results}

diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -7,6 +7,8 @@
 .logoBeacon {
   height: 30px;
   margin-top: 7px;
+
+  padding-left: 10px;
 }
 
 #descriptionEGA {
@@ -41,7 +43,7 @@
   align-items: center;
   align-content: center;
   flex-direction: column;
-  background-color:#495782;
+  background-color: #495782;
   justify-content: center;
   border-radius: 8px;
 }
@@ -150,12 +152,13 @@
   color: rgba(12, 16, 64, 0.606);
   font-size: 12px;
   font-weight: 600;
-
 }
 
 .tittleResults h2 {
   height: 46px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
   color: rgba(12, 16, 64, 0.606);
   font-size: 12px;
   font-weight: 600;

diff --git a/frontend/src/components/Individuals/Individuals.css b/frontend/src/components/Individuals/Individuals.css
@@ -86,6 +86,7 @@ h3 {
 h4 {
   font-size: 12px;
   color: rgba(12, 16, 64, 0.606);
+  margin-left: 10px;
 }
 
 .selectGranularity h5 {

diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js
@@ -22,6 +22,9 @@ function IndividualsResults (props) {
   const [show2, setShow2] = useState(false)
   const [show3, setShow3] = useState(false)
 
+  const [resultsPerDataset, setResultsDataset] = useState([])
+  const [resultsNotPerDataset, setResultsNotPerDataset] = useState([])
+
   const [timeOut, setTimeOut] = useState(false)
 
   const [logInRequired, setLoginRequired] = useState(false)
@@ -283,24 +286,37 @@ function IndividualsResults (props) {
             setBoolean(false)
           } else {
             console.log(res.data.responseSummary.numTotalResults)
-            setNumberResults(res.data.responseSummary.numTotalResults)
-            setBoolean(res.data.responseSummary.exists)
+            //setNumberResults(res.data.responseSummary.numTotalResults)
+            //setBoolean(res.data.responseSummary.exists)
 
             res.data.response.resultSets.forEach((element, index) => {
-              if (res.data.response.resultSets[index].resultsCount > 0) {
-                console.log(res.data.response.resultSets[index].results.length)
+              if (element.id && element.id !== '') {
+                let arrayResultsPerDataset = [
+                  element.beaconId,
+                  element.id,
+                  element.exists,
+                  element.resultsCount
+                ]
+                resultsPerDataset.push(arrayResultsPerDataset)
+                console.log(resultsPerDataset)
+              }
+              console.log(element)
+              if (element.id === undefined || element.id === '') {
+                console.log(element)
+                let arrayResultsNoDatasets = [element.beaconId]
+                resultsNotPerDataset.push(arrayResultsNoDatasets)
+              }
+
+              if (res.data.response.resultSets[index].results){
                 res.data.response.resultSets[index].results.forEach(
                   (element2, index2) => {
                     let arrayResult = [
                       res.data.response.resultSets[index].beaconId,
                       res.data.response.resultSets[index].results[index2]
                     ]
                     results.push(arrayResult)
-                    console.log(arrayResult)
                   }
                 )
-
-                console.log(results)
               }
             })
           }
@@ -382,29 +398,34 @@ function IndividualsResults (props) {
             <h3>&nbsp; {error} </h3>
           )}
           {show3 && logInRequired === false && !error && (
-            <div>
+            <div className='containerTableResults'>
               <TableResultsIndividuals
                 show={'full'}
                 results={results}
+                resultsPerDataset={resultsPerDataset}
                 beaconsList={beaconsList}
               ></TableResultsIndividuals>
             </div>
           )}
           {show3 && logInRequired === true && <h3>{messageLoginFullResp}</h3>}
           {show3 && error && <h3>&nbsp; {error} </h3>}
           {show2 && (
-            <div>
+            <div className='containerTableResults'>
               <TableResultsIndividuals
                 show={'count'}
+                resultsPerDataset={resultsPerDataset}
+                resultsNotPerDataset={resultsNotPerDataset}
                 results={results}
                 beaconsList={beaconsList}
               ></TableResultsIndividuals>
             </div>
           )}
           {show1 && (
-            <div>
+            <div className='containerTableResults'>
               <TableResultsIndividuals
                 show={'boolean'}
+                resultsPerDataset={resultsPerDataset}
+                resultsNotPerDataset={resultsNotPerDataset}
                 results={results}
                 beaconsList={beaconsList}
               ></TableResultsIndividuals>

diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css
@@ -12,6 +12,30 @@
   overflow-inline: scroll;
 }
 
+.resultSetsButton {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.resultSetsButton h7 {
+  font-size: 12px;
+  margin-top: 6px;
+}
+
+.resultSetsButton h6 {
+  margin-top: 10px;
+}
+
+.tittleResults h7 {
+  font-size: 12px;
+  margin-top: 6px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 h6 {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js
@@ -37,6 +37,8 @@ function TableResultsIndividuals (props) {
   const [resultsSelected, setResultsSelected] = useState(props.results)
   const [resultsSelectedFinal, setResultsSelectedFinal] = useState([])
 
+  const [openDatasetArray, setOpenDataset] = useState([])
+
   const [editable, setEditable] = useState([])
 
   const [trigger, setTrigger] = useState(false)
@@ -51,6 +53,12 @@ function TableResultsIndividuals (props) {
     return gridFilteredSortedRowIdsSelector(apiRef)
   }
 
+  const handleClickDatasets = e => {
+    openDatasetArray.push(true)
+
+    const newArray = openDatasetArray.filter(a => a === e)
+  }
+
   const columns = [
     {
       field: 'id',
@@ -347,6 +355,9 @@ function TableResultsIndividuals (props) {
   }, [trigger, resultsSelectedFinal])
 
   useEffect(() => {
+
+    console.log(props)
+
     let count = 0
     props.beaconsList.forEach((element2, index2) => {
       console.log(element2.meta.beaconId)
@@ -388,17 +399,60 @@ function TableResultsIndividuals (props) {
                         src={result[0].response.organization.logoUrl}
                         alt={result[0].meta.beaconId}
                       />
+                      <h4>{result[0].response.organization.name}</h4>
                     </div>
-                    <h2>{result[0].response.organization.name}</h2>
-                    {result[2] === true && props.show === 'boolean' && (
-                      <h6>FOUND </h6>
-                    )}
-                    {result[2] === false && props.show === 'boolean' && (
-                      <h5 className='buttonResults'>NOT FOUND</h5>
-                    )}
-                    {props.show === 'count' && (
-                      <h6 className='buttonResults'>{result[1]} results</h6>
-                    )}
+
+                    {props.resultsPerDataset.map((element, index) => {
+                      return (
+                        <>
+                          {element[0] === result[0].meta.beaconId && (
+                            <div>
+                              <button
+                                onClick={handleClickDatasets(index)}
+                                className='resultSetsButton'
+                              >
+                                <h7>{element[1]}</h7>
+                              </button>
+                              {openDatasetArray === true &&
+                                element[2] === true &&
+                                props.show === 'boolean' && <h6>FOUND</h6>}
+                              {openDatasetArray === true &&
+                                element[2] === false &&
+                                props.show === 'boolean' && <h5>NOT FOUND</h5>}
+                              {props.show === 'count' && <h6>{element[3]}</h6>}
+                            </div>
+                          )}
+                        </>
+                      )
+                    })}
+
+                    {props.resultsNotPerDataset.map(element => {
+                      return (
+                        <>
+                          {result[2] === true && props.show === 'boolean' && element[0] === result[0].meta.beaconId &&  (
+                            <>
+                              <h7>No datasets available</h7>
+                              <h6>FOUND </h6>
+                            </>
+                          )}
+                          {result[2] === false && props.show === 'boolean' && element[0] === result[0].meta.beaconId &&  (
+                            <>
+                              <h7>No datasets available</h7>
+                              <h5 className='buttonResults'>NOT FOUND</h5>
+                            </>
+                          )}
+                          {props.show === 'count' && element[0] === result[0].meta.beaconId &&  (
+                            <>
+                              <h7>No datasets available</h7>
+                              <h6 className='buttonResults'>
+                                {result[1]} results
+                              </h6>
+                            </>
+                          )}
+                        </>
+                      )
+                    })}
+
                     <button
                       className='buttonResults'
                       onClick={() => {