@teselagen/ove 0.7.38 → 0.8.2

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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.38",
+  "version": "0.8.2",
   "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.3",
     "@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/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);
 };