UI/UX Improvements for the Instructor techniques setup

[idegtiarov]

Main improvements are added to the Microscopy Technique setup while the Assignment creation.

1. Add possibility for fluent technique choosing in assignment creation flow.
2. Add Drag and Drop to the file(s) uploading process.
3. Re-design flow for microscopy analyses image choosing with and without filters.
4. Add Drag and Drop add to the image selection flow.
5. Add automation Image Set creation if more than one image is added to the certain filter at once.
6. Small fixes and improvements.

[jmclaus]

@idegtiarov The gray highlight rectangle on the left window is overflowing:

compared to:

[jmclaus]

@idegtiarov When uploading an image using the blue choose a file(s) label, could the cursor turn into a pointer to signify it is clickable? Also, the Selected Images and Images Bank look like buttons but are just text column headers. They are too close to the area containing the files below them. And when hovering above them, the cursor turns into an I-beam. It should just be default.

[jmclaus]

@idegtiarov The SAVE SELECTION and DELETE IMAGE(S) buttons overlap a bit the window above them.

[jmclaus]

@idegtiarov The 2 symbolic links to the fonts and images directory are missing in your branch.

You can see them here: https://github.com/starteam/starcellbio_html/tree/develop/html_app/ui

But not there: https://github.com/starteam/starcellbio_html/tree/idegtiarov/ux_tecnique_choice/html_app/ui

Hence fonts and images are not loaded.

[idegtiarov]

@jmclaus thank you for paying my attention to this. I saw that accidentally deleted files, reverted them but missed that they were symbolic links.

[jmclaus]

@idegtiarov No worries, that's why we do PR reviews! Thanks for the fix.

[jmclaus]

@idegtiarov Thanks for the fixes and changes. :+1:

[idegtiarov]

@annagav it seems PR is in a good shape to be merged?

[annagav]

@idegtiarov @laleman When i assign an image to a filter that image disappears from the bank. Such behavior prevents the instructor from assigning the same image to different filters. Is that the desired behavior?

[annagav]

In a case where i assigned an image to a filter and i drag another image to the same filter, that image overwrites that assignment, but the other image does not return to bank, so is not available anymore, unless i close the dialog and reopen it.

[annagav]

The buttons are not fitting the dialog window:

[idegtiarov]

@idegtiarov @laleman When i assign an image to a filter that image disappears from the bank. Such behavior prevents the instructor from assigning the same image to different filters. Is that the desired behavior? We have discussed this with Lourdes it is the desired behavior.

In a case where i assigned an image to a filter and i drag another image to the same filter, that image overwrites that assignment, but the other image does not return to bank, so is not available anymore, unless i close the dialog and reopen it. I've checked this in all browsers and cannot reproduce. After image is assinged to the filter it cannot be overwritten

The buttons are not fitting the dialog I haven't check Firefox in Chrome, Safari it is ok. Fixed.

[annagav]

If you drag the image into the space not occupied by the image, it accepts it and overwrites the other image.

[idegtiarov]

@annagav I've reproduced the bug with image rewriting you've mentioned in the comment. It was rather tricky to do )). Oh missed your last comment with the explanation, it would have saved my time.

Fixed it. Other issues also fixed.

[annagav]

looks good 👍