From 040320ea59d4e6cef790f955354e7e408a8e89d5 Mon Sep 17 00:00:00 2001 From: Martin Noble Date: Thu, 11 Jan 2024 13:07:24 +0000 Subject: [PATCH] Adding maps to PDB react-router scenes and tidying before I move to my own branch on github and use pull requests. --- .gitignore | 3 +- src/MoorhenRouter.tsx | 100 ++++++++++++++++++++++++++++++++++-------- 2 files changed, 83 insertions(+), 20 deletions(-) diff --git a/.gitignore b/.gitignore index ccae671..5b4a641 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ package-lock.json public/baby-gru/* dist/* -node_modules/* \ No newline at end of file +node_modules/* +**/.DS_Store diff --git a/src/MoorhenRouter.tsx b/src/MoorhenRouter.tsx index 495fdda..f0ae1a6 100644 --- a/src/MoorhenRouter.tsx +++ b/src/MoorhenRouter.tsx @@ -1,5 +1,5 @@ -import { MoorhenContainer, MoorhenMolecule, addMolecule } from 'moorhen' +import { MoorhenContainer, MoorhenMolecule, MoorhenMap, addMolecule, addMap, setActiveMap } from 'moorhen' import { webGL } from 'moorhen/types/mgWebGL'; import { moorhen } from 'moorhen/types/moorhen'; import { useEffect, useRef } from 'react'; @@ -10,35 +10,93 @@ export const MoorhenRouter: React.FC = () => { return }; -const MoorhenContainerWithPdb: React.FC = () => { +const WrappedMoorhenContainer: React.FC = () => { const glRef = useRef(null) const commandCentre = useRef(null) const dispatch = useDispatch() const cootInitialized = useSelector((state: moorhen.State) => state.generalStates.cootInitialized) - const urlPrefix = "" + const urlPrefix: string = "" - const { pdbId } = useParams() + const { pdbId, tutorialNumber } = useParams() const collectedProps = { glRef, commandCentre, urlPrefix } + const tutorialMtzColumnNames: { [key: string]: any } = { + 1: { F: "FWT", PHI: "PHWT", Fobs: 'FP', SigFobs: 'SIGFP', FreeR: 'FREE' }, + 2: { F: "FWT", PHI: "PHWT", Fobs: 'FP', SigFobs: 'SIGFP', FreeR: 'FREE' }, + 3: { F: "FWT", PHI: "PHWT", Fobs: 'F', SigFobs: 'SIGF', FreeR: 'FREER' } + } + + const loadTutorial = async (tutorialNumber: string) => { + const newMolecule = new MoorhenMolecule(commandCentre, glRef, "") + const newMap = new MoorhenMap(commandCentre, glRef) + const newDiffMap = new MoorhenMap(commandCentre, glRef) + await newMolecule.loadToCootFromURL(`${urlPrefix}/baby-gru/tutorials/moorhen-tutorial-structure-number-${tutorialNumber}.pdb`, `mol-${tutorialNumber}`) + await newMolecule.fetchIfDirtyAndDraw('CBs') + dispatch(addMolecule(newMolecule)) + await newMolecule.centreOn('/*/*/*/*', false) + await newMap.loadToCootFromMtzURL( + `${urlPrefix}/baby-gru/tutorials/moorhen-tutorial-map-number-${tutorialNumber}.mtz`, + `map-${tutorialNumber}`, + { isDifference: false, useWeight: false, calcStructFact: true, ...tutorialMtzColumnNames[tutorialNumber] } + ) + await newDiffMap.loadToCootFromMtzURL( + `${urlPrefix}/baby-gru/tutorials/moorhen-tutorial-map-number-${tutorialNumber}.mtz`, + `diff-map-${tutorialNumber}`, + { F: "DELFWT", PHI: "PHDELWT", isDifference: true, useWeight: false } + ) + dispatch(addMap(newMap)) + dispatch(addMap(newDiffMap)) + dispatch(setActiveMap(newMap)) + } + + const loadPdb = async (pdbId: string) => { + const newMolecule: moorhen.Molecule = new MoorhenMolecule(commandCentre, glRef, "") + const pdbCode: string = pdbId.toLowerCase() + const coordUrl: string = `https://www.ebi.ac.uk/pdbe/entry-files/download/${pdbCode}.cif` + await newMolecule.loadToCootFromURL(coordUrl, pdbCode) + await newMolecule.addRepresentation("CRs", "/*/*") + await newMolecule.fetchIfDirtyAndDraw("ligands") + newMolecule.centreOn("/*/*") + glRef.current?.setZoom(4.0) + dispatch(addMolecule(newMolecule)) + const newMap = new MoorhenMap(commandCentre, glRef) + const newDiffMap = new MoorhenMap(commandCentre, glRef) + try { + await newMap.loadToCootFromMapURL( + `https://www.ebi.ac.uk/pdbe/entry-files/${pdbCode}.ccp4`, + `${pdbCode}-2FoFc`, + false + ) + dispatch(addMap(newMap)) + } + catch (err) { + } + try { + await newDiffMap.loadToCootFromMapURL( + `https://www.ebi.ac.uk/pdbe/entry-files/${pdbCode}_diff.ccp4`, + `${pdbCode}-FoFc`, + true + ) + dispatch(addMap(newDiffMap)) + } + catch (err) { + } + } + useEffect(() => { - if (pdbId && cootInitialized) { - const asyncFunc = async () => { - const newMolecule: moorhen.Molecule = new MoorhenMolecule(commandCentre, glRef, "") - const pdbCode: string = pdbId.toLowerCase() - const coordUrl: string = `https://www.ebi.ac.uk/pdbe/entry-files/download/${pdbCode}.cif` - await newMolecule.loadToCootFromURL(coordUrl, pdbCode) - await newMolecule.addRepresentation("CRs", "/*/*") - await newMolecule.fetchIfDirtyAndDraw("ligands") - newMolecule.centreOn("/*/*") - glRef.current?.setZoom(4.0) - dispatch(addMolecule(newMolecule)) + if (cootInitialized) { + if (pdbId) { + loadPdb(pdbId) + } + else if (tutorialNumber) { + loadTutorial(tutorialNumber) } - asyncFunc() } - }, [pdbId, cootInitialized]) + }, [pdbId, tutorialNumber, cootInitialized]) + return } @@ -54,11 +112,15 @@ const moorhenRouter = createBrowserRouter( }, { path: "/pdb/:pdbId", - element: , + element: , }, { path: "/:pdbId", - element: , + element: , + }, + { + path: "/tutorial/:tutorialNumber", + element: , }, ] )