jsme works!

syedzayyan · Jun 5, 2024 · 91a7548 · 91a7548
1 parent acc1c56
commit 91a7548
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/app/misc_tools/page.tsx b/app/misc_tools/page.tsx
@@ -9,7 +9,7 @@ export default function JSMEPOPO() {
     return (
         <div className="container">
             <div className="content-wrapper" style={{ marginTop: "60px" }}>
-                <JSME height="500px" width="500px" onChange={handleChange} id = 'test'/>
+                <JSME height="500px" width="500px" onChange={handleChange} />
             </div>
         </div>
     )

diff --git a/app/tools/toc/page.tsx b/app/tools/toc/page.tsx
@@ -65,7 +65,7 @@ export default function TOC() {
                 <input ref={inputRef} className = "input" type="text" placeholder="Search By Substructure/SMILES" onChange={(e) => setSearchSmi(e.target.value)}/>
                 &nbsp;
                 <Dropdown buttonText="Draw the molecule">
-                    <JSME width="300px" height="300px" onChange={(smiles) => setSearchSmi(smiles)} />
+                    <JSME width="400px" height="300px" onChange={(smiles) => setSearchSmi(smiles)} />
                 </Dropdown> 
                 &nbsp;
                 <button className="button" onClick={() => searchSubst()}>Substructure Search molecule</button>               

diff --git a/components/tools/toolViz/JSMEComp.tsx b/components/tools/toolViz/JSMEComp.tsx
@@ -34,7 +34,11 @@ const Jsme = ({ height, width, smiles, options, onChange, src }) => {
       jsmeApplet.setCallBack("AfterStructureModified", handleChange);
       jsmeApplet.readGenericMolecularInput(smiles);
     } else {
-      const jsmeApplet = new globalThis.JSApplet.JSME(id, width, height);
+      const jsmeApplet = new globalThis.JSApplet.JSME(id, width, height, {
+        "options": "newlook",
+        "guicolor": "#FFFFFF",
+        "guiAtomColor": "#000000"
+      });
       jsmeApplet.setCallBack("AfterStructureModified", handleChange);
       jsmeApplet.readGenericMolecularInput(smiles);
     }
@@ -47,18 +51,20 @@ const Jsme = ({ height, width, smiles, options, onChange, src }) => {
   }, [onChange]);
 
   useEffect(() => {
-    if (jsmeIsLoaded) {
-      handleJsmeLoad();
-    } else {
-      if (!globalThis.jsmeOnLoad) {
-        setup(src);
+    if (myRef.current && myRef.current.children.length < 1) {
+      if (jsmeIsLoaded) {
+        handleJsmeLoad();
+      } else {
+        if (!globalThis.jsmeOnLoad) {
+          setup(src);
+        }
+        jsmeCallbacks[id] = handleJsmeLoad;
       }
-      jsmeCallbacks[id] = handleJsmeLoad;
+
+      return () => {
+        jsmeCallbacks[id] = undefined;
+      };
     }
-
-    return () => {
-      jsmeCallbacks[id] = undefined;
-    };
   }, []);
 
   useEffect(() => {