Use grid layout instead of current list

[DonJayamanne]

This opens the door to more possibilities in UI enhancements Current issues:

• Cannot click row, must click commit message line (clicking empty area doesn't work)

@ole1986

Please let me know your thoughts. I'm very keen on this. This would require a lot/some refactoring to the UI (I'm not starting this just yet)

Note:

• We can still use the current UI with the gridview, that's what I'd do first.
• Once gridview is implemented we can slowly change the ui to add columns and the lilke.
• I.e. phase 1 - use grid view with same UI
• Subsequently we can update the UI slowly...

Benefits & other notes:

• Want to use something similar to this react-virtualized (http://bvaughn.github.io/react-virtualized/#/components/Grid)
• Want to have resizable columns
• Want to add virtualization (remove next/previous buttons) & loads more

[ole1986]

I think this is a pretty good idea but yet not sure if react-virtualized is the best choice. Since we now know the exact commit count (through PR #475) I am excited to see lazy load list or grid to finally eliminate issue #71

[ole1986]

As an alternative to react-virtualized could be material-ui?

See: https://material-ui.com/

It does also have a virtualized list and for all controls we could use the same UI framework.. instead of bootstrap of course

[DonJayamanne]

react-virtualized could be material-ui?

Sure. I had alraedy planned on using materia-ui for other parts as well. E.g. branches/tags, rather than doing it our selves. I'm referring to https://material-ui.com/components/chips/

Since we now know the exact commit count

With virtualized grids, we don't need the count. Basically fetch till we get back nothing.

[DonJayamanne]

The only hitch with the virtualized approach is the fact that the graph will have to be drawn in sequence. I.e. today we draw graph for page 1, then when you click next, we'll draw graph for page 2. The plan is to connect points of graph in page 2 with 1, Similarly graph points on page 3 will be connected to that of 2.

If a user wishes to go to page 5, then we'll need to render the graph for page 1, 2, 3, 4 and then 5 to connect all of the lines properly.

I have tried this and works very well. Unfortunately this is the only way (IMHO) that we can have all the points/lines in the graphs line up and connect properly.

So, if the user drags cursor to the very end then we have a problem, though not without solutions:

Solutions

• Get end points for the grap from page 1-n using a separate query (with just the hashes). Today we get all of the information. To draw the graph all we need is the hash, that cuts down the volume of data down to ~1%.
• Again, I've tried this but requires a new API endpoint to return just the hashes to generate the graph

Note:

• My plan is to lazy load/draw the graph.
• This way, the commits are available first

[DonJayamanne]

lol, I think the suggestion is to use the package is proposed, but with their grid..

Some notes/links:

• https://github.com/bvaughn/react-virtualized/issues/883

[DonJayamanne]

Requirements for grid

Feature	Materia UI	[Tubular React]()https://github.com/unosquare/tubular-react	mui-datatables
Virtualization
Lazy loading
Resize Columns
Sorting
Filtering
Selecting
Selecting multiple rows
Custom rendering (images/icons in rows)