wip: custom blocks

Author: sareyu

src/components/Graph/BlockComponents/ConnectionBlockComponent.tsx

@@ -0,0 +1,14 @@
+import type {TBlock} from '@gravity-ui/graph';
+
+type Props = {
+    block: TBlock;
+    className: string;
+};
+
+export const ConnectionBlockComponent = ({className, block}: Props) => {
+    return (
+        <div className={className}>
+            {block.operators ? block.operators.join('') : block.name} #{block.id}
+        </div>
+    );
+};

src/components/Graph/BlockComponents/QueryBlockComponent.tsx

@@ -0,0 +1,7 @@
+type Props = {
+    className: string;
+};
+
+export const QueryBlockComponent = ({className}: Props) => {
+    return <div className={className} />;
+};

src/components/Graph/BlockComponents/ResultBlockComponent.tsx

@@ -0,0 +1,10 @@
+import type {TBlock} from '@gravity-ui/graph';
+
+type Props = {
+    block: TBlock;
+    className: string;
+};
+
+export const ResultBlockComponent = ({className, block}: Props) => {
+    return <div className={className}>{block.name}</div>;
+};

src/components/Graph/BlockComponents/StageBlockComponent.tsx

@@ -0,0 +1,14 @@
+import type {TBlock} from '@gravity-ui/graph';
+
+type Props = {
+    block: TBlock;
+    className: string;
+};
+
+export const StageBlockComponent = ({className, block}: Props) => {
+    return (
+        <div className={className}>
+            {block.operators ? block.operators.join('') : block.name} #{block.id}
+        </div>
+    );
+};

src/components/Graph/GravityGraph.scss

@@ -0,0 +1,37 @@
+.ydb-gravity-graph {
+    &__block {
+        background: none;
+        border: none;
+        cursor: auto;
+    }
+
+    &__block-content {
+        width: 100%;
+        height: 100%;
+        padding: 8px 12px;
+        background: var(--g-color-base-float);
+        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
+        border: 1px solid var(--g-color-line-generic);
+    }
+
+    &__block-content.query {
+        border-radius: 50%;
+    }
+
+    &__block-content.result {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__block-content.stage {
+        border-radius: 6px;
+    }
+
+    &__block-content.connection {
+        border-radius: 6px;
+        box-shadow: none;
+        background: var(--g-color-base-info-light);
+        border: 1px solid var(--g-color-line-info);
+    }
+}

src/components/Graph/GravityGraph.tsx

@@ -23,7 +23,17 @@ import {
     parseCustomPropertyValue,
 } from './utils';
 
+import {cn} from '../../utils/cn';
+
+import './GravityGraph.scss';
+
+const b = cn('ydb-gravity-graph');
+
 import {QueryBlockView} from './BlockComponents/QueryBlockView';
+import {QueryBlockComponent} from './BlockComponents/QueryBlockComponent';
+import {ResultBlockComponent} from './BlockComponents/ResultBlockComponent';
+import {StageBlockComponent} from './BlockComponents/StageBlockComponent';
+import {ConnectionBlockComponent} from './BlockComponents/ConnectionBlockComponent';
 import {graphColorsConfig} from './colorsConfig';
 
 interface Props<T> {
@@ -35,7 +45,7 @@ const config = {
     settings: {
         connection: MultipointConnection,
         blockComponents: {
-            Query: QueryBlockView,
+            query: QueryBlockView,
         },
         // canDragCamera: true,
         // canZoomCamera: false,
@@ -46,9 +56,24 @@ const config = {
 const elk = new ELK();
 
 const renderBlockFn = (graph, block) => {
+    console.log('===', block);
+
+    const map = {
+        query: QueryBlockComponent,
+        result: ResultBlockComponent,
+        stage: StageBlockComponent,
+        connection: ConnectionBlockComponent,
+    };
+
+    const Component = map[block.is];
+
     return (
-        <GraphBlock graph={graph} block={block}>
-            {block.id}
+        <GraphBlock graph={graph} block={block} className={b('block')}>
+            {Component ? (
+                <Component graph={graph} block={block} className={b('block-content', block.is)} />
+            ) : (
+                block.id
+            )}
         </GraphBlock>
     );
 };
@@ -88,7 +113,7 @@ const baseElkConfig = {
         'elk.algorithm': 'layered',
         'elk.direction': 'DOWN',
         // 'elk.spacing.edgeNode': '50',
-        'elk.layered.spacing.nodeNodeBetweenLayers': '50',
+        'elk.layered.spacing.nodeNodeBetweenLayers': '20',
         'elk.layered.nodePlacement.bk.fixedAlignment': 'BALANCED',
         'elk.layered.nodePlacement.bk.ordering': 'INTERACTIVE',
         'elk.debugMode': true,
@@ -151,6 +176,10 @@ export function GravityGraph<T>({data, theme}: Props<T>) {
     useGraphEvent(graph, 'state-change', ({state}) => {
         if (state === GraphState.ATTACHED) {
             console.log('start');
+            graph.cameraService.set({
+                scale: 1,
+                scaleMax: 1.5,
+            });
             start();
             // graph.zoomTo("center", { padding: 300 });
         }

src/components/Graph/sizesConfig.ts

@@ -0,0 +1,31 @@
+import type {ExplainPlanNodeData} from '@gravity-ui/paranoid';
+
+type Props = {
+    width: number;
+    height: number;
+};
+
+type SizeConfig = Record<ExplainPlanNodeData['type'], Props>;
+
+export const graphSizesConfig: SizeConfig = {
+    query: {
+        width: 40,
+        height: 40,
+    },
+    result: {
+        width: 112,
+        height: 40,
+    },
+    stage: {
+        width: 248,
+        height: 40,
+    },
+    connection: {
+        width: 112,
+        height: 40,
+    },
+    materialize: {
+        width: 190,
+        height: 40,
+    },
+};

src/components/Graph/utils.ts

@@ -2,6 +2,7 @@ import type {TBlock, TConnection, TGraphConfig} from '@gravity-ui/graph';
 import type {Data, GraphNode, Options, Shapes} from '@gravity-ui/paranoid';
 import type {ElkExtendedEdge, ElkNode} from 'elkjs';
 import type {AbstractGraphColorsConfig} from './colorsConfig';
+import {graphSizesConfig} from './sizesConfig';
 
 export const prepareChildren = (blocks: TGraphConfig['blocks']) => {
     return blocks?.map((b) => {
@@ -37,12 +38,12 @@ export const prepareEdges = (connections: TGraphConfig['connections'], skipLabel
 };
 
 export const prepareBlocks = (nodes: Data['nodes']): TBlock[] => {
-    return nodes?.map(({data: {id, name, ...rest}}) => ({
+    return nodes?.map(({data: {id, name, type, ...rest}}) => ({
         id: String(id),
-        is: name,
+        is: type,
         name,
-        width: 200,
-        height: 100,
+        width: graphSizesConfig[type]?.width || 100,
+        height: graphSizesConfig[type]?.height || 40,
         ...rest,
     }));
 };