@teselagen/ove 0.7.38 → 0.8.3

package/ove.css

@@ -9356,6 +9356,43 @@ button:not(:disabled):active {
     margin-left: 16px;
   }
 }
+.tg-blueprint-divider {
+  position: relative;
+}
+
+/* Override Blueprint's default divider when we use text */
+.tg-blueprint-divider-with-text.bp3-divider {
+  /* Remove Blueprint's default border styling to avoid duplication */
+  border: none;
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  height: auto;
+}
+
+.tg-blueprint-divider-with-text::before,
+.tg-blueprint-divider-with-text::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid rgba(16, 22, 26, 0.15);
+}
+
+.tg-blueprint-divider-text {
+  padding: 0 10px;
+  font-size: 14px;
+  color: rgba(92, 112, 128, 0.6);
+  white-space: nowrap;
+}
+
+/* Dark theme support */
+.bp3-dark .tg-blueprint-divider-with-text::before,
+.bp3-dark .tg-blueprint-divider-with-text::after {
+  border-bottom-color: rgba(255, 255, 255, 0.15);
+}
+
+.bp3-dark .tg-blueprint-divider-text {
+  color: rgba(167, 182, 194, 0.6);
+}
 .rg-celleditor-input,
 .rg-celleditor input {
   border: none;
@@ -9423,6 +9460,7 @@ button:not(:disabled):active {
 }
 .bp3-popover.tg-info-helper-popover .bp3-popover-content {
   max-width: 340px;
+  white-space: pre-line;
 }
 
 .info-helper-clickable .bp3-popover-target {
@@ -9683,7 +9721,11 @@ body:not(.drag-active)
   user-select: none;
   background: #f7f7f7;
 }
-
+/* disable the table header interactions while the table is loading */
+.ReactTable.loading .rt-thead {
+  opacity: 0.7;
+  pointer-events: none;
+}
 .ReactTable .rt-thead {
   box-shadow: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
@@ -9851,10 +9893,6 @@ body:not(.drag-active)
   padding-left: 2px;
 }
 
-.ReactTable .-loading.disabled {
-  cursor: not-allowed;
-}
-
 /* to get the height to resize based on its container:  */
 .ReactTable {
   height: 100%;
@@ -9970,14 +10008,6 @@ body:not(.drag-active)
   color: inherit !important;
 }
 
-.bp3-dark .ReactTable .-loading {
-  background: #30404d !important;
-}
-
-.bp3-dark .ReactTable .-loading > div {
-  color: #f5f8fa !important;
-}
-
 .bp3-dark .ReactTable .rt-tr-group.selected {
   background: #26738cb0 !important;
 }
@@ -11755,6 +11785,9 @@ path.partWithSelectedTag {
 .bp3-dark .alignmentViewTrackContainer text {
   fill: #f5f8fa !important;
 }
+.bp3-dark [data-tick-mark] {
+  fill: #f5f8fa !important;
+}
 /* .bp3-dark .veRowViewAxis text {
   stroke: #f5f8fa !important;
 } */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.38",
+  "version": "0.8.3",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -19,7 +19,7 @@
     "@teselagen/range-utils": "0.3.13",
     "@teselagen/react-list": "0.8.18",
     "@teselagen/sequence-utils": "0.3.32",
-    "@teselagen/ui": "0.9.6",
+    "@teselagen/ui": "0.10.5",
     "@use-gesture/react": "10.3.0",
     "biomsa": "^0.2.4",
     "classnames": "^2.3.2",

package/src/AlignmentView/AlignmentVisibilityTool.js

@@ -9,8 +9,7 @@ import {
 } from "@blueprintjs/core";
 import React from "react";
 import { map, startCase } from "lodash-es";
-import pureNoFunc from "../utils/pureNoFunc";
-// import { fullSequenceTranslationMenu } from "../MenuBar/viewSubmenu";
+import { pureNoFunc } from "@teselagen/ui";
 
 export default pureNoFunc(function AlignmentVisibilityTool(props) {
   return (

package/src/CircularView/Caret.js

@@ -3,7 +3,7 @@ import { getRangeAngles } from "@teselagen/range-utils";
 import PositionAnnotationOnCircle from "./PositionAnnotationOnCircle";
 import React from "react";
 import draggableClassnames from "../constants/draggableClassnames";
-import pureNoFunc from "../utils/pureNoFunc";
+import { pureNoFunc } from "@teselagen/ui";
 import { getSelectionMessage } from "../utils/editorUtils";
 
 function Caret({

package/src/CircularView/Cutsites.js

@@ -4,7 +4,7 @@ import PositionAnnotationOnCircle from "./PositionAnnotationOnCircle";
 import React from "react";
 import each from "lodash/each";
 import withHover from "../helperComponents/withHover";
-import pureNoFunc from "../utils/pureNoFunc";
+import { pureNoFunc } from "@teselagen/ui";
 
 function Cutsites({
   radius,

package/src/CircularView/SelectionLayer.js

@@ -5,7 +5,7 @@ import getRangeAngles from "./getRangeAnglesSpecial";
 import PositionAnnotationOnCircle from "./PositionAnnotationOnCircle";
 import React from "react";
 import draggableClassnames from "../constants/draggableClassnames";
-import pureNoFunc from "../utils/pureNoFunc";
+import { pureNoFunc } from "@teselagen/ui";
 import {
   getSelectionMessage,
   preventDefaultStopPropagation

package/src/Editor/darkmode.css

@@ -61,6 +61,9 @@
 .bp3-dark .alignmentViewTrackContainer text {
   fill: #f5f8fa !important;
 }
+.bp3-dark [data-tick-mark] {
+  fill: #f5f8fa !important;
+}
 
 /* .bp3-dark .veRowViewAxis text {
   stroke: #f5f8fa !important;

package/src/RowItem/Axis.js

@@ -148,4 +148,3 @@ const Axis = function (props) {
 
 // export default Axis
 export default view(Axis);
-// export default pureNoFunc(Axis);

package/src/RowItem/Caret/index.js

@@ -1,6 +1,5 @@
 import React from "react";
 import classnames from "classnames";
-// import pure from "../../utils/pureNoFunc";
 import "./style.css";
 import { getSelectionMessage } from "../../utils/editorUtils";
 // import draggableClassnames from "../../constants/draggableClassnames";

package/src/RowItem/Cutsites.js

@@ -4,7 +4,7 @@ import React from "react";
 import areNonNegativeIntegers from "validate.io-nonnegative-integer-array";
 import { getOverlapsOfPotentiallyCircularRanges } from "@teselagen/range-utils";
 import getXStartAndWidthOfRangeWrtRow from "./getXStartAndWidthOfRangeWrtRow";
-import pureNoFunc from "../utils/pureNoFunc";
+import { pureNoFunc } from "@teselagen/ui";
 import { connectToEditor } from "../withEditorProps";
 
 let snipStyle = {

package/src/RowItem/DeletionLayers/index.js

@@ -1,8 +1,7 @@
 import AnnotationPositioner from "../AnnotationPositioner";
 import AnnotationContainerHolder from "../AnnotationContainerHolder";
 import React from "react";
-import pureNoFunc from "../../utils/pureNoFunc";
-
+import { pureNoFunc } from "@teselagen/ui";
 import "./style.css";
 
 import getXStartAndWidthOfRangeWrtRow from "../getXStartAndWidthOfRangeWrtRow";

package/src/RowItem/SelectionLayer/index.js

@@ -2,8 +2,7 @@
 import draggableClassnames from "../../constants/draggableClassnames";
 import React from "react";
 import Caret from "../Caret";
-import pureNoFunc from "../../utils/pureNoFunc";
-
+import { pureNoFunc } from "@teselagen/ui";
 import "./style.css";
 
 import getXStartAndWidthOfRangeWrtRow from "../getXStartAndWidthOfRangeWrtRow";

package/src/RowItem/Translations/AASliver.js

@@ -1,6 +1,6 @@
 // import PropTypes from "prop-types";
 import React from "react";
-import pureNoFunc from "../../utils/pureNoFunc";
+import { pureNoFunc } from "@teselagen/ui";
 
 function AASliver(props) {
   const {

package/src/RowItem/Translations/Translation.js

@@ -4,7 +4,7 @@ import {
   zeroSubrangeByContainerRange
 } from "@teselagen/range-utils";
 import AASliver from "./AASliver";
-import pureNoFunc from "../../utils/pureNoFunc";
+import { pureNoFunc } from "@teselagen/ui";
 import { proteinAlphabet } from "@teselagen/sequence-utils";
 
 class Translation extends React.Component {

package/src/utils/useFormValue.js

@@ -3,5 +3,6 @@ import { useSelector } from "react-redux";
 import { get } from "lodash";
 
 export const useFormValue = (formName, field) => {
-  return useSelector(state => get(state.form?.[formName]?.values, field));
+  const formValSelector = state => get(state.form?.[formName]?.values, field);
+  return useSelector(formValSelector);
 };

package/src/withEditorInteractions/createSequenceInputPopup.js

@@ -221,6 +221,10 @@ export default function createSequenceInputPopup(props) {
   // function closeInput() {
   //   sequenceInputBubble.remove();
   // }
+  if (document.getElementById("sequenceInputBubble")) {
+    // remove the old one if it exists
+    document.getElementById("sequenceInputBubble").outerHTML = "";
+  }
   div = document.createElement("div");
   div.style.zIndex = "400000";
   div.id = "sequenceInputBubble";

package/src/withEditorInteractions/index.js

@@ -238,8 +238,12 @@ function VectorInteractionHOC(Component /* options */) {
           sequence: clipboardData.getData("text/plain") || e.target.value
         };
       }
-      if (sequenceData.isProtein && !seqDataToInsert.proteinSequence) {
-        seqDataToInsert.proteinSequence = seqDataToInsert.sequence;
+      if (sequenceData.isProtein) {
+        seqDataToInsert.isProtein = true;
+
+        if (!seqDataToInsert.proteinSequence) {
+          seqDataToInsert.proteinSequence = seqDataToInsert.sequence;
+        }
       }
 
       if (