Skip to content

Commit

Permalink
Update NavBar and CitationModal components
Browse files Browse the repository at this point in the history 
The NavBar and CitationModal components have been revised for better code readability and performance.

Signed-off-by: Jordan Dialpuri <[email protected]>
  • Loading branch information
@Dialpuri
Dialpuri committed Jan 25, 2024
1 parent 15232ce commit 28af12d
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 49 deletions.
28 changes: 14 additions & 14 deletions webapp/src/layouts/NavBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,

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 [modalOpen, setModalOpen] = useState(false);
const handleModalOpen = () => {
setModalOpen(true);
}
};
return (
<div
id="navbar"
Expand Down Expand Up @@ -39,8 +43,7 @@ export default function NavBar({
refinement and analysis
</span>
</div>
<CitationModal modalOpen={modalOpen} setModalOpen={setModalOpen}/>

<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 All @@ -51,8 +54,7 @@ export default function NavBar({
height="1em"
viewBox="0 0 512 512"
>
<path
d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z"/>
<path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V400c0 44.2 35.8 80 80 80H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H80c-8.8 0-16-7.2-16-16V64zm406.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L320 210.7l-57.4-57.4c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L240 221.3l57.4 57.4c12.5 12.5 32.8 12.5 45.3 0l128-128z" />
</svg>
</a>
</div>
Expand All @@ -64,8 +66,7 @@ export default function NavBar({
height="1em"
viewBox="0 0 448 512"
>
<path
d="M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z"/>
<path d="M448 80v48c0 44.2-100.3 80-224 80S0 172.2 0 128V80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6V288c0 44.2-100.3 80-224 80S0 332.2 0 288V186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6V432c0 44.2-100.3 80-224 80S0 476.2 0 432V346.1z" />
</svg>
</a>
</div>
Expand Down Expand Up @@ -96,8 +97,7 @@ export default function NavBar({
height="1em"
viewBox="0 0 384 512"
>
<path
d="M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z"/>
<path d="M0 48V487.7C0 501.1 10.9 512 24.3 512c5 0 9.9-1.5 14-4.4L192 400 345.7 507.6c4.1 2.9 9 4.4 14 4.4c13.4 0 24.3-10.9 24.3-24.3V48c0-26.5-21.5-48-48-48H48C21.5 0 0 21.5 0 48z" />
</svg>
</a>
</div>
Expand Down
131 changes: 96 additions & 35 deletions webapp/src/modals/Citations/Citations.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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<SetStateAction<boolean>>}) {

export default function CitationModal(props: {
modalOpen: boolean;
setModalOpen: Dispatch<SetStateAction<boolean>>;
}) {
const handleModalClose = () => {
props.setModalOpen(false)
}

let subtitle;
props.setModalOpen(false);
};

return (
<div className="max-h-screen overflow-auto">
Expand All @@ -32,45 +32,106 @@ export default function CitationModal(props: {modalOpen: boolean, setModalOpen:
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 "
<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
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>
<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"> */}
{/* <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>

<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 28af12d

Please sign in to comment.