Add height param to gr.JSON (#9023)

* add height param and styles

* use lines instead of height

* replace height with lines

* add param and add description to gr.code

* add title attr

* remove styling

* format

* fix test

* add changeset

* revert to height

* remove lines logic

* add changeset

* code param tweak

* remove redundant code

* tweak test

* revert onDestroy removal

* fix test

* tweak

* docstring

* height fix

---------

Co-authored-by: pngwn <hello@pngwn.io>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/little-trams-wait.md

@@ -0,0 +1,6 @@
+---
+"@gradio/json": minor
+"gradio": minor
+---
+
+feat:Add height param to gr.JSON

gradio/components/code.py

@@ -122,6 +122,7 @@ class Code(Component):
             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.
+            lines: Minimum number of visible lines to show in the code editor.
         """
         if language not in Code.languages:
             raise ValueError(f"Language {language} not supported.")

gradio/components/json_component.py

@@ -49,6 +49,7 @@ class JSON(Component):
         key: int | str | None = None,
         open: bool = False,
         show_indices: bool = False,
+        height: int | str | None = None,
     ):
         """
         Parameters:
@@ -67,6 +68,7 @@ class JSON(Component):
             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.
             open: If True, all JSON nodes will be expanded when rendered. By default, node levels deeper than 3 are collapsed.
             show_indices: Whether to show numerical indices when displaying the elements of a list within the JSON object.
+            height: Height of the JSON component in pixels if a number is passed, or in CSS units if a string is passed. Overflow will be scrollable. If None, the height will be automatically adjusted to fit the content.
         """
         super().__init__(
             label=label,
@@ -86,6 +88,7 @@ class JSON(Component):
 
         self.show_indices = show_indices
         self.open = open
+        self.height = height
 
     def preprocess(self, payload: dict | list | None) -> dict | list | None:
         """

js/json/Index.svelte

@@ -29,6 +29,7 @@
 	export let open = false;
 	export let theme_mode: "system" | "light" | "dark";
 	export let show_indices: boolean;
+	export let height: string | number | undefined;
 
 	$: {
 		if (value !== old_value) {
@@ -47,6 +48,8 @@
 	{scale}
 	{min_width}
 	padding={false}
+	allow_overflow={false}
+	{height}
 >
 	{#if label}
 		<BlockLabel
@@ -67,3 +70,9 @@
 
 	<JSON {value} {open} {theme_mode} {show_indices} />
 </Block>
+
+<style>
+	:global(.block) {
+		overflow-y: scroll !important;
+	}
+</style>

js/json/JSON.stories.svelte

@@ -51,9 +51,10 @@
 />
 
 <Story
-	name="JSON viewed as list"
+	name="JSON viewed as list with height"
 	args={{
 		value: SAMPLE_JSON,
-		show_indices: true
+		show_indices: true,
+		height: 200
 	}}
 />

js/json/shared/JSON.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
-	import { fade } from "svelte/transition";
 	import { JSON as JSONIcon } from "@gradio/icons";
 	import { Empty } from "@gradio/atoms";
 	import JSONNode from "./JSONNode.svelte";
@@ -97,6 +96,7 @@
 
 	.empty-wrapper {
 		min-height: calc(var(--size-32) - 20px);
+		height: 100%;
 	}
 	button {
 		display: flex;

js/json/shared/JSONNode.svelte

@@ -51,6 +51,7 @@
 					"aria-roledescription",
 					`Line number ${index + 1}`
 				);
+				line_number?.setAttribute("title", `Line number ${index + 1}`);
 			}
 		});
 	}
@@ -200,7 +201,9 @@
 		color: var(--line-number-color);
 		user-select: none;
 		text-overflow: ellipsis;
-		padding-right: 4px;
+		text-overflow: ellipsis;
+		direction: rtl;
+		overflow: hidden;
 	}
 	.content {
 		flex: 1;

test/components/test_json.py

@@ -23,6 +23,7 @@ class TestJSON:
             "value": None,
             "show_label": True,
             "label": None,
+            "height": None,
             "name": "json",
             "proxy_url": None,
             "_selectable": False,