Create a figure showing the webapp user flow

[dhimmel]

I'd like to create a figure for manuscript that shows the webapp functionality at https://het.io/search/.

I took some screenshots for an example workflow, which are available in the repo now.

I was thinking of placing the following images in a 2 by 2 grid:

A. webapp-nodes.png B. webapp-metapaths.png C. webapp-paths.png D. webapp-graph.png

For a grid layout, I like how @vincerubinetti made the Manubot plugins figure. Perhaps we could have a rectangle around each panel to help differentiate them. Also would be good to label each screenshot with an uppercase & bold letter like A. This will help us refer to the panels in the caption and manuscript.

@vincerubinetti would you be able to create this? Or have suggestions for how I should?

[dhimmel]

I wrote a caption for the figure at https://github.com/greenelab/connectivity-search-manuscript/pull/8/files

[vincerubinetti]

connectivity-search.zip

[dhimmel]

Thanks @vincerubinetti. I added the files in the zip to this repo in https://github.com/greenelab/connectivity-search-manuscript/commit/e4c061de6e3ac8ba5bdaf626aff5725f25752e3a.

Copying a few slack comments here to keep discussion in one place:

im having to retake the screenshots because they are differing scales and aspect ratios, and im wondering if this is big enough also because the screenshots will be different heights, they'll have to go in a stack instead of 2x2 grid

I'm a bit worried about the 4x1 layout as compared to 2x2, since it will be hard to fit on a letter page with the caption. This is mostly a worry in terms of the PDF export and submitting to a journal. I'm fine with proceeding under 4x1, at least until a journal complains. One benefit of 4x1 is that it better resembles the actual webpage.

I did like the anatomy node in graph plot, to show a fourth node type... but also okay proceeding without it in the interest of time.

Thanks @vincerubinetti for putting this together in a very aesthetic way!

[vincerubinetti]

Updated figures per your suggestions. Included is my attempt at a square/tiled layout.

The problem is that the sections in the app themselves are not square and don't fit neatly in squares. To get them as all as equal-sized squares would necessitate cropping with a lot of ugly white space, and scaling them to different sizes which looks really bad also.

Also I didn't include the path with the green node because it wasn't visibly checked in the c.png screenshot, as it's much further down the sorted path list. But I decided I guess that doesn't matter and included it this time.

figure.zip

[dhimmel]

figure-tiled.png looks great:

The problem is that the sections in the app themselves are not square and don't fit neatly in squares.

I think the way you have it where each panel is a different height is a good solution.

Will update the manuscript with this version, since it'll fit a lot better in legacy formats.

Some conventions related to figures for journals:

1. usually best to use minimal outer margins / whitespace to <= 5 pixels, this is because the journal will often add the required white-space around the image. Are the current large outer margins optimized for the Manubot HTML version?

2. the lettering is usually applied to the top left rather than bottom left of each panel.

But these are very minor, so I'd say we shouldn't necessarily change them now unless it's very easy and you think they're non-destructive changes.

[vincerubinetti]

figure.zip

Updated to include your comments. Also made the background transparent. You can feel free to rename the files as you feel appropriate. Just remember to include the photoshop file.