@perspective-dev/viewer 4.1.1 → 4.3.0

package/dist/wasm/perspective-viewer.wasm.d.ts

@@ -3,157 +3,169 @@
 export const memory: WebAssembly.Memory;
 export const __wbg_columndropdownelement_free: (a: number, b: number) => void;
 export const __wbg_copydropdownmenuelement_free: (a: number, b: number) => void;
-export const copydropdownmenuelement_new: (a: number) => number;
-export const copydropdownmenuelement_open: (a: number, b: number) => void;
-export const copydropdownmenuelement_hide: (a: number, b: number) => void;
+export const __wbg_filterdropdownelement_free: (a: number, b: number) => void;
+export const __wbg_functiondropdownelement_free: (a: number, b: number) => void;
+export const __wbg_perspectivedebugpluginelement_free: (a: number, b: number) => void;
+export const __wbg_perspectiveviewerelement_free: (a: number, b: number) => void;
 export const copydropdownmenuelement___set_model: (a: number, b: number) => void;
 export const copydropdownmenuelement_connected_callback: (a: number) => void;
-export const __wbg_perspectivedebugpluginelement_free: (a: number, b: number) => void;
-export const perspectivedebugpluginelement_new: (a: number) => number;
-export const perspectivedebugpluginelement_name: (a: number, b: number) => void;
-export const perspectivedebugpluginelement_select_mode: (a: number, b: number) => void;
-export const perspectivedebugpluginelement_config_column_names: (a: number) => number;
-export const perspectivedebugpluginelement_draw: (a: number, b: number) => number;
+export const copydropdownmenuelement_hide: (a: number, b: number) => void;
+export const copydropdownmenuelement_new: (a: number) => number;
+export const copydropdownmenuelement_open: (a: number, b: number) => void;
+export const exportdropdownmenuelement___set_model: (a: number, b: number) => void;
+export const exportdropdownmenuelement_hide: (a: number, b: number) => void;
+export const exportdropdownmenuelement_open: (a: number, b: number) => void;
+export const init: () => void;
 export const perspectivedebugpluginelement_clear: (a: number) => number;
+export const perspectivedebugpluginelement_config_column_names: (a: number) => number;
 export const perspectivedebugpluginelement_connectedCallback: (a: number) => void;
-export const exportdropdownmenuelement_open: (a: number, b: number) => void;
-export const exportdropdownmenuelement_hide: (a: number, b: number) => void;
-export const exportdropdownmenuelement___set_model: (a: number, b: number) => void;
-export const __wbg_filterdropdownelement_free: (a: number, b: number) => void;
-export const __wbg_functiondropdownelement_free: (a: number, b: number) => void;
-export const __wbg_perspectiveviewerelement_free: (a: number, b: number) => void;
-export const perspectiveviewerelement_new: (a: number) => number;
+export const perspectivedebugpluginelement_draw: (a: number, b: number) => number;
+export const perspectivedebugpluginelement_name: (a: number, b: number) => void;
+export const perspectivedebugpluginelement_new: (a: number) => number;
+export const perspectivedebugpluginelement_select_mode: (a: number, b: number) => void;
+export const perspectiveviewerelement___get_model: (a: number) => number;
 export const perspectiveviewerelement_connectedCallback: (a: number, b: number) => void;
-export const perspectiveviewerelement_load: (a: number, b: number, c: number) => void;
+export const perspectiveviewerelement_copy: (a: number, b: number) => number;
 export const perspectiveviewerelement_delete: (a: number) => number;
+export const perspectiveviewerelement_download: (a: number, b: number) => number;
 export const perspectiveviewerelement_eject: (a: number) => number;
-export const perspectiveviewerelement_getView: (a: number) => number;
-export const perspectiveviewerelement_getViewConfig: (a: number) => number;
-export const perspectiveviewerelement_getTable: (a: number, b: number) => number;
+export const perspectiveviewerelement_export: (a: number, b: number) => number;
+export const perspectiveviewerelement_flush: (a: number) => number;
+export const perspectiveviewerelement_getAllPlugins: (a: number) => number;
 export const perspectiveviewerelement_getClient: (a: number, b: number) => number;
+export const perspectiveviewerelement_getEditPort: (a: number, b: number) => void;
+export const perspectiveviewerelement_getPlugin: (a: number, b: number, c: number, d: number) => void;
 export const perspectiveviewerelement_getRenderStats: (a: number, b: number) => void;
-export const perspectiveviewerelement_flush: (a: number) => number;
-export const perspectiveviewerelement_restore: (a: number, b: number) => number;
-export const perspectiveviewerelement_resetError: (a: number) => number;
-export const perspectiveviewerelement_save: (a: number) => number;
-export const perspectiveviewerelement_download: (a: number, b: number) => number;
-export const perspectiveviewerelement_export: (a: number, b: number) => number;
-export const perspectiveviewerelement_copy: (a: number, b: number) => number;
+export const perspectiveviewerelement_getSelection: (a: number) => number;
+export const perspectiveviewerelement_getTable: (a: number, b: number) => number;
+export const perspectiveviewerelement_getView: (a: number) => number;
+export const perspectiveviewerelement_getViewConfig: (a: number) => number;
+export const perspectiveviewerelement_load: (a: number, b: number, c: number) => void;
+export const perspectiveviewerelement_new: (a: number) => number;
+export const perspectiveviewerelement_openColumnSettings: (a: number, b: number, c: number, d: number) => number;
 export const perspectiveviewerelement_reset: (a: number, b: number) => number;
+export const perspectiveviewerelement_resetError: (a: number) => number;
+export const perspectiveviewerelement_resetThemes: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_resize: (a: number, b: number) => number;
-export const perspectiveviewerelement_setAutoSize: (a: number, b: number) => void;
+export const perspectiveviewerelement_restore: (a: number, b: number) => number;
+export const perspectiveviewerelement_restyleElement: (a: number) => number;
+export const perspectiveviewerelement_save: (a: number) => number;
 export const perspectiveviewerelement_setAutoPause: (a: number, b: number) => void;
-export const perspectiveviewerelement_getSelection: (a: number) => number;
+export const perspectiveviewerelement_setAutoSize: (a: number, b: number) => void;
 export const perspectiveviewerelement_setSelection: (a: number, b: number, c: number) => void;
-export const perspectiveviewerelement_getEditPort: (a: number, b: number) => void;
-export const perspectiveviewerelement_restyleElement: (a: number) => number;
-export const perspectiveviewerelement_resetThemes: (a: number, b: number, c: number) => number;
 export const perspectiveviewerelement_setThrottle: (a: number, b: number, c: number) => void;
-export const perspectiveviewerelement_toggleConfig: (a: number, b: number) => number;
-export const perspectiveviewerelement_getAllPlugins: (a: number) => number;
-export const perspectiveviewerelement_getPlugin: (a: number, b: number, c: number, d: number) => void;
-export const perspectiveviewerelement___get_model: (a: number) => number;
 export const perspectiveviewerelement_toggleColumnSettings: (a: number, b: number, c: number) => number;
-export const perspectiveviewerelement_openColumnSettings: (a: number, b: number, c: number, d: number) => number;
+export const perspectiveviewerelement_toggleConfig: (a: number, b: number) => number;
 export const registerPlugin: (a: number, b: number) => void;
-export const init: () => void;
-export const perspectivedebugpluginelement_min_config_columns: (a: number) => number;
 export const perspectivedebugpluginelement_update: (a: number, b: number) => number;
-export const perspectivedebugpluginelement_resize: (a: number) => number;
-export const perspectivedebugpluginelement_restyle: (a: number) => number;
+export const perspectivedebugpluginelement_min_config_columns: (a: number) => number;
 export const perspectivedebugpluginelement_save: (a: number) => number;
-export const perspectivedebugpluginelement_restore: (a: number) => number;
 export const perspectivedebugpluginelement_delete: (a: number) => number;
+export const perspectivedebugpluginelement_resize: (a: number) => number;
+export const perspectivedebugpluginelement_restore: (a: number) => number;
+export const perspectivedebugpluginelement_restyle: (a: number) => number;
 export const exportdropdownmenuelement_new: (a: number) => number;
 export const __wbg_exportdropdownmenuelement_free: (a: number, b: number) => void;
 export const exportdropdownmenuelement_connected_callback: (a: number) => void;
-export const __wbg_proxysession_free: (a: number, b: number) => void;
-export const proxysession_handle_request: (a: number, b: number) => number;
-export const proxysession_close: (a: number) => number;
 export const __wbg_client_free: (a: number, b: number) => void;
+export const __wbg_genericsqlvirtualservermodel_free: (a: number, b: number) => void;
+export const __wbg_proxysession_free: (a: number, b: number) => void;
+export const __wbg_table_free: (a: number, b: number) => void;
+export const __wbg_view_free: (a: number, b: number) => void;
+export const __wbg_virtualdataslice_free: (a: number, b: number) => void;
+export const __wbg_virtualserver_free: (a: number, b: number) => void;
 export const client___getClassname: (a: number, b: number) => void;
+export const client_get_hosted_table_names: (a: number) => number;
+export const client_handle_error: (a: number, b: number, c: number, d: number) => number;
+export const client_handle_response: (a: number, b: number) => number;
 export const client_new: (a: number, b: number, c: number) => void;
 export const client_new_proxy_session: (a: number, b: number) => number;
-export const client_handle_response: (a: number, b: number) => number;
-export const client_handle_error: (a: number, b: number, c: number, d: number) => number;
 export const client_on_error: (a: number, b: number) => number;
-export const client_table: (a: number, b: number, c: number) => number;
-export const client_terminate: (a: number, b: number) => void;
-export const client_open_table: (a: number, b: number, c: number) => number;
-export const client_get_hosted_table_names: (a: number) => number;
 export const client_on_hosted_tables_update: (a: number, b: number) => number;
+export const client_open_table: (a: number, b: number, c: number) => number;
 export const client_remove_hosted_tables_update: (a: number, b: number) => number;
 export const client_system_info: (a: number) => number;
+export const client_table: (a: number, b: number, c: number) => number;
+export const client_terminate: (a: number, b: number) => void;
+export const genericsqlvirtualservermodel_getHostedTables: (a: number, b: number) => void;
+export const genericsqlvirtualservermodel_new: (a: number, b: number) => void;
+export const genericsqlvirtualservermodel_tableMakeView: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const genericsqlvirtualservermodel_tableSchema: (a: number, b: number, c: number, d: number) => void;
+export const genericsqlvirtualservermodel_tableSize: (a: number, b: number, c: number, d: number) => void;
+export const genericsqlvirtualservermodel_tableValidateExpression: (a: number, b: number, c: number, d: number, e: number, f: number) => void;
+export const genericsqlvirtualservermodel_viewColumnSize: (a: number, b: number, c: number, d: number) => void;
+export const genericsqlvirtualservermodel_viewDelete: (a: number, b: number, c: number, d: number) => void;
+export const genericsqlvirtualservermodel_viewGetData: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const genericsqlvirtualservermodel_viewSchema: (a: number, b: number, c: number, d: number) => void;
+export const genericsqlvirtualservermodel_viewSize: (a: number, b: number, c: number, d: number) => void;
+export const proxysession_close: (a: number) => number;
+export const proxysession_handle_request: (a: number, b: number) => number;
+export const proxysession_new: (a: number, b: number) => number;
 export const table___getClassname: (a: number, b: number) => void;
-export const __wbg_table_free: (a: number, b: number) => void;
-export const table_get_index: (a: number) => number;
-export const table_get_client: (a: number) => number;
-export const table_get_name: (a: number) => number;
-export const table_get_limit: (a: number) => number;
 export const table_clear: (a: number) => number;
-export const table_delete: (a: number, b: number) => number;
-export const table_size: (a: number) => number;
-export const table_schema: (a: number) => number;
 export const table_columns: (a: number) => number;
+export const table_delete: (a: number, b: number) => number;
+export const table_get_client: (a: number) => number;
+export const table_get_index: (a: number) => number;
+export const table_get_limit: (a: number) => number;
+export const table_get_name: (a: number) => number;
 export const table_make_port: (a: number) => number;
 export const table_on_delete: (a: number, b: number) => number;
-export const table_remove_delete: (a: number, b: number) => number;
 export const table_remove: (a: number, b: number, c: number) => number;
+export const table_remove_delete: (a: number, b: number) => number;
 export const table_replace: (a: number, b: number, c: number) => number;
+export const table_schema: (a: number) => number;
+export const table_size: (a: number) => number;
 export const table_update: (a: number, b: number, c: number) => number;
-export const table_view: (a: number, b: number) => number;
 export const table_validate_expressions: (a: number, b: number) => number;
-export const __wbg_view_free: (a: number, b: number) => void;
+export const table_view: (a: number, b: number) => number;
 export const view___get_model: (a: number) => number;
+export const view_collapse: (a: number, b: number) => number;
 export const view_column_paths: (a: number, b: number) => number;
 export const view_delete: (a: number) => number;
 export const view_dimensions: (a: number) => number;
+export const view_expand: (a: number, b: number) => number;
 export const view_expression_schema: (a: number) => number;
 export const view_get_config: (a: number) => number;
 export const view_get_min_max: (a: number, b: number, c: number) => number;
+export const view_num_columns: (a: number) => number;
 export const view_num_rows: (a: number) => number;
+export const view_on_delete: (a: number, b: number) => number;
+export const view_on_update: (a: number, b: number, c: number) => number;
+export const view_remove_delete: (a: number, b: number) => number;
+export const view_remove_update: (a: number, b: number) => number;
 export const view_schema: (a: number) => number;
+export const view_set_depth: (a: number, b: number) => number;
 export const view_to_arrow: (a: number, b: number) => number;
-export const view_to_columns_string: (a: number, b: number) => number;
 export const view_to_columns: (a: number, b: number) => number;
-export const view_to_json_string: (a: number, b: number) => number;
+export const view_to_columns_string: (a: number, b: number) => number;
+export const view_to_csv: (a: number, b: number) => number;
 export const view_to_json: (a: number, b: number) => number;
+export const view_to_json_string: (a: number, b: number) => number;
 export const view_to_ndjson: (a: number, b: number) => number;
-export const view_to_csv: (a: number, b: number) => number;
-export const view_on_update: (a: number, b: number, c: number) => number;
-export const view_remove_update: (a: number, b: number) => number;
-export const view_on_delete: (a: number, b: number) => number;
-export const view_num_columns: (a: number) => number;
-export const view_remove_delete: (a: number, b: number) => number;
-export const view_collapse: (a: number, b: number) => number;
-export const view_expand: (a: number, b: number) => number;
-export const view_set_depth: (a: number, b: number) => number;
-export const __wbg_jsvirtualdataslice_free: (a: number, b: number) => void;
-export const jsvirtualdataslice_new: () => number;
-export const jsvirtualdataslice_setCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number) => void;
-export const jsvirtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
-export const jsvirtualdataslice_setIntegerCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
-export const jsvirtualdataslice_setFloatCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
-export const jsvirtualdataslice_setBooleanCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
-export const jsvirtualdataslice_setDatetimeCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
-export const __wbg_jsvirtualserver_free: (a: number, b: number) => void;
-export const jsvirtualserver_new: (a: number, b: number) => void;
-export const jsvirtualserver_handleRequest: (a: number, b: number, c: number) => number;
-export const proxysession_new: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_5618: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_455: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_18148: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_18140: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_5616: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_5617: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_13059: (a: number, b: number) => number;
-export const __wasm_bindgen_func_elem_12591: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_18169: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_18154: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_452: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_17223: (a: number, b: number, c: number) => void;
-export const __wasm_bindgen_func_elem_17151: (a: number, b: number) => void;
-export const __wasm_bindgen_func_elem_19856: (a: number, b: number, c: number, d: number) => void;
+export const virtualdataslice_new: (a: number) => number;
+export const virtualdataslice_setBooleanCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const virtualdataslice_setCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number, h: number, i: number) => void;
+export const virtualdataslice_setDatetimeCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const virtualdataslice_setFloatCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const virtualdataslice_setIntegerCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const virtualdataslice_setStringCol: (a: number, b: number, c: number, d: number, e: number, f: number, g: number) => void;
+export const virtualserver_handleRequest: (a: number, b: number, c: number) => number;
+export const virtualserver_new: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_13482: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_3123: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_3124: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18167: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18937: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_18961: (a: number, b: number) => void;
+export const __wasm_bindgen_func_elem_20888: (a: number, b: number, c: number, d: number) => void;
+export const __wasm_bindgen_func_elem_5237: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_5238: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_5235: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_18286: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_18978: (a: number, b: number, c: number) => void;
+export const __wasm_bindgen_func_elem_14371: (a: number, b: number) => number;
+export const __wasm_bindgen_func_elem_18940: (a: number, b: number) => void;
 export const __wbindgen_export: (a: number, b: number) => number;
 export const __wbindgen_export2: (a: number, b: number, c: number, d: number) => number;
 export const __wbindgen_export3: (a: number) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perspective-dev/viewer",
-  "version": "4.1.1",
+  "version": "4.3.0",
   "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective.js",
   "repository": {
     "type": "git",
@@ -38,10 +38,11 @@
     "@perspective-dev/esbuild-plugin": "",
     "@perspective-dev/test": "",
     "@perspective-dev/metadata": "",
-    "@prospective.co/procss": "0.1.17",
+    "@prospective.co/procss": "0.1.18",
     "@playwright/test": "=1.52.0",
     "@playwright/experimental-ct-react": "=1.52.0",
-    "@types/react": "^18",
+    "@types/react": ">17 <20",
+    "@types/react-dom": ">17 <20",
     "prettier": ">=3 <4",
     "typedoc": "^0.28.7",
     "typescript": ">=5 <6",

package/src/less/column-selector.less

@@ -317,11 +317,11 @@
         @include scrollbar;
     }
 
-    #sub-columns:before {
+    #sub-columns .scroll-panel-container:before {
         font-size: var(--label--font-size, 0.75em);
         padding: var(--column_type--padding, 0px 0px 0px 0px);
         position: absolute;
-        margin-top: 14px;
+        margin-top: -13px;
         top: 0;
         content: var(--all-columns-label--content, "All Columns");
     }

package/src/less/config-selector.less

@@ -30,6 +30,44 @@
         }
     }
 
+    #top_panel.group-rollup-mode-total {
+        #group_by {
+            width: 100%;
+            // height: 26px;
+            .pivot-column {
+                .pivot-column-total {
+                    min-height: 24px;
+                    margin-bottom: 4px;
+                    &:before {
+                        background-color: var(--plugin--background);
+                    }
+                }
+
+                .column_name {
+                    color: var(--inactive--color);
+                }
+
+                .type-icon {
+                    background-color: var(--inactive--color);
+                }
+
+                &:hover .pivot-column-border {
+                    border-color: var(--inactive--color, #ababab);
+                }
+
+                // input {
+                //     background-color: var(--plugin--background);
+                //     pointer-events: none;
+                //     border: 1px solid var(--inactive--color);
+                //     color: var(--inactive--color) !important;
+                //     // &:placeholder {
+
+                //     // }
+                // }
+            }
+        }
+    }
+
     #top_panel {
         display: flex;
         flex-direction: column;
@@ -270,6 +308,30 @@
             display: inline-block;
         }
 
+        .pivot_controls {
+            display: flex;
+            justify-content: flex-end;
+            height: 15px;
+            margin-bottom: -24px;
+            margin-right: 28px;
+            margin-top: 9px;
+            select:hover {
+                color: var(--icon--color, inherit);
+            }
+        }
+
+        .group_rollup_wrapper {
+            width: 48px;
+            margin-bottom: -30px;
+            flex: 0 1 auto;
+            color: var(--inactive--color);
+            padding-top: 15px;
+            font-size: 9px;
+            select {
+                font-size: 9px !important;
+            }
+        }
+
         #transpose_button {
             cursor: pointer;
             flex-grow: 0;
@@ -278,12 +340,12 @@
             user-select: none;
             padding: 0;
             align-self: center;
-            margin-bottom: -23px;
-            margin-top: 11.5px;
-            align-self: flex-end;
+            // margin-bottom: -23px;
+            // margin-top: 11.5px;
+            // align-self: flex-end;
             z-index: 1;
             min-height: 0px;
-            margin-right: 30px;
+            // margin-right: 30px;
 
             &:hover:before {
                 color: var(--icon--color, inherit);

package/src/rust/components/column_dropdown.rs

@@ -91,19 +91,19 @@ impl Component for ColumnDropDown {
             },
             ColumnDropDownMsg::ItemDown => {
                 self.selected += 1;
-                if let Some(ref values) = self.values {
-                    if self.selected >= values.len() {
-                        self.selected = 0;
-                    }
+                if let Some(ref values) = self.values
+                    && self.selected >= values.len()
+                {
+                    self.selected = 0;
                 }
 
                 true
             },
             ColumnDropDownMsg::ItemUp => {
-                if let Some(ref values) = self.values {
-                    if self.selected < 1 {
-                        self.selected = values.len();
-                    }
+                if let Some(ref values) = self.values
+                    && self.selected < 1
+                {
+                    self.selected = values.len();
                 }
 
                 self.selected -= 1;

package/src/rust/components/column_selector/config_selector.rs

@@ -23,6 +23,7 @@ use super::filter_column::*;
 use super::pivot_column::*;
 use super::sort_column::*;
 use crate::components::containers::dragdrop_list::*;
+use crate::components::containers::select::{Select, SelectItem};
 use crate::components::style::LocalStyle;
 use crate::custom_elements::{ColumnDropDownElement, FilterDropDownElement};
 use crate::dragdrop::*;
@@ -32,7 +33,7 @@ use crate::session::*;
 use crate::utils::*;
 use crate::{PerspectiveProperties, css};
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties, PerspectiveProperties!)]
 pub struct ConfigSelectorProps {
     pub onselect: Callback<()>,
 
@@ -63,6 +64,7 @@ pub enum ConfigSelectorMsg {
     TransposePivots,
     ViewCreated,
     New(DragTarget, InPlaceColumn),
+    UpdateGroupRollupMode(GroupRollupMode),
 }
 
 #[derive(Clone)]
@@ -135,11 +137,9 @@ impl Component for ConfigSelector {
                 ctx.props().onselect.emit(());
                 false
             },
-            ConfigSelectorMsg::Close(index, DragTarget::GroupBy) => {
-                let mut group_by = ctx.props().session.get_view_config().group_by.clone();
-                group_by.remove(index);
+            ConfigSelectorMsg::UpdateGroupRollupMode(mode) => {
                 let config = ViewConfigUpdate {
-                    group_by: Some(group_by),
+                    group_rollup_mode: Some(mode),
                     ..ViewConfigUpdate::default()
                 };
 
@@ -148,9 +148,45 @@ impl Component for ConfigSelector {
                     .map(ApiFuture::spawn)
                     .unwrap_or_log();
 
-                ctx.props().onselect.emit(());
                 false
             },
+            ConfigSelectorMsg::Close(index, DragTarget::GroupBy) => {
+                if ctx.props().session.get_view_config().group_rollup_mode == GroupRollupMode::Total
+                {
+                    let requirements = ctx.props().renderer.metadata();
+
+                    let rollup_features = ctx
+                        .props()
+                        .session
+                        .metadata()
+                        .get_features()
+                        .map(|x| x.get_group_rollup_modes())
+                        .unwrap();
+
+                    let group_rollups = requirements.get_group_rollups(&rollup_features);
+
+                    ctx.link()
+                        .send_message(ConfigSelectorMsg::UpdateGroupRollupMode(
+                            group_rollups.first().cloned().unwrap(),
+                        ));
+                    false
+                } else {
+                    let mut group_by = ctx.props().session.get_view_config().group_by.clone();
+                    group_by.remove(index);
+                    let config = ViewConfigUpdate {
+                        group_by: Some(group_by),
+                        ..ViewConfigUpdate::default()
+                    };
+
+                    ctx.props()
+                        .update_and_render(config)
+                        .map(ApiFuture::spawn)
+                        .unwrap_or_log();
+
+                    ctx.props().onselect.emit(());
+                    false
+                }
+            },
             ConfigSelectorMsg::Close(index, DragTarget::SplitBy) => {
                 let mut split_by = ctx.props().session.get_view_config().split_by.clone();
                 split_by.remove(index);
@@ -227,6 +263,7 @@ impl Component for ConfigSelector {
                 ctx.props().onselect.emit(());
                 false
             },
+
             ConfigSelectorMsg::SetFilterValue(index, input) => {
                 let mut filter = ctx.props().session.get_view_config().filter.clone();
 
@@ -437,11 +474,15 @@ impl Component for ConfigSelector {
         let config = session.get_view_config();
         let transpose = ctx.link().callback(|_| ConfigSelectorMsg::TransposePivots);
         let column_dropdown = self.column_dropdown.clone();
-        let class = if dragdrop.get_drag_column().is_some() {
-            "dragdrop-highlight"
-        } else {
-            ""
-        };
+        let mut class = classes!();
+
+        if dragdrop.get_drag_column().is_some() {
+            class.push("dragdrop-highlight");
+        }
+
+        if config.group_rollup_mode == GroupRollupMode::Total {
+            class.push("group-rollup-mode-total");
+        }
 
         let dragend = Callback::from({
             let dragdrop = dragdrop.clone();
@@ -450,21 +491,52 @@ impl Component for ConfigSelector {
 
         let metadata = session.metadata();
         let features = metadata.get_features().unwrap();
+        let requirements = renderer.metadata();
+        let on_group_rollup_mode = ctx
+            .link()
+            .callback(ConfigSelectorMsg::UpdateGroupRollupMode);
+
+        let rollup_features = ctx
+            .props()
+            .session
+            .metadata()
+            .get_features()
+            .map(|x| x.get_group_rollup_modes())
+            .unwrap();
+
+        let group_rollups = requirements.get_group_rollups(&rollup_features);
 
         html! {
             <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
                 <LocalStyle href={css!("config-selector")} />
-                if !config.group_by.is_empty() && config.split_by.is_empty() {
-                    <span
-                        id="transpose_button"
-                        class="rrow centered"
-                        title="Transpose Pivots"
-                        onmousedown={transpose.clone()}
-                    />
-                }
+                <div class="pivot_controls">
+                    if group_rollups.len() > 1 {
+                        <Select<GroupRollupMode>
+                            id="group_rollup_mode_selector"
+                            wrapper_class="group_rollup_wrapper"
+                            values={Rc::new(
+                                group_rollups
+                                    .iter()
+                                    .map(|x| SelectItem::Option(*x))
+                                    .collect(),
+                            )}
+                            selected={config.group_rollup_mode}
+                            on_select={on_group_rollup_mode}
+                        />
+                    }
+                    if !config.group_by.is_empty() && config.split_by.is_empty() {
+                        <span
+                            id="transpose_button"
+                            class="rrow centered"
+                            title="Transpose Pivots"
+                            onmousedown={transpose.clone()}
+                        />
+                    }
+                </div>
                 if features.group_by {
                     <GroupBySelector
                         name="group_by"
+                        disabled={config.group_rollup_mode == GroupRollupMode::Total}
                         parent={ctx.link().clone()}
                         column_dropdown={column_dropdown.clone()}
                         exclude={config.group_by.iter().cloned().collect::<HashSet<_>>()}
@@ -477,7 +549,7 @@ impl Component for ConfigSelector {
                                         action={DragTarget::GroupBy}
                                         column={group_by.clone()}
                                         {dragdrop}
-                                        {session}
+                                        opt_session={session}
                                     >
                                     </PivotColumn>
                                 }
@@ -486,12 +558,14 @@ impl Component for ConfigSelector {
                 }
                 if features.split_by {
                     if !config.split_by.is_empty() {
-                        <span
-                            id="transpose_button"
-                            class="rrow centered"
-                            title="Transpose Pivots"
-                            onmousedown={transpose}
-                        />
+                        <div class="pivot_controls">
+                            <span
+                                id="transpose_button"
+                                class="rrow centered"
+                                title="Transpose Pivots"
+                                onmousedown={transpose}
+                            />
+                        </div>
                     }
                     <SplitBySelector
                         name="split_by"
@@ -506,9 +580,8 @@ impl Component for ConfigSelector {
                                 <PivotColumn
                                     action={ DragTarget::SplitBy }
                                     column={ split_by.clone() }
-
-                                     {dragdrop}
-                                    {session}>
+                                    {dragdrop}
+                                    opt_session={session}>
                                 </PivotColumn>
                             }
                         }) }