@teselagen/ove 0.7.36 → 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 {
@@ -11520,22 +11558,30 @@ path.partWithSelectedTag {
   overflow: auto;
   max-height: 50vh;
 }
-/* .veFindBar {
-  z-index: 20000;
+.veFindBar {
+  background: #ffffff;
   border-bottom: 1px solid lightgrey;
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-} */
+}
+
 .veFindBar > .bp3-control {
   margin-bottom: 0px;
 }
 .veFindBar > * {
-  margin-right: 10px;
   width: fit-content;
 }
 
+.bp3-dark .veFindBar {
+  border-radius: 5px;
+  background: #30404d !important;
+  border-bottom: 1px solid #202b33 !important;
+  border-left: 1px solid #202b33 !important;
+  border-right: 1px solid #202b33 !important;
+}
+
 .ve-find-options-popover > * {
   margin: 10px 5px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.7.36",
+  "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/FindBar/index.js

@@ -270,19 +270,13 @@ export class FindBar extends React.Component {
               }
             : {
                 position: "fixed",
-                top: 0,
+                top: 120,
                 right: 25,
                 padding: 10,
                 display: "flex",
-                alignItems: "center",
+                alignItems: "start",
                 paddingBottom: 5,
-                background: "white",
-                zIndex: "20000",
-                borderBottom: "1px solid lightgrey",
-                borderLeft: "1px solid lightgrey",
-                borderRight: "1px solid lightgrey",
-                borderBottomLeftRadius: "5px",
-                borderBottomRightRadius: "5px"
+                zIndex: 20000
               }
         }
         className="veFindBar"
@@ -295,7 +289,10 @@ export class FindBar extends React.Component {
               autoFocus
               style={{
                 resize: "vertical",
-                ...(!isInline && { width: 350, minHeight: 70 })
+                ...(!isInline && {
+                  width: 350,
+                  height: 190
+                })
               }}
               className="tg-find-tool-input"
               inputRef={n => {
@@ -347,12 +344,10 @@ export class FindBar extends React.Component {
         {!isInline && (
           <div
             style={{
+              marginLeft: 10,
               display: "flex",
-              maxWidth: "400px",
-              flexWrap: "wrap",
-              justifyContent: "space-around",
-              alignItems: "stretch",
-              height: "76px"
+              flexDirection: "column",
+              gap: 5
             }}
           >
             {rightEl}
@@ -362,7 +357,7 @@ export class FindBar extends React.Component {
         {!isInline && (
           <Button
             minimal
-            style={{ position: "absolute", bottom: 0, right: -10 }}
+            style={{ position: "absolute", bottom: 0, right: 0 }}
             onClick={toggleFindTool}
             icon="cross"
           />

package/src/FindBar/style.css

@@ -1,19 +1,27 @@
-/* .veFindBar {
-  z-index: 20000;
+.veFindBar {
+  background: #ffffff;
   border-bottom: 1px solid lightgrey;
   border-left: 1px solid lightgrey;
   border-right: 1px solid lightgrey;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
-} */
+}
+
 .veFindBar > .bp3-control {
   margin-bottom: 0px;
 }
 .veFindBar > * {
-  margin-right: 10px;
   width: fit-content;
 }
 
+.bp3-dark .veFindBar {
+  border-radius: 5px;
+  background: #30404d !important;
+  border-bottom: 1px solid #202b33 !important;
+  border-left: 1px solid #202b33 !important;
+  border-right: 1px solid #202b33 !important;
+}
+
 .ve-find-options-popover > * {
   margin: 10px 5px;
 }

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);
 };