How can I show a workspace per tab?

Hi, need some help and suggestions to implement the following scenario.

I have added 4 tabs in the header using RED.tabs.create() as seen in the images below. The requirement is to show a palette, workspace and sidebar specific to each tab. So that each tab can have it's own workspace having it's own flow.

Tab One selected

Tab Two selected

In the Node-Red editor-client code, all these components (palette, workspace and sidebar) are wrapped in a div with id red-ui-main-container. Now I'm guessing we will need a red-ui-main-container for the content each of these tabs? Or is there a better way to do this?

Would really appreciate any help extended.

The code not is designed to work like that. You cannot have multiple independent instances of those components.

What problem are you trying to solve with this approach? What does each tab in the header represent?

So the flow/s created in each workspace have a logical relationship with one another. The aim is to have 4 different workspaces each having its own flows yet easily accessible from the tabs.

It's totally ok if they all don't exist all at the same instance. Each workspace, palette and sidebar can be created/destroyed on tab change.

Or could I refresh the info in all these components on tab change without destroying and recreating them?

Thanks for the help.