Todoericsturman

cypress/integration/editing.spec.js

@@ -25,12 +25,12 @@ describe("editor", function() {
     cy.selectRange(5297, 3);
     cy.contains("button", "Edit").click();
     cy.contains(".bp3-menu-item", /Complement Selection/).click();
-    cy.contains(".ve-row-item-sequence", /gattag$/);
+    cy.contains(".ve-row-item-sequence", /^ctggtcttat/);
 
     cy.contains("button", "Edit").click();
     cy.contains(".bp3-menu-item", "Reverse Complement Selection").click();
 
     cy.contains("Selecting 6 bps from 5297 to 3");
-    cy.contains(".ve-row-item-sequence", /gatcag$/);
+    cy.contains(".ve-row-item-sequence", /^ctagtcttatg/);
   });
 });

cypress/integration/editor.spec.js

@@ -155,4 +155,36 @@ describe("editor", function() {
     cy.get(".sequenceInputBubble input").type("tta{enter}");
     cy.contains(".veLabelText", "CHANGED_SEQ");
   });
+  it(`should handle beforeSequenceInsertOrDelete hook correctly while crossing the origin`, () => {
+    cy.tgToggle("beforeSequenceInsertOrDelete");
+    cy.contains(".veLabelText", "pS8c-vector..").trigger("contextmenu", {
+      force: true
+    });
+    cy.contains(".bp3-menu-item", "Replace").click();
+
+    cy.get(".sequenceInputBubble input").type("tta{enter}");
+    cy.contains(".veLabelText", "CHANGED_SEQ");
+    cy.contains("Selecting 3 bps from 1 to 3");
+  });
+  it(`should handle maintainOriginSplit flag correctly when pasted text is shorter than pre origin selection`, () => {
+    cy.tgToggle("beforeSequenceInsertOrDelete");
+    cy.tgToggle("maintainOriginSplit");
+    cy.contains(".veLabelText", "pS8c-vector..").trigger("contextmenu", {
+      force: true
+    });
+    cy.contains(".bp3-menu-item", "Replace").click();
+
+    cy.get(".sequenceInputBubble input").type("tta{enter}");
+    cy.contains(".veLabelText", "CHANGED_SEQ");
+    cy.contains("Selecting 3 bps from 778 to 780");
+  });
+  it(`should handle maintainOriginSplit flag correctly when pasted text is longer than pre origin selection`, () => {
+    cy.tgToggle("beforeSequenceInsertOrDelete");
+    cy.tgToggle("maintainOriginSplit");
+    cy.selectRange(5297, 3);
+
+    cy.replaceSelection("ttaa");
+    cy.contains(".veLabelText", "CHANGED_SEQ");
+    cy.contains("Selecting 4 bps from 5295 to 1");
+  });
 });

demo/src/EditorDemo/index.js

@@ -50,6 +50,7 @@ const defaultState = {
   onDuplicate: true,
   onDelete: true,
   beforeSequenceInsertOrDelete: false,
+  maintainOriginSplit: false,
   onCopy: true,
   onPaste: true
 };
@@ -798,6 +799,16 @@ beforeSequenceInsertOrDelete: (
   }
 }
 \`\`\`
+`
+              })}
+              {renderToggle({
+                that: this,
+                disabled: !this.state.beforeSequenceInsertOrDelete,
+                type: "maintainOriginSplit",
+                label: "maintainOriginSplit (when pasting text)",
+                info: `
+This feature requires beforeSequenceInsertOrDelete toggle to be true to be enabled.  See the description and code example for beforeSequenceInsertOrDelete to use this feature.
+\`\`\`
 `
               })}
               {renderToggle({
@@ -869,7 +880,10 @@ beforeSequenceInsertOrDelete: (
               beforeSequenceInsertOrDelete: (
                 sequenceDataToInsert,
                 existingSequenceData,
-                caretPositionOrRange
+                caretPositionOrRange,
+                options = {
+                  maintainOriginSplit: this.state.maintainOriginSplit
+                }
               ) => {
                 window.toastr.info("beforeSequenceInsertOrDelete triggered");
                 if (!sequenceDataToInsert.size) return; //if it is a delete, just return early
@@ -901,7 +915,8 @@ beforeSequenceInsertOrDelete: (
                       );
                       return acc;
                     }, {})
-                  }
+                  },
+                  options
                 };
               }
             }}
@@ -996,6 +1011,11 @@ beforeSequenceInsertOrDelete: (
             showGCContent={this.state.showGCContent}
             GCDecimalDigits={this.state.GCDecimalDigits}
             showAvailability={this.state.showAvailability}
+            maintainOriginSplit={
+              this.state.beforeSequenceInsertOrDelete
+                ? this.state.maintainOriginSplit
+                : false
+            }
             {...this.state.overrideRightClickExample &&
               this.rightClickOverridesExample}
             {...this.state.overrideAddEditFeatureDialog &&

demo/src/utils/renderToggle.js

@@ -22,6 +22,7 @@ export default function renderToggle({
   info,
   description,
   hook,
+  disabled = false,
   ...rest
 }) {
   let toggleOrButton;
@@ -51,6 +52,7 @@ export default function renderToggle({
             hook && hook(!!(that.state || {})[type]);
           },
           checked: (that.state || {})[type],
+          disabled: disabled,
           onChange: () => {
             hook && hook(!(that.state || {})[type]);
             that.setState({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "open-vector-editor",
-  "version": "10.0.2",
+  "version": "10.0.9",
   "description": "Teselagen's Open Source Vector Editor",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -82,10 +82,10 @@
     "babel-eslint": "8.2.6",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "bio-parsers": "5.5.17",
+    "bio-parsers": "5.5.19",
     "chance": "^1.0.18",
     "cross-env": "^5.1.6",
-    "cypress": "^3.2.0",
+    "cypress": "^3.3.1",
     "drag-mock": "^1.4.0",
     "eslint": "^5.15.3",
     "eslint-config-react-app": "^2.0.1",
@@ -122,10 +122,10 @@
     "react-transition-group": "^2.6.0",
     "redux-form": "7",
     "redux-thunk": "2.3.0",
-    "teselagen-react-components": "^27.0.6",
+    "teselagen-react-components": "^27.0.17",
     "tg-client-query-builder": "^2.12.2",
-    "ve-range-utils": "^2.5.3",
-    "ve-sequence-utils": "^3.3.40",
+    "ve-range-utils": "^2.5.5",
+    "ve-sequence-utils": "^3.3.41",
     "why-did-you-update": "^1.0.6"
   },
   "husky": {

src/AlignmentView/index.js

@@ -786,11 +786,12 @@ class AlignmentView extends React.Component {
       <ResizeSensor onResize={this.handleResize}>
         <div
           style={{
-            height: height || (isPairwise ? "auto" : viewportHeight * 0.85),
+            height: height || (isPairwise ? "auto" : viewportHeight * 0.88),
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
             position: "relative",
+            overflowY: "auto",
             ...this.props.style
             // borderTop: "1px solid black"
           }}
@@ -800,7 +801,8 @@ class AlignmentView extends React.Component {
             style={{
               display: "flex",
               flexDirection: "column",
-              position: "relative"
+              position: "relative",
+              overflowY: "auto"
             }}
             className="alignmentView-top-container"
           >

src/CircularView/Labels/index.js

@@ -4,38 +4,34 @@ import withHover from "../../helperComponents/withHover";
 import "./style.css";
 import React from "react";
 
-function getHeightAndWidthOfLabel(text, fontWidth, fontHeight) {
-  return {
-    height: fontHeight,
-    width: text.length * fontWidth
-  };
-}
+const defaultFontWidth = 8;
+const fontWidthToFontSize = 1.75;
 
 function Labels({
   labels = {},
   outerRadius,
   editorName,
+  textScalingFactor,
   circularViewWidthVsHeightRatio, //width of the circular view
   condenseOverflowingXLabels = true //set to true to make labels tha
 }) {
   if (!Object.keys(labels).length) return null;
   outerRadius += 25;
   let radius = outerRadius;
   let outerPointRadius = outerRadius - 35;
+  //we don't want the labels to grow too large on large screen devices,
+  //so we start to decrease the fontWidth if the textScalingFactor is less than 1
+  let fontWidth =
+    defaultFontWidth * (textScalingFactor < 1 ? textScalingFactor : 1);
 
-  let fontWidth = 8;
-  let fontHeight = fontWidth * 1.5;
+  let fontHeight = fontWidth * 2.4;
   let labelPoints = Object.keys(labels)
     .map(function(key) {
       let label = labels[key];
       let { annotationCenterAngle, annotationCenterRadius } = label;
       return {
         ...label,
-        ...getHeightAndWidthOfLabel(
-          label.text || "Unlabeled",
-          fontWidth,
-          fontHeight
-        ),
+        width: (label.text || "Unlabeled").length * fontWidth,
         //three points define the label:
         innerPoint: {
           ...polarToSpecialCartesian(
@@ -120,7 +116,7 @@ const DrawLabelGroup = withHover(function({
   label,
   labelAndSublabels,
   fontWidth,
-  // fontHeight,
+  fontHeight,
   outerRadius,
   onMouseLeave,
   onMouseOver,
@@ -174,7 +170,7 @@ const DrawLabelGroup = withHover(function({
       labelXStart += labelOnLeft ? distancePastBoundary : 0;
     }
   }
-  let dy = 20;
+  let dy = fontHeight;
   let textYStart = label.y + dy / 2;
 
   //if label xStart or label xEnd don't fit within the canvas, we need to shorten the label..
@@ -240,7 +236,12 @@ const DrawLabelGroup = withHover(function({
             fill="white"
             stroke="black"
           />
-          <text /* zIndex={11} */ x={labelXStart} y={labelYStart} style={{}}>
+
+          <text
+            /* zIndex={11} */ x={labelXStart}
+            y={labelYStart}
+            style={{ fontSize: fontWidth * fontWidthToFontSize }}
+          >
             {labelAndSublabels.map(function(label, index) {
               return (
                 <DrawGroupInnerLabel
@@ -276,6 +277,7 @@ const DrawLabelGroup = withHover(function({
         }
         y={textYStart}
         style={{
+          fontSize: fontWidth * fontWidthToFontSize,
           fill: label.color || "black"
           // stroke: label.color ? label.color : "black"
         }}

src/CircularView/Labels/relaxLabelAngles.js

@@ -15,7 +15,7 @@ function normalizeAngle(angle) {
 //this pure function allows the labels to spread out around the circle
 //and groups overlapping labels together if necessary
 function relaxLabelAngles(_labelPoints, spacing, maxradius) {
-  spacing = 18;
+  // spacing = 18;
   let maxLabelsPerQuadrant = Math.floor(maxradius / spacing) + 4;
   let labels = cloneDeep(_labelPoints);
   if (labels.length > maxLabelsPerQuadrant * 4) {

src/CircularView/index.js

@@ -598,6 +598,7 @@ export class CircularView extends React.Component {
         editorName,
         circularViewWidthVsHeightRatio: width / height,
         labels,
+        textScalingFactor: 700 / Math.min(width, height),
         outerRadius: radius
       });
       if (!results) return null;

src/Editor/index.js

@@ -311,6 +311,7 @@ export class Editor extends React.Component {
       getSequenceAtVersion,
       VersionHistoryViewProps,
       sequenceData = {},
+      fullScreenOffsets,
       withPreviewMode,
       isFullscreen,
       handleFullscreenClose,
@@ -408,15 +409,21 @@ export class Editor extends React.Component {
     }
 
     const { tabDragging } = this.state;
+    let xOffset = 0;
+    let yOffset = 0;
+    if (fullScreenOffsets) {
+      xOffset = fullScreenOffsets.xOffset || 0;
+      yOffset = fullScreenOffsets.yOffset || 0;
+    }
     let w = window,
       d = document,
       e = d.documentElement,
       g = d.getElementsByTagName("body")[0],
       x = w.innerWidth || e.clientWidth || g.clientWidth,
       y = w.innerHeight || e.clientHeight || g.clientHeight;
     const windowDimensions = {
-      width: x,
-      height: Math.max(y, minHeight)
+      width: x - xOffset,
+      height: Math.max(y, minHeight) - yOffset
       //  document.body.getBoundingClientRect().height
     };
 
@@ -762,8 +769,8 @@ export class Editor extends React.Component {
             zIndex: 15000,
             position: "fixed",
             // paddingTop: 20,
-            top: 0,
-            left: 0,
+            top: yOffset || 0,
+            left: xOffset || 0,
             ...windowDimensions
           }),
           ...style

src/RowItem/StackedAnnotations/index.js

@@ -27,6 +27,7 @@ function StackedAnnotations(props) {
     onRightClick,
     editorName,
     type,
+    alignmentType,
     getGaps,
     marginTop,
     marginBottom,
@@ -43,7 +44,11 @@ function StackedAnnotations(props) {
     if (annotationRange.yOffset > maxAnnotationYOffset) {
       maxAnnotationYOffset = annotationRange.yOffset;
     }
-    const { gapsBefore, gapsInside } = getGaps(annotationRange);
+    let { gapsBefore, gapsInside } = getGaps(annotationRange);
+    if (alignmentType === "Parallel Part Creation") {
+      gapsBefore = 0;
+      gapsInside = 0;
+    }
     let annotation = annotationRange.annotation;
     let annotationColor =
       (annotation.type && featureColors[annotation.type]) ||

src/RowItem/index.js

@@ -80,6 +80,7 @@ export class RowItem extends React.PureComponent {
         end: 0,
         rowNumber: 0
       },
+      alignmentType,
       alignmentData,
       sequenceLength = row.sequence.length,
       chromatogramData,
@@ -179,6 +180,7 @@ export class RowItem extends React.PureComponent {
         CompOverride,
         shouldShow,
         noPlural,
+        alignmentType,
         ...otherExtraProps
       } = extraProps;
       const pluralType = noPlural ? type : pluralize(type);
@@ -197,6 +199,7 @@ export class RowItem extends React.PureComponent {
           containerClassName={camelCase(
             "veRowView-" + pluralType + "Container"
           )}
+          alignmentType={alignmentType}
           {...annotationCommonProps}
           {...getPropsForType(this.props, type, pluralType)}
           {...otherExtraProps}
@@ -262,7 +265,8 @@ export class RowItem extends React.PureComponent {
           stroke: colorToUse,
           color: colorToUse
         };
-      }
+      },
+      alignmentType
     };
     return (
       <div onContextMenu={backgroundRightClicked} className="veRowItemWrapper">