@teselagen/ove 0.7.27 → 0.7.28

package/drawAnnotations.js

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

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

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

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