@opencloning/ui 1.1.2 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @opencloning/ui
 
+## 1.3.0
+
+### Minor Changes
+
+- [#597](https://github.com/manulera/OpenCloning_frontend/pull/597) [`d5a456d`](https://github.com/manulera/OpenCloning_frontend/commit/d5a456d70ccfe949b21aae260d2c99507ff6a88e) Thanks [@manulera](https://github.com/manulera)! - Changes associated with new "Syntax Builder" application for creating and managing modular cloning syntaxes, along with significant refactoring of assembler components to support both the new app and the existing OpenCloning application.
+
+  - Added a new standalone app (`apps/syntax-builder`) for building and editing cloning syntaxes with visual previews
+  - Refactored assembler components to be more modular and reusable across applications
+  - Enhanced file parsing utilities to support bidirectional conversion between JSON and delimited formats
+  - Added graph-based validation and visualization for syntax parts using the graphology library
+
+### Patch Changes
+
+- Updated dependencies [[`d5a456d`](https://github.com/manulera/OpenCloning_frontend/commit/d5a456d70ccfe949b21aae260d2c99507ff6a88e)]:
+  - @opencloning/store@1.3.0
+  - @opencloning/utils@1.3.0
+
+## 1.2.0
+
+### Minor Changes
+
+- [#595](https://github.com/manulera/OpenCloning_frontend/pull/595) [`1b28cc5`](https://github.com/manulera/OpenCloning_frontend/commit/1b28cc5852460a072982dc529b58fc9607fae21f) Thanks [@manulera](https://github.com/manulera)! - Minor improvements and bug fixes:
+
+  - include name of tracks in alignment + update ove to display correct Track Properties table
+  - fix display main sequence when alignments are present
+  - change default minimum hib length to 14 for primer design
+  - Gibson primer design: default to circular assembly, force circular for single input assemblies
+  - Gibson primer design: make product sequence preview circular when assembly is circular
+  - Primer design: in circular assemblies of one fragment only, display the spacer before the fragment in the preview.
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.2.0
+  - @opencloning/utils@1.2.0
+
 ## 1.1.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -10,6 +10,7 @@
   "exports": {
     ".": "./src/index.js",
     "./components": "./src/components/index.js",
+    "./components/assembler": "./src/components/assembler/index.js",
     "./providers/ConfigProvider": "./src/providers/index.js",
     "./hooks/useConfig": "./src/hooks/useConfig.js",
     "./standalone": "./src/StandAloneOpenCloning.js"
@@ -24,10 +25,10 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.1.2",
-    "@opencloning/utils": "1.1.2",
+    "@opencloning/store": "1.3.0",
+    "@opencloning/utils": "1.3.0",
     "@teselagen/bio-parsers": "^0.4.32",
-    "@teselagen/ove": "^0.8.18",
+    "@teselagen/ove": "^0.8.30",
     "@teselagen/range-utils": "^0.3.13",
     "@teselagen/sequence-utils": "^0.3.35",
     "@zip.js/zip.js": "^2.7.62",

package/src/components/MainSequenceEditor.jsx

@@ -65,6 +65,8 @@ function MainSequenceEditor() {
     (state) => {
       const history = state.VectorEditor.mainEditor?.sequenceDataHistory;
       if (!history) return false;
+      const sequenceId = state.VectorEditor.mainEditor?.sequenceData?.id;
+      if (sequenceId === 'opencloning_primer_design_product') return false;
       return state.cloning.mainSequenceId && Object.keys(history).length > 0 && history.future.length === 0;
     }
   );

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

@@ -0,0 +1,364 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
+import { AssemblerComponent, UploadPlasmidsButton } from './Assembler';
+import mocloSyntax from '../../../../../cypress/test_files/syntax/moclo_syntax.json';
+
+mocloSyntax.overhangNames = {
+  ...mocloSyntax.overhangNames,
+  CCCT: 'CCCT_overhang',
+  AACG: 'AACG_overhang',
+};
+
+// Test config
+const testConfig = {
+  backendUrl: 'http://localhost:8000',
+  showAppBar: false,
+  noExternalRequests: false,
+  enableAssembler: true,
+  enablePlannotate: false,
+};
+
+const dummyResponse = {
+  sources: [
+    {
+      id: 1,
+      type: "ManuallyTypedSource",
+      output_name: null,
+      database_id: null,
+      input: []
+    }
+  ],
+  sequences: [
+    {
+      id: 1,
+      type: "TextFileSequence",
+      sequence_file_format: "genbank",
+      overhang_crick_3prime: 0,
+      overhang_watson_3prime: 0,
+      file_content: "LOCUS       name                       5 bp    DNA     linear   UNK 01-JAN-1980\nDEFINITION  description.\nACCESSION   id\nVERSION     id\nKEYWORDS    .\nSOURCE      .\n  ORGANISM  .\n            .\nFEATURES             Location/Qualifiers\nORIGIN\n        1 aaaaa\n//"
+    }
+  ]
+}
+
+// Test data
+const mockPlasmids = [
+  {
+    id: 1,
+    plasmid_name: 'Test Plasmid 1',
+    left_overhang: 'CCCT',
+    right_overhang: 'AACG',
+    key: 'CCCT-AACG',
+    type: 'AddgeneIdSource',
+    source: {
+      id: 1,
+      type: 'AddgeneIdSource',
+      input: [],
+      repository_id: '12345',
+    },
+  },
+  {
+    id: 2,
+    plasmid_name: 'Test Plasmid 2',
+    left_overhang: 'AACG',
+    right_overhang: 'CCCT',
+    key: 'AACG-CCCT',
+    type: 'AddgeneIdSource',
+    source: {
+      id: 2,
+      type: 'AddgeneIdSource',
+      input: [],
+      repository_id: '67890',
+    },
+  },
+];
+
+const mockCategories = [
+  {
+    id: 1,
+    displayName: 'Category 1',
+    left_overhang: 'CCCT',
+    right_overhang: 'AACG',
+    key: 'CCCT-AACG',
+  },
+  {
+    id: 2,
+    displayName: 'Category 2',
+    left_overhang: 'AACG',
+    right_overhang: 'CCCT',
+    key: 'AACG-CCCT',
+  },
+];
+
+describe('<AssemblerComponent />', () => {
+  beforeEach(() => {
+    // Set up a complete assembly for testing
+    cy.window().then((win) => {
+      // Ensure we have a clean state
+      win.localStorage.clear();
+    });
+
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <AssemblerComponent
+          plasmids={mockPlasmids}
+          categories={mockCategories}
+        />
+      </ConfigProvider>,
+    );
+    // Select first plasmid
+    cy.get('[data-testid="plasmid-select"]').first().within(() => {
+      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();
+    });
+    cy.get('li').contains('Test Plasmid 2').click();
+  });
+
+  it('displays error when fetching sequence for a plasmid fails', () => {
+    // Intercept the requestSources call (POST to addgene endpoint)
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', {
+      statusCode: 500,
+      body: {
+        detail: 'Failed to fetch plasmid sequence',
+      },
+    }).as('fetchPlasmidError');
+
+    // Click submit button
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+
+    // Wait for the error request
+    cy.wait('@fetchPlasmidError');
+
+    // Check that error message is displayed
+    cy.get('.MuiAlert-colorError').should('exist');
+    cy.contains('Error fetching sequence for').should('exist');
+    cy.contains('Test Plasmid 1').should('exist');
+  });
+
+  it('displays error when assembling sequences fails', () => {
+    // Mock successful source fetching
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', {
+      statusCode: 200,
+      body: dummyResponse,
+    }).as('fetchSourceSuccess');
+
+    // Mock failed assembly request
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', {
+      statusCode: 500,
+      body: {
+        detail: 'Failed to assemble sequences',
+      },
+    }).as('assemblyError');
+
+    // Click submit button
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+
+    // Wait for both requests
+    cy.wait('@fetchSourceSuccess');
+    cy.wait('@assemblyError');
+
+    // Check that error message is displayed
+    cy.get('.MuiAlert-colorError').should('exist');
+    cy.contains('Error assembling').should('exist');
+    cy.contains('Test Plasmid 1').should('exist');
+    cy.contains('Test Plasmid 2').should('exist');
+  });
+
+  it('displays network error message correctly', () => {
+    // Intercept with network error
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', {
+      forceNetworkError: true,
+    }).as('networkError');
+
+    // Click submit button
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+
+    // Wait for the error request
+    cy.wait('@networkError');
+
+    // Check that error message is displayed
+    cy.get('.MuiAlert-colorError').should('exist');
+    cy.contains('Error fetching sequence for').should('exist');
+  });
+
+  it('clears error message when assembly selection is cleared', () => {
+    // Intercept with error
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', {
+      statusCode: 500,
+      body: {
+        detail: 'Failed to fetch plasmid sequence',
+      },
+    }).as('fetchPlasmidError');
+
+
+    // Click submit button to trigger error
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+    cy.wait('@fetchPlasmidError');
+
+    // Verify error is displayed
+    cy.get('.MuiAlert-colorError').should('exist');
+
+    // Clear the assembly by clicking the clear button in the first category select
+    cy.get('[data-testid="CancelIcon"]').first().click({ force: true });
+
+    // Error should be cleared
+    cy.get('.MuiAlert-colorError').should('not.exist');
+  });
+  it('works in normal case', () => {
+    // Mock successful source fetching
+    cy.intercept('POST', 'http://localhost:8000/repository_id*', {
+      statusCode: 200,
+      body: dummyResponse,
+    }).as('fetchSourceSuccess');
+    // Mock assembly request
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', {
+      statusCode: 200,
+      body: dummyResponse,
+    }).as('assemblySuccess');
+
+    // Click submit button
+    cy.get('[data-testid="assembler-submit-button"]').should('be.visible').click();
+    cy.wait('@fetchSourceSuccess');
+
+    // Check that the table displays the name
+    cy.get('[data-testid="assembler-product-table"]').contains('Category 1').should('exist');
+    cy.get('[data-testid="assembler-product-table"]').contains('Category 2').should('exist');
+    cy.get('[data-testid="assembler-product-table"]').contains('Test Plasmid 1').should('exist');
+    cy.get('[data-testid="assembler-product-table"]').contains('Test Plasmid 2').should('exist');
+  });
+});
+
+describe('<UploadPlasmidsButton />', () => {
+  beforeEach(() => {
+    cy.window().then((win) => {
+      win.localStorage.clear();
+    });
+  });
+
+  it('calls addPlasmids with correctly formatted valid plasmid', () => {
+    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+
+    cy.get('button').contains('Add Plasmids').siblings('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 });
+
+    // Wait for the dialog to appear (indicating plasmids were processed)
+    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
+
+    cy.get('@addPlasmidsSpy').should('not.have.been.called');
+
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('Invalid Plasmids').should('exist');
+    cy.get('[data-testid="valid-plasmids-box"]').contains('Valid Plasmids').should('exist');
+
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('pYTK057')
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('moclo_ytk_multi_part.gb')
+    cy.get('[data-testid="invalid-plasmids-box"] .MuiChip-label').contains('ATCC-TGGC')
+    cy.get('[data-testid="invalid-plasmids-box"] .MuiChip-label').contains('CCCT-AACG (CCCT_overhang-AACG_overhang)')
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('Contains multiple parts')
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('locus.gb')
+
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(0).should('contain', 'pYTK002')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(1).should('contain', 'pYTK002.gb')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(2).should('contain', 'CCCT-AACG (CCCT_overhang-AACG_overhang)')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(3).should('contain', '1')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(4).should('contain', 'ConS')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).then(($el) => {
+      const bgColor = window.getComputedStyle($el[0]).backgroundColor;
+      cy.wrap(bgColor).should('equal', 'rgb(132, 197, 222)');
+    });
+
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(0).should('contain', 'pYTK095')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(1).should('contain', 'pYTK095.gb')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(2).should('contain', 'TACA-CCCT (TACA-CCCT_overhang)')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(3).should('contain', 'Spans multiple parts')
+    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(4).should('contain', 'AmpR')
+
+    // Click the import button
+    cy.contains('button', 'Import valid plasmids').click();
+
+    // Verify addPlasmids was called
+    cy.get('@addPlasmidsSpy').should('have.been.called');
+
+    // Verify it was called with an array and check structure
+    cy.get('@addPlasmidsSpy').then((spy) => {
+      const firstCall = spy.getCall(0);
+      console.log('firstCall', firstCall.args);
+      cy.wrap(firstCall.args[0]).should('be.an', 'array');
+      cy.wrap(firstCall.args[0]).should('have.length', 2);
+
+      const firstPlasmid = firstCall.args[0][0];
+      
+      cy.wrap(firstPlasmid.file_name).should('equal', 'pYTK002.gb');
+      cy.wrap(firstPlasmid.plasmid_name).should('equal', 'pYTK002.gb (ConS)');
+      cy.wrap(firstPlasmid.left_overhang).should('equal', 'CCCT');
+      cy.wrap(firstPlasmid.right_overhang).should('equal', 'AACG');
+      cy.wrap(firstPlasmid.key).should('equal', 'CCCT-AACG');
+
+      const {appData} = firstPlasmid.sequenceData;
+
+      cy.wrap(appData.fileName).should('equal', 'pYTK002.gb');
+      cy.wrap(appData.correspondingParts).should('deep.equal', ['CCCT-AACG']);
+      cy.wrap(appData.correspondingPartsNames).should('deep.equal', ["CCCT_overhang-AACG_overhang"]);
+
+    });
+  });
+
+
+  it('does not allow to submit when all plasmids are invalid', () => {
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <UploadPlasmidsButton addPlasmids={() => {}} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
+      'cypress/test_files/sequencing/locus.gb'],
+    { force: true });
+
+    // Wait for the dialog to appear (indicating plasmids were processed)
+    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
+
+    cy.get('[data-testid="invalid-plasmids-box"]').contains('Invalid Plasmids').should('exist');
+    cy.get('[data-testid="valid-plasmids-box"]').should('not.exist');
+
+    cy.get('button').contains('Import valid plasmids').should('be.disabled');
+
+  });
+
+  it('cancelling does not call addPlasmids', () => {
+    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
+    cy.mount(
+      <ConfigProvider config={testConfig}>
+        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
+      </ConfigProvider>,
+    );
+    
+    cy.get('button').contains('Add Plasmids').siblings('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();
+
+    cy.get('@addPlasmidsSpy').should('not.have.been.called');
+
+  });
+
+});