Canvas is not updated when sidebar is hidden
See original GitHub issueSTR:
-
Go to profile
-
Open sidebar in flame graph
-
Open sidebar in callTree
-
Select a node in callTree
-
Switch so flameGraph
-
Close sidebar
Open:
Closed:
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:
- Created 5 years ago
- Comments:5 (5 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I believe this should be fixed by re-drawing on the
panelLayoutGeneration
value changing, or firing theinvalidatePanelLayout
action when moving the sidebar.Hey @edieblu, sorry for the delay answering your question !
As you can see, we use a
flex
layout for theDetailsContainer
. So the first pane’s width will always be100% - 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-L49Look especially at the
onDragEnd
callback: we call an action, that ultimately increments thepanelLayoutGeneration
value in this code: https://github.com/devtools-html/perf.html/blob/17fc9b7681b4602d5d793f8090c9ea019e2ad2b9/src/reducers/app.js#L105-L125As 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 ofcomponentDidUpdate
we’ll schedule a draw when the props change.Thus the solution could be something like this:
drawingGeneration
to theCanvas
component. This should be the only change needed in this class. Note I used the namedrawingGeneration
and notpanelLayoutGeneration
because I think it’s clearer in the context of this component.yarn flow
in the project, you should be able to see all users of theCanvas
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 thatyarn flow
finds their users too.panelLayoutGeneration
through the selectorgetPanelLayoutGeneration
: https://github.com/devtools-html/perf.html/blob/17fc9b7681b4602d5d793f8090c9ea019e2ad2b9/src/reducers/app.js#L170-L171Hope this helps, but please ask if I missed something 😃