Skip to content

Commit

Permalink
Merge pull request #2 from davismcphee/fix-default-density-and-row-he…
Browse files Browse the repository at this point in the history
…ight

Fix default grid density and row height passed to `getCellRenderers`
  • Loading branch information
tonyghiani authored Sep 26, 2024
2 parents 456d268 + 9ff0c54 commit 4afb2a0
Show file tree
Hide file tree
Showing 6 changed files with 111 additions and 44 deletions.
3 changes: 3 additions & 0 deletions packages/kbn-unified-data-table/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,6 @@ export {
getRenderCustomToolbarWithElements,
renderCustomToolbar,
} from './src/components/custom_toolbar/render_custom_toolbar';

export { getDataGridDensity } from './src/hooks/use_data_grid_density';
export { getRowHeight } from './src/hooks/use_row_height';
18 changes: 11 additions & 7 deletions packages/kbn-unified-data-table/src/hooks/use_data_grid_density.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,6 @@ interface UseDataGridDensityProps {
onUpdateDataGridDensity?: (density: DataGridDensity) => void;
}

export const DATA_GRID_DENSITY_STORAGE_KEY = 'dataGridDensity';

export function getDensityFromStyle(style: EuiDataGridStyle) {
return style.cellPadding === DATA_GRID_STYLE_COMPACT.cellPadding &&
style.fontSize === DATA_GRID_STYLE_COMPACT.fontSize
Expand All @@ -42,24 +40,30 @@ export function getDensityFromStyle(style: EuiDataGridStyle) {
: DataGridDensity.EXPANDED;
}

const DATA_GRID_DENSITY_STORAGE_KEY = 'dataGridDensity';
const getStorageKey = (consumer: string) => `${consumer}:${DATA_GRID_DENSITY_STORAGE_KEY}`;

export const getDataGridDensity = (storage: Storage, consumer: string): DataGridDensity => {
return storage.get(getStorageKey(consumer)) ?? DataGridDensity.COMPACT;
};

export const useDataGridDensity = ({
storage,
consumer,
dataGridDensityState,
onUpdateDataGridDensity,
}: UseDataGridDensityProps) => {
const storageKey = `${consumer}:${DATA_GRID_DENSITY_STORAGE_KEY}`;
const dataGridDensity = useMemo<DataGridDensity>(() => {
return dataGridDensityState ?? storage.get(storageKey) ?? DataGridDensity.COMPACT;
}, [dataGridDensityState, storage, storageKey]);
return dataGridDensityState ?? getDataGridDensity(storage, consumer);
}, [consumer, dataGridDensityState, storage]);

const onChangeDataGridDensity = useCallback(
(gridStyle: EuiDataGridStyle) => {
const newDensity = getDensityFromStyle(gridStyle);
storage.set(storageKey, newDensity);
storage.set(getStorageKey(consumer), newDensity);
onUpdateDataGridDensity?.(newDensity);
},
[storageKey, storage, onUpdateDataGridDensity]
[storage, consumer, onUpdateDataGridDensity]
);

return {
Expand Down
77 changes: 60 additions & 17 deletions packages/kbn-unified-data-table/src/hooks/use_row_height.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,59 @@ interface UseRowHeightProps {
onUpdateRowHeight?: (rowHeight: number) => void;
}

interface ResolveRowHeightParams {
storage: Storage;
consumer: string;
key: string;
configRowHeight: number;
rowHeightState?: number;
}

const resolveRowHeight = ({
storage,
consumer,
key,
configRowHeight,
rowHeightState,
}: ResolveRowHeightParams): number => {
const rowHeightFromLS = getStoredRowHeight(storage, consumer, key);

const configHasNotChanged = (
localStorageRecord: DataGridOptionsRecord | null
): localStorageRecord is DataGridOptionsRecord =>
localStorageRecord !== null && configRowHeight === localStorageRecord.previousConfigRowHeight;

let currentRowLines: number;
if (isValidRowHeight(rowHeightState)) {
currentRowLines = rowHeightState;
} else if (configHasNotChanged(rowHeightFromLS)) {
currentRowLines = rowHeightFromLS.previousRowHeight;
} else {
currentRowLines = configRowHeight;
}

return currentRowLines;
};

export const ROW_HEIGHT_STORAGE_KEY = 'dataGridRowHeight';

export const getRowHeight = ({
storage,
consumer,
rowHeightState,
configRowHeight,
}: Pick<ResolveRowHeightParams, 'storage' | 'consumer' | 'rowHeightState'> & {
configRowHeight?: number;
}) => {
return resolveRowHeight({
storage,
consumer,
key: ROW_HEIGHT_STORAGE_KEY,
configRowHeight: configRowHeight ?? ROWS_HEIGHT_OPTIONS.default,
rowHeightState,
});
};

export const useRowHeight = ({
storage,
consumer,
Expand All @@ -36,23 +89,13 @@ export const useRowHeight = ({
onUpdateRowHeight,
}: UseRowHeightProps) => {
const rowHeightLines = useMemo(() => {
const rowHeightFromLS = getStoredRowHeight(storage, consumer, key);

const configHasNotChanged = (
localStorageRecord: DataGridOptionsRecord | null
): localStorageRecord is DataGridOptionsRecord =>
localStorageRecord !== null && configRowHeight === localStorageRecord.previousConfigRowHeight;

let currentRowLines: number;
if (isValidRowHeight(rowHeightState)) {
currentRowLines = rowHeightState;
} else if (configHasNotChanged(rowHeightFromLS)) {
currentRowLines = rowHeightFromLS.previousRowHeight;
} else {
currentRowLines = configRowHeight;
}

return currentRowLines;
return resolveRowHeight({
storage,
consumer,
key,
configRowHeight,
rowHeightState,
});
}, [configRowHeight, consumer, key, rowHeightState, storage]);

const rowHeight = useMemo<RowHeightSettingsProps['rowHeight']>(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ import {
SHOW_MULTIFIELDS,
} from '@kbn/discover-utils';
import {
DataGridDensity,
DataLoadingState,
ROWS_HEIGHT_OPTIONS,
UnifiedDataTableProps,
getDataGridDensity,
getRowHeight,
} from '@kbn/unified-data-table';
import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
import { useQuerySubscriber } from '@kbn/unified-field-list';
Expand Down Expand Up @@ -175,16 +175,21 @@ export function ContextAppContent({
[grid, setAppState]
);

const configRowHeight = services.uiSettings.get(ROW_HEIGHT_OPTION);
const getCellRenderersAccessor = useProfileAccessor('getCellRenderers');
const cellRenderers = useMemo(() => {
const getCellRenderers = getCellRenderersAccessor(() => ({}));
return getCellRenderers({
actions: { addFilter },
dataView,
density: DataGridDensity.COMPACT,
rowHeight: ROWS_HEIGHT_OPTIONS.single,
density: getDataGridDensity(services.storage, 'discover'),
rowHeight: getRowHeight({
storage: services.storage,
consumer: 'discover',
configRowHeight,
}),
});
}, [addFilter, dataView, getCellRenderersAccessor]);
}, [addFilter, configRowHeight, dataView, getCellRenderersAccessor, services.storage]);

const dataSource = useMemo(() => createDataSource({ dataView, query: undefined }), [dataView]);
const { filters } = useQuerySubscriber({ data: services.data });
Expand Down Expand Up @@ -259,7 +264,7 @@ export function ContextAppContent({
setExpandedDoc={setExpandedDoc}
onFilter={addFilter}
onSetColumns={onSetColumns}
configRowHeight={services.uiSettings.get(ROW_HEIGHT_OPTION)}
configRowHeight={configRowHeight}
showMultiFields={services.uiSettings.get(SHOW_MULTIFIELDS)}
maxDocFieldsDisplayed={services.uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
renderDocumentView={renderDocumentView}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@ import {
type DataTableColumnsMeta,
getTextBasedColumnsMeta,
getRenderCustomToolbarWithElements,
type DataGridDensity,
DataGridDensity,
UnifiedDataTableProps,
UseColumnsProps,
getDataGridDensity,
getRowHeight,
} from '@kbn/unified-data-table';
import {
DOC_HIDE_TIME_COLUMN_SETTING,
Expand Down Expand Up @@ -307,14 +309,20 @@ function DiscoverDocumentsComponent({
[dataView, onAddColumn, onAddFilter, onRemoveColumn, query, savedSearch.id, setExpandedDoc]
);

const configRowHeight = uiSettings.get(ROW_HEIGHT_OPTION);
const cellRendererParams: CellRenderersExtensionParams = useMemo(
() => ({
actions: { addFilter: onAddFilter },
dataView,
density,
rowHeight,
density: density ?? getDataGridDensity(services.storage, 'discover'),
rowHeight: getRowHeight({
storage: services.storage,
consumer: 'discover',
rowHeightState: rowHeight,
configRowHeight,
}),
}),
[onAddFilter, dataView, density, rowHeight]
[onAddFilter, dataView, density, services.storage, rowHeight, configRowHeight]
);

const { rowAdditionalLeadingControls } = useDiscoverCustomization('data_table') || {};
Expand Down Expand Up @@ -469,7 +477,7 @@ function DiscoverDocumentsComponent({
sampleSizeState={getAllowedSampleSize(sampleSizeState, services.uiSettings)}
onUpdateSampleSize={!isEsqlMode ? onUpdateSampleSize : undefined}
onFieldEdited={onFieldEdited}
configRowHeight={uiSettings.get(ROW_HEIGHT_OPTION)}
configRowHeight={configRowHeight}
showMultiFields={uiSettings.get(SHOW_MULTIFIELDS)}
maxDocFieldsDisplayed={uiSettings.get(MAX_DOC_FIELDS_DISPLAYED)}
renderDocumentView={renderDocumentView}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
type DataTableColumnsMeta,
DataLoadingState as DiscoverGridLoadingState,
getRenderCustomToolbarWithElements,
getDataGridDensity,
getRowHeight,
} from '@kbn/unified-data-table';
import { DiscoverGrid } from '../../components/discover_grid';
import './saved_search_grid.scss';
Expand All @@ -25,8 +27,7 @@ import { SavedSearchEmbeddableBase } from './saved_search_embeddable_base';
import { TotalDocuments } from '../../application/main/components/total_documents/total_documents';
import { useProfileAccessor } from '../../context_awareness';

export interface DiscoverGridEmbeddableProps
extends Omit<UnifiedDataTableProps, 'sampleSizeState'> {
interface DiscoverGridEmbeddableProps extends Omit<UnifiedDataTableProps, 'sampleSizeState'> {
sampleSizeState: number; // a required prop
totalHitCount?: number;
query?: AggregateQuery | Query;
Expand All @@ -36,11 +37,6 @@ export interface DiscoverGridEmbeddableProps
savedSearchId?: string;
}

export type DiscoverGridEmbeddableSearchProps = Omit<
DiscoverGridEmbeddableProps,
'sampleSizeState' | 'loadingState' | 'query'
>;

export const DiscoverGridMemoized = React.memo(DiscoverGrid);

export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
Expand Down Expand Up @@ -98,13 +94,21 @@ export function DiscoverGridEmbeddable(props: DiscoverGridEmbeddableProps) {
return getCellRenderers({
actions: { addFilter: props.onFilter },
dataView: props.dataView,
density: gridProps.dataGridDensityState,
rowHeight: gridProps.rowHeightState,
density:
gridProps.dataGridDensityState ?? getDataGridDensity(props.services.storage, 'discover'),
rowHeight: getRowHeight({
storage: props.services.storage,
consumer: 'discover',
rowHeightState: gridProps.rowHeightState,
configRowHeight: props.configRowHeight,
}),
});
}, [
getCellRenderersAccessor,
props.onFilter,
props.dataView,
props.services.storage,
props.configRowHeight,
gridProps.dataGridDensityState,
gridProps.rowHeightState,
]);
Expand Down

0 comments on commit 4afb2a0

Please sign in to comment.