@opencloning/ui 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 1.4.2
+
+### Patch Changes
+
+- [#620](https://github.com/manulera/OpenCloning_frontend/pull/620) [`1c2dbef`](https://github.com/manulera/OpenCloning_frontend/commit/1c2dbef236d54b4980599cd6acc4fdabced13f1d) Thanks [@manulera](https://github.com/manulera)! - Fix assembler using BsaI by default always
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.2
+  - @opencloning/utils@1.4.2
+
+## 1.4.1
+
+### Patch Changes
+
+- [#616](https://github.com/manulera/OpenCloning_frontend/pull/616) [`1419d5c`](https://github.com/manulera/OpenCloning_frontend/commit/1419d5cb80f738b737076e4d3b958c31eeb0f7b4) Thanks [@manulera](https://github.com/manulera)! - Allow to "select all" when importing static sequences from server
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.1
+  - @opencloning/utils@1.4.1
+
 ## 1.4.0
 
 ### Minor Changes

package/package.json

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

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

@@ -96,6 +96,7 @@ describe('<AssemblerComponent />', () => {
         <AssemblerComponent
           plasmids={mockPlasmids}
           categories={mockCategories}
+          assemblyEnzyme="assembly_enzyme"
         />
       </ConfigProvider>,
     );
@@ -209,9 +210,15 @@ describe('<AssemblerComponent />', () => {
       body: dummyResponse,
     }).as('fetchSourceSuccess');
     // Mock assembly request
-    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', {
-      statusCode: 200,
-      body: dummyResponse,
+    cy.intercept('POST', 'http://localhost:8000/restriction_and_ligation*', (req) => {
+      // Check that the value of the enzyme was set in the request body
+      expect(req.body).to.have.property('source');
+      expect(req.body.source).to.have.property('restriction_enzymes');
+      expect(req.body.source.restriction_enzymes).to.include('assembly_enzyme');
+      req.reply({
+        statusCode: 200,
+        body: dummyResponse,
+      });
     }).as('assemblySuccess');
 
     // Click submit button

package/src/components/assembler/Assembler.jsx

@@ -122,7 +122,7 @@ function AssemblerBox({ item, index, setCategory, setId, categories, plasmids, a
   )
 }
 
-export function AssemblerComponent({ plasmids, categories }) {
+export function AssemblerComponent({ plasmids, categories, assemblyEnzyme }) {
 
   const [requestedAssemblies, setRequestedAssemblies] = React.useState([])
   const [errorMessage, setErrorMessage] = React.useState('')
@@ -146,7 +146,7 @@ export function AssemblerComponent({ plasmids, categories }) {
       const resp = await requestSources(selectedPlasmids)
       errorMessage = 'Error assembling sequences'
       setLoadingMessage('Assembling...')
-      const assemblies = await requestAssemblies(resp)
+      const assemblies = await requestAssemblies(resp, assemblyEnzyme)
       setRequestedAssemblies(assemblies)
     } catch (e) {
       if (e.assembly) {
@@ -292,7 +292,7 @@ function Assembler() {
         {syntax && <UploadPlasmidsButton addPlasmids={addPlasmids} syntax={syntax} />}
         {syntax && <Button color="error" onClick={clearPlasmids}>Remove uploaded plasmids</Button>}
       </ButtonGroup>
-      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} />}
+      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} assemblyEnzyme={syntax.assemblyEnzyme} />}
     </>
   )
 }

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

@@ -274,6 +274,115 @@ describe('<ServerStaticFileSelect />', () => {
       expect(file.size).to.equal(28);
     });
   });
+  it('allows selecting all sequences with the Select all option when multiple', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.fa')) {
+        return Promise.resolve({ data: 'ATGC' });
+      }
+      if (url.endsWith('/example2.gb')) {
+        return Promise.resolve({ data: 'ATGCA' });
+      }
+      if (url.endsWith('/example3.fa')) {
+        return Promise.resolve({ data: 'ATGCG' });
+      }
+      throw new Error(`Unexpected URL: ${url}`);
+    });
+    cy.wrap(httpGet).as('httpGet');
+
+    const onFileSelected = cy.spy().as('onFileSelected');
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+          multiple
+        />
+      </ConfigProvider>,
+    );
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Use the Select all option to select all sequences
+    cy.get('#option-select').click();
+    cy.contains('Select all').click();
+    cy.get('body').click(0, 0);
+
+    // Submit form
+    cy.contains('button', 'Submit').click();
+
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example.fa');
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example2.gb');
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'example3.fa');
+
+    cy.get('@onFileSelected').should('have.been.calledOnce');
+    cy.get('@onFileSelected').should((spy) => {
+      const [files] = spy.lastCall.args;
+      expect(files).to.have.length(3);
+      expect(files[0].name).to.equal('example.fa');
+      expect(files[0].type).to.equal('text/plain');
+      expect(files[1].name).to.equal('example2.gb');
+      expect(files[1].type).to.equal('text/plain');
+      expect(files[2].name).to.equal('example3.fa');
+      expect(files[2].type).to.equal('text/plain');
+    });
+  });
+  it('clicking select all only selects the sequences that were filtered by category', () => {
+    const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
+      if (url.endsWith('/index.json')) {
+        return Promise.resolve({
+          data: dummyIndex,
+        });
+      }
+      if (url.endsWith('/example.fa')) {
+        return Promise.resolve({ data: 'ATGC' });
+      }
+      if (url.endsWith('/example3.fa')) {
+        return Promise.resolve({ data: 'ATGCG' });
+      }
+    });
+    cy.wrap(httpGet).as('httpGet');
+    const onFileSelected = cy.spy().as('onFileSelected');
+    cy.mount(
+      <ConfigProvider config={config}>
+        <ServerStaticFileSelect
+          onFileSelected={onFileSelected}
+          multiple
+        />
+      </ConfigProvider>,
+    );
+    cy.get('@httpGet').should('have.been.calledWithMatch', 'index.json');
+
+    // Select category
+    cy.get('#category-select').click();
+    cy.contains('Test category').click();
+
+    // Select all
+    cy.get('#option-select').click();
+    cy.contains('Select all').click();
+
+    // Only one sequence should be shown
+    cy.get('#option-select').click();
+    cy.contains('Example sequence 1').should('exist');
+    cy.contains('Example sequence 2').should('not.exist');
+    cy.contains('Example sequence 3').should('exist');
+
+    // Click outside to close select element
+    cy.get('body').click(0, 0);
+    cy.contains('button', 'Submit').click();
+
+    cy.get('@httpGet').should('have.been.calledThrice');
+    cy.get('@onFileSelected').should('have.been.calledOnce');
+    cy.get('@onFileSelected').should((spy) => {
+      const [files] = spy.lastCall.args;
+      expect(files).to.have.length(2);
+      expect(files[0].name).to.equal('example.fa');
+      expect(files[1].name).to.equal('example3.fa');
+    });
+  })
   it('works with multiple', () => {
     const httpGet = cy.stub(localFilesHttpClient, 'get').callsFake((url) => {
       if (url.endsWith('/index.json')) {

package/src/components/form/ServerStaticFileSelect.jsx

@@ -16,11 +16,12 @@ function ServerStaticFileSelect({ onFileSelected, multiple = false, type = 'sequ
     if (type !== 'sequence') {
       return index.syntaxes;
     }
+    const prePendArray = multiple ? ['__all__'] : [];
     if (selectedCategory === '') {
-      return index.sequences;
+      return [...prePendArray, ...index.sequences];
     }
-    return index.sequences.filter((sequence) => sequence.categories?.includes(selectedCategory));
-  }, [type, index, selectedCategory]);
+    return [...prePendArray, ...index.sequences.filter((sequence) => sequence.categories?.includes(selectedCategory))];
+  }, [type, index, selectedCategory, multiple]);
 
   const categoryOptions = React.useMemo(() => {
     if (!index?.categories) return [];
@@ -72,6 +73,19 @@ function ServerStaticFileSelect({ onFileSelected, multiple = false, type = 'sequ
   const buttonDisabled = multiple ? selectedOptions.length === 0 : !selectedOptions;
 
   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__');
+        setSelectedOptions(allSequences);
+        return;
+      }
+    }
+    setSelectedOptions(value);
+  }, [multiple, type, options]);
+
   return (
     <RequestStatusWrapper requestStatus={indexRequestStatus} retry={indexRetry}>
       {error && <Alert severity="error">{error}</Alert>}
@@ -98,8 +112,8 @@ function ServerStaticFileSelect({ onFileSelected, multiple = false, type = 'sequ
             multiple={multiple}
             options={options}
             value={selectedOptions}
-            onChange={(event, value) => setSelectedOptions(value)}
-            getOptionLabel={(option) => option?.name || option?.path || ''}
+            onChange={onOptionsChange}
+            getOptionLabel={(option) => (option === '__all__' ? 'Select all' : option?.name || option?.path || '')}
             disableCloseOnSelect={multiple}
             renderInput={(params) => (
               <TextField

package/src/version.js

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