Multiple Instances of Dom Nodes In Dashboard View about dashboards

[dalogsdon]

We would duplicate it once when we clone hidden cells to show in the hidden area. I am not sure where a third one comes from.

[jhpedemonte]

This is caused by how we show the cells in the hidden section of the dashboard. Our main goal is to show a visual representation of the cells (if they have any output). We first tried to move them from their area in the notebook to the hidden section (and allow moving back), but this breaks Notebook functionality.

In the end, we just duplicated the DOM (but not events and data). That's why there's more than 1 cell with an ID. Not sure how else we would handle this and still show a cell's visual output in the hidden area.

[jhpedemonte]

It seems like we would want to go away from copying the DOM, since it can have bad implications. Some options we thought of as replacements:

1. Only show code in the hidden section. Default to showing the first 5 or 10 lines, but allow user to expand. If user wants to see what that cell outputs, they can either add the cell to the dashboard or click on the edit button to go back to the Notebook view.
2. Use html2canvas, which attempts to recreate an element's DOM and render it visually. This would allow us to show "screenshots" in the hidden section. Main downside is that this does a recreation of the DOM; it doesn't image the actual cell's DOM. That means there could be inconsistencies with rendering.

Any other suggestions?

[jhpedemonte]

Another option:
3. Create another Gridstack which would absolutely position the hidden elements. The main issue here is that both Gridstack instances would use the same container (since we can't move any of the Notebook cells). That means they would overlap -- we'd have to add JavaScript to continually reset the height offset of the hidden Gridstack.