fix(results-page): fix rerun job functionality when job uses a smiles input

Author: OliverDudgeon

components/SMILESInput.tsx

@@ -146,7 +146,6 @@ export const SMILESInput = ({
             const ketcher = global.ketcher;
             try {
               const smi = await ketcher?.getSmiles();
-              console.log(smi);
               if (smi !== undefined) {
                 setSmiles(smi);
                 setMode("smiles");

components/executionsCards/JobCard/JobInputFields.tsx

@@ -1,9 +1,10 @@
 import type { Dispatch, ReactNode, SetStateAction } from "react";
+import { useState } from "react";
 
 import { Grid, Typography } from "@mui/material";
 
 import type { ProjectId } from "../../../hooks/projectHooks";
-import { FILE_PROTOCOL } from "../../../utils/app/urls";
+import { FILE_PROTOCOL, removeFileProtocolFromInputData } from "../../../utils/app/urls";
 import { FileSelector } from "../../FileSelector";
 import type { InputData } from "./JobModal";
 import { MultipleMoleculeInput } from "./MultipleMoleculeInput";
@@ -51,10 +52,12 @@ export interface JobInputFieldsProps {
 export const JobInputFields = ({
   projectId,
   inputs,
-  initialValues,
+  initialValues: initialInitialValues,
   inputsData,
   onChange,
 }: JobInputFieldsProps) => {
+  // capture initialValue in state as we need to mutate it
+  const [initialValues, setInitialValues] = useState(initialInitialValues);
   return (
     <>
       {Object.entries(inputs.properties).map(
@@ -67,7 +70,7 @@ export const JobInputFields = ({
                   multiple={!!multiple}
                   projectId={projectId}
                   targetType={type}
-                  value={inputsData[key] || initialValues?.[key]}
+                  value={inputsData[key] || removeFileProtocolFromInputData(initialValues?.[key])}
                   onSelect={(selection) => onChange({ ...inputsData, [key]: selection })}
                 />
               </InputSection>
@@ -84,7 +87,16 @@ export const JobInputFields = ({
                   mimeTypes={mimeTypes}
                   projectId={projectId}
                   protocol={FILE_PROTOCOL}
-                  reset={() => onChange({ ...inputsData, [key]: undefined })}
+                  reset={() => {
+                    // when using initialValues (from a previous instance) we have to clean this up
+                    // too if E.g. the file/smiles radio is changed
+                    const updatedInitialValue = { ...initialValues };
+                    delete updatedInitialValue[key];
+                    setInitialValues(updatedInitialValue);
+
+                    // Then reset current input data
+                    onChange({ ...inputsData, [key]: undefined });
+                  }}
                   value={inputsData[key] || initialValues?.[key]}
                   onFileSelect={(selection) => onChange({ ...inputsData, [key]: selection })}
                   onMoleculesChange={(newValue) =>

components/executionsCards/JobCard/MultipleMoleculeInput.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 
 import {
   Box,
@@ -12,8 +12,7 @@ import {
 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 { addFileProtocol, FILE_PROTOCOL, removeFileProtocol } from "../../../utils/app/urls";
 import type { FileSelection, SharedProps } from "../../FileSelector";
 import { FileSelector } from "../../FileSelector";
 import { SMILESInput } from "../../SMILESInput";
@@ -61,7 +60,17 @@ export const MultipleMoleculeInput = ({
   reset,
 }: MultipleMoleculeInputProps) => {
   const uuid = useRef(nanoid()).current;
-  const [inputMethod, setInputMethod] = useState<InputMethod>("smiles");
+  const initialValue = useRef(value).current;
+  const method = useMemo(() => {
+    if (typeof initialValue === "string") {
+      return initialValue.startsWith(FILE_PROTOCOL) ? "files" : "smiles";
+    }
+    return initialValue?.map((val) => val.startsWith(FILE_PROTOCOL)).every((v) => v)
+      ? "files"
+      : "smiles";
+  }, [initialValue]);
+
+  const [inputMethod, setInputMethod] = useState<InputMethod>(method);
 
   return (
     <>

utils/app/urls.ts

@@ -2,6 +2,8 @@
  * Manage the *file* Protocol used in file selectors
  */
 
+import type { InputData } from "../../components/executionsCards/JobCard/JobModal";
+
 export const FILE_PROTOCOL = "file://";
 
 /**
@@ -12,4 +14,12 @@ export type FILE_PROTOCOL = typeof FILE_PROTOCOL;
 export const removeFileProtocol = (file: string) =>
   file.startsWith(FILE_PROTOCOL) ? file.slice(FILE_PROTOCOL.length) : file;
 
+export const removeFileProtocolFromInputData = (file: InputData[string]) => {
+  if (Array.isArray(file)) {
+    return file.map(removeFileProtocol);
+  } else if (typeof file === "string") {
+    return removeFileProtocol(file);
+  }
+};
+
 export const addFileProtocol = (file: string) => `${FILE_PROTOCOL}${file}`;