Reorganize Docs Navbar and Fill in Gaps (#5675)

* remove combining-interfaces

* reorg navbar and other changes

* better docs for error, warning, and info

* group them together

* navbar reactively update

* add changeset

* lint

* fix chatinterface test

* fix test again

* revert changes to chatinterface test

* Update gradio/helpers.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

* Update gradio/helpers.py

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Hannah <hannahblair@hotmail.co.uk>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/large-cloths-fall.md

@@ -0,0 +1,6 @@
+---
+"gradio": minor
+"website": minor
+---
+
+feat:Reorganize Docs Navbar and Fill in Gaps

gradio/exceptions.py

@@ -37,13 +37,20 @@ class ReloadError(ValueError):
 
 InvalidApiName = InvalidApiNameError  # backwards compatibility
 
+set_documentation_group("modals")
+
 
 @document()
 class Error(Exception):
     """
     This class allows you to pass custom error messages to the user. You can do so by raising a gr.Error("custom message") anywhere in the code, and when that line is executed the custom message will appear in a modal on the demo.
-
-    Demos: calculator
+    Example:
+        import gradio as gr
+        def divide(numerator, denominator):
+            if denominator == 0:
+                raise gr.Error("Cannot divide by zero!")
+        gr.Interface(divide, ["number", "number"], "number").launch()
+    Demos: calculator, blocks_chained_events
     """
 
     def __init__(self, message: str = "Error raised."):

gradio/helpers.py

@@ -1116,20 +1116,44 @@ def log_message(message: str, level: Literal["info", "warning"] = "info"):
     blocks._queue.log_message(event_id=event_id, log=message, level=level)
 
 
+set_documentation_group("modals")
+
+
 @document()
 def Warning(message: str = "Warning issued."):  # noqa: N802
     """
-    This function allows you to pass custom warning messages to the user. You can do so simply with `gr.Warning('message here')`, and when that line is executed the custom message will appear in a modal on the demo.
+    This function allows you to pass custom warning messages to the user. You can do so simply with `gr.Warning('message here')`, and when that line is executed the custom message will appear in a modal on the demo. The modal is yellow by default and has the heading: "Warning." Queue must be enabled to use Warning.
+    Demos: blocks_chained_events
     Parameters:
         message: The warning message to be displayed to the user.
+    Example:
+        import gradio as gr
+        def hello_world():
+            gr.Warning('This is a warning message.')
+            return "hello world"
+        with gr.Blocks() as demo:
+            md = gr.Markdown()
+            demo.load(hello_world, inputs=None, outputs=[md])
+        demo.queue().launch()
     """
     log_message(message, level="warning")
 
 
 @document()
 def Info(message: str = "Info issued."):  # noqa: N802
     """
+    This function allows you to pass custom info messages to the user. You can do so simply by writing `gr.Info('message here')` in your function, and when that line is executed the custom message will appear in a (gray, by default) modal on the demo.  Queue must be enabled to use Info.
+    Demos: blocks_chained_events
     Parameters:
         message: The info message to be displayed to the user.
+    Example:
+        import gradio as gr
+        def hello_world():
+            gr.Info('This is some info.')
+            return "hello world"
+        with gr.Blocks() as demo:
+            md = gr.Markdown()
+            demo.load(hello_world, inputs=None, outputs=[md])
+        demo.queue().launch()
     """
     log_message(message, level="info")

js/_website/generate_jsons/src/docs/__init__.py

@@ -149,6 +149,7 @@ def organize_docs(d):
         "building": {},
         "components": {},
         "helpers": {},
+        "modals": {},
         "routes": {},
         "events": {},
         "py-client": {},
@@ -175,7 +176,7 @@ def organize_docs(d):
             if mode == "component":
                 organized["components"][c["name"].lower()] = c
                 pages.append(c["name"].lower())
-            elif mode in ["helpers", "routes", "py-client", "chatinterface"]:
+            elif mode in ["helpers", "routes", "py-client", "chatinterface", "modals"]:
                 organized[mode][c["name"].lower()] = c
                 pages.append(c["name"].lower())
 
@@ -196,7 +197,7 @@ def organize_docs(d):
             organized["components"][cls]["prev_obj"] = organized["components"][
                 c_keys[len(c_keys) - 2]
             ]["name"]
-            organized["components"][cls]["next_obj"] = "Examples"
+            organized["components"][cls]["next_obj"] = "load"
         else:
             organized["components"][cls]["prev_obj"] = organized["components"][
                 c_keys[i - 1]
@@ -215,26 +216,46 @@ def organize_docs(d):
             organized["helpers"][cls]["prev_obj"] = organized["helpers"][
                 c_keys[len(c_keys) - 2]
             ]["name"]
-            organized["helpers"][cls]["next_obj"] = "Request"
+            organized["helpers"][cls]["next_obj"] = "Error"
         else:
             organized["helpers"][cls]["prev_obj"] = organized["helpers"][c_keys[i - 1]][
                 "name"
             ]
             organized["helpers"][cls]["next_obj"] = organized["helpers"][c_keys[i + 1]][
                 "name"
             ]
+    c_keys = list(organized["modals"].keys())
+    for i, cls in enumerate(organized["modals"]):
+        if not i:
+            organized["modals"][cls]["prev_obj"] = "EventData"
+            organized["modals"][cls]["next_obj"] = organized["modals"][c_keys[1]][
+                "name"
+            ]
+        elif i == len(c_keys) - 1:
+            organized["modals"][cls]["prev_obj"] = organized["modals"][
+                c_keys[len(c_keys) - 2]
+            ]["name"]
+            organized["modals"][cls]["next_obj"] = "Request"
+        else:
+            organized["modals"][cls]["prev_obj"] = organized["modals"][c_keys[i - 1]][
+                "name"
+            ]
+            organized["modals"][cls]["next_obj"] = organized["modals"][c_keys[i + 1]][
+                "name"
+            ]
+
     c_keys = list(organized["routes"].keys())
     for i, cls in enumerate(organized["routes"]):
         if not i:
-            organized["routes"][cls]["prev_obj"] = "make_waveform"
+            organized["routes"][cls]["prev_obj"] = "Info"
             organized["routes"][cls]["next_obj"] = organized["routes"][c_keys[1]][
                 "name"
             ]
         elif i == len(c_keys) - 1:
             organized["routes"][cls]["prev_obj"] = organized["routes"][
                 c_keys[len(c_keys) - 2]
             ]["name"]
-            organized["routes"][cls]["next_obj"] = "Python-Client"
+            organized["routes"][cls]["next_obj"] = "Flagging"
         else:
             organized["routes"][cls]["prev_obj"] = organized["routes"][c_keys[i - 1]][
                 "name"
@@ -266,6 +287,23 @@ def organize_docs(d):
         organized["chatinterface"][cls]["prev_obj"] = "Block-Layouts"
         organized["chatinterface"][cls]["next_obj"] = "Themes"
 
+    layout_keys = ["row", "column", "tab", "group", "accordion"]
+    for i, cls in enumerate(layout_keys):
+        if not i:
+            organized["building"][cls]["prev_obj"] = "Blocks"
+            organized["building"][cls]["next_obj"] = layout_keys[i+1].capitalize()
+        elif i == len(layout_keys) - 1:
+            organized["building"][cls]["prev_obj"] = layout_keys[i-1].capitalize()
+            organized["building"][cls]["next_obj"] = "Components"
+        else:
+            organized["building"][cls]["prev_obj"] = layout_keys[i-1].capitalize()
+            organized["building"][cls]["next_obj"] = layout_keys[i+1].capitalize()
+
+
+    organized["building"][cls]["prev_obj"]
+
+
+
     organized["events_matrix"] = component_events
     organized["events"] = events
 

js/_website/src/lib/components/DocsNav.svelte

@@ -4,6 +4,7 @@
 
 	export let components: any;
 	export let helpers: any;
+	export let modals: any;
 	export let routes: any;
 	export let py_client: any;
 
@@ -105,43 +106,59 @@
 		<DropDown></DropDown>
 	</div>
 
-	<a class="link px-4 my-2 block" href="./">Building Demos</a>
+	<p class="font-semibold px-4 my-2 block">Building Demos</p>
 	<a
 		class:current-nav-link={current_nav_link == "interface"}
 		class="thin-link px-4 block"
 		href="./interface/">Interface</a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "flagging"}
+		class:current-nav-link={current_nav_link == "chatinterface"}
 		class="thin-link px-4 block"
-		href="./flagging/">Flagging</a
+		href="./chatinterface/"
+		>ChatInterface<sup class="text-orange-500">NEW</sup></a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "combining-interfaces"}
+		class:current-nav-link={current_nav_link == "tabbedinterface"}
 		class="thin-link px-4 block"
-		href="./combining-interfaces/">Combining Interfaces</a
+		href="./tabbedinterface/"
+		>TabbedInterface</a
 	>
+
 	<a
 		class:current-nav-link={current_nav_link == "blocks"}
 		class="thin-link px-4 block"
 		href="./blocks/">Blocks</a
 	>
+
+	<p class="font-semibold px-4 my-2 block">Block Layouts</p>
+
 	<a
-		class:current-nav-link={current_nav_link == "block-layouts"}
+		class:current-nav-link={current_nav_link == "row"}
 		class="thin-link px-4 block"
-		href="./block-layouts/">Block Layouts</a
+		href="./row/">Row</a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "chatinterface"}
+		class:current-nav-link={current_nav_link == "column"}
 		class="thin-link px-4 block"
-		href="./chatinterface/"
-		>ChatInterface<sup class="text-orange-500">NEW</sup></a
+		href="./column/">Column</a
 	>
 	<a
-		class:current-nav-link={current_nav_link == "themes"}
+		class:current-nav-link={current_nav_link == "tab"}
 		class="thin-link px-4 block"
-		href="./themes/">Themes</a
+		href="./tab/">Tab</a
+	>
+	<a
+		class:current-nav-link={current_nav_link == "group"}
+		class="thin-link px-4 block"
+		href="./group/">Group</a
 	>
+	<a
+		class:current-nav-link={current_nav_link == "accordion"}
+		class="thin-link px-4 block"
+		href="./accordion/">Accordion</a
+	>
+
 	<a
 		class:current-nav-link={current_nav_link == "components"}
 		class="link px-4 my-2 block"
@@ -154,22 +171,45 @@
 			href="./{name}/">{obj.name}</a
 		>
 	{/each}
-	<a class="link px-4 my-2 block">Helpers</a>
+	<p class="font-semibold px-4 my-2 block">Helpers</p>
 	{#each Object.entries(helpers) as [name, obj] (name)}
 		<a
 			class:current-nav-link={current_nav_link == name}
 			class="px-4 block thin-link"
 			href="./{name}/">{obj.name}</a
 		>
 	{/each}
-	<a class="link px-4 my-2 block">Routes</a>
+	<p class="font-semibold px-4 my-2 block">Modals</p>
+	{#each Object.entries(modals) as [name, obj] (name)}
+		<a
+			class:current-nav-link={current_nav_link == name}
+			class="px-4 block thin-link"
+			href="./{name}/">{obj.name}</a
+		>
+	{/each}
+
+	<p class="font-semibold px-4 my-2 block">Routes</p>
 	{#each Object.entries(routes) as [name, obj] (name)}
 		<a
 			class:current-nav-link={current_nav_link == name}
 			class="px-4 block thin-link"
 			href="./{name}/">{obj.name}</a
 		>
 	{/each}
+
+	<p class="font-semibold px-4 my-2 block">Other</p>
+
+	<a
+		class:current-nav-link={current_nav_link == "flagging"}
+		class="thin-link px-4 block"
+		href="./flagging/">Flagging</a
+	>
+	<a
+		class:current-nav-link={current_nav_link == "themes"}
+		class="thin-link px-4 block"
+		href="./themes/">Themes</a
+	>
+
 	<a
 		class:current-nav-link={current_nav_link == "python-client"}
 		class="link px-4 my-2 block"

js/_website/src/routes/[[version]]/docs/+layout.server.ts

@@ -30,17 +30,19 @@ export async function load({ params, url }) {
 	let docs: { [key: string]: any } = docs_json.docs;
 	let components = docs_json.docs.components;
 	let helpers = docs_json.docs.helpers;
+	let modals = docs_json.docs.modals || [];
 	let routes = docs_json.docs.routes;
 	let py_client = docs_json.docs["py-client"];
 	let js_client = docs_json.js_client;
-	let on_main = params?.version === "main";
+	let on_main = params.version === "main";
 	let wheel: string = WHEEL;
 	let pages: string[] = docs_json.pages;
 
 	return {
 		docs,
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client,
 		js_client,

js/_website/src/routes/[[version]]/docs/[doc]/+page.server.ts

@@ -16,7 +16,7 @@ const COLOR_SETS = [
 ];
 
 export async function load({ params, parent }) {
-	const { docs, components, helpers, py_client, routes, on_main, wheel, pages } = await parent();
+	const { docs, components, helpers, modals, py_client, routes, on_main, wheel, pages } = await parent();
 
 	let name = params.doc;
 	let obj;
@@ -45,10 +45,16 @@ export async function load({ params, parent }) {
 				mode = key;
 
 				if (obj.name == "Interface") {
-					obj.next_obj = "Flagging";
-				} else if (obj.name == "Blocks") {
-					obj.prev_obj = "Combining-Interfaces";
-					obj.next_obj = "Block-Layouts";
+					obj.next_obj = "ChatInterface";
+				} else if (obj.name == "ChatInterface") {
+					obj.prev_obj = "Interface";
+					obj.next_obj = "TabbedInterface";
+				}  else if (obj.name == "TabbedInterface") {
+					obj.prev_obj = "ChatInterface";
+					obj.next_obj = "Blocks";
+				}  else if (obj.name == "Blocks") {
+					obj.prev_obj = "TabbedInterface";
+					obj.next_obj = "Row";
 				}
 
 				if ("description" in obj) {
@@ -115,6 +121,7 @@ export async function load({ params, parent }) {
 		mode,
 		components,
 		helpers,
+		modals,
 		routes,
 		py_client,
 		COLOR_SETS,

js/_website/src/routes/[[version]]/docs/[doc]/+page.svelte

@@ -16,6 +16,7 @@
 	let mode = data.mode;
 	let components = data.components;
 	let helpers = data.helpers;
+	let modals = data.modals;
 	let routes = data.routes;
 	let py_client = data.py_client;
 	let on_main: boolean;
@@ -69,6 +70,11 @@
 	$: obj = data.obj;
 	$: mode = data.mode;
 	$: on_main = data.on_main;
+	$: components = data.components;
+	$: helpers = data.helpers;
+	$: modals = data.modals;
+	$: routes = data.routes;
+	$: py_client = data.py_client;
 </script>
 
 <MetaTags
@@ -86,6 +92,7 @@
 			current_nav_link={obj.name.toLowerCase()}
 			{components}
 			{helpers}
+			{modals}
 			{routes}
 			{py_client}
 		/>
@@ -506,7 +513,7 @@
 				</div>
 			</div>
 
-			<div class="flex justify-between my-4">
+			<div class="lg:ml-10 flex justify-between my-4">
 				{#if obj.prev_obj}
 					<a
 						href="./{obj.prev_obj.toLowerCase()}"