diff --git a/frontend/src/metadata/metadata-view/components/popover/groupby-popover/widgets/groupby-item.jsx b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/widgets/groupby-item.jsx index e47acd31cce..851d590f6a5 100644 --- a/frontend/src/metadata/metadata-view/components/popover/groupby-popover/widgets/groupby-item.jsx +++ b/frontend/src/metadata/metadata-view/components/popover/groupby-popover/widgets/groupby-item.jsx @@ -32,10 +32,9 @@ class GroupbyItem extends Component { }; renderTipMessage = () => { - const { column } = this.props; + const { column, view } = this.props; const { tooltipOpen } = this.state; - const page = window.app.getPage(); - const { shown_column_keys } = page || {}; + const { shown_column_keys } = view || {}; if (!shown_column_keys || !Array.isArray(shown_column_keys) || shown_column_keys.includes(column.key)) { return null; @@ -110,6 +109,7 @@ class GroupbyItem extends Component { GroupbyItem.propTypes = { index: PropTypes.number, column: PropTypes.object, + view: PropTypes.object, groupby: PropTypes.object, columnsOptions: PropTypes.array, geoCountTypeOptions: PropTypes.array, diff --git a/frontend/src/metadata/metadata-view/components/table/container.js b/frontend/src/metadata/metadata-view/components/table/container.js index b10f2605efd..26f54c9a61e 100644 --- a/frontend/src/metadata/metadata-view/components/table/container.js +++ b/frontend/src/metadata/metadata-view/components/table/container.js @@ -147,12 +147,8 @@ const Container = () => { return recordGetter(recordIndex); }, [groupRecordGetter, recordGetter]); - const getTableContentWidth = useCallback(() => { - return containerRef?.current?.offsetWidth || 0; - }, [containerRef]); - - const getTableContentLeft = useCallback(() => { - return containerRef?.current?.getBoundingClientRect()?.left || 0; + const getTableContentRect = useCallback(() => { + return containerRef?.current?.getBoundingClientRect() || { x: 0, right: window.innerWidth }; }, [containerRef]); useEffect(() => { @@ -182,8 +178,7 @@ const Container = () => { modifyRecords={modifyRecords} recordGetterById={recordGetterById} recordGetterByIndex={recordGetterByIndex} - getTableContentWidth={getTableContentWidth} - getTableContentLeft={getTableContentLeft} + getTableContentRect={getTableContentRect} getAdjacentRowsIds={getAdjacentRowsIds} loadAll={loadAll} /> diff --git a/frontend/src/metadata/metadata-view/components/table/index.css b/frontend/src/metadata/metadata-view/components/table/index.css index c0a16bddd37..d2c99ea5642 100644 --- a/frontend/src/metadata/metadata-view/components/table/index.css +++ b/frontend/src/metadata/metadata-view/components/table/index.css @@ -634,6 +634,7 @@ width: 16px; margin-left: 0; transform: translateY(0px); + flex-shrink: 0; } .sf-metadata-result-table-cell .select-all-checkbox-container .sf-metadata-icon-partially-selected { diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js index 5f6a8fe0523..d2c78998e02 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container-right.js @@ -33,7 +33,7 @@ class GroupContainerRight extends Component { isExpanded={isExpanded} columns={columns} summaryConfigs={summaryConfigs} - getTableContentLeft={this.props.getTableContentLeft} + getTableContentRect={this.props.getTableContentRect} /> ); @@ -50,7 +50,7 @@ GroupContainerRight.propTypes = { height: PropTypes.number, groupOffsetLeft: PropTypes.number, lastFrozenColumnKey: PropTypes.string, - getTableContentLeft: PropTypes.func, + getTableContentRect: PropTypes.func, }; export default GroupContainerRight; diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js index fb2d1f4cbe3..8e82e9f74f9 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-container/index.js @@ -41,7 +41,7 @@ class GroupContainer extends Component { fixedFrozenDOMs = (scrollLeft, scrollTop) => { if (this.backDrop) { - const tableContentLeft = this.props.getTableContentLeft(); + const tableContentLeft = this.props.getTableContentRect(); this.backDrop.style.position = 'fixed'; this.backDrop.style.marginLeft = tableContentLeft + 'px'; this.backDrop.style.marginTop = (-scrollTop) + 'px'; @@ -134,7 +134,7 @@ class GroupContainer extends Component { lastFrozenColumnKey={lastFrozenColumnKey} columns={columns} summaryConfigs={summaryConfigs} - getTableContentLeft={this.props.getTableContentLeft} + getTableContentRect={this.props.getTableContentRect} /> ); @@ -158,7 +158,7 @@ GroupContainer.propTypes = { scrollLeft: PropTypes.number, maxLevel: PropTypes.number, summaryConfigs: PropTypes.object, - getTableContentLeft: PropTypes.func, + getTableContentRect: PropTypes.func, onExpandGroupToggle: PropTypes.func, updateSummaryConfig: PropTypes.func, }; diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js index 98b2237480b..474baf7dfd5 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-cell.js @@ -10,7 +10,7 @@ class GroupHeaderCell extends React.PureComponent { fixedFrozenDOMs = (scrollLeft, scrollTop) => { if (this.headerCell) { const { firstColumnWidth, groupOffsetLeft } = this.props; - const tableContentLeft = this.props.getTableContentLeft(); + const tableContentLeft = this.props.getTableContentRect(); this.headerCell.style.position = 'fixed'; this.headerCell.style.marginLeft = (SEQUENCE_COLUMN_WIDTH + firstColumnWidth + groupOffsetLeft + tableContentLeft) + 'px'; this.headerCell.style.marginTop = (-scrollTop) + 'px'; @@ -64,7 +64,7 @@ GroupHeaderCell.propTypes = { groupOffsetLeft: PropTypes.number, summary: PropTypes.object, summaryMethod: PropTypes.string, - getTableContentLeft: PropTypes.func, + getTableContentRect: PropTypes.func, }; export default GroupHeaderCell; diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js index 6bcd895ddd4..481a5d45fd8 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-header-right.js @@ -57,7 +57,7 @@ class GroupHeaderRight extends Component { isExpanded={isExpanded} summary={summary} summaryMethod={summaryMethod} - getTableContentLeft={this.props.getTableContentLeft} + getTableContentRect={this.props.getTableContentRect} /> ); }); @@ -79,7 +79,7 @@ GroupHeaderRight.propTypes = { lastFrozenColumnKey: PropTypes.string, columns: PropTypes.array, summaryConfigs: PropTypes.object, - getTableContentLeft: PropTypes.func, + getTableContentRect: PropTypes.func, }; export default GroupHeaderRight; diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js index 0efba7ff60e..968b931b9d6 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/group-widgets/group-title.js @@ -19,11 +19,6 @@ class GroupTitle extends Component { this.collaborators = window.sfMetadataContext.getCollaboratorsFromCache(); } - getOptionColors = () => { - const { dtableUtils } = window.app; - return dtableUtils.getOptionColors(); - }; - renderCollaborator = (collaborator) => { const { email, avatar_url, name } = collaborator || {}; return ( diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js index ac48ac234bb..ffadd1b0649 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/index.js @@ -28,7 +28,8 @@ class Records extends Component { this.lastScrollLeft = this.scrollLeft; this.initPosition = { idx: -1, rowIdx: -1, groupRecordIndex: -1 }; const columnMetrics = this.createColumnMetrics(props); - const initHorizontalScrollState = this.getHorizontalScrollState({ gridWidth: props.tableContentWidth, columnMetrics, scrollLeft: 0 }); + const { width: tableContentWidth } = props.getTableContentRect(); + const initHorizontalScrollState = this.getHorizontalScrollState({ gridWidth: tableContentWidth, columnMetrics, scrollLeft: 0 }); this.state = { columnMetrics, recordMetrics: this.createRowMetrics(), @@ -45,7 +46,6 @@ class Records extends Component { } componentDidMount() { - window.addEventListener('popstate', this.onPopState); document.addEventListener('copy', this.onCopyCells); document.addEventListener('paste', this.onPasteCells); if (window.isMobile) { @@ -56,11 +56,11 @@ class Records extends Component { } this.unsubscribeSelectNone = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.SELECT_NONE, this.selectNone); this.getScrollPosition(); - this.checkExpandRow(); } UNSAFE_componentWillReceiveProps(nextProps) { - const { columns, tableContentWidth } = nextProps; + const { columns, getTableContentRect } = nextProps; + const { width: tableContentWidth } = getTableContentRect(); if ( this.props.columns !== columns ) { @@ -71,7 +71,7 @@ class Records extends Component { gridWidth: tableContentWidth, }); this.setState({ columnMetrics }); - } else if (this.props.tableContentWidth !== tableContentWidth) { + } else if (this.props.getTableContentRect()?.width !== tableContentWidth) { this.updateHorizontalScrollState({ columnMetrics: this.state.columnMetrics, scrollLeft: this.lastScrollLeft, @@ -82,7 +82,6 @@ class Records extends Component { } componentWillUnmount() { - window.removeEventListener('popstate', this.onPopState); document.removeEventListener('copy', this.onCopyCells); document.removeEventListener('paste', this.onPasteCells); if (window.isMobile) { @@ -143,10 +142,6 @@ class Records extends Component { } }; - checkExpandRow = async () => { - // todo - }; - storeScrollPosition = () => { const scrollTop = this.bodyRef.getScrollTop(); const scrollLeft = this.getScrollLeft(); @@ -177,11 +172,12 @@ class Records extends Component { }; handleHorizontalScroll = (scrollLeft, scrollTop) => { + const { width: tableContentWidth } = this.props.getTableContentRect(); if (isMobile) { this.updateHorizontalScrollState({ scrollLeft, columnMetrics: this.state.columnMetrics, - gridWidth: this.props.tableContentWidth, + gridWidth: tableContentWidth, }); return; } @@ -213,7 +209,7 @@ class Records extends Component { this.updateHorizontalScrollState({ scrollLeft, columnMetrics: this.state.columnMetrics, - gridWidth: this.props.tableContentWidth, + gridWidth: tableContentWidth, }); }; @@ -359,10 +355,6 @@ class Records extends Component { this.updateSelectedRange(selectedRange); }; - onPopState = () => { - this.checkExpandRow(); - }; - onCopyCells = (e) => { window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.COPY_CELLS, e); }; @@ -753,7 +745,7 @@ Records.propTypes = { groups: PropTypes.array, groupbys: PropTypes.array, searchResult: PropTypes.object, - tableContentWidth: PropTypes.number, + getTableContentRect: PropTypes.func, scrollToLoadMore: PropTypes.func, updateRecord: PropTypes.func, updateRecords: PropTypes.func, diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js index 9ef06140a31..abd786fdc31 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-body.js @@ -81,7 +81,8 @@ class RecordsBody extends Component { }; setColumnVisibleEnd = () => { - const { columns, getScrollLeft, tableContentWidth } = this.props; + const { columns, getScrollLeft, getTableContentRect } = this.props; + const { width: tableContentWidth } = getTableContentRect(); let columnVisibleEnd = 0; const contentScrollLeft = getScrollLeft(); let endColumnWidth = tableContentWidth + contentScrollLeft; @@ -135,7 +136,8 @@ class RecordsBody extends Component { }; scrollToColumn = (idx) => { - const { columns, tableContentWidth } = this.props; + const { columns, getTableContentRect } = this.props; + const { width: tableContentWidth } = getTableContentRect(); const newScrollLeft = getColumnScrollPosition(columns, idx, tableContentWidth); if (newScrollLeft !== null) { this.props.setRecordsScrollLeft(newScrollLeft); @@ -550,7 +552,7 @@ class RecordsBody extends Component { getRowTop={this.getRowTop} scrollTop={this.oldScrollTop} getScrollLeft={this.props.getScrollLeft} - getTableContentLeft={this.props.getTableContentLeft} + getTableContentRect={this.props.getTableContentRect} getMobileFloatIconStyle={this.props.getMobileFloatIconStyle} onToggleMobileMoreOperations={this.props.onToggleMobileMoreOperations} editorPortalTarget={this.props.editorPortalTarget} @@ -606,7 +608,7 @@ RecordsBody.propTypes = { hasSelectedCell: PropTypes.func, cacheScrollTop: PropTypes.func, scrollToLoadMore: PropTypes.func, - getTableContentLeft: PropTypes.func, + getTableContentRect: PropTypes.func, getMobileFloatIconStyle: PropTypes.func, onToggleMobileMoreOperations: PropTypes.func, onToggleInsertRecordDialog: PropTypes.func, @@ -628,7 +630,6 @@ RecordsBody.propTypes = { paste: PropTypes.func, searchResult: PropTypes.object, scrollToRowIndex: PropTypes.number, - tableContentWidth: PropTypes.number, frozenColumnsWidth: PropTypes.number, editMobileCell: PropTypes.func, insertRecords: PropTypes.func, diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx index dae7066a561..bd50a05fee8 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx +++ b/frontend/src/metadata/metadata-view/components/table/table-main/records/records-group-body.jsx @@ -168,7 +168,8 @@ class RecordsGroupBody extends Component { }; setColumnVisibleEnd = () => { - const { columns, getScrollLeft, tableContentWidth } = this.props; + const { columns, getScrollLeft, getTableContentRect } = this.props; + const { width: tableContentWidth } = getTableContentRect(); let columnVisibleEnd = 0; const contentScrollLeft = getScrollLeft(); let endColumnWidth = tableContentWidth + contentScrollLeft; @@ -208,7 +209,8 @@ class RecordsGroupBody extends Component { }; scrollToColumn = (idx) => { - const { columns, tableContentWidth } = this.props; + const { columns, getTableContentRect } = this.props; + const { width: tableContentWidth } = getTableContentRect(); const newScrollLeft = getColumnScrollPosition(columns, idx, tableContentWidth); if (newScrollLeft !== null) { this.props.setRecordsScrollLeft(newScrollLeft); @@ -822,13 +824,12 @@ class RecordsGroupBody extends Component { maxLevel={maxLevel} groupOffsetLeft={groupOffsetLeft} scrollLeft={scrollLeft} - leftBarWidth={0} columns={columns} summaryConfigs={summaryConfigs} isExpanded={isExpanded} folding={folding} lastFrozenColumnKey={lastFrozenColumnKey} - getTableContentLeft={this.props.getTableContentLeft} + getTableContentRect={this.props.getTableContentRect} onExpandGroupToggle={this.onExpandGroupToggle} /> ); @@ -923,7 +924,7 @@ class RecordsGroupBody extends Component { scrollTop={this.oldScrollTop} getRowTop={this.getRowTop} getScrollLeft={this.props.getScrollLeft} - getTableContentLeft={this.props.getTableContentLeft} + getTableContentRect={this.props.getTableContentRect} getMobileFloatIconStyle={this.props.getMobileFloatIconStyle} onToggleMobileMoreOperations={this.props.onToggleMobileMoreOperations} onToggleInsertRecordDialog={this.props.onToggleInsertRecordDialog} @@ -983,7 +984,6 @@ RecordsGroupBody.propTypes = { columns: PropTypes.array, colOverScanStartIdx: PropTypes.number, colOverScanEndIdx: PropTypes.number, - tableContentWidth: PropTypes.number, totalWidth: PropTypes.number, containerWidth: PropTypes.number, groups: PropTypes.array, @@ -1003,7 +1003,7 @@ RecordsGroupBody.propTypes = { hasSelectedCell: PropTypes.func, cacheScrollTop: PropTypes.func, scrollToLoadMore: PropTypes.func, - getTableContentLeft: PropTypes.func, + getTableContentRect: PropTypes.func, getMobileFloatIconStyle: PropTypes.func, onToggleMobileMoreOperations: PropTypes.func, onToggleInsertRecordDialog: PropTypes.func, diff --git a/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js b/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js index 57483246edd..194e6c58ef8 100644 --- a/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js +++ b/frontend/src/metadata/metadata-view/components/table/table-masks/interaction-masks/index.js @@ -29,7 +29,7 @@ import { gettext } from '../../../../../../utils/constants'; import './index.css'; const READONLY_PREVIEW_COLUMNS = [ - CellType.LONG_TEXT, CellType.IMAGE, CellType.FILE, CellType.LINK, CellType.DIGITAL_SIGN, CellType.LINK_FORMULA, + ]; const propTypes = { @@ -48,7 +48,7 @@ const propTypes = { getRowTop: PropTypes.func, scrollTop: PropTypes.number, getScrollLeft: PropTypes.func, - getTableContentLeft: PropTypes.func, + getTableContentRect: PropTypes.func, getMobileFloatIconStyle: PropTypes.func, onToggleMobileMoreOperations: PropTypes.func, onToggleInsertRecordDialog: PropTypes.func, @@ -427,7 +427,7 @@ class InteractionMasks extends React.Component { if (frozen) { // use fixed const { top: containerTop } = this.container.getClientRects()[0]; - const tableContentLeft = this.props.getTableContentLeft(); + const { left: tableContentLeft } = this.props.getTableContentRect(); let top = containerTop + getRowTop(isGroupView ? groupRecordIndex : rowIdx); let left = tableContentLeft + column.left; if (isGroupView) { @@ -869,12 +869,15 @@ class InteractionMasks extends React.Component { const rect = cellContainer.getBoundingClientRect(); const leftInterval = this.getLeftInterval(); const nextColumnWidth = columns[current.idx - 1] ? columns[current.idx - 1].width : 0; + const { left: tableContentLeft, right } = this.props.getTableContentRect(); + const viewLeft = tableContentLeft + 130; + // selectMask is outside the viewport, scroll to next column - if (rect.x < 0 || rect.x > window.innerWidth) { + if (rect.x < 0 || rect.x > right) { this.props.scrollToColumn(current.idx - 1); - } else if (nextColumnWidth > rect.x - leftInterval) { + } else if (nextColumnWidth > rect.x - leftInterval - viewLeft) { // selectMask is part of the viewport, newScrollLeft = columnWidth - visibleWidth - const newScrollLeft = nextColumnWidth - (rect.x - leftInterval); + const newScrollLeft = nextColumnWidth - (rect.x - leftInterval - viewLeft); this.props.setRecordsScrollLeft(this.props.getScrollLeft() - newScrollLeft); } return ({ ...current, idx: current.idx === 0 ? 0 : current.idx - 1 }); @@ -890,13 +893,14 @@ class InteractionMasks extends React.Component { if (columnIdx === 1 && column.frozen === true) { this.props.scrollToColumn(1); } else { + const { right: tableContentRight } = this.props.getTableContentRect(); const nextColumnWidth = columns[columnIdx + 1] ? columns[columnIdx + 1].width : 0; // selectMask is outside the viewport, scroll to next column - if (rect.x < 0 || rect.x > window.innerWidth) { + if (rect.x < 0 || rect.x > tableContentRight) { this.props.scrollToColumn(columnIdx + 1); - } else if (rect.x + rect.width + nextColumnWidth > window.innerWidth) { + } else if (rect.x + rect.width + nextColumnWidth > tableContentRight) { // selectMask is part of the viewport, newScrollLeft = columnWidth - visibleWidth - const newScrollLeft = nextColumnWidth - (window.innerWidth - rect.x - rect.width); + const newScrollLeft = nextColumnWidth - (tableContentRight - rect.x - rect.width); this.props.setRecordsScrollLeft(this.props.getScrollLeft() + newScrollLeft); } }