@teselagen/ove 0.7.26 → 0.7.28

package/SingleEnzymeCutsiteInfo.js

@@ -0,0 +1,139 @@
+import React, { useCallback, useMemo } from "react";
+import { DataTable } from "@teselagen/ui";
+import { CutsiteTag } from "../../CutsiteFilter/AdditionalCutsiteInfoDialog";
+import EnzymeViewer from "../../EnzymeViewer";
+import { getEnzymeAliases } from "../../utils/editorUtils";
+
+const schema = {
+  fields: [
+    { path: "topSnipPosition", displayName: "Top Snip", type: "string" },
+    { path: "position", type: "string" },
+    { path: "strand", type: "string" }
+  ]
+};
+
+export default function SingleEnzymeCutsiteInfo({
+  cutsiteGroup,
+  enzyme,
+  dispatch,
+  allRestrictionEnzymes,
+  editorName,
+  selectedAnnotationId,
+  allCutsites,
+  filteredCutsites: { cutsitesByName: cutsitesByNameActive }
+}) {
+  const onRowSelect = useCallback(
+    ([record]) => {
+      if (!record) return;
+
+      dispatch({
+        type: "CARET_POSITION_UPDATE",
+        payload: record.topSnipPosition,
+        meta: {
+          editorName
+        }
+      });
+    },
+    [dispatch, editorName]
+  );
+
+  const aliases = useMemo(() => getEnzymeAliases(enzyme), [enzyme]);
+  const entities = useMemo(
+    () =>
+      cutsiteGroup
+        .sort((a, b) => a.topSnipPosition - b.topSnipPosition)
+        .map(
+          ({
+            restrictionEnzyme: { forwardRegex, reverseRegex } = {},
+            forward,
+            id,
+            topSnipBeforeBottom,
+            topSnipPosition,
+            bottomSnipPosition
+          }) => {
+            return {
+              id,
+              topSnipPosition,
+              position: topSnipBeforeBottom
+                ? topSnipPosition + " - " + bottomSnipPosition
+                : bottomSnipPosition + " - " + topSnipPosition,
+              strand:
+                forwardRegex === reverseRegex
+                  ? "Palindromic"
+                  : forward
+                    ? "1"
+                    : "-1"
+            };
+          }
+        ),
+    [cutsiteGroup]
+  );
+
+  return (
+    <div>
+      <div
+        className="ve-enzymeSubrow"
+        style={{
+          margin: 10
+        }}
+      >
+        {enzyme && (
+          <EnzymeViewer
+            sequence={enzyme.site}
+            reverseSnipPosition={enzyme.bottomSnipOffset}
+            forwardSnipPosition={enzyme.topSnipOffset}
+          />
+        )}
+        <br />
+        {entities && !!entities.length && (
+          <div>
+            <DataTable
+              style={{ minHeight: 0, maxHeight: 200 }}
+              selectedIds={selectedAnnotationId}
+              maxHeight={300}
+              onRowSelect={onRowSelect}
+              formName="cutLocations"
+              isSingleSelect
+              compact
+              noRouter
+              minimalStyle
+              scrollToSelectedRowRelativeToDom
+              noHeader
+              isSimple
+              noFullscreenButton
+              isInfinite
+              withSearch={false}
+              withFilter={false}
+              schema={schema}
+              entities={entities}
+            />
+          </div>
+        )}
+        {aliases && aliases.length && (
+          <div style={{ marginTop: 10 }}>
+            Aliases:
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
+              {aliases.map((n, i) => {
+                return (
+                  <CutsiteTag
+                    allRestrictionEnzymes={allRestrictionEnzymes}
+                    cutsitesByNameActive={cutsitesByNameActive}
+                    cutsitesByName={allCutsites.cutsitesByName}
+                    key={i}
+                    name={n}
+                    doNotShowCuts
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// export default compose(
+//   withEditorProps,
+//   withRestrictionEnzymes
+// )(SingleEnzymeCutsiteInfo);

package/ToolBar/ToolbarItem.d.ts

@@ -6,9 +6,7 @@ export default _default;
 declare class ToolbarItem extends React.Component<any, any, any> {
     constructor(props: any);
     constructor(props: any, context: any);
-    toggleDropdown: ({ forceClose }?: {
-        forceClose: any;
-    }) => void;
+    toggleDropdown: ({ forceClose }?: {}) => void;
     render(): import("react/jsx-runtime").JSX.Element | null;
     dropdownNode: HTMLDivElement | undefined;
 }

package/ToolbarItem.js

@@ -0,0 +1,192 @@
+import { connectToEditor } from "../withEditorProps";
+// import download from 'in-browser-download'
+import {
+  Popover,
+  Position,
+  Tooltip,
+  Icon as BpIcon,
+  AnchorButton,
+  Intent
+} from "@blueprintjs/core";
+import React from "react";
+import "./style.css";
+import { noop } from "lodash-es";
+
+class ToolbarItem extends React.Component {
+  toggleDropdown = ({ forceClose } = {}) => {
+    const { toolName, isOpen } = this.props;
+
+    this.props.openToolbarItemUpdate(isOpen || forceClose ? "" : toolName);
+  };
+
+  render() {
+    const { overrides = {} } = this.props;
+    const {
+      isOpen,
+      index,
+      Icon,
+      // dynamicIcon,
+      onIconClick = noop,
+      tooltip = "",
+      tooltipToggled,
+      dropdowntooltip = "",
+      Dropdown,
+      disabled,
+      isHidden,
+      renderIconAbove,
+      noDropdownIcon,
+      IconWrapper,
+      editorName,
+      popoverDisabled,
+      IconWrapperProps,
+      toolName,
+      dropdownicon,
+      tooltipDisabled,
+      toggled = false,
+      ...rest
+    } = { ...this.props, ...overrides };
+    if (!toolName) console.warn("toolName is required!");
+    if (isHidden) return null;
+    let tooltipToDisplay = tooltip;
+    if (toggled && tooltipToggled) {
+      tooltipToDisplay = tooltipToggled;
+    }
+    // const Dropdown = _DropDown && withEditorProps && withEditorProps(_DropDown);
+
+    const buttonTarget = (
+      <div
+        className={
+          `veToolbarItemOuter ve-tool-container-${toolName}` +
+          (disabled ? " disabled " : "")
+        }
+      >
+        {renderIconAbove && (
+          <div>
+            <div className="veToolbarItem">{Icon}</div>
+          </div>
+        )}
+
+        {Icon && !renderIconAbove && (
+          <Tooltip
+            disabled={tooltipDisabled}
+            portalClassName="ve-toolbar-item-popover"
+            content={tooltipToDisplay}
+          >
+            <AnchorButton
+              intent={Intent.PRIMARY}
+              onClick={
+                onIconClick === "toggleDropdown"
+                  ? this.toggleDropdown
+                  : onIconClick
+              }
+              active={toggled}
+              disabled={disabled}
+              minimal
+              icon={
+                React.isValidElement(Icon) ? (
+                  Icon
+                ) : (
+                  <Icon toggleDropdown={this.toggleDropdown} />
+                )
+              }
+            />
+          </Tooltip>
+        )}
+        {Dropdown && !noDropdownIcon ? (
+          <Tooltip disabled={tooltipDisabled} content={dropdowntooltip}>
+            <div
+              className={
+                (isOpen ? " isOpen " : "") +
+                (dropdownicon ? "" : " veToolbarDropdown")
+              }
+              onClick={this.toggleDropdown}
+            >
+              {dropdownicon ? (
+                <div className="veToolbarIcon">
+                  <div>{dropdownicon}</div>
+                </div>
+              ) : isOpen ? (
+                <BpIcon
+                  data-test={toolName + "Dropdown"}
+                  iconSize={13}
+                  icon="caret-up"
+                />
+              ) : (
+                <BpIcon
+                  data-test={toolName + "Dropdown"}
+                  iconSize={13}
+                  icon="caret-down"
+                />
+              )}
+            </div>
+          </Tooltip>
+        ) : null}
+      </div>
+    );
+    const content = (
+      <div
+        ref={n => {
+          if (n) this.dropdownNode = n;
+        }}
+        style={{ padding: 10, minWidth: 250, maxWidth: 350 }}
+        className="ve-toolbar-dropdown content"
+      >
+        {Dropdown && (
+          <Dropdown
+            {...rest}
+            editorName={editorName}
+            toggleDropdown={this.toggleDropdown}
+          />
+        )}
+      </div>
+    );
+    const target = IconWrapper ? (
+      <IconWrapper {...IconWrapperProps}>
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
+            <input {...getInputProps()} />
+            {buttonTarget}
+          </div>
+        )}
+      </IconWrapper>
+    ) : (
+      buttonTarget
+    );
+
+    return (
+      <div style={{ display: "flex", alignItems: "center" }}>
+        {index !== 0 && <div className="veToolbarSpacer" />}
+
+        <Popover
+          disabled={popoverDisabled}
+          isOpen={!!Dropdown && isOpen}
+          onClose={e => {
+            let srcElement;
+            if (e) {
+              srcElement = e.srcElement || e.target;
+            }
+            if (
+              e &&
+              srcElement &&
+              this.dropdownNode &&
+              (this.dropdownNode.contains(srcElement) ||
+                !document.body.contains(srcElement))
+            ) {
+              return;
+            }
+            this.toggleDropdown({ forceClose: true });
+          }}
+          canEscapeKeyClose
+          minimal
+          position={Position.BOTTOM}
+          target={target}
+          content={content}
+        />
+      </div>
+    );
+  }
+}
+
+export default connectToEditor(({ toolBar = {} }, { toolName }) => ({
+  isOpen: toolBar.openItem === toolName
+}))(ToolbarItem);

package/Translation.js

@@ -0,0 +1,198 @@
+import React from "react";
+import {
+  getSequenceWithinRange,
+  zeroSubrangeByContainerRange
+} from "@teselagen/range-utils";
+import AASliver from "./AASliver";
+import pureNoFunc from "../../utils/pureNoFunc";
+import { proteinAlphabet } from "@teselagen/sequence-utils";
+
+class Translation extends React.Component {
+  state = {
+    hasMounted: false
+  };
+  componentDidMount() {
+    this.timeout = setTimeout(() => {
+      this.setState({
+        hasMounted: true
+      });
+    }, 5);
+  }
+  componentWillUnmount() {
+    !window.Cypress && clearTimeout(this.timeout);
+  }
+  render() {
+    const {
+      annotationRange,
+      height,
+      showAminoAcidNumbers,
+      charWidth,
+      aminoAcidNumbersHeight,
+      onClick,
+      onRightClick,
+      onDoubleClick,
+      sequenceLength,
+      getGaps,
+      colorType,
+      isProtein
+    } = this.props;
+    const { hasMounted } = this.state;
+    const { annotation } = annotationRange;
+    if (!hasMounted && !isProtein) {
+      return <g height={height} className="translationLayer" />;
+    }
+    //we have an amino acid representation of our entire annotation, but it is an array
+    //starting at 0, even if the annotation starts at some arbitrary point in the sequence
+    const { aminoAcids = [] } = annotation;
+    //so we "zero" our subRange by the annotation start
+    const subrangeStartRelativeToAnnotationStart = zeroSubrangeByContainerRange(
+      annotationRange,
+      annotation,
+      sequenceLength
+    );
+    //which allows us to then get the amino acids for the subRange
+    const aminoAcidsForSubrange = getSequenceWithinRange(
+      subrangeStartRelativeToAnnotationStart,
+      aminoAcids
+    );
+
+    //we then loop over all the amino acids in the sub range and draw them onto the row
+    let prevAaSliver;
+    let nextAaSliver = aminoAcidsForSubrange[1];
+    // The last index in the sequence
+    const lastIndex = aminoAcidsForSubrange.length - 1;
+
+    const translationSVG = aminoAcidsForSubrange.map(
+      function (aminoAcidSliver, index) {
+        if (aminoAcidSliver.positionInCodon === null) {
+          prevAaSliver = aminoAcidSliver;
+          nextAaSliver = aminoAcidsForSubrange[index + 2];
+          return (
+            <rect
+              key={annotation.id + aminoAcidSliver.sequenceIndex}
+              x={index * charWidth}
+              y={height / 2 - height / 16}
+              width={charWidth}
+              height={height / 8}
+              fill="grey"
+              stroke="black"
+              strokeWidth={1}
+            ></rect>
+          );
+        }
+        const isEndFiller =
+          (index === 0 || prevAaSliver?.positionInCodon === null) &&
+          aminoAcidSliver.positionInCodon === (annotation.forward ? 2 : 0);
+
+        const isStartFiller =
+          (index === lastIndex || nextAaSliver?.positionInCodon === null) &&
+          aminoAcidSliver.positionInCodon === (annotation.forward ? 0 : 2);
+
+        let isTruncatedEnd =
+          (index === 0 || prevAaSliver?.positionInCodon === null) &&
+          aminoAcidSliver.positionInCodon === 1;
+        let isTruncatedStart =
+          (index === lastIndex || nextAaSliver?.positionInCodon === null) &&
+          aminoAcidSliver.positionInCodon === 1;
+
+        if (!annotation.forward) {
+          const holder = isTruncatedEnd;
+          isTruncatedEnd = isTruncatedStart;
+          isTruncatedStart = holder;
+        }
+        if (
+          aminoAcidSliver.positionInCodon !== 1 &&
+          !isStartFiller &&
+          !isEndFiller
+        ) {
+          prevAaSliver = aminoAcidSliver;
+          nextAaSliver = aminoAcidsForSubrange[index + 2];
+          return null;
+        }
+        const { gapsInside, gapsBefore } = getGaps(aminoAcidSliver.codonRange);
+        const gapsInsideFeatureStartToBp = getGaps({
+          start: annotationRange.start,
+          end: aminoAcidSliver.sequenceIndex
+        }).gapsInside;
+        // var relativeAAPositionInTranslation = annotationRange.start % bpsPerRow + index;
+        const relativeAAPositionInTranslation = index;
+        const aminoAcid = aminoAcidSliver.aminoAcid || {};
+        //get the codonIndices relative to
+        const alphVal = proteinAlphabet[aminoAcid.value];
+        let color;
+        if (alphVal) {
+          color =
+            colorType === "byHydrophobicity"
+              ? alphVal.color
+              : alphVal.colorByFamily;
+        } else {
+          color = aminoAcid.color;
+        }
+        prevAaSliver = aminoAcidSliver;
+        nextAaSliver = aminoAcidsForSubrange[index + 2];
+
+        return (
+          <AASliver
+            // isTruncatedEnd && isTruncatedStart is the special case of a single base exon
+            isFiller={
+              isEndFiller ||
+              isStartFiller ||
+              (isTruncatedEnd && isTruncatedStart)
+            }
+            isTruncatedEnd={isTruncatedEnd}
+            isTruncatedStart={isTruncatedStart}
+            onClick={function (event) {
+              onClick({
+                annotation: aminoAcidSliver.codonRange,
+                codonRange: aminoAcidSliver.codonRange,
+                event,
+                gapsInside,
+                gapsBefore
+              });
+            }}
+            onContextMenu={function (event) {
+              onRightClick &&
+                onRightClick({
+                  annotation,
+                  codonRange: aminoAcidSliver.codonRange,
+                  event,
+                  gapsInside,
+                  gapsBefore
+                });
+            }}
+            title={`${aminoAcid.name} -- Index: ${
+              aminoAcidSliver.aminoAcidIndex + 1
+            } -- Hydrophobicity: ${aminoAcid.hydrophobicity} -- Mass: ${
+              aminoAcid.mass
+            }\n 
+Part of ${annotation.translationType} Translation from BPs ${
+              annotation.start + 1
+            } to ${annotation.end + 1} (${aminoAcids.length / 3} AAs)`}
+            showAminoAcidNumbers={showAminoAcidNumbers}
+            aminoAcidIndex={aminoAcidSliver.aminoAcidIndex}
+            onDoubleClick={function (event) {
+              onDoubleClick({ annotation, event });
+            }}
+            getGaps={getGaps}
+            key={annotation.id + aminoAcidSliver.sequenceIndex}
+            forward={annotation.forward}
+            width={charWidth}
+            height={
+              showAminoAcidNumbers ? height - aminoAcidNumbersHeight : height
+            }
+            relativeAAPositionInTranslation={
+              relativeAAPositionInTranslation + gapsInsideFeatureStartToBp
+            }
+            letter={aminoAcid.value}
+            color={color}
+            positionInCodon={aminoAcidSliver.positionInCodon}
+          />
+        );
+      }
+    );
+
+    return <g className="translationLayer">{translationSVG}</g>;
+  }
+}
+
+export default pureNoFunc(Translation);

package/TranslationProperties.js

@@ -0,0 +1,149 @@
+import { Tooltip, AnchorButton } from "@blueprintjs/core";
+import React from "react";
+import {
+  DataTable,
+  withSelectedEntities,
+  createCommandMenu
+} from "@teselagen/ui";
+import getCommands from "../../commands";
+import { map } from "lodash-es";
+import { getRangeLength } from "@teselagen/range-utils";
+import { connectToEditor } from "../../withEditorProps";
+import { compose } from "recompose";
+import selectors from "../../selectors";
+import { getMassOfAaString } from "@teselagen/sequence-utils";
+import { translationsSubmenu } from "../../MenuBar/viewSubmenu";
+import { getVisFilter } from "./GenericAnnotationProperties";
+
+class TranslationProperties extends React.Component {
+  constructor(props) {
+    super(props);
+    this.commands = getCommands(this);
+  }
+  onRowSelect = ([record]) => {
+    if (!record) return;
+    const { dispatch, editorName } = this.props;
+    dispatch({
+      type: "SELECTION_LAYER_UPDATE",
+      payload: record,
+      meta: {
+        editorName
+      }
+    });
+  };
+  render() {
+    const {
+      readOnly,
+      translations,
+      translationPropertiesSelectedEntities,
+      deleteTranslation,
+      sequenceLength,
+      selectedAnnotationId,
+      annotationVisibility
+    } = this.props;
+    const translationsToUse = map(translations, translation => {
+      let aaString = "";
+      for (let i = 0; i < translation.aminoAcids.length; i++) {
+        aaString += translation.aminoAcids[i].aminoAcid.value;
+      }
+      return {
+        ...translation,
+        sizeBps: getRangeLength(translation, sequenceLength),
+        sizeAa:
+          translation.translationType === "ORF"
+            ? Math.floor(getRangeLength(translation, sequenceLength) / 3 - 1)
+            : Math.floor(getRangeLength(translation, sequenceLength) / 3),
+        ...(translation.strand === undefined && {
+          strand: translation.forward ? 1 : -1
+        }),
+        mass: getMassOfAaString(aaString, 2, true)
+      };
+    });
+    return (
+      <div style={{ display: "flex", flexDirection: "column" }}>
+        <DataTable
+          withCheckboxes
+          noPadding
+          onRowSelect={this.onRowSelect}
+          selectedIds={selectedAnnotationId}
+          formName="translationProperties"
+          noRouter
+          compact
+          topLeftItems={getVisFilter(
+            createCommandMenu(translationsSubmenu, this.commands, {
+              useTicks: true
+            })
+          )}
+          leftOfSearchBarItems={
+            !readOnly && (
+              <Tooltip
+                content={
+                  translationPropertiesSelectedEntities.length &&
+                  translationPropertiesSelectedEntities[0].translationType !==
+                    "User Created"
+                    ? `Only "User Created" translations can be deleted`
+                    : undefined
+                }
+              >
+                <AnchorButton
+                  onClick={() => {
+                    deleteTranslation(translationPropertiesSelectedEntities);
+                  }}
+                  intent="danger"
+                  icon="trash"
+                  style={{ marginLeft: 10, marginRight: 15, height: 30 }}
+                  disabled={
+                    !translationPropertiesSelectedEntities.length ||
+                    translationPropertiesSelectedEntities[0].translationType !==
+                      "User Created"
+                  }
+                ></AnchorButton>
+              </Tooltip>
+            )
+          }
+          annotationVisibility={annotationVisibility} //we need to pass this in order to force the DT to rerender
+          hideSelectedCount
+          noFooter
+          noFullscreenButton
+          isInfinite
+          schema={{
+            fields: [
+              {
+                path: "translationType",
+                displayName: "Type",
+                type: "string"
+              },
+              {
+                path: "sizeAa",
+                displayName: "Size (aa)",
+                type: "number"
+              },
+              {
+                path: "mass",
+                displayName: "Mass (g/mol)",
+                type: "number"
+              },
+              { path: "strand", type: "number" }
+            ]
+          }}
+          entities={translationsToUse}
+        />
+      </div>
+    );
+  }
+}
+
+export default compose(
+  connectToEditor(editorState => {
+    const { readOnly, annotationVisibility = {}, sequenceData } = editorState;
+    return {
+      readOnly,
+      translations: selectors.translationsSelector(editorState),
+      orfs: selectors.orfsSelector(editorState),
+      annotationVisibility,
+      sequenceLength: (sequenceData.sequence || "").length,
+      sequenceData
+    };
+  }),
+  withSelectedEntities("translationProperties")
+)(TranslationProperties);

package/UncontrolledSliderWithPlusMinusBtns.css

@@ -0,0 +1,5 @@
+.small-slider .bp3-slider-handle {
+  width: 12px;
+  height: 12px;
+  top: 2px;
+}