@teselagen/ove 0.0.14 → 0.0.16

package/src/helperComponents/EnzymesDialog/style.css

@@ -0,0 +1,21 @@
+.veSelectedEnzymeGroup {
+  background-color: #106ba3;
+}
+.veEnzymeDialogEnzyme {
+  cursor: pointer;
+  padding: 1px 5px;
+  margin: 1px;
+}
+.veEnzymeDialogEnzymes {
+  width: 100%;
+  padding-left: 20px;
+  /* padding-right: 5px; */
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.veEnzymeDialogEnzymeAddIcon {
+  flex: 0 0 auto !important;
+}

package/src/helperComponents/GoToDialog.js

@@ -0,0 +1,21 @@
+import createSimpleDialog from "./createSimpleDialog";
+import { NumericInputField } from "@teselagen/ui";
+import { get } from "lodash";
+import { tryToRefocusEditor } from "../utils/editorUtils";
+
+export default createSimpleDialog({
+  formName: "goToDialog",
+  fields: [
+    {
+      name: "sequencePosition",
+      component: NumericInputField,
+      validate: (val, vals, props) => {
+        const { min, max } = get(props, "extraProps.sequencePosition", {});
+        return (min && val < min) || (max && val > max)
+          ? "Invalid position"
+          : undefined;
+      }
+    }
+  ],
+  withDialogProps: { title: "Go To", height: 190, onCloseHook: tryToRefocusEditor }
+});

package/src/helperComponents/MergeFeaturesDialog/index.js

@@ -0,0 +1,253 @@
+import React from "react";
+import uuid from "shortid";
+
+import { reduxForm } from "redux-form";
+
+import {
+  InputField,
+  ReactSelectField,
+  wrapDialog,
+  InfoHelper,
+  tgFormValues
+} from "@teselagen/ui";
+import { compose } from "redux";
+import { Button, Intent, Classes } from "@blueprintjs/core";
+import { flatMap } from "lodash";
+import classNames from "classnames";
+import withEditorProps from "../../withEditorProps";
+import { CheckboxField } from "@teselagen/ui";
+import "./style.css";
+
+class MergeFeaturesDialog extends React.Component {
+  render() {
+    const {
+      // editorName,
+      hideModal,
+      handleSubmit,
+      selectedAnnotations,
+      sequenceData,
+      selectionLayerUpdate,
+      id1,
+      upsertFeature,
+      deleteFeature,
+      id2,
+      change
+    } = this.props;
+    const { features } = sequenceData;
+    const feat1 = features[id1];
+    const feat2 = features[id2];
+    const [id1default, id2default] = flatMap(
+      selectedAnnotations.idStack,
+      (id) => {
+        const ann = selectedAnnotations.idMap[id];
+        if (ann.annotationTypePlural === "features") {
+          return id;
+        }
+        return [];
+      }
+    );
+    return (
+      <form
+        onSubmit={handleSubmit(
+          ({ id1, id2, name, preserveFeatures, start, end }) => {
+            if (!preserveFeatures) {
+              deleteFeature([id1, id2], {
+                batchUndoStart: true
+              });
+            }
+            upsertFeature(
+              {
+                ...feat1,
+                id: uuid(),
+                start: start - 1,
+                end: end - 1,
+                name
+              },
+              {
+                batchUndoEnd: true
+              }
+            );
+            selectionLayerUpdate({
+              start: start - 1,
+              end: end - 1
+            });
+            hideModal();
+          }
+        )}
+        className={classNames(
+          Classes.DIALOG_BODY,
+          "tg-min-width-dialog",
+          "veMergeFeaturesDialog"
+        )}
+      >
+        <InfoHelper displayToSide>
+          <span style={{ fontStyle: "italic", fontSize: 11, marginTop: -8 }}>
+            Choose features in the dropdown or shift click directly on the
+            plasmid map
+          </span>
+        </InfoHelper>
+        <br />
+        <ReactSelectField
+          inlineLabel
+          required
+          defaultValue={id1default}
+          enableReinitialize
+          name="id1"
+          label={
+            <div style={{ display: "flex", width: "100%", alignItems: "top" }}>
+              <InfoHelper
+                {...{
+                  popoverProps: {
+                    position: "top"
+                  }
+                }}
+                onClick={() => {
+                  feat1 && change("name", feat1.name);
+                }}
+                disabled={!feat1}
+                icon="small-plus"
+                isButton
+              >
+                Use Name
+              </InfoHelper>
+              <div style={{ padding: "10px 0px 0px 10px", minWidth: 80 }}>
+                Feature 1:
+              </div>
+            </div>
+          }
+          options={flatMap(features, (feat) => {
+            if (feat.id === (feat2 && feat2.id)) return []; //filter out other feature as an option
+            return {
+              value: feat.id,
+              label: feat.name
+            };
+          })}
+        />
+        <div
+          style={{
+            marginTop: -8,
+            marginBottom: 10,
+            display: "flex",
+            justifyContent: "center",
+            width: " 100%"
+          }}
+        >
+          <Button
+            onClick={() => {
+              const id1Holder = id1;
+              change("id1", id2);
+              change("id2", id1Holder);
+            }}
+            icon="swap-vertical"
+          >
+            {" "}
+            Swap{" "}
+          </Button>{" "}
+          &nbsp;{" "}
+        </div>
+        <ReactSelectField
+          inlineLabel
+          required
+          defaultValue={id2default}
+          enableReinitialize
+          name="id2"
+          label={
+            <div style={{ display: "flex", width: "100%", alignItems: "top" }}>
+              <InfoHelper
+                onClick={() => {
+                  feat2 && change("name", feat2.name);
+                }}
+                disabled={!feat2}
+                icon="small-plus"
+                isButton
+              >
+                Use Name
+              </InfoHelper>
+              <div style={{ padding: "10px 0px 0px 10px", minWidth: 80 }}>
+                Feature 2:
+              </div>
+            </div>
+          }
+          options={flatMap(features, (feat) => {
+            if (feat.id === (feat1 && feat1.id)) return []; //filter out other feature as an option
+            return {
+              value: feat.id,
+              label: feat.name
+            };
+          })}
+        />
+        <InputField
+          autoFocus
+          inlineLabel
+          enableReinitialize
+          defaultValue={feat1 && feat1.name}
+          validate={required}
+          name="name"
+          label="New Name:"
+        />
+        <div style={{ display: "flex" }}>
+          <InputField
+            inlineLabel
+            disabled
+            enableReinitialize
+            defaultValue={!feat1 ? "" : feat1.start + 1}
+            validate={required}
+            name="start"
+            label="New Start:"
+          />
+          &nbsp; &nbsp; &nbsp;
+          <InputField
+            inlineLabel
+            disabled
+            enableReinitialize
+            defaultValue={!feat2 ? "" : feat2.end + 1}
+            validate={required}
+            name="end"
+            label="New End:"
+          />
+        </div>
+        <CheckboxField
+          name="preserveFeatures"
+          defaultValue={false}
+          label="Preserve features (by default they will be removed once merged)"
+        />
+
+        <div
+          style={{ display: "flex", justifyContent: "flex-end" }}
+          className="width100"
+        >
+          <Button type="submit" intent={Intent.PRIMARY}>
+            Create Merged Feature
+          </Button>
+        </div>
+      </form>
+    );
+  }
+}
+
+function required(val) {
+  if (!val) return "Required";
+}
+
+export default compose(
+  wrapDialog({
+    title: "Merge Features",
+    isDraggable: true,
+    width: 400
+  }),
+  withEditorProps,
+  reduxForm({
+    form: "MergeFeaturesDialog",
+    validate: ({ id1, id2 }) => {
+      const errors = {};
+      if (!id1 || Array.isArray(id1)) {
+        errors.id1 = "Please select a feature";
+      }
+      if (!id2 || Array.isArray(id2)) {
+        errors.id2 = "Please select a feature";
+      }
+      return errors;
+    }
+  }),
+  tgFormValues("id1", "id2")
+)(MergeFeaturesDialog);

package/src/helperComponents/MergeFeaturesDialog/style.css

@@ -0,0 +1,3 @@
+.veMergeFeaturesDialog .bp3-form-content {
+  flex-grow: 1;
+}

package/src/helperComponents/MultipleSeqsDetectedOnImportDialog.js

@@ -0,0 +1,74 @@
+import { DialogFooter, wrapDialog } from "@teselagen/ui";
+
+import { Button, Callout, Card } from "@blueprintjs/core";
+
+import { hideDialog } from "../GlobalDialogUtils";
+import SimpleCircularOrLinearView from "../SimpleCircularOrLinearView";
+import React, { useState } from "react";
+import { tidyUpSequenceData } from "@teselagen/sequence-utils";
+
+export const MultipleSeqsDetectedOnImportDialog = wrapDialog({
+  title: "Multiple Sequences Detected"
+  // style: { height: 600, width: 800 }
+})(({ results, finishDisplayingSeq }) => {
+  const [_selectedSeqData, setSelectedSeqData] = useState(
+    results[0].parsedSequence
+  );
+  const selectedSeqData = tidyUpSequenceData(_selectedSeqData);
+  return (
+    <div>
+      <div className="bp3-dialog-body">
+        <Callout intent="primary">
+          Multiple sequences were detected in the input file. Please choose one
+          to continue
+        </Callout>
+        <br></br>
+        <div style={{ display: "flex" }}>
+          <div style={{ maxHeight: 300, overflowY: "auto" }}>
+            {results.map((res, i) => {
+              const { parsedSequence } = res;
+              if (!parsedSequence) return null;
+              const { name } = parsedSequence;
+              return (
+                <div key={i}>
+                  <Button
+                    active={parsedSequence === selectedSeqData}
+                    onClick={() => {
+                      setSelectedSeqData(parsedSequence);
+                    }}
+                    minimal
+                  >
+                    {name}
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+          &nbsp;
+          <Card elevation={1}>
+            <SimpleCircularOrLinearView
+              sequenceData={selectedSeqData || { sequence: "" }}
+              // tabHeight={tabHeight}
+              editorName="previewEditor"
+              height={null}
+              isProtein={selectedSeqData && selectedSeqData.isProtein}
+              annotationLabelVisibility={{
+                features: true,
+                parts: true,
+                cutsites: false,
+                primers: true
+              }}
+            ></SimpleCircularOrLinearView>
+          </Card>
+        </div>
+      </div>
+      <DialogFooter
+        text="Select"
+        onClick={() => {
+          finishDisplayingSeq(selectedSeqData);
+          hideDialog();
+        }}
+      ></DialogFooter>
+    </div>
+  );
+});

package/src/helperComponents/PinchHelper/PinchHelper.js

@@ -0,0 +1,24 @@
+import { usePinch } from "@use-gesture/react";
+import React from "react";
+/**
+ * wrapper for the react usePinch gesture
+ * @param {*} children child components to be enveloped
+ * @param {*} onPinch the action to be performed when pinch gesture is registered
+ */
+export default function PinchHelper({ children, onPinch }) {
+  const target = React.useRef();
+
+  usePinch(
+    (arg) => {
+      if (onPinch) onPinch(arg);
+    },
+    {
+      target
+    }
+  );
+  return (
+    <div ref={target} className="tg-pinch-helper">
+      {children}
+    </div>
+  );
+}