feat: resizable divider in Time Dimension Detail view

web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte

@@ -196,7 +196,7 @@
 <svelte:window onkeydown={handleKeyDown} />
 
 <div
-  class="h-full w-full flex flex-col border-t bg-surface-base"
+  class="h-full w-full flex flex-col bg-surface-base"
   aria-label="{expandedMeasureName} Time Dimension Display"
 >
   <TDDHeader

web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte

@@ -54,6 +54,9 @@
 
   export let exploreName: string;
   export let hideStartPivotButton = false;
+  // Height of the expanded chart in the Time Dimension Detail view, controlled
+  // by the resizable divider between the timeseries and the detail table.
+  export let tddChartHeight = 245;
 
   const StateManagers = getStateManagers();
 
@@ -429,6 +432,7 @@
               onPanRight={() => handlePan("right")}
               {showComparison}
               {showTimeDimensionDetail}
+              {tddChartHeight}
               dynamicYAxis={dynamicYAxisScale}
               onScrub={handleScrub}
               onScrubClear={() => {

web-common/src/features/dashboards/time-series/measure-chart/MeasureChart.svelte

@@ -64,6 +64,9 @@
   export let scrubController: ScrubController | undefined = undefined;
   export let connectNulls: boolean = true;
   export let dynamicYAxis: boolean = false;
+  // Chart height when expanded in the Time Dimension Detail view. Driven by the
+  // resizable divider between the timeseries and the detail table.
+  export let tddChartHeight: number = 245;
 
   const client = useRuntimeClient();
   const { visible, observe } = createVisibilityObserver(VISIBILITY_ROOT_MARGIN);
@@ -80,7 +83,7 @@
   });
 
   $: measureName = measure.name ?? "";
-  $: height = showTimeDimensionDetail ? 245 : 145;
+  $: height = showTimeDimensionDetail ? tddChartHeight : 145;
 
   $: effectiveChartType = resolveEffectiveChartType(
     tddChartType,
@@ -316,17 +319,11 @@
 
 <div bind:this={container} class="size-full relative">
   {#if !$visible || (isFetching && data.length === 0)}
-    <div
-      class="flex items-center justify-center h-[145px]"
-      class:h-[245px]={showTimeDimensionDetail}
-    >
+    <div class="flex items-center justify-center" style:height="{height}px">
       <Spinner status={EntityStatus.Running} size="24px" />
     </div>
   {:else if isError}
-    <div
-      class="flex items-center justify-center h-[145px]"
-      class:h-[245px]={showTimeDimensionDetail}
-    >
+    <div class="flex items-center justify-center" style:height="{height}px">
       <InlineErrorIndicator message={error} />
     </div>
   {:else if usesVegaChart && data.length > 0}
@@ -375,6 +372,7 @@
       {connectNulls}
       {dynamicYAxis}
       {tddChartType}
+      {tddChartHeight}
     />
   {:else}
     <div class="flex items-center justify-center h-full text-gray-400 text-sm">

web-common/src/features/dashboards/time-series/measure-chart/MeasureChartBody.svelte

@@ -89,6 +89,9 @@
   export let connectNulls: boolean = true;
   export let dynamicYAxis: boolean = false;
   export let tddChartType: TDDChart = TDDChart.DEFAULT;
+  // Chart height when expanded in the Time Dimension Detail view. Driven by the
+  // resizable divider between the timeseries and the detail table.
+  export let tddChartHeight: number = 245;
 
   const annotationPopover = new AnnotationPopoverController();
   const hoveredAnnotationGroup = annotationPopover.hoveredGroup;
@@ -111,7 +114,7 @@
     annotationPopover.destroy();
   });
 
-  $: height = showTimeDimensionDetail ? 245 : 145;
+  $: height = showTimeDimensionDetail ? tddChartHeight : 145;
   $: config = computeChartConfig(clientWidth, height, showTimeDimensionDetail);
   $: pb = config.plotBounds;
 

web-common/src/features/dashboards/workspace/Dashboard.svelte

@@ -30,14 +30,23 @@
   import { useTimeControlStore } from "../time-controls/time-control-store";
   import TimeDimensionDisplay from "../time-dimension-details/TimeDimensionDisplay.svelte";
   import MetricsTimeSeriesCharts from "../time-series/MetricsTimeSeriesCharts.svelte";
+  import {
+    DEFAULT_TDD_CHART_HEIGHT,
+    DEFAULT_TIMESERIES_WIDTH,
+    MIN_TDD_CHART_HEIGHT,
+    MIN_TIMESERIES_WIDTH,
+    exploreTimeseriesWidth,
+    tddChartHeight,
+  } from "./dashboard-layout-store";
 
   export let exploreName: string;
   export let metricsViewName: string;
   export let isEmbedded: boolean = false;
   export let embedThemeName: Readable<string | null> | null = null;
 
-  const DEFAULT_TIMESERIES_WIDTH = 580;
-  const MIN_TIMESERIES_WIDTH = 440;
+  // Vertical space reserved below the chart for the chart toolbar, axis, big
+  // number, and a minimum detail table height when computing the drag maximum.
+  const TDD_RESERVED_HEIGHT = 280;
   const StateManagers = getStateManagers();
   const {
     selectors: {
@@ -53,7 +62,7 @@
   const timeControlsStore = useTimeControlStore(StateManagers);
 
   let exploreContainerWidth: number;
-  let metricsWidth = DEFAULT_TIMESERIES_WIDTH;
+  let exploreContainerHeight: number;
   let resizing = false;
 
   const client = useRuntimeClient();
@@ -184,17 +193,21 @@
         class:left-shift={extraLeftPadding}
         class:w-full={$dynamicHeight}
         class:size-full={!$dynamicHeight}
+        bind:clientHeight={exploreContainerHeight}
       >
         <div
           class="flex-none pl-4"
           class:pt-2={!showTimeDimensionDetail}
-          style:width={showTimeDimensionDetail ? "auto" : `${metricsWidth}px`}
+          style:width={showTimeDimensionDetail
+            ? "auto"
+            : `${$exploreTimeseriesWidth}px`}
         >
           {#key exploreName}
             {#if hasTimeSeries}
               <MetricsTimeSeriesCharts
                 {exploreName}
                 hideStartPivotButton={hidePivot}
+                tddChartHeight={$tddChartHeight}
               />
             {:else}
               <MeasuresContainer {exploreContainerWidth} {metricsViewName} />
@@ -203,6 +216,23 @@
         </div>
 
         {#if showTimeDimensionDetail && expandedMeasureName}
+          <div class="relative flex-none bg-border h-[1px]">
+            <Resizer
+              direction="NS"
+              side="bottom"
+              dimension={$tddChartHeight}
+              min={MIN_TDD_CHART_HEIGHT}
+              max={Math.max(
+                MIN_TDD_CHART_HEIGHT,
+                (exploreContainerHeight || 600) - TDD_RESERVED_HEIGHT,
+              )}
+              basis={DEFAULT_TDD_CHART_HEIGHT}
+              bind:resizing
+              onUpdate={(height: number) => {
+                tddChartHeight.set(height);
+              }}
+            />
+          </div>
           <TimeDimensionDisplay
             {exploreName}
             {expandedMeasureName}
@@ -211,14 +241,14 @@
         {:else}
           <div class="relative flex-none bg-border w-[1px]">
             <Resizer
-              dimension={metricsWidth}
+              dimension={$exploreTimeseriesWidth}
               min={MIN_TIMESERIES_WIDTH}
               max={exploreContainerWidth - 500}
               basis={DEFAULT_TIMESERIES_WIDTH}
               bind:resizing
               side="right"
-              onUpdate={(width) => {
-                metricsWidth = width;
+              onUpdate={(width: number) => {
+                exploreTimeseriesWidth.set(width);
               }}
             />
           </div>

web-common/src/features/dashboards/workspace/dashboard-layout-store.ts

@@ -0,0 +1,30 @@
+import { localStorageStore } from "@rilldata/web-common/lib/store-utils/local-storage";
+
+// Explore view: width (px) of the timeseries charts beside the leaderboards.
+export const DEFAULT_TIMESERIES_WIDTH = 580;
+export const MIN_TIMESERIES_WIDTH = 440;
+
+// Time Dimension Detail view: height (px) of the timeseries chart above the
+// detail table.
+export const DEFAULT_TDD_CHART_HEIGHT = 245;
+export const MIN_TDD_CHART_HEIGHT = 145;
+
+/**
+ * Width of the timeseries charts in the explore view, controlled by the
+ * resizable divider between the charts and the leaderboards. Persisted so the
+ * split is preserved as the user navigates back and forth.
+ */
+export const exploreTimeseriesWidth = localStorageStore<number>(
+  "explore-timeseries-width",
+  DEFAULT_TIMESERIES_WIDTH,
+);
+
+/**
+ * Height of the expanded timeseries chart in the Time Dimension Detail view,
+ * controlled by the resizable divider between the chart and the detail table.
+ * Persisted so the split is preserved as the user navigates back and forth.
+ */
+export const tddChartHeight = localStorageStore<number>(
+  "tdd-chart-height",
+  DEFAULT_TDD_CHART_HEIGHT,
+);