Tooltip refactor #1168

williamsyang-work · 2025-01-30T00:13:40Z

Refactor Tooltip Components

Overview

This PR modernizes our tooltip implementation by replacing the react-tooltip dependency with a custom tooltip component and introducing a more React-idiomatic state management approach.

Key Changes

Removes dependency on react-tooltip in favor of a custom implementation
Replaces direct DOM manipulation via refs with proper React state management
Introduces an abstract component pattern for consistent tooltip behavior
Removes the separate XY tooltip implementation in favor of a unified approach
Improves type safety and component reusability

Technical Details

New Tooltip Implementation

The new tooltip component uses React's built-in state management and Portal API, providing better control over positioning and animations:

export const TooltipComponent = ({ content = '⏳', visible = false, fadeTransition = 500 }: TooltipProps) => {
    const [state, setState] = useState<TooltipState>({
        content,
        visible,
        zIndex: visible ? 99999 : -99999
    });

    // Clean React-based positioning logic
    const calculateAndSetPosition = () => {
        if (!tooltipRef.current) return;
        
        const viewportWidth = window.innerWidth;
        const viewportHeight = window.innerHeight;
        const tooltipRect = tooltipRef.current.getBoundingClientRect();
        
        // Position calculation logic
    };
}

Compared to the old implementation which relied on external library and callbacks:

<ReactTooltip
    className="react-tooltip"
    id="tooltip-component"
    effect="float"
    type="info"
    place="bottom"
    html={true}
    delayShow={500}
    delayUpdate={500}
    afterShow={() => {
        if (this.state.content === undefined) {
            this.fetchContent(this.state.element);
        }
    }}
/>

Abstract Component Pattern

Enhanced the existing AbstractOutputComponent with tooltip management capabilities:

interface AbstractOutputState {
    tooltipContent?: React.ReactNode;
    tooltipVisible?: boolean;
}

export abstract class AbstractOutputComponent<P extends AbstractOutputProps, S extends AbstractOutputState> extends React.Component<P, S> {
    render(): JSX.Element {
        return (
            <div onMouseLeave={() => this.closeTooltip()}>
                {/* Component content */}
                <TooltipComponent 
                    content={this.state.tooltipContent} 
                    visible={this.state.tooltipVisible} 
                />
            </div>
        );
    }

    protected setTooltipContent(content: React.ReactNode): void {
        this.setState({ tooltipContent: content, tooltipVisible: true });
    }

    protected closeTooltip(): void {
        this.setState({ tooltipVisible: false });
    }
}

This replaces the old callback-based approach:

setElement<T>(element: T, func?: (element: T) => MaybePromise<{ [key: string]: string } | undefined>): void {
    if (element !== this.state.element && this.state.element) {
        if (this.state.content) {
            if (this.timerId === undefined) {
                this.timerId = setTimeout(() => {
                    if (this.state.element !== element) {
                        ReactTooltip.hide();
                        this.setState({ content: undefined });
                    }
                }, 500);
            }
        }
    }
    this.setState({ element, func });
}

Removed Complexity

Eliminated callback-based tooltip content generation
Removed manual DOM event handling for positioning
Simplified tooltip state management

Migration Examples

Here are examples of how components are being updated to use the new tooltip pattern:

XY Chart Tooltip

// ...
if (points.length > 0) {
    this.setTooltipContent(this.generateXYComponentTooltip(tooltipData));
} else {
    this.closeTooltip();
}
// ...

private generateXYComponentTooltip = (tooltipData: TooltipData) => (
    <>
        <p style={{ margin: '0 0 5px 0' }}>{tooltipData?.title}</p>
        <ul style={{ padding: '0' }}>
            {tooltipData.dataPoints?.map(
                (point: { color: string; background: string; label: string; value: string }, i: number) => (
                    <li key={i} style={{ listStyle: 'none', display: 'flex', marginBottom: 5 }}>
                        <div
                            style={{
                                height: '10px',
                                width: '10px',
                                margin: 'auto 0',
                                border: 'solid thin',
                                borderColor: point.color,
                                backgroundColor: point.background
                            }}
                        ></div>
                        <span style={{ marginLeft: '5px' }}>
                            {point.label} {point.value}
                        </span>
                    </li>
                )
            )}
        </ul>
        {tooltipData.zeros > 0 && (
            <p style={{ marginBottom: 0 }}>
                {tooltipData.zeros} other{tooltipData.zeros > 1 ? 's' : ''}: 0
            </p>
        )}
    </>
);

Table Tooltip

// ...
const tooltipContent = this.generateTooltipTable(tooltipObject);
this.setTooltipContent(tooltipContent);
// ...

private generateTooltipTable(tooltip: { [key: string]: string }) {
    return (
        <table>
            {Object.keys(tooltip).map(key => (
                <tr key={key}>
                    <td style={{ textAlign: 'left' }}> {key} </td>
                    <td style={{ textAlign: 'left' }}> {tooltip[key]} </td>
                </tr>
            ))}
        </table>
    );
}

Testing Instructions

Verify tooltip positioning works correctly near viewport edges
Check fade animations on show/hide
Ensure tooltips close properly on scroll/mouse leave
Test with different content types (text, elements, async content)
Compatability with vscode-trace-extension
- You will run into this error linking the packages. Issue Linking TraceViewer packages vscode-trace-extension#175

Future Considerations

Potential for additional customization options (colors, sizes, animations)
Performance optimizations for frequent tooltip updates
Accessibility improvements

bhufmann · 2025-02-06T19:09:52Z

@williamsyang-work thanks for this update. I see that it's still a draft PR. Let us know when it's ready for review.

williamsyang-work · 2025-02-07T17:26:27Z

@williamsyang-work thanks for this update. I see that it's still a draft PR. Let us know when it's ready for review.

@bhufmann I just cleaned up the PR. It's ready for review!

PatrickTasse · 2025-02-20T21:57:43Z

packages/react-components/src/components/tooltip-component.tsx

-    private getContent() {
-        if (this.state.content) {
-            return this.state.content;
+    // Handle content and visibility changes


I am not sure where this happens or can be fixed, but when you hover over the tooltip and do a text range selection, some range selection remains when you close and reopen the tooltip, even when the text content changes.

I don't know what you mean exactly... Can you post a GIF?

I hover on a state on the kworker row, then mouse over the tooltip and select the End time value:

Then I move my mouse and hover over a state on the swapper row, and in the tooltip the End time value (a different string) is already selected:

This example is neat, but when the tooltip content is very different, then the persisted selection can be anything, starting and ending in the middle of words from different properties.

PatrickTasse · 2025-02-21T15:15:27Z

packages/react-components/src/components/timegraph-output-component.tsx

+                {Object.keys(tooltip).map(key => (
+                    <tr key={key}>
+                        <td style={{ textAlign: 'left' }}> {key} </td>
+                        <td style={{ textAlign: 'left' }}> {tooltip[key]} </td>


Seems odd formatting to add spaces around the {...} ? Does it get stripped in the html?

spaces around the {...}

On lines 830-831? I usually don't put spaces around props prop={'content'} but i will inside JS objects { object: 'value' }
At this point it's JSX and not actual HTML. Some react magic converts it to HTML and I'm not sure how that works! Haha.

I mean around {key} and {tooltip[key]} inside the html tag.

PatrickTasse · 2025-02-21T15:18:42Z

packages/react-components/src/components/tooltip-component.tsx

 }

-export class TooltipComponent extends React.Component<unknown, TooltipComponentState> {
-    private static readonly HOURGLASS_NOT_DONE = '&#x23f3;';
+export const TooltipComponent = ({ content = '⏳', visible = false, fadeTransition = 500 }: TooltipProps) => {


I get error/warning: Missing return type on function.

Added typing for the function.

PatrickTasse · 2025-02-21T15:22:11Z

packages/react-components/src/components/abstract-xy-output-component.tsx

@@ -751,7 +770,7 @@ export abstract class AbstractXYOutputComponent<
            rightPos = xLocation;
        }

-        const tooltipData = {
+        const tooltipData: TooltipData = {
            title: timeLabel,
            dataPoints: points,
            top: topPos,


The four positioning fields are not used, so the position calculations above are also not needed, and the x,y function parameters are not needed.

Thanks. I went ahead and removed the function inputs (x, y) as well as the following keys from TooltipData: top, bottom, right, left and opacity, transition.

Function calls of tooltip have also been fixed in xy-output-component and xy-output-overview-component.

PatrickTasse · 2025-02-21T15:22:30Z

packages/react-components/src/components/abstract-xy-output-component.tsx

+    top?: number;
+    bottom?: number;
+    right?: number;
+    left?: number;


The four position fields are not used.

PatrickTasse · 2025-02-21T15:22:46Z

packages/react-components/src/components/abstract-xy-output-component.tsx

+    right?: number;
+    left?: number;
+    opacity?: number;
+    transition?: string;


The transition field is not used.

PatrickTasse · 2025-02-21T15:26:33Z

yarn.lock

-  dependencies:
-    prop-types "^15.7.2"
-    uuid "^7.0.3"
-
 react-tooltip@^4.2.21:


Just checking, is this one still needed?

It's a dependency of @theia/core - Indeed, I do not see directly used in this repo here, but it might be used in the Theia examples in this repo.

$ yarn why react-tooltip yarn why v1.22.22 [1/4] Why do we have the module "react-tooltip"...? [2/4] Initialising dependency graph... [3/4] Finding dependency... [4/4] Calculating file sizes... => Found "react-tooltip@4.5.1" info Reasons this module exists - "_project_#browser-theia-trace-example-app#@theia#core" depends on it - Hoisted from "_project_#browser-theia-trace-example-app#@theia#core#react-tooltip" info Disk size without dependencies: "956KB" info Disk size with unique dependencies: "1.48MB" info Disk size with transitive dependencies: "1.6MB" info Number of shared dependencies: 6

I did check this out before submitting this PR. I made sure react-tooltip was removed from all of the codebase as well as all package.json files. I came to the same conclusion as @marcdumais-work, that @theia was using it somewhere.

In any case, this dependency will not be part of the published npm packages (since they do not depend on it), so we should be good.

Removes 'react-tooltip' dependency and adds an in-house tooltip impl. Simplifies the rendering of tooltips inside of all available views. Fixes some UI bugs with tooltips. Fixes the bugged hourglass bug. Signed-off-by: Will Yang <william.yang@ericsson.com>

williamsyang-work · 2025-03-04T21:54:36Z

@PatrickTasse sorry for the delay. I addressed all of your comments except the first one, which I need some clarification on. Thank you!

williamsyang-work · 2025-03-05T17:58:21Z

After some thinking I decided to refactor this into a React Class Component. It will be easier to maintain.

In calculateAndSetPosition I also moved the div's position manipulation from direct css editing to a react state.

williamsyang-work force-pushed the tooltip-refactor branch 9 times, most recently from 20ed423 to 73c1356 Compare February 5, 2025 21:38

williamsyang-work force-pushed the tooltip-refactor branch 8 times, most recently from d9a90b9 to e2bf86e Compare February 7, 2025 17:13

williamsyang-work marked this pull request as ready for review February 7, 2025 17:26

bhufmann requested a review from PatrickTasse February 13, 2025 21:15

PatrickTasse requested changes Feb 20, 2025

View reviewed changes

PatrickTasse requested changes Feb 21, 2025

View reviewed changes

Tooltip refactor

1d50063

Removes 'react-tooltip' dependency and adds an in-house tooltip impl. Simplifies the rendering of tooltips inside of all available views. Fixes some UI bugs with tooltips. Fixes the bugged hourglass bug. Signed-off-by: Will Yang <william.yang@ericsson.com>

williamsyang-work force-pushed the tooltip-refactor branch from e2bf86e to 1d50063 Compare March 4, 2025 21:51

williamsyang-work force-pushed the tooltip-refactor branch from 593e4b0 to 76a877d Compare March 5, 2025 17:57

williamsyang-work force-pushed the tooltip-refactor branch from 76a877d to 15d9a9f Compare March 5, 2025 18:06

Changed TooltipComponent into a Class Component

f5c6ba4

williamsyang-work force-pushed the tooltip-refactor branch from 15d9a9f to f5c6ba4 Compare March 5, 2025 19:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tooltip refactor #1168

Tooltip refactor #1168

williamsyang-work commented Jan 30, 2025 •

edited

Loading

bhufmann commented Feb 6, 2025

williamsyang-work commented Feb 7, 2025

PatrickTasse Feb 20, 2025

williamsyang-work Mar 4, 2025

PatrickTasse Mar 5, 2025

PatrickTasse Feb 21, 2025

williamsyang-work Mar 4, 2025

PatrickTasse Mar 5, 2025

PatrickTasse Feb 21, 2025

williamsyang-work Mar 4, 2025

PatrickTasse Feb 21, 2025

williamsyang-work Mar 4, 2025

PatrickTasse Feb 21, 2025

PatrickTasse Feb 21, 2025

PatrickTasse Feb 21, 2025

marcdumais-work Mar 4, 2025

williamsyang-work Mar 4, 2025

marcdumais-work Mar 5, 2025

williamsyang-work commented Mar 4, 2025

williamsyang-work commented Mar 5, 2025 •

edited

Loading

Tooltip refactor #1168

Are you sure you want to change the base?

Tooltip refactor #1168

Conversation

williamsyang-work commented Jan 30, 2025 • edited Loading

Refactor Tooltip Components

Overview

Key Changes

Technical Details

New Tooltip Implementation

Abstract Component Pattern

Removed Complexity

Migration Examples

XY Chart Tooltip

Table Tooltip

Testing Instructions

Future Considerations

bhufmann commented Feb 6, 2025

williamsyang-work commented Feb 7, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williamsyang-work commented Mar 4, 2025

williamsyang-work commented Mar 5, 2025 • edited Loading

williamsyang-work commented Jan 30, 2025 •

edited

Loading

williamsyang-work commented Mar 5, 2025 •

edited

Loading