Allow resizing the height of the "Model Data" dashboard module in Rill Developer

web-common/src/features/dashboards/rows-viewer/RowsViewer.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
   import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
   import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store";
-  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { useMetaQuery } from "../selectors";
   import {
     createQueryServiceMetricsViewRows,
     createQueryServiceTableColumns,
   } from "@rilldata/web-common/runtime-client";
-  import { useDashboardStore } from "web-common/src/features/dashboards/stores/dashboard-stores";
-  import PreviewTable from "@rilldata/web-common/components/preview-table/PreviewTable.svelte";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import type { VirtualizedTableColumns } from "@rilldata/web-local/lib/types";
   import { writable } from "svelte/store";
+  import { useDashboardStore } from "web-common/src/features/dashboards/stores/dashboard-stores";
+  import { PreviewTable } from "../../../components/preview-table";
+  import { useMetaQuery } from "../selectors";
 
   export let metricViewName = "";
+  export let height: number;
 
   const SAMPLE_SIZE = 10000;
   const FALLBACK_SAMPLE_SIZE = 1000;
@@ -82,7 +83,10 @@
   };
 </script>
 
-<div class="h-72 overflow-y-auto bg-gray-100 border-t border-gray-200">
+<div
+  class="overflow-y-auto bg-gray-100 border-t border-gray-200"
+  style="height: {height}px"
+>
   {#if rows}
     <PreviewTable
       {rows}

web-common/src/features/dashboards/rows-viewer/RowsViewerAccordion.svelte

@@ -6,12 +6,20 @@
   import { formatCompactInteger } from "@rilldata/web-common/lib/formatters";
   import { createQueryServiceMetricsViewTotals } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import { writable } from "svelte/store";
   import { useDashboardStore } from "web-common/src/features/dashboards/stores/dashboard-stores";
+  import { drag } from "../../../layout/drag";
+  import type { LayoutElement } from "../../../layout/workspace/types";
   import { featureFlags } from "../../feature-flags";
   import ExportModelDataButton from "./ExportModelDataButton.svelte";
   import RowsViewer from "./RowsViewer.svelte";
 
   export let metricViewName: string;
+
+  const INITIAL_HEIGHT_EXPANDED = 300;
+  const MIN_HEIGHT_EXPANDED = 30;
+  const MAX_HEIGHT_EXPANDED = 1000;
+
   let isOpen = false;
   const toggle = () => {
     isOpen = !isOpen;
@@ -92,26 +100,45 @@
   }
 
   $: isLocal = $featureFlags.readOnly === false;
+
+  const rowsViewerLayout = writable<LayoutElement>({
+    value: INITIAL_HEIGHT_EXPANDED,
+    visible: true,
+  });
 </script>
 
 <div>
-  <button
-    aria-label="Toggle rows viewer"
-    class="w-full bg-gray-100 h-7 text-left px-2 border-t border-t-gray-200 text-xs text-gray-800 flex items-center gap-1"
-    on:click={toggle}
+  <div
+    class="flex items-center px-2 h-7 w-full bg-gray-100 border-t border-t-gray-200 {isOpen
+      ? '!cursor-move'
+      : '!cursor-default'}"
+    use:drag={{
+      store: rowsViewerLayout,
+      minSize: MIN_HEIGHT_EXPANDED,
+      maxSize: MAX_HEIGHT_EXPANDED,
+      orientation: "vertical",
+      reverse: true,
+    }}
   >
-    {#if isOpen}
-      <CaretDownIcon size="14px" />
-    {:else}
-      <CaretUpIcon size="14px" />
-    {/if}
-    <span class="font-bold">Model Data</span>
-    {label}
+    <button
+      aria-label="Toggle rows viewer"
+      class="text-xs text-gray-800 rounded-sm hover:bg-gray-200 h-6 px-1.5 py-px flex items-center gap-1"
+      on:click={toggle}
+    >
+      {#if isOpen}
+        <CaretDownIcon size="14px" />
+      {:else}
+        <CaretUpIcon size="14px" />
+      {/if}
+      <span class="font-bold">Model Data</span>
+      {label}
+    </button>
     <div class="ml-auto">
       {#if isLocal}<ExportModelDataButton {metricViewName} />{/if}
     </div>
-  </button>
+  </div>
+
   {#if isOpen}
-    <RowsViewer {metricViewName} />
+    <RowsViewer {metricViewName} height={$rowsViewerLayout.value} />
   {/if}
 </div>

web-common/src/layout/drag.ts

@@ -1,4 +1,15 @@
-export function drag(node, params) {
+import type { Writable } from "svelte/store";
+import type { LayoutElement } from "./workspace/types";
+
+interface DragParams {
+  store: Writable<LayoutElement>;
+  minSize?: number;
+  maxSize?: number;
+  reverse?: boolean;
+  orientation?: "horizontal" | "vertical";
+}
+
+export function drag(node, params: DragParams) {
   const underlyingStore = params.store;
   const minSize_ = params?.minSize || 300;
   const maxSize_ = params?.maxSize || 440;
@@ -29,6 +40,7 @@ export function drag(node, params) {
       /** update the store passed in as a parameter */
       underlyingStore.update((state) => {
         state.value = space;
+        return state;
       });
     }
   }

web-common/src/layout/navigation/Navigation.svelte

@@ -70,7 +70,6 @@
           use:drag={{
             minSize: DEFAULT_NAV_WIDTH,
             maxSize: 440,
-            side: "assetsWidth",
             store: navigationLayout,
           }}
         />