@teselagen/ove 0.7.1 → 0.7.3-beta.2

package/index.cjs.js

@@ -71660,7 +71660,7 @@ const DynamicMenuItem = /* @__PURE__ */ __name(({
         labelElement: item.hotkey && /* @__PURE__ */ React$2.createElement(core.KeyCombo, { minimal: true, combo: item.hotkey }),
         text: item.text
       }),
-      item.submenu ? item.submenu.filter(ident$1).map((def2, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadProps(__spreadValues({}, { def: def2, enhancers, context }), { key: index2 }))) : void 0
+      item.submenu ? item.submenu.filter(ident$1).map((def2, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadValues({ key: index2 }, { def: def2, enhancers, context }))) : void 0
     );
   }
   if (item.disabled && typeof item.disabled === "string") {
@@ -71673,7 +71673,7 @@ const DynamicMenuItem = /* @__PURE__ */ __name(({
 }, "DynamicMenuItem");
 const createDynamicMenu = /* @__PURE__ */ __name((menuDef2, enhancers, context) => {
   if (menuDef2 instanceof Array) {
-    return menuDef2.map((def, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadProps(__spreadValues({}, { def, enhancers, context }), { key: index2 })));
+    return menuDef2.map((def, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadValues({ key: index2 }, { def, enhancers, context })));
   } else {
     return /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadValues({}, { def: menuDef2, enhancers, context }));
   }
@@ -79840,12 +79840,18 @@ function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optio
     let positionInCodon = 0;
     for (let i = 0; i < basesRead; i++) {
       const posInCds = i + index2;
+      const sequenceIndex = codonPositionsInCDS.includes(posInCds) ? absoluteCodonPositions[codonPositionsInCDS.indexOf(posInCds)] : positionInCdsToPositionInMainSequence(
+        posInCds,
+        forward,
+        translationRange,
+        originalSequenceStringLength
+      );
       if (codonPositionsInCDS.includes(posInCds)) {
         aminoAcidDataForEachBaseOfDNA.push({
           aminoAcid,
           positionInCodon,
           aminoAcidIndex,
-          sequenceIndex: absoluteCodonPositions[i],
+          sequenceIndex,
           codonRange,
           fullCodon: codonPositionsInCDS.length === 3
         });
@@ -79855,12 +79861,7 @@ function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optio
           aminoAcid: null,
           positionInCodon: null,
           aminoAcidIndex: null,
-          sequenceIndex: positionInCdsToPositionInMainSequence(
-            posInCds,
-            forward,
-            translationRange,
-            originalSequenceStringLength
-          ),
+          sequenceIndex,
           codonRange: null,
           fullCodon: null
         });
@@ -117167,7 +117168,9 @@ function SelectionLayer$2(props) {
           caretSvgs = [
             overlap.start === start2 && /* @__PURE__ */ React$2.createElement(
               Caret$2,
-              __spreadValues({}, {
+              __spreadValues({
+                key: key + "caret1"
+              }, {
                 leftMargin,
                 onClick: _onClick || preventDefaultStopPropagation,
                 onRightClick: onSelectionContextMenu,
@@ -117177,7 +117180,6 @@ function SelectionLayer$2(props) {
                 getGaps,
                 isDraggable,
                 ignoreGaps,
-                key: key + "caret1",
                 sequenceLength,
                 className: classNameToPass + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionStart : ""),
                 caretPosition: overlap.start
@@ -117185,7 +117187,9 @@ function SelectionLayer$2(props) {
             ),
             overlap.end === end2 && /* @__PURE__ */ React$2.createElement(
               Caret$2,
-              __spreadValues({}, {
+              __spreadValues({
+                key: key + "caret2"
+              }, {
                 leftMargin,
                 onClick: _onClick || preventDefaultStopPropagation,
                 onRightClick: onSelectionContextMenu,
@@ -117195,7 +117199,6 @@ function SelectionLayer$2(props) {
                 getGaps,
                 style: selectionLayer2.style,
                 ignoreGaps,
-                key: key + "caret2",
                 sequenceLength,
                 className: classNameToPass + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionEnd : ""),
                 caretPosition: overlap.end + 1
@@ -117488,7 +117491,6 @@ const _Sequence = class _Sequence extends React$2.Component {
             width,
             position: "absolute"
           },
-          ref: "rowViewTextContainer",
           className: "rowViewTextContainer",
           height: Math.max(0, Number(height2))
         },
@@ -119626,6 +119628,7 @@ const _Translation = class _Translation extends React$2.Component {
           return /* @__PURE__ */ React$2.createElement(
             "rect",
             {
+              key: annotation.id + aminoAcidSliver.sequenceIndex,
               x: index2 * charWidth2,
               y: height2 / 2 - height2 / 16,
               width: charWidth2,
@@ -120698,10 +120701,10 @@ const CutsiteSelectionLayers = connectToEditor(
     return layer.start > -1 && /* @__PURE__ */ React$2.createElement(
       SelectionLayer$3,
       __spreadValues(__spreadValues({
-        hideTitle: true
+        hideTitle: true,
+        key: "restrictionSiteRange" + index2
       }, annotationCommonProps), {
         id: cutsite.id,
-        key: "restrictionSiteRange" + index2,
         height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
         regions: [layer],
         row: alignmentData ? { start: 0, end: alignmentData.sequence.length - 1 } : row,
@@ -121176,7 +121179,6 @@ function RowItem(props) {
                 height: sequenceHeight,
                 position: "absolute"
               },
-              ref: "rowViewTextContainer",
               onClick: function(event) {
                 replacementLayerClicked({
                   annotation: replacementLayer,
@@ -121915,7 +121917,7 @@ function showFileDialog({ multiple = false, onSelect }) {
 }
 __name(showFileDialog, "showFileDialog");
 const name = "@teselagen/ove";
-const version = "0.7.0";
+const version = "0.7.3-beta.1";
 const main = "./src/index.js";
 const type = "module";
 const exports$1 = {
@@ -132024,8 +132026,9 @@ function LabelLine(pointArray, options) {
   });
   return /* @__PURE__ */ React$2.createElement(React$2.Fragment, { key: "labelLine" }, /* @__PURE__ */ React$2.createElement(
     "polyline",
-    __spreadValues({}, __spreadValues({
-      key: "polyline-long",
+    __spreadValues({
+      key: "polyline-long"
+    }, __spreadValues({
       points,
       stroke: "black",
       fill: "none",
@@ -133451,12 +133454,11 @@ function CircularView(props) {
         return /* @__PURE__ */ React$2.createElement(
           SelectionLayer$1,
           __spreadValues({
-            key: index2
+            key: "veCircularViewSelectionLayer" + index2
           }, {
             index: index2,
             isDraggable: true,
             isProtein: isProtein2,
-            key: "veCircularViewSelectionLayer" + index2,
             selectionLayer: selectionLayer22,
             onRightClicked: selectionLayer22.isSearchLayer ? searchLayerRightClicked : selectionLayerRightClicked,
             onClick: selectionLayer22.isSearchLayer ? searchLayerClicked : void 0,
@@ -133477,13 +133479,14 @@ function CircularView(props) {
     if (caretPosition2 !== -1 && selectionLayer2.start < 0 && sequenceLength >= 0) {
       return /* @__PURE__ */ React$2.createElement(
         Caret$1,
-        __spreadValues({}, {
+        __spreadValues({
+          key: "veCircularViewCaret"
+        }, {
           caretPosition: caretPosition2,
           sequenceLength,
           isProtein: isProtein2,
           innerRadius,
-          outerRadius: radius,
-          key: "veCircularViewCaret"
+          outerRadius: radius
         })
       );
     }

package/index.es.js

@@ -71642,7 +71642,7 @@ const DynamicMenuItem = /* @__PURE__ */ __name(({
         labelElement: item.hotkey && /* @__PURE__ */ React__default$1.createElement(KeyCombo, { minimal: true, combo: item.hotkey }),
         text: item.text
       }),
-      item.submenu ? item.submenu.filter(ident$1).map((def2, index2) => /* @__PURE__ */ React__default$1.createElement(DynamicMenuItem, __spreadProps(__spreadValues({}, { def: def2, enhancers, context }), { key: index2 }))) : void 0
+      item.submenu ? item.submenu.filter(ident$1).map((def2, index2) => /* @__PURE__ */ React__default$1.createElement(DynamicMenuItem, __spreadValues({ key: index2 }, { def: def2, enhancers, context }))) : void 0
     );
   }
   if (item.disabled && typeof item.disabled === "string") {
@@ -71655,7 +71655,7 @@ const DynamicMenuItem = /* @__PURE__ */ __name(({
 }, "DynamicMenuItem");
 const createDynamicMenu = /* @__PURE__ */ __name((menuDef2, enhancers, context) => {
   if (menuDef2 instanceof Array) {
-    return menuDef2.map((def, index2) => /* @__PURE__ */ React__default$1.createElement(DynamicMenuItem, __spreadProps(__spreadValues({}, { def, enhancers, context }), { key: index2 })));
+    return menuDef2.map((def, index2) => /* @__PURE__ */ React__default$1.createElement(DynamicMenuItem, __spreadValues({ key: index2 }, { def, enhancers, context })));
   } else {
     return /* @__PURE__ */ React__default$1.createElement(DynamicMenuItem, __spreadValues({}, { def: menuDef2, enhancers, context }));
   }
@@ -79822,12 +79822,18 @@ function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optio
     let positionInCodon = 0;
     for (let i = 0; i < basesRead; i++) {
       const posInCds = i + index2;
+      const sequenceIndex = codonPositionsInCDS.includes(posInCds) ? absoluteCodonPositions[codonPositionsInCDS.indexOf(posInCds)] : positionInCdsToPositionInMainSequence(
+        posInCds,
+        forward,
+        translationRange,
+        originalSequenceStringLength
+      );
       if (codonPositionsInCDS.includes(posInCds)) {
         aminoAcidDataForEachBaseOfDNA.push({
           aminoAcid,
           positionInCodon,
           aminoAcidIndex,
-          sequenceIndex: absoluteCodonPositions[i],
+          sequenceIndex,
           codonRange,
           fullCodon: codonPositionsInCDS.length === 3
         });
@@ -79837,12 +79843,7 @@ function getAminoAcidDataForEachBaseOfDna(originalSequenceString, forward, optio
           aminoAcid: null,
           positionInCodon: null,
           aminoAcidIndex: null,
-          sequenceIndex: positionInCdsToPositionInMainSequence(
-            posInCds,
-            forward,
-            translationRange,
-            originalSequenceStringLength
-          ),
+          sequenceIndex,
           codonRange: null,
           fullCodon: null
         });
@@ -117149,7 +117150,9 @@ function SelectionLayer$2(props) {
           caretSvgs = [
             overlap.start === start2 && /* @__PURE__ */ React__default$1.createElement(
               Caret$2,
-              __spreadValues({}, {
+              __spreadValues({
+                key: key + "caret1"
+              }, {
                 leftMargin,
                 onClick: _onClick || preventDefaultStopPropagation,
                 onRightClick: onSelectionContextMenu,
@@ -117159,7 +117162,6 @@ function SelectionLayer$2(props) {
                 getGaps: getGaps2,
                 isDraggable,
                 ignoreGaps,
-                key: key + "caret1",
                 sequenceLength,
                 className: classNameToPass + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionStart : ""),
                 caretPosition: overlap.start
@@ -117167,7 +117169,9 @@ function SelectionLayer$2(props) {
             ),
             overlap.end === end2 && /* @__PURE__ */ React__default$1.createElement(
               Caret$2,
-              __spreadValues({}, {
+              __spreadValues({
+                key: key + "caret2"
+              }, {
                 leftMargin,
                 onClick: _onClick || preventDefaultStopPropagation,
                 onRightClick: onSelectionContextMenu,
@@ -117177,7 +117181,6 @@ function SelectionLayer$2(props) {
                 getGaps: getGaps2,
                 style: selectionLayer2.style,
                 ignoreGaps,
-                key: key + "caret2",
                 sequenceLength,
                 className: classNameToPass + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionEnd : ""),
                 caretPosition: overlap.end + 1
@@ -117470,7 +117473,6 @@ const _Sequence = class _Sequence extends React__default$1.Component {
             width,
             position: "absolute"
           },
-          ref: "rowViewTextContainer",
           className: "rowViewTextContainer",
           height: Math.max(0, Number(height2))
         },
@@ -119608,6 +119610,7 @@ const _Translation = class _Translation extends React__default$1.Component {
           return /* @__PURE__ */ React__default$1.createElement(
             "rect",
             {
+              key: annotation.id + aminoAcidSliver.sequenceIndex,
               x: index2 * charWidth2,
               y: height2 / 2 - height2 / 16,
               width: charWidth2,
@@ -120680,10 +120683,10 @@ const CutsiteSelectionLayers = connectToEditor(
     return layer.start > -1 && /* @__PURE__ */ React__default$1.createElement(
       SelectionLayer$3,
       __spreadValues(__spreadValues({
-        hideTitle: true
+        hideTitle: true,
+        key: "restrictionSiteRange" + index2
       }, annotationCommonProps), {
         id: cutsite.id,
-        key: "restrictionSiteRange" + index2,
         height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
         regions: [layer],
         row: alignmentData ? { start: 0, end: alignmentData.sequence.length - 1 } : row,
@@ -121158,7 +121161,6 @@ function RowItem(props) {
                 height: sequenceHeight,
                 position: "absolute"
               },
-              ref: "rowViewTextContainer",
               onClick: function(event) {
                 replacementLayerClicked({
                   annotation: replacementLayer,
@@ -121897,7 +121899,7 @@ function showFileDialog({ multiple = false, onSelect }) {
 }
 __name(showFileDialog, "showFileDialog");
 const name = "@teselagen/ove";
-const version = "0.7.0";
+const version = "0.7.3-beta.1";
 const main = "./src/index.js";
 const type = "module";
 const exports$1 = {
@@ -132006,8 +132008,9 @@ function LabelLine(pointArray, options) {
   });
   return /* @__PURE__ */ React__default$1.createElement(React__default$1.Fragment, { key: "labelLine" }, /* @__PURE__ */ React__default$1.createElement(
     "polyline",
-    __spreadValues({}, __spreadValues({
-      key: "polyline-long",
+    __spreadValues({
+      key: "polyline-long"
+    }, __spreadValues({
       points,
       stroke: "black",
       fill: "none",
@@ -133433,12 +133436,11 @@ function CircularView(props) {
         return /* @__PURE__ */ React__default$1.createElement(
           SelectionLayer$1,
           __spreadValues({
-            key: index2
+            key: "veCircularViewSelectionLayer" + index2
           }, {
             index: index2,
             isDraggable: true,
             isProtein: isProtein2,
-            key: "veCircularViewSelectionLayer" + index2,
             selectionLayer: selectionLayer22,
             onRightClicked: selectionLayer22.isSearchLayer ? searchLayerRightClicked : selectionLayerRightClicked,
             onClick: selectionLayer22.isSearchLayer ? searchLayerClicked : void 0,
@@ -133459,13 +133461,14 @@ function CircularView(props) {
     if (caretPosition2 !== -1 && selectionLayer2.start < 0 && sequenceLength >= 0) {
       return /* @__PURE__ */ React__default$1.createElement(
         Caret$1,
-        __spreadValues({}, {
+        __spreadValues({
+          key: "veCircularViewCaret"
+        }, {
           caretPosition: caretPosition2,
           sequenceLength,
           isProtein: isProtein2,
           innerRadius,
-          outerRadius: radius,
-          key: "veCircularViewCaret"
+          outerRadius: radius
         })
       );
     }

package/index.umd.js

@@ -100885,7 +100885,7 @@ ${latestSubscriptionCallbackError.current.stack}
           labelElement: item.hotkey && /* @__PURE__ */ React$2.createElement(KeyCombo, { minimal: true, combo: item.hotkey }),
           text: item.text
         }),
-        item.submenu ? item.submenu.filter(ident$1).map((def2, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadProps(__spreadValues({}, { def: def2, enhancers, context }), { key: index2 }))) : void 0
+        item.submenu ? item.submenu.filter(ident$1).map((def2, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadValues({ key: index2 }, { def: def2, enhancers, context }))) : void 0
       );
     }
     if (item.disabled && typeof item.disabled === "string") {
@@ -100898,7 +100898,7 @@ ${latestSubscriptionCallbackError.current.stack}
   }, "DynamicMenuItem");
   const createDynamicMenu = /* @__PURE__ */ __name((menuDef2, enhancers, context) => {
     if (menuDef2 instanceof Array) {
-      return menuDef2.map((def, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadProps(__spreadValues({}, { def, enhancers, context }), { key: index2 })));
+      return menuDef2.map((def, index2) => /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadValues({ key: index2 }, { def, enhancers, context })));
     } else {
       return /* @__PURE__ */ React$2.createElement(DynamicMenuItem, __spreadValues({}, { def: menuDef2, enhancers, context }));
     }
@@ -108991,12 +108991,18 @@ ${latestSubscriptionCallbackError.current.stack}
       let positionInCodon = 0;
       for (let i2 = 0; i2 < basesRead; i2++) {
         const posInCds = i2 + index2;
+        const sequenceIndex = codonPositionsInCDS.includes(posInCds) ? absoluteCodonPositions[codonPositionsInCDS.indexOf(posInCds)] : positionInCdsToPositionInMainSequence(
+          posInCds,
+          forward,
+          translationRange,
+          originalSequenceStringLength
+        );
         if (codonPositionsInCDS.includes(posInCds)) {
           aminoAcidDataForEachBaseOfDNA.push({
             aminoAcid,
             positionInCodon,
             aminoAcidIndex,
-            sequenceIndex: absoluteCodonPositions[i2],
+            sequenceIndex,
             codonRange,
             fullCodon: codonPositionsInCDS.length === 3
           });
@@ -109006,12 +109012,7 @@ ${latestSubscriptionCallbackError.current.stack}
             aminoAcid: null,
             positionInCodon: null,
             aminoAcidIndex: null,
-            sequenceIndex: positionInCdsToPositionInMainSequence(
-              posInCds,
-              forward,
-              translationRange,
-              originalSequenceStringLength
-            ),
+            sequenceIndex,
             codonRange: null,
             fullCodon: null
           });
@@ -145723,7 +145724,9 @@ ${seq.sequence}
             caretSvgs = [
               overlap.start === start2 && /* @__PURE__ */ React$2.createElement(
                 Caret$2,
-                __spreadValues({}, {
+                __spreadValues({
+                  key: key2 + "caret1"
+                }, {
                   leftMargin,
                   onClick: _onClick || preventDefaultStopPropagation,
                   onRightClick: onSelectionContextMenu,
@@ -145733,7 +145736,6 @@ ${seq.sequence}
                   getGaps,
                   isDraggable,
                   ignoreGaps,
-                  key: key2 + "caret1",
                   sequenceLength,
                   className: classNameToPass + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionStart : ""),
                   caretPosition: overlap.start
@@ -145741,7 +145743,9 @@ ${seq.sequence}
               ),
               overlap.end === end2 && /* @__PURE__ */ React$2.createElement(
                 Caret$2,
-                __spreadValues({}, {
+                __spreadValues({
+                  key: key2 + "caret2"
+                }, {
                   leftMargin,
                   onClick: _onClick || preventDefaultStopPropagation,
                   onRightClick: onSelectionContextMenu,
@@ -145751,7 +145755,6 @@ ${seq.sequence}
                   getGaps,
                   style: selectionLayer2.style,
                   ignoreGaps,
-                  key: key2 + "caret2",
                   sequenceLength,
                   className: classNameToPass + " selectionLayerCaret " + (isDraggable ? draggableClassnames.selectionEnd : ""),
                   caretPosition: overlap.end + 1
@@ -146044,7 +146047,6 @@ ${seq.sequence}
               width,
               position: "absolute"
             },
-            ref: "rowViewTextContainer",
             className: "rowViewTextContainer",
             height: Math.max(0, Number(height2))
           },
@@ -148182,6 +148184,7 @@ double click --> edit`}`;
             return /* @__PURE__ */ React$2.createElement(
               "rect",
               {
+                key: annotation.id + aminoAcidSliver.sequenceIndex,
                 x: index2 * charWidth2,
                 y: height2 / 2 - height2 / 16,
                 width: charWidth2,
@@ -149220,10 +149223,10 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       return layer.start > -1 && /* @__PURE__ */ React$2.createElement(
         SelectionLayer$3,
         __spreadValues(__spreadValues({
-          hideTitle: true
+          hideTitle: true,
+          key: "restrictionSiteRange" + index2
         }, annotationCommonProps), {
           id: cutsite.id,
-          key: "restrictionSiteRange" + index2,
           height: showReverseSequence ? sequenceHeight * 2 : sequenceHeight,
           regions: [layer],
           row: alignmentData ? { start: 0, end: alignmentData.sequence.length - 1 } : row,
@@ -149698,7 +149701,6 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
                   height: sequenceHeight,
                   position: "absolute"
                 },
-                ref: "rowViewTextContainer",
                 onClick: function(event) {
                   replacementLayerClicked({
                     annotation: replacementLayer,
@@ -150437,7 +150439,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __name(showFileDialog, "showFileDialog");
   const name = "@teselagen/ove";
-  const version = "0.7.0";
+  const version = "0.7.3-beta.1";
   const main = "./src/index.js";
   const type = "module";
   const exports$1 = {
@@ -158941,8 +158943,9 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     });
     return /* @__PURE__ */ React$2.createElement(React$2.Fragment, { key: "labelLine" }, /* @__PURE__ */ React$2.createElement(
       "polyline",
-      __spreadValues({}, __spreadValues({
-        key: "polyline-long",
+      __spreadValues({
+        key: "polyline-long"
+      }, __spreadValues({
         points,
         stroke: "black",
         fill: "none",
@@ -160368,12 +160371,11 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
           return /* @__PURE__ */ React$2.createElement(
             SelectionLayer$1,
             __spreadValues({
-              key: index2
+              key: "veCircularViewSelectionLayer" + index2
             }, {
               index: index2,
               isDraggable: true,
               isProtein: isProtein2,
-              key: "veCircularViewSelectionLayer" + index2,
               selectionLayer: selectionLayer22,
               onRightClicked: selectionLayer22.isSearchLayer ? searchLayerRightClicked : selectionLayerRightClicked,
               onClick: selectionLayer22.isSearchLayer ? searchLayerClicked : void 0,
@@ -160394,13 +160396,14 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       if (caretPosition2 !== -1 && selectionLayer2.start < 0 && sequenceLength >= 0) {
         return /* @__PURE__ */ React$2.createElement(
           Caret$1,
-          __spreadValues({}, {
+          __spreadValues({
+            key: "veCircularViewCaret"
+          }, {
             caretPosition: caretPosition2,
             sequenceLength,
             isProtein: isProtein2,
             innerRadius,
-            outerRadius: radius,
-            key: "veCircularViewCaret"
+            outerRadius: radius
           })
         );
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.1",
+  "version": "0.7.3-beta.2",
   "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.1",
+    "@teselagen/ui": "0.7.3-beta.2",
     "@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": "8.0.7",
     "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": "^3.0.1",
     "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 {