Clarity: Datagrid Master Detail View Design

[vmwareux-vivian]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[x] enhancement

Description

The datagrid master detail view allows users to dive into the details of particular items in the datagrid and quickly navigates between them. Today the Clarity provides the expandable row solution to show the details of particular items in the datagrid. However, we've heard use cases of using tabs, table, datagrid, stackview, etc. in the expandable view and the current solution might not scale well in these scenarios. The following paragraphs will describe our proposal to solve this problem.

Use cases under consideration

• View the detail of an item in the datagrid
• Quickly navigates between the detail views of different items
• Select an item in its detail view and take actions
• Select multiple items in their detail views and take actions
• View datagrid/table/stackview in the detail view
• Switch between tabs in the detail view
• Drill down to one more level of detail of the detail view

Future use cases under consideration

Drill down to more levels of details

Single Select

Click the detail view icon to bring up the detail view.

Clicking on the icon again or clicking on the close button on right upper corner will close the detail view.

Demo

Multi-select

Similar to single-select, click the detail view icon to bring up the detail view. Clicking on the icon again or clicking on the close button on right upper corner will close the detail view.

Demo

Show tabs, datagrid, table, stackview, etc. in the detail view

Tabs

Sometimes the detail view contains a lot of information and tabs are used to categorize it:

Datagrid/table/stackview

Sometimes the detial view contains datagrid, table or stackview:

If the items in the datagrid/table/stackview contains more details for the users to dive into, show the details in a pop-up:

When there are very few items in the master view

Expand the height of the first column to the height of the detail view, with a maximum height specified. Show blank space below the rows:

The Title of the Detail View

The title of the detail view doesn't have to match the content in the first column of the master view. It's defined by the product.

Expandable Datagrid

This is an available component of Clarity: https://vmware.github.io/clarity/documentation/v0.11/datagrid/expandable-rows

When the item has not much detail to show and it's text-only, expandable datagrid will be a quick and neat solution.

Documentation is subject to change

[ronnyek]

wow this looks good, cant wait to be able to take advantage of it!

[reddolan]

Questions & comments from our meeting

• how are visually indicating that "item name" opens the detail pane?
  
  
  
  • use an icon in place of expand caret?
  
  
  • won't have expand and master detail in same datagrid at the same time
  
  
• where does the "item name" column header go?
• fat cell subtext isn't a11y against background color, needs to be darker
• can clicking on the identifier ever do something other than open the detail?
• what do interactions look like on shorter datagrids?
  
  
  
  • 10 rows
  
  
  • 6 rows
  
  
  • are they viable?
  
  
• clicking row that selects and opens details won't work
• we don't use link text to perform actions, though this seems more like navigating and could work
• sorting, how do we see it?
• nested datagrid opens modal, how are we communicating the difference?
• how do fat cell-extra column values work with show/hide columns?
• what do we use if there is no item name?
  
  
  
  • we need recommendation on identifier
  
  
  • what about when datagrid columns can be dragged or reordered?
  
  
  • or when datagrid identifier is hidden?
  
  
• need designs that include pagination, current design covers pagination
• lose visibility on filtering-sorting on non-identifier columns
  
  
  
  • refactor filter to show all filters?
  
  
• how is the width of the identifier column determined?
  
  
  
  • what about narrow datagrids?
  
  
• what does "fat cells" expand in place mean?

[mathisscott]

@vmwareux-vivian and @reddolan
Can we update this ticket with the final details from our discussion that week? That way we can wrap up the UX piece and get it queued for implementation.

Thanks!

[mathisscott]

@vmwareux-vivian and @reddolan
Please see last comment...

[vmwareux-vivian]

@mathisscott Hi Scott, I updated the ticket two weeks ago, and have sent the link out to Red for review. If there's anything I missed in here, please let me know.
@reddolan Hi Red, do you have any comment on this write-up?

[mathisscott]

@reddolan ^

[alberthoekstra]

Nice and valuable component 😄

[reddolan]

@vmwareux-vivian @mathisscott everything looks good to me.

Note: we decided to hold off on implementing the "fat cell" design

[jacobbutton]

Any progress on this? Where does it stand on the priority list?

[reddolan]

@jacobbutton We haven't started development on it yet. It is one of the highest priority items in our backlog though.

[dennitsa]

Hello, is this component planned for a particular release already? We have some pending designs based on it and I would like to find out if we should wait for it or use alternative approach :)

[GaryHyland]

This sounds like it would probably be a better fit for core pages in my app.
I currently have 34 core set of data (tables) that have their own pages. Each has filter box at top (outside datagrid) to allow easy searching of key columns. clicking on a row then opens a large modal which has details and various tabs with further details and possibly lists.
I had been thinking of moving from modals to actual page nav passing in the selected record id. but navigation is typically back and forth on items in the list, so the master detail view looks like it could be the best fit and cleanest from a UI perspective.
Great to hear it is on your list.
I would also then setup route to the page so can bring it up showing a particular list item. Like to always have the ability to drilldown from other parts of the system that may list that item.

[halachliyskid]

@reddolan Any updates on when we can expect this to be released? A very rough estimate would also do.

[mathisscott]

@halachliyskid
We haven't started implementation yet and we presently don't have this feature queued up. A better question would be when do you need this by?

I should be able to give you an idea if it will or won't be available.

[jacobbutton]

A better question would be when do you need this by?

A couple of months ago, but I'll settle for tomorrow.

Kidding aside, I think this should be one of you highest priorities given its application in a design structure as laid out by @GaryHyland, which is exactly how I would want to use it.

[mathisscott]

This is great information to have, @jacobbutton

Currently, the implementation of this component feature is blocked by in-progress datagrid work as well as a redesign and implementation of datagrid pagination.

You can always look at our Work In Progress page to get an idea of where things are and what's coming next.

[halachliyskid]

@mathisscott The current items in the Work in Progress Page are all with deadlines such as August/September/November. Does this mean that it is safe to assume that there is no way this component is released before November (probably even later)?

[mathisscott]

@halachliyskid
That is a safe assumption. Our team currently could not begin work on this component feature until end of year. Unless something changes, I would not count on this landing until some time in 2019.

[jacobbutton]

I understand progress on this is being blocked by current in queue items, but I'd love to at least see this added to the Work In Progress wiki Next Up section so I know it's getting some love and still on the priority list.

[mathisscott]

@jacobbutton
Right now our top priority is getting things finalized for 1.0. We have not begun the discussion of what we will be focused on for 2.0. Those conversations will happen later this year because we have a lot of cleanup ahead of us after 1.0.

This is on our radar, however. And will be part of those conversations. Committing to it now would only be confusing because we don't know when the blocking issue will be completed and we also have a limited view of what our priorities will look like in early 2019.

[sdurnov]

@mathisscott I see 1 important thing is missing here - how is it gonna look in a mobile view? As far as I can see, using the same layout in a mobile view will be barely usable, with lots of scrolling involved.
Edit: sorry, haven't noticed modal option.

[gnomeontherun]

A few notes to add to this based on recent discussion and exploration.

1) There will be no animation for now, the animation is complex and also not clear how the animation would run since its got a lot of moving parts.
2) The footer will not have a separator, display just #-# / ### and align left.
3) Change the detail icon to double chevron that points right/left based on open state.
4) The size of the detail pane should be 2/3 width. There is a case about wanting to keep the column size intact, but implementation details are very fuzzy if that could be done without breaking SSR (not really but hacky ideas could appear).
5) No resizing is allowed when the detail is open.
6) When the pane is opened, the focus should go to the pane, when it is closed it should return to the detail toggle button for that row (confirm with a11y team).
7) Need to review dark theme styling yet.
8) On mobile, the idea would be to have the pane just overlay the datagrid since real estate is limited. Not necessarily part of MVP for the moment.

[dennitsa]

Guys,
We needed this component half an year ago (See comment from @halachliyskid above), but since it wasn't developed yet we made our own.
It took us 1 person and 1 week to do it including animation(e.g. point 1 that you are skipping) and with the size of the details pane being an input parameter(e.g. point 4, which you are making static and thus making this component less usable in diverse scenarios).
Not that our component has 100% of the features that you are planning, nor its perfect and bug free, but stating "animation is complex so we are not doing it" really doesn't sound right, given how bad a sliding pane without animation looks like.
Also please consider point 4 if you should allow custom size of the details pane as there are use cases, where this might be useful.

[gnomeontherun]

@dennitsa If you have your own implementation, would you have considered a contribution? I was able to make a working prototype of this component in about two days, but it takes a lot longer to build it properly for a generic audience, iron out UX issues that arise, proper a11y support, write full test coverage, documentation, and ensure as many edge cases are covered.

I didn't say that 'we are not doing' animations, but that it won't be done right now. Animation is complex, not as much because of the coding but because of the number of moving parts and possible disorientation that it can cause to have so many things shifting at once (the footer changes visual display, the columns start to hide, the widths change, new content appears). The design here does not have research into what the animations would look like (there are a couple animated images showing it flip between states without animation), and upon discussion with the Clarity UX team it became clear that it would be better to wait for a later iteration to add motion intentionally after doing proper research.

As far as 2/3 width, this was not documented here but was discussed many times with the UX team. Developers could set a different size if they wish using some simple CSS, and if you have more complex use cases I'd welcome those details.

[dennitsa]

@gnomeontherun What do you mean by "contribution"? I'm not quite familiar with open source code development, so I lack context.
We have the component used in our project, I'll be glad to share more details with you, just send me a message on Slack or otherwise on my work email [email protected]
But again it is not 100% complete and based on all functionality you have planned in this design, just some basic implementation to use while we waited for the official one.

[poifir]

You can always look at our Work In Progress page to get an idea of where things are and what's coming next.

Hi! @mathisscott - thanks for the link to your board!
I already visited it a couple of weeks ago and noticed this design/issue here is listed as 'in progress' on your WorkInProgress page and also on your Zenhub board then and now.

But in Github it's still displayed as 'open' - would be great if you could clarify what the different status mean: does 'In progress' on the zenhub board imply there is already someone working on this one?

And I noticed the assigned milestone '2.0 Stretch - due March 15th' got renamed to 'Post 2.0 - due May 31st'
-> can you give me a rough guess when this one here will be finished?

Thanks!

[gnomeontherun]

GitHub only has Open/Closed status, so ZenHub gives more detail and In Progress means its being actively developed (by me). We renamed the milestone to be more accurate, since 2.0 is mostly set by now.

There is no estimate that I can give beyond sometime after 2.0 lands.

[tarangkhandelwal]

Hi @mathisscott ,
Can we expect this to be part of 2.2 release ?

[mathisscott]

@tarangkhandelwal
It's been in a holding pattern in review while the team focused efforts on improving accessibility. @gnomeontherun would have the best idea of when this feature will get back in queue.

[jacobbutton]

I was really hoping this would have been a higher priority by now. Accessibility is important and everything, but this is a major structure and navigation pattern that I think a lot of development teams have been waiting for.

[gnomeontherun]

@jacobbutton I understand and feel the same way. I'm working on it and want it to be finished too. It is a complex interaction that itself has accessibility issues to iron out to ensure it is correct. We never give exact dates or deadlines, but this is on the short term priorities and targeted for 2.x.

[jacobbutton]

added this to the 2.0 milestone on Dec 20, 2018
modified the milestones: 2.0, 2.0 Stretch on Feb 27
modified the milestones: Post 2.0, 2.1 on May 31
modified the milestones: 2.2.0, 2.2.1 11 days ago
modified the milestones: 2.2.1, 3.0 3 days ago

What the hell is going on? Honestly, I can understand delays, and other priorities coming up. But developers that have come to rely on your framework need some sort of reliable predictability of when expected and highly anticipated features are going to release. Our development timelines depend on it!

From what I can tell the code for this feature was written back in early January. I know you've had a redirect towards accessibility, and I can appreciate that but I, and I feel a lot of other people, are growing increasingly frustrated.

[mathisscott]

@jacobbutton
As you can imagine, anything involving the datagrid is extremely complicated. Detail pane is currently back in development and we are targeting a release for it no later than the middle of October.

It was moved to 3.0 because it requires a breaking change in the datagrid DOM structure that might cause problems for consumers doing advanced things with the datagrid (like using wrappers and such).

Our plan, however, is to release it as part of a "preview" or "beta" so that people can use the Detail Pane without having to upgrade to Angular 9, deal with the other breaking changes in 3.0, or wait until the November-December official release of 3.0 to use it.

Your frustrations are heard and hopefully this helps alleviate them somewhat.

[shravansofts]

Is there an example documentation page for this component?
I'm searching in datagrid, but could not find it. :(

What is the minimum required angular version when clarity v3 GA is released?

[gnomeontherun]

Documentation is pending, but you can see our demo here https://github.com/vmware/clarity/blob/master/src/dev/src/app/datagrid/detail/detail.html

[shravansofts]

Documentation is pending, but you can see our demo here https://github.com/vmware/clarity/blob/master/src/dev/src/app/datagrid/detail/detail.html

Im looking for example at
https://clarity.design/documentation/datagrid/structure

What is the minimum required angular version when clarity v3 GA is released?

[mathisscott]

@shravansofts
Angular 8

[gnomeontherun]

We will certify it for Angular 9 actually. If there are no breaking changes on Angular's side that affect us to support Angular 8, we will be able to support both, but we don't know yet.

[jacobbutton]

Is there going to be a way to incorporate the router to get to a particular item?

How difficult would that be to do?

[shravansofts]

We will certify it for Angular 9 actually. If there are no breaking changes on Angular's side that affect us to support Angular 8, we will be able to support both, but we don't know yet.

Could you provide realistic date for Clarity v3 GA release?
We want to decide upon version for our product stack upgrade work.

[gnomeontherun]

Our release policy is here: https://medium.com/claritydesignsystem/updating-the-clarity-release-and-support-strategy-c1e37f7d5a0

Our date depends upon Angular's next release.