diff --git a/src/components/Toolbar/Toolbar.react.js b/src/components/Toolbar/Toolbar.react.js index 9193d9669..17940e7ac 100644 --- a/src/components/Toolbar/Toolbar.react.js +++ b/src/components/Toolbar/Toolbar.react.js @@ -177,12 +177,12 @@ const Toolbar = props => { {props.isPanelVisible ? ( <> - Hide Panel + Hide {props.panelCount > 1 ? `${props.panelCount} Panels` : 'Panel'} ) : ( <> - Show Panel + Show {props.panelCount > 1 ? `${props.panelCount} Panels` : 'Panel'} )} diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js index b06c4057a..6781a728c 100644 --- a/src/dashboard/Data/Browser/DataBrowser.react.js +++ b/src/dashboard/Data/Browser/DataBrowser.react.js @@ -383,15 +383,31 @@ export default class DataBrowser extends React.Component { } handleResizeStop(event, { size }) { + // Convert effective width back to full panel width when there are hidden panels + let newPanelWidth = size.width; + if (this.state.panelCount > 1 && this.state.displayedObjectIds.length < this.state.panelCount) { + const actualPanelCount = Math.max(this.state.displayedObjectIds.length, 1); + // Reverse the calculation: fullWidth = (effectiveWidth / actualPanelCount) * panelCount + newPanelWidth = (size.width / actualPanelCount) * this.state.panelCount; + } + this.setState({ isResizing: false, - panelWidth: size.width, + panelWidth: newPanelWidth, }); - window.localStorage?.setItem(AGGREGATION_PANEL_WIDTH, size.width); + window.localStorage?.setItem(AGGREGATION_PANEL_WIDTH, newPanelWidth); } handleResizeDiv(event, { size }) { - this.setState({ panelWidth: size.width }); + // Convert effective width back to full panel width when there are hidden panels + let newPanelWidth = size.width; + if (this.state.panelCount > 1 && this.state.displayedObjectIds.length < this.state.panelCount) { + const actualPanelCount = Math.max(this.state.displayedObjectIds.length, 1); + // Reverse the calculation: fullWidth = (effectiveWidth / actualPanelCount) * panelCount + newPanelWidth = (size.width / actualPanelCount) * this.state.panelCount; + } + + this.setState({ panelWidth: newPanelWidth }); } setShowAggregatedData(bool) { @@ -1507,6 +1523,17 @@ export default class DataBrowser extends React.Component { ...other } = this.props; const { preventSchemaEdits, applicationId } = app; + + // Calculate effective panel width based on actual displayed panels + // When panelCount > 1 but fewer panels are actually displayed, reduce width proportionally + let effectivePanelWidth = this.state.panelWidth; + if (this.state.panelCount > 1 && this.state.displayedObjectIds.length < this.state.panelCount) { + // Width per panel = total width / configured panel count + // Effective width = width per panel * actual number of displayed panels (or 1 if none) + const actualPanelCount = Math.max(this.state.displayedObjectIds.length, 1); + effectivePanelWidth = (this.state.panelWidth / this.state.panelCount) * actualPanelCount; + } + return (
@@ -1535,7 +1562,7 @@ export default class DataBrowser extends React.Component { selectedCells={this.state.selectedCells} handleCellClick={this.handleCellClick} isPanelVisible={this.state.isPanelVisible} - panelWidth={this.state.panelWidth} + panelWidth={effectivePanelWidth} isResizing={this.state.isResizing} setShowAggregatedData={this.setShowAggregatedData} showRowNumber={this.state.showRowNumber} @@ -1547,7 +1574,7 @@ export default class DataBrowser extends React.Component { /> {this.state.isPanelVisible && ( {(() => { - // If no objects are displayed, show a single panel with "No object selected" + // If no objects are displayed, show a single panel if (this.state.displayedObjectIds.length === 0) { + // If there's a selected object, show its data + const panelData = this.state.selectedObjectId + ? (this.state.multiPanelData[this.state.selectedObjectId] || this.props.AggregationPanelData) + : {}; + const isLoading = this.state.selectedObjectId && this.props.isLoadingCloudFunction; + return (