Grid avatar indicators to visualize which rows are currently being edited.

[Peppe]

Use case

As an end-user, I want to have an indicator for each row in a grid showing who is editing the rows so that I can avoid editing rows being currently edited by others

As an end-user, I want to see in a grid which row a colleague of mine is working on so that I can join in and help them out

Example

Here's a draft on how a grid could look like with indicators on which rows are currently being edited.

[Legioth]

Assuming someone has already created a component for showing colored dots, then the integration could be like this based on the API suggestion from https://github.com/vaadin/collaboration-engine/issues/36.

ColorDots users = new ColorDots();
PresenceCollaborationDao dao = new PresenceCollaborationDao(users, topicId, ownUserInfo);
dao.setNewUserHandler(newUserInfo -> {
  int colorIndex = dao.getCollaborationEngine().getColorIndex(newUserInfo);
  users.addDot(colorIndex);
  return () -> users.removeDot(colorIndex);
});

[heruan]

Add this use case in the marketing demo, but let's simplify it by just showing a single dot when there are active users in the topic associated with the grid row.

Also: ask for design feedback about the dot.

[gtzluis]

As suggested by Jonte:

• Using only colors is not accessibility friendly, so it should have at least a text or a badge to indicate a row it's being modified.
• The general recommendation is make use of the Avatars in the row to give more information to end-users and make it more intuitive. Based on that we agreed to try making a demo using Avatars in the row with the new Presence Adapter

[Legioth]

Those suggestions seem to be made based on the assumption that it's relevant to show exactly how is editing each row, whereas the original idea is much more about showing which rows are "active" without having to know who is active.

Based on that we agreed to try making a demo using Avatars in the row with the new Presence Adapter

For that use case, it would be much more appropriate to reuse CollaborationAvatarGroup. We'd just have to add a feature to it to prevent the local user from being marked as present.

[gtzluis]

IMO the real value is to see who's editing what, that's what you usually see in other collaborative features and it's a good opportunity to cover another use case with our existing components. A modification of our existing CollaborationAvatarGroup sounds logical to me, and I think that's what we discussed last week to try using it and modify it to make it smaller to fit the row.

[Legioth]

It's a logical feature to add to CollaborationAvatarGroup, but it doesn't help with finding good demo cases for PresenceHandler which is the original reason for why this ticket was put high in the backlog.