GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 14:25:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix flamegraph.

Browse Source 
// Alternative fix, useRef or createRef with reference to DOM chart. Weird way to handle it, looks like it's relying on immutability. Ideally any componentLibrary will use useRef for opposite data transfer.
This commit is contained in:
Himanshu Dixit 2021-01-17 20:48:28 +05:30
parent 6bd8bf7d9f
commit ff47f0978f
1 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/traces/TraceGraph.tsx
View File

@ -28,32 +28,33 @@ const _TraceGraph = (props: TraceGraphProps) => {
const params = useParams<{ id?: string; }>(); const params = useParams<{ id?: string; }>();
const [clickedSpanTags,setClickedSpanTags]=useState([]) const [clickedSpanTags,setClickedSpanTags]=useState([])
const [resetZoom,setResetZoom]=useState(false)
useEffect( () => { useEffect( () => {
//sets span width based on value - which is mapped to duration
props.fetchTraceItem(params.id); props.fetchTraceItem(params.id);
}, []); }, []);
useEffect( () => { useEffect( () => {
if (props.traceItem[0].events.length>0) if (props.traceItem || resetZoom)
{ {
const tree = spanToTreeUtil(props.traceItem[0].events); const tree = spanToTreeUtil(props.traceItem[0].events);
d3.select("#chart").datum(tree).call(chart); // This is causing element to change ref. Can use both useRef or this approach.
d3.select("#chart").datum(tree).call(chart)
setResetZoom(false)
} }
},[props.traceItem]);
},[props.traceItem,resetZoom]);
// if this monitoring of props.traceItem.data is removed then zoom on click doesn't work // if this monitoring of props.traceItem.data is removed then zoom on click doesn't work
// Doesn't work if only do initial check, works if monitor an element - as it may get updated in sometime // Doesn't work if only do initial check, works if monitor an element - as it may get updated in sometime
const tip = d3Tip.default().attr('class', 'd3-tip').html(function(d:any) { return d.data.name+'<br>duration: '+d.data.value}); const tip = d3Tip.default().attr('class', 'd3-tip').html(function(d:any) { return d.data.name+'<br>duration: '+d.data.value});
const onClick = (z:any) => { const onClick = (z:any) => {
setClickedSpanTags(z.data.tags); setClickedSpanTags(z.data.tags);
console.log(`Clicked on ${z.data.name}, id: "${z.id}"`); console.log(`Clicked on ${z.data.name}, id: "${z.id}"`);
} }
const chart = flamegraph() const chart = flamegraph()
.width(640) .width(640)
.cellHeight(18) .cellHeight(18)
@ -68,10 +69,6 @@ const _TraceGraph = (props: TraceGraphProps) => {
.differential(false) .differential(false)
.selfValue(true); //sets span width based on value - which is mapped to duration .selfValue(true); //sets span width based on value - which is mapped to duration
const resetZoom = () => {
chart.resetZoom();
}
return ( return (
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}> <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
@ -84,7 +81,7 @@ const _TraceGraph = (props: TraceGraphProps) => {
<Card bodyStyle={{padding: 80, }} style={{ height: 320, }}> <Card bodyStyle={{padding: 80, }} style={{ height: 320, }}>
<div>Trace Graph component ID is {params.id} </div> <div>Trace Graph component ID is {params.id} </div>
<Button type="primary" onClick={resetZoom}>Reset Zoom</Button> <Button type="primary" onClick={setResetZoom.bind(this,true)}>Reset Zoom</Button>
<div id="chart" style={{ fontSize: 12 }}></div> <div id="chart" style={{ fontSize: 12 }}></div>
</Card> </Card>