From ff47f0978fb085c4a45297fb70fd0e30560b3609 Mon Sep 17 00:00:00 2001
From: Himanshu Dixit <hudixt@gmail.com>
Date: Sun, 17 Jan 2021 20:48:28 +0530
Subject: [PATCH] Fix flamegraph. // 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.

---
 frontend/src/components/traces/TraceGraph.tsx | 79 +++++++++----------
 1 file changed, 38 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/traces/TraceGraph.tsx b/frontend/src/components/traces/TraceGraph.tsx
index b4d50ee28b..9389f20d48 100644
--- a/frontend/src/components/traces/TraceGraph.tsx
+++ b/frontend/src/components/traces/TraceGraph.tsx
@@ -28,72 +28,69 @@ const _TraceGraph = (props: TraceGraphProps) => {
 
   const params = useParams<{ id?: string; }>();
   const [clickedSpanTags,setClickedSpanTags]=useState([])
+  const [resetZoom,setResetZoom]=useState(false)
 
   useEffect( () => {
+    //sets span width based on value - which is mapped to duration
     props.fetchTraceItem(params.id);
   }, []);
 
   useEffect( () => {
-    if (props.traceItem[0].events.length>0)
+    if (props.traceItem || resetZoom)
     {
       const tree = spanToTreeUtil(props.traceItem[0].events);
-      d3.select("#chart").datum(tree).call(chart);
-    } 
-  },[props.traceItem]); 
+      // 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,resetZoom]);
   // 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
 
- 
-
   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) => {
-
     setClickedSpanTags(z.data.tags);
     console.log(`Clicked on ${z.data.name}, id: "${z.id}"`);
   }
 
-  
   const chart = flamegraph()
-    .width(640)
-    .cellHeight(18)
-    .transitionDuration(500)
-    .minFrameSize(5)
-    .sort(true)
-    .inverted(true)
-    .tooltip(tip)
-    .elided(false)
-    .onClick(onClick)
-    //   .title("Trace Flame graph")
-    .differential(false)
-    .selfValue(true); //sets span width based on value - which is mapped to duration
- 
-  const resetZoom = () => {
-    chart.resetZoom();
-  }
+      .width(640)
+      .cellHeight(18)
+      .transitionDuration(500)
+      .minFrameSize(5)
+      .sort(true)
+      .inverted(true)
+      .tooltip(tip)
+      .elided(false)
+      .onClick(onClick)
+      //   .title("Trace Flame graph")
+      .differential(false)
+      .selfValue(true); //sets span width based on value - which is mapped to duration
 
   return (
 
-    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
-      <Col md={8} sm={24} >
-        <TraceGraphColumn />
-      </Col>
-      <Col md={16} sm={24} >
-        {/* <Card style={{ width: 640 }}> */}
-        <Space direction="vertical" size='middle' >
+      <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+        <Col md={8} sm={24} >
+          <TraceGraphColumn />
+        </Col>
+        <Col md={16} sm={24} >
+          {/* <Card style={{ width: 640 }}> */}
+          <Space direction="vertical" size='middle' >
 
-          <Card bodyStyle={{padding: 80, }} style={{ height: 320, }}>
-            <div>Trace Graph component ID is {params.id} </div>
-            <Button type="primary" onClick={resetZoom}>Reset Zoom</Button>
-            <div id="chart" style={{ fontSize: 12 }}></div>
-          </Card>
+            <Card bodyStyle={{padding: 80, }} style={{ height: 320, }}>
+              <div>Trace Graph component ID is {params.id} </div>
+              <Button type="primary" onClick={setResetZoom.bind(this,true)}>Reset Zoom</Button>
+              <div id="chart" style={{ fontSize: 12 }}></div>
+            </Card>
 
-          <SelectedSpanDetails clickedSpanTags={clickedSpanTags}/>
+            <SelectedSpanDetails clickedSpanTags={clickedSpanTags}/>
 
-        </Space>
-      </Col>
-     
-    </Row>
+          </Space>
+        </Col>
+
+      </Row>
   );
 
 }