@opencloning/ui 1.0.1 → 1.1.0-dev.4

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/providers/index.js

@@ -0,0 +1,3 @@
+// Re-export from ConfigProvider.jsx to ensure single source of truth
+// This file is used by the "./providers/ConfigProvider" export path
+export { ConfigProvider, useConfig, default } from './ConfigProvider.jsx';

package/src/version.js

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

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;