Show connected nodes

static/css/main.css

@@ -1,5 +1,6 @@
 :root {
   --textsize: 12pt;
+  --section-color: #73a44d;
   --je-color: #73a44d;
   --border-radius: 5px;
 }
@@ -197,3 +198,29 @@ select:focus {
   outline: 2px solid #888;
   outline-offset: -2px;
 }
+#connected-nodes > .label {
+  margin-bottom: 16px;
+  color: var(--section-color);
+  font-weight: bold;
+  font-size: 1.25em;
+}
+#connected-nodes .connected-nodes {
+  display: flex;
+  align-items: start;
+  flex-flow: row wrap;
+  gap: 32px;
+}
+#connected-nodes .connected-nodes .type-group {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  grid-gap: 8px;
+  align-items: center;
+}
+#connected-nodes .connected-nodes .type-group .type-name {
+  font-weight: bold;
+  grid-column: 1 / -1;
+}
+#connected-nodes .type-icon img {
+  display: block;
+  height: 24px;
+}

static/js/app.mjs

@@ -192,6 +192,22 @@ export class App {
 				// doesn't make any sense before a node is selected.
 				document.getElementById('editor-node').style.display = 'grid'
 			})
+			.catch(err => showError(err))
+
+		fetch(`/nodes/connections/${nodeID}`)
+			.then(data => data.json())
+			.then(json => {
+				if (!json.OK) {
+					showError(err)
+					return
+				}
+				
+				const connectedNodes = new ConnectedNodes(json.Nodes)
+				document.getElementById('connected-nodes').replaceChildren(connectedNodes.render())
+
+			})
+			.catch(err => showError(err))
+
 	}// }}}
 	async nodeRename(nodeID, name) {// {{{
 		return new Promise((resolve, reject) => {
@@ -380,7 +396,6 @@ class NodeCreateDialog {
 	}// }}}
 }
 
-
 class SelectType {
 	constructor(types) {// {{{
 		this.types = types
@@ -549,7 +564,7 @@ export class TreeNode {
 
 		if (this.expanded)
 			this.tree.fetchNodes(this.node.ID)
-			.then(()=>this.render())
+				.then(() => this.render())
 	}// }}}
 	render() {// {{{
 		if (this.element === null) {
@@ -727,4 +742,55 @@ function typeSort(a, b) {// {{{
 	return 0
 }// }}}
 
+class ConnectedNodes {
+	constructor(nodes) {
+		this.nodes = nodes
+	}
+	render() {
+		const div = document.createElement('template')
+		div.innerHTML = `
+			<div class="label">Connected nodes</div>
+			<div class="connected-nodes"></div>
+		`
+
+		const types = new Map()
+		for (const n of this.nodes) {
+			let typeGroup = types.get(n.TypeSchema.title)
+			if (typeGroup === undefined) {
+				typeGroup = document.createElement('div')
+				typeGroup.classList.add('type-group')
+				typeGroup.innerHTML = `<div class="type-name">${n.TypeSchema.title}</div>`
+				types.set(n.TypeSchema.title, typeGroup)
+			}
+
+			typeGroup.appendChild(
+				new ConnectedNode(n).render()
+			)
+		}
+
+		const connectedNodes = div.content.querySelector('.connected-nodes')
+		for (const t of Array.from(types.keys()).sort()) {
+			connectedNodes.append(types.get(t))
+		}
+
+		return div.content
+	}
+}
+
+
+
+class ConnectedNode {
+	constructor(node) {
+		this.node = node
+	}
+	render() {
+		const tmpl = document.createElement('template')
+		tmpl.innerHTML = `
+			<div class="type-icon"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/${this.node.TypeIcon}.svg" /></div>
+			<div class="node-name">${this.node.Name}</div>
+		`
+		return tmpl.content
+	}
+}
+
 // vim: foldmethod=marker

static/less/main.less

@@ -1,5 +1,6 @@
 :root {
   --textsize: 12pt;
+  --section-color: #73a44d;
   --je-color: #73a44d;
   --border-radius: 5px;
 }
@@ -266,3 +267,38 @@ select:focus {
 	outline: 2px solid #888;
 	outline-offset: -2px;
 }
+
+#connected-nodes {
+	& > .label {
+		margin-bottom: 16px;
+		color: var(--section-color);
+		font-weight: bold;
+		font-size: 1.25em;
+	}
+
+	.connected-nodes {
+		display: flex;
+		align-items: start;
+		flex-flow: row wrap;
+		gap: 32px;
+
+		.type-group {
+			display: grid;
+			grid-template-columns: 24px 1fr;
+			grid-gap: 8px;
+			align-items: center;
+
+			.type-name {
+				font-weight: bold;
+				grid-column: 1 / -1;
+			}
+		}
+	}
+
+	.type-icon {
+		img {
+			display: block;
+			height: 24px;
+		}
+	}
+}