mirror of https://github.com/grafana/grafana
TableNG: Refactor to better take advantage of react-data-grid (#103755)
Leon Sorokin
3 weeks ago
committed by
GitHub
parent
7940da4803
commit
99782ae406
@ -0,0 +1,82 @@ |
|||||||
|
import { WKT } from 'ol/format'; |
||||||
|
import { Geometry } from 'ol/geom'; |
||||||
|
|
||||||
|
import { FieldType } from '@grafana/data'; |
||||||
|
import { t } from '@grafana/i18n'; |
||||||
|
|
||||||
|
import { IconButton } from '../../../IconButton/IconButton'; |
||||||
|
import { TableCellInspectorMode } from '../../TableCellInspector'; |
||||||
|
import { TableCellDisplayMode } from '../../types'; |
||||||
|
import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellActionsProps } from '../types'; |
||||||
|
|
||||||
|
export function TableCellActions(props: TableCellActionsProps) { |
||||||
|
const { |
||||||
|
field, |
||||||
|
value, |
||||||
|
cellOptions, |
||||||
|
displayName, |
||||||
|
setIsInspecting, |
||||||
|
setContextMenuProps, |
||||||
|
onCellFilterAdded, |
||||||
|
className, |
||||||
|
cellInspect, |
||||||
|
showFilters, |
||||||
|
} = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={className}> |
||||||
|
{cellInspect && ( |
||||||
|
<IconButton |
||||||
|
name="eye" |
||||||
|
aria-label={t('grafana-ui.table.cell-inspect-tooltip', 'Inspect value')} |
||||||
|
onClick={() => { |
||||||
|
let inspectValue = value; |
||||||
|
let mode = TableCellInspectorMode.text; |
||||||
|
|
||||||
|
if (field.type === FieldType.geo && value instanceof Geometry) { |
||||||
|
inspectValue = new WKT().writeGeometry(value, { |
||||||
|
featureProjection: 'EPSG:3857', |
||||||
|
dataProjection: 'EPSG:4326', |
||||||
|
}); |
||||||
|
mode = TableCellInspectorMode.code; |
||||||
|
} else if ('cellType' in cellOptions && cellOptions.cellType === TableCellDisplayMode.JSONView) { |
||||||
|
mode = TableCellInspectorMode.code; |
||||||
|
} |
||||||
|
|
||||||
|
setContextMenuProps({ |
||||||
|
value: String(inspectValue ?? ''), |
||||||
|
mode, |
||||||
|
}); |
||||||
|
setIsInspecting(true); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{showFilters && ( |
||||||
|
<> |
||||||
|
<IconButton |
||||||
|
name={'search-plus'} |
||||||
|
aria-label={t('grafana-ui.table.cell-filter-on', 'Filter for value')} |
||||||
|
onClick={() => { |
||||||
|
onCellFilterAdded?.({ |
||||||
|
key: displayName, |
||||||
|
operator: FILTER_FOR_OPERATOR, |
||||||
|
value: String(value ?? ''), |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<IconButton |
||||||
|
name={'search-minus'} |
||||||
|
aria-label={t('grafana-ui.table.cell-filter-out', 'Filter out value')} |
||||||
|
onClick={() => { |
||||||
|
onCellFilterAdded?.({ |
||||||
|
key: displayName, |
||||||
|
operator: FILTER_OUT_OPERATOR, |
||||||
|
value: String(value ?? ''), |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -1,284 +0,0 @@ |
|||||||
import { css } from '@emotion/css'; |
|
||||||
import { WKT } from 'ol/format'; |
|
||||||
import { Geometry } from 'ol/geom'; |
|
||||||
import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; |
|
||||||
|
|
||||||
import { FieldType, GrafanaTheme2, isDataFrame, isTimeSeriesFrame } from '@grafana/data'; |
|
||||||
import { t } from '@grafana/i18n'; |
|
||||||
import { TableAutoCellOptions, TableCellDisplayMode } from '@grafana/schema'; |
|
||||||
|
|
||||||
import { useStyles2 } from '../../../../themes/ThemeContext'; |
|
||||||
import { IconButton } from '../../../IconButton/IconButton'; |
|
||||||
// import { GeoCell } from '../../Cells/GeoCell';
|
|
||||||
import { TableCellInspectorMode } from '../../TableCellInspector'; |
|
||||||
import { |
|
||||||
CellColors, |
|
||||||
CustomCellRendererProps, |
|
||||||
FILTER_FOR_OPERATOR, |
|
||||||
FILTER_OUT_OPERATOR, |
|
||||||
TableCellNGProps, |
|
||||||
} from '../types'; |
|
||||||
import { getCellColors, getDisplayName, getTextAlign } from '../utils'; |
|
||||||
|
|
||||||
import { ActionsCell } from './ActionsCell'; |
|
||||||
import AutoCell from './AutoCell'; |
|
||||||
import { BarGaugeCell } from './BarGaugeCell'; |
|
||||||
import { DataLinksCell } from './DataLinksCell'; |
|
||||||
import { GeoCell } from './GeoCell'; |
|
||||||
import { ImageCell } from './ImageCell'; |
|
||||||
import { JSONCell } from './JSONCell'; |
|
||||||
import { SparklineCell } from './SparklineCell'; |
|
||||||
|
|
||||||
export function TableCellNG(props: TableCellNGProps) { |
|
||||||
const { |
|
||||||
field, |
|
||||||
frame, |
|
||||||
value, |
|
||||||
theme, |
|
||||||
timeRange, |
|
||||||
height, |
|
||||||
rowIdx, |
|
||||||
justifyContent, |
|
||||||
shouldTextOverflow, |
|
||||||
setIsInspecting, |
|
||||||
setContextMenuProps, |
|
||||||
getActions, |
|
||||||
rowBg, |
|
||||||
onCellFilterAdded, |
|
||||||
replaceVariables, |
|
||||||
} = props; |
|
||||||
|
|
||||||
const cellInspect = field.config?.custom?.inspect ?? false; |
|
||||||
const displayName = getDisplayName(field); |
|
||||||
|
|
||||||
const { config: fieldConfig } = field; |
|
||||||
const defaultCellOptions: TableAutoCellOptions = { type: TableCellDisplayMode.Auto }; |
|
||||||
const cellOptions = fieldConfig.custom?.cellOptions ?? defaultCellOptions; |
|
||||||
const { type: cellType } = cellOptions; |
|
||||||
|
|
||||||
const showFilters = field.config.filterable && onCellFilterAdded; |
|
||||||
|
|
||||||
const isRightAligned = getTextAlign(field) === 'flex-end'; |
|
||||||
const displayValue = field.display!(value); |
|
||||||
let colors: CellColors = { bgColor: '', textColor: '', bgHoverColor: '' }; |
|
||||||
if (rowBg) { |
|
||||||
colors = rowBg(rowIdx); |
|
||||||
} else { |
|
||||||
colors = useMemo(() => getCellColors(theme, cellOptions, displayValue), [theme, cellOptions, displayValue]); |
|
||||||
} |
|
||||||
const styles = useStyles2(getStyles, isRightAligned, colors); |
|
||||||
|
|
||||||
// TODO
|
|
||||||
// TableNG provides either an overridden cell width or 'auto' as the cell width value.
|
|
||||||
// While the overridden value gives the exact cell width, 'auto' does not.
|
|
||||||
// Therefore, we need to determine the actual cell width from the DOM.
|
|
||||||
const divWidthRef = useRef<HTMLDivElement>(null); |
|
||||||
const [divWidth, setDivWidth] = useState(0); |
|
||||||
const [isHovered, setIsHovered] = useState(false); |
|
||||||
|
|
||||||
const actions = useMemo( |
|
||||||
() => (getActions ? getActions(frame, field, rowIdx, replaceVariables) : []), |
|
||||||
[getActions, frame, field, rowIdx, replaceVariables] |
|
||||||
); |
|
||||||
|
|
||||||
useLayoutEffect(() => { |
|
||||||
if (divWidthRef.current && divWidthRef.current.clientWidth !== 0) { |
|
||||||
setDivWidth(divWidthRef.current.clientWidth); |
|
||||||
} |
|
||||||
}, [divWidthRef.current]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
||||||
|
|
||||||
// Common props for all cells
|
|
||||||
const commonProps = useMemo( |
|
||||||
() => ({ |
|
||||||
value, |
|
||||||
field, |
|
||||||
rowIdx, |
|
||||||
justifyContent, |
|
||||||
}), |
|
||||||
[value, field, rowIdx, justifyContent] |
|
||||||
); |
|
||||||
|
|
||||||
// Get the correct cell type
|
|
||||||
const renderedCell = useMemo(() => { |
|
||||||
let cell: ReactNode = null; |
|
||||||
switch (cellType) { |
|
||||||
case TableCellDisplayMode.Sparkline: |
|
||||||
cell = <SparklineCell {...commonProps} theme={theme} timeRange={timeRange} width={divWidth} />; |
|
||||||
break; |
|
||||||
case TableCellDisplayMode.Gauge: |
|
||||||
case TableCellDisplayMode.BasicGauge: |
|
||||||
case TableCellDisplayMode.GradientGauge: |
|
||||||
case TableCellDisplayMode.LcdGauge: |
|
||||||
cell = ( |
|
||||||
<BarGaugeCell |
|
||||||
{...commonProps} |
|
||||||
theme={theme} |
|
||||||
timeRange={timeRange} |
|
||||||
height={height} |
|
||||||
width={divWidth} |
|
||||||
actions={actions} |
|
||||||
/> |
|
||||||
); |
|
||||||
break; |
|
||||||
case TableCellDisplayMode.Image: |
|
||||||
cell = <ImageCell {...commonProps} cellOptions={cellOptions} height={height} actions={actions} />; |
|
||||||
break; |
|
||||||
case TableCellDisplayMode.JSONView: |
|
||||||
cell = <JSONCell {...commonProps} actions={actions} />; |
|
||||||
break; |
|
||||||
case TableCellDisplayMode.DataLinks: |
|
||||||
cell = <DataLinksCell field={field} rowIdx={rowIdx} />; |
|
||||||
break; |
|
||||||
case TableCellDisplayMode.Actions: |
|
||||||
cell = <ActionsCell actions={actions} />; |
|
||||||
break; |
|
||||||
case TableCellDisplayMode.Custom: |
|
||||||
const CustomCellComponent: React.ComponentType<CustomCellRendererProps> = cellOptions.cellComponent; |
|
||||||
cell = <CustomCellComponent field={field} value={value} rowIndex={rowIdx} frame={frame} />; |
|
||||||
break; |
|
||||||
case TableCellDisplayMode.Auto: |
|
||||||
default: |
|
||||||
// Handle auto cell type detection
|
|
||||||
if (field.type === FieldType.geo) { |
|
||||||
cell = <GeoCell {...commonProps} height={height} />; |
|
||||||
} else if (field.type === FieldType.frame) { |
|
||||||
const firstValue = field.values[0]; |
|
||||||
if (isDataFrame(firstValue) && isTimeSeriesFrame(firstValue)) { |
|
||||||
cell = <SparklineCell {...commonProps} theme={theme} timeRange={timeRange} width={divWidth} />; |
|
||||||
} else { |
|
||||||
cell = <JSONCell {...commonProps} actions={actions} />; |
|
||||||
} |
|
||||||
} else if (field.type === FieldType.other) { |
|
||||||
cell = <JSONCell {...commonProps} actions={actions} />; |
|
||||||
} else { |
|
||||||
cell = <AutoCell {...commonProps} cellOptions={cellOptions} actions={actions} />; |
|
||||||
} |
|
||||||
break; |
|
||||||
} |
|
||||||
return cell; |
|
||||||
}, [cellType, commonProps, theme, timeRange, divWidth, height, cellOptions, field, rowIdx, actions, value, frame]); |
|
||||||
|
|
||||||
const handleMouseEnter = () => { |
|
||||||
setIsHovered(true); |
|
||||||
if (shouldTextOverflow()) { |
|
||||||
// TODO: The table cell styles in TableNG do not update dynamically even if we change the state
|
|
||||||
const div = divWidthRef.current; |
|
||||||
const tableCellDiv = div?.parentElement; |
|
||||||
tableCellDiv?.style.setProperty('z-index', String(theme.zIndex.tooltip)); |
|
||||||
tableCellDiv?.style.setProperty('white-space', 'pre-line'); |
|
||||||
tableCellDiv?.style.setProperty('min-height', `100%`); |
|
||||||
tableCellDiv?.style.setProperty('height', `fit-content`); |
|
||||||
tableCellDiv?.style.setProperty('background', colors.bgHoverColor || 'none'); |
|
||||||
tableCellDiv?.style.setProperty('min-width', 'min-content'); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const handleMouseLeave = () => { |
|
||||||
setIsHovered(false); |
|
||||||
if (shouldTextOverflow()) { |
|
||||||
// TODO: The table cell styles in TableNG do not update dynamically even if we change the state
|
|
||||||
const div = divWidthRef.current; |
|
||||||
const tableCellDiv = div?.parentElement; |
|
||||||
tableCellDiv?.style.removeProperty('z-index'); |
|
||||||
tableCellDiv?.style.removeProperty('white-space'); |
|
||||||
tableCellDiv?.style.removeProperty('min-height'); |
|
||||||
tableCellDiv?.style.removeProperty('height'); |
|
||||||
tableCellDiv?.style.removeProperty('background'); |
|
||||||
tableCellDiv?.style.removeProperty('min-width'); |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
const onFilterFor = useCallback(() => { |
|
||||||
if (onCellFilterAdded) { |
|
||||||
onCellFilterAdded({ |
|
||||||
key: displayName, |
|
||||||
operator: FILTER_FOR_OPERATOR, |
|
||||||
value: String(value ?? ''), |
|
||||||
}); |
|
||||||
} |
|
||||||
}, [displayName, onCellFilterAdded, value]); |
|
||||||
|
|
||||||
const onFilterOut = useCallback(() => { |
|
||||||
if (onCellFilterAdded) { |
|
||||||
onCellFilterAdded({ |
|
||||||
key: displayName, |
|
||||||
operator: FILTER_OUT_OPERATOR, |
|
||||||
value: String(value ?? ''), |
|
||||||
}); |
|
||||||
} |
|
||||||
}, [displayName, onCellFilterAdded, value]); |
|
||||||
|
|
||||||
return ( |
|
||||||
<div ref={divWidthRef} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={styles.cell}> |
|
||||||
{renderedCell} |
|
||||||
{isHovered && (cellInspect || showFilters) && ( |
|
||||||
<div className={styles.cellActions}> |
|
||||||
{cellInspect && ( |
|
||||||
<IconButton |
|
||||||
name="eye" |
|
||||||
tooltip={t('grafana-ui.table.cell-inspect-tooltip', 'Inspect value')} |
|
||||||
onClick={() => { |
|
||||||
let inspectValue = value; |
|
||||||
let mode = TableCellInspectorMode.text; |
|
||||||
|
|
||||||
if (field.type === FieldType.geo && value instanceof Geometry) { |
|
||||||
inspectValue = new WKT().writeGeometry(value, { |
|
||||||
featureProjection: 'EPSG:3857', |
|
||||||
dataProjection: 'EPSG:4326', |
|
||||||
}); |
|
||||||
mode = TableCellInspectorMode.code; |
|
||||||
} else if (cellType === TableCellDisplayMode.JSONView) { |
|
||||||
mode = TableCellInspectorMode.code; |
|
||||||
} |
|
||||||
|
|
||||||
setContextMenuProps({ |
|
||||||
value: String(inspectValue ?? ''), |
|
||||||
mode, |
|
||||||
}); |
|
||||||
setIsInspecting(true); |
|
||||||
}} |
|
||||||
/> |
|
||||||
)} |
|
||||||
{showFilters && ( |
|
||||||
<> |
|
||||||
<IconButton |
|
||||||
name={'search-plus'} |
|
||||||
onClick={onFilterFor} |
|
||||||
tooltip={t('grafana-ui.table.cell-filter-on', 'Filter for value')} |
|
||||||
/> |
|
||||||
<IconButton |
|
||||||
name={'search-minus'} |
|
||||||
onClick={onFilterOut} |
|
||||||
tooltip={t('grafana-ui.table.cell-filter-out', 'Filter out value')} |
|
||||||
/> |
|
||||||
</> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
const getStyles = (theme: GrafanaTheme2, isRightAligned: boolean, color: CellColors) => ({ |
|
||||||
cell: css({ |
|
||||||
height: '100%', |
|
||||||
alignContent: 'center', |
|
||||||
paddingInline: '8px', |
|
||||||
// TODO: follow-up on this: change styles on hover on table row level
|
|
||||||
background: color.bgColor || 'none', |
|
||||||
color: color.textColor, |
|
||||||
'&:hover': { background: color.bgHoverColor }, |
|
||||||
}), |
|
||||||
cellActions: css({ |
|
||||||
display: 'flex', |
|
||||||
position: 'absolute', |
|
||||||
top: '1px', |
|
||||||
left: isRightAligned ? 0 : undefined, |
|
||||||
right: isRightAligned ? undefined : 0, |
|
||||||
margin: 'auto', |
|
||||||
height: '100%', |
|
||||||
background: theme.colors.background.secondary, |
|
||||||
color: theme.colors.text.primary, |
|
||||||
padding: '4px 0px 4px 4px', |
|
||||||
}), |
|
||||||
}); |
|
||||||
@ -0,0 +1,343 @@ |
|||||||
|
import { render } from '@testing-library/react'; |
||||||
|
|
||||||
|
import { createDataFrame, createTheme, Field, FieldType } from '@grafana/data'; |
||||||
|
|
||||||
|
import { TableCellOptions, TableCellDisplayMode, TableCustomCellOptions } from '../../types'; |
||||||
|
|
||||||
|
import { getCellRenderer } from './renderers'; |
||||||
|
|
||||||
|
// Performance testing utilities
|
||||||
|
const measurePerformance = (fn: () => void, iterations = 100) => { |
||||||
|
const start = performance.now(); |
||||||
|
for (let i = 0; i < iterations; i++) { |
||||||
|
fn(); |
||||||
|
} |
||||||
|
const end = performance.now(); |
||||||
|
return (end - start) / iterations; // Average time per iteration
|
||||||
|
}; |
||||||
|
|
||||||
|
const createLargeTimeSeriesFrame = () => { |
||||||
|
const timeValues = Array.from({ length: 100 }, (_, i) => Date.now() + i * 1000); |
||||||
|
const valueValues = Array.from({ length: 100 }, (_, i) => Math.random() * 100); |
||||||
|
|
||||||
|
return createDataFrame({ |
||||||
|
fields: [ |
||||||
|
{ name: 'time', type: FieldType.time, values: timeValues }, |
||||||
|
{ name: 'value', type: FieldType.number, values: valueValues }, |
||||||
|
], |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const createLargeJSONData = () => { |
||||||
|
return { |
||||||
|
id: 1, |
||||||
|
name: 'Test Object', |
||||||
|
metadata: { |
||||||
|
tags: Array.from({ length: 50 }, (_, i) => `tag-${i}`), |
||||||
|
properties: Array.from({ length: 100 }, (_, i) => ({ key: `prop-${i}`, value: `value-${i}` })), |
||||||
|
nested: { |
||||||
|
level1: { |
||||||
|
level2: { |
||||||
|
level3: { |
||||||
|
data: Array.from({ length: 20 }, (_, i) => ({ id: i, value: Math.random() })), |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
array: Array.from({ length: 200 }, (_, i) => ({ id: i, value: Math.random() * 1000 })), |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
describe('TableNG Cells renderers', () => { |
||||||
|
describe('getCellRenderer', () => { |
||||||
|
// Helper function to create a basic field
|
||||||
|
function createField<V>(type: FieldType, values: V[] = []): Field<V> { |
||||||
|
return { |
||||||
|
name: 'test', |
||||||
|
type, |
||||||
|
values, |
||||||
|
config: {}, |
||||||
|
state: {}, |
||||||
|
display: jest.fn(() => ({ text: 'black', color: 'white', numeric: 0 })), |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// Helper function to render a cell and get the test ID
|
||||||
|
const renderCell = (field: Field, cellOptions: TableCellOptions) => |
||||||
|
render( |
||||||
|
getCellRenderer( |
||||||
|
field, |
||||||
|
cellOptions |
||||||
|
)({ |
||||||
|
field, |
||||||
|
value: 'test-value', |
||||||
|
rowIdx: 0, |
||||||
|
frame: createDataFrame({ fields: [field] }), |
||||||
|
height: 100, |
||||||
|
width: 100, |
||||||
|
theme: createTheme(), |
||||||
|
cellOptions, |
||||||
|
cellInspect: false, |
||||||
|
showFilters: false, |
||||||
|
justifyContent: 'flex-start', |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
// Performance test helper
|
||||||
|
const benchmarkCellPerformance = (field: Field, cellOptions: TableCellOptions, iterations = 100) => { |
||||||
|
// eslint-disable-next-line testing-library/render-result-naming-convention
|
||||||
|
const r = getCellRenderer(field, cellOptions); |
||||||
|
return measurePerformance(() => { |
||||||
|
render( |
||||||
|
r({ |
||||||
|
field, |
||||||
|
value: 'test-value', |
||||||
|
rowIdx: 0, |
||||||
|
frame: createDataFrame({ fields: [field] }), |
||||||
|
height: 100, |
||||||
|
width: 100, |
||||||
|
theme: createTheme(), |
||||||
|
cellOptions, |
||||||
|
cellInspect: false, |
||||||
|
showFilters: false, |
||||||
|
justifyContent: 'flex-start', |
||||||
|
}) |
||||||
|
); |
||||||
|
}, iterations); |
||||||
|
}; |
||||||
|
|
||||||
|
describe('explicit cell type cases', () => { |
||||||
|
it.each([ |
||||||
|
{ type: TableCellDisplayMode.Sparkline, fieldType: FieldType.number }, |
||||||
|
{ type: TableCellDisplayMode.Gauge, fieldType: FieldType.number }, |
||||||
|
{ type: TableCellDisplayMode.JSONView, fieldType: FieldType.string }, |
||||||
|
{ type: TableCellDisplayMode.Image, fieldType: FieldType.string }, |
||||||
|
{ type: TableCellDisplayMode.DataLinks, fieldType: FieldType.string }, |
||||||
|
{ type: TableCellDisplayMode.Actions, fieldType: FieldType.string }, |
||||||
|
{ type: TableCellDisplayMode.ColorText, fieldType: FieldType.string }, |
||||||
|
{ type: TableCellDisplayMode.ColorBackground, fieldType: FieldType.string }, |
||||||
|
{ type: TableCellDisplayMode.Auto, fieldType: FieldType.string }, |
||||||
|
] as const)('should render $type cell into the document', ({ type, fieldType }) => { |
||||||
|
const field = createField(fieldType); |
||||||
|
const { container } = renderCell(field, { type }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('invalid config cases', () => { |
||||||
|
it('should return AutoCell when cellOptions.type is undefined', () => { |
||||||
|
const field = createField(FieldType.string); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: undefined } as unknown as TableCellOptions); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return AutoCell when cellOptions is undefined', () => { |
||||||
|
const field = createField(FieldType.string); |
||||||
|
|
||||||
|
const { container } = renderCell(field, undefined as unknown as TableCellOptions); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('auto mode field type cases', () => { |
||||||
|
it('should return GeoCell for geo field type', () => { |
||||||
|
const field = createField(FieldType.geo); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return SparklineCell for frame field type with time series', () => { |
||||||
|
const timeSeriesFrame = createDataFrame({ |
||||||
|
fields: [ |
||||||
|
{ name: 'time', type: FieldType.time, values: [1, 2, 3] }, |
||||||
|
{ name: 'value', type: FieldType.number, values: [1, 2, 3] }, |
||||||
|
], |
||||||
|
}); |
||||||
|
const field = createField(FieldType.frame, [timeSeriesFrame]); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return JSONCell for frame field type with non-time series', () => { |
||||||
|
const regularFrame = createDataFrame({ |
||||||
|
fields: [ |
||||||
|
{ name: 'name', type: FieldType.string, values: ['a', 'b', 'c'] }, |
||||||
|
{ name: 'value', type: FieldType.number, values: [1, 2, 3] }, |
||||||
|
], |
||||||
|
}); |
||||||
|
const field = createField(FieldType.frame, [regularFrame]); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return JSONCell for other field type', () => { |
||||||
|
const field = createField(FieldType.other); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return AutoCell for string field type', () => { |
||||||
|
const field = createField(FieldType.string); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return AutoCell for number field type', () => { |
||||||
|
const field = createField(FieldType.number); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return AutoCell for boolean field type', () => { |
||||||
|
const field = createField(FieldType.boolean); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return AutoCell for time field type', () => { |
||||||
|
const field = createField(FieldType.time); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('custom cell renderer cases', () => { |
||||||
|
it('should return custom cell component for Custom type with valid cellComponent', () => { |
||||||
|
const CustomComponent = () => <div data-testid="custom-cell">CustomCell</div>; |
||||||
|
const field = createField(FieldType.string); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { |
||||||
|
type: TableCellDisplayMode.Custom, |
||||||
|
cellComponent: CustomComponent, |
||||||
|
}); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('(invalid) should return null for Custom type without cellComponent', () => { |
||||||
|
const field = createField(FieldType.string); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { |
||||||
|
type: TableCellDisplayMode.Custom, |
||||||
|
cellComponent: undefined, |
||||||
|
} as unknown as TableCustomCellOptions); |
||||||
|
|
||||||
|
expect(container.childNodes).toHaveLength(0); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('edge cases', () => { |
||||||
|
it('should handle empty field values array', () => { |
||||||
|
const field = createField(FieldType.frame, []); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should handle field with null values', () => { |
||||||
|
const field = createField(FieldType.frame, [null]); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should handle field with undefined values', () => { |
||||||
|
const field = createField(FieldType.frame, [undefined]); |
||||||
|
|
||||||
|
const { container } = renderCell(field, { type: TableCellDisplayMode.Auto }); |
||||||
|
expect(container).toBeInTheDocument(); |
||||||
|
expect(container.childNodes).toHaveLength(1); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe.skip('performance benchmarks', () => { |
||||||
|
// Performance thresholds (in milliseconds)
|
||||||
|
// these thresholds are tweaked based on performance on CI, not on a typical dev machine.
|
||||||
|
const PERFORMANCE_THRESHOLDS = { |
||||||
|
FAST: 1, // Should render in under 1ms
|
||||||
|
MEDIUM: 2.5, // Should render in under 2.5ms
|
||||||
|
SLOW: 5, // Should render in under 5ms
|
||||||
|
}; |
||||||
|
|
||||||
|
describe('explicit cell type performance', () => { |
||||||
|
it.each([ |
||||||
|
{ type: TableCellDisplayMode.Sparkline, threshold: PERFORMANCE_THRESHOLDS.MEDIUM }, |
||||||
|
{ type: TableCellDisplayMode.Gauge, threshold: PERFORMANCE_THRESHOLDS.SLOW }, |
||||||
|
{ type: TableCellDisplayMode.JSONView, threshold: PERFORMANCE_THRESHOLDS.FAST }, |
||||||
|
{ type: TableCellDisplayMode.Image, threshold: PERFORMANCE_THRESHOLDS.FAST }, |
||||||
|
{ type: TableCellDisplayMode.DataLinks, threshold: PERFORMANCE_THRESHOLDS.FAST }, |
||||||
|
{ type: TableCellDisplayMode.Actions, threshold: PERFORMANCE_THRESHOLDS.FAST }, |
||||||
|
{ type: TableCellDisplayMode.ColorText, threshold: PERFORMANCE_THRESHOLDS.FAST }, |
||||||
|
{ type: TableCellDisplayMode.ColorBackground, threshold: PERFORMANCE_THRESHOLDS.FAST }, |
||||||
|
{ type: TableCellDisplayMode.Auto, threshold: PERFORMANCE_THRESHOLDS.FAST }, |
||||||
|
] as const)('should render $type within performance threshold', ({ type, threshold }) => { |
||||||
|
const field = createField(FieldType.number); |
||||||
|
const avgTime = benchmarkCellPerformance(field, { type }, 100); |
||||||
|
expect(avgTime).toBeLessThan(threshold); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('custom cell renderer performance', () => { |
||||||
|
it('should render custom cell component within performance threshold', () => { |
||||||
|
const CustomComponent = () => <div data-testid="custom-cell">CustomCell</div>; |
||||||
|
const field = createField(FieldType.string); |
||||||
|
const avgTime = benchmarkCellPerformance( |
||||||
|
field, |
||||||
|
{ |
||||||
|
type: TableCellDisplayMode.Custom, |
||||||
|
cellComponent: CustomComponent, |
||||||
|
}, |
||||||
|
50 |
||||||
|
); |
||||||
|
expect(avgTime).toBeLessThan(PERFORMANCE_THRESHOLDS.FAST); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('large data performance', () => { |
||||||
|
it('should render JSONCell with large JSON data within performance threshold', () => { |
||||||
|
const largeJSON = createLargeJSONData(); |
||||||
|
const field = createField(FieldType.string, [JSON.stringify(largeJSON)]); |
||||||
|
const avgTime = benchmarkCellPerformance(field, { type: TableCellDisplayMode.JSONView }, 20); |
||||||
|
expect(avgTime).toBeLessThan(PERFORMANCE_THRESHOLDS.SLOW); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render SparklineCell with large time series within performance threshold', () => { |
||||||
|
const largeTimeSeriesFrame = createLargeTimeSeriesFrame(); |
||||||
|
const field = createField(FieldType.frame, [largeTimeSeriesFrame]); |
||||||
|
const avgTime = benchmarkCellPerformance(field, { type: TableCellDisplayMode.Sparkline }, 10); |
||||||
|
expect(avgTime).toBeLessThan(PERFORMANCE_THRESHOLDS.MEDIUM); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should render AutoCell with large string data within performance threshold', () => { |
||||||
|
const largeString = 'x'.repeat(10000); // 10KB string
|
||||||
|
const field = createField(FieldType.string, [largeString]); |
||||||
|
const avgTime = benchmarkCellPerformance(field, { type: TableCellDisplayMode.Auto }, 30); |
||||||
|
expect(avgTime).toBeLessThan(PERFORMANCE_THRESHOLDS.MEDIUM); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
import { ReactNode } from 'react'; |
||||||
|
|
||||||
|
import { Field, FieldType, isDataFrame, isTimeSeriesFrame } from '@grafana/data'; |
||||||
|
|
||||||
|
import { TableCellDisplayMode, TableCellOptions, TableCustomCellOptions } from '../../types'; |
||||||
|
import { TableCellRendererProps } from '../types'; |
||||||
|
|
||||||
|
import { ActionsCell } from './ActionsCell'; |
||||||
|
import AutoCell from './AutoCell'; |
||||||
|
import { BarGaugeCell } from './BarGaugeCell'; |
||||||
|
import { DataLinksCell } from './DataLinksCell'; |
||||||
|
import { GeoCell } from './GeoCell'; |
||||||
|
import { ImageCell } from './ImageCell'; |
||||||
|
import { JSONCell } from './JSONCell'; |
||||||
|
import { SparklineCell } from './SparklineCell'; |
||||||
|
|
||||||
|
export type TableCellRenderer = (props: TableCellRendererProps) => ReactNode; |
||||||
|
|
||||||
|
const GAUGE_RENDERER: TableCellRenderer = (props) => ( |
||||||
|
<BarGaugeCell |
||||||
|
field={props.field} |
||||||
|
value={props.value} |
||||||
|
theme={props.theme} |
||||||
|
height={props.height} |
||||||
|
width={props.width} |
||||||
|
rowIdx={props.rowIdx} |
||||||
|
actions={props.actions} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const AUTO_RENDERER: TableCellRenderer = (props) => ( |
||||||
|
<AutoCell |
||||||
|
value={props.value} |
||||||
|
field={props.field} |
||||||
|
justifyContent={props.justifyContent} |
||||||
|
rowIdx={props.rowIdx} |
||||||
|
cellOptions={props.cellOptions} |
||||||
|
actions={props.actions} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const SPARKLINE_RENDERER: TableCellRenderer = (props) => ( |
||||||
|
<SparklineCell |
||||||
|
value={props.value} |
||||||
|
field={props.field} |
||||||
|
justifyContent={props.justifyContent} |
||||||
|
timeRange={props.timeRange} |
||||||
|
rowIdx={props.rowIdx} |
||||||
|
theme={props.theme} |
||||||
|
width={props.width} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const JSON_RENDERER: TableCellRenderer = (props) => ( |
||||||
|
<JSONCell |
||||||
|
justifyContent={props.justifyContent} |
||||||
|
value={props.value} |
||||||
|
field={props.field} |
||||||
|
rowIdx={props.rowIdx} |
||||||
|
actions={props.actions} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const GEO_RENDERER: TableCellRenderer = (props) => ( |
||||||
|
<GeoCell value={props.value} justifyContent={props.justifyContent} height={props.height} /> |
||||||
|
); |
||||||
|
|
||||||
|
const IMAGE_RENDERER: TableCellRenderer = (props) => ( |
||||||
|
<ImageCell |
||||||
|
cellOptions={props.cellOptions} |
||||||
|
field={props.field} |
||||||
|
height={props.height} |
||||||
|
justifyContent={props.justifyContent} |
||||||
|
value={props.value} |
||||||
|
rowIdx={props.rowIdx} |
||||||
|
actions={props.actions} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const DATA_LINKS_RENDERER: TableCellRenderer = (props) => <DataLinksCell field={props.field} rowIdx={props.rowIdx} />; |
||||||
|
|
||||||
|
const ACTIONS_RENDERER: TableCellRenderer = (props) => <ActionsCell actions={props.actions} />; |
||||||
|
|
||||||
|
function isCustomCellOptions(options: TableCellOptions): options is TableCustomCellOptions { |
||||||
|
return options.type === TableCellDisplayMode.Custom; |
||||||
|
} |
||||||
|
|
||||||
|
const CUSTOM_RENDERER: TableCellRenderer = (props) => { |
||||||
|
if (!isCustomCellOptions(props.cellOptions) || !props.cellOptions.cellComponent) { |
||||||
|
return null; // nonsensical case, but better to typeguard it than throw.
|
||||||
|
} |
||||||
|
const CustomCellComponent = props.cellOptions.cellComponent; |
||||||
|
return <CustomCellComponent field={props.field} rowIndex={props.rowIdx} frame={props.frame} value={props.value} />; |
||||||
|
}; |
||||||
|
|
||||||
|
const CELL_RENDERERS: Record<TableCellOptions['type'], TableCellRenderer> = { |
||||||
|
[TableCellDisplayMode.Sparkline]: SPARKLINE_RENDERER, |
||||||
|
[TableCellDisplayMode.Gauge]: GAUGE_RENDERER, |
||||||
|
[TableCellDisplayMode.JSONView]: JSON_RENDERER, |
||||||
|
[TableCellDisplayMode.Image]: IMAGE_RENDERER, |
||||||
|
[TableCellDisplayMode.DataLinks]: DATA_LINKS_RENDERER, |
||||||
|
[TableCellDisplayMode.Actions]: ACTIONS_RENDERER, |
||||||
|
[TableCellDisplayMode.Custom]: CUSTOM_RENDERER, |
||||||
|
[TableCellDisplayMode.ColorText]: AUTO_RENDERER, |
||||||
|
[TableCellDisplayMode.ColorBackground]: AUTO_RENDERER, |
||||||
|
[TableCellDisplayMode.Auto]: AUTO_RENDERER, |
||||||
|
}; |
||||||
|
|
||||||
|
/** @internal */ |
||||||
|
export function getCellRenderer(field: Field, cellOptions: TableCellOptions): TableCellRenderer { |
||||||
|
const cellType = cellOptions?.type ?? TableCellDisplayMode.Auto; |
||||||
|
if (cellType === TableCellDisplayMode.Auto) { |
||||||
|
return getAutoRendererResult(field); |
||||||
|
} |
||||||
|
return CELL_RENDERERS[cellType]; |
||||||
|
} |
||||||
|
|
||||||
|
/** @internal */ |
||||||
|
export function getAutoRendererResult(field: Field): TableCellRenderer { |
||||||
|
if (field.type === FieldType.geo) { |
||||||
|
return GEO_RENDERER; |
||||||
|
} |
||||||
|
if (field.type === FieldType.frame) { |
||||||
|
const firstValue = field.values[0]; |
||||||
|
if (isDataFrame(firstValue) && isTimeSeriesFrame(firstValue)) { |
||||||
|
return SPARKLINE_RENDERER; |
||||||
|
} else { |
||||||
|
return JSON_RENDERER; |
||||||
|
} |
||||||
|
} |
||||||
|
if (field.type === FieldType.other) { |
||||||
|
return JSON_RENDERER; |
||||||
|
} |
||||||
|
return AUTO_RENDERER; |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,335 @@ |
|||||||
|
import { act, renderHook } from '@testing-library/react'; |
||||||
|
|
||||||
|
import { Field, FieldType } from '@grafana/data'; |
||||||
|
|
||||||
|
import { useFilteredRows, usePaginatedRows, useSortedRows, useFooterCalcs } from './hooks'; |
||||||
|
import { getColumnTypes } from './utils'; |
||||||
|
|
||||||
|
describe('TableNG hooks', () => { |
||||||
|
function setupData() { |
||||||
|
// Mock data for testing
|
||||||
|
const fields: Field[] = [ |
||||||
|
{ |
||||||
|
name: 'name', |
||||||
|
type: FieldType.string, |
||||||
|
display: (v) => ({ text: v as string, numeric: NaN }), |
||||||
|
config: {}, |
||||||
|
values: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'age', |
||||||
|
type: FieldType.number, |
||||||
|
display: (v) => ({ text: (v as number).toString(), numeric: v as number }), |
||||||
|
config: {}, |
||||||
|
values: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'active', |
||||||
|
type: FieldType.boolean, |
||||||
|
display: (v) => ({ text: (v as boolean).toString(), numeric: NaN }), |
||||||
|
config: {}, |
||||||
|
values: [], |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const rows = [ |
||||||
|
{ name: 'Alice', age: 30, active: true, __depth: 0, __index: 0 }, |
||||||
|
{ name: 'Bob', age: 25, active: false, __depth: 0, __index: 1 }, |
||||||
|
{ name: 'Charlie', age: 35, active: true, __depth: 0, __index: 2 }, |
||||||
|
]; |
||||||
|
|
||||||
|
return { fields, rows }; |
||||||
|
} |
||||||
|
|
||||||
|
describe('useFilteredRows', () => { |
||||||
|
it('should correctly initialize with provided fields and rows', () => { |
||||||
|
const { fields, rows } = setupData(); |
||||||
|
const { result } = renderHook(() => useFilteredRows(rows, fields, { hasNestedFrames: false })); |
||||||
|
expect(result.current.rows[0].name).toBe('Alice'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should apply filters correctly', () => { |
||||||
|
const { fields, rows } = setupData(); |
||||||
|
const { result } = renderHook(() => useFilteredRows(rows, fields, { hasNestedFrames: false })); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
result.current.setFilter({ |
||||||
|
name: { filteredSet: new Set(['Alice']) }, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result.current.rows.length).toBe(1); |
||||||
|
expect(result.current.rows[0].name).toBe('Alice'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should clear filters correctly', () => { |
||||||
|
const { fields, rows } = setupData(); |
||||||
|
const { result } = renderHook(() => useFilteredRows(rows, fields, { hasNestedFrames: false })); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
result.current.setFilter({ |
||||||
|
name: { filteredSet: new Set(['Alice']) }, |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result.current.rows.length).toBe(1); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
result.current.setFilter({}); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result.current.rows.length).toBe(3); |
||||||
|
}); |
||||||
|
|
||||||
|
it.todo('should handle nested frames'); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('useSortedRows', () => { |
||||||
|
it('should correctly set up the table with an initial sort', () => { |
||||||
|
const { fields, rows } = setupData(); |
||||||
|
const columnTypes = getColumnTypes(fields); |
||||||
|
const { result } = renderHook(() => |
||||||
|
useSortedRows(rows, fields, { |
||||||
|
columnTypes, |
||||||
|
hasNestedFrames: false, |
||||||
|
initialSortBy: [{ displayName: 'age', desc: false }], |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
// Initial state checks
|
||||||
|
expect(result.current.sortColumns).toEqual([{ columnKey: 'age', direction: 'ASC' }]); |
||||||
|
expect(result.current.rows[0].name).toBe('Bob'); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should change the sort on setSortColumns', () => { |
||||||
|
const { fields, rows } = setupData(); |
||||||
|
const columnTypes = getColumnTypes(fields); |
||||||
|
const { result } = renderHook(() => |
||||||
|
useSortedRows(rows, fields, { |
||||||
|
columnTypes, |
||||||
|
hasNestedFrames: false, |
||||||
|
initialSortBy: [{ displayName: 'age', desc: false }], |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current.rows[0].name).toBe('Bob'); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
result.current.setSortColumns([{ columnKey: 'age', direction: 'DESC' }]); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result.current.rows[0].name).toBe('Charlie'); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
result.current.setSortColumns([{ columnKey: 'name', direction: 'ASC' }]); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result.current.rows[0].name).toBe('Alice'); |
||||||
|
}); |
||||||
|
|
||||||
|
it.todo('should handle nested frames'); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('usePaginatedRows', () => { |
||||||
|
it('should return defaults for pagination values when pagination is disabled', () => { |
||||||
|
const { rows } = setupData(); |
||||||
|
const { result } = renderHook(() => |
||||||
|
usePaginatedRows(rows, { rowHeight: 30, height: 300, width: 800, enabled: false }) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current.page).toBe(-1); |
||||||
|
expect(result.current.rowsPerPage).toBe(0); |
||||||
|
expect(result.current.pageRangeStart).toBe(1); |
||||||
|
expect(result.current.pageRangeEnd).toBe(3); |
||||||
|
expect(result.current.rows.length).toBe(3); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should handle pagination correctly', () => { |
||||||
|
// with the numbers provided here, we have 3 rows, with 2 rows per page, over 2 pages total.
|
||||||
|
const { rows } = setupData(); |
||||||
|
const { result } = renderHook(() => |
||||||
|
usePaginatedRows(rows, { |
||||||
|
enabled: true, |
||||||
|
height: 60, |
||||||
|
width: 800, |
||||||
|
rowHeight: 10, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current.page).toBe(0); |
||||||
|
expect(result.current.rowsPerPage).toBe(2); |
||||||
|
expect(result.current.pageRangeStart).toBe(1); |
||||||
|
expect(result.current.pageRangeEnd).toBe(2); |
||||||
|
expect(result.current.rows.length).toBe(2); |
||||||
|
|
||||||
|
act(() => { |
||||||
|
result.current.setPage(1); |
||||||
|
}); |
||||||
|
|
||||||
|
expect(result.current.page).toBe(1); |
||||||
|
expect(result.current.rowsPerPage).toBe(2); |
||||||
|
expect(result.current.pageRangeStart).toBe(3); |
||||||
|
expect(result.current.pageRangeEnd).toBe(3); |
||||||
|
expect(result.current.rows.length).toBe(1); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('useFooterCalcs', () => { |
||||||
|
const rows = [ |
||||||
|
{ Field1: 1, Text: 'a', __depth: 0, __index: 0 }, |
||||||
|
{ Field1: 2, Text: 'b', __depth: 0, __index: 1 }, |
||||||
|
{ Field1: 3, Text: 'c', __depth: 0, __index: 2 }, |
||||||
|
{ Field2: 3, Text: 'd', __depth: 0, __index: 3 }, |
||||||
|
{ Field2: 10, Text: 'e', __depth: 0, __index: 4 }, |
||||||
|
]; |
||||||
|
|
||||||
|
const numericField: Field = { |
||||||
|
name: 'Field1', |
||||||
|
type: FieldType.number, |
||||||
|
values: [1, 2, 3], |
||||||
|
config: { |
||||||
|
custom: {}, |
||||||
|
}, |
||||||
|
display: (value: unknown) => ({ |
||||||
|
text: String(value), |
||||||
|
numeric: Number(value), |
||||||
|
color: undefined, |
||||||
|
prefix: undefined, |
||||||
|
suffix: undefined, |
||||||
|
}), |
||||||
|
state: {}, |
||||||
|
getLinks: undefined, |
||||||
|
}; |
||||||
|
|
||||||
|
const numericField2: Field = { |
||||||
|
name: 'Field2', |
||||||
|
type: FieldType.number, |
||||||
|
values: [3, 10], |
||||||
|
config: { custom: {} }, |
||||||
|
display: (value: unknown) => ({ |
||||||
|
text: String(value), |
||||||
|
numeric: Number(value), |
||||||
|
color: undefined, |
||||||
|
prefix: undefined, |
||||||
|
suffix: undefined, |
||||||
|
}), |
||||||
|
state: {}, |
||||||
|
getLinks: undefined, |
||||||
|
}; |
||||||
|
|
||||||
|
const textField: Field = { |
||||||
|
name: 'Text', |
||||||
|
type: FieldType.string, |
||||||
|
values: ['a', 'b', 'c'], |
||||||
|
config: { custom: {} }, |
||||||
|
display: (value: unknown) => ({ |
||||||
|
text: String(value), |
||||||
|
numeric: 0, |
||||||
|
color: undefined, |
||||||
|
prefix: undefined, |
||||||
|
suffix: undefined, |
||||||
|
}), |
||||||
|
state: {}, |
||||||
|
getLinks: undefined, |
||||||
|
}; |
||||||
|
|
||||||
|
it('should calculate sum for numeric fields', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, numericField], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: { show: true, reducer: ['sum'] }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual(['Total', '6']); // 1 + 2 + 3
|
||||||
|
}); |
||||||
|
|
||||||
|
it('should calculate mean for numeric fields', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, numericField], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: { show: true, reducer: ['mean'] }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual(['Mean', '2']); // (1 + 2 + 3) / 3
|
||||||
|
}); |
||||||
|
|
||||||
|
it('should return an empty string for non-numeric fields', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, textField], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: { show: true, reducer: ['sum'] }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual(['Total', '']); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return empty array if no footerOptions are provided', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, textField], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: undefined, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual([]); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return empty array when footer is disabled', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, textField], { |
||||||
|
enabled: false, |
||||||
|
footerOptions: { show: true, reducer: ['sum'] }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual([]); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return empty array when reducer is undefined', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, textField], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: { show: true, reducer: undefined }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual([]); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return empty array when reducer is empty', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, textField], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: { show: true, reducer: [] }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual([]); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return empty string if fields array doesnt include this field', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, numericField, numericField2], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: { show: true, reducer: ['sum'], fields: ['Field2', 'Field3'] }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual(['Total', '', '13']); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should return the calculation if fields array includes this field', () => { |
||||||
|
const { result } = renderHook(() => |
||||||
|
useFooterCalcs(rows, [textField, numericField, numericField2], { |
||||||
|
enabled: true, |
||||||
|
footerOptions: { show: true, reducer: ['sum'], fields: ['Field1', 'Field2', 'Field3'] }, |
||||||
|
}) |
||||||
|
); |
||||||
|
|
||||||
|
expect(result.current).toEqual(['Total', '6', '13']); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,506 @@ |
|||||||
|
import { useState, useMemo, useEffect, useCallback, useRef, useLayoutEffect } from 'react'; |
||||||
|
import { Column, DataGridProps, SortColumn } from 'react-data-grid'; |
||||||
|
|
||||||
|
import { Field, fieldReducers, FieldType, formattedValueToString, reduceField } from '@grafana/data'; |
||||||
|
|
||||||
|
import { useTheme2 } from '../../../themes/ThemeContext'; |
||||||
|
import { TableCellDisplayMode, TableColumnResizeActionCallback } from '../types'; |
||||||
|
|
||||||
|
import { TABLE } from './constants'; |
||||||
|
import { ColumnTypes, FilterType, TableFooterCalc, TableRow, TableSortByFieldState, TableSummaryRow } from './types'; |
||||||
|
import { getDisplayName, processNestedTableRows, getCellHeightCalculator, applySort, getCellOptions } from './utils'; |
||||||
|
|
||||||
|
// Helper function to get displayed value
|
||||||
|
const getDisplayedValue = (row: TableRow, key: string, fields: Field[]) => { |
||||||
|
const field = fields.find((field) => getDisplayName(field) === key); |
||||||
|
if (!field || !field.display) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
const displayedValue = formattedValueToString(field.display(row[key])); |
||||||
|
return displayedValue; |
||||||
|
}; |
||||||
|
|
||||||
|
export interface FilteredRowsResult { |
||||||
|
rows: TableRow[]; |
||||||
|
filter: FilterType; |
||||||
|
setFilter: React.Dispatch<React.SetStateAction<FilterType>>; |
||||||
|
crossFilterOrder: string[]; |
||||||
|
crossFilterRows: Record<string, TableRow[]>; |
||||||
|
} |
||||||
|
|
||||||
|
export interface FilteredRowsOptions { |
||||||
|
hasNestedFrames: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export function useFilteredRows( |
||||||
|
rows: TableRow[], |
||||||
|
fields: Field[], |
||||||
|
{ hasNestedFrames }: FilteredRowsOptions |
||||||
|
): FilteredRowsResult { |
||||||
|
// TODO: allow persisted filter selection via url
|
||||||
|
const [filter, setFilter] = useState<FilterType>({}); |
||||||
|
const filterValues = useMemo(() => Object.entries(filter), [filter]); |
||||||
|
|
||||||
|
const crossFilterOrder: FilteredRowsResult['crossFilterOrder'] = useMemo( |
||||||
|
() => Array.from(new Set(filterValues.map(([key]) => key))), |
||||||
|
[filterValues] |
||||||
|
); |
||||||
|
|
||||||
|
const [filteredRows, crossFilterRows] = useMemo(() => { |
||||||
|
const crossFilterRows: FilteredRowsResult['crossFilterRows'] = {}; |
||||||
|
|
||||||
|
const filterRows = (row: TableRow): boolean => { |
||||||
|
for (const [key, value] of filterValues) { |
||||||
|
const displayedValue = getDisplayedValue(row, key, fields); |
||||||
|
if (!value.filteredSet.has(displayedValue)) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
// collect rows for crossFilter
|
||||||
|
crossFilterRows[key] = crossFilterRows[key] ?? []; |
||||||
|
crossFilterRows[key].push(row); |
||||||
|
} |
||||||
|
return true; |
||||||
|
}; |
||||||
|
|
||||||
|
const filteredRows = hasNestedFrames |
||||||
|
? processNestedTableRows(rows, (parents) => parents.filter(filterRows)) |
||||||
|
: rows.filter(filterRows); |
||||||
|
|
||||||
|
return [filteredRows, crossFilterRows]; |
||||||
|
}, [filterValues, rows, fields, hasNestedFrames]); |
||||||
|
|
||||||
|
return { |
||||||
|
rows: filteredRows, |
||||||
|
filter, |
||||||
|
setFilter, |
||||||
|
crossFilterOrder, |
||||||
|
crossFilterRows, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export interface SortedRowsOptions { |
||||||
|
columnTypes: ColumnTypes; |
||||||
|
hasNestedFrames: boolean; |
||||||
|
initialSortBy?: TableSortByFieldState[]; |
||||||
|
} |
||||||
|
|
||||||
|
export interface SortedRowsResult { |
||||||
|
rows: TableRow[]; |
||||||
|
sortColumns: SortColumn[]; |
||||||
|
setSortColumns: React.Dispatch<React.SetStateAction<SortColumn[]>>; |
||||||
|
} |
||||||
|
|
||||||
|
export function useSortedRows( |
||||||
|
rows: TableRow[], |
||||||
|
fields: Field[], |
||||||
|
{ initialSortBy, columnTypes, hasNestedFrames }: SortedRowsOptions |
||||||
|
): SortedRowsResult { |
||||||
|
const initialSortColumns = useMemo<SortColumn[]>( |
||||||
|
() => |
||||||
|
initialSortBy?.flatMap(({ displayName, desc }) => { |
||||||
|
if (!fields.some((f) => getDisplayName(f) === displayName)) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
return [ |
||||||
|
{ |
||||||
|
columnKey: displayName, |
||||||
|
direction: desc ? ('DESC' as const) : ('ASC' as const), |
||||||
|
}, |
||||||
|
]; |
||||||
|
}) ?? [], |
||||||
|
[] // eslint-disable-line react-hooks/exhaustive-deps
|
||||||
|
); |
||||||
|
const [sortColumns, setSortColumns] = useState<SortColumn[]>(initialSortColumns); |
||||||
|
|
||||||
|
const sortedRows = useMemo( |
||||||
|
() => applySort(rows, fields, sortColumns, columnTypes, hasNestedFrames), |
||||||
|
[rows, fields, sortColumns, hasNestedFrames, columnTypes] |
||||||
|
); |
||||||
|
|
||||||
|
return { |
||||||
|
rows: sortedRows, |
||||||
|
sortColumns, |
||||||
|
setSortColumns, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export interface PaginatedRowsOptions { |
||||||
|
height: number; |
||||||
|
width: number; |
||||||
|
rowHeight: number | ((row: TableRow) => number); |
||||||
|
hasHeader?: boolean; |
||||||
|
hasFooter?: boolean; |
||||||
|
paginationHeight?: number; |
||||||
|
enabled?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
export interface PaginatedRowsResult { |
||||||
|
rows: TableRow[]; |
||||||
|
page: number; |
||||||
|
setPage: React.Dispatch<React.SetStateAction<number>>; |
||||||
|
numPages: number; |
||||||
|
rowsPerPage: number; |
||||||
|
pageRangeStart: number; |
||||||
|
pageRangeEnd: number; |
||||||
|
smallPagination: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
// hand-measured. pagination height is 30px, plus 8px top margin
|
||||||
|
const PAGINATION_HEIGHT = 38; |
||||||
|
|
||||||
|
export function usePaginatedRows( |
||||||
|
rows: TableRow[], |
||||||
|
{ height, width, hasHeader, hasFooter, rowHeight, enabled }: PaginatedRowsOptions |
||||||
|
): PaginatedRowsResult { |
||||||
|
// TODO: allow persisted page selection via url
|
||||||
|
const [page, setPage] = useState(0); |
||||||
|
const numRows = rows.length; |
||||||
|
|
||||||
|
// calculate average row height if row height is variable.
|
||||||
|
const avgRowHeight = useMemo(() => { |
||||||
|
if (typeof rowHeight === 'number') { |
||||||
|
return rowHeight; |
||||||
|
} |
||||||
|
return rows.reduce((avg, row, _, { length }) => avg + rowHeight(row) / length, 0); |
||||||
|
}, [rows, rowHeight]); |
||||||
|
|
||||||
|
// using dimensions of the panel, calculate pagination parameters
|
||||||
|
const { numPages, rowsPerPage, pageRangeStart, pageRangeEnd, smallPagination } = useMemo((): { |
||||||
|
numPages: number; |
||||||
|
rowsPerPage: number; |
||||||
|
pageRangeStart: number; |
||||||
|
pageRangeEnd: number; |
||||||
|
smallPagination: boolean; |
||||||
|
} => { |
||||||
|
if (!enabled) { |
||||||
|
return { numPages: 0, rowsPerPage: 0, pageRangeStart: 1, pageRangeEnd: numRows, smallPagination: false }; |
||||||
|
} |
||||||
|
|
||||||
|
// calculate number of rowsPerPage based on height stack
|
||||||
|
const rowAreaHeight = |
||||||
|
height - (hasHeader ? TABLE.HEADER_ROW_HEIGHT : 0) - (hasFooter ? avgRowHeight : 0) - PAGINATION_HEIGHT; |
||||||
|
const heightPerRow = Math.floor(rowAreaHeight / (avgRowHeight || 1)); |
||||||
|
// ensure at least one row per page is displayed
|
||||||
|
let rowsPerPage = heightPerRow > 1 ? heightPerRow : 1; |
||||||
|
|
||||||
|
// calculate row range for pagination summary display
|
||||||
|
const pageRangeStart = page * rowsPerPage + 1; |
||||||
|
let pageRangeEnd = pageRangeStart + rowsPerPage - 1; |
||||||
|
if (pageRangeEnd > numRows) { |
||||||
|
pageRangeEnd = numRows; |
||||||
|
} |
||||||
|
const smallPagination = width < TABLE.PAGINATION_LIMIT; |
||||||
|
const numPages = Math.ceil(numRows / rowsPerPage); |
||||||
|
return { |
||||||
|
numPages, |
||||||
|
rowsPerPage, |
||||||
|
pageRangeStart, |
||||||
|
pageRangeEnd, |
||||||
|
smallPagination, |
||||||
|
}; |
||||||
|
}, [width, height, hasHeader, hasFooter, avgRowHeight, enabled, numRows, page]); |
||||||
|
|
||||||
|
// safeguard against page overflow on panel resize or other factors
|
||||||
|
useEffect(() => { |
||||||
|
if (!enabled) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (page > numPages) { |
||||||
|
// resets pagination to end
|
||||||
|
setPage(numPages - 1); |
||||||
|
} |
||||||
|
}, [numPages, enabled, page, setPage]); |
||||||
|
|
||||||
|
// apply pagination to the sorted rows
|
||||||
|
const paginatedRows = useMemo(() => { |
||||||
|
if (!enabled) { |
||||||
|
return rows; |
||||||
|
} |
||||||
|
const pageOffset = page * rowsPerPage; |
||||||
|
return rows.slice(pageOffset, pageOffset + rowsPerPage); |
||||||
|
}, [page, rowsPerPage, rows, enabled]); |
||||||
|
|
||||||
|
return { |
||||||
|
rows: paginatedRows, |
||||||
|
page: enabled ? page : -1, |
||||||
|
setPage, |
||||||
|
numPages, |
||||||
|
rowsPerPage, |
||||||
|
pageRangeStart, |
||||||
|
pageRangeEnd, |
||||||
|
smallPagination, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export interface FooterCalcsOptions { |
||||||
|
enabled?: boolean; |
||||||
|
isCountRowsSet?: boolean; |
||||||
|
footerOptions?: TableFooterCalc; |
||||||
|
} |
||||||
|
|
||||||
|
export function useFooterCalcs( |
||||||
|
rows: TableRow[], |
||||||
|
fields: Field[], |
||||||
|
{ enabled, footerOptions, isCountRowsSet }: FooterCalcsOptions |
||||||
|
): string[] { |
||||||
|
return useMemo(() => { |
||||||
|
const footerReducers = footerOptions?.reducer; |
||||||
|
|
||||||
|
if (!enabled || !footerOptions || !Array.isArray(footerReducers) || !footerReducers.length) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
return fields.map((field, index) => { |
||||||
|
if (field.state?.calcs) { |
||||||
|
delete field.state?.calcs; |
||||||
|
} |
||||||
|
|
||||||
|
if (isCountRowsSet) { |
||||||
|
return index === 0 ? `${rows.length}` : ''; |
||||||
|
} |
||||||
|
|
||||||
|
if (index === 0) { |
||||||
|
const footerCalcReducer = footerReducers[0]; |
||||||
|
return footerCalcReducer ? fieldReducers.get(footerCalcReducer).name : ''; |
||||||
|
} |
||||||
|
|
||||||
|
if (field.type !== FieldType.number) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
|
||||||
|
// if field.display is undefined, don't throw
|
||||||
|
const displayFn = field.display; |
||||||
|
if (!displayFn) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
|
||||||
|
// If fields array is specified, only show footer for fields included in that array
|
||||||
|
if (footerOptions.fields?.length && !footerOptions.fields?.includes(getDisplayName(field))) { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
|
||||||
|
const calc = footerReducers[0]; |
||||||
|
const value = reduceField({ |
||||||
|
field: { |
||||||
|
...field, |
||||||
|
values: rows.map((row) => row[getDisplayName(field)]), |
||||||
|
}, |
||||||
|
reducers: footerReducers, |
||||||
|
})[calc]; |
||||||
|
|
||||||
|
return formattedValueToString(displayFn(value)); |
||||||
|
}); |
||||||
|
}, [fields, enabled, footerOptions, isCountRowsSet, rows]); |
||||||
|
} |
||||||
|
|
||||||
|
export function useTextWraps(fields: Field[]): Record<string, boolean> { |
||||||
|
return useMemo( |
||||||
|
() => |
||||||
|
fields.reduce<{ [key: string]: boolean }>((acc, field) => { |
||||||
|
const cellOptions = getCellOptions(field); |
||||||
|
const displayName = getDisplayName(field); |
||||||
|
const wrapText = 'wrapText' in cellOptions && cellOptions.wrapText; |
||||||
|
return { ...acc, [displayName]: !!wrapText }; |
||||||
|
}, {}), |
||||||
|
[fields] |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function useTypographyCtx() { |
||||||
|
const theme = useTheme2(); |
||||||
|
const { ctx, font, avgCharWidth } = useMemo(() => { |
||||||
|
const font = `${theme.typography.fontSize}px ${theme.typography.fontFamily}`; |
||||||
|
const canvas = document.createElement('canvas'); |
||||||
|
const ctx = canvas.getContext('2d')!; |
||||||
|
// set in grafana/data in createTypography.ts
|
||||||
|
const letterSpacing = 0.15; |
||||||
|
|
||||||
|
ctx.letterSpacing = `${letterSpacing}px`; |
||||||
|
ctx.font = font; |
||||||
|
const txt = |
||||||
|
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"; |
||||||
|
const txtWidth = ctx.measureText(txt).width; |
||||||
|
const avgCharWidth = txtWidth / txt.length + letterSpacing; |
||||||
|
|
||||||
|
return { |
||||||
|
ctx, |
||||||
|
font, |
||||||
|
avgCharWidth, |
||||||
|
}; |
||||||
|
}, [theme.typography.fontSize, theme.typography.fontFamily]); |
||||||
|
return { ctx, font, avgCharWidth }; |
||||||
|
} |
||||||
|
|
||||||
|
export function useRowHeight( |
||||||
|
columnWidths: number[], |
||||||
|
fields: Field[], |
||||||
|
hasNestedFrames: boolean, |
||||||
|
defaultRowHeight: number, |
||||||
|
expandedRows: Record<string, boolean> |
||||||
|
): number | ((row: TableRow) => number) { |
||||||
|
const [wrappedColIdxs, hasWrappedCols] = useMemo(() => { |
||||||
|
let hasWrappedCols = false; |
||||||
|
return [ |
||||||
|
fields.map((field) => { |
||||||
|
if (field.type !== FieldType.string) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
const cellOptions = getCellOptions(field); |
||||||
|
const wrapText = 'wrapText' in cellOptions && cellOptions.wrapText; |
||||||
|
const type = cellOptions.type; |
||||||
|
const result = !!wrapText && type !== TableCellDisplayMode.Image; |
||||||
|
if (result === true) { |
||||||
|
hasWrappedCols = true; |
||||||
|
} |
||||||
|
return result; |
||||||
|
}), |
||||||
|
hasWrappedCols, |
||||||
|
]; |
||||||
|
}, [fields]); |
||||||
|
|
||||||
|
const { ctx, avgCharWidth } = useTypographyCtx(); |
||||||
|
|
||||||
|
const rowHeight = useMemo(() => { |
||||||
|
// row height is only complicated when there are nested frames or wrapped columns.
|
||||||
|
if (!hasNestedFrames && !hasWrappedCols) { |
||||||
|
return defaultRowHeight; |
||||||
|
} |
||||||
|
|
||||||
|
const HPADDING = TABLE.CELL_PADDING; |
||||||
|
const VPADDING = TABLE.CELL_PADDING; |
||||||
|
const BORDER_RIGHT = 0.666667; |
||||||
|
const LINE_HEIGHT = 22; |
||||||
|
|
||||||
|
const wrapWidths = columnWidths.map((c) => c - 2 * HPADDING - BORDER_RIGHT); |
||||||
|
const calc = getCellHeightCalculator(ctx, LINE_HEIGHT, defaultRowHeight, VPADDING); |
||||||
|
|
||||||
|
return (row: TableRow) => { |
||||||
|
// nested rows
|
||||||
|
if (Number(row.__depth) > 0) { |
||||||
|
// if unexpanded, height === 0
|
||||||
|
if (!expandedRows[row.__index]) { |
||||||
|
return 0; |
||||||
|
} |
||||||
|
|
||||||
|
// Ensure we have a minimum height (defaultRowHeight) for the nested table even if data is empty
|
||||||
|
const headerCount = row?.data?.meta?.custom?.noHeader ? 0 : 1; |
||||||
|
const rowCount = row.data?.length ?? 0; |
||||||
|
return Math.max(defaultRowHeight, defaultRowHeight * (rowCount + headerCount)); |
||||||
|
} |
||||||
|
|
||||||
|
// regular rows
|
||||||
|
let maxLines = 1; |
||||||
|
let maxLinesIdx = -1; |
||||||
|
let maxLinesText = ''; |
||||||
|
|
||||||
|
for (let i = 0; i < columnWidths.length; i++) { |
||||||
|
if (wrappedColIdxs[i]) { |
||||||
|
const cellTextRaw = fields[i].values[row.__index]; |
||||||
|
if (cellTextRaw != null) { |
||||||
|
const cellText = String(cellTextRaw); |
||||||
|
const charsPerLine = wrapWidths[i] / avgCharWidth; |
||||||
|
const approxLines = cellText.length / charsPerLine; |
||||||
|
|
||||||
|
if (approxLines > maxLines) { |
||||||
|
maxLines = approxLines; |
||||||
|
maxLinesIdx = i; |
||||||
|
maxLinesText = cellText; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (maxLinesIdx === -1) { |
||||||
|
return defaultRowHeight; |
||||||
|
} |
||||||
|
|
||||||
|
return calc(maxLinesText, wrapWidths[maxLinesIdx]); |
||||||
|
}; |
||||||
|
}, [ |
||||||
|
avgCharWidth, |
||||||
|
columnWidths, |
||||||
|
ctx, |
||||||
|
defaultRowHeight, |
||||||
|
expandedRows, |
||||||
|
fields, |
||||||
|
hasNestedFrames, |
||||||
|
hasWrappedCols, |
||||||
|
wrappedColIdxs, |
||||||
|
]); |
||||||
|
|
||||||
|
return rowHeight; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* react-data-grid is a little unwieldy when it comes to column resize events. |
||||||
|
* we want to detect a few different column resize signals: |
||||||
|
* - dragging the handle (only want to dispatch when handle is released) |
||||||
|
* - double-clicking the handle (sets the column to the minimum width to fit content) |
||||||
|
* `onColumnResize` dispatches events throughout a dragged resize, and `onColumnWidthsChanged` doesn't |
||||||
|
* emit an event when double-click resizing occurs, so we have to build something custom on top of these |
||||||
|
* behaviors in order to get everything working. |
||||||
|
*/ |
||||||
|
interface UseColumnResizeState { |
||||||
|
columnKey: string | undefined; |
||||||
|
width: number; |
||||||
|
} |
||||||
|
|
||||||
|
const INITIAL_COL_RESIZE_STATE = Object.freeze({ columnKey: undefined, width: 0 }) satisfies UseColumnResizeState; |
||||||
|
|
||||||
|
export function useColumnResize( |
||||||
|
onColumnResize: TableColumnResizeActionCallback = () => {} |
||||||
|
): DataGridProps<TableRow, TableSummaryRow>['onColumnResize'] { |
||||||
|
// these must be refs. if we used setState, we would run into race conditions with these event listeners
|
||||||
|
const colResizeState = useRef<UseColumnResizeState>({ ...INITIAL_COL_RESIZE_STATE }); |
||||||
|
const pointerIsDown = useRef(false); |
||||||
|
|
||||||
|
// to detect whether we got a double-click resize, we track whether the pointer is currently down
|
||||||
|
useLayoutEffect(() => { |
||||||
|
function pointerDown(_event: PointerEvent) { |
||||||
|
pointerIsDown.current = true; |
||||||
|
} |
||||||
|
|
||||||
|
function pointerUp(_event: PointerEvent) { |
||||||
|
pointerIsDown.current = false; |
||||||
|
} |
||||||
|
|
||||||
|
window.addEventListener('pointerdown', pointerDown); |
||||||
|
window.addEventListener('pointerup', pointerUp); |
||||||
|
|
||||||
|
return () => { |
||||||
|
window.removeEventListener('pointerdown', pointerDown); |
||||||
|
window.removeEventListener('pointerup', pointerUp); |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
const dispatchEvent = useCallback(() => { |
||||||
|
if (colResizeState.current.columnKey) { |
||||||
|
onColumnResize(colResizeState.current.columnKey, Math.floor(colResizeState.current.width)); |
||||||
|
colResizeState.current = { ...INITIAL_COL_RESIZE_STATE }; |
||||||
|
} |
||||||
|
window.removeEventListener('click', dispatchEvent, { capture: true }); |
||||||
|
}, [onColumnResize]); |
||||||
|
|
||||||
|
// this is the callback that gets passed to react-data-grid
|
||||||
|
const dataGridResizeHandler = useCallback( |
||||||
|
(column: Column<TableRow, TableSummaryRow>, width: number) => { |
||||||
|
if (!colResizeState.current.columnKey) { |
||||||
|
window.addEventListener('click', dispatchEvent, { capture: true }); |
||||||
|
} |
||||||
|
|
||||||
|
colResizeState.current.columnKey = column.key; |
||||||
|
colResizeState.current.width = width; |
||||||
|
|
||||||
|
// when double clicking to resize, this handler will fire, but the pointer will not be down,
|
||||||
|
// meaning that we should immediately flush the new width
|
||||||
|
if (!pointerIsDown.current) { |
||||||
|
dispatchEvent(); |
||||||
|
} |
||||||
|
}, |
||||||
|
[dispatchEvent] |
||||||
|
); |
||||||
|
|
||||||
|
return dataGridResizeHandler; |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue