Design for Kedro Viz @preview datasets

[rashidakanchwala]

Description

This ticket is a design ticket based off the technical discussion we had for #907.

The below implementation for dataset preview was agreed upon :
If a user wants to preview a dataset on Kedro-viz, he/she will have to add '@Preview' to the dataset name in the catalog.yml.

companies@preview:
  type: pandas.CSVDataSet
  filepath: data/01_raw/companies.csv
  layer: raw

Kedro-viz will then read this and based on the dataset type (parquet, CSV etc) it will handle the preview accordingly.

For the MVP - we are going to stick to showing the first 5(TBD by design) rows (in the metadata preview mode) and first 10(TBD by design) rows (in the expanded modal mode)

The output of this ticket will be FIGMA designs showing preview tables in the metadata panel, as well as in modals.

Context

Kedro-viz has been used by users to

• Debug their pipeline - now they will also be able to preview the datasets that will help them understand more
• Tell their story - now they will also be able to share what different datasets look like when they discuss Kedro-viz with non-technical audience.

Checklist

• Include labels so that we can categorise your feature request

[comym]

Some notes from previous conversations are:

• WIn theory the table preview takes the same space where we have all the Plotly graphs preview in the metadata side panel.

• User should be able to click and expand the table Making use of the third-level page we already have.

Outstanding questions:

Doing this way, we're bringing the table exploration to the same pattern we use for Plots.
We should be careful not to cause confusion here.

• What happens when you're in comparison mode then?
• Are we treating these datasets as an "artifact" that can be compared between runs?
• Can a dataset ever show BOTH a table preview and an image at the same time?

Thoughts @rashidakanchwala @Mackay031 ?

[tynandebold]

I think this feature is only for the flowchart page, right @rashidakanchwala? As far as I understand, it shouldn't have anything to do with experiment tracking, so if that's the case then those first two queries in the outstanding questions section in your comment above don't exactly apply. The third one is great though, I don't know the answer to if we could show both a table and an image for one dataset.

[rashidakanchwala]

nope, tables will show only for selected kedro.datasets such as CSV, Spark and not with Plotly, Matplotlib datasets - the latter show Plots. So they will be mutually exclusive.

agree with @tynandebold --i think for now this implementation would be only for flowchart.

[comym]

Ok cool, that makes sense

So this is only accessible from the Flowchart side

[comym]

Another question is about the size of the tables we're covering here.

Will we set a limit for the number of rows and columns displayed?

[comym]

So this is the challenge.

Depending on how big the table is this can happen, especially on the preview.

The green area represents the cropped area of the viewport, where the data will be previewed in the metadata side panel.

If the table is too big we'll have cropped areas.

The same applies when the table is expanded. I guess we have to account for giant tables and the behaviour of being able to explore the table vertically and horizontally.

We can work around it. Just wanted to point it out.

Any thoughts @rashidakanchwala ?

[rashidakanchwala]

looks great :)

i think we can restrict the number of rows in preview to 5 and expanded modal to 10 because we don't want to load a lot of data -- it will be too heavy on the viz.

but i didn't account for the table wideness i.e. number of columns -- and this looks cool. We will have to give users to the option to horizontal scroll but maybe we can have that option only when it is expanded and not in preview

[comym]

Agreed. Yeah, let's do that. We'll have to not only limit the number of rows in the preview but also have some sort of cropping of the table in a nicer way like I'm showing with the transparent gradient up there.

We'll never know how long a label or a value in the cell is so it might end up bleeding to out of the screen.
Will keep that in mind. Also work on the expanded view.

Thanks

[comym]

Table dataset metadata side panel updated in the Design OUT file for reference.

Note we are still missing a new icon for that.

https://www.figma.com/file/akJ7QasxvLcgqc8Hxud7QB/Kedro-Design%3A-OUT?node-id=539%3A28859

[comym]

Behaviour and states for the expanded tables are now published in the Design Out file, Global page.

Note we're still missing an icon for it, and I'll also add some written words describing each image.

https://www.figma.com/file/akJ7QasxvLcgqc8Hxud7QB/Kedro-Design%3A-OUT?node-id=2021%3A86784

[comym]

Design OUT file updated showing the full described journey including new table dataset icon. You can also find the new icon on the Icons page of the Design OUT file.

Link to the journey and behaviour description

Link to the metadata side panel

Link to the Icons page, for reference

Please have a look @rashidakanchwala @tynandebold and as aways let me know if we're missing anything.
Thanks

[tynandebold]

@comym looks good to me! Approved.