From 8682781e3429cd91f4e4e07a99ccdc5b369ed55e Mon Sep 17 00:00:00 2001 From: Jessica Nash Date: Thu, 5 Oct 2023 22:21:08 -0400 Subject: [PATCH 1/4] adds ability to open neighbor search for a given molecule --- frontend/src/common/MoleculeUtils.jsx | 30 +++++++++++++++------------ frontend/src/common/Routes.jsx | 2 ++ frontend/src/pages/Molecule.jsx | 5 +++++ frontend/src/pages/Neighbors.jsx | 8 ++++--- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/frontend/src/common/MoleculeUtils.jsx b/frontend/src/common/MoleculeUtils.jsx index a07d233..2cbc087 100644 --- a/frontend/src/common/MoleculeUtils.jsx +++ b/frontend/src/common/MoleculeUtils.jsx @@ -6,16 +6,6 @@ import Grid from '@mui/material/Grid'; import Container from '@mui/material/Container'; import Button from '@mui/material/Button'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; - -const theme = createTheme({ - palette: { - primary: { - main: "#393536", - } - }, -}); - const Item = styled(Paper)(({ theme }) => ({ backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff', ...theme.typography.body2, @@ -51,6 +41,19 @@ function moleculePage(molecule_id) { window.open(url, "_blank", "noreferrer"); } +function neighborPage(molecule_id) { + /** + * Redirects to the molecule page for the molecule neighbor search on click. + * @param {molecule_id} number molecule id for the molecule. + */ + // Gets the original url for the window and splits it into its components. The first element will always be http(s):, second will always be empty, third will always be + // website name. Need the first and third elements (0, 2) to redirect to the neighboar endpoint below. + let og_url = window.location.href.split("/"); + let url = og_url[0] + "//" + og_url[2] + "/neighbors/" + molecule_id; + console.log(url) + window.open(url, "_blank", "noreferrer"); +} + function dynamicGrid( svgs ) { /** @@ -70,7 +73,7 @@ function dynamicGrid( svgs ) { Smiles: { result.smiles } - + // False condition - render Item without border if distance is not 0. : @@ -83,7 +86,8 @@ function dynamicGrid( svgs ) { Distance: {result.distance.toFixed(2)} )} - + + } )) @@ -141,4 +145,4 @@ async function retrieveSVG(smiles, molecule_id, substructure = undefined, distan -export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch }; \ No newline at end of file +export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch, neighborPage }; \ No newline at end of file diff --git a/frontend/src/common/Routes.jsx b/frontend/src/common/Routes.jsx index 0c1b25d..43d028c 100644 --- a/frontend/src/common/Routes.jsx +++ b/frontend/src/common/Routes.jsx @@ -1,6 +1,7 @@ import { Route, Routes } from 'react-router-dom'; import MoleculeInfo from '../pages/Molecule'; +import NeighborSearchHook from '../pages/Neighbors'; export const AppRoutes = ({ pages }) => ( @@ -10,5 +11,6 @@ export const AppRoutes = ({ pages }) => ( ))} } /> + } /> ); \ No newline at end of file diff --git a/frontend/src/pages/Molecule.jsx b/frontend/src/pages/Molecule.jsx index de04d4b..cdf71d5 100644 --- a/frontend/src/pages/Molecule.jsx +++ b/frontend/src/pages/Molecule.jsx @@ -10,6 +10,8 @@ import { NGLStage, Component } from "../components/NGL" import MoleculeDataTable from "../components/MoleculeDataTable"; +import { neighborPage } from "../common/MoleculeUtils"; + async function molecule(molecule_id, signal) { /** * Requests general umap or pca data from the backend. @@ -184,6 +186,9 @@ export default function MoleculeInfo() { InChI: {identifierData.InChI} InChIKey: {identifierData.InChIKey} Molecular Weight: {molData.molecular_weight.toFixed(2)} + + + } diff --git a/frontend/src/pages/Neighbors.jsx b/frontend/src/pages/Neighbors.jsx index 953b115..c9e7839 100644 --- a/frontend/src/pages/Neighbors.jsx +++ b/frontend/src/pages/Neighbors.jsx @@ -3,7 +3,7 @@ import { TextField, Typography } from "@mui/material"; import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import CircularProgress from '@mui/material/CircularProgress'; -import { ThemeProvider } from '@mui/material/styles'; +import { useParams } from "react-router-dom"; import Button from '@mui/material/Button'; @@ -42,9 +42,11 @@ export default function NeighborSearchHook () { * @returns {jsx} The front end JSX that will generate the HTML users will interact with. It contains a search bar as well as generated * a graph, and the dynamic grid component based on what data is available. */ + + const params = useParams(); const interval = 15; - const [ moleculeid, setSearch ] = useState(1); + const [ moleculeid, setMoleculeID ] = useState(params.molid || 1); const [ skip, setSkip ] = useState(0); const [ validMolecule, setValidMolecule ] = useState(true); const [ svg_results, setSVGResults ] = useState([]) @@ -175,7 +177,7 @@ export default function NeighborSearchHook () { variant="outlined" value= {moleculeid} onKeyDown = { (e) => _handleKeyDown(e) } - onChange = { event => setSearch( event.target.value ) } + onChange = { event => setMoleculeID( event.target.value ) } InputProps={{endAdornment: }} /> From 86cfecbbcbf3bb7ff919e7b1690a6c6151ee6354 Mon Sep 17 00:00:00 2001 From: Jessica Nash Date: Fri, 6 Oct 2023 00:38:03 -0400 Subject: [PATCH 2/4] change button text --- frontend/src/common/MoleculeUtils.jsx | 6 +++--- frontend/src/pages/Molecule.jsx | 5 ++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/src/common/MoleculeUtils.jsx b/frontend/src/common/MoleculeUtils.jsx index 2cbc087..6fbf514 100644 --- a/frontend/src/common/MoleculeUtils.jsx +++ b/frontend/src/common/MoleculeUtils.jsx @@ -73,7 +73,7 @@ function dynamicGrid( svgs ) { Smiles: { result.smiles } - + // False condition - render Item without border if distance is not 0. : @@ -86,8 +86,8 @@ function dynamicGrid( svgs ) { Distance: {result.distance.toFixed(2)} )} - - + + } )) diff --git a/frontend/src/pages/Molecule.jsx b/frontend/src/pages/Molecule.jsx index cdf71d5..b31e374 100644 --- a/frontend/src/pages/Molecule.jsx +++ b/frontend/src/pages/Molecule.jsx @@ -212,7 +212,10 @@ export default function MoleculeInfo() { ))} - + + + + From 14e1b25e5a3e2c3ce473e89aea5c7bf4816f61b7 Mon Sep 17 00:00:00 2001 From: Jessica Nash Date: Sun, 8 Oct 2023 19:39:04 -0400 Subject: [PATCH 3/4] remove extra button from molecule page --- frontend/src/pages/Molecule.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/src/pages/Molecule.jsx b/frontend/src/pages/Molecule.jsx index b31e374..7c59620 100644 --- a/frontend/src/pages/Molecule.jsx +++ b/frontend/src/pages/Molecule.jsx @@ -212,9 +212,6 @@ export default function MoleculeInfo() { ))} - - - From 3fdead7474600945424c7334ac2ab0e066f48144 Mon Sep 17 00:00:00 2001 From: Jessica Nash Date: Sun, 8 Oct 2023 20:04:48 -0400 Subject: [PATCH 4/4] remove console.log --- frontend/src/common/MoleculeUtils.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/common/MoleculeUtils.jsx b/frontend/src/common/MoleculeUtils.jsx index 6fbf514..8bdba6b 100644 --- a/frontend/src/common/MoleculeUtils.jsx +++ b/frontend/src/common/MoleculeUtils.jsx @@ -50,7 +50,6 @@ function neighborPage(molecule_id) { // website name. Need the first and third elements (0, 2) to redirect to the neighboar endpoint below. let og_url = window.location.href.split("/"); let url = og_url[0] + "//" + og_url[2] + "/neighbors/" + molecule_id; - console.log(url) window.open(url, "_blank", "noreferrer"); }