Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Citation Modal #87

Merged
merged 3 commits into from
Jan 25, 2024
Merged

Add Citation Modal #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
15232ce
Add citation modal and react-modal package
Dialpuri Jan 25, 2024
28af12d
Update NavBar and CitationModal components
Dialpuri Jan 25, 2024
2dd5a76
Update Footer component's displayed text
Dialpuri Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 40 additions & 8 deletions webapp/package-lock.json
View file
Open in desktop

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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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,

Check warning on line 11 in webapp/src/layouts/NavBar.tsx

View workflow job for this annotation

GitHub Actions / build 

'setResetApp' is defined but never used. Allowed unused args must match /^_/u
}: {
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 @@
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 @@
</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 @@
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
View file
Open in desktop
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>
);
}
Loading