Skip to content

Commit 1d50063

Browse files
williamsyang-workwilliamsyang-work
committed
Tooltip refactor
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>
1 parent b39c595 commit 1d50063

16 files changed

+293
-404
lines changed

‎packages/react-components/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
"react-contexify": "^5.0.0",
3434
"react-grid-layout": "1.2.0",
3535
"react-modal": "^3.8.1",
36-
"react-tooltip": "4.2.14",
3736
"react-virtualized": "^9.21.0",
3837
"timeline-chart": "^0.4.1",
3938
"traceviewer-base": "0.6.0",

‎packages/react-components/src/components/__tests__/__snapshots__/table-renderer-components.test.tsx.snap

-2
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,6 @@ exports[`<TableOutputComponent /> Renders AG-Grid table with provided props & st
7878
<div>
7979
<div
8080
class="output-container undefined"
81-
data-for="tooltip-component"
82-
data-tip=""
8381
id="00"
8482
style="width: 0px; height: 0px;"
8583
tabindex="-1"

‎packages/react-components/src/components/__tests__/table-renderer-components.test.tsx

-3
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ describe('<TableOutputComponent />', () => {
2727

2828
test('Renders AG-Grid table with provided props & state', async () => {
2929
const tableOutputComponentProps: AbstractOutputProps = {
30-
tooltipComponent: null,
3130
style: {
3231
width: 0,
3332
height: 0,
@@ -61,7 +60,6 @@ describe('<TableOutputComponent />', () => {
6160
onOutputRemove: () => 0,
6261
unitController: new TimeGraphUnitController(BigInt(0), { start: BigInt(0), end: BigInt(0) }),
6362
backgroundTheme: 'light',
64-
tooltipXYComponent: null,
6563
outputWidth: 0
6664
};
6765

@@ -95,7 +93,6 @@ describe('<TableOutputComponent />', () => {
9593
// Renders with provided props
9694
expect(table.state.tableColumns).toEqual(tableOutputComponentState);
9795
expect(table.props.backgroundTheme).toEqual('light');
98-
expect(table.props.tooltipComponent).toEqual(null);
9996
expect(table.props.style).toEqual({
10097
width: 0,
10198
height: 0,

‎packages/react-components/src/components/__tests__/tooltip-component.test.tsx

+21-75
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,36 @@
1+
import { render, fireEvent, act } from '@testing-library/react';
12
import * as React from 'react';
2-
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
33
import { TooltipComponent } from '../tooltip-component';
44

5-
const model = {
6-
id: '123',
7-
range: { start: 1, end: 10 },
8-
label: 'model'
9-
};
10-
const tooltip = new TooltipComponent(10);
11-
tooltip.setState = jest.fn();
12-
13-
describe('Tooltip component', () => {
14-
let axisComponent: any;
15-
const ref = (el: TooltipComponent | undefined | null): void => {
16-
axisComponent = el;
17-
};
18-
5+
describe('TooltipComponent', () => {
196
beforeEach(() => {
20-
axisComponent = null;
7+
document.body.innerHTML = '';
218
});
229

23-
afterEach(() => {
24-
cleanup();
25-
jest.clearAllMocks();
10+
it('renders content', async () => {
11+
render(<TooltipComponent visible={true} content="Test Content" />);
12+
const tooltip = document.querySelector('.trace-compass-tooltip') as HTMLElement;
13+
expect(tooltip.textContent).toBe('Test Content');
14+
expect(tooltip.style.opacity).toBe('1');
2615
});
2716

28-
/*
29-
* Skip due to issues with TooltipComponent:
30-
*
31-
* react-tooltip v4.2.14 works in the application but causes an exception
32-
* in tests (https://github.com/ReactTooltip/react-tooltip/issues/681),
33-
* which is fixed in v4.2.17. However, version v4.2.17 breaks the tooltip
34-
* when running in the application.
35-
*/
36-
it.skip('renders itself', () => {
37-
render(<TooltipComponent />);
38-
expect(axisComponent).toBeTruthy();
39-
expect(axisComponent instanceof TooltipComponent).toBe(true);
40-
});
41-
42-
// Skip due to issues with TooltipComponent (see above for details)
43-
it.skip('resets timer on mouse enter', () => {
44-
tooltip.state = {
45-
element: model,
46-
func: undefined,
47-
content: 'Test'
48-
};
49-
render(<TooltipComponent />);
50-
const component = screen.getByRole('tooltip-component-role');
51-
fireEvent.mouseEnter(component);
52-
fireEvent.mouseLeave(component);
53-
54-
expect(tooltip.setState).toBeCalledWith({ content: undefined });
55-
});
56-
57-
it('displays a tooltip for a time graph state component', () => {
58-
tooltip.state = {
59-
element: undefined,
60-
func: undefined,
61-
content: undefined
62-
};
63-
tooltip.setElement(model);
64-
65-
expect(tooltip.setState).toBeCalledWith({ element: model, func: undefined });
66-
});
17+
it('de-renders when visibility changes', async () => {
18+
const { rerender } = render(<TooltipComponent visible={true} content="Test" />);
19+
const tooltip = document.querySelector('.trace-compass-tooltip') as HTMLElement;
6720

68-
it('hides tooltip if mouse is not hovering over element', async () => {
69-
tooltip.state = {
70-
element: model,
71-
func: undefined,
72-
content: 'Test'
73-
};
74-
tooltip.setElement(undefined);
75-
await new Promise(r => setTimeout(r, 500));
21+
expect(tooltip.style.opacity).toBe('1');
7622

77-
expect(tooltip.setState).toBeCalledWith({ content: undefined });
23+
rerender(<TooltipComponent visible={false} content="Test" />);
24+
await new Promise(resolve => setTimeout(resolve, 1001));
25+
expect(tooltip.style.opacity).toBe('0');
7826
});
7927

80-
it('hide tooltip because there is no content', () => {
81-
tooltip.state = {
82-
element: model,
83-
func: undefined,
84-
content: undefined
85-
};
86-
tooltip.setElement(undefined);
28+
it('stays rendered when mouse moves on top of it', async () => {
29+
render(<TooltipComponent visible={true} content="Test" />);
30+
const tooltip = document.querySelector('.trace-compass-tooltip') as HTMLElement;
8731

88-
expect(tooltip.setState).toBeCalledWith({ content: undefined });
32+
fireEvent.mouseEnter(tooltip);
33+
await new Promise(resolve => setTimeout(resolve, 500));
34+
expect(tooltip.style.opacity).toBe('1');
8935
});
9036
});

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

+12-5
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,12 @@ import { TimeRange } from 'traceviewer-base/lib/utils/time-range';
88
import { OutputComponentStyle } from './utils/output-component-style';
99
import { OutputStyleModel } from 'tsp-typescript-client/lib/models/styles';
1010
import { TooltipComponent } from './tooltip-component';
11-
import { TooltipXYComponent } from './tooltip-xy-component';
1211
import { ResponseStatus } from 'tsp-typescript-client/lib/models/response/responses';
1312
import { signalManager } from 'traceviewer-base/lib/signals/signal-manager';
1413
import { DropDownComponent, DropDownSubSection, OptionState } from './drop-down-component';
1514

1615
export interface AbstractOutputProps {
1716
tspClient: ITspClient;
18-
tooltipComponent: TooltipComponent | null;
19-
tooltipXYComponent: TooltipXYComponent | null;
2017
traceId: string;
2118
traceName?: string;
2219
range: TimeRange;
@@ -51,6 +48,8 @@ export interface AbstractOutputState {
5148
outputStatus: string;
5249
styleModel?: OutputStyleModel;
5350
dropDownOpen?: boolean;
51+
tooltipContent?: React.ReactNode;
52+
tooltipVisible?: boolean;
5453
}
5554

5655
export abstract class AbstractOutputComponent<
@@ -99,8 +98,7 @@ export abstract class AbstractOutputComponent<
9998
onMouseDown={this.props.onMouseDown}
10099
onTouchStart={this.props.onTouchStart}
101100
onTouchEnd={this.props.onTouchEnd}
102-
data-tip=""
103-
data-for="tooltip-component"
101+
onMouseLeave={() => this.closeTooltip()}
104102
>
105103
<div
106104
id={this.getOutputComponentDomId() + 'handle'}
@@ -117,6 +115,7 @@ export abstract class AbstractOutputComponent<
117115
{this.renderMainOutputContainer()}
118116
</div>
119117
{this.props.children}
118+
<TooltipComponent content={this.state.tooltipContent} visible={this.state.tooltipVisible} />
120119
</div>
121120
);
122121
}
@@ -314,4 +313,12 @@ export abstract class AbstractOutputComponent<
314313
protected getTitleBarTooltip(): string {
315314
return this.props.outputDescriptor.name;
316315
}
316+
317+
protected setTooltipContent(content: React.ReactNode): void {
318+
this.setState({ tooltipContent: content, tooltipVisible: true });
319+
}
320+
321+
protected closeTooltip(): void {
322+
this.setState({ tooltipVisible: false });
323+
}
317324
}

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

+50-35
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,19 @@ export type AbstractXYOutputState = AbstractTreeOutputState & {
6464
cursor?: string;
6565
};
6666

67+
interface Point {
68+
label: any;
69+
color: any;
70+
background: any;
71+
value: string;
72+
}
73+
74+
interface TooltipData {
75+
title?: string;
76+
dataPoints?: Point[];
77+
zeros: number;
78+
}
79+
6780
class xyPair {
6881
x: number;
6982
y: number;
@@ -651,7 +664,7 @@ export abstract class AbstractXYOutputComponent<
651664
}
652665
}
653666

654-
protected tooltip(x: number, y: number): void {
667+
protected tooltip(): void {
655668
const xPos = this.positionXMove;
656669
const timeForX = this.getTimeForX(xPos);
657670
let timeLabel: string | undefined = timeForX.toString() + ' ns';
@@ -664,7 +677,7 @@ export abstract class AbstractXYOutputComponent<
664677
: this.chartRef.current.chartInstance.height;
665678
const arraySize = this.state.xyData.labels.length;
666679
const index = Math.max(Math.round((xPos / chartWidth) * (arraySize - 1)), 0);
667-
const points: any = [];
680+
const points: Point[] = [];
668681
let zeros = 0;
669682

670683
this.state.xyData.datasets.forEach((d: any) => {
@@ -717,7 +730,7 @@ export abstract class AbstractXYOutputComponent<
717730
// If there are more than 10 lines in the chart, summarise the ones that are equal to 0.
718731
if (!invalidPoint) {
719732
if (this.state.xyData.datasets.length <= 10 || rounded > 0) {
720-
const point: any = {
733+
const point = {
721734
label: d.label,
722735
color: d.borderColor,
723736
background: d.backgroundColor,
@@ -732,46 +745,48 @@ export abstract class AbstractXYOutputComponent<
732745
// Sort in decreasing order
733746
points.sort((a: any, b: any) => Number(b.value) - Number(a.value));
734747

735-
// Adjust tooltip position if mouse is too close to the bottom of the window
736-
let topPos = undefined;
737-
let bottomPos = undefined;
738-
if (y > window.innerHeight - 350) {
739-
bottomPos = window.innerHeight - y;
740-
} else {
741-
topPos = window.pageYOffset + y - 40;
742-
}
743-
744-
// Adjust tooltip position if mouse is too close to the left edge of the chart
745-
let leftPos = undefined;
746-
let rightPos = undefined;
747-
const xLocation = chartWidth - xPos;
748-
if (xLocation > chartWidth * 0.8) {
749-
leftPos = x - this.props.style.componentLeft;
750-
} else {
751-
rightPos = xLocation;
752-
}
753-
754-
const tooltipData = {
748+
const tooltipData: TooltipData = {
755749
title: timeLabel,
756750
dataPoints: points,
757-
top: topPos,
758-
bottom: bottomPos,
759-
right: rightPos,
760-
left: leftPos,
761-
opacity: 1,
762751
zeros
763752
};
764753

765754
if (points.length > 0) {
766-
this.props.tooltipXYComponent?.setElement(tooltipData);
755+
this.setTooltipContent(this.generateXYComponentTooltip(tooltipData));
767756
} else {
768-
this.hideTooltip();
757+
this.closeTooltip();
769758
}
770759
}
771760

772-
protected hideTooltip(): void {
773-
this.props.tooltipXYComponent?.setElement({
774-
opacity: 0
775-
});
776-
}
761+
private generateXYComponentTooltip = (tooltipData: TooltipData) => (
762+
<>
763+
<p style={{ margin: '0 0 5px 0' }}>{tooltipData?.title}</p>
764+
<ul style={{ padding: '0' }}>
765+
{tooltipData.dataPoints?.map(
766+
(point: { color: string; background: string; label: string; value: string }, i: number) => (
767+
<li key={i} style={{ listStyle: 'none', display: 'flex', marginBottom: 5 }}>
768+
<div
769+
style={{
770+
height: '10px',
771+
width: '10px',
772+
margin: 'auto 0',
773+
border: 'solid thin',
774+
borderColor: point.color,
775+
backgroundColor: point.background
776+
}}
777+
></div>
778+
<span style={{ marginLeft: '5px' }}>
779+
{point.label} {point.value}
780+
</span>
781+
</li>
782+
)
783+
)}
784+
</ul>
785+
{tooltipData.zeros > 0 && (
786+
<p style={{ marginBottom: 0 }}>
787+
{tooltipData.zeros} other{tooltipData.zeros > 1 ? 's' : ''}: 0
788+
</p>
789+
)}
790+
</>
791+
);
777792
}

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

+22-3
Original file line numberDiff line numberDiff line change
@@ -214,11 +214,17 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
214214
this.onElementSelected(this.selectedElement);
215215
});
216216
this.chartLayer.registerMouseInteractions({
217-
mouseover: el => {
218-
this.props.tooltipComponent?.setElement(el, () => this.fetchTooltip(el));
217+
mouseover: async el => {
218+
const tooltipObject = await this.fetchTooltip(el);
219+
if (!tooltipObject) {
220+
this.closeTooltip();
221+
} else {
222+
const tooltipContent = this.generateTooltipTable(tooltipObject);
223+
this.setTooltipContent(tooltipContent);
224+
}
219225
},
220226
mouseout: () => {
221-
this.props.tooltipComponent?.setElement(undefined);
227+
this.closeTooltip();
222228
},
223229
click: (el, ev, clickCount) => {
224230
if (clickCount === 2) {
@@ -816,6 +822,19 @@ export class TimegraphOutputComponent extends AbstractTreeOutputComponent<Timegr
816822
return fullTooltip;
817823
}
818824

825+
private generateTooltipTable(tooltip: { [key: string]: string }) {
826+
return (
827+
<table>
828+
{Object.keys(tooltip).map(key => (
829+
<tr key={key}>
830+
<td style={{ textAlign: 'left' }}> {key} </td>
831+
<td style={{ textAlign: 'left' }}> {tooltip[key]} </td>
832+
</tr>
833+
))}
834+
</table>
835+
);
836+
}
837+
819838
private renderTimeGraphContent() {
820839
return (
821840
<div id="main-timegraph-content" ref={this.horizontalContainer} style={{ height: this.props.style.height }}>

0 commit comments

Comments
 (0)