widgets: add itables and pygwalker

Author: mscolnick

data/itables/config.yaml

@@ -0,0 +1,21 @@
+name: itables
+description: Interactive tables in Jupyter and marimo notebooks
+repository: https://github.com/mwouts/itables
+pypi: itables
+environments: [marimo, jupyter]
+tags:
+  - table
+  - pandas
+  - interactive
+  - jupyter
+notebookCode: |
+  import pandas as pd
+  import anywidget
+
+  from itables.widget import ITable
+
+  df = pd.read_json(
+      "https://raw.githubusercontent.com/vega/vega-datasets/master/data/cars.json"
+  )
+
+  ITable(df)

data/pygwalker/config.yaml

@@ -0,0 +1,12 @@
+name: PyGWalker
+description: Turn your pandas dataframe into an interactive UI for visual analysis
+homePageUrl: https://github.com/Kanaries/pygwalker
+environments: [marimo, jupyter]
+githubRepo: Kanaries/pygwalker
+tags: [visualization, data analysis, pandas, tableau]
+packageName: pygwalker
+notebookCode: |
+  import pygwalker as pyg
+  import pandas as pd
+  df = pd.read_csv("https://raw.githubusercontent.com/Kanaries/pygwalker/main/examples/data/data.csv")
+  pyg.walk(df)

gallery/app/utils/notebook.ts

@@ -1,12 +1,16 @@
 import type { BuiltWithAnyWidget } from "~/model/types";
+import { dedent } from "ts-dedent";
 
 export function resolveNotebookURL(widget: BuiltWithAnyWidget) {
 	const queryParams = new URLSearchParams();
 
 	if (widget.notebookUrl) {
 		queryParams.set("src", widget.notebookUrl);
 	} else if (widget.notebookCode) {
-		queryParams.set("code", encodeURIComponent(widget.notebookCode));
+		queryParams.set(
+			"code",
+			encodeURIComponent(createNotebookFromCode(widget.notebookCode)),
+		);
 	} else if (widget.githubRepo) {
 		let guessPackageName =
 			widget.packageName || widget.githubRepo.split("/").pop();
@@ -44,3 +48,28 @@ async def _():
 		embedUrl: `https://marimo.app?${embedQueryParams.toString()}`,
 	};
 }
+
+function createNotebookFromCode(code: string) {
+	if (code.includes("app = marimo.App()")) {
+		return dedent(code);
+	}
+
+	const dedentedCode = dedent(code);
+	return `
+import marimo
+
+app = marimo.App()
+
+@app.cell
+async def _():
+${indentCode(dedentedCode, "    ")}
+    return
+`;
+}
+
+function indentCode(code: string, indent: string) {
+	return code
+		.split("\n")
+		.map((line) => `${indent}${line}`)
+		.join("\n");
+}

gallery/package.json

@@ -26,6 +26,7 @@
 		"react-dom": "^19.0.0",
 		"tailwind-merge": "^3.0.2",
 		"tailwindcss-animate": "^1.0.7",
+		"ts-dedent": "^2.2.0",
 		"yaml": "^2.7.0",
 		"zod": "^3.24.2"
 	},
@@ -40,8 +41,8 @@
 		"typescript": "^5.8.2",
 		"vite": "^6.2.1",
 		"vite-tsconfig-paths": "^5.1.4",
-		"wrangler": "3.114.0",
-		"vitest": "^3.0.8"
+		"vitest": "^3.0.8",
+		"wrangler": "3.114.0"
 	},
 	"engines": {
 		"node": ">=20.0.0"