@opencloning/ui 1.0.2-test.0 → 1.1.0-test.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @opencloning/ui
 
+## 1.1.0-test.2
+
+### Minor Changes
+
+- d46f09d: Handle version display with scripts
+
+### Patch Changes
+
+- Updated dependencies [d46f09d]
+  - @opencloning/store@1.1.0-test.2
+  - @opencloning/utils@1.1.0-test.2
+
+## 1.1.0-test.1
+
+### Minor Changes
+
+- 02dbc55: Switch to using provider for configuration rather than state
+
+### Patch Changes
+
+- Updated dependencies [02dbc55]
+  - @opencloning/store@1.1.0-test.1
+  - @opencloning/utils@1.1.0-test.1
+
 ## 1.0.2-test.0
 
 ### Patch Changes

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.0.2-test.0",
+  "version": "1.1.0-test.2",
   "type": "module",
   "main": "./src/index.js",
+  "scripts": {
+    "prepack": "node scripts/inject-version.js",
+    "postpack": "node scripts/reset-version.js"
+  },
   "exports": {
     ".": "./src/index.js",
-    "./components": "./src/components/index.js"
+    "./components": "./src/components/index.js",
+    "./providers/ConfigProvider": "./src/providers/ConfigProvider.jsx",
+    "./hooks/useConfig": "./src/hooks/useConfig.js"
   },
   "repository": {
     "type": "git",
@@ -17,8 +23,8 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.0.2-test.0",
-    "@opencloning/utils": "1.0.2-test.0",
+    "@opencloning/store": "1.1.0-test.2",
+    "@opencloning/utils": "1.1.0-test.2",
     "@teselagen/bio-parsers": "^0.4.32",
     "@teselagen/ove": "^0.8.18",
     "@teselagen/range-utils": "^0.3.13",

package/scripts/inject-version.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+import { readFileSync, writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const pkg = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf-8'));
+const file = join(__dirname, '..', 'src', 'version.js');
+
+const content = `// Version placeholder - replaced at publish time via prepack script
+export const version = "${pkg.version}";
+`;
+
+writeFileSync(file, content, 'utf-8');
+console.log(`✓ Injected version ${pkg.version}`);

package/scripts/reset-version.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+import { writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const file = join(__dirname, '..', 'src', 'version.js');
+
+const content = `// Version placeholder - replaced at publish time via prepack script
+export const version = "__VERSION__";
+`;
+
+writeFileSync(file, content, 'utf-8');
+console.log('✓ Reset version placeholder');

package/src/components/ExternalServicesStatusCheck.jsx

@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux';
 import useBackendRoute from '../hooks/useBackendRoute';
 import useHttpClient from '../hooks/useHttpClient';
 import { cloningActions } from '@opencloning/store/cloning';
+import { version } from '../index';
 
 const { updateAppInfo } = cloningActions;
 
@@ -16,7 +17,7 @@ function ExternalServicesStatusCheck() {
   const backendRoute = useBackendRoute();
   const httpClient = useHttpClient();
   React.useEffect(() => {
-    dispatch(updateAppInfo({ frontendVersion: __APP_VERSION__ }));
+    dispatch(updateAppInfo({ frontendVersion: version }));
     setLoading(true);
     const checkServices = async () => {
       const services = [

package/src/components/OpenCloning.jsx

@@ -13,6 +13,7 @@ import CloningHistory from './CloningHistory';
 import SequenceTab from './SequenceTab';
 import AppAlerts from './AppAlerts';
 import Assembler from './assembler/Assembler';
+import { useConfig } from '../hooks/useConfig';
 
 const { setCurrentTab } = cloningActions;
 
@@ -21,8 +22,7 @@ function OpenCloning() {
   const currentTab = useSelector((state) => state.cloning.currentTab);
   const tabPanelsRef = useRef(null);
   const [smallDevice, setSmallDevice] = useState(window.innerWidth < 600);
-  const hasAppBar = useSelector((state) => state.cloning.config.showAppBar, isEqual);
-  const enableAssembler = useSelector((state) => state.cloning.config.enableAssembler);
+  const { showAppBar: hasAppBar, enableAssembler } = useConfig();
 
   React.useEffect(() => {
     const handleResize = () => {

package/src/components/form/EnzymeMultiSelect.cy.jsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import EnzymeMultiSelect from './EnzymeMultiSelect';
-import store from '@opencloning/store';
-import { cloningActions } from '@opencloning/store/cloning';
+import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
+
+const config = {
+  backendUrl: 'http://127.0.0.1:8000',
+};
 
-const { setConfig } = cloningActions;
 describe('<EnzymeMultiSelect />', () => {
-  beforeEach(() => {
-    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
-  });
   it('can add and remove enzymes, sets enzymes', () => {
     // see: https://on.cypress.io/mounting-react
     const setEnzymesSpy = cy.spy().as('setEnzymesSpy');
-    cy.mount(<EnzymeMultiSelect setEnzymes={setEnzymesSpy} />);
+    cy.mount(
+      <ConfigProvider config={config}>
+        <EnzymeMultiSelect setEnzymes={setEnzymesSpy} />
+      </ConfigProvider>
+    );
     cy.get('.MuiInputBase-root').click();
     // All enzymes shown
     cy.get('div[role="presentation"]', { timeout: 20000 }).contains('AanI');
@@ -46,7 +49,11 @@ describe('<EnzymeMultiSelect />', () => {
       statusCode: 500,
       body: 'Server down',
     });
-    cy.mount(<EnzymeMultiSelect setEnzymes={() => {}} />);
+    cy.mount(
+      <ConfigProvider config={config}>
+        <EnzymeMultiSelect setEnzymes={() => {}} />
+      </ConfigProvider>
+    );
     cy.get('.MuiAlert-message').contains('Could not retrieve enzymes from server');
   });
   it('shows loading message', () => {
@@ -54,7 +61,11 @@ describe('<EnzymeMultiSelect />', () => {
       delayMs: 1000,
       body: { enzyme_names: ['EcoRI', 'SalI'] },
     });
-    cy.mount(<EnzymeMultiSelect setEnzymes={() => {}} />);
+    cy.mount(
+      <ConfigProvider config={config}>
+        <EnzymeMultiSelect setEnzymes={() => {}} />
+      </ConfigProvider>
+    );
     cy.get('.MuiCircularProgress-svg');
     cy.contains('retrieving enzymes...').should('exist');
   });

package/src/components/primers/PrimerList.cy.jsx

@@ -3,93 +3,101 @@ import PrimerList from './PrimerList';
 import store from '@opencloning/store';
 import { cloningActions } from '@opencloning/store/cloning';
 import { Provider } from 'react-redux';
+import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
 
-const { setConfig, setPrimers, setGlobalPrimerSettings } = cloningActions;
+const { setPrimers, setGlobalPrimerSettings } = cloningActions;
+
+const config = {
+  backendUrl: 'http://127.0.0.1:8000',
+};
 
 const mockReply = {
-    statusCode: 200, body: {
-        melting_temperature: 60, gc_content: .5, homodimer: {
-            melting_temperature: 0,
-            deltaG: 0,
-            figure: "dummy_figure"
-        },
-        hairpin: {
-            melting_temperature: 0,
-            deltaG: 0,
-            figure: "dummy_figure"
-        },
-    }
+  statusCode: 200, body: {
+    melting_temperature: 60, gc_content: .5, homodimer: {
+      melting_temperature: 0,
+      deltaG: 0,
+      figure: "dummy_figure"
+    },
+    hairpin: {
+      melting_temperature: 0,
+      deltaG: 0,
+      figure: "dummy_figure"
+    },
+  }
 }
 
 describe('PrimerList', () => {
-    beforeEach(() => {
-        store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
-    });
-    it('displays the right information', () => {
-        store.dispatch(setPrimers([
-            { id: 1, name: 'P1', sequence: 'TCATTAAAGTTAACG' },
-        ]));
+  it('displays the right information', () => {
+    store.dispatch(setPrimers([
+      { id: 1, name: 'P1', sequence: 'TCATTAAAGTTAACG' },
+    ]));
 
-        cy.mount(
-            <Provider store={store}>
-                <PrimerList />
-            </Provider>
-        );
-        cy.get('td.name').contains('P1');
-        cy.get('td.length').contains('15');
-        cy.get('td.gc-content').contains('27');
-        cy.get('td.melting-temperature').contains('37.5');
-        cy.get('td.sequence').contains('TCATTAAAGTTAACG');
-    });
-
-    it('caches primer details across re-renders and re-renders on global settings change', () => {
-        let calls = 0;
-        store.dispatch(setPrimers([
-            { id: 1, name: 'P1', sequence: 'AAA' },
-        ]));
-        cy.intercept('POST', 'http://127.0.0.1:8000/primer_details*', (req) => {
-            calls += 1;
-            const respReply = calls === 1 ? mockReply : {
-                statusCode: 200, body: {
-                    ...mockReply.body,
-                    melting_temperature: calls === 1 ? 60 : 70,
-                }
-            }
-            expect(req.body).to.deep.equal({
-                sequence: 'AAA',
-                settings: {
-                    primer_dna_conc: calls === 1 ? 50 : 100,
-                    primer_salt_monovalent: 50,
-                    primer_salt_divalent: 1.5,
-                },
-            });
-            req.reply(respReply);
-        }).as('primerDetails');
+    cy.mount(
+      <Provider store={store}>
+        <ConfigProvider config={config}>
+          <PrimerList />
+        </ConfigProvider>
+      </Provider>
+    );
+    cy.get('td.name').contains('P1');
+    cy.get('td.length').contains('15');
+    cy.get('td.gc-content').contains('27');
+    cy.get('td.melting-temperature').contains('37.5');
+    cy.get('td.sequence').contains('TCATTAAAGTTAACG');
+  });
 
-        // First mount triggers two network calls (one per unique primer sequence)
-        cy.mount(
-            <Provider store={store}>
-                <PrimerList />
-            </Provider>)
-        cy.contains('Loading...').should('not.exist');
-        cy.wait('@primerDetails');
-        cy.then(() => {
-            expect(calls).to.equal(1);
-            cy.mount(
-                <Provider store={store}>
-                    <PrimerList />
-                </Provider>)
-            cy.then(() => {
-                expect(calls).to.equal(1);
-            });
-            store.dispatch(setGlobalPrimerSettings({ primer_dna_conc: 100 }))
-            cy.wait('@primerDetails');
-            cy.then(() => {
-                expect(calls).to.equal(2);
-                cy.get('td.melting-temperature').contains('70');
-            });
+  it('caches primer details across re-renders and re-renders on global settings change', () => {
+    let calls = 0;
+    store.dispatch(setPrimers([
+      { id: 1, name: 'P1', sequence: 'AAA' },
+    ]));
+    cy.intercept('POST', 'http://127.0.0.1:8000/primer_details*', (req) => {
+      calls += 1;
+      const respReply = calls === 1 ? mockReply : {
+        statusCode: 200, body: {
+          ...mockReply.body,
+          melting_temperature: calls === 1 ? 60 : 70,
+        }
+      }
+      expect(req.body).to.deep.equal({
+        sequence: 'AAA',
+        settings: {
+          primer_dna_conc: calls === 1 ? 50 : 100,
+          primer_salt_monovalent: 50,
+          primer_salt_divalent: 1.5,
+        },
+      });
+      req.reply(respReply);
+    }).as('primerDetails');
 
-        });
+    // First mount triggers two network calls (one per unique primer sequence)
+    cy.mount(
+      <Provider store={store}>
+        <ConfigProvider config={config}>
+          <PrimerList />
+        </ConfigProvider>
+      </Provider>)
+    cy.contains('Loading...').should('not.exist');
+    cy.wait('@primerDetails');
+    cy.then(() => {
+      expect(calls).to.equal(1);
+      cy.mount(
+        <Provider store={store}>
+          <ConfigProvider config={config}>
+            <PrimerList />
+          </ConfigProvider>
+        </Provider>)
+      cy.then(() => {
+        expect(calls).to.equal(1);
+      });
+      store.dispatch(setGlobalPrimerSettings({ primer_dna_conc: 100 }))
+      cy.wait('@primerDetails');
+      cy.then(() => {
+        expect(calls).to.equal(2);
+        cy.get('td.melting-temperature').contains('70');
+      });
 
     });
+
+  });
 });

package/src/components/sources/Source.jsx

@@ -14,7 +14,6 @@ import SourceAnnotation from './SourceAnnotation';
 import SourceDatabase from './SourceDatabase';
 import SourcePolymeraseExtension from './SourcePolymeraseExtension';
 import CollectionSource from './CollectionSource';
-import KnownSourceErrors from './KnownSourceErrors';
 import useBackendAPI from '../../hooks/useBackendAPI';
 import MultipleOutputsSelector from './MultipleOutputsSelector';
 import { cloningActions } from '@opencloning/store/cloning';
@@ -31,7 +30,6 @@ function Source({ sourceId }) {
   const { type: sourceType } = source;
   let specificSource = null;
   const templateOnlySources = ['CollectionSource', 'KnownGenomeCoordinatesSource'];
-  const knownErrors = useSelector((state) => state.cloning.knownErrors, isEqual);
   const { requestStatus, sendPostRequest, sources, sequences } = useBackendAPI();
   const { addSequenceAndUpdateItsSource, updateSequenceAndItsSource } = cloningActions;
   const [chosenFragment, setChosenFragment] = React.useState(null);
@@ -115,7 +113,6 @@ function Source({ sourceId }) {
   return (
     <>
       {!templateOnlySources.includes(sourceType) && (<SourceTypeSelector {...{ source }} />)}
-      {sourceType && knownErrors[sourceType] && <KnownSourceErrors errors={knownErrors[sourceType]} />}
       {specificSource}
       {sources.length > 1 && (<MultipleOutputsSelector {...{ sources, sequences, sourceId, onFragmentChosen: setChosenFragment }} />)}
     </>

package/src/components/sources/SourceTypeSelector.jsx

@@ -7,6 +7,7 @@ import Select from '@mui/material/Select';
 import { getInputSequencesFromSourceId } from '@opencloning/store/cloning_utils';
 import { cloningActions } from '@opencloning/store/cloning';
 import useDatabase from '../../hooks/useDatabase';
+import { useConfig } from '../../hooks/useConfig';
 
 const { replaceSource } = cloningActions;
 
@@ -15,8 +16,7 @@ function SourceTypeSelector({ source }) {
   const dispatch = useDispatch();
   const database = useDatabase();
   const sourceIsPrimerDesign = useSelector((state) => Boolean(state.cloning.sequences.find((e) => e.id === source.id)?.primer_design));
-  const noExternalRequests = useSelector((state) => state.cloning.config.noExternalRequests);
-  const enablePlannotate = useSelector((state) => state.cloning.config.enablePlannotate);
+  const { noExternalRequests, enablePlannotate } = useConfig();
 
   const onChange = (event) => {
     // Clear the source other than these fields

package/src/components/verification/VerificationFileDialog.cy.jsx

@@ -4,8 +4,14 @@ import store from '@opencloning/store';
 import { cloningActions } from '@opencloning/store/cloning';
 import { loadDataAndMount } from '../../../../../cypress/e2e/common_funcions_store';
 import { getVerificationFileName } from '@opencloning/utils/readNwrite';
+import { ConfigProvider } from '@opencloning/ui/providers/ConfigProvider';
+import { Provider } from 'react-redux';
 
-const { setFiles, setConfig } = cloningActions;
+const { setFiles } = cloningActions;
+
+const config = {
+  backendUrl: 'http://127.0.0.1:8000',
+};
 
 const dummyFiles = [
   { file_name: 'file1.txt', sequence_id: 1, file_type: 'Sequencing file' },
@@ -22,7 +28,13 @@ describe('<VerificationFileDialog />', () => {
   it('renders and calls setDialogOpen with false when clicking close button', () => {
     // see: https://on.cypress.io/mounting-react
     const setDialogOpenSpy = cy.spy().as('setDialogOpenSpy');
-    cy.mount(<VerificationFileDialog id={1} dialogOpen setDialogOpen={setDialogOpenSpy} />);
+    cy.mount(
+      <Provider store={store}>
+        <ConfigProvider config={config}>
+          <VerificationFileDialog id={1} dialogOpen setDialogOpen={setDialogOpenSpy} />
+        </ConfigProvider>
+      </Provider>
+    );
 
     // Click close button
     cy.get('button').contains('Close').click();
@@ -41,7 +53,13 @@ describe('<VerificationFileDialog />', () => {
     dummyFiles.forEach((file) => {
       sessionStorage.setItem(getVerificationFileName(file), base64str);
     });
-    cy.mount(<VerificationFileDialog id={1} dialogOpen setDialogOpen={() => {}} />);
+    cy.mount(
+      <Provider store={store}>
+        <ConfigProvider config={config}>
+          <VerificationFileDialog id={1} dialogOpen setDialogOpen={() => {}} />
+        </ConfigProvider>
+      </Provider>
+    );
     // Even though there are two files with the same name, only one should be displayed
     cy.get('table td').filter(':contains("file1.txt")').should('have.length', 1);
     cy.get('table').contains('file2.txt');
@@ -64,13 +82,17 @@ describe('<VerificationFileDialog />', () => {
   });
 
   it('can submit files and aligns them', () => {
-    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
-
     loadDataAndMount(
       'cypress/test_files/sequencing/cloning_strategy_linear.json',
       store,
       () => {
-        cy.mount(<VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />);
+        cy.mount(
+          <Provider store={store}>
+            <ConfigProvider config={config}>
+              <VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />
+            </ConfigProvider>
+          </Provider>
+        );
       },
     ).then(() => {
       cy.get('button').contains('Submit files').click();
@@ -118,12 +140,17 @@ describe('<VerificationFileDialog />', () => {
       });
   });
   it('handles errors', () => {
-    store.dispatch(setConfig({ backendUrl: 'http://127.0.0.1:8000' }));
     loadDataAndMount(
       'cypress/test_files/sequencing/cloning_strategy_linear.json',
       store,
       () => {
-        cy.mount(<VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />);
+        cy.mount(
+          <Provider store={store}>
+            <ConfigProvider config={config}>
+              <VerificationFileDialog id={2} dialogOpen setDialogOpen={() => {}} />
+            </ConfigProvider>
+          </Provider>
+        );
       },
     ).then(() => {
       // Error if submitting non-allowed files

package/src/hooks/useBackendRoute.js

@@ -1,7 +1,8 @@
-import { useSelector } from 'react-redux';
+import { useConfig } from './useConfig';
 
 export default function useBackendRoute() {
-  const configBackendUrl = useSelector((state) => state.cloning.config.backendUrl);
+  const { backendUrl: configBackendUrl } = useConfig();
+  
   if (!configBackendUrl) {
     return () => {};
   }

package/src/hooks/useConfig.js

@@ -0,0 +1,2 @@
+// Re-export useConfig from ConfigProvider for convenience
+export { useConfig } from '../providers/ConfigProvider';

package/src/hooks/useDatabase.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useConfig } from './useConfig';
 import eLabFTWInterface from '../components/eLabFTW/eLabFTWInterface';
 import dummyInterface from '../components/dummy/DummyInterface';
 
 export default function useDatabase() {
-  const databaseName = useSelector((state) => state.cloning.config.database);
+  const { database: databaseName } = useConfig();
 
   return React.useMemo(() => {
     if (databaseName === 'elabftw') {

package/src/hooks/useHttpClient.js

@@ -1,12 +1,18 @@
-import { useSelector } from 'react-redux';
 import React from 'react';
 import getHttpClient from '@opencloning/utils/getHttpClient';
+import { useConfig } from './useConfig';
 
 export default function useHttpClient() {
-  const backendUrl = useSelector((state) => state.cloning.config.backendUrl);
+  const { backendUrl } = useConfig();
 
   // Memoize the client creation and interceptor setup
-  const apiClient = React.useMemo(() => getHttpClient([backendUrl]), [backendUrl]);
+  const apiClient = React.useMemo(() => {
+    if (!backendUrl) {
+      // Return a client without backend URL if config not loaded yet
+      return getHttpClient([]);
+    }
+    return getHttpClient([backendUrl]);
+  }, [backendUrl]);
 
   return apiClient;
 }

package/src/hooks/useInitializeApp.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook to initialize application-level concerns
+ * - Clears session storage
+ */
+export default function useInitializeApp() {
+
+  useEffect(() => {
+    // Clear session storage
+    // eslint-disable-next-line no-undef
+    sessionStorage.clear();
+  }, []);
+}
+

package/src/hooks/useUrlParamsLoader.js

@@ -0,0 +1,149 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { cloningActions } from '@opencloning/store/cloning';
+import useDatabase from './useDatabase';
+import useLoadDatabaseFile from './useLoadDatabaseFile';
+import useAlerts from './useAlerts';
+import useHttpClient from './useHttpClient';
+import useValidateState from './useValidateState';
+import { formatSequenceLocationString, getUrlParameters } from '@opencloning/utils/other';
+import { formatTemplate, loadHistoryFile, loadFilesToSessionStorage } from '@opencloning/utils/readNwrite';
+
+const { setState: setCloningState, updateSource } = cloningActions;
+
+/**
+ * Hook to load sequences from URL parameters
+ * Handles various source types: database, example, template, genome_coordinates, locus_tag
+ */
+export default function useUrlParamsLoader() {
+  const dispatch = useDispatch();
+  const database = useDatabase();
+  const { addAlert } = useAlerts();
+  const setHistoryFileError = (e) => addAlert({ message: e, severity: 'error' });
+  const { loadDatabaseFile } = useLoadDatabaseFile({ source: { id: 1 }, sendPostRequest: null, setHistoryFileError });
+  const validateState = useValidateState();
+  const httpClient = useHttpClient();
+
+  useEffect(() => {
+    async function loadSequenceFromUrlParams() {
+      const urlParams = getUrlParameters();
+
+      if (urlParams.source === 'database') {
+        try {
+          if (!database) {
+            return;
+          }
+          const { file, databaseId } = await database.loadSequenceFromUrlParams(urlParams);
+          loadDatabaseFile(file, databaseId);
+        } catch (error) {
+          addAlert({
+            message: 'Error loading sequence from URL parameters',
+            severity: 'error',
+          });
+          console.error(error);
+        }
+      } else if (urlParams.source === 'example' && urlParams.example) {
+        try {
+          const url = `${import.meta.env.BASE_URL}examples/${urlParams.example}`;
+          let data;
+          if (urlParams.example.endsWith('.zip')) {
+            // For zip files, get as blob and process with loadHistoryFile
+            const { data: blob } = await httpClient.get(url, { responseType: 'blob' });
+            const fileName = urlParams.example;
+            // eslint-disable-next-line no-undef
+            const file = new File([blob], fileName);
+            const { cloningStrategy, verificationFiles } = await loadHistoryFile(file);
+            data = await validateState(cloningStrategy);
+            await loadFilesToSessionStorage(verificationFiles, 0);
+          } else {
+            // For JSON files, get as JSON
+            const { data: jsonData } = await httpClient.get(url);
+            data = await validateState(jsonData);
+          }
+          dispatch(setCloningState(data));
+        } catch (error) {
+          addAlert({
+            message: 'Error loading example',
+            severity: 'error',
+          });
+          console.error(error);
+        }
+      } else if (urlParams.source === 'template' && urlParams.template && urlParams.key) {
+        try {
+          const baseUrl = 'https://assets.opencloning.org/OpenCloning-submission';
+          const url = `${baseUrl}/processed/${urlParams.key}/templates/${urlParams.template}`;
+          const { data } = await httpClient.get(url);
+          const validatedData = await validateState(data);
+          const newState = formatTemplate(validatedData, url);
+
+          dispatch(setCloningState(newState));
+        } catch (error) {
+          addAlert({
+            message: 'Error loading template',
+            severity: 'error',
+          });
+          console.error(error);
+        }
+      } else if (urlParams.source === 'genome_coordinates') {
+        const { sequence_accession, start, end, strand, assembly_accession } = urlParams;
+        if (!sequence_accession || !start || !end || !strand) {
+          addAlert({
+            message: 'Error loading genome sequence from URL parameters',
+            severity: 'error',
+          });
+          return;
+        }
+        const startNum = Number(start);
+        const endNum = Number(end);
+        const strandNum = Number(strand);
+        let error = '';
+        if (isNaN(startNum) || isNaN(endNum)) {
+          error = 'Start and end must be numbers';
+        }
+        else if (![1, -1].includes(strandNum)) {
+          error = 'Strand must be 1 or -1';
+        }
+        else if (startNum < 1) {
+          error = 'Start must be greater than zero';
+        }
+        else if (startNum >= endNum) {
+          error = 'End must be greater than start';
+        }
+        if (error) {
+          addAlert({ message: `Error loading genome coordinates from URL parameters: ${error}`, severity: 'error' });
+          return;
+        }
+
+        const source = {
+          id: 1,
+          type: 'KnownGenomeCoordinatesSource',
+          assembly_accession,
+          repository_id: sequence_accession,
+          coordinates: formatSequenceLocationString(start, end, strand),
+        }
+        dispatch(updateSource(source));
+      } else if (urlParams.source === 'locus_tag') {
+        const { locus_tag, assembly_accession, padding } = urlParams;
+        if (!locus_tag || !assembly_accession) {
+          addAlert({
+            message: 'Error loading locus tag from URL parameters',
+            severity: 'error',
+          });
+          return;
+        }
+
+        const source = {
+          id: 1,
+          type: 'KnownGenomeCoordinatesSource',
+          assembly_accession,
+          locus_tag,
+          padding: padding ? Number(padding) : 1000,
+        }
+        dispatch(updateSource(source));
+      }
+    }
+    loadSequenceFromUrlParams();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
+

package/src/index.css

@@ -0,0 +1,314 @@
+button {
+    cursor: pointer;
+}
+
+.tf-tree .tf-nc, .tf-tree .tf-node-content {
+    border: 3px solid;
+    border-color: rgb(25, 118, 210);
+}
+
+ul.hidden-ancestors {
+    display: none;
+}
+
+/* So that the eye icon is visible */
+li.hidden-ancestors {
+    margin-bottom: 30px;
+}
+
+.app-container {
+    display: flex;
+    flex-direction: column;
+    /* height: calc(100vh - 114px - 10px); - moved to component to depend on presence of appbar */
+    background-color: white;
+}
+
+.tab-panels-container {
+    height: 100%;
+    overflow: auto;
+}
+
+.main-sequence-editor {
+    width: 70%;
+    margin: auto;
+}
+
+
+.node-corner {
+    position: absolute;
+    right: -1px;
+    top: 1px;
+    display: flex;
+    gap: .2em;
+}
+
+.overhang-representation {
+    display: inline-block;
+    margin-top: 10px;
+    font-family: monospace;
+    font-size: small;
+    /* Prevent the removal of spaces that make sequences align correctly */
+    white-space: pre;
+    max-width: 300px;
+    overflow-x: auto;
+}
+
+div.before-node {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -38px);
+    z-index: 1;
+}
+
+div.before-node svg {
+    background-color: white;
+    cursor: pointer;
+}
+
+div.hang-from-node {
+    box-sizing: content-box;
+    height: 50px;
+    width: 50px;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, 40px);
+    border: 3px solid;
+    border-color: rgb(25, 118, 210);
+    border-radius: 100%;
+}
+
+/* To center the icon vertically */
+div.hang-from-node div {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+div.hang-from-node::before {
+    position: absolute;
+    border: 1px solid;
+    width: 0;
+    height: 30px;
+    display: block;
+    content: '';
+    top: -3%;
+    left: 50%;
+    margin-left: -1px;
+    transform: translate(0, -100%);
+}
+
+
+/* TODO: handle these */
+div.tf-tree.tf-ancestor-tree {
+    padding-bottom: 150px;
+}
+
+div.corner-id {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    font-family: sans-serif;
+    font-size: large;
+    color: rgb(25, 118, 210);
+    font-weight: bold;
+}
+
+button.github-icon svg {
+    padding: 0;
+    color: white;
+    font-size: 30px;
+}
+
+div.collapsed div {
+    margin: auto
+}
+
+div.collapsed button {
+    margin-bottom: 0px;
+    margin-top: 0px;
+}
+
+/* Prevents scollbar from showing on small editors,
+   that was caused by overflowing numbers at the edges
+   of the x axis */
+
+span.node-text svg.veAxis {
+    width: 100%;
+}
+
+span.node-text > div:first-child {
+    margin: 20px
+}
+
+/* Cannot overwrite styles that are hard-coded, but we may want this */
+/* span.node-text div.tg-simple-dna-view {
+    overflow: visible;
+
+} */
+
+body {
+    margin: 0px;
+    padding: 0px;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+html {
+    overflow: hidden;
+}
+
+div.select-source div.MuiFormControl-root {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+div.select-source h2 {
+    margin-bottom: 5px;
+    font-size: x-large;
+}
+
+
+div.select-source {
+    width: 275px;
+}
+
+.fragment-picker {
+    margin-top: 5px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+div.description-container {
+    margin: auto;
+    margin-bottom: 2em;
+    max-width: 600px;
+}
+
+div.description-container p {
+    /* Show line breaks */
+    white-space: pre-line;
+    text-align: left;
+}
+
+code {
+    background-color: lightgrey;
+    padding: 15px;
+    border-radius: 5px;
+    min-width: 40%;
+    box-shadow: inset 0px 0px 0px 3px gray;
+    margin-bottom: 30px;
+    white-space: pre-wrap;
+    display: inline-block;
+    text-align: left;
+    max-width: 50%;
+}
+
+.data-model-displayer {
+    text-align: center;
+}
+
+.data-model-displayer p {
+    font-size: large;
+}
+
+a.button-hyperlink {
+    text-decoration: none;
+    color: white;
+}
+
+div.dragging-file {
+    text-align: center;
+}
+
+.drag-file-wrapper {
+    border: 5px dashed;
+    border-color: darkgray;
+    width: 40%;
+    height: 400px;
+    padding: 10px;
+    margin: auto;
+    text-align: center;
+    border-radius: 40px;
+}
+
+.drag-file-container {
+    padding: 10px;
+}
+
+.drag-file-container .drag-file-close {
+    text-align: right;
+    color: red;
+    cursor: pointer;
+}
+
+.drag-file-container .drag-file-close svg {
+    font-size: 40px;
+}
+
+.drag-file-container .drag-file-close:hover {
+    /* 70% brightness */
+    filter: brightness(70%);
+}
+
+div.primer-designer {
+    margin: auto;
+    width: 60%;
+}
+
+
+div.pcr-unit.MuiAccordion-root:first-of-type {
+    border-radius: 1.2em;
+    overflow: clip;
+}
+
+div.pcr-unit.MuiAccordion-root {
+    border-radius: 1.2em;
+    overflow: clip;
+    margin-bottom: .5em;
+}
+
+.pcr-unit div.MuiAccordionSummary-root.MuiAccordionSummary-root {
+    min-height: 0;
+}
+
+.pcr-unit div.MuiAccordionSummary-content {
+    margin-top: .35em;
+    margin-bottom: .35em;
+}
+
+/* Vertical align the content and icon in alert banners */
+div.MuiPaper-root[role=alert] {
+    align-items: center;
+}
+
+div#global-error-message-wrapper {
+    position: fixed;
+    top: 0;
+    z-index: 999;
+    max-width: 25em;
+}
+
+div#global-error-message-wrapper > div {
+    margin: 10px;
+    /* Allow line breaks in very long strings only when necessary */
+    word-break: break-word;
+}
+
+.finished-source {
+    /* Allow line breaks in very long strings only when necessary */
+    word-break: break-word;
+}
+
+.tab-panels-container {
+    text-align: center;
+}
+
+div[role="tooltip"] div.MuiTooltip-tooltip {
+    font-size: 1em;
+}

package/src/index.js

@@ -0,0 +1,8 @@
+// Import styles - these will be applied when the package is used
+import './index.css';
+
+// Re-export components
+export * from './components/index.js';
+// Export version - replaced at publish time via prepack script
+export { version } from './version.js';
+

package/src/providers/ConfigProvider.jsx

@@ -0,0 +1,51 @@
+import React, { createContext, useContext, useMemo } from 'react';
+
+const ConfigContext = createContext(null);
+
+/**
+ * ConfigProvider - Provides application configuration via React Context
+ * 
+ * @param {Object} props
+ * @param {Object} props.config - Config object
+ * @param {React.ReactNode} props.children - Child components
+ */
+export function ConfigProvider({ config, children }) {
+  if (!config) {
+    throw new Error('ConfigProvider requires a config prop');
+  }
+
+  const value = useMemo(() => ({
+    config,
+  }), [config]);
+
+  return (
+    <ConfigContext.Provider value={value}>
+      {children}
+    </ConfigContext.Provider>
+  );
+}
+
+/**
+ * useConfig - Hook to access configuration from ConfigProvider
+ * 
+ * @returns {Object} Configuration object with properties:
+ *   - backendUrl: string
+ *   - showAppBar: boolean
+ *   - enableAssembler: boolean
+ *   - enablePlannotate: boolean
+ *   - noExternalRequests: boolean
+ *   - database: string | null
+ * 
+ * @throws {Error} If used outside of ConfigProvider
+ */
+export function useConfig() {
+  const context = useContext(ConfigContext);
+  
+  if (context === null) {
+    throw new Error('useConfig must be used within a ConfigProvider');
+  }
+
+  return context.config;
+}
+
+export default ConfigProvider;

package/src/version.js

@@ -0,0 +1,2 @@
+// Version placeholder - replaced at publish time via prepack script
+export const version = "1.1.0-test.2";

package/src/components/sources/KnownSourceErrors.jsx

@@ -1,50 +0,0 @@
-import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material';
-import React from 'react';
-
-function KnownSourceErrors({ errors }) {
-  const [dialogOpen, setDialogOpen] = React.useState(false);
-  return (
-    <>
-      <Alert
-        severity="error"
-        action={(
-          <Button color="inherit" size="small" onClick={() => setDialogOpen(true)}>
-            See how
-          </Button>
-      )}
-        sx={{ alignItems: 'center', mb: 1 }}
-      >
-        Affected by external errors
-      </Alert>
-      <Dialog
-        open={dialogOpen}
-        onClose={() => setDialogOpen(false)}
-      >
-        <DialogTitle>Known external errors</DialogTitle>
-        <DialogContent>
-          <ul>
-            {errors.map((error, i) => (
-              <li style={{ marginBottom: '1em' }} key={i} component="li">
-                {error}
-              </li>
-            ))}
-          </ul>
-
-        </DialogContent>
-        <DialogActions>
-          <Button
-            onClick={() => {
-              setDialogOpen(false);
-            }}
-          >
-            Close
-          </Button>
-
-        </DialogActions>
-      </Dialog>
-    </>
-
-  );
-}
-
-export default KnownSourceErrors;