Add instructions directly on figures / tables

[rempsyc]

Follow-up on #12 to also add instructions to each figure / table, contributing to #33 point 2

[rempsyc]

For this, one issue that I am facing is that the tabset feature does not allow to have two elements within each tab (rstudio/flexdashboard#265). Right now, we have one tab for the plot, and one tab for the table. Ideally, we would split each tab with the respective instructions (for the plot and table). However, it is not possible to organize the content of a tab in separate columns with predetermined width, meaning that the outcome is chaotic.

One option might be to do a static column (column 2) on the right, and keep column 1 on the left with its own two tabs. Then the problem is that the instructions will still refer to the plot once the user clicks on the table tab. Unless column 2 also has two tabs, but then the two tabs won't be linked, and people will have to click twice to get the corresponding information...

[rempsyc]

The storyboard option might be a good solution: https://testing-apps.shinyapps.io/flexdashboard-storyboard/

However, it seems it is not compatible with the nested menu like we use... Instead of using the nested menu, one option would be to use the storyboard as level 1, and have all the plots and tables horizontally in the board menu. The problem I find is that it looks well organized since the tables tabs would take as much space as the the plots tabs.

[rempsyc]

I have opened a new issue with flexdashboard about the storyboard incompatiblity with the nested menu rstudio/flexdashboard#450

[rempsyc]

@psforscher properly adding instructions to the figures has proven to be far from trivial. I have at this point explored several options and would welcome some editorial input on what you think is the most promising avenue before I spend more time on this. However, I am not completely satisfied with any of the options at this point, unfortunately due to some limitations within our toolbox (flexdashboard and shiny specifically).

Option 1: The Storyboard

From the beginning, I thought the storyboard was visually interesting but I had not found a good reason to use it, so I was happy to try it here. For the continent by year page, for example, we have one storyboard page containing two boxes at the top which allows switching from the plot to the table. Those sort of replace the tabs which we had before. Plot box:

(The citation position would be adjusted if we decide to go that route)

Table box:

What I don't "like" about this is that the table seems to share the same importance than the plot since the boxes at the top are so big. I thought it was somewhat less of an issue with the small tabs. I also thought that if having the tables as their own boxes wasn't an issue, we could have had a single page with the boxes representing our different pages currently (so basically each plot would be its own box and it would all be on one page).

Option 2: Table as second row

Basically, we don't use tabs or storyboard here, but for the first row we simply have two columns: one for the plot and one for plot instructions. The table below then is simply taking the full width. Perhaps an alternative here would be to also add a second column with instructions for the table also, if you think that would be relevant. This option is now possible for us since we allow screening for long vertical pages instead of automatically fitting the content to the screen.

(I zoomed out a lot just to show the table that is under)

The "problem" with this option is that again we don't really hide the table as it was requested of us before, it is simply lower below. Still, it is not as prominent as in the very beginning.

Option 3: Hack to include tabs within the storyboard

I think the ideal scenario would be to keep the tabs for switching between the plot and table, AND to have a separate column on the right for instructions. That does not seem possible due to flexdashboard limitations. That said, I found a hack on stackoverflow that kind of allow us to do this.

The problem with this option is that the plot and table get vertically squeezed since the parent html container does not automatically take the whole vertical space. I have opened an issue about this on the shiny repo: rstudio/shiny#4050. I think that would be our best option if that issue could be resolved, and again I'd see each box then being a different plot and it would all be neatly organized.

[psforscher]

i think the storyboard items at the top in option 1 and 3 (eg "Scatter plot of journal paper percentages, by continent and year") seem a bit big -- do they always need to take so much vertical space? if that space can be reduced, i agree that option 3 seems nice, provided that the issue you raised on the shiny repo gets fixed.

option 2 actually seems ok to me given that the table is at the bottom and therefore not as visually prominent. i would lean this way if the storyboard items cannot be vertically shrunk.

[rempsyc]

Alright, thanks for the input. Yeah, I'm afraid the storyboard doesn't allow customizing the height of the top boxes without messing with the css styling. Then let's go for option 2 for now. For option 2, there's a variant with and without instructions for the table. I'm not sure whether people need to be reminded about how to use the table or is it self-explanatory? I'd think it is but yet again...

[psforscher]

i'm leaning toward adding the instructions -- the table appears to get pretty spread out without the instructions in any case, so i believe we have the space.