tweak: update pivot table styles

web-common/src/features/canvas/AddComponentDropdown.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
-  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
-  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import { chartMetadata } from "@rilldata/web-common/features/canvas/components/charts/util";
   import { Plus, PlusCircle } from "lucide-svelte";
   import type { ComponentType, SvelteComponent } from "svelte";

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

@@ -292,7 +292,7 @@
     @apply bg-slate-100;
   }
 
-  tr:hover .active-cell .cell {
+  tr:hover .active-cell {
     @apply bg-primary-100;
   }
 

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

@@ -9,7 +9,11 @@
   import { modified } from "@rilldata/web-common/lib/actions/modified-click";
   import type { Cell, HeaderGroup, Row } from "@tanstack/svelte-table";
   import { flexRender } from "@tanstack/svelte-table";
-  import type { MeasureColumnProps } from "./pivot-column-definition";
+  import {
+    getRowNestedLabel,
+    type DimensionColumnProps,
+    type MeasureColumnProps,
+  } from "./pivot-column-definition";
   import {
     calculateMeasureWidth,
     calculateRowDimensionWidth,
@@ -18,11 +22,10 @@
   import type { PivotDataRow } from "./types";
 
   // State props
-  export let hasRowDimension: boolean;
   export let hasColumnDimension: boolean;
   export let timeDimension: string;
-  export let rowDimensionLabel: string;
   export let assembled: boolean;
+  export let rowDimensions: DimensionColumnProps;
   export let dataRows: PivotDataRow[];
   export let measures: MeasureColumnProps;
   export let totalsRow: PivotDataRow | undefined;
@@ -51,6 +54,9 @@
   let initScrollOnResize = 0;
   let percentOfChangeDuringResize = 0;
 
+  $: hasRowDimension = rowDimensions.length > 0;
+  $: hasExpandableRows = rowDimensions.length > 1;
+  $: rowDimensionLabel = getRowNestedLabel(rowDimensions);
   $: rowDimensionName = rowDimensionLabel ? rowDimensionLabel : null;
 
   $: rowDimensionWidth =
@@ -224,6 +230,7 @@
 <table
   class:with-row-dimension={hasRowDimension}
   class:with-col-dimension={hasColumnDimension}
+  class:with-expandable-rows={hasExpandableRows}
   role="presentation"
   style:width="{totalLength + rowDimensionWidth}px"
   on:click={modified({ shift: onCellCopy, click: onCellClick })}
@@ -410,6 +417,10 @@
     @apply bg-white;
   }
 
+  .with-row-dimension tr:hover > td:first-of-type {
+    @apply bg-slate-100;
+  }
+
   .with-row-dimension.with-col-dimension tr > th:first-of-type {
     @apply bg-gray-50;
   }
@@ -422,16 +433,20 @@
   }
 
   /* The totals row header */
-  tbody > tr:nth-of-type(2) > td:first-of-type {
+  .with-row-dimension tbody > tr:nth-of-type(2) > td:first-of-type {
     @apply font-semibold;
   }
 
+  .with-expandable-rows tbody > tr:nth-of-type(2) > td:first-of-type {
+    @apply pl-5;
+  }
+
   tr:hover,
   tr:hover .cell {
     @apply bg-slate-100;
   }
 
-  tr:hover .active-cell .cell {
+  tr:hover .active-cell {
     @apply bg-primary-100;
   }
 

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

@@ -7,20 +7,30 @@
   export let row: Row<PivotDataRow>;
   export let value: string;
   export let assembled = true;
+
+  function handleClick() {
+    if (row.getCanExpand()) {
+      row.getToggleExpandedHandler()();
+    }
+  }
 </script>
 
-<div class="flex gap-x-1" style:padding-left={`${row.depth * 14}px`}>
+<div
+  role="presentation"
+  class="dimension-cell"
+  style:padding-left={`${row.depth * 14}px`}
+  class:-ml-1={assembled && row.getCanExpand()}
+  class:cursor-pointer={assembled && row.getCanExpand()}
+  on:click|stopPropagation={handleClick}
+>
   {#if value === "LOADING_CELL"}
     <span class="loading-cell" />
   {:else if assembled && row.getCanExpand()}
-    <button
-      on:click|stopPropagation={row.getToggleExpandedHandler()}
-      class="cursor-pointer px-0.5 -m-1 pointer-events-auto"
-    >
-      <div class:rotate={row.getIsExpanded()} class="transition-transform">
+    <div class="caret" class:expanded={row.getIsExpanded()}>
+      <div class:rotate={row.getIsExpanded()}>
         <ChevronRight size="16px" color="#9CA3AF" />
       </div>
-    </button>
+    </div>
   {:else if row.depth >= 1}
     <Spacer size="16px" />
   {/if}
@@ -44,4 +54,19 @@
   .rotate {
     @apply transform rotate-90;
   }
+
+  .dimension-cell {
+    @apply flex gap-x-0.5;
+  }
+
+  .caret {
+    @apply opacity-0;
+  }
+  .dimension-cell:hover .caret {
+    @apply opacity-100;
+  }
+
+  .caret.expanded {
+    @apply opacity-100;
+  }
 </style>

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

@@ -4,7 +4,6 @@
   import {
     getDimensionColumnProps,
     getMeasureColumnProps,
-    getRowNestedLabel,
   } from "@rilldata/web-common/features/dashboards/pivot/pivot-column-definition";
   import { NUM_ROWS_PER_PAGE } from "@rilldata/web-common/features/dashboards/pivot/pivot-infinite-scroll";
   import {
@@ -97,7 +96,6 @@
   let ignoreInitialTimeout = false;
 
   $: timeDimension = $config.time.timeDimension;
-  $: hasRowDimension = $pivotState.rows.length > 0;
   $: hasColumnDimension =
     splitPivotChips($pivotState.columns).dimension.length > 0;
   $: reachedEndForRows = !!$pivotDataStore?.reachedEndForRowData;
@@ -112,7 +110,6 @@
     $config.rowDimensionNames,
     $config,
   );
-  $: rowDimensionLabel = getRowNestedLabel(rowDimensions);
 
   $: headerGroups = $table.getHeaderGroups();
   $: totalHeaderHeight = headerGroups.length * HEADER_HEIGHT;
@@ -290,11 +287,10 @@
       {virtualRows}
       {before}
       {after}
-      {hasRowDimension}
       {timeDimension}
       {totalsRow}
       {totalRowSize}
-      {rowDimensionLabel}
+      {rowDimensions}
       {hasColumnDimension}
       {dataRows}
       {measures}

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

@@ -230,6 +230,11 @@ export function getMeasureColumnProps(
   });
 }
 
+export type DimensionColumnProps = Array<{
+  label: string;
+  name: string;
+}>;
+
 export function getDimensionColumnProps(
   dimensionNames: string[],
   config: PivotDataStoreConfig,

web-local/tests/explores/pivot.spec.ts

@@ -622,7 +622,8 @@ test.describe("pivot run through", () => {
     const expandButton = page
       .locator("td")
       .filter({ hasText: "Jan" })
-      .getByRole("button");
+      .getByRole("presentation");
+
     await expandButton.click();
     await expect(page.locator(".status.running")).toHaveCount(0);
     await validateTableContents(page, "table", expectExpandedTable);