Skip to content

Commit 62b5250

Browse files
ArneiArnei
committed
Switch to react-tooltips
Replaces our mui tooltip wrapper with react-tooltip. Also adds back tooltips that were commented out. The reason for this change is that tooltips from react-tooltip are much more performant when used in larger quantities. It will still add about ~100ms to the render time of events or series tables with a 100 elements, which is not great but hardly noticable with our load times of over a second.
1 parent 47bf603 commit 62b5250

31 files changed

Lines changed: 161 additions & 223 deletions

‎package-lock.json‎

Lines changed: 35 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,13 @@
3030
"react-datepicker": "^8.8.0",
3131
"react-dom": "^19.2.4",
3232
"react-hotkeys-hook": "^5.2.4",
33-
"react-i18next": "^16.5.4",
33+
"react-i18next": "^16.5.0",
3434
"react-icons": "^5.5.0",
3535
"react-redux": "^9.2.0",
3636
"react-router": "^7.13.0",
3737
"react-select": "^5.10.2",
3838
"react-textarea-autosize": "^8.5.9",
39+
"react-tooltip": "^5.30.0",
3940
"react-window": "^2.2.7",
4041
"redux": "^5.0.1",
4142
"redux-persist": "^6.0.0",

‎src/App.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { useAppDispatch } from "./store";
1717
import { fetchOcVersion, fetchUserInfo } from "./slices/userInfoSlice";
1818
import { subscribeToAuthEvents } from "./utils/broadcastSync";
1919
import { useTableFilterStateValidation } from "./hooks/useTableFilterStateValidation";
20+
import { Tooltip } from "react-tooltip";
2021

2122
function App() {
2223
const dispatch = useAppDispatch();
@@ -74,6 +75,13 @@ function App() {
7475
element={<Navigate to={"/events/events"} replace />}
7576
/>
7677
</Routes>
78+
<Tooltip
79+
id="my-tooltip"
80+
clickable
81+
className="my-tooltip"
82+
delayShow={100}
83+
delayHide={150}
84+
/>
7785
</HashRouter>
7886
);
7987
}

‎src/components/Footer.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
import { useAppSelector } from "../store";
77
import { Link } from "react-router";
88
import { useTranslation } from "react-i18next";
9-
import { Tooltip } from "./shared/Tooltip";
109

1110
/**
1211
* Component that renders the footer
@@ -35,14 +34,14 @@ const Footer: React.FC = () => {
3534
{user.ocVersion && (
3635
<li>
3736
{"Opencast "}
38-
<Tooltip title={t("BUILD.VERSION")}><span>{version}</span></Tooltip>
37+
<span data-tooltip-id="my-tooltip" data-tooltip-content={t("BUILD.VERSION")}>{version}</span>
3938
{user.isAdmin && (
4039
<span>
4140
{user.ocVersion.buildNumber && (
42-
<>{" – "} <Tooltip title={t("BUILD.COMMIT")}><span>{user.ocVersion.buildNumber}</span></Tooltip></>
41+
<>{" – "} <span data-tooltip-id="my-tooltip" data-tooltip-content={t("BUILD.COMMIT")}>{user.ocVersion.buildNumber}</span></>
4342
)}
4443
{lastModified && (
45-
<>{" – "} <Tooltip title={t("BUILD.DATE_DESC")}><span>{t("BUILD.BUILT_ON")} {lastModified}</span></Tooltip></>
44+
<>{" – "} <span data-tooltip-id="my-tooltip" data-tooltip-content={t("BUILD.DATE_DESC")}>{t("BUILD.BUILT_ON")} {lastModified}</span></>
4645
)}
4746
</span>
4847
)}

‎src/components/Header.tsx‎

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { useHotkeys } from "react-hotkeys-hook";
2020
import { useAppDispatch, useAppSelector } from "../store";
2121
import { HealthStatus, fetchHealthStatus } from "../slices/healthSlice";
2222
import { UserInfoState } from "../slices/userInfoSlice";
23-
import { Tooltip } from "./shared/Tooltip";
2423
import { HiOutlineTranslate } from "react-icons/hi";
2524
import ButtonLikeAnchor from "./shared/ButtonLikeAnchor";
2625
import { ModalHandle } from "./shared/modals/Modal";
@@ -160,11 +159,9 @@ const Header = () => {
160159
<nav className="header-nav nav-dd-container" id="nav-dd-container">
161160
{/* Select language */}
162161
<div className="nav-dd lang-dd" id="lang-dd" ref={containerLang}>
163-
<Tooltip active={!displayMenuLang} title={t("LANGUAGE")}>
164-
<BaseButton className="lang nav-dd-element" onClick={() => setMenuLang(!displayMenuLang)}>
165-
<HiOutlineTranslate className="header-icon"/>
166-
</BaseButton>
167-
</Tooltip>
162+
<BaseButton className="lang nav-dd-element" onClick={() => setMenuLang(!displayMenuLang)} tooltipText={"LANGUAGE"} data-tooltip-hidden={displayMenuLang}>
163+
<HiOutlineTranslate className="header-icon"/>
164+
</BaseButton>
168165
{displayMenuLang && <MenuLang handleChangeLanguage={handleChangeLanguage}/>}
169166
</div>
170167

@@ -175,28 +172,26 @@ const Header = () => {
175172
{!!orgProperties &&
176173
!!orgProperties["org.opencastproject.admin.mediamodule.url"] && (
177174
<div className="nav-dd">
178-
<Tooltip title={t("MEDIAMODULE")}>
179-
<a
180-
href={
181-
orgProperties["org.opencastproject.admin.mediamodule.url"]
182-
}
183-
target="_blank" rel="noreferrer"
184-
className="nav-dd-element"
185-
>
186-
<LuCirclePlay className="header-icon"/>
187-
</a>
188-
</Tooltip>
175+
<a
176+
href={
177+
orgProperties["org.opencastproject.admin.mediamodule.url"]
178+
}
179+
target="_blank" rel="noreferrer"
180+
className="nav-dd-element"
181+
data-tooltip-id="my-tooltip"
182+
data-tooltip-content={t("MEDIAMODULE")}
183+
>
184+
<LuCirclePlay className="header-icon"/>
185+
</a>
189186
</div>
190187
)}
191188

192189
{/* Opencast Studio */}
193190
{hasAccess("ROLE_STUDIO", user) && (
194191
<div className="nav-dd">
195-
<Tooltip title={t("STUDIO")}>
196-
<a href={studioURL} target="_blank" rel="noreferrer" className="nav-dd-element">
197-
<LuVideo className="header-icon"/>
198-
</a>
199-
</Tooltip>
192+
<a href={studioURL} target="_blank" rel="noreferrer" className="nav-dd-element" data-tooltip-id="my-tooltip" data-tooltip-content={t("STUDIO")}>
193+
<LuVideo className="header-icon"/>
194+
</a>
200195
</div>
201196
)}
202197

@@ -207,16 +202,14 @@ const Header = () => {
207202
id="info-dd"
208203
ref={containerNotify}
209204
>
210-
<Tooltip active={!displayMenuNotify} title={t("SYSTEM_NOTIFICATIONS")}>
211-
<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)} className="nav-dd-element">
212-
<LuBell className="header-icon"/>
213-
{errorCounter !== 0 && (
214-
<span id="error-count" className="badge">
215-
{errorCounter}
216-
</span>
217-
)}
218-
</BaseButton>
219-
</Tooltip>
205+
<BaseButton onClick={() => setMenuNotify(!displayMenuNotify)} className="nav-dd-element" tooltipText={"SYSTEM_NOTIFICATIONS"} data-tooltip-hidden={displayMenuNotify}>
206+
<LuBell className="header-icon"/>
207+
{errorCounter !== 0 && (
208+
<span id="error-count" className="badge">
209+
{errorCounter}
210+
</span>
211+
)}
212+
</BaseButton>
220213
{/* Click on the bell icon, a dropdown menu with all services in serviceList and their status opens */}
221214
{displayMenuNotify && (
222215
<MenuNotify
@@ -242,14 +235,14 @@ const Header = () => {
242235
id="help-dd"
243236
ref={containerHelp}
244237
>
245-
<Tooltip active={!displayMenuHelp} title={t("HELP.HELP")}>
246-
<BaseButton
247-
onClick={() => setMenuHelp(!displayMenuHelp)}
248-
className="nav-dd-element"
249-
>
250-
<LuMessageCircleQuestion className="header-icon"/>
251-
</BaseButton>
252-
</Tooltip>
238+
<BaseButton
239+
onClick={() => setMenuHelp(!displayMenuHelp)}
240+
className="nav-dd-element"
241+
tooltipText={"HELP.HELP"}
242+
data-tooltip-hidden={displayMenuHelp}
243+
>
244+
<LuMessageCircleQuestion className="header-icon"/>
245+
</BaseButton>
253246
{/* Click on the help icon, a dropdown menu with documentation, REST-docs and shortcuts (if available) opens */}
254247
{displayMenuHelp && (
255248
<MenuHelp

‎src/components/configuration/partials/ThemesActionsCell.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const ThemesActionsCell = ({
4949
onClick={() => showThemeDetails()}
5050
className={"action-cell-button"}
5151
editAccessRole={"ROLE_UI_THEMES_EDIT"}
52-
// tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
52+
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"}
5353
>
5454
<LuFileText />
5555
</ButtonLikeAnchor>
@@ -67,7 +67,7 @@ const ThemesActionsCell = ({
6767
{/* delete themes */}
6868
<ActionCellDelete
6969
editAccessRole={"ROLE_UI_THEMES_DELETE"}
70-
// tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE"} // Disabled due to performance concerns
70+
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE"}
7171
resourceId={row.id}
7272
resourceName={row.name}
7373
resourceType={"THEME"}

0 commit comments

Comments
 (0)