Skip to content

Commit

Permalink
Merge pull request #87 from glycojones/add_citation
Browse files Browse the repository at this point in the history
Add Citation Modal
  • Loading branch information
lcs551 authored Jan 25, 2024
2 parents 3b682c4 + 2dd5a76 commit 375edb8
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 16 deletions.
48 changes: 40 additions & 8 deletions webapp/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/layouts/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function Footer(): ReactElement {
<footer className="bg-gray w-full mt-auto">
<div className="w-full mx-auto max-w-screen-xl p-4 flex items-center justify-center">
<span className="text-sm text-primary text-center justify-center dark:text-gray-400">
Jordan Dialpuri, Haroldas Bagdonas and Jon Agirre
York Structural Biology Laboratory
<br />
© 2023-2024 University of York. All Rights Reserved.
<br />
Expand Down
21 changes: 14 additions & 7 deletions webapp/src/layouts/NavBar.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,21 @@
import { type Dispatch, type ReactElement, type SetStateAction } 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';
export default function NavBar({
setResetApp,
}: {
setResetApp: Dispatch<SetStateAction<boolean>>;
}): ReactElement {
const [modalOpen, setModalOpen] = useState(false);
const handleModalOpen = () => {
setModalOpen(true);
};
return (
<div
id="navbar"
Expand Down Expand Up @@ -33,6 +43,7 @@ export default function NavBar({
refinement and analysis
</span>
</div>
<CitationModal modalOpen={modalOpen} setModalOpen={setModalOpen} />

<div className="flex">
<div className="h-12 w-12 mx-auto my-4 sm:w-12 sm:mt-12 sm:mr-6 flex items-center ">
Expand Down Expand Up @@ -79,7 +90,7 @@ export default function NavBar({
</a>
</div>
<div className="h-12 w-12 mx-auto my-4 sm:w-12 sm:mt-12 sm:mr-6 flex items-center ">
<a id="citation" href={GENERAL_CITATION}>
<a onClick={handleModalOpen} id="citation">
<svg
className="w-6 h-6 text-gray-500 hover:scale-125 transition-all"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -96,10 +107,6 @@ export default function NavBar({
className="w-full hover:scale-125 transition-all hidden dark:block"
src="/github-mark.png"
/>
<img
className="w-full hover:scale-125 transition-all block dark:hidden"
src="/github-mark-white.png"
/>
</a>
</div>
</div>
Expand Down
137 changes: 137 additions & 0 deletions webapp/src/modals/Citations/Citations.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
import React, { type Dispatch, type SetStateAction } 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<SetStateAction<boolean>>;
}) {
const handleModalClose = () => {
props.setModalOpen(false);
};

return (
<div className="max-h-screen overflow-auto">
<Modal
isOpen={props.modalOpen}
onRequestClose={handleModalClose}
contentLabel="Example Modal"
style={customStyles}
>
<div className="flex flex-row w-full space-between ">
<h2 className="mr-16 sm:mr-96">Citations</h2>
<button
type="button"
onClick={handleModalClose}
className="text-gray-400 bg-transparent hover:scale-105 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center "
>
<svg
className="w-3 h-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 14"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
/>
</svg>
<span className="sr-only">Close modal</span>
</button>
</div>

<div className="mt-4 flex flex-col space-y-2 text-sm sm:text-base">
<h3>
If you have used the{' '}
<b>
<i>Privateer Web App</i>
</b>
, please cite:{' '}
</h3>
<strong>
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
</strong>
</div>

{/* <div className="mt-4 flex flex-col space-y-2"> */}
{/* <h3>If you have used the <b><i>Privateer Database</i></b>, please cite: </h3> */}
{/* <span>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</span> */}
{/* </div> */}

<div className="mt-4 flex flex-col space-y-2 font text-sm sm:text-base">
<h3>
The <i>Privateer Web App</i> is possible thanks to these
foundational studies:
</h3>
<span>
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).
</span>
<span>
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.
</span>
<span>
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.
</span>
<span>
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.
</span>
<span>
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.
</span>
<span>
Agirre, J., Davies, G., Wilson, K., & Cowtan, K. (2015).
Carbohydrate anomalies in the PDB. Nature chemical
biology, 11(5), 303-303.
</span>
<span>
Atanasova, M., Bagdonas, H., & Agirre, J. (2020).
Structural glycobiology in the age of electron
cryo-microscopy. Current Opinion in Structural Biology,
62, 70-78.
</span>
</div>
</Modal>
</div>
);
}

0 comments on commit 375edb8

Please sign in to comment.