-
Notifications
You must be signed in to change notification settings - Fork 16
feat: migrate to gravity-ui/graph #2735
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from 16 commits
6b22ba5
598aed4
522b7a0
2c4cf39
70da0b8
0b1eac5
904ea56
5576c55
eec1fe7
c050653
4c7c7bc
8fd8ac5
1a903b3
2c54e70
f79c022
d39d268
36d1f19
fe2651b
613fbe6
50c237c
861dd93
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import { | ||
ArrowsExpandHorizontal, | ||
DatabaseFill, | ||
GripHorizontal, | ||
MapPin, | ||
Shuffle, | ||
} from '@gravity-ui/icons'; | ||
import {Icon} from '@gravity-ui/uikit'; | ||
import type {IconData} from '@gravity-ui/uikit'; | ||
|
||
import {TooltipComponent} from '../TooltipComponent'; | ||
import type {ExtendedTBlock} from '../types'; | ||
|
||
type Props = { | ||
block: ExtendedTBlock; | ||
className: string; | ||
}; | ||
|
||
const getIcon = (name: string): IconData | undefined => { | ||
switch (name) { | ||
case 'Merge': | ||
return DatabaseFill; | ||
case 'UnionAll': | ||
return GripHorizontal; | ||
case 'HashShuffle': | ||
return Shuffle; | ||
case 'Map': | ||
return MapPin; | ||
case 'Broadcast': | ||
return ArrowsExpandHorizontal; | ||
default: | ||
return undefined; | ||
} | ||
}; | ||
Comment on lines
+19
to
+34
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. style: Consider memoizing this function with Context Used: Style Guide - description of repository for agents (link) |
||
|
||
export const ConnectionBlockComponent = ({className, block}: Props) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. style: Component should be memoized with Context Used: Style Guide - description of repository for agents (link) |
||
const icon = getIcon(block.name); | ||
const content = ( | ||
<div className={className}> | ||
{icon && <Icon data={icon} />} {block.name} | ||
</div> | ||
); | ||
|
||
if (!block.stats?.length) { | ||
return content; | ||
} | ||
|
||
return <TooltipComponent block={block}>{content}</TooltipComponent>; | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
type Props = { | ||
className: string; | ||
}; | ||
Comment on lines
+1
to
+3
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. logic: Props interface is inconsistent with other block components. StageBlockComponent and ConnectionBlockComponent expect both |
||
|
||
export const QueryBlockComponent = ({className}: Props) => { | ||
return <div className={className} />; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. should there really be no content here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yes, it's just an empty circle on schema |
||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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>; | ||
}; |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,31 @@ | ||||||
import {Text} from '@gravity-ui/uikit'; | ||||||
|
||||||
import {TooltipComponent} from '../TooltipComponent'; | ||||||
import type {ExtendedTBlock} from '../types'; | ||||||
|
||||||
type Props = { | ||||||
block: ExtendedTBlock; | ||||||
className: string; | ||||||
}; | ||||||
|
||||||
export const StageBlockComponent = ({className, block}: Props) => { | ||||||
const content = ( | ||||||
<div className={className}> | ||||||
{block.operators | ||||||
? block.operators.map((item) => <div key={item}>{item}</div>) | ||||||
: block.name} | ||||||
{block.tables ? ( | ||||||
<div> | ||||||
<Text color="secondary">Tables: </Text> | ||||||
|
<Text color="secondary">Tables: </Text> | |
<Text color="secondary">{i18n('label_tables')}: </Text> |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/Graph/BlockComponents/StageBlockComponent.tsx
Line: 19:19
Comment:
style: hardcoded text 'Tables: ' should use i18n for internationalization
```suggestion
<Text color="secondary">{i18n('label_tables')}: </Text>
```
How can I resolve this? If you propose a fix, please make it concise.
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,45 @@ | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import type {Graph} from '@gravity-ui/graph'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import {Button, Icon} from '@gravity-ui/uikit'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import {cn} from '../../utils/cn'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import MagnifierMinusIcon from '@gravity-ui/icons/svgs/magnifier-minus.svg'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
import MagnifierPlusIcon from '@gravity-ui/icons/svgs/magnifier-plus.svg'; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const b = cn('ydb-gravity-graph'); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const ZOOM_STEP = 1.25; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
interface Props { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
graph: Graph; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
export const GraphControls = ({graph}: Props) => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const onZoomInClick = () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const cameraScale = graph.cameraService.getCameraScale(); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
graph.zoom({scale: cameraScale * ZOOM_STEP}); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const onZoomOutClick = () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const cameraScale = graph.cameraService.getCameraScale(); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
graph.zoom({scale: cameraScale / ZOOM_STEP}); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
const onResetZoomClick = () => { | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
graph.zoom({scale: 1}); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
const onZoomInClick = () => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale * ZOOM_STEP}); | |
}; | |
const onZoomOutClick = () => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale / ZOOM_STEP}); | |
}; | |
const onResetZoomClick = () => { | |
graph.zoom({scale: 1}); | |
}; | |
import {useCallback} from 'react'; | |
const onZoomInClick = useCallback(() => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale * ZOOM_STEP}); | |
}, [graph]); | |
const onZoomOutClick = useCallback(() => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale / ZOOM_STEP}); | |
}, [graph]); | |
const onResetZoomClick = useCallback(() => { | |
graph.zoom({scale: 1}); | |
}, [graph]); |
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
style: event handlers should be wrapped with useCallback
to prevent unnecessary re-renders
const onZoomInClick = () => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale * ZOOM_STEP}); | |
}; | |
const onZoomOutClick = () => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale / ZOOM_STEP}); | |
}; | |
const onResetZoomClick = () => { | |
graph.zoom({scale: 1}); | |
}; | |
const onZoomInClick = useCallback(() => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale * ZOOM_STEP}); | |
}, [graph]); | |
const onZoomOutClick = useCallback(() => { | |
const cameraScale = graph.cameraService.getCameraScale(); | |
graph.zoom({scale: cameraScale / ZOOM_STEP}); | |
}, [graph]); | |
const onResetZoomClick = useCallback(() => { | |
graph.zoom({scale: 1}); | |
}, [graph]); |
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/components/Graph/GraphControls.tsx
Line: 18:30
Comment:
style: event handlers should be wrapped with `useCallback` to prevent unnecessary re-renders
```suggestion
const onZoomInClick = useCallback(() => {
const cameraScale = graph.cameraService.getCameraScale();
graph.zoom({scale: cameraScale * ZOOM_STEP});
}, [graph]);
const onZoomOutClick = useCallback(() => {
const cameraScale = graph.cameraService.getCameraScale();
graph.zoom({scale: cameraScale / ZOOM_STEP});
}, [graph]);
const onResetZoomClick = useCallback(() => {
graph.zoom({scale: 1});
}, [graph]);
```
How can I resolve this? If you propose a fix, please make it concise.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
.ydb-gravity-graph { | ||
&__block { | ||
cursor: auto; | ||
|
||
border: none; | ||
background: none; | ||
} | ||
|
||
&__block-content { | ||
width: 100%; | ||
padding: 8px 12px; | ||
|
||
font-family: var(--g-font-family); | ||
font-size: var(--g-text-body-short-font-size); | ||
line-height: var(--g-text-body-short-line-height); | ||
|
||
border: 1px solid var(--g-color-line-generic); | ||
background: var(--g-color-base-float); | ||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); | ||
|
||
&[aria-haspopup='dialog'] { | ||
cursor: pointer; | ||
} | ||
} | ||
|
||
&__block-id { | ||
position: absolute; | ||
top: 4px; | ||
right: 4px; | ||
|
||
font-size: 10px; | ||
line-height: 1; | ||
|
||
color: var(--g-color-text-secondary); | ||
} | ||
|
||
&__block-content.query { | ||
height: 100%; | ||
|
||
border-radius: 50%; | ||
} | ||
|
||
&__block-content.result { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
&__block-content.stage { | ||
border-radius: 6px; | ||
} | ||
|
||
&__block-content.connection { | ||
display: flex; | ||
align-items: center; | ||
gap: 4px; | ||
|
||
color: var(--g-color-text-info-heavy); | ||
border: 1px solid var(--g-color-line-info); | ||
border-radius: 6px; | ||
background: var(--g-color-base-info-light); | ||
box-shadow: none; | ||
} | ||
|
||
&__tooltip-content { | ||
width: 300px; | ||
padding: 0 8px 8px; | ||
|
||
font-family: var(--g-font-family); | ||
font-size: var(--g-text-body-short-font-size); | ||
line-height: var(--g-text-body-short-line-height); | ||
} | ||
|
||
&__tooltip-tabs { | ||
margin-bottom: 8px; | ||
} | ||
|
||
&__tooltip-stat-row { | ||
display: grid; | ||
grid-template-columns: 100px auto; | ||
gap: 8px; | ||
|
||
margin: 4px 0 0; | ||
|
||
span { | ||
overflow: hidden; | ||
|
||
text-overflow: ellipsis; | ||
} | ||
span:nth-child(1) { | ||
color: var(--g-color-text-secondary); | ||
} | ||
span:nth-child(2) { | ||
word-wrap: break-word; | ||
} | ||
} | ||
|
||
&__tooltip-stat-group { | ||
margin-top: 8px; | ||
} | ||
|
||
&__tooltip-stat-group + &__tooltip-stat-group { | ||
padding-top: 8px; | ||
|
||
border-top: 1px dotted var(--g-color-line-generic); | ||
} | ||
|
||
&__tooltip-stat-group-name { | ||
font-weight: bold; | ||
} | ||
|
||
&__zoom-controls { | ||
position: absolute; | ||
z-index: 999; | ||
top: 8px; | ||
right: 50px; | ||
|
||
display: flex; | ||
gap: 2px; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lets also remove paranoid