@teselagen/ove 0.0.14 → 0.0.16

package/src/CircularView/Labels/relaxLabels_DEPRECATED.js

@@ -0,0 +1,105 @@
+/* eslint-disable */
+// import intervalTree2 from "node-interval-tree";
+// var xRanges = new intervalTree2(0)
+// var yRanges = new intervalTree2(0)
+// iTree.search(start, end)
+// featureITree.add(startAngle, expandedEndAngle, undefined, {...annotationCopy})
+
+let alpha = 1.5; //the larger the alpha, the fewer loops through relax necessary, but too large and things are spaced unevenly
+let spacing = 12;
+let relaxCounter = 0;
+export default function relaxLabels(labelPoints) {
+  let mutableLabelPoints = labelPoints.map(function(point) {
+    return {
+      ...point
+    };
+  });
+  function spreadPointsOutOnCircle(labels) {}
+  function relax() {
+    let again = false;
+    relaxCounter++;
+    mutableLabelPoints.forEach(function(point1, index1) {
+      // var xOverlaps = xRanges.search(point1.x, point1.x + point1.width)
+      // var yOverlaps = yRanges.search(point1.y, point1.y + point1.height)
+      // xOverlaps
+      // xRanges.add(point1.x, point1.x + point1.width, undefined, point1)
+      // yRanges.add(point1.y, point1.y + point1.height, undefined, point1)
+
+      mutableLabelPoints.forEach(function(point2, index2) {
+        // a & b are the same element and don't collide.
+        if (index1 === index2) return;
+
+        // a & b are on opposite sides of the chart and
+        // don't collide
+        if (
+          (point1.x > 0 && point2.x <= 0) ||
+          (point1.x < 0 && point2.x >= 0)
+        ) {
+          return;
+        }
+        // Now let's calculate the distance between
+        // these elements.
+        let deltaY = point1.y - point2.y;
+
+        // Our spacing is greater than our specified spacing,
+        // so they don't collide.
+        if (Math.abs(deltaY) > spacing) return;
+
+        // If the labels collide, we'll push each
+        // of the two labels up and down a little bit.
+        let weight1 = point1.y > 0 ? 0.5 : -0.5;
+        let weight2 = point2.y > 0 ? 0.5 : -0.5;
+        again = true;
+        let sign = deltaY > 0 ? 1 : -1;
+        let adjust = sign * alpha;
+        point1.y += adjust + weight1;
+        point2.y -= adjust + weight2;
+
+        // point1.x += -weight1
+        // point2.x -= -weight2
+      });
+    });
+    // Adjust our line leaders here
+    // so that they follow the labels.
+    if (again && relaxCounter < 1) {
+      relax();
+    }
+  }
+  relax();
+
+  //group colliding labels
+  let stableLabels = [];
+  mutableLabelPoints.forEach(function(point1) {
+    let collision = false;
+    stableLabels.some(function(point2) {
+      // a & b are on opposite sides of the chart and
+      // don't collide
+      if ((point1.x > 0 && point2.x <= 0) || (point1.x < 0 && point2.x >= 0)) {
+        return;
+      }
+      // Now let's calculate the distance between
+      // these elements.
+      let deltaY = point1.y - point2.y;
+
+      // Our spacing is greater than our specified spacing,
+      // so they don't collide.
+      if (Math.abs(deltaY) > spacing) return;
+      // If the labels collide, we'll push each
+      collision = true;
+      point2.labels.push(point1);
+      return true; //stop the loop early
+    });
+    if (!collision) {
+      stableLabels.push({
+        ...point1,
+        labels: [point1]
+      });
+    }
+  });
+  stableLabels = stableLabels.sort(sortLabels);
+  return stableLabels;
+}
+
+function sortLabels(a, b) {
+  return b.y - a.y;
+}

package/src/CircularView/Labels/style.css

@@ -0,0 +1,55 @@
+.veLabels {
+  font-weight: lighter;
+}
+
+.labelTspan:hover {
+  fill: red !important;
+}
+
+.labelText {
+  cursor: pointer;
+}
+
+.veEditor .veAnnotationHovered:not(.topLevelLabelGroup) {
+  font-weight: bold;
+}
+.veEditor
+  .veAnnotationHovered:not(.topLevelLabelGroup):not(
+    .veCircularViewInternalLabelText
+  ) {
+  text-decoration: underline;
+}
+
+.veEditor .veAnnotationHovered.veCutsiteLabel {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+.bp3-dark .veLabels .veAnnotationHovered:not(.topLevelLabelGroup) {
+  /* fill: white !important; */
+  font-weight: normal;
+}
+.bp3-dark .veLabels .veAnnotationHovered rect {
+  fill: rgb(64, 64, 92) !important;
+}
+
+.partWithSelectedTag {
+  font-size: 14px !important;
+  font-weight: 900;
+  text-decoration: underline;
+}
+.veCircularView .partWithSelectedTag.vePart .veLabelText {
+  /* stroke: #ac68cc; */
+  font-size: 15px !important;
+}
+.vePartLabel.partWithSelectedTag {
+  font-size: large !important;
+}
+
+.partWithSelectedTag path,
+path.partWithSelectedTag {
+  stroke-width: 1.5 !important;
+}
+/* .veLabelLine {
+  opacity: 0.1;
+} */

package/src/CircularView/Orf.js

@@ -0,0 +1,25 @@
+import React from "react";
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+
+export default function CircularPrimer({
+  color = "orange",
+  radius,
+  annotationHeight,
+  totalAngle
+}) {
+  return (
+    <path
+      className="veOrf"
+      strokeWidth=".5"
+      stroke={color}
+      fill={color}
+      d={drawDirectedPiePiece({
+        radius,
+        annotationHeight,
+        totalAngle,
+        arrowheadLength: 0.4,
+        tailThickness: 0.4
+      }).print()}
+    />
+  );
+}

package/src/CircularView/Part.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { startsWith } from "lodash";
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+
+export default function Part({
+  radius,
+  arrowheadLength = 0.5,
+  annotationHeight,
+  totalAngle,
+  color,
+  overlapsSelf,
+  className
+}) {
+  const path = drawDirectedPiePiece({
+    radius,
+    overlapsSelf,
+    annotationHeight,
+    totalAngle,
+    arrowheadLength,
+    tailThickness: 1 //feature specific
+  });
+  const colorToUse = startsWith(color, "override_")
+    ? color.replace("override_", "")
+    : "#ac68cc";
+  return (
+    <path
+      className={className}
+      strokeWidth="0.5"
+      stroke={colorToUse}
+      // fill={colorToUse}
+      d={path.print()}
+    />
+  );
+}

package/src/CircularView/PositionAnnotationOnCircle.js

@@ -0,0 +1,26 @@
+import React from "react";
+export default function PositionAnnotationOnCircle({
+  children,
+  height = 0,
+  sAngle = 0,
+  eAngle = 0,
+  forward = true,
+  ...rest
+}) {
+  const sAngleDegs = (sAngle * 360) / Math.PI / 2;
+  const eAngleDegs = (eAngle * 360) / Math.PI / 2;
+  let transform;
+  let revTransform;
+  if (forward) {
+    transform = `translate(0,${-height}) rotate(${sAngleDegs},0,${height})`;
+  } else {
+    transform = `scale(-1,1) translate(0,${-height}) rotate(${-eAngleDegs},0,${height}) `;
+    revTransform = ` rotate(${eAngleDegs},0,${height}) scale(-1,1) rotate(${sAngleDegs}, 0,${height})`;
+  }
+  const props = { transform, ...rest };
+  /* eslint-disable */
+  if (!children) return { transform, revTransform };
+  /* eslint-enable */
+
+  return React.cloneElement(children, props);
+}

package/src/CircularView/Primer.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { getStripedPattern } from "../utils/editorUtils";
+import drawDirectedPiePiece from "./drawDirectedPiePiece";
+import { getInternalLabel } from "./getInternalLabel";
+
+export default function CircularPrimer(props) {
+  const {
+    color = "orange",
+    radius,
+    arrowheadLength = 0.5,
+    annotationHeight,
+    totalAngle,
+    id,
+    labelNeedsFlip,
+    ellipsizedName
+  } = props;
+  const [path, textPath] = drawDirectedPiePiece({
+    radius,
+    annotationHeight,
+    totalAngle,
+    arrowheadLength,
+    tailThickness: 1, //feature specific
+    returnTextPath: true,
+    hasLabel: ellipsizedName,
+    labelNeedsFlip
+  });
+  return (
+    <React.Fragment>
+      {getStripedPattern({ color })}
+      <path
+        className="vePrimer veCircularViewPrimer"
+        id={id}
+        strokeWidth=".5"
+        stroke="black"
+        fill="url(#diagonalHatch)"
+        d={path.print()}
+      />
+      {getInternalLabel({ ...props, colorToUse: color, textPath })}
+    </React.Fragment>
+  );
+}

package/src/CircularView/RotateCircularViewSlider.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { SLIDER_NORM_WIDTH, SLIDER_SMALL_WIDTH } from "../constants/constants";
+
+import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
+
+export function RotateCircularViewSlider({
+  setRotationRadians,
+  zoomLevel,
+  maxZoomLevel,
+  bindOutsideChangeHelper,
+  smallSlider
+}) {
+  const target = React.useRef();
+  const showLabelsDebounced = useDebouncedCallback(
+    () => {
+      try {
+        const el = target.current
+          .closest(`.veCircularView`)
+          .querySelector(`.circularViewSvg`);
+        if (el) el.classList.remove("veHideLabels");
+        else {
+          console.error(`whoops we shouldn't be here`);
+        }
+      } catch (e) {
+        console.error(`error 92hf290fasd:`, e);
+      }
+    },
+    // delay in ms
+    300,
+    { leading: true }
+  );
+
+  const stepSize = Math.min(
+    3,
+    (3 / (zoomLevel / 2)) * (maxZoomLevel / (zoomLevel / 2))
+  );
+  return (
+    <div
+      style={{
+        zIndex: 900,
+        position: "absolute"
+      }}
+    >
+      <UncontrolledSliderWithPlusMinusBtns
+        bindOutsideChangeHelper={bindOutsideChangeHelper}
+        onChange={(_val) => {
+          const val = 360 - _val;
+          const el = target.current
+            .closest(`.veCircularView`)
+            .querySelector(`.circularViewSvg`);
+          const innerEl = target.current
+            .closest(`.veCircularView`)
+            .querySelector(`.circularViewSvg g`);
+          innerEl.style.transform = `rotate(${val}deg)`;
+          setRotationRadians((val * Math.PI) / 180);
+          if (zoomLevel <= 1) {
+            el.classList.add("veHideLabels");
+          }
+          showLabelsDebounced();
+        }}
+        smallSlider
+        passedRef={target}
+        showTrackFill={false}
+        leftIcon="arrow-left"
+        rightIcon="arrow-right"
+        title="Rotate"
+        style={{
+          paddingTop: "4px",
+          width: smallSlider ? SLIDER_SMALL_WIDTH : SLIDER_NORM_WIDTH
+        }}
+        className="veRotateCircularSlider ove-slider"
+        labelRenderer={false}
+        stepSize={stepSize}
+        justUpdateInitialValOnce
+        // initialValue={initialRotation || 0}
+        max={360}
+        min={0}
+      ></UncontrolledSliderWithPlusMinusBtns>
+    </div>
+  );
+}

package/src/CircularView/SelectionLayer.js

@@ -0,0 +1,132 @@
+import { noop } from "@teselagen/ui";
+import Caret from "./Caret";
+import sector from "paths-js/sector";
+import getRangeAngles from "./getRangeAnglesSpecial";
+import PositionAnnotationOnCircle from "./PositionAnnotationOnCircle";
+import React from "react";
+import draggableClassnames from "../constants/draggableClassnames";
+import pureNoFunc from "../utils/pureNoFunc";
+import {
+  getSelectionMessage,
+  preventDefaultStopPropagation
+} from "../utils/editorUtils";
+
+function SelectionLayer({
+  isDraggable,
+  selectionLayer,
+  sequenceLength,
+  radius,
+  hideTitle,
+  innerRadius,
+  onRightClicked,
+  onClick,
+  index,
+  isProtein
+}) {
+  const {
+    color,
+    start,
+    end,
+    hideCarets = false,
+    style,
+    className
+  } = selectionLayer;
+  const { startAngle, endAngle, totalAngle } = getRangeAngles(
+    selectionLayer,
+    sequenceLength
+  );
+
+  const section = sector({
+    center: [0, 0], //the center is always 0,0 for our annotations :) we rotate later!
+    r: innerRadius,
+    R: radius,
+    start: 0,
+    end: totalAngle
+  });
+
+  const selectionMessage = getSelectionMessage({
+    sequenceLength,
+    selectionLayer,
+    isProtein
+  });
+  // let section2 = sector({
+  //   center: [0, 0], //the center is always 0,0 for our annotations :) we rotate later!
+  //   r: innerRadius,
+  //   R: radius,
+  //   start: 0,
+  //   end: Math.PI * 2 - totalAngle
+  // });
+  const { transform } = PositionAnnotationOnCircle({
+    sAngle: startAngle,
+    eAngle: endAngle,
+    height: 0
+  });
+  return (
+    <g
+      onContextMenu={(event) => {
+        onRightClicked &&
+          onRightClicked({
+            annotation: selectionLayer,
+            event
+          });
+      }}
+      onClick={
+        onClick
+          ? (event) => {
+              onClick({
+                annotation: selectionLayer,
+                event
+              });
+            }
+          : undefined
+      }
+      key={"veSelectionLayer" + index}
+      className={"veSelectionLayer " + (className || "")}
+    >
+      {!hideTitle && <title>{selectionMessage}</title>}
+      <path
+        transform={transform}
+        className="selectionLayer"
+        style={{ opacity: 0.3, ...style }}
+        d={section.path.print()}
+        fill={color}
+      />
+      {!hideCarets && (
+        <Caret
+          key="caret1"
+          className={
+            className +
+            " selectionLayerCaret " +
+            (isDraggable ? draggableClassnames.selectionStart : "")
+          }
+          isSelection
+          onClick={onClick ? noop : preventDefaultStopPropagation}
+          selectionMessage={selectionMessage}
+          caretPosition={start}
+          sequenceLength={sequenceLength}
+          innerRadius={innerRadius}
+          outerRadius={radius}
+        />
+      )}
+      {!hideCarets && (
+        <Caret
+          key="caret2"
+          className={
+            className +
+            " selectionLayerCaret " +
+            (isDraggable ? draggableClassnames.selectionEnd : "")
+          }
+          isSelection
+          onClick={onClick ? noop : preventDefaultStopPropagation}
+          selectionMessage={selectionMessage}
+          caretPosition={end + 1}
+          sequenceLength={sequenceLength}
+          innerRadius={innerRadius}
+          outerRadius={radius}
+        />
+      )}
+    </g>
+  );
+}
+
+export default pureNoFunc(SelectionLayer);

package/src/CircularView/VeTopRightContainer.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export function VeTopRightContainer({ fullScreen, children }) {
+  return (
+    <div
+      style={fullScreen ? { right: 65, top: 10 } : {}}
+      className="veTopRightContainer"
+    >
+      {children}
+    </div>
+  );
+}

package/src/CircularView/ZoomCircularViewSlider.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { SLIDER_NORM_WIDTH, SLIDER_SMALL_WIDTH } from "../constants/constants";
+import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
+export function ZoomCircularViewSlider({
+  zoomHelper,
+  zoomLevel,
+  setZoomLevel,
+  maxZoomLevel,
+  onZoom,
+  smallSlider
+}) {
+  let clickStepSize = (maxZoomLevel - 1) / 440;
+  clickStepSize = clickStepSize * Math.max(1, Math.log(zoomLevel + 2));
+  clickStepSize = Math.round(clickStepSize * 1000) / 1000;
+  const stepSize = clickStepSize;
+  const min = 1;
+  function setZoom(val) {
+    const newZoomLev = val;
+    setZoomLevel(newZoomLev);
+    onZoom(newZoomLev);
+  }
+  if (zoomLevel > maxZoomLevel) {
+    setTimeout(() => {
+      if (zoomHelper.current && zoomHelper.current.triggerChange) {
+        zoomHelper.current.triggerChange(({ changeValue }) => {
+          changeValue(maxZoomLevel);
+        });
+      }
+    }, 0);
+  }
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: smallSlider ? 100 : 150,
+        top: 0,
+        zIndex: 900
+      }}
+    >
+      <UncontrolledSliderWithPlusMinusBtns
+        bindOutsideChangeHelper={zoomHelper.current}
+        onChange={setZoom}
+        onRelease={setZoom}
+        title="Adjust Zoom Level"
+        style={{
+          paddingTop: "4px",
+          width: smallSlider ? SLIDER_SMALL_WIDTH : SLIDER_NORM_WIDTH
+        }}
+        smallSlider
+        noWraparound
+        className="veZoomCircularSlider ove-slider"
+        labelRenderer={false}
+        stepSize={stepSize}
+        clickStepSize={clickStepSize}
+        initialValue={zoomLevel || 1}
+        justUpdateInitialValOnce
+        max={maxZoomLevel || 14}
+        min={min}
+      />
+    </div>
+  );
+}