stream-charts 1.0.1 → 1.1.1

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

@@ -0,0 +1,352 @@
+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.
+
+ */
+
+/**
+ * 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
+ * ```
+ */
+interface Props {
+    // label for the x-values (x-value row header)
+    xLabel: string
+    yLabel: string
+    nMinusLagHeader?: string
+    nHeader?: string
+    nPlusLagHeader?: string
+    xValueFormatter?: (value: number) => string
+    yValueFormatter?: (value: number) => string
+    xChangeFormatter?: (value1: number, value2: number) => string,
+    yChangeFormatter?: (value1: number, value2: number) => string,
+    style?: Partial<TooltipStyle>
+}
+
+/**
+ * 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.
+ * ```
+ * series name
+ *            previous  current         next
+ * time        x_tb      x_ta       x_ta - x_tb
+ * value       y_tb      y_ta       y_ta - y_tb
+ * ```
+ *
+ * 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.
+ * @param props The properties describing the tooltip content
+ * @return null
+ * @constructor
+ */
+export function PoincarePlotTooltipContent(props: Props): null {
+    const {
+        chartId,
+        container,
+        tooltip
+    } = useChart<IterateDatum, SeriesLineStyle, NoTooltipMetadata, ContinuousAxisRange, ContinuousNumericAxis>()
+
+    const {registerTooltipContentProvider} = tooltip
+
+    const {
+        margin,
+        plotDimensions,
+    } = usePlotDimensions()
+
+    const {
+        xLabel,
+        yLabel,
+        nMinusLagHeader = ' f[n-1](x)',
+        nHeader = ' f[n](x)  ',
+        nPlusLagHeader = ' f[n+1](x)',
+        xValueFormatter = formatTime,
+        yValueFormatter = formatValue,
+        xChangeFormatter = formatTimeChange,
+        yChangeFormatter = formatValueChange,
+        style,
+    } = props
+
+    const tooltipStyle = useMemo(() => ({...defaultTooltipStyle, ...style}), [style])
+
+    // 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(
+        () => {
+            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,
+                        )
+                )
+            }
+        },
+        [
+            chartId, container, margin, plotDimensions, registerTooltipContentProvider,
+            xLabel, xChangeFormatter, xValueFormatter,
+            yLabel, yChangeFormatter, yValueFormatter,
+            nMinusLagHeader, nHeader, nPlusLagHeader,
+            tooltipStyle
+        ]
+    )
+
+    return null
+}
+
+const dimension: Dimension = {
+    width: 60,
+    defaultWidth: 70,
+    minWidth: 50,
+    maxWidth: 100,
+
+    height: 15,
+    defaultHeight: 15,
+    minHeight: 10,
+    maxHeight: 50
+}
+
+/**
+ * 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
+ * @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
+ */
+function addTooltipContent(
+    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
+    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)
+        ]
+    }
+
+}

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

@@ -0,0 +1,274 @@
+import {Dimensions, Margin} from "../styling/margins";
+import {categoryTooltipY, defaultTooltipStyle, TooltipDimensions, TooltipStyle, tooltipX} from "./tooltipUtils";
+import * as d3 from "d3";
+import {formatTime, formatValue} from "../utils";
+import {useEffect, useMemo} from "react";
+import {NoTooltipMetadata, useChart} from "../hooks/useChart";
+import {OrdinalStringAxis, SeriesLineStyle} from "../axes/axes";
+import {usePlotDimensions} from "../hooks/usePlotDimensions";
+import {Datum} from "../series/timeSeries";
+import {TooltipData} from "../hooks/useTooltip";
+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 ScatterPlotTooltipContent}
+ 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 bit more details 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 ScatterPlotTooltipContent}.
+ 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 ScatterPlotTooltipContent} component. The last two
+ arguments, `defaultTooltipStyle` and `options` are specific to the {@link ScatterPlotTooltipContent}.
+ For example, the `options` property is set by the caller of the {@link ScatterPlotTooltipContent}
+ 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 you component.
+
+ */
+
+/**
+ * Options for displaying the tooltip content. These options are specific to this
+ * particular implementation of a tooltip content. The options effect are applied
+ * as shown below.
+ * ```
+ * series name
+ * formatters.x(x), formatters.y(y)
+ * ```
+ */
+interface TooltipOptions {
+    formatters: {
+        x: (value: number) => string,
+        y: (value: number) => string,
+    }
+}
+
+/**
+ * Properties for rendering the tooltip content. The properties are applied as
+ * shown below.
+ * ```
+ * series name
+ * xFormatter, yFormatter
+ * ```
+ */
+interface Props {
+    xFormatter?: (value: number) => string
+    yFormatter?: (value: number) => string
+    style?: Partial<TooltipStyle>
+}
+
+/**
+ * Adds tooltip content that shows the series name and the (time, value) of the selected point.
+ * ```
+ * series name
+ * time, value
+ * ```
+ *
+ * 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.
+ * @param props The properties describing the tooltip content
+ * @return null
+ * @constructor
+ */
+export function RasterPlotTooltipContent(props: Props): null {
+    const {
+        chartId,
+        container,
+        tooltip,
+        axes
+    } = useChart<Datum, SeriesLineStyle, NoTooltipMetadata, ContinuousAxisRange, OrdinalStringAxis>()
+
+    const {registerTooltipContentProvider} = tooltip
+
+    const {
+        yAxesState,
+        axisAssignmentsFor
+    } = axes
+
+    const {margin, plotDimensions} = usePlotDimensions()
+
+    const {
+        xFormatter = formatTime,
+        yFormatter = formatValue,
+        style,
+    } = props
+
+    const tooltipStyle = useMemo(() => ({...defaultTooltipStyle, ...style}), [style])
+
+    // 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 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 know 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(
+        () => {
+            if (container) {
+                // assemble the options for adding the tooltip
+                const options: TooltipOptions = {
+                    formatters: {
+                        x: xFormatter,
+                        y: yFormatter,
+                    }
+                }
+
+                // 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(
+                    /**
+                     *
+                     * @param seriesName The name of the series
+                     * @param time The mouse time
+                     * @param tooltipData The tooltip data holding the series and metadata (data about the series)
+                     * @param mouseCoords The coordinates of the mouse
+                     * @return The tooltip contents
+                     */
+                    (seriesName: string, time: number, tooltipData: TooltipData<Datum, NoTooltipMetadata>, mouseCoords: [x: number, y: number]) => {
+                        const yAxisId = axisAssignmentsFor(seriesName).yAxis
+                        const assignedAxis = yAxesState
+                            .axisFor(yAxisId)
+                            // .getOrElse(undefined as unknown as OrdinalStringAxis)
+                            .getOrThrow(() => new Error(`No assigned y-axis exists; axis_id: ${yAxisId}`))
+                        return addTooltipContent(
+                            seriesName, time, tooltipData.series[0], mouseCoords,
+                            chartId, container, margin, plotDimensions, tooltipStyle,
+                            assignedAxis,
+                            options
+                        )
+                    }
+                )
+            }
+        },
+        [
+            chartId, container, margin, plotDimensions, registerTooltipContentProvider,
+            xFormatter,
+            yFormatter,
+            tooltipStyle,
+            yAxesState, axisAssignmentsFor
+        ]
+    )
+
+    return null
+}
+
+/**
+ * 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
+ * @param selected The selected datum (time, value)
+ * @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 axis The category axis to which the time-series is associated
+ * @param plotDimensions The dimensions of the plot
+ * @param options The options passed through the the function that adds the tooltip content
+ * @return The width and text height of the tooltip content
+ */
+function addTooltipContent(
+    seriesName: string,
+    time: number,
+    selected: Datum,
+    mouseCoords: [x: number, y: number],
+    chartId: number,
+    container: SVGSVGElement,
+    margin: Margin,
+    plotDimensions: Dimensions,
+    tooltipStyle: TooltipStyle,
+    axis: OrdinalStringAxis,
+    options: TooltipOptions
+): TooltipDimensions {
+    const {formatters} = options
+    const [x, ] = mouseCoords
+    const {time: spikeTime, value} = selected
+
+    // display the neuron ID in the tooltip
+    const header = d3.select<SVGSVGElement | null, any>(container)
+        .append<SVGTextElement>("text")
+        .attr('id', `tn${spikeTime}-${seriesName}-${chartId}`)
+        .attr('class', 'tooltip')
+        .attr('fill', tooltipStyle.fontColor)
+        .attr('font-family', 'sans-serif')
+        .attr('font-size', tooltipStyle.fontSize)
+        .attr('font-weight', tooltipStyle.fontWeight)
+        .text(() => seriesName)
+
+    // display the time (ms) and spike strength (mV) in the tooltip
+    const text = d3.select<SVGSVGElement | null, any>(container)
+        .append<SVGTextElement>("text")
+        .attr('id', `t${spikeTime}-${seriesName}-${chartId}`)
+        .attr('class', 'tooltip')
+        .attr('fill', tooltipStyle.fontColor)
+        .attr('font-family', 'sans-serif')
+        .attr('font-size', tooltipStyle.fontSize + 2)
+        .attr('font-weight', tooltipStyle.fontWeight + 150)
+        .text(() => `${formatters.x(spikeTime)}, ${formatters.y(value)}`)
+
+    // calculate the max width and height of the text
+    const tooltipWidth = Math.max(header.node()?.getBBox()?.width || 0, text.node()?.getBBox()?.width || 0);
+    const headerTextHeight = header.node()?.getBBox()?.height || 0;
+    const idHeight = text.node()?.getBBox()?.height || 0;
+    const textHeight = headerTextHeight + idHeight;
+
+    // set the header text location
+    // const spikeHeight = plotDimensions.height / liveDataRef.current.size
+    const xCoord = tooltipX(x, tooltipWidth, plotDimensions, tooltipStyle, margin)
+    const yCoord = categoryTooltipY(seriesName, textHeight, axis, tooltipStyle, margin, axis.scale.bandwidth(), plotDimensions)
+    const xTooltip = xCoord + tooltipStyle.paddingLeft
+    const yTooltip = yCoord + tooltipStyle.paddingTop
+    header
+        .attr('x', () => xTooltip)
+        .attr('y', () => yTooltip - idHeight + textHeight)
+
+    // set the tooltip text (i.e. neuron ID) location
+    text
+        .attr('x', () => xTooltip)
+        .attr('y', () => yTooltip + textHeight)
+
+    return {x: xCoord, y: yCoord, contentWidth: tooltipWidth, contentHeight: textHeight}
+}