Feature/smiles drawer update

ontology-manager-client/package.json

@@ -40,6 +40,7 @@
         "reflect-metadata": "^0.2.1",
         "rxjs": "^7.8.1",
         "sass": "^1.70.0",
+        "smiles-drawer": "2.0.3",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4",
         "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"

ontology-manager-client/src/features/modules/visualization/neighborhood-explorer/neighborhood-explorer.component.tsx

@@ -594,8 +594,7 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
                                             <Badge value={element.type} style={{ background: darkenHexColor(element.color, -140), border: `solid 2px ${element.color}`, height: 27, color: 'black', marginRight: 3, marginBottom: 3 }}/>
                                             </div>
                                             <Divider></Divider>
-                                            <MolecularDrawComponent element={element}></MolecularDrawComponent>
-                                            <canvas id="mol_structure" width="500" height="500" style={{display: 'none'}}></canvas>
+                                            <MolecularDrawComponent smiles={element?.properties.find((x:any) => x.name === "SMILES")?.value} xkey={0}></MolecularDrawComponent>
                                             <DataView value={element.properties} listTemplate={nodePropertiesTemplate} />
                                             <DataView value={element.synonyms} listTemplate={nodeSynonymsTemplate}/>
                                             <DataView value={element.references} listTemplate={nodeReferencesTemplate} />

ontology-manager-client/src/features/shared/molecular-draw/molecular-draw.component.tsx

@@ -1,35 +1,42 @@
 
 import React, { useContext, useEffect, useState } from 'react';
 const OpenChemLib = require("openchemlib/full");
+const SmilesDrawerLib = require('smiles-drawer');
+
+
 
 interface MolecularDrawComponentProps {
-    element:any
+    smiles: string,
+    xkey: number,
 }
 
 
 
-const MolecularDrawComponent: React.FC<MolecularDrawComponentProps> = ({element}) => {
-
+const MolecularDrawComponent: React.FC<MolecularDrawComponentProps> = ({smiles, xkey}) => {    
     const [hidden, setHidden] = useState<boolean>(false);
-
-    useEffect(() => {
-        const smiles = element.properties.find((x:any) => x.name === "SMILES")
 
-        if (smiles){
-            setHidden(false);
-            const canvas = document.getElementById('molecular-draw') as HTMLCanvasElement;
-            const molecule = OpenChemLib.Molecule.fromSmiles(smiles.value);
+    useEffect(() => {
+        const svg = document.getElementById('svg-canvas-' + xkey.toString());
 
-            OpenChemLib.StructureView.drawMolecule(canvas, molecule);
-            // renderer.draw(molecule, 'molecular-draw');
+        if (smiles && svg){
+            setHidden(false);
+            let smilesDrawer = new SmilesDrawerLib.SvgDrawer({compactDrawing: false});
+
+            SmilesDrawerLib.parse(smiles, (tree:any) => {
+                smilesDrawer.draw(tree, svg, "light", false);
+              }, (error:any) => {
+                console.error(error);
+              });
         } else {
             setHidden(true);
         }
-    }, [element])
+    }, [smiles])
 
 
     return (
-        <canvas id="molecular-draw" hidden={hidden}></canvas>
+        <div hidden={hidden}>
+        <svg id={"svg-canvas-" + xkey.toString()} ></svg>
+        </div>
     );
 };
 

ontology-manager-client/src/layout/app.component.tsx

@@ -5,6 +5,7 @@ import './app.component.scss';
 import Layout from './layout.component';
 import { CoOcurrencesSummaryPageComponent, CompoundSearchPageComponent, DataLoadPageComponent, DocumentationPageComponent, EntityTypeFormPageComponent, HomePageComponent, LinkTypeFormPageComponent, MetadataOverviewPageComponent, NeighborhoodExplorerPageComponent } from '../pages';
 import GeneralSearchPageComponent from '../pages/search/general-search/general-search-page.component';
+import TestPageComponent from '../pages/test/test-page.component';
 
 function App() {
     return (
@@ -28,6 +29,8 @@ function App() {
                     <Route path="visualization/co-occurrence-search/" element={<CoOcurrencesSummaryPageComponent/>}/>
 
                     <Route path="documentation" element={<DocumentationPageComponent/>}/>
+                    {/* <Route path="test" element={<TestPageComponent/>}/> */}
+
                 </Route>
             </Routes>
         </div>

ontology-manager-client/src/layout/header.component.tsx

@@ -113,7 +113,7 @@ const Header: React.FC = () => {
         //     label: 'Contact',
         //     icon: 'pi pi-envelope',
         //     command: () => {
-        //         navigate('/contact');
+        //         navigate('/test');
         //     }
         // }
     ];

ontology-manager-client/src/pages/search/compound-search/compound-search-page.component.tsx

@@ -24,6 +24,7 @@ import { INeighborhoodExplorerStore } from "../../../stores/neighborhood-explore
 import { ITutorialStore, STORES } from "../../../stores";
 import { useNavigate } from "react-router-dom";
 import CompoundSearchPageTourComponent from "./compound-search-page-tour.component";
+import MolecularDrawComponent from "../../../features/shared/molecular-draw/molecular-draw.component";
 const OpenChemLib = require("openchemlib/full");
 
 
@@ -238,10 +239,8 @@ export const CompoundSearchPageComponent: React.FC = () => {
     }
 
 
-    const structureDrawTemplate = (compound:any) => {
-        return <>
-            <MolecularDrawComponent element={compound}/>
-        </>
+    const structureDrawTemplate = (compound:any, options:any) => {
+        return <MolecularDrawComponent smiles={compound.smiles} xkey={options.rowIndex}/>
     }
 
     return <div className="page-container-narrow">
@@ -476,35 +475,4 @@ export const CompoundSearchPageComponent: React.FC = () => {
     </div>;
 };
 
-
-interface MolecularDrawComponentProps {
-    element:any
-}
-
-const MolecularDrawComponent: React.FC<MolecularDrawComponentProps> = ({element}) => {
-
-    const [hidden, setHidden] = useState<boolean>(false);
-
-    useEffect(() => {
-        const smiles = element.smiles;
-
-        if (smiles){
-            setHidden(false);
-            const canvas = document.getElementById(`molecular-draw-${element.id}`) as HTMLCanvasElement;
-            const molecule = OpenChemLib.Molecule.fromSmiles(smiles);
-
-            OpenChemLib.StructureView.drawMolecule(canvas, molecule);
-            // renderer.draw(molecule, 'molecular-draw');
-        } else {
-            setHidden(true);
-        }
-    }, [element])
-
-
-    return (
-        <canvas id={`molecular-draw-${element.id}`} hidden={hidden}></canvas>
-    );
-};
-
-
 export default CompoundSearchPageComponent;

ontology-manager-client/src/pages/test/test-page.component.tsx

@@ -0,0 +1,68 @@
+import { Button } from "primereact/button";
+import { useEffect, useRef } from "react";
+
+// @ts-ignore: TS7016: Could not find a declaration file for module 'smiles-drawer'.
+import SmilesDrawer from "smiles-drawer";
+const React = require('react');
+
+const TestPageComponent: React.FC = () => {
+
+    const canvasRef = useRef(null);
+
+    const draw = () => {
+
+            const canvas = document.getElementById('molecular-draw') as HTMLCanvasElement;
+
+            let drawer = new SmilesDrawer.Drawer({
+                width: 400,
+                height: 400
+              });
+
+
+            console.log("haaaaaaaaaaa");
+            SmilesDrawer.parse('CC(=O)Oc1ccccc1C(=O)O', function (tree:any) {
+                console.log("hereeeeeeeee");
+                drawer.draw(tree, 'test-canvas', "light", false);
+            }, (error:any) => {
+                console.error(error);
+              });
+
+
+            // OpenChemLib.StructureView.drawMolecule(canvas, molecule);
+            // renderer.draw(molecule, 'molecular-draw');
+
+    };
+
+
+
+    return <>
+
+    <canvas id="test-canvas" width={"400px"} height={"400px"} ref={canvasRef}></canvas>
+    This is the test page
+    <Button onClick={draw}></Button>
+    <SmileDrawerContainer></SmileDrawerContainer>
+
+    </>;
+};
+
+
+const SmileDrawerContainer = () => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    let drawer = new SmilesDrawer.Drawer({
+      width: 400,
+      height: 400
+    });
+
+    SmilesDrawer.parse('CC(=O)Oc1ccccc1C(=O)O', function (tree:any) {
+      drawer.draw(tree, canvasRef.current, "light", false);
+    });
+
+    return (
+      <canvas id="canvas" ref={canvasRef} width={"400px"} height={"400px"} />
+    );
+  };
+
+export default TestPageComponent;
+
+