Skip to content

Commit 6ac796a

Browse files
committed
Disable tooltips on tables due to performance issues
This commit disables tooltips for all table cells. For example, when moving the mouse over the red X in the events table, there will no longer be a tooltip showing. This is done to imporve performance. It appears that the mui tooltip component is not performant when used in large quantities. According to this comment on github it is not supposed to be: mui/material-ui#27057 (comment) I locally tested performance by profiling the rendering of the rows of the series table. The table had 1000 entries which necessitated 4000 tooltip components. Rendering the table with tooltips took about 3,7 seconds. Rendering the table without tooltips took about 1,2 seconds. I think this is way too much time for tooltips. The goal of this commit is to be a quick fix for quick gains. A more proper long term solution would let us keep the tooltips, by for example working around the issue somehow or replacing mui tooltips with a different library.
1 parent 42668f5 commit 6ac796a

23 files changed

Lines changed: 45 additions & 45 deletions

src/components/configuration/partials/ThemesActionsCell.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const ThemesActionsCell = ({
4848
onClick={() => showThemeDetails()}
4949
className={"more"}
5050
editAccessRole={"ROLE_UI_THEMES_EDIT"}
51-
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"}
51+
// tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
5252
/>
5353

5454
{/* themes details modal */}
@@ -64,7 +64,7 @@ const ThemesActionsCell = ({
6464
{/* delete themes */}
6565
<ActionCellDelete
6666
editAccessRole={"ROLE_UI_THEMES_DELETE"}
67-
tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE"}
67+
// tooltipText={"CONFIGURATION.THEMES.TABLE.TOOLTIP.DELETE"} // Disabled due to performance concerns
6868
resourceId={row.id}
6969
resourceName={row.name}
7070
resourceType={"THEME"}

src/components/events/partials/EventActionCell.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ const EventActionCell = ({
9595
onClick={onClickEventDetails}
9696
className={"more"}
9797
editAccessRole={"ROLE_UI_EVENTS_DETAILS_VIEW"}
98-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS"}
98+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
9999
/>
100100

101101
{/* If event belongs to a series then the corresponding series details can be opened */}
@@ -104,14 +104,14 @@ const EventActionCell = ({
104104
onClick={onClickSeriesDetails}
105105
className={"more-series"}
106106
editAccessRole={"ROLE_UI_SERIES_DETAILS_VIEW"}
107-
tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"}
107+
// tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
108108
/>
109109
)}
110110

111111
{/* Delete an event */}
112112
<ActionCellDelete
113113
editAccessRole={"ROLE_UI_EVENTS_DELETE"}
114-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DELETE"}
114+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.DELETE"} // Disabled due to performance concerns
115115
resourceId={row.id}
116116
resourceName={row.title}
117117
resourceType={"EVENT"}
@@ -120,29 +120,29 @@ const EventActionCell = ({
120120

121121
{/* If the event has an preview then the editor can be opened and status if it needs to be cut is shown */}
122122
{!!row.has_preview && hasAccess("ROLE_UI_EVENTS_EDITOR_VIEW", user) && (
123-
<Tooltip
124-
title={
125-
row.needs_cutting
126-
? t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR_NEEDS_CUTTING")
127-
: t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR")
128-
}
129-
>
123+
// <Tooltip // Disabled due to performance concerns
124+
// title={
125+
// row.needs_cutting
126+
// ? t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR_NEEDS_CUTTING")
127+
// : t("EVENTS.EVENTS.TABLE.TOOLTIP.EDITOR")
128+
// }
129+
// >
130130
<a
131131
href={`/editor-ui/index.html?id=${row.id}`}
132132
className="cut"
133133
target="_blank" rel="noreferrer"
134134
>
135135
{row.needs_cutting && <span id="badge" className="badge" />}
136136
</a>
137-
</Tooltip>
137+
// </Tooltip>
138138
)}
139139

140140
{/* If the event has comments and no open comments then the comment tab of event details can be opened directly */}
141141
{row.has_comments && !row.has_open_comments && (
142142
<ButtonLikeAnchor
143143
onClick={() => onClickComments()}
144144
className={"comments"}
145-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
145+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"} // Disabled due to performance concerns
146146
/>
147147
)}
148148

@@ -151,7 +151,7 @@ const EventActionCell = ({
151151
<ButtonLikeAnchor
152152
onClick={() => onClickComments()}
153153
className={"comments-open"}
154-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"}
154+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.COMMENTS"} // Disabled due to performance concerns
155155
/>
156156
)}
157157

@@ -162,7 +162,7 @@ const EventActionCell = ({
162162
onClick={() => onClickWorkflow()}
163163
className={"fa fa-warning"}
164164
editAccessRole={"ROLE_UI_EVENTS_DETAILS_WORKFLOWS_EDIT"}
165-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"}
165+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.PAUSED_WORKFLOW"} // Disabled due to performance concerns
166166
/>
167167
}
168168

@@ -171,15 +171,15 @@ const EventActionCell = ({
171171
onClick={() => onClickAssets()}
172172
className={"fa fa-folder-open"}
173173
editAccessRole={"ROLE_UI_EVENTS_DETAILS_ASSETS_VIEW"}
174-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"}
174+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.ASSETS"} // Disabled due to performance concerns
175175
/>
176176

177177
{/* Open dialog for embedded code*/}
178178
<ButtonLikeAnchor
179179
onClick={() => showEmbeddingCodeModal()}
180180
className={"fa fa-link"}
181181
editAccessRole={"ROLE_UI_EVENTS_EMBEDDING_CODE_VIEW"}
182-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"}
182+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.EMBEDDING_CODE"} // Disabled due to performance concerns
183183
/>
184184

185185
{/* Embedding Code Modal */}

src/components/events/partials/EventsDateCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const EventsDateCell = ({
1919
filterName="startDate"
2020
fetchResource={fetchEvents}
2121
loadResourceIntoTable={loadEventsIntoTable}
22-
tooltipText="EVENTS.EVENTS.TABLE.TOOLTIP.START"
22+
// tooltipText="EVENTS.EVENTS.TABLE.TOOLTIP.START" // Disabled due to performance concerns
2323
/>
2424
);
2525
};

src/components/events/partials/EventsLocationCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const EventsLocationCell = ({
3434
<ButtonLikeAnchor
3535
onClick={() => addFilter(row.location)}
3636
className={"crosslink"}
37-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION"}
37+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.LOCATION"} // Disabled due to performance concerns
3838
>
3939
{row.location}
4040
</ButtonLikeAnchor>

src/components/events/partials/EventsPresentersCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const EventsPresentersCell = ({
1919
filterName="presentersBibliographic"
2020
fetchResource={fetchEvents}
2121
loadResourceIntoTable={loadEventsIntoTable}
22-
tooltipText="EVENTS.EVENTS.TABLE.TOOLTIP.PRESENTER"
22+
// tooltipText="EVENTS.EVENTS.TABLE.TOOLTIP.PRESENTER" // Disabled due to performance concerns
2323
/>
2424
);
2525
};

src/components/events/partials/EventsSeriesCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const EventsSeriesCell = ({
3838
: console.error("Tried to sort by a series, but the series did not exist.")
3939
}
4040
className={"crosslink"}
41-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.SERIES"}
41+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.SERIES"} // Disabled due to performance concerns
4242
>
4343
{row.series.title}
4444
</ButtonLikeAnchor>

src/components/events/partials/EventsStatusCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const EventsStatusCell = ({
4545
<ButtonLikeAnchor
4646
onClick={() => openStatusModal()}
4747
className={"crosslink"}
48-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.STATUS"}
48+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.STATUS"} // Disabled due to performance concerns
4949
>
5050
{t(row.displayable_status as ParseKeys)}
5151
</ButtonLikeAnchor>

src/components/events/partials/EventsTechnicalDateCell.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const EventsTechnicalDateCell = ({
3737
<ButtonLikeAnchor
3838
onClick={() => addFilter(row.date)}
3939
className={"crosslink"}
40-
tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.START"}
40+
// tooltipText={"EVENTS.EVENTS.TABLE.TOOLTIP.START"} // Disabled due to performance concerns
4141
>
4242
{t("dateFormats.date.short", { date: renderValidDate(row.technical_start) })}
4343
</ButtonLikeAnchor>

src/components/events/partials/PublishedCell.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,13 @@ const PublishCell = ({
7878
return (
7979
<div className="popover-wrapper">
8080
{onlyEngage && (
81-
<Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PLAYER")}>
81+
// <Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PLAYER")}> // Disabled due to performance concerns
8282
<a href={publications[0].url} rel="noreferrer" target="_blank">
8383
<ButtonLikeAnchor>
8484
{t("YES")}
8585
</ButtonLikeAnchor>
8686
</a>
87-
</Tooltip>
87+
// </Tooltip>
8888
)}
8989
{!onlyEngage && publications.length > 0 && (
9090
<>

src/components/events/partials/SeriesActionsCell.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const SeriesActionsCell = ({
7070
onClick={() => showSeriesDetailsModal()}
7171
className={"more-series"}
7272
editAccessRole={"ROLE_UI_SERIES_DETAILS_VIEW"}
73-
tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"}
73+
// tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DETAILS"} // Disabled due to performance concerns
7474
/>
7575

7676
<SeriesDetailsModal
@@ -84,7 +84,7 @@ const SeriesActionsCell = ({
8484
onClick={() => showDeleteConfirmation()}
8585
className={"remove"}
8686
editAccessRole={"ROLE_UI_SERIES_DELETE"}
87-
tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DELETE"}
87+
// tooltipText={"EVENTS.SERIES.TABLE.TOOLTIP.DELETE"} // Disabled due to performance concerns
8888
/>
8989

9090
<ConfirmModal

0 commit comments

Comments
 (0)