@opencloning/ui 1.2.0 → 1.3.1

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

package/src/components/assembler/StopIcon.jsx

@@ -1,34 +0,0 @@
-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
-
-

package/src/components/assembler/assembler_data2.json

@@ -1,50 +0,0 @@
-[
-    {
-        "name": "A",
-        "overhang": "GGAG"
-    },
-    {
-        "name": "B",
-        "overhang": "TACT"
-    },
-    {
-        "name": "T1",
-        "overhang": "CCAT"
-    },
-    {
-        "name": "T2",
-        "overhang": "GTCA"
-    },
-    {
-        "name": "T3",
-        "overhang": "TCCA"
-    },
-    {
-        "name": "C",
-        "overhang": "AATG"
-    },
-    {
-        "name": "D",
-        "overhang": "AGGT"
-    },
-    {
-        "name": "T4",
-        "overhang": "TTCG"
-    },
-    {
-        "name": "T5",
-        "overhang": "CGGC"
-    },
-    {
-        "name": "E",
-        "overhang": "GCTT"
-    },
-    {
-        "name": "F",
-        "overhang": "CGCT"
-    },
-    {
-        "name": "backbone",
-        "overhang": "GGAG"
-    }
-]

package/src/components/assembler/moclo.json

@@ -1,110 +0,0 @@
-[
-    {
-        "header": "Assembly connector",
-        "body": "",
-        "glyph": "three-prime-sticky-restriction-site",
-        "left_overhang": "CCCT",
-        "right_overhang": "AACG",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": null,
-        "right_codon_start": null,
-        "color": "#92C3DC"
-    },
-    {
-        "header": "Promoter",
-        "body": "",
-        "glyph": "promoter",
-        "left_overhang": "AACG",
-        "right_overhang": "TATG",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": null,
-        "right_codon_start": null,
-        "color": "#B2D06E"
-    },
-    {
-        "header": "Coding sequence",
-        "body": "You can use the ATG from the fusion site as translation start. If possible omit STOP codon and make your protein in frame with the Ser.",
-        "glyph": "cds",
-        "left_overhang": "TATG",
-        "right_overhang": "ATCC",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": 2,
-        "right_codon_start": 2,
-        "color": "#F1EC9B"
-    },
-    {
-        "header": "Terminator",
-        "body": "",
-        "glyph": "terminator",
-        "left_overhang": "ATCC",
-        "right_overhang": "GCTG",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": null,
-        "right_codon_start": null,
-        "color": "#E2929E"
-    },
-    {
-        "header": "Assembly connector",
-        "body": "",
-        "glyph": "three-prime-sticky-restriction-site",
-        "left_overhang": "GCTG",
-        "right_overhang": "TACA",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": null,
-        "right_codon_start": null,
-        "color": "#7C6AA9"
-    },
-    {
-        "header": "Yeast marker",
-        "body": "",
-        "glyph": "engineered-region",
-        "left_overhang": "TACA",
-        "right_overhang": "GAGT",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": null,
-        "right_codon_start": null,
-        "color": "#EFD198"
-    },
-    {
-        "header": "Yeast plasmid origin of replication",
-        "body": "",
-        "glyph": "origin-of-replication",
-        "left_overhang": "GAGT",
-        "right_overhang": "CCGA",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": null,
-        "right_codon_start": null,
-        "color": "#85643E"
-    },
-    {
-        "header": "Bacterial marker and origin",
-        "body": "",
-        "glyph": "engineered-region",
-        "left_overhang": "CCGA",
-        "right_overhang": "CCCT",
-        "left_inside": "",
-        "right_inside": "",
-        "left_codon_start": null,
-        "right_codon_start": null,
-        "color": "#7F7F7F"
-    },
-    {
-        "header": "Dummy",
-        "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"
-    }
-]