Merge pull request #55 from janash/feature/open-neighbors

Adds neighbor search option to search results and molecule pages
Descriptor-Libraries · Oct 9, 2023 · 83e5765 · 83e5765
2 parents ef2aace + 3fdead7
commit 83e5765
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 17 deletions.
diff --git 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,18 @@ 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;
+  window.open(url, "_blank", "noreferrer");
+}
+
 
 function dynamicGrid( svgs ) {
     /**
@@ -70,7 +72,7 @@ function dynamicGrid( svgs ) {
             <Item sx={{border: 3, borderColor: '#ed1c24'}}>
             <img alt='' src={`data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`} />
             <Typography sx={{ wordBreak: "break-word" }}> <strong>Smiles: </strong> { result.smiles }</Typography>
-            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button>
+            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View Details</Button>
             </Item>
             // False condition - render Item without border if distance is not 0.
             :
@@ -83,7 +85,8 @@ function dynamicGrid( svgs ) {
                   <strong>Distance: </strong> {result.distance.toFixed(2)}
                 </Typography>
               )}
-            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View</Button>
+            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => moleculePage(result.molecule_id)}>View Details</Button>
+            <Button variant="contained" sx={{ m: 0.5 }} onClick={() => neighborPage(result.molecule_id)}>View Neighbors</Button>
             </Item>} 
         </Grid>
         ))
@@ -141,4 +144,4 @@ async function retrieveSVG(smiles, molecule_id, substructure = undefined, distan
 
 
 
-export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch };
+export { retrieveSVG, retrieveAllSVGs, dynamicGrid, substructureSearch, neighborPage };
diff --git 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 }) => (
       <Route key={index} path={`/${page.replace(" ", "_").toLowerCase()}`} element={pages[page]} />
     ))}
     <Route path="molecule/:molid" element={<MoleculeInfo />} />
+    <Route path="neighbors/:molid?" element={<NeighborSearchHook />} />
   </Routes>
 );
diff --git 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() {
                            <Typography align='left'> <strong>InChI:</strong> {identifierData.InChI} </Typography>
                            <Typography align='left'> <strong>InChIKey:</strong> {identifierData.InChIKey} </Typography>
                            <Typography align='left'> <strong>Molecular Weight:</strong> {molData.molecular_weight.toFixed(2)} </Typography>
+                           <Box display="flex" justifyContent="center">
+                              <Button variant="contained" sx={{ m: 0.5 }} onClick={() => neighborPage(params.molid)}>View Molecule Neighbors</Button>
+                           </Box>
                            </CardContent>
                         </Card>}
             </Grid>
@@ -207,7 +212,7 @@ export default function MoleculeInfo() {
                         ))}
                      </Select>
                   </FormControl>
-                  <Box display="flex" justifyContent="center" alignItems="center">
+                     <Box display="flex" justifyContent="center" alignItems="center">
                      <NGLStage width="700px" height="600px" >
                         <Component path={"/api/conformers/export/"+ conformer + ".sdf"} />
                      </NGLStage>

diff --git 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: <Button onClick={ () => {newSearch(); } } >Search</Button>}}
         />
         </Box>