feat: add show more for outermost dimension in pivot

web-common/src/features/dashboards/pivot/PivotDisplay.svelte

@@ -150,6 +150,8 @@
               rowId,
               columnId,
             )}
+          setPivotOutermostRowLimit={(limit) =>
+            metricsExplorerStore.setPivotOutermostRowLimit($exploreName, limit)}
           setPivotRowLimitForExpanded={(expandIndex, limit) =>
             metricsExplorerStore.setPivotRowLimitForExpandedRow(
               $exploreName,

web-common/src/features/dashboards/pivot/PivotExpandableCell.svelte

@@ -8,10 +8,13 @@
   export let row: Row<PivotDataRow>;
   export let value: string;
   export let assembled = true;
+  export let hasNestedDimensions = false;
 
   $: canExpand = row.getCanExpand();
   $: expanded = row.getIsExpanded();
   $: assembledAndCanExpand = assembled && canExpand;
+
+  $: needsSpacer = row.depth >= 1 || (hasNestedDimensions && !canExpand);
 </script>
 
 <div
@@ -26,7 +29,7 @@
     <div class="caret opacity-100 shrink-0" class:expanded>
       <ChevronRight size="16px" color="#9CA3AF" />
     </div>
-  {:else if row.depth >= 1}
+  {:else if needsSpacer}
     <span class="shrink-0"><Spacer size="16px" /></span>
   {/if}
 

web-common/src/features/dashboards/pivot/PivotShowMoreCell.svelte

@@ -8,10 +8,15 @@
   export let row: Row<PivotDataRow>;
   export let value: string;
   export let assembled = true;
+  export let hasNestedDimensions = false;
+
+  $: needsSpacer = row.depth >= 1 || hasNestedDimensions;
 </script>
 
 <div class="show-more-cell" style:padding-left="{row?.depth * 14}px">
-  <Spacer size="16px" />
+  {#if needsSpacer}
+    <Spacer size="16px" />
+  {/if}
   <Tooltip distance={8} location="right">
     <span class={assembled ? "ui-copy" : "ui-copy-inactive"}>
       Show more ...

web-common/src/features/dashboards/pivot/PivotTable.svelte

@@ -56,6 +56,8 @@
   export let setPivotActiveCell:
     | ((rowId: string, columnId: string) => void)
     | undefined = undefined;
+  export let setPivotOutermostRowLimit: ((limit: number) => void) | undefined =
+    undefined;
   export let setPivotRowLimitForExpanded:
     | ((expandIndex: string, limit: number) => void)
     | undefined = undefined;
@@ -209,13 +211,27 @@
     // Handle "Show More" button clicks
     if (value === SHOW_MORE_BUTTON && rowHeader) {
       const rowData = row.original;
-
-      const expandIndex = rowId.split(".").slice(0, -1).join(".");
       const currentLimit = rowData.__currentLimit as number;
       const nextLimit = getNextRowLimit(currentLimit);
 
-      if (expandIndex && nextLimit && setPivotRowLimitForExpanded) {
-        setPivotRowLimitForExpanded(expandIndex, nextLimit);
+      if (!nextLimit) return;
+
+      // Check if this is the outermost dimension or a nested dimension
+      // Outermost dimension has rowId like "0", "1", etc. (no dots)
+      // Nested dimensions have rowId like "0.1", "0.1.2", etc.
+      const isOutermostDimension = !rowId.includes(".");
+
+      if (isOutermostDimension) {
+        // Handle outermost dimension "Show more" click
+        if (setPivotOutermostRowLimit) {
+          setPivotOutermostRowLimit(nextLimit);
+        }
+      } else {
+        // Handle nested dimension "Show more" click
+        const expandIndex = rowId.split(".").slice(0, -1).join(".");
+        if (expandIndex && setPivotRowLimitForExpanded) {
+          setPivotRowLimitForExpanded(expandIndex, nextLimit);
+        }
       }
       return;
     }

web-common/src/features/dashboards/pivot/pivot-column-definition.ts

@@ -422,6 +422,9 @@ function getNestedColumnDef(
   const rowDimensionsForColumnDef = rowDimensions.slice(0, 1);
   const nestedLabel = getRowNestedLabel(rowDimensions);
 
+  // Check if there are nested dimensions (more than one row dimension)
+  const hasNestedDimensions = rowDimensions.length > 1;
+
   // Create row dimension columns
   const rowDefinitions: ColumnDef<PivotDataRow>[] =
     rowDimensionsForColumnDef.map((d) => {
@@ -443,6 +446,7 @@ function getNestedColumnDef(
             return cellComponent(PivotShowMoreCell, {
               value: label,
               row,
+              hasNestedDimensions,
             });
           }
 
@@ -456,6 +460,7 @@ function getNestedColumnDef(
           return cellComponent(PivotExpandableCell, {
             value: formattedDimensionValue,
             row,
+            hasNestedDimensions,
           });
         },
       };

web-common/src/features/dashboards/pivot/pivot-constants.ts

@@ -17,12 +17,14 @@ export const PIVOT_ROW_LIMIT_OPTIONS = [5, 10, 25, 50, 100] as const;
  * @param rowLimit - The maximum number of rows to fetch (undefined = unlimited)
  * @param rowOffset - The current row offset (for pagination)
  * @param pageSize - The number of rows per page
+ * @param respectPageSize - Whether to constrain by page size (default: true). Set to false for explicit user-requested limits.
  * @returns The limit to apply as a string for the query
  */
 export function calculateEffectiveRowLimit(
   rowLimit: number | undefined,
   rowOffset: number,
   pageSize: number,
+  respectPageSize: boolean = true,
 ): string {
   if (rowLimit === undefined) {
     return pageSize.toString();
@@ -31,6 +33,11 @@ export function calculateEffectiveRowLimit(
   if (remainingRows <= 0) {
     return "0";
   }
+  // When respectPageSize is false (e.g., for explicit user-requested limits like "Show more" button),
+  // don't constrain by page size to allow fetching the full requested amount
+  if (!respectPageSize) {
+    return remainingRows.toString();
+  }
   return Math.min(remainingRows, pageSize).toString();
 }
 

web-common/src/features/dashboards/pivot/pivot-data-store.ts

@@ -1,5 +1,9 @@
 import { getDimensionFilterWithSearch } from "@rilldata/web-common/features/dashboards/dimension-table/dimension-table-utils";
-import { calculateEffectiveRowLimit } from "@rilldata/web-common/features/dashboards/pivot/pivot-constants";
+import {
+  calculateEffectiveRowLimit,
+  MAX_ROW_EXPANSION_LIMIT,
+  SHOW_MORE_BUTTON,
+} from "@rilldata/web-common/features/dashboards/pivot/pivot-constants";
 import { mergeFilters } from "@rilldata/web-common/features/dashboards/pivot/pivot-merge-filters";
 import { memoizeMetricsStore } from "@rilldata/web-common/features/dashboards/state-managers/memoize-metrics-store";
 import type { StateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
@@ -299,13 +303,27 @@ export function createPivotDataStore(
           readable(null);
 
         if (!isFlat) {
-          // Calculate the effective limit based on rowLimit, offset, and page size
+          // Use outermostRowLimit if set, otherwise fall back to rowLimit
+          const effectiveOutermostLimit =
+            config.pivot.outermostRowLimit ?? config.pivot.rowLimit;
+
+          // Calculate the effective limit based on outermostRowLimit, offset, and page size
+          // When outermostRowLimit is explicitly set, don't constrain by page size
+          const isExplicitOutermostLimit =
+            config.pivot.outermostRowLimit !== undefined;
           const limitToApply = calculateEffectiveRowLimit(
-            config.pivot.rowLimit,
+            effectiveOutermostLimit,
             rowOffset,
             NUM_ROWS_PER_PAGE,
+            !isExplicitOutermostLimit, // Don't respect page size for explicit outermost limit
           );
 
+          // Query for limit + 1 to detect if there's more data
+          const limitToQuery =
+            effectiveOutermostLimit !== undefined
+              ? (parseInt(limitToApply) + 1).toString()
+              : limitToApply;
+
           // Get sort order for the anchor dimension
           rowDimensionAxisQuery = getAxisForDimensions(
             ctx,
@@ -315,7 +333,7 @@ export function createPivotDataStore(
             whereFilter,
             sortPivotBy,
             timeRange,
-            limitToApply,
+            limitToQuery,
             rowOffset.toString(),
           );
         }
@@ -424,14 +442,36 @@ export function createPivotDataStore(
               globalTotalsResponse?.data?.data,
             );
 
-            const rowDimensionValues =
+            let rowDimensionValues =
               rowDimensionAxes?.data?.[anchorDimension] || [];
 
-            const totalColumns = getTotalColumnCount(totalsRowData);
-
-            const axesRowTotals =
+            let axesRowTotals =
               rowDimensionAxes?.totals?.[anchorDimension] || [];
 
+            // Detect if there's more data for the outermost dimension
+            // and trim to the actual limit
+            let hasMoreRows = false;
+            const effectiveOutermostLimit =
+              config.pivot.outermostRowLimit ?? config.pivot.rowLimit;
+            if (!isFlat && effectiveOutermostLimit !== undefined) {
+              const isExplicitOutermostLimit =
+                config.pivot.outermostRowLimit !== undefined;
+              const limitToApply = calculateEffectiveRowLimit(
+                effectiveOutermostLimit,
+                rowOffset,
+                NUM_ROWS_PER_PAGE,
+                !isExplicitOutermostLimit, // Don't respect page size for explicit outermost limit
+              );
+              const actualLimit = parseInt(limitToApply);
+              if (rowDimensionValues.length > actualLimit) {
+                hasMoreRows = true;
+                rowDimensionValues = rowDimensionValues.slice(0, actualLimit);
+                axesRowTotals = axesRowTotals.slice(0, actualLimit);
+              }
+            }
+
+            const totalColumns = getTotalColumnCount(totalsRowData);
+
             const rowAxesQueryForMeasureTotals = getAxisQueryForMeasureTotals(
               ctx,
               config,
@@ -605,6 +645,22 @@ export function createPivotDataStore(
                       expandedTableMap[key] = tableDataExpanded;
                     }
 
+                    // Add "Show more" row for outermost dimension if needed
+                    const effectiveOutermostLimit =
+                      config.pivot.outermostRowLimit ?? config.pivot.rowLimit;
+
+                    if (
+                      hasMoreRows &&
+                      effectiveOutermostLimit &&
+                      effectiveOutermostLimit < MAX_ROW_EXPANSION_LIMIT
+                    ) {
+                      const showMoreRow: PivotDataRow = {
+                        [anchorDimension]: SHOW_MORE_BUTTON,
+                        __currentLimit: effectiveOutermostLimit,
+                      } as PivotDataRow;
+                      tableDataExpanded = [...tableDataExpanded, showMoreRow];
+                    }
+
                     const activeCell = config.pivot.activeCell;
                     let activeCellFilters: PivotFilter | undefined = undefined;
                     if (activeCell) {

web-common/src/features/dashboards/pivot/pivot-utils.ts

@@ -54,7 +54,12 @@ export function getPivotConfigKey(config: PivotDataStoreConfig) {
     pivot,
   } = config;
 
-  const { sorting, tableMode: tableModeKey, rowLimit } = pivot;
+  const {
+    sorting,
+    tableMode: tableModeKey,
+    rowLimit,
+    outermostRowLimit,
+  } = pivot;
   const timeKey = JSON.stringify(time);
   const sortingKey = JSON.stringify(sorting);
   const filterKey = JSON.stringify(whereFilter);
@@ -63,7 +68,7 @@ export function getPivotConfigKey(config: PivotDataStoreConfig) {
     .concat(measureNames, colDimensionNames)
     .join("_");
 
-  return `${dimsAndMeasures}_${timeKey}_${sortingKey}_${tableModeKey}_${filterKey}_${enableComparison}_${comparisonTimeKey}_${rowLimit ?? "all"}`;
+  return `${dimsAndMeasures}_${timeKey}_${sortingKey}_${tableModeKey}_${filterKey}_${enableComparison}_${comparisonTimeKey}_${rowLimit ?? "all"}_${outermostRowLimit ?? "none"}`;
 }
 
 /**