@opencloning/ui 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @opencloning/ui
 
+## 1.1.2
+
+### Patch Changes
+
+- [#592](https://github.com/manulera/OpenCloning_frontend/pull/592) [`57092ae`](https://github.com/manulera/OpenCloning_frontend/commit/57092ae54d96485e84191d6c20ade9e9a6838a65) Thanks [@manulera](https://github.com/manulera)! - Remove partial overlap option from restriction and ligation overlap, related to https://github.com/manulera/OpenCloning_backend/pull/389
+
+- Updated dependencies []:
+  - @opencloning/store@1.1.2
+  - @opencloning/utils@1.1.2
+
+## 1.1.1
+
+### Patch Changes
+
+- [#590](https://github.com/manulera/OpenCloning_frontend/pull/590) [`81bcca3`](https://github.com/manulera/OpenCloning_frontend/commit/81bcca3c4a38e32793dab1cc60862f8ae61b3bb9) Thanks [@manulera](https://github.com/manulera)! - Now it exports a standalone OpenCloning component that can be used without manually setting up React providers, Redux store, or ConfigProvider.
+
+- Updated dependencies []:
+  - @opencloning/store@1.1.1
+  - @opencloning/utils@1.1.1
+
 ## 1.1.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencloning/ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "main": "./src/index.js",
   "scripts": {
@@ -11,7 +11,8 @@
     ".": "./src/index.js",
     "./components": "./src/components/index.js",
     "./providers/ConfigProvider": "./src/providers/index.js",
-    "./hooks/useConfig": "./src/hooks/useConfig.js"
+    "./hooks/useConfig": "./src/hooks/useConfig.js",
+    "./standalone": "./src/StandAloneOpenCloning.js"
   },
   "repository": {
     "type": "git",
@@ -23,8 +24,8 @@
     "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.15.17",
     "@mui/material": "^5.15.17",
-    "@opencloning/store": "1.1.0",
-    "@opencloning/utils": "1.1.0",
+    "@opencloning/store": "1.1.2",
+    "@opencloning/utils": "1.1.2",
     "@teselagen/bio-parsers": "^0.4.32",
     "@teselagen/ove": "^0.8.18",
     "@teselagen/range-utils": "^0.3.13",

package/src/StandAloneOpenCloning.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import store from '@opencloning/store';
+import { ConfigProvider } from './providers/ConfigProvider';
+import { OpenCloning } from './components';
+// Import styles
+import './index.css';
+
+/**
+ * StandAloneOpenCloning - Mounts the OpenCloning component into a DOM element
+ * 
+ * This function handles all the setup required for OpenCloning:
+ * - Redux Provider with store
+ * - ConfigProvider with config
+ * - React rendering
+ * 
+ * @param {Object} options - Configuration options
+ * @param {Object} options.config - Configuration object for OpenCloning
+ * @param {HTMLElement} options.element - DOM element where to mount the component
+ * @returns {Function} Cleanup function that unmounts the component
+ * 
+ * @example
+ * const container = document.getElementById('opencloning-container');
+ * const cleanup = StandAloneOpenCloning({
+ *   config: { /* config object *\/ },
+ *   element: container
+ * });
+ * 
+ * // Later, to unmount:
+ * cleanup();
+ */
+export function StandAloneOpenCloning({ config, element }) {
+  if (!config) {
+    throw new Error('StandAloneOpenCloning requires a config object');
+  }
+
+  if (!element) {
+    throw new Error('StandAloneOpenCloning requires an element');
+  }
+
+  if (!(element instanceof HTMLElement)) {
+    throw new Error('Element must be an HTMLElement');
+  }
+
+  const container = element;
+
+  // Create React root
+  const root = createRoot(container);
+
+  // Render the component with all providers
+  root.render(
+    React.createElement(Provider, { store },
+      React.createElement(ConfigProvider, { config },
+        React.createElement(OpenCloning)
+      )
+    )
+  );
+
+  // Return cleanup function
+  return () => {
+    root.unmount();
+  };
+}
+
+export default StandAloneOpenCloning;

package/src/components/sources/SourceAssembly.jsx

@@ -80,7 +80,6 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
       if (enzymes.length === 0) { return; }
       requestData.source.restriction_enzymes = enzymes;
       const config = { params: {
-        allow_partial_overlap: allowPartialOverlap,
         circular_only: circularOnly,
       } };
       sendPostRequest({ endpoint: 'restriction_and_ligation', requestData, config, source });
@@ -176,7 +175,7 @@ function SourceAssembly({ source, requestStatus, sendPostRequest }) {
             <FormControlLabel control={<Checkbox checked={circularOnly} onChange={() => setCircularOnly(!circularOnly)} />} label="Circular assemblies only" />
           </FormControl>
         )}
-        { ['RestrictionAndLigationSource', 'LigationSource'].includes(assemblyType) && (
+        { ['LigationSource'].includes(assemblyType) && (
           <FormControl fullWidth style={{ textAlign: 'left' }}>
             <FormControlLabel control={<Checkbox checked={allowPartialOverlap} onChange={flipAllowPartialOverlap} />} label="Allow partial overlaps" />
           </FormControl>

package/src/index.js

@@ -3,6 +3,8 @@ import './index.css';
 
 // Re-export components
 export * from './components/index.js';
+// Export standalone wrapper
+export { StandAloneOpenCloning } from './StandAloneOpenCloning.js';
 // Export version - replaced at publish time via prepack script
 export { version } from './version.js';
 

package/src/version.js

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