@teselagen/ove 0.8.26 → 0.8.27

package/RowItem/StackedAnnotations/PointedAnnotation.d.ts

@@ -1,2 +1,57 @@
-declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+import { default as React } from '../../../../../node_modules/react';
+declare const _default: {
+    new (props: any): {
+        handleMouseOver: (e: any) => void;
+        handleMouseLeave: (e: any) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    new (props: any, context: any): {
+        handleMouseOver: (e: any) => void;
+        handleMouseLeave: (e: any) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    contextType: React.Context<{
+        hoveredId: string;
+    }>;
+};
 export default _default;

package/helperComponents/withHover.d.ts

@@ -1,11 +1,71 @@
 import { default as React } from '../../../../node_modules/react';
 export function withHoveredIdFromContext(Component: any): (props: any) => import("react/jsx-runtime").JSX.Element;
+export function hoveredAnnotationUpdate(id: any, { editorName }?: {
+    editorName?: string | undefined;
+}): void;
+export function hoveredAnnotationClear(clear: any, { editorName }?: {
+    editorName?: string | undefined;
+}): void;
+export default function withHover(WrappedComponent: any): {
+    new (props: any): {
+        handleMouseOver: (e: any) => void;
+        handleMouseLeave: (e: any) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    new (props: any, context: any): {
+        handleMouseOver: (e: any) => void;
+        handleMouseLeave: (e: any) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    contextType: React.Context<{
+        hoveredId: string;
+    }>;
+};
 export const HoveredIdContext: React.Context<{
     hoveredId: string;
 }>;
 export namespace hoveredAnnEasyStore {
     let hoveredAnn: undefined;
     let selectedAnn: undefined;
+    let hoveredIds: {};
 }
-declare const _default: import('../../../../node_modules/redux').Func0<(props: any) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/index.cjs.js

@@ -72564,25 +72564,6 @@ const frameTranslations$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   frameTranslationToggleOn,
   getMinimumOrfSize: getMinimumOrfSize$1
 }, Symbol.toStringTag, { value: "Module" }));
-const hoveredAnnotationUpdate = createMetaAction("HOVEREDANNOTATIONUPDATE");
-const hoveredAnnotationClear = createMetaAction("HOVEREDANNOTATIONCLEAR");
-const hoveredAnnotation = createReducer(
-  {
-    [hoveredAnnotationUpdate]: (state2, payload) => {
-      return payload || null;
-    },
-    [hoveredAnnotationClear]: () => {
-      return "";
-    }
-  },
-  ""
-);
-const hoveredAnnotationActions = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: hoveredAnnotation,
-  hoveredAnnotationClear,
-  hoveredAnnotationUpdate
-}, Symbol.toStringTag, { value: "Module" }));
 const minimumOrfSizeUpdate = createMetaAction("minimumOrfSizeUpdate");
 const minimumOrfSize = createReducer(
   {
@@ -97430,7 +97411,6 @@ const subReducers = {
   toolBar: toolBar$1,
   findTool: findTool$1,
   frameTranslations: frameTranslations$1,
-  hoveredAnnotation: hoveredAnnotationActions,
   minimumOrfSize: minimumOrfSize$1,
   panelsShown: panelsShown$1,
   propertiesTool: propertiesTool$1,
@@ -97554,7 +97534,7 @@ const makeStore = /* @__PURE__ */ __name(() => {
     //   replacer: (key, value) => {
     //   }
     // },
-    actionsDenylist: ["HOVEREDANNOTATIONUPDATE", "HOVEREDANNOTATIONCLEAR"]
+    actionsDenylist: []
   }) || redux.compose;
   const store2 = redux.createStore(
     redux.combineReducers({
@@ -109518,85 +109498,105 @@ const HoveredIdContext = React.createContext({
   hoveredId: ""
   // default value
 });
-function withHoveredIdFromContext(Component) {
-  return /* @__PURE__ */ __name(function HoveredIdComponent(props) {
-    return /* @__PURE__ */ React.createElement(HoveredIdContext.Consumer, null, (contexts) => /* @__PURE__ */ React.createElement(Component, __spreadValues(__spreadValues({}, props), contexts)));
-  }, "HoveredIdComponent");
-}
-__name(withHoveredIdFromContext, "withHoveredIdFromContext");
 const hoveredAnnEasyStore = store$1({
   hoveredAnn: void 0,
-  selectedAnn: void 0
+  selectedAnn: void 0,
+  // Per-editor hovered annotation IDs
+  hoveredIds: {}
 });
-const withHover = redux.compose(
-  withHoveredIdFromContext,
-  branch(
-    ({ noRedux }) => !noRedux,
-    reactRedux.connect(function(state2, {
-      id: id2,
-      editorName = "StandaloneEditor",
-      className,
-      hoveredId: hoveredIdFromContext,
-      passHoveredId
-    }) {
-      if (!editorName) {
-        console.warn(
-          "please pass an editorName to the withHover() wrapped component"
-        );
-      }
-      const editorState = state2.VectorEditor[editorName] || {};
-      const hoveredId = editorState.hoveredAnnotation || hoveredIdFromContext;
-      const isIdHashmap = typeof id2 === "object";
-      const hovered = !!(isIdHashmap ? id2[hoveredId] : hoveredId === id2);
-      const newClassName = classNames(className, "hoverHelper", {
-        veAnnotationHovered: hovered
-      });
-      const toReturn = {
-        hovered,
-        className: newClassName
-      };
-      if (hovered && passHoveredId) {
-        toReturn.hoveredId = hoveredId;
+function hoveredAnnotationUpdate(id2, { editorName = "StandaloneEditor" } = {}) {
+  hoveredAnnEasyStore.hoveredIds[editorName] = id2;
+}
+__name(hoveredAnnotationUpdate, "hoveredAnnotationUpdate");
+function hoveredAnnotationClear(clear3, { editorName = "StandaloneEditor" } = {}) {
+  hoveredAnnEasyStore.hoveredIds[editorName] = "";
+}
+__name(hoveredAnnotationClear, "hoveredAnnotationClear");
+function withHover(WrappedComponent) {
+  var _a2;
+  const HoverComponent = view(
+    (_a2 = class extends React.Component {
+      constructor() {
+        super(...arguments);
+        __publicField(this, "handleMouseOver", /* @__PURE__ */ __name((e) => {
+          const target = e.target;
+          let alreadyHandled = false;
+          let currentElement = target;
+          while (currentElement) {
+            if (currentElement === e.currentTarget) {
+              break;
+            }
+            if (currentElement.classList.contains("hoverHelper")) {
+              alreadyHandled = true;
+              break;
+            }
+            currentElement = currentElement.parentElement;
+          }
+          if (alreadyHandled) return;
+          const {
+            editorName = "StandaloneEditor",
+            id: id2,
+            annotation,
+            label
+          } = this.props;
+          const isIdHashmap = typeof id2 === "object";
+          const idToPass = isIdHashmap ? Object.keys(id2)[0] : id2;
+          const annot = annotation || (label == null ? void 0 : label.annotation);
+          if (modifiableTypes.includes(annot == null ? void 0 : annot.annotationTypePlural)) {
+            hoveredAnnEasyStore.hoveredAnn = annot;
+          }
+          if (window.__veDragging || window.__veScrolling) return;
+          hoveredAnnotationUpdate(idToPass, { editorName });
+        }, "handleMouseOver"));
+        __publicField(this, "handleMouseLeave", /* @__PURE__ */ __name((e) => {
+          hoveredAnnEasyStore.hoveredAnn = void 0;
+          const { editorName = "StandaloneEditor" } = this.props;
+          e.stopPropagation();
+          if (window.__veDragging || window.__veScrolling) return;
+          hoveredAnnotationClear(true, { editorName });
+        }, "handleMouseLeave"));
       }
-      return toReturn;
-    }, hoveredAnnotationActions)
-  ),
-  withHandlers({
-    onMouseOver: /* @__PURE__ */ __name((props) => function(e) {
-      var _a2;
-      const target = e.target;
-      let alreadyHandled = false;
-      let currentElement = target;
-      while (currentElement) {
-        if (currentElement === e.currentTarget) {
-          break;
-        }
-        if (currentElement.classList.contains("hoverHelper")) {
-          alreadyHandled = true;
-          break;
+      render() {
+        var _b2;
+        const _a3 = this.props, {
+          id: id2,
+          editorName = "StandaloneEditor",
+          className,
+          passHoveredId,
+          noRedux
+        } = _a3, restProps = __objRest(_a3, [
+          "id",
+          "editorName",
+          "className",
+          "passHoveredId",
+          "noRedux"
+        ]);
+        const hoveredIdFromContext = (_b2 = this.context) == null ? void 0 : _b2.hoveredId;
+        const hoveredId = hoveredAnnEasyStore.hoveredIds[editorName] || hoveredIdFromContext || "";
+        const isIdHashmap = typeof id2 === "object";
+        const hovered = !!(isIdHashmap ? id2[hoveredId] : hoveredId === id2);
+        const newClassName = classNames(className, "hoverHelper", {
+          veAnnotationHovered: hovered
+        });
+        const passedProps = __spreadProps(__spreadValues({}, restProps), {
+          id: id2,
+          editorName,
+          hovered,
+          className: newClassName,
+          onMouseOver: this.handleMouseOver,
+          onMouseLeave: this.handleMouseLeave
+        });
+        if (hovered && passHoveredId) {
+          passedProps.hoveredId = hoveredId;
         }
-        currentElement = currentElement.parentElement;
-      }
-      if (alreadyHandled) return;
-      const { editorName, id: id2, hoveredAnnotationUpdate: hoveredAnnotationUpdate2 } = props;
-      const isIdHashmap = typeof id2 === "object";
-      const idToPass = isIdHashmap ? Object.keys(id2)[0] : id2;
-      const annot = (props == null ? void 0 : props.annotation) || ((_a2 = props == null ? void 0 : props.label) == null ? void 0 : _a2.annotation);
-      if (modifiableTypes.includes(annot == null ? void 0 : annot.annotationTypePlural)) {
-        hoveredAnnEasyStore.hoveredAnn = annot;
-      }
-      if (window.__veDragging || window.__veScrolling) return;
-      hoveredAnnotationUpdate2 && hoveredAnnotationUpdate2(idToPass, { editorName });
-    }, "onMouseOver"),
-    onMouseLeave: /* @__PURE__ */ __name((props) => (e) => {
-      hoveredAnnEasyStore.hoveredAnn = void 0;
-      const { editorName, hoveredAnnotationClear: hoveredAnnotationClear2 } = props;
-      e.stopPropagation();
-      if (window.__veDragging || window.__veScrolling) return;
-      hoveredAnnotationClear2 && hoveredAnnotationClear2(true, { editorName });
-    }, "onMouseLeave")
-  })
-);
+        return /* @__PURE__ */ React.createElement(WrappedComponent, __spreadValues({}, passedProps));
+      }
+    }, __publicField(_a2, "contextType", HoveredIdContext), _a2)
+  );
+  HoverComponent.displayName = `withHover(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return HoverComponent;
+}
+__name(withHover, "withHover");
 const partOverhangs = [
   "fivePrimeOverhang",
   "fivePrimeUnderhang",
@@ -114327,12 +114327,12 @@ function Cutsites(props) {
     row,
     sequenceLength,
     topStrand,
-    hoveredAnnotation: hoveredAnnotation2
+    hoveredAnnotation
   } = props;
   const snips = [];
   const snipConnectors = [];
   Object.keys(annotationRanges).sort(
-    (a2) => annotationRanges[a2].annotation.id === hoveredAnnotation2 ? 1 : -1
+    (a2) => annotationRanges[a2].annotation.id === hoveredAnnotation ? 1 : -1
   ).forEach(function(key) {
     const annotationRange = annotationRanges[key];
     let { annotation } = annotationRange;
@@ -114351,7 +114351,7 @@ function Cutsites(props) {
     bottomSnipPosition = bottomSnipPosition && Number(bottomSnipPosition);
     upstreamTopSnip = upstreamTopSnip && Number(upstreamTopSnip);
     upstreamBottomSnip = upstreamBottomSnip && Number(upstreamBottomSnip);
-    const isHovered = annotation.id === hoveredAnnotation2;
+    const isHovered = annotation.id === hoveredAnnotation;
     snipStyle = __spreadProps(__spreadValues({}, snipStyle), {
       background: annotation.restrictionEnzyme.color
     });
@@ -114468,8 +114468,8 @@ function Cutsites(props) {
 }
 __name(Cutsites, "Cutsites");
 const Cutsites$1 = pure(
-  connectToEditor(({ hoveredAnnotation: hoveredAnnotation2 }) => ({
-    hoveredAnnotation: hoveredAnnotation2
+  connectToEditor(({ hoveredAnnotation }) => ({
+    hoveredAnnotation
   }))(Cutsites)
 );
 const useShowChromQualScores = /* @__PURE__ */ __name(() => {
@@ -114868,11 +114868,11 @@ const defaultCharWidth = 9;
 const defaultContainerWidth = 400;
 const defaultMarginWidth$1 = 50;
 const CutsiteSelectionLayers = connectToEditor(
-  ({ hoveredAnnotation: hoveredAnnotation2 }) => ({
-    hoveredAnnotation: hoveredAnnotation2
+  ({ hoveredAnnotation }) => ({
+    hoveredAnnotation
   })
 )(/* @__PURE__ */ __name(function CutsiteSelectionLayersInner({
-  hoveredAnnotation: hoveredAnnotation2,
+  hoveredAnnotation,
   cutsites,
   annotationCommonProps,
   showReverseSequence,
@@ -114880,9 +114880,9 @@ const CutsiteSelectionLayers = connectToEditor(
   alignmentData,
   row
 }) {
-  return Object.keys(cutsites).sort((a2) => cutsites[a2].id === hoveredAnnotation2 ? 1 : -1).map(function(id2, index2) {
+  return Object.keys(cutsites).sort((a2) => cutsites[a2].id === hoveredAnnotation ? 1 : -1).map(function(id2, index2) {
     const cutsite = cutsites[id2];
-    const isHovered = hoveredAnnotation2 === cutsite.id;
+    const isHovered = hoveredAnnotation === cutsite.id;
     const layer = cutsite.annotation.recognitionSiteRange;
     return layer.start > -1 && /* @__PURE__ */ React.createElement(
       SelectionLayer$3,
@@ -116986,7 +116986,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.26";
+const version = "0.8.27";
 const packageJson = {
   version
 };

package/index.es.js

@@ -72546,25 +72546,6 @@ const frameTranslations$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object
   frameTranslationToggleOn,
   getMinimumOrfSize: getMinimumOrfSize$1
 }, Symbol.toStringTag, { value: "Module" }));
-const hoveredAnnotationUpdate = createMetaAction("HOVEREDANNOTATIONUPDATE");
-const hoveredAnnotationClear = createMetaAction("HOVEREDANNOTATIONCLEAR");
-const hoveredAnnotation = createReducer(
-  {
-    [hoveredAnnotationUpdate]: (state2, payload) => {
-      return payload || null;
-    },
-    [hoveredAnnotationClear]: () => {
-      return "";
-    }
-  },
-  ""
-);
-const hoveredAnnotationActions = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: hoveredAnnotation,
-  hoveredAnnotationClear,
-  hoveredAnnotationUpdate
-}, Symbol.toStringTag, { value: "Module" }));
 const minimumOrfSizeUpdate = createMetaAction("minimumOrfSizeUpdate");
 const minimumOrfSize = createReducer(
   {
@@ -97412,7 +97393,6 @@ const subReducers = {
   toolBar: toolBar$1,
   findTool: findTool$1,
   frameTranslations: frameTranslations$1,
-  hoveredAnnotation: hoveredAnnotationActions,
   minimumOrfSize: minimumOrfSize$1,
   panelsShown: panelsShown$1,
   propertiesTool: propertiesTool$1,
@@ -97536,7 +97516,7 @@ const makeStore = /* @__PURE__ */ __name(() => {
     //   replacer: (key, value) => {
     //   }
     // },
-    actionsDenylist: ["HOVEREDANNOTATIONUPDATE", "HOVEREDANNOTATIONCLEAR"]
+    actionsDenylist: []
   }) || compose$1;
   const store2 = createStore$2(
     combineReducers({
@@ -109500,85 +109480,105 @@ const HoveredIdContext = React__default.createContext({
   hoveredId: ""
   // default value
 });
-function withHoveredIdFromContext(Component2) {
-  return /* @__PURE__ */ __name(function HoveredIdComponent(props) {
-    return /* @__PURE__ */ React__default.createElement(HoveredIdContext.Consumer, null, (contexts) => /* @__PURE__ */ React__default.createElement(Component2, __spreadValues(__spreadValues({}, props), contexts)));
-  }, "HoveredIdComponent");
-}
-__name(withHoveredIdFromContext, "withHoveredIdFromContext");
 const hoveredAnnEasyStore = store$1({
   hoveredAnn: void 0,
-  selectedAnn: void 0
+  selectedAnn: void 0,
+  // Per-editor hovered annotation IDs
+  hoveredIds: {}
 });
-const withHover = compose$1(
-  withHoveredIdFromContext,
-  branch(
-    ({ noRedux }) => !noRedux,
-    connect(function(state2, {
-      id: id2,
-      editorName = "StandaloneEditor",
-      className,
-      hoveredId: hoveredIdFromContext,
-      passHoveredId
-    }) {
-      if (!editorName) {
-        console.warn(
-          "please pass an editorName to the withHover() wrapped component"
-        );
-      }
-      const editorState = state2.VectorEditor[editorName] || {};
-      const hoveredId = editorState.hoveredAnnotation || hoveredIdFromContext;
-      const isIdHashmap = typeof id2 === "object";
-      const hovered = !!(isIdHashmap ? id2[hoveredId] : hoveredId === id2);
-      const newClassName = classNames(className, "hoverHelper", {
-        veAnnotationHovered: hovered
-      });
-      const toReturn = {
-        hovered,
-        className: newClassName
-      };
-      if (hovered && passHoveredId) {
-        toReturn.hoveredId = hoveredId;
+function hoveredAnnotationUpdate(id2, { editorName = "StandaloneEditor" } = {}) {
+  hoveredAnnEasyStore.hoveredIds[editorName] = id2;
+}
+__name(hoveredAnnotationUpdate, "hoveredAnnotationUpdate");
+function hoveredAnnotationClear(clear3, { editorName = "StandaloneEditor" } = {}) {
+  hoveredAnnEasyStore.hoveredIds[editorName] = "";
+}
+__name(hoveredAnnotationClear, "hoveredAnnotationClear");
+function withHover(WrappedComponent) {
+  var _a2;
+  const HoverComponent = view(
+    (_a2 = class extends React__default.Component {
+      constructor() {
+        super(...arguments);
+        __publicField(this, "handleMouseOver", /* @__PURE__ */ __name((e) => {
+          const target = e.target;
+          let alreadyHandled = false;
+          let currentElement = target;
+          while (currentElement) {
+            if (currentElement === e.currentTarget) {
+              break;
+            }
+            if (currentElement.classList.contains("hoverHelper")) {
+              alreadyHandled = true;
+              break;
+            }
+            currentElement = currentElement.parentElement;
+          }
+          if (alreadyHandled) return;
+          const {
+            editorName = "StandaloneEditor",
+            id: id2,
+            annotation,
+            label
+          } = this.props;
+          const isIdHashmap = typeof id2 === "object";
+          const idToPass = isIdHashmap ? Object.keys(id2)[0] : id2;
+          const annot = annotation || (label == null ? void 0 : label.annotation);
+          if (modifiableTypes.includes(annot == null ? void 0 : annot.annotationTypePlural)) {
+            hoveredAnnEasyStore.hoveredAnn = annot;
+          }
+          if (window.__veDragging || window.__veScrolling) return;
+          hoveredAnnotationUpdate(idToPass, { editorName });
+        }, "handleMouseOver"));
+        __publicField(this, "handleMouseLeave", /* @__PURE__ */ __name((e) => {
+          hoveredAnnEasyStore.hoveredAnn = void 0;
+          const { editorName = "StandaloneEditor" } = this.props;
+          e.stopPropagation();
+          if (window.__veDragging || window.__veScrolling) return;
+          hoveredAnnotationClear(true, { editorName });
+        }, "handleMouseLeave"));
       }
-      return toReturn;
-    }, hoveredAnnotationActions)
-  ),
-  withHandlers({
-    onMouseOver: /* @__PURE__ */ __name((props) => function(e) {
-      var _a2;
-      const target = e.target;
-      let alreadyHandled = false;
-      let currentElement = target;
-      while (currentElement) {
-        if (currentElement === e.currentTarget) {
-          break;
-        }
-        if (currentElement.classList.contains("hoverHelper")) {
-          alreadyHandled = true;
-          break;
+      render() {
+        var _b2;
+        const _a3 = this.props, {
+          id: id2,
+          editorName = "StandaloneEditor",
+          className,
+          passHoveredId,
+          noRedux
+        } = _a3, restProps = __objRest(_a3, [
+          "id",
+          "editorName",
+          "className",
+          "passHoveredId",
+          "noRedux"
+        ]);
+        const hoveredIdFromContext = (_b2 = this.context) == null ? void 0 : _b2.hoveredId;
+        const hoveredId = hoveredAnnEasyStore.hoveredIds[editorName] || hoveredIdFromContext || "";
+        const isIdHashmap = typeof id2 === "object";
+        const hovered = !!(isIdHashmap ? id2[hoveredId] : hoveredId === id2);
+        const newClassName = classNames(className, "hoverHelper", {
+          veAnnotationHovered: hovered
+        });
+        const passedProps = __spreadProps(__spreadValues({}, restProps), {
+          id: id2,
+          editorName,
+          hovered,
+          className: newClassName,
+          onMouseOver: this.handleMouseOver,
+          onMouseLeave: this.handleMouseLeave
+        });
+        if (hovered && passHoveredId) {
+          passedProps.hoveredId = hoveredId;
         }
-        currentElement = currentElement.parentElement;
-      }
-      if (alreadyHandled) return;
-      const { editorName, id: id2, hoveredAnnotationUpdate: hoveredAnnotationUpdate2 } = props;
-      const isIdHashmap = typeof id2 === "object";
-      const idToPass = isIdHashmap ? Object.keys(id2)[0] : id2;
-      const annot = (props == null ? void 0 : props.annotation) || ((_a2 = props == null ? void 0 : props.label) == null ? void 0 : _a2.annotation);
-      if (modifiableTypes.includes(annot == null ? void 0 : annot.annotationTypePlural)) {
-        hoveredAnnEasyStore.hoveredAnn = annot;
-      }
-      if (window.__veDragging || window.__veScrolling) return;
-      hoveredAnnotationUpdate2 && hoveredAnnotationUpdate2(idToPass, { editorName });
-    }, "onMouseOver"),
-    onMouseLeave: /* @__PURE__ */ __name((props) => (e) => {
-      hoveredAnnEasyStore.hoveredAnn = void 0;
-      const { editorName, hoveredAnnotationClear: hoveredAnnotationClear2 } = props;
-      e.stopPropagation();
-      if (window.__veDragging || window.__veScrolling) return;
-      hoveredAnnotationClear2 && hoveredAnnotationClear2(true, { editorName });
-    }, "onMouseLeave")
-  })
-);
+        return /* @__PURE__ */ React__default.createElement(WrappedComponent, __spreadValues({}, passedProps));
+      }
+    }, __publicField(_a2, "contextType", HoveredIdContext), _a2)
+  );
+  HoverComponent.displayName = `withHover(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+  return HoverComponent;
+}
+__name(withHover, "withHover");
 const partOverhangs = [
   "fivePrimeOverhang",
   "fivePrimeUnderhang",
@@ -114309,12 +114309,12 @@ function Cutsites(props) {
     row,
     sequenceLength,
     topStrand,
-    hoveredAnnotation: hoveredAnnotation2
+    hoveredAnnotation
   } = props;
   const snips = [];
   const snipConnectors = [];
   Object.keys(annotationRanges).sort(
-    (a2) => annotationRanges[a2].annotation.id === hoveredAnnotation2 ? 1 : -1
+    (a2) => annotationRanges[a2].annotation.id === hoveredAnnotation ? 1 : -1
   ).forEach(function(key) {
     const annotationRange = annotationRanges[key];
     let { annotation } = annotationRange;
@@ -114333,7 +114333,7 @@ function Cutsites(props) {
     bottomSnipPosition = bottomSnipPosition && Number(bottomSnipPosition);
     upstreamTopSnip = upstreamTopSnip && Number(upstreamTopSnip);
     upstreamBottomSnip = upstreamBottomSnip && Number(upstreamBottomSnip);
-    const isHovered = annotation.id === hoveredAnnotation2;
+    const isHovered = annotation.id === hoveredAnnotation;
     snipStyle = __spreadProps(__spreadValues({}, snipStyle), {
       background: annotation.restrictionEnzyme.color
     });
@@ -114450,8 +114450,8 @@ function Cutsites(props) {
 }
 __name(Cutsites, "Cutsites");
 const Cutsites$1 = pure(
-  connectToEditor(({ hoveredAnnotation: hoveredAnnotation2 }) => ({
-    hoveredAnnotation: hoveredAnnotation2
+  connectToEditor(({ hoveredAnnotation }) => ({
+    hoveredAnnotation
   }))(Cutsites)
 );
 const useShowChromQualScores = /* @__PURE__ */ __name(() => {
@@ -114850,11 +114850,11 @@ const defaultCharWidth = 9;
 const defaultContainerWidth = 400;
 const defaultMarginWidth$1 = 50;
 const CutsiteSelectionLayers = connectToEditor(
-  ({ hoveredAnnotation: hoveredAnnotation2 }) => ({
-    hoveredAnnotation: hoveredAnnotation2
+  ({ hoveredAnnotation }) => ({
+    hoveredAnnotation
   })
 )(/* @__PURE__ */ __name(function CutsiteSelectionLayersInner({
-  hoveredAnnotation: hoveredAnnotation2,
+  hoveredAnnotation,
   cutsites,
   annotationCommonProps,
   showReverseSequence,
@@ -114862,9 +114862,9 @@ const CutsiteSelectionLayers = connectToEditor(
   alignmentData,
   row
 }) {
-  return Object.keys(cutsites).sort((a2) => cutsites[a2].id === hoveredAnnotation2 ? 1 : -1).map(function(id2, index2) {
+  return Object.keys(cutsites).sort((a2) => cutsites[a2].id === hoveredAnnotation ? 1 : -1).map(function(id2, index2) {
     const cutsite = cutsites[id2];
-    const isHovered = hoveredAnnotation2 === cutsite.id;
+    const isHovered = hoveredAnnotation === cutsite.id;
     const layer = cutsite.annotation.recognitionSiteRange;
     return layer.start > -1 && /* @__PURE__ */ React__default.createElement(
       SelectionLayer$3,
@@ -116968,7 +116968,7 @@ function showFileDialog({ multiple = false, onSelect }) {
   input.click();
 }
 __name(showFileDialog, "showFileDialog");
-const version = "0.8.26";
+const version = "0.8.27";
 const packageJson = {
   version
 };

package/index.umd.js

@@ -101467,25 +101467,6 @@ ${latestSubscriptionCallbackError.current.stack}
     frameTranslationToggleOn,
     getMinimumOrfSize: getMinimumOrfSize$1
   }, Symbol.toStringTag, { value: "Module" }));
-  const hoveredAnnotationUpdate = createMetaAction("HOVEREDANNOTATIONUPDATE");
-  const hoveredAnnotationClear = createMetaAction("HOVEREDANNOTATIONCLEAR");
-  const hoveredAnnotation = createReducer(
-    {
-      [hoveredAnnotationUpdate]: (state2, payload) => {
-        return payload || null;
-      },
-      [hoveredAnnotationClear]: () => {
-        return "";
-      }
-    },
-    ""
-  );
-  const hoveredAnnotationActions = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    default: hoveredAnnotation,
-    hoveredAnnotationClear,
-    hoveredAnnotationUpdate
-  }, Symbol.toStringTag, { value: "Module" }));
   const minimumOrfSizeUpdate = createMetaAction("minimumOrfSizeUpdate");
   const minimumOrfSize = createReducer(
     {
@@ -125578,7 +125559,6 @@ ${seq.sequence}
     toolBar: toolBar$1,
     findTool: findTool$1,
     frameTranslations: frameTranslations$1,
-    hoveredAnnotation: hoveredAnnotationActions,
     minimumOrfSize: minimumOrfSize$1,
     panelsShown: panelsShown$1,
     propertiesTool: propertiesTool$1,
@@ -125702,7 +125682,7 @@ ${seq.sequence}
       //   replacer: (key, value) => {
       //   }
       // },
-      actionsDenylist: ["HOVEREDANNOTATIONUPDATE", "HOVEREDANNOTATIONCLEAR"]
+      actionsDenylist: []
     }) || compose$1;
     const store2 = createStore$2(
       combineReducers({
@@ -137666,85 +137646,105 @@ ${seq.sequence}
     hoveredId: ""
     // default value
   });
-  function withHoveredIdFromContext(Component) {
-    return /* @__PURE__ */ __name(function HoveredIdComponent(props) {
-      return /* @__PURE__ */ React.createElement(HoveredIdContext.Consumer, null, (contexts) => /* @__PURE__ */ React.createElement(Component, __spreadValues(__spreadValues({}, props), contexts)));
-    }, "HoveredIdComponent");
-  }
-  __name(withHoveredIdFromContext, "withHoveredIdFromContext");
   const hoveredAnnEasyStore = store$1({
     hoveredAnn: void 0,
-    selectedAnn: void 0
+    selectedAnn: void 0,
+    // Per-editor hovered annotation IDs
+    hoveredIds: {}
   });
-  const withHover = compose$1(
-    withHoveredIdFromContext,
-    branch(
-      ({ noRedux }) => !noRedux,
-      connect(function(state2, {
-        id: id2,
-        editorName = "StandaloneEditor",
-        className,
-        hoveredId: hoveredIdFromContext,
-        passHoveredId
-      }) {
-        if (!editorName) {
-          console.warn(
-            "please pass an editorName to the withHover() wrapped component"
-          );
-        }
-        const editorState = state2.VectorEditor[editorName] || {};
-        const hoveredId = editorState.hoveredAnnotation || hoveredIdFromContext;
-        const isIdHashmap = typeof id2 === "object";
-        const hovered = !!(isIdHashmap ? id2[hoveredId] : hoveredId === id2);
-        const newClassName = classNames$1(className, "hoverHelper", {
-          veAnnotationHovered: hovered
-        });
-        const toReturn = {
-          hovered,
-          className: newClassName
-        };
-        if (hovered && passHoveredId) {
-          toReturn.hoveredId = hoveredId;
+  function hoveredAnnotationUpdate(id2, { editorName = "StandaloneEditor" } = {}) {
+    hoveredAnnEasyStore.hoveredIds[editorName] = id2;
+  }
+  __name(hoveredAnnotationUpdate, "hoveredAnnotationUpdate");
+  function hoveredAnnotationClear(clear, { editorName = "StandaloneEditor" } = {}) {
+    hoveredAnnEasyStore.hoveredIds[editorName] = "";
+  }
+  __name(hoveredAnnotationClear, "hoveredAnnotationClear");
+  function withHover(WrappedComponent) {
+    var _a2;
+    const HoverComponent = view(
+      (_a2 = class extends React.Component {
+        constructor() {
+          super(...arguments);
+          __publicField(this, "handleMouseOver", /* @__PURE__ */ __name((e2) => {
+            const target = e2.target;
+            let alreadyHandled = false;
+            let currentElement = target;
+            while (currentElement) {
+              if (currentElement === e2.currentTarget) {
+                break;
+              }
+              if (currentElement.classList.contains("hoverHelper")) {
+                alreadyHandled = true;
+                break;
+              }
+              currentElement = currentElement.parentElement;
+            }
+            if (alreadyHandled) return;
+            const {
+              editorName = "StandaloneEditor",
+              id: id2,
+              annotation,
+              label
+            } = this.props;
+            const isIdHashmap = typeof id2 === "object";
+            const idToPass = isIdHashmap ? Object.keys(id2)[0] : id2;
+            const annot = annotation || (label == null ? void 0 : label.annotation);
+            if (modifiableTypes.includes(annot == null ? void 0 : annot.annotationTypePlural)) {
+              hoveredAnnEasyStore.hoveredAnn = annot;
+            }
+            if (window.__veDragging || window.__veScrolling) return;
+            hoveredAnnotationUpdate(idToPass, { editorName });
+          }, "handleMouseOver"));
+          __publicField(this, "handleMouseLeave", /* @__PURE__ */ __name((e2) => {
+            hoveredAnnEasyStore.hoveredAnn = void 0;
+            const { editorName = "StandaloneEditor" } = this.props;
+            e2.stopPropagation();
+            if (window.__veDragging || window.__veScrolling) return;
+            hoveredAnnotationClear(true, { editorName });
+          }, "handleMouseLeave"));
         }
-        return toReturn;
-      }, hoveredAnnotationActions)
-    ),
-    withHandlers({
-      onMouseOver: /* @__PURE__ */ __name((props) => function(e2) {
-        var _a2;
-        const target = e2.target;
-        let alreadyHandled = false;
-        let currentElement = target;
-        while (currentElement) {
-          if (currentElement === e2.currentTarget) {
-            break;
-          }
-          if (currentElement.classList.contains("hoverHelper")) {
-            alreadyHandled = true;
-            break;
+        render() {
+          var _b2;
+          const _a3 = this.props, {
+            id: id2,
+            editorName = "StandaloneEditor",
+            className,
+            passHoveredId,
+            noRedux
+          } = _a3, restProps = __objRest(_a3, [
+            "id",
+            "editorName",
+            "className",
+            "passHoveredId",
+            "noRedux"
+          ]);
+          const hoveredIdFromContext = (_b2 = this.context) == null ? void 0 : _b2.hoveredId;
+          const hoveredId = hoveredAnnEasyStore.hoveredIds[editorName] || hoveredIdFromContext || "";
+          const isIdHashmap = typeof id2 === "object";
+          const hovered = !!(isIdHashmap ? id2[hoveredId] : hoveredId === id2);
+          const newClassName = classNames$1(className, "hoverHelper", {
+            veAnnotationHovered: hovered
+          });
+          const passedProps = __spreadProps(__spreadValues({}, restProps), {
+            id: id2,
+            editorName,
+            hovered,
+            className: newClassName,
+            onMouseOver: this.handleMouseOver,
+            onMouseLeave: this.handleMouseLeave
+          });
+          if (hovered && passHoveredId) {
+            passedProps.hoveredId = hoveredId;
           }
-          currentElement = currentElement.parentElement;
-        }
-        if (alreadyHandled) return;
-        const { editorName, id: id2, hoveredAnnotationUpdate: hoveredAnnotationUpdate2 } = props;
-        const isIdHashmap = typeof id2 === "object";
-        const idToPass = isIdHashmap ? Object.keys(id2)[0] : id2;
-        const annot = (props == null ? void 0 : props.annotation) || ((_a2 = props == null ? void 0 : props.label) == null ? void 0 : _a2.annotation);
-        if (modifiableTypes.includes(annot == null ? void 0 : annot.annotationTypePlural)) {
-          hoveredAnnEasyStore.hoveredAnn = annot;
-        }
-        if (window.__veDragging || window.__veScrolling) return;
-        hoveredAnnotationUpdate2 && hoveredAnnotationUpdate2(idToPass, { editorName });
-      }, "onMouseOver"),
-      onMouseLeave: /* @__PURE__ */ __name((props) => (e2) => {
-        hoveredAnnEasyStore.hoveredAnn = void 0;
-        const { editorName, hoveredAnnotationClear: hoveredAnnotationClear2 } = props;
-        e2.stopPropagation();
-        if (window.__veDragging || window.__veScrolling) return;
-        hoveredAnnotationClear2 && hoveredAnnotationClear2(true, { editorName });
-      }, "onMouseLeave")
-    })
-  );
+          return /* @__PURE__ */ React.createElement(WrappedComponent, __spreadValues({}, passedProps));
+        }
+      }, __publicField(_a2, "contextType", HoveredIdContext), _a2)
+    );
+    HoverComponent.displayName = `withHover(${WrappedComponent.displayName || WrappedComponent.name || "Component"})`;
+    return HoverComponent;
+  }
+  __name(withHover, "withHover");
   const partOverhangs = [
     "fivePrimeOverhang",
     "fivePrimeUnderhang",
@@ -142425,12 +142425,12 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       row,
       sequenceLength,
       topStrand,
-      hoveredAnnotation: hoveredAnnotation2
+      hoveredAnnotation
     } = props;
     const snips = [];
     const snipConnectors = [];
     Object.keys(annotationRanges).sort(
-      (a2) => annotationRanges[a2].annotation.id === hoveredAnnotation2 ? 1 : -1
+      (a2) => annotationRanges[a2].annotation.id === hoveredAnnotation ? 1 : -1
     ).forEach(function(key) {
       const annotationRange = annotationRanges[key];
       let { annotation } = annotationRange;
@@ -142449,7 +142449,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
       bottomSnipPosition = bottomSnipPosition && Number(bottomSnipPosition);
       upstreamTopSnip = upstreamTopSnip && Number(upstreamTopSnip);
       upstreamBottomSnip = upstreamBottomSnip && Number(upstreamBottomSnip);
-      const isHovered = annotation.id === hoveredAnnotation2;
+      const isHovered = annotation.id === hoveredAnnotation;
       snipStyle = __spreadProps(__spreadValues({}, snipStyle), {
         background: annotation.restrictionEnzyme.color
       });
@@ -142566,8 +142566,8 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   }
   __name(Cutsites, "Cutsites");
   const Cutsites$1 = pure(
-    connectToEditor(({ hoveredAnnotation: hoveredAnnotation2 }) => ({
-      hoveredAnnotation: hoveredAnnotation2
+    connectToEditor(({ hoveredAnnotation }) => ({
+      hoveredAnnotation
     }))(Cutsites)
   );
   const useShowChromQualScores = /* @__PURE__ */ __name(() => {
@@ -142966,11 +142966,11 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
   const defaultContainerWidth = 400;
   const defaultMarginWidth$1 = 50;
   const CutsiteSelectionLayers = connectToEditor(
-    ({ hoveredAnnotation: hoveredAnnotation2 }) => ({
-      hoveredAnnotation: hoveredAnnotation2
+    ({ hoveredAnnotation }) => ({
+      hoveredAnnotation
     })
   )(/* @__PURE__ */ __name(function CutsiteSelectionLayersInner({
-    hoveredAnnotation: hoveredAnnotation2,
+    hoveredAnnotation,
     cutsites,
     annotationCommonProps,
     showReverseSequence,
@@ -142978,9 +142978,9 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     alignmentData,
     row
   }) {
-    return Object.keys(cutsites).sort((a2) => cutsites[a2].id === hoveredAnnotation2 ? 1 : -1).map(function(id2, index2) {
+    return Object.keys(cutsites).sort((a2) => cutsites[a2].id === hoveredAnnotation ? 1 : -1).map(function(id2, index2) {
       const cutsite = cutsites[id2];
-      const isHovered = hoveredAnnotation2 === cutsite.id;
+      const isHovered = hoveredAnnotation === cutsite.id;
       const layer = cutsite.annotation.recognitionSiteRange;
       return layer.start > -1 && /* @__PURE__ */ React.createElement(
         SelectionLayer$3,
@@ -145084,7 +145084,7 @@ Part of ${annotation.translationType} Translation from BPs ${annotation.start +
     input.click();
   }
   __name(showFileDialog, "showFileDialog");
-  const version = "0.8.26";
+  const version = "0.8.27";
   const packageJson = {
     version
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.8.26",
+  "version": "0.8.27",
   "main": "./src/index.js",
   "type": "module",
   "repository": "https://github.com/TeselaGen/tg-oss",

package/src/createVectorEditor/makeStore.js

@@ -14,7 +14,7 @@ const makeStore = () => {
         //   replacer: (key, value) => {
         //   }
         // },
-        actionsDenylist: ["HOVEREDANNOTATIONUPDATE", "HOVEREDANNOTATIONCLEAR"]
+        actionsDenylist: []
       })) ||
     compose;
 

package/src/helperComponents/withHover.js

@@ -1,10 +1,6 @@
 import classnames from "classnames";
-import { compose } from "redux";
-import { connect } from "react-redux";
 import React from "react";
-import { store } from "@risingstack/react-easy-state";
-import * as hoveredAnnotationActions from "../redux/hoveredAnnotation";
-import { withHandlers, branch } from "recompose";
+import { store, view } from "@risingstack/react-easy-state";
 import { modifiableTypes } from "@teselagen/sequence-utils";
 
 export const HoveredIdContext = React.createContext({
@@ -20,57 +16,37 @@ export function withHoveredIdFromContext(Component) {
     );
   };
 }
+
+// Easy state store for hover state management (replaces Redux)
 export const hoveredAnnEasyStore = store({
   hoveredAnn: undefined,
-  selectedAnn: undefined
+  selectedAnn: undefined,
+  // Per-editor hovered annotation IDs
+  hoveredIds: {}
 });
 
-export default compose(
-  withHoveredIdFromContext,
-  branch(
-    ({ noRedux }) => !noRedux,
-    connect(function (
-      state,
-      {
-        id,
-        editorName = "StandaloneEditor",
-        className,
-        hoveredId: hoveredIdFromContext,
-        passHoveredId
-      }
-    ) {
-      if (!editorName) {
-        console.warn(
-          "please pass an editorName to the withHover() wrapped component"
-        );
-      }
-      const editorState = state.VectorEditor[editorName] || {};
-      const hoveredId = editorState.hoveredAnnotation || hoveredIdFromContext; //we can pass a hoveredId from context in order to still use the hover functionality without being connected to redux! see http://localhost:3344/#/SimpleCircularOrLinearView for an example
-      const isIdHashmap = typeof id === "object";
-
-      const hovered = !!(isIdHashmap ? id[hoveredId] : hoveredId === id);
-      const newClassName = classnames(className, "hoverHelper", {
-        veAnnotationHovered: hovered
-      });
-      const toReturn = {
-        hovered,
-        className: newClassName
-      };
-      if (hovered && passHoveredId) {
-        //only pass hoveredId if it is hovered
-        toReturn.hoveredId = hoveredId;
-      }
-      return toReturn;
-    }, hoveredAnnotationActions)
-  ),
-  withHandlers({
-    onMouseOver: props =>
-      function (e) {
-        // loop through the target element and the parents and see if any of them have the hoverHelper class
-        // if they do, then we don't want to trigger the hover event
-        // if they don't, then we do want to trigger the hover event
-        // we should stop the loop if the target element is implementing this onMouseOver event
-        // e.stopPropagation(); //this is important otherwise hovering labels inside circular view label groups won't work
+// Helper functions to update/clear hovered annotation (replaces Redux actions)
+export function hoveredAnnotationUpdate(
+  id,
+  { editorName = "StandaloneEditor" } = {}
+) {
+  hoveredAnnEasyStore.hoveredIds[editorName] = id;
+}
+
+export function hoveredAnnotationClear(
+  clear,
+  { editorName = "StandaloneEditor" } = {}
+) {
+  hoveredAnnEasyStore.hoveredIds[editorName] = "";
+}
+
+// HOC that provides hover functionality using react-easy-state
+export default function withHover(WrappedComponent) {
+  const HoverComponent = view(
+    class extends React.Component {
+      static contextType = HoveredIdContext;
+
+      handleMouseOver = e => {
         const target = e.target;
         let alreadyHandled = false;
         let currentElement = target;
@@ -78,8 +54,6 @@ export default compose(
           if (currentElement === e.currentTarget) {
             break;
           }
-          // console.log(`currentElement:`, currentElement)
-
           if (currentElement.classList.contains("hoverHelper")) {
             alreadyHandled = true;
             break;
@@ -88,26 +62,76 @@ export default compose(
         }
         if (alreadyHandled) return;
 
-        // const alreadyHandled = e.target.classList.contains("hoverHelper");
-        const { editorName, id, hoveredAnnotationUpdate } = props;
+        const {
+          editorName = "StandaloneEditor",
+          id,
+          annotation,
+          label
+        } = this.props;
         const isIdHashmap = typeof id === "object";
         const idToPass = isIdHashmap ? Object.keys(id)[0] : id;
-        const annot = props?.annotation || props?.label?.annotation;
+        const annot = annotation || label?.annotation;
         if (modifiableTypes.includes(annot?.annotationTypePlural)) {
           hoveredAnnEasyStore.hoveredAnn = annot;
         }
-        //because the calling onHover can slow things down, we disable it if dragging or scrolling
+        // Disable hover during dragging or scrolling
         if (window.__veDragging || window.__veScrolling) return;
 
-        hoveredAnnotationUpdate &&
-          hoveredAnnotationUpdate(idToPass, { editorName });
-      },
-    onMouseLeave: props => e => {
-      hoveredAnnEasyStore.hoveredAnn = undefined;
-      const { editorName, hoveredAnnotationClear } = props;
-      e.stopPropagation();
-      if (window.__veDragging || window.__veScrolling) return;
-      hoveredAnnotationClear && hoveredAnnotationClear(true, { editorName });
+        hoveredAnnotationUpdate(idToPass, { editorName });
+      };
+
+      handleMouseLeave = e => {
+        hoveredAnnEasyStore.hoveredAnn = undefined;
+        const { editorName = "StandaloneEditor" } = this.props;
+        e.stopPropagation();
+        if (window.__veDragging || window.__veScrolling) return;
+        hoveredAnnotationClear(true, { editorName });
+      };
+
+      render() {
+        const {
+          id,
+          editorName = "StandaloneEditor",
+          className,
+          passHoveredId,
+          noRedux, // eslint-disable-line no-unused-vars
+          ...restProps
+        } = this.props;
+
+        const hoveredIdFromContext = this.context?.hoveredId;
+        const hoveredId =
+          hoveredAnnEasyStore.hoveredIds[editorName] ||
+          hoveredIdFromContext ||
+          "";
+        const isIdHashmap = typeof id === "object";
+        const hovered = !!(isIdHashmap ? id[hoveredId] : hoveredId === id);
+
+        const newClassName = classnames(className, "hoverHelper", {
+          veAnnotationHovered: hovered
+        });
+
+        const passedProps = {
+          ...restProps,
+          id,
+          editorName,
+          hovered,
+          className: newClassName,
+          onMouseOver: this.handleMouseOver,
+          onMouseLeave: this.handleMouseLeave
+        };
+
+        if (hovered && passHoveredId) {
+          passedProps.hoveredId = hoveredId;
+        }
+
+        return <WrappedComponent {...passedProps} />;
+      }
     }
-  })
-);
+  );
+
+  HoverComponent.displayName = `withHover(${
+    WrappedComponent.displayName || WrappedComponent.name || "Component"
+  })`;
+
+  return HoverComponent;
+}

package/src/redux/index.js

@@ -11,7 +11,6 @@ import * as digestTool from "./digestTool";
 import * as findTool from "./findTool";
 import * as toolBar from "./toolBar";
 import * as frameTranslations from "./frameTranslations";
-import * as hoveredAnnotation from "./hoveredAnnotation";
 import * as minimumOrfSize from "./minimumOrfSize";
 import * as alignments from "./alignments";
 import * as panelsShown from "./panelsShown";
@@ -51,7 +50,6 @@ const subReducers = {
   toolBar,
   findTool,
   frameTranslations,
-  hoveredAnnotation,
   minimumOrfSize,
   panelsShown,
   propertiesTool,

package/redux/hoveredAnnotation.d.ts

@@ -1,4 +0,0 @@
-export const hoveredAnnotationUpdate: import('redux-act').ComplexActionCreator1<any, any, any>;
-export const hoveredAnnotationClear: import('redux-act').ComplexActionCreator1<any, any, any>;
-declare const _default: import('redux-act').Reducer<string, import('../../../../node_modules/redux').AnyAction>;
-export default _default;

package/src/redux/hoveredAnnotation.js

@@ -1,24 +0,0 @@
-//./caretPosition.js
-import { createReducer } from "redux-act";
-import createAction from "./utils/createMetaAction";
-
-// ------------------------------------
-// Actions
-// ------------------------------------
-export const hoveredAnnotationUpdate = createAction("HOVEREDANNOTATIONUPDATE");
-export const hoveredAnnotationClear = createAction("HOVEREDANNOTATIONCLEAR");
-
-// ------------------------------------
-// Reducer
-// ------------------------------------
-export default createReducer(
-  {
-    [hoveredAnnotationUpdate]: (state, payload) => {
-      return payload || null;
-    },
-    [hoveredAnnotationClear]: () => {
-      return "";
-    }
-  },
-  ""
-);