wip: styles

Author: sareyu

src/components/Graph/BlockComponents/ConnectionBlockComponent.tsx

@@ -1,14 +1,32 @@
 import type {TBlock} from '@gravity-ui/graph';
+import { Icon } from '@gravity-ui/uikit';
+import {CodeMerge, Shuffle, VectorCircle, MapPin, BroadcastSignal} from '@gravity-ui/icons';
 
 type Props = {
     block: TBlock;
     className: string;
 };
 
+const getIcon = (name: string) => {
+    switch (name) {
+        case 'Merge':
+            return CodeMerge;
+        case 'UnionAll':
+            return VectorCircle;
+        case 'HashShuffle':
+            return Shuffle;
+        case 'Map':
+            return MapPin;
+        case 'Broadcast':
+            return BroadcastSignal;
+    }
+}
+
 export const ConnectionBlockComponent = ({className, block}: Props) => {
+    const icon = getIcon(block.name);
     return (
         <div className={className}>
-            {block.operators ? block.operators.join('') : block.name} #{block.id}
+            {icon && <Icon data={icon}/>} {block.name}
         </div>
     );
 };

src/components/Graph/BlockComponents/StageBlockComponent.tsx

@@ -1,4 +1,5 @@
 import type {TBlock} from '@gravity-ui/graph';
+import { Text } from '@gravity-ui/uikit';
 
 type Props = {
     block: TBlock;
@@ -8,7 +9,8 @@ type Props = {
 export const StageBlockComponent = ({className, block}: Props) => {
     return (
         <div className={className}>
-            {block.operators ? block.operators.join('') : block.name} #{block.id}
+            {block.operators ? block.operators.map((item) => <div key={item}>{item}</div>) : block.name}
+            {block.tables ? <div><Text color='secondary'>Tables: </Text>{block.tables.join(', ')}</div> : null}
         </div>
     );
 };

src/components/Graph/GravityGraph.scss

@@ -7,15 +7,27 @@
 
     &__block-content {
         width: 100%;
-        height: 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);
+        font-size: var(--g-text-body-short-font-size);
+        line-height: var(--g-text-body-short-line-height);
     }
 
+    &__block-id {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        color: var(--g-color-text-secondary);
+        font-size: 10px;
+        line-height: 1;
+    }   
+
     &__block-content.query {
         border-radius: 50%;
+        height: 100%;
     }
 
     &__block-content.result {
@@ -33,5 +45,6 @@
         box-shadow: none;
         background: var(--g-color-base-info-light);
         border: 1px solid var(--g-color-line-info);
+        color: var(--g-color-text-info-heavy);
     }
 }

src/components/Graph/GravityGraph.tsx

@@ -70,7 +70,12 @@ const renderBlockFn = (graph, block) => {
     return (
         <GraphBlock graph={graph} block={block} className={b('block')}>
             {Component ? (
-                <Component graph={graph} block={block} className={b('block-content', block.is)} />
+                <>
+                    <Component graph={graph} block={block} className={b('block-content', block.is)} />
+                    {block.id !== 'undefined' && block.is !== 'result' && <div className={b('block-id')}>
+                        #{block.id}
+                    </div>}
+                </>
             ) : (
                 block.id
             )}

src/components/Graph/sizesConfig.ts

@@ -1,8 +1,7 @@
 import type {TBlock, TConnection, TGraphConfig} from '@gravity-ui/graph';
-import type {Data, GraphNode, Options, Shapes} from '@gravity-ui/paranoid';
+import type {Data, GraphNode, Options, Shapes, ExplainPlanNodeData} 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,13 +36,56 @@ export const prepareEdges = (connections: TGraphConfig['connections'], skipLabel
     });
 };
 
+const BLOCK_TOP_PADDING = 8;
+const BLOCK_LINE_HEIGHT = 16;
+const BORDER_HEIGHT = 2;
+
+const getBlockSize = (block: ExplainPlanNodeData) => {
+    const ONE_LINE_HEIGHT = BLOCK_TOP_PADDING * 2 + BLOCK_LINE_HEIGHT + BORDER_HEIGHT;
+
+    switch (block.type) {
+        case 'query':
+            return {
+                width: 40,
+                height: 40,
+            };
+        case 'result':
+            return {
+                width: 112,
+                height: ONE_LINE_HEIGHT,
+            };
+        case 'stage':
+            const operatorsLength = block.operators?.length ?? 1;
+            const tablesLength = block.tables?.length ?? 0;
+            
+            return {
+                width: 248,
+                height: BORDER_HEIGHT + BLOCK_TOP_PADDING * 2 + (operatorsLength + tablesLength) * BLOCK_LINE_HEIGHT,
+            };
+        case 'connection':
+            return {
+                width: 122,
+                height: ONE_LINE_HEIGHT,
+            };
+        case 'materialize':
+            return {
+                width: 190,
+                height: ONE_LINE_HEIGHT,
+            };
+        default:
+            return {
+                width: 100,
+                height: ONE_LINE_HEIGHT,
+            };
+    }
+}
+
 export const prepareBlocks = (nodes: Data['nodes']): TBlock[] => {
-    return nodes?.map(({data: {id, name, type, ...rest}}) => ({
+    return nodes?.map(({data: {id, name, type, ...rest}, data}) => ({
         id: String(id),
         is: type,
         name,
-        width: graphSizesConfig[type]?.width || 100,
-        height: graphSizesConfig[type]?.height || 40,
+        ...getBlockSize(data),
         ...rest,
     }));
 };