diff --git a/capabilities.json b/capabilities.json index ef8d0bdd..1e59bdc5 100644 --- a/capabilities.json +++ b/capabilities.json @@ -103,14 +103,22 @@ "descriptionKey": "Objects_Display_ScrollbarColor_Description", "displayName": "Scrollbar color", "description": "Scrollbar color description.", - "type": { "fill": { "solid": { "color": true } } } + "type": { + "fill": { + "solid": { + "color": true + } + } + } }, "scrollbarOpacity": { "displayNameKey": "Objects_Display_ScrollbarOpacity", "descriptionKey": "Objects_Display_ScrollbarOpacity_Description", "displayName": "Scrollbar opacity", "description": "Scrollbar opacity description.", - "type": { "integer": true } + "type": { + "integer": true + } }, "scrollbarRadius": { "displayNameKey": "Objects_Display_ScrollbarRadius", @@ -380,6 +388,15 @@ "type": { "bool": true } + }, + "debugTableRowsPerPage": { + "displayNameKey": "Objects_Editor_DebugTableRowsPerPage", + "descriptionKey": "Objects_Editor_DebugTableRowsPerPage_Description", + "displayName": "Rows Per Page", + "description": "Rows Per Page description", + "type": { + "numeric": true + } } } }, @@ -478,4 +495,4 @@ } }, "advancedEditModeSupport": 2 -} +} \ No newline at end of file diff --git a/config/index.ts b/config/index.ts index 22673a22..85c49ec3 100644 --- a/config/index.ts +++ b/config/index.ts @@ -129,8 +129,8 @@ export const KEY_BINDINGS = { */ export const PREVIEW_PANE_DATA_TABLE = { rowsPerPage: { - default: 10, - values: [10, 25, 50, 100] + default: 50, + values: [10, 25, 50, 100, 150, 200] } }; @@ -196,7 +196,8 @@ export const PROPERTY_DEFAULTS = { showLineNumbers: true, showViewportMarker: true, maxLineLength: 40, - previewScrollbars: false + previewScrollbars: false, + dataTableRowsPerPage: PREVIEW_PANE_DATA_TABLE.rowsPerPage.default }, vega: { jsonSpec: null, diff --git a/src/features/commands/index.ts b/src/features/commands/index.ts index b0d8330c..6e2c6c63 100644 --- a/src/features/commands/index.ts +++ b/src/features/commands/index.ts @@ -297,7 +297,7 @@ const setEditorPivotItem = (operation: TEditorRole) => /** * Manages persistence of a properties object to the store from an operation. */ -const setVisualProperty = ( +export const setVisualProperty = ( properties: IPersistenceProperty[], objectName = 'vega' ) => diff --git a/src/features/debug-area/components/data-table-status-bar.tsx b/src/features/debug-area/components/data-table-status-bar.tsx index c920e55e..6527e13a 100644 --- a/src/features/debug-area/components/data-table-status-bar.tsx +++ b/src/features/debug-area/components/data-table-status-bar.tsx @@ -16,60 +16,52 @@ import { DatasetViewerOptions } from './dataset-viewer-options'; import { getI18nValue } from '../../i18n'; import { DataTableNavigationButton } from './data-table-navigation-button'; import { PREVIEW_PANE_DATA_TABLE } from '../../../../config'; +import { setVisualProperty } from '../../commands'; /** * Displays at the footer of the data table, and used to control pagination * and other options. */ -// eslint-disable-next-line max-lines-per-function export const DataTableStatusBar: React.FC = ({ - rowsPerPage, rowCount, onChangePage, onChangeRowsPerPage, currentPage }) => { - const { mode } = store( + const { rowsPerPage, mode } = store( (state) => ({ + rowsPerPage: state.visualSettings.editor.debugTableRowsPerPage, mode: state.editorPreviewAreaSelectedPivot }), shallow ); - const handleFirstPageButtonClick = () => { onChangePage(1, rowCount); }; - const handlePreviousButtonClick = () => { onChangePage(currentPage - 1, rowCount); }; - const handleNextButtonClick = () => { onChangePage(currentPage + 1, rowCount); }; - const handleLastPageButtonClick = () => { onChangePage(Math.ceil(rowCount / rowsPerPage), rowCount); }; - const handleChangeRowsPerPage: SelectProps['onChange'] = (event, data) => { - onChangeRowsPerPage(Number(data.value), currentPage); + const value = Number(data.value); + onChangeRowsPerPage(value, currentPage); + setVisualProperty([{ name: 'debugTableRowsPerPage', value }], 'editor'); }; - const numPages = getNumberOfPages(rowCount, rowsPerPage); const lastIndex = currentPage * rowsPerPage; const firstIndex = lastIndex - rowsPerPage + 1; - const range = currentPage === numPages ? `${firstIndex}-${rowCount} of ${rowCount}` : `${firstIndex}-${lastIndex} of ${rowCount}`; - const classes = useDebugStyles(); - const rowsPerPageId = useId(); const rowsPerPageEntries = useMemo(() => getRowsPerPageValues(), []); - const optionComponent = useMemo(() => { switch (mode) { case 'data': diff --git a/src/features/debug-area/components/data-table-viewer.tsx b/src/features/debug-area/components/data-table-viewer.tsx index 810d08a2..9c8d5382 100644 --- a/src/features/debug-area/components/data-table-viewer.tsx +++ b/src/features/debug-area/components/data-table-viewer.tsx @@ -18,20 +18,21 @@ import { PREVIEW_PANE_AREA_PADDING, PREVIEW_PANE_TOOLBAR_MIN_SIZE } from '../../../constants'; -import { PREVIEW_PANE_DATA_TABLE } from '../../../../config'; /** * Displays a table of data, either for a dataset or the signals in the Vega * view. */ +// eslint-disable-next-line max-lines-per-function export const DataTableViewer: React.FC> = ({ columns, data, ...props }) => { - const { editorPreviewAreaHeight, viewportHeight } = store( + const { editorPreviewAreaHeight, viewportHeight, editorSettings } = store( (state) => ({ editorPreviewAreaHeight: state.editorPreviewAreaHeight, + editorSettings: state.visualSettings.editor, viewportHeight: state.visualViewportCurrent.height }), shallow @@ -56,7 +57,7 @@ export const DataTableViewer: React.FC> = ({ defaultSortFieldId={columns[0].id} pagination paginationComponent={DataTableStatusBar} - paginationPerPage={PREVIEW_PANE_DATA_TABLE.rowsPerPage.default} + paginationPerPage={editorSettings.debugTableRowsPerPage} customStyles={{ head: { style: { diff --git a/src/properties/editor-settings.ts b/src/properties/editor-settings.ts index 2eb46745..dd196354 100644 --- a/src/properties/editor-settings.ts +++ b/src/properties/editor-settings.ts @@ -12,11 +12,16 @@ import { import { logDebug } from '../features/logging'; import { getI18nValue } from '../features/i18n'; import { + ICapabilitiesEnumMember, IDropdownSliceOptions, IIntegerSliceOptions, IToggleSliceOptions } from './types'; -import { CAPABILITIES, PROPERTY_DEFAULTS } from '../../config'; +import { + CAPABILITIES, + PREVIEW_PANE_DATA_TABLE, + PROPERTY_DEFAULTS +} from '../../config'; const OBJECT_NAME = 'editor'; const OBJECT_DEF = CAPABILITIES.objects[OBJECT_NAME]; @@ -48,10 +53,13 @@ export default class EditorSettings extends SettingsBase { // Show scrollbars in advanced editor preview area public previewScrollbars: boolean = PROPERTY_DEFAULTS.editor.previewScrollbars; + public debugTableRowsPerPage: number = + PROPERTY_DEFAULTS.editor.dataTableRowsPerPage; /** * Formatting card for these settings. */ + // eslint-disable-next-line max-lines-per-function public getFormattingCard = (): FormattingCard => { logDebug(`getFormattingCard: ${OBJECT_NAME}`); const SHOW_VIEWPORT_MARKER_SLICE: IToggleSliceOptions = { @@ -100,6 +108,14 @@ export default class EditorSettings extends SettingsBase { value: this.showLineNumbers, disabled: !this.showGutter }; + const TABLE_ROW_COUNT_SLICE: IDropdownSliceOptions = { + displayNameKey: PROPERTIES.debugTableRowsPerPage.displayNameKey, + objectName: OBJECT_NAME, + propertyName: 'debugTableRowsPerPage', + value: `${this.debugTableRowsPerPage}`, + items: getPageRowCountEnum() + }; + console.log('DATA_ROW_COUNT_SLICE', TABLE_ROW_COUNT_SLICE); return { displayName: getI18nValue(OBJECT_DEF.displayNameKey), description: getI18nValue(OBJECT_DEF.descriptionKey), @@ -111,7 +127,8 @@ export default class EditorSettings extends SettingsBase { FONT_SIZE_SLICE, WORD_WRAP_SLICE, SHOW_GUTTER_SLICE, - SHOW_LINE_NUMBERS_SLICE + SHOW_LINE_NUMBERS_SLICE, + TABLE_ROW_COUNT_SLICE ], groups: [ { @@ -136,8 +153,24 @@ export default class EditorSettings extends SettingsBase { getToggleSlice(SHOW_GUTTER_SLICE), getToggleSlice(SHOW_LINE_NUMBERS_SLICE) ] + }, + { + displayName: getI18nValue( + `${OBJECT_DEF.displayNameKey}_Group_Debug_Pane` + ), + uid: `${OBJECT_DEF.displayNameKey}_Group_Debug_Pane`, + slices: [getDropdownSlice(TABLE_ROW_COUNT_SLICE)] } ] }; }; } + +const getPageRowCountEnum = (): ICapabilitiesEnumMember[] => { + return PREVIEW_PANE_DATA_TABLE.rowsPerPage.values.map((value: number) => { + return { + value: value.toString(), + displayName: value.toString() + }; + }); +}; diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson index f5f1c1dc..61e46a46 100644 --- a/stringResources/en-US/resources.resjson +++ b/stringResources/en-US/resources.resjson @@ -68,6 +68,7 @@ "Objects_Editor": "Advanced editor", "Objects_Editor_Group_JSON": "JSON editor", "Objects_Editor_Group_Preview": "Preview area", + "Objects_Editor_Group_Debug_Pane": "Debug pane", "Objects_Editor_Description": "Customise aspects of the visual editor", "Objects_Editor_Position": "Position", "Objects_Editor_Position_Description": "Specify which side of the interface to place the editor.", @@ -83,6 +84,8 @@ "Objects_Editor_ShowViewportMarker_Description": "When enabled, this will show the boundary (viewport) of your visual prior to opening the editor. You can use this to determine if your design will fit within the boundary\n\nš—”š—¢š—§š—˜: is not possible to programmatically resize the viewport, so if you wish to change the size, you'll need to return to report view, modify and then re-open the Advanced Editor.", "Objects_Editor_PreviewScrollbars": "Show scrollbars on overflow", "Objects_Editor_PreviewScrollbars_Description": "If this is set, scrollbars will be displayed in the Preview Area if the visual content overflows the container. This can be used to further erify how your visual will render on the canvas.", + "Objects_Editor_DebugTableRowsPerPage": "# of rows per table page", + "Objects_Editor_DebugTableRowsPerPage_Description": "The number of rows to show in the Data and Signals tables in the debug pane.", "Objects_Theme": "Report theme integration", "Objects_Theme_Group_Ordinal": "Ordinal scales", "Objects_Theme_Description": "Customise aspects of report theme integration with the Vega view.",