@opencloning/ui 1.2.0 → 1.3.1

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,251 @@
+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');
+  });
+
+  it('successfully uploads syntax from JSON file', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    const uploadedSyntaxData = {
+      name: 'Uploaded Syntax',
+      parts: [
+        { id: 1, name: 'Part 1' },
+        { id: 2, name: 'Part 2' },
+      ],
+    };
+
+    // Create a temporary JSON file
+    cy.writeFile('cypress/temp/syntax.json', uploadedSyntaxData);
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Upload syntax from JSON file').should('exist');
+
+    // Upload the JSON file
+    cy.get('input[type="file"]').selectFile('cypress/temp/syntax.json', { force: true });
+
+    cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', uploadedSyntaxData, []);
+    cy.get('@onCloseSpy').should('have.been.called');
+  });
+
+  it('displays error message when uploaded JSON file is invalid', () => {
+    const onCloseSpy = cy.spy().as('onCloseSpy');
+    const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
+
+    // Create a file with invalid JSON
+    cy.writeFile('cypress/temp/invalid.json', '{ invalid json }', { encoding: 'utf8' });
+
+    cy.mount(
+      <ExistingSyntaxDialog
+        onClose={onCloseSpy}
+        onSyntaxSelect={onSyntaxSelectSpy}
+      />,
+    );
+
+    cy.wait('@getSyntaxes');
+    cy.contains('Upload syntax from JSON file').should('exist');
+
+    // Upload invalid JSON
+    cy.get('input[type="file"]').selectFile('cypress/temp/invalid.json', { force: true });
+
+    cy.contains(/Failed to parse JSON file/).should('exist');
+    cy.get('@onSyntaxSelectSpy').should('not.have.been.called');
+    cy.get('@onCloseSpy').should('not.have.been.called');
+  });
+});

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -0,0 +1,104 @@
+import React from 'react'
+import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box } 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);
+  const fileInputRef = React.useRef(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]);
+
+  const handleFileUpload = React.useCallback(async (event) => {
+    setLoadError(null);
+    const file = event.target.files[0];
+    if (!file) return;
+
+    try {
+      const text = await file.text();
+      const syntaxData = JSON.parse(text);
+
+      // Uploaded JSON files contain only syntax data, no plasmids
+      onSyntaxSelect(syntaxData, []);
+      onClose();
+    } catch (error) {
+      setLoadError(`Failed to parse JSON file: ${error.message}`);
+    } finally {
+      // Reset file input so the same file can be selected again
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+    }
+  }, [onSyntaxSelect, onClose]);
+
+  return (
+    <Dialog open onClose={onClose}>
+      <DialogTitle>Load an existing syntax</DialogTitle>
+      <DialogContent>
+        {loadError && <Alert severity="error" sx={{ mb: 2 }}>{loadError}</Alert>}
+        <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>
+            ))}
+          </List>
+        </RequestStatusWrapper>
+        <Box sx={{ mb: 2 }}>
+          <input
+            type="file"
+            ref={fileInputRef}
+            accept=".json"
+            onChange={handleFileUpload}
+            style={{ display: 'none' }}
+          />
+          <Button
+            variant="outlined"
+            sx={{ display: 'block', mx: 'auto' }}
+            onClick={() => fileInputRef.current?.click()}
+          >
+              Upload syntax from JSON file
+          </Button>
+        </Box>
+      </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