Inspiration for data table design from flatgithub.com

[rufuspollock]

Github's (2021?) experiment with data presentation was really cool in lots of ways:

https://flatgithub.com

Writeup: https://githubnext.com/projects/flat-data

Code: https://github.com/githubocto/flat-viewer

What inspiration or learnings could we take from this?

Example

https://flatgithub.com/datasets/s-and-p-500-companies?filename=data%2Fconstituents.csv&sha=6517cdbbc8908397ff70d2259d6721672da3bc43

[rufuspollock]

Historgram facet summary and filtering for numeric fields

Note one issue with CSVs is that it doesn't realize last column is actually year (see the commas ...)

[rufuspollock]

Auto-formatting numbers with "," separators

[rufuspollock]

Identifying enumerated fields and using that in the UX

Here it has identified GICS is enumerated and displayed it as such with "button" look and coloring

On filter even get a pop-out:

[luccasmmg]

I spent the last hours trying to understand the code and i have some thoughts.

Firstly, we could probably just copy and paste the code, especially everything up to this point https://github.com/githubocto/flat-viewer/blob/main/src/components/json-detail-container.tsx and just remove the code related to github itself, the repo has a MIT License.

We could go even further, turns out 90% of the magic in the project is actually in this repo https://github.com/githubocto/flat-ui honestly, this is so good, that we should instead of try adding stuff into our own component, we should probably just copy the code from this one and change everything that we don't like.

One of the things i don´t like for instance is that it tries to auto detect enumerated fields in the example you shown, GIC Sub-Industry could also be categories.

This detection is done here https://github.com/githubocto/flat-ui/blob/4d0848ef1928fb23b1f487c1d9f53d8f6aac2f1a/src/store.ts#L691 but we could probably also have some object metadata that overrided this auto detection.

The work to move this code into PortalJS wouldn't be that hard, we would probably just need to create a wrapper that takes the csv url, this is because the flat-ui component already expects the data in parsed format.

[rufuspollock]

@luccasmmg can you action creating an issue to port this across (i think almost in full at this point) and doing a small trial to use this.

We could go even further, turns out 90% of the magic in the project is actually in this repo githubocto/flat-ui honestly, this is so good, that we should instead of try adding stuff into our own component, we should probably just copy the code from this one and change everything that we don't like.

😄👍 I agree on simply porting with appropriate credit (from activity on the repo and response to PRs i think they aren't really maintaining so a port properly makes sense into a separate package in packages and publishing as portaljs/flat-ui (the alternative, which could be attractive is to fork the repo so we can merge upstream changes if they happen - i leave you to make a recommendation / call on this).

The work to move this code into PortalJS wouldn't be that hard, we would probably just need to create a wrapper that takes the csv url, this is because the flat-ui component already expects the data in parsed format.

The parsing of the CSV is something we want to work on anyway. Table components should expect the data already parsed in some structure (this was the purpose of the a lot of the frictionless code to separate that out)

[rufuspollock]

/cc @davidgasquez thought you might like this thread 😄

[davidgasquez]

Thanks! Indeed, flat-data was an awesome project. Sad they are not maintaining it anymore. 😞

[rufuspollock]

I know 😢.

Do you know anything else out there like it?

[davidgasquez]

Not really anything like flat-ui in my radar. There are other table data explorers visualizations like Data Wrangler but don't work in the browser like Flat Data does.