Uploaded image for project: 'Java Mission Control'
  1. Java Mission Control
  2. JMC-6682

Flamegraph gets cutoff when resized horizontally to increase the width

    Details

    • Type: Bug
    • Status: Resolved
    • Priority: P4
    • Resolution: Fixed
    • Affects Version/s: 8.0.0, 7.1.0
    • Fix Version/s: 8.0.0
    • Component/s: Mission Control Client
    • Labels:
      None

      Description

      Summary:
      When increasing the width of the flamegraph via resizing its container, the chart can get cutoff and not display the entire chart.

      Details:
      The flameview html has an onresize event attribute on the body, which tries to update the d3-flame-graph width with the size of the document window [0]. This new width value gets passed to the graph labels, but doesn't update the svg width [1].. so if there was an increase in width then the new graph width will be larger than the displayed svg - resulting in cutoff. I have raised an issue with this on the upstream repository [2], although this can be addressed by using css to overwrite the width of the svg .. and I should have a PR opened soon that does just that.

      To reproduce:
      1. open the flamegraph view
      2. increase the width of the graph by either increasing the size of the JMC window, or dragging the outline view
      3. the chart will be clipped on the right-hand side

      Screenshots/gifs:
      before-screenshot.png - shows the clipping in JMC
      before-gif.gif - shows how its reproduced
      different-dimensions.jpg - shows a reproducer of the flamegraph but displayed in Chromium for debugging purposes. The cyan is the body, the light green is the svg, and I've underlined the relevant dimensions in red
      hidden-rect.png - inspecting in Chromium, shows that the label extends further than what's shown in the svg

      [0] https://github.com/openjdk/jmc/blob/master/application/org.openjdk.jmc.flightrecorder.flameview/src/main/resources/page.template#L47
      [1] https://github.com/spiermar/d3-flame-graph/blob/2.0.3/src/flamegraph.js#L489
      [2] https://github.com/spiermar/d3-flame-graph/issues/146

        Attachments

        1. before-gif.gif
          before-gif.gif
          1.77 MB
        2. before-screenshot.png
          before-screenshot.png
          265 kB
        3. different-dimensions.jpg
          different-dimensions.jpg
          676 kB
        4. hidden-rect.png
          hidden-rect.png
          265 kB

          Issue Links

            Activity

              People

              • Assignee:
                aptmac Alex Macdonald
                Reporter:
                aptmac Alex Macdonald
              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: