@opencloning/ui 1.3.2 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @opencloning/ui
 
+## 1.4.0
+
+### Minor Changes
+
+- [#611](https://github.com/manulera/OpenCloning_frontend/pull/611) [`74a58c4`](https://github.com/manulera/OpenCloning_frontend/commit/74a58c463a32bf6443eaf062094dc4aac5c76b5a) Thanks [@manulera](https://github.com/manulera)! - Adds functionality to load files (sequences and syntaxes) from a local public folder, providing an alternative to uploading files manually. The implementation enables users to pre-configure collections of sequences and syntaxes that can be easily selected through a UI.
+
+  **Changes:**
+
+  - Added `useRequestForEffect` hook for managing async requests with retry capability
+  - Added `useServerStaticFiles` hook for fetching and managing local file collections
+  - Added `ServerStaticFileSelect` component for selecting files from the local collection with category filtering
+  - Added `SourceServerStaticFile` component and integrated it into the source selection flow
+  - Added local file loading capability to the assembler's plasmid uploader and syntax loader
+  - Configured build system to copy example collection folder to public directory during development
+  - Added comprehensive test coverage for all new components and functionality
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.0
+  - @opencloning/utils@1.4.0
+
+## 1.3.3
+
+### Patch Changes
+
+- [#607](https://github.com/manulera/OpenCloning_frontend/pull/607) [`1e4bfbf`](https://github.com/manulera/OpenCloning_frontend/commit/1e4bfbfb805e841d9a91cf650ebf632ac62b1248) Thanks [@manulera](https://github.com/manulera)! - Syntax validation and fix longestFeature when it's empty
+
+- Updated dependencies []:
+  - @opencloning/store@1.3.3
+  - @opencloning/utils@1.3.3
+
 ## 1.3.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,15 +25,15 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.3.2",
-    "@opencloning/utils": "1.3.2",
-    "@teselagen/bio-parsers": "^0.4.32",
-    "@teselagen/ove": "^0.8.30",
-    "@teselagen/range-utils": "^0.3.13",
-    "@teselagen/sequence-utils": "^0.3.35",
+    "@opencloning/store": "1.4.0",
+    "@opencloning/utils": "1.4.0",
+    "@teselagen/bio-parsers": "^0.4.34",
+    "@teselagen/ove": "^0.8.34",
+    "@teselagen/range-utils": "^0.3.20",
+    "@teselagen/sequence-utils": "^0.3.42",
     "@zip.js/zip.js": "^2.7.62",
     "axios": "^1.12.2",
-    "lodash-es": "^4.17.21",
+    "lodash-es": "^4.17.23",
     "react-draggable": "^4.4.6"
   },
   "peerDependencies": {

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

@@ -1,14 +1,7 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
-import { AssemblerComponent, UploadPlasmidsButton } from './Assembler';
-import mocloSyntax from '../../../../../cypress/test_files/syntax/moclo_syntax.json';
-
-mocloSyntax.overhangNames = {
-  ...mocloSyntax.overhangNames,
-  CCCT: 'CCCT_overhang',
-  AACG: 'AACG_overhang',
-};
+import { AssemblerComponent } from './Assembler';
 
 // Test config
 const testConfig = {
@@ -233,132 +226,3 @@ describe('<AssemblerComponent />', () => {
   });
 });
 
-describe('<UploadPlasmidsButton />', () => {
-  beforeEach(() => {
-    cy.window().then((win) => {
-      win.localStorage.clear();
-    });
-  });
-
-  it('calls addPlasmids with correctly formatted valid plasmid', () => {
-    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
-
-    cy.mount(
-      <ConfigProvider config={testConfig}>
-        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
-      </ConfigProvider>,
-    );
-
-    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
-      'cypress/test_files/syntax/pYTK002.gb',
-      'cypress/test_files/syntax/moclo_ytk_multi_part.gb',
-      'cypress/test_files/syntax/pYTK095.gb',
-      'cypress/test_files/sequencing/locus.gb'],
-    { force: true });
-
-    // Wait for the dialog to appear (indicating plasmids were processed)
-    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
-
-    cy.get('@addPlasmidsSpy').should('not.have.been.called');
-
-    cy.get('[data-testid="invalid-plasmids-box"]').contains('Invalid Plasmids').should('exist');
-    cy.get('[data-testid="valid-plasmids-box"]').contains('Valid Plasmids').should('exist');
-
-    cy.get('[data-testid="invalid-plasmids-box"]').contains('pYTK057')
-    cy.get('[data-testid="invalid-plasmids-box"]').contains('moclo_ytk_multi_part.gb')
-    cy.get('[data-testid="invalid-plasmids-box"] .MuiChip-label').contains('ATCC-TGGC')
-    cy.get('[data-testid="invalid-plasmids-box"] .MuiChip-label').contains('CCCT-AACG (CCCT_overhang-AACG_overhang)')
-    cy.get('[data-testid="invalid-plasmids-box"]').contains('Contains multiple parts')
-    cy.get('[data-testid="invalid-plasmids-box"]').contains('locus.gb')
-
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(0).should('contain', 'pYTK002')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(1).should('contain', 'pYTK002.gb')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(2).should('contain', 'CCCT-AACG (CCCT_overhang-AACG_overhang)')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(3).should('contain', '1')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).find('td').eq(4).should('contain', 'ConS')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(1).then(($el) => {
-      const bgColor = window.getComputedStyle($el[0]).backgroundColor;
-      cy.wrap(bgColor).should('equal', 'rgb(132, 197, 222)');
-    });
-
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(0).should('contain', 'pYTK095')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(1).should('contain', 'pYTK095.gb')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(2).should('contain', 'TACA-CCCT (TACA-CCCT_overhang)')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(3).should('contain', 'Spans multiple parts')
-    cy.get('[data-testid="valid-plasmids-box"] tr').eq(2).find('td').eq(4).should('contain', 'AmpR')
-
-    // Click the import button
-    cy.contains('button', 'Import valid plasmids').click();
-
-    // Verify addPlasmids was called
-    cy.get('@addPlasmidsSpy').should('have.been.called');
-
-    // Verify it was called with an array and check structure
-    cy.get('@addPlasmidsSpy').then((spy) => {
-      const firstCall = spy.getCall(0);
-      console.log('firstCall', firstCall.args);
-      cy.wrap(firstCall.args[0]).should('be.an', 'array');
-      cy.wrap(firstCall.args[0]).should('have.length', 2);
-
-      const firstPlasmid = firstCall.args[0][0];
-      
-      cy.wrap(firstPlasmid.file_name).should('equal', 'pYTK002.gb');
-      cy.wrap(firstPlasmid.plasmid_name).should('equal', 'pYTK002.gb (ConS)');
-      cy.wrap(firstPlasmid.left_overhang).should('equal', 'CCCT');
-      cy.wrap(firstPlasmid.right_overhang).should('equal', 'AACG');
-      cy.wrap(firstPlasmid.key).should('equal', 'CCCT-AACG');
-
-      const {appData} = firstPlasmid.sequenceData;
-
-      cy.wrap(appData.fileName).should('equal', 'pYTK002.gb');
-      cy.wrap(appData.correspondingParts).should('deep.equal', ['CCCT-AACG']);
-      cy.wrap(appData.correspondingPartsNames).should('deep.equal', ["CCCT_overhang-AACG_overhang"]);
-
-    });
-  });
-
-
-  it('does not allow to submit when all plasmids are invalid', () => {
-    cy.mount(
-      <ConfigProvider config={testConfig}>
-        <UploadPlasmidsButton addPlasmids={() => {}} syntax={mocloSyntax} />
-      </ConfigProvider>,
-    );
-    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
-      'cypress/test_files/sequencing/locus.gb'],
-    { force: true });
-
-    // Wait for the dialog to appear (indicating plasmids were processed)
-    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
-
-    cy.get('[data-testid="invalid-plasmids-box"]').contains('Invalid Plasmids').should('exist');
-    cy.get('[data-testid="valid-plasmids-box"]').should('not.exist');
-
-    cy.get('button').contains('Import valid plasmids').should('be.disabled');
-
-  });
-
-  it('cancelling does not call addPlasmids', () => {
-    const addPlasmidsSpy = cy.spy().as('addPlasmidsSpy');
-    cy.mount(
-      <ConfigProvider config={testConfig}>
-        <UploadPlasmidsButton addPlasmids={addPlasmidsSpy} syntax={mocloSyntax} />
-      </ConfigProvider>,
-    );
-    
-    cy.get('button').contains('Add Plasmids').siblings('input').selectFile([
-      'cypress/test_files/syntax/pYTK002.gb',
-      'cypress/test_files/syntax/moclo_ytk_multi_part.gb',
-      'cypress/test_files/syntax/pYTK095.gb',
-      'cypress/test_files/sequencing/locus.gb'],
-    { force: true });
-    
-    cy.get('.MuiDialog-root', { timeout: 10000 }).should('be.visible');
-
-    cy.get('button').contains('Cancel').click();
-
-    cy.get('@addPlasmidsSpy').should('not.have.been.called');
-
-  });
-
-});

package/src/components/assembler/Assembler.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
-  Alert, Autocomplete, Box, Button, CircularProgress, Dialog, DialogTitle, DialogContent,
-  DialogActions, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, Table,
+  Alert, Autocomplete, Box, Button, CircularProgress, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, Table,
   TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ButtonGroup
 } from '@mui/material'
 import { Clear as ClearIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
@@ -9,39 +8,18 @@ import { useAssembler } from './useAssembler';
 import { useDispatch } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
 import AssemblerPart from './AssemblerPart';
-import { jsonToGenbank } from '@teselagen/bio-parsers';
+
 import useCombinatorialAssembly from './useCombinatorialAssembly';
-import { usePlasmidsLogic } from './usePlasmidsLogic';
-import PlasmidSyntaxTable from './PlasmidSyntaxTable';
 import ExistingSyntaxDialog from './ExistingSyntaxDialog';
 import error2String from '@opencloning/utils/error2String';
 import { categoryFilter } from './assembler_utils';
+import useBackendRoute from '../../hooks/useBackendRoute';
+import useHttpClient from '../../hooks/useHttpClient';
+import useAlerts from '../../hooks/useAlerts';
+import UploadPlasmidsButton from './UploadPlasmidsButton';
 
-const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
-
-function formatPlasmid(sequenceData) {
 
-  const { appData } = sequenceData;
-  const { fileName, correspondingParts, longestFeature } = appData;
-  const [left_overhang, right_overhang] = correspondingParts[0].split('-');
-
-  let plasmidName = fileName;
-  if (longestFeature[0]?.name) {
-    plasmidName += ` (${longestFeature[0].name})`;
-  }
-
-  return {
-    type: 'loadedFile',
-    plasmid_name: plasmidName,
-    file_name: fileName,
-    left_overhang,
-    right_overhang,
-    key: `${left_overhang}-${right_overhang}`,
-    sequenceData,
-    genbankString: jsonToGenbank(sequenceData),
-  };
-
-}
+const { setState: setCloningState, setCurrentTab: setCurrentTabAction } = cloningActions;
 
 
 function formatItemName(item) {
@@ -261,71 +239,29 @@ function categoriesFromSyntaxAndPlasmids(syntax, plasmids) {
 
 function LoadSyntaxButton({ setSyntax, addPlasmids }) {
   const [existingSyntaxDialogOpen, setExistingSyntaxDialogOpen] = React.useState(false)
-  const onSyntaxSelect = React.useCallback((syntax, plasmids) => {
-    setSyntax(syntax)
-    addPlasmids(plasmids)
-  }, [setSyntax, addPlasmids])
+  const httpClient = useHttpClient();
+  const backendRoute = useBackendRoute();
+  const { addAlert } = useAlerts();
+  const onSyntaxSelect = React.useCallback(async (syntax, plasmids) => {
+    const url = backendRoute('validate_syntax');
+    try {
+      await httpClient.post(url, syntax);
+      setSyntax(syntax)
+      addPlasmids(plasmids)
+    } catch (error) {
+      addAlert({
+        message: error2String(error),
+        severity: 'error',
+      });
+    }
+  }, [setSyntax, addPlasmids, httpClient, backendRoute, addAlert])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
     {existingSyntaxDialogOpen && <ExistingSyntaxDialog onClose={() => setExistingSyntaxDialogOpen(false)} onSyntaxSelect={onSyntaxSelect}/>}
   </>
 }
 
-export function UploadPlasmidsButton({ addPlasmids, syntax }) {
-  const { uploadPlasmids, linkedPlasmids, setLinkedPlasmids } = usePlasmidsLogic(syntax)
-  const validPlasmids = React.useMemo(() => linkedPlasmids.filter((plasmid) => plasmid.appData.correspondingParts.length === 1), [linkedPlasmids])
-  const invalidPlasmids = React.useMemo(() => linkedPlasmids.filter((plasmid) => plasmid.appData.correspondingParts.length !== 1), [linkedPlasmids])
-  const fileInputRef = React.useRef(null)
-
-  const handleFileChange = (event) => {
-    uploadPlasmids(Array.from(event.target.files))
-    fileInputRef.current.value = ''
-  }
-
-  const handleImportValidPlasmids = React.useCallback(() => {
-    addPlasmids(validPlasmids.map(formatPlasmid))
-    setLinkedPlasmids([])
-  }, [addPlasmids, validPlasmids, setLinkedPlasmids])
 
-  return (<>
-    <Button color="primary" onClick={() => fileInputRef.current.click()}>
-        Add Plasmids
-    </Button>
-    <input multiple type="file" ref={fileInputRef} style={{ display: 'none' }} onChange={handleFileChange} accept=".gbk,.gb,.fasta,.fa,.dna" />
-    <Dialog
-      maxWidth="lg"
-      fullWidth
-      open={invalidPlasmids.length > 0 || validPlasmids.length > 0}
-      onClose={() => setLinkedPlasmids([])}
-      PaperProps={{
-        style: {
-          maxHeight: '80vh',
-        },
-      }}
-    >
-      <DialogActions sx={{ justifyContent: 'center', position: 'sticky', top: 0, zIndex: 99, background: '#fff' }}>
-        <Button disabled={validPlasmids.length === 0} variant="contained" color="success" onClick={handleImportValidPlasmids}>Import valid plasmids</Button>
-        <Button variant="contained" color="error" onClick={() => setLinkedPlasmids([])}>Cancel</Button>
-      </DialogActions>
-      {invalidPlasmids.length > 0 && (
-        <Box data-testid="invalid-plasmids-box">
-          <DialogTitle>Invalid Plasmids</DialogTitle>
-          <DialogContent>
-            <PlasmidSyntaxTable plasmids={invalidPlasmids} />
-          </DialogContent>
-        </Box>
-      )}
-      {validPlasmids.length > 0 && (
-        <Box data-testid="valid-plasmids-box">
-          <DialogTitle>Valid Plasmids</DialogTitle>
-          <DialogContent>
-            <PlasmidSyntaxTable plasmids={validPlasmids} />
-          </DialogContent>
-        </Box>
-      )}
-    </Dialog>
-  </>)
-}
 
 function Assembler() {
   const [syntax, setSyntax] = React.useState(null);

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

@@ -1,6 +1,16 @@
 import React from 'react';
+import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 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',
@@ -40,10 +50,12 @@ describe('<ExistingSyntaxDialog />', () => {
     const onSyntaxSelectSpy = cy.spy().as('onSyntaxSelectSpy');
 
     cy.mount(
-      <ExistingSyntaxDialog
-        onClose={onCloseSpy}
-        onSyntaxSelect={onSyntaxSelectSpy}
-      />,
+      <ConfigProvider config={testConfig}>
+        <ExistingSyntaxDialog
+          onClose={onCloseSpy}
+          onSyntaxSelect={onSyntaxSelectSpy}
+        />
+      </ConfigProvider>,
     );
 
     cy.wait('@getSyntaxes');
@@ -70,10 +82,12 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getPlasmidsData');
 
     cy.mount(
-      <ExistingSyntaxDialog
-        onClose={onCloseSpy}
-        onSyntaxSelect={onSyntaxSelectSpy}
-      />,
+      <ConfigProvider config={testConfig}>
+        <ExistingSyntaxDialog
+          onClose={onCloseSpy}
+          onSyntaxSelect={onSyntaxSelectSpy}
+        />
+      </ConfigProvider>,
     );
 
     cy.wait('@getSyntaxes');
@@ -97,10 +111,12 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getSyntaxDataError');
 
     cy.mount(
-      <ExistingSyntaxDialog
-        onClose={onCloseSpy}
-        onSyntaxSelect={onSyntaxSelectSpy}
-      />,
+      <ConfigProvider config={testConfig}>
+        <ExistingSyntaxDialog
+          onClose={onCloseSpy}
+          onSyntaxSelect={onSyntaxSelectSpy}
+        />
+      </ConfigProvider>,
     );
 
     cy.wait('@getSyntaxes');
@@ -130,10 +146,12 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getPlasmidsDataError');
 
     cy.mount(
-      <ExistingSyntaxDialog
-        onClose={onCloseSpy}
-        onSyntaxSelect={onSyntaxSelectSpy}
-      />,
+      <ConfigProvider config={testConfig}>
+        <ExistingSyntaxDialog
+          onClose={onCloseSpy}
+          onSyntaxSelect={onSyntaxSelectSpy}
+        />
+      </ConfigProvider>,
     );
 
     cy.wait('@getSyntaxes');
@@ -169,10 +187,12 @@ describe('<ExistingSyntaxDialog />', () => {
     }).as('getPlasmidsData2');
 
     cy.mount(
-      <ExistingSyntaxDialog
-        onClose={onCloseSpy}
-        onSyntaxSelect={onSyntaxSelectSpy}
-      />,
+      <ConfigProvider config={testConfig}>
+        <ExistingSyntaxDialog
+          onClose={onCloseSpy}
+          onSyntaxSelect={onSyntaxSelectSpy}
+        />
+      </ConfigProvider>,
     );
 
     cy.wait('@getSyntaxes');
@@ -204,21 +224,27 @@ describe('<ExistingSyntaxDialog />', () => {
       ],
     };
 
-    // Create a temporary JSON file
-    cy.writeFile('cypress/temp/syntax.json', uploadedSyntaxData);
+    const tempFile = {
+      contents: Cypress.Buffer.from(JSON.stringify(uploadedSyntaxData)),
+      fileName: 'syntax.json',
+      mimeType: 'text/plain',
+      lastModified: Date.now(),
+    }
 
     cy.mount(
-      <ExistingSyntaxDialog
-        onClose={onCloseSpy}
-        onSyntaxSelect={onSyntaxSelectSpy}
-      />,
+      <ConfigProvider config={testConfig}>
+        <ExistingSyntaxDialog
+          onClose={onCloseSpy}
+          onSyntaxSelect={onSyntaxSelectSpy}
+        />
+      </ConfigProvider>,
     );
 
     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('input[type="file"]').selectFile(tempFile, { force: true });
 
     cy.get('@onSyntaxSelectSpy').should('have.been.calledWith', uploadedSyntaxData, []);
     cy.get('@onCloseSpy').should('have.been.called');
@@ -228,21 +254,27 @@ describe('<ExistingSyntaxDialog />', () => {
     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' });
+    const invalidFile = {
+      contents: Cypress.Buffer.from('{ invalid json }'),
+      fileName: 'invalid.json',
+      mimeType: 'text/plain',
+      lastModified: Date.now(),
+    }
 
     cy.mount(
-      <ExistingSyntaxDialog
-        onClose={onCloseSpy}
-        onSyntaxSelect={onSyntaxSelectSpy}
-      />,
+      <ConfigProvider config={testConfig}>
+        <ExistingSyntaxDialog
+          onClose={onCloseSpy}
+          onSyntaxSelect={onSyntaxSelectSpy}
+        />
+      </ConfigProvider>,
     );
 
     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.get('input[type="file"]').selectFile(invalidFile, { force: true });
 
     cy.contains(/Failed to parse JSON file/).should('exist');
     cy.get('@onSyntaxSelectSpy').should('not.have.been.called');

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -1,18 +1,41 @@
 import React from 'react'
-import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box } from '@mui/material'
+import { Dialog, DialogTitle, DialogContent, List, ListItem, ListItemText, ListItemButton, Alert, Button, Box, ButtonGroup } from '@mui/material'
 import getHttpClient from '@opencloning/utils/getHttpClient';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';
+import { useConfig } from '../../providers';
+import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
+import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
 
 const httpClient = getHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
 httpClient.defaults.baseURL = baseURL;
 
+function LocalSyntaxDialog({ onClose, onSyntaxSelect }) {
+
+  const onFileSelected = React.useCallback(async (file) => {
+    const text = await readSubmittedTextFile(file);
+    const syntaxData = JSON.parse(text);
+    onSyntaxSelect(syntaxData, []);
+    onClose();
+  }, [onSyntaxSelect, onClose]);
+  return (
+    <Dialog data-testid="local-syntax-dialog" open onClose={onClose}>
+      <DialogTitle>Load syntax from local server</DialogTitle>
+      <DialogContent sx={{ minWidth: '400px' }}>
+        <ServerStaticFileSelect onFileSelected={onFileSelected} type="syntax" />
+      </DialogContent>
+    </Dialog>
+  )
+}
+
 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);
+  const { staticContentPath } = useConfig();
+  const [localDialogOpen, setLocalDialogOpen] = React.useState(false);
 
   React.useEffect(() => {
     setRequestStatus({ status: 'loading' });
@@ -88,13 +111,21 @@ function ExistingSyntaxDialog({ onClose, onSyntaxSelect }) {
             onChange={handleFileUpload}
             style={{ display: 'none' }}
           />
-          <Button
-            variant="outlined"
-            sx={{ display: 'block', mx: 'auto' }}
-            onClick={() => fileInputRef.current?.click()}
-          >
-              Upload syntax from JSON file
-          </Button>
+          <ButtonGroup sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Button
+              onClick={() => fileInputRef.current?.click()}
+            >
+                Upload syntax from JSON file
+            </Button>
+            {staticContentPath && (
+              <Button
+                onClick={() => setLocalDialogOpen(true)}
+              >
+                Load syntax from local server
+              </Button>
+            )}
+          </ButtonGroup>
+          {localDialogOpen && <LocalSyntaxDialog onClose={() => {setLocalDialogOpen(false); onClose()}} onSyntaxSelect={onSyntaxSelect} />}
         </Box>
       </DialogContent>
     </Dialog>

package/src/components/assembler/PlasmidSyntaxTable.jsx

@@ -22,7 +22,7 @@ function PlasmidRow({ plasmid }) {
       backgroundColor: partInfo[0]?.color,
     }
     infoStr = partInfo[0] ? partInfo[0].name : 'Spans multiple parts';
-    longestFeatureStr = longestFeature ? longestFeature[0].name : '-';
+    longestFeatureStr = longestFeature[0] ? longestFeature[0].name : '-';
   }
   const multipleParts = partInfo.length > 1;
   if (multipleParts) {