Added max lines and overflow scrollbar for gr.Code (#9311)

* add max lines for gr.Code * add changeset * revert default lines to 5 * fix tests * lint --------- Co-authored-by: Abubakar Abid <[email protected]> Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Sep 19, 2024 · c4afdcd · c4afdcd
1 parent 3b580ce
commit c4afdcd
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 15 deletions.
diff --git a/.changeset/yummy-weeks-learn.md b/.changeset/yummy-weeks-learn.md
@@ -0,0 +1,7 @@
+---
+"@gradio/code": minor
+"@self/component-test": minor
+"gradio": minor
+---
+
+feat:Added max lines and overflow scrollbar for `gr.Code`
diff --git a/gradio/components/code.py b/gradio/components/code.py
@@ -93,6 +93,7 @@ def __init__(
         every: Timer | float | None = None,
         inputs: Component | Sequence[Component] | set[Component] | None = None,
         lines: int = 5,
+        max_lines: int = 20,
         label: str | None = None,
         interactive: bool | None = None,
         show_label: bool | None = None,
@@ -123,12 +124,14 @@ def __init__(
             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.
             lines: Minimum number of visible lines to show in the code editor.
+            max_lines: Maximum number of visible lines to show in the code editor.
         """
         if language not in Code.languages:
             raise ValueError(f"Language {language} not supported.")
 
         self.language = language
         self.lines = lines
+        self.max_lines = max(lines, max_lines)
         super().__init__(
             label=label,
             every=every,

diff --git a/js/code/Index.svelte b/js/code/Index.svelte
@@ -29,6 +29,7 @@
 	export let value_is_output = false;
 	export let language = "";
 	export let lines = 5;
+	export let max_lines = 20;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -51,13 +52,10 @@
 		value_is_output = false;
 	});
 	$: value, handle_change();
-
-	const is_browser = typeof window !== "undefined";
-	const default_lines = interactive ? lines : 10.35;
 </script>
 
 <Block
-	height={is_browser ? undefined : default_lines * 25 + 4}
+	height={"fit-content"}
 	variant={"solid"}
 	padding={false}
 	{elem_id}
@@ -85,6 +83,7 @@
 			bind:value
 			{language}
 			{lines}
+			{max_lines}
 			{dark_mode}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}

diff --git a/js/code/shared/Code.svelte b/js/code/shared/Code.svelte
@@ -20,6 +20,7 @@
 	export let basic = true;
 	export let language: string;
 	export let lines = 5;
+	export let max_lines = 20;
 	export let extensions: Extension[] = [];
 	export let use_tab = true;
 	export let readonly = false;
@@ -59,7 +60,7 @@
 
 	function update_lines(): void {
 		if (view) {
-			view.requestMeasure({ read: update_gutters });
+			view.requestMeasure({ read: resize });
 		}
 	}
 
@@ -96,18 +97,19 @@
 		return null;
 	}
 
-	function update_gutters(_view: EditorView): any {
-		let gutters = _view.dom.querySelectorAll<HTMLElement>(".cm-gutter");
-		let _lines = lines + 1;
-		let lineHeight = getGutterLineHeight(_view);
-		if (!lineHeight) {
+	function resize(_view: EditorView): any {
+		let scroller = _view.dom.querySelector<HTMLElement>(".cm-scroller");
+		if (!scroller) {
 			return null;
 		}
-		for (var i = 0; i < gutters.length; i++) {
-			let node = gutters[i];
-			node.style.minHeight = `calc(${lineHeight} * ${_lines})`;
+		const lineHeight = getGutterLineHeight(_view);
+		if (!lineHeight) {
+			return null;
 		}
-		return null;
+
+		const minLines = lines == 1 ? 1 : lines + 1;
+		scroller.style.minHeight = `calc(${lineHeight} * ${minLines})`;
+		scroller.style.maxHeight = `calc(${lineHeight} * ${max_lines + 1})`;
 	}
 
 	function handle_change(vu: ViewUpdate): void {
@@ -117,7 +119,7 @@
 			value = text;
 			dispatch("change", text);
 		}
-		view.requestMeasure({ read: update_gutters });
+		view.requestMeasure({ read: resize });
 	}
 
 	function get_extensions(): Extension[] {

diff --git a/js/component-test/src/lib/component_json.ts b/js/component-test/src/lib/component_json.ts
@@ -481,6 +481,7 @@ export default [
 		name: "code",
 		props: {
 			lines: 5,
+			max_lines: 20,
 			interactive: false,
 			show_label: true,
 			container: true,
@@ -498,6 +499,7 @@ export default [
 		name: "code",
 		props: {
 			lines: 5,
+			max_lines: 20,
 			interactive: true,
 			show_label: true,
 			container: true,

diff --git a/test/components/test_code.py b/test/components/test_code.py
@@ -32,6 +32,7 @@ def fn(a):
             "value": None,
             "language": None,
             "lines": 5,
+            "max_lines": 20,
             "name": "code",
             "show_label": True,
             "label": None,