Feat: Add resizer for timeseries leaderboard split (#6256)

rilldata · Dec 12, 2024 · f979e7d · f979e7d · github-actions · Dec 12, 2024
1 parent d95acaa
commit f979e7d
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 9 deletions.
diff --git a/web-common/src/features/dashboards/config.ts b/web-common/src/features/dashboards/config.ts
@@ -4,9 +4,6 @@ export const MEASURE_CONFIG = {
     height: 125,
     fullHeight: 220,
   },
-  container: {
-    width: { full: 580, breakpoint: 420 },
-  },
   bigNumber: {
     widthWithChart: 140,
     widthWithoutChart: {

diff --git a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
@@ -49,6 +49,7 @@
 
   export let exploreName: string;
   export let workspaceWidth: number;
+  export let timeSeriesWidth: number;
   export let hideStartPivotButton = false;
 
   const {
@@ -290,6 +291,7 @@
   end={endValue}
   start={startValue}
   {workspaceWidth}
+  {timeSeriesWidth}
 >
   <div class:mb-6={isAlternateChart} class="flex items-center gap-x-1 px-2.5">
     {#if isInTimeDimensionView}

diff --git a/web-common/src/features/dashboards/time-series/TimeSeriesChartContainer.svelte b/web-common/src/features/dashboards/time-series/TimeSeriesChartContainer.svelte
@@ -8,9 +8,11 @@ A container GraphicContext for the time series in a metrics dashboard.
   export let start: Date | undefined;
   export let end: Date | undefined;
   export let workspaceWidth: number;
+  export let timeSeriesWidth: number;
   export let enableFullWidth = false;
 
   const paddingForFullWidth = 80;
+  const paddingForSplitView = 30;
 </script>
 
 <div class="max-w-full h-fit flex flex-col max-h-full pr-2">
@@ -26,10 +28,7 @@ A container GraphicContext for the time series in a metrics dashboard.
     width={Math.max(
       enableFullWidth
         ? workspaceWidth - paddingForFullWidth
-        : workspaceWidth >= MEASURE_CONFIG.breakpoint
-          ? MEASURE_CONFIG.container.width.full
-          : MEASURE_CONFIG.container.width.breakpoint,
-      400,
+        : timeSeriesWidth - paddingForSplitView,
     ) - MEASURE_CONFIG.bigNumber.widthWithChart}
     xMax={end}
     xMaxTweenProps={{ duration: 400 }}

diff --git a/web-common/src/features/dashboards/workspace/Dashboard.svelte b/web-common/src/features/dashboards/workspace/Dashboard.svelte
@@ -6,6 +6,7 @@
   import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors";
   import { featureFlags } from "@rilldata/web-common/features/feature-flags";
   import { navigationOpen } from "@rilldata/web-common/layout/navigation/Navigation.svelte";
+  import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
   import { useExploreState } from "web-common/src/features/dashboards/stores/dashboard-stores";
   import { runtime } from "../../../runtime-client/runtime-store";
   import MeasuresContainer from "../big-number/MeasuresContainer.svelte";
@@ -83,6 +84,10 @@
     : undefined;
 
   $: metricsView = $validSpecStore.data?.metricsView ?? {};
+
+  let metricsWidth = 580; // Default width for metrics section
+  const MIN_METRICS_WIDTH = 440;
+  let resizing = false;
 </script>
 
 <article
@@ -124,11 +129,12 @@
       class:flex-row={!expandedMeasureName}
       class:left-shift={extraLeftPadding}
     >
-      <div class="pt-2">
+      <div class="pt-2 flex-none" style:width="{metricsWidth}px">
         {#key exploreName}
           {#if hasTimeSeries}
             <MetricsTimeSeriesCharts
               {exploreName}
+              timeSeriesWidth={metricsWidth}
               workspaceWidth={exploreContainerWidth}
               hideStartPivotButton={hidePivot}
             />
@@ -146,7 +152,19 @@
           hideStartPivotButton={hidePivot}
         />
       {:else}
-        <div class="pt-2 pl-1 border-l overflow-auto w-full">
+        <div class="relative flex-none bg-gray-200 w-[1px]">
+          <Resizer
+            dimension={metricsWidth}
+            min={MIN_METRICS_WIDTH}
+            max={exploreContainerWidth - 500}
+            bind:resizing
+            side="right"
+            onUpdate={(width) => {
+              metricsWidth = width;
+            }}
+          />
+        </div>
+        <div class="pt-2 pl-1 overflow-auto w-full">
           {#if selectedDimension}
             <DimensionDisplay
               dimension={selectedDimension}

diff --git a/web-common/src/layout/Resizer.svelte b/web-common/src/layout/Resizer.svelte
@@ -83,6 +83,8 @@
   class:absolute
   class="{direction} {side} justify-{justify}"
   class:hang
+  class:minned={dimension === min}
+  class:maxed={dimension === max}
   on:mousedown|stopPropagation|preventDefault={handleMousedown}
   on:dblclick|stopPropagation={handleDoubleClick}
   on:mouseenter={() => {