@opencloning/ui 1.1.2 → 1.3.0

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

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

@@ -0,0 +1,239 @@
+import { DirectedGraph } from 'graphology';
+import {
+  GRAPH_SPACER,
+  partsToGraph,
+  partsToEdgesGraph,
+  openCycleAtNode,
+  graphToMSA,
+  graphHasCycle
+} from './graph_utils';
+
+describe('GRAPH_SPACER', () => {
+  it('is the expected spacer string', () => {
+    expect(GRAPH_SPACER).toBe('---------');
+  });
+});
+
+describe('partsToGraph', () => {
+  it('creates nodes for each part', () => {
+    const parts = [
+      { left_overhang: 'A', right_overhang: 'B' },
+      { left_overhang: 'C', right_overhang: 'D' }
+    ];
+    const graph = partsToGraph(parts);
+    expect(graph.hasNode('A-B')).toBe(true);
+    expect(graph.hasNode('C-D')).toBe(true);
+  });
+
+  it('connects nodes that share an overhang', () => {
+    const parts = [
+      { left_overhang: 'A', right_overhang: 'B' },
+      { left_overhang: 'B', right_overhang: 'C' }
+    ];
+    const graph = partsToGraph(parts);
+    expect(graph.hasEdge('A-B', 'B-C')).toBe(true);
+  });
+
+  it('does not connect nodes that do not share an overhang', () => {
+    const parts = [
+      { left_overhang: 'A', right_overhang: 'B' },
+      { left_overhang: 'C', right_overhang: 'D' }
+    ];
+    const graph = partsToGraph(parts);
+    expect(graph.hasEdge('A-B', 'C-D')).toBe(false);
+  });
+
+  it('handles duplicate parts', () => {
+    const parts = [
+      { left_overhang: 'A', right_overhang: 'B' },
+      { left_overhang: 'A', right_overhang: 'B' }
+    ];
+    const graph = partsToGraph(parts);
+    expect(graph.nodes().length).toBe(1);
+    expect(graph.hasNode('A-B')).toBe(true);
+  });
+
+  it('handles empty parts array', () => {
+    const graph = partsToGraph([]);
+    expect(graph.nodes().length).toBe(0);
+  });
+
+  it('creates a chain of connected nodes', () => {
+    const parts = [
+      { left_overhang: 'A', right_overhang: 'B' },
+      { left_overhang: 'B', right_overhang: 'C' },
+      { left_overhang: 'C', right_overhang: 'D' }
+    ];
+    const graph = partsToGraph(parts);
+    expect(graph.hasEdge('A-B', 'B-C')).toBe(true);
+    expect(graph.hasEdge('B-C', 'C-D')).toBe(true);
+  });
+});
+
+describe('partsToEdgesGraph', () => {
+  it('creates nodes for each unique overhang and creates edges between them', () => {
+    const parts = [
+      { left_overhang: 'A', right_overhang: 'B' },
+      { left_overhang: 'C', right_overhang: 'D' }
+    ];
+    const graph = partsToEdgesGraph(parts);
+    expect(graph.hasNode('A')).toBe(true);
+    expect(graph.hasNode('B')).toBe(true);
+    expect(graph.hasNode('C')).toBe(true);
+    expect(graph.hasNode('D')).toBe(true);
+    expect(graph.hasEdge('A', 'B')).toBe(true);
+    expect(graph.hasEdge('C', 'D')).toBe(true);
+  });
+
+  it('handles duplicate overhangs', () => {
+    const parts = [
+      { left_overhang: 'A', right_overhang: 'B' },
+      { left_overhang: 'A', right_overhang: 'B' }
+    ];
+    const graph = partsToEdgesGraph(parts);
+    expect(graph.hasNode('A')).toBe(true);
+    expect(graph.hasNode('B')).toBe(true);
+    expect(graph.hasEdge('A', 'B')).toBe(true);
+    expect(graph.nodes().length).toBe(2);
+  });
+
+  it('handles empty parts array', () => {
+    const graph = partsToEdgesGraph([]);
+    expect(graph.nodes().length).toBe(0);
+  });
+});
+
+describe('openCycleAtNode', () => {
+  it('removes incoming edges to the specified node and does not affect outgoing edges', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addNode('B');
+    graph.addNode('C');
+    graph.addEdge('A', 'B');
+    graph.addEdge('B', 'C');
+    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);
+
+  });
+
+  it('does not affect outgoing edges', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addNode('B');
+    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);
+  });
+
+  it('handles node with no incoming edges', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addNode('B');
+    graph.addEdge('A', 'B');
+    
+    openCycleAtNode(graph, 'A');
+    expect(graph.inDegree('A')).toBe(0);
+    expect(graph.hasEdge('A', 'B')).toBe(true);
+  });
+});
+
+describe('graphToMSA', () => {
+  it('converts a simple linear DAG to MSA', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addNode('B');
+    graph.addNode('C');
+    graph.addEdge('A', 'B');
+    graph.addEdge('B', 'C');
+    graph.addEdge('C', 'A');
+    const msa = graphToMSA(graph);
+    expect(msa.length).toBe(1);
+    expect(msa[0]).toContain('A');
+    expect(msa[0]).toContain('B');
+    expect(msa[0]).toContain('C');
+  });
+
+  it('handles branching paths', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addNode('B1');
+    graph.addNode('B2');
+    graph.addNode('B3');
+    graph.addNode('C');
+    graph.addEdge('A', 'B1');
+    graph.addEdge('A', 'B2');
+    graph.addEdge('B1', 'C');
+    graph.addEdge('B2', 'B3');
+    graph.addEdge('B3', 'C');
+    graph.addEdge('C', 'A');
+    const msa = graphToMSA(graph);
+    expect(msa).toEqual([
+      ['A', 'B2', 'B3', 'C'],
+      ['A', 'B1', GRAPH_SPACER, 'C'],
+    ]);
+  });
+
+  it('handles empty graph', () => {
+    const graph = new DirectedGraph();
+    const msa = graphToMSA(graph);
+    expect(msa).toEqual([]);
+  });
+
+  it('handles single node', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    const msa = graphToMSA(graph);
+    expect(msa).toEqual([]);
+  });
+});
+
+
+describe('graphHasCycle', () => {
+  it('returns false for acyclic graph', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addNode('B');
+    graph.addNode('C');
+    graph.addEdge('A', 'B');
+    graph.addEdge('B', 'C');
+    
+    expect(graphHasCycle(graph)).toBe(false);
+  });
+
+  it('returns true for cyclic graph', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addNode('B');
+    graph.addEdge('A', 'B');
+    graph.addEdge('B', 'A');
+    
+    expect(graphHasCycle(graph)).toBe(true);
+  });
+
+  it('handles self-loop', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    graph.addEdge('A', 'A');
+    
+    expect(graphHasCycle(graph)).toBe(true);
+  });
+
+  it('handles empty graph', () => {
+    const graph = new DirectedGraph();
+    expect(graphHasCycle(graph)).toBe(false);
+  });
+
+  it('handles single node with no edges', () => {
+    const graph = new DirectedGraph();
+    graph.addNode('A');
+    
+    expect(graphHasCycle(graph)).toBe(false);
+  });
+});

package/src/components/assembler/index.js

@@ -0,0 +1,9 @@
+export { default as AssemblerPart } from './AssemblerPart';
+export { AssemblerPartCore } from './AssemblerPart';
+export { getSvgByGlyph } from './sbol_visual_glyphs';
+export { DisplayOverhang, DisplayInside, AssemblerPartContainer } from './AssemblerPart';
+export { partDataToDisplayData } from './assembler_utils.js';
+export { partsToGraph, graphToMSA, graphHasCycle, partsToEdgesGraph, GRAPH_SPACER } from './graph_utils.js';
+export { usePlasmidsLogic } from './usePlasmidsLogic.js';
+export { default as PlasmidSyntaxTable } from './PlasmidSyntaxTable.jsx';
+export { default as ExistingSyntaxDialog } from './ExistingSyntaxDialog.jsx';