Tabbed Windows

[fusepilot]

It would be great to have tabbed windows similar in function to VSCode's.

Would this feature be in the project's desired scope?

[nomcopter]

Yeah I think it would make sense in Mosaic. Will mull over implementation and API.

Do you think tabs should be a global flag or only certain panes/views should be tabbable?

[fusepilot]

I think being able to have certain panes/views be tabbable would be the expected behavior. But I see how this could affect the current header design and its consistency across the entire mosaic. So maybe it would be best as a global flag? Not sure. I'll look for more references of how other applications do it to see if someone figured out a better way.

[nomcopter]

Hmm.. If Mosaic adds a MosaicTabbedWindow then it could be possible to render the views that should support tabs with it and views that don't support it with MosaicWindow.

My current thought is to just make it a global and when it is enabled Mosaic operates with

interface MosaicTab<T> {
  key: React.Key; // Need something for React to key off of
  tabs: T[];
  activeIndex: number;
}
type MosaicTabbedNode<T> = MosaicTabbedParent<T> | MosaicTab<T> | T;
interface MosaicTabbedParent<T extends MosaicKey> {
  direction: MosaicDirection;
  first: MosaicTabbedNode<T>;
  second: MosaicTabbedNode<T>;
  splitPercentage?: number;
}

type TabbedTileRenderer<T extends MosaicKey> = (t: T | MosaicTab<T>, path: MosaicBranch[]) => JSX.Element;

Then the work needs to be done factor out reusable code from MosaicWindow and create MosaicTabbedWindow that has the desirable functionality.

[bruno12mota]

Any room to change the MosaicTabbedParent structure to something that enables other type of structures? Since the current one only supports two children it's a limit to expanding this and actually leads to a wrong behavior imo. Made a screencast of what I mean:

grid.mov.zip

If we're adding tabs for example we need a structure that allows different types of areas. Here's my suggestion (similar to golden layout):

{
  type: 'Row',
  children: [
    {
      type: 'Column',
      children: [
        {
          type: 'Window',
          id: 'a',
        },
        {
          type: 'Component',
          id: 'b',
        }
      ]
    },
    {
      type: 'Stack',
      children: [
        {
          type: 'Component',
          id: 'c',
        },
        {
          type: 'Component',
          id: 'd',
        }
      ]
    }
  ]
}

This seems to cover everything, let me know your thoughts.

[nomcopter]

Yeah this might be a good opportunity to lump a fix to #31 in.
One needs to figure out a way to handle splitPercentage and backwards compatibility (for persisted trees). Moving things away from the current binary tree implementation would be a sizable rework but the UX improvement seems desirable.

[Zentendo]

Would very much like to see this implemented. Currently this is the only non-broken, Typescript supported, pure React (no JQuery dependency, ect.) alternative to something like Golden Layout, a library which has caused me nothing but problems. But tabs are a major missing feature for me.

[nealus]

You could try https://www.npmjs.com/package/flexlayout-react for tabs

[wallaceturner]

do you know if any of the forks have attempted this? is there otherwise any update on how hard this would be to implement or whether its in the pipeline. like @Zentendo comment, this is an amazing library but the lack of tabs is a bit of blocker.

[zning]

Yeah I think it would make sense in Mosaic. Will mull over implementation and API.

Do you think tabs should be a global flag or only certain panes/views should be tabbable?

Any agenda for this implementation? It would be a great feature

[robertu]

I have tried this library (flexlayout) with BluePrint. You can see if it has any use to you: https://github.com/robertu/FlexLayout-bp3-demo

[zning]

I have tried this library (flexlayout) with BluePrint. You can see if it has any use to you: https://github.com/robertu/FlexLayout-bp3-demo

I couldn't open it when running "yarn start" or "yarn run start". Showing:"error Command failed with exit code 127"

[robertu]

I couldn't open it when running "yarn start" or "yarn run start". Showing:"error Command failed with exit code 127"

I did it just second ago and got:

Compiled successfully!

You can now view blueprint-layout-demo in the browser.

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

I'm using node v11.12.0 and yarn 1.13.0

[zning]

I couldn't open it when running "yarn start" or "yarn run start". Showing:"error Command failed with exit code 127"

I did it just second ago and got:

Compiled successfully!

You can now view blueprint-layout-demo in the browser.

  http://localhost:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

I'm using node v11.12.0 and yarn 1.13.0

When I checked the yarn version, it automatically installed a yarn, so I guess I might have to install that after I download the package.
And that's exactly what I'm looking for! It would be so cool if you can drag the window around to get it tabbed or as a separate window. Any idea what's the author @nomcopter think of this and the possibility to get it work for this library?

[robertu]

It would be so cool if you can drag the window around to get it tabbed or as a separate window.

You can drag it and place it in a different part of the screen. The same way as in FlexLayout example.
Just create as many as you wish by clicking any option in "File" menu, then drag them by the titlebar.

[zning]

It would be so cool if you can drag the window around to get it tabbed or as a separate window.

You can drag it and place it in a different part of the screen. The same way as in FlexLayout example.
Just create as many as you wish by clicking any option in "File" menu, then drag them by the titlebar.

Sorry, my bad. I meant that it is so cool that you can do all those things ^_^
But seems like that library is rather new and need lot of changes to make the switch. It would be so cool if it could happened in this library

[nomcopter]

I won't have time to work on it personally - but accepting PRs!

[zning]

I won't have time to work on it personally - but accepting PRs!

Really appreciated! It's really hard to find such a decent library those days

[troygibb]

Hey there! My team recently introduced Tabs on top of react-mosaic in our project Webviz. We didn't build it directly into our fork of react-mosaic, but I documented how we did it in a gist here if anybody wants to try something similar.

Thanks @nomcopter for the great project! Maybe we'll work this change into react-mosaic fully one of these days 😛