@opencloning/ui 1.4.1 → 1.4.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 1.4.3
+
+### Patch Changes
+
+- [#622](https://github.com/manulera/OpenCloning_frontend/pull/622) [`03cec1c`](https://github.com/manulera/OpenCloning_frontend/commit/03cec1c53e6e8365bb8bf9617ed3128b65ab18cc) Thanks [@manulera](https://github.com/manulera)! - Fix loading external assemblies in syntax builder by extracting config out of ExistingSyntaxDialog component
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.3
+  - @opencloning/utils@1.4.3
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "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.1",
-    "@opencloning/utils": "1.4.1",
+    "@opencloning/store": "1.4.3",
+    "@opencloning/utils": "1.4.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

@@ -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

@@ -17,6 +17,7 @@ import useBackendRoute from '../../hooks/useBackendRoute';
 import useHttpClient from '../../hooks/useHttpClient';
 import useAlerts from '../../hooks/useAlerts';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
+import { useConfig } from '../../providers';
 
 
 const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
@@ -122,7 +123,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 +147,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) {
@@ -240,6 +241,7 @@ function categoriesFromSyntaxAndPlasmids(syntax, plasmids) {
 function LoadSyntaxButton({ setSyntax, addPlasmids }) {
   const [existingSyntaxDialogOpen, setExistingSyntaxDialogOpen] = React.useState(false)
   const httpClient = useHttpClient();
+  const { staticContentPath } = useConfig();
   const backendRoute = useBackendRoute();
   const { addAlert } = useAlerts();
   const onSyntaxSelect = React.useCallback(async (syntax, plasmids) => {
@@ -257,7 +259,7 @@ function LoadSyntaxButton({ setSyntax, addPlasmids }) {
   }, [setSyntax, addPlasmids, httpClient, backendRoute, addAlert])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
-    {existingSyntaxDialogOpen && <ExistingSyntaxDialog onClose={() => setExistingSyntaxDialogOpen(false)} onSyntaxSelect={onSyntaxSelect}/>}
+    {existingSyntaxDialogOpen && <ExistingSyntaxDialog staticContentPath={staticContentPath} onClose={() => setExistingSyntaxDialogOpen(false)} onSyntaxSelect={onSyntaxSelect}/>}
   </>
 }
 
@@ -292,7 +294,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/assembler/ExistingSyntaxDialog.cy.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 
 // Test config
@@ -50,12 +49,10 @@ describe('<ExistingSyntaxDialog />', () => {
     const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
 
     cy.mount(
-      <ConfigProvider config={testConfig}>
-        <ExistingSyntaxDialog
-          onClose={onCloseSpy}
-          onSyntaxSelect={onSyntaxSelectSpy}
-        />
-      </ConfigProvider>,
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
     );
 
     cy.wait('@getSyntaxes');
@@ -82,12 +79,10 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getPlasmidsData');
 
     cy.mount(
-      <ConfigProvider config={testConfig}>
-        <ExistingSyntaxDialog
-          onClose={onCloseSpy}
-          onSyntaxSelect={onSyntaxSelectSpy}
-        />
-      </ConfigProvider>,
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
     );
 
     cy.wait('@getSyntaxes');
@@ -111,12 +106,10 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getSyntaxDataError');
 
     cy.mount(
-      <ConfigProvider config={testConfig}>
-        <ExistingSyntaxDialog
-          onClose={onCloseSpy}
-          onSyntaxSelect={onSyntaxSelectSpy}
-        />
-      </ConfigProvider>,
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
     );
 
     cy.wait('@getSyntaxes');
@@ -146,12 +139,10 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getPlasmidsDataError');
 
     cy.mount(
-      <ConfigProvider config={testConfig}>
-        <ExistingSyntaxDialog
-          onClose={onCloseSpy}
-          onSyntaxSelect={onSyntaxSelectSpy}
-        />
-      </ConfigProvider>,
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
     );
 
     cy.wait('@getSyntaxes');
@@ -187,12 +178,10 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getPlasmidsData2');
 
     cy.mount(
-      <ConfigProvider config={testConfig}>
-        <ExistingSyntaxDialog
-          onClose={onCloseSpy}
-          onSyntaxSelect={onSyntaxSelectSpy}
-        />
-      </ConfigProvider>,
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
     );
 
     cy.wait('@getSyntaxes');
@@ -232,12 +221,10 @@ describe('<ExistingSyntaxDialog />', () => {
     }
 
     cy.mount(
-      <ConfigProvider config={testConfig}>
-        <ExistingSyntaxDialog
-          onClose={onCloseSpy}
-          onSyntaxSelect={onSyntaxSelectSpy}
-        />
-      </ConfigProvider>,
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
     );
 
     cy.wait('@getSyntaxes');
@@ -262,12 +249,10 @@ describe('<ExistingSyntaxDialog />', () => {
     }
 
     cy.mount(
-      <ConfigProvider config={testConfig}>
-        <ExistingSyntaxDialog
-          onClose={onCloseSpy}
-          onSyntaxSelect={onSyntaxSelectSpy}
-        />
-      </ConfigProvider>,
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
     );
 
     cy.wait('@getSyntaxes');

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -28,13 +28,12 @@ function LocalSyntaxDialog({ onClose, onSyntaxSelect }) {
   )
 }
 
-function ExistingSyntaxDialog({ onClose, onSyntaxSelect }) {
+function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
   const [syntaxes, setSyntaxes] = React.useState([]);
   const [connectAttempt, setConnectAttempt] = React.useState(0);
   const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' });
   const [loadError, setLoadError] = React.useState(null);
   const fileInputRef = React.useRef(null);
-  const { staticContentPath } = useConfig();
   const [localDialogOpen, setLocalDialogOpen] = React.useState(false);
 
   React.useEffect(() => {

package/src/version.js

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