From 37e0fd35e1f0506f9756324fc90981bcdcdd2c82 Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Tue, 16 Sep 2025 17:11:53 +0300
Subject: [PATCH 1/2] feat(TopicData): use number input for offset selection

---
 .../DebouncedInput/DebouncedNumerInput.tsx    | 23 +++++++++++++++++++
 .../DebouncedInput/DebouncedTextInput.tsx     |  2 +-
 src/components/Search/Search.tsx              |  4 ++--
 .../Diagnostics/TopicData/TopicData.tsx       |  2 +-
 .../TopicDataControls/TopicDataControls.tsx   | 12 +++++-----
 .../TopicData/useTopicDataQueryParams.ts      |  6 ++---
 src/utils/hooks/useDebouncedValue.ts          |  2 +-
 7 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 src/components/DebouncedInput/DebouncedNumerInput.tsx

diff --git a/src/components/DebouncedInput/DebouncedNumerInput.tsx b/src/components/DebouncedInput/DebouncedNumerInput.tsx
new file mode 100644
index 0000000000..509256010a
--- /dev/null
+++ b/src/components/DebouncedInput/DebouncedNumerInput.tsx
@@ -0,0 +1,23 @@
+import type {NumberInputProps} from '@gravity-ui/uikit';
+import {NumberInput} from '@gravity-ui/uikit';
+
+import {useDebouncedValue} from '../../utils/hooks/useDebouncedValue';
+
+interface DebouncedInputProps extends NumberInputProps {
+    debounce?: number;
+}
+
+export const DebouncedNumberInput = ({
+    onUpdate,
+    value = null,
+    debounce = 200,
+    ...rest
+}: DebouncedInputProps) => {
+    const [currentValue, handleUpdate] = useDebouncedValue<number | null>({
+        value,
+        onUpdate,
+        debounce,
+    });
+
+    return <NumberInput value={currentValue} onUpdate={handleUpdate} {...rest} />;
+};
diff --git a/src/components/DebouncedInput/DebouncedTextInput.tsx b/src/components/DebouncedInput/DebouncedTextInput.tsx
index c7fab6d4f5..509351385b 100644
--- a/src/components/DebouncedInput/DebouncedTextInput.tsx
+++ b/src/components/DebouncedInput/DebouncedTextInput.tsx
@@ -7,7 +7,7 @@ interface DebouncedInputProps extends TextInputProps {
     debounce?: number;
 }
 
-export const DebouncedInput = ({
+export const DebouncedTextInput = ({
     onUpdate,
     value = '',
     debounce = 200,
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 4923baedc5..2d5971afff 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import type {TextInputProps} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
-import {DebouncedInput} from '../DebouncedInput/DebouncedTextInput';
+import {DebouncedTextInput} from '../DebouncedInput/DebouncedTextInput';
 
 import './Search.scss';
 
@@ -27,7 +27,7 @@ export const Search = ({
     ...props
 }: SearchProps) => {
     return (
-        <DebouncedInput
+        <DebouncedTextInput
             debounce={debounce}
             hasClear
             autoFocus
diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx
index a0932eab9a..b81c5b5c2b 100644
--- a/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx
+++ b/src/containers/Tenant/Diagnostics/TopicData/TopicData.tsx
@@ -351,7 +351,7 @@ export function TopicData({scrollContainerRef, path, database, databaseFullPath}
                             getRowClassName={(row) => {
                                 return b('row', {
                                     active: Boolean(
-                                        String(row.Offset) === selectedOffset ||
+                                        safeParseNumber(row.Offset) === selectedOffset ||
                                             String(row.Offset) === activeOffset,
                                     ),
                                     removed: row.removed,
diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx
index f36b64cdd3..e0565b9d2a 100644
--- a/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx
+++ b/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx
@@ -18,7 +18,7 @@ import {
 } from '@gravity-ui/uikit';
 import {isNil} from 'lodash';
 
-import {DebouncedInput} from '../../../../../components/DebouncedInput/DebouncedTextInput';
+import {DebouncedNumberInput} from '../../../../../components/DebouncedInput/DebouncedNumerInput';
 import type {PreparedPartitionData} from '../../../../../store/reducers/partitions/types';
 import {formatNumber} from '../../../../../utils/dataFormatters/dataFormatters';
 import {prepareErrorMessage} from '../../../../../utils/prepareErrorMessage';
@@ -137,7 +137,7 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
         [handleTopicDataFilterChange, handleSelectedOffsetChange, handleStartTimestampChange],
     );
     const onStartOffsetChange = React.useCallback(
-        (value: string) => {
+        (value: number | null) => {
             handleSelectedOffsetChange(value);
         },
         [handleSelectedOffsetChange],
@@ -176,19 +176,19 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
                 </SegmentedRadioGroup.Option>
             </SegmentedRadioGroup>
             {topicDataFilter === 'OFFSET' && (
-                <DebouncedInput
+                <DebouncedNumberInput
                     controlRef={inputRef}
                     className={b('offset-input')}
-                    value={selectedOffset ? String(selectedOffset) : ''}
+                    max={Number.MAX_SAFE_INTEGER}
+                    value={isNil(selectedOffset) ? null : safeParseNumber(selectedOffset)}
                     onUpdate={onStartOffsetChange}
                     label={i18n('label_from')}
                     placeholder={i18n('label_offset')}
-                    type="number"
                     debounce={600}
                     endContent={
                         <ActionTooltip title={i18n('action_scroll-selected')}>
                             <Button
-                                disabled={isNil(selectedOffset) || selectedOffset === ''}
+                                disabled={isNil(selectedOffset)}
                                 className={b('scroll-button')}
                                 view="flat-action"
                                 size="xs"
diff --git a/src/containers/Tenant/Diagnostics/TopicData/useTopicDataQueryParams.ts b/src/containers/Tenant/Diagnostics/TopicData/useTopicDataQueryParams.ts
index 6ae8e777a6..75b52ca8ef 100644
--- a/src/containers/Tenant/Diagnostics/TopicData/useTopicDataQueryParams.ts
+++ b/src/containers/Tenant/Diagnostics/TopicData/useTopicDataQueryParams.ts
@@ -11,7 +11,7 @@ export function useTopicDataQueryParams() {
         setQueryParams,
     ] = useQueryParams({
         selectedPartition: StringParam,
-        selectedOffset: StringParam,
+        selectedOffset: NumberParam,
         startTimestamp: NumberParam,
         topicDataFilter: TopicDataFilterValueParam,
         activeOffset: StringParam,
@@ -25,8 +25,8 @@ export function useTopicDataQueryParams() {
     );
 
     const handleSelectedOffsetChange = React.useCallback(
-        (value?: string) => {
-            setQueryParams({selectedOffset: value}, 'replaceIn');
+        (value?: number | null) => {
+            setQueryParams({selectedOffset: value || undefined}, 'replaceIn');
         },
         [setQueryParams],
     );
diff --git a/src/utils/hooks/useDebouncedValue.ts b/src/utils/hooks/useDebouncedValue.ts
index 2462cc596e..086ab9302a 100644
--- a/src/utils/hooks/useDebouncedValue.ts
+++ b/src/utils/hooks/useDebouncedValue.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function useDebouncedValue<T extends string | number>({
+export function useDebouncedValue<T extends string | number | null>({
     value,
     onUpdate,
     debounce = 200,

From 13d73c858bfdd12b6a05182a23bd88c7b610f57d Mon Sep 17 00:00:00 2001
From: Elena Makarova <el-makarova@yandex-team.ru>
Date: Wed, 17 Sep 2025 09:59:46 +0300
Subject: [PATCH 2/2] fix

---
 .../TopicData/TopicDataControls/TopicDataControls.tsx            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx b/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx
index e0565b9d2a..2f952f9cde 100644
--- a/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx
+++ b/src/containers/Tenant/Diagnostics/TopicData/TopicDataControls/TopicDataControls.tsx
@@ -180,6 +180,7 @@ function TopicDataStartControls({scrollToOffset}: TopicDataStartControlsProps) {
                     controlRef={inputRef}
                     className={b('offset-input')}
                     max={Number.MAX_SAFE_INTEGER}
+                    min={0}
                     value={isNil(selectedOffset) ? null : safeParseNumber(selectedOffset)}
                     onUpdate={onStartOffsetChange}
                     label={i18n('label_from')}