@gravity-ui/querieskit 1.2.0 → 1.3.0

package/src/modules/QueryStatistics/QueryStatistics.tsx

@@ -0,0 +1,125 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import cn from 'bem-cn-lite';
+
+import {useDebouncedValue} from '../../helpers/useDebouncedValue';
+import type {QueryStatisticsColumn, QueryStatisticsProps} from '../../types/queryStatistics';
+import {
+    collectQueryStatisticsGroupIds,
+    filterQueryStatistics,
+    flattenQueryStatistics,
+} from './helpers';
+import {QueryStatisticsTable} from './internal/QueryStatisticsTable';
+import {QueryStatisticsToolbar} from './internal/QueryStatisticsToolbar';
+
+import './QueryStatistics.scss';
+
+const block = cn('qp-query-statistics');
+const DEFAULT_VISIBLE_COLUMNS: QueryStatisticsColumn[] = ['min', 'max', 'avg', 'sum', 'count'];
+const DEFAULT_SEARCH_DEBOUNCE_MS = 500;
+
+function setsEqual(left: Set<string>, right: Set<string>) {
+    return left.size === right.size && Array.from(left).every((value) => right.has(value));
+}
+
+export function QueryStatistics({
+    data,
+    visibleColumns = DEFAULT_VISIBLE_COLUMNS,
+    columnConfig,
+    extraColumns,
+    className,
+    virtual = false,
+    fixedHeader = false,
+    formatValue,
+    search: controlledSearch,
+    defaultSearch = '',
+    onSearchUpdate,
+    expandedIds: controlledExpandedIds,
+    defaultExpandedIds,
+    onExpandedIdsChange,
+    searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS,
+}: QueryStatisticsProps) {
+    const groupIds = useMemo(() => collectQueryStatisticsGroupIds(data), [data]);
+    const knownGroupIdsRef = useRef(new Set(groupIds));
+    const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState(
+        () => new Set(defaultExpandedIds ?? groupIds),
+    );
+    const [uncontrolledSearch, setUncontrolledSearch] = useState(defaultSearch);
+    const search = controlledSearch ?? uncontrolledSearch;
+    const expandedIds = useMemo(
+        () => new Set(controlledExpandedIds ?? uncontrolledExpandedIds),
+        [controlledExpandedIds, uncontrolledExpandedIds],
+    );
+    const debouncedSearch = useDebouncedValue(search, searchDebounceMs);
+
+    const updateSearch = useCallback(
+        (value: string) => {
+            if (controlledSearch === undefined) setUncontrolledSearch(value);
+            onSearchUpdate?.(value);
+        },
+        [controlledSearch, onSearchUpdate],
+    );
+    const updateExpandedIds = useCallback(
+        (next: Set<string>) => {
+            if (controlledExpandedIds === undefined) setUncontrolledExpandedIds(next);
+            onExpandedIdsChange?.(Array.from(next));
+        },
+        [controlledExpandedIds, onExpandedIdsChange],
+    );
+
+    useEffect(() => {
+        const currentGroupIds = new Set(groupIds);
+        const previousGroupIds = knownGroupIdsRef.current;
+        const next = new Set(Array.from(expandedIds).filter((id) => currentGroupIds.has(id)));
+        groupIds.forEach((id) => {
+            if (!previousGroupIds.has(id)) next.add(id);
+        });
+        if (!setsEqual(expandedIds, next)) updateExpandedIds(next);
+        knownGroupIdsRef.current = currentGroupIds;
+    }, [expandedIds, groupIds, updateExpandedIds]);
+
+    const filtered = useMemo(
+        () => filterQueryStatistics(data, debouncedSearch),
+        [data, debouncedSearch],
+    );
+    const effectiveExpandedIds = useMemo(
+        () => new Set([...expandedIds, ...filtered.forcedExpandedIds]),
+        [expandedIds, filtered.forcedExpandedIds],
+    );
+    const rows = useMemo(
+        () => flattenQueryStatistics(filtered.data, effectiveExpandedIds),
+        [effectiveExpandedIds, filtered.data],
+    );
+    const toggleGroup = useCallback(
+        (id: string) => {
+            const next = new Set(expandedIds);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            updateExpandedIds(next);
+        },
+        [expandedIds, updateExpandedIds],
+    );
+
+    return (
+        <div className={block(null, className)}>
+            <QueryStatisticsToolbar
+                search={search}
+                hasGroups={Boolean(groupIds.length)}
+                onSearchUpdate={updateSearch}
+                onExpandAll={() => updateExpandedIds(new Set(groupIds))}
+                onCollapseAll={() => updateExpandedIds(new Set())}
+            />
+            <QueryStatisticsTable
+                rows={rows}
+                visibleColumns={visibleColumns}
+                columnConfig={columnConfig}
+                extraColumns={extraColumns}
+                expandedIds={effectiveExpandedIds}
+                fixedHeader={fixedHeader}
+                virtual={virtual}
+                formatValue={formatValue}
+                isSearching={Boolean(search)}
+                onToggleGroup={toggleGroup}
+            />
+        </div>
+    );
+}

package/src/modules/QueryStatistics/helpers.ts

@@ -0,0 +1,96 @@
+import type {
+    QueryStatisticsGroup,
+    QueryStatisticsItem,
+    QueryStatisticsMetric,
+} from '../../types/queryStatistics';
+
+export type QueryStatisticsRow = {item: QueryStatisticsItem; level: number};
+
+export type FilterQueryStatisticsResult = {
+    data: QueryStatisticsItem[];
+    forcedExpandedIds: Set<string>;
+};
+
+export function isQueryStatisticsGroup(item: QueryStatisticsItem): item is QueryStatisticsGroup {
+    return Array.isArray(item.children);
+}
+
+export function isQueryStatisticsMetric(item: QueryStatisticsItem): item is QueryStatisticsMetric {
+    return !isQueryStatisticsGroup(item);
+}
+
+export function getQueryStatisticsValue(
+    item: QueryStatisticsMetric,
+    column: keyof QueryStatisticsMetric['values'],
+) {
+    if (column !== 'avg' || item.values.avg !== undefined) {
+        return item.values[column];
+    }
+
+    const {count, sum} = item.values;
+    return count === undefined || count === 0 || sum === undefined ? undefined : sum / count;
+}
+
+export function collectQueryStatisticsGroupIds(data: QueryStatisticsItem[]): string[] {
+    return data.flatMap((item) =>
+        isQueryStatisticsGroup(item) && item.children.length > 0
+            ? [item.id, ...collectQueryStatisticsGroupIds(item.children)]
+            : [],
+    );
+}
+
+function addSubtreeGroupIds(item: QueryStatisticsGroup, target: Set<string>) {
+    if (item.children.length > 0) {
+        target.add(item.id);
+    }
+    item.children.forEach((child) => {
+        if (isQueryStatisticsGroup(child)) {
+            addSubtreeGroupIds(child, target);
+        }
+    });
+}
+
+function matchesSearch(item: QueryStatisticsItem, search: string) {
+    return [item.name, item.description, item.unit]
+        .filter(Boolean)
+        .some((value) => value?.toLocaleLowerCase().includes(search));
+}
+
+export function filterQueryStatistics(
+    data: QueryStatisticsItem[],
+    search: string,
+): FilterQueryStatisticsResult {
+    const normalizedSearch = search.trim().toLocaleLowerCase();
+    if (!normalizedSearch) return {data, forcedExpandedIds: new Set()};
+
+    const forcedExpandedIds = new Set<string>();
+    const filterItems = (items: QueryStatisticsItem[]): QueryStatisticsItem[] =>
+        items.flatMap<QueryStatisticsItem>((item) => {
+            if (!isQueryStatisticsGroup(item)) {
+                return matchesSearch(item, normalizedSearch) ? [item] : [];
+            }
+            if (matchesSearch(item, normalizedSearch)) {
+                addSubtreeGroupIds(item, forcedExpandedIds);
+                return [item];
+            }
+            const children = filterItems(item.children);
+            if (!children.length) return [];
+            if (item.children.length > 0) forcedExpandedIds.add(item.id);
+            return [{...item, children}];
+        });
+
+    return {data: filterItems(data), forcedExpandedIds};
+}
+
+export function flattenQueryStatistics(
+    data: QueryStatisticsItem[],
+    expandedIds: Set<string>,
+    level = 0,
+): QueryStatisticsRow[] {
+    return data.flatMap((item) => [
+        {item, level},
+        ...(isQueryStatisticsGroup(item) && expandedIds.has(item.id)
+            ? flattenQueryStatistics(item.children, expandedIds, level + 1)
+            : []),
+    ]);
+}

package/src/modules/QueryStatistics/i18n/dicts.ts

@@ -0,0 +1,4 @@
+import en from './en.json';
+import ru from './ru.json';
+
+export default {en, ru};

package/src/modules/QueryStatistics/i18n/en.json

@@ -0,0 +1,16 @@
+{
+  "action_collapse-all": "Collapse all",
+  "action_collapse-group": "Collapse group",
+  "action_expand-all": "Expand all",
+  "action_expand-group": "Expand group",
+  "field_avg": "Avg",
+  "field_count": "Count",
+  "field_description": "Description",
+  "field_last": "Last",
+  "field_max": "Max",
+  "field_metric": "Metric",
+  "field_min": "Min",
+  "field_search": "Search",
+  "field_sum": "Sum",
+  "field_unit": "Unit"
+}

package/src/modules/QueryStatistics/i18n/index.ts

@@ -0,0 +1,4 @@
+import {addI18Keysets} from '../../../i18n';
+import dicts from './dicts';
+
+export default addI18Keysets('qp:query-statistics', dicts);

package/src/modules/QueryStatistics/i18n/ru.json

@@ -0,0 +1,16 @@
+{
+  "action_collapse-all": "Свернуть все",
+  "action_collapse-group": "Свернуть группу",
+  "action_expand-all": "Развернуть все",
+  "action_expand-group": "Развернуть группу",
+  "field_avg": "Среднее",
+  "field_count": "Количество",
+  "field_description": "Описание",
+  "field_last": "Последнее",
+  "field_max": "Максимум",
+  "field_metric": "Метрика",
+  "field_min": "Минимум",
+  "field_search": "Поиск",
+  "field_sum": "Сумма",
+  "field_unit": "Единица измерения"
+}

package/src/modules/QueryStatistics/index.ts

@@ -0,0 +1,13 @@
+export {QueryStatistics} from './QueryStatistics';
+export type {
+    QueryStatisticsColumn,
+    QueryStatisticsColumnConfig,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsExtraColumnContext,
+    QueryStatisticsFormatValueContext,
+    QueryStatisticsGroup,
+    QueryStatisticsItem,
+    QueryStatisticsMetric,
+    QueryStatisticsProps,
+    QueryStatisticsValues,
+} from '../../types/queryStatistics';

package/src/modules/QueryStatistics/internal/MetricCell.scss

@@ -0,0 +1,12 @@
+.qp-query-statistics-metric-cell {
+    &__indent { display: inline-flex; flex-shrink: 0; }
+    &__indent-step { width: var(--g-spacing-10); flex-shrink: 0; }
+    &__row-button,
+    &__row-icon,
+    &__info-icon { flex-shrink: 0; }
+    &__name { min-width: 0; white-space: nowrap; }
+    &__info-icon { margin-inline-start: var(--g-spacing-1); color: var(--g-color-text-secondary); vertical-align: text-bottom; }
+    &__tooltip { display: grid; gap: var(--g-spacing-2); max-width: 24rem; }
+    &__tooltip-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--g-spacing-2); }
+    &__tooltip-label { color: var(--g-color-text-secondary); }
+}

package/src/modules/QueryStatistics/internal/MetricCell.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+    ChartLine,
+    ChevronDown,
+    ChevronRight,
+    CircleQuestion,
+    FolderArrowRight,
+} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Tooltip} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import type {QueryStatisticsItem} from '../../../types/queryStatistics';
+import {type QueryStatisticsRow, isQueryStatisticsGroup} from '../helpers';
+import i18n from '../i18n';
+
+import './MetricCell.scss';
+
+const block = cn('qp-query-statistics-metric-cell');
+
+function MetricInfo({item}: {item: QueryStatisticsItem}) {
+    const hasInfo = Boolean(item.description || item.unit);
+    const content = (
+        <span className={block('name')} tabIndex={hasInfo ? 0 : undefined}>
+            {item.name}
+            {hasInfo && <Icon data={CircleQuestion} size={14} className={block('info-icon')} />}
+        </span>
+    );
+
+    if (!hasInfo) return content;
+
+    return <Tooltip content={<MetricTooltip item={item} />}>{content}</Tooltip>;
+}
+
+function MetricTooltip({item}: {item: QueryStatisticsItem}) {
+    return (
+        <span className={block('tooltip')}>
+            {item.description && (
+                <span className={block('tooltip-row')}>
+                    <span className={block('tooltip-label')}>{i18n('field_description')}</span>
+                    <span>{item.description}</span>
+                </span>
+            )}
+            {item.unit && (
+                <span className={block('tooltip-row')}>
+                    <span className={block('tooltip-label')}>{i18n('field_unit')}</span>
+                    <span>{item.unit}</span>
+                </span>
+            )}
+        </span>
+    );
+}
+
+function Indent({level}: {level: number}) {
+    if (!level) return null;
+    return (
+        <span className={block('indent')} aria-hidden="true">
+            {Array.from({length: level}, (_, index) => (
+                <span className={block('indent-step')} key={index} />
+            ))}
+        </span>
+    );
+}
+
+export type MetricCellProps = {
+    row: QueryStatisticsRow;
+    expanded: boolean;
+    onToggle: (id: string) => void;
+};
+
+export function MetricCell({row, expanded, onToggle}: MetricCellProps) {
+    const {item, level} = row;
+    const isGroup = isQueryStatisticsGroup(item);
+
+    return (
+        <Flex alignItems="center" gap={2} className={block()}>
+            <Indent level={level} />
+            {isGroup ? (
+                <React.Fragment>
+                    <Button
+                        view="flat"
+                        size="xs"
+                        aria-label={
+                            expanded ? i18n('action_collapse-group') : i18n('action_expand-group')
+                        }
+                        aria-expanded={expanded}
+                        onClick={() => onToggle(item.id)}
+                        className={block('row-button')}
+                    >
+                        <Icon data={expanded ? ChevronDown : ChevronRight} size={16} />
+                    </Button>
+                    <Icon data={FolderArrowRight} size={16} className={block('row-icon')} />
+                </React.Fragment>
+            ) : (
+                <Icon data={ChartLine} size={16} className={block('row-icon')} />
+            )}
+            <MetricInfo item={item} />
+        </Flex>
+    );
+}

package/src/modules/QueryStatistics/internal/QueryStatisticsTable.scss

@@ -0,0 +1,8 @@
+.qp-query-statistics-table { max-width: 100%; overflow-x: auto;
+    &_fixed { overflow: visible; }
+    .qp-data-table { min-width: 55rem; }
+    &__metric-column,
+    &__value-column { border: 0; border-block-end: 1px solid var(--g-color-line-generic); }
+    &__metric-column { min-width: 19rem; }
+    &__value-column { min-width: 8rem; }
+}

package/src/modules/QueryStatistics/internal/QueryStatisticsTable.tsx

@@ -0,0 +1,135 @@
+import React, {useMemo} from 'react';
+import BaseDataTable, {type Column} from '@gravity-ui/react-data-table';
+import {DataTable} from '../../../components';
+import type {
+    QueryStatisticsColumn,
+    QueryStatisticsExtraColumn,
+    QueryStatisticsFormatValueContext,
+} from '../../../types/queryStatistics';
+import {
+    type QueryStatisticsRow,
+    getQueryStatisticsValue,
+    isQueryStatisticsGroup,
+    isQueryStatisticsMetric,
+} from '../helpers';
+import i18n from '../i18n';
+import {MetricCell} from './MetricCell';
+
+import './QueryStatisticsTable.scss';
+
+const NO_VALUE = '—';
+const block = 'qp-query-statistics-table';
+const COLUMN_TITLES: Record<QueryStatisticsColumn, () => string> = {
+    min: () => i18n('field_min'),
+    max: () => i18n('field_max'),
+    avg: () => i18n('field_avg'),
+    sum: () => i18n('field_sum'),
+    count: () => i18n('field_count'),
+    last: () => i18n('field_last'),
+};
+
+export type QueryStatisticsTableProps = {
+    rows: QueryStatisticsRow[];
+    visibleColumns: QueryStatisticsColumn[];
+    columnConfig?: Partial<
+        Record<QueryStatisticsColumn, {title?: React.ReactNode; width?: string}>
+    >;
+    extraColumns?: QueryStatisticsExtraColumn[];
+    expandedIds: Set<string>;
+    fixedHeader: boolean;
+    virtual: boolean;
+    formatValue?: (
+        value: number | undefined,
+        context: QueryStatisticsFormatValueContext,
+    ) => React.ReactNode;
+    isSearching: boolean;
+    onToggleGroup: (id: string) => void;
+};
+
+export function QueryStatisticsTable({
+    rows,
+    visibleColumns,
+    columnConfig,
+    extraColumns,
+    expandedIds,
+    fixedHeader,
+    virtual,
+    formatValue,
+    isSearching,
+    onToggleGroup,
+}: QueryStatisticsTableProps) {
+    const numberFormatter = useMemo(
+        () => new Intl.NumberFormat(undefined, {maximumFractionDigits: 6}),
+        [],
+    );
+    const columns = useMemo<Array<Column<QueryStatisticsRow>>>(() => {
+        const metricColumn: Column<QueryStatisticsRow> = {
+            name: 'metric',
+            header: i18n('field_metric'),
+            className: `${block}__metric-column`,
+            width: '40%',
+            sortable: false,
+            render: ({row}) => (
+                <MetricCell
+                    row={row}
+                    expanded={isQueryStatisticsGroup(row.item) && expandedIds.has(row.item.id)}
+                    onToggle={onToggleGroup}
+                />
+            ),
+        };
+        const valueColumns = visibleColumns.map<Column<QueryStatisticsRow>>((column) => ({
+            name: column,
+            header: columnConfig?.[column]?.title ?? COLUMN_TITLES[column](),
+            className: `${block}__value-column`,
+            width: columnConfig?.[column]?.width ?? '12%',
+            align: BaseDataTable.RIGHT,
+            sortable: false,
+            render: ({row}) => {
+                if (!isQueryStatisticsMetric(row.item)) return NO_VALUE;
+                const value = getQueryStatisticsValue(row.item, column);
+                if (formatValue) return formatValue(value, {column, item: row.item});
+                return value === undefined || !Number.isFinite(value)
+                    ? NO_VALUE
+                    : numberFormatter.format(value);
+            },
+        }));
+        const customColumns = (extraColumns ?? []).map<Column<QueryStatisticsRow>>((column) => ({
+            name: column.id,
+            header: column.title,
+            width: column.width ?? '12%',
+            className: `${block}__value-column`,
+            sortable: false,
+            render: ({row}) => column.render({item: row.item, level: row.level}),
+        }));
+        return [metricColumn, ...valueColumns, ...customColumns];
+    }, [
+        columnConfig,
+        expandedIds,
+        extraColumns,
+        formatValue,
+        numberFormatter,
+        onToggleGroup,
+        visibleColumns,
+    ]);
+
+    return (
+        <div className={block + (fixedHeader ? ` ${block}_fixed` : '')}>
+            <DataTable<QueryStatisticsRow>
+                columns={columns}
+                data={rows}
+                loaded
+                emptyVariant={isSearching ? 'nothing-found' : 'no-data'}
+                rowKey={(row) => row.item.id}
+                settings={{
+                    displayIndices: false,
+                    sortable: false,
+                    stripedRows: false,
+                    dynamicRender: virtual,
+                    dynamicRenderType: 'uniform',
+                    stickyHead: fixedHeader ? BaseDataTable.MOVING : undefined,
+                    syncHeadOnResize: fixedHeader,
+                }}
+            />
+        </div>
+    );
+}

package/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.scss

@@ -0,0 +1 @@
+.qp-query-statistics-toolbar { margin-block-end: var(--g-spacing-4); max-width: 34rem; }

package/src/modules/QueryStatistics/internal/QueryStatisticsToolbar.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {ChevronsDown, ChevronsUp} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import cn from 'bem-cn-lite';
+
+import {SearchWithButtons} from '../../../components';
+import i18n from '../i18n';
+
+import './QueryStatisticsToolbar.scss';
+
+const block = cn('qp-query-statistics-toolbar');
+
+export type QueryStatisticsToolbarProps = {
+    search: string;
+    hasGroups: boolean;
+    onSearchUpdate: (value: string) => void;
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+};
+
+export function QueryStatisticsToolbar({
+    search,
+    hasGroups,
+    onSearchUpdate,
+    onExpandAll,
+    onCollapseAll,
+}: QueryStatisticsToolbarProps) {
+    const buttons = [
+        <Button
+            key="expand"
+            size="m"
+            aria-label={i18n('action_expand-all')}
+            title={i18n('action_expand-all')}
+            disabled={!hasGroups}
+            onClick={onExpandAll}
+        >
+            <Icon data={ChevronsDown} size={16} />
+        </Button>,
+        <Button
+            key="collapse"
+            size="m"
+            aria-label={i18n('action_collapse-all')}
+            title={i18n('action_collapse-all')}
+            disabled={!hasGroups}
+            onClick={onCollapseAll}
+        >
+            <Icon data={ChevronsUp} size={16} />
+        </Button>,
+    ];
+
+    return (
+        <SearchWithButtons
+            value={search}
+            placeholder={i18n('field_search')}
+            hasClear
+            onUpdate={onSearchUpdate}
+            endButtons={buttons}
+            className={block()}
+        />
+    );
+}

package/src/modules/QueryStatistics/story/QueryStatistics.stories.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import type {QueryStatisticsItem} from '../../../types/queryStatistics';
+import {QueryStatistics} from '../QueryStatistics';
+
+const data: QueryStatisticsItem[] = [
+    {
+        id: 'input',
+        name: 'Input',
+        children: [
+            {
+                id: 'input.rows',
+                name: 'Rows',
+                description: 'Number of rows read from the input',
+                values: {min: 0, max: 1600, sum: 4200, count: 4, last: 1400},
+            },
+            {
+                id: 'input.weight',
+                name: 'Data weight',
+                unit: 'bytes',
+                values: {min: 1024, max: 1048576, avg: 120000.25, sum: 2097152, count: 4},
+            },
+        ],
+    },
+];
+
+const largeData: QueryStatisticsItem[] = Array.from({length: 12}, (_group, groupIndex) => ({
+    id: `group-${groupIndex}`,
+    name: `Group ${groupIndex + 1} with a deliberately long name for horizontal scrolling`,
+    children: Array.from({length: 25}, (_metric, metricIndex) => ({
+        id: `group-${groupIndex}.metric-${metricIndex}`,
+        name: `Metric ${metricIndex + 1}`,
+        values: {
+            min: metricIndex,
+            max: metricIndex * 10,
+            sum: metricIndex * 100,
+            count: metricIndex + 1,
+            last: metricIndex * 5,
+        },
+    })),
+}));
+
+const meta: Meta<typeof QueryStatistics> = {
+    title: 'Modules/QueryStatistics',
+    component: QueryStatistics,
+    tags: ['autodocs'],
+    args: {data},
+};
+
+export default meta;
+type Story = StoryObj<typeof QueryStatistics>;
+
+export const Default: Story = {};
+
+export const ConfiguredColumns: Story = {
+    args: {
+        visibleColumns: ['last', 'avg', 'count'],
+        columnConfig: {last: {title: 'Latest value', width: '20%'}},
+        extraColumns: [{id: 'unit', title: 'Unit', render: ({item}) => item.unit ?? '—'}],
+    },
+};
+
+export const VirtualAndFixed: Story = {
+    args: {data: largeData, virtual: true, fixedHeader: true},
+    render: (args) => (
+        <div style={{height: 360, maxWidth: 1100, overflow: 'auto'}}>
+            <QueryStatistics {...args} />
+        </div>
+    ),
+};