Gready rendering mode

[mathuo]

The standard behaviour of dockview is to "de-render" any hidden panels (those panels that are not active). This is and will remain the default behaviour however there are some circumstances where it would be more benifical to leave all panels rendered but hidden (display: none) to preserve certain DOM specific state such as scroll position.

[raedle]

Came across this library recently and really digging it. Kudos!

I got a use case for greedy rendering of all tabs within a group where the tabs' content is semi-transparent (i.e., tabs are used as "overlays" for content in the left-most tab.

If I wanted to enable this today (even if hacky) where would be the best place to get started?

[mathuo]

Thanks! Currently it would be enabled at a component level, not at an individual panel level through

<DockviewReact ... renderMode='gready'/>

although the plan would be to make this a panel level parameter.

Little confused on your use case, any chance you could explain in some more detail so I can get a better idea of what you are trying to achieve? For example currently when hidden in gready mode with display: none it wouldn't be possible for the user to interactive with panel but it seems potentially you want multiple panels visible at once within one container?

Happy to publish experimental builds directly from this branch to npm under an experimental tag once it's stable enough to try though.

[raedle]

For my use case, it would be ok if the setting is on the component level.

Use case:

I have a bunch of computer vision ML models that infer segmentation masks or bounding boxes for objects in an image. To compare the different checkpoints, I would like to have a flexible layout that would allow me to arrange model outputs side-by-side or layered on top of each other in z-index. The latter is to compare model results pixel-wise.

The dockview component already provides most of the UI and interaction that I want. For example, I can arrange outputs rendered in panels side-by-side where each panel contains the input image and segmentation masks or bounding boxes on top of an image (as SVG elements).

Now, for the z-index layering, it should render the input image in one tab, and then tabs on top in the same tab group should just render the segmentation masks or bounding boxes. Maybe one way to think about this is the layers view in Photoshop (see screenshot).

So, for this to work, it needs to render contents of all tabs, with each tab having a transparent background, so it shows the contents of the tabs "underneath"

[ghost]

Hello @mathuo any updates on the release of the greedy mode? We love using the library and our use case requires a greedy mode :(

[mathuo]

The work for this PR is essentially done. I am planning to add additional unit tests before an offical release however I will aim to get out an experimental build in the next day or so for those interested in early usage.

[mathuo]

I've published the current state of this branch as an experimental build which can be installed through the following command.

npm install dockview@0.0.0-experimental-a2a4e68-20231225

Variable names are subject to change however the core behaviours of what you see here are what is intended to be merged into master and released into an offical build soon.

You can specify a renderer for a specific panel through the renderer prop. When set at the panel level this information is persisted as a part of the serialized layout toJSON() which can be re-created through fromJSON(...).

api.addPanel({
     id: 'my_panel_id',
     component: 'my_component',
     renderer: 'gready' // or 'destructive'
});

If no renderer is provided the default will be used which can be specified at the component level described below. The default is destructive which is the current behaviour in existing versions of dockview.

If you want to change the default behaviour you can specify a defaultRenderer at the component level. This information is not persisted as a part of any serialized layout.

<DockviewReact {...otherProps} defaultRenderer={'gready'}/>

[mathuo]

Refer to #365 for beta builds and documentation of this feature.

[mathuo]

This has been release with version 1.9.0. Docs here

@raedle I've opened another Issue for the "ovlerayed contents" idea here