fix(sketcher): fix some sketcher issues by forcing only one ketcher instance to be in use at once

Author: OliverDudgeon

components/SMILESInput.tsx

@@ -6,6 +6,7 @@ import { captureException } from "@sentry/nextjs";
 import dynamic from "next/dynamic";
 
 import { useEnqueueError } from "../hooks/useEnqueueStackError";
+import { useIsASketcherOpen } from "../state/sketcherState";
 import { getErrorMessage } from "../utils/next/orvalError";
 import { CenterLoader } from "./CenterLoader";
 import type { SketcherProps } from "./Sketcher";
@@ -30,7 +31,15 @@ export interface SMILESInputProps {
    * called when the delete button is clicked
    * @returns nothing
    */
-  onDelete: () => void;
+  onDelete?: () => void;
+  /**
+   * Called when the sketcher opens
+   */
+  onOpen?: () => void;
+  /**
+   * Called when the sketcher closes
+   */
+  onClose?: () => void;
   /**
    * whether the sketcher is displayed by default or not
    */
@@ -43,6 +52,10 @@ export interface SMILESInputProps {
    * Height of sketcher canvas
    */
   height?: string | number;
+  /**
+   * Whether the edit button to enable the sketcher should be disabled
+   */
+  sketcherDisabled: boolean;
 }
 
 /**
@@ -55,14 +68,19 @@ export const SMILESInput = ({
   initialMode = "smiles",
   width = "700px",
   height = "500px",
+  sketcherDisabled,
   onSave,
   onDelete,
+  onOpen,
+  onClose,
 }: SMILESInputProps) => {
   const { enqueueError } = useEnqueueError();
 
   const [smiles, setSmiles] = useState(value);
   const [mode, setMode] = useState(initialMode);
 
+  const [, setIsASketcherOpen] = useIsASketcherOpen();
+
   // Synchronise the controlled prop to the uncontrolled state
   useEffect(() => {
     setSmiles(value);
@@ -71,29 +89,56 @@ export const SMILESInput = ({
   if (mode === "smiles") {
     return (
       <>
-        <IconButton sx={{ mr: 1 }} onClick={onDelete}>
-          <DeleteForeverIcon />
-        </IconButton>
-        <TextField label="SMILES" value={smiles} onChange={(event) => onSave(event.target.value)} />
-        <Tooltip title="Use a molecule sketcher">
-          <IconButton sx={{ ml: 1 }} onClick={() => setMode("sketcher")}>
-            <EditIcon />
+        <Tooltip title="Delete this molecule">
+          <IconButton sx={{ mr: 1 }} onClick={onDelete}>
+            <DeleteForeverIcon />
           </IconButton>
         </Tooltip>
+        <TextField label="SMILES" value={smiles} onChange={(event) => onSave(event.target.value)} />
+        <Tooltip
+          title={
+            sketcherDisabled ? "Only one sketcher may be used at once" : "Use a molecule sketcher"
+          }
+        >
+          <span>
+            <IconButton
+              disabled={sketcherDisabled}
+              sx={{ ml: 1 }}
+              onClick={() => {
+                setMode("sketcher");
+                onOpen && onOpen();
+              }}
+            >
+              <EditIcon />
+            </IconButton>
+          </span>
+        </Tooltip>
       </>
     );
   }
 
   return (
     <Box display="flex" flexDirection="column" gap={1} width={width}>
       <Box height={height}>
-        <Sketcher smiles={smiles} />
+        <Sketcher smiles={smiles} onUnmount={() => setIsASketcherOpen(false)} />
       </Box>
       <ButtonGroup size="small" sx={{ alignSelf: "end" }} variant="outlined">
-        <Button color="warning" onClick={onDelete}>
+        <Button
+          color="warning"
+          onClick={() => {
+            onDelete && onDelete();
+            onClose && onClose();
+          }}
+        >
           Delete
         </Button>
-        <Button color="info" onClick={() => setMode("smiles")}>
+        <Button
+          color="info"
+          onClick={() => {
+            setMode("smiles");
+            onClose && onClose();
+          }}
+        >
           Cancel
         </Button>
         <Button
@@ -106,6 +151,7 @@ export const SMILESInput = ({
                 setMode("smiles");
                 onSave(smi);
                 global.ketcher = undefined;
+                onClose && onClose();
               } else {
                 enqueueError("Smiles not obtained");
               }

components/Sketcher.tsx

@@ -10,6 +10,7 @@ import "ketcher-react/dist/index.css";
 
 export interface SketcherProps {
   smiles: string;
+  onUnmount?: () => void;
 }
 
 export const allButtons = {
@@ -74,14 +75,22 @@ export const allButtons = {
   "enhanced-stereo": false,
 };
 
-export const Sketcher = ({ smiles }: SketcherProps) => {
+export const Sketcher = ({ smiles, onUnmount }: 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();
+      global.ketcher = undefined;
+    };
+  });
+
   return (
     <Editor
       buttons={Object.fromEntries(

components/executionsCards/JobCard/MultipleMoleculeInput.tsx

@@ -9,7 +9,9 @@ import {
   Radio,
   RadioGroup,
 } from "@mui/material";
+import { nanoid } from "nanoid";
 
+import { useIsASketcherOpen } from "../../../state/sketcherState";
 import type { FILE_PROTOCOL } from "../../../utils/app/urls";
 import { addFileProtocol, removeFileProtocol } from "../../../utils/app/urls";
 import type { FileSelection, SharedProps } from "../../FileSelector";
@@ -58,16 +60,16 @@ export const MultipleMoleculeInput = ({
   onFileSelect,
   reset,
 }: MultipleMoleculeInputProps) => {
-  const id = useRef(Math.floor(Math.random() * 1000)).current;
+  const uuid = useRef(nanoid()).current;
   const [inputMethod, setInputMethod] = useState<InputMethod>("smiles");
 
   return (
     <>
       <FormControl>
-        <FormLabel id={`input-method-${id}`}>Method</FormLabel>
+        <FormLabel id={`input-method-${uuid}`}>Method</FormLabel>
         <RadioGroup
           row
-          aria-labelledby={`input-method-${id}`}
+          aria-labelledby={`input-method-${uuid}`}
           value={inputMethod}
           onChange={(_event, value) => {
             reset();
@@ -109,6 +111,8 @@ export const SketcherInputs = ({ value, onMoleculesChange }: SketcherInputsProps
     value = value.join("\n");
   }
 
+  const [sketcherDisabled, setIsASketcherOpen] = useIsASketcherOpen();
+
   // Then split it into an array
   const valueArray = value.split("\n");
 
@@ -117,16 +121,20 @@ export const SketcherInputs = ({ value, onMoleculesChange }: SketcherInputsProps
       {valueArray.map((smiles, index) => (
         <Box key={index} mb={2}>
           <SMILESInput
+            sketcherDisabled={sketcherDisabled}
             value={smiles}
             onDelete={() => {
               const newValue = [...valueArray];
               newValue.splice(index, 1);
               onMoleculesChange(newValue);
+              setIsASketcherOpen(false);
             }}
+            onOpen={() => setIsASketcherOpen(true)}
             onSave={(smi) => {
               const newValue = [...valueArray];
               newValue[index] = smi;
               onMoleculesChange(newValue);
+              setIsASketcherOpen(false);
             }}
           />
         </Box>

components/instances/JobDetails/JobInputSection/JobInputSection.tsx

@@ -48,12 +48,10 @@ export const JobInputSection = ({ instance }: JobInputSectionProps) => {
       {inputs.map((input) => {
         const isFile = input.value.map((val) => val.startsWith(FILE_PROTOCOL)).some((v) => v);
         const moleculesType = input.type === "molecules" || input.type === "molecule";
-
         let value = input.value;
         if (moleculesType && isFile) {
           value = value.map(removeFileProtocol);
         }
-
         return (
           <ListItem key={input.name} sx={{ alignItems: "flex-start" }}>
             <ListItemAvatar>

package.json

@@ -81,6 +81,7 @@
     "ketcher-standalone": "2.7.2",
     "lodash-es": "4.17.21",
     "material-ui-popup-state": "4.1.0",
+    "nanoid": "^4.0.1",
     "next": "13.1.6",
     "next-http-proxy-middleware": "1.2.5",
     "nextjs-routes": "1.0.8",