Truncate data that is expanded #7777
Conversation
| if (content.substring(0, 1) === '[') { | ||
| type = '[…]'; | ||
| } else if (content.substring(0, 1) === '[') { | ||
| type = '{…}'; |
There was a problem hiding this comment.
Ah, it was supposed to be content.substring(0, 1) === '{'. Will fix.
There was a problem hiding this comment.
Unfortunately, the content doesn't distinguish between rows and arrays. A row content will also be "[ "a", "b", ... ]".
There was a problem hiding this comment.
I understand, but I think it's fine to show the rows as [...], since we represent the data as Javascript arrays.
There was a problem hiding this comment.
Sounds good. We can shorten this logic then.
const type = content.substring(0, 1) === '[' ? '[...]' : ''
Codecov Report
@@ Coverage Diff @@
## master #7777 +/- ##
==========================================
+ Coverage 65.71% 65.88% +0.17%
==========================================
Files 459 459
Lines 21981 22001 +20
Branches 2415 2418 +3
==========================================
+ Hits 14445 14496 +51
+ Misses 7415 7384 -31
Partials 121 121
Continue to review full report at Codecov.
|
| ); | ||
| const content = String(cellData); | ||
| let type; | ||
| if (content.substring(0, 1) === '[') { |
There was a problem hiding this comment.
Not sure if this is over optimization at this point, but since this function could be called tens of thousands of times, it might be better to set content.substring(0,1) to a const instead of calling it twice.
| // fit table width if content doesn't fill the width of the container | ||
| this.totalTableWidth = containerWidth; | ||
| getCellContent({ cellData, columnKey }) { | ||
| const complexColumn = this.props.expandedColumns.some( |
There was a problem hiding this comment.
we should do this outside of getCellContent and pass it in since you'd be doing this loop through all the columns for each row in the table
mistercrunch
added
🏷️ bot
CATEGORY
Choose one
SUMMARY
When we expand complex columns in SQL Lab, the original data is still presented. This is redundant, and for most rows the values will be partially truncated. Users have complained that this wastes valuable space when previewing wide tables, while at the same bringing very little information.
This PR modifies the results table so that complex columns are presented with
[...]or{...}as the results, instead of the full values (which can be seen in the columns to its left). See the screenshots below:BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
After:
Note that only expanded columns are truncated. The "json" column is not truncated, in this example.
TEST PLAN
ADDITIONAL INFORMATION
REVIEWERS
@khtruong @etr2460