Prevent HTML and Markdown height changing when status is hidden (#9363)

* fix markdown height changing * * add min_height param to html * prevent height from changing based on status * add changeset * add changeset * param desc change * fix test * format * * add max height to html * share css_units func * add changeset * fix backend test * fe --------- Co-authored-by: gradio-pr-bot <[email protected]> Co-authored-by: Abubakar Abid <[email protected]>
gradio-app · Sep 19, 2024 · 3ad28c7 · 3ad28c7
1 parent 53ed0f0
commit 3ad28c7
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 24 deletions.
diff --git a/.changeset/legal-masks-pay.md b/.changeset/legal-masks-pay.md
@@ -0,0 +1,8 @@
+---
+"@gradio/html": minor
+"@gradio/markdown": minor
+"@gradio/utils": minor
+"gradio": minor
+---
+
+feat:Prevent HTML and Markdown height changing when status is hidden
diff --git a/gradio/components/html.py b/gradio/components/html.py
@@ -38,6 +38,8 @@ def __init__(
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         key: int | str | None = None,
+        min_height: int | None = None,
+        max_height: int | None = None,
     ):
         """
         Parameters:
@@ -51,7 +53,11 @@ def __init__(
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
             key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+            min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If HTML content exceeds the height, the component will expand to fit the content.
+            max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the component will scroll.
         """
+        self.min_height = min_height
+        self.max_height = max_height
         super().__init__(
             label=label,
             every=every,

diff --git a/js/html/Index.svelte b/js/html/Index.svelte
@@ -5,6 +5,7 @@
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { Block, BlockLabel } from "@gradio/atoms";
 	import { Code as CodeIcon } from "@gradio/icons";
+	import { css_units } from "@gradio/utils";
 
 	export let label: string;
 	export let elem_id = "";
@@ -17,6 +18,8 @@
 		clear_status: LoadingStatus;
 	}>;
 	export let show_label = false;
+	export let min_height: number | undefined = undefined;
+	export let max_height: number | undefined = undefined;
 
 	$: label, gradio.dispatch("change");
 </script>
@@ -35,9 +38,14 @@
 		variant="center"
 		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 	/>
-	<div class:pending={loading_status?.status === "pending"}>
+	<div
+		class:pending={loading_status?.status === "pending"}
+		style:min-height={min_height && loading_status?.status !== "pending"
+			? css_units(min_height)
+			: undefined}
+		style:max-height={max_height ? css_units(max_height) : undefined}
+	>
 		<HTML
-			min_height={loading_status && loading_status?.status !== "complete"}
 			{value}
 			{elem_classes}
 			{visible}

diff --git a/js/html/shared/HTML.svelte b/js/html/shared/HTML.svelte
@@ -1,27 +1,20 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
+
 	export let elem_classes: string[] = [];
 	export let value: string;
 	export let visible = true;
-	export let min_height = false;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
 	$: value, dispatch("change");
 </script>
 
-<div
-	class="prose {elem_classes.join(' ')}"
-	class:min={min_height}
-	class:hide={!visible}
->
+<div class="prose {elem_classes.join(' ')}" class:hide={!visible}>
 	{@html value}
 </div>
 
 <style>
-	.min {
-		min-height: var(--size-24);
-	}
 	.hide {
 		display: none;
 	}

diff --git a/js/markdown/Index.svelte b/js/markdown/Index.svelte
@@ -60,7 +60,6 @@
 	/>
 	<div class:pending={loading_status?.status === "pending"}>
 		<Markdown
-			min_height={loading_status && loading_status.status !== "complete"}
 			{value}
 			{elem_classes}
 			{visible}
@@ -72,6 +71,7 @@
 			{header_links}
 			{show_copy_button}
 			root={gradio.root}
+			{loading_status}
 		/>
 	</div>
 </Block>

diff --git a/js/markdown/shared/Markdown.svelte b/js/markdown/shared/Markdown.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { copy } from "@gradio/utils";
+	import { copy, css_units } from "@gradio/utils";
 	import { Copy, Check } from "@gradio/icons";
+	import type { LoadingStatus } from "@gradio/statustracker";
 	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
 
 	import MarkdownCode from "./MarkdownCode.svelte";
 
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value: string;
-	export let min_height = false;
+	export let min_height: number | string | undefined = undefined;
 	export let rtl = false;
 	export let sanitize_html = true;
 	export let line_breaks = false;
@@ -22,18 +23,13 @@
 	export let height: number | string | undefined = undefined;
 	export let show_copy_button = false;
 	export let root: string;
+	export let loading_status: LoadingStatus | undefined = undefined;
 
 	let copied = false;
 	let timer: NodeJS.Timeout;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
-	const css_units = (dimension_value: string | number): string => {
-		return typeof dimension_value === "number"
-			? dimension_value + "px"
-			: dimension_value;
-	};
-
 	$: value, dispatch("change");
 
 	async function handle_copy(): Promise<void> {
@@ -53,13 +49,15 @@
 </script>
 
 <div
-	class:min={min_height}
 	class="prose {elem_classes.join(' ')}"
 	class:hide={!visible}
 	data-testid="markdown"
 	dir={rtl ? "rtl" : "ltr"}
 	use:copy
 	style={height ? `max-height: ${css_units(height)}; overflow-y: auto;` : ""}
+	style:min-height={min_height && loading_status?.status !== "pending"
+		? css_units(min_height)
+		: undefined}
 >
 	{#if show_copy_button}
 		<IconButtonWrapper>
@@ -99,9 +97,6 @@
 		max-width: 100%;
 	}
 
-	.min {
-		min-height: var(--size-24);
-	}
 	.hide {
 		display: none;
 	}

diff --git a/js/utils/src/utils.ts b/js/utils/src/utils.ts
@@ -274,3 +274,9 @@ function _load_component(
 		variant
 	});
 }
+
+export const css_units = (dimension_value: string | number): string => {
+	return typeof dimension_value === "number"
+		? dimension_value + "px"
+		: dimension_value;
+};
diff --git a/test/components/test_html.py b/test/components/test_html.py
@@ -18,6 +18,8 @@ def test_component_functions(self):
             "name": "html",
             "_selectable": False,
             "key": None,
+            "min_height": None,
+            "max_height": None,
         }
 
     def test_in_interface(self):