@opencloning/ui 1.2.0 → 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>

package/src/version.js

@@ -1,2 +1,2 @@
 // Version placeholder - replaced at publish time via prepack script
-export const version = "1.2.0";
+export const version = "1.3.0";

package/vitest.config.js

@@ -1,12 +1,10 @@
 import { defineConfig } from 'vitest/config';
 import { resolve } from 'path';
+import { testConfig } from '../../vitest.common.config';
 
 export default defineConfig({
   test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: '../../tests/setup.js',
-    include: ['src/**/*.{test,spec}.{js,jsx}'],
+    ...testConfig,
   },
   resolve: {
     alias: {

package/src/components/DraggableDialogPaper.jsx

@@ -1,16 +0,0 @@
-import { Paper } from '@mui/material';
-import React from 'react';
-import Draggable from 'react-draggable';
-
-function DraggableDialogPaper(props) {
-  return (
-    <Draggable
-      handle="#draggable-dialog-title"
-      cancel={'[class*="MuiDialogContent-root"]'}
-    >
-      <Paper {...props} />
-    </Draggable>
-  );
-}
-
-export default DraggableDialogPaper;

package/src/components/assembler/AssemblePartWidget.jsx

@@ -1,252 +0,0 @@
-import React from 'react'
-import { TextField, FormControl, InputLabel, Select, MenuItem, Box, Grid, Paper, Typography, Table, TableContainer, TableHead, TableBody, TableRow, TableCell, Button } from '@mui/material'
-import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'
-import AssemblerPart from './AssemblerPart'
-
-/* eslint-disable camelcase */
-const defaultData = {
-  header: 'Header',
-  body: 'helper text / body text',
-  glyph: 'cds-stop',
-  left_overhang: 'CATG',
-  right_overhang: 'TATG',
-  left_inside: 'AAAATA',
-  right_inside: 'AATG',
-  left_codon_start: 2,
-  right_codon_start: 1,
-  color: 'greenyellow',
-}
-/* eslint-enable camelcase */
-
-const glyphOptions = [
-  'assembly-scar',
-  'cds',
-  'cds-stop',
-  'chromosomal-locus',
-  'engineered-region',
-  'five-prime-sticky-restriction-site',
-  'origin-of-replication',
-  'primer-binding-site',
-  'promoter',
-  'ribosome-entry-site',
-  'specific-recombination-site',
-  'terminator',
-  'three-prime-sticky-restriction-site',
-]
-
-function AssemblePartWidget() {
-  const [formData, setFormData] = React.useState(defaultData)
-
-  const handleChange = (field) => (event) => {
-    const value = event.target.value
-    setFormData((prev) => ({
-      ...prev,
-      [field]: field === 'left_codon_start' || field === 'right_codon_start' 
-        ? (value === '' ? '' : parseInt(value, 10) || 0)
-        : value,
-    }))
-  }
-
-  const handleCopyRow = async () => {
-    const keys = Object.keys(formData)
-    const headers = keys.join('\t')
-    const values = keys.map((key) => String(formData[key])).join('\t')
-    const tsvData = `${headers}\n${values}`
-    
-    try {
-      if (window.navigator && window.navigator.clipboard) {
-        await window.navigator.clipboard.writeText(tsvData)
-      }
-    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error('Failed to copy to clipboard:', err)
-    }
-  }
-
-  return (
-    <Box sx={{ 
-      p: 1.5, 
-      maxHeight: '100vh',
-      overflowY: 'auto',
-      overflowX: 'hidden'
-    }}>
-      <Grid container spacing={2}>
-        <Grid item xs={12} md={6}>
-          <Paper sx={{ p: 1.5 }}>
-            <Typography variant="h6" gutterBottom sx={{ mb: 1.5 }}>
-              Part Configuration
-            </Typography>
-            <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-              <TextField
-                size="small"
-                label="Header"
-                value={formData.header}
-                onChange={handleChange('header')}
-                fullWidth
-              />
-              <TextField
-                size="small"
-                label="Body"
-                value={formData.body}
-                onChange={handleChange('body')}
-                fullWidth
-                multiline
-                rows={2}
-              />
-              <FormControl fullWidth size="small">
-                <InputLabel id="glyph-select-label">Glyph</InputLabel>
-                <Select
-                  labelId="glyph-select-label"
-                  value={formData.glyph}
-                  label="Glyph"
-                  onChange={handleChange('glyph')}
-                >
-                  {glyphOptions.map((option) => (
-                    <MenuItem key={option} value={option}>
-                      {option}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-              <TextField
-                size="small"
-                label="Color"
-                value={formData.color}
-                onChange={handleChange('color')}
-                fullWidth
-                helperText="CSS color name or hex code"
-              />
-              <Typography variant="subtitle2" sx={{ mt: 0.5, mb: 0.5 }}>
-                Left Side
-              </Typography>
-              <TextField
-                size="small"
-                label="Left Overhang"
-                value={formData.left_overhang}
-                onChange={handleChange('left_overhang')}
-                error={formData.left_overhang.length !== 4}
-                helperText={formData.left_overhang.length !== 4 ? 'Must be 4 bases' : ''}
-                fullWidth
-              />
-              <TextField
-                size="small"
-                label="Left Inside"
-                value={formData.left_inside}
-                onChange={handleChange('left_inside')}
-                fullWidth
-              />
-              <TextField
-                size="small"
-                label="Left Codon Start"
-                type="number"
-                value={formData.left_codon_start}
-                onChange={handleChange('left_codon_start')}
-                fullWidth
-                inputProps={{ min: 0 }}
-                helperText="If the left side is translated, where the codon starts"
-              />
-              <Typography variant="subtitle2" sx={{ mt: 0.5, mb: 0.5 }}>
-                Right Side
-              </Typography>
-              <TextField
-                size="small"
-                label="Right Overhang"
-                value={formData.right_overhang}
-                onChange={handleChange('right_overhang')}
-                fullWidth
-              />
-              <TextField
-                size="small"
-                label="Right Inside"
-                value={formData.right_inside}
-                onChange={handleChange('right_inside')}
-                fullWidth
-              />
-              <TextField
-                size="small"
-                label="Right Codon Start"
-                type="number"
-                value={formData.right_codon_start}
-                onChange={handleChange('right_codon_start')}
-                fullWidth
-                inputProps={{ min: 0 }}
-                helperText="If the right side is translated, where the codon starts"
-              />
-            </Box>
-          </Paper>
-        </Grid>
-        <Grid item xs={12} md={6}>
-          <Paper sx={{ p: 1.5 }}>
-            <Typography variant="h6" gutterBottom sx={{ mb: 1.5 }}>
-              Preview
-            </Typography>
-            <Box sx={{ mt: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-              {(formData.header || formData.body) && (
-                <Box sx={{ 
-                  textAlign: 'center', 
-                  mb: 1.5,
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 0.5
-                }}>
-                  {formData.header && (
-                    <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
-                      {formData.header}
-                    </Typography>
-                  )}
-                  {formData.body && (
-                    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-                      {formData.body}
-                    </Typography>
-                  )}
-                </Box>
-              )}
-              <AssemblerPart data={formData} />
-            </Box>
-          </Paper>
-        </Grid>
-      </Grid>
-      <Box sx={{ mt: 2 }}>
-        <Paper sx={{ p: 1.5 }}>
-          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
-            <Typography variant="h6">
-              JSON Data
-            </Typography>
-            <Button
-              size="small"
-              variant="outlined"
-              startIcon={<ContentCopyIcon />}
-              onClick={handleCopyRow}
-            >
-              Copy Row
-            </Button>
-          </Box>
-          <TableContainer>
-            <Table size="small" sx={{ '& .MuiTableCell-root': { py: 0.5, px: 1 } }}>
-              <TableHead>
-                <TableRow>
-                  {Object.keys(formData).map((key) => (
-                    <TableCell key={key} sx={{ fontWeight: 'bold' }}>
-                      {key}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                <TableRow>
-                  {Object.keys(formData).map((key) => (
-                    <TableCell key={key}>
-                      {String(formData[key])}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </Paper>
-      </Box>
-    </Box>
-  )
-}
-
-export default AssemblePartWidget