Skip to content

Commit

Permalink
[Chore] Decouple table from dataset Id (#1337)
Browse files Browse the repository at this point in the history 
* Remove dateId prop from the data table to be more flexible
* Exported more functions

Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com>
Signed-off-by: Shan He <heshan0131@gmail.com>
  • Loading branch information
@heshan0131
heshan0131 committed Dec 3, 2020
1 parent c7f50fd commit f802f39
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 58 deletions.
2 changes: 1 addition & 1 deletion src/components/common/data-table/cell-size.js
View file
Expand Up @@ -34,7 +34,7 @@ export function renderedSize({
numRowsToCalculate = 10,
fontSize = 12,
font = 'Lato',
cellPadding = 30,
cellPadding = 40,
maxCellSize = 400,
maxHeaderSize = 150,
minCellSize = 45,
Expand Down
49 changes: 19 additions & 30 deletions src/components/common/data-table/index.js
View file
Expand Up @@ -112,14 +112,6 @@ export const Container = styled.div`
overflow: hidden !important;
}
.body-grid {
overflow: overlay !important;
}
.pinned-grid {
overflow: overlay !important;
}
.even-row {
background-color: ${props => props.theme.evenRowBackground};
}
Expand Down Expand Up @@ -197,10 +189,12 @@ export const Container = styled.div`
height: 100%;
overflow: hidden;
flex-grow: 1;
.col-name {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
.col-name__left {
display: flex;
Expand All @@ -214,9 +208,6 @@ export const Container = styled.div`
overflow: hidden;
white-space: nowrap;
}
.col-name__sort {
cursor: pointer;
}
}
}
Expand All @@ -241,9 +232,9 @@ const columnWidthFunction = (columns, cellSizeCache, ghost) => ({index}) => {
/*
* This is an accessor method used to generalize getting a cell from a data row
*/
const getRowCell = ({rows, columns, column, colMeta, rowIndex, sortColumn, sortOrder}) => {
const getRowCell = ({rows, columns, column, colMeta, rowIndex, sortOrder}) => {
const rowIdx = sortOrder && sortOrder.length ? get(sortOrder, rowIndex) : rowIndex;
const type = colMeta[column];
const {type} = colMeta[column];

return parseFieldValue(get(rows, [rowIdx, columns.indexOf(column)], 'Err'), type);
};
Expand Down Expand Up @@ -304,6 +295,7 @@ export const TableSection = ({
}}
</AutoSizer>
);

DataTableFactory.deps = [FieldTokenFactory];
function DataTableFactory(FieldToken) {
class DataTable extends Component {
Expand Down Expand Up @@ -367,6 +359,7 @@ function DataTableFactory(FieldToken) {
pinnedColumns,
unpinnedColumns
);

return {
cellSizeCache,
ghost
Expand Down Expand Up @@ -394,16 +387,15 @@ function DataTableFactory(FieldToken) {
colMeta,
sortColumn,
sortTableColumn,
unsortColumn,
pinTableColumn,
copyTableColumn,
dataId
copyTableColumn
} = props;

const column = columns[columnIndex];
const isGhost = column.ghost;
const isSorted = sortColumn[column];
const firstCell = columnIndex === 0;

return (
<div
className={classnames('header-cell', {
Expand All @@ -414,9 +406,9 @@ function DataTableFactory(FieldToken) {
key={key}
style={style}
onClick={e => {
e.shiftKey ? sortTableColumn(dataId, column) : null;
e.shiftKey ? sortTableColumn(column) : null;
}}
onDoubleClick={() => sortTableColumn(dataId, column)}
onDoubleClick={() => sortTableColumn(column)}
title={column}
>
{isGhost ? (
Expand All @@ -426,11 +418,8 @@ function DataTableFactory(FieldToken) {
<section className="details">
<div className="col-name">
<div className="col-name__left">
<div className="col-name__name">{column}</div>
<Button
className="col-name__sort"
onClick={() => sortTableColumn(dataId, column)}
>
<div className="col-name__name">{colMeta[column].name}</div>
<Button className="col-name__sort" onClick={() => sortTableColumn(column)}>
{isSorted ? (
isSorted === SORT_ORDER.ASCENDING ? (
<ArrowUp height="14px" />
Expand All @@ -445,22 +434,21 @@ function DataTableFactory(FieldToken) {
</Button>
</div>

<FieldToken type={colMeta[column]} />
<FieldToken type={colMeta[column].type} />
</section>

<section className="options">
<OptionDropdown
isOpened={moreOptionsColumn === column}
type={colMeta[column]}
type={colMeta[column].type}
column={column}
toggleMoreOptions={toggleMoreOptions}
sortTableColumn={mode => sortTableColumn(dataId, column, mode)}
sortTableColumn={mode => sortTableColumn(column, mode)}
sortMode={sortColumn && sortColumn[column]}
pinTableColumn={() => pinTableColumn(dataId, column)}
copyTableColumn={() => copyTableColumn(dataId, column)}
pinTableColumn={() => pinTableColumn(column)}
copyTableColumn={() => copyTableColumn(column)}
isSorted={isSorted}
isPinned={isPinned}
unsortColumn={unsortColumn}
/>
</section>
</>
Expand All @@ -478,7 +466,7 @@ function DataTableFactory(FieldToken) {
const isGhost = column.ghost;

const rowCell = isGhost ? '' : getRowCell({...props, column, rowIndex});
const type = isGhost ? null : colMeta[column];
const type = isGhost ? null : colMeta[column].type;

const endCell = columnIndex === columns.length - 1;
const firstCell = columnIndex === 0;
Expand Down Expand Up @@ -507,6 +495,7 @@ function DataTableFactory(FieldToken) {
return cell;
};
};

render() {
const {rows, pinnedColumns, theme = {}, fixedWidth, fixedHeight} = this.props;
const unpinnedColumns = this.unpinnedColumns(this.props);
Expand Down
8 changes: 5 additions & 3 deletions src/components/index.js
View file
Expand Up @@ -145,7 +145,7 @@ export {default as FieldSelectorFactory} from './common/field-selector';
export {default as Modal, ModalFooter, ModalTitle} from './common/modal';
export {default as AppLogo} from './common/logo';
export {default as Switch} from './common/switch';
export {default as Checkbox} from 'components/common/checkbox';
export {default as Checkbox} from './common/checkbox';
export {default as LoadingSpinner} from './common/loading-spinner';
export {default as LoadingDialog} from './modals/loading-dialog';
export {default as FieldTokenFactory} from './common/field-token';
Expand All @@ -154,7 +154,9 @@ export {default as ProgressBar} from './common/progress-bar';
export {default as FileUploadProgress} from './common/file-uploader/file-upload-progress';
export {default as Slider} from './common/slider/slider';
export {DatasetSquare} from './common/styled-components';
export {default as ActionPanel, ActionPanelItem} from 'components/common/action-panel';
export {default as ActionPanel, ActionPanelItem} from './common/action-panel';
export {default as DataTableFactory} from './common/data-table';
export {default as CanvasHack} from './common/data-table/canvas';

// side pane components
export {default as LayerTypeSelectorFactory} from './side-panel/layer-panel/layer-type-selector';
Expand All @@ -176,7 +178,7 @@ export {
} from './side-panel/layer-panel/layer-configurator';

// map components
export {default as MapLegend} from 'components/map/map-legend'
export {default as MapLegend} from 'components/map/map-legend';


export * from './common/styled-components';
Expand Down
34 changes: 26 additions & 8 deletions src/components/modals/data-table-modal.js
View file
Expand Up @@ -96,18 +96,22 @@ function DataTableModalFactory(DataTable) {
columns = createSelector(this.fields, fields => fields.map(f => f.name));
colMeta = createSelector(this.fields, fields =>
fields.reduce(
(acc, {name, type}) => ({
(acc, {name, displayName, type}) => ({
...acc,
[name]: type
[name]: {
name: displayName || name,
type
}
}),
{}
)
);

cellSizeCache = createSelector(this.dataId, this.datasets, (dataId, datasets) => {
if (!this.props.datasets[dataId]) {
if (!datasets[dataId]) {
return {};
}
const {fields, allData} = this.props.datasets[dataId];
const {fields, allData} = datasets[dataId];

let showCalculate = null;
if (!this.datasetCellSizeCache[dataId]) {
Expand Down Expand Up @@ -148,6 +152,21 @@ function DataTableModalFactory(DataTable) {
return cellSizeCache;
});

copyTableColumn = column => {
const {dataId, copyTableColumn} = this.props;
copyTableColumn(dataId, column);
};

pinTableColumn = column => {
const {dataId, pinTableColumn} = this.props;
pinTableColumn(dataId, column);
};

sortTableColumn = (column, mode) => {
const {dataId, sortTableColumn} = this.props;
sortTableColumn(dataId, column, mode);
};

render() {
const {datasets, dataId, showDatasetTable, showTab} = this.props;
if (!datasets || !dataId) {
Expand All @@ -172,17 +191,16 @@ function DataTableModalFactory(DataTable) {
{datasets[dataId] ? (
<DataTable
key={dataId}
dataId={dataId}
columns={columns}
colMeta={colMeta}
cellSizeCache={cellSizeCache}
rows={activeDataset.allData}
pinnedColumns={activeDataset.pinnedColumns}
sortOrder={activeDataset.sortOrder}
sortColumn={activeDataset.sortColumn}
copyTableColumn={this.props.copyTableColumn}
pinTableColumn={this.props.pinTableColumn}
sortTableColumn={this.props.sortTableColumn}
copyTableColumn={this.copyTableColumn}
pinTableColumn={this.pinTableColumn}
sortTableColumn={this.sortTableColumn}
/>
) : null}
</TableContainer>
Expand Down
3 changes: 2 additions & 1 deletion src/constants/index.js
View file
Expand Up @@ -62,7 +62,8 @@ export {
ANIMATION_WINDOW,
DEFAULT_TIME_FORMAT,
SPEED_CONTROL_RANGE,
RESOLUTIONS
RESOLUTIONS,
SORT_ORDER
} from './default-settings';

export {BUG_REPORT_LINK, USER_GUIDE_DOC} from './user-guides';
Expand Down
1 change: 1 addition & 0 deletions src/utils/dataset-utils.js
View file
Expand Up @@ -213,3 +213,4 @@ export function sortDatasetByColumn(dataset, column, mode) {
sortOrder
};
}

0 comments on commit f802f39

Please sign in to comment.