diff --git a/frontend/src/components/Layout/Layout2.js b/frontend/src/components/Layout/Layout2.js deleted file mode 100644 index e84b154a..00000000 --- a/frontend/src/components/Layout/Layout2.js +++ /dev/null @@ -1,1112 +0,0 @@ -import '../../App.css'; - -import FilteringTermsIndividuals from '../FilteringTerms/FilteringTerms'; -import Cohorts from '../Cohorts/Cohorts'; - -import ResultsDatasets from '../Dataset/BeaconInfo'; -import VariantsResults from '../GenomicVariations/VariantsResults'; - -import Select from 'react-select' -import React, { useState, useEffect } from 'react'; -import { AuthContext } from '../context/AuthContext'; -import { useContext } from 'react'; - -import Switch from '@mui/material/Switch'; -import MultiSwitch from 'react-multi-switch-toggle'; - -import axios from "axios"; - -import ReactModal from 'react-modal'; -import makeAnimated from 'react-select/animated'; - -import IndividualsResults from '../Individuals/IndividualsResults'; -import { LinearProgress } from '@mui/material'; - -function Layout(props) { - console.log(props) - const [error, setError] = useState(null) - - const [placeholder, setPlaceholder] = useState('') - - const [results, setResults] = useState(null) - const [query, setQuery] = useState(null) - const [exampleQ, setExampleQ] = useState([]) - - const [resultSet, setResultset] = useState("HIT") - - const [descendantTerm, setDescendantTerm] = useState('true') - - const [similarity, setSimilarity] = useState("Select") - - const [cohorts, setShowCohorts] = useState(false) - - const [ID, setId] = useState("") - const [operator, setOperator] = useState("") - const [valueFree, setValueFree] = useState("") - - const [value, setValue] = useState("") - - const [popUp, setPopUp] = useState(false) - - const [showButton, setShowButton] = useState(true) - - const [showFilteringTerms, setShowFilteringTerms] = useState(false) - const [filteringTerms, setFilteringTerms] = useState(false) - - const [showVariants, setShowVariants] = useState(false) - - const [trigger, setTrigger] = useState(false) - const { storeToken, refreshToken, getStoredToken, authenticateUser, setExpirationTime, setExpirationTimeRefresh } = useContext(AuthContext); - - const [showBar, setShowBar] = useState(true) - - const [isOpenModal1, setIsOpenModal1] = useState(false); - const [isOpenModal2, setIsOpenModal2] = useState(false); - const [isOpenModal4, setIsOpenModal4] = useState(false); - const [isOpenModal5, setIsOpenModal5] = useState(false); - const [isOpenModal6, setIsOpenModal6] = useState(false); - - const [showExtraIndividuals, setExtraIndividuals] = useState(false) - const [showOptions, setShowOptions] = useState(false) - - const [expansionSection, setExpansionSection] = useState(false) - - const [options, setOptions] = useState( - - props.options) - - - const [referenceName, setRefName] = useState('') - const [referenceName2, setRefName2] = useState('') - const [start, setStart] = useState('') - const [start2, setStart2] = useState('') - const [end, setEnd] = useState('') - const [variantType, setVariantType] = useState('') - const [variantType2, setVariantType2] = useState('') - const [alternateBases, setAlternateBases] = useState('') - const [alternateBases2, setAlternateBases2] = useState('') - const [alternateBases3, setAlternateBases3] = useState('') - const [referenceBases, setRefBases] = useState('') - const [referenceBases2, setRefBases2] = useState('') - const [aminoacid, setAminoacid] = useState('') - const [aminoacid2, setAminoacid2] = useState('') - const [geneID, setGeneId] = useState('') - const [assemblyId, setAssemblyId] = useState('') - const [assemblyId2, setAssemblyId2] = useState('') - const [assemblyId3, setAssemblyId3] = useState('') - - const [hideForm, setHideForm] = useState(false) - - const animatedComponents = makeAnimated(); - - const [resetSearch, setResetSearch] = useState(false) - - const [state, setstate] = useState({ - query: '', - list: [] - }) - - const [checked, setChecked] = useState(true) - const [checked2, setChecked2] = useState(false) - const [checked3, setChecked3] = useState(false) - - const [isSubmitted, setIsSub] = useState(false) - - const [qeValue, setQEvalue] = useState('') - const [ontologyValue, setOntologyValue] = useState('') - - const [selectedCohortsAux, setSelectedCohortsAux] = useState([]) - - const [resultsQEexact, setResultsQEexact] = useState([]) - const [matchesQE, setMatchesQE] = useState([]) - const [showQEresults, setShowQEresults] = useState(false) - const [showQEfirstResults, setShowQEfirstResults] = useState(false) - - const [arrayFilteringTerms, setArrayFilteringTerms] = useState([]) - const [arrayFilteringTermsQE, setArrayFilteringTermsQE] = useState([]) - - const [showIds, setShowIds] = useState(false) - - const handleChangeSwitch = (e) => { - - setDescendantTerm(e.target.checked) - setChecked(e.target.checked); - - } - - const onToggle = (selectedItem) => { - console.log(selectedItem) - if (selectedItem === 0) { - setSimilarity('low') - } else if (selectedItem === 1) { - setSimilarity('medium') - } else { - setSimilarity('high') - } - - } - - - const onToggle2 = (selectedItem) => { - console.log(selectedItem) - if (selectedItem === 0) { - setResultset("HIT") - } else if (selectedItem === 1) { - setResultset("MISS") - } else if (selectedItem === 2) { - setResultset("NONE") - } else { - setResultset("ALL") - } - - } - - const triggerOptions = () => { - setOptions(options) - } - - - const handleChangeCohorts = (selectedOption) => { - setSelectedCohortsAux([]) - selectedCohortsAux.push(selectedOption) - props.setSelectedCohorts(selectedCohortsAux) - } - - const handleQEchanges = (e) => { - - setQEvalue(e.target.value.trim()) - } - - const handleNewQEsearch = () => { - setShowQEresults(false) - } - - const handleOntologyChanges = (e) => { - setOntologyValue(e.target.value.trim()) - } - - const handleIdChanges = (e) => { - setShowIds(true) - setId(e.target.value) - const results = arrayFilteringTerms.filter(post => { - - if (e.target.value === "") { - return arrayFilteringTerms - } else { - if (post !== undefined) { - if (post.toLowerCase().includes(e.target.value.toLowerCase())) { - return post - } - } else { - if (post.toLowerCase().includes(e.target.value.toLowerCase())) { - return post - } - } - } - - }) - setstate({ - query: e.target.value, - list: results - }) - - if (e.target.value === '') { - setShowIds(false) - } - - - } - - const handleSelectedId = (e) => { - setShowIds(false) - setId(e.target.value) - setstate({ - query: e.target.value, - list: state.list - }) - } - - const handleOperatorchange = (e) => { - setOperator(e.target.value) - console.log() - } - - - const handleValueChanges = (e) => { - setValueFree(e.target.value) - } - - const handdleInclude = (e) => { - console.log(ID) - console.log(valueFree) - console.log(operator) - if (ID !== '' && valueFree !== '' && operator !== '') { - if (query !== null) { - setQuery(query + ',' + `${ID}${operator}${valueFree}`) - } if (query === null) { - setQuery(`${ID}${operator}${valueFree}`) - } - } - - } - - const handleHelpModal1 = () => { - setIsOpenModal1(true) - } - - const handleCloseModal1 = () => { - setIsOpenModal1(false) - } - - const handleHelpModal2 = () => { - setIsOpenModal2(true) - } - - const handleCloseModal2 = () => { - setIsOpenModal2(false) - } - - const handleCloseModal3 = () => { - setPopUp(false) - } - - const handleHelpModal4 = () => { - setIsOpenModal4(true) - } - - const handleHelpModal5 = () => { - setIsOpenModal5(true) - } - - const handleHelpModal6 = () => { - setIsOpenModal6(true) - } - - const handleFilteringTerms = async (e) => { - - - if (props.collection === 'Individuals') { - - try { - - let res = await axios.get("http://localhost:5050/api/individuals/filtering_terms?skip=0&limit=0") - console.log(res) - if (res.data.response.filteringTerms !== undefined) { - setFilteringTerms(res) - setResults(null) - } else { - setError("No filtering terms now available") - } - - - } catch (error) { - console.log(error) - } - } else if (props.collection === 'Cohorts') { - - try { - - let res = await axios.get("http://localhost:5050/api/cohorts/filtering_terms?skip=0&limit=0") - setFilteringTerms(res) - setResults(null) - - } catch (error) { - console.log(error) - } - } else if (props.collection === 'Variant') { - try { - - let res = await axios.get("http://localhost:5050/api/g_variants/filtering_terms?skip=0&limit=0") - setFilteringTerms(res) - setResults(null) - - } catch (error) { - console.log(error) - } - } else if (props.collection === 'Analyses') { - try { - - let res = await axios.get("http://localhost:5050/api/analyses/filtering_terms?skip=0&limit=0") - setFilteringTerms(res) - setResults(null) - - } catch (error) { - console.log(error) - } - } else if (props.collection === 'Runs') { - try { - - let res = await axios.get("http://localhost:5050/api/runs/filtering_terms?skip=0&limit=0") - setFilteringTerms(res) - setResults(null) - - } catch (error) { - console.log(error) - } - } else if (props.collection === 'Biosamples') { - try { - - let res = await axios.get("http://localhost:5050/api/biosamples/filtering_terms?skip=0&limit=0") - setFilteringTerms(res) - setResults(null) - - } catch (error) { - console.log(error) - } - } - - - setShowFilteringTerms(true) - - - } - - const handleExQueries = () => { - if (props.collection === 'Individuals') { - setExampleQ(['Weight>100', 'NCIT:C16352', 'geographicOrigin=%land%', 'geographicOrigin!England', 'NCIT:C42331']) - } else if (props.collection === 'Variant') { - setExampleQ(['22 : 16050310 - 16050740', '22 : 16050074 A > G']) - } - } - - const handleExtraSectionIndividuals = (e) => { - setShowOptions(!showOptions) - setShowButton(!showButton) - } - - const handleChangeStart = (e) => { - setStart(e.target.value) - } - const handleChangeStart2 = (e) => { - setStart2(e.target.value) - } - const handleChangeRefN2 = (e) => { - setRefName2(e.target.value) - } - const handleChangeAlternateB2 = (e) => { - setAlternateBases2(e.target.value) - } - const handleChangeAssembly2 = (e) => { - setAssemblyId2(e.target.value) - } - const handleChangeAssembly3 = (e) => { - setAssemblyId3(e.target.value) - } - - const handleChangeAlternateB = (e) => { - setAlternateBases(e.target.value) - } - - const handleChangeAlternateB3 = (e) => { - setAlternateBases3(e.target.value) - } - - const handleChangeReferenceB = (e) => { - setRefBases(e.target.value) - } - const handleChangeReferenceB2 = (e) => { - setRefBases2(e.target.value) - } - - const handleChangeRefN = (e) => { - setRefName(e.target.value) - } - - const handleChangeEnd = (e) => { - setEnd(e.target.value) - } - - const handleChangeVariantType = (e) => { - setVariantType(e.target.value) - } - const handleChangeVariantType2 = (e) => { - setVariantType2(e.target.value) - } - - const handleChangeAminoacid = (e) => { - setAminoacid(e.target.value) - } - const handleChangeAminoacid2 = (e) => { - setAminoacid2(e.target.value) - } - - const handleChangeGeneId = (e) => { - setGeneId(e.target.value) - } - - const handleChangeAssembly = (e) => { - setAssemblyId(e.target.value) - } - - const handleClick = () => { - setShowBar(!showBar) - } - - const handleHideVariantsForm = (e) => { - setHideForm(false) - } - - const handleQEclick = (e) => { - setExpansionSection(true) - } - - const handleSubmitQE = async (e) => { - try { - if (ontologyValue !== '' && qeValue !== '') { - - resultsQEexact.splice(0, resultsQEexact.length) - setError(null) - const res = await axios.get(`https://cineca-query-expansion.text-analytics.ch/catalogue_explorer/HorizontalExpansionOls/?keywords=${qeValue}&ontology=${ontologyValue.toLowerCase()}`) - console.log(res) - let arrayResults = [] - if (res.data.response.ols[qeValue] !== undefined) { - arrayResults = res.data.response.ols[qeValue].search_term_expansion - if (arrayResults.length < 1) { - setError("Not found. Please check the keyword and ontologies and retry") - } - - } else { - arrayResults = res.data.response.ols[qeValue.toLowerCase()].search_term_expansion - } - - console.log(arrayResults) - arrayResults.forEach(element => { - if (element.label.trim().toLowerCase() === qeValue.toLowerCase()) { - //exact match - console.log(qeValue.toLowerCase) - console.log(element.label.trim().toLowerCase) - resultsQEexact.push(element) - } - }) - - - if (resultsQEexact.length > 0) { - setShowQEfirstResults(true) - matchesQE.splice(0, matchesQE.length) - console.log(resultsQEexact) - resultsQEexact.forEach(element => { - console.log(element) - arrayFilteringTermsQE.forEach(element2 => { - - if (element.obo_id.toLowerCase().trim() === element2.id.toLowerCase().trim()) { - setError(null) - matchesQE.push(element2.id) - console.log(matchesQE) - console.log("FOUND A MATCH") - setShowQEresults(true) - } - - }) - - }) - } - - } else { - setError("Please write the keyword and at least one ontology") - } - - } catch (error) { - setError("NOT FOUND") - console.log(error) - } - } - - const handleCheckQE = (e) => { - if (e.target.checked === true) { - if (query !== null && query !== '') { - console.log(query) - setQuery(query + ',' + e.target.value) - } else { - setQuery(e.target.value) - } - } else if (e.target.checked === false) { - console.log(query) - let varQuery = '' - if (query.includes(',' + e.target.value)) { - varQuery = query.replace(',' + e.target.value, '') - } else if (query.includes(e.target.value + ',')) { - varQuery = query.replace(e.target.value + ',', '') - } else { - varQuery = query.replace(e.target.value, '') - } - setQuery(varQuery) - } - - - - } - - const handleForward = () => { - setShowQEfirstResults(false) - setShowQEresults(false) - } - - const handleNext = () => { - setShowQEfirstResults(false) - setShowQEresults(true) - } - - useEffect(() => { - - if (props.collection === 'Individuals') { - setPlaceholder('filtering term comma-separated, ID><=value') - setExtraIndividuals(true) - - } else if (props.collection === 'Biosamples') { - setPlaceholder('key=value, key><=value, or filtering term comma-separated') - } else if (props.collection === 'Cohorts') { - setShowCohorts(true) - setExtraIndividuals(false) - setPlaceholder('Search for any cohort') - } else if (props.collection === "Variant") { - setPlaceholder('chr : pos ref > alt, chr: start-end') - setExtraIndividuals(false) - setShowVariants(true) - - } else if (props.collection === "Analyses") { - setPlaceholder('chr : pos ref > alt') - setExtraIndividuals(false) - } else if (props.collection === "Runs") { - setPlaceholder('chr : pos ref > alt') - setExtraIndividuals(false) - } else if (props.collection === 'Datasets') { - setPlaceholder('Search for any cohort') - setExtraIndividuals(false) - } else { - setPlaceholder('') - } - - const fetchData = async () => { - - try { - let res = await axios.get("http://localhost:5050/api/individuals/filtering_terms?skip=0&limit=0") - 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) { - console.log(error) - } - - - } - - // call the function - fetchData() - // make sure to catch any error - .catch(console.error); - - - }, []) - - - - - const onSubmit = async (event) => { - - event.preventDefault() - - setIsSub(!isSubmitted) - - console.log(query) - - authenticateUser() - - setExampleQ([]) - - - setResetSearch(true) - - - if (query === '1' || query === '') { - setQuery(null) - } - if (props.collection === 'Individuals') { - - setResults('Individuals') - } else if (props.collection === 'Variant') { - setResults('Variant') - } - - - } - - const onSubmit2 = (event) => { - - setPlaceholder("filtering term comma-separated, ID><=value"); - - - setIsSub(!isSubmitted) - - setExampleQ([]) - - - if (query === '1' || query === '') { - setQuery(null) - } - if (props.collection === 'Individuals') { - setResults('Individuals') - } else if (props.collection === 'Variant') { - setResults('Variant') - } - - - } - - const onSubmitCohorts = () => { - setResults('Cohorts') - - props.setShowGraphs(true) - } - - function search(e) { - setQuery(e.target.value) - - } - - const handleSubmit = async (e) => { - e.preventDefault(); - setPlaceholder("filtering term comma-separated, ID><=value"); - setIsSub(!isSubmitted) - setExampleQ([]) - setResults('Variant') - } - - return ( -
-
- -
- - cinecaLogo - - - elixirLogo - -
-
- -
- {popUp && - - -

Please, bear in mind that you might have to log in to get information from some datasets.

- - - } -
-
- -
- - bulbIcon - -
- - - -
-
- -
-
- -
- - - -
- -
- - - setChecked2(!checked2)} - /> - - {checked2 && } -
-
- - -
-

False

- -

True

-
- -
- - - - -
- - -
- - - -
- -
- } - } - {hideForm === true && } - {showVariants && showBar === false && hideForm === false &&
-
-
- -
- -
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
-
- -
- - -
-
- - -
-
- - -
-
- - -
-
- -
-

OR

- -
-
- -
-

OR

- - -
-
- -
-
-
- -
- - -
-
- - -
-
- -
-

OR

- -
-

OR

- - -
-
- -
-
-
- -
- -
} - - - -
- - - - -

Help for alphanumerical and numerical queries.

- - - - - -

Help for queries.

- - -
- - -
-
- {results === null && !showFilteringTerms && } - {isSubmitted && results === 'Individuals' && -
- -
- } - {isSubmitted && results === 'Variant' && -
- -
- } - {results === null && showFilteringTerms && } - -
- - - - ); -} - -export default Layout; \ No newline at end of file