stream-charts 1.2.0 → 2.0.0

package/src/app/charts/tooltips/OutlierPlotTooltipContent.tsx

@@ -0,0 +1,67 @@
+import type {JSX, ReactElement} from "react"
+import type {TooltipStyle} from "./tooltipUtils"
+import {TooltipContent} from "./TooltipContent"
+import type {OutlierBandTooltipMetadata} from "../plots/OutlierPlot"
+import type {OutlierDatum} from "../series/outlierSeries"
+import {DefaultOutlierTooltipContent} from "./DefaultOutlierTooltipContent"
+import {type OutlierTooltipContentFormatters, type OutlierTooltipData, UseOutlierTooltip} from "./useOutlierTooltip"
+
+/**
+ * The properties of the {@link OutlierPlotTooltipContent}: its style, its (optional) custom
+ * content, and the formatters for the content
+ */
+export type Props = {
+    /**
+     * Overrides of the style of the enclosing {@link Tooltip}
+     */
+    style?: Partial<TooltipStyle>
+    /**
+     * Custom tooltip content, which gets what the tooltip shows, and the formatters, from
+     * {@link useOutlierTooltip}. Defaults to {@link DefaultOutlierTooltipContent}.
+     */
+    children?: JSX.Element | Array<JSX.Element>
+} & OutlierTooltipContentFormatters
+
+/**
+ * The tooltip content for an {@link OutlierPlot}: when the mouse is over a band, or an outlier,
+ * shows the series' name, the outlier (if any), the band, the probabilities of a point being in
+ * and outside the band, and the number of points in the band. Put it inside a {@link Tooltip}.
+ *
+ * To lay the content out yourself, put your own component inside this one: it gets what the
+ * tooltip shows, its style, and the formatters, from {@link useOutlierTooltip}.
+ * @param props The style, the formatters, and the (optional) custom content
+ * @return The tooltip's box (a portal), or `null` when no band or outlier is hovered
+ */
+export function OutlierPlotTooltipContent(props: Props): ReactElement | null {
+    const {
+        style,
+        children,
+        datumFormatter = (x: number, y: number) => `(${x}, ${y})`,
+        bandFormatter = (lower: number, upper: number) => `Band: ${lower} ⭢ ${upper}`,
+        measureFormatter = (innerProb: number, outerProb: number) => `Points have a ${(innerProb * 100).toFixed(1)}% probability of being in this band, and a ${(outerProb * 100).toFixed(1)}% probability of being outside this band`,
+    } = props
+
+    // (a description given as lines is shown one per line)
+    const measureDescription = (innerProb: number, outerProb: number): string | JSX.Element => {
+        const description = measureFormatter(innerProb, outerProb)
+        return Array.isArray(description) ?
+            <>{description.map((line, index) => <div key={index}>{line}</div>)}</> :
+            description
+    }
+
+    return (
+        <TooltipContent<OutlierDatum<readonly number[]>, OutlierBandTooltipMetadata, OutlierTooltipData>
+            style={style}
+            boxStyle={{lineHeight: 1.6}}
+            capture={(seriesName, _time, {metadata}) => ({...metadata, seriesName})}
+        >
+            {(tooltipContent, tooltipStyle) =>
+                <UseOutlierTooltip.Provider
+                    value={{tooltipContent, tooltipStyle, datumFormatter, bandFormatter, measureFormatter: measureDescription}}
+                >
+                    {children ?? <DefaultOutlierTooltipContent/>}
+                </UseOutlierTooltip.Provider>
+            }
+        </TooltipContent>
+    )
+}

package/src/app/charts/tooltips/PoincarePlotTooltipContent.tsx

@@ -1,101 +1,29 @@
-import {
-    CellStyle,
-    createTable,
-    type Margin,
-    TableFont,
-    TableData,
-    TableFormatter,
-    TableStyler, Padding
-} from "svg-table";
-import {
-    defaultTooltipStyle,
-    findPointAndNeighbors,
-    TooltipDimensions,
-    TooltipStyle,
-    tooltipX,
-    tooltipY
-} from "./tooltipUtils";
-import {formatTime, formatTimeChange, formatValue, formatValueChange} from "../utils";
-import {useEffect, useMemo} from "react";
-import {NoTooltipMetadata, useChart} from "../hooks/useChart";
-import {usePlotDimensions} from "../hooks/usePlotDimensions";
-import {emptyIterateDatum, IterateDatum} from "../series/iterateSeries";
-import {ContinuousNumericAxis, SeriesLineStyle} from "../axes/axes";
-import {TooltipData} from "../hooks/useTooltip";
-import {DataFrame} from "data-frame-ts";
-import {Dimensions} from "../styling/margins";
-import {Background, Border, BorderElement, Dimension} from "svg-table/stylings";
-import {ContinuousAxisRange} from "../axes/ContinuousAxisRange";
-
-/**
- # Want to write your own tooltip-content component?
-
- Here's how to write your own tooltip-content component.
-
- To create your own tooltip content `<MyTooltipContent/>` you must do the following:
- 1. Create a react component for your tooltip content (see for example, {@link PoincarePlotTooltipContent}
- as a reference.
- 2. Use the {@link useChart} hook to get the {@link registerTooltipContentProvider} registration function.
- 3. When your tooltip content component (`<MyTooltipContent/>`) mounts, use the {@link registerTooltipContentProvider}
- function to register your tooltip content provider.
- 4. When the chart dimensions, margin, container, etc, change, register your tooltip content provider
- again (you can register as many times as you like because it only uses the last content provider
- registered).
-
- That's it! A few more details are below.
-
- The {@link registerTooltipContentProvider} function from the {@link useChart} hook allows you to register
- one tooltip content provider. A second call to this function will cause the {@link useChart} hook to drop
- the first one in favor of the second one.
-
- The {@link registerTooltipContentProvider} function from the {@link useChart} hook accepts a higher-order
- function that allowing a closure on content/chart-specific data. Specifically, you must hand the
- {@link registerTooltipContentProvider} a function of the form:
-
- `(seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) => TooltipDimensions`
-
- Your function to add that actual content will be what this function calls whenever d3 fires a mouse-over
- event on one you the time-series in the chart.
-
- The code snippet below is from the `useEffect` call in the {@link PoincarePlotTooltipContent}.
- Note that the first four arguments to the {@link addTooltipContent} function are those provided by the {@link useChart} hook
- when a d3 mouse-over event occurs on one of your series. The additional six arguments are from the closure formed
- on the variables in your component. The `chartId`, `container`, `margin`, and `plotDimensions` are from the
- {@link useChart} hook called by the {@link PoincarePlotTooltipContent} component. The last two
- arguments, `defaultTooltipStyle` and `options` are specific to the {@link PoincarePlotTooltipContent}.
- For example, the `options` property is set by the caller of the {@link PoincarePlotTooltipContent}
- component.
-
- ```ts
- // register the tooltip content provider function with the chart hook (useChart) so that
- // it is visible to all children of the Chart (i.e. the <Tooltip>).
- registerTooltipContentProvider(
- (seriesName: string, time: number, series: TimeSeries, mouseCoords: [x: number, y: number]) =>
- addTooltipContent(
- seriesName, time, series, mouseCoords,
- chartId, container, margin, plotDimensions,
- defaultTooltipStyle, options
- )
- )
- ```
-
- This pattern allows you to supplement that `useChart` mouse-over callback with information specific to your component.
-
- */
+import type {CSSProperties, ReactElement} from "react";
+import {useLayoutEffect, useState, useRef} from "react";
+import {findPointAndNeighbors, sparklineFor, type TooltipStyle} from "./tooltipUtils";
+import {TooltipContent} from "./TooltipContent";
+import {formatTime, formatValue} from "../utils";
+import type {NoTooltipMetadata} from "../hooks/useChart";
+import {emptyIterateDatum, type IterateDatum} from "../series/iterateSeries";
+import type {TooltipData} from "../hooks/useTooltip";
 
 /**
  * Properties for rendering the tooltip content. The properties are applied as
  * shown below.
  * ```
  * series name
- *          beforeHeader      afterHeader        deltaHeader
- * xLabel   xValueFormatter   xValueFormatter    xChangeFormatter
- * yLabel   yValueFormatter   yValueFormatter    yChangeFormatter
+ *          f[n-1](x)         f[n](x)            f[n+1](x)
+ * xLabel   xValueFormatter   xValueFormatter    xValueFormatter
+ * yLabel   yValueFormatter   yValueFormatter    yValueFormatter
  * ```
+ * The column headers are always the `f[i](x)` form, built from the hovered point's index: the
+ * `nMinusLagHeader`, `nHeader`, and `nPlusLagHeader` properties, and the `xChangeFormatter` and
+ * `yChangeFormatter` properties, are accepted, but not (yet) used.
  */
 export interface Props {
     // label for the x-values (x-value row header)
     xLabel: string
+    // label for the y-values (y-value row header)
     yLabel: string
     nMinusLagHeader?: string
     nHeader?: string
@@ -108,244 +36,253 @@ export interface Props {
 }
 
 /**
- * Adds tooltip content as a table. The columns of the table are the "label", the value before
- * the mouse cursor, then value after the mouse cursor, and the difference between the two values.
- * The rows of the table are x-values for the first row, and the y-values for the second row.
- * The table has the following form.
+ * The data needed to render the tooltip's content, captured when the mouse moves over an element
+ */
+interface PoincareTooltipContent {
+    seriesName: string
+    prevHeader: string
+    currentHeader: string
+    nextHeader: string
+    xLabel: string
+    xPrev: string
+    xCurrent: string
+    xNext: string
+    yLabel: string
+    yPrev: string
+    yCurrent: string
+    yNext: string
+    // the series' values (each point's `f[n+1](x)`) over time, around the hovered point (see
+    // `SPARKLINE_POINTS`), for the sparkline -- which is drawn once the tooltip's width is known
+    sparklineValues: Array<{ time: number, value: number }>
+    // the hovered point's time (marked on the sparkline)
+    hoveredTime: number
+}
+
+// the height of the tooltip's sparkline (of the series' values over time); it's as wide as the
+// tooltip's content (at least this wide)
+const SPARKLINE_HEIGHT = 36
+const MIN_SPARKLINE_WIDTH = 120
+// the number of points (around the hovered point) the sparkline shows
+const SPARKLINE_POINTS = 60
+
+/**
+ * Adds tooltip content as a table. The columns of the table are the previous, current, and next
+ * iterate (relative to the hovered point). The rows of the table are the time values for the
+ * first row, and the iterate values (each point's `f[n+1](x)`) for the second row. Below the
+ * table, as wide as it, a sparkline of the series' values over time -- the 60 points around the
+ * hovered point -- with the hovered point marked.
  * ```
  * series name
- *            previous  current         next
- * time        x_tb      x_ta       x_ta - x_tb
- * value       y_tb      y_ta       y_ta - y_tb
+ *            f[n-1](x)     f[n](x)      f[n+1](x)
+ * t (ms)       t_p            t_c          t_n
+ * value        v_p            v_c          v_n
+ * value over time
+ * sparkline
  * ```
  *
- * Registers the tooltip-content provider with the `ChartContext` so that when d3 fires a mouse-over
- * event on a series. The content provider is returns the {@link addTooltipContent} function
- * when called. And when called the {@link addTooltipContent} function adds the actual tooltip
- * content to the SVG element.
+ * Built on {@link TooltipContent}; put it inside a {@link Tooltip}.
  * @param props The properties describing the tooltip content
- * @return null
+ * @return The tooltip's portal, or `null` when nothing is being hovered
  */
-export function PoincarePlotTooltipContent(props: Props): null {
-    const {
-        chartId,
-        container,
-        tooltip
-    } = useChart<IterateDatum, SeriesLineStyle, NoTooltipMetadata, ContinuousAxisRange, ContinuousNumericAxis>()
-
-    const {registerTooltipContentProvider} = tooltip
-
-    const {
-        margin,
-        plotDimensions,
-    } = usePlotDimensions()
-
+export function PoincarePlotTooltipContent(props: Props): ReactElement | null {
     const {
         xLabel,
         yLabel,
-        nMinusLagHeader = ' f[n-1](x)',
-        nHeader = ' f[n](x)  ',
-        nPlusLagHeader = ' f[n+1](x)',
+        // (the `nMinusLagHeader`, `nHeader`, and `nPlusLagHeader` properties aren't used: the
+        // column headers are always the `f[i](x)` form, built from the point's index)
         xValueFormatter = formatTime,
         yValueFormatter = formatValue,
-        xChangeFormatter = formatTimeChange,
-        yChangeFormatter = formatValueChange,
         style,
     } = props
 
-    const tooltipStyle = useMemo(() => ({...defaultTooltipStyle, ...style}), [style])
+    return (
+        <TooltipContent<IterateDatum, NoTooltipMetadata, PoincareTooltipContent>
+            style={style}
+            capture={(seriesName, time, tooltipData) =>
+                captureTooltipContent(seriesName, time, tooltipData, {xLabel, yLabel, xValueFormatter, yValueFormatter})
+            }
+        >
+            {(tooltipContent, tooltipStyle) =>
+                // (a fresh body for each point, so its sparkline starts out narrower than the
+                // tooltip, and the tooltip's size is right when it's placed)
+                <PoincareTooltipBody key={tooltipContent.hoveredTime} tooltipContent={tooltipContent} tooltipStyle={tooltipStyle}/>
+            }
+        </TooltipContent>
+    )
+}
 
-    // register the tooltip content provider, which when called on mouse-enter-series events
-    // will render the tooltip container and then the tooltip content. recall that the
-    // tooltip content is generated in this plot (because this is the plot that holds all the
-    // information needed to render it), and the container for the content is rendered by
-    // the <Tooltip>, which this knows nothing about.
-    //
-    // the 'registration function accepts a function of the form (seriesName, time, series) => TooltipDimensions.
-    // and that function has a closure on the content-specific information needed to add the
-    // actual content
-    useEffect(
+/**
+ * The Poincaré tooltip's content: the series' name, the table of the hovered iterate and its
+ * neighbors, and, as wide as the table (or the name, when that's wider), the sparkline of the
+ * series' values around the hovered point
+ * @param props The captured content, and the tooltip's style
+ * @return The tooltip's content
+ */
+function PoincareTooltipBody(props: {tooltipContent: PoincareTooltipContent, tooltipStyle: TooltipStyle}): ReactElement {
+    const {tooltipContent, tooltipStyle} = props
+
+    // the sparkline is as wide as the tooltip's content: its table, or its title when that's wider.
+    // Both are measured at their natural widths (rather than the sparkline-stretched width of the
+    // tooltip itself), before the tooltip is painted.
+    const titleRef = useRef<HTMLDivElement>(null)
+    const tableRef = useRef<HTMLTableElement>(null)
+    const [sparklineWidth, setSparklineWidth] = useState<number>(MIN_SPARKLINE_WIDTH)
+    useLayoutEffect(
         () => {
-            if (container) {
-                // register the tooltip content provider function with the chart hook (useChart) so that
-                // it is visible to all children of the Chart (i.e. the <Tooltip>).
-                registerTooltipContentProvider(
-                    (seriesName: string, time: number, tooltipData: TooltipData<IterateDatum, NoTooltipMetadata>, mouseCoords: [x: number, y: number]) =>
-                        addTooltipContent(
-                            seriesName, time, tooltipData, mouseCoords,
-                            chartId, container, margin, plotDimensions, tooltipStyle,
-                        )
-                )
-            }
+            const contentWidth = Math.max(
+                MIN_SPARKLINE_WIDTH,
+                tableRef.current?.offsetWidth ?? 0,
+                titleRef.current?.offsetWidth ?? 0
+            )
+            if (contentWidth !== sparklineWidth) setSparklineWidth(contentWidth)
         },
-        [
-            chartId, container, margin, plotDimensions, registerTooltipContentProvider,
-            xLabel, xChangeFormatter, xValueFormatter,
-            yLabel, yChangeFormatter, yValueFormatter,
-            nMinusLagHeader, nHeader, nPlusLagHeader,
-            tooltipStyle
-        ]
+        [tooltipContent, sparklineWidth]
     )
 
-    return null
-}
+    const cellStyle: CSSProperties = {padding: '1px 8px', textAlign: 'right', border: 'none'}
+    const rowLabelStyle: CSSProperties = {...cellStyle, textAlign: 'left', paddingLeft: 0}
+    const headerCellStyle: CSSProperties = {...cellStyle, fontWeight: tooltipStyle.fontWeight + 550}
+    // the "current" (middle) column stands out
+    const currentColumnStyle: CSSProperties = {...cellStyle, fontWeight: tooltipStyle.fontWeight + 300}
 
-const dimension: Dimension = {
-    width: 60,
-    defaultWidth: 70,
-    minWidth: 50,
-    maxWidth: 100,
+    // the series' values around the hovered point, over time, with the hovered point marked (when
+    // there are enough values to draw)
+    const sparkline = sparklineFor(
+        tooltipContent.sparklineValues, sparklineWidth, SPARKLINE_HEIGHT, 2, undefined, tooltipContent.hoveredTime
+    )
 
-    height: 15,
-    defaultHeight: 15,
-    minHeight: 10,
-    maxHeight: 50
+    return <>
+                <div
+                    ref={titleRef}
+                    style={{fontSize: tooltipStyle.fontSize, fontWeight: tooltipStyle.fontWeight, marginBottom: 4, width: 'fit-content'}}
+                >
+                    {tooltipContent.seriesName}
+                </div>
+                {/* (at its natural width, rather than the app's default full-width tables, so that it
+                    can be measured for the sparkline's width) */}
+                <table ref={tableRef} style={{fontSize: tooltipStyle.fontSize, borderCollapse: 'collapse', border: 'none', width: 'auto'}}>
+                    <thead>
+                    <tr>
+                        <td style={rowLabelStyle}/>
+                        <td style={headerCellStyle}>{tooltipContent.prevHeader}</td>
+                        <td style={{...headerCellStyle, ...currentColumnStyle}}>{tooltipContent.currentHeader}</td>
+                        <td style={headerCellStyle}>{tooltipContent.nextHeader}</td>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td style={rowLabelStyle}>{tooltipContent.xLabel}</td>
+                        <td style={cellStyle}>{tooltipContent.xPrev}</td>
+                        <td style={currentColumnStyle}>{tooltipContent.xCurrent}</td>
+                        <td style={cellStyle}>{tooltipContent.xNext}</td>
+                    </tr>
+                    <tr>
+                        <td style={rowLabelStyle}>{tooltipContent.yLabel}</td>
+                        <td style={cellStyle}>{tooltipContent.yPrev}</td>
+                        <td style={currentColumnStyle}>{tooltipContent.yCurrent}</td>
+                        <td style={cellStyle}>{tooltipContent.yNext}</td>
+                    </tr>
+                    </tbody>
+                </table>
+                {/* the series' values over time, with the hovered point marked (the dot) */}
+                {sparkline !== undefined && <>
+                    <div style={{fontSize: tooltipStyle.fontSize, marginTop: 8}}>
+                        {tooltipContent.yLabel} over time
+                    </div>
+                    <svg
+                        width={sparklineWidth}
+                        height={SPARKLINE_HEIGHT}
+                        style={{display: 'block', marginTop: 4}}
+                        aria-hidden="true"
+                    >
+                        <path
+                            d={sparkline.path}
+                            fill="none"
+                            stroke={tooltipStyle.fontColor}
+                            strokeWidth={1}
+                            strokeLinejoin="round"
+                            strokeLinecap="round"
+                        />
+                        {sparkline.mark !== undefined &&
+                            <circle
+                                cx={sparkline.mark[0]}
+                                cy={sparkline.mark[1]}
+                                r={2.5}
+                                fill={tooltipStyle.fontColor}
+                            />
+                        }
+                    </svg>
+                </>}
+    </>
+}
+
+// the row labels and value formatters for the tooltip's table
+interface CaptureOptions {
+    xLabel: string
+    yLabel: string
+    xValueFormatter: (value: number) => string
+    yValueFormatter: (value: number) => string
 }
 
 /**
- * Callback function that adds tooltip content and returns the tooltip width and text height
- * @param seriesName The name of the series (i.e. the neuron ID)
- * @param time The time (x-coordinate value) corresponding to the mouse location
+ * Captures the data needed to render the tooltip's content: the table (the hovered point, the
+ * first point within 0.1 of the plot's time, and its neighbors), and the series' values around
+ * the hovered point, over time, for the sparkline
+ * @param seriesName The name of the series
+ * @param time The time of the hovered point
  * @param tooltipData The series data and metadata
- * @param mouseCoords The coordinates of the mouse when the event was fired (relative to the plot container)
- * @param chartId The ID of this chart
- * @param container The plot container (SVGSVGElement)
- * @param margin The plot margins
- * @param tooltipStyle The style properties for the tooltip
- * @param plotDimensions The dimensions of the plot
- * @return The width and text height of the tooltip content
+ * @param options Header labels and value formatters
+ * @return The tooltip's content
  */
-function addTooltipContent(
+function captureTooltipContent(
     seriesName: string,
     time: number,
     tooltipData: TooltipData<IterateDatum, NoTooltipMetadata>,
-    mouseCoords: [x: number, y: number],
-    chartId: number,
-    container: SVGSVGElement,
-    margin: Margin,
-    plotDimensions: Dimensions,
-    tooltipStyle: TooltipStyle
-): TooltipDimensions {
-    const [x, y] = mouseCoords
+    options: CaptureOptions,
+): PoincareTooltipContent {
     const {series} = tooltipData
     const [lower, point, upper, index] = findPointAndNeighbors(
         series, time, 0.1, value => value.time, () => emptyIterateDatum
     )
-
-    const defaultBorderElement: BorderElement = {
-        color: tooltipStyle.borderColor,
-        radius: 0,
-        width: 0,
-        opacity: 0
-    }
-
-    const border: Border = {
-        top: defaultBorderElement,
-        bottom: defaultBorderElement,
-        left: defaultBorderElement,
-        right: defaultBorderElement,
-    }
-
-    const background: Background = {
-        color: tooltipStyle.backgroundColor,
-        opacity: tooltipStyle.backgroundOpacity
-    }
-
-    const font: TableFont = {
-        size: tooltipStyle.fontSize,
-        family: tooltipStyle.fontFamily,
-        color: tooltipStyle.fontColor,
-        weight: tooltipStyle.fontWeight
-    }
-
-    const padding: Padding = {
-        top: tooltipStyle.paddingTop,
-        bottom: tooltipStyle.paddingBottom,
-        right: tooltipStyle.paddingRight,
-        left: tooltipStyle.paddingLeft
-    }
-
-    const currentIterateStyle: CellStyle = {
-        border,
-        dimension,
-        background,
-        font: {...font, weight: 550},
-        padding,
-        alignText: 'right',
-        verticalAlignText: 'middle'
-    }
-
-    return DataFrame
-        .from<number | string>([
-            [lower.time, point.time, upper.time],
-            [lower.iterateN_1, point.iterateN_1, upper.iterateN_1]
-        ])
-        // create the table data that has the column headers
-        .flatMap(df => TableData
-            .fromDataFrame(df)
-            .withColumnHeader([
-                index > 0 ? `f[${index - 1}](x)` : '- n/a -',
-                `f[${index}](x)`,
-                index < series.length - 1 ? `f[${index + 1}](x)` : '- n/a -'
-            ])
-            .flatMap(td => td.withRowHeader(['t (ms)', 'value']))
-        )
-        // add the dat formatters for the (x, y) values of the iterates
-        .flatMap(tableData => TableFormatter.fromTableData(tableData)
-            .addRowFormatter(1, value => formatTime(value as number, ""))
-            .flatMap(tf => tf.addRowFormatter(2, value => formatValue(value as number)))
-            .flatMap(tf => tf.formatTable())
-        )
-        .map(tableData => TableStyler.fromTableData(tableData)
-            .withTableFont(font)
-            .withPadding(padding)
-            .withColumnHeaderStyle({
-                font: {...font, weight: 650},
-                padding: {top: 0, bottom: 10},
-                dimension: {...dimension, maxHeight: 70},
-                alignText: 'center',
-            })
-            .withRowHeaderStyle({
-                font: {...font, weight: 650},
-                padding: {left: 0, right: 10},
-                dimension: dimension,
-                alignText: 'center',
-            })
-            .withColumnStyles([], {
-                padding: {left: 10, right: 10},
-                alignText: 'right',
-            })
-            .withCellStyle(1, 2, currentIterateStyle)
-            .withCellStyle(2, 2, currentIterateStyle)
-            .withRowStyles([], {
-                font,
-                dimension: {...dimension, maxHeight: 20},
-                padding: {top: 0, bottom: 0}}
-            )
-            .styleTable()
-        )
-        .flatMap(styledTable =>
-            createTable(styledTable, container, `t${time}-${seriesName}-header-${chartId}`, tooltipCoordinates)
-        )
-        .map(renderingInfo => {
-            const {tableX: x, tableY: y, tableWidth: contentWidth, tableHeight: contentHeight} = renderingInfo
-            return {x, y, contentWidth, contentHeight}
-        })
-        .getOrThrow()
-
-    /**
-     * Calculates the coordinates of the tooltip based on the width and height of the SVG
-     * table. This is needed because the tooltip needs to be adjusted relative mouse location
-     * when the mouse coordinates are too close to an edge.
-     * @param width The SVG table width
-     * @param height The SVG table height
-     * @return The updated tooltip coordinates
-     */
-    function tooltipCoordinates(width: number, height: number): [x: number, y: number] {
-        return [
-            tooltipX(x, width, plotDimensions, tooltipStyle, margin),
-            tooltipY(y, height, plotDimensions, tooltipStyle, margin)
-        ]
+    const {xLabel, yLabel, xValueFormatter, yValueFormatter} = options
+
+    return {
+        seriesName,
+        // (the headers are always the f[i](x) form, built from the point's index)
+        prevHeader: index > 0 ? `f[${index - 1}](x)` : '- n/a -',
+        currentHeader: `f[${index}](x)`,
+        nextHeader: index < series.length - 1 ? `f[${index + 1}](x)` : '- n/a -',
+        xLabel,
+        xPrev: xValueFormatter(lower.time),
+        xCurrent: xValueFormatter(point.time),
+        xNext: xValueFormatter(upper.time),
+        yLabel,
+        yPrev: yValueFormatter(lower.iterateN_1),
+        yCurrent: yValueFormatter(point.iterateN_1),
+        yNext: yValueFormatter(upper.iterateN_1),
+        sparklineValues: valuesAround(series, index, SPARKLINE_POINTS),
+        hoveredTime: point.time,
     }
+}
 
+/**
+ * The values (each point's `f[n+1](x)`) of (at most) the specified number of points around the
+ * hovered point, over time: centered on the hovered point, or shifted to stay within the series
+ * when the hovered point is near its start or end
+ * @param series The series' iterates, ordered by time
+ * @param index The index of the hovered point (or -1, when it wasn't found)
+ * @param count The (largest) number of points
+ * @return The points' times and values, in order
+ */
+function valuesAround(
+    series: { length: number, [index: number]: IterateDatum },
+    index: number,
+    count: number
+): Array<{ time: number, value: number }> {
+    if (index < 0) return []
+    const start = Math.max(0, Math.min(index - Math.floor(count / 2), series.length - count))
+    const end = Math.min(series.length, start + count)
+    const values: Array<{ time: number, value: number }> = []
+    for (let i = start; i < end; i++) values.push({time: series[i].time, value: series[i].iterateN_1})
+    return values
 }