From 15232ced7fc703ac93b257e5ce90db1712abfa20 Mon Sep 17 00:00:00 2001 From: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com> Date: Thu, 25 Jan 2024 08:27:25 +0000 Subject: [PATCH 1/3] Add citation modal and react-modal package Integrated a citation modal to the NavBar and added 'react-modal' to the dependencies. This modal provides users with appropriate citation information. Associated state management for the modal's open/close status was added. Signed-off-by: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com> --- webapp/package-lock.json | 48 +++++++++++--- webapp/package.json | 1 + webapp/src/layouts/NavBar.tsx | 25 +++++--- webapp/src/modals/Citations/Citations.tsx | 76 +++++++++++++++++++++++ 4 files changed, 133 insertions(+), 17 deletions(-) create mode 100644 webapp/src/modals/Citations/Citations.tsx diff --git a/webapp/package-lock.json b/webapp/package-lock.json index f0a1ee43..6f81cd98 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -22,6 +22,7 @@ "react-grid-layout": "^1.4.4", "react-icons": "^4.11.0", "react-inlinesvg": "^3.0.2", + "react-modal": "^3.16.1", "react-plotly.js": "^2.6.0", "react-redux": "^9.0.2", "react-responsive-carousel": "^3.2.23", @@ -10929,6 +10930,29 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "node_modules/react-modal": { + "version": "3.16.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz", + "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" + } + }, "node_modules/react-plotly.js": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/react-plotly.js/-/react-plotly.js-2.6.0.tgz", @@ -11439,9 +11463,9 @@ } }, "node_modules/rollup": { - "version": "3.26.3", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.26.3.tgz", - "integrity": "sha512-7Tin0C8l86TkpcMtXvQu6saWH93nhG3dGQ1/+l5V2TDMceTxO7kDiK6GzbfLWNNxqJXm591PcEZUozZm51ogwQ==", + "version": "3.29.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", + "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", "bin": { "rollup": "dist/bin/rollup" }, @@ -12810,13 +12834,13 @@ } }, "node_modules/vite": { - "version": "4.4.7", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz", - "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==", + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz", + "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==", "dependencies": { "esbuild": "^0.18.10", - "postcss": "^8.4.26", - "rollup": "^3.25.2" + "postcss": "^8.4.27", + "rollup": "^3.27.1" }, "bin": { "vite": "bin/vite.js" @@ -12927,6 +12951,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/weak-map": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/weak-map/-/weak-map-1.0.8.tgz", diff --git a/webapp/package.json b/webapp/package.json index bf68e3b3..e5ca028f 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -27,6 +27,7 @@ "react-grid-layout": "^1.4.4", "react-icons": "^4.11.0", "react-inlinesvg": "^3.0.2", + "react-modal": "^3.16.1", "react-plotly.js": "^2.6.0", "react-redux": "^9.0.2", "react-responsive-carousel": "^3.2.23", diff --git a/webapp/src/layouts/NavBar.tsx b/webapp/src/layouts/NavBar.tsx index 953547f1..16905da5 100644 --- a/webapp/src/layouts/NavBar.tsx +++ b/webapp/src/layouts/NavBar.tsx @@ -1,11 +1,17 @@ -import { type Dispatch, type ReactElement, type SetStateAction } from 'react'; +import {type Dispatch, type ReactElement, type SetStateAction, useState} from 'react'; import { GENERAL_CITATION, GITHUB_REPO } from '../data/Constants.tsx'; import React from 'react'; +import CitationModal from "../modals/Citations/Citations.tsx"; export default function NavBar({ setResetApp, }: { setResetApp: Dispatch>; }): ReactElement { + + const [modalOpen, setModalOpen] = useState(false) + const handleModalOpen = () => { + setModalOpen(true); + } return ( + +
@@ -43,7 +51,8 @@ export default function NavBar({ height="1em" viewBox="0 0 512 512" > - +
@@ -55,7 +64,8 @@ export default function NavBar({ height="1em" viewBox="0 0 448 512" > - +
@@ -79,14 +89,15 @@ export default function NavBar({
- + - +
@@ -96,10 +107,6 @@ export default function NavBar({ className="w-full hover:scale-125 transition-all hidden dark:block" src="/github-mark.png" /> - diff --git a/webapp/src/modals/Citations/Citations.tsx b/webapp/src/modals/Citations/Citations.tsx new file mode 100644 index 00000000..86c26f26 --- /dev/null +++ b/webapp/src/modals/Citations/Citations.tsx @@ -0,0 +1,76 @@ +import {Dispatch, SetStateAction, useState} from "react"; +import Modal from 'react-modal'; + +const customStyles = { + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + // // marginRight: '-50%', + transform: 'translate(-50%, -50%)', + color: 'black', + borderRadius: 10, + overflowY: "auto", + maxHeight: "100vh", + }, +}; + +export default function CitationModal(props: {modalOpen: boolean, setModalOpen: Dispatch>}) { + + const handleModalClose = () => { + props.setModalOpen(false) + } + + let subtitle; + + return ( +
+ + +
+

Citations

+ +
+ +
+

If you have used the Privateer Web App, please cite:

+ Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham, P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F., McNicholas, S. J. & Agirre, J. (2024). Online carbohydrate 3D structure validation with the Privateer web app. Acta Cryst. F80. https://doi.org/10.1107/S2053230X24000359 +
+ + {/*
*/} + {/*

If you have used the Privateer Database, please cite:

*/} + {/* Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham, P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F., McNicholas, S. J. & Agirre, J. (2024). Online carbohydrate 3D structure validation with the Privateer web app. Acta Cryst. F80. https://doi.org/10.1107/S2053230X24000359*/} + {/*
*/} + +
+

The Privateer Web App is possible thanks to these foundational studies:

+ Dialpuri, J. S., Bagdonas, H., Atanasova, M., Schofield, L. C., Hekkelman, M. L., Joosten, R. P., & Agirre, J. (2023). Analysis and validation of overall N-glycan conformation in Privateer. Acta Crystallographica Section D: Structural Biology, 79(6). + Bagdonas, H., Ungar, D., & Agirre, J. (2020). Leveraging glycomics data in glycoprotein 3D structure validation with Privateer. Beilstein Journal of Organic Chemistry, 16(1), 2523-2533. + McNicholas, S., & Agirre, J. (2017). Glycoblocks: a schematic three-dimensional representation for glycans and their interactions. Acta Crystallographica Section D: Structural Biology, 73(2), 187-194. + Atanasova, M., Nicholls, R. A., Joosten, R. P., & Agirre, J. (2022). Updated restraint dictionaries for carbohydrates in the pyranose form. Acta Crystallographica Section D: Structural Biology, 78(4), 455-465. + Agirre, J., Iglesias-Fernández, J., Rovira, C., Davies, G. J., Wilson, K. S., & Cowtan, K. D. (2015). Privateer: software for the conformational validation of carbohydrate structures. Nature structural & molecular biology, 22(11), 833-834. + Agirre, J., Davies, G., Wilson, K., & Cowtan, K. (2015). Carbohydrate anomalies in the PDB. Nature chemical biology, 11(5), 303-303. + Atanasova, M., Bagdonas, H., & Agirre, J. (2020). Structural glycobiology in the age of electron cryo-microscopy. Current Opinion in Structural Biology, 62, 70-78. + +
+ + +
+ + ) +} \ No newline at end of file From 28af12d5cc6d4f3c8fae4378c41bd54b6ceac4bc Mon Sep 17 00:00:00 2001 From: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com> Date: Thu, 25 Jan 2024 08:28:59 +0000 Subject: [PATCH 2/3] Update NavBar and CitationModal components The NavBar and CitationModal components have been revised for better code readability and performance. Signed-off-by: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com> --- webapp/src/layouts/NavBar.tsx | 28 ++--- webapp/src/modals/Citations/Citations.tsx | 131 ++++++++++++++++------ 2 files changed, 110 insertions(+), 49 deletions(-) diff --git a/webapp/src/layouts/NavBar.tsx b/webapp/src/layouts/NavBar.tsx index 16905da5..fb2e885a 100644 --- a/webapp/src/layouts/NavBar.tsx +++ b/webapp/src/layouts/NavBar.tsx @@ -1,17 +1,21 @@ -import {type Dispatch, type ReactElement, type SetStateAction, useState} from 'react'; -import { GENERAL_CITATION, GITHUB_REPO } from '../data/Constants.tsx'; +import { + type Dispatch, + type ReactElement, + type SetStateAction, + useState, +} from 'react'; +import { GITHUB_REPO } from '../data/Constants.tsx'; import React from 'react'; -import CitationModal from "../modals/Citations/Citations.tsx"; +import CitationModal from '../modals/Citations/Citations.tsx'; export default function NavBar({ setResetApp, }: { setResetApp: Dispatch>; }): ReactElement { - - const [modalOpen, setModalOpen] = useState(false) + const [modalOpen, setModalOpen] = useState(false); const handleModalOpen = () => { setModalOpen(true); - } + }; return ( - - +
@@ -51,8 +54,7 @@ export default function NavBar({ height="1em" viewBox="0 0 512 512" > - +
@@ -64,8 +66,7 @@ export default function NavBar({ height="1em" viewBox="0 0 448 512" > - +
@@ -96,8 +97,7 @@ export default function NavBar({ height="1em" viewBox="0 0 384 512" > - + diff --git a/webapp/src/modals/Citations/Citations.tsx b/webapp/src/modals/Citations/Citations.tsx index 86c26f26..6b6da6cd 100644 --- a/webapp/src/modals/Citations/Citations.tsx +++ b/webapp/src/modals/Citations/Citations.tsx @@ -1,4 +1,4 @@ -import {Dispatch, SetStateAction, useState} from "react"; +import React, { type Dispatch, type SetStateAction } from 'react'; import Modal from 'react-modal'; const customStyles = { @@ -11,18 +11,18 @@ const customStyles = { transform: 'translate(-50%, -50%)', color: 'black', borderRadius: 10, - overflowY: "auto", - maxHeight: "100vh", + overflowY: 'auto', + maxHeight: '100vh', }, }; -export default function CitationModal(props: {modalOpen: boolean, setModalOpen: Dispatch>}) { - +export default function CitationModal(props: { + modalOpen: boolean; + setModalOpen: Dispatch>; +}) { const handleModalClose = () => { - props.setModalOpen(false) - } - - let subtitle; + props.setModalOpen(false); + }; return (
@@ -32,45 +32,106 @@ export default function CitationModal(props: {modalOpen: boolean, setModalOpen: contentLabel="Example Modal" style={customStyles} > -

Citations

-
-

If you have used the Privateer Web App, please cite:

- Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham, P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F., McNicholas, S. J. & Agirre, J. (2024). Online carbohydrate 3D structure validation with the Privateer web app. Acta Cryst. F80. https://doi.org/10.1107/S2053230X24000359 +

+ If you have used the{' '} + + Privateer Web App + + , please cite:{' '} +

+ + Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham, + P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F., + McNicholas, S. J. & Agirre, J. (2024). Online + carbohydrate 3D structure validation with the Privateer + web app. Acta Cryst. F80. + https://doi.org/10.1107/S2053230X24000359 +
- {/*
*/} - {/*

If you have used the Privateer Database, please cite:

*/} - {/* Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham, P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F., McNicholas, S. J. & Agirre, J. (2024). Online carbohydrate 3D structure validation with the Privateer web app. Acta Cryst. F80. https://doi.org/10.1107/S2053230X24000359*/} - {/*
*/} + {/*
*/} + {/*

If you have used the Privateer Database, please cite:

*/} + {/* Dialpuri, J. S., Bagdonas, H., Schofield, L. C., Pham, P. T., Holland, L., Bond, P. S., Sánchez Rodríguez, F., McNicholas, S. J. & Agirre, J. (2024). Online carbohydrate 3D structure validation with the Privateer web app. Acta Cryst. F80. https://doi.org/10.1107/S2053230X24000359 */} + {/*
*/}
-

The Privateer Web App is possible thanks to these foundational studies:

- Dialpuri, J. S., Bagdonas, H., Atanasova, M., Schofield, L. C., Hekkelman, M. L., Joosten, R. P., & Agirre, J. (2023). Analysis and validation of overall N-glycan conformation in Privateer. Acta Crystallographica Section D: Structural Biology, 79(6). - Bagdonas, H., Ungar, D., & Agirre, J. (2020). Leveraging glycomics data in glycoprotein 3D structure validation with Privateer. Beilstein Journal of Organic Chemistry, 16(1), 2523-2533. - McNicholas, S., & Agirre, J. (2017). Glycoblocks: a schematic three-dimensional representation for glycans and their interactions. Acta Crystallographica Section D: Structural Biology, 73(2), 187-194. - Atanasova, M., Nicholls, R. A., Joosten, R. P., & Agirre, J. (2022). Updated restraint dictionaries for carbohydrates in the pyranose form. Acta Crystallographica Section D: Structural Biology, 78(4), 455-465. - Agirre, J., Iglesias-Fernández, J., Rovira, C., Davies, G. J., Wilson, K. S., & Cowtan, K. D. (2015). Privateer: software for the conformational validation of carbohydrate structures. Nature structural & molecular biology, 22(11), 833-834. - Agirre, J., Davies, G., Wilson, K., & Cowtan, K. (2015). Carbohydrate anomalies in the PDB. Nature chemical biology, 11(5), 303-303. - Atanasova, M., Bagdonas, H., & Agirre, J. (2020). Structural glycobiology in the age of electron cryo-microscopy. Current Opinion in Structural Biology, 62, 70-78. - +

+ The Privateer Web App is possible thanks to these + foundational studies: +

+ + Dialpuri, J. S., Bagdonas, H., Atanasova, M., Schofield, + L. C., Hekkelman, M. L., Joosten, R. P., & Agirre, J. + (2023). Analysis and validation of overall N-glycan + conformation in Privateer. Acta Crystallographica + Section D: Structural Biology, 79(6). + + + Bagdonas, H., Ungar, D., & Agirre, J. (2020). Leveraging + glycomics data in glycoprotein 3D structure validation + with Privateer. Beilstein Journal of Organic Chemistry, + 16(1), 2523-2533. + + + McNicholas, S., & Agirre, J. (2017). Glycoblocks: a + schematic three-dimensional representation for glycans + and their interactions. Acta Crystallographica Section + D: Structural Biology, 73(2), 187-194. + + + Atanasova, M., Nicholls, R. A., Joosten, R. P., & + Agirre, J. (2022). Updated restraint dictionaries for + carbohydrates in the pyranose form. Acta + Crystallographica Section D: Structural Biology, 78(4), + 455-465. + + + Agirre, J., Iglesias-Fernández, J., Rovira, C., Davies, + G. J., Wilson, K. S., & Cowtan, K. D. (2015). Privateer: + software for the conformational validation of + carbohydrate structures. Nature structural & molecular + biology, 22(11), 833-834. + + + Agirre, J., Davies, G., Wilson, K., & Cowtan, K. (2015). + Carbohydrate anomalies in the PDB. Nature chemical + biology, 11(5), 303-303. + + + Atanasova, M., Bagdonas, H., & Agirre, J. (2020). + Structural glycobiology in the age of electron + cryo-microscopy. Current Opinion in Structural Biology, + 62, 70-78. +
-
- - ) -} \ No newline at end of file + ); +} From 2dd5a76f7a89d0c6e8205c83c89436fee2a60896 Mon Sep 17 00:00:00 2001 From: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com> Date: Thu, 25 Jan 2024 08:40:11 +0000 Subject: [PATCH 3/3] Update Footer component's displayed text The Footer component's text has been edited to display 'York Structural Biology Laboratory' instead of individual names, providing a more general attribution. This update simplifies the footer's content and enhances its uniformity with the overall web page design. Signed-off-by: Jordan Dialpuri <44945647+Dialpuri@users.noreply.github.com> --- webapp/src/layouts/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/layouts/Footer.tsx b/webapp/src/layouts/Footer.tsx index aef73485..0a81a98f 100644 --- a/webapp/src/layouts/Footer.tsx +++ b/webapp/src/layouts/Footer.tsx @@ -4,7 +4,7 @@ export default function Footer(): ReactElement {