@teselagen/ove 0.7.3-beta.1 → 0.7.3-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.3-beta.1",
+  "version": "0.7.3-beta.3",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -12,7 +12,7 @@
   "dependencies": {
     "@teselagen/sequence-utils": "0.3.27",
     "@teselagen/range-utils": "0.3.7",
-    "@teselagen/ui": "0.7.3-beta.1",
+    "@teselagen/ui": "0.7.3-beta.3",
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
     "@teselagen/bio-parsers": "0.4.22",
@@ -72,7 +72,6 @@
     "react-dom": "^18.3.1",
     "react-draggable": "4.4.5",
     "react-dropzone": "^11.4.2",
-    "react-markdown": "9.0.1",
     "react-measure": "^2.5.2",
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
@@ -84,7 +83,6 @@
     "redux-act": "^1.8.0",
     "redux-form": "^8.3.10",
     "redux-thunk": "2.4.1",
-    "remark-gfm": "^4.0.0",
     "reselect": "^4.1.7",
     "shortid": "^2.2.16",
     "tg-use-local-storage-state": "^16.0.3",

package/src/AutoAnnotate.js

@@ -257,6 +257,7 @@ FRT	GAAGTTCCTATTCTCTAGAAAGTATAGGAACTTC	misc_recomb	orchid	pink	0	0`,
                     <div>
                       <DataTable
                         isInfinite
+                        formName={"customAnnsTable"}
                         schema={
                           annotationType === "feature"
                             ? customAnnsSchema

package/src/CircularView/Labels/index.js

@@ -416,23 +416,9 @@ function LabelLine(pointArray, options) {
   });
   return (
     <React.Fragment key="labelLine">
-      {/* <polyline
-        {...{
-          key: "polyline-short",
-          points,
-          stroke: "black",
-          fill: "none",
-          strokeWidth: 1,
-          // style: {
-          //   opacity: 0.2
-          // },
-          className: "veLabelLine",
-          ...options
-        }}
-      /> */}
       <polyline
+        key="polyline-long"
         {...{
-          key: "polyline-long",
           points,
           stroke: "black",
           fill: "none",

package/src/CircularView/index.js

@@ -597,12 +597,11 @@ export function CircularView(props) {
         ) {
           return (
             <SelectionLayer
-              key={index}
+              key={"veCircularViewSelectionLayer" + index}
               {...{
                 index,
                 isDraggable: true,
                 isProtein,
-                key: "veCircularViewSelectionLayer" + index,
                 selectionLayer,
                 onRightClicked: selectionLayer.isSearchLayer
                   ? searchLayerRightClicked
@@ -635,13 +634,13 @@ export function CircularView(props) {
       //only render if there is no selection layer
       return (
         <Caret
+          key="veCircularViewCaret"
           {...{
             caretPosition,
             sequenceLength,
             isProtein,
             innerRadius,
-            outerRadius: radius,
-            key: "veCircularViewCaret"
+            outerRadius: radius
           }}
         />
       );

package/src/Reflex/reflex-styles.css

@@ -34,19 +34,19 @@
 }
 
 .reflex-layout > .reflex-splitter {
-  background-color: #f5f8fa;
+  background-color: #f1f1f1;
   z-index: 100;
 }
 
 .reflex-layout > .reflex-splitter.active,
 .reflex-layout > .reflex-splitter:hover {
-  background-color: #f5f8fa;
+  background-color: #cccccc;
   transition: all 1s ease;
 }
 
 .reflex-layout.horizontal > .reflex-splitter {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #f1f1f1;
+  border-top: 1px solid #f1f1f1;
   cursor: row-resize;
   width: 100%;
   height: 2px;
@@ -54,13 +54,13 @@
 
 .reflex-layout.horizontal > .reflex-splitter:hover,
 .reflex-layout.horizontal > .reflex-splitter.active {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #cccccc;
+  border-top: 1px solid #cccccc;
 }
 
 .reflex-layout.vertical > .reflex-splitter {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #f1f1f1;
+  border-left: 1px solid #f1f1f1;
   cursor: col-resize;
   height: 95%;
   width: 2px;
@@ -73,8 +73,8 @@
 
 .reflex-layout.vertical > .reflex-splitter:hover,
 .reflex-layout.vertical > .reflex-splitter.active {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #cccccc;
+  border-left: 1px solid #cccccc;
 }
 
 .reflex-layout > .reflex-splitter.reflex-thin {

package/src/RowItem/CutsiteSelectionLayers.js

@@ -26,10 +26,10 @@ export const CutsiteSelectionLayers = connectToEditor(
         layer.start > -1 && (
           <SelectionLayer
             hideTitle
+            key={"restrictionSiteRange" + index}
             {...annotationCommonProps}
             {...{
               id: cutsite.id,
-              key: "restrictionSiteRange" + index,
               height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
               regions: [layer],
               row: alignmentData

package/src/RowItem/SelectionLayer/index.js

@@ -105,6 +105,7 @@ function SelectionLayer(props) {
               caretSvgs = [
                 overlap.start === start && (
                   <Caret
+                    key={key + "caret1"}
                     {...{
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
@@ -115,7 +116,6 @@ function SelectionLayer(props) {
                       getGaps,
                       isDraggable,
                       ignoreGaps,
-                      key: key + "caret1",
                       sequenceLength,
                       className:
                         classNameToPass +
@@ -127,6 +127,7 @@ function SelectionLayer(props) {
                 ),
                 overlap.end === end && (
                   <Caret
+                    key={key + "caret2"}
                     {...{
                       leftMargin,
                       onClick: _onClick || preventDefaultStopPropagation,
@@ -137,7 +138,6 @@ function SelectionLayer(props) {
                       getGaps,
                       style: selectionLayer.style,
                       ignoreGaps,
-                      key: key + "caret2",
                       sequenceLength,
                       className:
                         classNameToPass +

package/src/RowItem/Sequence.js

@@ -175,7 +175,6 @@ class Sequence extends React.Component {
               width,
               position: "absolute"
             }}
-            ref="rowViewTextContainer"
             className="rowViewTextContainer"
             height={Math.max(0, Number(height))}
           >

package/src/RowItem/Translations/Translation.js

@@ -69,6 +69,7 @@ class Translation extends React.Component {
           nextAaSliver = aminoAcidsForSubrange[index + 2];
           return (
             <rect
+              key={annotation.id + aminoAcidSliver.sequenceIndex}
               x={index * charWidth}
               y={height / 2 - height / 16}
               width={charWidth}

package/src/RowItem/index.js

@@ -561,7 +561,6 @@ export default function RowItem(props) {
                     height: sequenceHeight,
                     position: "absolute"
                   }}
-                  ref="rowViewTextContainer"
                   onClick={function (event) {
                     replacementLayerClicked({
                       annotation: replacementLayer,

package/style.css

@@ -9081,11 +9081,7 @@ button:not(:disabled):active {
 .bp3-popover[style*="transform-origin"][style*="right"] .bp3-popover-arrow {
   transform: translate(-0.5px, 0);
 }
-.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.rg-celleditor-input,
-.rg-celleditor input {
-  border: none;
-}
-.tg-flex-form-content .bp3-form-content {
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tg-flex-form-content .bp3-form-content {
   display: flex;
 }
 
@@ -9336,6 +9332,34 @@ button:not(:disabled):active {
 .bp3-dark .tg-color-picker-selector input {
   color: #222222;
 }
+
+.form-separator {
+  p {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+  p::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-right: 16px;
+  }
+  p::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 1px;
+    background-color: #e1e4e8;
+    margin-left: 16px;
+  }
+}
+.rg-celleditor-input,
+.rg-celleditor input {
+  border: none;
+}
 .tg-select {
   width: 100%;
   min-width: 170px;
@@ -10557,19 +10581,19 @@ li.bp3-menu-divider:last-child {
 }
 
 .reflex-layout > .reflex-splitter {
-  background-color: #f5f8fa;
+  background-color: #f1f1f1;
   z-index: 100;
 }
 
 .reflex-layout > .reflex-splitter.active,
 .reflex-layout > .reflex-splitter:hover {
-  background-color: #f5f8fa;
+  background-color: #cccccc;
   transition: all 1s ease;
 }
 
 .reflex-layout.horizontal > .reflex-splitter {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #f1f1f1;
+  border-top: 1px solid #f1f1f1;
   cursor: row-resize;
   width: 100%;
   height: 2px;
@@ -10577,13 +10601,13 @@ li.bp3-menu-divider:last-child {
 
 .reflex-layout.horizontal > .reflex-splitter:hover,
 .reflex-layout.horizontal > .reflex-splitter.active {
-  border-bottom: 1px solid #f5f8fa;
-  border-top: 1px solid #f5f8fa;
+  border-bottom: 1px solid #cccccc;
+  border-top: 1px solid #cccccc;
 }
 
 .reflex-layout.vertical > .reflex-splitter {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #f1f1f1;
+  border-left: 1px solid #f1f1f1;
   cursor: col-resize;
   height: 95%;
   width: 2px;
@@ -10596,8 +10620,8 @@ li.bp3-menu-divider:last-child {
 
 .reflex-layout.vertical > .reflex-splitter:hover,
 .reflex-layout.vertical > .reflex-splitter.active {
-  border-right: 1px solid #f5f8fa;
-  border-left: 1px solid #f5f8fa;
+  border-right: 1px solid #cccccc;
+  border-left: 1px solid #cccccc;
 }
 
 .reflex-layout > .reflex-splitter.reflex-thin {