Report UI Design

[smth]

Provide a list of errors/failures for job. Describe nature of error, make it easy to find in original file(s). Show history of jobs for current source.

• [x] Design
• [x] Feedback
• [x] Mock up

[smth]

[smth]

http://p.smth.uk/goodtables/jobs/report/

[roll]

Report component (part of the picture above with file names and error lists) now lives in the dedicated repository:

• styles - https://github.com/frictionlessdata/goodtables-ui/blob/master/src/styles.css
• example - https://frictionlessdata.github.io/goodtables-ui/?source=https%3A%2F%2Fraw.githubusercontent.com%2Ffrictionlessdata%2Fpilot-causanatura%2F79c0a9e7bd54ba4fa3a01cc6c839e7be8555c30b%2Fdatos%2FProduccion%2F2014-2015%2FAvisosArriboNacional2014.csv&apiJobId=e30b093b-7d7a-4e1c-8f05-37062ce545f6

It's a very important component because it provides UI for various OKI services:

• goodtables.io
• ckan-goodtables (I suppose)
• OS Packager
• etc

Because it's a re-usable component we have slightly different tech requirements for CSS e.g. we can't use bootstrap variables and can't directly tweak bootstrap classes (only prefixing with goodtables-ui-report class).

Because we're updating report visual design again I'm wondering is it possible for you @smth to work directly on https://github.com/frictionlessdata/goodtables-ui codebase? It easy to work with and could simplify things.

cc @smth @amercader

PS. The same for try.goodtables.io Form design - https://github.com/frictionlessdata/goodtables.io/issues/257

[smth]

OK, so as a first step, I have extracted the report SCSS (as it stands) into a separate file, and given it its own variables, so it can be more easily tweaked and/or generated outside of Bootstrap.

https://github.com/smth/goodtables/blob/master/assets/scss/goodtables-ui-report.scss

Is this the approach you had in mind?

[smth]

@roll @amercader what do / can we show in a report that has no errors?

[amercader]

@smth Maybe show the names of the files validated? Are the headers of these files part of the report @roll ? is it worth showing them?

[roll]

https://github.com/smth/goodtables/blob/master/assets/scss/goodtables-ui-report.scss

Thanks. I think it should solve many problems of goodtables-ui. Are there still some gotchas - I think it will be clear when we'll be updating goodtables-ui to the new design.

[roll]

what do / can we show in a report that has no errors?

I think it's definitely a list of valid file names. What we have also (may be as a click on show more details):

• file's headers (not sure it's needed to show)
• file's row count
• list of successful checks - https://github.com/frictionlessdata/goodtables-py/issues/205 - could be really useful info (definitely hidden by default). List could be like this:
  • Blank Header
  • Missing Value
  • and other 10-20
• also we have file's scheme, format, encoding
• we have validation time

[smth]

OK, I've added a passed file name, as well as the ability to see passed tests for each file: http://p.smth.uk/goodtables/jobs/report/

Do we think this is sufficient?

[roll]

@smth I think that's great. One comment - the indicator for opened/closed passed checks. Not sure. May be it should be filled with a color when corresponding tab is open? Just I've got a little bit confused with current indication.

[roll]

DONE