Improve studio/tag/performer filtering

[WithoutPants]

Resolves #2692
Related to #2122

Refactors the studio/tag/performer filter to present items in a selectable list allowing both inclusions and exclusions. Modelled on the Bang website filtering UI.

This is not fully complete: unit tests need to be fixed, some UI issues to be ironed out, and the hierarchical studio/tag filtering needs proper testing. Submitted now to seek feedback on the UX.

[SpedNSFW]

Just looking at that image, it's hard to tell what's going on. "#1" appears to be included, "#2" excluded, but what's going on with the other three? Can I suggest something like what Pornbox uses?

If you're unfamiliar, they list out all their tags and you can search to filter them down. When you click on a tag, you including it. When you hover over a tag (even those not selected yet), there's a button to invert the selection and make it exclude. If the tag is already being excluded, the button is to include. To disable the tag entirely, just click on it again.

Some of these elements (namely listing all the tags out to start with) won't work in Stash. Perhaps after a tag is searched for and added, it's still displayed as it is currently. The cross on the right will remove the tag, but clicking on it inverts it and changes the colour. A hover effect can be added to help show this perhaps.

I whipped up an example quickly.
https://gyazo.com/eadf121d14119861714662d85f609f5d

I realise it's probably not the clearest so maybe somewhere between the two?

[MrX292]

Just looking at that image, it's hard to tell what's going on. "#1" appears to be included, "#2" excluded, but what's going on with the other three? Can I suggest something like what Pornbox uses?

If you're unfamiliar, they list out all their tags and you can search to filter them down. When you click on a tag, you including it. When you hover over a tag (even those not selected yet), there's a button to invert the selection and make it exclude. If the tag is already being excluded, the button is to include. To disable the tag entirely, just click on it again.

Some of these elements (namely listing all the tags out to start with) won't work in Stash. Perhaps after a tag is searched for and added, it's still displayed as it is currently. The cross on the right will remove the tag, but clicking on it inverts it and changes the colour. A hover effect can be added to help show this perhaps.

I whipped up an example quickly. https://gyazo.com/eadf121d14119861714662d85f609f5d

I realise it's probably not the clearest so maybe somewhere between the two?

i build it and tested it which makes it a lot clearer. you are right with "#1" and "#2" the three after that are a list of the tags currently not selected which you can either include by clicking the area from the + till the - and exclude by clicking on the -.

[DogmaDragon]

Partially related #304

[cj12312021]

I think the Bang.com styled UI filter you're using works well here. The Pornbox solution mentioned earlier introduces an additional click for exclusions, making it less optimal.

I think it could be made clearer how to remove an included or excluded item. I see you can remove an item by clicking on it again, but the UI doesn't have an indicator that makes it clear that is what will happen. When hovering over a selected item, we could replace the SVG as such:

[cj12312021]

I wondered if there was a way to clarify what the red minus does. On Bang's filter, it looks like hovering over the minus reveals a hide text which helps makes it clear that clicking it will hide results with that tag. We could benefit from similar behavior. Although instead of hide, maybe we can say exclude.

[Stashing-fr]

I feel like the system shown here will break child tag integration.

Example :

• Create a search including all child tags of "cùmsh0t" (is it possible to do this with this UI system?)
• Add a tag "cùm on chest" as a child tag of "cùmsh0t"
• The research previously created, will it be updated to include new children?

How to configure and show this in the UI?

[MrX292]

I feel like the system shown here will break child tag integration.

Example :

• Create a search including all child tags of "cùmsh0t" (is it possible to do this with this UI system?)
• Add a tag "cùm on chest" as a child tag of "cùmsh0t"
• The research previously created, will it be updated to include new children?

How to configure and show this in the UI?

you would just filter for "cùmsh0t" with Include sub-tags selected like previously.

[cj12312021]

I feel like the system shown here will break child tag integration.

Example :

• Create a search including all child tags of "cùmsh0t" (is it possible to do this with this UI system?)
• Add a tag "cùm on chest" as a child tag of "cùmsh0t"
• The research previously created, will it be updated to include new children?

How to configure and show this in the UI?

As MrX292 mentioned, the Include sub-tags checkbox is still present to cover the child tag integration.

[xiosensei]

following

[kermieisinthehouse]

I am seeing frontend crashes on this branch.

When I load a saved filter from the scenes page, I get

TypeError: this.value.excluded is undefined
    RenderList@http://localhost:3000/src/components/List/ItemList.tsx:45:22
    ItemList@http://localhost:3000/src/components/List/ItemList.tsx:347:151
    TaggerContext@http://localhost:3000/src/components/Tagger/context.tsx:35:30
    SceneList@http://localhost:3000/src/components/Scenes/SceneList.tsx:82:26

And again while loading the homepage (where some rows are displayed filters):

TypeError: this.value.excluded is undefined
    SceneRecommendationRow@http://localhost:3000/src/components/Scenes/SceneRecommendationRow.tsx:28:18
    RecommendationRow@http://localhost:3000/src/components/FrontPage/Control.tsx:30:27
    SavedFilterResults@http://localhost:3000/src/components/FrontPage/Control.tsx:87:28
    Control@http://localhost:3000/src/components/FrontPage/Control.tsx:144:24

[kermieisinthehouse]

I have fixed the errors I mentioned in my latest commit to this branch.

There is one final thing my testing showed: Clicking the green 'include' button on a studio filter causes all of the red exclude buttons to disappear, and vice-versa. This means that you can't have both inclusionary and exclusionary filters on studios. The functionality otherwise works in tags and performers.

[WithoutPants]

There is one final thing my testing showed: Clicking the green 'include' button on a studio filter causes all of the red exclude buttons to disappear, and vice-versa. This means that you can't have both inclusionary and exclusionary filters on studios. The functionality otherwise works in tags and performers.

The thinking behind this is that including studios implicitly excludes all others, however this is false once we introduce studio hierarchies into the mix. I've changed it to be consistent with the other field behaviour.

[kermieisinthehouse]

One last bug report:

In the filter editor, it is impossible to remove a studio or tag that you have included. The little 'x' does not have any action.

All other functionalities tested successfully.

[WithoutPants]

One last bug report:

In the filter editor, it is impossible to remove a studio or tag that you have included. The little 'x' does not have any action.

All other functionalities tested successfully.

I'm not able to reproduce this in Chrome. Which x button are you pressing to remove?

[DogmaDragon]

One last bug report:

In the filter editor, it is impossible to remove a studio or tag that you have included. The little 'x' does not have any action.

All other functionalities tested successfully.

Also can't reproduce, tested on Vivaldi and Firefox.

[kermieisinthehouse]

(Tested on Firefox)

1. Before building this branch (e.g., on master), create a saved scene filter that includes either tags or performer tags.
2. Then, build this branch and start the server.
3. Navigate to the scenes, and load the saved filter.
4. When you have a tag filter applied from the saved filter, click on the pill (but not the "cancel" cross on the pill) to open up the filter editing modal.
5. The included tag has a green checkmark symbol next to it. When you click it, it changes to a cross symbol, but it is not actually removed from the list.

I think the same issue also affects studios.

[WithoutPants]

This also caused a UI crash with saved filters containing a performer criterion. All cases should now be fixed.

[WithoutPants]

$200 bounty added (partial from #663172)