@opencloning/ui 1.0.2-test.0 → 1.1.0-dev.5

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @opencloning/ui
 
+## 1.1.0-dev.5
+
+### Patch Changes
+
+- 6df1c20: Last dummy test to check if auto pre-release works
+- Updated dependencies [6df1c20]
+  - @opencloning/store@1.1.0-dev.5
+  - @opencloning/utils@1.1.0-dev.5
+
+## 1.1.0-dev.4
+
+### Patch Changes
+
+- 07106ac: Dummy change to test that new action works
+  - @opencloning/store@1.1.0-dev.4
+  - @opencloning/utils@1.1.0-dev.4
+
+## 1.1.0-test.3
+
+### Patch Changes
+
+- a870a5e: Fix imports from mui and icons library, and add husky hook to validate that it does not happen again
+  - @opencloning/store@1.1.0-test.3
+  - @opencloning/utils@1.1.0-test.3
+
+## 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-dev.5",
   "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/index.js",
+    "./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-dev.5",
+    "@opencloning/utils": "1.1.0-dev.5",
     "@teselagen/bio-parsers": "^0.4.32",
     "@teselagen/ove": "^0.8.18",
     "@teselagen/range-utils": "^0.3.13",
@@ -26,9 +32,7 @@
     "@zip.js/zip.js": "^2.7.62",
     "axios": "^1.12.2",
     "lodash-es": "^4.17.21",
-    "react": "^18.3.1",
-    "react-draggable": "^4.4.6",
-    "react-redux": "^8.1.3"
+    "react-draggable": "^4.4.6"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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/DescriptionEditor.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
-import TextField from '@mui/material/TextField';
-import { Button, FormControl } from '@mui/material';
+import { TextField, Button, FormControl } from '@mui/material';
 import { cloningActions } from '@opencloning/store/cloning';
 
 function DescriptionEditor() {

package/src/components/DragAndDropCloningHistoryWrapper.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Tooltip } from '@mui/material';
 import { UploadFile } from '@mui/icons-material';
-import CancelIcon from '@mui/icons-material/Cancel';
+import { Cancel as CancelIcon } from '@mui/icons-material';
 import useDragAndDropFile from '../hooks/useDragAndDropFile';
 import LoadCloningHistoryWrapper from './LoadCloningHistoryWrapper';
 

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/MainSequenceCheckBox.jsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import DownloadIcon from '@mui/icons-material/Download';
-import EditIcon from '@mui/icons-material/Edit';
-import CheckIcon from '@mui/icons-material/Rule';
-import Tooltip from '@mui/material/Tooltip';
+import { Visibility as VisibilityIcon, Download as DownloadIcon, Edit as EditIcon, Rule as CheckIcon } from '@mui/icons-material';
 import { useDispatch, useSelector, useStore } from 'react-redux';
+import { Tooltip } from '@mui/material';
 import { isEqual } from 'lodash-es';
 import { cloningActions } from '@opencloning/store/cloning';
 import useStoreEditor from '../hooks/useStoreEditor';

package/src/components/NetworkNode.jsx

@@ -1,9 +1,7 @@
 import React, { useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Box, Tooltip } from '@mui/material';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { VisibilityOff as VisibilityOffIcon, Visibility as VisibilityIcon, AddCircle as AddCircleIcon } from '@mui/icons-material';
 import { isEqual } from 'lodash-es';
 import Source from './sources/Source';
 import './NetworkTree.css';

package/src/components/OpenCloning.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import Tabs from '@mui/material/Tabs';
+import { Tabs } from '@mui/material';
 import { isEqual } from 'lodash-es';
 import DescriptionEditor from './DescriptionEditor';
 import PrimerList from './primers/PrimerList';
@@ -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/assembler/AssemblePartWidget.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { TextField, FormControl, InputLabel, Select, MenuItem, Box, Grid, Paper, Typography, Table, TableContainer, TableHead, TableBody, TableRow, TableCell, Button } from '@mui/material'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import { ContentCopy as ContentCopyIcon } from '@mui/icons-material'
 import AssemblerPart from './AssemblerPart'
 
 /* eslint-disable camelcase */

package/src/components/assembler/Assembler.jsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import data2 from './assembler_data2.json'
 import { Alert, Autocomplete, Box, Button, CircularProgress, FormControl, IconButton, InputAdornment, InputLabel, MenuItem, Select, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField } from '@mui/material'
-import ClearIcon from '@mui/icons-material/Clear';
+import { Clear as ClearIcon, Visibility as VisibilityIcon } from '@mui/icons-material';
 import { useAssembler } from './useAssembler';
 import { arrayCombinations } from '../eLabFTW/utils';
-import VisibilityIcon from '@mui/icons-material/Visibility';
 import { useDispatch } from 'react-redux';
 import { cloningActions } from '@opencloning/store/cloning';
 import RequestStatusWrapper from '../form/RequestStatusWrapper';

package/src/components/dummy/DummyInterface.js

@@ -1,5 +1,4 @@
-import SaveIcon from '@mui/icons-material/Save';
-import LinkIcon from '@mui/icons-material/Link';
+import { Save as SaveIcon, Link as LinkIcon } from '@mui/icons-material';
 import GetSequenceFileAndDatabaseIdComponent from './GetSequenceFileAndDatabaseIdComponent';
 
 export default {

package/src/components/eLabFTW/eLabFTWInterface.js

@@ -1,5 +1,4 @@
-import SaveIcon from '@mui/icons-material/Save';
-import LinkIcon from '@mui/icons-material/Link';
+import { Save as SaveIcon, Link as LinkIcon } from '@mui/icons-material';
 import GetSequenceFileAndDatabaseIdComponent from './GetSequenceFileAndDatabaseIdComponent';
 import SubmitToDatabaseComponent from './SubmitToDatabaseComponent';
 import PrimersNotInDatabaseComponent from './PrimersNotInDatabaseComponent';

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/form/GetRequestMultiSelect.jsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import { Alert, Button, CircularProgress, FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material';
+import { Autocomplete, TextField, Alert, Button, CircularProgress, FormControl, FormHelperText, InputLabel, MenuItem, Select } from '@mui/material';
 
 export default function GetRequestMultiSelect({ 
   getOptionsFromResponse,

package/src/components/form/LabelWithTooltip.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tooltip } from '@mui/material';
-import InfoIcon from '@mui/icons-material/Info';
+import { Info as InfoIcon } from '@mui/icons-material';
 
 function LabelWithTooltip({ label, tooltip }) {
   return (

package/src/components/form/PostRequestSelect.jsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
-import TextField from '@mui/material/TextField';
-import { Alert, Button, FormControl } from '@mui/material';
+import { Autocomplete, TextField, Alert, Button, FormControl } from '@mui/material';
 
 export default function PostRequestSelect({ setValue, getOptions, getOptionLabel, isOptionEqualToValue, textLabel, disableFiltering = true, ...rest }) {
   // The reason for disableFiltering is that we allow the server to filter the options,

package/src/components/index.js

@@ -1 +1,2 @@
 export { default as OpenCloning } from './OpenCloning';
+export { default as MainAppBar } from './navigation/MainAppBar';

package/src/components/navigation/ButtonWithMenu.jsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
-import Button from '@mui/material/Button';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import { Button, Menu, MenuItem } from '@mui/material';
 
 export default function ButtonWithMenu({ children, menuItems }) {
   const [anchorEl, setAnchorEl] = React.useState(null);

package/src/components/navigation/MainAppBar.jsx

@@ -1,15 +1,8 @@
 import React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Box from '@mui/material/Box';
-import Toolbar from '@mui/material/Toolbar';
-import Container from '@mui/material/Container';
-import { Button, Tooltip } from '@mui/material';
+import { AppBar, Box, Toolbar, Container, Button, Tooltip, IconButton, Menu, MenuItem } from '@mui/material';
+import { Menu as MenuIcon } from '@mui/icons-material';
 import './MainAppBar.css';
 import { useDispatch } from 'react-redux';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import MenuIcon from '@mui/icons-material/Menu';
 import ButtonWithMenu from './ButtonWithMenu';
 import { downloadCloningStrategyAsSvg, formatTemplate, loadHistoryFile, loadFilesToSessionStorage } from '@opencloning/utils/readNwrite';
 import SelectExampleDialog from './SelectExampleDialog';

package/src/components/navigation/SelectTemplateDialog.jsx

@@ -1,7 +1,7 @@
 import { Accordion, AccordionDetails, AccordionSummary, Alert, Button, CircularProgress, Dialog, DialogContent, DialogTitle, IconButton, List, ListItem, ListItemButton, ListItemText } from '@mui/material';
 
 import React from 'react';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
 import useHttpClient from '../../hooks/useHttpClient';
 
 function SelectTemplateDialog({ onClose, open }) {

package/src/components/primers/PrimerForm.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import CancelIcon from '@mui/icons-material/Cancel';
-import Tooltip from '@mui/material/Tooltip';
-import { IconButton } from '@mui/material';
+import { CheckCircle as CheckCircleIcon, Cancel as CancelIcon } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
 import ValidatedTextField from '../form/ValidatedTextField';
 
 import './PrimerForm.css';

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/primers/PrimerList.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import Button from '@mui/material/Button';
+import { Button } from '@mui/material';
 import PrimerForm from './PrimerForm';
 import PrimerTableRow from './PrimerTableRow';
 import './PrimerList.css';