Add Galaxy as Tool assembly

[beatrizserrano]

Hi all,

As discussed during the BH2021 (long time ago 😅) this PR is to add the first basic page for Galaxy as Tool assembly. We have created an image with all the solutions that Galaxy provides across the data life cycle using the default from the RDMkit adding the Galaxy logo. We will also present this in a poster at ECCB2022 in September. Can we use the image of the life cycle in general?

Thank you!

cc @bgruening

[bedroesb]

@beatrizserrano I love the design of the image! Looks really pro. Little feedback: I don't know if I can figure out only based on the image why one step is with a dotted line, and the Plan step in white (inverted).

PS Yes you can reuse it, we do like though if you add somewhere our little logo https://rdmkit.elixir-europe.org/media_kit (it can also be just the R :)

[beatrizserrano]

Thanks @bedroesb! I've added the logos to the center of the image.

I don't know if I can figure out only based on the image why one step is with a dotted line, and the Plan step in white (inverted).

We've removed the dotted line. The Plan step is inverted because Galaxy doesn't offer any feature for that. If you think it's still confusing, I can leave the original orange :)

[bedroesb]

Well I like the idea of making it different from the others, but I don't know if inverting it is the nicest, I was playing around with some other ways:

But I don't know if I like them more, @martin-nc, @korbinib if you have time, could you give your opinion on this :)

[beatrizserrano]

grey looks nice to me :)

[martin-nc]

Since Bert has called me in, I'll give a comment, but feel free to ignore!

1. What's the purpose of the illustration? If it's to give a brief overview of how Galaxy can help you through the data life cycle, then I think there's too much text. If it's to give more details, then maybe an illustration isn't the best way to convey this information?
2. How important is the text? If it's important then I guess it should be in HTML rather than an image, so it can be read by search engines and assistive devices, and it is easier to read on small screens.

If the answer to 1 is "A brief summary", I'd do something simpler like this:

I've only done three sections, but hopefully you'll get the gist.

Or you could think mobile-first and do a title like "How Galaxy helps you through the stages of the RDM life cycle", then have tiles instead. These would form columns on wider screens:

If the details are important, then the tiles can be extended, and again form columns on wider screens:

Anyway those are just some ideas.

[beatrizserrano]

Thank you @martin-nc, the accessibility is a very valuable point. I like the last version that you presented, the tile including the details. Do you have an example for me to get some inspiration on how to implement this idea?

[martin-nc]

@beatrizserrano maybe I was getting too creative there, because it's not something we can do simply in markdown! If you're okay fiddling with Bootstrap classes, though, then something like this:

<div class="container-fluid g-0 my-2">
    <div class="row row-cols-1 row-cols-md-3">
        <div class="col">
            <div class="card border border-2">
                <div class="card-body px-4">
                    <h3 class="card-title text-center mb-4 mt-3">Collect</h3>
                    <h4>Access to databases</h4>
                    <ul class="lh-sm">
                        <li>UNIPROT</li>
                        <li>INTERMINE</li>
                        <li>...</li>
                    </ul>
                    <h4>Customised data access</h4>
                    <ul class="lh-sm">
                        <li>Text 1</li>
                        <li>Text 2</li>
                    </ul>
                    <h4>LIMS integration</h4>
                    <ul class="lh-sm">
                        <li>Text 1</li>
                        <li>Text 2</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card border border-2">
                <div class="card-body px-4">
                    <h3 class="card-title text-center mb-4 mt-3">Process</h3>
                    <h4>Data transformation</h4>
                    <ul class="lh-sm">
                        <li>UNIPROT</li>
                        <li>INTERMINE</li>
                        <li>...</li>
                    </ul>
                    <h4>Import workflows</h4>
                    <ul class="lh-sm">
                        <li>Text 1</li>
                        <li>Text 2</li>
                    </ul>
                    <h4>Metadata handling</h4>
                    <ul class="lh-sm">
                        <li>Text 1</li>
                        <li>Text 2</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card border border-2">
                <div class="card-body px-4">
                    <h3 class="card-title text-center mb-4 mt-3">Analyse</h3>
                    <ul>
                        <li>A bit of blurb.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Should produce something like this:

@bedroesb can confirm, but I don't think we have an easy way to add the life cycle colours. We'd have to create some custom classes, or maybe it's enough to add the icon of the right colour with the header. We have the icons around somewhere.

If this seems a faff, though, then I'd just go with the original diagram. Maybe just have a caption with more explanatory text for SEO/accessibility.

[beatrizserrano]

I'll give it a try and we compare which version looks nicer :) thanks @martin-nc

[beatrizserrano]

This is the best that I could do, used background colours with some transparency:

Not crucial details, but I see a couple of improvements:

• I didn't manage to have rounded corners, any suggestions on how to do that?
• It would be nice to add the icons. I see that they are here. How do I add them?

[martin-nc]

For the rounded corners, I think you can just use the rounded class on the card: <div class="card mb-4 rounded">.

I'm not sure about the tinted backgrounds: is there enough contrast ratio between the text and background? https://webaim.org/resources/contrastchecker/. That's why I suggested the border and outline being in colour and the background white. The white background is usually a bit safer for contrast and for colour blind users, but maybe it's okay.

As for the icons, here are some you can put in the images directory to experiment with: life-cycle-icons.zip.

There are many ways to include the images. Maybe it's simplest to include them like a normal image:

<div class="card-body px-4" style="background-color: #fac54b45">
 <div class="w-25 mx-auto"><img src="/images/life-cycle-icons/collect-icon.svg" alt="" /></div>
          <h3 class="card-title text-center mb-4 mt-3">Collect</h3>

The icon is purely decorative so I've left the alt attribute empty.

Maybe @bedroesb has thoughts on this, though, since he's more familiar with the site code. Also, @korbinib for the format of the tool assembly pages.

[bedroesb]

@beatrizserrano and @martin-nc I took the freedom to update a little bit the html code :) Following the suggested syntax from bootstrap for grid cards, you can get rid of many padding and margin classes + it is rounded by default, in the the card class. I also updated you branch with the remote because it was a little bit lagging behind ;) We for example took away the audience attribute etc. I will try to add the icons and have a look!

[bedroesb]

@beatrizserrano and @martin-nc, this is with the icons in black:

[beatrizserrano]

Nice! I like the icons. Maybe the card header (where the icon and the title are) could have the background colour. Or would it make it less accessible?

[bedroesb]

If I understood correctly:

[beatrizserrano]

Looks great to me. The first version better? What do people think?

[bgruening]

I like the version with the stronger colors and white icons a bit more :)

[bedroesb]

ok done!

@elixir-europe/rdmkit-editors what are your opinions?

[bgruening]

Cool, very nice! Thanks, everyone for working on this!

[korbinib]

I feel this could be more extensive

[bedroesb]

@beatrizserrano any comments?

[beatrizserrano]

Not much from my side, I think. I don't know if there's something generic enough to be specified here, what do you think @bgruening?

[bedroesb]

@korbinib if @bgruening gives green light, and you give your approval, you can merge. I am on holiday tomorrow :)

[bgruening]

We could add here more (like datatypes, EDAM annotaitons, number of columns, reference genome ...), the question is just if it's worth it and how. I guess for the first PR this is good and we keep adding things to those list later. 👍 from my side. Lets get it in :)

[korbinib]

Could you check about the EC logo vs EU flag?

[bedroesb]

@korbinib the EC logo was already in place, so I think at one point I wanted to use that one :)

[beatrizserrano]

Thank you all for the help!