@opencloning/ui 1.0.0

package/src/components/NetworkTree.css

@@ -0,0 +1,127 @@
+/* Adapted from https://github.com/dumptyd/treeflex */
+
+.tf-ancestor-tree {
+    position: relative;
+}
+
+.tf-ancestor-tree>div {
+    transform-origin: top left;
+    /* This is how you could potentially scale for screenshots */
+    /* transform: scale(0.5); */
+}
+
+.tf-ancestor-tree>div>ul {
+    transform: rotateX(180deg);
+}
+
+.node-text {
+    display: inline-block;
+    transform: rotateX(180deg);
+}
+
+.tf-tree {
+    font-size: 16px;
+}
+
+.tf-tree * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0
+}
+
+.tf-tree ul {
+    display: inline-flex;
+}
+
+.tf-tree li {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    padding: 0 1em;
+    position: relative
+}
+
+.tf-tree li ul {
+    margin-top: 2em
+}
+
+.tf-tree li li:before {
+    border-top: 2px solid #000;
+    content: "";
+    display: block;
+    height: .0625em;
+    left: -.03125em;
+    position: absolute;
+    top: -1.00em;
+    width: 100%;
+    z-index: -1;
+}
+
+.tf-tree li li:first-child:before {
+    left: calc(50% - .03125em);
+    max-width: calc(50% + .0625em)
+}
+
+.tf-tree li li:last-child:before {
+    left: auto;
+    max-width: calc(50% + .0625em);
+    right: calc(50% - .03125em)
+}
+
+.tf-tree li li:only-child:before {
+    display: none
+}
+
+.tf-tree li li:only-child>.tf-nc:before, .tf-tree li li:only-child>.tf-node-content:before {
+    height: 1.0625em;
+    top: -1.0625em
+}
+
+.tf-tree .tf-nc, .tf-tree .tf-node-content {
+    padding: .5em 1em;
+    position: relative
+}
+
+/* Sticking down */
+.tf-tree .tf-nc:before, .tf-tree .tf-node-content:before {
+    top: -1.2em
+}
+
+.tf-tree .tf-nc:after, .tf-tree .tf-nc:before, .tf-tree .tf-node-content:after, .tf-tree .tf-node-content:before {
+    border-left: 2px solid #000;
+    content: "";
+    display: block;
+    height: 1.2em;
+    left: calc(50% - .03125em);
+    position: absolute;
+    width: 2px;
+    z-index: -1;
+}
+
+.tf-tree .tf-nc:after, .tf-tree .tf-node-content:after {
+    top: calc(100% + .12em)
+}
+
+/* .tf-tree>div>ul>li>.tf-nc:before removes the things sticking to the bottom */
+.tf-tree .tf-nc:only-child:after, .tf-tree .tf-node-content:only-child:after, .tf-tree>div>ul>li>.tf-nc:before, .tf-tree>div>ul>li>.tf-node-content:before {
+    display: none
+}
+
+.tf-tree.tf-gap-sm li {
+    padding: 0 .6em
+}
+
+.tf-tree.tf-gap-sm li>.tf-nc:before, .tf-tree.tf-gap-sm li>.tf-node-content:before {
+    height: .6em;
+    top: -.6em
+}
+
+.tf-tree.tf-gap-sm li>.tf-nc:after, .tf-tree.tf-gap-sm li>.tf-node-content:after {
+    height: .6em
+}
+
+.tf-nc {
+    border-radius: 15px;
+    text-align: center;
+}

package/src/components/ObjectTable.jsx

@@ -0,0 +1,24 @@
+// A react fucntioncal component that renders a table
+// where each row contains a key-value pair of an object
+// it uses mui
+
+import { Table, TableCell, TableRow } from '@mui/material';
+import React from 'react';
+
+function ObjectTable({ object }) {
+  return (
+
+    <Table sx={{ my: 2 }}>
+
+      {Object.keys(object).map((key) => (
+        <TableRow key={key}>
+          <TableCell sx={{ py: 0.5 }}><strong>{key}</strong></TableCell>
+          <TableCell sx={{ py: 0.5 }}>{object[key]}</TableCell>
+        </TableRow>
+      ))}
+    </Table>
+
+  );
+}
+
+export default React.memo(ObjectTable);

package/src/components/OpenCloning.jsx

@@ -0,0 +1,102 @@
+import React, { useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Tabs from '@mui/material/Tabs';
+import { isEqual } from 'lodash-es';
+import DescriptionEditor from './DescriptionEditor';
+import PrimerList from './primers/PrimerList';
+import SettingsTab from './settings/SettingsTab';
+import { cloningActions } from '@opencloning/store/cloning';
+import TabPanel from './navigation/TabPanel';
+import CustomTab from './navigation/CustomTab';
+import DataModelDisplayer from './DataModelDisplayer';
+import CloningHistory from './CloningHistory';
+import SequenceTab from './SequenceTab';
+import AppAlerts from './AppAlerts';
+import Assembler from './assembler/Assembler';
+
+const { setCurrentTab } = cloningActions;
+
+function OpenCloning() {
+  const dispatch = useDispatch();
+  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);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setSmallDevice(window.innerWidth < 600);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const changeTab = (event, newValue) => {
+    dispatch(setCurrentTab(newValue));
+    if (tabPanelsRef.current) {
+      tabPanelsRef.current.scrollTo({
+        top: 0,
+        behavior: 'instant',
+      });
+    }
+  };
+
+  return (
+    <div className="app-container" style={{ height: hasAppBar ? 'calc(100vh - 114px - 10px)' : '100vh' }}>
+      <AppAlerts />
+      <Tabs
+        variant={smallDevice ? 'scrollable' : 'standard'}
+        scrollButtons={smallDevice ? 'auto' : false}
+        allowScrollButtonsMobile
+        centered={!smallDevice}
+        value={currentTab}
+        onChange={changeTab}
+        sx={{ pb: 3, pt: 1 }}
+        id="opencloning-app-tabs"
+      >
+        <CustomTab label="Cloning" index={0} />
+        <CustomTab label="Primers" index={1} />
+        <CustomTab label="Description" index={2} />
+        <CustomTab label="Sequence" index={3} />
+        <CustomTab label="Data model" index={4} />
+        <CustomTab label="Settings" index={5} />
+        {enableAssembler && <CustomTab label="Assembler" index={6} />}
+      </Tabs>
+      <div className="tab-panels-container" ref={tabPanelsRef}>
+        <TabPanel index={1} value={currentTab} className="primer-tab-pannel">
+          <div className="primer-list-container">
+            <PrimerList />
+          </div>
+        </TabPanel>
+        <TabPanel index={2} value={currentTab} className="description-tab-pannel">
+          <div className="description-editor">
+            <DescriptionEditor />
+          </div>
+        </TabPanel>
+        {/* For some reason, putting this here is required for primer.color to work */}
+        <TabPanel index={3} value={currentTab} className="main-editor-tab-pannel">
+          <div className="main-sequence-editor">
+            <SequenceTab />
+          </div>
+        </TabPanel>
+        <TabPanel index={0} value={currentTab} className="cloning-tab-pannel">
+          <div className="open-cloning">
+            <CloningHistory />
+          </div>
+        </TabPanel>
+        <TabPanel index={4} value={currentTab} className="data-model-tab-pannel">
+          <DataModelDisplayer />
+        </TabPanel>
+        <TabPanel index={5} value={currentTab} className="settings-tab-pannel">
+          <SettingsTab />
+        </TabPanel>
+        {enableAssembler && <TabPanel index={6} value={currentTab} className="assembler-tab-pannel">
+          <Assembler />
+        </TabPanel>}
+      </div>
+    </div>
+  );
+}
+
+export default OpenCloning;

package/src/components/OverhangsDisplay.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { formatSequenceForOverhangDisplay } from '@opencloning/utils/sequenceDisplay';
+
+function OverhangsDisplay({ sequence, sequenceData }) {
+  if (sequence === undefined
+    || (sequence.overhang_crick_3prime === 0 && sequence.overhang_watson_3prime === 0)
+  ) { return null; }
+  const { watson, crick, middle } = formatSequenceForOverhangDisplay(
+    sequenceData.sequence,
+    sequence.overhang_crick_3prime,
+    sequence.overhang_watson_3prime,
+  );
+
+  return (
+    <div className="overhang-representation">
+      {watson}
+      <br />
+      {middle}
+      <br />
+      {crick}
+    </div>
+  );
+}
+
+export default OverhangsDisplay;

package/src/components/SequenceEditor.jsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { SimpleCircularOrLinearView } from '@teselagen/ove';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEqual } from 'lodash-es';
+import OverhangsDisplay from './OverhangsDisplay';
+import NewSourceBox from './sources/NewSourceBox';
+import { cloningActions } from '@opencloning/store/cloning';
+import getTransformCoords from '@opencloning/utils/transformCoords';
+import { getPCRPrimers, isSequenceInputOfAnySource } from '@opencloning/store/cloning_utils';
+
+const transformToRegion = (eventOutput) => {
+  if (eventOutput.selectionLayer) {
+    // When selecting a region
+    return { selectionLayer: eventOutput.selectionLayer, caretPosition: -1 };
+  }
+  // When clicking a feature
+  return { selectionLayer: { start: eventOutput.start, end: eventOutput.end }, caretPosition: -1 };
+};
+
+function AddSourceComponent({ sequenceId }) {
+  const isRootNode = useSelector((state) => !isSequenceInputOfAnySource(sequenceId, state.cloning.sources));
+  return isRootNode ? (
+    <div className="hang-from-node">
+      <div>
+        <NewSourceBox {...{ inputSequencesIds: [sequenceId] }} />
+      </div>
+    </div>
+  ) : null;
+}
+
+function SequenceEditor({ sequenceId }) {
+  const editorName = `editor_${sequenceId}`;
+  const sequence = useSelector((state) => state.cloning.sequences.find((e) => e.id === sequenceId), isEqual);
+  const pcrPrimers = useSelector(({ cloning }) => getPCRPrimers(cloning, sequenceId), isEqual);
+  const unmutableSeq = useSelector((state) => state.cloning.teselaJsonCache[sequenceId], isEqual);
+  const seq = { ...unmutableSeq };
+
+  // Make a copy
+  const seqCopy = React.useMemo(() => structuredClone(seq), [seq]);
+  // Filter out features of type "source"
+  seqCopy.features = seqCopy.features.filter((f) => f.type !== 'source');
+  // If the primer has been already added to the template, we don't add it again
+  const pcrPrimers2Include = pcrPrimers.filter((p) => !seqCopy.primers.some(
+    (p2) => p2.name === p.name && p2.start === p.start && p2.end === p.end,
+  ));
+  seqCopy.primers = [...seqCopy.primers, ...pcrPrimers2Include];
+  const parentSource = useSelector((state) => state.cloning.sources.find((source) => source.id === sequenceId), isEqual);
+  const stateSelectedRegion = useSelector((state) => state.cloning.selectedRegions.find((r) => r.id === sequenceId)?.selectedRegion, isEqual);
+  const parentSequenceData = useSelector((state) => parentSource.input.map(({sequence}) => state.cloning.teselaJsonCache[sequence]), isEqual);
+  const [rangeInParent, setRangeInParent] = React.useState(() => null);
+  React.useEffect(() => {
+    const callBack = getTransformCoords(parentSource, parentSequenceData, seqCopy.size);
+    // Here we have to set the state like this, since it's a function
+    // otherwise, react calls the function with the previous state
+    setRangeInParent(() => callBack);
+  }, [parentSource, parentSequenceData]);
+
+  const { setSelectedRegions } = cloningActions;
+  const dispatch = useDispatch();
+  const [selectedRegion, setSelectedRegion] = React.useState({ selectionLayer: { start: -1, end: -1 }, caretPosition: -1 });
+  const [timeOutId, setTimeOutId] = React.useState(null);
+
+  const { selectionLayer, caretPosition } = selectedRegion;
+
+  React.useEffect(() => {
+    if (stateSelectedRegion !== undefined) {
+      setSelectedRegion(stateSelectedRegion);
+    } else {
+      setSelectedRegion({ selectionLayer: { start: -1, end: -1 }, caretPosition: -1 });
+    }
+  }, [stateSelectedRegion]);
+
+  const updateSelectedRegion = (eventOutput, isCaret) => {
+    if (isCaret) {
+      // TODO: something here?
+    } else {
+      const newRegion = transformToRegion(eventOutput);
+      const newTimeOutId = setTimeout(() => {
+        const parentSequenceIds = parentSource.input.map(({sequence}) => sequence);
+        // We add the current sequence to the selectedRegions array
+        const selectedRegions = [{ id: sequenceId, selectedRegion: newRegion }];
+        // If possible, add the equivalent region in the parent sequence
+        parentSequenceIds.forEach((id) => {
+          const selectionLayerAssembly = rangeInParent(newRegion.selectionLayer, id);
+          if (selectionLayerAssembly !== null) {
+            selectedRegions.push({ id, selectedRegion: { selectionLayer: selectionLayerAssembly, caretPosition: -1 } });
+          }
+        });
+        dispatch(setSelectedRegions(selectedRegions));
+      }, 500);
+      setSelectedRegion(newRegion);
+      setTimeOutId((prev) => {
+        clearTimeout(prev);
+        return newTimeOutId;
+      });
+    }
+  };
+
+  return (
+    <div>
+      <SimpleCircularOrLinearView {...{
+        sequenceData: seqCopy,
+        editorName,
+        height: seq.circular ? null : 'auto',
+        withCaretEnabled: true,
+        withSelectionEnabled: true,
+        selectionLayer,
+        selectionLayerUpdate: (a) => updateSelectedRegion(a, false),
+        // TODO: this does not work
+        caretPosition,
+        caretPositionUpdate: (a) => updateSelectedRegion(a, true),
+      }}
+      />
+      <OverhangsDisplay {...{ sequenceData: seq, sequence }} />
+      <AddSourceComponent {...{ sequenceId }} />
+    </div>
+  );
+}
+
+export default React.memo(SequenceEditor);

package/src/components/SequenceTab.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import MainSequenceEditor from './MainSequenceEditor';
+import PrimerDesigner from './primers/primer_design/SequenceTabComponents/PrimerDesigner';
+
+function SequenceTab() {
+  return (
+    <>
+      <PrimerDesigner />
+      <MainSequenceEditor />
+    </>
+  );
+}
+
+export default SequenceTab;

package/src/components/TemplateSequence.jsx

@@ -0,0 +1,38 @@
+import { Tooltip } from '@mui/material';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+function TemplateSequence({ sequenceId }) {
+  const circular = useSelector((state) => state.cloning.sequences.find((e) => e.id === sequenceId).circular);
+  let svgContent = null;
+  let tooltipText = null;
+
+  if (circular === true) {
+    tooltipText = 'Circular sequence expected';
+    svgContent = <circle cx="60" cy="60" r="40" stroke="lightgrey" strokeWidth="9" fill="none" />;
+  } else if (circular === false) {
+    svgContent = <line x1="10" y1="60" x2="140" y2="60" stroke="lightgrey" strokeWidth="9" />;
+    tooltipText = 'Linear sequence expected';
+  } else {
+    svgContent = (
+      <>
+        <circle cx="30" cy="40" r="25" stroke="lightgrey" strokeWidth="5" fill="none" />
+        <line x1="10" y1="110" x2="110" y2="20" stroke="grey" strokeWidth="2" />
+        <line x1="60" y1="90" x2="110" y2="90" stroke="lightgrey" strokeWidth="5" />
+      </>
+    );
+    tooltipText = 'Linear/circular sequence expected';
+  }
+  const toolTipElement = <div style={{ fontSize: 'medium' }}>{tooltipText}</div>;
+  return (
+    <div>
+      <Tooltip title={toolTipElement}>
+        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+          {svgContent}
+        </svg>
+      </Tooltip>
+    </div>
+  );
+}
+
+export default React.memo(TemplateSequence);

package/src/components/annotation/PlannotateAnnotationReport.jsx

@@ -0,0 +1,33 @@
+import { Dialog, DialogContent, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import React from 'react';
+
+function PlannotateAnnotationReport({ dialogOpen, setDialogOpen, report }) {
+  return (
+    <Dialog fullWidth maxWidth="lg" open={dialogOpen} onClose={() => setDialogOpen(false)}>
+      <DialogContent>
+        <Table sx={{ textAlign: 'center' }}>
+          <TableHead>
+            <TableRow>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Feature</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Percent identity</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Percent match length</TableCell>
+              <TableCell sx={{ fontWeight: 'bold', textAlign: 'center' }}>Description</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {report.map((row) => (
+              <TableRow key={`${row.Feature}-${row.Description}`}>
+                <TableCell>{row.Feature}</TableCell>
+                <TableCell sx={{ textAlign: 'center' }}>{Number(row.percent_identity).toFixed(0)}</TableCell>
+                <TableCell sx={{ textAlign: 'center' }}>{Number(row.percent_match_length).toFixed(0)}</TableCell>
+                <TableCell>{row.Description}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default PlannotateAnnotationReport;

package/src/components/annotation/useUpdateAnnotationInMainSequence.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useDispatch, useStore } from 'react-redux';
+import useAlerts from '../../hooks/useAlerts';
+import { jsonToGenbank } from '@teselagen/bio-parsers';
+import { cloningActions } from '@opencloning/store/cloning';
+import useStoreEditor from '../../hooks/useStoreEditor';
+
+const { updateSequence } = cloningActions;
+
+export default function useUpdateAnnotationInMainSequence() {
+  const store = useStore();
+  const { addAlert } = useAlerts();
+  const dispatch = useDispatch();
+  const { updateStoreEditor } = useStoreEditor();
+
+  const updateFunction = React.useCallback(() => {
+    const state = store.getState();
+    const mainSequenceId = state.cloning.mainSequenceId;
+    const currentSequenceData = state.cloning.teselaJsonCache[mainSequenceId];
+    const newSequenceData = state.VectorEditor.mainEditor.sequenceData;
+    const mainSequence = state.cloning.sequences.find((s) => s.id === mainSequenceId);
+    const newSequence = { ...mainSequence, file_content: jsonToGenbank(newSequenceData) };
+    if (currentSequenceData.sequence.toUpperCase() === newSequenceData.sequence.toUpperCase()) {
+      addAlert({
+        message: 'Annotation updated',
+        severity: 'success',
+      });
+      dispatch(updateSequence(newSequence));
+      // Clear the sequenceDataHistory
+      updateStoreEditor('mainEditor', mainSequenceId, { sequenceDataHistory: {} });
+    } else {
+      addAlert({
+        message: 'Sequences are different!',
+        severity: 'error',
+      });
+    }
+  }, [store, addAlert, dispatch, updateStoreEditor]);
+  return updateFunction;
+};