Improve the design of the landing page

[dyuliu]

I start a new issue based on Issue #5.

Current design: Landing_Page.pdf

Wait for the new design improvement suggestions from @IuliaElenaI

[IuliaElenaI]

Since the last design I've posted, I made a few changes to the landing page:

1. Most importantly, besides highlighting the Experiments it connects to when a user hovers over a Pipeline, as per request, I also added links that connect Experiments to Pipelines and vice-versa. The behavior should be: they should shorten or lengthen as the Experiments are closer or farther to the Pipeline.

If the user selects a Pipeline, it will isolate only the Experiments it connects to, removing the link.

2. In addition to the links, I added a tooltip that appears when you hover over a Pipeline, which shows the Experiments that particular Pipeline connects to;

3. modified the width and height of Projects and Experiments cards so they have the same dimensions, purely out of aesthetic reasons;

4. moreover, whenever a Project or Experiment card is clicked, it will copy the behavior of a selected channel, which will make it more visible to a user exactly what he clicked on.

This the pdf with all the screens:
MTV_LandingPage_Links.pdf

[dyuliu]

I come up with a new design, where the links between experiment cards and pipeline cards are visualized only between dots. To this end, we move the dots of pipeline to the top of its row.

[IuliaElenaI]

From what I understand from this design, the circles and lines are static, and they will get highlighted if a user selects an Experiment or a Pipeline. In this case, if an experiment is farther away from other experiments that connect to the same pipeline, the link will have to overlap other links and it will not look as organized as in the screenshot above.
Or maybe there should be a type of sorting so that the experiment cards that connect to the same pipeline will always be placed near each other? This would solve the problem of links overlapping each other. But if they are going to be sorted like this, all the experiments may not be in chronological order, which could be a problem if the user needs the experiments to be in chronological order.

[dyuliu]

From what I understand from this design, the circles and lines are static, and they will get highlighted if a user selects an Experiment or a Pipeline. In this case, if an experiment is farther away from other experiments that connect to the same pipeline, the link will have to overlap other links and it will not look as organized as in the screenshot above.
Or maybe there should be a type of sorting so that the experiment cards that connect to the same pipeline will always be placed near each other? This would solve the problem of links overlapping each other. But if they are going to be sorted like this, all the experiments may not be in chronological order, which could be a problem if the user needs the experiments to be in chronological order.

@IuliaElenaI Your understanding is correct. If the number of EXPs or PIPs is small, we don't have to worry about the edge overlapping issue. If there is a huge number of EXPs and PIPs, we also have some techniques to solve the overlapping issue to some extent, such as using sorting or edge bundling techniques.