@opencloning/ui 2.1.1 → 2.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "license": "MIT",
   "name": "@opencloning/ui",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -31,8 +31,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/OpenCloning/OpenCloning_frontend.git",
-    "directory": "packages/ui"
+    "url": "https://github.com/OpenCloning/OpenCloning.git",
+    "directory": "js/packages/ui"
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",
@@ -40,16 +40,16 @@
     "@mui/icons-material": "^5.18.0",
     "@mui/material": "^5.18.0",
     "@mui/x-data-grid": "^8.28.5",
-    "@opencloning/store": "2.1.1",
-    "@opencloning/utils": "2.1.1",
+    "@opencloning/store": "2.2.1",
+    "@opencloning/utils": "2.2.1",
     "@teselagen/bio-parsers": "^0.4.38",
     "@teselagen/ove": "^0.8.42",
     "@teselagen/range-utils": "^0.3.20",
     "@teselagen/sequence-utils": "^0.3.42",
-    "@zip.js/zip.js": "^2.8.26",
-    "axios": "^1.20.0",
+    "@zip.js/zip.js": "^2.24.0",
+    "axios": "^1.21.0",
     "lodash-es": "^4.18.1",
-    "react-draggable": "^4.5.0"
+    "react-draggable": "^4.7.2"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/StandAloneOpenCloning.js

@@ -9,24 +9,24 @@ import './index.css';
 
 /**
  * StandAloneOpenCloning - Mounts the OpenCloning component into a DOM element
- * 
+ *
  * This function handles all the setup required for OpenCloning:
  * - Redux Provider with store
  * - ConfigProvider with config
  * - React rendering
- * 
+ *
  * @param {Object} options - Configuration options
  * @param {Object} options.config - Configuration object for OpenCloning
  * @param {HTMLElement} options.element - DOM element where to mount the component
  * @returns {Function} Cleanup function that unmounts the component
- * 
+ *
  * @example
  * const container = document.getElementById('opencloning-container');
  * const cleanup = StandAloneOpenCloning({
  *   config: { /* config object *\/ },
  *   element: container
  * });
- * 
+ *
  * // Later, to unmount:
  * cleanup();
  */

package/src/components/MainSequenceEditor.jsx

@@ -169,7 +169,7 @@ function MainSequenceEditor() {
       <AnnotationChangedAlert onSave={updateAnnotationInMainSequence} onCancel={onAnnotationCancel} />
       }
       <Editor {...{ editorName, ...defaultMainEditorProps, ...extraProp, height: '800' }} />
-      {domesticateDialogOpen && 
+      {domesticateDialogOpen &&
         <DomesticateDialog
           open={domesticateDialogOpen}
           onClose={() => {

package/src/components/SequenceViewer.cy.jsx

@@ -24,4 +24,3 @@ describe('<SequenceViewer /> fullscreen', () => {
     });
   });
 });
-

package/src/components/SequenceViewer.jsx

@@ -88,7 +88,7 @@ const baseViewerProps = {
   rightClickOverrides,
 };
 
-function SequenceViewer({ sequenceData, alignmentData, onUpdateAnnotation }) {
+function SequenceViewer({ sequenceData, alignmentData, onUpdateAnnotation, readOnly = false }) {
   const store = useStore();
   const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -141,32 +141,29 @@ function SequenceViewer({ sequenceData, alignmentData, onUpdateAnnotation }) {
 
   const viewerProps = {
     ...baseViewerProps,
+    readOnly,
     isFullscreen,
   };
 
   React.useEffect(() => {
-    updateEditor(store, EDITOR_NAME, { ...baseViewerProps, sequenceData, sequenceDataHistory: {} });
-  }, [store, sequenceData]);
+    updateEditor(store, EDITOR_NAME, { ...baseViewerProps, readOnly, sequenceData, sequenceDataHistory: {} });
+  }, [store, sequenceData, readOnly]);
 
   React.useEffect(() => {
-    const editorUpdate = {};
+    const editorState = store.getState().VectorEditor?.[EDITOR_NAME];
+    let panelsShown = editorState?.panelsShown ?? baseViewerProps.panelsShown;
 
     if (alignmentData) {
       addAlignment(store, alignmentData);
-      const editorState = store.getState().VectorEditor?.[EDITOR_NAME];
-      const currentPanels = editorState?.panelsShown || [[]];
-      editorUpdate.panelsShown = updatePanelsShownWithAlignment(currentPanels);
+      panelsShown = updatePanelsShownWithAlignment(panelsShown);
     } else {
-      const editorState = store.getState().VectorEditor?.[EDITOR_NAME];
-      if (editorState?.panelsShown) {
-        editorUpdate.panelsShown = removePanelFromShown(editorState.panelsShown, 'simpleAlignment');
-      }
+      panelsShown = removePanelFromShown(panelsShown, 'simpleAlignment');
     }
 
-    editorUpdate.panelsShown[0].find((panel) => panel.id === 'rail').active = !sequenceData.circular;
-    editorUpdate.panelsShown[0].find((panel) => panel.id === 'circular').active = sequenceData.circular;
-
-    updateEditor(store, EDITOR_NAME, editorUpdate);
+    // A single active tab: the alignment if there is one, otherwise the map that matches the topology
+    const activePanelId = alignmentData ? 'simpleAlignment' : (sequenceData.circular ? 'circular' : 'rail');
+    const panelsWithActive = panelsShown[0].map((panel) => ({ ...panel, active: panel.id === activePanelId }));
+    updateEditor(store, EDITOR_NAME, { panelsShown: [panelsWithActive] });
 
   }, [sequenceData.circular, store, alignmentData]);
 
@@ -210,7 +207,7 @@ function SequenceViewer({ sequenceData, alignmentData, onUpdateAnnotation }) {
         </IconButton>
       )}
       {fullscreenExitButton}
-      {annotationChanged && <AnnotationChangedAlert onSave={handleUpdateAnnotation} onCancel={clearHistory} />}
+      {annotationChanged && !readOnly && <AnnotationChangedAlert onSave={handleUpdateAnnotation} onCancel={clearHistory} />}
       <Editor
         editorName={EDITOR_NAME}
         {...viewerProps}

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

@@ -144,7 +144,7 @@ describe('<AssemblerComponent />', () => {
       cy.get('input').click();
     });
     cy.get('li').contains('Test Plasmid 1').click();
-  
+
     // Select second plasmid
     cy.get('[data-testid="plasmid-select"]').eq(1).within(() => {
       cy.get('input').click();
@@ -284,13 +284,13 @@ describe('<AssemblerComponent />', () => {
     cy.get('[data-testid="assembler-download-assemblies-button"]').click();
 
     // Check that the download was triggered (createObjectURL receives the zip Blob)
-    
+
     cy.get('@createObjectURL').should((stub) => {
       expect(stub).to.have.been.calledOnce;
       expect(stub.firstCall.args[0]).to.be.instanceOf(Blob);
       expect(stub.firstCall.args[0].type).to.equal('application/zip');
     });
-    
+
     cy.get('@addAlert').should('have.not.been.called');
 
   });

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

@@ -194,7 +194,7 @@ describe('<ExistingSyntaxDialog />', () => {
     );
 
     cy.wait('@getSyntaxes');
-    
+
     // Click first syntax (fails)
     cy.contains('Test Syntax 1').click();
     cy.wait('@getSyntaxDataError');

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -67,7 +67,7 @@ function SyntaxListItem({ syntax, onSyntaxClick }) {
         </AccordionDetails>
       </Accordion>
     </ListItem>
-    
+
   )
 }
 

package/src/components/assembler/SyntaxOverviewTable.jsx

@@ -9,7 +9,7 @@ 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) {
@@ -40,7 +40,7 @@ function OverhangRow({ row, parts, mode = 'detailed' }) {
       {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]);
@@ -58,7 +58,7 @@ function OverhangRow({ row, parts, mode = 'detailed' }) {
                 </AssemblerPartContainer>
               </TableCell>
               {showRight && (
-                <TableCell 
+                <TableCell
                   key={index}
                   sx={{ padding: 0, borderRight: 'solid 1px gray' }}
                 >

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

@@ -172,14 +172,14 @@ describe('<UploadPlasmidsButton />', () => {
         <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
       </ConfigProvider>,
     );
-    
+
     cy.get('[data-testid="load-plasmids-file-input"]').selectFile([
       'cypress/test_files/syntax/pYTK002.gb',
       'cypress/test_files/syntax/moclo_ytk_multi_part.gb',
       'cypress/test_files/syntax/pYTK095.gb',
       'cypress/test_files/sequencing/locus.gb'],
     { force: true });
-    
+
     cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
 
     cy.get('button').contains('Cancel').click();
@@ -240,7 +240,7 @@ describe('<UploadPlasmidsButton />', () => {
         return Promise.resolve({
           data: dummyIndex,
         });
-      } 
+      }
       if (url.endsWith('/example2.gb')) {
         return Promise.resolve({ data: 'wrong_format' });
       }
@@ -294,7 +294,10 @@ describe('<UploadPlasmidsButton />', () => {
         ];
         const mockDatabase = {
           name: 'MockDB',
-          GetSequencesInBulkComponent: ({ onSequencesLoaded }) => <button type="button" onClick={() => onSequencesLoaded(entries)}>Mock load</button>,
+          // Shows the default sequence types it receives, to check that plasmids are selected by default
+          GetSequencesInBulkComponent: ({ onSequencesLoaded, defaultSequenceTypes }) => (
+            <button type="button" data-default-types={JSON.stringify(defaultSequenceTypes)} onClick={() => onSequencesLoaded(entries)}>Mock load</button>
+          ),
         };
         const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
         cy.mount(
@@ -306,7 +309,7 @@ describe('<UploadPlasmidsButton />', () => {
         );
         cy.get('[data-testid="load-plasmids-button"]').click();
         cy.get('[data-testid="load-plasmids-from-database"]').contains('From MockDB').click();
-        cy.contains('button', 'Mock load').click();
+        cy.contains('button', 'Mock load').should('have.attr', 'data-default-types', '["plasmid"]').click();
         // The bulk dialog closes and the valid / invalid dialog is shown
         cy.contains('button', 'Mock load').should('not.exist');
         cy.get('[data-testid="invalid-plasmids-box"]').contains('multi_part_db');
@@ -330,6 +333,33 @@ describe('<UploadPlasmidsButton />', () => {
     });
   });
 
+  it('shows linear sequences with a single cut (e.g. PCR products) as invalid, without errors', () => {
+    // Linear, with a single BsaI site, so all its fragments end at the sequence ends
+    const pcrProduct = [
+      'LOCUS       pcr_product               28 bp    DNA     linear   UNK 01-JAN-1980',
+      'ORIGIN',
+      '        1 tgggtctcac cctagagtca cacaggac',
+      '//',
+    ].join('\n');
+    const mockDatabase = {
+      name: 'MockDB',
+      GetSequencesInBulkComponent: ({ onSequencesLoaded }) => <button type="button" onClick={() => onSequencesLoaded([{ databaseId: 1, name: 'pcr_product_db', textFileSequence: { file_content: pcrProduct } }])}>Mock load</button>,
+    };
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <DatabaseProvider value={mockDatabase}>
+          <UploadPlasmidsButton addPlasmids={cy.spy()} syntax={mocloSyntax} />
+        </DatabaseProvider>
+      </ConfigProvider>,
+    );
+    cy.get('[data-testid="load-plasmids-button"]').click();
+    cy.get('[data-testid="load-plasmids-from-database"]').contains('From MockDB').click();
+    cy.contains('button', 'Mock load').click();
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('pcr_product_db');
+    cy.get('[data-testid="valid-plasmids-box"]').should('not.exist');
+    cy.contains('button', 'Import valid plasmids').should('be.disabled');
+  });
+
   it('shows an error if a database sequence cannot be parsed', () => {
     const mockDatabase = {
       name: 'MockDB',

package/src/components/assembler/UploadPlasmidsButton.jsx

@@ -172,7 +172,7 @@ function UploadPlasmidsButton({ addPlasmids, syntax }) {
     )}
     {openDialog === 'database' && (
       <LoadPlasmidsDialog title={`Load Plasmids from ${database.name}`} onLoad={loadPlasmidsFromDatabase} onClose={closeDialog}>
-        {(onLoad) => <database.GetSequencesInBulkComponent onSequencesLoaded={onLoad} />}
+        {(onLoad) => <database.GetSequencesInBulkComponent onSequencesLoaded={onLoad} defaultSequenceTypes={['plasmid']} />}
       </LoadPlasmidsDialog>
     )}
     <ImportPlasmidsDialog

package/src/components/assembler/assembler_utils.js

@@ -92,11 +92,13 @@ export function longestFeatureInDigestFragment(digestFragment, sequenceData) {
 export function getSimplifiedDigestFragments(sequenceData, enzymes) {
   const { sequence, circular } = sequenceData;
 
+  // In linear sequences, the fragments at the ends have a "cut" at the start / end of the sequence,
+  // which has no overhang, so they cannot be parts.
   const digestFragments = getDigestFragmentsForRestrictionEnzymes(
     sequence,
     circular,
     enzymes,
-  );
+  ).filter(({ cut1, cut2 }) => cut1.type !== 'START_OR_END_OF_SEQ' && cut2.type !== 'START_OR_END_OF_SEQ');
 
   const longestFeatures = digestFragments.map(fragment => longestFeatureInDigestFragment(fragment, sequenceData));
   const simplifiedDigestFragments = digestFragments.map(simplifyDigestFragment);

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

@@ -179,6 +179,25 @@ describe('assignSequenceToSyntaxPart', () => {
     const result = assignSequenceToSyntaxPart(sequenceData, enzymes, graph);
     expect(result).toEqual([]);
   })
+
+  it('ignores the fragments at the ends of linear sequences (e.g. PCR products)', () => {
+    const parts = [{left_overhang: 'TACT', right_overhang: 'AATG'}, {left_overhang: 'AATG', right_overhang: 'AGGT'}];
+    const graph = partsToEdgesGraph(parts);
+    const enzymes = [aliasedEnzymesByName["bsai"]];
+    // The part between the two cuts is found, the fragments up to the sequence ends are ignored
+    expect(assignSequenceToSyntaxPart({ sequence: sequenceBsaI, circular: false }, enzymes, graph))
+      .toEqual([{left_overhang: 'TACT', right_overhang: 'AATG', longestFeature: null}]);
+    // A single cut only gives fragments with a sequence end
+    expect(assignSequenceToSyntaxPart({ sequence: 'tgggtctcaTACTagagtc', circular: false }, enzymes, graph)).toEqual([]);
+  })
+
+  it('does not assign a sequence that the enzyme does not cut', () => {
+    const parts = [{left_overhang: 'TACT', right_overhang: 'AATG'}, {left_overhang: 'AATG', right_overhang: 'AGGT'}];
+    const graph = partsToEdgesGraph(parts);
+    const enzymes = [aliasedEnzymesByName["bsai"]];
+    expect(assignSequenceToSyntaxPart({ sequence: 'AAAAAAA', circular: true }, enzymes, graph)).toEqual([]);
+    expect(assignSequenceToSyntaxPart({ sequence: 'AAAAAAA', circular: false }, enzymes, graph)).toEqual([]);
+  })
 });
 
 describe('tripletsToTranslation', () => {
@@ -195,10 +214,10 @@ describe('tripletsToTranslation', () => {
   it('translates valid triplets to amino acid codes', () => {
     // ATG = Methionine (Met)
     expect(tripletsToTranslation(['ATG'])).toBe('Met');
-    
+
     // TTT = Phenylalanine (Phe)
     expect(tripletsToTranslation(['TTT'])).toBe('Phe');
-    
+
     // Multiple triplets
     expect(tripletsToTranslation(['ATG', 'TTT', 'GCA'])).toBe('MetPheAla');
   });
@@ -230,9 +249,9 @@ describe('partDataToDisplayData', () => {
       left_inside: 'TTAA',
       right_inside: 'AATT'
     };
-    
+
     const result = partDataToDisplayData(data);
-    
+
     expect(result.leftOverhangRc).toBe(getComplementSequenceString('ATGC'));
     expect(result.rightOverhangRc).toBe(getComplementSequenceString('CGTA'));
     expect(result.leftInsideRc).toBe(getComplementSequenceString('TTAA'));
@@ -252,9 +271,9 @@ describe('partDataToDisplayData', () => {
       right_overhang: '',
       right_inside: ''
     };
-    
+
     const result = partDataToDisplayData(data);
-    
+
     // ATG CGC A... should translate to Met Arg...
     expect(result.leftTranslationOverhang).toBe('Me');
     expect(result.leftTranslationInside).toBe('tArg');

package/src/components/assembler/graph_utils.js

@@ -46,41 +46,41 @@ export function openCycleAtNode(graph, cutNode) {
   }
   return newGraph;
 }
-  
+
 // Convert DAG to MSA-like matrix (rows = paths, columns = topological generations)
 function dagToMSA(graph) {
   const generations = topologicalGenerations(graph);
   const nodeToCol = new Map();
   generations.forEach((gen, col) => gen.forEach(node => nodeToCol.set(node, col)));
-  
+
   const sources = graph.nodes().filter(n => graph.inDegree(n) === 0);
   const sinks = graph.nodes().filter(n => graph.outDegree(n) === 0);
-  
+
   const allPaths = sources.flatMap(src => sinks.flatMap(sink => allSimplePaths(graph, src, sink)));
-  
+
   return allPaths.map(path => {
     const row = new Array(generations.length).fill(GRAPH_SPACER);
     path.forEach(node => { row[nodeToCol.get(node)] = node; });
     return row;
   });
 }
-  
+
 // Find independent segments in the MSA
 // Two adjacent columns are in the same segment if they're correlated (vary together)
 // They're independent if all combinations of values exist
 function getIndependentSegments(msa) {
   if (msa.length === 0) return [];
-  
+
   const numCols = msa[0].length;
   const uniqueValues = col => new Set(msa.map(row => row[col]));
   const isStable = col => uniqueValues(col).size === 1;
-  
+
   // Check if two columns vary independently
   const areIndependent = (col1, col2) => {
     const pairs = new Set(msa.map(row => `${row[col1]}|${row[col2]}`));
     return pairs.size > Math.max(uniqueValues(col1).size, uniqueValues(col2).size);
   };
-  
+
   // Find segment boundaries
   const boundaries = [0];
   for (let col = 0; col < numCols - 1; col++) {
@@ -90,7 +90,7 @@ function getIndependentSegments(msa) {
     }
   }
   boundaries.push(numCols);
-  
+
   // Build segments
   return boundaries.slice(0, -1).map((start, i) => {
     const end = boundaries[i + 1] - 1;
@@ -98,17 +98,17 @@ function getIndependentSegments(msa) {
     return { start, end, stable: isStable(start), alternatives: alts };
   });
 }
-  
+
 // Find minimum set of rows that covers all unique alternatives (greedy set cover)
 function minimumCoveringRows(msa) {
   if (msa.length === 0) return [];
-  
+
   const segments = getIndependentSegments(msa).filter(s => !s.stable);
   if (segments.length === 0) return [msa[0]];
-  
+
   // All alternatives that need to be covered
   const allAlts = new Set(segments.flatMap((seg, i) => seg.alternatives.map(alt => `${i}:${alt}`)));
-  
+
   // Count non-gap elements in a row (gap is '---------')
   const countElements = row => row.filter(cell => cell !== GRAPH_SPACER).length;
 
@@ -118,12 +118,12 @@ function minimumCoveringRows(msa) {
     elements: countElements(row),
     covered: new Set(segments.map((seg, i) => `${i}:${row.slice(seg.start, seg.end + 1).join(' | ')}`))
   }));
-  
+
   // Greedy: pick rows that cover the most uncovered alternatives
   // When tied, prefer rows with more elements (fewer gaps)
   const selected = [];
   const covered = new Set();
-  
+
   while (covered.size < allAlts.size) {
     const best = rowCoverage.reduce((best, rc) => {
       const newCount = [...rc.covered].filter(a => !covered.has(a)).length;
@@ -132,12 +132,12 @@ function minimumCoveringRows(msa) {
       if (newCount === best.count && rc.elements > best.elements) return { rc, count: newCount, elements: rc.elements };
       return best;
     }, { rc: null, count: 0, elements: -1 });
-  
+
     if (!best.rc) break;
     selected.push(best.rc.row);
     best.rc.covered.forEach(a => covered.add(a));
   }
-  
+
   // Sort by number of elements (most elements first)
   return selected.sort((a, b) => countElements(b) - countElements(a));
 }

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

@@ -112,7 +112,7 @@ describe('openCycleAtNode', () => {
     graph.addEdge('A', 'B');
     graph.addEdge('B', 'C');
     graph.addEdge('C', 'B'); // Creates cycle
-    
+
     expect(graph.inDegree('B')).toBe(2);
     const newGraph = openCycleAtNode(graph, 'B');
     expect(newGraph.inDegree('B')).toBe(0);
@@ -126,7 +126,7 @@ describe('openCycleAtNode', () => {
     graph.addNode('B');
     graph.addEdge('A', 'B');
     graph.addEdge('B', 'A'); // Cycle
-    
+
     const newGraph = openCycleAtNode(graph, 'A');
     expect(newGraph.outDegree('A')).toBe(1);
     expect(newGraph.hasEdge('A', 'B')).toBe(true);
@@ -137,7 +137,7 @@ describe('openCycleAtNode', () => {
     graph.addNode('A');
     graph.addNode('B');
     graph.addEdge('A', 'B');
-    
+
     const newGraph = openCycleAtNode(graph, 'A');
     expect(newGraph.inDegree('A')).toBe(0);
     expect(newGraph.hasEdge('A', 'B')).toBe(true);
@@ -203,7 +203,7 @@ describe('graphHasCycle', () => {
     graph.addNode('C');
     graph.addEdge('A', 'B');
     graph.addEdge('B', 'C');
-    
+
     expect(graphHasCycle(graph)).toBe(false);
   });
 
@@ -213,7 +213,7 @@ describe('graphHasCycle', () => {
     graph.addNode('B');
     graph.addEdge('A', 'B');
     graph.addEdge('B', 'A');
-    
+
     expect(graphHasCycle(graph)).toBe(true);
   });
 
@@ -221,7 +221,7 @@ describe('graphHasCycle', () => {
     const graph = new DirectedGraph();
     graph.addNode('A');
     graph.addEdge('A', 'A');
-    
+
     expect(graphHasCycle(graph)).toBe(true);
   });
 
@@ -233,7 +233,7 @@ describe('graphHasCycle', () => {
   it('handles single node with no edges', () => {
     const graph = new DirectedGraph();
     graph.addNode('A');
-    
+
     expect(graphHasCycle(graph)).toBe(false);
   });
 });

package/src/components/assembler/sbol_visual_glyphs.js

@@ -33,4 +33,3 @@ export const sbolVisualGlyphs = {
 export const getSvgByGlyph = (glyphName) => {
   return sbolVisualGlyphs[glyphName] || sbolVisualGlyphs['engineered-region'] // fallback to engineered-region if not found
 }
-

package/src/components/assembler/useAssembler.js

@@ -122,4 +122,3 @@ export const useAssembler = () => {
 
   return { requestSources, requestAssemblies }
 }
-

package/src/components/domesticate/DomesticateDialog.jsx

@@ -197,7 +197,7 @@ export default function DomesticateDialog({ open, onClose, initialContext, mainS
               ))}
             </Select>
           </FormControl>
-          {location.includes('join') && cloningType === 'synthesis' && 
+          {location.includes('join') && cloningType === 'synthesis' &&
           <Alert severity="info" sx={{ mb: 2 }}>Synthesis will remove introns in this feature</Alert>
           }
           <FormControl fullWidth margin="dense">

package/src/components/dummy/DummyInterface.js

@@ -38,7 +38,8 @@ export default {
   // Function to get the sequencing files from the database, see docs for what the return value should be
   getSequencingFiles: null,
   // Component for loading several sequences at once (e.g. in the assembler), calls
-  // onSequencesLoaded with an array of { databaseId, name, textFileSequence }
+  // onSequencesLoaded with an array of { databaseId, name, textFileSequence }. Optional defaultSequenceTypes
+  // (e.g. ['plasmid']) sets which sequence types are selected by default when loading by tag
   GetSequencesInBulkComponent: null,
   // Dialog for submitting several cloning strategies at once (e.g. the assembler products), receives
   // { files, onClose, onSuccess }, where files is an array of File (cloning strategy JSON)

package/src/components/form/ChipMultiSelect.cy.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import ChipMultiSelect from './ChipMultiSelect';
+import { clickMultiSelectOption } from '../../../../../cypress/e2e/common_functions';
+
+const OPTIONS = [{ id: 1, label: 'One' }, { id: 2, label: 'Two' }, { id: 3, label: 'Three' }];
+
+function Wrapper({ initialValue = [], onChange, ...rest }) {
+  const [value, setValue] = React.useState(initialValue);
+  return (
+    <ChipMultiSelect
+      label="Numbers"
+      options={OPTIONS}
+      value={value}
+      onChange={(ids) => { setValue(ids); onChange(ids); }}
+      {...rest}
+    />
+  );
+}
+
+describe('<ChipMultiSelect />', () => {
+  it('shows the selected options as chips and calls onChange with ids', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    cy.mount(<Wrapper initialValue={[2]} onChange={onChangeSpy} />);
+
+    cy.contains('.MuiChip-root', 'Two').should('exist');
+    clickMultiSelectOption('Numbers', 'Three', 'div');
+    cy.get('@onChangeSpy').should('have.been.calledWith', [2, 3]);
+    cy.contains('.MuiChip-root', 'Two').find('.MuiChip-deleteIcon').click();
+    cy.get('@onChangeSpy').should('have.been.calledWith', [3]);
+  });
+
+  it('ignores values that are not in the options', () => {
+    cy.mount(<Wrapper initialValue={[1, 99]} onChange={cy.spy()} />);
+    cy.get('.MuiChip-root').should('have.length', 1).and('contain', 'One');
+  });
+
+  it('shows the placeholder only when nothing is selected', () => {
+    cy.mount(<Wrapper initialValue={[1]} onChange={cy.spy()} placeholder="Any number" />);
+    cy.get('input[placeholder="Any number"]').should('not.exist');
+    cy.contains('.MuiChip-root', 'One').find('.MuiChip-deleteIcon').click();
+    cy.get('input[placeholder="Any number"]').should('exist');
+  });
+});

package/src/components/form/ChipMultiSelect.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Autocomplete, Chip, TextField } from '@mui/material';
+
+/**
+ * Multi-select that shows the selected options as chips.
+ * options is an array of { id, label }, value and onChange use arrays of ids.
+ * placeholder is shown when nothing is selected, id is set on the input.
+ */
+function ChipMultiSelect({ label, options, value, onChange, loading, disabled, sx, size = 'small', placeholder, id }) {
+  const optionById = React.useMemo(
+    () => new Map(options.map((opt) => [opt.id, opt])),
+    [options],
+  );
+
+  const selectedOptions = React.useMemo(
+    () => value.map((optionId) => optionById.get(optionId)).filter(Boolean),
+    [value, optionById],
+  );
+
+  return (
+    <Autocomplete
+      multiple
+      size={size}
+      options={options}
+      getOptionLabel={(option) => option.label}
+      isOptionEqualToValue={(option, selected) => option.id === selected.id}
+      value={selectedOptions}
+      onChange={(_, newValue) => {
+        const ids = newValue.map((opt) => opt.id);
+        onChange(ids);
+      }}
+      renderTags={(tagValue, getTagProps) =>
+        tagValue.map((option, index) => (
+          <Chip
+            {...getTagProps({ index })}
+            key={option.id}
+            label={option.label}
+            size="small"
+          />
+        ))
+      }
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          id={id ?? params.id}
+          label={label}
+          variant="outlined"
+          placeholder={selectedOptions.length === 0 ? placeholder : undefined}
+          // Keep the label above the input, so that it does not cover the placeholder
+          InputLabelProps={placeholder ? { ...params.InputLabelProps, shrink: true } : params.InputLabelProps}
+        />
+      )}
+      loading={loading}
+      disabled={disabled}
+      sx={sx}
+    />
+  );
+}
+
+export default ChipMultiSelect;

package/src/components/form/GetRequestMultiSelect.jsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Autocomplete, TextField, Alert, Button, CircularProgress, FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material';
 
-export default function GetRequestMultiSelect({ 
+export default function GetRequestMultiSelect({
   getOptionsFromResponse,
   url,
   label,

package/src/components/index.js

@@ -4,6 +4,7 @@ export { default as EditTextDialog } from './form/EditTextDialog';
 export { default as useUrlParamsLoader } from '../hooks/useUrlParamsLoader';
 export { default as useInitializeApp } from '../hooks/useInitializeApp';
 export { default as QuerySelect } from './form/QuerySelect';
+export { default as ChipMultiSelect } from './form/ChipMultiSelect';
 export { default as QueryStatusWrapper } from './form/QueryStatusWrapper';
 export { default as TextFieldQueryValidated } from './form/TextFieldQueryValidated';
 export { default as useDebouncedSearchQuery } from '../hooks/useDebouncedSearchQuery';

package/src/components/navigation/MainAppBar.css

@@ -22,5 +22,3 @@
     font-weight: 200;
     text-align: center;
 }
-
-

package/src/components/navigation/MainAppBar.jsx

@@ -85,7 +85,7 @@ function MainAppBar() {
   const helpMenu = [
     { display: 'Newsletter', onClick: () => window.open('https://eepurl.com/h9-n71') },
     { display: 'About the project', onClick: () => window.open('https://github.com/OpenCloning/OpenCloning') },
-    { display: 'GitHub repository', onClick: () => window.open('https://github.com/OpenCloning/OpenCloning_frontend') },
+    { display: 'GitHub repository', onClick: () => window.open('https://github.com/OpenCloning/OpenCloning') },
     { display: 'Demo videos', onClick: () => window.open('https://www.youtube.com/watch?v=n0hedzvpW88&list=PLpv3x-ensLZkJToD2E6ejefADmHcUPYSJ&index=1') },
     { display: 'App version', onClick: () => setOpenVersionDialog(true) },
   ];

package/src/components/primers/PrimerList.jsx

@@ -113,7 +113,7 @@ function PrimerList() {
                 >
                   {`Import from ${database.name}`}
                 </Button>
-                
+
               )}
               </ButtonGroup>
             </div>

package/src/components/primers/import_primers/styles.css

@@ -57,4 +57,3 @@
   align-items: center;
   gap: 2em;
 }
-

package/src/components/settings/SettingsTab.jsx

@@ -165,5 +165,3 @@ function SettingsTab() {
 }
 
 export default SettingsTab;
-
-

package/src/components/sources/SourceGenomeRegion.cy.jsx

@@ -31,7 +31,7 @@ describe('<AssemblyIdSelector />', () => {
     }).as('getAssemblyInfo');
 
     cy.intercept('GET', 'https://api.ncbi.nlm.nih.gov/datasets/v2alpha/genome/accession/GCF_000002945.3/dataset_report*', {
-      statusCode: 200, 
+      statusCode: 200,
       body: {
         reports: [{
           accession: 'GCF_000002945.3',
@@ -49,7 +49,7 @@ describe('<AssemblyIdSelector />', () => {
 
     cy.mount(
       <ConfigProvider config={config}>
-        <AssemblyIdSelector 
+        <AssemblyIdSelector
           setAssemblyId={setAssemblyId}
           setHasAnnotation={setHasAnnotation}
           onAssemblyIdChange={onAssemblyIdChange}
@@ -188,5 +188,3 @@ describe('<SequenceAccessionPicker />', () => {
 
   });
 });
-
-

package/src/components/sources/repositoryMetadata.js

@@ -11,4 +11,3 @@ const repositoryMetadata = {
 };
 
 export default repositoryMetadata;
-

package/src/components/verification/VerificationFileDialog.jsx

@@ -18,7 +18,7 @@ import {
 } from '@mui/material';
 import { batch, shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
 import { isEqual } from 'lodash-es';
-import { getTeselaJsonFromBase64, file2base64 } from '@opencloning/utils/readNwrite';
+import { getTeselaJsonFromBase64, readSequencingFile } from '@opencloning/utils/readNwrite';
 import SequencingFileRow from './SequencingFileRow';
 import { cloningActions } from '@opencloning/store/cloning';
 import useStoreEditor from '../../hooks/useStoreEditor';
@@ -66,10 +66,10 @@ export default function VerificationFileDialog({ id, dialogOpen, setDialogOpen }
 
     // Read the new sequencing files
     const parsedSequencingFiles = await Promise.all(newFiles.map(async (newFile) => {
-      const base64str = await file2base64(newFile);
+      const { base64str, teselaJson } = await readSequencingFile(newFile);
       return {
         sequence_id: id,
-        trace: (await getTeselaJsonFromBase64(base64str, newFile.name)).sequence,
+        trace: teselaJson.sequence,
         base64str,
         file_name: newFile.name,
         file_type: 'Sequencing file',

package/src/hooks/useInitializeApp.js

@@ -11,4 +11,3 @@ export default function useInitializeApp() {
     clearVerificationFileContents();
   }, []);
 }
-

package/src/hooks/useSequencingAlignment.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useMutation } from '@tanstack/react-query';
-import { buildAlignmentTrack, buildReferenceTrack, buildAlignmentConfig } from '@opencloning/utils/alignmentUtils';
+import { buildSequencingAlignmentConfig } from '@opencloning/utils/alignmentUtils';
 import useBackendHttpClient from './useBackendHttpClient';
 
 export default function useSequencingAlignment({ onError } = {}) {
@@ -10,14 +10,7 @@ export default function useSequencingAlignment({ onError } = {}) {
     // parsedFiles: [{ fileName, fileContent }] where fileContent is getTeselaJsonFromBase64 output
     const traces = parsedFiles.map((f) => f.fileContent.sequence);
     const resp = await httpClient.post('align_sanger', { sequence: sequenceModel, traces });
-
-    const referenceTrack = buildReferenceTrack(sequenceData, resp.data[0]);
-    const otherTracks = parsedFiles.map((f, i) => {
-      const alignmentFile = { file_name: f.fileName, alignment: [resp.data[0], resp.data[i + 1]] }; // eslint-disable-line camelcase
-      return buildAlignmentTrack(f.fileContent, alignmentFile);
-    });
-
-    return buildAlignmentConfig(sequenceModel.id, sequenceData, [referenceTrack, ...otherTracks]);
+    return buildSequencingAlignmentConfig(sequenceModel, sequenceData, parsedFiles, resp.data);
   }, [httpClient]);
 
   return useMutation({ mutationFn: fetchAlignments, onError });

package/src/index.js

@@ -7,4 +7,3 @@ export * from './components/index.js';
 export { StandAloneOpenCloning } from './StandAloneOpenCloning.js';
 // Export version - replaced at publish time via prepack script
 export { version } from './version.js';
-

package/src/providers/ConfigProvider.jsx

@@ -4,7 +4,7 @@ const ConfigContext = createContext(null);
 
 /**
  * ConfigProvider - Provides application configuration via React Context
- * 
+ *
  * @param {Object} props
  * @param {Object} props.config - Config object
  * @param {React.ReactNode} props.children - Child components
@@ -27,7 +27,7 @@ export function ConfigProvider({ config, children }) {
 
 /**
  * useConfig - Hook to access configuration from ConfigProvider
- * 
+ *
  * @returns {Object} Configuration object with properties:
  *   - backendUrl: string
  *   - showAppBar: boolean
@@ -36,12 +36,12 @@ export function ConfigProvider({ config, children }) {
  *   - requiresBackendAuth: boolean
  *   - noExternalRequests: boolean
  *   - database: string | null
- * 
+ *
  * @throws {Error} If used outside of ConfigProvider
  */
 export function useConfig() {
   const context = useContext(ConfigContext);
-  
+
   if (context === null) {
     throw new Error('useConfig must be used within a ConfigProvider');
   }

package/src/version.js

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