From 44bf3823ecd9cad63be87b41afe5307c412ff917 Mon Sep 17 00:00:00 2001 From: Gemma Date: Wed, 20 Dec 2023 17:40:40 +0100 Subject: [PATCH 1/4] changes variants --- .../GenomicVariations/VariantsResults.js | 197 +++++++----- .../Individuals/IndividualsResults.js | 28 +- frontend/src/components/Layout/Layout.js | 293 +++++++++++++----- .../VariantResults/TableResultsVariant.js | 159 ++++++++-- 4 files changed, 484 insertions(+), 193 deletions(-) diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js index 0199b8b..4615f2d 100644 --- a/frontend/src/components/GenomicVariations/VariantsResults.js +++ b/frontend/src/components/GenomicVariations/VariantsResults.js @@ -30,6 +30,9 @@ function VariantsResults (props) { const { getStoredToken, authenticateUser } = useContext(AuthContext) + const [resultsPerDataset, setResultsDataset] = useState([]) + const [resultsNotPerDataset, setResultsNotPerDataset] = useState([]) + let queryStringTerm = '' const handleTypeResults1 = () => { setShow1(true) @@ -64,15 +67,6 @@ function VariantsResults (props) { } } - if (isAuthenticated) { - setLoginRequired(false) - } else { - setLoginRequired(true) - //setLoginRequired(false) - setMessageLoginCount('PLEASE LOG IN FOR GETTING THE NUMBER OF RESULTS') - setMessageLoginFullResp('PLEASE LOG IN FOR GETTING THE FULL RESPONSE') - } - try { let res = await axios.get(configData.API_URL + '/info') @@ -118,39 +112,51 @@ function VariantsResults (props) { } jsonData1 = JSON.stringify(jsonData1) - const token = auth.userData.access_token + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + + if (token === null) { + res = await axios.post( + configData.API_URL + '/g_variants', + jsonData1 + ) + } else { + const headers = { Authorization: `Bearer ${token}` } - const headers = { Authorization: `Bearer ${token}` } + res = await axios.post( + configData.API_URL + '/g_variants', + jsonData1, + { headers: headers } + ) + } - const res = await axios.post( - configData.API_URL + '/g_variants', - jsonData1, - { headers: headers } - ) - //const res = await axios.post( - //configData.API_URL + '/g_variants', - //jsonData1 - //) setTimeOut(true) - if (res.data.responseSummary.exists === false) { - setBoolean(false) + if (res.data.responseSummary.numTotalResults < 1) { + setError('No results. Please check the query and retry') setNumberResults(0) - setError('No results found. Please retry') + setBoolean(false) } else { res.data.response.resultSets.forEach((element, index) => { - res.data.response.resultSets[index].results.forEach( - (element2, index2) => { - let arrayResult = [ - res.data.response.resultSets[index].id, - res.data.response.resultSets[index].results[index2] - ] - results.push(arrayResult) - } - ) + if (res.data.response.resultSets[index].resultsCount > 0) { + 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) + } + ) + } }) - setBoolean(res.data.responseSummary.exists) + setNumberResults(res.data.responseSummary.numTotalResults) + setBoolean(res.data.responseSummary.exists) } } else { setShowVariantsResults(true) @@ -230,15 +236,28 @@ function VariantsResults (props) { } jsonData1 = JSON.stringify(jsonData1) - const token = auth.userData.access_token - - const headers = { Authorization: `Bearer ${token}` } - const res = await axios.post( - configData.API_URL + '/g_variants', - jsonData1, - { headers: headers } - ) - + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + + if (token === null) { + console.log('Querying without token') + res = await axios.post( + configData.API_URL + '/g_variants', + jsonData1 + ) + } else { + const headers = { Authorization: `Bearer ${token}` } + res = await axios.post( + configData.API_URL + '/g_variants', + jsonData1, + { headers: headers } + ) + } + setTimeOut(true) if ( res.data.responseSummary.numTotalResults < 1 || @@ -248,26 +267,32 @@ function VariantsResults (props) { setNumberResults(0) setBoolean(false) } else { - - props.setHideForm(true) - setNumberResults(res.data.responseSummary.numTotalResults) - setBoolean(res.data.responseSummary.exists) - - res.data.response.resultSets.forEach((element, index) => { + if (element.id && element.id !== '') { + let arrayResultsPerDataset = [ + element.beaconId, + element.id, + element.exists, + element.resultsCount + ] + resultsPerDataset.push(arrayResultsPerDataset) + } + + if (element.id === undefined || element.id === '') { + let arrayResultsNoDatasets = [element.beaconId] + resultsNotPerDataset.push(arrayResultsNoDatasets) + } + if (res.data.response.resultSets[index].results) { - if (res.data.response.resultSets[index].results.length === 0) { - } else { - 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) - } - ) - } + 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) + } + ) } }) } @@ -296,7 +321,7 @@ function VariantsResults (props) { )} - {timeOut && ( + {timeOut && error !== 'Connection error. Please retry' && (

Granularity:

@@ -311,10 +336,15 @@ function VariantsResults (props) {
- {show3 && logInRequired === false && error === '' && ( + {timeOut && error === 'Connection error. Please retry' && ( +

  {error}

+ )} + {show3 && logInRequired === false && !error && (
@@ -322,24 +352,31 @@ function VariantsResults (props) { {show3 && logInRequired === true && (

{messageLoginFullResp}

)} -
- {show1 && boolean &&

YES

} - {show1 && !boolean &&

NO

} - {show2 && logInRequired === false && numberResults !== 1 && ( -

{numberResults}   Results

- )} - {show2 && logInRequired === false && numberResults === 1 && ( -

{numberResults}   Result

- )} - {show2 && logInRequired === true && ( -

{messageLoginCount}

- )} - {show3 && error !== '' && ( -
- Please check the query and retry -
- )} -
+ {show3 && error &&

  {error}

} + + {show2 && ( +
+ +
+ )} + + {show1 && ( +
+ +
+ )}
)} diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js index 823575d..92356d9 100644 --- a/frontend/src/components/Individuals/IndividualsResults.js +++ b/frontend/src/components/Individuals/IndividualsResults.js @@ -201,13 +201,31 @@ function IndividualsResults (props) { } setTimeOut(true) - if (res.data.responseSummary.numTotalResults < 1) { + if ( + res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined + ) { setError('No results. Please check the query and retry') setNumberResults(0) setBoolean(false) } else { res.data.response.resultSets.forEach((element, index) => { - if (res.data.response.resultSets[index].resultsCount > 0) { + if (element.id && element.id !== '') { + let arrayResultsPerDataset = [ + element.beaconId, + element.id, + element.exists, + element.resultsCount + ] + resultsPerDataset.push(arrayResultsPerDataset) + } + + if (element.id === undefined || element.id === '') { + 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 = [ @@ -219,10 +237,10 @@ function IndividualsResults (props) { ) } }) - - setNumberResults(res.data.responseSummary.numTotalResults) - setBoolean(res.data.responseSummary.exists) } + + + } else { var jsonData2 = { meta: { diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js index 79b70b4..56032f3 100644 --- a/frontend/src/components/Layout/Layout.js +++ b/frontend/src/components/Layout/Layout.js @@ -795,94 +795,217 @@ function Layout (props) { )} {showVariants && showBar === false && hideForm === false && ( -
- - +
+
+ + - - + + - - - -
-
-

6A. Märzen

-

- Overall Impression: An elegant, malty German - amber lager with a clean, rich, toasty and bready malt flavor, - restrained bitterness, and a dry finish that encourages - another drink. The overall malt impression is soft, elegant, - and complex, with a rich aftertaste that is never cloying or - heavy. -

-

- History: As the name suggests, brewed as a - stronger “March beer” in March and lagered in cold caves over - the summer. Modern versions trace back to the lager developed - by Spaten in 1841, contemporaneous to the development of - Vienna lager. However, the Märzen name is much older than - 1841; the early ones were dark brown, and in Austria the name - implied a strength band (14 °P) rather than a style. The - German amber lager version (in the Viennese style of the time) - was first served at Oktoberfest in 1872, a tradition that - lasted until 1990 when the golden Festbier was adopted as the - standard festival beer. -

-
-
-

6B. Rauchbier

-

- Overall Impression: An elegant, malty German - amber lager with a balanced, complementary beechwood smoke - character. Toasty-rich malt in aroma and flavor, restrained - bitterness, low to high smoke flavor, clean fermentation - profile, and an attenuated finish are characteristic. -

-

- History: A historical specialty of the city - of Bamberg, in the Franconian region of Bavaria in Germany. - Beechwood-smoked malt is used to make a Märzen-style amber - lager. The smoke character of the malt varies by maltster; - some breweries produce their own smoked malt (rauchmalz). -

-
-
-

6C. Dunkles Bock

-

- Overall Impression: A dark, strong, malty - German lager beer that emphasizes the malty-rich and somewhat - toasty qualities of continental malts without being sweet in - the finish. -

-

- History: Originated in the Northern German - city of Einbeck, which was a brewing center and popular - exporter in the days of the Hanseatic League (14th to 17th - century). Recreated in Munich starting in the 17th century. - The name “bock” is based on a corruption of the name “Einbeck” - in the Bavarian dialect, and was thus only used after the beer - came to Munich. “Bock” also means “Ram” in German, and is - often used in logos and advertisements. -

-
+ + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + {' '} +
+
+

OR

+
+
+ + +
+
+ + +
+
+
+
+

OR

+ + +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
-
+
)} diff --git a/frontend/src/components/Results/VariantResults/TableResultsVariant.js b/frontend/src/components/Results/VariantResults/TableResultsVariant.js index ebbe2bc..144e79a 100644 --- a/frontend/src/components/Results/VariantResults/TableResultsVariant.js +++ b/frontend/src/components/Results/VariantResults/TableResultsVariant.js @@ -18,6 +18,9 @@ function TableResultsVariant (props) { const [beaconsArrayResultsOrdered, setBeaconsArrayResultsOrdered] = useState( [] ) + const [triggerArray, setTriggerArray] = useState([]) + + const [openDatasetArray, setOpenDataset] = useState([]) const copyData = e => { navigator.clipboard @@ -31,13 +34,29 @@ function TableResultsVariant (props) { console.log('COPY DONE') } + const handleClickDatasets = e => { + triggerArray.forEach((element, index) => { + if (index !== e) { + triggerArray[index] = false + } + }) + openDatasetArray.forEach((element, index) => { + if (index !== e) { + triggerArray[index] = false + } + }) + + openDatasetArray[e] = true + triggerArray[e] = true + setTrigger(!trigger) + } + const handleSeeResults = e => { resultsSelected.forEach(element => { if (element[0] === e) { resultsSelectedFinal.push(element) } }) - setShowResults(true) setShowDatasets(false) setTrigger(true) @@ -50,7 +69,6 @@ function TableResultsVariant (props) { } useEffect(() => { - props.results.forEach((element, index) => { resultsJSON.push([ JSON.stringify(element[1], null, 2).replace('[', '').replace(']', '') @@ -93,28 +111,123 @@ function TableResultsVariant (props) { beaconsArrayResultsOrdered.length > 0 && beaconsArrayResultsOrdered.map(result => { return ( -
-
-
- {result[0].meta.beaconId} + <> + {props.show !== 'full' && ( +
+
+
+ {result[0].meta.beaconId} +

{result[0].response.organization.name}

+
+ + {props.resultsPerDataset.map((element, index) => { + return ( + <> + {element[0] === result[0].meta.beaconId && ( +
+ + {openDatasetArray[index] === true && + triggerArray[index] === true && + element[2] === true && + props.show === 'boolean' &&
FOUND
} + {openDatasetArray[index] === true && + triggerArray[index] === true && + element[2] === false && + props.show === 'boolean' && ( +
NOT FOUND
+ )} + {props.show === 'count' && + triggerArray[index] === true && ( +
{element[3]}
+ )} +
+ )} + + ) + })} + + {props.resultsNotPerDataset.map(element => { + return ( + <> + {result[2] === true && + props.show === 'boolean' && + element[0] === result[0].meta.beaconId && ( +
+ No datasets available +
FOUND
+
+ )} + {result[2] === false && + props.show === 'boolean' && + element[0] === result[0].meta.beaconId && ( +
+ No datasets available +
NOT FOUND
+
+ )} + {props.show === 'count' && + element[0] === result[0].meta.beaconId && ( +
+ No datasets available +
+ {result[1]} results +
+
+ )} + + ) + })} + + +
+
+ )} + + {props.show === 'full' && result[2] === true && ( +
+
+
+ {result[0].meta.beaconId} +

{result[0].response.organization.name}

+
+
+ +
+
-

{result[0].response.organization.name}

- {result[2] === true &&
FOUND
} - {result[2] === false &&
NOT FOUND
} -

{result[1]} results

- -
-
+ )} + ) })}
From 6a0845e5ea5cb29a44dec30f518f46f175c02021 Mon Sep 17 00:00:00 2001 From: Gemma Date: Wed, 20 Dec 2023 17:41:56 +0100 Subject: [PATCH 2/4] css variants fixed --- .../components/Results/VariantResults/TableResultsVariant.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/Results/VariantResults/TableResultsVariant.js b/frontend/src/components/Results/VariantResults/TableResultsVariant.js index 144e79a..ada06cd 100644 --- a/frontend/src/components/Results/VariantResults/TableResultsVariant.js +++ b/frontend/src/components/Results/VariantResults/TableResultsVariant.js @@ -1,4 +1,6 @@ import './TableResultsVariant.css' +import '../IndividualsResults/TableResultsIndividuals.css' +import '../../Datasets/ResultsDatasets.css' import { useState, useEffect } from 'react' function TableResultsVariant (props) { From 2b1bf1d3aa6d21dff0a0f3c4f8b58236e6f1c3d2 Mon Sep 17 00:00:00 2001 From: Gemma Date: Thu, 21 Dec 2023 10:29:17 +0100 Subject: [PATCH 3/4] changes css --- frontend/src/App.css | 40 +++++++++++++++---- .../components/Datasets/ResultsDatasets.css | 12 +++++- 2 files changed, 42 insertions(+), 10 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 9bab1e4..08ec597 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -38,13 +38,8 @@ html { font-variant-caps: all-petite-caps; } -.modeVariants:hover { - color: white; - background-color: #e3eefe; - padding-left: 5px; - padding-right: 5px; - border-radius: 3px; - margin-left: 10px; +.modeVariants:hover h2{ + color: rgb(236, 149, 0)!important; } .variantsFilters { @@ -377,7 +372,7 @@ html { .buttonVariants:hover { margin-top: 12px; - margin-right: -9px; + margin-right: -2px; margin-bottom: 20px; font-weight: 600; color: rgb(118, 151, 228); @@ -1012,6 +1007,35 @@ h5 { text-underline-offset: 1px; } + .inputVariants { + height: 18px; + border: 1.5px solid #dfdfdf; + border-radius: 2px; + margin-bottom: 30px; + font-size: 12px; + } + + .labelVariants { + font-size: 11.5px; + margin-bottom: 18px; + margin-right: 4px; + margin-left: 18px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + } + + .buttonVariants { + margin-top: 12px; + margin-bottom: 20px; + box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px, + rgba(179, 179, 179, 0.22) 0px 1px 1px; + padding: 5px; + cursor: pointer; + font-size: 12px; + margin-right: 7px; + } + .switchDescendants h3 { color: #e16e00; text-transform: uppercase; diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css index 51c1a6b..221a2df 100644 --- a/frontend/src/components/Datasets/ResultsDatasets.css +++ b/frontend/src/components/Datasets/ResultsDatasets.css @@ -141,7 +141,7 @@ overflow-y: scroll; } -.seeResultsContainer{ +.seeResultsContainer { height: 100%; display: flex; align-items: center; @@ -193,7 +193,7 @@ background: #c8d4e6; } -.tittle4{ +.tittle4 { display: flex; flex-direction: row; justify-content: center; @@ -231,6 +231,14 @@ width: 100vw; } + .datasetCard p { + font-size: 11px; + font-weight: normal; + color: rgb(61 60 60); + line-height: 18px; + margin-top: -5px; + } + .datasetCardResults { /* width: 20vw; */ height: 247px; From a588cd80158b19fa79e613ce30c0a12c248cdb83 Mon Sep 17 00:00:00 2001 From: Gemma Date: Thu, 21 Dec 2023 12:03:47 +0100 Subject: [PATCH 4/4] changes index js --- frontend/Dockerfile | 1 - frontend/src/config.json | 2 +- frontend/src/index.js | 4 ++-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 44911f7..0b916d8 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -12,7 +12,6 @@ COPY yarn.lock . COPY public ./public COPY src ./src - RUN yarn install --production diff --git a/frontend/src/config.json b/frontend/src/config.json index b144dac..d994725 100644 --- a/frontend/src/config.json +++ b/frontend/src/config.json @@ -1,5 +1,5 @@ { "API_URL": "https://beacon-network-backend-test.ega-archive.org/beacon-network/v2.0.0", - "REDIRECT_URL": "https://beacon-network-demo.ega-archive.org/", + "REDIRECT_URL": "http://localhost:3000/", "KEYCLOAK_URL": "https://beacon-network-demo2.ega-archive.org" } \ No newline at end of file diff --git a/frontend/src/index.js b/frontend/src/index.js index 29a49d7..8f88562 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; +import configData from './config.json' import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; @@ -8,7 +9,6 @@ import { AuthProviderWrapper } from './components/context/AuthContext'; import { AuthProvider } from 'oidc-react'; - const root = ReactDOM.createRoot(document.getElementById('root')); const oidcConfig = { @@ -25,7 +25,7 @@ const oidcConfig = { automaticSilentRenew: true, redirectUri: process.env.NODE_ENV === 'development' - && 'https://beacon-network-demo.ega-archive.org/', + && configData.REDIRECT_URL, scope: 'openid profile email ga4gh_passport_v1 offline_access', revokeAccessTokenOnSignout: true };