Sections: Show hide buttons

[odscjames]

Moving to a new issue as currently this is being discussed in 2 places and a solution here should apply across the page.

From:

• Validation errors interface (make long codelists collapsible) #22
• Additional checks interface (add quotes to string values, make result table columns consistent) #13

From one:

• show/hide button on each section needs work - fewer than 3 occurrences, the errors table should be expanded by default. Otherwise, it should be collapsed by default. Probably different labels on the button for each state?

Your suggestion sounds good for the defaults. It would be great to get some input from @codemacabre on a good UI for expanding/collapsing as the buttons feel a bit clunky and I don't know how to improve it.

From the other:

When the page loads, only expand the first 3 failures for each check so that users don't need to scroll past many similar failures to get the next type of check.
Allow users to expand the list of failures for each check to see all the failures (not currently shown in wireframe)

This is slightly inconsistent; a bit of definition work is needed here to agree a common approach.

Currently this applies to Validation & Additional sections - there are other sections this might apply to later to, like the errors section in #30 (comment)

[odscjames]

For test data, try the "input" files in https://github.com/Open-Telecoms-Data/lib-cove-ofds/tree/main/tests/fixtures/pythonvalidate and https://raw.githubusercontent.com/Open-Telecoms-Data/open-fibre-data-standard/0.1-dev/examples/json/network-package-invalid.json

[odscjames]

Noting that if we want to do "if more than 3, show 3 by deafult and have a button to show more" then situations like the above are going to complicate things. We probably want one button for the whole "org references" section, but the first 3 rows are split across 2 tables.

[odscjames]

Note #73 adds some more show/hide options

[codemacabre]

The current collapsible / accordion UX is probably best, but the button needs to reflect the state of the list, i.e. whether it's currently collapsed or expanded. Having different states for different numbers of errors seems likely to be cognitively inaccessible, as users will expect consistency, so I'd probably vote in favour of all errors being collapsed by default.

The button would need to be redesigned to represent 'more details' rather than 'show/hide errors', so it's more obvious that each button (and expanded section) is related to the error. The most intuitive design would likely be to either use a chevron icon (v / ^), or an error icon ( ! ), alongside the number of errors hidden. This would let the user know what to expect before expanding a (potentially long) table.

[duncandewhurst]

Thanks, @codemacabre. Your proposed approach sounds good to me. My preference is to use chevrons, since the whole table is about errors anyway. Happy for you to go ahead and make a PR.

[codemacabre]

Just realised we're using Bootstrap 3, so my initial idea of using chevrons built into the accordion heading (like https://getbootstrap.com/docs/5.2/components/accordion/) isn't possible without a fair bit of refactoring. Plus, nested accordions within the 'Structure and Format' accordion might be too busy, so perhaps the best and simplest alternative is to use chevrons in self-contained buttons, as in the screenshot below:

My concern is that this makes it a little tricky to see which heading the button relates to. If we're happy with this, I have a PR ready. If we want something a bit more accordion-heading-like, it'll need a bit longer.

Thoughts @duncandewhurst @odscjames?

[lgs85]

@codemacabre your proposed approach sounds good to me, thanks! Happy for you to go ahead and review the PR @odscjames

[odscjames]

Reopening - this has now been applied to one section, but there are other places we should apply this to later.

[duncandewhurst]

The changes look good. Thanks!

My concern is that this makes it a little tricky to see which heading the button relates to.

Could we add some other visual element to distinguish between the results for each check, like a horizontal rule or some kind of container around the check title, description and results?

Reopening - this has now been applied to one section, but there are other places we should apply this to later.

Yes, please can we add this to the additional check results, too.