Skip to content

Commit

Permalink
Make things more efficient using Profiler
Browse files Browse the repository at this point in the history
  • Loading branch information
@Heenawter
Heenawter committed Nov 21, 2024
1 parent 190ea0c commit c3664e6
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 147 deletions.
73 changes: 40 additions & 33 deletions packages/kbn-grid-layout/grid/grid_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

import { cloneDeep } from 'lodash';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { combineLatest, distinctUntilChanged, filter, map, pairwise, skip } from 'rxjs';

import { GridHeightSmoother } from './grid_height_smoother';
Expand Down Expand Up @@ -102,38 +102,45 @@ export const GridLayout = ({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

return (
<>
<GridHeightSmoother gridLayoutStateManager={gridLayoutStateManager}>
<div
ref={(divElement) => {
setDimensionsRef(divElement);
/**
* Memoize row children components to prevent unnecessary re-renders
*/
const children = useMemo(() => {
return Array.from({ length: rowCount }, (_, rowIndex) => {
return (
<GridRow
key={rowIndex}
rowIndex={rowIndex}
renderPanelContents={renderPanelContents}
gridLayoutStateManager={gridLayoutStateManager}
toggleIsCollapsed={() => {
const newLayout = cloneDeep(gridLayoutStateManager.gridLayout$.value);
newLayout[rowIndex].isCollapsed = !newLayout[rowIndex].isCollapsed;
gridLayoutStateManager.gridLayout$.next(newLayout);
}}
>
{Array.from({ length: rowCount }, (_, rowIndex) => {
return (
<GridRow
key={rowIndex}
rowIndex={rowIndex}
renderPanelContents={renderPanelContents}
gridLayoutStateManager={gridLayoutStateManager}
toggleIsCollapsed={() => {
const newLayout = cloneDeep(gridLayoutStateManager.gridLayout$.value);
newLayout[rowIndex].isCollapsed = !newLayout[rowIndex].isCollapsed;
gridLayoutStateManager.gridLayout$.next(newLayout);
}}
setInteractionEvent={(nextInteractionEvent) => {
if (!nextInteractionEvent) {
gridLayoutStateManager.activePanel$.next(undefined);
}
gridLayoutStateManager.interactionEvent$.next(nextInteractionEvent);
}}
ref={(element) => (gridLayoutStateManager.rowRefs.current[rowIndex] = element)}
/>
);
})}
</div>
</GridHeightSmoother>
</>
setInteractionEvent={(nextInteractionEvent) => {
if (!nextInteractionEvent) {
gridLayoutStateManager.activePanel$.next(undefined);
}
gridLayoutStateManager.interactionEvent$.next(nextInteractionEvent);
}}
ref={(element: HTMLDivElement | null) =>
(gridLayoutStateManager.rowRefs.current[rowIndex] = element)
}
/>
);
});
}, [rowCount, gridLayoutStateManager, renderPanelContents]);

return (
<GridHeightSmoother gridLayoutStateManager={gridLayoutStateManager}>
<div
ref={(divElement) => {
setDimensionsRef(divElement);
}}
>
{children}
</div>
</GridHeightSmoother>
);
};
153 changes: 79 additions & 74 deletions packages/kbn-grid-layout/grid/grid_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import React, { forwardRef, useEffect, useMemo } from 'react';
import React, { forwardRef, useEffect, useMemo, Profiler } from 'react';
import { combineLatest, skip } from 'rxjs';

import {
Expand Down Expand Up @@ -129,88 +129,93 @@ export const GridPanel = forwardRef<
[]
);

/**
* Memoize panel contents to prevent unnecessary re-renders
*/
const panelContents = useMemo(() => {
return renderPanelContents(panelId);
}, [panelId, renderPanelContents]);

return (
<div ref={panelRef} css={initialStyles}>
<EuiPanel
hasShadow={false}
hasBorder={true}
css={css`
padding: 0;
position: relative;
height: 100%;
`}
>
{/* drag handle */}
<div
className="dragHandle"
<>
<div ref={panelRef} css={initialStyles}>
<EuiPanel
hasShadow={false}
hasBorder={true}
css={css`
opacity: 0;
display: flex;
cursor: move;
position: absolute;
align-items: center;
justify-content: center;
top: -${euiThemeVars.euiSizeL};
width: ${euiThemeVars.euiSizeL};
height: ${euiThemeVars.euiSizeL};
z-index: ${euiThemeVars.euiZLevel3};
margin-left: ${euiThemeVars.euiSizeS};
border: 1px solid ${euiTheme.border.color};
background-color: ${euiTheme.colors.emptyShade};
border-radius: ${euiThemeVars.euiBorderRadius} ${euiThemeVars.euiBorderRadius} 0 0;
&:hover {
cursor: grab;
opacity: 1 !important;
}
&:active {
cursor: grabbing;
opacity: 1 !important;
}
padding: 0;
position: relative;
height: 100%;
`}
onMouseDown={(e) => interactionStart('drag', e)}
onMouseUp={(e) => interactionStart('drop', e)}
>
<EuiIcon type="grabOmnidirectional" />
</div>
{/* Resize handle */}
<div
className="resizeHandle"
onMouseDown={(e) => interactionStart('resize', e)}
onMouseUp={(e) => interactionStart('drop', e)}
css={css`
right: 0;
bottom: 0;
opacity: 0;
margin: -2px;
position: absolute;
width: ${euiThemeVars.euiSizeL};
height: ${euiThemeVars.euiSizeL};
transition: opacity 0.2s, border 0.2s;
border-radius: 7px 0 7px 0;
border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
border-right: 2px solid ${euiThemeVars.euiColorSuccess};
:hover {
opacity: 1;
background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
cursor: se-resize;
}
`}
/>
<div
css={css`
${euiFullHeight()}
${useEuiOverflowScroll('y', false)}
{/* drag handle */}
<div
className="dragHandle"
css={css`
opacity: 0;
display: flex;
cursor: move;
position: absolute;
align-items: center;
justify-content: center;
top: -${euiThemeVars.euiSizeL};
width: ${euiThemeVars.euiSizeL};
height: ${euiThemeVars.euiSizeL};
z-index: ${euiThemeVars.euiZLevel3};
margin-left: ${euiThemeVars.euiSizeS};
border: 1px solid ${euiTheme.border.color};
background-color: ${euiTheme.colors.emptyShade};
border-radius: ${euiThemeVars.euiBorderRadius} ${euiThemeVars.euiBorderRadius} 0 0;
&:hover {
cursor: grab;
opacity: 1 !important;
}
&:active {
cursor: grabbing;
opacity: 1 !important;
}
`}
onMouseDown={(e) => interactionStart('drag', e)}
onMouseUp={(e) => interactionStart('drop', e)}
>
<EuiIcon type="grabOmnidirectional" />
</div>
{/* Resize handle */}
<div
className="resizeHandle"
onMouseDown={(e) => interactionStart('resize', e)}
onMouseUp={(e) => interactionStart('drop', e)}
css={css`
right: 0;
bottom: 0;
opacity: 0;
margin: -2px;
position: absolute;
width: ${euiThemeVars.euiSizeL};
height: ${euiThemeVars.euiSizeL};
transition: opacity 0.2s, border 0.2s;
border-radius: 7px 0 7px 0;
border-bottom: 2px solid ${euiThemeVars.euiColorSuccess};
border-right: 2px solid ${euiThemeVars.euiColorSuccess};
:hover {
opacity: 1;
background-color: ${transparentize(euiThemeVars.euiColorSuccess, 0.05)};
cursor: se-resize;
}
`}
/>
<div
css={css`
${euiFullHeight()}
${useEuiOverflowScroll('y', false)}
${useEuiOverflowScroll('x', false)}
`}
>
{panelContents}
</div>
</EuiPanel>
</div>
`}
>
{panelContents}
</div>
</EuiPanel>
</div>
</>
);
}
);
86 changes: 46 additions & 40 deletions packages/kbn-grid-layout/grid/grid_row.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,51 @@ export const GridRow = forwardRef<
[rowIndex]
);

/**
* Memoize panel children components to prevent unnecessary re-renders
*/
const children = useMemo(() => {
return panelIds.map((panelId) => (
<GridPanel
key={panelId}
panelId={panelId}
rowIndex={rowIndex}
gridLayoutStateManager={gridLayoutStateManager}
renderPanelContents={renderPanelContents}
interactionStart={(type, e) => {
e.preventDefault();
e.stopPropagation();
const panelRef = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
if (!panelRef) return;

const panelRect = panelRef.getBoundingClientRect();
if (type === 'drop') {
setInteractionEvent(undefined);
} else {
setInteractionEvent({
type,
id: panelId,
panelDiv: panelRef,
targetRowIndex: rowIndex,
mouseOffsets: {
top: e.clientY - panelRect.top,
left: e.clientX - panelRect.left,
right: e.clientX - panelRect.right,
bottom: e.clientY - panelRect.bottom,
},
});
}
}}
ref={(element) => {
if (!gridLayoutStateManager.panelRefs.current[rowIndex]) {
gridLayoutStateManager.panelRefs.current[rowIndex] = {};
}
gridLayoutStateManager.panelRefs.current[rowIndex][panelId] = element;
}}
/>
));
}, [panelIds, rowIndex, gridLayoutStateManager, renderPanelContents, setInteractionEvent]);

return (
<>
{rowIndex !== 0 && (
Expand Down Expand Up @@ -186,46 +231,7 @@ export const GridRow = forwardRef<
${initialStyles};
`}
>
{panelIds.map((panelId) => (
<GridPanel
key={panelId}
panelId={panelId}
rowIndex={rowIndex}
gridLayoutStateManager={gridLayoutStateManager}
renderPanelContents={renderPanelContents}
interactionStart={(type, e) => {
e.preventDefault();
e.stopPropagation();
const panelRef = gridLayoutStateManager.panelRefs.current[rowIndex][panelId];
if (!panelRef) return;

const panelRect = panelRef.getBoundingClientRect();
if (type === 'drop') {
setInteractionEvent(undefined);
} else {
setInteractionEvent({
type,
id: panelId,
panelDiv: panelRef,
targetRowIndex: rowIndex,
mouseOffsets: {
top: e.clientY - panelRect.top,
left: e.clientX - panelRect.left,
right: e.clientX - panelRect.right,
bottom: e.clientY - panelRect.bottom,
},
});
}
}}
ref={(element) => {
if (!gridLayoutStateManager.panelRefs.current[rowIndex]) {
gridLayoutStateManager.panelRefs.current[rowIndex] = {};
}
gridLayoutStateManager.panelRefs.current[rowIndex][panelId] = element;
}}
/>
))}

{children}
<DragPreview rowIndex={rowIndex} gridLayoutStateManager={gridLayoutStateManager} />
</div>
)}
Expand Down

0 comments on commit c3664e6

Please sign in to comment.