-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
79829a4
commit cf789d6
Showing
9 changed files
with
299 additions
and
140 deletions.
There are no files selected for viewing
36 changes: 36 additions & 0 deletions
36
web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameAxis.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react'; | ||
import { FlameGraphConfigContext } from './FlameGraphConfigContext'; | ||
|
||
export interface FlameAxisProps { | ||
width: number; | ||
} | ||
|
||
export const FlameAxis = ({ width }: FlameAxisProps) => { | ||
const { config } = React.useContext(FlameGraphConfigContext); | ||
const { padding, color, yAxisCount } = config; | ||
const actualWidth = width - padding.left - padding.right; | ||
|
||
return ( | ||
<> | ||
{Array.from(Array(yAxisCount)).map((_, i) => { | ||
return ( | ||
<line | ||
key={i} | ||
x1={(actualWidth / yAxisCount) * i + padding.left} | ||
y1={0} | ||
x2={(actualWidth / yAxisCount) * i + padding.left} | ||
y2="100%" | ||
stroke={color.axis} | ||
/> | ||
); | ||
})} | ||
<line | ||
x1={width - padding.right} | ||
y1={0} | ||
x2={width - padding.right} | ||
y2="100%" | ||
stroke={color.axis} | ||
/> | ||
</> | ||
); | ||
}; |
120 changes: 120 additions & 0 deletions
120
web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameGraph.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
import React from 'react'; | ||
import { throttle } from 'lodash'; | ||
import cloneDeep from 'lodash.clonedeep'; | ||
import { FlameNode, FlameNodeClickHandler, FlameNodeType } from './FlameNode'; | ||
import { FlameAxis } from './FlameAxis'; | ||
import { FlameGraphConfigContext, flameGraphDefaultConfig } from './FlameGraphConfigContext'; | ||
import { FlameTimeline } from './FlameTimeline'; | ||
|
||
export interface FlameGraphProps<T> { | ||
data: FlameNodeType<T>[]; | ||
start?: number; | ||
end?: number; | ||
onClickNode?: FlameNodeClickHandler<T>; | ||
} | ||
|
||
export const FlameGraph = <T,>({ data, start = 0, end = 0, onClickNode }: FlameGraphProps<T>) => { | ||
const widthOffset = end - start || 1; | ||
const [config] = React.useState(flameGraphDefaultConfig); | ||
|
||
const prevDepth = React.useRef(0); | ||
const containerRef = React.useRef<HTMLDivElement>(null); | ||
const svgRef = React.useRef<SVGSVGElement>(null); | ||
const [containerWidth, setWidth] = React.useState(0); | ||
const containerHeight = getContainerHeight(); | ||
const widthRatio = (containerWidth - config.padding.left - config.padding.right) / widthOffset; | ||
|
||
React.useEffect(() => { | ||
if (containerRef.current) { | ||
const throttledCalculateHeight = throttle(() => { | ||
setWidth(containerRef.current?.clientWidth || containerWidth); | ||
}, 200); | ||
|
||
const resizeObserver = new ResizeObserver(() => { | ||
throttledCalculateHeight(); | ||
}); | ||
|
||
resizeObserver.observe(containerRef.current); | ||
|
||
return () => { | ||
resizeObserver.disconnect(); | ||
}; | ||
} | ||
}, []); | ||
|
||
const styleNode = (node: FlameNodeType<T>, depth = 0, xOffset = 0, yOffset = 0) => { | ||
const children = node.children || []; | ||
const { height, padding } = config; | ||
const widthPerNode = node.duration * widthRatio; | ||
node.x = (node.start - start) * widthRatio + padding.left; | ||
node.y = depth * height.node + yOffset + padding.top; | ||
node.width = widthPerNode; | ||
node.height = height.node; | ||
let currentXOffset = xOffset; | ||
|
||
children.forEach((child) => { | ||
styleNode(child, depth + 1, currentXOffset, yOffset); | ||
currentXOffset += widthPerNode; | ||
}); | ||
}; | ||
|
||
function getContainerHeight() { | ||
const { height, padding } = config; | ||
return data.reduce((acc, curr) => { | ||
return acc + (getMaxDepth(curr) + 1) * height.node + padding.group; | ||
}, 2 * padding.bottom); | ||
} | ||
|
||
function getMaxDepth(node: FlameNodeType<T>, depth = 0) { | ||
let MaxDepth = depth; | ||
|
||
node.children.forEach((child) => { | ||
const childDepth = getMaxDepth(child, depth + 1); | ||
|
||
MaxDepth = Math.max(MaxDepth, childDepth); | ||
}); | ||
|
||
return MaxDepth; | ||
} | ||
|
||
return ( | ||
<FlameGraphConfigContext.Provider value={{ config }}> | ||
<div className="relative w-full h-full overflow-x-hidden" ref={containerRef}> | ||
<svg width={containerWidth} height={config.height.timeline} className="shadow-md"> | ||
<FlameTimeline width={containerWidth} start={start} end={end} /> | ||
</svg> | ||
<div className="w-full h-[calc(100%-3rem)] overflow-y-auto overflow-x-hidden"> | ||
<svg width={containerWidth} height={containerHeight} ref={svgRef}> | ||
<FlameAxis width={containerWidth} /> | ||
{containerWidth && | ||
// group별 렌더링 | ||
data.map((node, i) => { | ||
if (i === 0) prevDepth.current = 0; | ||
|
||
const { height, padding, color } = config; | ||
const newNode = cloneDeep(node); | ||
const currentNodeDepth = getMaxDepth(newNode); | ||
const yOffset = prevDepth.current * height.node + padding.group * i; | ||
|
||
styleNode(newNode, 0, 0, yOffset); | ||
prevDepth.current = currentNodeDepth + prevDepth.current + 1; | ||
|
||
return ( | ||
<React.Fragment key={node.id}> | ||
<FlameNode node={newNode} svgRef={svgRef} onClickNode={onClickNode} /> | ||
<line | ||
x1={0} | ||
y1={yOffset - padding.group / 2 + padding.top} | ||
x2={containerWidth} | ||
y2={yOffset - padding.group / 2 + padding.top} | ||
stroke={color.axis} | ||
/> | ||
</React.Fragment> | ||
); | ||
})} | ||
</svg> | ||
</div> | ||
</div> | ||
</FlameGraphConfigContext.Provider> | ||
); | ||
}; |
29 changes: 29 additions & 0 deletions
29
web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameGraphConfigContext.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React from 'react'; | ||
import { colors } from '../../constant'; | ||
|
||
export const flameGraphDefaultConfig = { | ||
height: { | ||
node: 20, | ||
timeline: 48, | ||
}, | ||
padding: { | ||
top: 8, | ||
bottom: 0, | ||
right: 10, | ||
left: 10, | ||
group: 20, | ||
}, | ||
color: { | ||
axis: colors.gray[300], | ||
time: colors.gray[400], | ||
}, | ||
yAxisCount: 10, | ||
}; | ||
|
||
export const FlameGraphConfigContext = React.createContext<{ | ||
config: typeof flameGraphDefaultConfig; | ||
// setConfig: React.Dispatch<React.SetStateAction<typeof flameGraphDefaultConfig>>; | ||
}>({ | ||
config: flameGraphDefaultConfig, | ||
// setConfig: () => {}, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/FlameTimeline.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from 'react'; | ||
import { FlameAxis } from './FlameAxis'; | ||
import { FlameGraphConfigContext } from './FlameGraphConfigContext'; | ||
|
||
export interface FlameTimelineProps { | ||
width: number; | ||
start: number; | ||
end: number; | ||
} | ||
|
||
export const FlameTimeline = ({ width, start, end }: FlameTimelineProps) => { | ||
const { config } = React.useContext(FlameGraphConfigContext); | ||
const { padding, yAxisCount } = config; | ||
const actualWidth = width - padding.left - padding.right; | ||
const timeGap = end - start; | ||
|
||
return ( | ||
<> | ||
{Array.from(Array(yAxisCount)).map((_, i) => { | ||
return ( | ||
<text | ||
key={i} | ||
x={(actualWidth / yAxisCount) * i + 14} | ||
y={12} | ||
fontSize={'0.625rem'} | ||
letterSpacing={-0.5} | ||
fill={config.color.time} | ||
> | ||
+{((timeGap / yAxisCount) * i).toFixed(1)}ms | ||
</text> | ||
); | ||
})} | ||
<FlameAxis width={width} />; | ||
</> | ||
); | ||
}; |
1 change: 1 addition & 0 deletions
1
web-frontend/src/main/v3/packages/ui/src/components/FlameGraph/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './FlameGraph'; |
Oops, something went wrong.