fix(sketcher): fix some sketcher issues caused by multiple sketchers being open

for this the delete button that is part of the button group was removed

Author: OliverDudgeon

components/SMILESInput.tsx

@@ -119,23 +119,15 @@ export const SMILESInput = ({
   return (
     <Box display="flex" flexDirection="column" gap={1} width={width}>
       <Box height={height}>
-        <Sketcher smiles={smiles} onUnmount={() => setIsASketcherOpen(false)} />
+        <Sketcher smiles={smiles} />
       </Box>
       <ButtonGroup size="small" sx={{ alignSelf: "end" }} variant="outlined">
-        <Button
-          color="warning"
-          onClick={() => {
-            onDelete && onDelete();
-            onClose && onClose();
-          }}
-        >
-          Delete
-        </Button>
         <Button
           color="info"
           onClick={() => {
             setMode("smiles");
             onClose && onClose();
+            setIsASketcherOpen(false);
           }}
         >
           Cancel
@@ -150,6 +142,7 @@ export const SMILESInput = ({
                 setMode("smiles");
                 onSave(smi);
                 onClose && onClose();
+                setIsASketcherOpen(false);
               } else {
                 enqueueError("Smiles not obtained");
               }

components/Sketcher.tsx

@@ -11,7 +11,6 @@ import "ketcher-react/dist/index.css";
 
 export interface SketcherProps {
   smiles: string;
-  onUnmount?: () => void;
 }
 
 export const allButtons = {
@@ -76,21 +75,14 @@ export const allButtons = {
   "enhanced-stereo": false,
 };
 
-export const Sketcher = ({ smiles, onUnmount }: SketcherProps) => {
+export const Sketcher = ({ smiles }: SketcherProps) => {
   const { enqueueError } = useEnqueueError();
 
   // Synchronise the react state to the component
   useEffect(() => {
     global.ketcher?.setMolecule(smiles);
   }, [smiles]);
 
-  useEffect(() => {
-    // do nothing on mount
-    return () => {
-      onUnmount && onUnmount();
-    };
-  });
-
   return (
     <Editor
       buttons={Object.fromEntries(