R Shiny: Implement First Web UI Iteration

[bastianilso]

This is an initial design for the R Shiny Web UI for Whack-A-Mole VR. The first UI will focus on depicting Hits, as they accumulate over time.

• [ ] Display a GGPlot line graph of how many hits the participant got, over time.
• [ ] Create a Dropdown where it is possible to choose to see a specific set of targets, based on targetID (ie, all targets to the left, all targets to the right, all targets in the center,..)
• [ ] Create a Dropdown where it is possible to choose to see a specific participant, based on Participant ID.
• [ ] The checklist of events decides what events are shown as dots/datapoints on the graph.
• [ ] It would be nice if we could distinguish different events from each other here too.

[QuentinDaveau]

It would be good to specify the use case of the web application, so we can define precisely what to input and output, and how. For example, will it be necessary to display the datas of multiple participants at once ? This would define if the participant dropdown can select only one value or multiple.

[bastianilso]

@QuentinDaveau I agree! For now, this is just a first basic iteration.

Later on, the plan is that we will extend the web application to have several tabbed "views".

• In one view, we will create a user interface for scrutinizing performance per participant (this will be based on what you are currently doing here). In this view, we will also show some detailed information about an individual participant - for example, we can aggregate information based on the data which says something about whether we see player performance improving, prediction, recommendations etc. You could imagine a therapist for instance using this in a conversation with a patient around goal-setting.

• In another view (tab), participant performances can be compared to each other. The goal with this view is different - for instance, this might be to give you an idea of any general patterns between participants, or whether any particular participant is an outlier. In the real setting, this might be useful for therapists in for group meetings to fx discuss changes to their training procedure etc..

I still need to flesh out exactly how this will look and work, for now stay tuned.

[QuentinDaveau]

@bastianilso understood. Since I've already got a basic UI going on, I'll try to implement as many basic back-end features as possible to simplify the UI creation once we precisely know its design. You can find it here: Whack_A_Mole_RShiny

Currently the UI features:

• Connection to the database
• Basic query generation function
• Automatic dropdown generation depending on the database's data.

Any idea of other back-end feature that could be added ?

[bastianilso]

@QuentinDaveau cool! A few questions:

• When is the dropdown generation happening exactly? When the user clicks the dropdown?
• Please load db credentials from a separate file which is gitignored.

On a sidenote, please be very wary of using for loops - I know you are not going through data per se in this case in global.R with the for loop, but R implements many more efficient ways to iterate through the data, see this blog post. If you already are familiar with those, then ignore this though. :fish:

[QuentinDaveau]

@bastianilso Concerning the questions:

When is the dropdown generation happening exactly? When the user clicks the dropdown?

The dropdown generation happens currently at the loading of the application. However it may be triggered at any moment.

Please load db credentials from a separate file which is gitignored.

I'll do it right now.

Concerning the for loop, I had no idea that R had other ways, so thanks for the blog post, it will be really useful !

On a sidenote, after going through the blog post (quite informative), I should precise that I collect the exact datas that I need through my SQL query first (the filtering of desired datas is done through the query). So the for loop are not to iterate through the dataset, but just to generate a new select entry for each element returned by my SQL query.

[bastianilso]

The dropdown generation happens currently at the loading of the application. However it may be triggered at any moment.

OK. The reason I'm asking is that I have not used this type of structure for an R shiny application before. Usually I fetch all data into R, and then let the dropdown generation happen by going over the data from there (as seen in the example ZIP). This is the simple approach. However, if implemented right I think your approach might be more efficient (I assume we could for instance only query the data from MySQL for the current participant, which when scaled up would be faster). Up to you what you choose.

Please load db credentials from a separate file which is gitignored.

I'll do it right now.

Thanks. The server is accessible from public and is receiving many thousand hits per second, so having credentials exposed is a big security risk.

Concerning the for loop, I had no idea that R had other ways, so thanks for the blog post, it will be really useful !

You're welcome! Yes, with R it is very easy to think everything in for loops or while loops, like in any other normal language. But in 99% of cases you really dont want to go there, trust me. :-)

For making the UI and graphs, I would be interested in whether you could make use of Plot.ly to create interactive graphs. In case you are looking for a library to start from.

[bastianilso]

@QuentinDaveau please rebase and force-push the Whack_A_Mole_RShiny repository. Currently one of the commits exposes credentials. ;-)

[QuentinDaveau]

@bastianilso Thought I had done it. Now it should be all good.

[QuentinDaveau]

@bastianilso For the January experient, it would be nice to specify what would be needed in the Shiny app. Currently it has the hits/misses heatmap. I think adding some kind of timeline would be quite useful. If you have any idea of other graph to add or think of any feature, please let me know.

[bastianilso]

@QuentinDaveau You're completely right. Lars (our collaborator) from the rehabilitation context is arriving to CREATE tomorrow - We'll design new visualizations for Whack-A-Mole, based on feedback from him. 👍

[hendrikknoche]

in the current UI it's not clear what the colouring of the data maps to. -2 ? is that if it expired? this would be problematic as poor performance is at the higher end (e.g. 6 sec.) and good performance is low.

should this be a separate issue instead?

[QuentinDaveau]

It's normal that it's not clear, that's because it is not finished :D It is the hit and miss ratio, it has nothing to do with the time. However it is good to keep in mind that it has nothing to do with the new planned RShiny application

It is here more as a placeholder/proof of concept, nothing more.