Create a Workflow component

[kinow]

This is related to #87 and #75 .

@oliver-sanders showed us the JupyterLab application, which allows users to add as many notebooks as they like to a sort of dashboard panel.

This looks like an experiment worth a try - with the risk of having some performance issues due to the number of workflows open simultaneously. So I think a Workflow view could be used for that.

JupyterLab uses PhosphorJS. From their about:

PhosphorJS provides a rich set of widgets, layouts, events, and data structures. These enable developers to construct advanced, production-quality, desktop-like web applications that would be otherwise impossible using CSS alone.

In order to include it in our current application, we would need something similar to the following steps:

• Create a Workflow component, that simply loads the Phosphor main view
• Create a WorkflowTreeView component (simpler than the graph for this experiment)
• Make sure the WorkflowTreeView can be added multiple times to the WorkflowTreeView component panel - that probably means using props or some other mechanism in the component to pass the workflow we want it to display

With that I think we would be able to have something similar to JupyterLab.

[kinow]

Examples:

• Tabs
• Menu
• DockPanel
• more here

@oliver-sanders the Workflow component would simply have a template that loads the DockPanel... and each dock would be a WorkflowTreeView (for now, but later we can add graph view too). What do you think?

[oliver-sanders]

DockPanel! Awesome!

[sadielbartholomew]

While it looks powerful, I am not sure that PhosphorJS is the right way to approach creating our UI frame components (panels, tabs, menus etc,). Would it not be much simpler to use Vue component(s) designed for this purpose, so we can create a solution most customised to our own requirements, & so it/they are simpler to incorporate being Vue-based?

From a quick look at the Awesome Vue listing, I can find some components that do very similar to that shown for PhosphorJs. For instance, there is a huge list of possibilities for the UI layout & some more for tabbing. Lots of great features are included in some/most: responsivity, drag, drop, . Some decent examples for are:

• Vue grid layout: about & "basic" demo
• Autoreponsive Vue: about & demo
• Vue tabs: about & "basic" demo
• v-chaceli: about & demo

Actually, I was hoping to be able to have a go at implementing something for the UI frame components, using one the above. How far along are you on this @kinow? If you haven't started, can I take over, as I have some spare time? Otherwise don't worry, I can find something else. Thanks.

[kinow]

It would be grand to have you working on this Sadie! And no need to follow what I described here. It was what I found when looking at JupyterLabs, but if we have something done in Vue.js, then it might be even easier.

Thanks for stepping in!
Bruno