Containing Group/Sub-Group relationships

[WithoutPants]

Part of #4905.

Introduces a containing groups/sub-groups group relationship. A group may have any number of containing groups, and any number of sub-groups. The only restriction is that a group hierarchy may not be cyclical. That is, it is not possible to have A -> B -> C -> A, in the same way as the tag hierarchy.

The group relationship includes a description field to describe the relationship. This is currently only shown in the edit page. I intend to include the description in the Groups cards in the Sub-Groups view, but this requires more extensive UI changes first.

Currently, it is only possible to add groups in the UI via editing the containing groups in the edit page and dialog. Improvements to this process, and functionality to reorder sub-groups will be done in a separate PR.

The group relationships are currently shown in Group cards with the group icon for both containing and sub-groups. This is obviously not ideal. Suggestions are needed for icons to differentiate between the two relationships.

Closes #723

[cj12312021]

Alternative icons could look something like this:

Parent

Child

I thought we already had icons for tags to describe these relationships, but I was not able to find them.

[cj12312021]

Another option could be to use one movie icon, which neatly groups both the parent and sub-groups in the popover. This would probably be ideal to minimize the potential growth of these icons on the cards. I can imagine a future where the performer count and gallery count make their way to those cards.

[echo6ix]

Ideally you want to use an icon that's going to be related, similar, or derivative of the Group icon in the main nav menu.

The problem is FontAwesome doesn't have much variation for film icon that Groups are using, other than the light and duotone versions.

• https://fontawesome.com/icons/film?f=sharp&s=light
• https://fontawesome.com/icons/film?f=sharp-duotone&s=solid

Another option could be to use one movie icon, which neatly groups both the parent and sub-groups in the popover. This would probably be ideal to minimize the potential growth of these icons on the cards. I can imagine a future where the performer count and gallery count make their way to those cards.

I think I like this.

[Ronnie711]

Had a browse of FontAwesome (selected free as presumed that's the tier we're operating on ...)

'object-ungroup' seems a good fit for an icon showing that there's a link between two places.

(Bonus suggestion of replacing the film icon with something like 'layer-group' in the header for groups)

[WithoutPants]

Another option could be to use one movie icon, which neatly groups both the parent and sub-groups in the popover. This would probably be ideal to minimize the potential growth of these icons on the cards. I can imagine a future where the performer count and gallery count make their way to those cards.

Do you mean something like this?

The intent with these icons are to provide an at-a-glance view of the counts on both sides of the relationship, containing and sub. I'm not sure how many groups are likely to have both containing and sub-groups. Ideally we'd want to be able to differentiate between groups with sub-groups and the sub-groups, using different icons for each, and then maybe a combined icon when a group has both. To my mind, this looks a little verbose for the most common use case (having either sub-groups or containing groups).

[cj12312021]

I was actually thinking much simpler where count would be an accumulation of all the relationships present. Hovering over the count would then break down which parent and group relationship. To me, I'd be more interested in knowing that the card has a relationship, not necessarily how many each exists. I'm not sure how useful seeing both at glance really is.

I think what you have in the image works for displaying both. I don't think it's any less verbose than having two separate icons. We could probably come up with a better way to represent this in text though. Perhaps we don't need to provide a count for both if one of the relationships has a count of 0. To do that, we'd just need a way to make it clear which relation the number displayed represents. In the quick mock-up, I use arrows to explain the relationship each number describes.

[echo6ix]

Both alternatives are pretty confusing imo now that I see them. But now I understand the premise better, that these are popovers to be displayed on group cards in group grid view only.

@WithoutPants The video icon from FA has enough derivate versions that it could be used.

• https://fontawesome.com/icons/video-arrow-up-right?f=classic&s=solid
• https://fontawesome.com/icons/video-arrow-down-left?f=classic&s=solid

The issue of course is that the primary icon is being used to represent studios. You'd have to swap the incumbent studio icon to represent Groups, and find a new studio icon.

Studios are actually just labels, brands, web sites, platforms, production companies, distribution companies, etc that author the scenes, movies, images, and galleries. So you could really use almost anything arbitrary to represent that

• https://fontawesome.com/icons/compass?f=classic&s=solid

[WithoutPants]

Not really keen on changing the studio icon to accommodate arrows for movie icons.

We can combine font awesome icons. Here's some examples:

[echo6ix]

No offense but that looks exactly like something a developer would do 😛. I honestly think the text based approach, akin to the tags and studios parent/child text, is the least offensive even if it uses more space.

[cj12312021]

This is roughly what I originally had in mind. The number on the card just tells the user that two other groups are associated with this group. Hovering over the icon would break down the relationship.

[WithoutPants]

No offense but that looks exactly like something a developer would do 😛. I honestly think the text based approach, akin to the tags and studios parent/child text, is the least offensive even if it uses more space.

Lol, none taken. They were intended to show the possibilities.

This was my original implementation:

The sub-groups are presented with the movie icon, with the containing groups relationship presented as a text-based description. Sub-group of could be changed to Part of or something in the same way studio is. I'm not clear on the correct verbiage.

This is roughly what I originally had in mind. The number on the card just tells the user that two other groups are associated with this group. Hovering over the icon would break down the relationship.

This is clean, but I really feel like there's value in being able to know at a glance whether a group has specifically containing or sub-groups without mousing over the icon. There's nothing to differentiate leaf and parent groups in the list if it's implemented this way.

[echo6ix]

Sometimes the "principle" of less is more applies if what you're going for cannot be achieved in an appealing and coherent presentation. But ask another person, and their goal for these cards might not be a priority on appealing and coherent, but to pack as much data-at-a-glance as possible. So it really depends which goal you put more weight on here.

[WithoutPants]

I've gone with the text and icon approach for the moment, as it's the least offensive in my mind and can be adjusted in future. Thanks to you both for your contributions! ❤️

[xx790]

I love the idea with one icon and two numbers with arrows.
It should also work both when numbers are on the right or below the icon. Or can be broken down into two of the same icon but with different arrow alongside, and number below.

The same approach might probably be applied to tags, studios and whatever else might need it.

🏷 ↑1 ↓23

🏷 1↑ 23↓

  🏷
1↑ 23↓

🏷↑  🏷↓
 1       23

The current "Sub-tag of ...\n Parent of NN Tags" is just cluttering the tags display and very much not readable. On-screen display of singular parent tag will be lost, but it is already not readable for me anyway.
Alternatively, replace boilerplate text with icons where necessary to clean it up:

🏷↑ tag_name
🏷↓ 23

Somehow, I don't really like the bent arrows proposal ⬑🏷 ↳🏷 or graph tree proposal.
They try too hard to pack too much, too literally. I don't have the right words for why this becomes bad though.

[stg-annon]

I would agree with the straight arrows it is simple and makes it glanceable and compact without needing to hover, but hovering would provide extra context if it we not already clear as to what it meant

[WithoutPants]

This is now ready for review and testing. I have changed the containing/sub group indicators to show both relationships in a single component:

Mousing over the up arrow shows the containing groups and clicking will navigate to the query page showing said groups. Similarly, mousing over the down arrow shows the amount of sub-groups, and clicking will navigate to the query page showing the sub-groups.

The Group Sub-Groups view includes the sub-group relation description. Similarly the Group Scenes view now shows the scene number in the cards.

The Group Sub-Groups view shows a cut-down filter toolbar. Included is an add sub-groups button, which shows a dialog allowing groups to be selected, and their relationship description to be set. There is also a move handle on the cards to support rearranging the order of the sub-groups.

The following screenshot demonstrates the rearranging functionality. Dragging the card from the handle highlights if the source card should be inserted before or after the drop target.

It is not currently simple to edit the sub-group description field for existing sub-groups. This will be addressed in a separate PR.

[DogmaDragon]

Not sure if it's intended, but you can select a group to be a containing group of itself, which breaks something and leads to infinite spin for everything group related and makes loading other object pages extremely slow.

To reproduce:

1. Create Group A.
2. Edit Group A.
3. Select Group A as Containing Group.
4. Click Save.
5. Leads to infinite loading spin.

[WithoutPants]

Not sure if it's intended, but you can select a group to be a containing group of itself, which breaks something and leads to infinite spin for everything group related and makes loading other object pages extremely slow.

To reproduce:

1. Create Group A.
2. Edit Group A.
3. Select Group A as Containing Group.
4. Click Save.
5. Leads to infinite loading spin.

Good catch. I've updated to prevent this in the database schema, in the validation logic, and in the UI by excluding the group from the containing groups dropdown.