@opencloning/ui 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @opencloning/ui
 
+## 1.5.3
+
+### Patch Changes
+
+- [#655](https://github.com/manulera/OpenCloning_frontend/pull/655) [`b34e83f`](https://github.com/manulera/OpenCloning_frontend/commit/b34e83f0b8813de7744d3d71ad779be0df2f75cf) Thanks [@manulera](https://github.com/manulera)! - Changes to Assembler naming:
+
+  - Handle slashes in downloaded file names (were being turned into subfolders)
+  - Allow users to change names of outputs in assembler
+
+- [#655](https://github.com/manulera/OpenCloning_frontend/pull/655) [`b34e83f`](https://github.com/manulera/OpenCloning_frontend/commit/b34e83f0b8813de7744d3d71ad779be0df2f75cf) Thanks [@manulera](https://github.com/manulera)! - In Assembler tab, allow users to see an overview of the Syntax
+
+- Updated dependencies [[`b34e83f`](https://github.com/manulera/OpenCloning_frontend/commit/b34e83f0b8813de7744d3d71ad779be0df2f75cf)]:
+  - @opencloning/utils@1.5.3
+  - @opencloning/store@1.5.3
+
 ## 1.5.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,8 +25,9 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.5.2",
-    "@opencloning/utils": "1.5.2",
+    "@mui/x-data-grid": "^8.25.0",
+    "@opencloning/store": "1.5.3",
+    "@opencloning/utils": "1.5.3",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

package/src/components/assembler/Assembler.cy.jsx

@@ -84,6 +84,20 @@ const mockPlasmids = [
       repository_id: '67890',
     },
   },
+  {
+    id: 3,
+    plasmid_name: 'Test Plasmid 3',
+    left_overhang: 'CCCT',
+    right_overhang: 'AACG',
+    key: 'CCCT-AACG',
+    type: 'AddgeneIdSource',
+    source: {
+      id: 3,
+      type: 'AddgeneIdSource',
+      input: [],
+      repository_id: '11111',
+    },
+  },
 ];
 
 const mockCategories = [
@@ -296,5 +310,55 @@ describe('<AssemblerComponent />', () => {
       expect(stub.firstCall.args[0].severity).to.equal('error');
     });
   });
+
+  it('disables download when output names have duplicates', () => {
+    cy.get('[data-testid="plasmid-select"]').first().within(() => { cy.get('input').click(); });
+    cy.get('li').contains('Test Plasmid 3').click();
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', { statusCode: 200, body: dummyResponse }).as('fetchSourceSuccess');
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', { statusCode: 200, body: dummyResponse2 }).as('assemblySuccess');
+
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+    cy.wait('@fetchSourceSuccess');
+    cy.wait('@assemblySuccess');
+
+    cy.get('[data-testid="assembler-product-table"]').should('exist');
+    cy.get('[data-testid="assembler-download-assemblies-button"]').should('not.be.disabled');
+
+    cy.get('[data-testid="assembler-product-table-edit-button"]').first().click();
+    cy.get('[role="dialog"]').find('input').clear().type('duplicate_name');
+    cy.get('[role="dialog"]').contains('Save').click();
+
+    cy.get('[data-testid="assembler-product-table-edit-button"]').last().click();
+    cy.get('[role="dialog"]').find('input').clear().type('duplicate_name');
+    cy.get('[role="dialog"]').contains('Save').click();
+
+    cy.get('[data-testid="assembler-download-assemblies-button"]').should('be.disabled');
+  });
+
+  it('disables download when output name is empty', () => {
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', { statusCode: 200, body: dummyResponse }).as('fetchSourceSuccess');
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', { statusCode: 200, body: dummyResponse2 }).as('assemblySuccess');
+
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+    cy.wait('@fetchSourceSuccess');
+    cy.wait('@assemblySuccess');
+
+    cy.get('[data-testid="assembler-product-table-edit-button"]').first().click();
+    cy.get('[role="dialog"]').find('input').clear();
+    cy.get('[role="dialog"]').contains('Save').click();
+
+    cy.get('[data-testid="assembler-download-assemblies-button"]').should('be.disabled');
+  });
+
+  it('enables download when output names are valid and unique', () => {
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', { statusCode: 200, body: dummyResponse }).as('fetchSourceSuccess');
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', { statusCode: 200, body: dummyResponse2 }).as('assemblySuccess');
+
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+    cy.wait('@fetchSourceSuccess');
+    cy.wait('@assemblySuccess');
+
+    cy.get('[data-testid="assembler-download-assemblies-button"]').should('not.be.disabled');
+  });
 });
 

package/src/components/assembler/Assembler.jsx

@@ -1,74 +1,155 @@
 import React from 'react'
 import {
-  Alert, Autocomplete, Box, Button, CircularProgress, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, Table,
-  TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ButtonGroup
+  Alert, Autocomplete, Box, Button, CircularProgress, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, TextField, ButtonGroup,
+  DialogTitle,
+  Dialog,
+  DialogContent,
+  FormControlLabel,
+  Switch
 } from '@mui/material'
-import { Clear as ClearIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
+import { Clear as ClearIcon, Edit as EditIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
+import { DataGrid, GridActionsCellItem } from '@mui/x-data-grid';
 import { useAssembler } from './useAssembler';
 import { useDispatch, useSelector } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
 import AssemblerPart from './AssemblerPart';
+import EditTextDialog from '../form/EditTextDialog';
 
 import useCombinatorialAssembly from './useCombinatorialAssembly';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 import error2String from '@opencloning/utils/error2String';
-import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler } from './assembler_utils';
+import { categoryFilter, downloadAssemblerFilesAsZip, getFilesToExportFromAssembler, getDefaultAssemblyOutputName, MAX_OUTPUT_NAME_LENGTH, sanitizeOutputName } from './assembler_utils';
 import useBackendRoute from '../../hooks/useBackendRoute';
 import useHttpClient from '../../hooks/useHttpClient';
 import useAlerts from '../../hooks/useAlerts';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import { useConfig } from '../../providers';
 import { isEqual } from 'lodash-es';
+import SyntaxOverviewTable from './SyntaxOverviewTable';
+import { graphToMSA, partsToGraph } from './graph_utils';
 
 
 const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
 
-
 function formatItemName(item) {
   // Fallback in case the item is not found (while updating list)
   return item ? `${item.plasmid_name}` : '-'
 }
 
-function AssemblerProductTable({ requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories }) {
+function isRowInvalid(rowIndex, assemblyOutputNames) {
+  const name = assemblyOutputNames[rowIndex] ?? '';
+  const trimmed = name.trim();
+  const isEmpty = trimmed.length === 0;
+  const isTooLong = name.length > MAX_OUTPUT_NAME_LENGTH;
+  const isDuplicate = assemblyOutputNames.filter((n) => n === name).length > 1;
+  return isEmpty || isTooLong || isDuplicate;
+}
+
+function AssemblerProductTable({
+  requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories,
+  assemblyOutputNames, onOutputNameChange,
+}) {
+  const dispatch = useDispatch();
+  const [editDialog, setEditDialog] = React.useState({ open: false, rowIndex: null, value: '' });
 
-  const dispatch = useDispatch()
   const handleViewAssembly = (index) => {
-    const newState = requestedAssemblies[index]
-    dispatch(setCloningState(newState))
-    dispatch(setCurrentTabAction(0))
-  }
+    const newState = requestedAssemblies[index];
+    dispatch(setCloningState(newState));
+    dispatch(setCurrentTabAction(0));
+  };
+
+  const handleEdit = (rowIndex) => () => {
+    setEditDialog({ open: true, rowIndex, value: assemblyOutputNames[rowIndex] ?? '' });
+  };
+
+  const handleEditSave = (newValue) => {
+    if (editDialog.rowIndex !== null) {
+      onOutputNameChange(editDialog.rowIndex, sanitizeOutputName(newValue));
+    }
+    setEditDialog({ open: false, rowIndex: null, value: '' });
+  };
+
+  const rows = expandedAssemblies.map((parts, rowIndex) => ({
+    id: rowIndex,
+    outputName: assemblyOutputNames[rowIndex] ?? '',
+    rowIndex,
+    parts,
+  }));
+
+  const columns = [
+    {
+      field: 'actions',
+      type: 'actions',
+      headerName: '',
+      width: 60,
+      getActions: (params) => [
+        <GridActionsCellItem
+          key="view"
+          icon={<VisibilityIcon />}
+          label="View"
+          onClick={() => handleViewAssembly(params.row.rowIndex)}
+          data-testid="assembler-product-table-view-button"
+        />,
+      ],
+    },
+    {
+      field: 'outputName',
+      headerName: 'Output name',
+      flex: 1,
+      minWidth: 200,
+      renderCell: (params) => (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, width: '100%' }}>
+          <Box sx={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+            {params.value || 'Click to edit...'}
+          </Box>
+          <IconButton size="small" onClick={(e) => { e.stopPropagation(); handleEdit(params.row.rowIndex)(); }} data-testid="assembler-product-table-edit-button">
+            <EditIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      ),
+    },
+    ...currentCategories.map((categoryId, idx) => {
+      const category = categories.find((c) => c.id === categoryId);
+      return {
+        field: `category_${categoryId}`,
+        headerName: category?.displayName ?? '',
+        flex: 1,
+        valueGetter: (value, row) => formatItemName(plasmids.find((d) => d.id === row.parts[idx])),
+      };
+    }),
+  ];
+
   return (
-    <TableContainer sx={{ '& td': { fontSize: '1.2rem' }, '& th': { fontSize: '1.2rem' } }}>
-      <Table size="small" data-testid="assembler-product-table">
-        <TableHead>
-          <TableRow>
-            <TableCell padding="checkbox" />
-            {currentCategories.map(category => (
-              <TableCell key={category} sx={{ fontWeight: 'bold' }}>
-                {categories.find((c) => c.id === category)?.displayName}
-              </TableCell>
-            ))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {expandedAssemblies.map((parts, rowIndex) => (
-            <TableRow key={rowIndex}>
-              <TableCell padding="checkbox">
-                <IconButton data-testid="assembler-product-table-view-button" onClick={() => handleViewAssembly(rowIndex)} size="small">
-                  <VisibilityIcon />
-                </IconButton>
-              </TableCell>
-              {parts.map((part, colIndex) => (
-                <TableCell key={colIndex}>
-                  {formatItemName(plasmids.find((d) => d.id === part))}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  )
+    <Box data-testid="assembler-product-table" sx={{ '& .MuiDataGrid-cell': { fontSize: '1.2rem' }, '& .MuiDataGrid-columnHeader': { fontSize: '1.2rem', fontWeight: 'bold' } }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        getRowClassName={(params) => (isRowInvalid(params.row.rowIndex, assemblyOutputNames) ? 'error-row' : '')}
+        density="compact"
+        disableRowSelectionOnClick
+        disableColumnSorting
+        disableColumnFilter
+        disableColumnMenu
+        hideFooter
+        autoHeight
+        sx={{
+          '& .error-row': {
+            backgroundColor: 'rgba(255, 0, 0, 0.15)',
+            '&:hover': { backgroundColor: 'rgba(255, 0, 0, 0.25)' },
+          },
+        }}
+      />
+      <EditTextDialog
+        open={editDialog.open}
+        value={editDialog.value}
+        onClose={() => setEditDialog({ open: false, rowIndex: null, value: '' })}
+        onSave={handleEditSave}
+        title="Edit Output Name"
+        placeholder="Enter output name..."
+        maxLength={MAX_OUTPUT_NAME_LENGTH}
+      />
+    </Box>
+  );
 }
 
 function AssemblerBox({ item, index, setCategory, setId, categories, plasmids, assembly }) {
@@ -132,17 +213,32 @@ function AssemblerBox({ item, index, setCategory, setId, categories, plasmids, a
 export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addAlert, appInfo }) {
 
   const [requestedAssemblies, setRequestedAssemblies] = React.useState([])
+  const [assemblyOutputNames, setAssemblyOutputNames] = React.useState([])
   const [errorMessage, setErrorMessage] = React.useState('')
   const [loadingMessage, setLoadingMessage] = React.useState('')
 
   const clearAssemblySelection = React.useCallback(() => {
     setRequestedAssemblies([])
+    setAssemblyOutputNames([])
     setErrorMessage('')
   }, [])
 
   const { assembly, setCategory, setId, expandedAssemblies, assemblyComplete, canBeSubmitted, currentCategories } = useCombinatorialAssembly({ onValueChange: clearAssemblySelection, categories, plasmids })
   const { requestSources, requestAssemblies } = useAssembler()
 
+  const onOutputNameChange = React.useCallback((index, name) => {
+    setAssemblyOutputNames((prev) => {
+      const next = [...prev];
+      next[index] = name;
+      return next;
+    });
+  }, []);
+
+  const namesAreUnique = new Set(assemblyOutputNames).size === assemblyOutputNames.length;
+  const namesNonEmpty = assemblyOutputNames.length > 0 && assemblyOutputNames.every((n) => n.trim().length > 0);
+  const namesNotTooLong = assemblyOutputNames.every((n) => n.length <= MAX_OUTPUT_NAME_LENGTH);
+  const canDownload = requestedAssemblies.length > 0 && namesAreUnique && namesNonEmpty && namesNotTooLong;
+
   const onSubmitAssembly = React.useCallback(async () => {
     clearAssemblySelection()
     const selectedPlasmids = assembly.map(({ plasmidIds }) => plasmidIds.map((id) => (plasmids.find((item) => item.id === id))))
@@ -155,6 +251,11 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
       setLoadingMessage('Assembling...')
       const assemblies = await requestAssemblies(resp, assemblyEnzymes)
       setRequestedAssemblies(assemblies)
+      if (expandedAssemblies && expandedAssemblies.length > 0) {
+        setAssemblyOutputNames(
+          expandedAssemblies.map((_, i) => getDefaultAssemblyOutputName(i, expandedAssemblies, plasmids)),
+        )
+      }
     } catch (e) {
       if (e.assembly) {
         errorMessage = (<><div style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>{error2String(e)}</div><div>Error assembling {e.assembly.map((p) => formatItemName(p.plasmid)).join(', ')}</div></>)
@@ -169,7 +270,9 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
 
   const onDownloadAssemblies = React.useCallback(async () => {
     try {
-      const files = getFilesToExportFromAssembler({requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo})
+      const files = getFilesToExportFromAssembler({
+        requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo, outputNames: assemblyOutputNames,
+      });
       await downloadAssemblerFilesAsZip(files);
     } catch (error) {
       console.error('Error downloading assemblies:', error);
@@ -178,7 +281,7 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
         severity: 'error',
       });
     }
-  }, [requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo, addAlert])
+  }, [requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo, addAlert, assemblyOutputNames])
 
   const options = React.useMemo(() => assemblyComplete ? assembly : [...assembly, { category: '', plasmidIds: [] }], [assembly, assemblyComplete])
 
@@ -207,12 +310,17 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addA
           variant="contained"
           data-testid="assembler-download-assemblies-button"
           sx={{ p: 2, fontSize: '1.2rem' }}
-          onClick={onDownloadAssemblies}>Download Assemblies
+          onClick={onDownloadAssemblies}
+          disabled={!canDownload}
+          title={!canDownload ? 'Output names must be unique, non-empty, and at most 255 characters' : ''}>Download Assemblies
         </Button>}
       </Box>
       {errorMessage && <Alert severity="error" sx={{ my: 2, maxWidth: 300, margin: 'auto', fontSize: '1.2rem' }}>{errorMessage}</Alert>}
       {requestedAssemblies.length > 0 &&
-        <AssemblerProductTable {...{requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories}} />
+        <AssemblerProductTable {...{
+          requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories,
+          assemblyOutputNames, onOutputNameChange,
+        }} />
       }
 
     </Box >
@@ -298,6 +406,35 @@ function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
 }
 
 
+function SyntaxOverviewButton({ syntax }) {
+  const [open, setOpen] = React.useState(false)
+  const [mode, setMode] = React.useState('detailed')
+  const msa = React.useMemo(() => syntax ? graphToMSA(partsToGraph(syntax.parts)) : [], [syntax])
+  return <>
+    <Button color="success" onClick={() => setOpen(true)} data-testid="assembler-syntax-overview-button">Syntax Overview</Button>
+    {open && <Dialog
+      open={open}
+      onClose={() => setOpen(false)}
+      fullWidth
+      maxWidth="xl"
+      PaperProps={{ sx: { height: '90vh' } }}
+    >
+      <DialogTitle>Syntax overview</DialogTitle>
+      <DialogContent>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={mode === 'detailed'}
+              onChange={(e) => setMode(e.target.checked ? 'detailed' : 'compact')}
+            />
+          }
+          label={mode === 'compact' ? 'Compact' : 'Detailed'}
+        />
+        <SyntaxOverviewTable msa={msa} mode={mode} parts={syntax.parts} />
+      </DialogContent>
+    </Dialog>}
+  </>
+}
 
 function Assembler() {
   const [syntax, setSyntax] = React.useState(null);
@@ -331,6 +468,7 @@ function Assembler() {
       </Alert>
       <ButtonGroup>
         <LoadSyntaxButton setSyntax={setSyntax} addPlasmids={addPlasmids} clearPlasmids={clearPlasmids} />
+        {syntax && <SyntaxOverviewButton syntax={syntax} />}
         {syntax && <UploadPlasmidsButton addPlasmids={addPlasmids} syntax={syntax} />}
         {syntax && <Button color="error" onClick={clearLoadedPlasmids}>Remove uploaded plasmids</Button>}
       </ButtonGroup>

package/src/components/assembler/SyntaxOverviewTable.jsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { Box, Typography, Table, TableBody, TableRow, TableCell } from '@mui/material';
+import { partDataToDisplayData } from './assembler_utils';
+import { AssemblerPartContainer, AssemblerPartCore, DisplayInside, DisplayOverhang } from './AssemblerPart';
+import AssemblerPart from './AssemblerPart';
+import { GRAPH_SPACER } from './graph_utils';
+
+function OverhangRow({ row, parts, mode = 'detailed' }) {
+
+  const rows2iterate = [...row];
+  const actualRows =[];
+    
+  let currentCell = [rows2iterate.shift(), 1];
+  while (currentCell[0] !== undefined) {
+    if (rows2iterate[0] === GRAPH_SPACER) {
+      currentCell[1]++;
+      rows2iterate.shift();
+    } else {
+      actualRows.push(currentCell);
+      currentCell = [rows2iterate.shift(), 1];
+    }
+  }
+  actualRows.forEach(cell => {
+    const [leftOverhang, rightOverhang] = cell[0].split('-');
+    const data = parts.find(part => part.left_overhang === leftOverhang && part.right_overhang === rightOverhang) ||
+         {
+           left_overhang: leftOverhang,
+           right_overhang: rightOverhang,
+           left_inside: '',
+           right_inside: '',
+           left_codon_start: 0,
+           right_codon_start: 0,
+           color: 'lightgray',
+           glyph: 'engineered-region',
+         }
+    cell.push(data);
+  });
+  return (
+    <TableRow >
+      {actualRows.flatMap(
+        (cell, index) => {
+          const showRight = index === actualRows.length - 1;
+    
+          const colSpan = (cell[1]-1)*2 + 1;
+          const { left_overhang, right_overhang, left_inside, color, glyph } = cell[2];
+          const { leftTranslationOverhang, leftTranslationInside, leftOverhangRc, rightOverhangRc, leftInsideRc } = partDataToDisplayData(cell[2]);
+          if (mode === 'compact') {
+            return <React.Fragment key={`row-${index}-compact`}>
+              <TableCell sx={{padding: 0, borderRight: 'solid 1px gray'}} >
+                <AssemblerPartContainer>
+                  <DisplayOverhang overhang={left_overhang} overhangRc={leftOverhangRc} translation={leftTranslationOverhang} isRight={false} />
+                  {left_inside && <DisplayInside inside={left_inside} insideRc={leftInsideRc} translation={leftTranslationInside} isRight={false} />}
+                </AssemblerPartContainer>
+              </TableCell>
+              <TableCell sx={{ padding: 0, textAlign: "center", borderRight: 'solid 1px gray' }} colSpan={colSpan}>
+                <AssemblerPartContainer>
+                  <AssemblerPartCore color={color} glyph={glyph} />
+                </AssemblerPartContainer>
+              </TableCell>
+              {showRight && (
+                <TableCell 
+                  key={index}
+                  sx={{ padding: 0, borderRight: 'solid 1px gray' }}
+                >
+                  <AssemblerPartContainer>
+                    <DisplayOverhang overhang={right_overhang} overhangRc={rightOverhangRc} isRight={true} />
+                  </AssemblerPartContainer>
+                </TableCell>
+              )}
+            </React.Fragment>
+          }
+          if (mode === 'detailed') {
+            return (
+              <TableCell colSpan={cell[1]} key={`row-${index}-detailed`} sx={{ border: 1, py: 0 }}>
+                <Box sx={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
+                  <Typography variant="h6" >{cell[2].name}</Typography>
+                  <Typography variant="body2" >{cell[2].info}</Typography>
+                  <AssemblerPart data={cell[2]} />
+                </Box>
+              </TableCell>
+            )
+          }
+        }
+      )}
+    </TableRow>
+  );
+}
+
+function SyntaxOverviewTable({ msa, mode, parts }) {
+  return (
+    <Box sx={{ overflowY: 'auto', overflowX: 'auto' }}>
+      <Table data-testid="overhangs-preview-table" sx={{ borderCollapse: 'separate', borderSpacing: 0 }}>
+        <TableBody>
+          {msa.map((row, index) => (
+            <OverhangRow key={index} row={row} mode={mode} parts={parts} />
+          ))}
+        </TableBody>
+      </Table>
+    </Box>
+  )
+}
+
+export default SyntaxOverviewTable

package/src/components/assembler/assembler_utils.js

@@ -5,6 +5,9 @@ import { openCycleAtNode } from './graph_utils';
 import { downloadBlob, formatStateForJsonExport, getZipFileBlob } from '@opencloning/utils/readNwrite';
 import { getGraftSequenceId } from '@opencloning/utils/network';
 import { TextReader} from '@zip.js/zip.js';
+import { editGenbankSequenceNameFromTextContent } from '@opencloning/utils';
+
+export const MAX_OUTPUT_NAME_LENGTH = 250;
 
 export function tripletsToTranslation(triplets) {
   if (!triplets) return ''
@@ -161,11 +164,33 @@ export function categoryFilter(category, categories, previousCategoryId) {
   return previousCategory?.right_overhang === category.left_overhang
 }
 
-export function getFilesToExportFromAssembler({requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo}) {
+export function getDefaultAssemblyOutputName(assemblyIndex, expandedAssemblies, plasmids) {
+  const assembly = expandedAssemblies[assemblyIndex];
+  const plasmidNames = assembly.map(part => plasmids.find(p => p.id === part)?.plasmid_name ?? '');
+  let name = `${String(assemblyIndex + 1).padStart(3, '0')}_${plasmidNames.join('+')}`.replaceAll('/', '_').replaceAll(' ', '_');
+  if (name.length > MAX_OUTPUT_NAME_LENGTH) {
+    name = `${String(assemblyIndex + 1).padStart(3, '0')}_construct`;
+  }
+  return name;
+}
+
+export function sanitizeOutputName(name) {
+  let sanitized = name.replaceAll('/', '_').replaceAll(' ', '_');
+  if (sanitized.length > MAX_OUTPUT_NAME_LENGTH) {
+    sanitized = sanitized.slice(0, MAX_OUTPUT_NAME_LENGTH);
+  }
+  return sanitized;
+}
+
+export function getFilesToExportFromAssembler({requestedAssemblies, expandedAssemblies, plasmids, currentCategories, categories, appInfo, outputNames}) {
+  if (outputNames.length !== requestedAssemblies.length) {
+    throw new Error('outputNames must be the same length as requestedAssemblies');
+  }
   const files2Export = [];
-  const categoryNames = ['Assembly', ...currentCategories.map(categoryId => categories.find(c => c.id === categoryId).displayName)];
+  const categoryNames = ['Assembly', 'Name', ...currentCategories.map(categoryId => categories.find(c => c.id === categoryId).displayName)];
   const assemblyNames = expandedAssemblies.map((assembly, index) => {
-    return [index + 1, ...assembly.map(part => plasmids.find(p => p.id === part).plasmid_name)];
+    const plasmidNames = assembly.map(part => plasmids.find(p => p.id === part).plasmid_name);
+    return [index + 1, outputNames[index], ...plasmidNames];
   });
   for (const delimiter of ['\t', ',']) {
     const tableHeader = categoryNames.join(delimiter);
@@ -179,18 +204,19 @@ export function getFilesToExportFromAssembler({requestedAssemblies, expandedAsse
   }
 
   for (let i = 0; i < requestedAssemblies.length; i++) {
-    let name = `${String(i + 1).padStart(3, '0')}_${assemblyNames[i].slice(1).join('+')}`;
-    if (name.length > 255) {
-      name = `${String(i + 1).padStart(3, '0')}_construct`;
-    }
-    const requestedAssembly = requestedAssemblies[i];
+    const name = sanitizeOutputName(outputNames[i]);
+    const requestedAssembly = JSON.parse(JSON.stringify(requestedAssemblies[i]));
     const jsonContent = formatStateForJsonExport({...requestedAssembly, appInfo});
+    const finalSequenceId = getGraftSequenceId(requestedAssembly)
+    const finalSequence = requestedAssembly.sequences.find(s => s.id === finalSequenceId)
+    finalSequence.file_content = editGenbankSequenceNameFromTextContent(finalSequence.file_content, name);
+    const finalSource = requestedAssembly.sources.find(s => s.id === finalSequenceId)
+    finalSource.output_name = name;
     files2Export.push({
       name: `${name}.json`,
       content: JSON.stringify(jsonContent, null, 2),
     });
-    const finalSequenceId = getGraftSequenceId(requestedAssembly)
-    const finalSequence = requestedAssembly.sequences.find(s => s.id === finalSequenceId)
+
     files2Export.push({
       name: `${name}.gbk`,
       content: finalSequence.file_content,

package/src/components/assembler/assembler_utils.test.js

@@ -1,6 +1,6 @@
 import { aliasedEnzymesByName, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString, getComplementSequenceString, getReverseComplementSequenceAndAnnotations } from "@teselagen/sequence-utils";
 import fs from 'fs';
-import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations, getFilesToExportFromAssembler } from "./assembler_utils";
+import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations, getFilesToExportFromAssembler, getDefaultAssemblyOutputName } from "./assembler_utils";
 import { partsToEdgesGraph } from "./graph_utils";
 
 
@@ -314,13 +314,25 @@ const dummyData = {
 
 
 
+describe('getDefaultAssemblyOutputName', () => {
+  it('returns default name from plasmid names', () => {
+    expect(getDefaultAssemblyOutputName(0, dummyData.expandedAssemblies, dummyData.plasmids)).toBe('001_p1+p5+p7');
+    expect(getDefaultAssemblyOutputName(1, dummyData.expandedAssemblies, dummyData.plasmids)).toBe('002_p1+p2+p3');
+  });
+  it('returns _construct suffix when name is too long', () => {
+    const longPlasmids = dummyData.plasmids.map(plasmid => ({ ...plasmid, plasmid_name: 'p1'.repeat(100) }));
+    expect(getDefaultAssemblyOutputName(0, dummyData.expandedAssemblies, longPlasmids)).toBe('001_construct');
+  });
+});
+
 describe('getFilesToExportFromAssembler', () => {
   it('returns the correct files', () => {
-    const files = getFilesToExportFromAssembler(dummyData);
+    const outputNames = dummyData.expandedAssemblies.map((_, i) => getDefaultAssemblyOutputName(i, dummyData.expandedAssemblies, dummyData.plasmids));
+    const files = getFilesToExportFromAssembler({ ...dummyData, outputNames });
     expect(files[0].name).toBe('assemblies.tsv');
-    expect(files[0].content).toBe('Assembly\tCategory 1\tCategory 2\tCategory 3\n1\tp1\tp5\tp7\n2\tp1\tp2\tp3');
+    expect(files[0].content).toBe('Assembly\tName\tCategory 1\tCategory 2\tCategory 3\n1\t001_p1+p5+p7\tp1\tp5\tp7\n2\t002_p1+p2+p3\tp1\tp2\tp3');
     expect(files[1].name).toBe('assemblies.csv');
-    expect(files[1].content).toBe('Assembly,Category 1,Category 2,Category 3\n1,p1,p5,p7\n2,p1,p2,p3');
+    expect(files[1].content).toBe('Assembly,Name,Category 1,Category 2,Category 3\n1,001_p1+p5+p7,p1,p5,p7\n2,002_p1+p2+p3,p1,p2,p3');
 
     const fileNames = ['001_p1+p5+p7', '002_p1+p2+p3'];
     for (let i = 0; i < 2; i++) {
@@ -328,13 +340,20 @@ describe('getFilesToExportFromAssembler', () => {
       const fileIndex2 = fileIndex1 + 1;
       expect(files[fileIndex1].name).toBe(`${fileNames[i]}.json`);
       const cloningStrategy = JSON.parse(files[fileIndex1].content);
-      expect(cloningStrategy.sequences).toEqual(dummyData.requestedAssemblies[i].sequences);
-      expect(cloningStrategy.sources).toEqual(dummyData.requestedAssemblies[i].sources);
+      // Messed up by change of name, not worth checking
+      // expect(cloningStrategy.sequences).toEqual(dummyData.requestedAssemblies[i].sequences);
+      // expect(cloningStrategy.sources).toEqual(dummyData.requestedAssemblies[i].sources);
       expect(cloningStrategy.primers).toEqual(dummyData.requestedAssemblies[i].primers);
+      expect(cloningStrategy.sources[cloningStrategy.sources.length - 1].output_name).toBe(fileNames[i]);
+      const firstline = cloningStrategy.sequences[cloningStrategy.sequences.length - 1].file_content.split('\n')[0];
+      expect(firstline).toContain(fileNames[i]);
 
       expect(files[fileIndex2].name).toBe(`${fileNames[i]}.gbk`);
       const genbankContent = files[fileIndex2].content;
-      expect(genbankContent).toBe(dummyData.requestedAssemblies[i].sequences[dummyData.requestedAssemblies[i].sequences.length - 1].file_content);
+      const expectedFileContent = dummyData.requestedAssemblies[i].sequences[dummyData.requestedAssemblies[i].sequences.length - 1].file_content
+      expect(genbankContent).toBe(expectedFileContent.replaceAll('final_product', fileNames[i]).replaceAll('expression_clone_lacZ', fileNames[i]));
+      const firstline2 = genbankContent.split('\n')[0];
+      expect(firstline2).toContain(fileNames[i]);
     }
 
 
@@ -343,11 +362,20 @@ describe('getFilesToExportFromAssembler', () => {
     const dummyData2 = {
       ...dummyData,
       plasmids: dummyData.plasmids.map(plasmid => ({...plasmid, plasmid_name: 'p1'.repeat(100)})),
-    }
-    const files = getFilesToExportFromAssembler(dummyData2);
+    };
+    const outputNames = dummyData2.expandedAssemblies.map((_, i) => getDefaultAssemblyOutputName(i, dummyData2.expandedAssemblies, dummyData2.plasmids));
+    const files = getFilesToExportFromAssembler({ ...dummyData2, outputNames });
     expect(files[2].name).toBe('001_construct.json');
     expect(files[3].name).toBe('001_construct.gbk');
     expect(files[4].name).toBe('002_construct.json');
     expect(files[5].name).toBe('002_construct.gbk');
-  })
-})
+  });
+  it('uses custom outputNames when provided', () => {
+    const customNames = ['my_assembly_1', 'my_assembly_2'];
+    const files = getFilesToExportFromAssembler({ ...dummyData, outputNames: customNames });
+    expect(files[2].name).toBe('my_assembly_1.json');
+    expect(files[3].name).toBe('my_assembly_1.gbk');
+    expect(files[4].name).toBe('my_assembly_2.json');
+    expect(files[5].name).toBe('my_assembly_2.gbk');
+  });
+});

package/src/components/assembler/index.js

@@ -1,3 +1,4 @@
+export { default as EditTextDialog } from '../form/EditTextDialog';
 export { default as AssemblerPart } from './AssemblerPart';
 export { AssemblerPartCore } from './AssemblerPart';
 export { getSvgByGlyph } from './sbol_visual_glyphs';
@@ -7,3 +8,4 @@ export { partsToGraph, graphToMSA, graphHasCycle, partsToEdgesGraph, GRAPH_SPACE
 export { usePlasmidsLogic } from './usePlasmidsLogic.js';
 export { default as PlasmidSyntaxTable } from './PlasmidSyntaxTable.jsx';
 export { default as ExistingSyntaxDialog } from './ExistingSyntaxDialog.jsx';
+export { default as SyntaxOverviewTable } from './SyntaxOverviewTable.jsx';

package/src/components/form/EditTextDialog.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, Alert } from '@mui/material';
+
+export default function EditTextDialog({
+  open,
+  value,
+  onClose,
+  onSave,
+  title = 'Edit',
+  placeholder = 'Enter text...',
+  multiline = false,
+  maxLength,
+}) {
+  const [tempValue, setTempValue] = React.useState(value || '');
+
+  React.useEffect(() => {
+    if (open) setTempValue(value || '');
+  }, [open, value]);
+
+  const handleChange = (e) => {
+    const newValue = multiline ? e.target.value.replace(/\n/g, '') : e.target.value;
+    setTempValue(maxLength ? newValue.slice(0, maxLength) : newValue);
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        {maxLength && <Alert severity="info" sx={{ mb: 2 }}>Maximum input length is {maxLength} characters</Alert>}
+        <TextField
+          autoFocus
+          multiline={multiline}
+          rows={multiline ? 6 : undefined}
+          fullWidth
+          value={tempValue}
+          onChange={handleChange}
+          placeholder={placeholder}
+          inputProps={maxLength ? { maxLength } : undefined}
+          sx={{ mt: 1 }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={() => onSave(tempValue)} variant="contained">Save</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/components/form/ServerStaticFileSelect.jsx

@@ -75,7 +75,6 @@ function ServerStaticFileSelect({ onFileSelected, multiple = false, type = 'sequ
   const label = type === 'sequence' ? 'Sequence' : 'Syntax';
 
   const onOptionsChange = React.useCallback((event, value) => {
-    console.log('onOptionsChange', value);
     if (multiple && type === 'sequence') {
       if (value.includes('__all__')) {
         const allSequences = options.filter((option) => option !== '__all__');

package/src/components/index.js

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

package/src/version.js

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