Feat: Show Nested Table Columns

[danwom]

Summary of Changes

In addition to showing nested columns as strings in a modal, we now support showing nested columns as individual rows in the list of columns. Also fixes some bugs where sorting columns would mess up descriptions and nested types.

Tests

Documentation

CheckList

Make sure you have checked all steps below to ensure a timely review.

• PR title addresses the issue accurately and concisely. Example: "Updates the version of Flask to v1.0.2"
  • In case you are adding a dependency, check if the license complies with the ASF 3rd Party License Policy.
• PR includes a summary of changes.
• PR adds unit tests, updates existing unit tests, OR documents why no test additions or modifications are needed.
• In case of new functionality, my PR adds documentation that describes how to use it.
  • All the public functions and the classes in the PR contain docstrings that explain what it does

[danwom]

Probably need to reverse this field or something.

[Golodhros]

Let's test all these helper functions thoroughly.

[Golodhros]

Suggested change

	{expandRow? (
	{expandRow ? (

[Golodhros]

Nit:

Suggested change

	const nestedType = parseNestedType(column.col_type);
	return {
	const nestedType = parseNestedType(column.col_type);
	return {

[Golodhros]

Suggested change

	const result = convertNestedTypeToColumns(nestedType);
	const result = Parser.convertNestedTypeToColumns(nestedType);

[Golodhros]

I would just do:

Suggested change

	let arrow;
	if (nestedLevel > 0) {
	arrow = (
	<>
	<div className={`nesting-arrow-spacer spacer-${nestedLevel}`} />
	<NestingArrow />
	</>
	);
	}
	return (
	<>
	{arrow}
	<div className="column-name-container">
	<h3 className="column-name">{title}</h3>
	<p className="column-desc truncated">{description}</p>
	</div>
	</>
	);
	return (
	<>
	{nestedLevel > 0 && (<>
	<div className={`nesting-arrow-spacer spacer-${nestedLevel}`} />
	<NestingArrow />
	</>)}
	<div className="column-name-container">
	<h3 className="column-name">{title}</h3>
	<p className="column-desc truncated">{description}</p>
	</div>
	</>
	);

[Golodhros]

Looking good!

There seems to be an issue with your prettier or your pre-commit hooks, as there are some formatting issues.

[Golodhros]

LGTM

[markgrover]

This is awesome, do you have a screenshot here that you could share?

[NiravLangaliya]

I have one request, Can we have sample data as well ? because we are getting such a good features but can't get visual or understanding better without having sample data.

[jroof88]

Hi @danwom. This change significantly derailed the frontend of my organizations Amundsen deployment. Some of the databuilder extractors (namely Delta Lake & BigQuery) scrape for nested columns during the extraction process. They do this because previously there was no nice way to render nested columns on the UI so they just got created as columns. With this UI change these columns are now rendered twice.

New UI change:

Same columns on same Table Detail Page:

My ask here is can we roll these types of change out behind a configuration value? This way folks have to deliberately turhn it on. Or if people prefer this way then it can be turned on by default but at least there is a way for me to turn it off. I would still like to have my extractor extract the nested the columns because it is easier to read with the full nested path (especially where there are many levels of nesting) and I can add descriptions to nested columns that way.

cc @markgrover @feng-tao if you have any input.