@yuneta/gobj-ui 7.23.1 → 7.23.3

package/README.md

@@ -439,8 +439,26 @@ the order of arrival: the viewer opens on the **tree** (`view_mode` default).
 | `tree` | *where is this value, and what is around it* | the lazy view; the only one that can drill; the default |
 | `graph` | *what shape is this* | a hosted `C_YUI_JSON_GRAPH` child (AntV/G6) |
 
-The graph carries **its own** toolbar, and since `7.22.0` that toolbar has the
-same two facilities the tree has: a **find box** (rate-limited, `EV_FIND_NODES`)
+Since `7.23.2` the schema and cell-JSON popups of `C_YUI_TREEDB_TOPIC_WITH_FORM`
+present that viewer as a floating `C_YUI_WINDOW` on a laptop — movable,
+resizable, maximisable, position remembered — and keep the modal sheet on a
+phone. A JSON document is read *while* looking at the table it came from, which
+a modal cannot allow; a phone has no room to arrange anything, so the sheet
+stays. Note the close contract: `C_YUI_WINDOW.close_window()` calls `on_close`
+and THEN destroys itself, so a host must drop its reference rather than destroy
+the window too.
+
+Its camera speaks the **same vocabulary as the treedb graph** (`7.23.3`): zoom
+in / zoom out, a live **zoom readout**, `yi-fit` for fit — the same corner
+brackets the SVG sprite draws for `g6-icon-fit` — and the WRITTEN `1:1` for
+actual size, which is written in every editor that offers it and never drawn.
+The readout hangs off G6's `aftertransform`, the one hook that also covers the
+wheel.
+
+The graph carries **its own** toolbar, a **layout picker**
+(`EV_CHANGE_LAYOUT {layout}`: `vertical tree`, `dagre top-down`,
+`dagre left-right` — the layout and the edge type move together), and since
+`7.22.0` the same two facilities the tree has: a **find box** (rate-limited, `EV_FIND_NODES`)
 that highlights matching rows and outlines the cards they are in and says how
 many matched, and **expand-all / collapse-all** (`EV_EXPAND_ALL` /
 `EV_COLLAPSE_ALL`) that fold every card but the root, marking each cut with

package/dist/gobj-ui.cjs.js

@@ -3518,7 +3518,7 @@ function composed_title(gobj) {
 *   Below the mobile breakpoint the window is a full-screen
 *   sheet (no float / drag / resize).
 ************************************************************/
-function is_mobile$2() {
+function is_mobile$3() {
 	return (window.innerWidth || document.documentElement.offsetWidth) <= MOBILE_MAX;
 }
 /************************************************************
@@ -3551,7 +3551,7 @@ function do_minimize(gobj) {
 ************************************************************/
 function build_ui$15(gobj) {
 	ensure_window_style();
-	let mobile = is_mobile$2();
+	let mobile = is_mobile$3();
 	let header = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "header");
 	if ((0, _yuneta_gobj_js.is_gobj)(header)) header = (0, _yuneta_gobj_js.gobj_read_attr)(header, "$container");
 	if (!header) header = build_default_header(gobj);
@@ -3889,7 +3889,7 @@ function min$1(gobj) {
 *  handlers moving
 ************************************************************/
 function mvStart(gobj, evt) {
-	if (is_mobile$2()) return;
+	if (is_mobile$3()) return;
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	let window_rect = $container.getBoundingClientRect();
 	let x = evt.screenX;
@@ -4048,7 +4048,7 @@ function do_center(gobj, x, y, width, height) {
 function handleResize(gobj) {
 	let $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
 	if (!$container) return;
-	if (is_mobile$2()) {
+	if (is_mobile$3()) {
 		$container.classList.add("is-mobile-sheet");
 		let vw = window.innerWidth || document.documentElement.offsetWidth;
 		let vh = window.innerHeight || document.documentElement.offsetHeight;
@@ -9479,6 +9479,56 @@ var FOLD_SWALLOWED_EVENTS = [
 	"mousedown",
 	"click"
 ];
+var LAYOUTS$1 = {
+	"json-tree": {
+		label: "vertical tree",
+		g6_layout: { type: "json-tree-layout" },
+		edge_type: "cubic-vertical"
+	},
+	"dagre-tb": {
+		label: "dagre top-down",
+		g6_layout: {
+			type: "antv-dagre",
+			rankdir: "TB",
+			nodesep: 20,
+			ranksep: 40
+		},
+		edge_type: "polyline"
+	},
+	"dagre-lr": {
+		label: "dagre left-right",
+		g6_layout: {
+			type: "antv-dagre",
+			rankdir: "LR",
+			nodesep: 20,
+			ranksep: 40
+		},
+		edge_type: "polyline"
+	}
+};
+var DEFAULT_LAYOUT = "json-tree";
+function get_layout_cfg$1(key) {
+	return LAYOUTS$1[key] || LAYOUTS$1[DEFAULT_LAYOUT];
+}
+/************************************************************
+*  A layout's label, with every key SPELLED OUT inside t().
+*
+*  Never t(LAYOUTS[key].label) nor a `data-i18n` fed from that
+*  table: the apps' validate-locales scans for t("literal"),
+*  so a key reached through a variable is a key it cannot
+*  demand — and i18next answers an undefined key with the key
+*  itself, which renders in lower-case English and never
+*  changes language.  Twice already in this component's
+*  history (7.20.0 `tree view`, and this table on its first
+*  draft).
+************************************************************/
+function layout_label(key) {
+	switch (key) {
+		case "dagre-tb": return (0, i18next.t)("dagre top-down");
+		case "dagre-lr": return (0, i18next.t)("dagre left-right");
+		default: return (0, i18next.t)("vertical tree");
+	}
+}
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -9489,6 +9539,7 @@ var attrs_table$11 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Container element"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "canvas_id", 0, "", "Canvas ID"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "wide", 0, "36px", "Height of header"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "layout", 0, "json-tree", "Layout key (see LAYOUTS)"),
 	(0, _yuneta_gobj_js.SDATA_END)()
 ];
 var PRIVATE_DATA$11 = {
@@ -9504,6 +9555,8 @@ var PRIVATE_DATA$11 = {
 	match_count: 0,
 	find_timer: null,
 	fold_listener: null,
+	$layout_select: null,
+	$zoom_readout: null,
 	$find_input: null,
 	$find_result: null,
 	$find_count: null
@@ -9678,6 +9731,7 @@ function build_ui$10(gobj) {
 		};
 		for (let type of FOLD_SWALLOWED_EVENTS) $mount.addEventListener(type, priv.fold_listener, true);
 	} else (0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no canvas mount, fold handles are dead`);
+	priv.$layout_select = $container.querySelector(".JSON_GRAPH_LAYOUT");
 	priv.$find_input = $container.querySelector(".JSON_GRAPH_FIND_INPUT");
 	priv.$find_result = $container.querySelector(".JSON_GRAPH_FIND_RESULT");
 	priv.$find_count = $container.querySelector(".JSON_GRAPH_FIND_COUNT");
@@ -9700,6 +9754,54 @@ function destroy_ui$6(gobj) {
 	}
 }
 /************************************************************
+*   One camera button.
+************************************************************/
+function camera_button(gobj, icon, event_name, label_key, wide) {
+	return [
+		"button",
+		{
+			class: `button ${event_name}`,
+			type: "button",
+			style: {
+				height: wide,
+				width: "2.5em"
+			},
+			title: (0, i18next.t)(label_key),
+			"data-i18n-title": label_key,
+			"aria-label": (0, i18next.t)(label_key),
+			"data-i18n-aria-label": label_key
+		},
+		["i", {
+			style: "font-size:1.5em; color:inherit;",
+			class: icon
+		}],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
+		} }
+	];
+}
+/************************************************************
+*   The zoom, as a percentage.  What the two magnifiers
+*   change: an editor that offers a zoom shows the number.
+************************************************************/
+function zoom_percent_text$1(gobj) {
+	let graph = gobj.priv.graph;
+	if (!graph) return "100%";
+	try {
+		return Math.round(graph.getZoom() * 100) + "%";
+	} catch (e) {
+		return "100%";
+	}
+}
+/************************************************************
+*   Repaint the readout after anything that moves the camera.
+************************************************************/
+function update_zoom_readout$1(gobj) {
+	let priv = gobj.priv;
+	if (priv.$zoom_readout) priv.$zoom_readout.textContent = zoom_percent_text$1(gobj);
+}
+/************************************************************
 *   One fold button.  `open` rotates the chevron to the open
 *   state, mirroring the per-node toggle of the lazy tree.
 ************************************************************/
@@ -9779,63 +9881,88 @@ function make_toolbar$3(gobj) {
 		]]
 	]];
 	let center_items = [];
-	for (let item of [
-		[
-			"yi-magnifying-glass-plus",
-			"EV_ZOOM_IN",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass",
-			"EV_ZOOM_RESET",
-			false,
-			"i"
-		],
-		[
-			"yi-magnifying-glass-minus",
-			"EV_ZOOM_OUT",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-to-eye",
-			"EV_CENTER",
-			false,
-			"i"
-		],
-		[
-			"yi-arrows-rotate",
-			"EV_REFRESH",
-			false,
-			"i"
-		]
-	]) {
-		let icon_name = item[0];
-		let event_name = item[1];
-		let disabled = item[2];
-		let button = {
-			class: `button ${event_name}`,
+	for (let item of [[
+		"yi-magnifying-glass-plus",
+		"EV_ZOOM_IN",
+		"zoom in"
+	], [
+		"yi-magnifying-glass-minus",
+		"EV_ZOOM_OUT",
+		"zoom out"
+	]]) center_items.push(camera_button(gobj, item[0], item[1], item[2], toolbar_wide));
+	priv.$zoom_readout = (0, _yuneta_gobj_js.createElement2)([
+		"span",
+		{
+			class: "JSON_GRAPH_ZOOM_LEVEL is-flex is-align-items-center px-2 has-text-grey",
+			style: "font-size:.85rem; min-width:3.5em; justify-content:center;",
+			title: (0, i18next.t)("zoom level"),
+			"data-i18n-title": "zoom level"
+		},
+		zoom_percent_text$1(gobj)
+	]);
+	center_items.push(priv.$zoom_readout);
+	center_items.push(camera_button(gobj, "yi-fit", "EV_CENTER", "auto fit", toolbar_wide));
+	center_items.push([
+		"button",
+		{
+			class: "button EV_ZOOM_RESET",
+			type: "button",
 			style: {
 				height: toolbar_wide,
 				width: "2.5em"
-			}
-		};
-		if (disabled) button.disabled = true;
-		center_items.push([
-			"button",
-			button,
-			["i", {
-				style: "font-size:1.5em; color:inherit;",
-				class: icon_name
-			}],
-			{ click: (evt) => {
+			},
+			title: (0, i18next.t)("actual size"),
+			"data-i18n-title": "actual size",
+			"aria-label": (0, i18next.t)("actual size"),
+			"data-i18n-aria-label": "actual size"
+		},
+		[
+			"span",
+			{ style: "font-weight:700;" },
+			"1:1"
+		],
+		{ click: (evt) => {
+			evt.stopPropagation();
+			(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_ZOOM_RESET", { evt }, gobj);
+		} }
+	]);
+	center_items.push(camera_button(gobj, "yi-arrows-rotate", "EV_REFRESH", "refresh", toolbar_wide));
+	let current_layout = (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout") || DEFAULT_LAYOUT;
+	let options = Object.keys(LAYOUTS$1).map(function(key) {
+		let attrs = {
+			value: key,
+			"data-i18n": LAYOUTS$1[key].label
+		};
+		if (key === current_layout) attrs.selected = "selected";
+		return [
+			"option",
+			attrs,
+			layout_label(key)
+		];
+	});
+	let right_items = [
+		(0, _yuneta_gobj_js.createElement2)([
+			"select",
+			{
+				class: "JSON_GRAPH_LAYOUT select",
+				style: {
+					height: toolbar_wide,
+					"margin-left": "0.5em"
+				},
+				title: (0, i18next.t)("layout"),
+				"data-i18n-title": "layout",
+				"aria-label": (0, i18next.t)("layout"),
+				"data-i18n-aria-label": "layout"
+			},
+			options,
+			{ change: (evt) => {
 				evt.stopPropagation();
-				(0, _yuneta_gobj_js.gobj_send_event)(gobj, event_name, { evt }, gobj);
+				(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_CHANGE_LAYOUT", { layout: evt.target.value }, gobj);
 			} }
-		]);
-	}
-	let right_items = [graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true), graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)];
+		]),
+		graph_fold_button(gobj, "EV_EXPAND_ALL", "expand all", true),
+		graph_fold_button(gobj, "EV_COLLAPSE_ALL", "collapse all", false)
+	];
 	const $toolbar = yui_toolbar({}, [
 		[
 			"div",
@@ -9861,6 +9988,7 @@ function make_toolbar$3(gobj) {
 ************************************************************/
 function build_graph$3(gobj) {
 	let priv = gobj.priv;
+	let layout_cfg = get_layout_cfg$1((0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout"));
 	const graph = priv.graph = new _antv_g6.Graph({
 		container: priv.canvas_id,
 		animation: false,
@@ -9868,20 +9996,23 @@ function build_graph$3(gobj) {
 		zoomRange: [.1, 4],
 		node: { style: { labelPlacement: "center" } },
 		edge: {
-			type: "cubic-vertical",
+			type: layout_cfg.edge_type,
 			style: {
 				stroke: "#999",
 				lineWidth: 1,
 				endArrow: true
 			}
 		},
-		layout: { type: "json-tree-layout" },
+		layout: layout_cfg.g6_layout,
 		behaviors: ["drag-canvas", "zoom-canvas"]
 	});
 	if (priv.theme) graph.setTheme(priv.theme);
 	graph.on(_antv_g6.NodeEvent.CLICK, (evt) => {
 		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_NODE_CLICK", { evt }, gobj);
 	});
+	graph.on("aftertransform", () => {
+		update_zoom_readout$1(gobj);
+	});
 	graph.on(_antv_g6.CanvasEvent.CLICK, (evt) => {});
 	if (typeof ResizeObserver !== "undefined") {
 		let $canvas = document.getElementById(priv.canvas_id);
@@ -10141,6 +10272,7 @@ function load_json(gobj) {
 		});
 		graph.render().then(() => {
 			if (!preserve_view) graph.fitView();
+			update_zoom_readout$1(gobj);
 		});
 	}
 }
@@ -10302,6 +10434,34 @@ function ac_refresh$5(gobj, event, kw, src) {
 }
 /************************************************************
 *  {theme: "dark"|"light"} — the app switched theme.
+*  EV_CHANGE_LAYOUT { layout }
+*
+*  The layout AND the edge type move together — a vertical
+*  layout with horizontal cubics draws every edge the wrong way
+*  round — and then the graph is rebuilt and refitted, because a
+*  new layout is a new shape and the old camera framed the old
+*  one.
+************************************************************/
+function ac_change_layout$1(gobj, event, kw, src) {
+	let priv = gobj.priv;
+	let key = kw && kw.layout || "";
+	if (!LAYOUTS$1[key]) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: unknown layout '${key}'`);
+		return -1;
+	}
+	if (key === (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "layout")) return 0;
+	(0, _yuneta_gobj_js.gobj_write_str_attr)(gobj, "layout", key);
+	if (priv.$layout_select && priv.$layout_select.value !== key) priv.$layout_select.value = key;
+	let cfg = get_layout_cfg$1(key);
+	if (priv.graph) priv.graph.setOptions({
+		layout: cfg.g6_layout,
+		edge: { type: cfg.edge_type }
+	});
+	refresh_json(gobj);
+	update_find_result(gobj);
+	return 0;
+}
+/************************************************************
 *  EV_TOGGLE_FOLD { path } — fold or unfold ONE card.
 *
 *  The camera does not move: folding one branch is a local
@@ -10516,6 +10676,11 @@ function create_gclass$11(gclass_name) {
 			ac_toggle_fold,
 			null
 		],
+		[
+			"EV_CHANGE_LAYOUT",
+			ac_change_layout$1,
+			null
+		],
 		[
 			"EV_EXPAND_ALL",
 			ac_expand_all$2,
@@ -10577,6 +10742,7 @@ function create_gclass$11(gclass_name) {
 		["EV_REFRESH", 0],
 		["EV_FIND_NODES", 0],
 		["EV_TOGGLE_FOLD", 0],
+		["EV_CHANGE_LAYOUT", 0],
 		["EV_EXPAND_ALL", 0],
 		["EV_COLLAPSE_ALL", 0],
 		["EV_THEME", 0],
@@ -10910,12 +11076,13 @@ function mt_start$10(gobj) {
 /***************************************************************
 *          Framework Method: Stop
 ***************************************************************/
-function mt_stop$10(gobj) {}
+function mt_stop$10(gobj) {
+	teardown_graph_child(gobj);
+}
 /***************************************************************
 *          Framework Method: Destroy
 ***************************************************************/
 function mt_destroy$10(gobj) {
-	teardown_graph_child(gobj);
 	destroy_ui$5(gobj);
 }
 /***************************
@@ -16215,7 +16382,7 @@ function treedb_delete_node$1(gobj, treedb_name, topic_name, record, options) {
 /************************************************************
 *  True on a phone-width viewport (Bulma's mobile breakpoint).
 ************************************************************/
-function is_mobile$1() {
+function is_mobile$2() {
 	return typeof window !== "undefined" && window.innerWidth <= 768;
 }
 /************************************************************
@@ -16234,7 +16401,7 @@ function open_json_viewer$1(gobj) {
 		yui_shell_show_error(yui_shell_of(gobj), "raw json viewer unavailable", { t: i18next.t });
 		return;
 	}
-	let mobile = is_mobile$1();
+	let mobile = is_mobile$2();
 	let shell = yui_shell_of(gobj);
 	let jv = (0, _yuneta_gobj_js.gobj_create_service)(`treedb-topics-json-${(0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj))}`, "C_YUI_JSON", { subscriber: gobj }, gobj);
 	if (!jv) {
@@ -17447,10 +17614,102 @@ var PRIVATE_DATA$5 = {
 	form_modal: null,
 	schema_gobj: null,
 	schema_modal: null,
+	schema_win: null,
 	cell_json_gobj: null,
-	cell_json_modal: null
+	cell_json_modal: null,
+	cell_json_win: null
 };
 var __gclass__$5 = null;
+function is_mobile$1() {
+	return typeof window !== "undefined" && window.innerWidth <= 768;
+}
+/************************************************************
+*  Present a JSON viewer's $container.
+*
+*  On a LAPTOP a floating C_YUI_WINDOW: a JSON document is
+*  something you read WHILE looking at the table behind it —
+*  you move it, you resize it, you maximise it when the
+*  document is big.  A modal can do none of that, and it
+*  darkens exactly the rows you opened the cell from.
+*
+*  On a phone the modal sheet stays: there is no room to
+*  arrange anything, and the sheet already carries the shell's
+*  Escape / Back handling.
+*
+*  Returns {win, modal} — exactly one of them is set.
+************************************************************/
+function present_json_popup(gobj, $box, opts) {
+	let shell = yui_shell_of(gobj);
+	if (!shell) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no shell, cannot present the json`);
+		return null;
+	}
+	if (is_mobile$1()) return {
+		modal: yui_shell_show_modal(shell, $box, {
+			dialog: true,
+			logical_class: opts.logical_class + "_SHEET",
+			title_prefix: opts.title_prefix,
+			title: opts.title,
+			t: i18next.t,
+			on_close: opts.on_close
+		}),
+		win: null
+	};
+	let win = (0, _yuneta_gobj_js.gobj_create_service)(opts.name, "C_YUI_WINDOW", {
+		$parent: popup_mount_layer(gobj),
+		subscriber: null,
+		modal: false,
+		showMax: true,
+		showFooter: false,
+		resizable: true,
+		center: true,
+		auto_save_size_and_position: true,
+		width: 720,
+		height: 620,
+		logical_class: opts.logical_class + "_WINDOW",
+		title_prefix: opts.title_prefix,
+		title: opts.title,
+		icon: opts.icon,
+		body: $box,
+		manager: null,
+		on_close: function() {
+			if ((0, _yuneta_gobj_js.gobj_is_destroying)(gobj)) return;
+			opts.forget_window();
+			opts.on_close();
+		}
+	}, gobj);
+	if (!win) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot create the json window`);
+		return null;
+	}
+	(0, _yuneta_gobj_js.gobj_start)(win);
+	return {
+		win,
+		modal: null
+	};
+}
+/************************************************************
+*  Retire a presenting window: reference cleared FIRST, then
+*  stop, then destroy.
+*
+*  The order is the whole content of this function.  The ✕ of
+*  the window calls back into the teardown that calls this, so
+*  clearing the reference first is what stops the recursion.
+*  And it is STOP then destroy because the window was started
+*  on open: handing a running gobj to gobj_destroy() makes the
+*  framework rescue it and say so — "Destroying a RUNNING
+*  gobj" — which is a caller's bug, not a framework message.
+*  Same lesson `c_tranger_view.close_json_viewer` carries.
+************************************************************/
+function retire_popup_window(win) {
+	if (!win) return;
+	try {
+		if ((0, _yuneta_gobj_js.gobj_is_running)(win)) (0, _yuneta_gobj_js.gobj_stop)(win);
+		(0, _yuneta_gobj_js.gobj_destroy)(win);
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_warning)(`${GCLASS_NAME$5}: json window already gone: ${e}`);
+	}
+}
 function popup_mount_layer(gobj) {
 	let $layer = yui_shell_popup_layer(yui_shell_of(gobj));
 	if ($layer) return $layer;
@@ -18621,8 +18880,7 @@ function open_schema_dialog(gobj) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no desc, no schema to show`);
 		return;
 	}
-	let shell = yui_shell_of(gobj);
-	if (!shell) {
+	if (!yui_shell_of(gobj)) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no shell, cannot open the schema view`);
 		return;
 	}
@@ -18639,16 +18897,25 @@ function open_schema_dialog(gobj) {
 		teardown_schema_child(gobj);
 		return;
 	}
-	priv.schema_modal = yui_shell_show_modal(shell, $box, {
-		dialog: true,
-		logical_class: "TREEDB_SCHEMA_SHEET",
+	let presented = present_json_popup(gobj, $box, {
+		name: "schemawin_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)),
+		logical_class: "TREEDB_SCHEMA",
 		title_prefix: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
 		title: "schema",
-		t: i18next.t,
+		icon: "yi-table",
+		forget_window: function() {
+			priv.schema_win = null;
+		},
 		on_close: function() {
 			teardown_schema_child(gobj);
 		}
 	});
+	if (!presented) {
+		teardown_schema_child(gobj);
+		return;
+	}
+	priv.schema_modal = presented.modal;
+	priv.schema_win = presented.win;
 	(0, _yuneta_gobj_js.gobj_send_event)(json_view, "EV_SET_JSON", { json: desc }, gobj);
 }
 /************************************************************
@@ -18663,6 +18930,9 @@ function teardown_schema_child(gobj) {
 		(0, _yuneta_gobj_js.gobj_destroy)(priv.schema_gobj);
 		priv.schema_gobj = null;
 	}
+	let win = priv.schema_win;
+	priv.schema_win = null;
+	retire_popup_window(win);
 	priv.schema_modal = null;
 }
 /************************************************************
@@ -18709,8 +18979,7 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: row '${row_id}' has no col '${col_id}'`);
 		return;
 	}
-	let shell = yui_shell_of(gobj);
-	if (!shell) {
+	if (!yui_shell_of(gobj)) {
 		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no shell, cannot open the cell json`);
 		return;
 	}
@@ -18727,16 +18996,25 @@ function open_cell_json_dialog(gobj, row_id, col_id) {
 		teardown_cell_json_child(gobj);
 		return;
 	}
-	priv.cell_json_modal = yui_shell_show_modal(shell, $box, {
-		dialog: true,
-		logical_class: "TREEDB_CELL_JSON_SHEET",
+	let presented = present_json_popup(gobj, $box, {
+		name: "cellwin_" + (0, _yuneta_gobj_js.clean_name)((0, _yuneta_gobj_js.gobj_name)(gobj)),
+		logical_class: "TREEDB_CELL_JSON",
 		title_prefix: String(row_id),
 		title: col_id,
-		t: i18next.t,
+		icon: "yi-js-square",
+		forget_window: function() {
+			priv.cell_json_win = null;
+		},
 		on_close: function() {
 			teardown_cell_json_child(gobj);
 		}
 	});
+	if (!presented) {
+		teardown_cell_json_child(gobj);
+		return;
+	}
+	priv.cell_json_modal = presented.modal;
+	priv.cell_json_win = presented.win;
 	(0, _yuneta_gobj_js.gobj_send_event)(json_view, "EV_SET_JSON", { json: value }, gobj);
 }
 /************************************************************
@@ -18751,6 +19029,9 @@ function teardown_cell_json_child(gobj) {
 		(0, _yuneta_gobj_js.gobj_destroy)(priv.cell_json_gobj);
 		priv.cell_json_gobj = null;
 	}
+	let win = priv.cell_json_win;
+	priv.cell_json_win = null;
+	retire_popup_window(win);
 	priv.cell_json_modal = null;
 }
 /************************************************************