@teselagen/ove 0.7.28 → 0.7.30-beta.1

package/drawAnnotations.js

@@ -1,440 +0,0 @@
-import React from "react";
-import IntervalTree from "node-interval-tree";
-import { sortBy, noop } from "lodash-es";
-import { getRangeLength } from "@teselagen/range-utils";
-import getRangeAngles from "./getRangeAnglesSpecial";
-import getYOffset from "./getYOffset";
-import withHover from "../helperComponents/withHover";
-import PositionAnnotationOnCircle from "./PositionAnnotationOnCircle";
-import getAnnotationNameAndStartStopString from "../utils/getAnnotationNameAndStartStopString";
-import Feature from "./Feature";
-import getAnnotationClassnames from "../utils/getAnnotationClassnames";
-// import { normalizeAngleRange } from "./normalizeAngleRange";
-// import { normalizeAngle } from "./normalizeAngle";
-
-//annotations coming in can be positioned either by caretPosition or range
-function drawAnnotations(props) {
-  const {
-    readOnly,
-    annotationType,
-    radius,
-    noHover,
-    isProtein,
-    type,
-    annotations,
-    annotationHeight,
-    noTitle,
-    spaceBetweenAnnotations,
-    sequenceLength,
-    showCicularViewInternalLabels,
-    // reverseAnnotations, //set true when drawing annotations that use the drawDirectedPiePiece function because that function returns things that need to be flipped
-    // editorName,
-    getColor,
-    useStartAngle, //use the startAngle instead of the centerAngle to position the labels
-    onClick = noop,
-    noHeight,
-    positionBy, //by default the annotation.start and annotation.end are used to position the annotation on the circle, but passing a function here gives an option to override that
-    allOnSameLevel, //by default overlapping annotations are given different yOffsets. Setting this to true prevents that and positions all annotations on the same level (no y-offsets given). Cutsites for example just get drawn all on the same level
-    onRightClicked = noop,
-    onDoubleClick = noop,
-    showLabels,
-    hideAnnotation,
-    // rotationRadians,
-    labelOptions,
-    annotationProps,
-    fontStyle
-    // isZoomedIn,
-    // visibleAngleRange
-  } = props;
-  const totalAnnotationHeight = annotationHeight + spaceBetweenAnnotations;
-  const featureITree = new IntervalTree();
-  let maxYOffset = 0;
-  const svgGroup = [];
-  const labels = {};
-
-  if (!Object.keys(annotations).length) return null;
-  sortBy(annotations, a => {
-    return -getRangeLength(a, sequenceLength);
-  })
-    .map(annotation => {
-      const { startAngle, endAngle, totalAngle, centerAngle, locationAngles } =
-        getRangeAngles(
-          positionBy ? positionBy(annotation) : annotation,
-          sequenceLength
-        );
-      const spansOrigin = startAngle > endAngle;
-      const annotationCopy = {
-        ...annotation,
-        startAngle,
-        endAngle,
-        locationAngles,
-        totalAngle,
-        centerAngle,
-        yOffset: 0
-      };
-      if (!allOnSameLevel) {
-        //expand the end angle if annotation spans the origin
-        const expandedEndAngle = spansOrigin
-          ? endAngle + 2 * Math.PI
-          : endAngle;
-        let yOffset1;
-        let yOffset2;
-        if (spansOrigin) {
-          annotationCopy.yOffset = getYOffset(
-            featureITree,
-            startAngle,
-            expandedEndAngle
-          );
-        } else {
-          //we need to check both locations to account for annotations that span the origin
-          yOffset1 = getYOffset(featureITree, startAngle, expandedEndAngle);
-          yOffset2 = getYOffset(
-            featureITree,
-            startAngle + Math.PI * 2,
-            expandedEndAngle + Math.PI * 2
-          );
-          annotationCopy.yOffset = Math.max(yOffset1, yOffset2);
-        }
-
-        if (spansOrigin) {
-          featureITree.insert(startAngle, expandedEndAngle, {
-            ...annotationCopy
-          });
-        } else {
-          //normal feature
-          // we need to add it twice to the interval tree to accomodate features which span the origin
-          featureITree.insert(startAngle, expandedEndAngle, {
-            ...annotationCopy
-          });
-          featureITree.insert(
-            startAngle + 2 * Math.PI,
-            expandedEndAngle + 2 * Math.PI,
-
-            { ...annotationCopy }
-          );
-        }
-
-        if (annotationCopy.yOffset > maxYOffset) {
-          maxYOffset = annotationCopy.yOffset;
-        }
-      }
-
-      return annotationCopy;
-    })
-    .forEach(function (annotation, index) {
-      annotation.yOffset = maxYOffset - annotation.yOffset;
-      function _onClick(event) {
-        onClick && onClick({ event, annotation });
-        annotation.onClick && annotation.onClick({ event, annotation });
-      }
-      function onContextMenu(event) {
-        onRightClicked({ event, annotation });
-        if (annotation.onRightClick) {
-          annotation.onRightClick({ event, annotation });
-        }
-      }
-      function _onDoubleClick(event) {
-        onDoubleClick && onDoubleClick({ event, annotation });
-        if (annotation.onDoubleClick) {
-          annotation.onDoubleClick({ event, annotation });
-        }
-      }
-
-      const {
-        startAngle,
-        endAngle,
-        totalAngle,
-        centerAngle,
-        locationAngles,
-        ...rest
-      } = annotation;
-
-      const _annotationProps = {
-        ...annotationProps,
-        ...rest
-      };
-
-      const titleText = getAnnotationNameAndStartStopString(annotation, {
-        isProtein,
-        readOnly
-      });
-
-      const classNames = getAnnotationClassnames(annotation, {
-        viewName: "CircularView",
-        type,
-        isProtein,
-        readOnly
-      });
-
-      const annotationRadius =
-        radius + annotation.yOffset * totalAnnotationHeight;
-      const name =
-        annotation.name ||
-        (annotation.restrictionEnzyme && annotation.restrictionEnzyme.name);
-      let ellipsizedName;
-      // let spaceBeforeName = 0;
-      let angleAdjust;
-
-      if (name && showCicularViewInternalLabels) {
-        // eslint-disable-next-line no-inner-declarations
-        function getEllipsizedName(totalAngle) {
-          let ellipsizedName;
-          const arcLength =
-            2 * Math.PI * (annotationRadius - annotationHeight) * totalAngle; //for arrowhead
-
-          const annLength = Math.max(0, Math.floor(arcLength / 55 - 3));
-          ellipsizedName = name.slice(0, annLength);
-          if (ellipsizedName && ellipsizedName !== name) {
-            if (ellipsizedName.length >= name.length - 2) {
-              ellipsizedName = name;
-            } else if (ellipsizedName.length > 3) {
-              ellipsizedName += "..";
-            } else {
-              ellipsizedName = undefined;
-            }
-          }
-          return ellipsizedName;
-        }
-        if (locationAngles) {
-          annotation.locationAngles = locationAngles.map(l => {
-            const en = getEllipsizedName(l.totalAngle);
-            if (en?.length > (ellipsizedName?.length || 0)) {
-              ellipsizedName = en;
-            }
-            return {
-              ...l,
-              ellipsizedName: en
-            };
-          });
-        } else {
-          ellipsizedName = getEllipsizedName(totalAngle);
-        }
-
-        // //tnr: WIP to try to adjust the inline label in the circular view to always show up even when zoomed in
-        // if (ellipsizedName && isZoomedIn) {
-        //   const nameAngle =
-        //     ((ellipsizedName.length + 3) * 55) /
-        //     (2 * Math.PI * (annotationRadius - annotationHeight));
-        //   const maxAngleAdjust = (totalAngle - nameAngle) / 2;
-        //   const idealAngle = normalizeAngle(
-        //     -normalizeAngle(rotationRadians) - normalizeAngle(centerAngle)
-        //   );
-        //   angleAdjust = idealAngle;
-        //   if (
-        //     Math.min(maxAngleAdjust, idealAngle) !== idealAngle
-        //     // &&
-        //     // Math.min(maxAngleAdjust, 2 * Math.PI - idealAngle) !==
-        //     //   2 * Math.PI - idealAngle
-        //   ) {
-        //     angleAdjust = -maxAngleAdjust;
-        //     if (
-        //       normalizeAngle(
-        //         normalizeAngle(centerAngle) + normalizeAngle(rotationRadians)
-        //       ) > Math.PI
-        //     ) {
-        //       angleAdjust = -angleAdjust;
-        //     }
-        //   }
-        //   // angleAdjust =idealAngle
-        //   angleAdjust = (angleAdjust / Math.PI) * 180;
-        //   // if (normalizeAngle(normalizeAngle(centerAngle) + normalizeAngle(rotationRadians)) > Math.PI) {
-        //   //   angleAdjust = -angleAdjust;
-        //   // }
-        // }
-      }
-      if (showLabels && !ellipsizedName) {
-        //add labels to the exported label array (to be drawn by the label component)
-        labels[annotation.id] = {
-          annotation,
-          annotationType,
-          annotationCenterAngle: useStartAngle ? startAngle : centerAngle,
-          annotationCenterRadius: annotationRadius,
-          text: name,
-          id: annotation.id,
-          title: titleText,
-          className: `${classNames} ${annotation.labelClassName || ""}`,
-          highPriorityLabel: annotation.highPriorityLabel,
-          onClick: _onClick,
-          onDoubleClick: _onDoubleClick,
-          fontStyle: fontStyle || "normal",
-          color:
-            annotation.labelColor ||
-            (annotationType === "part" ? "#ac68cc" : "black"),
-          onContextMenu,
-          ...labelOptions
-        };
-      }
-      if (!hideAnnotation) {
-        const annotationColor = getColor
-          ? getColor(annotation)
-          : annotation.color || "#ac68cc";
-        DrawAnnotation.displayName = annotationType + "--- DrawAnnotation";
-        const CompToUse = noHover ? DrawAnnotationInner : DrawAnnotation;
-        svgGroup.push(
-          <CompToUse
-            {...{
-              ...props,
-              ...rest,
-              ...annotation,
-              angleAdjust,
-              ellipsizedName,
-              name,
-              annotationHeight,
-              annotationRadius,
-              annotationType,
-              isProtein,
-              noTitle,
-              titleText,
-              classNames,
-              onClick: _onClick,
-              onDoubleClick: _onDoubleClick,
-              onContextMenu,
-              annotation,
-              annotationColor,
-              totalAngle,
-              centerAngle,
-              annotationProps: _annotationProps
-            }}
-            id={annotation.id}
-            key={"veAnnotation-" + annotationType + index}
-          />
-        );
-      }
-    });
-  return {
-    component: (
-      <g
-        className={"veAnnotations-" + annotationType}
-        key={"veAnnotations-" + annotationType}
-      >
-        {svgGroup}
-      </g>
-    ),
-    height: noHeight
-      ? 0
-      : maxYOffset * totalAnnotationHeight + 0.5 * annotationHeight,
-    labels
-  };
-}
-
-export default drawAnnotations;
-
-function DrawAnnotationInner({
-  className,
-  startAngle,
-  endAngle,
-  onClick,
-  onDoubleClick,
-  onContextMenu,
-  titleText,
-  classNames,
-  locationAngles,
-  annotation,
-  reverseAnnotations,
-  Annotation = Feature,
-  totalAngle,
-  annotationColor,
-  isProtein,
-  annotationRadius,
-  annotationHeight,
-  onMouseLeave,
-  onMouseOver,
-  annotationType,
-  annotationProps,
-  addHeight,
-  noTitle,
-  useCenter,
-  centerAngle,
-  perAnnotationProps,
-  passAnnotation,
-  ellipsizedName,
-  angleAdjust,
-  rotationRadians
-}) {
-  const sharedProps = {
-    style: noTitle ? undefined : { cursor: "pointer" },
-    className: `${className} ${classNames}`,
-    onContextMenu: onContextMenu,
-    onClick: onClick,
-    onDoubleClick: onDoubleClick,
-    onMouseLeave,
-    onMouseOver
-  };
-  function getInner(
-    {
-      startAngle,
-      endAngle,
-      totalAngle,
-      isNotLocation,
-      containsLocations,
-      ellipsizedName: ellipsizedNameLocation
-    },
-    i
-  ) {
-    const { transform, revTransform } = PositionAnnotationOnCircle({
-      sAngle: useCenter ? centerAngle : startAngle,
-      eAngle: useCenter ? centerAngle : endAngle,
-      height: addHeight ? annotationRadius : undefined,
-      forward: reverseAnnotations ? !annotation.forward : annotation.forward
-    });
-    return (
-      <g
-        transform={transform}
-        data-title={noTitle ? null : titleText}
-        {...avoidOverlapWith}
-        key={
-          isNotLocation
-            ? "notLocation"
-            : "location--" + annotation.id + "--" + i
-        }
-        {...sharedProps}
-      >
-        {noTitle ? null : (
-          <g hidden style={{ display: "none" }}>
-            {titleText}
-          </g>
-        )}
-        <Annotation
-          {...(passAnnotation && { annotation })}
-          annotationType={annotationType}
-          arrowheadType={annotation.arrowheadType}
-          totalAngle={totalAngle}
-          centerAngle={centerAngle}
-          revTransform={revTransform}
-          rotationRadians={rotationRadians}
-          ellipsizedName={
-            containsLocations ? ellipsizedNameLocation : ellipsizedName
-          }
-          locationNumber={i}
-          angleAdjust={angleAdjust}
-          color={annotationColor}
-          isProtein={isProtein}
-          containsLocations={containsLocations}
-          radius={annotationRadius}
-          annotationHeight={annotationHeight}
-          {...annotationProps}
-          {...(perAnnotationProps && perAnnotationProps(annotation))}
-        />
-      </g>
-    );
-  }
-  return (
-    <React.Fragment>
-      {getInner({
-        startAngle,
-        endAngle,
-        totalAngle,
-        centerAngle,
-        containsLocations: !!locationAngles
-      })}
-      {locationAngles && locationAngles.map(getInner)}
-    </React.Fragment>
-  );
-}
-
-const DrawAnnotation = withHover(DrawAnnotationInner);
-
-export const avoidOverlapWith = {
-  "data-avoid": ".topLevelLabelGroup",
-  "data-avoid-backup": ".veLabel.veAnnotationHovered"
-};

package/drawDirectedPiePiece.js

@@ -1,142 +0,0 @@
-import Path from "paths-js/path";
-function polarToSpecialCartesian(radius, angleInRadians) {
-  //the 0 angle returns the 0,1 point on the unit circle instead of the 1,0 point like normal
-  return {
-    x: radius * Math.cos(angleInRadians - Math.PI / 2),
-    y: radius * Math.sin(angleInRadians - Math.PI / 2)
-  };
-}
-const stickOutThisMuch = 0.03;
-
-// draws a directed piece of the pie with an arrowhead, starts at 0 angle, only draws in one direction (use transforms to move it around the )
-export default function drawDirectedPiePiece({
-  tailThickness = 0.6,
-  // arrowheadLength = 1,
-  radius,
-  arrowheadType,
-  overlapsSelf,
-  annotationHeight,
-  totalAngle,
-  hasLabel,
-  labelNeedsFlip,
-  returnTextPath
-}) {
-  const tailHeight = annotationHeight * tailThickness;
-
-  const arrowheadOuterRadius = radius + annotationHeight / 2;
-  const arrowheadInnerRadius = radius - annotationHeight / 2;
-  const tailOuterRadius = radius + tailHeight / 2;
-  const tailInnerRadius = radius - tailHeight / 2;
-
-  // var arrowheadAngle = totalAngle / 2
-  let arrowheadAngle = 80 / radius / (Math.PI * 2);
-
-  if (totalAngle < arrowheadAngle) {
-    //set arrowhead length to the angle in radians length
-    arrowheadAngle = totalAngle;
-  }
-
-  if (arrowheadType === "NONE") arrowheadAngle = 0;
-  const arcAngle = totalAngle - arrowheadAngle;
-
-  //the main points we need to draw the arrow and in the order we draw them in:
-  const arrowheadPoint = polarToSpecialCartesian(radius, 0);
-
-  const arrowheadBottom = polarToSpecialCartesian(
-    arrowheadInnerRadius,
-    arrowheadAngle
-  );
-  const arcLeftBottom = polarToSpecialCartesian(
-    tailInnerRadius,
-    arrowheadAngle
-  );
-  const arcRightBottom = polarToSpecialCartesian(tailInnerRadius, totalAngle);
-  const arcRightTop = polarToSpecialCartesian(tailOuterRadius, totalAngle);
-  const arcRightMiddle = polarToSpecialCartesian(radius, totalAngle);
-  const arcRightMiddleOuter = polarToSpecialCartesian(
-    radius,
-    totalAngle + stickOutThisMuch
-  );
-  const arcLeftTop = polarToSpecialCartesian(tailOuterRadius, arrowheadAngle);
-  const arrowheadTop = polarToSpecialCartesian(
-    arrowheadOuterRadius,
-    arrowheadAngle
-  );
-
-  const largeArcFlag = arcAngle > Math.PI ? 1 : 0;
-  let path = Path().moveto(arrowheadPoint.x, arrowheadPoint.y);
-
-  if (overlapsSelf) {
-    const arrowheadPointInner = polarToSpecialCartesian(
-      radius,
-      -stickOutThisMuch
-    );
-    path = path
-      .lineto(arrowheadPointInner.x, arrowheadPointInner.y)
-      .lineto(arrowheadPoint.x, arrowheadPoint.y);
-  }
-
-  path = path
-    .lineto(arrowheadBottom.x, arrowheadBottom.y)
-    .lineto(arcLeftBottom.x, arcLeftBottom.y)
-    .arc({
-      rx: tailInnerRadius,
-      ry: tailInnerRadius,
-      xrot: 0,
-      largeArcFlag,
-      sweepFlag: 1,
-      x: arcRightBottom.x,
-      y: arcRightBottom.y
-    });
-
-  if (overlapsSelf) {
-    path = path
-      .lineto(arcRightMiddle.x, arcRightMiddle.y)
-      .lineto(arcRightMiddleOuter.x, arcRightMiddleOuter.y)
-      .lineto(arcRightMiddle.x, arcRightMiddle.y);
-  }
-  let textPath;
-  if (returnTextPath && hasLabel) {
-    if (labelNeedsFlip) {
-      const arcLeftTop = polarToSpecialCartesian(tailOuterRadius, 0);
-      textPath = Path().moveto(arcRightTop.x, arcRightTop.y).arc({
-        rx: tailOuterRadius,
-        ry: tailOuterRadius,
-        xrot: 0,
-        largeArcFlag,
-        sweepFlag: 0,
-        x: arcLeftTop.x,
-        y: arcLeftTop.y
-      });
-    } else {
-      const arcLeftBottom = polarToSpecialCartesian(tailInnerRadius, 0);
-      textPath = Path().moveto(arcLeftBottom.x, arcLeftBottom.y).arc({
-        rx: tailInnerRadius,
-        ry: tailInnerRadius,
-        xrot: 0,
-        largeArcFlag,
-        sweepFlag: 1,
-        x: arcRightBottom.x,
-        y: arcRightBottom.y
-      });
-    }
-  }
-  path = path
-
-    .lineto(arcRightTop.x, arcRightTop.y)
-    .arc({
-      rx: tailOuterRadius,
-      ry: tailOuterRadius,
-      xrot: 0,
-      largeArcFlag,
-      sweepFlag: 0,
-      x: arcLeftTop.x,
-      y: arcLeftTop.y
-    })
-    .lineto(arrowheadTop.x, arrowheadTop.y)
-    .closepath();
-  if (returnTextPath) {
-    return [path, textPath];
-  }
-  return path;
-}

package/editTool.js

@@ -1,49 +0,0 @@
-import React, { useState } from "react";
-import { Icon } from "@blueprintjs/core";
-import ToolbarItem from "./ToolbarItem";
-import { connectToEditor } from "../withEditorProps";
-
-export default connectToEditor(editorState => {
-  return {
-    readOnly: editorState.readOnly
-  };
-})(props => {
-  const { toolbarItemProps, readOnly, disableSetReadOnly } = props;
-  const [isLoading, setIsLoading] = useState(false);
-  const readOnlyTooltip = ({ readOnly, disableSetReadOnly }) => {
-    if (isLoading) {
-      return "Loading...";
-    } else if (disableSetReadOnly) {
-      return "You do not have permission to edit locks on this sequence";
-    }
-    return readOnly ? "Click to enable editing" : "Click to disable editing";
-  };
-  return (
-    <ToolbarItem
-      {...{
-        disabled: isLoading || disableSetReadOnly,
-        Icon: <Icon icon={readOnly ? "lock" : "unlock"} />,
-        onIconClick: () =>
-          handleReadOnlyChange(!readOnly, { ...props, setIsLoading }),
-        tooltip: readOnlyTooltip({ readOnly, disableSetReadOnly }),
-        ...toolbarItemProps
-      }}
-    />
-  );
-});
-
-export async function handleReadOnlyChange(
-  newVal,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  { beforeReadOnlyChange, updateReadOnlyMode, setIsLoading = () => {} }
-) {
-  if (beforeReadOnlyChange) {
-    setIsLoading(true);
-    const shouldChange = await beforeReadOnlyChange(newVal);
-    setIsLoading(false);
-    if (shouldChange === false) {
-      return;
-    }
-  }
-  updateReadOnlyMode(newVal);
-}

package/editorSelector.js

@@ -1,2 +0,0 @@
-const sequenceDataSelector = state => state.sequenceData;
-export default sequenceDataSelector;