@opencloning/ui 1.4.11 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @opencloning/ui
 
+## 1.5.1
+
+### Patch Changes
+
+- [#651](https://github.com/manulera/OpenCloning_frontend/pull/651) [`b5c89e2`](https://github.com/manulera/OpenCloning_frontend/commit/b5c89e23aa1065319cb07a9ac48a26693dd0a21a) Thanks [@manulera](https://github.com/manulera)! - Big refactor of Primer designer for better maintainability
+
+- [#651](https://github.com/manulera/OpenCloning_frontend/pull/651) [`b5c89e2`](https://github.com/manulera/OpenCloning_frontend/commit/b5c89e23aa1065319cb07a9ac48a26693dd0a21a) Thanks [@manulera](https://github.com/manulera)! - Allow primer design of Gibson and similar assembly methods to include fragments that are not amplified. Similar to what the NEBuilder planner does, where not all products are amplified. Perhaps in the future it would be useful to also allow the option to restore the restriction sites on the edge.
+
+- Updated dependencies [[`b5c89e2`](https://github.com/manulera/OpenCloning_frontend/commit/b5c89e23aa1065319cb07a9ac48a26693dd0a21a)]:
+  - @opencloning/store@1.5.1
+  - @opencloning/utils@1.5.1
+
+## 1.5.0
+
+### Minor Changes
+
+- [#648](https://github.com/manulera/OpenCloning_frontend/pull/648) [`800ebcd`](https://github.com/manulera/OpenCloning_frontend/commit/800ebcd4ed610ad89d538e1d59314977aae40583) Thanks [@manulera](https://github.com/manulera)! - Multiple enzymes can be used in the Assembler
+
+### Patch Changes
+
+- Updated dependencies [[`800ebcd`](https://github.com/manulera/OpenCloning_frontend/commit/800ebcd4ed610ad89d538e1d59314977aae40583)]:
+  - @opencloning/utils@1.5.0
+  - @opencloning/store@1.5.0
+
 ## 1.4.11
 
 ### Patch Changes

package/package.json

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

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

@@ -117,7 +117,7 @@ describe('<AssemblerComponent />', () => {
         <AssemblerComponent
           plasmids={mockPlasmids}
           categories={mockCategories}
-          assemblyEnzyme="assembly_enzyme"
+          assemblyEnzymes={['assembly_enzyme']}
           addAlert={addAlertStub}
           appInfo={{}}
         />

package/src/components/assembler/Assembler.jsx

@@ -129,7 +129,7 @@ function AssemblerBox({ item, index, setCategory, setId, categories, plasmids, a
   )
 }
 
-export function AssemblerComponent({ plasmids, categories, assemblyEnzyme, addAlert, appInfo }) {
+export function AssemblerComponent({ plasmids, categories, assemblyEnzymes, addAlert, appInfo }) {
 
   const [requestedAssemblies, setRequestedAssemblies] = React.useState([])
   const [errorMessage, setErrorMessage] = React.useState('')
@@ -153,7 +153,7 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzyme, addAl
       const resp = await requestSources(selectedPlasmids)
       errorMessage = 'Error assembling sequences'
       setLoadingMessage('Assembling...')
-      const assemblies = await requestAssemblies(resp, assemblyEnzyme)
+      const assemblies = await requestAssemblies(resp, assemblyEnzymes)
       setRequestedAssemblies(assemblies)
     } catch (e) {
       if (e.assembly) {
@@ -165,7 +165,7 @@ export function AssemblerComponent({ plasmids, categories, assemblyEnzyme, addAl
     } finally {
       setLoadingMessage(false)
     }
-  }, [assemblyEnzyme, assembly, plasmids, requestSources, requestAssemblies, clearAssemblySelection])
+  }, [assemblyEnzymes, assembly, plasmids, requestSources, requestAssemblies, clearAssemblySelection])
 
   const onDownloadAssemblies = React.useCallback(async () => {
     try {
@@ -334,7 +334,7 @@ function Assembler() {
         {syntax && <UploadPlasmidsButton addPlasmids={addPlasmids} syntax={syntax} />}
         {syntax && <Button color="error" onClick={clearLoadedPlasmids}>Remove uploaded plasmids</Button>}
       </ButtonGroup>
-      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} assemblyEnzyme={syntax.assemblyEnzyme} addAlert={addAlert} appInfo={appInfo} />}
+      {syntax && <AssemblerComponent plasmids={plasmids} syntax={syntax} categories={categories} assemblyEnzymes={syntax.assemblyEnzymes} addAlert={addAlert} appInfo={appInfo} />}
     </>
   )
 }

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

@@ -1,15 +1,6 @@
 import React from 'react';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 
-// Test config
-const testConfig = {
-  backendUrl: 'http://localhost:8000',
-  showAppBar: false,
-  noExternalRequests: false,
-  enableAssembler: true,
-  enablePlannotate: false,
-};
-
 const mockSyntaxes = [
   {
     path: 'test-syntax-1',
@@ -43,6 +34,7 @@ const mockSyntaxes = [
 const mockSyntaxData = {
   name: 'Test Syntax',
   parts: [],
+  assemblyEnzymes: ['BsmBI'],
 };
 
 const mockPlasmidsData = [
@@ -228,6 +220,7 @@ describe('<ExistingSyntaxDialog />', () => {
         { id: 1, name: 'Part 1' },
         { id: 2, name: 'Part 2' },
       ],
+      assemblyEnzymes: ['BsmBI'],
     };
 
     const tempFile = {

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -4,8 +4,8 @@ import getHttpClient from '@opencloning/utils/getHttpClient';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
+import { normalizeSyntaxEnzymes } from '@opencloning/utils/normalizeSyntax';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
-import { IconButton } from '@mui/material';
 
 const httpClient = getHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
@@ -15,7 +15,7 @@ function LocalSyntaxDialog({ onClose, onSyntaxSelect }) {
 
   const onFileSelected = React.useCallback(async (file) => {
     const text = await readSubmittedTextFile(file);
-    const syntaxData = JSON.parse(text);
+    const syntaxData = normalizeSyntaxEnzymes(JSON.parse(text));
     onSyntaxSelect(syntaxData, []);
     onClose();
   }, [onSyntaxSelect, onClose]);
@@ -100,7 +100,7 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect, disp
       const { data: syntaxData } = await httpClient.get(syntaxPath);
       loadingErrorPart = 'plasmids'
       const { data: plasmidsData } = await httpClient.get(plasmidsPath);
-      onSyntaxSelect(syntaxData, plasmidsData);
+      onSyntaxSelect(normalizeSyntaxEnzymes(syntaxData), plasmidsData);
       onClose();
     } catch {
       setLoadError(`Failed to load ${loadingErrorPart} data. Please try again.`);
@@ -114,9 +114,8 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect, disp
 
     try {
       const text = await file.text();
-      const syntaxData = JSON.parse(text);
+      const syntaxData = normalizeSyntaxEnzymes(JSON.parse(text));
 
-      // Uploaded JSON files contain only syntax data, no plasmids
       onSyntaxSelect(syntaxData, []);
       onClose();
     } catch (error) {

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

@@ -3,13 +3,43 @@ import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 import { localFilesHttpClient } from '@opencloning/ui/hooks/useServerStaticFiles';
 import UploadPlasmidsButton from './UploadPlasmidsButton';
 import mocloSyntax from '../../../../../cypress/test_files/syntax/moclo_syntax.json';
-import { dummyIndex } from '../form/ServerStaticFileSelect.cy.jsx';
 
 mocloSyntax.overhangNames = {
   ...mocloSyntax.overhangNames,
   CCCT: 'CCCT_overhang',
   AACG: 'AACG_overhang',
 };
+mocloSyntax.assemblyEnzymes = ['BsaI'];
+
+export const dummyIndex = {
+  sequences: [
+    {
+      name: 'Example sequence 1',
+      path: 'example.fa',
+      categories: ['Test category'],
+    },
+    {
+      name: 'Example sequence 2',
+      path: 'example2.gb',
+      categories: ['Test category2'],
+    },
+    {
+      name: 'Example sequence 3',
+      path: 'example3.fa',
+      categories: ['Test category'],
+    },
+  ],
+  syntaxes: [
+    {
+      name: 'Example syntax 1',
+      path: 'example.json',
+    },
+    {
+      name: 'Example syntax 2',
+      path: 'example2.json',
+    },
+  ],
+};
 
 // Test config
 const testConfig = {
@@ -20,7 +50,7 @@ const testConfig = {
   enablePlannotate: false,
 };
 
-describe('<UploadPlasmidsButton />', () => {
+describe.only('<UploadPlasmidsButton />', () => {
   beforeEach(() => {
     cy.window().then((win) => {
       win.localStorage.clear();

package/src/components/assembler/assembler_utils.js

@@ -117,17 +117,28 @@ export function assignSequenceToSyntaxPart(sequenceData, enzymes, graph) {
   // used, which is convenient for classification within the syntax.
   // Instead, forward means whether the recognition site was forward or reverse when producing that cut.
   // see the test called "shows the meaning of forward and reverse" for more details.
-  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 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});
-      }
-    });
+
+  // Enzymes are processed in order, so the first enzyme that finds a part is used.
+  // This is for syntaxes like GoldenBraid, that in the omega 1 assembly uses BsmBI
+  // for the backbone, and BtgZI for the parts.
+  // The order of the enzymes therefore matters, and in that case we put BsmBI first,
+  // because in principle domesticated parts should not have BsmBI recognition sites.
+  for (const enzyme of enzymes) {
+    const simplifiedDigestFragments = getSimplifiedDigestFragments(sequenceData, [enzyme]);
+    simplifiedDigestFragments
+      .filter(f => f.left.forward && !f.right.forward && graph.hasNode(f.left.ovhg) && graph.hasNode(f.right.ovhg))
+      .forEach(fragment => {
+        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});
+        }
+      });
+    if (foundParts.length > 0) {
+      break;
+    }
+  }
   return foundParts;
 }
 

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

@@ -150,6 +150,35 @@ describe('assignSequenceToSyntaxPart', () => {
     expect(type).toBe('misc_feature');
     expect(name).toBe('feature1');
   });
+
+  it('works with multiple enzymes', () => {
+    const enzymes = [aliasedEnzymesByName["bsmbi"], aliasedEnzymesByName["bsai"]];
+    const parts = [{left_overhang: 'TACT', right_overhang: 'AATG'}, {left_overhang: 'AATG', right_overhang: 'AGGT'}];
+    const graph = partsToEdgesGraph(parts);
+    // Works when both sites are of the same enzyme
+    const sequences = [
+      { sequence: 'AAggtctcaTACTagagtcacacaggactactaAATGagagaccAA', circular: true },
+      { sequence: 'AAcgtctcaTACTagagtcacacaggactactaAATGagagacgAA', circular: true },
+    ];
+    for (const sequenceData of sequences) {
+      const result = assignSequenceToSyntaxPart(sequenceData, enzymes, graph);
+      expect(result).toEqual([{left_overhang: 'TACT', right_overhang: 'AATG', longestFeature: null}]);
+    }
+
+    // Does not work when the sites are of different enzymes
+    const sequenceData2 = { sequence: 'AAcgtctcaTACTagagtcacacaggactactaAATGagagaccAA', circular: true };
+    const result2 = assignSequenceToSyntaxPart(sequenceData2, enzymes, graph);
+    expect(result2).toEqual([]);
+  });
+
+  it('Does not assign a plasmid with a single cut', () => {
+    const parts = [{left_overhang: 'TACT', right_overhang: 'AATG'}, {left_overhang: 'AATG', right_overhang: 'AGGT'}];
+    const graph = partsToEdgesGraph(parts);
+    const enzymes = [aliasedEnzymesByName["bsai"]];
+    const sequenceData = { sequence: 'tgggtctcaTACTagagtc', circular: true };
+    const result = assignSequenceToSyntaxPart(sequenceData, enzymes, graph);
+    expect(result).toEqual([]);
+  })
 });
 
 describe('tripletsToTranslation', () => {

package/src/components/assembler/useAssembler.js

@@ -62,7 +62,7 @@ export const useAssembler = () => {
   }, [ httpClient, backendRoute ])
 
 
-  const requestAssemblies = useCallback(async (requestedSources, enzyme='BsaI') => {
+  const requestAssemblies = useCallback(async (requestedSources, enzymes=['BsaI']) => {
 
     const assemblies = arrayCombinations(requestedSources);
     const output = []
@@ -76,7 +76,7 @@ export const useAssembler = () => {
       const requestData = {
         source: {
           type: 'RestrictionAndLigationSource',
-          restriction_enzymes: [enzyme],
+          restriction_enzymes: enzymes,
           id: assembly.length + 1,
         },
         sequences: assembly.map((p) => p.sequence),

package/src/components/assembler/usePlasmidsLogic.js

@@ -8,11 +8,11 @@ import { aliasedEnzymesByName } from '@teselagen/sequence-utils';
  * Custom hook that manages plasmids state and logic
  * @param {Object} params - Dependencies from FormDataContext
  * @param {Array} params.parts - Array of parts
- * @param {string} params.assemblyEnzyme - Assembly enzyme name
+ * @param {string[]} params.assemblyEnzymes - Assembly enzyme names
  * @param {Object} params.overhangNames - Mapping of overhangs to names
  * @returns {Object} - { linkedPlasmids, setLinkedPlasmids, uploadPlasmids }
  */
-export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
+export function usePlasmidsLogic({ parts, assemblyEnzymes, overhangNames }) {
   const [linkedPlasmids, setLinkedPlasmidsState] = React.useState([]);
 
   const graphForPlasmids = React.useMemo(() => partsToEdgesGraph(parts), [parts]);
@@ -22,7 +22,7 @@ export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
   }, {}), [parts]);
 
   const assignPlasmids = React.useCallback((plasmids) => plasmids.map(plasmid => {
-    const enzymes = [aliasedEnzymesByName[assemblyEnzyme.toLowerCase()]];
+    const enzymes = assemblyEnzymes.map(name => aliasedEnzymesByName[name.toLowerCase()]);
     const correspondingParts = assignSequenceToSyntaxPart(plasmid, enzymes, graphForPlasmids);
     const correspondingPartsStr = correspondingParts.map(part => `${part.left_overhang}-${part.right_overhang}`);
     const correspondingPartsNames = correspondingParts.map(part => {
@@ -44,20 +44,20 @@ export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
         longestFeature: correspondingParts.map(part => part.longestFeature)
       }
     };
-  }), [graphForPlasmids, partDictionary, assemblyEnzyme, overhangNames]);
+  }), [graphForPlasmids, partDictionary, assemblyEnzymes, overhangNames]);
 
   // Wrapper for setLinkedPlasmids that automatically assigns plasmids if enzyme is available
   const setLinkedPlasmids = React.useCallback((plasmids) => {
-    if (assemblyEnzyme && Array.isArray(plasmids) && plasmids.length > 0) {
+    if (assemblyEnzymes.length > 0 && Array.isArray(plasmids) && plasmids.length > 0) {
       setLinkedPlasmidsState(assignPlasmids(plasmids));
     } else {
       setLinkedPlasmidsState(plasmids);
     }
-  }, [assemblyEnzyme, assignPlasmids]);
+  }, [assemblyEnzymes, assignPlasmids]);
 
   // Update existing plasmids when enzyme or assignment logic changes
   React.useEffect(() => {
-    if (assemblyEnzyme) {
+    if (assemblyEnzymes.length > 0) {
       setLinkedPlasmidsState((prevLinkedPlasmids) => {
         if (prevLinkedPlasmids.length > 0) {
           return assignPlasmids(prevLinkedPlasmids);
@@ -65,7 +65,7 @@ export function usePlasmidsLogic({ parts, assemblyEnzyme, overhangNames }) {
         return prevLinkedPlasmids;
       });
     }
-  }, [assignPlasmids, assemblyEnzyme]); // Note: intentionally not including linkedPlasmids to avoid infinite loop
+  }, [assignPlasmids, assemblyEnzymes]); // Note: intentionally not including linkedPlasmids to avoid infinite loop
 
   const uploadPlasmids = React.useCallback(async (files) => {
     const plasmids = await Promise.all(files.map(async (file) => {

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

@@ -1,6 +1,5 @@
 import { Alert, Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import React from 'react';
-import { getReverseComplementSequenceString as reverseComplement } from '@teselagen/sequence-utils';
 import { isEqual } from 'lodash-es';
 import { parseFeatureLocation } from '@teselagen/bio-parsers';
 import { useDispatch, useSelector } from 'react-redux';
@@ -9,30 +8,9 @@ import useStoreEditor from '../../../../hooks/useStoreEditor';
 import { cloningActions } from '@opencloning/store/cloning';
 import { usePrimerDesign } from './PrimerDesignContext';
 import RequestStatusWrapper from '../../../form/RequestStatusWrapper';
+import knownGatewayCombinations from './utils/knownGatewayCombinations';
 
-const knownCombinations = [
-  {
-    siteNames: ['attP4', 'attP1'],
-    spacers: ['GGGGACAACTTTGTATAGAAAAGTTGNN', reverseComplement('GGGGACTGCTTTTTTGTACAAACTTGN')],
-    orientation: [true, true],
-    message: 'Primers tails designed based on pDONR™ P4-P1R',
-    translationFrame: [4, 6],
-  },
-  {
-    siteNames: ['attP1', 'attP2'],
-    spacers: ['GGGGACAAGTTTGTACAAAAAAGCAGGCTNN', reverseComplement('GGGGACCACTTTGTACAAGAAAGCTGGGTN')],
-    orientation: [true, false],
-    message: 'Primers tails designed based on pDONR™ 221',
-    translationFrame: [4, 6],
-  },
-  {
-    siteNames: ['attP2', 'attP3'],
-    spacers: ['GGGGACAGCTTTCTTGTACAAAGTGGNN', reverseComplement('GGGGACAACTTTGTATAATAAAGTTGN')],
-    orientation: [false, false],
-    message: 'Primers tails designed based on pDONR™ P2R-P3',
-    translationFrame: [4, 6],
-  },
-];
+const { setMainSequenceSelection } = cloningActions;
 
 function SiteSelect({ donorSites, site, setSite, label }) {
   return (
@@ -57,8 +35,6 @@ function SiteSelect({ donorSites, site, setSite, label }) {
   );
 }
 
-const { setMainSequenceSelection } = cloningActions;
-
 function GatewayRoiSelect({ id, greedy = false }) {
   const [leftSite, setLeftSite] = React.useState(null);
   const [rightSite, setRightSite] = React.useState(null);
@@ -104,14 +80,14 @@ function GatewayRoiSelect({ id, greedy = false }) {
       const selection = { selectionLayer, caretPosition: -1 };
       const siteNames = [newLeftSite.siteName, newRightSite.siteName];
       const orientation = [newLeftSite.location.includes('(+)'), newRightSite.location.includes('(+)')];
-      const knownCombinationForward = knownCombinations.find(({ siteNames: knownSites, orientation: knownOrientation }) => isEqual(knownSites, siteNames) && isEqual(knownOrientation, orientation));
+      const knownCombinationForward = knownGatewayCombinations.find(({ siteNames: knownSites, orientation: knownOrientation }) => isEqual(knownSites, siteNames) && isEqual(knownOrientation, orientation));
       if (knownCombinationForward) {
         handleKnownCombinationChange(knownCombinationForward, selection);
         return;
       }
       const siteNamesReverse = [newRightSite.siteName, newLeftSite.siteName];
       const orientationReverse = [!newRightSite.location.includes('(+)'), !newLeftSite.location.includes('(+)')];
-      const knownCombinationReverse = knownCombinations.find(({ siteNames: knownSites, orientation: knownOrientation }) => isEqual(knownSites, siteNamesReverse) && isEqual(knownOrientation, orientationReverse));
+      const knownCombinationReverse = knownGatewayCombinations.find(({ siteNames: knownSites, orientation: knownOrientation }) => isEqual(knownSites, siteNamesReverse) && isEqual(knownOrientation, orientationReverse));
       if (knownCombinationReverse) {
         handleKnownCombinationChange(knownCombinationReverse, selection);
         return;
@@ -123,7 +99,6 @@ function GatewayRoiSelect({ id, greedy = false }) {
   const onSiteSelectLeft = React.useCallback((site) => {
     setLeftSite(site);
     if (rightSite === null || isEqual(rightSite, site)) {
-      // Find the first different one
       const differentSite = donorSites.find(({ location }) => location !== site.location);
       setRightSite(differentSite);
       checkKnownCombination(site, differentSite);
@@ -135,7 +110,6 @@ function GatewayRoiSelect({ id, greedy = false }) {
   const onSiteSelectRight = React.useCallback((site) => {
     setRightSite(site);
     if (leftSite === null || isEqual(leftSite, site)) {
-      // Find the first different one
       const differentSite = donorSites.find(({ location }) => location !== site.location);
       setLeftSite(differentSite);
       checkKnownCombination(differentSite, site);

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

@@ -1,11 +1,12 @@
 import { FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material';
 import React from 'react';
 import { usePrimerDesign } from './PrimerDesignContext';
+import { getSequenceLabel } from './utils/getSequenceLabel';
 
 function OrientationPicker({ id, index }) {
   const { designType, fragmentOrientations, handleFragmentOrientationChange, templateSequenceNames } = usePrimerDesign();
   const sequenceName = templateSequenceNames[index];
-  let label = sequenceName && sequenceName !== 'name' ? `Seq. ${id} (${sequenceName})` : `Seq. ${id}`;
+  let label = getSequenceLabel(id, sequenceName);
   if (designType === 'homologous_recombination') {
     label = 'Orientation of insert';
   }