question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas is not updated when sidebar is hidden

See original GitHub issue

STR:

  1. Go to profile

  2. Open sidebar in flame graph

  3. Open sidebar in callTree

  4. Select a node in callTree

  5. Switch so flameGraph

  6. Close sidebar

Open: screen shot 2018-09-20 at 14 23 37

Closed: screen shot 2018-09-20 at 14 23 26

The component is shared and also shares/ keeps the node info in the sidebar (which is correct), it does not update as the sidebar in the callTree is still open. When I close the sidebar in the CallTree, flame graph is updated. It probably just needs a check on sidebar close, if the canvas needs an update. Please note, this just happens in the canvas.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
gregtatumcommented, Sep 20, 2018

I believe this should be fixed by re-drawing on the panelLayoutGeneration value changing, or firing the invalidatePanelLayout action when moving the sidebar.

0reactions
julienwcommented, Oct 8, 2018

Hey @edieblu, sorry for the delay answering your question !

As you can see, we use a flex layout for the DetailsContainer. So the first pane’s width will always be 100% - sidebar width - splitter width automatically, thanks to the fact we use the flex layout, and we don’t need to be explicit about it.

The problem here is different. Indeed the charts are drawn using a canvas, so what we need here is redraw the canvas.

If you look at the implementation for DetailsContainer, you’ll find this code: https://github.com/devtools-html/perf.html/blob/17fc9b7681b4602d5d793f8090c9ea019e2ad2b9/src/components/app/DetailsContainer.js#L44-L49

Look especially at the onDragEnd callback: we call an action, that ultimately increments the panelLayoutGeneration value in this code: https://github.com/devtools-html/perf.html/blob/17fc9b7681b4602d5d793f8090c9ea019e2ad2b9/src/reducers/app.js#L105-L125

As Greg suggested above, the solution should be that we force redrawing our canvases when this value changes.

Our canvas class we use everywhere is implemented in https://github.com/devtools-html/perf.html/blob/master/src/components/shared/chart/Canvas.js. It’s not a “connected” component (it means the component isn’t connected to the redux store) and so we can’t fetch the value for the panelLayoutGeneration directly here, but instead we can pass it along everywhere it’s used. Then thanks to the code of componentDidUpdate we’ll schedule a draw when the props change.

Thus the solution could be something like this:

  1. add a mandatory prop drawingGeneration to the Canvas component. This should be the only change needed in this class. Note I used the name drawingGeneration and not panelLayoutGeneration because I think it’s clearer in the context of this component.
  2. Then, if you run yarn flow in the project, you should be able to see all users of the Canvas component that need to be updated to pass this value. These components are probably not connected either, so you’ll need to add a prop to these component too, so that yarn flow finds their users too.
  3. Ultimately you’ll need to update some connected components and get the value panelLayoutGeneration through the selector getPanelLayoutGeneration: https://github.com/devtools-html/perf.html/blob/17fc9b7681b4602d5d793f8090c9ea019e2ad2b9/src/reducers/app.js#L170-L171

Hope this helps, but please ask if I missed something 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Solved: Side Bar Disappeared - Canvas Community
Solved: Somehow the sidebar with topics like modules, discussions, media, grades, ect. disappeared. It makes it very difficult to navigate ...
Read more >
Bootstrap Off-canvas Sidebar Left and Right Fixed
Use hidden-md and hidden-sm to match display: none property with the iPad's width <div class="col-xs-6 col-sm-2 sidebar-offcanvas hidden-md ...
Read more >
How to hide items on Canvas navigation bar - YouTube
How to hide items on Canvas navigation bar. Watch later. Share. Copy link. Info. Shopping. Tap to unmute. If playback doesn't begin shortly, ......
Read more >
How to Edit Canvas Course Navigation Menu
To enable a link in the hidden section [1], click the Options icon [2] and click the Enable button [3]. You can also...
Read more >
Design Update: A new sidebar for the canvas view - Canvanizer
Especially if a piece of the system, the code, or the interface has not been revisited for quite some time this is in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found