Show connected nodes

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