@opencloning/ui 1.1.2 → 1.3.0

package/src/components/assembler/AssemblerPart.jsx

@@ -1,97 +1,69 @@
 import React from 'react'
 import styles from './assembly_component.module.css'
 
-import { getAminoAcidFromSequenceTriplet, getComplementSequenceString } from '@teselagen/sequence-utils'
 import { getSvgByGlyph } from './sbol_visual_glyphs'
+import { partDataToDisplayData } from './assembler_utils'
 
+export function AssemblerPartCore({ color = 'lightgray', glyph = 'engineered-region' }) {
+  return (
+    <div data-testid="assembler-part-core" className={styles.boxContainer}>
+      <div className={styles.box}>
+        <div className={styles.imageContainer} style={{ backgroundColor: color }}>
+          <img src={getSvgByGlyph(glyph)} alt={`${glyph}.svg`} />
+        </div>
+      </div>
+    </div>
+  )
+}
 
-const defaultData =
-  {
-    header: 'Promoter',
-    body: 'promoter text',
-    glyph: 'cds-stop',
-    left_overhang: 'CATG',
-    right_overhang: 'TATG',
-    left_inside:'AAAATA',
-    right_inside:'AATG',
-    left_codon_start: 2,
-    right_codon_start: 1,
-    color: 'greenyellow',
-  }
+export function DisplayOverhang( { overhang, overhangRc, translation, isRight = false } ) {
+  return (
+    <div data-testid="display-overhang" className={`${styles.dna} ${styles.overhang} ${isRight ? styles.right : styles.left}`}>
+      <div className={styles.top}>{translation}</div>
+      <div className={styles.watson}>{overhang}</div>
+      <div className={styles.crick}>{overhangRc}</div>
+      <div className={styles.bottom}> </div>
+    </div>
+  )
+}
+export function DisplayInside( { inside, insideRc, translation, isRight = false } ) {
+  return (
+    <div data-testid="display-inside" className={`${styles.dna} ${styles.inside} ${isRight ? styles.right : styles.left}`}>
+      <div className={styles.top}>{translation}</div>
+      <div className={styles.watson}>{inside}</div>
+      <div className={styles.crick}>{insideRc}</div>
+      <div className={styles.bottom}> </div>
+    </div>
+  )
+}
 
+export function AssemblerPartContainer({ children }) {
+  return (
+    <div className={styles.container}>
+      {children}
+    </div>
+  )
+}
 
-function AssemblerPart( { data = defaultData } ) {
-  const {
-    left_codon_start: leftCodonStart,
-    right_codon_start: rightCodonStart,
-    left_overhang: leftOverhang,
-    right_overhang: rightOverhang,
-    left_inside: leftInside,
-    right_inside: rightInside,
-    glyph
-  } = data
-  const leftOverhangRc = getComplementSequenceString(leftOverhang)
-  const rightOverhangRc = getComplementSequenceString(rightOverhang)
-  const leftInsideRc = getComplementSequenceString(leftInside)
-  const rightInsideRc = getComplementSequenceString(rightInside)
-  let leftTranslationOverhang = ''
-  let leftTranslationInside = ''
-  if (leftCodonStart) {
-    const triplets = (leftOverhang + leftInside).slice(leftCodonStart - 1).match(/.{3}/g)
-    const padding = ' '.repeat(leftCodonStart - 1)
-    const translationLeft = padding + triplets.map(triplet => getAminoAcidFromSequenceTriplet(triplet).threeLettersName.replace('Stop', '***')).join('')
-    leftTranslationOverhang = translationLeft.slice(0, leftOverhang.length)
-    leftTranslationInside = translationLeft.slice(leftOverhang.length)
-  }
-  let rightTranslationOverhang = ''
-  let rightTranslationInside = ''
-  if (rightCodonStart) {
-    const triplets = (rightInside + rightOverhang).slice(rightCodonStart - 1).match(/.{3}/g)
-    const padding = ' '.repeat(rightCodonStart - 1)
-    const translationRight = padding + triplets.map(triplet => getAminoAcidFromSequenceTriplet(triplet).threeLettersName.replace('Stop', '***')).join('')
-    rightTranslationInside = translationRight.slice(0, rightInside.length)
-    rightTranslationOverhang = translationRight.slice(rightInside.length)
-  }
+function AssemblerPart( { data, showRight = true } ) {
+  const { left_overhang: leftOverhang, right_overhang: rightOverhang, left_inside: leftInside, right_inside: rightInside, glyph } = data
+  const { leftTranslationOverhang, leftTranslationInside, rightTranslationOverhang, rightTranslationInside, leftOverhangRc, rightOverhangRc, leftInsideRc, rightInsideRc } = partDataToDisplayData(data)
 
   return (
 
-    <div className={styles.container}>
-      <div className={`${styles.dna} ${styles.overhang} ${styles.left}`}>
-        <div className={styles.top}>{leftTranslationOverhang}</div>
-        <div className={styles.watson}>{leftOverhang}</div>
-        <div className={styles.crick}>{leftOverhangRc}</div>
-        <div className={styles.bottom}> </div>
-      </div>
+    <AssemblerPartContainer>
+      <DisplayOverhang overhang={leftOverhang} overhangRc={leftOverhangRc} translation={leftTranslationOverhang} isRight={false} />
       {leftInside && (
-        <div className={`${styles.dna} ${styles.insideLeft}`}>
-          <div className={styles.top}>{leftTranslationInside}</div>
-          <div className={styles.watson}>{leftInside}</div>
-          <div className={styles.crick}>{leftInsideRc}</div>
-          <div className={styles.bottom}> </div>
-        </div>
+        <DisplayInside inside={leftInside} insideRc={leftInsideRc} translation={leftTranslationInside} isRight={false} />
       )}
-      <div className={styles.boxContainer}>
-        <div className={styles.box}>
-          <div className={styles.imageContainer} style={{ backgroundColor: data.color || 'lightgray' }}>
-            <img src={getSvgByGlyph(glyph)} alt={`${glyph}.svg`} />
-          </div>
-        </div>
-      </div>
+      <AssemblerPartCore color={data.color || 'lightgray'} glyph={glyph} />
       {rightInside && (
-        <div className={`${styles.dna} ${styles.insideRight}`}>
-          <div className={styles.top}>{rightTranslationInside}</div>
-          <div className={styles.watson}>{rightInside}</div>
-          <div className={styles.crick}>{rightInsideRc}</div>
-          <div className={styles.bottom}> </div>
-        </div>
+        <DisplayInside inside={rightInside} insideRc={rightInsideRc} translation={rightTranslationInside} isRight={true} />
       )}
-      <div className={`${styles.dna} ${styles.overhang} ${styles.right}`}>
-        <div className={styles.top}>{rightTranslationOverhang}</div>
-        <div className={styles.watson}>{rightOverhang}</div>
-        <div className={styles.crick}>{rightOverhangRc}</div>
-        <div className={styles.bottom}> </div>
-      </div>
-    </div>
+      { showRight && (
+        <DisplayOverhang overhang={rightOverhang} overhangRc={rightOverhangRc} translation={rightTranslationOverhang} isRight={true} />
+      )}
+    </AssemblerPartContainer>
 
   )
 }

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

@@ -0,0 +1,194 @@
+import React from 'react';
+import ExistingSyntaxDialog from './ExistingSyntaxDialog';
+
+const mockSyntaxes = [
+  {
+    path: 'test-syntax-1',
+    name: 'Test Syntax 1',
+    description: 'First test syntax',
+  },
+  {
+    path: 'test-syntax-2',
+    name: 'Test Syntax 2',
+    description: 'Second test syntax',
+  },
+];
+
+const mockSyntaxData = {
+  name: 'Test Syntax',
+  parts: [],
+};
+
+const mockPlasmidsData = [
+  {
+    id: 1,
+    name: 'Test Plasmid',
+  },
+];
+
+describe('<ExistingSyntaxDialog />', () => {
+  beforeEach(() => {
+    // Intercept the index.json request
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/index.json', {
+      statusCode: 200,
+      body: mockSyntaxes,
+    }).as('getSyntaxes');
+  });
+
+  it('loads and displays syntaxes successfully', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Load an existing syntax').should('exist');
+    cy.contains('Test Syntax 1').should('exist');
+    cy.contains('First test syntax').should('exist');
+    cy.contains('Test Syntax 2').should('exist');
+    cy.contains('Second test syntax').should('exist');
+  });
+
+  it('successfully loads syntax and plasmids data when clicking a syntax', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    // Intercept syntax.json and plasmids.json requests
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-1/syntax.json', {
+      statusCode: 200,
+      body: mockSyntaxData,
+    }).as('getSyntaxData');
+
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-1/plasmids.json', {
+      statusCode: 200,
+      body: mockPlasmidsData,
+    }).as('getPlasmidsData');
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Test Syntax 1').click();
+
+    cy.wait('@getSyntaxData');
+    cy.wait('@getPlasmidsData');
+
+    cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', mockSyntaxData, mockPlasmidsData);
+    cy.get('@onCloseSpy').should('have.been.called');
+  });
+
+  it('displays error message when syntax.json request fails', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    // Intercept syntax.json with error
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-1/syntax.json', {
+      statusCode: 500,
+      body: { error: 'Internal server error' },
+    }).as('getSyntaxDataError');
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Test Syntax 1').click();
+
+    cy.wait('@getSyntaxDataError');
+
+    cy.contains('Failed to load syntax data. Please try again.').should('exist');
+    cy.get('@onSyntaxSelectSpy').should('not.have.been.called');
+    cy.get('@onCloseSpy').should('not.have.been.called');
+  });
+
+  it('displays error message when plasmids.json request fails', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    // Intercept syntax.json successfully
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-1/syntax.json', {
+      statusCode: 200,
+      body: mockSyntaxData,
+    }).as('getSyntaxData');
+
+    // Intercept plasmids.json with error
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-1/plasmids.json', {
+      statusCode: 500,
+      body: { error: 'Internal server error' },
+    }).as('getPlasmidsDataError');
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Test Syntax 1').click();
+
+    cy.wait('@getSyntaxData');
+    cy.wait('@getPlasmidsDataError');
+
+    cy.contains('Failed to load plasmids data. Please try again.').should('exist');
+    cy.get('@onSyntaxSelectSpy').should('not.have.been.called');
+    cy.get('@onCloseSpy').should('not.have.been.called');
+  });
+
+  it('clears error message when selecting a different syntax after error', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    // First syntax fails
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-1/syntax.json', {
+      statusCode: 500,
+      body: { error: 'Internal server error' },
+    }).as('getSyntaxDataError');
+
+    // Second syntax succeeds
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-2/syntax.json', {
+      statusCode: 200,
+      body: mockSyntaxData,
+    }).as('getSyntaxData2');
+
+    cy.intercept('GET', 'https://assets.opencloning.org/syntaxes/syntaxes/test-syntax-2/plasmids.json', {
+      statusCode: 200,
+      body: mockPlasmidsData,
+    }).as('getPlasmidsData2');
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    
+    // Click first syntax (fails)
+    cy.contains('Test Syntax 1').click();
+    cy.wait('@getSyntaxDataError');
+    cy.contains('Failed to load syntax data. Please try again.').should('exist');
+
+    // Click second syntax (succeeds) - error should be cleared
+    cy.contains('Test Syntax 2').click();
+    cy.wait('@getSyntaxData2');
+    cy.wait('@getPlasmidsData2');
+
+    cy.contains('Failed to load syntax data. Please try again.').should('not.exist');
+    cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', mockSyntaxData, mockPlasmidsData);
+    cy.get('@onCloseSpy').should('have.been.called');
+  });
+});

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert } from '@mui/material'
+import getHttpClient from '@opencloning/utils/getHttpClient';
+import RequestStatusWrapper from '../form/RequestStatusWrapper';
+
+const httpClient = getHttpClient();
+const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
+httpClient.defaults.baseURL = baseURL;
+
+function ExistingSyntaxDialog({ 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);
+
+  React.useEffect(() => {
+    setRequestStatus({ status: 'loading' });
+    const fetchData = async () => {
+      try {
+        const { data } = await httpClient.get('index.json');
+        setRequestStatus({ status: 'success' });
+        setSyntaxes(data);
+      } catch {
+        setRequestStatus({ status: 'error', message: 'Could not load syntaxes' });
+      }
+    };
+    fetchData();
+  }, [connectAttempt]);
+
+  const onSyntaxClick = React.useCallback(async (syntax) => {
+    setLoadError(null);
+    let loadingErrorPart = 'syntax'
+    try {
+      const { data: syntaxData } = await httpClient.get(`${syntax.path}/syntax.json`);
+      loadingErrorPart = 'plasmids'
+      const { data: plasmidsData } = await httpClient.get(`${syntax.path}/plasmids.json`);
+      onSyntaxSelect(syntaxData, plasmidsData);
+      onClose();
+    } catch {
+      setLoadError(`Failed to load ${loadingErrorPart} data. Please try again.`);
+    }
+  }, [onSyntaxSelect, onClose]);
+
+  return (
+    <Dialog open onClose={onClose}>
+      <DialogTitle>Load an existing syntax</DialogTitle>
+      <DialogContent>
+        <RequestStatusWrapper requestStatus={requestStatus} retry={() => setConnectAttempt((prev) => prev + 1)}>
+          {loadError && <Alert severity="error" sx={{ mb: 2 }}>{loadError}</Alert>}
+          <List>
+            {syntaxes.map((syntax) => (
+              <ListItem key={syntax.path}>
+                <ListItemButton onClick={() => {onSyntaxClick(syntax)}}>
+                  <ListItemText primary={syntax.name} secondary={syntax.description} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+        </RequestStatusWrapper>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ExistingSyntaxDialog

package/src/components/assembler/PlasmidSyntaxTable.jsx

@@ -0,0 +1,83 @@
+
+import React from 'react'
+import { Table, TableHead, TableRow, TableCell, TableBody, Typography, Chip, Box } from '@mui/material'
+
+function PartChip({ name, overhang}) {
+  const label = name ? `${overhang} (${name})` : overhang;
+  return (
+    <Chip label={label} size="small" sx={{ fontSize: '0.7rem', height: 20, fontFamily: 'monospace' }}
+    />
+  )
+}
+
+function PlasmidRow({ plasmid }) {
+  const { name, appData } = plasmid;
+  const { fileName, correspondingParts, correspondingPartsNames, partInfo, longestFeature } = appData;
+  let sx = undefined;
+  let infoStr = '-';
+  let longestFeatureStr = '-';
+  let noParts = partInfo.length === 0;
+  if (partInfo.length === 1) {
+    sx = {
+      backgroundColor: partInfo[0]?.color,
+    }
+    infoStr = partInfo[0] ? partInfo[0].name : 'Spans multiple parts';
+    longestFeatureStr = longestFeature ? longestFeature[0].name : '-';
+  }
+  const multipleParts = partInfo.length > 1;
+  if (multipleParts) {
+    infoStr = 'Contains multiple parts';
+  }
+  
+  return (
+    <TableRow sx={sx}>
+      <TableCell sx={{ maxWidth: 200 }}>
+        <Typography variant="body2" noWrap title={name}>
+          {name}
+        </Typography>
+      </TableCell>
+      <TableCell sx={{ maxWidth: 200 }}>
+        <Typography variant="body2" noWrap title={fileName}>
+          {fileName}
+        </Typography>
+      </TableCell>
+      <TableCell sx={multipleParts ? {backgroundColor: 'red'} : null}>
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+          {noParts ? '-' : correspondingParts.map((part, idx) => (
+            <PartChip key={idx} name={correspondingPartsNames[idx]} overhang={part}
+            />
+          ))}
+        </Box>
+      </TableCell>
+      <TableCell>
+        <Typography variant="body2">{infoStr}</Typography>
+      </TableCell>
+      <TableCell>
+        <Typography variant="body2">{longestFeatureStr}</Typography>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+function PlasmidSyntaxTable( { plasmids } ) {
+  return (
+    <Table stickyHeader size="small">
+      <TableHead sx={{ '& th': { fontWeight: 'bold' } }}>
+        <TableRow>
+          <TableCell>Name</TableCell>
+          <TableCell>File Name</TableCell>
+          <TableCell>Overhangs</TableCell>
+          <TableCell>Part Info</TableCell>
+          <TableCell>Longest Feature</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {plasmids.map((plasmid, index) => (
+          <PlasmidRow key={index} plasmid={plasmid} />
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+
+export default PlasmidSyntaxTable

package/src/components/assembler/assembler_utils.js

@@ -0,0 +1,134 @@
+import { isRangeWithinRange } from '@teselagen/range-utils';
+import { getComplementSequenceString, getAminoAcidFromSequenceTriplet, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString } from '@teselagen/sequence-utils';
+import { allSimplePaths } from 'graphology-simple-path';
+
+export function tripletsToTranslation(triplets) {
+  if (!triplets) return ''
+  return triplets.map(triplet =>
+    /[^ACGT]/i.test(triplet) ? ' - ' :
+      getAminoAcidFromSequenceTriplet(triplet).threeLettersName.replace('Stop', '***')
+  ).join('')
+}
+
+export function partDataToDisplayData(data) {
+  const {
+    left_codon_start: leftCodonStart,
+    right_codon_start: rightCodonStart,
+    left_overhang: leftOverhang,
+    right_overhang: rightOverhang,
+    left_inside: leftInside,
+    right_inside: rightInside,
+    glyph
+  } = data
+  const leftOverhangRc = getComplementSequenceString(leftOverhang)
+  const rightOverhangRc = getComplementSequenceString(rightOverhang)
+  const leftInsideRc = getComplementSequenceString(leftInside)
+  const rightInsideRc = getComplementSequenceString(rightInside)
+  let leftTranslationOverhang = ''
+  let leftTranslationInside = ''
+  if (leftCodonStart) {
+    const triplets = (leftOverhang + leftInside).slice(leftCodonStart - 1).match(/.{3}/g)
+    const padding = ' '.repeat(leftCodonStart - 1)
+    const translationLeft = padding + tripletsToTranslation(triplets)
+    leftTranslationOverhang = translationLeft.slice(0, leftOverhang.length)
+    leftTranslationInside = translationLeft.slice(leftOverhang.length)
+  }
+  let rightTranslationOverhang = ''
+  let rightTranslationInside = ''
+  if (rightCodonStart) {
+    const triplets = (rightInside + rightOverhang).slice(rightCodonStart - 1).match(/.{3}/g)
+    const padding = ' '.repeat(rightCodonStart - 1)
+    const translationRight = padding + tripletsToTranslation(triplets)
+    rightTranslationInside = translationRight.slice(0, rightInside.length)
+    rightTranslationOverhang = translationRight.slice(rightInside.length)
+  }
+  return {
+    leftTranslationOverhang,
+    leftTranslationInside,
+    rightTranslationOverhang,
+    rightTranslationInside,
+    leftOverhangRc,
+    rightOverhangRc,
+    leftInsideRc,
+    rightInsideRc,
+  }
+}
+
+
+export function simplifyDigestFragment({cut1, cut2}) {
+  return {
+    left: {ovhg: cut1.overhangBps.toUpperCase(), forward: cut1.forward},
+    right: {ovhg: cut2.overhangBps.toUpperCase(), forward: cut2.forward},
+  };
+};
+
+export function reverseComplementSimplifiedDigestFragment({left, right, longestFeature}) {
+  return {
+    left: {ovhg: getReverseComplementSequenceString(right.ovhg), forward: !right.forward},
+    right: {ovhg: getReverseComplementSequenceString(left.ovhg), forward: !left.forward},
+    longestFeature
+  };
+}
+
+export function longestFeatureInDigestFragment(digestFragment, sequenceData) {
+  const {cut1, cut2} = digestFragment;
+  const leftEdge = cut1.overhangSize >=0 ? cut1.topSnipPosition : cut1.bottomSnipPosition;
+  const rightEdge = cut2.overhangSize >=0 ? cut2.bottomSnipPosition : cut2.topSnipPosition;
+  if (!sequenceData.features || sequenceData.features.length === 0) return null;
+  const featuresInside = sequenceData.features.filter(feature => isRangeWithinRange(feature, {start: leftEdge, end: rightEdge}, sequenceData.length));
+  return featuresInside.reduce((longest, feature) => {
+    if (!longest) return feature;
+    return feature.end - feature.start > longest.end - longest.start ? feature : longest;
+  }, null);
+}
+
+export function getSimplifiedDigestFragments(sequenceData, enzymes) {
+  const { sequence, circular } = sequenceData;
+
+  const digestFragments = getDigestFragmentsForRestrictionEnzymes(
+    sequence,
+    circular,
+    enzymes,
+  );
+
+  const longestFeatures = digestFragments.map(fragment => longestFeatureInDigestFragment(fragment, sequenceData));
+  const simplifiedDigestFragments = digestFragments.map(simplifyDigestFragment);
+  simplifiedDigestFragments.forEach((fragment, index) => {
+    fragment.longestFeature = longestFeatures[index];
+  });
+  const simplifiedDigestFragmentsRc = simplifiedDigestFragments.map(reverseComplementSimplifiedDigestFragment);
+  return simplifiedDigestFragments.concat(simplifiedDigestFragmentsRc);
+}
+
+export function assignSequenceToSyntaxPart(sequenceData, enzymes, graph) {
+  const simplifiedDigestFragments = getSimplifiedDigestFragments(sequenceData, enzymes);
+  const foundParts = [];
+  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);
+      if (paths.length > 0) {
+        foundParts.push({left_overhang: fragment.left.ovhg, right_overhang: fragment.right.ovhg, longestFeature: fragment.longestFeature});
+      }
+    });
+  return foundParts;
+}
+
+export function arrayCombinations(sets) {
+  if (sets.length === 0) {
+    return null;
+  } else if (sets.length === 1) {
+    return sets[0].map((el) => [el]);
+  } else
+    return sets[0].flatMap((val) =>
+      arrayCombinations(sets.slice(1)).map((c) => [val].concat(c))
+    );
+};
+
+export function categoryFilter(category, categories, previousCategoryId) {
+  if (previousCategoryId === null) {
+    return category.left_overhang === categories[0].left_overhang
+  }
+  const previousCategory = categories.find((category) => category.id === previousCategoryId)
+  return previousCategory?.right_overhang === category.left_overhang
+}