Client/vue/javascript framework

[nekrut]

Critical Path

Done, in dev branch

• [X] Build infrastructure
• [x] Dannon creates a new clean branch for Bootstrap 4 and Bootstrap-Vue
• [x] Bootstrap 4 (upgrade all existing styles)
• [x] Bootstrap-Vue (for new Vue components -- library is integrated, needs a good canonical example still)

Branch progress

• [x] Vuex library inclusion
• [x] Set up central store w/ modules
• [ ] Galaxy user initial vuex store module; use for quotameter as an example.
• [ ] Vue routing
• [ ] Component set for Grid
• [ ] Example: workflow list w/ grid component, reflect state change in tool panel

Grid generalizations

• [ ] Determine appropriate API endpoints for grid
• [ ] Specify these endpoints on OpenAPI
• [ ] Determine how to generate models and API access layer from OpenAPI specification
• [ ] Adapt workflow list prototype Vue SFC to general Grid
  • [ ] Nested component for ratings
  • [ ] Nested component for tags
  • [ ] Nested component for search

Other goals

• [ ] Eliminate page refreshes (panel switches)

Open questions

• Merging models, augmenting/progressive loading of really large stuff
• Swagger generated models?

[dannon]

I'm making a first pass on the workflow model (trying vue-mc for it), adding vuex, and the grid component for rendering the workflows list the first part of this week.

[dannon]

To document it here: Attempted to use vuetable-2, which I liked because of the style and featureset, but it's very opinionated. We can't easily bind it to a vuex data store, use models, etc. -- it just wants to be pointed at an API and allowed to render. After a few discussions, I stepped back to see if I can get https://bootstrap-vue.js.org/ working. This requires an update to bootstrap4, which is a reasonably large project I have in progress in my https://github.com/dannon/galaxy/tree/bower_elimination branch. I've made a lot of progress so far, and if I can get it working we'll have a nice baseline set of vue components to work with moving forward, including a table (grid) component we can customize -- instead of doing it all piecemeal.

vue-mc is working well in my hands, I just need to get the boostrap-vue components working to better render stuff and integrate vuex, and we'll have a concise example of how to move forward.

[dannon]

Pushed to finish the bower-elimination stuff separately as discussed (PR open https://github.com/galaxyproject/galaxy/pull/5652, but we still need to fix, and eventually replace, WYMeditor).

Created the separate BS4 branch a while back (was in the daily status I think). It's here: https://github.com/galaxyproject/galaxy/compare/dev...dannon:bs4

Most of the layout and style works again, all of the build infra with SCSS is in place, etc., but I'm still working on updating things like the buttons, the masthead, and other components which are not backwards compatible and broke during the process. Going to replace the masthead with https://bootstrap-vue.js.org/docs/components/navbar/ as I get closer to integrating that, then we'll be working on the grid components as planned.

[dannon]

WIP-tracking PR for Bootstrap4 is #5807. It's a much larger project than I had intended/hoped it to be, soliciting help there since it's the baseline for moving forward.

[dannon]

Bootstrap 4 is now merged. Moving forward with bootstrap-vue and the workflows grid.

[dannon]

The boostrap-vue library has been added and is used for tooltips and buttons in https://github.com/galaxyproject/galaxy/pull/5940/files#diff-a1b398ef1af9a7f2799b137e55b58075. Since it's in and fairly straightforward to use for new stuff, I'm working on Vuex now.

Easy state to work on was the quotameter, which will also serve as a simple example for bootstrap-vue.

[bgruening]

@dannon what are we doing with this issue?

[dannon]

@bgruening This is a pretty old one we should probably just close out.

There are good examples of vuex for shared state, and we went a different direction with the grid stuff -- deciding on extending a simple b-vue table for them instead of a generic 'grid', since it added no utility over the table. There were a bunch of blockers for routing functionality, but I we do have a few examples of that and the parent app entrypoint will be using it soon.