1183 component height (#1185)

* fix flex for layouts

* fix row form groups

* cleanup

demo/blocks_layout/run.py

@@ -0,0 +1,31 @@
+import gradio as gr
+
+
+demo = gr.Blocks()
+
+with demo:
+    with gr.Row():
+        gr.Image(interactive=True)
+        gr.Image()
+    with gr.Row():
+        gr.Textbox(label="Text")
+        gr.Number(label="Count")
+        gr.Radio(choices=["One", "Two"])
+    with gr.Row():
+        with gr.Row():
+            with gr.Column():
+                gr.Textbox(label="Text")
+                gr.Number(label="Count")
+                gr.Radio(choices=["One", "Two"])
+            gr.Image()
+            with gr.Column():
+                gr.Image(interactive=True)
+                gr.Image()
+    gr.Image()
+    gr.Textbox(label="Text")
+    gr.Number(label="Count")
+    gr.Radio(choices=["One", "Two"])
+
+
+if __name__ == "__main__":
+    demo.launch()

ui/packages/app/src/Blocks.svelte

@@ -3,6 +3,7 @@
 	import { component_map } from "./components/directory";
 	import { loading_status } from "./stores";
 	import type { LoadingStatus } from "./stores";
+	import { Component as Column } from "./components/Column";
 
 	import { _ } from "svelte-i18n";
 	import { setupi18n } from "./i18n";
@@ -193,8 +194,6 @@
 				target_instances.forEach(([id, { instance }]: [number, Instance]) => {
 					if (handled_dependencies[i]?.includes(id) || !instance) return;
 					instance?.$on(trigger, () => {
-						console.log(loading_status.get_status_for_fn(i));
-
 						if (loading_status.get_status_for_fn(i) === "pending") {
 							return;
 						}
@@ -259,25 +258,27 @@
 	{/if}
 </svelte:head>
 
-<div class="mx-auto container space-y-4 px-4 py-6 dark:bg-gray-950">
-	{#if tree}
-		{#each tree as { component, id, props, children, has_modes }}
-			<Render
-				{has_modes}
-				{dynamic_ids}
-				{component}
-				{id}
-				{props}
-				{children}
-				{instance_map}
-				{theme}
-				{root}
-				{status_tracker_values}
-				on:mount={handle_mount}
-				on:destroy={({ detail }) => handle_destroy(detail)}
-			/>
-		{/each}
-	{/if}
+<div class="mx-auto container px-4 py-6 dark:bg-gray-950">
+	<Column default_value={true}>
+		{#if tree}
+			{#each tree as { component, id, props, children, has_modes }}
+				<Render
+					{has_modes}
+					{dynamic_ids}
+					{component}
+					{id}
+					{props}
+					{children}
+					{instance_map}
+					{theme}
+					{root}
+					{status_tracker_values}
+					on:mount={handle_mount}
+					on:destroy={({ detail }) => handle_destroy(detail)}
+				/>
+			{/each}
+		{/if}
+	</Column>
 </div>
 <div
 	class="gradio-page container mx-auto flex flex-col box-border flex-grow text-gray-700 dark:text-gray-50"

ui/packages/app/src/Render.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { onMount, createEventDispatcher } from "svelte";
+	import { onMount, createEventDispatcher, setContext } from "svelte";
+	import { BLOCK_KEY } from "@gradio/atoms";
 
 	export let root: string;
 	export let component;
@@ -11,6 +12,7 @@
 	export let dynamic_ids: Set<number>;
 	export let has_modes: boolean;
 	export let status_tracker_values: Record<number, string>;
+	export let parent: string | null = null;
 
 	const dispatch = createEventDispatcher<{ mount: number; destroy: number }>();
 
@@ -86,6 +88,8 @@
 	children =
 		children &&
 		children.filter((v) => instance_map[v.id].type !== "statustracker");
+
+	setContext(BLOCK_KEY, parent);
 </script>
 
 <svelte:component
@@ -98,10 +102,11 @@
 	tracked_status={status_tracker_values[id]}
 >
 	{#if children && children.length}
-		{#each children as { component, id, props, children, has_modes } (id)}
+		{#each children as { component, id: each_id, props, children, has_modes } (each_id)}
 			<svelte:self
+				parent={instance_map[id].type}
 				{component}
-				{id}
+				id={each_id}
 				{props}
 				{theme}
 				{root}

ui/packages/app/src/api.ts

@@ -122,8 +122,6 @@ export const fn = async (
 			session_hash
 		});
 
-		console.log();
-
 		loading_status.update(
 			fn_index,
 			"complete",

ui/packages/app/src/components/Column/Column.svelte

@@ -3,6 +3,7 @@
 	export let default_value: boolean;
 	export let style: string = "";
 	export let variant: "default" | "panel" = "default";
+	export let parent: string | null = null;
 
 	if (default_value) value = default_value;
 </script>
@@ -13,7 +14,8 @@
 	class:bg-gray-50={variant === "panel"}
 	class:p-2={variant === "panel"}
 	class:rounded-lg={variant === "panel"}
-	class="flex flex-1 flex-col gr-gap gr-form-gap relative"
+	class="flex flex-col gr-gap gr-form-gap relative col"
+	class:flex-1={parent === "row" || !parent}
 >
 	<slot />
 </div>

ui/packages/app/src/components/Row/Row.svelte

@@ -2,10 +2,16 @@
 	export let value: boolean;
 	export let default_value: boolean;
 	export let style: string = "";
+	export let parent: string | null = null;
 
 	if (default_value) value = default_value;
 </script>
 
-<div {style} class:hidden={!value} class="flex flex-col md:flex-row gap-3">
+<div
+	{style}
+	class:hidden={!value}
+	class="flex flex-col md:flex-row gr-gap gr-form-gap row w-full"
+	class:flex-1={parent === "row"}
+>
 	<slot />
 </div>

ui/packages/atoms/src/Block.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-	export let variant: "solid" | "dashed" = "solid";
+	import { getContext } from "svelte";
+	import { BLOCK_KEY } from "./";
+
+	export let variant: "solid" | "dashed" | "none" = "solid";
 	export let color: "grey" | "green" = "grey";
 	export let padding: boolean = true;
 	export let form_position: "first" | "last" | "mid" | "single" | undefined =
@@ -11,21 +14,41 @@
 		dashed: "border-dashed border-[3px]",
 		solid: "border-solid border",
 		grey: "border-gray-200",
-		green: "border-green-400"
+		green: "border-green-400",
+		none: "!border-0"
+	};
+
+	const form_styles = {
+		column: {
+			first: "!rounded-b-none",
+			last: "!rounded-t-none",
+			mid: "!rounded-none",
+			single: ""
+		},
+		row: {
+			first: "!rounded-r-none",
+			last: "!rounded-l-none",
+			mid: "!rounded-none",
+			single: ""
+		}
 	};
 
 	let tag = type === "fieldset" ? "fieldset" : "div";
+
+	const parent = getContext<string | null>(BLOCK_KEY);
+
+	$: form_class = form_position
+		? form_styles?.[(parent as "column" | "row") || "column"][form_position]
+		: "";
 </script>
 
 <svelte:element
 	this={tag}
 	data-testid={test_id}
-	class="gr-box overflow-hidden {styles[variant]} {styles[color]}"
+	class="gr-box overflow-hidden {styles[variant]} {styles[color]} {form_class}"
 	class:gr-panel={padding}
 	class:form={form_position}
-	class:!rounded-none={form_position === "mid"}
-	class:!rounded-b-none={form_position === "first"}
-	class:!rounded-t-none={form_position === "last"}
+	class:flex-1={parent === "row" || null}
 >
 	<slot />
 </svelte:element>

ui/packages/atoms/src/index.ts

@@ -3,3 +3,4 @@ export { default as Block } from "./Block.svelte";
 export { default as BlockTitle } from "./BlockTitle.svelte";
 export { default as BlockLabel } from "./BlockLabel.svelte";
 export { default as IconButton } from "./IconButton.svelte";
+export const BLOCK_KEY = {};

ui/packages/theme/src/global.css

@@ -3,13 +3,21 @@
 @tailwind utilities;
 
 @layer components {
-	.gr-gap > *:not(.absolute) + * {
-		@apply mt-2;
+	.col.gr-gap > *:not(.absolute) + * {
+		@apply mt-3;
 	}
-	.gr-form-gap > .form + .form {
+	.col.gr-form-gap > .form + .form {
 		@apply mt-0 border-t-0;
 	}
 
+	.row.gr-gap > *:not(.absolute) + * {
+		@apply ml-3;
+	}
+
+	.row.gr-form-gap > .form + .form {
+		@apply ml-0 border-l-0;
+	}
+
 	.scroll-hide {
 		-ms-overflow-style: none;
 		scrollbar-width: none;

ui/packages/theme/src/tokens.css

@@ -4,7 +4,6 @@
 	relative 
 	rounded-lg 
 	bg-white 
-	flex-1
 	shadow-sm;
 }