@solidports/recharts 0.1.0

package/src/state/selectors/barSelectors.ts

@@ -0,0 +1,310 @@
+/* eslint-disable import/no-cycle */
+import type { JSX } from '@solidjs/web';
+import type { ChartState } from "../store"
+import {
+	type BaseAxisWithScale,
+	selectAxisWithScale,
+	selectCartesianAxisSize,
+	selectStackGroups,
+	selectTicksOfGraphicalItem,
+	selectUnfilteredCartesianItems,
+} from "./axisSelectors"
+import type { XAxisSettings, YAxisSettings } from "../cartesianAxisSlice"
+import { isNullish } from "../../util/DataUtils"
+import { type BarPositionPosition, getBandSizeOfAxis, type StackId } from "../../util/ChartUtils"
+import type {
+	CartesianViewBoxRequired,
+	ChartOffsetInternal,
+	DataKey,
+	TickItem,
+} from "../../util/types"
+import { type BarRectangleItem, computeBarRectangles } from "../../cartesian/Bar"
+import { selectChartLayout } from "../../context/chartLayoutContext"
+import type { ChartData } from "../chartDataSlice"
+import { selectChartDataWithIndexesIfNotInPanoramaPosition3 } from "./dataSelectors"
+import { selectAxisViewBox, selectChartOffsetInternal } from "./selectChartOffsetInternal"
+import {
+	selectBarCategoryGap,
+	selectBarGap,
+	selectRootBarSize,
+	selectRootMaxBarSize,
+} from "./rootPropsSelectors"
+import type { AllStackGroups, StackSeries } from "../../util/stacks/stackTypes"
+import type { BarSettings } from "../types/BarSettings"
+
+/** Optional overrides — bypass the axis-settings lookup on hot animation frames. */
+export type BarAxisOverrides = {
+	xAxis?: XAxisSettings
+	yAxis?: YAxisSettings
+	barSettings?: BarSettings
+}
+import type { GraphicalItemId } from "../graphicalItemsSlice"
+import { type BarCategory, combineBarSizeList } from "./combiners/combineBarSizeList"
+import { combineAllBarPositions } from "./combiners/combineAllBarPositions"
+import { combineStackedData } from "./combiners/combineStackedData"
+import { chartSelector } from "./chartSelector"
+import {
+	selectXAxisIdFromGraphicalItemId,
+	selectYAxisIdFromGraphicalItemId,
+} from "./graphicalItemSelectors"
+import { combineBarPosition } from "./combiners/combineBarPosition"
+
+const selectSynchronisedBarSettings = chartSelector(function selectSynchronisedBarSettings(state: ChartState, id: GraphicalItemId): BarSettings | undefined {
+	const graphicalItems = selectUnfilteredCartesianItems(state)
+	return graphicalItems.filter((item) => item.type === "bar").find((item) => item.id === id) as
+		| BarSettings
+		| undefined
+})
+
+export const selectMaxBarSize = chartSelector(function selectMaxBarSize(_state: ChartState, id: GraphicalItemId): number | undefined {
+	const barSettings = selectSynchronisedBarSettings(_state, id)
+	return barSettings?.maxBarSize
+})
+
+export const selectAllVisibleBars = chartSelector(function selectAllVisibleBars(state: ChartState, id: GraphicalItemId, isPanorama: boolean): ReadonlyArray<BarSettings> {
+	const layout = selectChartLayout(state)
+	const allItems = selectUnfilteredCartesianItems(state)
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id)
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id)
+	return allItems
+		.filter((i) => {
+			if (layout === "horizontal") {
+				return i.xAxisId === xAxisId
+			}
+			return i.yAxisId === yAxisId
+		})
+		.filter((i) => i.isPanorama === isPanorama)
+		.filter((i) => i.hide === false)
+		.filter((i) => i.type === "bar") as ReadonlyArray<BarSettings>
+})
+
+export type SizeList = ReadonlyArray<BarCategory>
+
+const selectBarStackGroups = chartSelector((
+	state: ChartState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+): AllStackGroups | undefined => {
+	const layout = selectChartLayout(state)
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id)
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id)
+	if (xAxisId == null || yAxisId == null) {
+		return undefined
+	}
+	if (layout === "horizontal") {
+		return selectStackGroups(state, "yAxis", yAxisId, isPanorama)
+	}
+	return selectStackGroups(state, "xAxis", xAxisId, isPanorama)
+})
+
+export const selectBarCartesianAxisSize = chartSelector((state: ChartState, id: GraphicalItemId) => {
+	const layout = selectChartLayout(state)
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id)
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id)
+	if (xAxisId == null || yAxisId == null) {
+		return undefined
+	}
+	if (layout === "horizontal") {
+		return selectCartesianAxisSize(state, "xAxis", xAxisId)
+	}
+	return selectCartesianAxisSize(state, "yAxis", yAxisId)
+})
+
+export const selectBarSizeList = chartSelector(function selectBarSizeList(state: ChartState, id: GraphicalItemId, isPanorama: boolean): SizeList {
+	return combineBarSizeList(
+		selectAllVisibleBars(state, id, isPanorama),
+		selectRootBarSize(state),
+		selectBarCartesianAxisSize(state, id),
+	)
+})
+
+export const selectBarBandSize = chartSelector(function selectBarBandSize(state: ChartState, id: GraphicalItemId, isPanorama: boolean): number {
+	const barSettings = selectSynchronisedBarSettings(state, id)
+	if (barSettings == null) {
+		return 0
+	}
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id)
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id)
+	if (xAxisId == null || yAxisId == null) {
+		return 0
+	}
+	const layout = selectChartLayout(state)
+	const globalMaxBarSize: number | undefined = selectRootMaxBarSize(state)
+	const { maxBarSize: childMaxBarSize } = barSettings
+	const maxBarSize: number | undefined = isNullish(childMaxBarSize)
+		? globalMaxBarSize
+		: childMaxBarSize
+	let axis: BaseAxisWithScale | undefined
+	let ticks: ReadonlyArray<TickItem> | undefined
+	if (layout === "horizontal") {
+		axis = selectAxisWithScale(state, "xAxis", xAxisId, isPanorama)
+		ticks = selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama)
+	} else {
+		axis = selectAxisWithScale(state, "yAxis", yAxisId, isPanorama)
+		ticks = selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama)
+	}
+	return getBandSizeOfAxis(axis, ticks, true) ?? maxBarSize ?? 0
+})
+
+export const selectAxisBandSize = chartSelector(function selectAxisBandSize(state: ChartState, id: GraphicalItemId, isPanorama: boolean): number | undefined {
+	const layout = selectChartLayout(state)
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id)
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id)
+	if (xAxisId == null || yAxisId == null) {
+		return undefined
+	}
+	let axis: BaseAxisWithScale | undefined
+	let ticks: ReadonlyArray<TickItem> | undefined
+	if (layout === "horizontal") {
+		axis = selectAxisWithScale(state, "xAxis", xAxisId, isPanorama)
+		ticks = selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama)
+	} else {
+		axis = selectAxisWithScale(state, "yAxis", yAxisId, isPanorama)
+		ticks = selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama)
+	}
+	return getBandSizeOfAxis(axis, ticks)
+})
+
+export type BarWithPosition = {
+	stackId: StackId | undefined
+	/**
+	 * List of dataKeys of items stacked at this position.
+	 * All of these Bars are either sharing the same stackId,
+	 * or this is an array with one Bar because it has no stackId defined.
+	 *
+	 * This structure limits us to having one dataKey only once per stack which I think is reasonable.
+	 * People who want to have the same data twice can duplicate their data to have two distinct dataKeys.
+	 */
+	dataKeys: ReadonlyArray<DataKey<unknown>>
+	/**
+	 * Position of this stack in absolute pixels measured from the start of the chart
+	 */
+	position: BarPositionPosition
+}
+
+export const selectAllBarPositions = chartSelector(function selectAllBarPositions(state: ChartState, id: GraphicalItemId, isPanorama: boolean): ReadonlyArray<BarWithPosition> | undefined {
+	return combineAllBarPositions(
+		selectBarSizeList(state, id, isPanorama),
+		selectRootMaxBarSize(state),
+		selectBarGap(state),
+		selectBarCategoryGap(state),
+		selectBarBandSize(state, id, isPanorama),
+		selectAxisBandSize(state, id, isPanorama),
+		selectMaxBarSize(state, id),
+	)
+})
+
+const selectXAxisWithScale = chartSelector((
+	state: ChartState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+	override?: XAxisSettings,
+) => {
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id)
+	if (xAxisId == null) {
+		return undefined
+	}
+	return selectAxisWithScale(state, "xAxis", xAxisId, isPanorama, override)
+})
+
+const selectYAxisWithScale = chartSelector((
+	state: ChartState,
+	id: GraphicalItemId,
+	isPanorama: boolean,
+	override?: YAxisSettings,
+) => {
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id)
+	if (yAxisId == null) {
+		return undefined
+	}
+	return selectAxisWithScale(state, "yAxis", yAxisId, isPanorama, override)
+})
+
+const selectXAxisTicks = chartSelector((state: ChartState, id: GraphicalItemId, isPanorama: boolean) => {
+	const xAxisId = selectXAxisIdFromGraphicalItemId(state, id)
+	if (xAxisId == null) {
+		return undefined
+	}
+	return selectTicksOfGraphicalItem(state, "xAxis", xAxisId, isPanorama)
+})
+
+const selectYAxisTicks = chartSelector((state: ChartState, id: GraphicalItemId, isPanorama: boolean) => {
+	const yAxisId = selectYAxisIdFromGraphicalItemId(state, id)
+	if (yAxisId == null) {
+		return undefined
+	}
+	return selectTicksOfGraphicalItem(state, "yAxis", yAxisId, isPanorama)
+})
+
+export const selectBarPosition = chartSelector(function selectBarPosition(state: ChartState, id: GraphicalItemId, isPanorama: boolean): BarPositionPosition | undefined {
+	return combineBarPosition(
+		selectAllBarPositions(state, id, isPanorama),
+		selectSynchronisedBarSettings(state, id),
+	)
+})
+
+export const selectStackedDataOfItem = chartSelector(function selectStackedDataOfItem(state: ChartState, id: GraphicalItemId, isPanorama: boolean): StackSeries | undefined {
+	return combineStackedData(
+		selectBarStackGroups(state, id, isPanorama),
+		selectSynchronisedBarSettings(state, id),
+	)
+})
+
+export const selectBarRectangles = chartSelector(function selectBarRectangles(state: ChartState, id: GraphicalItemId, isPanorama: boolean, cells: ReadonlyArray<JSX.Element> | undefined, xAxisOverride?: XAxisSettings, yAxisOverride?: YAxisSettings, barSettingsOverride?: BarSettings): ReadonlyArray<BarRectangleItem> | undefined {
+	const offset: ChartOffsetInternal = selectChartOffsetInternal(state)
+	const axisViewBox: CartesianViewBoxRequired = selectAxisViewBox(state)
+	const xAxis = selectXAxisWithScale(state, id, isPanorama, xAxisOverride)
+	const yAxis = selectYAxisWithScale(state, id, isPanorama, yAxisOverride)
+	const xAxisTicks = selectXAxisTicks(state, id, isPanorama)
+	const yAxisTicks = selectYAxisTicks(state, id, isPanorama)
+	const pos = selectBarPosition(state, id, isPanorama)
+	const layout = selectChartLayout(state)
+	const { chartData, dataStartIndex, dataEndIndex } =
+		selectChartDataWithIndexesIfNotInPanoramaPosition3(state, undefined, isPanorama)
+	const bandSize = selectAxisBandSize(state, id, isPanorama)
+	const stackedData = selectStackedDataOfItem(state, id, isPanorama)
+	const barSettings = barSettingsOverride ?? selectSynchronisedBarSettings(state, id)
+
+	if (
+		barSettings == null ||
+		pos == null ||
+		axisViewBox == null ||
+		(layout !== "horizontal" && layout !== "vertical") ||
+		xAxis == null ||
+		yAxis == null ||
+		xAxisTicks == null ||
+		yAxisTicks == null ||
+		bandSize == null
+	) {
+		return undefined
+	}
+	const { data } = barSettings
+
+	let displayedData: ChartData | undefined
+	if (data != null && data.length > 0) {
+		displayedData = data
+	} else {
+		displayedData = chartData?.slice(dataStartIndex, dataEndIndex + 1)
+	}
+
+	if (displayedData == null) {
+		return undefined
+	}
+
+	return computeBarRectangles({
+		bandSize,
+		barSettings,
+		cells,
+		dataStartIndex,
+		displayedData,
+		layout,
+		offset,
+		parentViewBox: axisViewBox,
+		pos,
+		stackedData,
+		xAxis,
+		xAxisTicks,
+		yAxis,
+		yAxisTicks,
+	})
+})

package/src/state/selectors/barStackSelectors.ts

@@ -0,0 +1,77 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import type { NormalizedStackId } from "../../util/ChartUtils"
+import type { BarSettings } from "../types/BarSettings"
+import { selectUnfilteredCartesianItems } from "./axisSelectors"
+import type { CartesianGraphicalItemSettings } from "../graphicalItemsSlice"
+import { chartSelector } from "./chartSelector"
+import { selectBarRectangles } from "./barSelectors"
+
+export const selectAllBarsInStack = chartSelector(function selectAllBarsInStack(state: ChartState, stackId: NormalizedStackId, isPanorama: boolean): ReadonlyArray<BarSettings> {
+	const allItems: ReadonlyArray<CartesianGraphicalItemSettings> =
+		selectUnfilteredCartesianItems(state)
+	return allItems
+		.filter((i) => i.type === "bar")
+		.filter((i) => i.stackId === stackId)
+		.filter((i) => i.isPanorama === isPanorama)
+		.filter((i) => !i.hide) as ReadonlyArray<BarSettings>
+})
+
+const selectAllBarIdsInStack = chartSelector(function selectAllBarIdsInStack(state: ChartState, stackId: NormalizedStackId, isPanorama: boolean) {
+	return selectAllBarsInStack(state, stackId, isPanorama).map((bar) => bar.id)
+})
+
+export type BarStackItem = {
+	x: number
+	y: number
+	width: number
+	height: number
+}
+
+/**
+ * Takes two rectangles and returns a new rectangle that encompasses both.
+ * It takes the minimum x and y, and the maximum width and height.
+ * It handles overlapping rectangles, and rectangles with a gap between them.
+ * @param rect1
+ * @param rect2
+ */
+export const expandRectangle = (
+	rect1: BarStackItem | undefined,
+	rect2: BarStackItem | undefined,
+): BarStackItem | undefined => {
+	if (!rect1) {
+		return rect2
+	}
+	if (!rect2) {
+		return rect1
+	}
+	const x = Math.min(rect1.x, rect1.x + rect1.width, rect2.x, rect2.x + rect2.width)
+	const y = Math.min(rect1.y, rect1.y + rect1.height, rect2.y, rect2.y + rect2.height)
+	const maxX = Math.max(rect1.x, rect1.x + rect1.width, rect2.x, rect2.x + rect2.width)
+	const maxY = Math.max(rect1.y, rect1.y + rect1.height, rect2.y, rect2.y + rect2.height)
+	const width = maxX - x
+	const height = maxY - y
+	return { height, width, x, y }
+}
+
+function combineStackRects(
+	state: ChartState,
+	stackId: NormalizedStackId,
+	isPanorama: boolean,
+): ReadonlyArray<BarStackItem | undefined> {
+	const allBarIds = selectAllBarIdsInStack(state, stackId, isPanorama)
+	const stackRects: Array<BarStackItem | undefined> = []
+	allBarIds.forEach((barId) => {
+		const rectangles = selectBarRectangles(state, barId, isPanorama, undefined)
+		rectangles?.forEach((rect) => {
+			/* Rectangles are filtered (zero dimension), so index by the original data position. */
+			const rectIndex = rect.originalDataIndex
+			stackRects[rectIndex] = expandRectangle(stackRects[rectIndex], rect)
+		})
+	})
+	return stackRects
+}
+
+export const selectStackRects = chartSelector(function selectStackRects(state: ChartState, stackId: NormalizedStackId, isPanorama: boolean): ReadonlyArray<BarStackItem | undefined> {
+	return combineStackRects(state, stackId, isPanorama)
+})

package/src/state/selectors/brushSelectors.ts

@@ -0,0 +1,33 @@
+/* eslint-disable import/no-cycle */
+import type { ChartState } from "../store"
+import { readChartState } from "../chartState"
+import { selectChartOffsetInternal } from "./selectChartOffsetInternal"
+import { selectMargin } from "./containerSelectors"
+import { isNumber } from "../../util/DataUtils"
+import { chartSelector } from "./chartSelector"
+import type { BrushSettings } from "../brushSlice"
+
+export const selectBrushSettings = (state: ChartState): BrushSettings => {
+	return readChartState(state).brush
+}
+
+export type BrushDimensions = {
+	x: number
+	y: number
+	width: number
+	height: number
+}
+
+export const selectBrushDimensions = chartSelector(function selectBrushDimensions(state: ChartState): BrushDimensions {
+	const brushSettings = selectBrushSettings(state)
+	const offset = selectChartOffsetInternal(state)
+	const margin = selectMargin(state)
+	return {
+		height: brushSettings.height,
+		width: isNumber(brushSettings.width) ? brushSettings.width : offset.width,
+		x: isNumber(brushSettings.x) ? brushSettings.x : offset.left,
+		y: isNumber(brushSettings.y)
+			? brushSettings.y
+			: offset.top + offset.height + offset.brushBottom - (margin?.bottom || 0),
+	}
+})

package/src/state/selectors/chartSelector.ts

@@ -0,0 +1,185 @@
+import { $PROXY, createMemo, onCleanup, runWithOwner } from "solid-js"
+import type { Accessor, Owner } from "solid-js"
+import type { ChartState } from "../chartState"
+
+/*
+ * Per-chart memoized selector graph — the Solid stand-in for upstream's reselect `createSelector`.
+ *
+ * A wrapped selector called with a chart store resolves to one memo per (selector, argument tuple),
+ * owned by the chart provider and shared by every consumer. Each memo tracks only the store reads
+ * and selector reads of its own body, so an upstream memo that did not change (by `equals`) stops
+ * propagation exactly like a reselect cache hit.
+ *
+ * Stores without a registered owner (unit tests building a bare store, code outside a provider)
+ * call the raw function, so behavior is identical either way.
+ */
+
+type Selector<A extends unknown[], R> = (state: ChartState, ...args: A) => R
+
+type ArgNode = {
+	memo: Accessor<unknown> | undefined
+	children: Map<unknown, ArgNode> | undefined
+}
+
+type ChartCache = { owner: Owner; roots: WeakMap<object, ArgNode> }
+
+const chartCaches = new WeakMap<ChartState, ChartCache>()
+
+const newNode = (): ArgNode => ({ children: undefined, memo: undefined })
+
+const isObjectArg = (value: unknown): boolean =>
+	(typeof value === "object" && value !== null) || typeof value === "function"
+
+/* Map keys use SameValueZero, so undefined and NaN are valid keys without a sentinel. */
+function childNode(node: ArgNode, key: unknown): ArgNode {
+	node.children ??= new Map()
+	let next = node.children.get(key)
+	if (next === undefined) {
+		next = newNode()
+		node.children.set(key, next)
+	}
+	return next
+}
+
+const isStoreNode = (value: object): boolean => (value as { [$PROXY]?: unknown })[$PROXY] !== undefined
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+	if (typeof value !== "object" || value === null) {
+		return false
+	}
+	const proto = Object.getPrototypeOf(value)
+	return proto === Object.prototype || proto === null
+}
+
+/**
+ * Default output equality: `===`, then element-wise `===` for arrays, then own-key shallow `===`
+ * for plain non-store objects. Never deep — data arrays are compared by element identity only.
+ */
+export function defaultSelectorEquals(a: unknown, b: unknown): boolean {
+	if (a === b) {
+		return true
+	}
+	if (Array.isArray(a)) {
+		if (!Array.isArray(b) || a.length !== b.length) {
+			return false
+		}
+		for (let i = 0; i < a.length; i++) {
+			if (a[i] !== b[i]) {
+				return false
+			}
+		}
+		return true
+	}
+	/* Distinct store nodes are never equal: keeping the old node would leave readers tracking
+	   a different live object than the one the selector now resolves to. */
+	if (!isPlainObject(a) || !isPlainObject(b) || isStoreNode(a) || isStoreNode(b)) {
+		return false
+	}
+	const aKeys = Object.keys(a)
+	if (aKeys.length !== Object.keys(b).length) {
+		return false
+	}
+	for (const key of aKeys) {
+		if (a[key] !== b[key] || !(key in b)) {
+			return false
+		}
+	}
+	return true
+}
+
+/**
+ * Binds a chart store to the owner its selector memos live under. Called once per chart provider;
+ * the cache is dropped when that owner is disposed.
+ */
+export function registerChartOwner(state: ChartState, owner: Owner | null): void {
+	if (owner == null) {
+		return
+	}
+	chartCaches.set(state, { owner, roots: new WeakMap() })
+	onCleanup(() => {
+		chartCaches.delete(state)
+	})
+}
+
+/** The owner registered for a chart store, if any. */
+export function ownerFor(state: ChartState): Owner | undefined {
+	return chartCaches.get(state)?.owner
+}
+
+/*
+ * A memo keyed by stale arguments (an old settings node) can recompute in the same flush that its
+ * consumer will use to switch to new arguments. Errors are therefore captured and rethrown only to
+ * a reader, so a discarded stale computation never halts the reactive system.
+ */
+class SelectorError {
+	constructor(readonly error: unknown) {}
+}
+
+const withErrorBox = (equals: (prev: unknown, next: unknown) => boolean) => (prev: unknown, next: unknown) =>
+	!(prev instanceof SelectorError) && !(next instanceof SelectorError) && equals(prev, next)
+
+export type ChartSelectorOptions<R> = {
+	equals?: (prev: R, next: R) => boolean
+}
+
+/**
+ * Wraps a selector so calls on a provider-owned chart store share one memo per argument tuple.
+ * Same signature as `fn`.
+ *
+ * Only all-primitive tuples are memoized. A call carrying an object argument (settings node,
+ * cells, overrides) runs the raw function: a memo closed over a settings node that was later
+ * replaced would keep recomputing against new data until its consumer let go, running stale
+ * user callbacks such as a previous `dataKey` (recharts#4935).
+ *
+ * Do not wrap selectors whose arguments span an unbounded primitive space (pointer coordinates):
+ * every distinct tuple keeps a trie entry for the chart's lifetime.
+ *
+ * Memos are lazy: an unobserved memo goes dormant (detached from its sources and the owner)
+ * instead of recomputing on every write, and a later read reawakens it, so untracked readers such
+ * as event middleware cost no more than the raw function.
+ */
+export function chartSelector<A extends unknown[], R>(
+	fn: Selector<A, R>,
+	options?: ChartSelectorOptions<R>,
+): Selector<A, R> {
+	const equals = withErrorBox((options?.equals ?? defaultSelectorEquals) as (prev: unknown, next: unknown) => boolean)
+	const selector = (state: ChartState, ...args: A): R => {
+		const cache = chartCaches.get(state)
+		if (cache === undefined) {
+			return fn(state, ...args)
+		}
+		let node = cache.roots.get(fn)
+		if (node === undefined) {
+			node = newNode()
+			cache.roots.set(fn, node)
+		}
+		for (const arg of args) {
+			if (isObjectArg(arg)) {
+				return fn(state, ...args)
+			}
+			node = childNode(node, arg)
+		}
+		let memo = node.memo
+		if (memo === undefined) {
+			const compute = (): unknown => {
+				try {
+					return fn(state, ...args)
+				} catch (error) {
+					return new SelectorError(error)
+				}
+			}
+			memo = runWithOwner(cache.owner, () =>
+				createMemo<unknown>(compute, { equals, lazy: true, sync: true, transparent: true }),
+			)
+			node.memo = memo
+		}
+		const value = memo()
+		if (value instanceof SelectorError) {
+			throw value.error
+		}
+		return value as R
+	}
+	/* Keep the arity of the wrapped function; hook-compat checks read `selector.length`. */
+	Object.defineProperty(selector, "length", { value: fn.length })
+	return selector
+}

package/src/state/selectors/combiners/combineActiveLabel.ts

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-cycle */
+import { TickItem } from "../../../util/types"
+import { TooltipIndex } from "../../tooltipSlice"
+import { isNan } from "../../../util/DataUtils"
+import { ActiveLabel } from "../../../synchronisation/types"
+
+export const combineActiveLabel = (
+	tooltipTicks: ReadonlyArray<TickItem> | undefined,
+	activeIndex: TooltipIndex,
+): ActiveLabel => {
+	const n = Number(activeIndex)
+	if (isNan(n) || activeIndex == null) {
+		return undefined
+	}
+	return n >= 0 ? tooltipTicks?.[n]?.value : undefined
+}