@teselagen/ove 0.0.13 → 0.0.15

package/src/CircularView/drawAnnotations.js

@@ -0,0 +1,433 @@
+import React from "react";
+import IntervalTree from "node-interval-tree";
+import { sortBy, noop } from "lodash";
+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
+  };
+  const title = <title>{titleText}</title>;
+  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}
+        key={
+          isNotLocation
+            ? "notLocation"
+            : "location--" + annotation.id + "--" + i
+        }
+        // {...(ellipsizedName && ellipsizedName !== name
+        //   ? { "data-tip": name }
+        //   : {})}
+        {...sharedProps}
+      >
+        {noTitle ? null : title}
+        <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);

package/src/CircularView/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/src/CircularView/getAngleForPositionMidpoint.js

@@ -0,0 +1,3 @@
+export default function getAngleForPositionMidpoint(position, maxLength) {
+  return maxLength === 0 ? 0 : (position + 0.5) / maxLength * Math.PI * 2;
+}

package/src/CircularView/getInternalLabel.js

@@ -0,0 +1,40 @@
+import Color from "color";
+import React from "react";
+
+export function getInternalLabel({
+  ellipsizedName,
+  id,
+  annotationType,
+  revTransform,
+  angleAdjust,
+  isPart,
+  colorToUse,
+  textPath,
+  locationNumber
+}) {
+  if (!ellipsizedName) return null;
+  const pathId = `${annotationType}${id}${locationNumber ?? ""}`;
+  return (
+    <>
+      <path id={pathId} fill="none" d={textPath.print()}></path>
+      <text
+        className="veLabelText veCircularViewInternalLabelText ve-monospace-font"
+        transform={
+          (revTransform || "") + (angleAdjust ? ` rotate(${angleAdjust})` : "")
+        }
+        fill={
+          isPart ? "#ac68cc" : Color(colorToUse).isDark() ? "white" : "black"
+        }
+        dy={-3}
+      >
+        <textPath
+          textAnchor="middle"
+          startOffset="50%"
+          xlinkHref={`#${pathId}`}
+        >
+          {ellipsizedName}
+        </textPath>
+      </text>
+    </>
+  );
+}

package/src/CircularView/getRangeAnglesSpecial.js

@@ -0,0 +1,12 @@
+import { getRangeAngles } from "@teselagen/range-utils";
+export default function getRangeAnglesSpecial() {
+  const { endAngle, totalAngle, ...rest } = getRangeAngles.apply(
+    this,
+    arguments
+  );
+  return {
+    endAngle: endAngle - 0.00001, //we subtract a tiny amount because an angle of 2PI will cause nothing to be drawn!
+    totalAngle: totalAngle - 0.00001, //we subtract a tiny amount because we don't want the range comparisons to treat the same angle as overlapping
+    ...rest
+  };
+}

package/src/CircularView/getYOffset.js

@@ -0,0 +1,15 @@
+export default function getYOffset(iTree, start, end) {
+  //get all potentially overlapping annotations
+
+  const potentiallyOverlappingAnnotations = iTree.search(start, end);
+  //we don't want to render the new annotation on top of any of these potentially overlapping annotations
+  const potentialPositionsForNewAnnotation =
+    potentiallyOverlappingAnnotations.map(() => true);
+  potentiallyOverlappingAnnotations.forEach(function (otherAnnotation) {
+    potentialPositionsForNewAnnotation[otherAnnotation.yOffset] = false;
+  });
+  //get first occurence of empty yOffset
+  const yOffset = potentialPositionsForNewAnnotation.indexOf(true);
+  //if there are no empty slots, make a new slot
+  return yOffset > -1 ? yOffset : potentialPositionsForNewAnnotation.length;
+}

package/src/CircularView/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface CircularViewProps {
+  editorName: string, //the name of the editor instance (this should match what you've set up in your redux store)
+  maxAnnotationsToDisplay,
+  circularAndLinearTickSpacing: number, 
+  spaceBetweenAnnotations: number, // default = 2,
+  annotationHeight: number, // default = 15,
+  hideName: boolean,
+}
+
+export interface maxAnnotationsToDisplay {
+  features: number,
+  primers: number,
+  // translations: number,
+  // parts: number,
+  orfs: number,
+  cutsites: number,
+}
+
+export default class CircularView extends React.Component <CircularViewProps> {}