@opencloning/ui 1.4.6 → 1.4.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @opencloning/ui
 
+## 1.4.7
+
+### Patch Changes
+
+- [#631](https://github.com/manulera/OpenCloning_frontend/pull/631) [`40dd956`](https://github.com/manulera/OpenCloning_frontend/commit/40dd956d0f6c729ad0690578bf232610a063523f) Thanks [@manulera](https://github.com/manulera)! - Add links to assembler documentation and to create your own syntax in the builder
+
+- [#631](https://github.com/manulera/OpenCloning_frontend/pull/631) [`40dd956`](https://github.com/manulera/OpenCloning_frontend/commit/40dd956d0f6c729ad0690578bf232610a063523f) Thanks [@manulera](https://github.com/manulera)! - Add link to documentation for the Assembler, and add deprecation notice for MoClo templates
+
+- [#631](https://github.com/manulera/OpenCloning_frontend/pull/631) [`40dd956`](https://github.com/manulera/OpenCloning_frontend/commit/40dd956d0f6c729ad0690578bf232610a063523f) Thanks [@manulera](https://github.com/manulera)! - improve alignment of sequences in the AssemblerPart by improving css
+
+- Updated dependencies []:
+  - @opencloning/store@1.4.7
+  - @opencloning/utils@1.4.7
+
 ## 1.4.6
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -25,8 +25,8 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.4.6",
-    "@opencloning/utils": "1.4.6",
+    "@opencloning/store": "1.4.7",
+    "@opencloning/utils": "1.4.7",
     "@teselagen/bio-parsers": "^0.4.34",
     "@teselagen/ove": "^0.8.34",
     "@teselagen/range-utils": "^0.3.20",

package/src/components/assembler/Assembler.jsx

@@ -283,7 +283,12 @@ function LoadSyntaxButton({ setSyntax, addPlasmids, clearPlasmids }) {
   }, [setSyntax, addPlasmids, clearPlasmids, httpClient, backendRoute, addAlert])
   return <>
     <Button color="success" onClick={() => setExistingSyntaxDialogOpen(true)}>Load Syntax</Button>
-    {existingSyntaxDialogOpen && <ExistingSyntaxDialog staticContentPath={staticContentPath} onClose={() => setExistingSyntaxDialogOpen(false)} onSyntaxSelect={onSyntaxSelect}/>}
+    {existingSyntaxDialogOpen && <ExistingSyntaxDialog
+      staticContentPath={staticContentPath}
+      onClose={() => setExistingSyntaxDialogOpen(false)}
+      onSyntaxSelect={onSyntaxSelect}
+      displayCreateYourOwnMessage={true}
+    />}
   </>
 }
 
@@ -317,7 +322,7 @@ function Assembler() {
   return (
     <>
       <Alert severity="warning" sx={{ maxWidth: '400px', margin: 'auto', fontSize: '.9rem', mb: 2 }}>
-        The Assembler is experimental. Use with caution.
+        The Assembler is experimental. Use with caution. Visit <a href="https://docs.opencloning.org/assembler" target="_blank">the documentation</a> for more information.
       </Alert>
       <ButtonGroup>
         <LoadSyntaxButton setSyntax={setSyntax} addPlasmids={addPlasmids} clearPlasmids={clearPlasmids} />

package/src/components/assembler/ExistingSyntaxDialog.jsx

@@ -5,6 +5,7 @@ import RequestStatusWrapper from '../form/RequestStatusWrapper';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { readSubmittedTextFile } from '@opencloning/utils/readNwrite';
 import { ExpandMore as ExpandMoreIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
 
 const httpClient = getHttpClient();
 const baseURL = 'https://assets.opencloning.org/syntaxes/syntaxes/';
@@ -70,7 +71,7 @@ function SyntaxListItem({ syntax, onSyntaxClick }) {
   )
 }
 
-function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
+function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect, displayCreateYourOwnMessage = false }) {
   const [syntaxes, setSyntaxes] = React.useState([]);
   const [connectAttempt, setConnectAttempt] = React.useState(0);
   const [requestStatus, setRequestStatus] = React.useState({ status: 'loading' });
@@ -138,6 +139,10 @@ function ExistingSyntaxDialog({ staticContentPath, onClose, onSyntaxSelect }) {
             {syntaxes.map((syntax) => (
               <SyntaxListItem key={syntax.path} syntax={syntax} onSyntaxClick={onSyntaxClick} />
             ))}
+            {displayCreateYourOwnMessage && <ListItem>
+              <ListItemText primary="🔎 Can't find your favourite syntax?" secondary="Add it yourself! It's very easy!" />
+              <Button type="a" color="success" href="https://syntax.opencloning.org" target="_blank">Create a syntax</Button>
+            </ListItem>}
           </List>
         </RequestStatusWrapper>
         <Box sx={{ mb: 2 }}>

package/src/components/assembler/UploadPlasmidsButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Alert, Box } from '@mui/material';
+import { Button, Dialog, DialogTitle, DialogContent, DialogActions, Alert, Box, ButtonGroup } from '@mui/material';
 import { useConfig } from '../../providers';
 import ServerStaticFileSelect from '../form/ServerStaticFileSelect';
 import { usePlasmidsLogic } from './usePlasmidsLogic';
@@ -95,9 +95,9 @@ function UploadPlasmidsButton({ addPlasmids, syntax }) {
         },
       }}
     >
-      <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 sx={{ justifyContent: 'center', position: 'sticky', top: 0, zIndex: 99, background: '#fff', py: 2 }}>
+        <Button sx={{ p: 1.5, fontSize: '1rem' }} disabled={validPlasmids.length === 0} variant="contained" color="success" onClick={handleImportValidPlasmids}>Import valid plasmids</Button>
+        <Button sx={{ p: 1.5, fontSize: '1rem' }} variant="contained" color="error" onClick={() => setLinkedPlasmids([])}>Cancel</Button>
       </DialogActions>
       {invalidPlasmids.length > 0 && (
         <Box data-testid="invalid-plasmids-box">

package/src/components/assembler/assembly_component.module.css

@@ -14,10 +14,6 @@
     min-height: 1em;
 }
 
-.overhang div {
-    padding-left: calc(2px + var(--border-width));
-    padding-right: 2px;
-}
 
 .container {
     display: flex;
@@ -57,19 +53,19 @@
 .overhang .watson {
     border-left: var(--border-width) var(--border-style) var(--border-color);
     border-bottom: var(--border-width) var(--border-style) var(--border-color);
-    padding-left: 2px;
 }
 
 .overhang .crick {
     border-right: var(--border-width) var(--border-style) var(--border-color);
 }
 
-.insideLeft {
-    margin-left: .2em;
+.inside .watson {
+    padding-bottom: var(--border-width);
 }
 
-.insideRight {
-    margin-right: .2em;
+.overhang {
+    padding-left: var(--border-width);
+    padding-right: var(--border-width);
 }
 
 .overhang.left .watson {
@@ -79,3 +75,12 @@
 .overhang.right .crick {
     font-weight: bold;
 }
+
+.overhang .top {
+    padding-left: var(--border-width);
+    padding-right: var(--border-width);
+}
+
+.overhang .crick {
+    padding-left: var(--border-width);
+}

package/src/components/navigation/SelectTemplateDialog.jsx

@@ -27,6 +27,8 @@ function SelectTemplateDialog({ onClose, open }) {
   return (
     <Dialog open={open} onClose={() => onClose('')} className="load-template-dialog">
       <DialogTitle>Load a template</DialogTitle>
+      <Alert severity="warning" sx={{ maxWidth: '400px', margin: 'auto', fontSize: '.9rem', mb: 2 }}>
+        MoClo templates will soon be replaced by the new Assembler. Go to the Assembler tab to learn more.</Alert>
       {!templates
       && (
       <DialogContent>

package/src/version.js

@@ -1,2 +1,2 @@
 // Version placeholder - replaced at publish time via prepack script
-export const version = "1.4.6";
+export const version = "1.4.7";