@opencloning/ui 1.1.2 → 1.3.0

package/src/components/assembler/useAssembler.js

@@ -2,9 +2,31 @@ import { useCallback } from 'react'
 import { classNameToEndPointMap } from '@opencloning/utils/sourceFunctions'
 import useBackendRoute from '../../hooks/useBackendRoute'
 import useHttpClient from '../../hooks/useHttpClient'
-import { arrayCombinations } from '../eLabFTW/utils'
+import { arrayCombinations } from './assembler_utils'
 
 
+function formatLoadedFile(plasmid, id) {
+  return {
+    source: {
+      id,
+      type: 'UploadedFileSource',
+      input: [],
+      sequence_file_format: "genbank",
+      file_name: plasmid.file_name,
+      index_in_file: 0,
+    },
+    sequence: {
+      id,
+      type: 'TextFileSequence',
+      sequence_file_format: "genbank",
+      overhang_crick_3prime: 0,
+      overhang_watson_3prime: 0,
+      file_content: plasmid.genbankString,
+    },
+    plasmid: plasmid,
+  }
+}
+
 export const useAssembler = () => {
   const httpClient = useHttpClient();
   const backendRoute = useBackendRoute();
@@ -12,25 +34,35 @@ export const useAssembler = () => {
   const requestSources = useCallback(async (assemblerOutput) => {
     const processedOutput = []
     for (let pos = 0; pos < assemblerOutput.length; pos++) {
-        processedOutput.push([])
-        for (let source of assemblerOutput[pos]) {
+      processedOutput.push([])
+      for (let plasmid of assemblerOutput[pos]) {
+        try {
+          if (plasmid.type === 'loadedFile') {
+            processedOutput[pos].push(formatLoadedFile(plasmid, pos + 1))
+          } else {
+            const { source } = plasmid;
             const url = backendRoute(classNameToEndPointMap[source.type])
             const {data} = await httpClient.post(url, source)
             if (data.sources.length !== 1) {
-                console.error('Expected 1 source, got ' + data.sources.length)
+              console.error('Expected 1 source, got ' + data.sources.length)
             }
             const thisData = {
-                source: {...data.sources[0], id: pos + 1},
-                sequence: {...data.sequences[0], id: pos + 1},
+              source: {...data.sources[0], id: pos + 1},
+              sequence: {...data.sequences[0], id: pos + 1},
+              plasmid: plasmid,
             }
             processedOutput[pos].push(thisData)
+          }} catch (e) {
+          e.plasmid = plasmid;
+          throw e;
         }
+      }
     }
     return processedOutput
-  }, [])
+  }, [ httpClient, backendRoute ])
 
 
-  const requestAssemblies = useCallback(async (requestedSources) => {
+  const requestAssemblies = useCallback(async (requestedSources, enzyme='BsaI') => {
 
     const assemblies = arrayCombinations(requestedSources);
     const output = []
@@ -43,28 +75,33 @@ export const useAssembler = () => {
       }
       const requestData = {
         source: {
-            type: 'RestrictionAndLigationSource',
-            restriction_enzymes: ['BsaI'],
-            id: assembly.length + 1,
+          type: 'RestrictionAndLigationSource',
+          restriction_enzymes: [enzyme],
+          id: assembly.length + 1,
         },
         sequences: assembly.map((p) => p.sequence),
       }
-      const {data} = await httpClient.post(url, requestData, config)
-      const thisSource = data.sources[0]
-      const thisSequence = data.sequences[0]
-      thisSource.id = assembly.length + 1
-      thisSequence.id = assembly.length + 1
+      try {
+        const {data} = await httpClient.post(url, requestData, config)
+        const thisSource = data.sources[0]
+        const thisSequence = data.sequences[0]
+        thisSource.id = assembly.length + 1
+        thisSequence.id = assembly.length + 1
 
 
-      const cloningStrategy = {
-        sources: [thisSource, ...assembly.map((p) => p.source)],
-        sequences: [thisSequence, ...assembly.map((p) => p.sequence)],
-        primers: [],
+        const cloningStrategy = {
+          sources: [thisSource, ...assembly.map((p) => p.source)],
+          sequences: [thisSequence, ...assembly.map((p) => p.sequence)],
+          primers: [],
+        }
+        output.push(cloningStrategy)
+      } catch (e) {
+        e.assembly = assembly;
+        throw e;
       }
-      output.push(cloningStrategy)
     }
     return output;
-  }, [])
+  }, [ httpClient, backendRoute ])
 
   return { requestSources, requestAssemblies }
 }

package/src/components/assembler/useCombinatorialAssembly.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import { arrayCombinations, categoryFilter } from './assembler_utils'
+
+function isAssemblyComplete(assembly, categories) {
+  const lastPosition = assembly.length - 1
+  if (lastPosition === -1) {
+    return false
+  }
+  const lastCategory = categories.find((category) => category.id === assembly[lastPosition].category)
+  return lastCategory?.right_overhang === categories[0].left_overhang
+}
+
+
+export default function useCombinatorialAssembly( { onValueChange, categories, plasmids }) {
+
+  const [assembly, setAssembly] = React.useState([])
+
+  const setCategory = React.useCallback((category, index) => {
+    onValueChange()
+    if (category === '') {
+      setAssembly(prev => prev.slice(0, index))
+    } else {
+      setAssembly(prev => [...prev.slice(0, index), { category, plasmidIds: [] }])
+    }
+  }, [onValueChange])
+
+  const setId = React.useCallback((plasmidIds, index) => {
+    onValueChange()
+    // Handle case where user clears all selections (empty array)
+    const value = (!plasmidIds || plasmidIds.length === 0) ? [] : plasmidIds
+    setAssembly( prev => prev.map((item, i) => i === index ? { ...item, plasmidIds: value } : item))
+  }, [onValueChange])
+
+  // If the next category of the assembly can only be one, add it to the assembly
+  React.useEffect(() => {
+    const newAssembly = [...assembly]
+    while (true) {
+      if (isAssemblyComplete(newAssembly, categories)) {
+        break
+      }
+      let lastPosition = newAssembly.length - 1
+      const previousCategoryId = lastPosition === -1 ? null : newAssembly[lastPosition].category
+      let nextCategories = categories.filter((category) => categoryFilter(category, categories, previousCategoryId))
+      if (nextCategories.length !== 1) {
+        break
+      } else if (nextCategories.length === 1) {
+        newAssembly.push({ category: nextCategories[0].id, plasmidIds: [] })
+      }
+    }
+    if (newAssembly.length !== assembly.length) {
+      setAssembly(newAssembly)
+    }
+  }, [assembly, categories])
+
+  // If plasmids are removed, remove them from the assembly
+  React.useEffect(() => {
+    onValueChange()
+    setAssembly(prev => {
+      const existingPlasmidIds = plasmids.map((plasmid) => plasmid.id)
+      return prev.map((item) => ({ ...item, plasmidIds: item.plasmidIds.filter((id) => existingPlasmidIds.includes(id)) }))
+    }
+    )
+  }, [plasmids, onValueChange])
+
+  // If categories are changed, clear the assembly
+  React.useEffect(() => {
+    setAssembly([])
+  }, [categories])
+
+  const expandedAssemblies = React.useMemo(() => arrayCombinations(assembly.map(({ plasmidIds }) => plasmidIds)), [assembly])
+  const assemblyComplete = isAssemblyComplete(assembly, categories);
+  const canBeSubmitted = assemblyComplete && assembly.every((item) => item.plasmidIds.length > 0)
+  const currentCategories = React.useMemo(() => assembly.map((item) => item.category), [assembly])
+
+  return React.useMemo(() => ({ assembly, setCategory, setId, expandedAssemblies, assemblyComplete, canBeSubmitted, currentCategories }), [assembly, setCategory, setId, expandedAssemblies, assemblyComplete, canBeSubmitted, currentCategories])
+}

package/src/components/assembler/usePlasmidsLogic.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { anyToJson } from '@teselagen/bio-parsers';
+import { partsToEdgesGraph } from '@opencloning/ui/components/assembler';
+import { assignSequenceToSyntaxPart } from './assembler_utils';
+import { aliasedEnzymesByName } from '@teselagen/sequence-utils';
+
+/**
+ * Custom hook that manages plasmids state and logic
+ * @param {Object} params - Dependencies from FormDataContext
+ * @param {Array} params.parts - Array of parts
+ * @param {string} params.assemblyEnzyme - Assembly enzyme name
+ * @param {Object} params.overhangNames - Mapping of overhangs to names
+ * @returns {Object} - { linkedPlasmids, setLinkedPlasmids, uploadPlasmids }
+ */
+export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
+  const [linkedPlasmids, setLinkedPlasmidsState] = React.useState([]);
+
+  const graphForPlasmids = React.useMemo(() => partsToEdgesGraph(parts), [parts]);
+  const partDictionary = React.useMemo(() => parts.reduce((acc, part) => {
+    acc[`${part.left_overhang}-${part.right_overhang}`] = part;
+    return acc;
+  }, {}), [parts]);
+
+  const assignPlasmids = React.useCallback((plasmids) => plasmids.map(plasmid => {
+    const enzymes = [aliasedEnzymesByName[assemblyEnzyme.toLowerCase()]];
+    const correspondingParts = assignSequenceToSyntaxPart(plasmid, enzymes, graphForPlasmids);
+    const correspondingPartsStr = correspondingParts.map(part => `${part.left_overhang}-${part.right_overhang}`);
+    const correspondingPartsNames = correspondingParts.map(part => {
+      let namePart = '';
+      const leftName = overhangNames[part.left_overhang];
+      const rightName = overhangNames[part.right_overhang];
+      if (leftName || rightName) {
+        namePart = `${leftName || part.left_overhang}-${rightName || part.right_overhang}`;
+      }
+      return namePart;
+    });
+    return {
+      ...plasmid,
+      appData: {
+        ...plasmid.appData,
+        correspondingParts: correspondingPartsStr,
+        partInfo: correspondingPartsStr.map(partStr => partDictionary[partStr]),
+        correspondingPartsNames: correspondingPartsNames,
+        longestFeature: correspondingParts.map(part => part.longestFeature)
+      }
+    };
+  }), [graphForPlasmids, partDictionary, assemblyEnzyme, overhangNames]);
+
+  // Wrapper for setLinkedPlasmids that automatically assigns plasmids if enzyme is available
+  const setLinkedPlasmids = React.useCallback((plasmids) => {
+    if (assemblyEnzyme && Array.isArray(plasmids) && plasmids.length > 0) {
+      setLinkedPlasmidsState(assignPlasmids(plasmids));
+    } else {
+      setLinkedPlasmidsState(plasmids);
+    }
+  }, [assemblyEnzyme, assignPlasmids]);
+
+  // Update existing plasmids when enzyme or assignment logic changes
+  React.useEffect(() => {
+    if (assemblyEnzyme) {
+      setLinkedPlasmidsState((prevLinkedPlasmids) => {
+        if (prevLinkedPlasmids.length > 0) {
+          return assignPlasmids(prevLinkedPlasmids);
+        }
+        return prevLinkedPlasmids;
+      });
+    }
+  }, [assignPlasmids, assemblyEnzyme]); // Note: intentionally not including linkedPlasmids to avoid infinite loop
+
+  const uploadPlasmids = React.useCallback(async (files) => {
+    const plasmids = await Promise.all(files.map(async (file) => {
+      const data = await anyToJson(file);
+      const sequenceData = data[0].parsedSequence;
+      // Force circular
+      sequenceData.circular = true;
+      return {...sequenceData, appData: { fileName: file.name, correspondingParts: [], partInfo: [], correspondingPartsNames: [] } };
+    }));
+    setLinkedPlasmids(plasmids);
+  }, [setLinkedPlasmids]);
+
+  return { linkedPlasmids, setLinkedPlasmids, uploadPlasmids };
+}

package/src/components/eLabFTW/utils.js

@@ -28,12 +28,3 @@ export const getFileFromELabFTW = async (itemId, fileInfo) => {
     throw new Error(`${error2String(e)}`);
   }
 };
-
-export function arrayCombinations(sets) {
-  if (sets.length === 1) {
-    return sets[0].map((el) => [el]);
-  } else
-    return sets[0].flatMap((val) =>
-      arrayCombinations(sets.slice(1)).map((c) => [val].concat(c))
-    );
-};

package/src/components/index.js

@@ -1,2 +1,4 @@
 export { default as OpenCloning } from './OpenCloning';
 export { default as MainAppBar } from './navigation/MainAppBar';
+export { default as useUrlParamsLoader } from '../hooks/useUrlParamsLoader';
+export { default as useInitializeApp } from '../hooks/useInitializeApp';

package/src/components/navigation/SelectTemplateDialog.jsx

@@ -11,7 +11,6 @@ function SelectTemplateDialog({ onClose, open }) {
   const baseUrl = 'https://assets.opencloning.org/OpenCloning-submission';
   const httpClient = useHttpClient();
 
-  // const baseUrl = '';
   React.useEffect(() => {
     const fetchData = async () => {
       try {

package/src/components/primers/DownloadPrimersButton.jsx

@@ -85,7 +85,6 @@ function DownloadPrimersButton({ primers }) {
   return (
     <>
       <Button
-        variant="contained"
         onClick={() => setDialogOpen(true)}
       >
         Download Primers

package/src/components/primers/PrimerList.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { Button } from '@mui/material';
+import { Button, ButtonGroup } from '@mui/material';
 import PrimerForm from './PrimerForm';
 import PrimerTableRow from './PrimerTableRow';
 import './PrimerList.css';
@@ -99,8 +99,8 @@ function PrimerList() {
           />
         )) || (
             <div className="primer-add-container">
+              <ButtonGroup>
               <Button
-                variant="contained"
                 onClick={switchAddingPrimer}
               >
                 Add Primer
@@ -109,12 +109,13 @@ function PrimerList() {
               <DownloadPrimersButton primers={primers} />
               {database && (
                 <Button
-                  variant="contained"
                   onClick={() => setImportingPrimer(true)}
                 >
                   {`Import from ${database.name}`}
                 </Button>
+                
               )}
+              </ButtonGroup>
             </div>
           )}
       </div>

package/src/components/primers/import_primers/ImportPrimersButton.jsx

@@ -52,7 +52,6 @@ function ImportPrimersButton({ addPrimer }) {
       <Tooltip arrow title={<span style={{ fontSize: '1.4em' }}>Upload a .csv or .tsv file with headers &apos;name&apos; and &apos;sequence&apos;</span>}>
         <Button
           onClick={handleUploadClick}
-          variant="contained"
         >
           Import from file
         </Button>