Skip to content

Commit 2c4cf39

Browse files
sareyusareyu
committed
tmp
1 parent 522b7a0 commit 2c4cf39

File tree

5 files changed

+224
-5
lines changed

5 files changed

+224
-5
lines changed

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import {Graph, GraphState, CanvasBlock} from '@gravity-ui/graph';
2+
3+
export class QueryBlockView extends CanvasBlock {
4+
protected renderStroke(color: string) {
5+
this.context.ctx.lineWidth = Math.round(3 / this.context.camera.getCameraScale());
6+
this.context.ctx.strokeStyle = color;
7+
this.context.ctx.stroke();
8+
}
9+
10+
public override renderSchematicView(ctx: CanvasRenderingContext2D) {
11+
// Draw circle with shadow
12+
this.context.ctx.save();
13+
this.context.ctx.shadowOffsetX = 1;
14+
this.context.ctx.shadowOffsetY = 1;
15+
this.context.ctx.shadowBlur = 5;
16+
this.context.ctx.shadowColor = 'rgba(0,0,0,0.15)';
17+
this.context.ctx.fillStyle = this.context.colors.block?.background;
18+
this.context.ctx.beginPath();
19+
const centerX = this.state.x + this.state.width / 2;
20+
const centerY = this.state.y + this.state.height / 2;
21+
this.context.ctx.arc(centerX, centerY, 20, 0, Math.PI * 2);
22+
this.context.ctx.fill();
23+
this.context.ctx.restore();
24+
25+
this.context.ctx.restore();
26+
27+
this.context.ctx.globalAlpha = 1;
28+
}
29+
}

‎src/components/Graph/GravityGraph.tsx‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useEffect, useMemo} from 'react';
22

33
import type {TBlock, TGraphConfig} from '@gravity-ui/graph';
4-
import {Graph, GraphState} from '@gravity-ui/graph';
4+
import {Graph, GraphState, CanvasBlock} from '@gravity-ui/graph';
55
import {
66
GraphBlock,
77
GraphCanvas,
@@ -15,15 +15,32 @@ import type {Data, GraphNode, Options, Shapes} from '@gravity-ui/paranoid';
1515
import type {ElkExtendedEdge, ElkNode} from 'elkjs';
1616
import ELK from 'elkjs';
1717

18-
import {prepareBlocks, prepareChildren, prepareConnections, prepareEdges} from './utils';
18+
import {
19+
prepareBlocks,
20+
prepareChildren,
21+
prepareConnections,
22+
prepareEdges,
23+
parseCustomPropertyValue,
24+
} from './utils';
25+
26+
import {QueryBlockView} from './BlockComponents/QueryBlockView';
27+
import {graphColorsConfig} from './colorsConfig';
1928

2029
interface Props<T> {
2130
data: Data<T>;
31+
theme?: string;
2232
}
2333

2434
const config = {
2535
settings: {
2636
connection: MultipointConnection,
37+
blockComponents: {
38+
Query: QueryBlockView,
39+
},
40+
// canDragCamera: true,
41+
// canZoomCamera: false,
42+
// useBezierConnections: false,
43+
showConnectionArrows: false,
2744
},
2845
};
2946
const elk = new ELK();
@@ -74,12 +91,12 @@ const baseElkConfig = {
7491
'elk.layered.spacing.nodeNodeBetweenLayers': '50',
7592
'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
7693
'elk.layered.nodePlacement.bk.ordering': 'INTERACTIVE',
77-
'elk.debugMode': true
94+
'elk.debugMode': true,
7895
// 'elk.alignment': 'CENTER'
7996
},
8097
};
8198

82-
export function GravityGraph<T>({data}: Props<T>) {
99+
export function GravityGraph<T>({data, theme}: Props<T>) {
83100
// console.log('997', data);
84101

85102
const _blocks = useMemo(() => prepareBlocks(data.nodes), [data.nodes]);
@@ -127,10 +144,15 @@ export function GravityGraph<T>({data}: Props<T>) {
127144
});
128145
}, [isLoading, result, graph]);
129146

147+
React.useEffect(() => {
148+
graph.setColors(parseCustomPropertyValue(graphColorsConfig, graph.getGraphCanvas()));
149+
}, [graph, theme]);
150+
130151
useGraphEvent(graph, 'state-change', ({state}) => {
131152
if (state === GraphState.ATTACHED) {
132153
console.log('start');
133154
start();
155+
// graph.zoomTo("center", { padding: 300 });
134156
}
135157
});
136158

‎src/components/Graph/colorsConfig.ts‎

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

‎src/components/Graph/utils.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type {TBlock, TConnection, TGraphConfig} from '@gravity-ui/graph';
22
import type {Data, GraphNode, Options, Shapes} from '@gravity-ui/paranoid';
33
import type {ElkExtendedEdge, ElkNode} from 'elkjs';
4+
import type {AbstractGraphColorsConfig} from './colorsConfig';
45

56
export const prepareChildren = (blocks: TGraphConfig['blocks']) => {
67
return blocks?.map((b) => {
@@ -38,6 +39,7 @@ export const prepareEdges = (connections: TGraphConfig['connections'], skipLabel
3839
export const prepareBlocks = (nodes: Data['nodes']): TBlock[] => {
3940
return nodes?.map(({data: {id, name, ...rest}}) => ({
4041
id: String(id),
42+
is: name,
4143
name,
4244
width: 200,
4345
height: 100,
@@ -52,3 +54,44 @@ export const prepareConnections = (links: Data['links']): TConnection[] => {
5254
targetBlockId: to,
5355
}));
5456
};
57+
58+
function calculateCurrentCustomPropertyValue<T extends string>(
59+
colorSettings: Partial<Record<T, string>>,
60+
computedStyle: CSSStyleDeclaration,
61+
): Partial<Record<T, string>> {
62+
const result: Partial<Record<T, string>> = {};
63+
64+
for (const nestedKey in colorSettings) {
65+
if (Object.prototype.hasOwnProperty.call(colorSettings, nestedKey)) {
66+
const value = colorSettings[nestedKey];
67+
68+
if (value !== undefined) {
69+
result[nestedKey] = value?.startsWith('var(')
70+
? computedStyle.getPropertyValue(value.substring(4, value.length - 1)).trim()
71+
: value;
72+
}
73+
}
74+
}
75+
76+
return result;
77+
}
78+
79+
export function parseCustomPropertyValue<T extends AbstractGraphColorsConfig>(
80+
colors: T,
81+
block: HTMLElement = globalThis.document.body,
82+
): T {
83+
const parsed: AbstractGraphColorsConfig = {};
84+
const computedStyle = window.getComputedStyle(block);
85+
86+
for (const topKey in colors) {
87+
if (Object.prototype.hasOwnProperty.call(colors, topKey)) {
88+
const nestedObj = colors[topKey];
89+
90+
if (nestedObj) {
91+
parsed[topKey] = calculateCurrentCustomPropertyValue(nestedObj, computedStyle);
92+
}
93+
}
94+
}
95+
96+
return parsed as T;
97+
}

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,11 @@ export function Graph({explain = {}, theme}: GraphProps) {
3535

3636
return (
3737
<div className={b('canvas-container')}>
38-
{(true) ? <GravityGraph data={data} /> : <YDBGraph key={theme} data={data} />}
38+
{true ? (
39+
<GravityGraph data={data} theme={theme} key={theme} />
40+
) : (
41+
<YDBGraph key={theme} data={data} />
42+
)}
3943
</div>
4044
);
4145
}

0 commit comments

Comments
 (0)