feat: migrate to gravity-ui/graph #2735

sareyu · 2025-08-20T11:39:07Z

CI Results

Test Status: ⚠️ FLAKY

Total	Passed	Failed	Flaky	Skipped
378	371	0	5	2

Test Changes Summary ⏭️2

⏭️ Skipped Tests (2)

Scroll to row, get shareable link, navigate to URL and verify row is scrolled into view (tenant/diagnostics/tabs/queries.test.ts)
Copy result button copies to clipboard (tenant/queryEditor/queryEditor.test.ts)

Bundle Size: 🔽

Current: 84.41 MB | Main: 85.61 MB
Diff: 1.20 MB (-1.40%)

✅ Bundle size decreased.

ℹ️ CI Information

Test recordings for failed tests are available in the full report.
Bundle size is measured for the entire 'dist' directory.
📊 indicates links to detailed reports.
🔺 indicates increase, 🔽 decrease, and ✅ no change in bundle size.

Raubzeug · 2025-09-29T15:45:44Z

package.json

    "@gravity-ui/components": "^4.4.0",
    "@gravity-ui/date-components": "^3.2.3",
    "@gravity-ui/date-utils": "^2.5.6",
+    "@gravity-ui/graph": "^1.1.4",


lets also remove paranoid

Raubzeug · 2025-09-29T15:47:54Z

src/components/Graph/BlockComponents/QueryBlockComponent.tsx

+};
+
+export const QueryBlockComponent = ({className}: Props) => {
+    return <div className={className} />;


should there really be no content here?

yes, it's just an empty circle on schema

Raubzeug · 2025-09-29T15:52:02Z

src/components/Graph/TooltipComponent.tsx

+    const content = useTooltipContent(block);
+
+    return (
+        <Popover


If content is big enough, it is impossible to see all of it

Screen.Recording.2025-09-29.at.17.50.01.mov

do we need actually? in this case for large graph block size will become too small for reading. I can implement simply canvas component but it's a bit complicated and I'm not sure there will be real user need

do we need actually? in this case for large graph block size will become too small for reading. I can implement simply canvas component but it's a bit complicated and I'm not sure there will be real user need

What if we set maximum height to popup? Let it be scroll inside it. I think it's rare case, and no problem if it won't be beautiful enough...

Raubzeug · 2025-09-29T15:53:03Z

src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx

    return (
        <div className={b('canvas-container')}>
-            <YDBGraph key={theme} data={data} />
+            {true ? (


lets remove it and get rid of @gravity-ui/paranoid

Raubzeug · 2025-09-29T15:53:44Z

src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx

        <div className={b('canvas-container')}>
-            <YDBGraph key={theme} data={data} />
+            {true ? (
+                <GravityGraph data={data} theme={theme} key={theme} />


Light theme is blinking when toggle tabs

Screen.Recording.2025-09-29.at.17.45.14.mov

Raubzeug · 2025-09-29T15:54:56Z

src/components/Graph/treeLayout.ts

+        this.levels = [];
+    }
+
+    // Построение структуры дерева


lets or remove comments at all either translate it to english

greptile-apps

_{16 files reviewed, 6 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2025-09-29T22:23:22Z

src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx

    return (
        <div className={b('canvas-container')}>
-            <YDBGraph key={theme} data={data} />
+            {true ? (


style: hardcoded true condition for feature flag - consider using a configuration constant or feature flag instead

Suggested change

{true ? (

{useGravityGraph ? (

Prompt To Fix With AI

This is a comment left during a code review. Path: src/containers/Tenant/Query/QueryResult/components/Graph/Graph.tsx Line: 36:36 Comment: style: hardcoded `true` condition for feature flag - consider using a configuration constant or feature flag instead ```suggestion {useGravityGraph ? ( ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-09-29T22:23:23Z

src/components/Graph/GraphControls.tsx

+    const onZoomInClick = () => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale * ZOOM_STEP});
+    };
+
+    const onZoomOutClick = () => {
+        const cameraScale = graph.cameraService.getCameraScale();
+        graph.zoom({scale: cameraScale / ZOOM_STEP});
+    };
+
+    const onResetZoomClick = () => {
+        graph.zoom({scale: 1});
+    };


style: event handlers should be wrapped with useCallback to prevent unnecessary re-renders

Suggested change

const onZoomInClick = () => {

const cameraScale = graph.cameraService.getCameraScale();

graph.zoom({scale: cameraScale * ZOOM_STEP});

};

const onZoomOutClick = () => {

const cameraScale = graph.cameraService.getCameraScale();

graph.zoom({scale: cameraScale / ZOOM_STEP});

};

const onResetZoomClick = () => {

graph.zoom({scale: 1});

};

const onZoomInClick = useCallback(() => {

const cameraScale = graph.cameraService.getCameraScale();

graph.zoom({scale: cameraScale * ZOOM_STEP});

}, [graph]);

const onZoomOutClick = useCallback(() => {

const cameraScale = graph.cameraService.getCameraScale();

graph.zoom({scale: cameraScale / ZOOM_STEP});

}, [graph]);

const onResetZoomClick = useCallback(() => {

graph.zoom({scale: 1});

}, [graph]);

Prompt To Fix With AI

This is a comment left during a code review. Path: src/components/Graph/GraphControls.tsx Line: 18:30 Comment: style: event handlers should be wrapped with `useCallback` to prevent unnecessary re-renders ```suggestion const onZoomInClick = useCallback(() => { const cameraScale = graph.cameraService.getCameraScale(); graph.zoom({scale: cameraScale * ZOOM_STEP}); }, [graph]); const onZoomOutClick = useCallback(() => { const cameraScale = graph.cameraService.getCameraScale(); graph.zoom({scale: cameraScale / ZOOM_STEP}); }, [graph]); const onResetZoomClick = useCallback(() => { graph.zoom({scale: 1}); }, [graph]); ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-09-29T22:23:23Z

src/components/Graph/GravityGraph.tsx

+    const {graph, start} = useGraph(config);
+
+    React.useEffect(() => {
+        // на всякий случай, хотя маунт больше времени занимает, чем расчёт


style: Russian comment should be translated to English for consistency with project standards

Suggested change

// на всякий случай, хотя маунт больше времени занимает, чем расчёт

// Just in case, although mounting takes more time than calculation

Prompt To Fix With AI

This is a comment left during a code review. Path: src/components/Graph/GravityGraph.tsx Line: 69:69 Comment: style: Russian comment should be translated to English for consistency with project standards ```suggestion // Just in case, although mounting takes more time than calculation ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-09-29T22:23:24Z

src/components/Graph/BlockComponents/StageBlockComponent.tsx

+                : block.name}
+            {block.tables ? (
+                <div>
+                    <Text color="secondary">Tables: </Text>


style: hardcoded text 'Tables: ' should use i18n for internationalization

Suggested change

<Text color="secondary">Tables: </Text>

<Text color="secondary">{i18n('label_tables')}: </Text>

Prompt To Fix With AI

This is a comment left during a code review. Path: src/components/Graph/BlockComponents/StageBlockComponent.tsx Line: 19:19 Comment: style: hardcoded text 'Tables: ' should use i18n for internationalization ```suggestion <Text color="secondary">{i18n('label_tables')}: </Text> ``` How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-09-29T22:23:24Z

src/components/Graph/TooltipComponent.tsx

+const useTooltipContent = (block: ExtendedTBlock) => {
+    const firstTab = block?.stats?.[0]?.group || '';
+    const [activeTab, setActiveTab] = useState(firstTab);
+
+    return (
+        <TabProvider value={activeTab} onUpdate={setActiveTab}>
+            <TabList className={b('tooltip-tabs')}>
+                {block?.stats?.map((item) => (
+                    <Tab value={item.group} key={item.group}>
+                        {item.group}
+                    </Tab>
+                ))}
+            </TabList>
+            {block?.stats?.map((item) => (
+                <TabPanel value={item.group} key={item.group}>
+                    {item.stats?.map(getStatsContent)}
+                </TabPanel>
+            ))}
+        </TabProvider>
+    );
+};


style: useTooltipContent hook creates new JSX on every render - should be memoized for performance

Prompt To Fix With AI

This is a comment left during a code review. Path: src/components/Graph/TooltipComponent.tsx Line: 42:62 Comment: style: `useTooltipContent` hook creates new JSX on every render - should be memoized for performance How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-09-29T22:23:25Z

src/components/Graph/treeLayout.ts

+        this.blocks = new Map(blocks.map((block: any) => [block.id, {...block}]));
+        this.connections = connections;
+
+        // Настройки отступов


style: Russian comment should be translated to English for consistency

Suggested change

// Настройки отступов

// Layout settings

Prompt To Fix With AI

This is a comment left during a code review. Path: src/components/Graph/treeLayout.ts Line: 17:17 Comment: style: Russian comment should be translated to English for consistency ```suggestion // Layout settings ``` How can I resolve this? If you propose a fix, please make it concise.

feat: migrate to gravity-ui/graph

6b22ba5

sareyu linked an issue Aug 20, 2025 that may be closed by this pull request

Migrate from @gravity-ui/paranoid to @gravity-ui/graph #2706

Open

sareyu added 15 commits August 20, 2025 18:33

wip

598aed4

wip

522b7a0

tmp

2c4cf39

wip: custom blocks

70da0b8

wip: styles

0b1eac5

wip: tooltip

904ea56

wip: tooltip

5576c55

wip: icons

eec1fe7

wip: controls

c050653

wip: layout

4c7c7bc

wip: custom connection

8fd8ac5

wip: worker

1a903b3

wip: fixes

2c54e70

wip: lint fixes

f79c022

fix types

d39d268

This comment was marked as outdated.

Sign in to view

Raubzeug requested changes Sep 29, 2025

View reviewed changes

greptile-apps bot reviewed Sep 29, 2025

View reviewed changes

sareyu added 4 commits September 30, 2025 12:33

Merge branch 'main' into issue-2706

36d1f19

rm paranoid

fe2651b

fix: review fixes

613fbe6

fix: fix blinking

50c237c

sareyu marked this pull request as ready for review September 30, 2025 14:41

sareyu requested review from artemmufazalov, astandrik and adameat as code owners September 30, 2025 14:41

	// на всякий случай, хотя маунт больше времени занимает, чем расчёт
	// Just in case, although mounting takes more time than calculation

	<Text color="secondary">Tables: </Text>
	<Text color="secondary">{i18n('label_tables')}: </Text>

feat: migrate to gravity-ui/graph #2735

Are you sure you want to change the base?

feat: migrate to gravity-ui/graph #2735

Uh oh!

Conversation

sareyu commented Aug 20, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CI Results

Test Status: ⚠️ FLAKY

⏭️ Skipped Tests (2)

Bundle Size: 🔽

Uh oh!

This comment was marked as outdated.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sareyu commented Aug 20, 2025 •

edited by github-actions bot

Loading