@gravity-ui/querieskit 1.3.0 → 1.3.1

package/src/modules/QueriesList/QueriesList.tsx

@@ -1,98 +0,0 @@
-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

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

package/src/modules/QueryStatistics/QueryStatistics.scss

@@ -1,3 +0,0 @@
-.qp-query-statistics {
-    min-width: 0;
-}

package/src/modules/QueryStatistics/QueryStatistics.tsx

@@ -1,125 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-{
-  "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

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

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

@@ -1,16 +0,0 @@
-{
-  "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

@@ -1,13 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,99 +0,0 @@
-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

@@ -1,8 +0,0 @@
-.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

@@ -1,135 +0,0 @@
-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

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