diff --git a/frontend/.env b/frontend/.env index fe20a2d7..922de999 100644 --- a/frontend/.env +++ b/frontend/.env @@ -1,2 +1,3 @@ REACT_APP_CLIENT_ID='9db950db-31d8-4966-9f35-e8222d2fdcf6' -REACT_APP_CLIENT_SECRET='a385b9af-bc1f-4d23-bc10-a03e9b75ef54c85ebbb1-f15c-49ed-9728-894e56894b1b' \ No newline at end of file +REACT_APP_CLIENT_SECRET='3fcedd8c-06cf-48a6-812e-d7c63154ec729c4f1734-4a67-4d17-a9a9-b3a7694f9063' +REACT_APP_KEYCLOAK_CLIENT_SECRET='WGahOcaJcbQ2srhBsNH56NhhDxH5M51f' \ No newline at end of file diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 7a92e791..0b916d8c 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -12,6 +12,6 @@ COPY yarn.lock . COPY public ./public COPY src ./src - RUN yarn install --production + diff --git a/frontend/README.md b/frontend/README.md index 3a56b096..1460425d 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,4 +1,4 @@ -## Deploy +# Getting Started with Create React App Use the deployment for all the containers for beacon to also deploy the UI [Deployment](../deploy/README.md). You will find it running in http://localhost:3000 @@ -32,3 +32,4 @@ Finally, please include the URL of your User interface to the file beacon/_ main Note that in the frontend folder you will find a file called .gitignore with the list of all files that need to be ignored. + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9ff4bbcb..13920133 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,7 +16,6 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", - "@types/react-outside-click-handler": "^1.3.3", "apexcharts": "^3.39.0", "axios": "1.1.3", "bootstrap": "5.2.2", @@ -25,6 +24,7 @@ "devextreme-react": "^22.2.4", "flatted": "^3.2.7", "formik": "2.2.9", + "html-react-parser": "^5.1.1", "jquery": "^3.6.4", "oidc-react": "^3.2.2", "prettyjson": "^1.2.5", @@ -33,6 +33,8 @@ "react-dom": "^18.2.0", "react-fusioncharts": "^4.0.0", "react-google-charts": "^4.0.0", + "react-html-parser": "^2.0.2", + "react-icons": "^5.1.0", "react-json-pretty": "^2.2.0", "react-modal": "^3.16.1", "react-modal-hover": "^1.1.13", @@ -40,18 +42,22 @@ "react-outside-click-handler": "^1.3.0", "react-router-bootstrap": "0.26.2", "react-router-dom": "^6.4.3", + "react-router-scroll-top": "^0.3.1", "react-scripts": "^5.0.1", + "react-scroll-to-top": "^3.0.0", "react-select": "^5.7.2", "react-svg-worldmap": "^2.0.0-alpha.16", "react-tag-box": "^1.6.0", "reaselct": "^2.1.0", "rsuite": "^5.33.1", - "web-vitals": "^2.1.0" + "web-vitals": "^2.1.0", + "with-router": "^1.0.1" }, "devDependencies": { "@types/jquery": "^3.5.16", "devextreme-themebuilder": "^22.2.4", "node-sass": "^8.0.0", + "react-app-rewired": "^2.2.1", "sass-loader": "^13.2.2" } }, @@ -4571,14 +4577,6 @@ "csstype": "^3.0.2" } }, - "node_modules/@types/react-outside-click-handler": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@types/react-outside-click-handler/-/react-outside-click-handler-1.3.3.tgz", - "integrity": "sha512-fF7x4dHf/IPIne8kkt3rlCGuWFrWkFJmzQm4JkxSBzXJIM9WDLob++VnmGpE3ToVWrW3Xw9D5TxcUWrwqe04Gg==", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.6", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", @@ -10358,6 +10356,84 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/html-dom-parser": { + "version": "5.0.7", + "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.7.tgz", + "integrity": "sha512-2YD2/yB0QgrlkBIn0CsGaRXC89E1gtuPVpiOGC52NTzPCC83n0WMdGD+5q7lpcKqbCpnWValQbovuy/NI/0kag==", + "dependencies": { + "domhandler": "5.0.3", + "htmlparser2": "9.1.0" + } + }, + "node_modules/html-dom-parser/node_modules/dom-serializer": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", + "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/html-dom-parser/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/html-dom-parser/node_modules/domutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", + "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/html-dom-parser/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/html-dom-parser/node_modules/htmlparser2": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz", + "integrity": "sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.1.0", + "entities": "^4.5.0" + } + }, "node_modules/html-encoding-sniffer": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz", @@ -10412,6 +10488,34 @@ "node": ">= 12" } }, + "node_modules/html-react-parser": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.1.1.tgz", + "integrity": "sha512-L5VK0rKN3VM7uzRH+4wxAL9elvHuCNDjyWKKjcCDR+YWW5Qr7WWSK7+e627DcePVAFi5IMqc+rAU8j/1DpC/Tw==", + "dependencies": { + "domhandler": "5.0.3", + "html-dom-parser": "5.0.7", + "react-property": "2.0.2", + "style-to-js": "1.1.10" + }, + "peerDependencies": { + "react": "0.14 || 15 || 16 || 17 || 18" + } + }, + "node_modules/html-react-parser/node_modules/domhandler": { + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", + "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz", @@ -10783,6 +10887,11 @@ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "license": "ISC" }, + "node_modules/inline-style-parser": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.2.tgz", + "integrity": "sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ==" + }, "node_modules/insert-css": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", @@ -15968,6 +16077,30 @@ "node": ">=14" } }, + "node_modules/react-app-rewired": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz", + "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==", + "dev": true, + "dependencies": { + "semver": "^5.6.0" + }, + "bin": { + "react-app-rewired": "bin/index.js" + }, + "peerDependencies": { + "react-scripts": ">=2.1.3" + } + }, + "node_modules/react-app-rewired/node_modules/semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "bin": { + "semver": "bin/semver" + } + }, "node_modules/react-bootstrap": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.6.0.tgz", @@ -16108,6 +16241,93 @@ "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0" } }, + "node_modules/react-html-parser": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-html-parser/-/react-html-parser-2.0.2.tgz", + "integrity": "sha512-XeerLwCVjTs3njZcgCOeDUqLgNIt/t+6Jgi5/qPsO/krUWl76kWKXMeVs2LhY2gwM6X378DkhLjur0zUQdpz0g==", + "dependencies": { + "htmlparser2": "^3.9.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0" + } + }, + "node_modules/react-html-parser/node_modules/dom-serializer": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", + "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==", + "dependencies": { + "domelementtype": "^2.0.1", + "entities": "^2.0.0" + } + }, + "node_modules/react-html-parser/node_modules/dom-serializer/node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, + "node_modules/react-html-parser/node_modules/dom-serializer/node_modules/entities": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", + "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==", + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/react-html-parser/node_modules/domelementtype": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz", + "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==" + }, + "node_modules/react-html-parser/node_modules/domhandler": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz", + "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==", + "dependencies": { + "domelementtype": "1" + } + }, + "node_modules/react-html-parser/node_modules/domutils": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", + "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==", + "dependencies": { + "dom-serializer": "0", + "domelementtype": "1" + } + }, + "node_modules/react-html-parser/node_modules/entities": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz", + "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==" + }, + "node_modules/react-html-parser/node_modules/htmlparser2": { + "version": "3.10.1", + "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz", + "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==", + "dependencies": { + "domelementtype": "^1.3.1", + "domhandler": "^2.3.0", + "domutils": "^1.5.1", + "entities": "^1.1.1", + "inherits": "^2.0.1", + "readable-stream": "^3.1.1" + } + }, + "node_modules/react-icons": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.1.0.tgz", + "integrity": "sha512-D3zug1270S4hbSlIRJ0CUS97QE1yNNKDjzQe3HqY0aefp2CBn9VgzgES27sRR2gOvFK+0CNx/BW0ggOESp6fqQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-input-autosize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-3.0.0.tgz", @@ -16211,6 +16431,11 @@ "react-dom": ">=16.0.0" } }, + "node_modules/react-property": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz", + "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -16264,6 +16489,16 @@ "react-dom": ">=16.8" } }, + "node_modules/react-router-scroll-top": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/react-router-scroll-top/-/react-router-scroll-top-0.3.1.tgz", + "integrity": "sha512-sdIYw7SVAqWNcH/WhNHIPsOrIVUEUUHYuddGj7aMNjRCTwAfZo2B/CHqXElAnDdSd9MMCfVFfWxtroi1ozTb8Q==", + "peerDependencies": { + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-router-dom": "^5.3.0" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -16402,6 +16637,14 @@ "node": ">=10" } }, + "node_modules/react-scroll-to-top": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-3.0.0.tgz", + "integrity": "sha512-I/k45Ujai097du59tHBbzGxN7Lyc6K8Uc3IChq6HMXaBfB8N/rrfm055T5Yv0DWfVpf6pOFaBmhD3LOfH5unGw==", + "peerDependencies": { + "react": "^16.8.0 || 17.x || ^18" + } + }, "node_modules/react-select": { "version": "5.7.3", "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.3.tgz", @@ -18280,6 +18523,22 @@ "webpack": "^5.0.0" } }, + "node_modules/style-to-js": { + "version": "1.1.10", + "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.10.tgz", + "integrity": "sha512-VC7MBJa+y0RZhpnLKDPmVRLRswsASLmixkiZ5R8xZpNT9VyjeRzwnXd2pBzAWdgSGv/pCNNH01gPCCUsB9exYg==", + "dependencies": { + "style-to-object": "1.0.5" + } + }, + "node_modules/style-to-object": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.5.tgz", + "integrity": "sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==", + "dependencies": { + "inline-style-parser": "0.2.2" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -19845,6 +20104,11 @@ "string-width": "^1.0.2 || 2 || 3 || 4" } }, + "node_modules/with-router": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/with-router/-/with-router-1.0.1.tgz", + "integrity": "sha512-Jc/rG+uhJ9iqRWJjQAB9kKQiwk+L35p9OsXqDJU/n/BoFEsgEQLcXzYZ/MS4jsnXsjYs07C/hQhsSZSUir85NA==" + }, "node_modules/word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 816aa361..eeb9e2c6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,7 +11,6 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", - "@types/react-outside-click-handler": "^1.3.3", "apexcharts": "^3.39.0", "axios": "1.1.3", "bootstrap": "5.2.2", @@ -20,6 +19,7 @@ "devextreme-react": "^22.2.4", "flatted": "^3.2.7", "formik": "2.2.9", + "html-react-parser": "^5.1.1", "jquery": "^3.6.4", "oidc-react": "^3.2.2", "prettyjson": "^1.2.5", @@ -28,6 +28,8 @@ "react-dom": "^18.2.0", "react-fusioncharts": "^4.0.0", "react-google-charts": "^4.0.0", + "react-html-parser": "^2.0.2", + "react-icons": "^5.1.0", "react-json-pretty": "^2.2.0", "react-modal": "^3.16.1", "react-modal-hover": "^1.1.13", @@ -35,13 +37,16 @@ "react-outside-click-handler": "^1.3.0", "react-router-bootstrap": "0.26.2", "react-router-dom": "^6.4.3", + "react-router-scroll-top": "^0.3.1", "react-scripts": "^5.0.1", + "react-scroll-to-top": "^3.0.0", "react-select": "^5.7.2", "react-svg-worldmap": "^2.0.0-alpha.16", "react-tag-box": "^1.6.0", "reaselct": "^2.1.0", "rsuite": "^5.33.1", - "web-vitals": "^2.1.0" + "web-vitals": "^2.1.0", + "with-router": "^1.0.1" }, "scripts": { "start": "react-scripts start", @@ -71,6 +76,7 @@ "@types/jquery": "^3.5.16", "devextreme-themebuilder": "^22.2.4", "node-sass": "^8.0.0", + "react-app-rewired": "^2.2.1", "sass-loader": "^13.2.2" } } diff --git a/frontend/public/ISCIII_logo.png b/frontend/public/ISCIII_logo.png new file mode 100644 index 00000000..a2b1fa71 Binary files /dev/null and b/frontend/public/ISCIII_logo.png differ diff --git a/frontend/public/caixa_logo.png b/frontend/public/caixa_logo.png new file mode 100644 index 00000000..ae85d438 Binary files /dev/null and b/frontend/public/caixa_logo.png differ diff --git a/frontend/public/dictionary.png b/frontend/public/dictionary.png new file mode 100644 index 00000000..606d9ee0 Binary files /dev/null and b/frontend/public/dictionary.png differ diff --git a/frontend/public/eosc4cancer.png b/frontend/public/eosc4cancer.png new file mode 100644 index 00000000..96dac23c Binary files /dev/null and b/frontend/public/eosc4cancer.png differ diff --git a/frontend/public/feder_logo.png b/frontend/public/feder_logo.png new file mode 100644 index 00000000..6d028abd Binary files /dev/null and b/frontend/public/feder_logo.png differ diff --git a/frontend/public/formula.png b/frontend/public/formula.png new file mode 100644 index 00000000..096522b4 Binary files /dev/null and b/frontend/public/formula.png differ diff --git a/frontend/public/impactLogo.png b/frontend/public/impactLogo.png new file mode 100644 index 00000000..88a06b97 Binary files /dev/null and b/frontend/public/impactLogo.png differ diff --git a/frontend/public/index.html b/frontend/public/index.html index b4cae537..5b7f508c 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,21 +1,19 @@ - - - - - - - - - - - Beacon network demo - - - -
- - - + + + + + \ No newline at end of file diff --git a/frontend/public/laMaratoLogo.png b/frontend/public/laMaratoLogo.png new file mode 100644 index 00000000..138b7fd6 Binary files /dev/null and b/frontend/public/laMaratoLogo.png differ diff --git a/frontend/public/ministerio_logo.png b/frontend/public/ministerio_logo.png new file mode 100644 index 00000000..fd38b970 Binary files /dev/null and b/frontend/public/ministerio_logo.png differ diff --git a/frontend/src/App.css b/frontend/src/App.css index 7692c7c8..d261c67a 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -37,6 +37,23 @@ html { margin-left: 10px; } +.scopeSelection{ + position: absolute; + top: 286px; + z-index: 5; + background-color: #e2f4ff; + /* height: 80px; */ + display: flex; + align-items: center; + padding: 7px; + padding-left: 19px; + padding-right: 19px; + height: 123px; + border-radius: 13px; + color: #1a4b1a; + font-size: 17px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; +} .resultSetsDiv2 .multi-switch-container { margin-left: -5px; margin-top: 8px; @@ -66,17 +83,19 @@ html { } .version { - margin-bottom: 19px; - margin-right: 46px; - margin-top: 7px; + margin-right: 37px; + margin-top: -18px; color: rgb(102 116 152) !important; font-weight: 700 !important; } -.beaconLogo { - height: 45px; - margin-top: 41px; - margin-right: 31px; +.logosVersionContainer { + display: flex; + flex-direction: column; + align-content: stretch; + justify-content: center; + align-items: flex-end; + margin-bottom: 20px; } .searchButton { @@ -86,6 +105,26 @@ html { margin-left: 12px; } +.scopeDiv { + display: flex; + align-content: center; + justify-content: center; + align-items: center; +} + +.scopeDiv h10 { + margin-top: 0px; +} + +.doneButton ion-icon:hover { + color: rgb(36, 135, 128); +} + +p a { + text-decoration: underline; + text-underline-offset: 2px; +} + .modeVariantsQuery { color: rgba(12, 16, 64, 0.606); font-size: 16px; @@ -109,6 +148,34 @@ html { font-variant-caps: all-petite-caps; } + +.variantsForm { + margin-top: 10px; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; + margin-left: -70px; +} + + + + +.variantsFormVariant { + margin-top: -14px; + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; + margin-left: -70px; +} +.crossQueriesTittle { + margin-bottom: 18px; + font-size: 12px; + margin-top: -56px; +} .modeVariantsBarMode:hover h2 { color: rgb(236, 149, 0) !important; } @@ -130,16 +197,109 @@ html { } .containerTableResults { + width: 100vw; display: flex; align-content: center; justify-content: center; align-items: center; } + .newSearchButton:hover { color: rgb(118, 151, 228); } +.moduleAddedQuery { + display: flex; + flex-direction: column; + width: 145px; + justify-content: center; + border: 0px solid #f2eded; + padding: 11px; + border-radius: 15px; + margin-top: 11px; + margin-bottom: 11px; + box-shadow: rgba(192, 200, 227, 0.27) 0px 0px 0.25em, + rgba(159, 167, 184, 0.05) 0px 0.25em 1em; + margin-left: 14px; + animation: slide-in-blurred-right 0.4s ease-in both; +} + +.doneButton ion-icon{ + color: black; +} + + + +.removeButton { + width: 130%; + display: flex; + justify-content: flex-end; + margin-top: -18px; +} + +.removeButton ion-icon { + color: rgb(221 221 221) !important; + font-size: 11px; + margin-right: 0px; +} + +.removeButton ion-icon:hover { + color: rgb(212, 6, 6) !important; + font-weight: 800; +} + +.moduleAdded { + display: flex; + align-items: center; + align-content: center; + flex-direction: column; +} +@keyframes slide-in-blurred-right { + 0% { + transform: translateX(1000px) scaleX(2.5) scaleY(0.2); + transform-origin: 0% 50%; + filter: blur(40px); + opacity: 0; + } + 100% { + transform: translateX(0) scaleY(1) scaleX(1); + transform-origin: 50% 50%; + filter: blur(0); + opacity: 1; + } +} + +.moduleAddedQuery h13 { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + color: #bac0c6; + text-transform: capitalize; + text-transform: uppercase; + font-weight: 600; + margin-bottom: 8px; + font-size: 12px; + margin-top: -6px; +} + +.moduleAdded ion-icon { + color: rgb(174 182 189); + margin-right: 12px; + font-size: 22px; +} +.moduleAddedContainer { + display: flex; + align-content: center; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + flex-wrap: wrap; +} +h14 { + color: #64646a; + font-size: 11px; +} .searchButton2 { cursor: pointer; /* margin-left: 26px; */ @@ -168,8 +328,12 @@ html { width: 100%; margin-right: 10px; margin-left: 10px; - justify-content: center; - height: 35px; + justify-content: space-around; + /* height: 35px; */ + align-content: center; + margin-top: 20px; + flex-wrap: wrap; + align-items: flex-start; } .form-select { @@ -225,15 +389,15 @@ html { } .formSearch { - width: 60vw; - margin-right: 3px; + width: 45vw; + margin-right: 0px; background: white; border: 2px solid #8985c1; font-size: medium; /* margin: 10px; */ border-radius: 10px; /* box-shadow: 2px 1px 2px #cecece; */ - height: 32px; + height: 30px; } .searchIcon { @@ -260,7 +424,6 @@ html { flex-direction: column; align-content: center; align-items: center; - margin-top: -48px; } .variantsContainer { @@ -273,16 +436,19 @@ html { } .inputVariants { - height: 24px; - border: 1.5px solid #dfdfdf; + width: 69px; + /* height: 24px; */ + border: 0.5px solid #dfdfdf; border-radius: 2px; - margin-bottom: 30px; - font-size: 12.5px; - padding: 5px; + margin-bottom: 2px; + margin-left: 6px; + font-size: 11.5px; + padding: 3px; + box-shadow: rgb(234 221 221 / 16%) 0px 1px 4px; } .labelVariants { - font-size: 13.5px; + font-size: 11.5px; margin-bottom: 18px; margin-right: 4px; margin-left: 18px; @@ -308,7 +474,6 @@ html { width: 100%; display: flex; justify-content: flex-end; - margin-top: -23px; } .buttonAlphanum { @@ -317,6 +482,7 @@ html { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + color: #756d6d; } .buttonAlphanum:hover { @@ -440,11 +606,7 @@ html { } .buttonVariants { - margin-top: 9px; margin-bottom: -14px; - box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 1px, - rgba(179, 179, 179, 0.22) 0px 1px 1px; - padding: 6px; cursor: pointer; } @@ -455,9 +617,8 @@ html { } .basesSection { - margin-bottom: 30px; border: solid 1px #dadada; - margin-top: 25px; + box-shadow: rgba(207, 192, 192, 0.15) 1.4px 1.4px 2.2px; } @@ -486,7 +647,7 @@ html { font-weight: 700; } .variantExampleButton:hover { - background-color: #78beed; + background-color: #bfe1f7; border: solid #06c; } @@ -505,20 +666,25 @@ html { } .exampleQuery:hover .text-example { + margin-right: 14px; display: flex; align-items: center; justify-content: center; border: solid #c8c8c8; - background-color: #c8c8c8; + background-color: #e1dddd; color: black; + width: -moz-fit-content; width: fit-content; border-radius: 6px; - margin-left: 10px; - padding: 1px; + padding-top: 1px; + padding-bottom: 1px; + padding-left: 2px; + padding-right: 2px; + margin-bottom: 6px; } .examplesQueriesList { - width: 111px; + width: fit-content; display: flex; flex-direction: column; justify-content: center; @@ -578,6 +744,14 @@ html { margin-bottom: 12px; } +.cinecaLogo { + height: 51px; + align-items: center; + margin-top: 55px; + margin-bottom: 30px; + margin-right: 42px; +} + .container1 a { display: flex; align-content: center; @@ -585,6 +759,81 @@ html { align-items: center; } +.eosc4cancer { + height: 85px; + margin-top: 20px; + margin-right: 30px; + -webkit-filter: grayscale(20%); + filter: grayscale(60%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; +} + +.eosc4cancer:hover { + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + +.federLogo { + height: 33px; + margin-top: 42px; + margin-right: 14px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; +} + +.federLogo:hover { + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + +.iscLogo { + height: 33px; + margin-top: 42px; + margin-right: 14px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; +} + +.iscLogo:hover { + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + +.ministerioLogo { + height: 33px; + margin-top: 42px; + margin-right: 14px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; +} + +.ministerioLogo:hover { + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + +.laCaixaLogo { + height: 33px; + margin-top: 42px; + margin-right: 30px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; +} + +.laCaixaLogo:hover { + -webkit-filter: grayscale(0%); + filter: grayscale(0%); +} + .comming_message { margin: 80px; font-size: 18px; @@ -645,6 +894,8 @@ select { /* justify-content: center; */ align-content: center; align-items: center; + padding-bottom: 55px; + min-height: 280px; } .resultSet2 { @@ -653,6 +904,7 @@ select { .cohortsModule { display: flex; + width: 100vw; } .tittleAlph { @@ -682,7 +934,6 @@ hr { sans-serif; text-transform: uppercase; font-size: 12px; - margin-left: 33px; } .exampleQueries:hover { @@ -690,9 +941,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 { @@ -705,9 +960,10 @@ hr { display: flex; width: 100vw; align-items: flex-end; - margin-bottom: -11px; - margin-top: -16px; - flex-direction: column; + margin-bottom: 19px; + margin-top: -8px; + flex-direction: row; + justify-content: flex-end; } .helpButton:hover { @@ -761,7 +1017,6 @@ hr { } .additionalOptions { - width: 100vw; display: flex; justify-content: center; align-items: center; @@ -770,10 +1025,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; } @@ -788,15 +1043,16 @@ hr { } .exampleQuery { + width: 100%; border: none; /* border-color: #5454bc; */ padding: 5px; cursor: pointer; display: flex; - flex-direction: row-reverse; - align-content: center; - justify-content: center; - align-items: center; + flex-direction: column-reverse; + align-items: flex-start; + justify-content: space-around; + align-content: space-around; } .exampleQueriesAlph { @@ -999,8 +1255,8 @@ h5 { margin: 4px; padding: 6px; box-shadow: 1px 1px 2px #a3a0a0; - width: 222px; - height: 12px; + width: 168px; + height: 27px; border-radius: 4px; overflow: auto; } @@ -1008,11 +1264,11 @@ h5 { .ValueForm { background: white; border: 2px solid rgba(12, 16, 64, 0.606); - margin: 20px; + margin-left: 5px; padding: 6px; box-shadow: 1px 1px 2px #a3a0a0; - width: 16%; - height: 12px; + width: 30%; + height: 27px; border-radius: 4px; } @@ -1053,8 +1309,8 @@ h5 { sans-serif; text-transform: uppercase; font-size: 12px; - margin-right: 36px; - margin-left: 27px; + margin-right: 32px; + margin-left: -20px; } .filters:hover { @@ -1062,25 +1318,33 @@ h5 { } .ReactModal__Content--after-open { - width: 485px; - font-size: 11px; - height: 33%; + width: 500px; + font-size: 12px !important; + /* height: 33%; */ + height: fit-content; position: absolute !important; - inset: 35% !important; + top: 18% !important; + right: 10vw !important; + left: 32.4vw !important; border: 1px solid rgb(204, 204, 204) !important; - background: #be5930 !important; + background: #82a0b7 !important; overflow: auto !important; - border-radius: 4px !important; + border-radius: 12px !important; outline: none !important; - padding: 16px !important; + padding: 7px !important; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; } .ReactModal__Content--after-open p { - font-size: 16px; + font-size: 12px; font-weight: normal; + inset: 0px !important; color: white; line-height: 30px; padding: 2px; + top: 28% !important; + right: 10vw !important; + left: 34.4vw !important; } @media (max-width: 1409px) { .containerExtraSections2 { @@ -1099,6 +1363,10 @@ h5 { align-items: center; align-content: center; } + + .variantsForm { + margin-left: 0px; + } .containerExtraSections2 { display: flex; flex-direction: column; @@ -1127,13 +1395,21 @@ h5 { } } -@media (max-width: 760px) { +@media (max-width: 900px) { .container1 a { display: flex; font-size: 11px; text-underline-offset: 1px; } + .crossQueriesTittle { + margin-bottom: 12px; + font-size: 12px; + margin-top: 37px; + text-decoration: underline; + text-underline-offset: 2px; + } + .resultset2 { display: flex; align-items: flex-start; @@ -1147,39 +1423,421 @@ h5 { } .version { - margin-bottom: 46px; - margin-right: 36px; - margin-top: -35px; + margin-bottom: 0px; + margin-right: 37px; + margin-top: -18px; color: rgb(102 116 152) !important; - font-weight: 600; + font-weight: 700 !important; } - .beaconLogo { - height: 45px; - margin-top: 18px; - margin-bottom: 37px; - margin-right: 21px; + .logosVersionContainer { + display: flex; + flex-direction: column; + align-content: stretch; + justify-content: center; + align-items: flex-end; + margin-bottom: 20px; + } + + .eosc4cancer { + height: 61px; + margin-top: 20px; + margin-right: 33px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .federLogo { + height: 31px; + margin-top: 31px; + margin-right: 10px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .iscLogo { + height: 31px; + margin-top: 31px; + margin-right: 10px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .ministerioLogo { + height: 31px; + margin-top: 31px; + margin-right: 10px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .laCaixaLogo { + height: 31px; + margin-top: 31px; + margin-right: 30px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; } .inputVariants { - height: 24px; - border: 1.5px solid #dfdfdf; + width: 69px; + /* height: 24px; */ + border: 0.5px solid #dfdfdf; border-radius: 2px; - margin-bottom: 30px; - font-size: 12px; + margin-bottom: 2px; + margin-left: 6px; + font-size: 11.5px; + padding: 3px; + box-shadow: rgb(234 221 221 / 16%) 0px 1px 4px; + } + + .container2 { + margin-bottom: 0px; } .exampleQuery { + width: 100%; border: none; /* border-color: #5454bc; */ padding: 5px; cursor: pointer; display: flex; - flex-direction: row-reverse; + flex-direction: column-reverse; + align-items: flex-start; + justify-content: space-around; + align-content: space-around; + } + + .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-bottom: 20px; + cursor: pointer; + font-size: 12px; + margin-right: 7px; + } + + .switchDescendants h3 { + color: #e16e00; + text-transform: uppercase; + margin-left: 3px !important; + margin-top: 6px; + font-size: 10px; + } + .css-1ycxvqq-MuiSwitch-root { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + width: 40px; + height: 24px; + overflow: hidden; + padding: 7px; + box-sizing: border-box; + position: relative; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + z-index: 0; + margin-top: -3px; + vertical-align: middle; + } + + .ReactModal__Content--after-open p { + font-size: 14px; + font-weight: normal; + color: white; + line-height: 20px; + padding: 2px; + width: 500px; + top: 28% !important; + right: 10vw !important; + left: 34.4vw !important; + inset: 0px !important; + } + + .ReactModal__Overlay { + z-index: 3; + } + + .filters { + padding: 4px; + cursor: pointer; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + text-transform: uppercase; + font-size: 10px; + margin-right: 3px; + margin-left: -23px; + } + + .container-fluid { + display: flex; + width: 100%; + margin-right: 10px; + margin-left: 10px; + justify-content: space-around; + /* height: 35px; */ align-content: center; + margin-top: 20px; + flex-wrap: wrap; + } + + .example { + display: flex; + align-items: center; + margin-right: 0px; + width: 230px; + margin-top: 22px; + margin-bottom: 22px; + flex-direction: row; + align-content: space-between; + justify-content: center; + } + + .exampleQueries { + border: none; + background-color: #ffffff; + color: #4d4b4b; + cursor: pointer; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', + 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', + 'Helvetica Neue', sans-serif; + text-transform: uppercase; + font-size: 10px; + margin-left: 0px !important; + } + + .additionalOptions { justify-content: center; align-items: center; + z-index: 0; + height: 73px; + margin-top: 11px; + } + + .bulbLogo { + display: none; + } + + .formSearch { + width: 61vw; + margin-right: 3px; + background: white; + border: 2px solid #8985c1; + font-size: small; + /* margin: 10px; */ + border-radius: 10px; + /* box-shadow: 2px 1px 2px #cecece; */ + height: 27px; + } + .bulbExample { + margin-right: 48px; + padding-right: 19px; + border-right: 1.7px solid #f1f1f1; + display: flex; + 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; + margin-top: -1px; + margin-left: -8px; + } + .searchIcon:hover { + width: 26px; + margin-top: -1px; + margin-left: -8px; + } + + .elixirLogo { + height: 70px; + margin-top: 18px; + margin-bottom: 37px; + margin-right: 21px; + } + + .searchButton { + height: 30px; + cursor: pointer; + } + + .examplesQueriesList { + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + align-items: flex-start; + width: fit-content; + border-radius: 5px; + font-size: 9px; + margin-left: 10px !important; + background: #8dbde0; + } + + .bulbExample { + margin-right: 49px; + display: flex; + 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 { + color: rgba(12, 16, 64, 0.606); + font-size: 15px !important; + font-feature-settings: 'pcap', 'c2pc', 'pcap', 'c2pc'; + font-variant-caps: all-petite-caps; + margin-top: 0px; + font-size: 12px !important; + } +} + +@media (max-width: 750px) { + .container1 a { + display: flex; + font-size: 11px; + text-underline-offset: 1px; + } + + .crossQueriesTittle { + margin-bottom: 12px; font-size: 12px; + margin-top: 37px; + text-decoration: underline; + text-underline-offset: 2px; + } + + .resultset2 { + display: flex; + align-items: flex-start; + width: 244px; + flex-direction: column; + justify-content: center; + /* margin-left: 46px; */ + background: #e0e7ef; + padding-top: 10px; + padding-bottom: 1px; + } + + .version { + margin-bottom: 0px; + margin-right: 37px; + margin-top: -18px; + color: rgb(102 116 152) !important; + font-weight: 700 !important; + } + + .logosVersionContainer { + display: flex; + flex-direction: column; + align-content: stretch; + justify-content: center; + align-items: flex-end; + margin-bottom: 20px; + } + + .eosc4cancer { + height: 61px; + margin-top: 20px; + margin-right: 33px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .federLogo { + height: 31px; + margin-top: 31px; + margin-right: 10px; + -webkit-filter: grayscale(20%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .iscLogo { + height: 31px; + margin-top: 31px; + margin-right: 10px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .ministerioLogo { + height: 31px; + margin-top: 31px; + margin-right: 10px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .laCaixaLogo { + height: 31px; + margin-top: 31px; + margin-right: 30px; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + -webkit-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + } + + .inputVariants { + width: 69px; + /* height: 24px; */ + border: 0.5px solid #dfdfdf; + border-radius: 2px; + margin-bottom: 2px; + margin-left: 6px; + font-size: 11.5px; + padding: 3px; + box-shadow: rgb(234 221 221 / 16%) 0px 1px 4px; + } + + .container2 { + margin-bottom: 0px; + } + + .exampleQuery { + width: 100%; + border: none; + /* border-color: #5454bc; */ + padding: 5px; + cursor: pointer; + display: flex; + flex-direction: column-reverse; + align-items: flex-start; + justify-content: space-around; + align-content: space-around; } .labelVariants { @@ -1193,11 +1851,7 @@ h5 { } .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; @@ -1229,25 +1883,34 @@ h5 { vertical-align: middle; } .ReactModal__Content--after-open { - width: 269px; - font-size: 12px; - height: fit-content; + width: 280px; + font-size: 11px; + /* height: 33%; */ + height: 22%; position: absolute !important; - inset: 35% !important; + top: 28% !important; + right: 10vw !important; + left: 32.4vw !important; border: 1px solid rgb(204, 204, 204) !important; - background: #be5930 !important; + background: #82a0b7 !important; overflow: auto !important; - border-radius: 4px !important; + border-radius: 12px !important; outline: none !important; - padding: 16px !important; + padding: 7px !important; + box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; + inset: 20vw !important; } .ReactModal__Content--after-open p { - font-size: 14px; + font-size: 12px; font-weight: normal; color: white; + width: fit-content; line-height: 20px; padding: 2px; + top: 28% !important; + right: 10vw !important; + left: 34.4vw !important; } .ReactModal__Overlay { @@ -1262,28 +1925,30 @@ 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 { display: flex; width: 100%; - margin-right: 0px; - margin-left: 0px; - justify-content: center; - height: 35px; + margin-right: 10px; + margin-left: 10px; + justify-content: space-around; + /* height: 35px; */ + align-content: center; + margin-top: 20px; + flex-wrap: wrap; } .example { display: flex; align-items: center; margin-right: 0px; + width: 230px; margin-top: 22px; margin-bottom: 22px; - flex-direction: row-reverse; + flex-direction: row; align-content: space-between; justify-content: center; } @@ -1305,8 +1970,8 @@ h5 { justify-content: center; align-items: center; z-index: 0; - height: 84px; - margin-top: -21px; + height: 73px; + margin-top: 11px; } .bulbLogo { @@ -1314,7 +1979,7 @@ h5 { } .formSearch { - width: 81vw; + width: 71vw; margin-right: 3px; background: white; border: 2px solid #8985c1; @@ -1325,13 +1990,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; @@ -1362,7 +2028,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; @@ -1370,12 +2036,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 { @@ -1387,3 +2055,27 @@ h5 { font-size: 12px !important; } } + +@media (max-width: 460px) { + .containerForm { + margin-left: 0px; + } + .formSearch { + width: 71vw; + margin-right: 3px; + background: white; + border: 2px solid #8985c1; + font-size: small; + /* margin: 10px; */ + border-radius: 10px; + /* box-shadow: 2px 1px 2px #cecece; */ + height: 30px; + } + .crossQueriesTittle { + margin-bottom: 12px; + font-size: 10px; + margin-top: 24px; + text-decoration: underline; + text-underline-offset: 2px; + } +} diff --git a/frontend/src/App.js b/frontend/src/App.js index f4807206..00663108 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -18,6 +18,7 @@ import Validator from './components/Validator/Validator' import SignInFormNoLS from './components/SignIn/SignInFormNoLS' import AboutSection from './components/AboutSection/AboutSection' import SignInOptions from './components/SignInOptions/SignInOptions' +import Footer from './components/Footer/Footer' import BeaconInfo from './components/Dataset/BeaconInfo' function App () { @@ -42,6 +43,7 @@ function App () { } /> } /> + ) } diff --git a/frontend/src/components/AboutSection/AboutSection.css b/frontend/src/components/AboutSection/AboutSection.css index e69de29b..8e25edf6 100644 --- a/frontend/src/components/AboutSection/AboutSection.css +++ b/frontend/src/components/AboutSection/AboutSection.css @@ -0,0 +1,34 @@ +.aboutContainer { + height: 90vh; +} + +.message { + color: #7fa8a8; + font-size: 19px; + margin-top: 90px; + font-weight: 600; + font-family: 'Poppins', sans-serif; + margin-right: 26px; + transition: 2s, color 1s; +} + +.messageContainer { + display: flex; + width: 100vw; + flex-direction: row; + align-content: center; + justify-content: center; + align-items: center; +} + +.messageContainer a { + color: #2f2fb8; + margin-top: 2px; + font-size: 40px; + + transition-duration: 2s; + transition-timing-function: linear; + transition-delay: 1s; +} + + diff --git a/frontend/src/components/AboutSection/AboutSection.js b/frontend/src/components/AboutSection/AboutSection.js index 1499bf6f..2a9eafdb 100644 --- a/frontend/src/components/AboutSection/AboutSection.js +++ b/frontend/src/components/AboutSection/AboutSection.js @@ -2,8 +2,13 @@ import './AboutSection.css' function AboutSection () { return ( -
- +
+
+ coming soon . . . + + + +
) } diff --git a/frontend/src/components/Analyses/AnalysesResults.js b/frontend/src/components/Analyses/AnalysesResults.js index 8b12542e..90eda986 100644 --- a/frontend/src/components/Analyses/AnalysesResults.js +++ b/frontend/src/components/Analyses/AnalysesResults.js @@ -40,6 +40,10 @@ function AnalysesResults (props) { const [queryArray, setQueryArray] = useState([]) const [arrayFilter, setArrayFilter] = useState([]) + const [isActive1, setIsActive1] = useState(false) + const [isActive2, setIsActive2] = useState(false) + const [isActive3, setIsActive3] = useState(false) + const { getStoredToken, authenticateUser } = useContext(AuthContext) let queryStringTerm = '' @@ -94,10 +98,21 @@ function AnalysesResults (props) { } arrayFilter.push(alphaNumFilter) } else { - const filter2 = { + let filter2 = { id: element, includeDescendantTerms: props.descendantTerm } + props.filteringTerms.data.response.filteringTerms.forEach( + element2 => { + if (element.toLowerCase() === element2.label.toLowerCase()) { + filter2 = { + id: element2.id, + includeDescendantTerms: props.descendantTerm + } + } + } + ) + arrayFilter.push(filter2) } }) @@ -133,9 +148,24 @@ function AnalysesResults (props) { } arrayFilter.push(alphaNumFilter) } else { - const filter = { - id: props.query - } + let filter = { id: props.query } + let labelToOntology = 0 + console.log('holi') + let queryTermLowerCase = props.query.toLowerCase() + console.log(props.filteringTerms) + props.filteringTerms.data.response.filteringTerms.forEach( + element => { + if (element.label) { + element.label = element.label.toLowerCase() + } + if (queryTermLowerCase === element.label) { + labelToOntology = element.id + filter = { + id: labelToOntology + } + } + } + ) arrayFilter.push(filter) } } @@ -187,10 +217,11 @@ function AnalysesResults (props) { setTimeOut(true) if ( - res.data.responseSummary.numTotalResults < 1 || - res.data.responseSummary.numTotalResults === undefined + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' ) { - setError('ERROR. Please check the query and retry') + setError('No results. Please try another query') setNumberResults(0) setBoolean(false) } else { @@ -209,7 +240,6 @@ function AnalysesResults (props) { [element.exists], [element.resultsCount] ] - resultsPerDataset.push(arrayResultsPerDataset) } } @@ -249,33 +279,35 @@ function AnalysesResults (props) { } } jsonData2 = JSON.stringify(jsonData2) + let token = null if (auth.userData === null) { token = getStoredToken() } else { token = auth.userData.access_token } - + console.log(jsonData2) if (token === null) { console.log('Querying without token') res = await axios.post(configData.API_URL + '/analyses', jsonData2) } else { console.log('Querying WITH token') const headers = { Authorization: `Bearer ${token}` } - res = await axios.post( configData.API_URL + '/analyses', jsonData2, { headers: headers } ) } + setTimeOut(true) if ( - res.data.responseSummary.numTotalResults < 1 || - res.data.responseSummary.numTotalResults === undefined + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' ) { - setError('ERROR. Please check the query and retry') + setError('No results. Please try another query') setNumberResults(0) setBoolean(false) } else { @@ -294,8 +326,15 @@ function AnalysesResults (props) { [element.exists], [element.resultsCount] ] - - resultsPerDataset.push(arrayResultsPerDataset) + let found = false + resultsPerDataset.forEach(element => { + if (element[0] === arrayResultsPerDataset[0]) { + found = true + } + }) + if (found === false) { + resultsPerDataset.push(arrayResultsPerDataset) + } } } @@ -319,9 +358,7 @@ function AnalysesResults (props) { } } } catch (error) { - setError( - 'No results. Please check the query and the connection and retry' - ) + setError('No results. Please retry') setTimeOut(true) } } @@ -332,18 +369,27 @@ function AnalysesResults (props) { setShow1(true) setShow2(false) setShow3(false) + setIsActive1(true) + setIsActive2(false) + setIsActive3(false) } const handleTypeResults2 = () => { setShow2(true) setShow1(false) setShow3(false) + setIsActive2(true) + setIsActive3(false) + setIsActive1(false) } const handleTypeResults3 = () => { setShow3(true) setShow1(false) setShow2(false) + setIsActive3(true) + setIsActive1(false) + setIsActive2(false) } const onSubmit = () => { setSkipTrigger(skip) @@ -372,14 +418,34 @@ function AnalysesResults (props) {

Granularity:

- + {props.resultSets !== 'MISS' && ( + + )}
)} diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js index f9115ed5..caef56f5 100644 --- a/frontend/src/components/Biosamples/BiosamplesResults.js +++ b/frontend/src/components/Biosamples/BiosamplesResults.js @@ -1,54 +1,107 @@ import '../Individuals/Individuals.css' import '../../App.css' -import TableResultsBiosamples from '../Results/BiosamplesResults/TableResultsBiosamples' import { useState, useEffect } from 'react' import axios from 'axios' import { AuthContext } from '../context/AuthContext' import { useAuth } from 'oidc-react' import configData from '../../config.json' import { useContext } from 'react' +import TableResultsBiosamples from '../Results/BiosamplesResults/TableResultsBiosamples' function BiosamplesResults (props) { - const [showLayout, setShowLayout] = useState(false) - - const [beaconsList, setBeaconsList] = useState([]) - - const [error, setError] = useState(false) - - const [numberResults, setNumberResults] = useState(0) - const [boolean, setBoolean] = useState(false) + const [error, setError] = useState('') + const [timeOut, setTimeOut] = useState(false) + const [logInRequired, setLoginRequired] = useState(false) + const [messageLoginCount, setMessageLoginCount] = useState('') + const [messageLoginFullResp, setMessageLoginFullResp] = useState('') const [results, setResults] = useState([]) const [show1, setShow1] = useState(false) const [show2, setShow2] = useState(false) const [show3, setShow3] = useState(false) + const [numberResults, setNumberResults] = useState(0) + const [boolean, setBoolean] = useState(false) + const [arrayFilter, setArrayFilter] = useState([]) + const [queryArray, setQueryArray] = useState([]) + const [beaconsList, setBeaconsList] = useState([]) + + const [limit, setLimit] = useState(0) + const [skip, setSkip] = useState(0) + + const [showVariantsResults, setShowVariantsResults] = useState(false) + + const { getStoredToken, authenticateUser } = useContext(AuthContext) + const [resultsPerDataset, setResultsDataset] = useState([]) const [resultsNotPerDataset, setResultsNotPerDataset] = useState([]) - const [timeOut, setTimeOut] = useState(false) + const [isActive1, setIsActive1] = useState(false) + const [isActive2, setIsActive2] = useState(false) + const [isActive3, setIsActive3] = useState(false) - const [logInRequired, setLoginRequired] = useState(false) + const [pause, setPause] = useState(false) + const [ontologyMultipleScope, setOntologyMultipleScope] = useState([]) + const [triggerQueryScope, setTriggerQScope] = useState(false) - const [messageLoginFullResp, setMessageLoginFullResp] = useState('') + const [optionsScope, setOptionsScope] = useState([]) + const [chosenScope, setChosenScope] = useState('') + const [ontologyChosenScope, setOntologyScope] = useState([]) - const [limit, setLimit] = useState(0) - const [skip, setSkip] = useState(0) + const [triggerSubmit, settriggerSubmit] = useState(false) + const handleChangeScope = event => { + console.log(event.target.value) + setChosenScope(event.target.value) + } + let queryStringTerm = [] - const [skipTrigger, setSkipTrigger] = useState(0) - const [limitTrigger, setLimitTrigger] = useState(0) + const handleTypeResults1 = () => { + setShow1(true) + setShow2(false) + setShow3(false) + setIsActive1(true) + setIsActive2(false) + setIsActive3(false) + } - const [queryArray, setQueryArray] = useState([]) - const [arrayFilter, setArrayFilter] = useState([]) + const handleTypeResults2 = () => { + setShow2(true) + setShow1(false) + setShow3(false) + setIsActive2(true) + setIsActive3(false) + setIsActive1(false) + } - const { getStoredToken, authenticateUser } = useContext(AuthContext) - let queryStringTerm = '' + const handleTypeResults3 = () => { + setShow3(true) + setShow1(false) + setShow2(false) + setIsActive3(true) + setIsActive1(false) + setIsActive2(false) + } - let res = '' + const submitScopeChosen = e => { + console.log(chosenScope) + arrayFilter.length = 0 + beaconsList.length = 0 + console.log(arrayFilter) + setTriggerQScope(!triggerQueryScope) + } const auth = useAuth() let isAuthenticated = auth.userData?.id_token ? true : false - useEffect(() => { + setTimeOut(false) + let collection = '' + if (props.collection === 'Individuals') { + collection = 'individual' + } else if (props.collection === 'Variant') { + collection = 'variant' + } else if (props.collection === 'Biosamples') { + collection = 'biosample' + } + const apiCall = async () => { if (isAuthenticated === false) { authenticateUser() @@ -59,113 +112,407 @@ function BiosamplesResults (props) { } } + var arrayRequestParameters = [] + // var requestParametersSequence = {} + + // var requestParametersRange = {} + + // var requestParametersGene = {} + + // if (props.seqModuleArray.length > 0) { + // props.seqModuleArray.forEach(element => { + // if (element.assemblyId !== '') { + // requestParametersSequence['assemblyId'] = element.assemblyId + // } + // if (element.referenceName !== '') { + // requestParametersSequence['referenceName'] = element.referenceName + // } + // if (element.start !== '') { + // requestParametersSequence['start'] = element.start + // } + // if (element.referenceBases !== '') { + // requestParametersSequence['referenceBases'] = element.referenceBases + // } + // if (element.alternateBases !== '') { + // requestParametersSequence['alternateBases'] = element.alternateBases + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + + // arrayRequestParameters.push(requestParametersSequence) + // requestParametersSequence = {} + // }) + // } + + // if (props.rangeModuleArray.length > 0) { + // console.log(props.rangeModuleArray) + // props.rangeModuleArray.forEach(element => { + // if (element.assemblyId !== '') { + // requestParametersRange['assemblyId'] = element.assemblyId + // } + // if (element.referenceName !== '') { + // requestParametersRange['referenceName'] = element.referenceName + // } + // if (element.start !== '') { + // requestParametersRange['start'] = element.start + // } + // if (element.end !== '') { + // requestParametersRange['end'] = element.end + // } + // if (element.variantType !== '') { + // requestParametersRange['variantType'] = element.variantType + // } + // if (element.alternateBases !== '') { + // requestParametersRange['alternateBases'] = element.alternateBases + // } + + // if (element.referenceBases !== '') { + // requestParametersRange['referenceBases'] = element.referenceBases + // } + + // if (element.aminoacid !== '') { + // requestParametersRange['aminoacidChange'] = element.aminoacid + // } + // if (element.variantMinLength !== '') { + // requestParametersRange['variantMinLength'] = + // element.variantMinLength + // } + // if (element.variantMaxLength !== '') { + // requestParametersRange['variantMaxLength'] = + // element.variantMaxLength + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + // arrayRequestParameters.push(requestParametersRange) + // requestParametersRange = {} + // }) + // } + + // if (props.geneModuleArray.length > 0) { + // props.geneModuleArray.forEach(element => { + // console.log(element) + // if (element.geneID !== '') { + // requestParametersGene['geneId'] = element.geneID + // } + // if (element.assemblyId !== '') { + // requestParametersGene['assemblyId'] = element.assemblyId + // } + // if (element.variantType !== '') { + // requestParametersGene['variantType'] = element.variantType + // } + // if (element.variantMinLength !== '') { + // requestParametersGene['variantMinLength'] = element.variantMinLength + // } + // if (element.variantMaxLength !== '') { + // requestParametersGene['variantMaxLength'] = element.variantMaxLength + // } + // if (element.aminoacid !== '') { + // requestParametersGene['aminoacidChange'] = element.aminoacid + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + // arrayRequestParameters.push(requestParametersGene) + // requestParametersGene = {} + // }) + // } + + var requestParameters = {} + if (props.query !== null) { if (props.query.includes(',')) { - queryStringTerm = props.query.split(',') - queryStringTerm.forEach((element, index) => { - element = element.trim() - if ( - element.includes('=') || - element.includes('>') || - element.includes('<') || - element.includes('!') || - element.includes('%') - ) { - if (element.includes('=')) { - queryArray[index] = element.split('=') - queryArray[index].push('=') - } else if (element.includes('>')) { - queryArray[index] = element.split('>') - queryArray[index].push('>') - } else if (element.includes('<')) { - queryArray[index] = element.split('<') - queryArray[index].push('<') - } else if (element.includes('!')) { - queryArray[index] = element.split('!') - queryArray[index].push('!') - } else { - queryArray[index] = element.split('%') - queryArray[index].push('%') + let queryStringTerm2 = props.query.split(',') + queryStringTerm2.forEach(element => { + queryStringTerm.push(element.trim()) + }) + } else { + if (props.query.includes(':') && !props.query.includes('>')) { + let arrayParameters = [] + let reqParameters = [] + if (props.query.includes('&')) { + arrayParameters = props.query.split('&') + console.log(arrayParameters) + arrayParameters.forEach(element => { + reqParameters.length = 0 + reqParameters = element.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + }) + arrayRequestParameters.push(requestParameters) + } else { + let reqParameters = props.query.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + arrayRequestParameters.push(requestParameters) + } + } else if (props.query.includes(':') && props.query.includes('>')) { + let reqParameters = props.query.split(':') + console.log(reqParameters) + let position = [] + if (props.query.includes('-')) { + position = reqParameters[0].split('-') + } else { + position = reqParameters[0] + } + + console.log(position) + let bases = reqParameters[2].split('>') + console.log(bases) + requestParameters['start'] = position[0] + if (position[1]) { + requestParameters['end'] = position[1] + } + requestParameters['variantType'] = reqParameters[1] + requestParameters['alternateBases'] = bases[1] + requestParameters['referenceBases'] = bases[0] + arrayRequestParameters.push(requestParameters) + } else { + queryStringTerm.push(props.query.trim()) + } + } + + console.log(queryStringTerm) + let filter = {} + + queryStringTerm.forEach((term, index) => { + console.log(term) + requestParameters = {} + if ( + (term.includes('=') || + term.includes('>') || + term.includes('<') || + term.includes('!') || + term.includes('%')) && + !term.includes(':') + ) { + if (term.includes('=')) { + queryArray[index] = term.split('=') + queryArray[index].push('=') + console.log(queryArray) + } else if (term.includes('>')) { + queryArray[index] = term.split('>') + queryArray[index].push('>') + } else if (term.includes('<')) { + queryArray[index] = term.split('<') + queryArray[index].push('<') + } else if (term.includes('!')) { + queryArray[index] = term.split('!') + queryArray[index].push('!') + } else { + queryArray[index] = term.split('%') + queryArray[index].push('%') + } + console.log(queryArray[index][1].toLowerCase()) + let alphanumericFilter = {} + props.filteringTerms.forEach(element => { + if (element.label) { + if ( + queryArray[index][1].toLowerCase() === + element.label.toLowerCase() + ) { + if (queryArray[index][0].toLowerCase() === 'individual') { + alphanumericFilter = { + id: element.id, + scope: ['individual'] + } + } else if ( + queryArray[index][0].toLowerCase() === 'genomicvariation' + ) { + alphanumericFilter = { + id: element.id, + scope: ['genomicVariation'] + } + } else if ( + queryArray[index][0].toLowerCase() === 'biosample' + ) { + alphanumericFilter = { + id: element.id, + scope: ['biosample'] + } + } else if (queryArray[index][0].toLowerCase() === 'cohort') { + alphanumericFilter = { + id: element.id, + scope: ['cohort'] + } + } else if (queryArray[index][0].toLowerCase() === 'run') { + alphanumericFilter = { + id: element.id, + scope: ['run'] + } + } else { + alphanumericFilter = { + id: element.id, + scope: element.scopes + } + } + } } - const alphaNumFilter = { + }) + + if (Object.keys(alphanumericFilter).length === 0) { + console.log(queryArray[index][0]) + props.filteringTerms.forEach(element => { + if ( + queryArray[index][0].toLowerCase() === + element.id.toLowerCase() + ) { + queryArray[index][3] = element.scopes + } + }) + + if (queryArray[index][3] === undefined) { + queryArray[index][3] = [collection] + } + console.log(queryArray) + alphanumericFilter = { id: queryArray[index][0], operator: queryArray[index][2], - value: queryArray[index][1] + value: queryArray[index][1], + scope: queryArray[index][3] } - arrayFilter.push(alphaNumFilter) + console.log(alphanumericFilter) + } + + arrayFilter.push(alphanumericFilter) + } else if (term.includes(':') && !term.includes('>')) { + let arrayParameters = [] + let reqParameters = [] + if (term.includes('&')) { + arrayParameters = term.split('&') + console.log(arrayParameters) + arrayParameters.forEach(element => { + reqParameters.length = 0 + reqParameters = element.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + }) + arrayRequestParameters.push(requestParameters) } else { - const filter2 = { - id: element, - includeDescendantTerms: props.descendantTerm - } - arrayFilter.push(filter2) + let reqParameters = term.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + arrayRequestParameters.push(requestParameters) } - }) - } else { - if ( - props.query.includes('=') || - props.query.includes('>') || - props.query.includes('<') || - props.query.includes('!') || - props.query.includes('%') - ) { - if (props.query.includes('=')) { - queryArray[0] = props.query.split('=') - queryArray[0].push('=') - } else if (props.query.includes('>')) { - queryArray[0] = props.query.split('>') - queryArray[0].push('>') - } else if (props.query.includes('<')) { - queryArray[0] = props.query.split('<') - queryArray[0].push('<') - } else if (props.query.includes('!')) { - queryArray[0] = props.query.split('!') - queryArray[0].push('!') + } else if (term.includes(':') && term.includes('>')) { + let reqParameters = term.split(':') + console.log(reqParameters) + let position = [] + if (term.includes('-')) { + position = reqParameters[0].split('-') } else { - queryArray[0] = props.query.split('%') - queryArray[0].push('%') + position = reqParameters[0] } - const alphaNumFilter = { - id: queryArray[0][0], - operator: queryArray[0][2], - value: queryArray[0][1] + let bases = reqParameters[2].split('>') + console.log(bases) + requestParameters['start'] = position[0] + if (position[1]) { + requestParameters['end'] = position[1] } - arrayFilter.push(alphaNumFilter) + requestParameters['variantType'] = reqParameters[1] + requestParameters['alternateBases'] = bases[1] + requestParameters['referenceBases'] = bases[0] + arrayRequestParameters.push(requestParameters) } else { - const filter = { - id: props.query - } + props.filteringTerms.forEach(element => { + if (element.label) { + if ( + term.toLowerCase() === element.label.toLowerCase() || + term.toLowerCase() === element.id.toLowerCase() + ) { + filter = { + id: element.id, + scope: element.scopes + } + } + } else { + if (element.id.toLowerCase() === term.toLowerCase()) { + filter = { + id: element.id, + scope: element.scopes + } + } + } + }) + arrayFilter.push(filter) } - } + }) } + console.log(arrayFilter) + try { let res = await axios.get(configData.API_URL + '/info') - beaconsList.push(res.data.response) + console.log(ontologyMultipleScope) if (props.query === null) { // show all individuals - var jsonData1 = { - meta: { - apiVersion: '2.0' - }, - query: { - filters: arrayFilter, - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: 0, - limit: 0 + var jsonData1 = {} + + if (arrayRequestParameters.length > 0) { + if (arrayRequestParameters.length === 1) { + jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters[0], + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } else { + jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters, + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } + } else { + jsonData1 = { + meta: { + apiVersion: '2.0' }, - testMode: false, - requestedGranularity: 'record' + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: 0, + limit: 0 + }, + testMode: false, + requestedGranularity: 'record' + } } } - jsonData1 = JSON.stringify(jsonData1) + jsonData1 = JSON.stringify(jsonData1) + console.log(jsonData1) let token = null if (auth.userData === null) { token = getStoredToken() @@ -178,6 +525,8 @@ function BiosamplesResults (props) { configData.API_URL + '/biosamples', jsonData1 ) + console.log(jsonData1) + console.log(res) } else { const headers = { Authorization: `Bearer ${token}` } @@ -190,10 +539,10 @@ function BiosamplesResults (props) { setTimeOut(true) if ( - res.data.responseSummary.numTotalResults < 1 || - res.data.responseSummary.numTotalResults === undefined + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' ) { - setError('ERROR. Please check the query and retry') setNumberResults(0) setBoolean(false) } else { @@ -204,15 +553,16 @@ function BiosamplesResults (props) { element2[0].push(element.id) element2[1].push(element.exists) element2[2].push(element.resultsCount) + element2[3].push(element.resultsHandover) }) } else { let arrayResultsPerDataset = [ //element.beaconId, [element.id], [element.exists], - [element.resultsCount] + [element.resultsCount], + [element.resultsHandover] ] - resultsPerDataset.push(arrayResultsPerDataset) } } @@ -235,125 +585,198 @@ function BiosamplesResults (props) { } }) } + settriggerSubmit(true) } else { - var jsonData2 = { - meta: { - apiVersion: '2.0' - }, - query: { - filters: arrayFilter, - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: skip, - limit: limit - }, - testMode: false, - requestedGranularity: 'record' + var jsonData2 = {} + let variablePause = false + arrayFilter.forEach(element => { + if (element.scope.length > 1 && chosenScope === '') { + setPause(true) + variablePause = true + element.scope.forEach(element => { + optionsScope.push(element) + }) + console.log(element) + + props.filteringTerms.forEach(element2 => { + if (element2.label) { + if (element2.id === element.id) { + console.log(element2.label) + ontologyMultipleScope.push(element2.label) + } + } + }) + } else if (element.scope.length > 1 && chosenScope !== '') { + element.scope = chosenScope + } else { + element.scope = element.scope[0] } - } - jsonData2 = JSON.stringify(jsonData2) - 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 + '/biosamples', - jsonData2 - ) - } else { - console.log('Querying WITH token') - const headers = { Authorization: `Bearer ${token}` } - - res = await axios.post( - configData.API_URL + '/biosamples', - jsonData2, - { headers: headers } - ) - } - setTimeOut(true) - - if ( - res.data.responseSummary.numTotalResults < 1 || - res.data.responseSummary.numTotalResults === undefined - ) { - setError('ERROR. Please check the query and retry') - setNumberResults(0) - setBoolean(false) - } else { - res.data.response.resultSets.forEach((element, index) => { - if (element.id && element.id !== '') { - if (resultsPerDataset.length > 0) { - resultsPerDataset.forEach(element2 => { - element2[0].push(element.id) - element2[1].push(element.exists) - element2[2].push(element.resultsCount) - }) - } else { - let arrayResultsPerDataset = [ - //element.beaconId, - [element.id], - [element.exists], - [element.resultsCount] - ] + }) - resultsPerDataset.push(arrayResultsPerDataset) + if (variablePause === false) { + if (arrayRequestParameters.length > 0) { + if (arrayRequestParameters.length === 1) { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters[0], + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } else { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters, + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } } } - - if (element.id === undefined || element.id === '') { - let arrayResultsNoDatasets = [element.beaconId] - resultsNotPerDataset.push(arrayResultsNoDatasets) + } else { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: 0, + limit: 0 + }, + testMode: false, + requestedGranularity: 'record' + } } + } + jsonData2 = JSON.stringify(jsonData2) - if (res.data.response.resultSets[index].results) { - res.data.response.resultSets[index].results.forEach( - (element2, index2) => { - let arrayResult = [ - res.data.meta.beaconId, - res.data.response.resultSets[index].results[index2] + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + if (token === null) { + console.log(jsonData2) + console.log('Querying without token') + res = await axios.post( + configData.API_URL + '/biosamples', + jsonData2 + ) + console.log(res) + } else { + console.log('Querying WITH token') + const headers = { Authorization: `Bearer ${token}` } + console.log(jsonData2) + res = await axios.post( + configData.API_URL + '/biosamples', + jsonData2, + { headers: headers } + ) + console.log(res) + } + + setTimeOut(true) + setPause(false) + if ( + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' + ) { + setError('No results') + setNumberResults(0) + setBoolean(false) + } else { + res.data.response.resultSets.forEach((element, index) => { + if (element.id && element.id !== '') { + if (resultsPerDataset.length > 0) { + resultsPerDataset.forEach(element2 => { + element2[0].push(element.id) + element2[1].push(element.exists) + element2[2].push(element.resultsCount) + element2[3].push(element.resultsHandover) + }) + } else { + let arrayResultsPerDataset = [ + //element.beaconId, + [element.id], + [element.exists], + [element.resultsCount], + [element.resultsHandover] ] - results.push(arrayResult) + let found = false + resultsPerDataset.forEach(element => { + if (element[0] === arrayResultsPerDataset[0]) { + found = true + } + }) + if (found === false) { + 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 = [ + res.data.meta.beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) + } + }) + } + + settriggerSubmit(true) + } else { + setTimeOut(true) } } } catch (error) { - setError('Connection error. Please retry') + console.log(error) + setError('No, sorry') setTimeOut(true) } } apiCall() - }, []) - - const handleTypeResults1 = () => { - setShow1(true) - setShow2(false) - setShow3(false) - } + }, [triggerQueryScope]) - const handleTypeResults2 = () => { - setShow2(true) - setShow1(false) - setShow3(false) - } - - const handleTypeResults3 = () => { - setShow3(true) - setShow1(false) - setShow2(false) - } - const onSubmit = () => { - setSkipTrigger(skip) - setLimitTrigger(limit) - setTimeOut(false) - } + useEffect(() => { + if (props.granularity === 'boolean') { + handleTypeResults1() + } else if (props.granularity === 'count') { + handleTypeResults2() + } else if (props.granularity === 'record') { + handleTypeResults3() + } + }, []) return (
{timeOut === false && ( @@ -368,71 +791,124 @@ function BiosamplesResults (props) {
)} -
-
- {' '} - {timeOut && error !== 'Connection error. Please retry' && ( -
-
-

Granularity:

- - -
-
- )} - {timeOut && error === 'Connection error. Please retry' && ( -

  {error}

- )} - {show3 && logInRequired === false && !error && ( -
- -
- )} - {show3 && logInRequired === true &&

{messageLoginFullResp}

} - {show3 && error &&

  {error}

} - {show2 && !error && ( -
- -
- )} - {show1 && !error && ( -
- -
- )} - {show2 && error &&

  {error}

} - {show1 && error &&

  {error}

} + ) + })} +
+ )} + + {timeOut && error !== '' && props.granularity === 'boolean' && ( +
  No, sorry
+ )} + {timeOut && error !== '' && props.granularity === 'count' && ( +
  None, sorry
+ )} + {timeOut && error !== '' && props.granularity === 'record' && ( +
  No results, sorry
+ )} + {triggerSubmit && ( +
+
+ {/* {timeOut && error === '' && ( +
+
+

Granularity:

+ + + {props.resultSets !== 'MISS' && results.length > 0 && ( + + )} +
+
+ )} */} + + {show3 && logInRequired === false && !error && ( +
+ +
+ )} + + {show2 && !error && ( +
+ +
+ )} + {show1 && !error && ( +
+ +
+ )} +
-
+ )} ) } -export default BiosamplesResults +export default BiosamplesResults \ No newline at end of file diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css index 6199fdf7..ba8718fa 100644 --- a/frontend/src/components/Cohorts/Cohorts.css +++ b/frontend/src/components/Cohorts/Cohorts.css @@ -257,8 +257,9 @@ h12 { .graphsDiv { display: flex; align-items: center; - justify-content: center; + /* justify-content: center; */ flex-direction: column; + min-height: 900px; } .graphsDiv h3 { diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js index de252aea..18b68791 100644 --- a/frontend/src/components/Cohorts/Cohorts.js +++ b/frontend/src/components/Cohorts/Cohorts.js @@ -77,25 +77,33 @@ function Cohorts (props) { const fetchDataCohorts = async () => { try { let res = await axios.get(configData.API_URL + '/cohorts') + res.data.response.collections.forEach(element => { if (optionsCohorts.length > 0) { + let found = 0 optionsCohorts.forEach(cohort => { + found = 0 if (cohort.value === element.id) { - let obj = { - value: element.id + count, - label: element.id - } - setCount(count + 1) - element.id = element.id + count - optionsCohorts.push(obj) - } else { - let obj = { - value: element.id, - label: element.id - } - optionsCohorts.push(obj) + console.log(element.id) + found = 1 } }) + if (found === 0) { + let obj = { + value: element.id, + label: element.id + } + optionsCohorts.push(obj) + } + if (found === 1) { + let obj = { + value: element.id + count, + label: element.id + count + } + setCount(count + 1) + element.id = element.id + count + optionsCohorts.push(obj) + } } else { let obj = { value: element.id, @@ -103,7 +111,7 @@ function Cohorts (props) { } optionsCohorts.push(obj) } - + console.log(optionsCohorts) arrayCohorts.push(element) const timer = setTimeout(() => { setTriggerLayout(true) @@ -201,7 +209,7 @@ function Cohorts (props) { let entriesGeo = '' let valuesDiseases = '' let labelsDiseases = '' - + // for (var i = 0; i < res.data.response.collections.length; i++) { if (element2.eventGenders !== undefined) { sexs = element2.eventGenders.distribution.genders @@ -262,7 +270,7 @@ function Cohorts (props) { if (labelsEthnicities !== '') { setLabelsEthnicities(labelsEthnicities) } - + if (geoData !== '') { valuesGeo = Object.values(geoData) labelsGeo = Object.keys(geoData) diff --git a/frontend/src/components/CrossQueries/CrossQueries.css b/frontend/src/components/CrossQueries/CrossQueries.css index c9124d97..e1c46e0a 100644 --- a/frontend/src/components/CrossQueries/CrossQueries.css +++ b/frontend/src/components/CrossQueries/CrossQueries.css @@ -1,11 +1,14 @@ .crossQueriesForm { + padding: 34px; display: flex; flex-direction: column; /* justify-content: center; */ - margin-top: 40px; - margin-right: 30px; + margin-top: -37vh; + /* margin-right: 30px; */ align-content: center; align-items: flex-start; + border: 1px solid #c0cbd5; + border-radius: 19px; } select { @@ -39,6 +42,26 @@ select { align-items: center; width: 100vw; flex-direction: column; + height: 100vh; +} + +.goBackCrossQ{ + cursor: pointer; + background: rgb(255 255 255); + border: 2px 2px 2px 0px solid #f3f4ff; + font-size: medium; + border-radius: 5px; + width: 100px; + height: 35px; + box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; + margin-top: 30px; + margin-right: 3px; +} + +.goBackCrossQ:hover{ + background-color: rgb(228, 236, 250); + box-shadow: 1px 1px 1px 1px #2269bf; + border: solid #2269bf; } .crossQueriesForm label { @@ -54,14 +77,15 @@ select { border-radius: 5px; width: 100px; height: 35px; - box-shadow: 1px 2px 2px #cecece; + box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; margin-top: 30px; + margin-left: 3px; } .formButton:hover { - background: #d4c223; - box-shadow: 1px 1px 1px 1px #d4c223; - border: solid #d4c223; + background-color: rgb(228, 236, 250); + box-shadow: 1px 1px 1px 1px #2269bf; + border: solid #2269bf; } h5 { @@ -97,14 +121,16 @@ h5:hover { width: 104px; } .crossQueriesForm { + padding: 34px; display: flex; flex-direction: column; /* justify-content: center; */ - margin-top: 40px; - margin: 10px; + margin-top: -30vh; /* margin-right: 30px; */ align-content: center; align-items: flex-start; + border: 1px solid #c0cbd5; + border-radius: 19px; } .inputId { diff --git a/frontend/src/components/CrossQueries/CrossQueries.js b/frontend/src/components/CrossQueries/CrossQueries.js index 42b3beb8..57bf1269 100644 --- a/frontend/src/components/CrossQueries/CrossQueries.js +++ b/frontend/src/components/CrossQueries/CrossQueries.js @@ -2,24 +2,36 @@ import './CrossQueries.css' import axios from 'axios' import { useState, useEffect } from 'react' import configData from '../../config.json' -import { useParams } from 'react-router-dom' +import TableResultsVariant from '../Results/VariantResults/TableResultsVariant' +import TableResultsIndividuals from '../Results/IndividualsResults/TableResultsIndividuals' +import TableResultsBiosamples from '../Results/BiosamplesResults/TableResultsBiosamples' +import { useNavigate } from 'react-router-dom' -function CrossQueries () { - const [valueInitial, setValueInitial] = useState('') +function CrossQueries (props) { + const [valueInitial, setValueInitial] = useState(props.collection) const [valueFinal, setValueFinal] = useState('') const [error, setError] = useState('') - const [results, setResults] = useState('') + const [results, setResults] = useState([]) const [arrayResults, setArrayResults] = useState([]) const [showSubmit, setShowSubmit] = useState(true) const [trigger, setTrigger] = useState(true) + const [triggerResults, setTriggerResults] = useState(false) + + const [resultsPerDataset, setResultsDataset] = useState([]) + const [resultsNotPerDataset, setResultsNotPerDataset] = useState([]) + + const [beaconsList, setBeaconsList] = useState([]) + const navigate = useNavigate() + const handleChangeInitial = e => { setValueInitial(e.target.value) } - let { scope, id } = useParams() + let scope = props.collection + let id = props.parameter const [scope2, setScope2] = useState(scope) @@ -36,35 +48,81 @@ function CrossQueries () { const handleClick = () => { setShowSubmit(true) - setResults('') - setIdValue('') + setResults([]) + setValueFinal('') - setValueInitial('') + setValueInitial(props.collection) setError('') setArrayResults([]) } const handleSubmit = async e => { + console.log('ASd') e.preventDefault() setShowSubmit(false) try { let res = await axios.get( configData.API_URL + `/${valueInitial}/${IdValue}/${valueFinal}` ) + console.log(res) res.data.response.resultSets.forEach((element, index) => { - if (res.data.response.resultSets[index].results.length > 0) { - setResults(res.data.response.resultSets[index].results) - - res.data.response.resultSets[index].results.forEach(element => { - arrayResults.push( - JSON.stringify(element, null, 2).replace('[', '').replace(']', '') - ) - }) - } else { - setResults(null) + if (element.id && element.id !== '') { + if (resultsPerDataset.length > 0) { + resultsPerDataset.forEach(element2 => { + element2[0].push(element.id) + element2[1].push(element.exists) + element2[2].push(element.resultsCount) + element2[3].push(element.resultsHandover) + }) + } else { + let arrayResultsPerDataset = [ + //element.beaconId, + [element.id], + [element.exists], + [element.resultsCount], + [element.resultsHandover] + ] + 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 = [ + res.data.meta.beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) } }) + console.log(results) + + let res2 = await axios.get(configData.API_URL + '/info') + beaconsList.push(res2.data.response) + setTriggerResults(true) + // res.data.response.resultSets.forEach((element, index) => { + // if (res.data.response.resultSets[index].results.length > 0) { + // setResults(res.data.response.resultSets[index].results) + + // res.data.response.resultSets[index].results.forEach(element => { + // arrayResults.push( + // JSON.stringify(element, null, 2).replace('[', '').replace(']', '') + // ) + // }) + // } else { + // setResults(null) + // } + // }) } catch (error) { + console.log(error) setError('Not found. Please retry') } } @@ -74,93 +132,140 @@ function CrossQueries () { }, [scope2]) return ( -
-
- - - - - {showSubmit && } - {error !== '' && results === '' &&
Not found. Please retry
} - {results === null &&
Not found. Please retry
} -
- - {!showSubmit && ( - - )} + {scope2 === 'variants' && ( + + )} + {scope2 === 'individuals' && ( + + )} + {scope2 === 'biosamples' && ( + + )} + {scope2 === 'runs' && ( + + )} + {scope2 === 'analyses' && ( + + )} + + + + - {results !== null && results !== '' && ( -
- 
-            
{arrayResults}

-
+ {showSubmit && } + {error !== '' && results === '' &&
Not found. Please retry
} + {results === null &&
Not found. Please retry
} + +
+ + {!showSubmit && ( + + )} +
)} -
+ {results !== null && + results !== '' && + triggerResults && + valueFinal === 'g_variants' && ( +
+ +
+ )} + {results !== null && + results !== '' && + triggerResults && + valueFinal === 'individuals' && ( +
+ +
+ )} + {results !== null && + results !== '' && + triggerResults && + valueFinal === 'biosamples' && ( +
+ +
+ )} + ) } diff --git a/frontend/src/components/Dataset/BeaconInfo.css b/frontend/src/components/Dataset/BeaconInfo.css index b5a9f680..3f275c84 100644 --- a/frontend/src/components/Dataset/BeaconInfo.css +++ b/frontend/src/components/Dataset/BeaconInfo.css @@ -17,7 +17,7 @@ .datasetCard { width: 40vw; margin: 30px; - + margin-top: 50px !important; /* border: 2px solid #3b9ad5; */ padding: 16px; display: flex; @@ -281,16 +281,17 @@ display: flex; align-items: center; justify-content: center; - height: 50%; - width: 100%; + height: 100%; } .resultSetsContainer h6 { background: #86e4a8; border-radius: 2px; - width: fit-content; + width: fit-content !important; margin-left: 5px; padding: 3px; + margin-bottom: 0px; + margin-top: 0px; } .tittle h2 { @@ -345,6 +346,11 @@ font-size: 16px; } +h5 { + margin-top: 0px !important; + margin-bottom: 0px !important; +} + .resultsRecord { display: flex; flex-direction: row; @@ -354,12 +360,16 @@ align-content: center; } -@media (max-width: 860px) { +@media (max-width: 1200px) { + .tittleResults { + width: 37vw; + height: 200px; + } .datasetCardResults { /* width: 20vw; */ height: 247px; margin: 24px !important; - width: 47vw; + width: 39vw; /* border: 2px solid #3b9ad5; */ padding: 3px; display: flex; @@ -400,7 +410,7 @@ } .datasetCard { - width: 75vw; + width: 58vw; margin: 30px; /* border: 2px solid #3b9ad5; */ padding: 16px; @@ -414,7 +424,123 @@ justify-content: flex-start; } .tittle { - width: 71vw; + width: 54vw; + background: #c8d4e6; + border-radius: 2px; + /* height: 80px; */ + display: flex; + padding: 2px; + flex-direction: column; + font-size: 9px !important; + } + + .tittle h2 { + 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: 10px; + font-weight: 600; + margin-left: 10px; + } + + .logoBeacon { + margin-left: 10px; + } + + .datasetCard a { + margin-right: 14px; + font-size: 11px; + color: #0158aa; + margin-left: 0px; + margin-top: 0px; + margin-bottom: 0px; + } + + .datasetCard a:hover { + margin-right: 14px; + font-size: 10px; + margin-left: 0px; + margin-top: 0px; + margin-bottom: 0px; + font-weight: 600; + color: #539ce6; + } + + .tittle2 h1 { + font-size: 11px; + font-weight: normal; + margin: 14px; + color: #5d5454; + } +} + +@media (max-width: 800px) { + .tittleResults { + width: 58vw; + height: 200px; + } + .datasetCardResults { + /* width: 20vw; */ + height: 247px; + margin: 24px !important; + width: 61vw; + /* border: 2px solid #3b9ad5; */ + padding: 3px; + display: flex; + box-shadow: 18 (0, 0, 0, -0.75) 0px 1px 0px, rgba(1, 1, 2, 12); + align-items: center; + align-content: center; + flex-direction: column; + background-color: #495782; + justify-content: center; + border-radius: 8px; + } + + .resultsRecord { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: center; + width: 100vw; + height: 68vh; + } + + .tittle4 { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + background: #c8d4e6; + height: 60px; + margin-top: 2px; + } + .datasetCard p { + font-size: 11px; + font-weight: normal; + color: rgb(61 60 60); + line-height: 18px; + margin-top: -5px; + } + + .datasetCard { + width: 58vw; + margin: 30px; + /* border: 2px solid #3b9ad5; */ + padding: 16px; + display: flex; + box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px, + rgba(179, 179, 179, 0.22) 0px -4px 3px; + align-items: center; + align-content: center; + flex-direction: column; + background-color: white; + justify-content: flex-start; + } + .tittle { + width: 54vw; background: #c8d4e6; border-radius: 2px; /* height: 80px; */ @@ -466,6 +592,10 @@ } @media (max-width: 600px) { + .tittleResults { + width: 72vw; + height: 200px; + } .datasetCardResults { width: 49vw; height: 247px; diff --git a/frontend/src/components/Dataset/BeaconInfo.js b/frontend/src/components/Dataset/BeaconInfo.js index a6ccdbc0..fb49db75 100644 --- a/frontend/src/components/Dataset/BeaconInfo.js +++ b/frontend/src/components/Dataset/BeaconInfo.js @@ -58,7 +58,7 @@ function BeaconInfo (props) { {resp[0].meta.beaconId === 'org.ega-archive.ga4gh-approval-beacon-test' && ( Beacon API @@ -66,8 +66,8 @@ function BeaconInfo (props) { )} {resp[0].meta.beaconId !== 'org.ega-archive.ga4gh-approval-beacon-test' && - resp.response && ( - + ( + Beacon API )} @@ -100,4 +100,4 @@ function BeaconInfo (props) { ) } -export default BeaconInfo +export default BeaconInfo \ No newline at end of file diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.css b/frontend/src/components/FilteringTerms/FilteringTerms.css index cf5bf50e..2e3c6688 100644 --- a/frontend/src/components/FilteringTerms/FilteringTerms.css +++ b/frontend/src/components/FilteringTerms/FilteringTerms.css @@ -1,11 +1,39 @@ .search-box { - margin: 10px; + margin-top: 10px; + margin-bottom: 10px; width: 100%; } -.search-tr { +.search-tr2 { display: flex; - width: 40%; + margin: 0px; + width: 100%; +} +.search-tr1 { + display: flex; + width: 100%; +} +.searchTermInput { + margin: 5px; + width: 70%; + height: 28px; + margin-left: 34px; + border: 1px solid rgb(204, 205, 206); + border-radius: 2px; + box-shadow: rgba(216, 207, 207, 0.25) 0px 1px 1px, rgba(197, 150, 150, 0.13) 0px 0px 1px 1px; +} + +.inputTerm { + display: flex; + align-items: center; + justify-content: flex-start; + +} + +.inputLabel { + display: flex; + align-items: center; + justify-content: flex-start; } thead { @@ -19,25 +47,37 @@ thead { position: sticky; top: 0px; z-index: 2; + width: 100%; +} + +tbody { + width: 60vw !important; } .thead2 { position: sticky; - top: 73.6px; + top: 61.4px; z-index: 2; + width: 100%; } #table { - margin-left: 78px; - margin-right: 78px; + display: flex; + font-size: 15px; - width: 90%; + /* width: 90%; */ + height: fit-content; + flex-direction: column; + margin-left: 1vw; } .tableWrapper { - height: 70vh; - width: 90vw; + height: 100vh; + width: 85vw; overflow: scroll; + display: flex; + + justify-content: center; } .generalContainer { @@ -50,7 +90,7 @@ thead { .th1 { display: flex; - width: 50%; + width: 66%; /* height: 100%; */ /* justify-content: center; */ margin-top: 12px; @@ -75,7 +115,7 @@ thead { } .th2 { display: flex; - width: 50%; + width: 61%; /* height: 100%; */ /* justify-content: center; */ margin-top: 12px; @@ -91,7 +131,7 @@ thead { } .tag-box { - width: 100vw; + width: 85vw; } .tag-box ul { @@ -130,7 +170,7 @@ thead { .th2 { display: flex; - width: 50%; + width: 61%; /* height: 100%; */ /* justify-content: center; */ margin-top: 12px; @@ -158,7 +198,8 @@ thead { .th4 { display: flex; - width: 50%; + width: 57%; + /* height: 100%; */ /* justify-content: center; */ margin-top: 12px; @@ -171,7 +212,7 @@ thead { .th5 { display: flex; - width: 50%; + width: 62%; /* height: 100%; */ /* justify-content: center; */ margin-top: 12px; @@ -213,26 +254,30 @@ thead { margin-right: 7px; } -.searchTermInput { - margin: 10px; - width: 90%; - height: 28px; -} - .searchTermInput1 { - margin: 10px; - width: 90%; + width: 60%; height: 28px; + margin-left: 23px; + border: 1px solid rgb(204, 205, 206); + border-radius: 2px; + box-shadow: rgba(216, 207, 207, 0.25) 0px 1px 1px, rgba(197, 150, 150, 0.13) 0px 0px 1px 1px; } tr { display: flex; width: 100%; + align-items: center; + justify-content: flex-start; } .terms1 { - background-color: #efedf4; - border-bottom: solid #8985c1; + background-color: #e7eef5; + border-bottom: solid #3d72a6; + width: 100%; +} + +.terms2 { + width: 100%; } .checkbox { @@ -242,3 +287,31 @@ tr { .checkbox2 { border: none; } + +@media (max-width: 1280px) { + tbody { + width: 90vw !important; + } + .search-tr2 { + display: flex; + margin: 0px; + width: 100%; + } + .search-tr1 { + display: flex; + width: 100%; + } + .searchTermInput { + margin: 5px; + width: 70%; + height: 28px; + margin-left: 34px; + } + .tableWrapper { + height: 100vh; + width: 95vw; + overflow: scroll; + display: flex; + justify-content: center; + } +} diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.js b/frontend/src/components/FilteringTerms/FilteringTerms.js index eae80e9b..ed2f7bb2 100644 --- a/frontend/src/components/FilteringTerms/FilteringTerms.js +++ b/frontend/src/components/FilteringTerms/FilteringTerms.js @@ -17,16 +17,16 @@ function FilteringTerms (props) { const [results, setResults] = useState('') + const [popUp, showPopUp] = useState(false) + const [state, setstate] = useState({ query: '', - list: - props.filteringTerms !== false - ? props.filteringTerms.data.response.filteringTerms - : 'error' + list: props.filteringTerms !== undefined ? props.filteringTerms : 'error' }) const [trigger, setTrigger] = useState(false) + const [hide, setHide] = useState(true) const remove = tag => { setSelected(selected.filter(t => t.value !== tag.value)) @@ -38,7 +38,7 @@ function FilteringTerms (props) { } }) - props.filteringTerms.data.response.filteringTerms.forEach(element => { + props.filteringTerms.forEach(element => { if (element.id === tag.value) { state.list.unshift(element) } @@ -92,16 +92,38 @@ function FilteringTerms (props) { const [ID, setId] = useState('') useEffect(() => { + console.log(props.filteringTerms) if (state.list === 'error') { setError(true) } else { setError(false) } + + state.list.forEach((element, index) => { + console.log(element.scopes.length) + + if (element.scopes.length > 1) { + console.log(element.scopes) + + element.scopes.forEach(element2 => { + let arrayNew = {} + arrayNew = { ...element } + console.log(element2) + arrayNew['scopes'] = [element2] + console.log(arrayNew) + + state.list.push(arrayNew) + }) + } + }) + setstate({ query: '', list: props.filteringTerms !== false ? state.list : 'error' }) + console.log(state.list) + if (state.list !== 'error') { const sampleTags = state.list.map(t => ({ label: t.id, @@ -113,23 +135,21 @@ function FilteringTerms (props) { }, [props.filteringTerms, trigger]) const handleChange = e => { - const results = props.filteringTerms.data.response.filteringTerms.filter( - post => { - if (e.target.value === '') { - return props.filteringTerms.data.response.filteringTerms + const results = props.filteringTerms.filter(post => { + if (e.target.value === '') { + return props.filteringTerms + } else { + if (post.id != undefined) { + if (post.id.toLowerCase().includes(e.target.value.toLowerCase())) { + return post + } } else { - if (post.id != undefined) { - if (post.id.toLowerCase().includes(e.target.value.toLowerCase())) { - return post - } - } else { - if (post.id.toLowerCase().includes(e.target.value.toLowerCase())) { - return post - } + if (post.id.toLowerCase().includes(e.target.value.toLowerCase())) { + return post } } } - ) + }) setstate({ //query: e.target.value, list: results @@ -139,110 +159,96 @@ function FilteringTerms (props) { } const handleChange2 = e => { - const results = props.filteringTerms.data.response.filteringTerms.filter( - post => { - if (post.label !== '' && post.label !== undefined) { - if (e.target.value === '') { - return props.filteringTerms.data.response.filteringTerms - } else { - if (post.label !== undefined) { - if ( - post.label.toLowerCase().includes(e.target.value.toLowerCase()) - ) { - return post - } + const results = props.filteringTerms.filter(post => { + if (post.label !== '' && post.label !== undefined) { + if (e.target.value === '') { + return props.filteringTerms + } else { + if (post.label !== undefined) { + if ( + post.label.toLowerCase().includes(e.target.value.toLowerCase()) + ) { + return post } } } } - ) + }) setstate({ list: results }) } const handleChange3 = e => { - const results = props.filteringTerms.data.response.filteringTerms.filter( - post => { - if (e.target.value === '') { - return props.filteringTerms.data.response.filteringTerms + const results = props.filteringTerms.filter(post => { + if (e.target.value === '') { + return props.filteringTerms + } else { + if (post.type !== undefined) { + if (post.type.toLowerCase().includes(e.target.value.toLowerCase())) { + return post + } } else { - if (post.type !== undefined) { - if ( - post.type.toLowerCase().includes(e.target.value.toLowerCase()) - ) { - return post - } - } else { - if ( - post.type.toLowerCase().includes(e.target.value.toLowerCase()) - ) { - return post - } + if (post.type.toLowerCase().includes(e.target.value.toLowerCase())) { + return post } } } - ) + }) setstate({ list: results }) } const handleChange4 = e => { - const results = props.filteringTerms.data.response.filteringTerms.filter( - post => { - if (e.target.value === '') { - return props.filteringTerms.data.response.filteringTerms - } else { - if (post.scopes !== undefined) { - var returnedPosts = [] - post.scopes.forEach(element => { - if ( - element.toLowerCase().includes(e.target.value.toLowerCase()) - ) { - returnedPosts.push(post) - } - }) - if (returnedPosts.length > 0) { - return returnedPosts + const results = props.filteringTerms.filter(post => { + if (e.target.value === '') { + return props.filteringTerms + } else { + if (post.scopes !== undefined) { + var returnedPosts = [] + post.scopes.forEach(element => { + console.log(element.toLowerCase()) + console.log(e.target.value.toLowerCase()) + if (element.toLowerCase().includes(e.target.value.toLowerCase())) { + returnedPosts.push(post) } + }) + if (returnedPosts.length > 0) { + return returnedPosts } } } - ) + }) setstate({ list: results }) } const handleCheck = e => { + console.log(e.target) let infoValue = e.target.value.split(',') - if (infoValue[1].toLowerCase() !== 'alphanumeric') { - const alreadySelected = selected.filter( - term => term.label === infoValue[0] - ) - - if (alreadySelected.length !== 0) { - setSelected(selected.filter(t => t.value !== infoValue[0])) - } else { - const newTag = { - label: infoValue[0], - value: infoValue[0] - } - - selected.push(newTag) - } - + if (infoValue[2].toLowerCase() !== 'alphanumeric') { if (props.query !== null) { let stringQuery = '' if (props.query.includes(',')) { let arrayTerms = props.query.split(',') arrayTerms.forEach(element => { - if (element === infoValue[0]) { - stringQuery = props.query + if (infoValue[1]) { + if (element === `${infoValue[3]}=${infoValue[1]}`) { + stringQuery = props.query + } else { + stringQuery = + props.query + ',' + `${infoValue[3]}=${infoValue[1]}` + } } else { - stringQuery = props.query + ',' + infoValue[0] + if (element === `${infoValue[3]}=${infoValue[0]}`) { + stringQuery = props.query + } else { + stringQuery = + props.query + ',' + `${infoValue[3]}=${infoValue[0]}` + } } }) @@ -252,17 +258,47 @@ function FilteringTerms (props) { props.setQuery(stringQuery) } } else { - if (infoValue[0] !== props.query && props.query !== '') { - stringQuery = `${props.query},` + infoValue[0] - props.setQuery(stringQuery) - } else if (infoValue[0] !== props.query && props.query === '') { - stringQuery = `${props.query}` + infoValue[0] - props.setQuery(stringQuery) + if (infoValue[1]) { + if ( + `${infoValue[3]}=${infoValue[1]}` !== props.query && + props.query !== '' + ) { + stringQuery = + `${props.query},` + `${infoValue[3]}=${infoValue[1]}` + + props.setQuery(stringQuery) + } else if ( + `${infoValue[3]}=${infoValue[1]}` !== props.query && + props.query === '' + ) { + stringQuery = `${props.query}` + `${infoValue[3]}=${infoValue[1]}` + props.setQuery(stringQuery) + } + } else { + if ( + `${infoValue[3]}=${infoValue[0]}` !== props.query && + props.query !== '' + ) { + stringQuery = + `${props.query},` + `${infoValue[3]}=${infoValue[0]}` + props.setQuery(stringQuery) + } else if ( + `${infoValue[3]}=${infoValue[0]}` !== props.query && + props.query === '' + ) { + stringQuery = `${props.query}` + `${infoValue[3]}=${infoValue[0]}` + props.setQuery(stringQuery) + } } } } else { - let stringQuery = infoValue[0] - props.setQuery(stringQuery) + if (infoValue[1]) { + let stringQuery = `${infoValue[3]}=${infoValue[1]}` + props.setQuery(stringQuery) + } else { + let stringQuery = `${infoValue[3]}=${infoValue[0]}` + props.setQuery(stringQuery) + } } const filteredItems = state.list.filter(item => item.id !== infoValue[0]) e.target.checked = false @@ -298,15 +334,12 @@ function FilteringTerms (props) { backspaceDelete={true} removeTag={remove} /> - {error && ( -

No filtering terms available. Please check your connection

- )} {!error && (
- + - + - - - - - - + {hide === false && ( + + + + )} + { + + + + } - + {hide === false && } - {props.filteringTerms.data !== undefined && + {props.filteringTerms !== undefined && state.list !== 'error' && state.list.map((term, index) => { return ( @@ -413,7 +450,13 @@ function FilteringTerms (props) { type='checkbox' id={term.id} name={term.id} - value={[term.id, term.type, index]} + value={[ + term.id, + term.label, + term.type, + [term.scopes], + index + ]} /> {term.id} @@ -438,10 +481,12 @@ function FilteringTerms (props) { )} - + {hide === false && ( + + )} - @@ -486,18 +537,18 @@ function FilteringTerms (props) { )} - + {hide === false && ( + + )} - {term.scopes && ( - - )} - {term.scope && } + )} @@ -554,7 +605,7 @@ function FilteringTerms (props) { className='buttonAlphanum' onClick={handdleInclude} > - Include + diff --git a/frontend/src/components/Footer/Footer.css b/frontend/src/components/Footer/Footer.css new file mode 100644 index 00000000..2e2ca73f --- /dev/null +++ b/frontend/src/components/Footer/Footer.css @@ -0,0 +1,248 @@ +.social-icon, +.menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width: 100vw; +} + +.social-icon { + margin: 0px; + padding: 0px; +} + +ion-icon { + font-size: 26px; + color: white; + margin-top: 10px; + margin-bottom: 8px; +} + +ion-icon:hover{ + color: greenyellow; +} + +.social-icon__item { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-content: center; + justify-content: center; + align-items: center; +} + +.social-icon__item, +.menu__item { + list-style: none; +} + +.social-icon__link { + font-size: 12px; + color: #fff; + margin: 8px 20px; + display: inline-block; + transition: 0.3s; +} +.social-icon__link:hover { + transform: translateY(-10px); +} + +.social-icon__item { + margin: 0 18px; +} + +.menu__link { + font-size: 14.8px; + color: #cccccc; + margin: 0 30px; + display: inline-block; + transition: 0.35s; + text-decoration: none; + opacity: 0.75; + font-weight: 300; +} + +.menu__linkActive { + font-size: 1rem; + color: #ffa601; + margin: 0 30px; + display: inline-block; + transition: 0.45s; + text-decoration: none; + opacity: 0.75; + font-weight: 440; +} + +.menu__link:hover { + opacity: 1; +} + +.footer p { + color: #fff; + margin: 15px 0 15px 0; + font-size: 1rem; + font-weight: 300; +} + +@media (min-width: 1410px) { + .footerContainer { + background-color: #34495e; + height: 26vh; + position: relative; + left: 0; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + } +} + +@media (max-width: 1409px) { + .footerContainer { + background-color: #3d72a6; + height: 26vh; + position: relative; + left: 0; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + } +} + +@media (max-width: 1114px) { + .social-icon, + .menu { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + width: 100vw; + } + + ion-icon { + font-size: 28px; + } + + .social-icon__item { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-content: center; + justify-content: center; + align-items: center; + } + + .social-icon__item, + .menu__item { + list-style: none; + } + + .social-icon__link { + font-size: 10px; + color: #fff; + margin: 8px 14px; + display: inline-block; + transition: 0.3s; + } + .social-icon__link:hover { + transform: translateY(-10px); + } + + .social-icon__item { + margin: 0 2px; + } + + .menu__link { + font-size: 1rem; + color: #cccccc; + margin: 0 30px; + display: inline-block; + transition: 0.35s; + text-decoration: none; + opacity: 0.75; + font-weight: 300; + } + + .menu__linkActive { + font-size: 1rem; + color: #ffa601; + margin: 0 30px; + display: inline-block; + transition: 0.45s; + text-decoration: none; + opacity: 0.75; + font-weight: 440; + } + + .menu__link:hover { + opacity: 1; + } + + .footer p { + color: #fff; + margin: 15px 0 10px 0; + font-size: 1rem; + font-weight: 300; + } +} + +@media (max-width: 882px) { + .footerContainer { + background-color: #3d72a6; + height: 30vh; + position: relative; + left: 0; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + } + + .social-icon__link { + font-size: 9px; + color: #fff; + margin: 8px 8px; + display: inline-block; + transition: 0.3s; + } + .menu__link { + font-size: 12.5px; + color: #cccccc; + margin: 0 30px; + display: inline-block; + transition: 0.35s; + text-decoration: none; + opacity: 0.75; + font-weight: 300; + } + .social-icon__item { + margin: 0 -2px; + margin-top: 10px; + margin-bottom: 10px; + } +} + +@media (max-width: 350px) { + .footerContainer { + background-color: #3d72a6; + height: 40vh; + position: relative; + left: 0; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + text-align: center; + justify-content: center; + } +} diff --git a/frontend/src/components/Footer/Footer.js b/frontend/src/components/Footer/Footer.js new file mode 100644 index 00000000..1329f4e9 --- /dev/null +++ b/frontend/src/components/Footer/Footer.js @@ -0,0 +1,171 @@ +import './Footer.css' +import { NavLink } from 'react-router-dom' +import { useEffect } from 'react' +import { AuthContext } from '../context/AuthContext' +import { useContext } from 'react' +import { useAuth } from 'oidc-react' + +function Footer (props) { + const { + isLoggedIn, + setIsLoggedIn, + logOutUser, + authenticateUser, + getStoredToken, + userNameToShare, + setUserNameToShare + } = useContext(AuthContext) + + const handleClick = () => { + setIsLoggedIn(false) + auth.signOut() + logOutUser() + } + const auth = useAuth() + + useEffect(() => { + authenticateUser() + let token = getStoredToken() + let isAuthenticated = false + if (token === null) { + isAuthenticated = auth.userData?.id_token ? true : false + } else { + isAuthenticated = true + } + + if (isAuthenticated || isLoggedIn === true) { + setIsLoggedIn(true) + } else { + setIsLoggedIn(false) + } + }, []) + + return ( +
+
+
    +
  • + + + + + isActive ? 'menu__linkActive' : 'menu__link' + } + > + About + +
    • +
  • + + + + + isActive ? 'menu__linkActive' : 'menu__link' + } + > + Beacon validator + +
    • + {/*
  • + + + + + GitHub + +
    • */} + {/*
  • + + + + + Documentation + +
    • */} + {/*
  • + + + + + isActive ? 'menu__linkActive' : 'menu__link' + } + > + Network members + +
    • */} + {isLoggedIn === false && ( +
  • + + + + + isActive ? 'menu__linkActive' : 'menu__link' + } + > + Log in + +
    • + )} + {isLoggedIn === true && ( +
  • + + + + + isActive ? 'menu__link' : 'menu__link' + } + onClick={handleClick} + > + Log out + +
    • + )} +
+
+
+ ) +} +export default Footer diff --git a/frontend/src/components/GenomicVariations/GenomicVariations.css b/frontend/src/components/GenomicVariations/GenomicVariations.css index 3d943906..9b2867d9 100644 --- a/frontend/src/components/GenomicVariations/GenomicVariations.css +++ b/frontend/src/components/GenomicVariations/GenomicVariations.css @@ -6,4 +6,5 @@ .modeVariantsQueries2{ margin-top: -52px; -} \ No newline at end of file +} + diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js index 57a74027..79511515 100644 --- a/frontend/src/components/GenomicVariations/VariantsResults.js +++ b/frontend/src/components/GenomicVariations/VariantsResults.js @@ -1,11 +1,10 @@ -import './GenomicVariations.css' import '../Individuals/Individuals.css' import '../../App.css' import { useState, useEffect } from 'react' import axios from 'axios' +import { AuthContext } from '../context/AuthContext' import { useAuth } from 'oidc-react' import configData from '../../config.json' -import { AuthContext } from '../context/AuthContext' import { useContext } from 'react' import TableResultsVariant from '../Results/VariantResults/TableResultsVariant' @@ -36,29 +35,73 @@ function VariantsResults (props) { const [resultsPerDataset, setResultsDataset] = useState([]) const [resultsNotPerDataset, setResultsNotPerDataset] = useState([]) - let queryStringTerm = '' + const [isActive1, setIsActive1] = useState(false) + const [isActive2, setIsActive2] = useState(false) + const [isActive3, setIsActive3] = useState(false) + + const [pause, setPause] = useState(false) + const [ontologyMultipleScope, setOntologyMultipleScope] = useState([]) + const [triggerQueryScope, setTriggerQScope] = useState(false) + + const [optionsScope, setOptionsScope] = useState([]) + const [chosenScope, setChosenScope] = useState('') + const [ontologyChosenScope, setOntologyScope] = useState([]) + + const [triggerSubmit, settriggerSubmit] = useState(false) + const handleChangeScope = event => { + console.log(event.target.value) + setChosenScope(event.target.value) + } + let queryStringTerm = [] + const handleTypeResults1 = () => { setShow1(true) setShow2(false) setShow3(false) + setIsActive1(true) + setIsActive2(false) + setIsActive3(false) } const handleTypeResults2 = () => { setShow2(true) setShow1(false) setShow3(false) + setIsActive2(true) + setIsActive3(false) + setIsActive1(false) } const handleTypeResults3 = () => { setShow3(true) setShow1(false) setShow2(false) + setIsActive3(true) + setIsActive1(false) + setIsActive2(false) + } + + const submitScopeChosen = e => { + console.log(chosenScope) + arrayFilter.length = 0 + beaconsList.length = 0 + console.log(arrayFilter) + setTriggerQScope(!triggerQueryScope) } const auth = useAuth() let isAuthenticated = auth.userData?.id_token ? true : false - useEffect(() => { + setTimeOut(false) + let collection = '' + if (props.collection === 'Individuals') { + collection = 'individual' + } else if (props.collection === 'Variant') { + collection = 'variant' + } else if (props.collection === 'Biosamples') { + collection = 'biosample' + } + const apiCall = async () => { if (isAuthenticated === false) { authenticateUser() @@ -69,313 +112,398 @@ function VariantsResults (props) { } } - try { - let res = await axios.get(configData.API_URL + '/info') + var arrayRequestParameters = [] + // var requestParametersSequence = {} + + // var requestParametersRange = {} + + // var requestParametersGene = {} + + // if (props.seqModuleArray.length > 0) { + // props.seqModuleArray.forEach(element => { + // if (element.assemblyId !== '') { + // requestParametersSequence['assemblyId'] = element.assemblyId + // } + // if (element.referenceName !== '') { + // requestParametersSequence['referenceName'] = element.referenceName + // } + // if (element.start !== '') { + // requestParametersSequence['start'] = element.start + // } + // if (element.referenceBases !== '') { + // requestParametersSequence['referenceBases'] = element.referenceBases + // } + // if (element.alternateBases !== '') { + // requestParametersSequence['alternateBases'] = element.alternateBases + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + + // arrayRequestParameters.push(requestParametersSequence) + // requestParametersSequence = {} + // }) + // } + + // if (props.rangeModuleArray.length > 0) { + // console.log(props.rangeModuleArray) + // props.rangeModuleArray.forEach(element => { + // if (element.assemblyId !== '') { + // requestParametersRange['assemblyId'] = element.assemblyId + // } + // if (element.referenceName !== '') { + // requestParametersRange['referenceName'] = element.referenceName + // } + // if (element.start !== '') { + // requestParametersRange['start'] = element.start + // } + // if (element.end !== '') { + // requestParametersRange['end'] = element.end + // } + // if (element.variantType !== '') { + // requestParametersRange['variantType'] = element.variantType + // } + // if (element.alternateBases !== '') { + // requestParametersRange['alternateBases'] = element.alternateBases + // } + + // if (element.referenceBases !== '') { + // requestParametersRange['referenceBases'] = element.referenceBases + // } + + // if (element.aminoacid !== '') { + // requestParametersRange['aminoacidChange'] = element.aminoacid + // } + // if (element.variantMinLength !== '') { + // requestParametersRange['variantMinLength'] = + // element.variantMinLength + // } + // if (element.variantMaxLength !== '') { + // requestParametersRange['variantMaxLength'] = + // element.variantMaxLength + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + // arrayRequestParameters.push(requestParametersRange) + // requestParametersRange = {} + // }) + // } + + // if (props.geneModuleArray.length > 0) { + // props.geneModuleArray.forEach(element => { + // console.log(element) + // if (element.geneID !== '') { + // requestParametersGene['geneId'] = element.geneID + // } + // if (element.assemblyId !== '') { + // requestParametersGene['assemblyId'] = element.assemblyId + // } + // if (element.variantType !== '') { + // requestParametersGene['variantType'] = element.variantType + // } + // if (element.variantMinLength !== '') { + // requestParametersGene['variantMinLength'] = element.variantMinLength + // } + // if (element.variantMaxLength !== '') { + // requestParametersGene['variantMaxLength'] = element.variantMaxLength + // } + // if (element.aminoacid !== '') { + // requestParametersGene['aminoacidChange'] = element.aminoacid + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + // arrayRequestParameters.push(requestParametersGene) + // requestParametersGene = {} + // }) + // } + + var requestParameters = {} + + if (props.query !== null) { + if (props.query.includes(',')) { + let queryStringTerm2 = props.query.split(',') + queryStringTerm2.forEach(element => { + queryStringTerm.push(element.trim()) + }) + } else { + if (props.query.includes(':') && !props.query.includes('>')) { + let arrayParameters = [] + let reqParameters = [] + if (props.query.includes('&')) { + arrayParameters = props.query.split('&') + console.log(arrayParameters) + arrayParameters.forEach(element => { + reqParameters.length = 0 + reqParameters = element.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + }) + arrayRequestParameters.push(requestParameters) + } else { + let reqParameters = props.query.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + arrayRequestParameters.push(requestParameters) + } + } else if (props.query.includes(':') && props.query.includes('>')) { + let reqParameters = props.query.split(':') + console.log(reqParameters) + let position = [] + if (props.query.includes('-')) { + position = reqParameters[0].split('-') + } else { + position = reqParameters[0] + } - beaconsList.push(res.data.response) + console.log(position) + let bases = reqParameters[2].split('>') + console.log(bases) + requestParameters['start'] = position[0] + if (position[1]) { + requestParameters['end'] = position[1] + } + requestParameters['variantType'] = reqParameters[1] + requestParameters['alternateBases'] = bases[1] + requestParameters['referenceBases'] = bases[0] + arrayRequestParameters.push(requestParameters) + } else { + queryStringTerm.push(props.query.trim()) + } + } + + console.log(queryStringTerm) + let filter = {} - if (props.showBar === false) { - setShowVariantsResults(true) - if (props.query !== null) { - if (props.query.includes(',')) { - queryStringTerm = props.query.split(',') - queryStringTerm.forEach((element, index) => { - element = element.trim() + queryStringTerm.forEach((term, index) => { + console.log(term) + requestParameters = {} + if ( + (term.includes('=') || + term.includes('>') || + term.includes('<') || + term.includes('!') || + term.includes('%')) && + !term.includes(':') + ) { + if (term.includes('=')) { + queryArray[index] = term.split('=') + queryArray[index].push('=') + console.log(queryArray) + } else if (term.includes('>')) { + queryArray[index] = term.split('>') + queryArray[index].push('>') + } else if (term.includes('<')) { + queryArray[index] = term.split('<') + queryArray[index].push('<') + } else if (term.includes('!')) { + queryArray[index] = term.split('!') + queryArray[index].push('!') + } else { + queryArray[index] = term.split('%') + queryArray[index].push('%') + } + console.log(queryArray[index][1].toLowerCase()) + let alphanumericFilter = {} + props.filteringTerms.forEach(element => { + if (element.label) { if ( - element.includes('=') || - element.includes('>') || - element.includes('<') || - element.includes('!') || - element.includes('%') + queryArray[index][1].toLowerCase() === + element.label.toLowerCase() ) { - if (element.includes('=')) { - queryArray[index] = element.split('=') - queryArray[index].push('=') - } else if (element.includes('>')) { - queryArray[index] = element.split('>') - queryArray[index].push('>') - } else if (element.includes('<')) { - queryArray[index] = element.split('<') - queryArray[index].push('<') - } else if (element.includes('!')) { - queryArray[index] = element.split('!') - queryArray[index].push('!') + if (queryArray[index][0].toLowerCase() === 'individual') { + alphanumericFilter = { + id: element.id, + scope: ['individual'] + } + } else if ( + queryArray[index][0].toLowerCase() === 'genomicvariation' + ) { + alphanumericFilter = { + id: element.id, + scope: ['genomicVariation'] + } + } else if ( + queryArray[index][0].toLowerCase() === 'biosample' + ) { + alphanumericFilter = { + id: element.id, + scope: ['biosample'] + } + } else if (queryArray[index][0].toLowerCase() === 'cohort') { + alphanumericFilter = { + id: element.id, + scope: ['cohort'] + } + } else if (queryArray[index][0].toLowerCase() === 'run') { + alphanumericFilter = { + id: element.id, + scope: ['run'] + } } else { - queryArray[index] = element.split('%') - queryArray[index].push('%') - } - const alphaNumFilter = { - id: queryArray[index][0], - operator: queryArray[index][2], - value: queryArray[index][1] - } - arrayFilter.push(alphaNumFilter) - } else { - const filter2 = { - id: element, - includeDescendantTerms: props.descendantTerm + alphanumericFilter = { + id: element.id, + scope: element.scopes + } } - arrayFilter.push(filter2) - } - }) - } else { - if ( - props.query.includes('=') || - props.query.includes('>') || - props.query.includes('<') || - props.query.includes('!') || - props.query.includes('%') - ) { - if (props.query.includes('=')) { - queryArray[0] = props.query.split('=') - queryArray[0].push('=') - } else if (props.query.includes('>')) { - queryArray[0] = props.query.split('>') - queryArray[0].push('>') - } else if (props.query.includes('<')) { - queryArray[0] = props.query.split('<') - queryArray[0].push('<') - } else if (props.query.includes('!')) { - queryArray[0] = props.query.split('!') - queryArray[0].push('!') - } else { - queryArray[0] = props.query.split('%') - queryArray[0].push('%') - } - - const alphaNumFilter = { - id: queryArray[0][0], - operator: queryArray[0][2], - value: queryArray[0][1] - } - arrayFilter.push(alphaNumFilter) - } else { - const filter = { - id: props.query } - arrayFilter.push(filter) } - } - } + }) - if (props.query === null) { - // show all individuals + if (Object.keys(alphanumericFilter).length === 0) { + console.log(queryArray[index][0]) + props.filteringTerms.forEach(element => { + if ( + queryArray[index][0].toLowerCase() === + element.id.toLowerCase() + ) { + queryArray[index][3] = element.scopes + } + }) - var jsonData1 = { - meta: { - apiVersion: '2.0' - }, - query: { - filters: arrayFilter, - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: skip, - limit: limit - }, - testMode: false, - requestedGranularity: 'record' + if (queryArray[index][3] === undefined) { + queryArray[index][3] = [collection] + } + console.log(queryArray) + alphanumericFilter = { + id: queryArray[index][0], + operator: queryArray[index][2], + value: queryArray[index][1], + scope: queryArray[index][3] } + console.log(alphanumericFilter) } - jsonData1 = JSON.stringify(jsonData1) - let token = null - if (auth.userData === null) { - token = getStoredToken() + arrayFilter.push(alphanumericFilter) + } else if (term.includes(':') && !term.includes('>')) { + let arrayParameters = [] + let reqParameters = [] + if (term.includes('&')) { + arrayParameters = term.split('&') + console.log(arrayParameters) + arrayParameters.forEach(element => { + reqParameters.length = 0 + reqParameters = element.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + }) + arrayRequestParameters.push(requestParameters) } else { - token = auth.userData.access_token + let reqParameters = term.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + arrayRequestParameters.push(requestParameters) } - - if (token === null) { - res = await axios.post( - configData.API_URL + '/g_variants', - jsonData1 - ) - // Object.defineProperty(res.data.response.resultSets[0], 'beaconId', { - // value: 'es.chipdb.cnic.beacon' - //}) + } else if (term.includes(':') && term.includes('>')) { + let reqParameters = term.split(':') + console.log(reqParameters) + let position = [] + if (term.includes('-')) { + position = reqParameters[0].split('-') } else { - const headers = { Authorization: `Bearer ${token}` } - - res = await axios.post( - configData.API_URL + '/g_variants', - jsonData1, - { headers: headers } - ) + position = reqParameters[0] } - setTimeOut(true) - if ( - res.data.responseSummary.numTotalResults < 1 || - res.data.responseSummary.numTotalResults === undefined - ) { - setError('ERROR. Please check the query and retry') - setNumberResults(0) - setBoolean(false) - } else { - res.data.response.resultSets.forEach((element, index) => { - if (element.id && element.id !== '') { - if (resultsPerDataset.length > 0) { - resultsPerDataset.forEach(element2 => { - element2[0].push(element.id) - element2[1].push(element.exists) - element2[2].push(element.resultsCount) - }) - } else { - let arrayResultsPerDataset = [ - //element.beaconId, - [element.id], - [element.exists], - [element.resultsCount] - ] - - resultsPerDataset.push(arrayResultsPerDataset) + let bases = reqParameters[2].split('>') + console.log(bases) + requestParameters['start'] = position[0] + if (position[1]) { + requestParameters['end'] = position[1] + } + requestParameters['variantType'] = reqParameters[1] + requestParameters['alternateBases'] = bases[1] + requestParameters['referenceBases'] = bases[0] + arrayRequestParameters.push(requestParameters) + } else { + props.filteringTerms.forEach(element => { + if (element.label) { + if ( + term.toLowerCase() === element.label.toLowerCase() || + term.toLowerCase() === element.id.toLowerCase() + ) { + filter = { + id: element.id, + scope: element.scopes } } - - if (element.id === undefined || element.id === '') { - let arrayResultsNoDatasets = [element.beaconId] - resultsNotPerDataset.push(arrayResultsNoDatasets) + } else { + if (element.id.toLowerCase() === term.toLowerCase()) { + filter = { + id: element.id, + scope: element.scopes + } } + } + }) - if (res.data.response.resultSets[index].results) { - res.data.response.resultSets[index].results.forEach( - (element2, index2) => { - let arrayResult = [ - res.data.meta.beaconId, - res.data.response.resultSets[index].results[index2] - ] - results.push(arrayResult) - } - ) - } - }) - } + arrayFilter.push(filter) } - } else { - setShowVariantsResults(true) + }) + } - // referenceName={referenceName} start={start} end={end} variantType={variantType} alternateBases={alternateBases} referenceBases={referenceBases} aminoacid={aminoacid} geneID={geneID} /> - // + console.log(arrayFilter) - var requestParametersSequence = {} - var requestParametersRange = {} - var requestParametersGene = {} - if (props.referenceName !== '') { - requestParametersSequence['referenceName'] = props.referenceName - } - if (props.referenceName2 !== '') { - requestParametersRange['referenceName'] = props.referenceName2 - } - if (props.start !== '') { - requestParametersSequence['start'] = props.start - } - if (props.start2 !== '') { - requestParametersRange['start'] = props.start2 - } - if (props.variantMinLength !== '') { - requestParametersRange['variantMinLength'] = props.variantMinLength - } - if (props.variantMaxLength !== '') { - requestParametersRange['variantMaxLength'] = props.variantMaxLength - } - if (props.variantMinLength2 !== '') { - requestParametersGene['variantMinLength'] = props.variantMinLength2 - } - if (props.variantMaxLength2 !== '') { - requestParametersGene['variantMaxLength'] = props.variantMaxLength2 - } - if (props.end !== '') { - requestParametersRange['end'] = props.end - } - if (props.variantType !== '') { - requestParametersRange['variantType'] = props.variantType - } - if (props.variantType2 !== '') { - requestParametersGene['variantType'] = props.variantType2 - } - if (props.alternateBases !== '') { - requestParametersSequence['alternateBases'] = props.alternateBases - } - if (props.alternateBases2 !== '') { - requestParametersRange['alternateBases'] = props.alternateBases2 - } - if (props.referenceBases !== '') { - requestParametersSequence['referenceBases'] = props.referenceBases - } - if (props.referenceBases2 !== '') { - requestParametersRange['referenceBases'] = props.referenceBases2 - } - if (props.aminoacid !== '') { - requestParametersSequence['aminoacidChange'] = props.aminoacid - } - if (props.aminoacid2 !== '') { - requestParametersRange['aminoacidChange'] = props.aminoacid2 - } - if (props.geneID !== '') { - requestParametersGene['geneId'] = props.geneID - } - if (props.assemblyId !== '') { - requestParametersSequence['assemblyId'] = props.assemblyId - } - if (props.assemblyId2 !== '') { - requestParametersRange['assemblyId'] = props.assemblyId2 - } - if (props.assemblyId3 !== '') { - requestParametersGene['assemblyId'] = props.assemblyId3 - } + try { + let res = await axios.get(configData.API_URL + '/info') + beaconsList.push(res.data.response) + + console.log(ontologyMultipleScope) + if (props.query === null) { + // show all individuals var jsonData1 = {} - if (props.sequenceSubmitted) { - jsonData1 = { - meta: { - apiVersion: '2.0' - }, - query: { - requestParameters: requestParametersSequence, - filters: [], - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: skip, - limit: limit + if (arrayRequestParameters.length > 0) { + if (arrayRequestParameters.length === 1) { + jsonData1 = { + meta: { + apiVersion: '2.0' }, - testMode: false, - requestedGranularity: 'record' + query: { + requestParameters: arrayRequestParameters[0], + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } } - } - } - - if (props.rangeSubmitted) { - jsonData1 = { - meta: { - apiVersion: '2.0' - }, - query: { - requestParameters: requestParametersRange, - filters: [], - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: skip, - limit: limit + } else { + jsonData1 = { + meta: { + apiVersion: '2.0' }, - testMode: false, - requestedGranularity: 'record' + query: { + requestParameters: arrayRequestParameters, + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } } } - } - - if (props.geneSubmitted) { + } else { jsonData1 = { meta: { apiVersion: '2.0' }, query: { - requestParameters: requestParametersGene, - filters: [], + filters: arrayFilter, includeResultsetResponses: `${props.resultSets}`, pagination: { - skip: skip, - limit: limit + skip: 0, + limit: 0 }, testMode: false, requestedGranularity: 'record' @@ -384,7 +512,7 @@ function VariantsResults (props) { } jsonData1 = JSON.stringify(jsonData1) - + console.log(jsonData1) let token = null if (auth.userData === null) { token = getStoredToken() @@ -393,27 +521,28 @@ function VariantsResults (props) { } if (token === null) { - console.log('Querying without token') - res = await axios.post( configData.API_URL + '/g_variants', jsonData1 ) + console.log(jsonData1) + console.log(res) } 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 || - res.data.responseSummary.numTotalResults === undefined + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' ) { - setError('ERROR. Please check the query and retry') setNumberResults(0) setBoolean(false) } else { @@ -424,13 +553,15 @@ function VariantsResults (props) { element2[0].push(element.id) element2[1].push(element.exists) element2[2].push(element.resultsCount) + element2[3].push(element.resultsHandover) }) } else { let arrayResultsPerDataset = [ //element.beaconId, [element.id], [element.exists], - [element.resultsCount] + [element.resultsCount], + [element.resultsHandover] ] resultsPerDataset.push(arrayResultsPerDataset) } @@ -454,91 +585,326 @@ function VariantsResults (props) { } }) } + settriggerSubmit(true) + } else { + var jsonData2 = {} + let variablePause = false + arrayFilter.forEach(element => { + if (element.scope.length > 1 && chosenScope === '') { + setPause(true) + variablePause = true + element.scope.forEach(element => { + optionsScope.push(element) + }) + console.log(element) + + props.filteringTerms.forEach(element2 => { + if (element2.label) { + if (element2.id === element.id) { + console.log(element2.label) + ontologyMultipleScope.push(element2.label) + } + } + }) + } else if (element.scope.length > 1 && chosenScope !== '') { + element.scope = chosenScope + } else { + element.scope = element.scope[0] + } + }) + + if (variablePause === false) { + if (arrayRequestParameters.length > 0) { + if (arrayRequestParameters.length === 1) { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters[0], + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } else { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters, + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } + } else { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: 0, + limit: 0 + }, + testMode: false, + requestedGranularity: 'record' + } + } + } + jsonData2 = JSON.stringify(jsonData2) + + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + if (token === null) { + console.log(jsonData2) + console.log('Querying without token') + res = await axios.post( + configData.API_URL + '/g_variants', + jsonData2 + ) + console.log(res) + } else { + console.log('Querying WITH token') + const headers = { Authorization: `Bearer ${token}` } + console.log(jsonData2) + res = await axios.post( + configData.API_URL + '/g_variants', + jsonData2, + { headers: headers } + ) + console.log(res) + } + + setTimeOut(true) + setPause(false) + if ( + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' + ) { + setError('No results') + setNumberResults(0) + setBoolean(false) + } else { + res.data.response.resultSets.forEach((element, index) => { + if (element.id && element.id !== '') { + if (resultsPerDataset.length > 0) { + resultsPerDataset.forEach(element2 => { + element2[0].push(element.id) + element2[1].push(element.exists) + element2[2].push(element.resultsCount) + element2[3].push(element.resultsHandover) + }) + } else { + let arrayResultsPerDataset = [ + //element.beaconId, + [element.id], + [element.exists], + [element.resultsCount], + [element.resultsHandover] + ] + let found = false + resultsPerDataset.forEach(element => { + if (element[0] === arrayResultsPerDataset[0]) { + found = true + } + }) + if (found === false) { + 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 = [ + res.data.meta.beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) + } + }) + } + + settriggerSubmit(true) + } else { + setTimeOut(true) + } } } catch (error) { - setError('Connection error. Please retry') + console.log(error) + setError('No, sorry') setTimeOut(true) } } apiCall() - }, [props.showBar]) + }, [triggerQueryScope]) + + useEffect(() => { + if (props.granularity === 'boolean') { + handleTypeResults1() + } else if (props.granularity === 'count') { + handleTypeResults2() + } else if (props.granularity === 'record') { + handleTypeResults3() + } + }, []) return (
- {showVariantsResults === true && ( -
- {timeOut === false && ( -
-
-
-
-
-
-
-
+ {timeOut === false && ( +
+
+
+
+
+
- )} - {timeOut && error !== 'Connection error. Please retry' && ( -
-
-

Granularity:

- - -
+
+ )} + + {pause && ( +
+ {ontologyMultipleScope.map(element => { + return ( +
+ Please choose a scope for {element} : + + +
+ ) + })} +
+ )} - {show3 && logInRequired === false && !error && ( -
- -
- )} - - {show3 && error &&

  {error}

} - - {show2 && logInRequired === false && !error && ( -
- -
- )} - - {show1 && logInRequired === false && !error && ( -
- + {timeOut && error !== '' && props.granularity === 'boolean' && ( +
  No, sorry
+ )} + {timeOut && error !== '' && props.granularity === 'count' && ( +
  None, sorry
+ )} + {timeOut && error !== '' && props.granularity === 'record' && ( +
  No results, sorry
+ )} + {triggerSubmit && ( +
+
+ {/* {timeOut && error === '' && ( +
+
+

Granularity:

+ + + {props.resultSets !== 'MISS' && results.length > 0 && ( + + )}
- )} - - {show1 && error &&

  {error}

} - {show2 && error &&

  {error}

} -
- )} - {timeOut && error === 'Connection error. Please retry' && ( -

  {error}

- )} +
+ )} */} + + {show3 && logInRequired === false && !error && ( +
+ +
+ )} + + {show2 && !error && ( +
+ +
+ )} + {show1 && !error && ( +
+ +
+ )} +
)}
diff --git a/frontend/src/components/Individuals/Individuals.css b/frontend/src/components/Individuals/Individuals.css index 786885a6..a13b1902 100644 --- a/frontend/src/components/Individuals/Individuals.css +++ b/frontend/src/components/Individuals/Individuals.css @@ -23,6 +23,24 @@ margin: 0px !important; } +.granularityActive { + color: #3d72a6 !important; + text-decoration-color: #3d72a6 !important; +} +.granularityActive:hover { + color: rgb(118, 151, 228) !important; + font-weight: bold; +} + +.granularityNoActive { + color: #bcbecb !important; +} + +.granularityNoActive:hover{ + color: rgb(118, 151, 228) !important; + font-weight: bold; +} + .measuresContainer { display: flex; } @@ -118,7 +136,6 @@ h4 { .results { flex-wrap: wrap; justify-content: center; - } .typeResults { @@ -132,6 +149,8 @@ h4 { background: white; cursor: pointer; text-underline-offset: 2px; + margin-bottom: 5px; + margin-top: 5px; } .skipForm { @@ -462,4 +481,4 @@ h4 { justify-content: center; margin-right: 0px; } -} \ No newline at end of file +} diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js index 05b6084e..f7dc9390 100644 --- a/frontend/src/components/Individuals/IndividualsResults.js +++ b/frontend/src/components/Individuals/IndividualsResults.js @@ -9,46 +9,99 @@ import { useContext } from 'react' import TableResultsIndividuals from '../Results/IndividualsResults/TableResultsIndividuals' function IndividualsResults (props) { - const [showLayout, setShowLayout] = useState(false) - - const [beaconsList, setBeaconsList] = useState([]) - - const [error, setError] = useState(false) - - const [numberResults, setNumberResults] = useState(0) - const [boolean, setBoolean] = useState(false) + const [error, setError] = useState('') + const [timeOut, setTimeOut] = useState(false) + const [logInRequired, setLoginRequired] = useState(false) + const [messageLoginCount, setMessageLoginCount] = useState('') + const [messageLoginFullResp, setMessageLoginFullResp] = useState('') const [results, setResults] = useState([]) const [show1, setShow1] = useState(false) const [show2, setShow2] = useState(false) const [show3, setShow3] = useState(false) + const [numberResults, setNumberResults] = useState(0) + const [boolean, setBoolean] = useState(false) + const [arrayFilter, setArrayFilter] = useState([]) + const [queryArray, setQueryArray] = useState([]) + const [beaconsList, setBeaconsList] = useState([]) + + const [limit, setLimit] = useState(0) + const [skip, setSkip] = useState(0) + + const [showVariantsResults, setShowVariantsResults] = useState(false) + + const { getStoredToken, authenticateUser } = useContext(AuthContext) + const [resultsPerDataset, setResultsDataset] = useState([]) const [resultsNotPerDataset, setResultsNotPerDataset] = useState([]) - const [timeOut, setTimeOut] = useState(false) + const [isActive1, setIsActive1] = useState(false) + const [isActive2, setIsActive2] = useState(false) + const [isActive3, setIsActive3] = useState(false) - const [logInRequired, setLoginRequired] = useState(false) + const [pause, setPause] = useState(false) + const [ontologyMultipleScope, setOntologyMultipleScope] = useState([]) + const [triggerQueryScope, setTriggerQScope] = useState(false) - const [messageLoginFullResp, setMessageLoginFullResp] = useState('') + const [optionsScope, setOptionsScope] = useState([]) + const [chosenScope, setChosenScope] = useState('') + const [ontologyChosenScope, setOntologyScope] = useState([]) - const [limit, setLimit] = useState(0) - const [skip, setSkip] = useState(0) + const [triggerSubmit, settriggerSubmit] = useState(false) + const handleChangeScope = event => { + console.log(event.target.value) + setChosenScope(event.target.value) + } + let queryStringTerm = [] - const [skipTrigger, setSkipTrigger] = useState(0) - const [limitTrigger, setLimitTrigger] = useState(0) + const handleTypeResults1 = () => { + setShow1(true) + setShow2(false) + setShow3(false) + setIsActive1(true) + setIsActive2(false) + setIsActive3(false) + } - const [queryArray, setQueryArray] = useState([]) - const [arrayFilter, setArrayFilter] = useState([]) + const handleTypeResults2 = () => { + setShow2(true) + setShow1(false) + setShow3(false) + setIsActive2(true) + setIsActive3(false) + setIsActive1(false) + } - const { getStoredToken, authenticateUser } = useContext(AuthContext) - let queryStringTerm = '' + const handleTypeResults3 = () => { + setShow3(true) + setShow1(false) + setShow2(false) + setIsActive3(true) + setIsActive1(false) + setIsActive2(false) + } - let res = '' + const submitScopeChosen = e => { + console.log(chosenScope) + arrayFilter.length = 0 + beaconsList.length = 0 + console.log(arrayFilter) + setTriggerQScope(!triggerQueryScope) + } const auth = useAuth() let isAuthenticated = auth.userData?.id_token ? true : false - useEffect(() => { + setTimeOut(false) + let collection = '' + if (props.collection === 'Individuals') { + collection = 'individual' + } else if (props.collection === 'Variant') { + collection = 'variant' + } else if (props.collection === 'Biosamples') { + collection = 'biosample' + } + const apiCall = async () => { if (isAuthenticated === false) { authenticateUser() @@ -59,113 +112,407 @@ function IndividualsResults (props) { } } + var arrayRequestParameters = [] + // var requestParametersSequence = {} + + // var requestParametersRange = {} + + // var requestParametersGene = {} + + // if (props.seqModuleArray.length > 0) { + // props.seqModuleArray.forEach(element => { + // if (element.assemblyId !== '') { + // requestParametersSequence['assemblyId'] = element.assemblyId + // } + // if (element.referenceName !== '') { + // requestParametersSequence['referenceName'] = element.referenceName + // } + // if (element.start !== '') { + // requestParametersSequence['start'] = element.start + // } + // if (element.referenceBases !== '') { + // requestParametersSequence['referenceBases'] = element.referenceBases + // } + // if (element.alternateBases !== '') { + // requestParametersSequence['alternateBases'] = element.alternateBases + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + + // arrayRequestParameters.push(requestParametersSequence) + // requestParametersSequence = {} + // }) + // } + + // if (props.rangeModuleArray.length > 0) { + // console.log(props.rangeModuleArray) + // props.rangeModuleArray.forEach(element => { + // if (element.assemblyId !== '') { + // requestParametersRange['assemblyId'] = element.assemblyId + // } + // if (element.referenceName !== '') { + // requestParametersRange['referenceName'] = element.referenceName + // } + // if (element.start !== '') { + // requestParametersRange['start'] = element.start + // } + // if (element.end !== '') { + // requestParametersRange['end'] = element.end + // } + // if (element.variantType !== '') { + // requestParametersRange['variantType'] = element.variantType + // } + // if (element.alternateBases !== '') { + // requestParametersRange['alternateBases'] = element.alternateBases + // } + + // if (element.referenceBases !== '') { + // requestParametersRange['referenceBases'] = element.referenceBases + // } + + // if (element.aminoacid !== '') { + // requestParametersRange['aminoacidChange'] = element.aminoacid + // } + // if (element.variantMinLength !== '') { + // requestParametersRange['variantMinLength'] = + // element.variantMinLength + // } + // if (element.variantMaxLength !== '') { + // requestParametersRange['variantMaxLength'] = + // element.variantMaxLength + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + // arrayRequestParameters.push(requestParametersRange) + // requestParametersRange = {} + // }) + // } + + // if (props.geneModuleArray.length > 0) { + // props.geneModuleArray.forEach(element => { + // console.log(element) + // if (element.geneID !== '') { + // requestParametersGene['geneId'] = element.geneID + // } + // if (element.assemblyId !== '') { + // requestParametersGene['assemblyId'] = element.assemblyId + // } + // if (element.variantType !== '') { + // requestParametersGene['variantType'] = element.variantType + // } + // if (element.variantMinLength !== '') { + // requestParametersGene['variantMinLength'] = element.variantMinLength + // } + // if (element.variantMaxLength !== '') { + // requestParametersGene['variantMaxLength'] = element.variantMaxLength + // } + // if (element.aminoacid !== '') { + // requestParametersGene['aminoacidChange'] = element.aminoacid + // } + // if (element.clinicalRelevance !== '') { + // requestParametersSequence['clinicalRelevance'] = + // element.clinicalRelevance + // } + // arrayRequestParameters.push(requestParametersGene) + // requestParametersGene = {} + // }) + // } + + var requestParameters = {} + if (props.query !== null) { if (props.query.includes(',')) { - queryStringTerm = props.query.split(',') - queryStringTerm.forEach((element, index) => { - element = element.trim() - if ( - element.includes('=') || - element.includes('>') || - element.includes('<') || - element.includes('!') || - element.includes('%') - ) { - if (element.includes('=')) { - queryArray[index] = element.split('=') - queryArray[index].push('=') - } else if (element.includes('>')) { - queryArray[index] = element.split('>') - queryArray[index].push('>') - } else if (element.includes('<')) { - queryArray[index] = element.split('<') - queryArray[index].push('<') - } else if (element.includes('!')) { - queryArray[index] = element.split('!') - queryArray[index].push('!') - } else { - queryArray[index] = element.split('%') - queryArray[index].push('%') + let queryStringTerm2 = props.query.split(',') + queryStringTerm2.forEach(element => { + queryStringTerm.push(element.trim()) + }) + } else { + if (props.query.includes(':') && !props.query.includes('>')) { + let arrayParameters = [] + let reqParameters = [] + if (props.query.includes('&')) { + arrayParameters = props.query.split('&') + console.log(arrayParameters) + arrayParameters.forEach(element => { + reqParameters.length = 0 + reqParameters = element.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + }) + arrayRequestParameters.push(requestParameters) + } else { + let reqParameters = props.query.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + arrayRequestParameters.push(requestParameters) + } + } else if (props.query.includes(':') && props.query.includes('>')) { + let reqParameters = props.query.split(':') + console.log(reqParameters) + let position = [] + if (props.query.includes('-')) { + position = reqParameters[0].split('-') + } else { + position = reqParameters[0] + } + + console.log(position) + let bases = reqParameters[2].split('>') + console.log(bases) + requestParameters['start'] = position[0] + if (position[1]) { + requestParameters['end'] = position[1] + } + requestParameters['variantType'] = reqParameters[1] + requestParameters['alternateBases'] = bases[1] + requestParameters['referenceBases'] = bases[0] + arrayRequestParameters.push(requestParameters) + } else { + queryStringTerm.push(props.query.trim()) + } + } + + console.log(queryStringTerm) + let filter = {} + + queryStringTerm.forEach((term, index) => { + console.log(term) + requestParameters = {} + if ( + (term.includes('=') || + term.includes('>') || + term.includes('<') || + term.includes('!') || + term.includes('%')) && + !term.includes(':') + ) { + if (term.includes('=')) { + queryArray[index] = term.split('=') + queryArray[index].push('=') + console.log(queryArray) + } else if (term.includes('>')) { + queryArray[index] = term.split('>') + queryArray[index].push('>') + } else if (term.includes('<')) { + queryArray[index] = term.split('<') + queryArray[index].push('<') + } else if (term.includes('!')) { + queryArray[index] = term.split('!') + queryArray[index].push('!') + } else { + queryArray[index] = term.split('%') + queryArray[index].push('%') + } + console.log(queryArray[index][1].toLowerCase()) + let alphanumericFilter = {} + props.filteringTerms.forEach(element => { + if (element.label) { + if ( + queryArray[index][1].toLowerCase() === + element.label.toLowerCase() + ) { + if (queryArray[index][0].toLowerCase() === 'individual') { + alphanumericFilter = { + id: element.id, + scope: ['individual'] + } + } else if ( + queryArray[index][0].toLowerCase() === 'genomicvariation' + ) { + alphanumericFilter = { + id: element.id, + scope: ['genomicVariation'] + } + } else if ( + queryArray[index][0].toLowerCase() === 'biosample' + ) { + alphanumericFilter = { + id: element.id, + scope: ['biosample'] + } + } else if (queryArray[index][0].toLowerCase() === 'cohort') { + alphanumericFilter = { + id: element.id, + scope: ['cohort'] + } + } else if (queryArray[index][0].toLowerCase() === 'run') { + alphanumericFilter = { + id: element.id, + scope: ['run'] + } + } else { + alphanumericFilter = { + id: element.id, + scope: element.scopes + } + } + } } - const alphaNumFilter = { + }) + + if (Object.keys(alphanumericFilter).length === 0) { + console.log(queryArray[index][0]) + props.filteringTerms.forEach(element => { + if ( + queryArray[index][0].toLowerCase() === + element.id.toLowerCase() + ) { + queryArray[index][3] = element.scopes + } + }) + + if (queryArray[index][3] === undefined) { + queryArray[index][3] = [collection] + } + console.log(queryArray) + alphanumericFilter = { id: queryArray[index][0], operator: queryArray[index][2], - value: queryArray[index][1] + value: queryArray[index][1], + scope: queryArray[index][3] } - arrayFilter.push(alphaNumFilter) + console.log(alphanumericFilter) + } + + arrayFilter.push(alphanumericFilter) + } else if (term.includes(':') && !term.includes('>')) { + let arrayParameters = [] + let reqParameters = [] + if (term.includes('&')) { + arrayParameters = term.split('&') + console.log(arrayParameters) + arrayParameters.forEach(element => { + reqParameters.length = 0 + reqParameters = element.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + }) + arrayRequestParameters.push(requestParameters) } else { - const filter2 = { - id: element, - includeDescendantTerms: props.descendantTerm - } - arrayFilter.push(filter2) + let reqParameters = term.split(':') + console.log(reqParameters) + requestParameters[reqParameters[0]] = reqParameters[1] + arrayRequestParameters.push(requestParameters) } - }) - } else { - if ( - props.query.includes('=') || - props.query.includes('>') || - props.query.includes('<') || - props.query.includes('!') || - props.query.includes('%') - ) { - if (props.query.includes('=')) { - queryArray[0] = props.query.split('=') - queryArray[0].push('=') - } else if (props.query.includes('>')) { - queryArray[0] = props.query.split('>') - queryArray[0].push('>') - } else if (props.query.includes('<')) { - queryArray[0] = props.query.split('<') - queryArray[0].push('<') - } else if (props.query.includes('!')) { - queryArray[0] = props.query.split('!') - queryArray[0].push('!') + } else if (term.includes(':') && term.includes('>')) { + let reqParameters = term.split(':') + console.log(reqParameters) + let position = [] + if (term.includes('-')) { + position = reqParameters[0].split('-') } else { - queryArray[0] = props.query.split('%') - queryArray[0].push('%') + position = reqParameters[0] } - const alphaNumFilter = { - id: queryArray[0][0], - operator: queryArray[0][2], - value: queryArray[0][1] + let bases = reqParameters[2].split('>') + console.log(bases) + requestParameters['start'] = position[0] + if (position[1]) { + requestParameters['end'] = position[1] } - arrayFilter.push(alphaNumFilter) + requestParameters['variantType'] = reqParameters[1] + requestParameters['alternateBases'] = bases[1] + requestParameters['referenceBases'] = bases[0] + arrayRequestParameters.push(requestParameters) } else { - const filter = { - id: props.query - } + props.filteringTerms.forEach(element => { + if (element.label) { + if ( + term.toLowerCase() === element.label.toLowerCase() || + term.toLowerCase() === element.id.toLowerCase() + ) { + filter = { + id: element.id, + scope: element.scopes + } + } + } else { + if (element.id.toLowerCase() === term.toLowerCase()) { + filter = { + id: element.id, + scope: element.scopes + } + } + } + }) + arrayFilter.push(filter) } - } + }) } + console.log(arrayFilter) + try { let res = await axios.get(configData.API_URL + '/info') - beaconsList.push(res.data.response) + console.log(ontologyMultipleScope) if (props.query === null) { // show all individuals - var jsonData1 = { - meta: { - apiVersion: '2.0' - }, - query: { - filters: arrayFilter, - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: 0, - limit: 0 + var jsonData1 = {} + + if (arrayRequestParameters.length > 0) { + if (arrayRequestParameters.length === 1) { + jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters[0], + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } else { + jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters, + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } + } else { + jsonData1 = { + meta: { + apiVersion: '2.0' }, - testMode: false, - requestedGranularity: 'record' + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: 0, + limit: 0 + }, + testMode: false, + requestedGranularity: 'record' + } } } - jsonData1 = JSON.stringify(jsonData1) + jsonData1 = JSON.stringify(jsonData1) + console.log(jsonData1) let token = null if (auth.userData === null) { token = getStoredToken() @@ -178,6 +525,8 @@ function IndividualsResults (props) { configData.API_URL + '/individuals', jsonData1 ) + console.log(jsonData1) + console.log(res) } else { const headers = { Authorization: `Bearer ${token}` } @@ -190,10 +539,10 @@ function IndividualsResults (props) { setTimeOut(true) if ( - res.data.responseSummary.numTotalResults < 1 || - res.data.responseSummary.numTotalResults === undefined + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' ) { - setError('ERROR. Please check the query and retry') setNumberResults(0) setBoolean(false) } else { @@ -204,13 +553,15 @@ function IndividualsResults (props) { element2[0].push(element.id) element2[1].push(element.exists) element2[2].push(element.resultsCount) + element2[3].push(element.resultsHandover) }) } else { let arrayResultsPerDataset = [ //element.beaconId, [element.id], [element.exists], - [element.resultsCount] + [element.resultsCount], + [element.resultsHandover] ] resultsPerDataset.push(arrayResultsPerDataset) } @@ -222,7 +573,6 @@ function IndividualsResults (props) { } if (res.data.response.resultSets[index].results) { - res.data.response.resultSets[index].results.forEach( (element2, index2) => { let arrayResult = [ @@ -235,129 +585,198 @@ function IndividualsResults (props) { } }) } + settriggerSubmit(true) } else { - var jsonData2 = { - meta: { - apiVersion: '2.0' - }, - query: { - filters: arrayFilter, - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: skip, - limit: limit - }, - testMode: false, - requestedGranularity: 'record' + var jsonData2 = {} + let variablePause = false + arrayFilter.forEach(element => { + if (element.scope.length > 1 && chosenScope === '') { + setPause(true) + variablePause = true + element.scope.forEach(element => { + optionsScope.push(element) + }) + console.log(element) + + props.filteringTerms.forEach(element2 => { + if (element2.label) { + if (element2.id === element.id) { + console.log(element2.label) + ontologyMultipleScope.push(element2.label) + } + } + }) + } else if (element.scope.length > 1 && chosenScope !== '') { + element.scope = chosenScope + } else { + element.scope = element.scope[0] } - } - jsonData2 = JSON.stringify(jsonData2) - 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 + '/individuals', - jsonData2 - ) - } else { - console.log('Querying WITH token') - const headers = { Authorization: `Bearer ${token}` } - res = await axios.post( - configData.API_URL + '/individuals', - jsonData2, - { headers: headers } - ) - } - setTimeOut(true) + }) - if ( - res.data.responseSummary.numTotalResults < 1 || - res.data.responseSummary.numTotalResults === undefined - ) { - setError('ERROR. Please check the query and retry') - setNumberResults(0) - setBoolean(false) - } else { - res.data.response.resultSets.forEach((element, index) => { - - if (element.id && element.id !== '') { - - if (resultsPerDataset.length > 0) { - resultsPerDataset.forEach(element2 => { - - element2[0].push(element.id) - element2[1].push(element.exists) - element2[2].push(element.resultsCount) - }) - } else { - let arrayResultsPerDataset = [ - //element.beaconId, - [element.id], - [element.exists], - [element.resultsCount] - ] - - resultsPerDataset.push(arrayResultsPerDataset) + if (variablePause === false) { + if (arrayRequestParameters.length > 0) { + if (arrayRequestParameters.length === 1) { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters[0], + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } else { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: arrayRequestParameters, + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } } } - - if (element.id === undefined || element.id === '') { - let arrayResultsNoDatasets = [element.beaconId] - resultsNotPerDataset.push(arrayResultsNoDatasets) + } else { + jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: 0, + limit: 0 + }, + testMode: false, + requestedGranularity: 'record' + } } + } + jsonData2 = JSON.stringify(jsonData2) - if (res.data.response.resultSets[index].results) { - - res.data.response.resultSets[index].results.forEach( - (element2, index2) => { - let arrayResult = [ - res.data.meta.beaconId, - res.data.response.resultSets[index].results[index2] + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + if (token === null) { + console.log(jsonData2) + console.log('Querying without token') + res = await axios.post( + configData.API_URL + '/individuals', + jsonData2 + ) + console.log(res) + } else { + console.log('Querying WITH token') + const headers = { Authorization: `Bearer ${token}` } + console.log(jsonData2) + res = await axios.post( + configData.API_URL + '/individuals', + jsonData2, + { headers: headers } + ) + console.log(res) + } + + setTimeOut(true) + setPause(false) + if ( + (res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined) && + props.resultSets !== 'MISS' + ) { + setError('No results') + setNumberResults(0) + setBoolean(false) + } else { + res.data.response.resultSets.forEach((element, index) => { + if (element.id && element.id !== '') { + if (resultsPerDataset.length > 0) { + resultsPerDataset.forEach(element2 => { + element2[0].push(element.id) + element2[1].push(element.exists) + element2[2].push(element.resultsCount) + element2[3].push(element.resultsHandover) + }) + } else { + let arrayResultsPerDataset = [ + //element.beaconId, + [element.id], + [element.exists], + [element.resultsCount], + [element.resultsHandover] ] - results.push(arrayResult) + let found = false + resultsPerDataset.forEach(element => { + if (element[0] === arrayResultsPerDataset[0]) { + found = true + } + }) + if (found === false) { + 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 = [ + res.data.meta.beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) + } + }) + } + + settriggerSubmit(true) + } else { + setTimeOut(true) } } } catch (error) { - setError('Connection error. Please retry') console.log(error) + setError('No, sorry') setTimeOut(true) } } apiCall() - }, []) + }, [triggerQueryScope]) - const handleTypeResults1 = () => { - setShow1(true) - setShow2(false) - setShow3(false) - } - - const handleTypeResults2 = () => { - setShow2(true) - setShow1(false) - setShow3(false) - } - - const handleTypeResults3 = () => { - setShow3(true) - setShow1(false) - setShow2(false) - } - const onSubmit = () => { - setSkipTrigger(skip) - setLimitTrigger(limit) - setTimeOut(false) - } + useEffect(() => { + if (props.granularity === 'boolean') { + handleTypeResults1() + } else if (props.granularity === 'count') { + handleTypeResults2() + } else if (props.granularity === 'record') { + handleTypeResults3() + } + }, []) return (
{timeOut === false && ( @@ -372,68 +791,122 @@ function IndividualsResults (props) {
)} -
-
- {' '} - {timeOut && error !== 'Connection error. Please retry' && ( -
-
-

Granularity:

- - -
-
- )} - {timeOut && error === 'Connection error. Please retry' && ( -

  {error}

- )} - {show3 && logInRequired === false && !error && ( -
- -
- )} - {show3 && error &&

  {error}

} - {show2 && !error && ( -
- -
- )} - {show1 && !error && ( -
- -
- )} - {show2 && error &&

  {error}

} - {show1 && error &&

  {error}

} + ) + })} +
+ )} + + {timeOut && error !== '' && props.granularity === 'boolean' && ( +
  No, sorry
+ )} + {timeOut && error !== '' && props.granularity === 'count' && ( +
  None, sorry
+ )} + {timeOut && error !== '' && props.granularity === 'record' && ( +
  No results, sorry
+ )} + {triggerSubmit && ( +
+
+ {/* {timeOut && error === '' && ( +
+
+

Granularity:

+ + + {props.resultSets !== 'MISS' && results.length > 0 && ( + + )} +
+
+ )} */} + + {show3 && logInRequired === false && !error && ( +
+ +
+ )} + + {show2 && !error && ( +
+ +
+ )} + {show1 && !error && ( +
+ +
+ )} +
-
+ )}
) } diff --git a/frontend/src/components/Layout/Layout.css b/frontend/src/components/Layout/Layout.css new file mode 100644 index 00000000..70c3af81 --- /dev/null +++ b/frontend/src/components/Layout/Layout.css @@ -0,0 +1,453 @@ +.containerSelection { + display: flex; + width: 100vw; + align-items: center; + justify-content: center; + margin-bottom: 40px; + margin-top: -80px; +} + +.buttonShowExamples { + border: 1px solid #dadce3; + padding: 8px; + border-radius: 3px; + background: #f4fdfc; +} + +.buttonShowExamples:hover { + background-color: rgb(228, 236, 250); + box-shadow: 1px 1px 1px 1px #2269bf; + border: solid #2269bf; +} + +.formInput { + display: flex; + align-items: center; +} +h14 { + color: #64646a; + font-size: 16px; + margin-left: 20px; + margin-right: 20px; +} + +.moduleAddedVariant h4 { + font-size: 12px; + color: rgba(12, 16, 64, 0.606); + margin-left: 10px; + margin-top: 6px; +} + +.moduleAddedVariant2 h4 { + font-size: 12px; + color: rgba(12, 16, 64, 0.606); + margin-left: 10px; + margin-top: 6px; +} + +p { + font-size: 15px !important; + color: #2a6169; +} + +.tittleVariant { + color: rgb(125, 125, 141); + /* width: 94px; */ + width: fit-content; +} + +.termsAlphanum { + width: 100%; + display: flex; + align-content: center; + justify-content: center; + align-items: center; + margin-bottom: 30px; +} + +.label-ontology-div { + display: flex; + flex-direction: column; +} + +.inputSearch { + width: 36vw; + height: fit-content; + padding: 10px; + font-size: 14 px; + border: 1px solid #c4c4c4; + box-shadow: chocolate; + box-shadow: 1px 1px 4px 0px #e9e9e9; + text-overflow: clip; + line-height: 1.8; +} + +.filterTermsContainer { + display: flex; + width: 95vw; + justify-content: space-evenly; + margin-bottom: 18px; + flex-wrap: wrap; + margin-left: 53px; +} +.filterTermsContainer2 { + display: none; +} +p { + font-weight: 500; +} + +.othersButton { + margin: 0px; + margin-left: 6px; + padding: 0px; + font-size: 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; +} + +.othersButton :hover { + background-color: rgb(228, 236, 250); + box-shadow: 1px 1px 1px 1px #2269bf; + border: solid #2269bf; +} + +.buttonAlphanum ion-icon:hover { + color: rgb(16, 130, 98); +} + +.buttonAlphanum ion-icon { + color: rgb(73, 73, 163); +} + +.textAreaDiv { + display: flex; + flex-direction: column-reverse; + align-content: space-between; + /* justify-content: space-around; */ + align-items: flex-end; + margin-top: 30px; +} + +.moduleAddedVariant2 h2 { + width: fit-content; + color: rgb(99 134 169); + font-weight: 500; +} + +.moduleAddedVariant h2 { + width: fit-content; + color: rgb(99 134 169); + font-weight: 500; +} + +.moduleAddedVariant { + display: flex; + flex-direction: column; + width: fit-content; + justify-content: center; + border: 0px solid #f2eded; + /* padding: 11px; */ + padding-left: 22px; + padding-bottom: 8px; + padding-right: 19px; + margin-top: -10px; + border-radius: 15px; + padding-right: -7px; + /* margin-top: 11px; */ + margin-bottom: 45px; + box-shadow: rgba(192, 200, 227, 0.27) 0px 0px 0.25em, + rgba(159, 167, 184, 0.05) 0px 0.25em 1em; + margin-left: 58vw; + animation: slide-in-blurred-right 0.4s ease-in both; +} +.moduleAddedVariant2 { + display: flex; + flex-direction: column; + width: 132px; + justify-content: center; + border: 0px solid #f2eded; + /* padding: 11px; */ + padding-left: 22px; + padding-bottom: 8px; + margin-top: -10px; + border-radius: 15px; + padding-right: -7px; + /* margin-top: 11px; */ + margin-bottom: 45px; + box-shadow: rgba(192, 200, 227, 0.27) 0px 0px 0.25em, + rgba(159, 167, 184, 0.05) 0px 0.25em 1em; + animation: slide-in-blurred-right 0.4s ease-in both; +} + +.containerModulesVariants { + display: flex; + display: flex; + align-content: space-around; + justify-content: flex-end; + margin-right: 30vw; +} + +.divHisto { + display: flex; +} +li { + font-size: 15px; + margin-bottom: 10px; + cursor: pointer; +} +ul { + padding-left: 0px; +} +ul div { + margin-bottom: 10px; + display: flex; + align-items: flex-start; + margin-left: 4px; +} + +label { + margin-left: 6px; +} + +.ageButton { + font-size: 14px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; +} +.divFilter { + margin-right: 10px; + margin-left: 10px; + margin-bottom: 30px; + width: 278px; +} + +.resetButton { + background-color: rgb(249, 249, 249); + border: 1px solid rgb(169, 169, 216); + border-radius: 2px; + margin-bottom: 3px; + cursor: pointer; +} + +.resetButton:hover { + background-color: rgb(232, 248, 255); +} + +#subscribeNews { + accent-color: #4480bd; +} + +.onHover { + display: none; +} + +.label:hover + .onHover { + display: block; + color: #2fa458; + font-weight: 500; +} +.deleteIcon ion-icon { + color: black; + margin-bottom: -11px; + font-size: 21px; +} +.deleteIcon ion-icon:hover { + color: rgb(205, 29, 29); +} +.deleteIcon { + width: fit-content; + height: fit-content; + margin-left: 170px; + margin-top: -21px; +} +.deleteIcon2 { + width: fit-content; + height: fit-content; + margin-top: -21px; +} + +.deleteIcon2 ion-icon { + color: black; + margin-bottom: -11px; + font-size: 21px; +} +.deleteIcon2 ion-icon:hover { + color: rgb(205, 29, 29); +} +.divFilter2 { + margin-right: 32px; + + margin-bottom: 30px; + width: 150px; +} +.divFilter3 { + margin-right: 32px; + margin-bottom: 30px; + width: 288px; +} +.divFilter4 { + margin-right: 32px; + margin-bottom: 30px; + width: 165px; +} + +.divFilter5 { + margin-right: 32px; + margin-bottom: 30px; + width: 610px; +} + +.termsOntologies { + display: flex; + flex-direction: column; +} + +.divOthers { + margin-right: 45px; + border: 1px solid #86a5c6; + height: fit-content; + padding: 10px; + border-radius: 4px; + display: flex; + align-items: center; +} + +.divOthers:hover { + background-color: rgb(228, 236, 250); + box-shadow: 1px 1px 1px 1px #2269bf; + border: solid #2269bf; +} + +.mutationDiv { + display: flex; + flex-direction: column; +} + +.formula { + width: 20px; +} + +.dictionary { + width: 20px; +} + +.IdForm2 { + background: white; + border: 2px solid rgba(12, 16, 64, 0.606); + margin: 4px; + padding: 6px; + box-shadow: 1px 1px 2px #a3a0a0; + width: 168px; + height: 20px; + border-radius: 4px; + overflow: auto; +} + +.ValueForm2 { + background: white; + border: 2px solid rgba(12, 16, 64, 0.606); + margin-left: 5px; + padding: 6px; + box-shadow: 1px 1px 2px #a3a0a0; + width: 30%; + height: 20px; + border-radius: 4px; +} + +.selectedOperator2 { + background: white; + border: 2px solid rgba(12, 16, 64, 0.606); + font-size: medium; + border-radius: 4px; + width: 43px; + height: 34px; + margin-right: 20px; + box-shadow: 1px 2px 2px #cecece; +} + +.selectModule1 { + width: 250px !important; +} + +@media (max-width: 1200px) { + .inputSearch { + width: 28vw; + height: fit-content; + padding: 10px; + font-size: 14 px; + border: 1px solid #c4c4c4; + box-shadow: chocolate; + box-shadow: 1px 1px 4px 0px #e9e9e9; + text-overflow: clip; + } + .containerSelection { + display: flex; + width: 90vw; + align-items: center; + justify-content: center; + margin-bottom: 40px; + margin-top: -80px; + } +} + +@media (max-width: 950px) { + .inputSearch { + width: 28vw; + height: fit-content; + padding: 10px; + font-size: 14 px; + border: 1px solid #c4c4c4; + box-shadow: chocolate; + box-shadow: 1px 1px 4px 0px #e9e9e9; + text-overflow: clip; + } + .containerSelection { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; + margin-top: -80px; + } + + .selectModule1 { + width: 150px !important; + } +} + +@media (max-width: 900px) { + .inputSearch { + width: 28vw; + height: fit-content; + padding: 10px; + font-size: 14 px; + border: 1px solid #c4c4c4; + box-shadow: chocolate; + box-shadow: 1px 1px 4px 0px #e9e9e9; + text-overflow: clip; + } + .containerSelection { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 40px; + margin-top: 20px; + width: 100vw; + flex-wrap: wrap; + } + + .filterTermsContainer { + display: flex; + width: 95vw; + justify-content: space-evenly; + margin-bottom: 18px; + flex-wrap: wrap; + margin-left: 0px; + } + + .selectModule1 { + width: 150px !important; + } +} diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js index 05f31fb2..2e15b327 100644 --- a/frontend/src/components/Layout/Layout.js +++ b/frontend/src/components/Layout/Layout.js @@ -1,36 +1,27 @@ import '../../App.css' -import './LayoutVariantsTable.css' +import './Layout.css' import FilteringTerms from '../FilteringTerms/FilteringTerms' -import { NavLink } from 'react-router-dom' -import BeaconInfo from '../Dataset/BeaconInfo' import VariantsResults from '../GenomicVariations/VariantsResults' -import HorizontalExpansion from '../QueryExpansion/HorizontalExpansion' -import BiosamplesResults from '../Biosamples/BiosamplesResults' +import BiosamplesResults from '../Biosamples/BiosamplesResults' +import BeaconInfo from '../Dataset/BeaconInfo' import React, { useState, useEffect } from 'react' -import OutsideClickHandler from 'react-outside-click-handler' - -import Switch from '@mui/material/Switch' -import MultiSwitch from 'react-multi-switch-toggle' - import configData from '../../config.json' import axios from 'axios' -import ReactModal from 'react-modal' - import IndividualsResults from '../Individuals/IndividualsResults' import AnalysesResults from '../Analyses/AnalysesResults' import RunsResults from '../Runs/RunsResults' -import CohortsModule from '../Cohorts/CohortsModule' - function Layout (props) { const [error, setError] = useState(null) - const [placeholder, setPlaceholder] = useState('') + const [placeholder, setPlaceholder] = useState( + 'filtering term comma-separated, ID><=value' + ) const [results, setResults] = useState(null) const [query, setQuery] = useState(null) @@ -38,6 +29,7 @@ function Layout (props) { const [exampleQ, setExampleQ] = useState([]) + const [showFilters, setShowFilters] = useState(true) const [expansionSection, setExpansionSection] = useState(false) const [arrayFilteringTermsQE, setArrayFilteringTermsQE] = useState([]) @@ -50,7 +42,7 @@ function Layout (props) { const [cohorts, setShowCohorts] = useState(false) - const [ID, setId] = useState('') + const [ID, setId] = useState('diseases.ageOfOnset.iso8601duration') const [operator, setOperator] = useState('') const [valueFree, setValueFree] = useState('') @@ -61,43 +53,49 @@ function Layout (props) { const [showButton, setShowButton] = useState(true) const [showFilteringTerms, setShowFilteringTerms] = useState(false) - const [filteringTerms, setFilteringTerms] = useState(false) - + const [filteringTerms, setFilteringTerms] = useState([]) + const [filteringTermsButton, setShowFilteringTermsButton] = useState(false) const [showVariants, setShowVariants] = useState(false) const [showResultsVariants, setShowResultsVariants] = useState(true) - const [triggerCohorts, setTriggerCohorts] = useState(true) - const [trigger, setTrigger] = useState(false) const [triggerQuery, setTriggerQuery] = useState(false) 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 [collection, setCollection] = useState('Individuals') + const [granularity, setGranularity] = useState('count') + + const [terms, setTerm] = useState([]) const [showExtraIndividuals, setExtraIndividuals] = useState(false) const [showOptions, setShowOptions] = useState(false) 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 [start, setStart] = useState('110173330') + const [start2, setStart2] = useState('1334544') + const [start3, setStart3] = useState('3670751') + const [end, setEnd] = useState('110173331') + const [end2, setEnd2] = useState('1334545') + const [end3, setEnd3] = useState('3670752') + const [variantType, setVariantType] = useState('SNP') + const [variantType2, setVariantType2] = useState('SNP') + const [variantType3, setVariantType3] = useState('SNP') + const [alternateBases, setAlternateBases] = useState('T') + const [alternateBases2, setAlternateBases2] = useState('A') + const [alternateBases3, setAlternateBases3] = useState('T') + const [referenceBases, setRefBases] = useState('C') + const [referenceBases2, setRefBases2] = useState('T') + const [referenceBases3, setRefBases3] = useState('C') + const [aminoacid, setAminoacid] = useState('p.Gly12Cys') const [aminoacid2, setAminoacid2] = useState('') - const [geneID, setGeneId] = useState('') + const [geneID, setGeneId] = useState('KRAS') + const [geneID2, setGeneId2] = useState('KRAS') + const [geneID3, setGeneId3] = useState('TP53') + const [geneID4, setGeneId4] = useState('CTNNB1') + const [geneID5, setGeneId5] = useState('CSDE1') const [assemblyId, setAssemblyId] = useState('') const [assemblyId2, setAssemblyId2] = useState('') const [assemblyId3, setAssemblyId3] = useState('') @@ -105,10 +103,21 @@ function Layout (props) { const [variantMaxLength, setVariantMaxLength] = useState('') const [variantMinLength2, setVariantMinLength2] = useState('') const [variantMaxLength2, setVariantMaxLength2] = useState('') + const [clinicalRelevance, setClinicalRelevance] = useState('') + const [clinicalRelevance2, setClinicalRelevance2] = useState('') + const [clinicalRelevance3, setClinicalRelevance3] = useState('') const [sequenceSubmitted, setSequenceSub] = useState(false) const [rangeSubmitted, setRangeSub] = useState(false) + const [rangeSubmitted1, setRangeSub1] = useState(false) + const [rangeSubmitted2, setRangeSub2] = useState(false) const [geneSubmitted, setGeneSub] = useState(false) + const [geneSubmitted2, setGeneSub2] = useState(false) + + const [geneSubmitted3, setGeneSub3] = useState(false) + + const [geneSubmitted4, setGeneSub4] = useState(false) + const [geneSubmitted5, setGeneSub5] = useState(false) const [hideForm, setHideForm] = useState(false) @@ -117,8 +126,7 @@ function Layout (props) { list: [] }) - const [checked, setChecked] = useState(true) - const [checked2, setChecked2] = useState(false) + const [showAlphanum, setShowAlphanum] = useState(false) const [timeOut, setTimeOut] = useState(true) @@ -126,192 +134,57 @@ function Layout (props) { const [arrayFilteringTerms, setArrayFilteringTerms] = useState([]) - const handleChangeSwitch = e => { - setDescendantTerm(e.target.checked) - setChecked(e.target.checked) - } - - const onToggle = selectedItem => { - if (selectedItem === 0) { - setSimilarity('low') - } else if (selectedItem === 1) { - setSimilarity('medium') - } else { - setSimilarity('high') - } - } + const [countGeneModule, setCountGeneModule] = useState(0) + const [countSeqModule, setCountSeqModule] = useState(0) + const [countRangeModule, setCountRangeModule] = useState(0) - const onToggle2 = selectedItem => { - if (selectedItem === 0) { - setResultset('HIT') - } else if (selectedItem === 1) { - setResultset('MISS') - } else if (selectedItem === 2) { - setResultset('NONE') - } else { - setResultset('ALL') - } - } + const [rangeModuleArray, setRangeModuleArray] = useState([]) + const [seqModuleArray, setSeqModuleArray] = useState([]) + const [geneModuleArray, setGeneModuleArray] = useState([]) - const handleCloseModal1 = () => { - setIsOpenModal1(false) - } + const [trigger3, setTrigger3] = useState(false) - const handleHelpModal2 = () => { - setIsOpenModal2(true) - } - - const handleCloseModal2 = () => { - setIsOpenModal2(false) - } + const [arrayRequestParameters, setArrayReqParameters] = useState([]) - const handleCloseModal3 = () => { - setPopUp(false) + const handleSeeFilteringTerms = () => { + setShowFilteringTerms(true) + setResults(null) + setTimeOut(true) } - const handleHelpModal4 = () => { - setIsOpenModal4(true) + const handleIdChanges = e => { + setId(e.target.value) } - - const handleHelpModal5 = () => { - setIsOpenModal5(true) + const handleOperatorchange = e => { + setOperator(e.target.value) } - const handleHelpModal6 = () => { - setIsOpenModal6(true) + const handleValueChanges = e => { + setValueFree(e.target.value) } - - 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) + const handdleInclude = e => { + console.log(valueFree) + console.log(operator) + if (ID !== '' && valueFree !== '' && operator !== '') { + console.log('hola') + if (query !== null) { + setQuery(query + ',' + `${ID}${operator}${valueFree}`) } - } 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) + if (query === null) { + setQuery(`${ID}${operator}${valueFree}`) } } - - setShowFilteringTerms(true) } - const handleExQueries = () => { - if (props.collection === 'Individuals') { - setExampleQ([ - ['Weight>100'], - ['NCIT:C16576', 'female'], - ['geographicOrigin=%land%'], - ['geographicOrigin!England'], - ['NCIT:C42331', 'African'], - ['NCIT:C4784', 'Cardiovascular Neoplasm'] - ]) - } else if (props.collection === 'Variant') { - setExampleQ([['GENO:GENO_0000458']]) - } else if (props.collection === 'Biosamples') { - setExampleQ([ - ['UBERON:0000178', 'blood'], - ['EFO:0009654', 'reference sample'], - ['sampleOriginType:blood'] - ]) - } else if (props.collection === 'Runs') { - setExampleQ([['OBI:0002048']]) - } else if (props.collection === 'Analyses') { - setExampleQ([['']]) - } + const removeModule = e => { + setGeneSub(false) } - - const handleExtraSectionIndividuals = e => { - setShowOptions(!showOptions) - setShowButton(!showButton) + const removeModule2 = e => { + setGeneSub2(false) + } + const removeModule3 = e => { + setRangeSub2(false) + handleOptionVariant3() } const handleChangeStart = e => { @@ -320,12 +193,17 @@ function Layout (props) { const handleChangeStart2 = e => { setStart2(e.target.value) } + const handleChangeStart3 = e => { + setStart3(e.target.value) + } const handleChangeRefN2 = e => { setRefName2(e.target.value) } + const handleChangeAlternateB2 = e => { setAlternateBases2(e.target.value) } + const handleChangeAssembly2 = e => { setAssemblyId2(e.target.value) } @@ -348,6 +226,10 @@ function Layout (props) { setRefBases2(e.target.value) } + const handleChangeReferenceB3 = e => { + setRefBases3(e.target.value) + } + const handleChangeRefN = e => { setRefName(e.target.value) } @@ -355,6 +237,12 @@ function Layout (props) { const handleChangeEnd = e => { setEnd(e.target.value) } + const handleChangeEnd2 = e => { + setEnd2(e.target.value) + } + const handleChangeEnd3 = e => { + setEnd3(e.target.value) + } const handleChangeVariantType = e => { setVariantType(e.target.value) @@ -362,6 +250,9 @@ function Layout (props) { const handleChangeVariantType2 = e => { setVariantType2(e.target.value) } + const handleChangeVariantType3 = e => { + setVariantType3(e.target.value) + } const handleChangeAminoacid = e => { setAminoacid(e.target.value) @@ -373,7 +264,18 @@ function Layout (props) { const handleChangeGeneId = e => { setGeneId(e.target.value) } - + const handleChangeGeneId2 = e => { + setGeneId2(e.target.value) + } + const handleChangeGeneId3 = e => { + setGeneId3(e.target.value) + } + const handleChangeGeneId4 = e => { + setGeneId4(e.target.value) + } + const handleChangeGeneId5 = e => { + setGeneId5(e.target.value) + } const handleChangeAssembly = e => { setAssemblyId(e.target.value) } @@ -390,6 +292,17 @@ function Layout (props) { setVariantMinLength2(e.target.value) } + const handleChangeClinicalRelevance = e => { + setClinicalRelevance(e.target.value) + } + + const handleChangeClinicalRelevance2 = e => { + setClinicalRelevance2(e.target.value) + } + const handleChangeClinicalRelevance3 = e => { + setClinicalRelevance3(e.target.value) + } + const handleClick = () => { setShowBar(!showBar) setShowResultsVariants(false) @@ -403,57 +316,415 @@ function Layout (props) { setExpansionSection(true) } - const handleSequenceExample = e => { - setAlternateBases('A') - setRefBases('G') - setStart('16050114') + const handleRangeModule = e => { + setRangeSub(true) + setCountRangeModule(countRangeModule + 1) + + let objectRange = { + assemblyId: assemblyId2, + referenceName: referenceName2, + start: start2, + end: end, + variantType: variantType, + alternateBases: alternateBases2, + referenceBases: referenceBases2, + aminoacid: aminoacid, + variantMinLength: variantMinLength, + variantMaxLength: variantMaxLength, + clinicalRelevance: clinicalRelevance2 + } + console.log(objectRange) + rangeModuleArray.push(objectRange) + + setAssemblyId2('') + setRefName2('') + setStart2('') + setEnd('') + setVariantType('') + setAlternateBases2('') + setRefBases2('') + setAminoacid('') + setVariantMinLength('') + setVariantMaxLength('') + setClinicalRelevance2('') } - const handleRangeExample = e => { - setAlternateBases2('A') - setRefBases2('G') - setStart2('16050114') - setEnd('16050115') + const handleSeqeModule = e => { + setSequenceSub(true) + setCountSeqModule(countSeqModule + 1) + + let objectSeq = { + assemblyId: assemblyId, + referenceName: referenceName, + start: start, + referenceBases: referenceBases, + alternateBases: alternateBases, + clinicalRelevance: clinicalRelevance + } + + seqModuleArray.push(objectSeq) + + setAssemblyId('') + setRefName('') + setStart('') + setRefBases('') + setAlternateBases('') + setClinicalRelevance('') } - const handleGeneExample = e => { - setGeneId('EIF4A1') - setVariantType2('DEL') + const handleGeneModule = e => { + setGeneSub(true) + setCountGeneModule(countGeneModule + 1) + + let objectGene = { + geneID: geneID, + aminoacid: aminoacid2, + assemblyId: assemblyId3, + variantType: variantType2, + variantMinLength: variantMinLength2, + variantMaxLength: variantMaxLength2, + clinicalRelevance: clinicalRelevance3 + } + + geneModuleArray.push(objectGene) + + setGeneId('') + setAminoacid2('') + setAssemblyId3('') + setVariantType2('') + setVariantMinLength2('') + setVariantMaxLength2('') + setClinicalRelevance3('') } - useEffect(() => { - if (props.collection === 'Individuals') { - setPlaceholder('filtering term comma-separated, ID><=value') - setExtraIndividuals(true) - } else if (props.collection === 'Biosamples') { - setPlaceholder('filtering term comma-separated') - } else if (props.collection === 'Cohorts') { - setShowCohorts(true) - setExtraIndividuals(false) - setPlaceholder('Search for any cohort') - } else if (props.collection === 'Variant') { - setPlaceholder('filtering term comma-separated') - setExtraIndividuals(true) - setShowVariants(true) - } else if (props.collection === 'Analyses') { - setPlaceholder('filtering term comma-separated') - setExtraIndividuals(false) - } else if (props.collection === 'Runs') { - setPlaceholder('filtering term comma-separated') - setExtraIndividuals(false) - } else if (props.collection === 'Datasets') { - setPlaceholder('filtering term comma-separated') - setExtraIndividuals(false) + const handleChangeSelection1 = e => { + setGranularity(e.target.value) + } + + const handleChangeSelection2 = e => { + console.log(e.target.value) + if (e.target.value === 'Individuals') { + setCollection('Individuals') + } + if (e.target.value === 'Variant') { + setCollection('Variant') + } + if (e.target.value === 'Biosamples') { + setCollection('Biosamples') + } + } + + const handleOptionDisease = e => { + if (e.target.checked === true) { + filteringTerms.forEach(element => { + if (element.label) { + if (element.label.toLowerCase() === e.target.value.toLowerCase()) { + let ontology = element.id + terms.push([element.label, ontology]) + if (query !== null && query !== '') { + setQuery(query + ',' + 'disease=' + element.label) + } else { + setQuery('disease=' + element.label) + } + } else { + if (query !== null && query !== '') { + setQuery(query + ',' + 'disease=' + e.target.value) + } else { + setQuery('disease=' + e.target.value) + } + } + } + }) } else { - setPlaceholder('') + if (query.includes(`,disease=${e.target.value}`)) { + setQuery(query.replace(`,disease=${e.target.value}`, '')) + } else if (query.includes(`disease=${e.target.value},`)) { + setQuery(query.replace(`disease=${e.target.value},`, '')) + } else { + setQuery(query.replace(`disease=${e.target.value}`, '')) + } } + } + + const handleOptionSex = e => { + if (e.target.checked === true) { + filteringTerms.forEach(element => { + if (element.label) { + if (element.label.toLowerCase() === e.target.value.toLowerCase()) { + let ontology = element.id + terms.push([element.label, ontology]) + if (query !== null && query !== '') { + setQuery(query + ',' + 'sex=' + element.label) + } else { + setQuery('sex=' + element.label) + } + } else { + if (query !== null && query !== '') { + setQuery(query + ',' + 'sex=' + e.target.value) + } else { + setQuery('sex=' + e.target.value) + } + } + } + }) + } else { + if (query.includes(`,sex=${e.target.value}`)) { + setQuery(query.replace(`,sex=${e.target.value}`, '')) + } else if (query.includes(`sex=${e.target.value},`)) { + setQuery(query.replace(`sex=${e.target.value},`, '')) + } else { + setQuery(query.replace(`sex=${e.target.value}`, '')) + } + } + } + + const handleOptionAge = e => { + setShowAlphanum(true) + } + + const handleOptionHisto = e => { + if (e.target.checked === true) { + filteringTerms.forEach(element => { + if (element.label) { + if (element.label.toLowerCase() === e.target.value.toLowerCase()) { + let ontology = element.id + terms.push([element.label, ontology]) + if (query !== null && query !== '') { + setQuery(query + ',' + 'histopathology=' + element.label) + } else { + setQuery('histopathology=' + element.label) + } + } else { + if (query !== null && query !== '') { + setQuery(query + ',' + 'histopathology=' + e.target.value) + } else { + setQuery('histopathology=' + e.target.value) + } + } + } + }) + } else { + if (query.includes(`,histopathology=${e.target.value}`)) { + setQuery(query.replace(`,histopathology=${e.target.value}`, '')) + } else if (query.includes(`histopathology=${e.target.value},`)) { + setQuery(query.replace(`histopathology=${e.target.value},`, '')) + } else { + setQuery(query.replace(`histopathology=${e.target.value}`, '')) + } + } + } + + const handleOptionTreatment = e => { + if (e.target.checked === true) { + filteringTerms.forEach(element => { + if (element.label) { + if (element.label.toLowerCase() === e.target.value.toLowerCase()) { + let ontology = element.id + terms.push([element.label, ontology]) + if (query !== null && query !== '') { + setQuery(query + ',' + 'treatment=' + element.label) + } else { + setQuery('treatment=' + element.label) + } + } else { + if (query !== null && query !== '') { + setQuery(query + ',' + 'treatment=' + e.target.value) + } else { + setQuery('treatment=' + e.target.value) + } + } + } + }) + } else { + if (query.includes(`,treatment=${e.target.value}`)) { + setQuery(query.replace(`,treatment=${e.target.value}`, '')) + } else if (query.includes(`treatment=${e.target.value},`)) { + setQuery(query.replace(`treatment=${e.target.value},`, '')) + } else { + setQuery(query.replace(`treatment=${e.target.value}`, '')) + } + } + } + + const handleOptionVariant5 = e => { + if (e.target.checked) { + if (query !== null && query !== '') { + setQuery(query + ',' + `geneId:${geneID2}`) + } else { + setQuery(`geneId:${geneID2}`) + } + + setGeneSub3(true) + } else { + setGeneSub3(false) + setGeneModuleArray([]) + } + } + const handleOptionVariant7 = e => { + if (e.target.checked) { + if (query !== null && query !== '') { + setQuery(query + ',' + `molecularAttributes.geneIds=${geneID3}`) + } else { + setQuery(`molecularAttributes.geneIds=${geneID3}`) + } + } else { + setGeneModuleArray([]) + if (query.includes(`,molecularAttributes.geneIds=${geneID3}`)) { + setQuery(query.replace(`,molecularAttributes.geneIds=${geneID3}`, '')) + } else if (query.includes(`molecularAttributes.geneIds=${geneID3},`)) { + setQuery(query.replace(`molecularAttributes.geneIds=${geneID3},`, '')) + } else { + setQuery(query.replace(`molecularAttributes.geneIds=${geneID3}`, '')) + } + } + } + const handleOptionVariant6 = e => { + if (e.target.checked) { + if (query !== null && query !== '') { + setQuery(query + ',' + `geneId:${geneID}&aminoacidChange:${aminoacid}`) + } else { + setQuery(`geneId:${geneID}&aminoacidChange:${aminoacid}`) + } + + setGeneSub4(true) + } else { + setGeneSub4(false) + setGeneModuleArray([]) + } + } + + const handleOptionVariant = e => { + if (e.target.checked) { + if (query !== null && query !== '') { + setQuery( + query + + ',' + + `${start}-${end}:${variantType}:${referenceBases}>${alternateBases}` + ) + } else { + setQuery( + `${start}-${end}:${variantType}:${referenceBases}>${alternateBases}` + ) + } + } else { + setRangeSub1(false) + setRangeModuleArray([]) + } + } + + const handleOptionVariant2 = e => { + if (e.target.checked) { + // let objectRange = { + // assemblyId: assemblyId2, + // referenceName: referenceName2, + // start: '1334544', + // end: '1334545', + // variantType: 'SNP', + // alternateBases: 'A', + // referenceBases: 'T', + // aminoacid: aminoacid, + // variantMinLength: variantMinLength, + // variantMaxLength: variantMaxLength, + // clinicalRelevance: clinicalRelevance2 + // } + // let objectRange2 = { + // assemblyId: assemblyId2, + // referenceName: referenceName2, + // start: '3670751', + // end: '3670752', + // variantType: 'SNP', + // alternateBases: 'T', + // referenceBases: 'C', + // aminoacid: aminoacid, + // variantMinLength: variantMinLength, + // variantMaxLength: variantMaxLength, + // clinicalRelevance: clinicalRelevance2 + // } + // rangeModuleArray.push(objectRange) + // rangeModuleArray.push(objectRange2) + // console.log(rangeModuleArray) + // setRangeSub2(true) + + if (query !== null && query !== '') { + setQuery( + query + + ',' + + `${start3}-${end3}:${variantType3}:${referenceBases3}>${alternateBases3}, ${start2}-${end2}:${variantType2}:${referenceBases2}>${alternateBases2}` + ) + } else { + setQuery( + `${start3}-${end3}:${variantType3}:${referenceBases3}>${alternateBases3}, ${start2}-${end2}:${variantType2}:${referenceBases2}>${alternateBases2}` + ) + } + } else { + setRangeSub2(false) + setRangeModuleArray([]) + } + } + const handleOptionVariant3 = e => { + console.log(geneSubmitted2) + if (e.target.checked) { + setGeneSub(true) + + if (query !== null && query !== '') { + setQuery( + query + + ',' + + `geneId:${geneID4}, treatment=Chemotherapy, disease=STAGE IIIB, disease=Colon adenocarcinoma` + ) + } else { + setQuery( + `geneId:${geneID4}, treatment=Chemotherapy, disease=STAGE IIIB, disease=Colon adenocarcinoma` + ) + } + } else { + setGeneSub(false) + setGeneModuleArray([]) + } + } + const handleOptionVariant4 = e => { + if (e.target.checked) { + setGeneSub2(true) + if (query !== null && query !== '') { + setQuery( + query + + ',' + + `geneId:${geneID5}, treatment=Chemotherapy, disease=STAGE IIIB, disease=Colon adenocarcinoma` + ) + } else { + setQuery( + `geneId:${geneID5}, treatment=Chemotherapy, disease=STAGE IIIB, disease=Colon adenocarcinoma` + ) + } + } else { + setGeneSub2(false) + setGeneModuleArray([]) + } + } + + const handleReset = e => { + setQuery('') + } + + useEffect(() => { + setError('') const fetchData = async () => { - //for query expansion try { let res = await axios.get( - configData.API_URL + '/individuals/filtering_terms' + configData.API_URL + '/filtering_terms?limit=0' ) + setTimeOut(true) + console.log(res) + + if (res.data.response.filteringTerms !== undefined) { + res.data.response.filteringTerms.forEach(element => { + filteringTerms.push(element) + }) + + console.log(filteringTerms) + setResults(null) + } if (res !== null) { res.data.response.filteringTerms.forEach(element => { if (element.type !== 'custom') { @@ -469,7 +740,10 @@ function Layout (props) { } } catch (error) { console.log(error) + setTimeOut(true) + setError('No filtering terms now available') } + setShowFilteringTermsButton(true) } // call the function @@ -478,17 +752,41 @@ function Layout (props) { .catch(console.error) }, []) + useEffect(() => { + if (collection === 'Individuals') { + setPlaceholder('filtering term comma-separated, ID><=value') + setExtraIndividuals(true) + } + if (collection === 'Variant') { + setPlaceholder('filtering term comma-separated') + setExtraIndividuals(true) + setShowVariants(true) + } + if (collection === 'Biosamples') { + setPlaceholder('filtering term comma-separated, ID><=value') + setExtraIndividuals(true) + } + }, [collection]) + const onSubmit = async event => { + setShowFilters(false) + console.log(query) + console.log(value) event.preventDefault() setIsSub(true) setResultsetAux(resultSet) setQueryAux(query) - if (resultSet !== resultSetAux) { - setTriggerQuery(!triggerQuery) - } - if (queryAux !== query) { + setTriggerQuery(!triggerQuery) + + setTriggerQuery(!triggerQuery) + + let arrayRequestParameters2 = + geneModuleArray + seqModuleArray + rangeModuleArray + + setArrayReqParameters(geneModuleArray + seqModuleArray + rangeModuleArray) + if (arrayRequestParameters !== arrayRequestParameters2) { setTriggerQuery(!triggerQuery) } @@ -497,21 +795,29 @@ function Layout (props) { if (query === '1' || query === '') { setQuery(null) } - if (props.collection === 'Individuals') { + if (collection === 'Individuals') { setResults('Individuals') - } else if (props.collection === 'Variant') { + } else if (collection === 'Variant') { setResults('Variant') - } else if (props.collection === 'Biosamples') { + } else if (collection === 'Biosamples') { setResults('Biosamples') - } else if (props.collection === 'Analyses') { + } else if (collection === 'Analyses') { setResults('Analyses') - } else if (props.collection === 'Runs') { + } else if (collection === 'Runs') { setResults('Runs') } } function search (e) { setQuery(e.target.value) + var ele = document.getElementsByName('subscribe') + for (var i = 0; i < ele.length; i++) { + if (query.includes(ele[i].value)) { + ele[i].checked = true + } else { + ele[i].checked = false + } + } } const handleSubmit = async e => { @@ -524,1042 +830,783 @@ function Layout (props) { setResults('Variant') } + const handleShowFilterEx = () => { + setShowFilters(true) + } + return (
-
- - - BEACON VALIDATOR - -
- - beaconEgaLogo - -

v0.5.0

+
+
+
+
+ + eosc4cancer + +
+

v0.5.3

+
-
- -
- {popUp && ( - + + + having ... +
+
+
-
+
- +
- - - -
-
- -
-
+
+ +
+
+
+ +
+
term labeltypetypescopes
-{term.type}{term.type} - {term.scopes !== undefined && + + {Array.isArray(term.scopes) && term.scopes.map((term2, index) => { return index < term.scopes.length - 1 ? term2 + '' + ',' @@ -461,7 +506,13 @@ function FilteringTerms (props) { type='checkbox' id={term.id} name={term.id} - value={[term.id, term.type, index]} + value={[ + term.id, + term.label, + term.type, + [term.scopes], + index + ]} /> {term.id} -{term.type}{term.type} - {term.scopes.map((term2, index) => { + + {Array.isArray(term.scopes) && + term.scopes.map((term2, index) => { return index < term.scopes.length - 1 ? term2 + '' + ',' : term2 + '' })} - {term.scope}