Webapp - show progress/success milestones

[mekline]

TL;DR

Rather than just "Dataset not valid" in red, users should ideally also positive feedback of any intermediate milestones, e.g. "congratulations, you have a dataset_description file!" "congratulations, there is a data/ directory", "congratulations, it contains at least one CSV"

Detailed View

The primary goal of this feature is to give feedback about how far toward validation the user is getting. A secondary feature is to provide updates in the case of slow validation, but this is less important.

Desiderata:

• Tell the user where they are stuck, and provide framework/guidance about what needs to be fixed next.
• To the extend that it updates in time, this should provide real information
• Avoid having to watch an animation you've seen 10 times as you go, if this actually makes validation slower

Mockup:

(Note, ignore these milestones in favor of actual milestones in the code, they are just for example)

At the end of validation, the top of the readout section might look like this:

***********************************************************
This dataset does not appear to be psych-DS compatible
***********************************************************

* [X] Project folder ('/User/myname/whatever/MyProjectFolder/') has been crawled
* [X] Project folder contains data/ subdirectory
* [X] Project folder contains dataset_description.json metadata file
* [X] The dataset_description.json file was parsed!
* [X] The data/ subfolder contains at least one CSV file
* [!] No CSV files found with validated filename structures
* [ ] Parse and validate CSV files
* [ ] Compare CSV files and metadata

Colors: Top 3 lines Red, success lines ([X]) green, failure lines ([!]) red, un-checked lines ([!]) black.

An in progress display might look like this, and be updated as it goes. BUT if this makes the code much more complex, or would require refactoring of the functions, then skip or modify this. For instance, groups of the below checkboxes might go from black to green/red all in a group depending on the outcome.

***********************************************************
Validation is in progress
***********************************************************

* [ ] Crawl project folder ('/User/myname/whatever/MyProjectFolder/') 
* [ ] Find data/ subdirectory
* [ ] Find dataset_description.json and any other metadata files
* [ ] Parse and validate dataset_description.json
* [ ] Check for CSV files in data/ subfolder
* [ ] Check filenames of CSV files
* [ ] Parse and validate CSV files
* [ ] Compare CSV files and metadata

Colors: Finished operations are red or green, future operations in black

[jodeleeuw]

An in progress display might look like this, and be updated as it goes. BUT if this makes the code much more complex, or would require refactoring of the functions, then skip or modify this. For instance, groups of the below checkboxes might go from black to green/red all in a group depending on the outcome.

Chiming in here just to say that having the validator expose this progress would help on our end. We're going to integrate the validator into two different web apps, and it would be great to have some progress feedback events that we can capture and then display in our specific context.

[mekline]

Forgot to add - please pick red and green (or other success/failure colors) that are color blind accessible! There are various tools for this

EDIT: Distinguishable colors would be nice, but not more nice than readability. Just use the tools to check what the results of this whole webapp look like to different vision conditions and make sure none of them are unreadable.

[bleonar5]

Chiming in here just to say that having the validator expose this progress would help on our end. We're going to integrate the validator into two different web apps, and it would be great to have some progress feedback events that we can capture and then display in our specific context.

I'm glad to hear that this would be useful from both developer and web-user angles, as I think it will be the next thing I implement. I'm finishing up a PR now that cleans up the npm package and factors out all of the unnecessary Deno dependencies. I will most likely begin implementing this early next week.

I think it should be easy enough to set up an event emitter class around the main validate function, but there also will need to be some rethinking and reworking on my end about the order in which different parts of the schema are processed.

https://github.com/psych-ds/psychds-validator/issues/61