Skip to content

Commit 8fd8ac5

Browse files
sareyusareyu
committed
wip: custom connection
1 parent 4c7c7bc commit 8fd8ac5

File tree

9 files changed

+42
-204
lines changed

9 files changed

+42
-204
lines changed

‎src/components/Graph/BlockComponents/ConnectionBlockComponent.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
import type {TBlock} from '@gravity-ui/graph';
2-
import { Icon } from '@gravity-ui/uikit';
3-
import {DatabaseFill, Shuffle, GripHorizontal, MapPin, ArrowsExpandHorizontal} from '@gravity-ui/icons';
2+
import {Icon} from '@gravity-ui/uikit';
3+
import {
4+
DatabaseFill,
5+
Shuffle,
6+
GripHorizontal,
7+
MapPin,
8+
ArrowsExpandHorizontal,
9+
} from '@gravity-ui/icons';
410

5-
import { TooltipComponent } from '../TooltipComponent';
11+
import {TooltipComponent} from '../TooltipComponent';
612

713
type Props = {
814
block: TBlock;
@@ -22,22 +28,19 @@ const getIcon = (name: string) => {
2228
case 'Broadcast':
2329
return ArrowsExpandHorizontal;
2430
}
25-
}
31+
};
2632

2733
export const ConnectionBlockComponent = ({className, block}: Props) => {
2834
const icon = getIcon(block.name);
2935
const content = (
3036
<div className={className}>
31-
{icon && <Icon data={icon}/>} {block.name}
37+
{icon && <Icon data={icon} />} {block.name}
3238
</div>
3339
);
3440

3541
if (!block.stats?.length) {
3642
return content;
3743
}
3844

39-
return (
40-
<TooltipComponent block={block}>{content}</TooltipComponent>
41-
42-
);
45+
return <TooltipComponent block={block}>{content}</TooltipComponent>;
4346
};

‎src/components/Graph/BlockComponents/QueryBlockView.ts‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/components/Graph/BlockComponents/StageBlockComponent.tsx‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
1-
import type { TBlock } from '@gravity-ui/graph';
2-
import { Text } from '@gravity-ui/uikit';
1+
import type {TBlock} from '@gravity-ui/graph';
2+
import {Text} from '@gravity-ui/uikit';
33

4-
import { TooltipComponent } from '../TooltipComponent';
4+
import {TooltipComponent} from '../TooltipComponent';
55

66
type Props = {
77
block: TBlock;
88
className: string;
99
};
1010

11-
export const StageBlockComponent = ({ className, block }: Props) => {
12-
const content = <div className={className}>
13-
{block.operators ? block.operators.map((item) => <div key={item}>{item}</div>) : block.name}
14-
{block.tables ? <div><Text color='secondary'>Tables: </Text>{block.tables.join(', ')}</div> : null}
15-
</div>;
11+
export const StageBlockComponent = ({className, block}: Props) => {
12+
const content = (
13+
<div className={className}>
14+
{block.operators
15+
? block.operators.map((item) => <div key={item}>{item}</div>)
16+
: block.name}
17+
{block.tables ? (
18+
<div>
19+
<Text color="secondary">Tables: </Text>
20+
{block.tables.join(', ')}
21+
</div>
22+
) : null}
23+
</div>
24+
);
1625

1726
if (!block.stats?.length) {
1827
return content;
1928
}
2029

21-
return (
22-
<TooltipComponent block={block}>{content}</TooltipComponent>
23-
24-
);
30+
return <TooltipComponent block={block}>{content}</TooltipComponent>;
2531
};

‎src/components/Graph/Graph.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ interface GraphProps<T> {
1010
}
1111

1212
export function Graph<T>(props: GraphProps<T>) {
13-
console.log(props);
14-
1513
const containerRef = React.useRef<HTMLDivElement>(null);
1614
const containerId = React.useId();
1715

‎src/components/Graph/GraphControls.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,15 @@ export const GraphControls = ({graph}: Props) => {
2929

3030
return (
3131
<div className={b('zoom-controls')}>
32-
<Button
33-
view="raised"
34-
onClick={onZoomInClick}
35-
>
32+
<Button view="raised" onClick={onZoomInClick}>
3633
<Icon data={MagnifierPlusIcon} size={16} />
3734
</Button>
38-
<Button
39-
view="raised"
40-
onClick={onZoomOutClick}
41-
>
35+
<Button view="raised" onClick={onZoomOutClick}>
4236
<Icon data={MagnifierMinusIcon} size={16} />
4337
</Button>
44-
<Button
45-
view="raised"
46-
onClick={onResetZoomClick}
47-
>
38+
<Button view="raised" onClick={onResetZoomClick}>
4839
1:1
4940
</Button>
5041
</div>
5142
);
5243
};
53-

‎src/components/Graph/GravityGraph.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77

88
&__block-content {
99
width: 100%;
10-
// height: 100%;
1110
padding: 8px 12px;
1211
background: var(--g-color-base-float);
1312
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
@@ -28,7 +27,7 @@
2827
color: var(--g-color-text-secondary);
2928
font-size: 10px;
3029
line-height: 1;
31-
}
30+
}
3231

3332
&__block-content.query {
3433
border-radius: 50%;
@@ -89,7 +88,7 @@
8988
&__tooltip-stat-group {
9089
margin-top: 8px;
9190
}
92-
91+
9392
&__tooltip-stat-group + &__tooltip-stat-group {
9493
padding-top: 8px;
9594
border-top: 1px dotted var(--g-color-line-generic);

‎src/components/Graph/GravityGraph.tsx‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,7 @@ import React, {useEffect, useMemo} from 'react';
22

33
import type {TBlock, TGraphConfig} from '@gravity-ui/graph';
44
import {Graph, GraphState, CanvasBlock} from '@gravity-ui/graph';
5-
import {
6-
GraphBlock,
7-
GraphCanvas,
8-
MultipointConnection,
9-
TConnection,
10-
useGraph,
11-
useGraphEvent,
12-
} from '@gravity-ui/graph/react';
5+
import {GraphBlock, GraphCanvas, useGraph, useGraphEvent} from '@gravity-ui/graph/react';
136
import type {Data, GraphNode, Options, Shapes} from '@gravity-ui/paranoid';
147

158
import {prepareBlocks, prepareConnections, parseCustomPropertyValue} from './utils';
@@ -27,6 +20,7 @@ import {ConnectionBlockComponent} from './BlockComponents/ConnectionBlockCompone
2720
import {graphColorsConfig} from './colorsConfig';
2821
import {GraphControls} from './GraphControls';
2922
import {calculateTreeLayout, calculateConnectionPaths} from './treeLayout';
23+
import {NonSelectableConnection} from './NonSelectableConnection';
3024

3125
interface Props<T> {
3226
data: Data<T>;
@@ -35,13 +29,7 @@ interface Props<T> {
3529

3630
const config: TGraphConfig = {
3731
settings: {
38-
connection: MultipointConnection,
39-
// blockComponents: {
40-
// query: QueryBlockView,
41-
// },
42-
// canDragCamera: true,
43-
// canZoomCamera: false,
44-
// useBezierConnections: false,
32+
connection: NonSelectableConnection,
4533
showConnectionArrows: false,
4634
},
4735
};

‎src/components/Graph/NonSelectableConnection.tsx‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,10 @@ import {MultipointConnection} from '@gravity-ui/graph/react';
55
* Наследуется от MultipointConnection и переопределяет поведение
66
*/
77
export class NonSelectableConnection extends MultipointConnection {
8-
// Переопределяем метод для предотвращения выделения при клике
9-
public override onClick() {
10-
// Ничего не делаем при клике - блокируем выделение
11-
return;
12-
}
8+
public override cursor = 'default';
139

14-
// Переопределяем метод для отключения hover эффектов
15-
public override onPointerEnter() {
16-
// Ничего не делаем при наведении
17-
return;
18-
}
19-
20-
public override onPointerLeave() {
21-
// Ничего не делаем при уходе курсора
22-
return;
10+
// Переопределяем метод для предотвращения выделения при клике
11+
protected override handleEvent(event) {
12+
event.stopPropagation();
2313
}
2414
}

‎src/components/Graph/colorsConfig.ts‎

Lines changed: 0 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -2,122 +2,15 @@ export type AbstractGraphColorsConfig = Partial<Record<string, Partial<Record<st
22

33
export const graphColorsConfig = {
44
// Default @gravity-ui/graph colors
5-
65
canvas: {
76
belowLayerBackground: '#0000',
87
border: '#0000',
98
dots: 'var(--g-color-line-generic)',
109
layerBackground: 'var(--g-color-base-background)',
1110
},
12-
// block: {
13-
// text: 'var(--g-color-text-primary)',
14-
// background: 'var(--g-color-base-float)',
15-
// border: '#dfdfdf',
16-
// },
1711
connection: {
1812
background: 'var(--g-color-line-generic-solid)',
1913
hoverBackground: 'var(--g-color-line-generic-solid)',
2014
selectedBackground: 'var(--g-color-line-generic-solid)',
21-
// selectedBackground: 'var(--g-color-line-positive)',
2215
},
23-
24-
// Gravity-UI Colors
25-
26-
// textsMain: {
27-
// primary: 'var(--g-color-text-primary)',
28-
// complementary: 'var(--g-color-text-complementary)',
29-
// secondary: 'var(--g-color-text-secondary)',
30-
// hint: 'var(--g-color-text-hint)',
31-
// },
32-
// textsSemantic: {
33-
// info: 'var(--g-color-text-info)',
34-
// infoHeavy: 'var(--g-color-text-info-heavy)',
35-
// positive: 'var(--g-color-text-positive)',
36-
// positiveHeavy: 'var(--g-color-text-positive-heavy)',
37-
// warning: 'var(--g-color-text-warning)',
38-
// warningHeavy: 'var(--g-color-text-warning-heavy)',
39-
// danger: 'var(--g-color-text-danger)',
40-
// dangerHeavy: 'var(--g-color-text-danger-heavy)',
41-
// utility: 'var(--g-color-text-utility)',
42-
// utilityHeavy: 'var(--g-color-text-utility-heavy)',
43-
// misc: 'var(--g-color-text-misc)',
44-
// miscHeavy: 'var(--g-color-text-misc-heavy)',
45-
// },
46-
// backgroundsBasic: {
47-
// background: 'var(--g-color-base-background)',
48-
// generic: 'var(--g-color-base-generic)',
49-
// genericHover: 'var(--g-color-base-generic-hover)',
50-
// medium: 'var(--g-color-base-medium)',
51-
// mediumHover: 'var(--g-color-base-medium-hover)',
52-
// simple: 'var(--g-color-base-simple)',
53-
// simpleHover: 'var(--g-color-base-simple-hover)',
54-
// },
55-
// backgroundsFloats: {
56-
// float: 'var(--g-color-base-float)',
57-
// floatHover: 'var(--g-color-base-float-hover)',
58-
// floatMedium: 'var(--g-color-base-float-medium)',
59-
// floatHeavy: 'var(--g-color-base-float-heavy)',
60-
// },
61-
// backgroundsSemantic: {
62-
// infoLight: 'var(--g-color-base-info-light)',
63-
// infoLightHover: 'var(--g-color-base-info-light-hover)',
64-
// positiveLight: 'var(--g-color-base-positive-light)',
65-
// positiveLightHover: 'var(--g-color-base-positive-light-hover)',
66-
// warningLight: 'var(--g-color-base-warning-light)',
67-
// warningLightHover: 'var(--g-color-base-warning-light-hover)',
68-
// dangerLight: 'var(--g-color-base-danger-light)',
69-
// dangerLightHover: 'var(--g-color-base-danger-light-hover)',
70-
// utilityLight: 'var(--g-color-base-utility-light)',
71-
// utilityLightHover: 'var(--g-color-base-utility-light-hover)',
72-
// miscLight: 'var(--g-color-base-misc-light)',
73-
// miscLightHover: 'var(--g-color-base-misc-light-hover)',
74-
// neutralLight: 'var(--g-color-base-neutral-light)',
75-
// neutralLightHover: 'var(--g-color-base-neutral-light-hover)',
76-
77-
// infoMedium: 'var(--g-color-base-info-medium)',
78-
// infoMediumHover: 'var(--g-color-base-info-medium-hover)',
79-
// positiveMedium: 'var(--g-color-base-positive-medium)',
80-
// positiveMediumHover: 'var(--g-color-base-positive-medium-hover)',
81-
// warningMedium: 'var(--g-color-base-warning-medium)',
82-
// warningMediumHover: 'var(--g-color-base-warning-medium-hover)',
83-
// dangerMedium: 'var(--g-color-base-danger-medium)',
84-
// dangerMediumHover: 'var(--g-color-base-danger-medium-hover)',
85-
// utilityMedium: 'var(--g-color-base-utility-medium)',
86-
// utilityMediumHover: 'var(--g-color-base-utility-medium-hover)',
87-
// miscMedium: 'var(--g-color-base-misc-medium)',
88-
// miscMediumHover: 'var(--g-color-base-misc-medium-hover)',
89-
// neutralMedium: 'var(--g-color-base-neutral-medium)',
90-
// neutralMediumHover: 'var(--g-color-base-neutral-medium-hover)',
91-
92-
// infoHeavy: 'var(--g-color-base-info-heavy)',
93-
// infoHeavyHover: 'var(--g-color-base-info-heavy-hover)',
94-
// positiveHeavy: 'var(--g-color-base-positive-heavy)',
95-
// positiveHeavyHover: 'var(--g-color-base-positive-heavy-hover)',
96-
// warningHeavy: 'var(--g-color-base-warning-heavy)',
97-
// warningHeavyHover: 'var(--g-color-base-warning-heavy-hover)',
98-
// dangerHeavy: 'var(--g-color-base-danger-heavy)',
99-
// dangerHeavyHover: 'var(--g-color-base-danger-heavy-hover)',
100-
// utilityHeavy: 'var(--g-color-base-utility-heavy)',
101-
// utilityHeavyHover: 'var(--g-color-base-utility-heavy-hover)',
102-
// miscHeavy: 'var(--g-color-base-misc-heavy)',
103-
// miscHeavyHover: 'var(--g-color-base-misc-heavy-hover)',
104-
// neutralHeavy: 'var(--g-color-base-neutral-heavy)',
105-
// neutralHeavyHover: 'var(--g-color-base-neutral-heavy-hover)',
106-
// },
107-
// linesGeneral: {
108-
// generic: 'var(--g-color-line-generic)',
109-
// genericHover: 'var(--g-color-line-generic-hover)',
110-
// genericActive: 'var(--g-color-line-generic-active)',
111-
// genericAccent: 'var(--g-color-line-generic-accent)',
112-
// genericAccentHover: 'var(--g-color-line-generic-accent-hover)',
113-
// solid: 'var(--g-color-line-generic-solid)',
114-
// },
115-
// linesSemantic: {
116-
// info: 'var(--g-color-line-info)',
117-
// positive: 'var(--g-color-line-positive)',
118-
// warning: 'var(--g-color-line-warning)',
119-
// danger: 'var(--g-color-line-danger)',
120-
// utility: 'var(--g-color-line-utility)',
121-
// misc: 'var(--g-color-line-misc)',
122-
// },
12316
} as const satisfies AbstractGraphColorsConfig;

0 commit comments

Comments
 (0)