@opencloning/ui 1.0.0

package/src/components/assembler/AssemblePartWidget.jsx

@@ -0,0 +1,252 @@
+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 ContentCopyIcon from '@mui/icons-material/ContentCopy'
+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

package/src/components/assembler/Assembler.jsx

@@ -0,0 +1,273 @@
+import React from 'react'
+import data2 from './assembler_data2.json'
+import { Alert, Autocomplete, Box, Button, CircularProgress, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField } from '@mui/material'
+import ClearIcon from '@mui/icons-material/Clear';
+import { useAssembler } from './useAssembler';
+import { arrayCombinations } from '../eLabFTW/utils';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { useDispatch } from 'react-redux';
+import { cloningActions } from '@opencloning/store/cloning';
+import RequestStatusWrapper from '../form/RequestStatusWrapper';
+import useHttpClient from '../../hooks/useHttpClient';
+import AssemblerPart from './AssemblerPart';
+
+
+const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
+
+const categoryFilter = (category, previousCategory) => {
+  if (previousCategory === '') {
+    return category.startsWith('A_')
+  }
+  return previousCategory.split('_')[1] === category.split('_')[0]
+}
+
+function AssemblerLink({ overhang }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', minWidth: '80px' }}>
+      <Box sx={{ flex: 1, height: '2px', bgcolor: 'primary.main' }} />
+      <Box sx={{ mx: 1, px: 1, py: 0.5, bgcolor: 'background.paper', border: 1, borderColor: 'primary.main', borderRadius: 1, fontSize: '0.75rem', fontWeight: 'bold' }}>
+        {overhang}
+      </Box>
+      <Box sx={{ flex: 1, height: '2px', bgcolor: 'primary.main' }} />
+    </Box>
+  )
+}
+
+function formatItemName(item) {
+  if (item.plasmid_name && item.id !== item.plasmid_name) {
+    return `${item.id} (${item.plasmid_name})`
+  }
+  return item.id
+}
+
+function AssemblerComponent({ data, categories }) {
+
+  const [assembly, setAssembly] = React.useState([{ category: '', id: [] }])
+  const { requestSources, requestAssemblies } = useAssembler()
+  const [requestedAssemblies, setRequestedAssemblies] = React.useState([])
+  const [loadingMessage, setLoadingMessage] = React.useState('')
+  const [errorMessage, setErrorMessage] = React.useState('')
+  const dispatch = useDispatch()
+  const onSubmitAssembly = async () => {
+    clearAssembly()
+    const sources = assembly.map(({ id }) => id.map((id) => (data.find((item) => item.id === id).source)))
+    let errorMessage = 'Error fetching sequences'
+    try {
+      setLoadingMessage('Requesting sequences...')
+      const resp = await requestSources(sources)
+      errorMessage = 'Error assembling sequences'
+      setLoadingMessage('Assembling...')
+      const assemblies = await requestAssemblies(resp)
+      setRequestedAssemblies(assemblies)
+    } catch (e) {
+      setErrorMessage(errorMessage)
+    } finally {
+      setLoadingMessage(false)
+    }
+  }
+
+  const clearAssembly = () => {
+    setRequestedAssemblies([])
+    setErrorMessage('')
+  }
+
+  const setCategory = (category, index) => {
+    clearAssembly()
+    if (category === '') {
+      const newAssembly = assembly.slice(0, index)
+      newAssembly[index] = { category: '', id: [] }
+      setAssembly(newAssembly)
+      return
+    }
+    setAssembly(assembly.map((item, i) => i === index ? { category, id: [] } : item))
+  }
+  const setId = (idArray, index) => {
+    clearAssembly()
+    // Handle case where user clears all selections (empty array)
+    if (!idArray || idArray.length === 0) {
+      setAssembly(assembly.map((item, i) => i === index ? { ...item, id: [] } : item))
+      return
+    }
+
+    // For multiple selection, we need to determine the category based on the first selected item
+    // or maintain the current category if it's already set
+    const currentItem = assembly[index]
+    const firstOption = data.find((item) => item.id === idArray[0])
+    const category = currentItem.category || firstOption?.category || ''
+
+    setAssembly(assembly.map((item, i) => i === index ? { id: idArray, category } : item))
+  }
+
+  const handleViewAssembly = (index) => {
+    const newState = requestedAssemblies[index]
+    dispatch(setCloningState(newState))
+    dispatch(setCurrentTabAction(0))
+  }
+
+  React.useEffect(() => {
+    const lastPosition = assembly.length - 1
+    if (assembly[lastPosition].category.endsWith('A')) {
+      return
+    }
+    if (assembly[lastPosition].category !== '') {
+      const newAssembly = [...assembly, { category: '', id: [] }]
+      setAssembly(newAssembly)
+    }
+  }, [assembly])
+
+  const expandedAssemblies = arrayCombinations(assembly.map(({ id }) => id))
+  const assemblyComplete = assembly.every((item) => item.category !== '' && item.id.length > 0)
+  const currentCategories = assembly.map((item) => item.category)
+
+  return (
+    <Box className="assembler-container" sx={{ width: '80%', margin: 'auto', mb: 4 }}>
+      <Alert severity="warning" sx={{ maxWidth: '400px', margin: 'auto', fontSize: '.9rem' }}>
+                The Assembler is experimental. Use with caution.
+      </Alert>
+
+      <Stack direction="row" alignItems="center" spacing={1} sx={{ overflowX: 'auto', my: 2 }}>
+        {assembly.map((item, index) => {
+          const allowedCategories = item.category ? [item.category] : categories.filter((category) => categoryFilter(category, index === 0 ? '' : assembly[index - 1].category))
+          const isCompleted = item.category !== '' && item.id.length > 0
+          const borderColor = isCompleted ? 'success.main' : 'primary.main'
+          const leftOverhang = data.find((d) => d.category === item.category)?.left_overhang
+          const rightOverhang = data.find((d) => d.category === item.category)?.right_overhang
+
+          return (
+            <React.Fragment key={index}>
+              {/* Link before first box */}
+              {index === 0 && item.category !== '' && (
+                <AssemblerLink overhang={leftOverhang} />
+              )}
+              <AssemblerPart />
+              <Box sx={{ width: '250px', border: 3, borderColor, borderRadius: 4, p: 2 }}>
+                <FormControl fullWidth sx={{ mb: 2 }}>
+                  <InputLabel>Category</InputLabel>
+                  <Select
+                    endAdornment={item.category && (<InputAdornment position="end"><IconButton onClick={() => setCategory('', index)}><ClearIcon /></IconButton></InputAdornment>)}
+                    value={item.category}
+                    onChange={(e) => setCategory(e.target.value, index)}
+                    label="Category"
+                    disabled={index < assembly.length - 1}
+                  >
+                    {allowedCategories.map((category) => (
+                      <MenuItem key={category} value={category}>{category === 'F_A' ? 'Backbone' : category}</MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    multiple
+                    value={item.id}
+                    onChange={(e, value) => setId(value, index)}
+                    label="ID"
+                    options={data.filter((d) => allowedCategories.includes(d.category)).map((item) => item.id)}
+                    getOptionLabel={(id) => formatItemName(data.find((d) => d.id === id))}
+                    renderInput={(params) => <TextField {...params} label="ID" />}
+                  />
+                </FormControl>
+                {leftOverhang && rightOverhang && (
+                  <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                    <AssemblerPart data={ { left_overhang: leftOverhang, right_overhang: rightOverhang }}/>
+                  </Box>
+                )}
+              </Box>
+
+              {/* Link between boxes */}
+              {index < assembly.length - 1 && item.category !== '' && (
+                <AssemblerLink overhang={rightOverhang} />
+              )}
+
+              {/* Link after last box */}
+              {index === assembly.length - 1 && item.category !== '' && (
+                <AssemblerLink overhang={rightOverhang} />
+              )}
+            </React.Fragment>
+          )
+        })}
+      </Stack>
+      {assemblyComplete && <>
+        <Button
+          sx={{ p: 2, px: 4, my: 2, fontSize: '1.2rem' }}
+          variant="contained"
+          color="primary"
+          onClick={onSubmitAssembly}
+          disabled={Boolean(loadingMessage)}>
+          {loadingMessage ? <><CircularProgress /> {loadingMessage}</> : 'Submit'}
+        </Button>
+      </>}
+      {errorMessage && <Alert severity="error" sx={{ my: 2, maxWidth: 300, margin: 'auto', fontSize: '1.2rem' }}>{errorMessage}</Alert>}
+      {requestedAssemblies.length > 0 &&
+                <TableContainer sx={{ '& td': { fontSize: '1.2rem' }, '& th': { fontSize: '1.2rem' } }}>
+                  <Table size="small">
+                    <TableHead>
+                      <TableRow>
+                        <TableCell padding="checkbox" />
+                        {currentCategories.map(category => (
+                          <TableCell key={category} sx={{ fontWeight: 'bold' }}>
+                            {category === 'F_A' ? 'Backbone' : category}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {expandedAssemblies.map((parts, rowIndex) => (
+                        <TableRow key={rowIndex}>
+                          <TableCell padding="checkbox">
+                            <IconButton onClick={() => handleViewAssembly(rowIndex)} size="small">
+                              <VisibilityIcon />
+                            </IconButton>
+                          </TableCell>
+                          {parts.map((part, colIndex) => (
+                            <TableCell key={colIndex}>
+                              {formatItemName(data.find((d) => d.id === part))}
+                            </TableCell>
+                          ))}
+
+
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+      }
+
+    </Box >
+  )
+}
+
+function Assembler() {
+  const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' })
+  const [retry, setRetry] = React.useState(0)
+  const [data, setData] = React.useState([])
+  const [categories, setCategories] = React.useState([])
+  const httpClient = useHttpClient()
+  React.useEffect(() => {
+    setRequestStatus({ status: 'loading' })
+    const fetchData = async () => {
+      try {
+        const { data } = await httpClient.get('https://assets.opencloning.org/open-dna-collections/scripts/index_overhangs.json')
+        const formattedData = data.map((item) => ({
+          ...item,
+          category: data2.find((item2) => item2.overhang === item.left_overhang).name + '_' + data2.find((item2) => item2.overhang === item.right_overhang).name
+        }))
+
+        const categories = [...new Set(formattedData.map((item) => item.category))].sort()
+        setData(formattedData)
+        setCategories(categories)
+        setRequestStatus({ status: 'success' })
+      } catch (error) {
+        setRequestStatus({ status: 'error', message: 'Could not load assembler data' })
+      }
+    }
+    fetchData()
+
+  }, [retry])
+  return (
+    <RequestStatusWrapper requestStatus={requestStatus} retry={() => setRetry((prev) => prev + 1)}>
+      <AssemblerComponent data={data} categories={categories} />
+    </RequestStatusWrapper>
+  )
+}
+
+export default Assembler

package/src/components/assembler/AssemblerPart.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import styles from './assembly_component.module.css'
+
+import { getAminoAcidFromSequenceTriplet, getComplementSequenceString } from '@teselagen/sequence-utils'
+import { getSvgByGlyph } from './sbol_visual_glyphs'
+
+
+const defaultData =
+  {
+    header: 'Promoter',
+    body: 'promoter 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',
+  }
+
+
+function AssemblerPart( { data = defaultData } ) {
+  const {
+    left_codon_start: leftCodonStart,
+    right_codon_start: rightCodonStart,
+    left_overhang: leftOverhang,
+    right_overhang: rightOverhang,
+    left_inside: leftInside,
+    right_inside: rightInside,
+    glyph
+  } = data
+  const leftOverhangRc = getComplementSequenceString(leftOverhang)
+  const rightOverhangRc = getComplementSequenceString(rightOverhang)
+  const leftInsideRc = getComplementSequenceString(leftInside)
+  const rightInsideRc = getComplementSequenceString(rightInside)
+  let leftTranslationOverhang = ''
+  let leftTranslationInside = ''
+  if (leftCodonStart) {
+    const triplets = (leftOverhang + leftInside).slice(leftCodonStart - 1).match(/.{3}/g)
+    const padding = ' '.repeat(leftCodonStart - 1)
+    const translationLeft = padding + triplets.map(triplet => getAminoAcidFromSequenceTriplet(triplet).threeLettersName.replace('Stop', '***')).join('')
+    leftTranslationOverhang = translationLeft.slice(0, leftOverhang.length)
+    leftTranslationInside = translationLeft.slice(leftOverhang.length)
+  }
+  let rightTranslationOverhang = ''
+  let rightTranslationInside = ''
+  if (rightCodonStart) {
+    const triplets = (rightInside + rightOverhang).slice(rightCodonStart - 1).match(/.{3}/g)
+    const padding = ' '.repeat(rightCodonStart - 1)
+    const translationRight = padding + triplets.map(triplet => getAminoAcidFromSequenceTriplet(triplet).threeLettersName.replace('Stop', '***')).join('')
+    rightTranslationInside = translationRight.slice(0, rightInside.length)
+    rightTranslationOverhang = translationRight.slice(rightInside.length)
+  }
+
+  return (
+
+    <div className={styles.container}>
+      <div className={`${styles.dna} ${styles.overhang} ${styles.left}`}>
+        <div className={styles.top}>{leftTranslationOverhang}</div>
+        <div className={styles.watson}>{leftOverhang}</div>
+        <div className={styles.crick}>{leftOverhangRc}</div>
+        <div className={styles.bottom}> </div>
+      </div>
+      {leftInside && (
+        <div className={`${styles.dna} ${styles.insideLeft}`}>
+          <div className={styles.top}>{leftTranslationInside}</div>
+          <div className={styles.watson}>{leftInside}</div>
+          <div className={styles.crick}>{leftInsideRc}</div>
+          <div className={styles.bottom}> </div>
+        </div>
+      )}
+      <div className={styles.boxContainer}>
+        <div className={styles.box}>
+          <div className={styles.imageContainer} style={{ backgroundColor: data.color || 'lightgray' }}>
+            <img src={getSvgByGlyph(glyph)} alt={`${glyph}.svg`} />
+          </div>
+        </div>
+      </div>
+      {rightInside && (
+        <div className={`${styles.dna} ${styles.insideRight}`}>
+          <div className={styles.top}>{rightTranslationInside}</div>
+          <div className={styles.watson}>{rightInside}</div>
+          <div className={styles.crick}>{rightInsideRc}</div>
+          <div className={styles.bottom}> </div>
+        </div>
+      )}
+      <div className={`${styles.dna} ${styles.overhang} ${styles.right}`}>
+        <div className={styles.top}>{rightTranslationOverhang}</div>
+        <div className={styles.watson}>{rightOverhang}</div>
+        <div className={styles.crick}>{rightOverhangRc}</div>
+        <div className={styles.bottom}> </div>
+      </div>
+    </div>
+
+  )
+}
+
+export default AssemblerPart

package/src/components/assembler/StopIcon.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+function StopIcon({ color = 'currentColor', size = 24, ...props }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={size} height={size}
+      role="img"
+      aria-label="Stop sign icon"
+      {...props}
+    >
+      <mask id="stop-mask">
+        {/* Octagon area (visible part) */}
+        <polygon fill="white"
+          points="7.07,2 16.93,2 22,7.07 22,16.93 16.93,22 7.07,22 2,16.93 2,7.07" />
+        {/* Text area (cut out) */}
+        <text x="12" y="12.3"
+          fill="black"
+          fontFamily="Arial, Helvetica, sans-serif"
+          fontWeight="700"
+          fontSize="7.2"
+          textAnchor="middle"
+          dominantBaseline="middle">STOP</text>
+      </mask>
+
+      {/* Octagon using mask */}
+      <rect width="24" height="24" fill={color} mask="url(#stop-mask)" />
+    </svg>
+  )
+}
+
+export default StopIcon
+
+