@opencloning/ui 1.4.2 → 1.4.4

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 1.4.4
+
+### Patch Changes
+
+- [#624](https://github.com/manulera/OpenCloning_frontend/pull/624) [`c333aa3`](https://github.com/manulera/OpenCloning_frontend/commit/c333aa3f5eda8ab7a65799d589ba6e9b376e2d24) Thanks [@manulera](https://github.com/manulera)! - Assigning plasmids to categories handles palindromic parts
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.4
+  - @opencloning/utils@1.4.4
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "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.2",
-    "@opencloning/utils": "1.4.2",
+    "@opencloning/store": "1.4.4",
+    "@opencloning/utils": "1.4.4",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

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;
@@ -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}/>}
   </>
 }
 

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/components/assembler/assembler_utils.js

@@ -1,6 +1,7 @@
 import { isRangeWithinRange } from '@teselagen/range-utils';
 import { getComplementSequenceString, getAminoAcidFromSequenceTriplet, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString } from '@teselagen/sequence-utils';
 import { allSimplePaths } from 'graphology-simple-path';
+import { openCycleAtNode } from './graph_utils';
 
 export function tripletsToTranslation(triplets) {
   if (!triplets) return ''
@@ -100,6 +101,13 @@ export function getSimplifiedDigestFragments(sequenceData, enzymes) {
   return simplifiedDigestFragments.concat(simplifiedDigestFragmentsRc);
 }
 
+export function isFragmentPalindromic(fragment) {
+  return (
+    (fragment.left.ovhg === getReverseComplementSequenceString(fragment.left.ovhg)) &&
+    (fragment.right.ovhg === getReverseComplementSequenceString(fragment.right.ovhg))
+  )
+}
+
 export function assignSequenceToSyntaxPart(sequenceData, enzymes, graph) {
   // Something that is important to understand here is the meaning of forward and reverse.
   // It does not mean whether the overhang is 5' or 3', the value on the top strand is always
@@ -111,7 +119,8 @@ export function assignSequenceToSyntaxPart(sequenceData, enzymes, graph) {
   simplifiedDigestFragments
     .filter(f => f.left.forward && !f.right.forward && graph.hasNode(f.left.ovhg) && graph.hasNode(f.right.ovhg))
     .forEach(fragment => {
-      const paths = allSimplePaths(graph, fragment.left.ovhg, fragment.right.ovhg);
+      const graphForPaths = isFragmentPalindromic(fragment) ? openCycleAtNode(graph, graph.nodes()[0]) : graph;
+      const paths = allSimplePaths(graphForPaths, fragment.left.ovhg, fragment.right.ovhg);
       if (paths.length > 0) {
         foundParts.push({left_overhang: fragment.left.ovhg, right_overhang: fragment.right.ovhg, longestFeature: fragment.longestFeature});
       }

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

@@ -1,6 +1,8 @@
-import { aliasedEnzymesByName, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString, getComplementSequenceString } from "@teselagen/sequence-utils";
-import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations } from "./assembler_utils";
+import { aliasedEnzymesByName, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString, getComplementSequenceString, getReverseComplementSequenceAndAnnotations } from "@teselagen/sequence-utils";
+import fs from 'fs';
+import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations, getSimplifiedDigestFragments } from "./assembler_utils";
 import { partsToEdgesGraph } from "./graph_utils";
+import { genbankToJson } from '@teselagen/bio-parsers';
 
 const sequenceBsaI  = 'tgggtctcaTACTagagtcacacaggactactaAATGagagacctac';
 const sequenceBsaI2 = 'tgggtctcaAATGagagtcacacaggactactaAGGTagagacctac'
@@ -28,6 +30,30 @@ describe('reverseComplementSimplifiedDigestFragment', () => {
   });
 });
 
+
+
+it('handles palindromic fragments', () => {
+
+  const parts = [
+    {left_overhang: 'AATT', right_overhang: 'AGCT'}, // This part is palindromic, should only be picked up in AATT-AGCT, not AGCT-AATT
+    {left_overhang: 'AGCT', right_overhang: 'GGAG'},
+    {left_overhang: 'GGAG', right_overhang: 'AATT'},
+  ]
+  // Read file
+  const sequence = 'tgggtctcaAATTagagtcacacaggactactaAGCTagagacctac'
+  const seqData = { sequence, circular: true };
+  const result = assignSequenceToSyntaxPart(seqData, [aliasedEnzymesByName["bsai"]], partsToEdgesGraph(parts));
+
+  expect(result).toEqual([{left_overhang: 'AATT', right_overhang: 'AGCT', longestFeature: null}]);
+
+  const seqDataRc = getReverseComplementSequenceAndAnnotations(seqData);
+  const resultRc = assignSequenceToSyntaxPart(seqDataRc, [aliasedEnzymesByName["bsai"]], partsToEdgesGraph(parts));
+
+  expect(resultRc).toEqual([{left_overhang: 'AATT', right_overhang: 'AGCT', longestFeature: null}]);
+
+});
+
+
 it('shows the meaning of forward and reverse', () => {
   const sequence = 'aaGGTCTCaTACTaaa'
   const digestFragments = getDigestFragmentsForRestrictionEnzymes(

package/src/components/assembler/graph_utils.js

@@ -40,9 +40,11 @@ export function partsToEdgesGraph(parts) {
 
 // Break cycles by removing incoming edges to a node
 export function openCycleAtNode(graph, cutNode) {
-  for (const edge of graph.inEdges(cutNode)) {
-    graph.dropEdge(edge);
+  const newGraph = graph.copy();
+  for (const edge of newGraph.inEdges(cutNode)) {
+    newGraph.dropEdge(edge);
   }
+  return newGraph;
 }
   
 // Convert DAG to MSA-like matrix (rows = paths, columns = topological generations)
@@ -142,8 +144,7 @@ function minimumCoveringRows(msa) {
 
 export function graphToMSA(graph) {
   if (graph.nodes().length === 0) return [];
-  const newGraph = graph.copy();
-  openCycleAtNode(newGraph, newGraph.nodes()[0]);
+  const newGraph = openCycleAtNode(graph, graph.nodes()[0]);
   return minimumCoveringRows(dagToMSA(newGraph));
 }
 

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

@@ -114,9 +114,9 @@ describe('openCycleAtNode', () => {
     graph.addEdge('C', 'B'); // Creates cycle
     
     expect(graph.inDegree('B')).toBe(2);
-    openCycleAtNode(graph, 'B');
-    expect(graph.inDegree('B')).toBe(0);
-    expect(graph.outDegree('B')).toBe(1);
+    const newGraph = openCycleAtNode(graph, 'B');
+    expect(newGraph.inDegree('B')).toBe(0);
+    expect(newGraph.outDegree('B')).toBe(1);
 
   });
 
@@ -127,9 +127,9 @@ describe('openCycleAtNode', () => {
     graph.addEdge('A', 'B');
     graph.addEdge('B', 'A'); // Cycle
     
-    openCycleAtNode(graph, 'A');
-    expect(graph.outDegree('A')).toBe(1);
-    expect(graph.hasEdge('A', 'B')).toBe(true);
+    const newGraph = openCycleAtNode(graph, 'A');
+    expect(newGraph.outDegree('A')).toBe(1);
+    expect(newGraph.hasEdge('A', 'B')).toBe(true);
   });
 
   it('handles node with no incoming edges', () => {
@@ -138,9 +138,9 @@ describe('openCycleAtNode', () => {
     graph.addNode('B');
     graph.addEdge('A', 'B');
     
-    openCycleAtNode(graph, 'A');
-    expect(graph.inDegree('A')).toBe(0);
-    expect(graph.hasEdge('A', 'B')).toBe(true);
+    const newGraph = openCycleAtNode(graph, 'A');
+    expect(newGraph.inDegree('A')).toBe(0);
+    expect(newGraph.hasEdge('A', 'B')).toBe(true);
   });
 });
 

package/src/components/primers/primer_design/SequenceTabComponents/RestrictionSpacerForm.jsx

@@ -6,7 +6,7 @@ import { updateEditor } from '@teselagen/ove';
 import EnzymeMultiSelect from '../../../form/EnzymeMultiSelect';
 import { stringIsNotDNA } from '@opencloning/store/cloning_utils';
 import { usePrimerDesign } from './PrimerDesignContext';
-import { isEnzymePalyndromic } from '@opencloning/utils/enzyme_utils';
+import { isEnzymePalindromic } from '@opencloning/utils/enzyme_utils';
 
 function RestrictionSpacerForm() {
   const { primerDesignSettings } = usePrimerDesign();
@@ -39,7 +39,7 @@ function RestrictionSpacerForm() {
           <FormControl sx={{ width: '10em', mt: 1.5, mr: 2 }}>
             <EnzymeMultiSelect value={leftEnzyme} setEnzymes={(v) => updateEnzymeSettings({ left_enzyme: v })} label="Left enzyme" multiple={false} />
           </FormControl>
-          {leftEnzyme && !isEnzymePalyndromic(leftEnzyme) && (
+          {leftEnzyme && !isEnzymePalindromic(leftEnzyme) && (
           <FormControlLabel
             control={<Checkbox checked={leftEnzymeInverted} onChange={(e) => updateEnzymeSettings({ left_enzyme_inverted: e.target.checked })} />}
             label="Invert site"
@@ -50,7 +50,7 @@ function RestrictionSpacerForm() {
           <FormControl sx={{ width: '10em', mt: 1.5, mr: 2 }}>
             <EnzymeMultiSelect value={rightEnzyme} setEnzymes={(v) => updateEnzymeSettings({ right_enzyme: v })} label="Right enzyme" multiple={false} />
           </FormControl>
-          {rightEnzyme && !isEnzymePalyndromic(rightEnzyme) && (
+          {rightEnzyme && !isEnzymePalindromic(rightEnzyme) && (
           <FormControlLabel
             control={<Checkbox checked={rightEnzymeInverted} onChange={(e) => updateEnzymeSettings({ right_enzyme_inverted: e.target.checked })} />}
             label="Invert site"

package/src/version.js

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