From 5bed3c9c1a2910a0fe6cf25bbe87dcdf8bc13084 Mon Sep 17 00:00:00 2001 From: Gemma Date: Wed, 14 Feb 2024 13:12:55 +0100 Subject: [PATCH] show label in the query instead of ontology --- frontend/src/App.css | 66 +++-- .../FilteringTerms/FilteringTerms.css | 2 +- frontend/src/components/Layout/Layout.js | 271 +++++++++--------- 3 files changed, 181 insertions(+), 158 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 1b8de9a..8069d92 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -499,20 +499,26 @@ html { } .exampleQuery:hover .text-example { + margin-right: 14px; display: flex; align-items: center; justify-content: center; border: solid #c8c8c8; background-color: #c8c8c8; color: black; + width: -moz-fit-content; width: fit-content; border-radius: 6px; - margin-left: 10px; - padding: 1px; + margin-left: -98px; + + padding-top: 1px; + padding-bottom: 1px; + padding-left: 2px; + padding-right: 2px; } .examplesQueriesList { - width: 111px; + width: fit-content; display: flex; flex-direction: column; justify-content: center; @@ -692,7 +698,6 @@ hr { sans-serif; text-transform: uppercase; font-size: 12px; - margin-left: 33px; } .exampleQueries:hover { @@ -700,9 +705,13 @@ hr { } .bulbExample { + margin-right: 48px; + padding-right: 19px; + border-right: 1.7px solid #f1f1f1; display: flex; + justify-content: center; align-items: center; - border-left: 1.7px solid #f1f1f1; + flex-direction: row-reverse; } .helpButton { @@ -780,10 +789,10 @@ hr { .example { display: flex; align-items: center; - margin-right: -117px; + /* margin-right: -117px; */ margin-top: 22px; margin-bottom: 22px; - flex-direction: row-reverse; + flex-direction: row; align-content: space-between; justify-content: center; } @@ -803,7 +812,7 @@ hr { padding: 5px; cursor: pointer; display: flex; - flex-direction: row-reverse; + flex-direction: row; align-content: center; justify-content: center; align-items: center; @@ -1063,8 +1072,8 @@ h5 { sans-serif; text-transform: uppercase; font-size: 12px; - margin-right: 36px; - margin-left: 27px; + margin-right: 32px; + margin-left: -20px; } .filters:hover { @@ -1177,7 +1186,7 @@ h5 { padding: 5px; cursor: pointer; display: flex; - flex-direction: row-reverse; + flex-direction: row; align-content: center; justify-content: center; align-items: center; @@ -1264,10 +1273,8 @@ h5 { 'Helvetica Neue', sans-serif; text-transform: uppercase; font-size: 10px; - margin-left: 2px !important; - margin-right: 7px !important; - /* margin-right: 36px; */ - /* margin-left: 27px; */ + margin-right: 3px; + margin-left: -23px; } .container-fluid { @@ -1285,7 +1292,7 @@ h5 { margin-right: 0px; margin-top: 22px; margin-bottom: 22px; - flex-direction: row-reverse; + flex-direction: row; align-content: space-between; justify-content: center; } @@ -1327,13 +1334,14 @@ h5 { height: 27px; } .bulbExample { + margin-right: 48px; + padding-right: 19px; + border-right: 1.7px solid #f1f1f1; display: flex; - border-left: 1.7px solid #f1f1f1; - flex-direction: column; - justify-content: center; - align-content: center; - align-items: center; - width: 112px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + text-transform: uppercase; } .searchIcon { width: 26px; @@ -1364,7 +1372,7 @@ h5 { justify-content: center; align-content: center; align-items: flex-start; - width: 189px; + width: fit-content; border-radius: 5px; font-size: 9px; margin-left: 10px !important; @@ -1372,12 +1380,14 @@ h5 { } .bulbExample { + margin-right: 49px; display: flex; - border-left: 1.7px solid #f1f1f1; - flex-direction: column; - justify-content: center; - align-content: center; - align-items: center; + padding-right: 13px; + border-right: 1.7px solid #f1f1f1; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + text-transform: uppercase; } .NavlinkVerifier { diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.css b/frontend/src/components/FilteringTerms/FilteringTerms.css index cf5bf50..025b070 100644 --- a/frontend/src/components/FilteringTerms/FilteringTerms.css +++ b/frontend/src/components/FilteringTerms/FilteringTerms.css @@ -35,7 +35,7 @@ thead { } .tableWrapper { - height: 70vh; + height: 100vh; width: 90vw; overflow: scroll; } diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js index 60828b3..767e724 100644 --- a/frontend/src/components/Layout/Layout.js +++ b/frontend/src/components/Layout/Layout.js @@ -181,125 +181,26 @@ function Layout (props) { setIsOpenModal6(true) } - const handleFilteringTerms = async e => { - setTimeOut(false) - if (props.collection === 'Individuals') { - try { - let res = await axios.get( - configData.API_URL + '/individuals/filtering_terms' - ) - setTimeOut(true) - - if (res.data.response.filteringTerms !== undefined) { - setFilteringTerms(res) - setResults(null) - } else { - setError('No filtering terms now available') - } - } catch (error) { - setError('No filtering terms now available for Individuals collection') - setTimeOut(true) - } - } else if (props.collection === 'Cohorts') { - try { - let res = await axios.get( - configData.API_URL + '/cohorts/filtering_terms' - ) - setTimeOut(true) - if (res.data.response.filteringTerms !== undefined) { - setFilteringTerms(res) - setResults(null) - } else { - setError('No filtering terms now available') - } - } catch (error) { - setError('No filtering terms now available for Cohorts collection') - setTimeOut(true) - } - } else if (props.collection === 'Variant') { - try { - let res = await axios.get( - configData.API_URL + '/g_variants/filtering_terms' - ) - setTimeOut(true) - if (res.data.response.filteringTerms !== undefined) { - setFilteringTerms(res) - setResults(null) - } else { - setError('No filtering terms now available') - } - } catch (error) { - setError('No filtering terms now available for Variant collection') - setTimeOut(true) - } - } else if (props.collection === 'Analyses') { - try { - let res = await axios.get( - configData.API_URL + '/analyses/filtering_terms' - ) - setTimeOut(true) - if (res.data.response.filteringTerms !== undefined) { - setFilteringTerms(res) - setResults(null) - } else { - setError('No filtering terms now available') - } - } catch (error) { - setError('No filtering terms now available for Analyses collection') - setTimeOut(true) - } - } else if (props.collection === 'Runs') { - try { - let res = await axios.get(configData.API_URL + '/runs/filtering_terms') - setTimeOut(true) - if (res.data.response.filteringTerms !== undefined) { - setFilteringTerms(res) - setResults(null) - } else { - setError('No filtering terms now available') - } - } catch (error) { - setError('No filtering terms now available for Runs collection') - setTimeOut(true) - } - } else if (props.collection === 'Biosamples') { - try { - let res = await axios.get( - configData.API_URL + '/biosamples/filtering_terms' - ) - setTimeOut(true) - if (res.data.response.filteringTerms !== undefined) { - setFilteringTerms(res) - setResults(null) - } else { - setTimeOut(true) - setError('No filtering terms now available') - } - } catch (error) { - setError('No filtering terms now available for Biosamples collection') - setTimeOut(true) - } - } - + const handleSeeFilteringTerms = () => { setShowFilteringTerms(true) } const handleExQueries = () => { if (props.collection === 'Individuals') { setExampleQ([ + ['female', 'NCIT:C16576'], + ['African', 'NCIT:C42331'], + ['Cardiovascular Neoplasm', 'NCIT:C4784'], ['Weight>100'], - ['NCIT:C16576', 'female'], ['geographicOrigin=%land%'], - ['geographicOrigin!England'], - ['NCIT:C42331', 'African'], - ['NCIT:C4784', 'Cardiovascular Neoplasm'] + ['geographicOrigin!England'] ]) } else if (props.collection === 'Variant') { setExampleQ([['GENO:GENO_0000458']]) } else if (props.collection === 'Biosamples') { setExampleQ([ - ['UBERON:0000178', 'blood'], - ['EFO:0009654', 'reference sample'], + ['blood', 'UBERON:0000178'], + ['reference sample', 'EFO:0009654'], ['sampleOriginType:blood'] ]) } else if (props.collection === 'Runs') { @@ -451,22 +352,125 @@ function Layout (props) { const fetchData = async () => { //for query expansion try { - let res = await axios.get( - configData.API_URL + '/individuals/filtering_terms' - ) - if (res !== null) { - res.data.response.filteringTerms.forEach(element => { - if (element.type !== 'custom') { - arrayFilteringTerms.push(element.id) - arrayFilteringTermsQE.push(element) + setTimeOut(false) + if (props.collection === 'Individuals') { + try { + let res = await axios.get( + configData.API_URL + '/individuals/filtering_terms' + ) + setTimeOut(true) + + if (res.data.response.filteringTerms !== undefined) { + setFilteringTerms(res) + setResults(null) + } else { + setError('No filtering terms now available') } - }) - - setstate({ - query: '', - list: arrayFilteringTerms - }) + if (res !== null) { + res.data.response.filteringTerms.forEach(element => { + if (element.type !== 'custom') { + arrayFilteringTerms.push(element.id) + arrayFilteringTermsQE.push(element) + } + }) + + setstate({ + query: '', + list: arrayFilteringTerms + }) + } + } catch (error) { + setError( + 'No filtering terms now available for Individuals collection' + ) + setTimeOut(true) + } + } else if (props.collection === 'Cohorts') { + try { + let res = await axios.get( + configData.API_URL + '/cohorts/filtering_terms' + ) + setTimeOut(true) + if (res.data.response.filteringTerms !== undefined) { + setFilteringTerms(res) + setResults(null) + } else { + setError('No filtering terms now available') + } + } catch (error) { + setError('No filtering terms now available for Cohorts collection') + setTimeOut(true) + } + } else if (props.collection === 'Variant') { + try { + let res = await axios.get( + configData.API_URL + '/g_variants/filtering_terms' + ) + setTimeOut(true) + if (res.data.response.filteringTerms !== undefined) { + setFilteringTerms(res) + setResults(null) + } else { + setError('No filtering terms now available') + } + } catch (error) { + setError('No filtering terms now available for Variant collection') + setTimeOut(true) + } + } else if (props.collection === 'Analyses') { + try { + let res = await axios.get( + configData.API_URL + '/analyses/filtering_terms' + ) + setTimeOut(true) + if (res.data.response.filteringTerms !== undefined) { + setFilteringTerms(res) + setResults(null) + } else { + setError('No filtering terms now available') + } + } catch (error) { + setError('No filtering terms now available for Analyses collection') + setTimeOut(true) + } + } else if (props.collection === 'Runs') { + try { + let res = await axios.get( + configData.API_URL + '/runs/filtering_terms' + ) + setTimeOut(true) + if (res.data.response.filteringTerms !== undefined) { + setFilteringTerms(res) + setResults(null) + } else { + setError('No filtering terms now available') + } + } catch (error) { + setError('No filtering terms now available for Runs collection') + setTimeOut(true) + } + } else if (props.collection === 'Biosamples') { + try { + let res = await axios.get( + configData.API_URL + '/biosamples/filtering_terms' + ) + setTimeOut(true) + if (res.data.response.filteringTerms !== undefined) { + setFilteringTerms(res) + setResults(null) + } else { + setTimeOut(true) + setError('No filtering terms now available') + } + } catch (error) { + setError( + 'No filtering terms now available for Biosamples collection' + ) + setTimeOut(true) + } } + + } catch (error) { console.log(error) } @@ -479,6 +483,8 @@ function Layout (props) { }, []) const onSubmit = async event => { + console.log(query) + console.log(value) event.preventDefault() setIsSub(true) @@ -683,8 +689,8 @@ function Layout (props) { className='exampleQuery' onClick={() => { setPlaceholder(`${result[0]}`) - setQuery(`${result[0]}`) - setValue(`${result[0]}`) + setQuery(`${[result[0]]}`) + setValue(`${result[1]}`) setExampleQ([]) }} > @@ -703,9 +709,7 @@ function Layout (props) { )} {props.collection !== '' && showBar === true && ( - + )} @@ -732,7 +736,7 @@ function Layout (props) { onClick={() => { setPlaceholder(`${result[0]}`) setQuery(`${result[0]}`) - setValue(`${result[0]}`) + setValue(`${result[1]}`) setExampleQ([]) }} > @@ -748,9 +752,7 @@ function Layout (props) { - + )} @@ -1583,6 +1585,7 @@ function Layout (props) { {isSubmitted && results === 'Individuals' && triggerQuery && (