Moving Pluto Cells within HTML

[Niels1006]

Hey,

I'm curious whether it is somehow possible to move a whole pluto cell to another location within the HTML structure of a website.

<pluto-cell id="1"/> would be one cell, that is at the default location. Could I somehow move that cell somewhere else while it keeps its functionality and reactivity, for example:

<div class="container">
     <div class="container-2">
        <pluto-cell id="1"/>
    </div>
</div>

Are there already some JavaScript functions that could be modified to allow for that?

[disberd]

I think it's not possible to move cells outside of their original container while maintaining their functionality.

If you just move them around (e.g. with node.appendChild) they will automatically be put back in their place whenever you modify something in the notebook.
If you duplicate the cell, you will lose the reactivity part (unless you create an observer that re-duplicate the cell code whenever your cell changes for example, but that is not working in every circumstance).

If you can explain a bit better why you want this functionality, there might be alternatives way of achieveing your end target without this specific functionality

[fonsp]

Hey @Niels1006 !

First suggestion depends on where you want to place the cell and what your application is, but you could use embed_display (docs) to display an object somewhere else using Pluto's object viewer.

[fonsp]

You could also use the isolated_cell_id feature: #1544 . You just take the current URL and add &isolated_cell_id=b7827d8-b8273bd827-3b8732 with the actual cell id, and you open it in a new tab. This gives a viewer of just that cell. You could then put this inside an iframe in the notebook. But I wonder if it will work well with the secret.

[Niels1006]

Hey! Thanks for all of your suggestions!

You could also use the isolated_cell_id feature: #1544 . You just take the current URL and add &isolated_cell_id=b7827d8-b8273bd827-3b8732 with the actual cell id, and you open it in a new tab. This gives a viewer of just that cell. You could then put this inside an iframe in the notebook. But I wonder if it will work well with the secret.

Putting it in an iframe sounds like an interesting idea I'm experimenting with right now.

You can't move the node in the DOM like you suggested, but you could add a <style> that selects the pluto-output node and positions it absolutely, like is done here https://github.com/fonsp/Pluto.jl/pull/970/files#diff-d2c71fd9da42d733099a757332623c958497689c3c454e637f61970c00171c0cR739-R749 With some JS you could also put a placeholder element somewhere and constantly measure this element and position and size the actual pluto-output element to match.

I also have thought about that, but implementing this doesnt seem to be as convient for the user as I want it to be, but I will have a look on that again.

You could also fork Pluto for you application :)

I probably will, but for that I still have to read a lot of Pluto code (:

Right now my approach is to move the cell as soon as it's finished running, which seems to be a decent approach. But putting a cell in an iframe would even be better!

[fonsp]

You can't move the node in the DOM like you suggested, but you could add a <style> that selects the pluto-output node and positions it absolutely, like is done here https://github.com/fonsp/Pluto.jl/pull/970/files#diff-d2c71fd9da42d733099a757332623c958497689c3c454e637f61970c00171c0cR739-R749 With some JS you could also put a placeholder element somewhere and constantly measure this element and position and size the actual pluto-output element to match.

[fonsp]

You could also fork Pluto for you application :)