@opencloning/ui 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @opencloning/ui
+
+## 1.0.0
+
+### Major Changes
+
+- babe2f9: Switch to monorepo structure and use changesets
+
+### Minor Changes
+
+- 8cd33bb: Rearrange dependencies
+
+### Patch Changes
+
+- Updated dependencies [8cd33bb]
+- Updated dependencies [babe2f9]
+  - @opencloning/store@1.0.0
+  - @opencloning/utils@1.0.0

package/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "@opencloning/ui",
+    "version": "1.0.0",
+    "type": "module",
+    "main": "./src/index.js",
+    "exports": {
+        ".": "./src/index.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/manulera/OpenCloning_frontend.git",
+        "directory": "packages/ui"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
+        "@mui/icons-material": "^5.15.17",
+        "@mui/material": "^5.15.17",
+        "@opencloning/store": "workspace:*",
+        "@opencloning/utils": "workspace:*",
+        "@teselagen/bio-parsers": "^0.4.32",
+        "@teselagen/ove": "^0.8.18",
+        "@teselagen/range-utils": "^0.3.13",
+        "@teselagen/sequence-utils": "^0.3.35",
+        "@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"
+    },
+    "peerDependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-redux": "^8.1.3"
+    }
+}

package/src/components/AppAlerts.jsx

@@ -0,0 +1,19 @@
+import { Alert } from '@mui/material';
+import { isEqual } from 'lodash-es';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import useAlerts from '../hooks/useAlerts';
+import ExternalServicesStatusCheck from './ExternalServicesStatusCheck';
+
+function AppAlerts() {
+  const { alerts } = useSelector((state) => state.cloning, isEqual);
+  const { removeAlert } = useAlerts();
+  return (
+    <div id="global-error-message-wrapper">
+      {alerts.map((alert, index) => (<Alert key={index} severity={alert.severity} onClose={() => { removeAlert(alert.message); }}>{alert.message}</Alert>))}
+      <ExternalServicesStatusCheck />
+    </div>
+  );
+}
+
+export default AppAlerts;

package/src/components/CloningHistory.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import isEqual from 'lodash-es/isEqual';
+import { getSortedSourceIds } from '@opencloning/utils/network';
+import NetWorkNode from './NetworkNode';
+import NewSourceBox from './sources/NewSourceBox';
+import DragAndDropCloningHistoryWrapper from './DragAndDropCloningHistoryWrapper';
+
+function CloningHistory() {
+  const startingSourceIds = useSelector(
+    (state) => {
+      const sequenceIds = state.cloning.sequences.map((sequence) => sequence.id);
+      const sequenceIdsOfInputs = state.cloning.sources.flatMap((source) => source.input.map(({ sequence }) => sequence));
+      const terminalSequences = sequenceIds.filter((sequenceId) => !sequenceIdsOfInputs.includes(sequenceId));
+      const terminalSources = state.cloning.sources.filter((source) => terminalSequences.includes(source.id) || !sequenceIds.includes(source.id));
+      return getSortedSourceIds(terminalSources, state.cloning.sources);
+    },
+    isEqual,
+  );
+  return (
+    <DragAndDropCloningHistoryWrapper>
+      <div className="tf-tree tf-ancestor-tree">
+        <div>
+          <ul>
+            {startingSourceIds.map((sourceId) => (
+              <NetWorkNode key={sourceId} {...{ sourceId }} />
+            ))}
+            {/* There is always a box on the right side to add a source */}
+            <li key="new_source_box" className="new_source_box">
+              <span className="tf-nc"><span className="node-text"><NewSourceBox /></span></span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </DragAndDropCloningHistoryWrapper>
+
+  );
+}
+
+export default React.memo(CloningHistory);

package/src/components/DataModelDisplayer.jsx

@@ -0,0 +1,30 @@
+import { isEqual } from 'lodash-es';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+function DataModelDisplayer() {
+  const { sources,  sequences, primers } = useSelector((state) => state.cloning, isEqual);
+  const trimmedSequences = sequences.map((s) => {
+    const seqOut = { ...s };
+    seqOut.file_content = '[...]';
+    return seqOut;
+  });
+
+  // TODO: proper json syntax highlighting here
+  return (
+    <div className="data-model-displayer">
+      <p>
+        Visit the
+        {' '}
+        <a href="https://opencloning.github.io/OpenCloning_LinkML" target="_blank" rel="noopener noreferrer">data model documentation</a>
+        .
+      </p>
+
+      <code>
+        {JSON.stringify({ sources, sequences: trimmedSequences, primers }, null, 4)}
+      </code>
+    </div>
+  );
+}
+
+export default DataModelDisplayer;

package/src/components/DescriptionEditor.jsx

@@ -0,0 +1,68 @@
+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 { cloningActions } from '@opencloning/store/cloning';
+
+function DescriptionEditor() {
+  const description = useSelector((state) => state.cloning.description, shallowEqual);
+  const [text, setText] = React.useState('');
+  const [typing, setTyping] = React.useState('');
+
+  useEffect(
+    () => {
+      setText(description);
+      setTyping(description === '');
+    },
+    [description],
+  );
+  const { setDescription: setDescriptionAction } = cloningActions;
+  const dispatch = useDispatch();
+
+  const onChange = (e) => {
+    setText(e.target.value);
+  };
+  const onSubmit = (e) => {
+    e.preventDefault();
+    if (text === '') {
+      return;
+    }
+    dispatch(setDescriptionAction(text));
+    setTyping(false);
+  };
+  const onClickEditButton = () => {
+    setTyping(true);
+  };
+  let textShown = (
+    <>
+      <p>{text}</p>
+      <Button onClick={onClickEditButton} variant="contained" color="success" style={{ marginTop: 15 }}>Edit description</Button>
+
+    </>
+  );
+  if (typing) {
+    textShown = (
+      <form onSubmit={onSubmit}>
+        <FormControl fullWidth>
+          <TextField
+            id="outlined-multiline-flexible"
+            multiline
+            fullWidth
+            onChange={onChange}
+            value={text}
+            label="Add a brief description"
+          />
+        </FormControl>
+        <Button type="submit" variant="contained" style={{ marginTop: 15 }}>Save description</Button>
+      </form>
+    );
+  }
+
+  return (
+    <div className="description-container">
+      {textShown}
+    </div>
+  );
+}
+
+export default DescriptionEditor;

package/src/components/DownloadCloningStrategyDialog.jsx

@@ -0,0 +1,84 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, TextField } from '@mui/material';
+import React from 'react';
+import { useSelector, useStore } from 'react-redux';
+import { downloadStateAsJson, downloadStateAsZip } from '@opencloning/utils/readNwrite';
+import useAlerts from '../hooks/useAlerts';
+
+
+function DownloadCloningStrategyDialog({ open, setOpen }) {
+  const [fileName, setFileName] = React.useState('cloning_strategy');
+  const [extension, setExtension] = React.useState('.json');
+  const hasVerificationFiles = useSelector(({ cloning }) => cloning.files.length > 0);
+
+  const store = useStore();
+  const { addAlert } = useAlerts();
+
+  return (
+    <Dialog
+      open={open}
+      className="download-cloning-strategy-dialog"
+      onClose={() => setOpen(false)}
+      PaperProps={{
+        component: 'form',
+        onSubmit: async (event) => {
+          event.preventDefault();
+          setOpen(false);
+          const cloningState = store.getState().cloning;
+          if (extension === '.zip') {
+            try {
+              await downloadStateAsZip(cloningState, fileName + extension);
+            } catch (error) {
+              console.error(error);
+              addAlert({ message: error.message, severity: 'error' });
+            }
+          } else {
+            downloadStateAsJson(cloningState, fileName + extension);
+          }
+        },
+      }}
+    >
+      <DialogTitle>Save cloning strategy to file</DialogTitle>
+      <DialogContent>
+        <FormControl fullWidth>
+          <TextField
+            autoFocus
+            required
+            id="file_name"
+            label="File name"
+            variant="standard"
+            value={fileName}
+            onChange={(e) => setFileName(e.target.value)}
+            sx={{ mb: 2 }}
+          />
+          {hasVerificationFiles && (
+            <>
+              <FormLabel id="save-file-radio-group-label">File format</FormLabel>
+              <RadioGroup
+                aria-labelledby="save-file-radio-group-label"
+                value={extension}
+                variant="standard"
+                onChange={(e) => setExtension(e.target.value)}
+              >
+                <FormControlLabel value=".json" control={<Radio />} label="json (cloning strategy)" />
+                <FormControlLabel value=".zip" control={<Radio />} label="zip (cloning strategy + verification files)" />
+              </RadioGroup>
+            </>
+          )}
+        </FormControl>
+
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            setOpen(false);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button type="submit">Save file</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default DownloadCloningStrategyDialog;

package/src/components/DownloadSequenceFileDialog.jsx

@@ -0,0 +1,90 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, TextField } from '@mui/material';
+import React from 'react';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import { downloadSequence } from '@opencloning/utils/readNwrite';
+import { exportSubStateThunk } from '@opencloning/utils/thunks';
+import { getPCRPrimers} from '@opencloning/store/cloning_utils';
+import { substateHasFiles } from '@opencloning/utils/network';
+
+// You can override the downloadSequence function by passing a downloadCallback that takes the fileName and sequence as arguments
+function DownloadSequenceFileDialog({ id, dialogOpen, setDialogOpen, downloadCallback }) {
+  const [fileName, setFileName] = React.useState('');
+  const [extension, setExtension] = React.useState('.gb');
+  const hasFiles = useSelector(({ cloning }) => substateHasFiles(cloning, id), isEqual);
+  const sequenceName = useSelector(({ cloning }) => cloning.teselaJsonCache[id]?.name || '', isEqual);
+  const store = useStore();
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    setFileName(sequenceName);
+  }, [sequenceName]);
+
+  return (
+    <Dialog
+      open={dialogOpen}
+      onClose={() => setDialogOpen(false)}
+      PaperProps={{
+        component: 'form',
+        onSubmit: (event) => {
+          event.preventDefault();
+          setDialogOpen(false);
+          if (extension === '.json' || extension === '.zip') {
+            dispatch(exportSubStateThunk(fileName + extension, id, extension.slice(1)));
+            return;
+          }
+          const {cloning} = store.getState();
+          const seqCopy = structuredClone(cloning.teselaJsonCache[id]);
+          const pcrPrimers = getPCRPrimers(cloning, id);
+          seqCopy.primers = [...seqCopy.primers, ...pcrPrimers];
+          if (downloadCallback) {
+            downloadCallback(fileName + extension, seqCopy);
+          } else {
+            downloadSequence(fileName + extension, seqCopy);
+          }
+        },
+      }}
+    >
+      <DialogTitle>Save sequence to file</DialogTitle>
+      <DialogContent>
+        <FormControl fullWidth>
+          <TextField
+            autoFocus
+            required
+            id="file_name"
+            label="File name"
+            variant="standard"
+            value={fileName}
+            onChange={(e) => setFileName(e.target.value)}
+            sx={{ mb: 2 }}
+          />
+          <FormLabel id="save-file-radio-group-label">File format</FormLabel>
+          <RadioGroup
+            aria-labelledby="save-file-radio-group-label"
+            value={extension}
+            variant="standard"
+            onChange={(e) => setExtension(e.target.value)}
+          >
+            <FormControlLabel value=".gb" control={<Radio />} label="genbank" />
+            <FormControlLabel value=".fasta" control={<Radio />} label="fasta" />
+            <FormControlLabel value=".json" control={<Radio />} label="json (sequence + history)" />
+            {hasFiles && <FormControlLabel value=".zip" control={<Radio />} label="zip (sequence + history + verification files)" />}
+          </RadioGroup>
+        </FormControl>
+
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            setDialogOpen(false);
+          }}
+        >
+          Cancel
+        </Button>
+        <Button type="submit">Save file</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default DownloadSequenceFileDialog;

package/src/components/DragAndDropCloningHistoryWrapper.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Tooltip } from '@mui/material';
+import { UploadFile } from '@mui/icons-material';
+import CancelIcon from '@mui/icons-material/Cancel';
+import useDragAndDropFile from '../hooks/useDragAndDropFile';
+import LoadCloningHistoryWrapper from './LoadCloningHistoryWrapper';
+
+function DragAndDropCloningHistoryWrapper({ children }) {
+  const { isDragging, handleDragLeave, handleDragOver, handleDrop, files: fileList, clearFiles } = useDragAndDropFile();
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`${isDragging ? 'dragging-file' : ''} cloning-history`}
+    >
+      <LoadCloningHistoryWrapper fileList={fileList} clearFiles={clearFiles}>
+        {isDragging ? (
+          <div className="drag-file-wrapper">
+            <div className="drag-file-container">
+              <div className="drag-file-close">
+                <Tooltip arrow title="Close (back to cloning)" placement="top">
+                  <CancelIcon type="button" onClick={handleDragLeave} className="cancel-icon" />
+                </Tooltip>
+              </div>
+              <h2>Drop multiple sequence files or a single history file</h2>
+              <UploadFile color="primary" sx={{ fontSize: 200 }} />
+            </div>
+          </div>
+        ) : (
+          children
+        )}
+      </LoadCloningHistoryWrapper>
+    </div>
+  );
+}
+
+export default DragAndDropCloningHistoryWrapper;

package/src/components/DraggableDialogPaper.jsx

@@ -0,0 +1,16 @@
+import { Paper } from '@mui/material';
+import React from 'react';
+import Draggable from 'react-draggable';
+
+function DraggableDialogPaper(props) {
+  return (
+    <Draggable
+      handle="#draggable-dialog-title"
+      cancel={'[class*="MuiDialogContent-root"]'}
+    >
+      <Paper {...props} />
+    </Draggable>
+  );
+}
+
+export default DraggableDialogPaper;

package/src/components/EditSequenceNameDialog.jsx

@@ -0,0 +1,90 @@
+import { Alert, Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, TextField } from '@mui/material';
+import React from 'react';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import { cloningActions } from '@opencloning/store/cloning';
+import error2String from '@opencloning/utils/error2String';
+import useBackendRoute from '../hooks/useBackendRoute';
+import useHttpClient from '../hooks/useHttpClient';
+
+function EditSequenceNameDialog({ id, dialogOpen, setDialogOpen }) {
+  const [name, setName] = React.useState('');
+  const [originalName, setOriginalName] = React.useState('');
+  const [error, setError] = React.useState('');
+  const store = useStore();
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+
+  const { updateSequenceAndItsSource } = cloningActions;
+  const dispatch = useDispatch();
+
+  const changeName = async (newName) => {
+    const {sources, sequences} = store.getState().cloning;
+    const source = sources.find((s) => s.id === id);
+    const sequence = sequences.find((s) => s.id === id);
+    setError('');
+    const url = backendRoute('rename_sequence');
+    try {
+      const { data: newSequence } = await httpClient.post(url, sequence, { params: { name } });
+      const newSource = { ...source, output_name: newName };
+      dispatch(updateSequenceAndItsSource({ newSequence, newSource }));
+      setDialogOpen(false);
+    } catch (e) {
+      setError(error2String(e));
+    }
+  };
+
+  React.useEffect(() => {
+    const seq = store.getState().cloning.teselaJsonCache[id];
+    setName(seq.name);
+    setOriginalName(seq.name);
+  }, [id]);
+
+  const nameIsNotValid = /\s/.test(name);
+  const submissionAllowed = name && name !== originalName && !nameIsNotValid;
+  return (
+    <Dialog
+      open={dialogOpen}
+      onClose={() => setDialogOpen(false)}
+      PaperProps={{
+        component: 'form',
+        onSubmit: async (event) => {
+          event.preventDefault();
+          changeName(name);
+        },
+      }}
+    >
+      <DialogTitle>Rename sequence</DialogTitle>
+      <DialogContent>
+        <FormControl fullWidth>
+          <TextField
+            autoFocus
+            required
+            id="sequence_rename"
+            label="New name"
+            variant="standard"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            sx={{ mb: 2 }}
+            error={nameIsNotValid}
+            helperText={nameIsNotValid && 'Name cannot contain spaces'}
+          />
+        </FormControl>
+
+        {error && <Alert severity="error" sx={{ mt: 2 }}>{error}</Alert>}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            setDialogOpen(false);
+          }}
+        >
+          Cancel
+        </Button>
+        {submissionAllowed && <Button type="submit">Rename</Button>}
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default EditSequenceNameDialog;

package/src/components/ExternalServicesStatusCheck.jsx

@@ -0,0 +1,92 @@
+import { Alert, Button, CircularProgress } from '@mui/material';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import useBackendRoute from '../hooks/useBackendRoute';
+import useHttpClient from '../hooks/useHttpClient';
+import { cloningActions } from '@opencloning/store/cloning';
+
+const { updateAppInfo } = cloningActions;
+
+function ExternalServicesStatusCheck() {
+  const [servicesDown, setServicesDown] = React.useState([]);
+  const [connectAttempt, setConnectAttemp] = React.useState(0);
+  const [loading, setLoading] = React.useState(false);
+  const [successMessage, setSuccessMessage] = React.useState('');
+  const dispatch = useDispatch();
+  const backendRoute = useBackendRoute();
+  const httpClient = useHttpClient();
+  React.useEffect(() => {
+    dispatch(updateAppInfo({ frontendVersion: __APP_VERSION__ }));
+    setLoading(true);
+    const checkServices = async () => {
+      const services = [
+        {
+          message: 'Backend server is down',
+          url: backendRoute('version'),
+          check: (resp) => {
+            if (resp.status === 200) {
+              const { backend_version: backendVersion, schema_version: schemaVersion } = resp.data;
+              dispatch(updateAppInfo({ backendVersion, schemaVersion }));
+              return true;
+            }
+            return false;
+          },
+        },
+      ];
+      const downServices = [];
+      await Promise.all(
+        services.map(async (service) => {
+          try {
+            const resp = await httpClient.get(service.url);
+            if (!service.check(resp)) {
+              downServices.push(service);
+            }
+          } catch (error) {
+            downServices.push(service);
+          }
+        }),
+      );
+      setServicesDown(downServices);
+      setLoading(false);
+      if (connectAttempt > 0 && downServices.length === 0) {
+        setSuccessMessage('All services are up and running!');
+      }
+    };
+    checkServices();
+  }, [connectAttempt]);
+  if (successMessage) {
+    return (
+      <Alert severity="success" className="service-status-check-alert" onClose={() => setSuccessMessage('')}>
+        {successMessage}
+      </Alert>
+    );
+  }
+  if (servicesDown.length > 0) {
+    return (
+      <Alert
+        severity="error"
+        className="service-status-check-alert"
+        action={(
+          <div>
+            {loading ? (
+              <CircularProgress color="inherit" size="2em" />
+            ) : (
+              <Button color="inherit" size="small" onClick={() => setConnectAttemp((prev) => prev + 1)}>
+                RE-CHECK
+              </Button>
+            )}
+          </div>
+        )}
+      >
+        <div>
+          {servicesDown.map((service) => (
+            <div key={service.message}>{service.message}</div>
+          ))}
+        </div>
+      </Alert>
+    );
+  }
+  return null;
+}
+
+export default ExternalServicesStatusCheck;

package/src/components/HistoryLoadedDialog.jsx

@@ -0,0 +1,49 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material';
+import React from 'react';
+
+function HistoryLoadedDialog({ fileLoaderFunctions }) {
+  const [selectedOption, setSelectedOption] = React.useState('replace');
+  const { addState, replaceState, clear } = fileLoaderFunctions;
+  return (
+    <Dialog
+      open
+      onClose={clear}
+      PaperProps={{
+        component: 'form',
+        onSubmit: async (event) => {
+          event.preventDefault();
+          if (selectedOption === 'replace') {
+            replaceState();
+          } else {
+            addState();
+          }
+          clear();
+        },
+      }}
+      className="history-loaded-dialog"
+    >
+      <DialogTitle>History loaded</DialogTitle>
+      <DialogContent>
+        <FormControl fullWidth>
+          <RadioGroup
+            value={selectedOption}
+            variant="standard"
+            onChange={(e) => setSelectedOption(e.target.value)}
+          >
+            <FormControlLabel value="replace" control={<Radio />} label="Replace existing" />
+            <FormControlLabel value="add" control={<Radio />} label="Add to existing" />
+          </RadioGroup>
+        </FormControl>
+
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={clear}>
+          Cancel
+        </Button>
+        <Button type="submit">Select</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default HistoryLoadedDialog;