UIs for systematic selection

[RadStr]

This issue should solve the final form of UI for systematic selection (#751), which has 2 parts: Filtering and extension.

Extension

Currently there is dialog, which is positioned near top and slightly transparent, so we can still look at the canvas to see how the selection changes. We included tooltips explaining the UI.

Ideally it shouldn't be dialog because we may want to move around the canvas to see how the selection changed after pressing the blue "extend" button. Actually the extend button may not be even needed, we can allow only one iteration of extension (the green button will perform the action of extension and close dialog) and if the user wants to extend again then he has to open the dialog once more. Anyways it has to be dialog-like component since it isn't simple enough to be part of node's toolbar for example. By dialog-like I mean for example dialog or part of sidebar.

Dialog preview:

Tooltips:

Filtering

I think that having dialog here is ok, since we don't need to look at the canvas and it is always one iteration action. Usage of text instead of icons/emojis should be also fine. The text in current dialog preview could be improved - for example - in title have: Filtered selection includes and then shorten the text for checkboxes

Dialog preview:

[jakubklimek]

In the "extend current selection" I would call it "Extend selection" and I would do a (responsive) 2 column dialog. The two columns would be "Incoming" and "Outgoing". In each, there would be 3-4 checkboxes corresponding to the edge types just written, no icon.

I write 3-4, because I do not know what the square (4th) option means. Is it profile? Non-profile? I think we do not need this.

And maybe (for testing) a checkbox controlling whether or not to include the classes at the ends of those relationships. I am now not sure if one of the options would be a clear winner.

For the filtering, it is fine like this, but the texts need to be consistent ("in result" is only in first 2 options, I would remove it, Include is repeated - I would remove it). I would call it "Restrict selection", and include some padding in the dialog,

A separate issue is the icons that open this dialog. I think we need to pick an icon library and stop using emojis - one of the reasons being that they are not all defined on all common platforms (e.g. Android) and they look different everywhere, which is not OK for a control.