mirror of https://github.com/apache/superset.git
Truncate data that is expanded (#7777)
* Truncate data that is expanded * Fix object check * Small optimizations
This commit is contained in:
parent
fc6a53eda9
commit
34ca2aefbe
|
@ -115,6 +115,7 @@ export default class FilterableTable extends PureComponent {
|
||||||
super(props);
|
super(props);
|
||||||
this.list = List(this.formatTableData(props.data));
|
this.list = List(this.formatTableData(props.data));
|
||||||
this.addJsonModal = this.addJsonModal.bind(this);
|
this.addJsonModal = this.addJsonModal.bind(this);
|
||||||
|
this.getCellContent = this.getCellContent.bind(this);
|
||||||
this.renderGridCell = this.renderGridCell.bind(this);
|
this.renderGridCell = this.renderGridCell.bind(this);
|
||||||
this.renderGridCellHeader = this.renderGridCellHeader.bind(this);
|
this.renderGridCellHeader = this.renderGridCellHeader.bind(this);
|
||||||
this.renderGrid = this.renderGrid.bind(this);
|
this.renderGrid = this.renderGrid.bind(this);
|
||||||
|
@ -124,6 +125,13 @@ export default class FilterableTable extends PureComponent {
|
||||||
this.rowClassName = this.rowClassName.bind(this);
|
this.rowClassName = this.rowClassName.bind(this);
|
||||||
this.sort = this.sort.bind(this);
|
this.sort = this.sort.bind(this);
|
||||||
|
|
||||||
|
// columns that have complex type and were expanded into sub columns
|
||||||
|
this.complexColumns = props.orderedColumnKeys
|
||||||
|
.reduce((obj, key) => ({
|
||||||
|
...obj,
|
||||||
|
[key]: props.expandedColumns.some(name => name.startsWith(key + '.')),
|
||||||
|
}), {});
|
||||||
|
|
||||||
this.widthsForColumnsByKey = this.getWidthsForColumns();
|
this.widthsForColumnsByKey = this.getWidthsForColumns();
|
||||||
this.totalTableWidth = props.orderedColumnKeys
|
this.totalTableWidth = props.orderedColumnKeys
|
||||||
.map(key => this.widthsForColumnsByKey[key])
|
.map(key => this.widthsForColumnsByKey[key])
|
||||||
|
@ -152,21 +160,30 @@ export default class FilterableTable extends PureComponent {
|
||||||
const widthsByColumnKey = {};
|
const widthsByColumnKey = {};
|
||||||
this.props.orderedColumnKeys.forEach((key) => {
|
this.props.orderedColumnKeys.forEach((key) => {
|
||||||
const colWidths = this.list
|
const colWidths = this.list
|
||||||
.map(d => getTextWidth(d[key]) + PADDING) // get width for each value for a key
|
// get width for each value for a key
|
||||||
.push(getTextWidth(key) + PADDING); // add width of column key to end of list
|
.map(d => getTextWidth(
|
||||||
|
this.getCellContent({ cellData: d[key], columnKey: key })) + PADDING,
|
||||||
|
)
|
||||||
|
// add width of column key to end of list
|
||||||
|
.push(getTextWidth(key) + PADDING);
|
||||||
// set max width as value for key
|
// set max width as value for key
|
||||||
widthsByColumnKey[key] = Math.max(...colWidths);
|
widthsByColumnKey[key] = Math.max(...colWidths);
|
||||||
});
|
});
|
||||||
return widthsByColumnKey;
|
return widthsByColumnKey;
|
||||||
}
|
}
|
||||||
|
|
||||||
fitTableToWidthIfNeeded() {
|
getCellContent({ cellData, columnKey }) {
|
||||||
const containerWidth = this.container.clientWidth;
|
const content = String(cellData);
|
||||||
if (this.totalTableWidth < containerWidth) {
|
const firstCharacter = content.substring(0, 1);
|
||||||
// fit table width if content doesn't fill the width of the container
|
let truncated;
|
||||||
this.totalTableWidth = containerWidth;
|
if (firstCharacter === '[') {
|
||||||
|
truncated = '[…]';
|
||||||
|
} else if (firstCharacter === '{') {
|
||||||
|
truncated = '{…}';
|
||||||
|
} else {
|
||||||
|
truncated = '';
|
||||||
}
|
}
|
||||||
this.setState({ fitted: true });
|
return this.complexColumns[columnKey] ? truncated : content;
|
||||||
}
|
}
|
||||||
|
|
||||||
formatTableData(data) {
|
formatTableData(data) {
|
||||||
|
@ -213,6 +230,15 @@ export default class FilterableTable extends PureComponent {
|
||||||
this.setState({ sortBy, sortDirection });
|
this.setState({ sortBy, sortDirection });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fitTableToWidthIfNeeded() {
|
||||||
|
const containerWidth = this.container.clientWidth;
|
||||||
|
if (this.totalTableWidth < containerWidth) {
|
||||||
|
// fit table width if content doesn't fill the width of the container
|
||||||
|
this.totalTableWidth = containerWidth;
|
||||||
|
}
|
||||||
|
this.setState({ fitted: true });
|
||||||
|
}
|
||||||
|
|
||||||
addJsonModal(node, jsonObject, jsonString) {
|
addJsonModal(node, jsonObject, jsonString) {
|
||||||
return (
|
return (
|
||||||
<ModalTrigger
|
<ModalTrigger
|
||||||
|
@ -260,13 +286,14 @@ export default class FilterableTable extends PureComponent {
|
||||||
renderGridCell({ columnIndex, key, rowIndex, style }) {
|
renderGridCell({ columnIndex, key, rowIndex, style }) {
|
||||||
const columnKey = this.props.orderedColumnKeys[columnIndex];
|
const columnKey = this.props.orderedColumnKeys[columnIndex];
|
||||||
const cellData = this.list.get(rowIndex)[columnKey];
|
const cellData = this.list.get(rowIndex)[columnKey];
|
||||||
|
const content = this.getCellContent({ cellData, columnKey });
|
||||||
const cellNode = (
|
const cellNode = (
|
||||||
<div
|
<div
|
||||||
key={key}
|
key={key}
|
||||||
style={{ ...style, top: style.top - GRID_POSITION_ADJUSTMENT }}
|
style={{ ...style, top: style.top - GRID_POSITION_ADJUSTMENT }}
|
||||||
className={`grid-cell ${this.rowClassName({ index: rowIndex })}`}
|
className={`grid-cell ${this.rowClassName({ index: rowIndex })}`}
|
||||||
>
|
>
|
||||||
{cellData}
|
{content}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -332,8 +359,8 @@ export default class FilterableTable extends PureComponent {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
renderTableCell({ cellData }) {
|
renderTableCell({ cellData, columnKey }) {
|
||||||
const cellNode = String(cellData);
|
const cellNode = this.getCellContent({ cellData, columnKey });
|
||||||
const jsonObject = safeJsonObjectParse(cellData);
|
const jsonObject = safeJsonObjectParse(cellData);
|
||||||
if (jsonObject) {
|
if (jsonObject) {
|
||||||
return this.addJsonModal(cellNode, jsonObject, cellData);
|
return this.addJsonModal(cellNode, jsonObject, cellData);
|
||||||
|
@ -396,7 +423,7 @@ export default class FilterableTable extends PureComponent {
|
||||||
>
|
>
|
||||||
{orderedColumnKeys.map(columnKey => (
|
{orderedColumnKeys.map(columnKey => (
|
||||||
<Column
|
<Column
|
||||||
cellRenderer={this.renderTableCell}
|
cellRenderer={({ cellData }) => this.renderTableCell({ cellData, columnKey })}
|
||||||
dataKey={columnKey}
|
dataKey={columnKey}
|
||||||
disableSort={false}
|
disableSort={false}
|
||||||
headerRenderer={this.renderTableHeader}
|
headerRenderer={this.renderTableHeader}
|
||||||
|
|
|
@ -591,7 +591,7 @@ class PrestoEngineSpec(BaseEngineSpec):
|
||||||
{'ColumnA': [1, 2], 'ColumnB': [3]},
|
{'ColumnA': [1, 2], 'ColumnB': [3]},
|
||||||
{'ColumnA': [11, 22], 'ColumnB': [33]}
|
{'ColumnA': [11, 22], 'ColumnB': [33]}
|
||||||
]
|
]
|
||||||
all_array_data (intially) = {
|
all_array_data (initially) = {
|
||||||
0: [{'ColumnA': [1, 2], 'ColumnB': [3}],
|
0: [{'ColumnA': [1, 2], 'ColumnB': [3}],
|
||||||
1: [{'ColumnA': [11, 22], 'ColumnB': [33]}]
|
1: [{'ColumnA': [11, 22], 'ColumnB': [33]}]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue