Select multiple items for batch

[manthey]

For batch processing, anywhere where we accept a single item, image, or file, there needs to be a way to select multiple such resources. The UI could be extended to have an extra button for selecting multiples. For instance:

where this would change the fileWidget.pug file from

button.btn.btn-default.s-select-file-button(type='button')
  i.icon-folder-open

to

button.btn.btn-default.s-select-file-button(type='button')
  span.fa-stack
    i.icon-folder-open
    i.icon-plus.fa-cancel-cover(style="color: inherit")

or something similar (and, it would be better to use a class and stylesheet rather than setting the style as written above).

When the multiple item/image/file button is selected, the widget would show something akin to the new-file variant where the user can pick a directory and type a "name", except that the name would be a regular expression to limit the item/image/files in that directory (as a search -- requiring ^ and $ to anchor the ends if desired; this way an empty string matches all). Ideally, the UI would show or filter items based on the regex.

When the job is submitted, code in the widgetCollection.js file would pass the folder ID to a <param>_folder parameter (this will be added in a separate PR) and the regex in the <param> parameter (essentially the same as a new-file).

[manthey]

@BryonLewis PR #135 adds the necessary support for batch processing, so you might want to base your work on that branch.

[BryonLewis]

@manthey The UI showing the filtering based on the regex: Was the intention to do that by just grabbing the list item names and doing some show/hide or styling/highlighting based on the regex text field with DOM manipulation? I assume the idea of using the folder ID and the filter regex instead of having true multi-select is to avoid having to make these changes in girder. There might be a way I could reach into girder BrowserWidget->HierarchyWidget->ItemListWidget and do the filtering but it doesn't feel proper to do it that way.

[manthey]

We can have folders with literally tens of thousands of items. While we could expose the checkbox interface and have the user check those files that are desired, this doesn't scale. I expect that, most often, no regex is going to be specified (select all items).

For what its worth, it is fairly straightfoward to hook to the rendering of the browser widget and turn on the checkbox interface (I haven't tried to actually use the checked results after doing so), but for large lists this isn't very useful.

[BryonLewis]

Just want to confirm that I am on the right path with this at least in terms of style.

Another file dialog type called 'multi' which when loaded will provide the user with an input box to enter a regular expression to filter the currently viewed items and highlight those that match.

some jQuery applied to the input box change event (Need to check in girder if there is an event I can hook into instead) that will check the names and apply a class for selection if the name matches the expression.

Notes for myself:

• Check to see if there is an alternative event that can be used for the input box text changing, perhaps something that girder emits
• Handle initial loading of a folder to indicate that all are selected with a blank filter
• Update the return value so it passes the folderID and the expression

[manthey]

@BryonLewis Yes, that looks like what I was expecting.

Can you bind to the input event rather than the change event to filter as the user is typing?

[BryonLewis]

@manthey Yup that shouldn't be any issue. Just with the assumption there aren't 1000 items in the panel at once (typically I think the max is 100).

[manthey]

If we always open the browser widget with the paging option (as opposed to the show more option), then this will be true.

[BryonLewis]

Okay another Update I think I have a pathway through the system that seems to function.

• There is a new type called multi which is used to represent a multi-folder implementation.
• All models that are of type [item, image, file, multi] have that additional open Icon added to them.
• When a user clicks on the multi-open it will change the model type to 'multi' while saving the old type in the model attributes.
• If a user decides to click back on the single-open it will swap itself back to the single type and open the browser widget with the default options.
• The multi type model browser widget looks similar to 'new-file' type with some changes for using regular expressions.
• Opening the browser widget with model type multi will bind on render a jquery 'input' change event on the filename input field.
• When this field's input changes it attempts to convert the input into a regEx and checks all of the items in the list to see if they match. If they match it will add the girder 'g-select' class to highlight them.
• If the regEx fails because it isn't valid, I will manually add validation classes to the input to indicate that the user needs to enter in a valid Regular expression.
• The Submit validation has another check for a valid regular expression before selecting the value.
• Once the user selects a regular expression it will create an Item model similar to the 'new-file' mode but will add another data Item called folderName. The folderName is used to provide a relevant input in the base inputBox.
• If an input type is 'multi' and has data set it will check for the 'folderName' and the 'value' (regex) and print them out in the format of {folderName}/RegEx({expression})
• On submission of the analysis it will treat the 'multi' type exactly like the 'new-type' passing the name as a regular expression and the folderId to '_folder'

I hope this is all following the intention/idea you had for this.

Things left to do:

• - I can't figure out how to highlight all items on load without jumping into girder or some other seemingly hacky way. I would like all items to be highlighted by default seeing as I treat and empty expression as ".*"
• - Add in testing coverage for the new items added to the system.
• - when swapping types (by clicking multi open and back to open) I need to make sure the value gets reset back to default/nothing

[manthey]

This is looking good.

There is a multiple flag which isn't currently handled by the UI or by the batch processing branch. For now, we probably should not expose the multi selector for these inputs (support for these is listed in issue #125). This probably just means adding if (multiple) batchload = false in the fileWidget pug template.

It seems like you should able to hook the browser widget's hierarchy view in some manner to detect when it renders and call the regex highlight function, but I don't know what you'd need to do specifically.

[BryonLewis]

Further notes for myself:
Got the highlighting to work by hooking into the this._hierarachyWidget.itemLiewView ('g:changed') function which should be called when the folder changes and the itemList is fetched and rendered.

Testing:
widgetSpec.js, about line ~595 is where testing is occurring for the different types of data.

• Add checks for the multi-select button in the different types to make sure it is there
• Specifically check to make sure it isn't there if multiple is set
• Check the regex filtering of items that are loaded
• check that switching back and forth between types works (clicking on the g-select-multifile-button sets a defaultType of the old type and if you cancel the item reverts back to the old type and clears the selected value if one exists g-select-file-button
• Won't accept input unless there is a valid regex displayed.
• check for proper values being returned back from the multi with proper text displayed

[manthey]

Added in #138 .