Vueify Tool Form Data Selector

[guerler]

This PR rewrites the data selector field for tool forms using Vue and TypeScript. It replaces the previous select2 fields with vue-multiselect. The overall appearance of the input field has only been minimally adjusted, however there are some changes:

Move File Browser to Button Group
The file dialog button was previously placed to the right of the select field and is now shown in the button group on the left. The folder icon has been replaced with a dots/ellipsis to indicate that more datasets can be selected.

Treat DCE's as separate source
Dataset Collection Elements are not merged into the hda or hdca options list of the server response anymore but are instead treated as separate source. Server response in basic.py has been modified to account for that. However when it comes to displaying, the dce's are like before in the corresponding hda/hdca select fields.

TODO's

• Avoid flickering when switching between source types
• Allow width resizing and word break in multiselect field
• Augment dce handling to properly match batch modes
• Add test cases, streamline source handling
• Add handling for optional data fields if not already covered
• Refine data matching when using file dialog

How to test the changes?

(Select all options that apply)

• I've included appropriate automated tests.
• This is a refactoring of components with existing test coverage.
• Instructions for manual testing are as follows:
  1. [add testing steps and prerequisites here if you didn't write automated tests covering all your changes]

License

• I agree to license these and all my past contributions to the core galaxy codebase under the MIT license.

[jmchilton]

The DCE idea is cool - this feels a lot more helpful and structured. Thanks for implementing that.

[guerler]

Thanks for looking into it. I was wondering if this mechanism is also necessary for the ldda's. I have implemented it for now because that is how it was designed, but it might make more sense if the file dialog just imports the library datasets upfront and returns regular dataset and collection ids, instead of leaving that task to the tools api, but that's probably a question for the future.

[mvdbeek]

Dataset Collection Elements are not merged into or disguised as hda or hdca entries anymore but are instead treated as separate source.

This looks wrong on first glance, I think this would break establishing what kind of map over we're dealing with. Please don't merge this before I haven't reviewed this.

[mvdbeek]

dce's are displayed when attempting to re-run a tool which consumed dce's but since users cannot select other dce's, the entry is displayed in a dismissible alert box instead of a select field. Dismissing the dce allows users to select an alternative input from the hda or hdca select fields.

Users used to at least know if this was mapped a collection, and they can of course select another item (DCE or not) by dragging it in. I think this makes the rerun UX worse

[guerler]

dce's are displayed when attempting to re-run a tool which consumed dce's but since users cannot select other dce's, the entry is displayed in a dismissible alert box instead of a select field. Dismissing the dce allows users to select an alternative input from the hda or hdca select fields.

Users used to at least know if this was mapped a collection, and they can of course select another item (DCE or not) by dragging it in. I think this makes the rerun UX worse

You can still drag another item into it, but you cannot combine dce with items of other types, which doesn't seem like a common use case to be honest.

[mvdbeek]

I don't think we should have dce in the interface. We used to just say Select: <element_identifier>. If you really want to knock it out of the park you could let users navigate to the parent collection and/or say <element_identifier>: Element of Dataset Collection or <element_identifier>: Dataset Collection Element or Selected Dataset Collection Element: <element_identifier>

[guerler]

@mvdbeek decided to replace dce with as dataset and as dataset collection depending on what the dce represents. I think we should leave more sophisticated labeling of dce entries to follow-ups.

Looks better now, but haven't reviewed yet

[mvdbeek]

Is the styling of the select content intentional ? It doesn't seem to align with our other colors

It looks fine, but I don't feel qualified to make a judgement about the event bus. My gut feeling is that it's usually not a good idea, but maybe this is a good use ?

[guerler]

Yes, the styling is standard and unrelated to this PR. This input element reuses the regular form select field. Styling options should be adjusted there. Regarding the eventbus, the usage of the eventbus avoids side effects and is cleaner than directly setting the value. It is also a non-critical feature since it is only used to show/hide the spinner. I think it is important to introduce such a critical input element change like this one early in the release cycle.

[dannon]

Thanks for swapping out the eventBus and the other changes -- it's definitely better to use the standard interfaces/pattern here. This is working pretty nicely in my testing; let's go ahead and get it into dev!