From c3f8bedea14677dc3edc2f1da63193418f4fbadd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Mon, 7 Jul 2025 20:29:15 +0200
Subject: [PATCH] Schema expansion

---
 static/css/json_editor.css   | 12 +++++++++++-
 static/js/app.mjs            | 23 ++++++++++++++---------
 static/less/json_editor.less | 15 ++++++++++++++-
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/static/css/json_editor.css b/static/css/json_editor.css
index c48679b..66160f7 100644
--- a/static/css/json_editor.css
+++ b/static/css/json_editor.css
@@ -4,7 +4,7 @@
   border-radius: var(--border-radius);
   padding: 16px;
   margin-left: 0px;
-  margin-top: 16px;
+  margin-top: 8px;
   margin-bottom: 16px;
   width: min-content;
 }
@@ -29,11 +29,21 @@
 .je-object__controls > .je-modal button {
   margin: 8px 0px 8px 8px;
 }
+.row {
+  display: flex;
+  gap: 16px;
+}
 .form-control > label {
   display: block;
   color: var(--je-color);
   margin-bottom: 4px;
 }
+[data-schematype] {
+  margin-bottom: 16px;
+}
+[data-schematype]:last-child {
+  margin-bottom: 0px;
+}
 [data-schematype="array"] button {
   margin-right: 8px;
 }
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 725c087..d082f74 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -19,7 +19,6 @@ export class App {
 			'NODE_DELETE',
 			'NODE_EDIT_NAME',
 			'NODE_MOVE',
-			'NODE_REMOVED',
 			'NODE_SELECTED',
 			'TREE_RELOAD_NODE',
 			'TYPES_LIST_FETCHED',
@@ -63,13 +62,6 @@ export class App {
 				this.nodesMove(nodes, this.currentNode.ID)
 				break
 
-			case 'NODE_REMOVED':
-				// Event dispatched when a tree node is removed after an update.
-				if (this.currentNode.ID !== event.detail)
-					return
-				mbus.dispatch('NODE_SELECTED', null)
-				break
-
 			case 'EDITOR_NODE_SAVE':
 				this.nodeUpdate()
 				break
@@ -269,6 +261,7 @@ export class App {
 				}
 
 				this.tree.updateNode(parseInt(parentID))
+				mbus.dispatch('NODE_SELECTED', null)
 			})
 			.catch(err => showError(err))
 	}// }}}
@@ -552,7 +545,11 @@ export class TreeNode {
 		this.children = null
 		this.nameElement = null
 		this.expandEventListenerAdded = false
-		this.expanded = false
+		this.expanded = this.retrieveExpanded()
+
+		if (this.expanded)
+			this.tree.fetchNodes(this.node.ID)
+			.then(()=>this.render())
 	}// }}}
 	render() {// {{{
 		if (this.element === null) {
@@ -633,6 +630,7 @@ export class TreeNode {
 		else
 			this.expanded = expanded
 
+		this.storeExpanded()
 		this.updateExpandImages()
 
 		if (!this.childrenFetched && this.node.NumChildren > 0 && this.node.Children.length == 0) {
@@ -652,6 +650,13 @@ export class TreeNode {
 				.catch(err => reject(err))
 		})
 	}// }}}
+
+	storeExpanded() {// {{{
+		sessionStorage.setItem(`tree_expand_${this.node.ID}`, this.expanded ? '1' : '0')
+	}// }}}
+	retrieveExpanded() {// {{{
+		return sessionStorage.getItem(`tree_expand_${this.node.ID}`) === '1'
+	}// }}}
 }
 
 export class TypesList {
diff --git a/static/less/json_editor.less b/static/less/json_editor.less
index 18ffc8f..ccda5af 100644
--- a/static/less/json_editor.less
+++ b/static/less/json_editor.less
@@ -4,7 +4,7 @@
 	border-radius: var(--border-radius);
 	padding: 16px;
 	margin-left: 0px;
-	margin-top: 16px;
+	margin-top: 8px;
 	margin-bottom: 16px;
 	width: min-content;
 
@@ -37,6 +37,11 @@
 	}
 }
 
+.row {
+	display: flex;
+	gap: 16px;
+}
+
 .form-control {
 	& > label {
 		display: block;
@@ -45,6 +50,14 @@
 	}
 }
 
+[data-schematype] {
+	margin-bottom: 16px;
+	
+	&:last-child {
+		margin-bottom: 0px;
+	}
+}
+
 [data-schematype="array"] {
 	button {
 		margin-right: 8px;