Merge pull request #404 from deneb-viz/feature/rows-per-page-persistence

Rows per page persistence

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
-}
+}

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,

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'
 ) =>

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<PaginationComponentProps> = ({
-    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':

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<TableProps<any>> = ({
     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<TableProps<any>> = ({
             defaultSortFieldId={columns[0].id}
             pagination
             paginationComponent={DataTableStatusBar}
-            paginationPerPage={PREVIEW_PANE_DATA_TABLE.rowsPerPage.default}
+            paginationPerPage={editorSettings.debugTableRowsPerPage}
             customStyles={{
                 head: {
                     style: {

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()
+        };
+    });
+};

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.",