@jbrowse/display-ui 5.0.0-beta.1 → 5.0.0-beta.3

package/esm/FloatingSvgOverlay.d.ts

@@ -0,0 +1,5 @@
+export declare const FloatingSvgOverlay: ({ width, height, children, }: {
+    width: number;
+    height: number;
+    children: React.ReactNode;
+}) => import("react").JSX.Element;

package/esm/FloatingSvgOverlay.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { TrackOverlayPortal } from './trackOverlay/TrackOverlayPortal.js';
+// Lifts an SVG legend / chrome above the inter-region padding masks: a
+// full-track, pointer-events:none <svg> portaled into the TrackContainer overlay
+// node (see TrackOverlayPortal). The SVG counterpart to the HTML overlays
+// (FloatingLegend, HicOverlayPanel) — used where the same legend
+// markup is also drawn by an SVG-export path, so it must stay <svg>.
+//
+// Children draw in <svg> user space; the wrapping <svg> stays pointer-events:none
+// so it doesn't eat canvas events, so any interactive sub-content (a dismiss
+// "×", clickable swatches) must set pointer-events:auto on its own element.
+// fallbackInline={false}: outside a TrackContainer it renders nothing, matching
+// callers whose export path draws its own inline legend.
+export const FloatingSvgOverlay = observer(function FloatingSvgOverlay({ width, height, children, }) {
+    return (_jsx(TrackOverlayPortal, { fallbackInline: false, children: _jsx("svg", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width,
+                height,
+                pointerEvents: 'none',
+                overflow: 'hidden',
+            }, children: children }) }));
+});

package/esm/PointerLayer.d.ts

@@ -1,26 +1,20 @@
 import type { MouseState, MouseTracker } from '@jbrowse/core/ui/useMouseTracking';
 import type { ReactNode } from 'react';
 /**
- * The part of a display that follows the pointer — guides, a tooltip, a
- * highlighted column — rendered off the chrome's `mouseTracker` in a leaf of
- * its own, so a mousemove re-renders this and nothing else. Read in the
- * component that mounts `DisplayChrome` instead, the position would re-render
- * the chrome, its status container and every overlay under it on each move
- * (see `useMouseTracking`).
+ * The part of a display that follows the pointer, in a leaf of its own so a
+ * mousemove re-renders this and not the chrome, its status container and every
+ * overlay under it (see `useMouseTracking`). An observer, so a model read in
+ * `children` is tracked here too rather than freezing under a stationary
+ * cursor.
  *
- * `rowsTopOffset` answers whether the pointer is over the rows rather than a
- * band stacked above them, for a display that gates its crosshair to the rows:
- * a guide drawn while the pointer is over a variant lane or a connector zone
- * names a row the pointer is not on. The tooltip is usually not gated with it,
- * which is why the child decides. `children` is also handed an absent state, so
- * a layer that has to render while nothing is hovered — the matrix display's
- * connector lines, with no column highlighted — can.
- *
- * Four displays used to write this component out, with the same paragraph over
- * each.
+ * `inRows` is whether the pointer is past `rowsTopOffset`, the bands a display
+ * stacks above its rows — a crosshair drawn over one names a row the pointer is
+ * not on, and `>=` because the rows begin AT the offset. A tooltip usually
+ * wants it ungated, which is why the child decides, and `children` is handed an
+ * absent state so a layer that draws with nothing hovered still can.
  */
-export declare function PointerLayer({ mouseTracker, rowsTopOffset, children, }: {
+export declare const PointerLayer: ({ mouseTracker, rowsTopOffset, children, }: {
     mouseTracker: MouseTracker;
     rowsTopOffset?: number;
     children: (state: MouseState | undefined, inRows: boolean) => ReactNode;
-}): import("react").JSX.Element;
+}) => ReactNode;

package/esm/PointerLayer.js

@@ -1,27 +1,21 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 // deep subpath, never the `@jbrowse/core/ui` barrel: this package reaches no
 // UI toolkit, and the barrel pulls MUI in
 import { useMouseState } from '@jbrowse/core/ui/useMouseTracking';
+import { observer } from 'mobx-react';
 /**
- * The part of a display that follows the pointer — guides, a tooltip, a
- * highlighted column — rendered off the chrome's `mouseTracker` in a leaf of
- * its own, so a mousemove re-renders this and nothing else. Read in the
- * component that mounts `DisplayChrome` instead, the position would re-render
- * the chrome, its status container and every overlay under it on each move
- * (see `useMouseTracking`).
+ * The part of a display that follows the pointer, in a leaf of its own so a
+ * mousemove re-renders this and not the chrome, its status container and every
+ * overlay under it (see `useMouseTracking`). An observer, so a model read in
+ * `children` is tracked here too rather than freezing under a stationary
+ * cursor.
  *
- * `rowsTopOffset` answers whether the pointer is over the rows rather than a
- * band stacked above them, for a display that gates its crosshair to the rows:
- * a guide drawn while the pointer is over a variant lane or a connector zone
- * names a row the pointer is not on. The tooltip is usually not gated with it,
- * which is why the child decides. `children` is also handed an absent state, so
- * a layer that has to render while nothing is hovered — the matrix display's
- * connector lines, with no column highlighted — can.
- *
- * Four displays used to write this component out, with the same paragraph over
- * each.
+ * `inRows` is whether the pointer is past `rowsTopOffset`, the bands a display
+ * stacks above its rows — a crosshair drawn over one names a row the pointer is
+ * not on, and `>=` because the rows begin AT the offset. A tooltip usually
+ * wants it ungated, which is why the child decides, and `children` is handed an
+ * absent state so a layer that draws with nothing hovered still can.
  */
-export function PointerLayer({ mouseTracker, rowsTopOffset = 0, children, }) {
+export const PointerLayer = observer(function PointerLayer({ mouseTracker, rowsTopOffset = 0, children, }) {
     const state = useMouseState(mouseTracker);
-    return _jsx(_Fragment, { children: children(state, !!state && state.y > rowsTopOffset) });
-}
+    return children(state, !!state && state.y >= rowsTopOffset);
+});

package/esm/index.d.ts

@@ -9,6 +9,7 @@ export type { TrackControlMenu } from './trackControl/useTrackControlMenu.tsx';
 export type { TrackControlComponent, TrackControlIcon, TrackControlOption, TrackControlProps, } from './trackControl/types.ts';
 export { default as FloatingLegend } from './FloatingLegend.tsx';
 export type { LegendItem, LegendSection } from './FloatingLegend.tsx';
+export { FloatingSvgOverlay } from './FloatingSvgOverlay.tsx';
 export { default as Tooltip } from './tooltip/Tooltip.tsx';
 export { useTooltip } from './tooltip/useTooltip.tsx';
 export type { TooltipTrigger } from './tooltip/useTooltip.tsx';

package/esm/index.js

@@ -23,6 +23,12 @@ export { useTrackControlMenu } from './trackControl/useTrackControlMenu.js';
 // a display draws that is not its data. `@jbrowse/plugin-linear-genome-view`
 // re-exports it, so its published name is unchanged.
 export { default as FloatingLegend } from './FloatingLegend.js';
+// The <svg> counterpart of that legend, for a display whose key is drawn by an
+// SVG-export path as well as on screen. Beside it for the same reasons — it
+// reaches no UI toolkit, and portaling chrome above the region masks is what
+// this package is — and re-exported by `@jbrowse/plugin-linear-genome-view`, so
+// its published name is unchanged.
+export { FloatingSvgOverlay } from './FloatingSvgOverlay.js';
 // The hover label every control in here used to delegate to the browser's
 // `title` attribute. The box it draws is `@jbrowse/core`'s `BaseTooltip`, the
 // same one the display tooltips draw, anchored to the control instead of to the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/display-ui",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.3",
   "type": "module",
   "description": "The UI a display draws that is not data: the swappable chrome contract, its toolkit-free implementations, and the track overlay layer",
   "keywords": [
@@ -24,7 +24,7 @@
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^6.5.1",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.1"
+    "@jbrowse/core": "^5.0.0-beta.3"
   },
   "peerDependencies": {
     "react": ">=19.0.0",