@opencloning/ui 1.2.0 → 1.3.1

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
+}

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

@@ -0,0 +1,193 @@
+import { aliasedEnzymesByName, getDigestFragmentsForRestrictionEnzymes, getReverseComplementSequenceString, getComplementSequenceString } from "@teselagen/sequence-utils";
+import { assignSequenceToSyntaxPart, simplifyDigestFragment, reverseComplementSimplifiedDigestFragment, tripletsToTranslation, partDataToDisplayData, arrayCombinations } from "./assembler_utils";
+import { partsToEdgesGraph } from "./graph_utils";
+
+const sequenceBsaI  = 'tgggtctcaTACTagagtcacacaggactactaAATGagagacctac';
+const sequenceBsaI2 = 'tgggtctcaAATGagagtcacacaggactactaAGGTagagacctac'
+const sequenceBsaI3  = 'tgggtctcaTACTagagtcacacaggactactaAGGTagagacctac';
+
+describe('reverseComplementSimplifiedDigestFragment', () => {
+  it('works', () => {
+
+    const digestFragments = getDigestFragmentsForRestrictionEnzymes(
+      sequenceBsaI,
+      true,
+      aliasedEnzymesByName["bsai"],
+    );
+    const sequenceRc = getReverseComplementSequenceString(sequenceBsaI);
+    const digestFragments2 = getDigestFragmentsForRestrictionEnzymes(
+      sequenceRc,
+      true,
+      aliasedEnzymesByName["bsai"],
+    );
+
+    const simplifiedDigestFragments1 = digestFragments.map(simplifyDigestFragment);
+    const simplifiedDigestFragments2 = digestFragments2.map(simplifyDigestFragment);
+    const simplifiedDigestFragments3 = simplifiedDigestFragments2.map(reverseComplementSimplifiedDigestFragment);
+    expect(simplifiedDigestFragments1).toEqual(simplifiedDigestFragments3);
+  });
+});
+
+
+describe('assignSequenceToSyntaxPart', () => {
+  it('works', () => {
+    const enzymes = [aliasedEnzymesByName["bsai"]];
+    const parts = [{left_overhang: 'TACT', right_overhang: 'AATG'}, {left_overhang: 'AATG', right_overhang: 'AGGT'}];
+    const graph = partsToEdgesGraph(parts);
+
+    for (const reverseComplement of [false, true]) {
+      const seq1 = reverseComplement ? getReverseComplementSequenceString(sequenceBsaI) : sequenceBsaI;
+      const seq2 = reverseComplement ? getReverseComplementSequenceString(sequenceBsaI2) : sequenceBsaI2;
+      const seq3 = reverseComplement ? getReverseComplementSequenceString(sequenceBsaI + sequenceBsaI2) : sequenceBsaI + sequenceBsaI2;
+
+      const sequenceData1 = { sequence: seq1, circular: true };
+      const sequenceData2 = { sequence: seq2, circular: true };
+      const sequenceData3 = { sequence: seq3, circular: true };
+
+      const result = assignSequenceToSyntaxPart(sequenceData1, enzymes, graph);
+      expect(result).toEqual([{left_overhang: 'TACT', right_overhang: 'AATG', longestFeature: null}]);
+
+      const result2 = assignSequenceToSyntaxPart(sequenceData2, enzymes, graph);
+      expect(result2).toEqual([{left_overhang: 'AATG', right_overhang: 'AGGT', longestFeature: null}]);
+
+      const result3 = assignSequenceToSyntaxPart(sequenceData3, enzymes, graph);
+      if (reverseComplement) {
+        expect(result3).toEqual([{left_overhang: 'AATG', right_overhang: 'AGGT', longestFeature: null}, {left_overhang: 'TACT', right_overhang: 'AATG', longestFeature: null}]);
+      } else {
+        expect(result3).toEqual([{left_overhang: 'TACT', right_overhang: 'AATG', longestFeature: null}, {left_overhang: 'AATG', right_overhang: 'AGGT', longestFeature: null}]);
+      }
+    }
+
+    // Multi-spanning fragments are also picked up
+    const resultMulti = assignSequenceToSyntaxPart({ sequence: sequenceBsaI3, circular: true }, enzymes, graph);
+    expect(resultMulti).toEqual([{left_overhang: 'TACT', right_overhang: 'AGGT', longestFeature: null}]);
+
+    const result4 = assignSequenceToSyntaxPart({ sequence: '', circular: true }, enzymes, graph);
+    expect(result4).toEqual([])
+
+    const result5 = assignSequenceToSyntaxPart({ sequence: 'AACGTAGACAGATTA', circular: true }, enzymes, graph);
+    expect(result5).toEqual([])
+
+    // Features are picked up
+    const sequenceDataWithFeatures = {
+      sequence: sequenceBsaI3,
+      circular: true,
+      features: [
+        {start: 15, end: 30, type: 'misc_feature', name: 'feature1'},
+        {start: 2, end: 45, type: 'misc_feature', name: 'feature2'}
+      ]};
+
+    const result6 = assignSequenceToSyntaxPart(sequenceDataWithFeatures, enzymes, graph);
+    const {start, end, type, name} = result6[0].longestFeature;
+    expect(start).toBe(15);
+    expect(end).toBe(30);
+    expect(type).toBe('misc_feature');
+    expect(name).toBe('feature1');
+  });
+});
+
+describe('tripletsToTranslation', () => {
+  it('returns empty string for falsy input', () => {
+    expect(tripletsToTranslation(null)).toBe('');
+    expect(tripletsToTranslation(undefined)).toBe('');
+    expect(tripletsToTranslation(false)).toBe('');
+  });
+
+  it('returns empty string for empty array', () => {
+    expect(tripletsToTranslation([])).toBe('');
+  });
+
+  it('translates valid triplets to amino acid codes', () => {
+    // ATG = Methionine (Met)
+    expect(tripletsToTranslation(['ATG'])).toBe('Met');
+    
+    // TTT = Phenylalanine (Phe)
+    expect(tripletsToTranslation(['TTT'])).toBe('Phe');
+    
+    // Multiple triplets
+    expect(tripletsToTranslation(['ATG', 'TTT', 'GCA'])).toBe('MetPheAla');
+  });
+
+  it('replaces Stop codons with ***', () => {
+    // TAA, TAG, TGA are stop codons
+    const stopCodons = ['TAA', 'TAG', 'TGA'];
+    const result = tripletsToTranslation(stopCodons);
+    expect(result).toBe('*********');
+  });
+
+  it('returns " - " for triplets with non-ACGT characters', () => {
+    expect(tripletsToTranslation(['ATN'])).toBe(' - ');
+    expect(tripletsToTranslation(['XYZ'])).toBe(' - ');
+    expect(tripletsToTranslation(['AT-'])).toBe(' - ');
+  });
+
+  it('handles mixed valid and invalid triplets', () => {
+    const result = tripletsToTranslation(['ATG', 'XYZ', 'TTT']);
+    expect(result).toBe('Met - Phe');
+  });
+});
+
+describe('partDataToDisplayData', () => {
+  it('computes reverse complements for all sequences and returns empty translations when no codon starts provided', () => {
+    const data = {
+      left_overhang: 'ATGC',
+      right_overhang: 'CGTA',
+      left_inside: 'TTAA',
+      right_inside: 'AATT'
+    };
+    
+    const result = partDataToDisplayData(data);
+    
+    expect(result.leftOverhangRc).toBe(getComplementSequenceString('ATGC'));
+    expect(result.rightOverhangRc).toBe(getComplementSequenceString('CGTA'));
+    expect(result.leftInsideRc).toBe(getComplementSequenceString('TTAA'));
+    expect(result.rightInsideRc).toBe(getComplementSequenceString('AATT'));
+
+    expect(result.leftTranslationOverhang).toBe('');
+    expect(result.leftTranslationInside).toBe('');
+    expect(result.rightTranslationOverhang).toBe('');
+    expect(result.rightTranslationInside).toBe('');
+  });
+
+  it('computes left translation when left_codon_start is provided', () => {
+    const data = {
+      left_overhang: 'AT',
+      left_inside: 'GCGCA',
+      left_codon_start: 1,
+      right_overhang: '',
+      right_inside: ''
+    };
+    
+    const result = partDataToDisplayData(data);
+    
+    // ATG CGC A... should translate to Met Arg...
+    expect(result.leftTranslationOverhang).toBe('Me');
+    expect(result.leftTranslationInside).toBe('tArg');
+
+    const data2 = {
+      left_overhang: 'ATTT',
+      left_inside: 'GCGCA',
+      left_codon_start: 3,
+      right_overhang: '',
+      right_inside: ''
+    };
+    const result2 = partDataToDisplayData(data2);
+    expect(result2.leftTranslationOverhang).toBe('  Le');
+    expect(result2.leftTranslationInside).toBe('uArg');
+  });
+
+});
+
+describe('arrayCombinations', () => {
+  it('returns null for empty array', () => {
+    expect(arrayCombinations([])).toBe(null);
+  });
+
+  it('returns array of arrays for single array', () => {
+    expect(arrayCombinations([[1, 2, 3]])).toEqual([[1], [2], [3]]);
+  });
+
+  it('returns array of arrays for multiple arrays', () => {
+    expect(arrayCombinations([[1, 2], [3, 4], [5, 6]])).toEqual([[1, 3, 5], [1, 3, 6], [1, 4, 5], [1, 4, 6], [2, 3, 5], [2, 3, 6], [2, 4, 5], [2, 4, 6]]);
+  });
+});

package/src/components/assembler/assembly_component.module.css

@@ -20,8 +20,8 @@
 }
 
 .container {
-    margin:auto;
     display: flex;
+    justify-content: center;
     flex-direction: row;
     align-items: center;
     height: auto;

package/src/components/assembler/graph_utils.js

@@ -0,0 +1,153 @@
+import { DirectedGraph } from 'graphology';
+import { topologicalGenerations } from 'graphology-dag';
+import { allSimplePaths } from 'graphology-simple-path';
+
+export const GRAPH_SPACER = '---------';
+
+// Convert parts to a directed graph where nodes are "edges" (e.g., "CCCT-AACG")
+export function partsToGraph(parts) {
+  const graph = new DirectedGraph();
+  for (const part of parts) {
+    const node = `${part.left_overhang}-${part.right_overhang}`;
+    if (!graph.hasNode(node)) {
+      graph.addNode(node);
+    }
+  }
+  // Connect nodes that share an overhang (right of one = left of another)
+  graph.forEachNode((node) => {
+    const [, right] = node.split('-');
+    graph.forEachNode((node2) => {
+      if (node !== node2 && node2.startsWith(right + '-')) {
+        graph.mergeEdge(node, node2);
+      }
+    });
+  });
+  return graph;
+}
+
+export function partsToEdgesGraph(parts) {
+  const graph = new DirectedGraph();
+  for (const part of parts) {
+    for (const node of [part.left_overhang, part.right_overhang]) {
+      if (!graph.hasNode(node)) {
+        graph.addNode(node);
+      }
+    }
+    graph.mergeEdge(part.left_overhang, part.right_overhang);
+  }
+  return graph;
+}
+
+// Break cycles by removing incoming edges to a node
+export function openCycleAtNode(graph, cutNode) {
+  for (const edge of graph.inEdges(cutNode)) {
+    graph.dropEdge(edge);
+  }
+}
+  
+// Convert DAG to MSA-like matrix (rows = paths, columns = topological generations)
+function dagToMSA(graph) {
+  const generations = topologicalGenerations(graph);
+  const nodeToCol = new Map();
+  generations.forEach((gen, col) => gen.forEach(node => nodeToCol.set(node, col)));
+  
+  const sources = graph.nodes().filter(n => graph.inDegree(n) === 0);
+  const sinks = graph.nodes().filter(n => graph.outDegree(n) === 0);
+  
+  const allPaths = sources.flatMap(src => sinks.flatMap(sink => allSimplePaths(graph, src, sink)));
+  
+  return allPaths.map(path => {
+    const row = new Array(generations.length).fill(GRAPH_SPACER);
+    path.forEach(node => { row[nodeToCol.get(node)] = node; });
+    return row;
+  });
+}
+  
+// Find independent segments in the MSA
+// Two adjacent columns are in the same segment if they're correlated (vary together)
+// They're independent if all combinations of values exist
+function getIndependentSegments(msa) {
+  if (msa.length === 0) return [];
+  
+  const numCols = msa[0].length;
+  const uniqueValues = col => new Set(msa.map(row => row[col]));
+  const isStable = col => uniqueValues(col).size === 1;
+  
+  // Check if two columns vary independently
+  const areIndependent = (col1, col2) => {
+    const pairs = new Set(msa.map(row => `${row[col1]}|${row[col2]}`));
+    return pairs.size > Math.max(uniqueValues(col1).size, uniqueValues(col2).size);
+  };
+  
+  // Find segment boundaries
+  const boundaries = [0];
+  for (let col = 0; col < numCols - 1; col++) {
+    const stable1 = isStable(col), stable2 = isStable(col + 1);
+    if (stable1 !== stable2 || (!stable1 && !stable2 && areIndependent(col, col + 1))) {
+      boundaries.push(col + 1);
+    }
+  }
+  boundaries.push(numCols);
+  
+  // Build segments
+  return boundaries.slice(0, -1).map((start, i) => {
+    const end = boundaries[i + 1] - 1;
+    const alts = [...new Set(msa.map(row => row.slice(start, end + 1).join(' | ')))];
+    return { start, end, stable: isStable(start), alternatives: alts };
+  });
+}
+  
+// Find minimum set of rows that covers all unique alternatives (greedy set cover)
+function minimumCoveringRows(msa) {
+  if (msa.length === 0) return [];
+  
+  const segments = getIndependentSegments(msa).filter(s => !s.stable);
+  if (segments.length === 0) return [msa[0]];
+  
+  // All alternatives that need to be covered
+  const allAlts = new Set(segments.flatMap((seg, i) => seg.alternatives.map(alt => `${i}:${alt}`)));
+  
+  // Count non-gap elements in a row (gap is '---------')
+  const countElements = row => row.filter(cell => cell !== GRAPH_SPACER).length;
+
+  // What each row covers + element count
+  const rowCoverage = msa.map(row => ({
+    row,
+    elements: countElements(row),
+    covered: new Set(segments.map((seg, i) => `${i}:${row.slice(seg.start, seg.end + 1).join(' | ')}`))
+  }));
+  
+  // Greedy: pick rows that cover the most uncovered alternatives
+  // When tied, prefer rows with more elements (fewer gaps)
+  const selected = [];
+  const covered = new Set();
+  
+  while (covered.size < allAlts.size) {
+    const best = rowCoverage.reduce((best, rc) => {
+      const newCount = [...rc.covered].filter(a => !covered.has(a)).length;
+      // Prefer higher coverage, then more elements as tiebreaker
+      if (newCount > best.count) return { rc, count: newCount, elements: rc.elements };
+      if (newCount === best.count && rc.elements > best.elements) return { rc, count: newCount, elements: rc.elements };
+      return best;
+    }, { rc: null, count: 0, elements: -1 });
+  
+    if (!best.rc) break;
+    selected.push(best.rc.row);
+    best.rc.covered.forEach(a => covered.add(a));
+  }
+  
+  // Sort by number of elements (most elements first)
+  return selected.sort((a, b) => countElements(b) - countElements(a));
+}
+
+export function graphToMSA(graph) {
+  if (graph.nodes().length === 0) return [];
+  const newGraph = graph.copy();
+  openCycleAtNode(newGraph, newGraph.nodes()[0]);
+  return minimumCoveringRows(dagToMSA(newGraph));
+}
+
+export function graphHasCycle(graph) {
+  if (graph.nodes().length === 0) return false;
+  return allSimplePaths(graph, graph.nodes()[0], graph.nodes()[0]).length > 0;
+}