@opencloning/ui 1.4.3 → 1.4.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 1.4.5
+
+### Patch Changes
+
+- [#627](https://github.com/manulera/OpenCloning_frontend/pull/627) [`74e5365`](https://github.com/manulera/OpenCloning_frontend/commit/74e53653a27c2dc64f19afd984981c0fb70fc747) Thanks [@manulera](https://github.com/manulera)! - Allow selecting sub-assemblies from a kit
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.5
+  - @opencloning/utils@1.4.5
+
+## 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

package/package.json

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

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

@@ -21,6 +21,23 @@ const mockSyntaxes = [
     name: 'Test Syntax 2',
     description: 'Second test syntax',
   },
+  {
+    path: 'test-syntax-3',
+    name: 'Test Syntax 3',
+    description: 'Third test syntax',
+    syntaxes: [
+      {
+        path: 'test-syntax-3-1.json',
+        name: 'Test Syntax 3-1',
+        description: 'Third test syntax 1',
+      },
+      {
+        path: 'test-syntax-3-2.json',
+        name: 'Test Syntax 3-2',
+        description: 'Third test syntax 2',
+      },
+    ],
+  },
 ];
 
 const mockSyntaxData = {
@@ -265,4 +282,38 @@ describe('<ExistingSyntaxDialog />', () => {
     cy.get('@onSyntaxSelectSpy').should('not.have.been.called');
     cy.get('@onCloseSpy').should('not.have.been.called');
   });
+
+  it('works with multiple syntaxes', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-3/test-syntax-3-2.json', {
+      statusCode: 200,
+      body: mockSyntaxData,
+    }).as('getSyntaxData');
+
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-3/plasmids_test-syntax-3-2.json', {
+      statusCode: 200,
+      body: mockPlasmidsData,
+    }).as('getPlasmidsData');
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Test Syntax 3').click();
+    cy.contains('Test Syntax 3-1').should('exist');
+    cy.contains('Test Syntax 3-2').should('exist');
+    cy.contains('Third test syntax 1').should('exist');
+    cy.contains('Third test syntax 2').should('exist');
+    cy.contains('Test Syntax 3-2').click();
+    cy.wait('@getSyntaxData');
+    cy.wait('@getPlasmidsData');
+    cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', mockSyntaxData, mockPlasmidsData);
+    cy.get('@onCloseSpy').should('have.been.called');
+  });
 });

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
-import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup } from '@mui/material'
+import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup, Accordion, AccordionSummary, AccordionDetails } from '@mui/material'
 import getHttpClient from '@opencloning/utils/getHttpClient';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import { useConfig } from '../../providers';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 
 const httpClient = getHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
@@ -28,6 +29,48 @@ function LocalSyntaxDialog({ onClose, onSyntaxSelect }) {
   )
 }
 
+function SyntaxListItem({ syntax, onSyntaxClick }) {
+  if (syntax.syntaxes === undefined) {
+    const syntaxPath = syntax.path + '/syntax.json';
+    const plasmidsPath = syntax.path + '/plasmids.json';
+    return (
+      <ListItem>
+        <ListItemButton onClick={() => {onSyntaxClick(syntaxPath, plasmidsPath)}}>
+          <ListItemText primary={syntax.name} secondary={syntax.description} />
+        </ListItemButton>
+      </ListItem>
+    )
+  }
+
+  const onOptionClick = (index) => {
+    const syntaxPath = `${syntax.path}/${syntax.syntaxes[index].path}`;
+    const plasmidsPath = `${syntax.path}/plasmids_${syntax.syntaxes[index].path}`;
+    onSyntaxClick(syntaxPath, plasmidsPath);
+  }
+
+  return (
+    <ListItem>
+      <Accordion>
+        <AccordionSummary sx={{ my: 0, py: 0 }} expandIcon={<ExpandMoreIcon />}>
+          <ListItemText sx={{ my: 0, py: 0 }} primary={syntax.name} secondary={syntax.description} />
+        </AccordionSummary>
+        <AccordionDetails>
+          <List sx={{ py: 0, my: 0 }}>
+            {syntax.syntaxes.map((syntax, index) => (
+              <ListItem key={syntax.path} sx={{ my: 0, py: 0 }}>
+                <ListItemButton sx={{ py: 0 }} onClick={() => onOptionClick(index)}>
+                  <ListItemText primary={syntax.name} secondary={syntax.description} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </AccordionDetails>
+      </Accordion>
+    </ListItem>
+    
+  )
+}
+
 function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
   const [syntaxes, setSyntaxes] = React.useState([]);
   const [connectAttempt, setConnectAttempt] = React.useState(0);
@@ -42,7 +85,7 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
       try {
         const { data } = await httpClient.get('index.json');
         setRequestStatus({ status: 'success' });
-        setSyntaxes(data);
+        setSyntaxes(data.sort((a, b) => a.name.localeCompare(b.name)));
       } catch {
         setRequestStatus({ status: 'error', message: 'Could not load syntaxes' });
       }
@@ -50,13 +93,13 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
     fetchData();
   }, [connectAttempt]);
 
-  const onSyntaxClick = React.useCallback(async (syntax) => {
+  const onSyntaxClick = React.useCallback(async (syntaxPath, plasmidsPath) => {
     setLoadError(null);
     let loadingErrorPart = 'syntax'
     try {
-      const { data: syntaxData } = await httpClient.get(`${syntax.path}/syntax.json`);
+      const { data: syntaxData } = await httpClient.get(syntaxPath);
       loadingErrorPart = 'plasmids'
-      const { data: plasmidsData } = await httpClient.get(`${syntax.path}/plasmids.json`);
+      const { data: plasmidsData } = await httpClient.get(plasmidsPath);
       onSyntaxSelect(syntaxData, plasmidsData);
       onClose();
     } catch {
@@ -94,11 +137,7 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
         <RequestStatusWrapper requestStatus={requestStatus} retry={() => setConnectAttempt((prev) => prev + 1)}>
           <List>
             {syntaxes.map((syntax) => (
-              <ListItem key={syntax.path}>
-                <ListItemButton onClick={() => {onSyntaxClick(syntax)}}>
-                  <ListItemText primary={syntax.name} secondary={syntax.description} />
-                </ListItemButton>
-              </ListItem>
+              <SyntaxListItem key={syntax.path} syntax={syntax} onSyntaxClick={onSyntaxClick} />
             ))}
           </List>
         </RequestStatusWrapper>

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.3";
+export const version = "1.4.5";