@teselagen/ove 0.0.14 → 0.0.16

package/src/RowItem/style.css

@@ -0,0 +1,103 @@
+.veRowView {
+  overflow-x: visible;
+}
+
+.veRowItem {
+  overflow-x: visible;
+  height: fit-content;
+}
+
+.bp3-dark .cutsiteLabelSelectionLayer {
+  background: #606468 !important;
+}
+.cutsiteLabelSelectionLayer {
+  background: #d8e1e8 !important;
+  height: 119%;
+  opacity: 1;
+  z-index: -2;
+}
+.cutsiteLabelSelectionLayer.isTrueStart {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.cutsiteLabelSelectionLayer.isTrueEnd {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.veRowViewCutsite {
+  background: #8a9ba8;
+  margin-left: -2px;
+  /* z-index: -1; */
+}
+.bp3-dark .veRowViewCutsite.snipHovered {
+  background: #c5e3fa !important;
+}
+.veRowViewCutsite.topStrandSnip {
+  top: 1px;
+}
+.veRowViewCutsite.bottomStrandSnip {
+  top: -1px;
+}
+.veRowViewCutsite.snipHovered {
+  background: black;
+}
+
+.cutsiteLabelSelectionLayer.cutsiteLabelSelectionLayerHovered {
+  border-top: 2px solid #202b33;
+  border-bottom: 2px solid #202b33;
+}
+.bp3-dark .cutsiteLabelSelectionLayer.cutsiteLabelSelectionLayerHovered {
+  border-top: 2px solid #c5e3fa;
+  border-bottom: 2px solid #c5e3fa;
+}
+
+.cutsiteLabelSelectionLayerHovered.isTrueStart {
+  border-left: 2px solid #202b33;
+}
+.bp3-dark .cutsiteLabelSelectionLayerHovered.isTrueStart {
+  border-left: 2px solid #c5e3fa;
+}
+
+.cutsiteLabelSelectionLayerHovered.isTrueEnd {
+  border-right: 2px solid #202b33;
+}
+.bp3-dark .cutsiteLabelSelectionLayerHovered.isTrueEnd {
+  border-right: 2px solid #c5e3fa;
+}
+
+.veRowViewOrfsContainer {
+  z-index: 20;
+}
+/* TNR: ENABLING THIS WILL BREAK SMOOTH SCROLLING FOR THE ROW VIEW
+.rowViewTextContainer {
+  user-select: none;
+} 
+*/
+
+/* .rowViewTextContainer {
+  user-select: none;
+}  */
+
+.veRowViewPrimaryProteinSequenceContainer {
+  /* needs a z-index less than the selection layer so you can right click the selection above a sequence https://github.com/TeselaGen/openVectorEditor/issues/625 */
+  z-index: 1;
+}
+
+.tg-prime-direction {
+  position: absolute;
+  color: lightgray;
+  font-size: 9px;
+  top: 2px;
+}
+.tg-right-prime-direction {
+  right: -10px;
+}
+.tg-left-prime-direction {
+  left: -10px;
+}
+.isBoldSeq {
+  stroke: black;
+}
+.bp3-dark .isBoldSeq {
+  stroke: white;
+}

package/src/RowItem/utils.js

@@ -0,0 +1,32 @@
+import { ANNOTATION_LABEL_FONT_WIDTH } from "./constants";
+import { getWidth } from "./getXStartAndWidthOfRowAnnotation";
+
+export const doesLabelFitInAnnotation = (
+  text = "",
+  { range, width },
+  charWidth
+) => {
+  const textLength = text.length * ANNOTATION_LABEL_FONT_WIDTH;
+  const widthMinusOne =
+    (range ? getWidth(range, charWidth, 0) : width) - charWidth;
+  return widthMinusOne > textLength;
+};
+
+// export const getTruncatedLabel = (
+//   text = "",
+//   widthInBps,
+// ) => {
+//   const textLength = text.length * ANNOTATION_LABEL_FONT_WIDTH;
+//   const widthMinusOne =
+//     (range ? getWidth(range, charWidth, 0) : width) - charWidth;
+//   const doesFit = widthMinusOne > textLength;
+//   if (returnTextThatFits) {
+//     if (doesFit) {
+//       return text;
+//     } else {
+//       return text.slice(0, widthMinusOne);
+//     }
+//   } else {
+//     return doesFit;
+//   }
+// };

package/src/RowView/estimateRowHeight.js

@@ -0,0 +1,184 @@
+import { forEach } from "lodash";
+
+const debug = 0;
+// const debug = console.log("comment me back out!") || 1;
+
+export const rowHeights = {
+  rowJumpButtons: { height: 30 },
+  spacer: { height: 10 },
+  aminoAcidNumbers: { height: 9 },
+  translations: { spaceBetweenAnnotations: 2, marginTop: 5, height: 17 },
+  chromatogram: { height: 134 },
+  parts: { spaceBetweenAnnotations: 2, marginTop: 5, height: 15 },
+  primers: { spaceBetweenAnnotations: 2, marginTop: 5, height: 18 },
+  features: { spaceBetweenAnnotations: 2, marginTop: 5, height: 15 },
+  warnings: { spaceBetweenAnnotations: 2, marginTop: 5, height: 15 },
+  assemblyPieces: { spaceBetweenAnnotations: 2, marginTop: 5, height: 15 },
+  lineageAnnotations: { spaceBetweenAnnotations: 2, marginTop: 5, height: 15 },
+  orfs: { spaceBetweenAnnotations: 2, marginTop: 5, height: 15 },
+  //tnrtodo -- we should estimate external label height for parts/features/primers
+  cutsiteLabels: { spaceBetweenAnnotations: 0, height: 15 },
+  sequence: { height: 15 },
+  reverseSequence: { height: 15 },
+  axis: { marginTop: 5, height: 15 }
+};
+
+rowHeights.primaryProteinSequence = rowHeights.translations;
+
+Object.keys(rowHeights).forEach((k) => {
+  rowHeights[k].type = k;
+  rowHeights[k].marginTop = rowHeights[k].marginTop || 0;
+  rowHeights[k].marginBottom = rowHeights[k].marginBottom || 0;
+  rowHeights[k].spaceBetweenAnnotations =
+    rowHeights[k].spaceBetweenAnnotations || 0;
+});
+const translations = {
+  getHeight: (props) => {
+    if (props.annotationVisibility.aminoAcidNumbers) {
+      return [rowHeights.aminoAcidNumbers.type, rowHeights.translations.type];
+    }
+    return rowHeights.translations.type;
+  },
+  hasYOffset: true
+};
+
+const annotationsToCompute = {
+  spacer: {
+    alwaysVisible: true,
+    height: rowHeights.spacer.type
+  },
+  primaryProteinSequence: translations,
+  translations,
+  parts: {
+    height: rowHeights.parts.type,
+    hasYOffset: true
+  },
+  primers: {
+    height: rowHeights.primers.type,
+    hasYOffset: true
+  },
+  features: {
+    height: rowHeights.features.type,
+    hasYOffset: true
+  },
+  chromatogram: {
+    height: rowHeights.chromatogram.type
+  },
+  warnings: {
+    height: rowHeights.warnings.type,
+    hasYOffset: true
+  },
+  orfs: {
+    height: rowHeights.orfs.type,
+    hasYOffset: true
+  },
+  sequence: {
+    height: rowHeights.sequence.type
+  },
+  reverseSequence: {
+    height: rowHeights.reverseSequence.type
+  },
+  axis: {
+    height: rowHeights.axis.type
+  },
+  cutsiteLabels: {
+    typeOverride: "cutsites",
+    height: rowHeights.cutsiteLabels.type,
+    hasYOffset: true
+  }
+};
+
+export default (props) => {
+  let {
+    index,
+    cache,
+    clearCache,
+    chromatogramData,
+    rowCount,
+    row,
+    showJumpButtons,
+    annotationVisibility
+  } = props;
+  if (clearCache) {
+    cache = {};
+  }
+
+  if (cache[index]) {
+    return cache[index];
+  }
+  if (!row) return 0;
+  let totalHeight = 0; //account for spacer
+  if (showJumpButtons && (index === 0 || index === rowCount - 1)) {
+    totalHeight += rowHeights.rowJumpButtons.height;
+  }
+  forEach(
+    annotationsToCompute,
+    (
+      { height: _height, alwaysVisible, getHeight, hasYOffset, typeOverride },
+      key
+    ) => {
+      const shouldShow =
+        alwaysVisible || annotationVisibility[typeOverride || key];
+      if (!shouldShow) return;
+      if (key === "chromatogram" && !chromatogramData) return;
+      const heightKeys = getHeight ? getHeight(props) : _height;
+      const [annotationHeight, marginHeight] = getSummedHeights(
+        heightKeys,
+        props
+      );
+
+      let heightToAdd = annotationHeight;
+      if (hasYOffset) {
+        const annotations = row[typeOverride || key];
+        if (hasYOffset) {
+          let maxYOffset = 0;
+          annotations &&
+            annotations.forEach((a) => {
+              if (a.yOffset + 1 > maxYOffset) maxYOffset = a.yOffset + 1;
+            });
+          heightToAdd = maxYOffset * annotationHeight;
+        }
+      }
+      if (heightToAdd > 0) heightToAdd += marginHeight;
+
+      if (debug) {
+        heightToAdd !== 0 &&
+          console.info(`heightToAdd, key:`, heightToAdd, key);
+      }
+      totalHeight += heightToAdd;
+    }
+  );
+  if (debug) {
+    console.info(`totalHeight:`, totalHeight);
+  }
+  if (annotationVisibility.compactNames) {
+    totalHeight = Math.max(totalHeight, 31);
+  }
+  cache[index] = totalHeight;
+  return totalHeight;
+};
+
+function getHeights(heightKey, props) {
+  const annotationHeight = !heightKey
+    ? 0
+    : props[heightKey + "Height"] || (rowHeights[heightKey] || {}).height || 0;
+
+  const marginHeight =
+    (props[heightKey + "MarginTop"] ||
+      (rowHeights[heightKey] || {}).marginTop ||
+      0) +
+    (props[heightKey + "MarginBottom"] ||
+      (rowHeights[heightKey] || {}).marginBottom ||
+      0);
+  return [annotationHeight, marginHeight];
+}
+function getSummedHeights(heightKeys, props) {
+  let height = 0;
+  let marginHeight = 0;
+  (Array.isArray(heightKeys) ? heightKeys : [heightKeys]).forEach((k) => {
+    const [h, m] = getHeights(k, props);
+    height += h;
+    marginHeight += m;
+  });
+  return [height, marginHeight];
+}

package/src/RowView/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface RowViewProps {
+  editorName: string, //the name of the editor instance (this should match what you've set up in your redux store)
+  height: number, //default = 400
+  width: number,
+  marginWidth: number,
+  charWidth: number,
+  RowItemProps: object, //props passed to RowItem
+}
+export default class RowView extends React.Component <RowViewProps> {}