@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/SingleEnzymeCutsiteInfo.js

@@ -1,139 +0,0 @@
-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/ToolbarItem.js

@@ -1,192 +0,0 @@
-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

@@ -1,198 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

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