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>
   );
 
 }