ydb-embedded-ui 1.13.2 → 1.14.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [1.14.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.14.0...v1.14.1) (2022-09-16)
+
+
+### Bug Fixes
+
+* **Tenants:** display nodes count 0 for undefined NodeIds ([4be42ec](https://github.com/ydb-platform/ydb-embedded-ui/commit/4be42eca84557929837e799d7d8dcebd858470d4))
+
+## [1.14.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.13.2...v1.14.0) (2022-09-16)
+
+
+### Features
+
+* **Preview:** use modern query schema ([60bed3f](https://github.com/ydb-platform/ydb-embedded-ui/commit/60bed3fcb0fd76b869883742a2f2911201c0c226))
+* **QueryEditor:** use modern query schema ([ecf38aa](https://github.com/ydb-platform/ydb-embedded-ui/commit/ecf38aa6b164ef7705e004aa77c8dab0e3164b51))
+* **QueryResultTable:** component for displaying query result ([1b8be10](https://github.com/ydb-platform/ydb-embedded-ui/commit/1b8be10546ad9ae13b1043b2871b2aa110a5b6d4))
+* **Storage:** experimental settings for disk colors ([b4291f4](https://github.com/ydb-platform/ydb-embedded-ui/commit/b4291f4ca19c588bc17eca50da51e898e6ccf581))
+* **Tenant:** cdc streams info ([4cc773f](https://github.com/ydb-platform/ydb-embedded-ui/commit/4cc773f0351e3f1f6e279d1bebbb78329695e9ae))
+* **Tenant:** cdc streams overview ([d1aed44](https://github.com/ydb-platform/ydb-embedded-ui/commit/d1aed4467135adaf01a06f8c4c4a4b3eb0b53106))
+* **Tenant:** pq groups info & overview ([e1878a6](https://github.com/ydb-platform/ydb-embedded-ui/commit/e1878a6353933f74e62b204bf210f56a18a16c49))
+* **Tenants:** display tenant nodes count ([72aef25](https://github.com/ydb-platform/ydb-embedded-ui/commit/72aef250006aae53d7704ff539b9eb537e6bfbd4))
+* use schema param in sendQuery api ([01f9c71](https://github.com/ydb-platform/ydb-embedded-ui/commit/01f9c71190622279f03cd1c01d6b6e8e6739362a))
+
+
+### UI Updates
+
+* **Storage:** new disks design ([26033d2](https://github.com/ydb-platform/ydb-embedded-ui/commit/26033d21e994c6ece7b3b8999d0fabbf82b43021))
+* **Tenant:** consistent paddings for query results ([7f0a7c2](https://github.com/ydb-platform/ydb-embedded-ui/commit/7f0a7c28d18e48013223239b5780dbaca18f68a8))
+
+
+### Bug Fixes
+
+* always parse query error to string ([0fcabf7](https://github.com/ydb-platform/ydb-embedded-ui/commit/0fcabf7042adfc728f1ec651ebae50e8c40e9199))
+* correct types & parsing for query api response ([d6a177c](https://github.com/ydb-platform/ydb-embedded-ui/commit/d6a177cd0e726f1d19e27c642e0a9c1d2832bbe0))
+* **Preview:** display "table is empty" only for tables ([21a93c1](https://github.com/ydb-platform/ydb-embedded-ui/commit/21a93c1a070dbd04f7338537200cd2cb9849ff88))
+* **Preview:** fix action type id ([7793fad](https://github.com/ydb-platform/ydb-embedded-ui/commit/7793fad6b618bfc4c35b85481b2a0b794698eaa1))
+* **QueryResultTable:** don't display absent result as empty ([e2e5bfa](https://github.com/ydb-platform/ydb-embedded-ui/commit/e2e5bfaf0dbb89ec64766bf4ed5a4fab10ae8844))
+* **QueryResultTable:** don't require theme prop ([c9686d4](https://github.com/ydb-platform/ydb-embedded-ui/commit/c9686d46eb2efdeb4bc093ecd44619e6c1a9c2fd))
+* **Tenant:** input working query for 'select query' action in schema ([de152bd](https://github.com/ydb-platform/ydb-embedded-ui/commit/de152bdcc38fd6f4b1e5a5e6102c621f0155be36))
+* **Tenant:** rename tab overview -> info ([2d13ffe](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d13ffeb149765680c2887ea7ffb86d68ac92d5c))
+
 ## [1.13.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.13.1...v1.13.2) (2022-09-05)
 
 

package/dist/assets/icons/flask.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+    <path d="M437.2 403.5L320 215V64h8c13.3 0 24-10.7 24-24V24c0-13.3-10.7-24-24-24H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h8v151L10.8 403.5C-18.5 450.6 15.3 512 70.9 512h306.2c55.7 0 89.4-61.5 60.1-108.5zM137.9 320l48.2-77.6c3.7-5.2 5.8-11.6 5.8-18.4V64h64v160c0 6.9 2.2 13.2 5.8 18.4l48.2 77.6h-172z"/>
+</svg>

package/dist/components/InfoViewer/formatters/common.ts

@@ -0,0 +1,15 @@
+import type {TDirEntry} from '../../../types/api/schema';
+import {formatDateTime} from '../../../utils';
+
+import {createInfoFormatter} from '../utils';
+
+export const formatCommonItem = createInfoFormatter<TDirEntry>({
+    values: {
+        PathType: (value) => value?.substring('EPathType'.length),
+        CreateStep: formatDateTime,
+    },
+    labels: {
+        PathType: 'Type',
+        CreateStep: 'Created',
+    },
+});

package/dist/components/InfoViewer/formatters/index.ts

@@ -0,0 +1,2 @@
+export * from './common';
+export * from './schema';

package/dist/components/InfoViewer/formatters/schema.ts

@@ -0,0 +1,43 @@
+import type {
+    TCdcStreamDescription,
+    TIndexDescription,
+    TPersQueueGroupDescription,
+} from '../../../types/api/schema';
+import {formatNumber} from '../../../utils';
+import {HOUR_IN_SECONDS} from '../../../utils/constants';
+
+import {createInfoFormatter} from '../utils';
+
+export const formatTableIndexItem = createInfoFormatter<TIndexDescription>({
+    values: {
+        Type: (value) => value?.substring(10), // trims EIndexType prefix
+        State: (value) => value?.substring(11), // trims EIndexState prefix
+        KeyColumnNames: (value) => value?.join(', '),
+        DataColumnNames: (value) => value?.join(', '),
+    },
+    labels: {
+        KeyColumnNames: 'Columns',
+        DataColumnNames: 'Includes',
+    },
+});
+
+export const formatCdcStreamItem = createInfoFormatter<TCdcStreamDescription>({
+    values: {
+        Mode: (value) => value?.substring('ECdcStreamMode'.length),
+        Format: (value) => value?.substring('ECdcStreamFormat'.length),
+    },
+});
+
+export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
+    values: {
+        Partitions: (value) => formatNumber(value?.length || 0),
+        PQTabletConfig: (value) => {
+            const hours = Math.round(value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS * 100) / 100;
+            return `${formatNumber(hours)} hours`;
+        },
+    },
+    labels: {
+        Partitions: 'Partitions count',
+        PQTabletConfig: 'Retention',
+    },
+});

package/dist/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -0,0 +1,44 @@
+import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
+
+import {formatCdcStreamItem, formatCommonItem} from '../formatters';
+import {InfoViewer, InfoViewerItem} from '..';
+
+const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set([
+    'Mode',
+    'Format',
+]);
+
+interface CDCStreamInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const CDCStreamInfo = ({data}: CDCStreamInfoProps) => {
+    if (!data) {
+        return (
+            <div className="error">No CDC Stream data</div>
+        );
+    }
+
+    const TableIndex = data.PathDescription?.CdcStreamDescription;
+    const info: Array<InfoViewerItem> = [];
+
+    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
+    info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
+
+    let key: keyof TCdcStreamDescription;
+    for (key in TableIndex) {
+        if (DISPLAYED_FIELDS.has(key)) {
+            info.push(formatCdcStreamItem(key, TableIndex?.[key]));
+        }
+    }
+
+    return (
+        <>
+            {info.length ? (
+                <InfoViewer info={info}></InfoViewer>
+            ) : (
+                <>Empty</>
+            )}
+        </>
+    );
+};

package/dist/components/InfoViewer/schemaInfo/PersQueueGroupInfo.tsx

@@ -0,0 +1,34 @@
+import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
+
+import {formatCommonItem, formatPQGroupItem} from '../formatters';
+import {InfoViewer, InfoViewerItem} from '..';
+
+interface PersQueueGrouopInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
+    if (!data) {
+        return (
+            <div className="error">No PersQueueGroup data</div>
+        );
+    }
+
+    const pqGroup = data.PathDescription?.PersQueueGroup;
+    const info: Array<InfoViewerItem> = [];
+
+    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
+
+    info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
+    info.push(formatPQGroupItem('PQTabletConfig', pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}}));
+
+    return (
+        <>
+            {info.length ? (
+                <InfoViewer info={info}></InfoViewer>
+            ) : (
+                <>Empty</>
+            )}
+        </>
+    );
+};

package/dist/components/{IndexInfoViewer/IndexInfoViewer.tsx → InfoViewer/schemaInfo/TableIndexInfo.tsx}

@@ -1,5 +1,7 @@
-import type {TEvDescribeSchemeResult, TIndexDescription} from '../../types/api/schema';
-import {InfoViewer, createInfoFormatter, InfoViewerItem} from '../InfoViewer';
+import type {TEvDescribeSchemeResult, TIndexDescription} from '../../../types/api/schema';
+
+import {formatTableIndexItem} from '../formatters';
+import {InfoViewer, InfoViewerItem} from '..';
 
 const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
     'Type',
@@ -9,24 +11,11 @@ const DISPLAYED_FIELDS: Set<keyof TIndexDescription> = new Set([
     'DataColumnNames',
 ]);
 
-const formatItem = createInfoFormatter<TIndexDescription>({
-    values: {
-        Type: (value) => value?.substring(10), // trims EIndexType prefix
-        State: (value) => value?.substring(11), // trims EIndexState prefix
-        KeyColumnNames: (value) => value?.join(', '),
-        DataColumnNames: (value) => value?.join(', '),
-    },
-    labels: {
-        KeyColumnNames: 'Columns',
-        DataColumnNames: 'Includes',
-    },
-});
-
-interface IndexInfoViewerProps {
+interface TableIndexInfoProps {
     data?: TEvDescribeSchemeResult;
 }
 
-export const IndexInfoViewer = ({data}: IndexInfoViewerProps) => {
+export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
     if (!data) {
         return (
             <div className="error">no index data</div>
@@ -39,7 +28,7 @@ export const IndexInfoViewer = ({data}: IndexInfoViewerProps) => {
     let key: keyof TIndexDescription;
     for (key in TableIndex) {
         if (DISPLAYED_FIELDS.has(key)) {
-            info.push(formatItem(key, TableIndex?.[key]));
+            info.push(formatTableIndexItem(key, TableIndex?.[key]));
         }
     }
 

package/dist/components/InfoViewer/schemaInfo/index.ts

@@ -0,0 +1,3 @@
+export * from './CDCStreamInfo';
+export * from './TableIndexInfo';
+export * from './PersQueueGroupInfo';

package/dist/components/InfoViewer/schemaOverview/CDCStreamOverview.tsx

@@ -0,0 +1,44 @@
+import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
+
+import {InfoViewer, InfoViewerItem} from '..';
+import {formatCdcStreamItem, formatCommonItem} from '../formatters';
+
+const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set([
+    'Mode',
+    'Format',
+]);
+
+interface CDCStreamOverviewProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const CDCStreamOverview = ({data}: CDCStreamOverviewProps) => {
+    if (!data) {
+        return (
+            <div className="error">No CDC Stream data</div>
+        );
+    }
+
+    const TableIndex = data.PathDescription?.CdcStreamDescription;
+    const info: Array<InfoViewerItem> = [];
+
+    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
+    info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
+
+    let key: keyof TCdcStreamDescription;
+    for (key in TableIndex) {
+        if (DISPLAYED_FIELDS.has(key)) {
+            info.push(formatCdcStreamItem(key, TableIndex?.[key]));
+        }
+    }
+
+    return (
+        <>
+            {info.length ? (
+                <InfoViewer info={info}></InfoViewer>
+            ) : (
+                <>Empty</>
+            )}
+        </>
+    );
+};

package/dist/components/InfoViewer/schemaOverview/PersQueueGroupOverview.tsx

@@ -0,0 +1,35 @@
+import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
+
+import {formatCommonItem, formatPQGroupItem} from '../formatters';
+import {InfoViewer, InfoViewerItem} from '..';
+
+interface PersQueueGroupOverviewProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export const PersQueueGroupOverview = ({data}: PersQueueGroupOverviewProps) => {
+    if (!data) {
+        return (
+            <div className="error">No PersQueueGroup data</div>
+        );
+    }
+
+    const pqGroup = data.PathDescription?.PersQueueGroup;
+    const info: Array<InfoViewerItem> = [];
+
+    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
+    info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
+
+    info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
+    info.push(formatPQGroupItem('PQTabletConfig', pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}}));
+
+    return (
+        <>
+            {info.length ? (
+                <InfoViewer info={info}></InfoViewer>
+            ) : (
+                <>Empty</>
+            )}
+        </>
+    );
+};

package/dist/components/InfoViewer/schemaOverview/index.ts

@@ -0,0 +1,2 @@
+export * from './CDCStreamOverview';
+export * from './PersQueueGroupOverview';

package/dist/components/QueryResultTable/Cell/Cell.tsx

@@ -0,0 +1,33 @@
+import React, {useEffect} from 'react';
+import {useDispatch} from 'react-redux';
+
+import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
+
+import {b} from '../QueryResultTable';
+
+interface CellProps {
+    className?: string;
+    value: string;
+}
+
+export const Cell = React.memo(function Cell(props: CellProps) {
+    const {
+        className,
+        value,
+    } = props;
+
+    const dispatch = useDispatch();
+
+    useEffect(() => () => {
+        dispatch(hideTooltip());
+    }, [dispatch]);
+
+    return (
+        <span
+            className={b('cell', className)}
+            onClick={(e) => dispatch(showTooltip(e.target, value, 'cell'))}
+        >
+            {value}
+        </span>
+    )
+});

package/dist/components/QueryResultTable/Cell/index.ts

@@ -0,0 +1 @@
+export * from './Cell';

package/dist/components/QueryResultTable/QueryResultTable.scss

@@ -0,0 +1,11 @@
+@import '../../styles/mixins.scss';
+
+.ydb-query-result-table {
+    &__cell {
+        @include cell-container;
+    }
+
+    &__message {
+        padding: 15px 10px;
+    }
+}

package/dist/components/QueryResultTable/QueryResultTable.tsx

@@ -0,0 +1,115 @@
+import {useMemo} from 'react';
+import cn from 'bem-cn-lite';
+
+import DataTable from '@yandex-cloud/react-data-table';
+import type {Column, DataTableProps, Settings} from '@yandex-cloud/react-data-table';
+
+import type {ColumnType, KeyValueRow} from '../../types/api/query';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {getColumnType, prepareQueryResponse} from '../../utils/query';
+import {isNumeric} from '../../utils/utils';
+
+import {Cell} from './Cell';
+
+import i18n from './i18n';
+import './QueryResultTable.scss';
+
+const TABLE_SETTINGS: Settings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    stripedRows: true,
+};
+
+export const b = cn('ydb-query-result-table');
+
+const prepareTypedColumns = (columns: ColumnType[]) => {
+    if (!columns.length) {
+        return [];
+    }
+
+    return columns.map(({name, type}) => {
+        const columnType = getColumnType(type);
+
+        const column: Column<KeyValueRow> = {
+            name,
+            align: columnType === 'number' ? DataTable.RIGHT : DataTable.LEFT,
+            sortAccessor: (row) => {
+                const value = row[name];
+                if (value === undefined || value === null) return null;
+                return columnType === 'number' ? BigInt(value) : value;
+            },
+            render: ({value}) => <Cell value={value as string} />,
+        };
+
+        return column;
+    });
+};
+
+const prepareGenericColumns = (data: KeyValueRow[]) => {
+    if (!data.length) {
+        return [];
+    }
+
+    return Object.keys(data[0]).map((name) => {
+        const column: Column<KeyValueRow> = {
+            name,
+            align: isNumeric(data[0][name]) ? DataTable.RIGHT : DataTable.LEFT,
+            sortAccessor: (row) => isNumeric(row[name]) ? Number(row[name]) : row[name],
+            render: ({value}) => <Cell value={value as string} />,
+        };
+
+        return column;
+    });
+};
+
+const getRowIndex = (_: unknown, index: number) => index
+
+interface QueryResultTableProps extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
+    data?: KeyValueRow[];
+    columns?: ColumnType[];
+}
+
+export const QueryResultTable = (props: QueryResultTableProps) => {
+    const {
+        columns: rawColumns,
+        data: rawData,
+        settings: settingsMix,
+        ...restProps
+    } = props;
+
+    const data = useMemo(() => prepareQueryResponse(rawData), [rawData]);
+    const columns = useMemo(() => {
+        return rawColumns ?
+            prepareTypedColumns(rawColumns) :
+            prepareGenericColumns(data);
+    }, [data, rawColumns]);
+    const settings = useMemo(() => ({
+        ...TABLE_SETTINGS,
+        ...settingsMix,
+    }), [settingsMix]);
+
+    // empty data is expected to be be an empty array
+    // undefined data is not rendered at all
+    if (!Array.isArray(rawData)) {
+        return null;
+    }
+
+    if (!columns.length) {
+        return (
+            <div className={b('message')}>
+                {i18n('empty')}
+            </div>
+        );
+    }
+
+    return (
+        <DataTable
+            theme="yandex-cloud"
+            data={data}
+            columns={columns}
+            settings={settings}
+            // prevent accessing row.id in case it is present but is not the PK (i.e. may repeat)
+            rowKey={getRowIndex}
+            {...restProps}
+        />
+    );
+};

package/dist/components/QueryResultTable/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "empty": "Table is empty"
+}

package/dist/components/QueryResultTable/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-query-result-table';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/QueryResultTable/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "empty": "Таблица пустая"
+}

package/dist/components/QueryResultTable/index.ts

@@ -0,0 +1 @@
+export * from './QueryResultTable';

package/dist/containers/App/App.scss

@@ -25,6 +25,7 @@ body,
 
 :root {
     --yc-color-infographics-yellow-light: rgba(255, 199, 0, 0.15);
+    --yc-color-infographics-yellow-medium: rgba(255, 219, 77, 0.4);
     --yc-color-base-warning-orange: #ff922e;
 
     --data-table-row-height: 40px;

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -1,4 +1,8 @@
 .storage-disk-progress-bar {
+    $border-width: 2px;
+    $outer-border-radius: 4px;
+    $inner-border-radius: $outer-border-radius - $border-width;
+
     $block: &;
     position: relative;
 
@@ -9,8 +13,8 @@
 
     vertical-align: top;
 
-    border: 1px solid var(--yc-color-infographics-misc-medium);
-    border-radius: 2px;
+    border: $border-width solid var(--yc-color-infographics-misc-heavy);
+    border-radius: $outer-border-radius;
     background-color: var(--yc-color-infographics-misc-light);
 
     #{$block}__filled {
@@ -18,15 +22,20 @@
     }
 
     &_green {
-        border: 1px solid var(--yc-color-infographics-positive-heavy);
+        border-color: var(--yc-color-infographics-positive-heavy);
         background-color: var(--yc-color-infographics-positive-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-positive-heavy);
+            background-color: var(--yc-color-infographics-positive-medium);
+
+            .yc-root_theme_dark & {
+                // the common medium green is too bright for this case
+                background-color: rgb(124, 227, 121, 0.4);
+            }
         }
     }
 
     &_blue {
-        border: 1px solid var(--yc-color-infographics-info-medium);
+        border-color: var(--yc-color-infographics-info-heavy);
         background-color: var(--yc-color-infographics-info-light);
         #{$block}__filled {
             background-color: var(--yc-color-infographics-info-medium);
@@ -34,25 +43,25 @@
     }
 
     &_yellow {
-        border: 1px solid var(--yc-color-infographics-warning-heavy);
+        border-color: var(--yc-color-infographics-warning-heavy);
         background-color: var(--yc-color-infographics-yellow-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-warning-heavy);
+            background-color: var(--yc-color-infographics-yellow-medium);
         }
     }
 
     &_orange {
-        border: 1px solid var(--yc-color-base-warning-orange);
+        border-color: var(--yc-color-base-warning-orange);
         background-color: var(--yc-color-infographics-warning-light);
         #{$block}__filled {
-            background-color: var(--yc-color-base-warning-orange);
+            background-color: var(--yc-color-infographics-warning-medium);
         }
     }
     &_red {
-        border: 1px solid var(--yc-color-infographics-danger-heavy);
+        border-color: var(--yc-color-infographics-danger-heavy);
         background-color: var(--yc-color-infographics-danger-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-danger-heavy);
+            background-color: var(--yc-color-infographics-danger-medium);
         }
     }
 
@@ -63,14 +72,22 @@
 
         height: 100%;
 
-        border-radius: 2px 0 0 2px;
+        border-radius: $inner-border-radius 0 0 $inner-border-radius;
+
+        #{$block}_inverted & {
+            right: 0;
+            left: auto;
+
+            border-radius: 0 $inner-border-radius $inner-border-radius 0;
+        }
     }
     &__filled-title {
         position: absolute;
         z-index: 2;
 
         font-size: var(--yc-text-body-1-font-size);
-        line-height: inherit;
+        // bar height minus borders
+        line-height: calc(var(--yc-text-body-2-line-height) - #{$border-width * 2});
 
         color: inherit;
     }
@@ -79,8 +96,16 @@
         display: flex;
         justify-content: center;
 
-        height: 100%;
+        // extend active area to include borders
+        height: var(--yc-text-body-2-line-height);
+        margin: -$border-width;
+        padding: $border-width;
 
         color: inherit;
+        border-radius: $outer-border-radius;
+
+        &:hover {
+            color: inherit;
+        }
     }
 }