@gravity-ui/querieskit 1.1.0 → 1.3.0

package/src/modules/HistoryRow/HistoryRow.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
-import {QueryHistoryRow, QueryHistoryRowRenderData} from '../../types/history';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
 import {Flex, Text} from '@gravity-ui/uikit';
 import './HistoryRow.scss';
 import cn from 'bem-cn-lite';
-import {HistoryPrivateIcon, QueryDuration, QueryStatusIcon, RowLink} from '../../components';
+import {
+    EditableRowTitle,
+    HistoryPrivateIcon,
+    QueryDuration,
+    QueryStatusIcon,
+    RowActionsMenu,
+    RowLink,
+} from '../../components';
 import {formatTime} from '../../helpers/time';
 import {isFieldVisible} from '../../helpers/isFieldVisible';
-import {HistoryRowTitle} from './HistoryRowTitle';
-import {HistoryRowMenu} from './HistoryRowMenu';
 
 export type Props<T extends QueryHistoryRow> = {
     item: T;
-} & Omit<QueryHistoryRowRenderData<T>, 'item' | 'variant'>;
+} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
 
 const block = cn('qp-history-row');
 
@@ -38,8 +44,8 @@ export const HistoryRow = <T extends QueryHistoryRow>({
             <QueryStatusIcon status={status} />
             <Flex direction="column" gap={1} className={block('right-column')}>
                 <Flex justifyContent="space-between" className={block('header')}>
-                    <HistoryRowTitle item={item} editing={editing} />
-                    {showMenu && <HistoryRowMenu item={item} actions={actions} />}
+                    <EditableRowTitle item={item} editing={editing} />
+                    {showMenu && <RowActionsMenu item={item} actions={actions} />}
                 </Flex>
                 <div className={block('data')}>
                     {isFieldVisible(visibleFields, 'duration') && startTime && (

package/src/modules/HistorySearchRow/HistorySearchRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {Flex, Text} from '@gravity-ui/uikit';
-import {QueryHistoryRow, QueryHistoryRowRenderData} from '../../types/history';
+import {QueryListRowRenderData} from '../../types/queryList';
+import {QueryHistoryRow} from '../../types/history';
 import {
     HistoryPrivateIcon,
     QueryDuration,
@@ -17,7 +18,7 @@ const block = cn('qp-history-search-row');
 
 export type Props<T extends QueryHistoryRow> = {
     item: T;
-} & Omit<QueryHistoryRowRenderData<T>, 'item' | 'variant'>;
+} & Omit<QueryListRowRenderData<T>, 'item' | 'variant'>;
 
 export const HistorySearchRow = <T extends QueryHistoryRow>({
     item,

package/src/modules/NavigationItemsList/internal/NavigationItemsListHeader.tsx

@@ -28,11 +28,7 @@ export const NavigationItemsListHeader: FC<NavigationItemsListHeaderProps> = ({
     className,
 }) => {
     if (!onSortUpdate) {
-        return (
-            <Flex alignItems="center" className={block(null, className)}>
-                <Text>{titleLabel}</Text>
-            </Flex>
-        );
+        return null;
     }
 
     const handleClick = () => {

package/src/modules/NavigationPreview/NavigationPreview.scss

@@ -1,24 +1,32 @@
 .qp-navigation-preview {
-  --data-table-border-color: var(--g-color-line-generic);
+    --data-table-border-color: var(--g-color-line-generic);
 
-  min-width: 0;
+    min-width: 0;
 
-  &__error {
-    display: block;
-  }
+    &__error {
+        display: block;
+    }
 
-  &__table {
-    overflow-x: auto;
-  }
+    &__table {
+        overflow-x: auto;
+    }
 
-  .data-table__row,
-  .data-table__head {
-    height: 40px;
-  }
+    .data-table__row,
+    .data-table__head-row {
+        height: 40px;
+    }
 
-  .data-table__th,
-  .data-table__td {
-    border-width: 0 0 1px;
-    vertical-align: middle;
-  }
+    .data-table__box_sticky-head_moving .data-table__head-row {
+        height: auto;
+    }
+
+    .data-table__sticky_head .data-table__head-row {
+        height: 40px;
+    }
+
+    .data-table__th,
+    .data-table__td {
+        border-width: 0 0 1px;
+        vertical-align: middle;
+    }
 }

package/src/modules/NavigationPreview/NavigationPreview.tsx

@@ -1,9 +1,15 @@
 import React, {useMemo} from 'react';
 import {Flex, Text} from '@gravity-ui/uikit';
 import cn from 'bem-cn-lite';
-import {type Column, DataTable, FieldsSearchToolbar} from '../../components';
+import {type Column, DataTable, FieldsSearchToolbar, QueryResultsTable} from '../../components';
 import {useVisibleColumns} from '../../helpers/useVisibleColumns';
-import type {NavigationPreviewConfig, NavigationPreviewRow} from '../../types/navigation';
+import type {
+    NavigationPreviewColumn,
+    NavigationPreviewConfig,
+    NavigationPreviewFormatterConfig,
+    NavigationPreviewRow,
+} from '../../types/navigation';
+import type {QueryResultColumn} from '../../types/queryResults';
 import {buildPreviewColumns} from './helpers/buildPreviewColumns';
 import {filterPreviewRows} from './helpers/filterPreviewRows';
 import i18n from './i18n';
@@ -12,7 +18,7 @@ import './NavigationPreview.scss';
 const block = cn('qp-navigation-preview');
 
 export type NavigationPreviewViewConfig<TRow extends NavigationPreviewRow = NavigationPreviewRow> =
-    {
+    NavigationPreviewFormatterConfig & {
         tableColumns?: Array<Column<TRow>>;
         extraColumns?: Array<Column<TRow>>;
     };
@@ -31,6 +37,16 @@ export type NavigationPreviewProps<TRow extends NavigationPreviewRow = Navigatio
     className?: string;
 };
 
+function getColumnName<TRow extends NavigationPreviewRow>(column: NavigationPreviewColumn<TRow>) {
+    return typeof column === 'string' ? column : column.name;
+}
+
+function isQueryResultColumn<TRow extends NavigationPreviewRow>(
+    column: NavigationPreviewColumn<TRow>,
+): column is QueryResultColumn<TRow> {
+    return typeof column !== 'string';
+}
+
 export function NavigationPreview<TRow extends NavigationPreviewRow = NavigationPreviewRow>({
     data,
     view,
@@ -45,18 +61,29 @@ export function NavigationPreview<TRow extends NavigationPreviewRow = Navigation
     className,
 }: NavigationPreviewProps<TRow>) {
     const {columns, rows, loading, loaded, errorContent} = data;
-    const {tableColumns, extraColumns} = view ?? {};
+    const {tableColumns, extraColumns, formatterSettings, maxVisibleLines} = view ?? {};
+    const columnNames = useMemo(() => columns.map(getColumnName), [columns]);
 
-    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(columns, {
+    const [activeVisibleColumns, handleVisibleColumnsChange] = useVisibleColumns(columnNames, {
         value: visibleColumns,
         onChange: onVisibleColumnsChange,
         defaultValue: defaultVisibleColumns,
     });
 
-    const displayedColumnNames = useMemo(
-        () => columns.filter((column) => activeVisibleColumns.includes(column)),
+    const displayedColumns = useMemo(
+        () => columns.filter((column) => activeVisibleColumns.includes(getColumnName(column))),
         [columns, activeVisibleColumns],
     );
+    const displayedColumnNames = useMemo(
+        () => displayedColumns.map(getColumnName),
+        [displayedColumns],
+    );
+    const typedColumns = useMemo(
+        () => displayedColumns.filter(isQueryResultColumn),
+        [displayedColumns],
+    );
+    const canUseQueryResultsTable =
+        !tableColumns && !extraColumns?.length && typedColumns.length === displayedColumns.length;
 
     const resolvedColumns = useMemo(() => {
         if (tableColumns) {
@@ -66,7 +93,11 @@ export function NavigationPreview<TRow extends NavigationPreviewRow = Navigation
     }, [tableColumns, extraColumns, displayedColumnNames]);
 
     const fieldsOptions = useMemo(
-        () => columns.map((column) => ({id: column, title: column})),
+        () =>
+            columns.map((column) => ({
+                id: getColumnName(column),
+                title: typeof column === 'string' ? column : (column.header ?? column.name),
+            })),
         [columns],
     );
 
@@ -96,15 +127,29 @@ export function NavigationPreview<TRow extends NavigationPreviewRow = Navigation
                     hideFieldsSelector={hideFieldsSelector}
                 />
             )}
-            <DataTable<TRow>
-                columns={resolvedColumns}
-                data={filteredRows}
-                loading={loading}
-                loaded={loaded}
-                emptyVariant={search ? 'nothing-found' : 'no-data'}
-                settings={{displayIndices: false}}
-                className={block('table')}
-            />
+            {canUseQueryResultsTable ? (
+                <QueryResultsTable<TRow>
+                    columns={typedColumns}
+                    rows={filteredRows}
+                    loading={loading}
+                    loaded={loaded}
+                    formatterSettings={formatterSettings}
+                    maxVisibleLines={maxVisibleLines}
+                    emptyVariant={search ? 'nothing-found' : 'no-data'}
+                    displayIndices={false}
+                    className={block('table')}
+                />
+            ) : (
+                <DataTable<TRow>
+                    columns={resolvedColumns}
+                    data={filteredRows}
+                    loading={loading}
+                    loaded={loaded}
+                    emptyVariant={search ? 'nothing-found' : 'no-data'}
+                    settings={{displayIndices: false}}
+                    className={block('table')}
+                />
+            )}
         </Flex>
     );
 }

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

@@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {Icon, Label} from '@gravity-ui/uikit';
 import LockIcon from '@gravity-ui/icons/svgs/lock.svg';
 import {NavigationPreview} from '..';
-import type {NavigationPreviewRow} from '../../../types/navigation';
+import type {NavigationPreviewColumn, NavigationPreviewRow} from '../../../types/navigation';
 import {PREVIEW_COLUMNS, PREVIEW_ROWS} from './mockData';
 
 const meta: Meta<typeof NavigationPreview> = {
@@ -68,6 +68,31 @@ export const Error: Story = {
     },
 };
 
+const TYPED_COLUMNS: Array<NavigationPreviewColumn<NavigationPreviewRow>> = [
+    {name: 'id', type: ['DataType', 'Uint64']},
+    {name: 'tags', type: ['ListType', ['DataType', 'Utf8']]},
+    {
+        name: 'details',
+        type: [
+            'StructType',
+            [
+                ['name', ['DataType', 'Utf8']],
+                ['score', ['DataType', 'Double']],
+            ],
+        ],
+    },
+];
+
+const TYPED_ROWS: NavigationPreviewRow[] = [
+    {id: 1, tags: ['primary', 'preview'], details: ['Result', 42.5]},
+];
+
+export const TypedValues: Story = {
+    args: {
+        data: {columns: TYPED_COLUMNS, rows: TYPED_ROWS, loaded: true},
+    },
+};
+
 type CustomRow = NavigationPreviewRow & {lock?: string};
 
 const CUSTOM_ROWS: CustomRow[] = PREVIEW_ROWS.map((row, index) => ({

package/src/modules/NavigationPreview/story/mockData.ts

@@ -1,9 +1,14 @@
-import type {NavigationPreviewRow} from '../../../types/navigation';
+import type {NavigationPreviewColumn, NavigationPreviewRow} from '../../../types/navigation';
 
-export const PREVIEW_COLUMNS = ['id', 'created_at', 'title', 'status'];
+export const PREVIEW_COLUMNS: Array<NavigationPreviewColumn<NavigationPreviewRow>> = [
+    {name: 'id', type: ['DataType', 'Int32']},
+    {name: 'created_at', type: ['DataType', 'Utf8']},
+    {name: 'title', type: ['DataType', 'Utf8']},
+    {name: 'status', type: ['DataType', 'Utf8']},
+];
 
 export const PREVIEW_ROWS: NavigationPreviewRow[] = [
-    {id: '1', created_at: '2024-01-01T10:00:00Z', title: 'First row', status: 'active'},
-    {id: '2', created_at: '2024-01-02T11:30:00Z', title: 'Second row', status: 'active'},
-    {id: '3', created_at: '2024-01-03T09:15:00Z', title: 'Third row', status: 'archived'},
+    {id: 1, created_at: '2024-01-01T10:00:00Z', title: 'First row', status: 'active'},
+    {id: 2, created_at: '2024-01-02T11:30:00Z', title: 'Second row', status: 'active'},
+    {id: 3, created_at: '2024-01-03T09:15:00Z', title: 'Third row', status: 'archived'},
 ];

package/src/modules/QueriesList/QueriesList.scss

@@ -0,0 +1,10 @@
+.qp-queries-list {
+  height: 100%;
+
+  &__comparison-actions {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+}

package/src/modules/QueriesList/QueriesList.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import cn from 'bem-cn-lite';
+import {FieldsSelector} from '../../components';
+import {getListKey} from '../../helpers/getListKey';
+import {
+    QueryListComparisonConfig,
+    QueryListEditingConfig,
+    QueryListFilterConfig,
+    QueryListItem,
+    QueryListRow,
+    QueryListRowAction,
+    QueryListRowRenderData,
+    QueryListSearchConfig,
+    QueryListVisibleFieldsConfig,
+} from '../../types/queryList';
+import {HistoryComparisonActions} from '../HistoryComparisonActions';
+import {HistoryHeader} from '../HistoryHeader';
+import {HistoryLayout} from '../HistoryLayout';
+import {RowsList} from '../RowsList';
+import './QueriesList.scss';
+
+const block = cn('qp-queries-list');
+
+export type QueriesListProps<T extends QueryListRow> = {
+    className?: string;
+    title: React.ReactNode;
+    logo?: React.ReactNode;
+    search: QueryListSearchConfig;
+    filter?: QueryListFilterConfig;
+    items: QueryListItem<T>[];
+    selectedRowId?: T['id'];
+    editing?: QueryListEditingConfig<T>;
+    comparison?: QueryListComparisonConfig<T>;
+    visibleFields?: QueryListVisibleFieldsConfig<T>;
+    getRowActions?: (item: T) => QueryListRowAction<T>[];
+    renderRow: (data: QueryListRowRenderData<T>) => React.ReactNode;
+    onListItemClick?: (item: QueryListItem<T>) => void;
+};
+
+export const QueriesList = <T extends QueryListRow>({
+    title,
+    logo,
+    search,
+    filter,
+    items,
+    selectedRowId,
+    editing,
+    comparison,
+    visibleFields,
+    getRowActions,
+    renderRow,
+    onListItemClick,
+    className,
+}: QueriesListProps<T>) => {
+    const showSearchResults = Boolean(search.fullSearch && search.value?.trim());
+    const rowVariant = showSearchResults ? 'search' : 'default';
+
+    return (
+        <HistoryLayout
+            className={block(null, className)}
+            title={title}
+            logo={logo}
+            actions={visibleFields && <FieldsSelector {...visibleFields} />}
+            header={
+                <HistoryHeader
+                    className={block('header')}
+                    search={search.value}
+                    fullSearch={search.fullSearch}
+                    hasClear={search.hasClear}
+                    filter={filter}
+                    onUpdate={search.onUpdate}
+                />
+            }
+            footer={
+                comparison && (
+                    <HistoryComparisonActions
+                        comparison={comparison}
+                        className={block('comparison-actions')}
+                    />
+                )
+            }
+        >
+            <RowsList
+                key={getListKey(items, rowVariant)}
+                items={items}
+                rowVariant={rowVariant}
+                selectedRowId={selectedRowId}
+                visibleFields={visibleFields}
+                editing={editing}
+                comparison={comparison}
+                getRowActions={getRowActions}
+                renderRow={renderRow}
+                showFiltersHint={Boolean(filter)}
+                onItemClick={onListItemClick}
+            />
+        </HistoryLayout>
+    );
+};

package/src/modules/QueriesList/index.ts

@@ -0,0 +1,2 @@
+export {QueriesList} from './QueriesList';
+export type {QueriesListProps} from './QueriesList';

package/src/modules/QueryStatistics/QueryStatistics.scss

@@ -0,0 +1,3 @@
+.qp-query-statistics {
+    min-width: 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"
+}