@teselagen/ove 0.7.27 → 0.7.28

package/SelectDialog.js

@@ -0,0 +1,150 @@
+import { convertRangeTo0Based } from "@teselagen/range-utils";
+import classNames from "classnames";
+import React from "react";
+
+import { reduxForm } from "redux-form";
+import { tgFormValues, wrapDialog } from "@teselagen/ui";
+import { compose } from "redux";
+import { Button, Intent, Classes } from "@blueprintjs/core";
+
+import { NumericInputField } from "@teselagen/ui";
+import { get } from "lodash-es";
+import { getRangeLength } from "@teselagen/range-utils";
+import { tryToRefocusEditor } from "../utils/editorUtils";
+
+// Single validation function - from & to have the same range
+const validate = (val, vals, props) => {
+  const { min, max } = get(props, "extraProps.from", {});
+  const circular = get(props, "extraProps.circular");
+  if ((min && val < min) || (max && val > max)) {
+    return "Invalid position";
+  }
+  if (!circular && Number(vals.from) > Number(vals.to)) {
+    return "Wrong from/to order";
+  }
+};
+// const selector = formValueSelector("selectDialog");
+export default compose(
+  wrapDialog({
+    isDraggable: true,
+    width: 400,
+    title: "Select Range",
+    height: 270,
+    onCloseHook: tryToRefocusEditor
+  }),
+  reduxForm({
+    form: "selectDialog"
+  }),
+  tgFormValues("from", "to")
+)(
+  class SelectDialog extends React.Component {
+    updateTempHighlight =
+      ({ isStart, isEnd } = {}) =>
+      val => {
+        const { selectionLayerUpdate, from, to, invalid } = this.props;
+        if (invalid) return;
+        selectionLayerUpdate(
+          convertRangeTo0Based({
+            start: isStart ? Math.round(val) : from,
+            end: isEnd ? Math.round(val) : to
+          })
+        );
+      };
+    componentDidMount() {
+      const { from, to, initialCaretPosition } = this.props;
+      this.initialSelection = { from, to, initialCaretPosition };
+      this.updateTempHighlight()();
+    }
+    render() {
+      const {
+        hideModal,
+        onSubmit,
+        selectionLayerUpdate,
+        from,
+        to,
+        initialCaretPosition,
+        caretPositionUpdate,
+        sequenceLength,
+        extraProps,
+        isProtein,
+        invalid,
+        handleSubmit
+      } = this.props;
+      const selectionLength = getRangeLength(
+        {
+          start: Number(from),
+          end: Number(to)
+        },
+        sequenceLength
+      );
+
+      return (
+        <form
+          onSubmit={handleSubmit(data => {
+            if (onSubmit) onSubmit(data);
+            hideModal();
+            tryToRefocusEditor();
+          })}
+          className={classNames(
+            Classes.DIALOG_BODY,
+            "tg-min-width-dialog simple-dialog"
+          )}
+        >
+          <NumericInputField
+            autoFocus
+            minorStepSize={1}
+            label="From:"
+            clampValueOnBlur
+            {...extraProps.to}
+            validate={validate}
+            //tnrtodo this normalization will actually work when https://github.com/palantir/blueprint/issues/3553 gets resolved
+            normalize={normalizeToInt}
+            onAnyNumberChange={this.updateTempHighlight({ isStart: true })}
+            name="from"
+          />
+          <NumericInputField
+            label="To:"
+            clampValueOnBlur
+            minorStepSize={1}
+            {...extraProps.from}
+            validate={validate}
+            normalize={normalizeToInt}
+            onAnyNumberChange={this.updateTempHighlight({ isEnd: true })}
+            name="to"
+          />
+          <div className="dialog-buttons">
+            <Button
+              onClick={() => {
+                if (initialCaretPosition > -1) {
+                  caretPositionUpdate(initialCaretPosition);
+                } else {
+                  selectionLayerUpdate({
+                    start: this.initialSelection.from,
+                    end: this.initialSelection.to
+                  });
+                }
+                hideModal();
+                tryToRefocusEditor();
+              }}
+              text="Cancel"
+            />
+            <Button
+              type="submit"
+              intent={Intent.PRIMARY}
+              text={`Select ${invalid ? 0 : selectionLength} ${
+                isProtein ? "AA" : "BP"
+              }${selectionLength === 1 ? "" : "s"}`}
+              disabled={invalid}
+            />
+          </div>
+        </form>
+      );
+    }
+  }
+);
+
+const normalizeToInt = val => {
+  const int = Math.round(val);
+  const normalizedVal = `${int >= 0 ? int : 1}`;
+  return normalizedVal;
+};

package/SequenceName.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+export function SequenceName({ sequenceName, sequenceLength, isProtein }) {
+  return (
+    <div key="sequenceNameText" className="sequenceNameText">
+      <span>{sequenceName} </span>
+      <br />
+      <span>
+        {isProtein
+          ? `${Math.floor(sequenceLength / 3)} AAs`
+          : `${sequenceLength} bps`}
+      </span>
+    </div>
+  );
+}

package/SimpleCircularOrLinearView.js

@@ -0,0 +1,381 @@
+import React, { useState } from "react";
+import {
+  showContextMenu,
+  commandMenuEnhancer,
+  FillWindow
+} from "@teselagen/ui";
+
+import { CircularView } from "./CircularView";
+import { LinearView } from "./LinearView";
+import { RowView } from "./RowView";
+
+import { HoveredIdContext } from "./helperComponents/withHover";
+import { visibilityDefaultValues } from "./redux/annotationVisibility";
+import { addWrappedAddons } from "./utils/addWrappedAddons";
+import { SimpleOligoPreview } from "./SimpleOligoPreview";
+import { cloneDeep, flatMap, map, startCase } from "lodash-es";
+import {
+  Button,
+  ButtonGroup,
+  Menu,
+  MenuItem,
+  Popover,
+  Tooltip
+} from "@blueprintjs/core";
+import getCommands from "./commands";
+import { withHandlers } from "recompose";
+import { exportSequenceToFile } from "./withEditorProps";
+import {
+  editorClicked,
+  updateSelectionOrCaret
+} from "./withEditorInteractions/clickAndDragUtils";
+
+//this view is meant to be a helper for showing a simple (non-redux connected) circular or linear view!
+export default props => {
+  let {
+    sequenceData: _sequenceData,
+    annotationVisibility: _annotationVisibility = {},
+    noWarnings = true,
+    withDownload,
+    withChoosePreviewType,
+    withCaretEnabled,
+    withSelectionEnabled,
+    smallSlider,
+    withVisibilityOptions,
+    minimalPreviewTypeBtns,
+    withFullscreen,
+    selectionLayer,
+    selectionLayerUpdate,
+    caretPositionUpdate,
+    editorName = "tg-simple-dna-view"
+  } = props;
+  const [previewType, setPreviewType] = useState(
+    _sequenceData.circular ? "circular" : "linear"
+  );
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+  const [isFullscreen, setFullscreen] = useState(false);
+  const [visibilityOptions, setVisibilityOptions] = useState({});
+  const [caretPosition, _caretPositionUpdate] = useState(
+    withCaretEnabled ? -1 : undefined
+  );
+  const [_selectionLayer, _selectionLayerUpdate] = useState(
+    withSelectionEnabled ? { start: -1, end: -1 } : undefined
+  );
+  const sequenceLength = _sequenceData.noSequence
+    ? _sequenceData.size
+    : _sequenceData.sequence.length;
+  selectionLayer = selectionLayer || _selectionLayer;
+
+  const selectionLayerUpdateOld = selectionLayerUpdate || _selectionLayerUpdate;
+  const caretPositionUpdateOld = caretPositionUpdate || _caretPositionUpdate;
+
+  selectionLayerUpdate = (newSel, dontTrigger) => {
+    if (!dontTrigger && newSel.start > -1) {
+      caretPositionUpdate(-1, true);
+    }
+    selectionLayerUpdateOld(newSel);
+  };
+  caretPositionUpdate = (newCaret, dontTrigger) => {
+    if (!dontTrigger && newCaret > -1) {
+      selectionLayerUpdate({ start: -1, end: -1 }, true);
+    }
+    caretPositionUpdateOld(newCaret);
+  };
+  function annotationClicked({ annotation, event }) {
+    event.stopPropagation();
+    event.preventDefault();
+    withSelectionEnabled &&
+      updateSelectionOrCaret({
+        doNotWrapOrigin: !sequenceData.circular,
+        shiftHeld: event.shiftKey,
+        sequenceLength,
+        newRangeOrCaret: annotation,
+        caretPosition,
+        selectionLayer,
+        selectionLayerUpdate: selectionLayerUpdate,
+        caretPositionUpdate: caretPositionUpdate
+      });
+  }
+
+  let tickSpacing = undefined;
+  let Component = (
+    withChoosePreviewType ? previewType === "circular" : _sequenceData.circular
+  )
+    ? CircularView
+    : _sequenceData.isOligo && _sequenceData.sequence
+      ? SimpleOligoPreview
+      : LinearView;
+  if (withChoosePreviewType && previewType === "row") {
+    Component = RowView;
+    tickSpacing = undefined;
+  }
+
+  let sequenceData = cloneDeep(_sequenceData);
+  const annotationVisibility = {
+    ...visibilityDefaultValues,
+    ..._annotationVisibility,
+    ...visibilityOptions
+  };
+
+  //here we're making it possible to not pass a sequenceData.sequence
+  //we can just pass a .size property to save having to send the whole sequence if it isn't needed!
+  if (sequenceData.noSequence) {
+    annotationVisibility.sequence = false;
+    annotationVisibility.reverseSequence = false;
+    if (sequenceData.size === undefined) {
+      return (
+        <div>
+          Error: No sequenceData.size detected when using noSequence flag{" "}
+        </div>
+      );
+    }
+    sequenceData = {
+      ...sequenceData,
+      sequence: {
+        length: sequenceData.size
+      }
+    };
+  }
+  sequenceData.parts = addWrappedAddons(
+    sequenceData.parts,
+    sequenceData.sequence.length
+  );
+  const inner = ({ width, height }) => (
+    <HoveredIdContext.Provider value={{ hoveredId: props.hoveredId }}>
+      <div style={{ width: "fit-content" }}>
+        {(withDownload ||
+          withChoosePreviewType ||
+          withFullscreen ||
+          VisibilityOptions) && (
+          <div
+            style={{
+              marginLeft: 10,
+              marginBottom: 5,
+              ...(isFullscreen && {
+                marginRight: 10,
+                paddingTop: 10
+              }),
+              display: "flex",
+              justifyContent: "end"
+            }}
+          >
+            {withDownload && <DownloadBtn {...props}></DownloadBtn>}
+            {withVisibilityOptions && (
+              <VisibilityOptions
+                {...{
+                  ...props,
+                  sequenceData,
+                  annotationVisibility,
+                  setVisibilityOptions,
+                  isPopoverOpen,
+                  setPopoverOpen
+                }}
+              ></VisibilityOptions>
+            )}
+
+            {withChoosePreviewType && (
+              <ButtonGroup>
+                <Tooltip content="Circular View">
+                  <Button
+                    minimal={minimalPreviewTypeBtns}
+                    className="tgPreviewTypeCircular"
+                    active={previewType === "circular"}
+                    intent="primary"
+                    onClick={() => setPreviewType("circular")}
+                    icon="circle"
+                  ></Button>
+                </Tooltip>
+                <Tooltip content="Linear View">
+                  <Button
+                    minimal={minimalPreviewTypeBtns}
+                    className="tgPreviewTypeLinear"
+                    active={previewType === "linear"}
+                    intent="primary"
+                    onClick={() => setPreviewType("linear")}
+                    icon="layout-linear"
+                  ></Button>
+                </Tooltip>
+                <Tooltip content="Sequence View">
+                  <Button
+                    minimal={minimalPreviewTypeBtns}
+                    className="tgPreviewTypeRow"
+                    active={previewType === "row"}
+                    intent="primary"
+                    onClick={() => setPreviewType("row")}
+                    icon="menu"
+                  ></Button>
+                </Tooltip>
+              </ButtonGroup>
+            )}
+            {withFullscreen && (
+              <FullscreenBtn
+                {...{ setFullscreen, isFullscreen }}
+              ></FullscreenBtn>
+            )}
+          </div>
+        )}
+        <Component
+          {...{
+            showCicularViewInternalLabels: true,
+            className: `${editorName} veEditor tg-simple-dna-view`,
+            width: 300,
+            height: 300,
+            noWarnings,
+            partClicked: annotationClicked,
+            featureClicked: annotationClicked,
+            primerClicked: annotationClicked,
+            ...props,
+            ...(isFullscreen && {
+              width: width - 10,
+              height: height - 10
+            }),
+            smartCircViewLabelRender: true,
+            caretPosition,
+            smallSlider,
+            ...(withSelectionEnabled && {
+              selectionLayer,
+              selectionLayerUpdate
+            }),
+            readOnly: true,
+            editorClicked: ({ nearestCaretPos, event } = {}) => {
+              if (!withCaretEnabled) {
+                if (!withSelectionEnabled) return;
+                if (!event.shiftKey) return;
+                if (!(selectionLayer.start > -1)) return;
+              }
+
+              editorClicked({
+                nearestCaretPos,
+                shiftHeld: !withSelectionEnabled ? false : event.shiftKey,
+                updateSelectionOrCaret: (shiftHeld, newRangeOrCaret) => {
+                  updateSelectionOrCaret({
+                    doNotWrapOrigin: !sequenceData.circular,
+                    sequenceLength,
+                    shiftHeld,
+                    newRangeOrCaret,
+                    caretPosition,
+                    selectionLayer,
+                    selectionLayerUpdate: selectionLayerUpdate,
+                    caretPositionUpdate: caretPositionUpdate
+                  });
+                }
+              });
+            },
+            instantiated: true,
+            tickSpacing,
+            hoveredId: props.hoveredId,
+            annotationVisibility,
+            sequenceData,
+            showTitle: true
+          }}
+        />
+      </div>
+    </HoveredIdContext.Provider>
+  );
+  if (isFullscreen) {
+    return (
+      <FillWindow asPortal className="tgSimpleViewFullscreen">
+        {inner}
+      </FillWindow>
+    );
+  }
+  return inner({});
+};
+
+const DownloadBtn = withHandlers({ exportSequenceToFile })(props => {
+  return (
+    <Tooltip content="Download">
+      <Button
+        className="veDownloadButton"
+        style={{ marginRight: 10 }}
+        onClick={event =>
+          showContextMenu(
+            [
+              "exportSequenceAsGenbank",
+              "exportDNASequenceAsFasta",
+              "exportProteinSequenceAsFasta",
+              "exportSequenceAsTeselagenJson"
+            ],
+            [
+              commandMenuEnhancer(getCommands({ props }), {
+                useTicks: true,
+                omitIcons: true
+              })
+            ],
+            event
+          )
+        }
+        minimal
+        intent="primary"
+        icon="download"
+      ></Button>
+    </Tooltip>
+  );
+});
+const FullscreenBtn = ({ setFullscreen, isFullscreen }) => {
+  return (
+    <Tooltip content={`${isFullscreen ? "Close " : ""}Fullscreen`}>
+      <Button
+        className="veFullscreenButton"
+        style={{ marginLeft: 10, marginRight: 10 }}
+        onClick={() => {
+          setFullscreen(!isFullscreen);
+        }}
+        minimal
+        intent="primary"
+        icon={!isFullscreen ? "maximize" : "minimize"}
+      ></Button>
+    </Tooltip>
+  );
+};
+const VisibilityOptions = ({
+  annotationVisibility,
+  sequenceData,
+  setVisibilityOptions,
+  isPopoverOpen,
+  setPopoverOpen
+}) => {
+  return (
+    <Tooltip disabled={isPopoverOpen} content="Visibility Options">
+      <Popover
+        minimal
+        onInteraction={isOpen => {
+          setPopoverOpen(isOpen);
+        }}
+        isOpen={isPopoverOpen}
+        content={
+          <Menu>
+            {flatMap(
+              ["features", "parts", "primers", "translations", "cutsites"],
+              name => {
+                if (!map(sequenceData[name]).length) return [];
+                return (
+                  <MenuItem
+                    onClick={e => {
+                      setVisibilityOptions({
+                        ...annotationVisibility,
+                        [name]: !annotationVisibility[name]
+                      });
+                      e.stopPropagation();
+                    }}
+                    icon={annotationVisibility[name] ? "tick" : "blank"}
+                    key={name}
+                    text={startCase(name)}
+                  ></MenuItem>
+                );
+              }
+            )}
+          </Menu>
+        }
+      >
+        <Button
+          className="veSimpleVisibilityBtn"
+          style={{ marginLeft: 10, marginRight: 10 }}
+          minimal
+          intent="primary"
+          icon="eye-open"
+        ></Button>
+      </Popover>
+    </Tooltip>
+  );
+};

package/SimpleOligoPreview.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { SequenceName } from "./LinearView/SequenceName";
+import classNames from "classnames";
+
+export function SimpleOligoPreview({
+  className,
+  width,
+  height,
+  sequenceData,
+  showTitle
+}) {
+  return (
+    <div
+      style={{
+        width,
+        height,
+        paddingLeft: 5,
+        display: "flex",
+        flexDirection: "column"
+      }}
+      className={classNames("tg-simple-oligo-viewer", className)}
+    >
+      {showTitle && (
+        <SequenceName
+          {...{
+            isProtein: sequenceData.isProtein,
+            sequenceName: sequenceData.name || "",
+            sequenceLength: sequenceData.sequence
+              ? sequenceData.sequence.length
+              : 0
+          }}
+        />
+      )}
+      <div style={{ height: "100%", overflow: "auto", wordBreak: "break-all" }}>
+        {sequenceData.sequence || ""}
+      </div>
+    </div>
+  );
+}