Feature/162416792 create new experiment table

[lingyun1010]

No description provided.

[monicajianu]

There is a lot going on in the ExperimentTable.js file. I think it could be broken down into a few separate components.

Another thing is variable naming. A lot more could be done to make them clearer and more descriptive.

And the biggest thing is some issues around styling. The browse experiments page in the web app uses the row expanded (i.e. wide) class. If you use this in your #wrapper element in the index.html file, you will achieve the same look. And as it is, that look is a little bit empty. The columns should take up all the space available...

If I remember correctly, this is a limitation of Evergreen, which is why I wasn't a big fan of this table in the first place. But see if you can get it to fill the space, rather than stick to pre-defined widths.

Another thing is that the header is not very responsive. If you shrink the browser too much, you start losing header cells...:

[alfonsomunozpomer]

I think I rushed a bit the review comments: what we want is to remove completely any remote fetch logic from the package. The demo pages should pass the data directly to the component, and it would be our choice, when we add a wrapper to the bundles dir, whether to use atlas-react-fetch-loader or any other mechanism as we see fit in order to feed data to the table.

[alfonsomunozpomer]

There’s a lot of HTML to clean up here. I’ve written down what I’ve spotted to on a first pass. Once you’ve done so, please let me know, and take your time to read the Foundation (float) grid layout, which is what we’re using in the EBI Framework.

The logic though seems solid and tests look fine, too.

[alfonsomunozpomer]

Good second iteration.

Besides the changes suggested, I think it’d be better if ExperimentTable is further broken down between top search boxes, the table body itself and the table footer (that one has already been refactored). In that way you’d have a kind of top-level component with the basic layout, and the other three.

[alfonsomunozpomer]

Good work! Another iteration. I focused on reviewing mostly ExperimentTable.js and it’s now getting in shape. :)

One thing you should try to care about is to break long lines in logical blocks and add blank lines to improve readability.

[alfonsomunozpomer]

Good stuff! We’re 95% done!

Besides the comments you should also add what the shape or types of the arrays you will receive in props using PropTypes.arrayOf instead of PropTypes.array.