Skip to content

Commit 4c7c7bc

Browse files
sareyusareyu
committed
wip: layout
1 parent c050653 commit 4c7c7bc

File tree

7 files changed

+384
-143
lines changed

7 files changed

+384
-143
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
"colord": "^2.9.3",
3939
"copy-to-clipboard": "^3.3.3",
4040
"crc-32": "^1.2.2",
41-
"elkjs": "^0.10.0",
4241
"history": "^4.10.1",
4342
"hotkeys-js": "^3.13.9",
4443
"lodash": "^4.17.21",
@@ -61,7 +60,6 @@
6160
"use-query-params": "^2.2.1",
6261
"uuid": "^10.0.0",
6362
"web-vitals": "^1.1.2",
64-
"web-worker": "^1.5.0",
6563
"ydb-ui-components": "^5.0.0",
6664
"zod": "^3.24.1"
6765
},

‎src/components/Graph/GravityGraph.tsx‎

Lines changed: 26 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,26 @@ import {
77
GraphCanvas,
88
MultipointConnection,
99
TConnection,
10-
useElk,
1110
useGraph,
1211
useGraphEvent,
1312
} from '@gravity-ui/graph/react';
1413
import type {Data, GraphNode, Options, Shapes} from '@gravity-ui/paranoid';
15-
import type {ElkExtendedEdge, ElkNode} from 'elkjs';
16-
import ELK from 'elkjs';
1714

18-
import {
19-
prepareBlocks,
20-
prepareChildren,
21-
prepareConnections,
22-
prepareEdges,
23-
parseCustomPropertyValue,
24-
} from './utils';
15+
import {prepareBlocks, prepareConnections, parseCustomPropertyValue} from './utils';
2516

2617
import {cn} from '../../utils/cn';
2718

2819
import './GravityGraph.scss';
2920

3021
const b = cn('ydb-gravity-graph');
3122

32-
// import {QueryBlockView} from './BlockComponents/QueryBlockView';
3323
import {QueryBlockComponent} from './BlockComponents/QueryBlockComponent';
3424
import {ResultBlockComponent} from './BlockComponents/ResultBlockComponent';
3525
import {StageBlockComponent} from './BlockComponents/StageBlockComponent';
3626
import {ConnectionBlockComponent} from './BlockComponents/ConnectionBlockComponent';
3727
import {graphColorsConfig} from './colorsConfig';
38-
import { GraphControls } from './GraphControls';
28+
import {GraphControls} from './GraphControls';
29+
import {calculateTreeLayout, calculateConnectionPaths} from './treeLayout';
3930

4031
interface Props<T> {
4132
data: Data<T>;
@@ -55,26 +46,7 @@ const config: TGraphConfig = {
5546
},
5647
};
5748

58-
const baseElkConfig = {
59-
id: 'root',
60-
layoutOptions: {
61-
'elk.algorithm': 'layered',
62-
'elk.direction': 'DOWN',
63-
// 'elk.spacing.edgeNode': '50',
64-
'elk.layered.spacing.nodeNodeBetweenLayers': '20',
65-
'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
66-
'elk.layered.nodePlacement.bk.ordering': 'INTERACTIVE',
67-
// 'elk.debugMode': true,
68-
// 'elk.alignment': 'CENTER'
69-
},
70-
};
71-
72-
73-
const elk = new ELK();
74-
7549
const renderBlockFn = (graph, block) => {
76-
// console.log('===', block);
77-
7850
const map = {
7951
query: QueryBlockComponent,
8052
result: ResultBlockComponent,
@@ -88,10 +60,14 @@ const renderBlockFn = (graph, block) => {
8860
<GraphBlock graph={graph} block={block} className={b('block')}>
8961
{Component ? (
9062
<>
91-
<Component graph={graph} block={block} className={b('block-content', block.is)} />
92-
{block.id !== 'undefined' && block.is !== 'result' && <div className={b('block-id')}>
93-
#{block.id}
94-
</div>}
63+
<Component
64+
graph={graph}
65+
block={block}
66+
className={b('block-content', block.is)}
67+
/>
68+
{block.id !== 'undefined' && block.is !== 'result' && (
69+
<div className={b('block-id')}>#{block.id}</div>
70+
)}
9571
</>
9672
) : (
9773
block.id
@@ -101,39 +77,19 @@ const renderBlockFn = (graph, block) => {
10177
};
10278

10379
export function GravityGraph<T>({data, theme}: Props<T>) {
104-
const _blocks = useMemo(() => prepareBlocks(data.nodes), [data.nodes]);
105-
const _connections = useMemo(() => prepareConnections(data.links), [data.links]);
106-
const elkConfig = useMemo(
107-
() => ({
108-
...baseElkConfig,
109-
children: prepareChildren(_blocks),
110-
edges: prepareEdges(_connections),
111-
}),
112-
[_blocks, _connections],
113-
);
11480
const {graph, start} = useGraph(config);
115-
const {isLoading, result} = useElk(elkConfig, elk);
11681

11782
React.useEffect(() => {
118-
if (isLoading || !result) {
119-
return;
120-
}
121-
122-
const blocks = _blocks.map((block) => ({
123-
...block,
124-
...result.blocks[block.id],
125-
}));
126-
127-
const connections = _connections.map((connection) => ({
128-
...connection,
129-
...(connection.id? result.edges[connection.id] : {}),
130-
}));
83+
const blocks = prepareBlocks(data.nodes);
84+
const connections = prepareConnections(data.links);
85+
const layouted = calculateTreeLayout(blocks, connections);
86+
const edges = calculateConnectionPaths(layouted, connections);
13187

13288
graph.setEntities({
133-
blocks,
134-
connections,
89+
blocks: layouted,
90+
connections: edges,
13591
});
136-
}, [isLoading, result, graph]);
92+
}, [data.nodes, data.links, graph]);
13793

13894
React.useEffect(() => {
13995
graph.setColors(parseCustomPropertyValue(graphColorsConfig, graph.getGraphCanvas()));
@@ -148,20 +104,18 @@ export function GravityGraph<T>({data, theme}: Props<T>) {
148104
});
149105
graph.setConstants({
150106
block: {
151-
SCALES: [0.125, 0.225, 0.5] // Detailed view stays until zoom = 0.5
152-
}
107+
SCALES: [0.125, 0.225, 0.5], // Detailed view stays until zoom = 0.5
108+
},
153109
});
154110
start();
155111
// graph.zoomTo("center", { padding: 300 });
156112
}
157113
});
158114

159-
// useGraphEvent(graph, 'connection-selection-change', (event) => {
160-
// console.log('connection-click', event);
161-
// });
162-
163-
return <>
164-
<GraphCanvas graph={graph} renderBlock={renderBlockFn} />
165-
<GraphControls graph={graph} />
166-
</>;
115+
return (
116+
<>
117+
<GraphCanvas graph={graph} renderBlock={renderBlockFn} />
118+
<GraphControls graph={graph} />
119+
</>
120+
);
167121
}

‎src/components/Graph/TooltipComponent.tsx‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { useState, useMemo } from 'react';
2-
import type { TBlock } from '@gravity-ui/graph';
3-
import { Text, Popover, TabProvider, TabList, Tab, TabPanel } from '@gravity-ui/uikit';
1+
import React, {useState, useMemo} from 'react';
2+
import type {TBlock} from '@gravity-ui/graph';
3+
import {Text, Popover, TabProvider, TabList, Tab, TabPanel} from '@gravity-ui/uikit';
44

55
import {cn} from '../../utils/cn';
66
const b = cn('ydb-gravity-graph');
@@ -11,41 +11,59 @@ type Props = {
1111

1212
const getStatsContent = (stat) => {
1313
if (!stat.items) {
14-
return <p className={b('tooltip-stat-row')} key={stat.name}><span>{stat.name}:</span><span>{stat.value}</span></p>;
14+
return (
15+
<p className={b('tooltip-stat-row')} key={stat.name}>
16+
<span>{stat.name}:</span>
17+
<span>{stat.value}</span>
18+
</p>
19+
);
1520
}
1621

1722
return (
1823
<section className={b('tooltip-stat-group')} key={stat.name}>
1924
<div className={b('tooltip-stat-group-name')}>{stat.name}:</div>
20-
{stat.items?.map(({ name, value }) => <p className={b('tooltip-stat-row')} key={name}><span>{name}:</span><span>{value}</span></p>)}
25+
{stat.items?.map(({name, value}) => (
26+
<p className={b('tooltip-stat-row')} key={name}>
27+
<span>{name}:</span>
28+
<span>{value}</span>
29+
</p>
30+
))}
2131
</section>
2232
);
23-
}
33+
};
2434

2535
const getTooltipContent = (block: TBlock) => {
2636
const [activeTab, setActiveTab] = useState(block?.stats[0]?.group);
2737

2838
return (
2939
<TabProvider value={activeTab} onUpdate={setActiveTab}>
3040
<TabList className={b('tooltip-tabs')}>
31-
{block?.stats?.map((item) => <Tab value={item.group}>{item.group}</Tab>)}
41+
{block?.stats?.map((item) => (
42+
<Tab value={item.group} key={item.group}>
43+
{item.group}
44+
</Tab>
45+
))}
3246
</TabList>
33-
{block?.stats?.map((item) => <TabPanel value={item.group}>
34-
{item.stats?.map(getStatsContent)}
35-
</TabPanel>)}
47+
{block?.stats?.map((item) => (
48+
<TabPanel value={item.group} key={item.group}>
49+
{item.stats?.map(getStatsContent)}
50+
</TabPanel>
51+
))}
3652
</TabProvider>
3753
);
38-
}
54+
};
3955

40-
export const TooltipComponent = ({ block, children }: Props) => {
56+
export const TooltipComponent = ({block, children}: Props) => {
4157
return (
42-
<Popover content={getTooltipContent(block)}
58+
<Popover
59+
content={getTooltipContent(block)}
4360
hasArrow
44-
trigger='click'
45-
placement='right-start'
46-
className='ydb-gravity-graph__tooltip-content'
61+
trigger="click"
62+
placement="right-start"
63+
className="ydb-gravity-graph__tooltip-content"
4764
disablePortal
48-
strategy='fixed'>
65+
strategy="fixed"
66+
>
4967
{children}
5068
</Popover>
5169
);

‎src/components/Graph/colorsConfig.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const graphColorsConfig = {
66
canvas: {
77
belowLayerBackground: '#0000',
88
border: '#0000',
9-
dots: 'var(--g-color-base-background)',
9+
dots: 'var(--g-color-line-generic)',
1010
layerBackground: 'var(--g-color-base-background)',
1111
},
1212
// block: {

0 commit comments

Comments
 (0)