From bcd0f1ce152406e0dc5802aabb1dd3ae71d7589d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magnus=20=C3=85hall?= <magnus.ahall@gibon.se>
Date: Fri, 11 Jul 2025 13:57:27 +0200
Subject: [PATCH] Tooltips

---
 static/css/main.css       | 44 +++++++++++++++++++++++++++++++++++-
 static/js/app.mjs         |  9 ++++++++
 static/js/select_node.mjs |  6 ++++-
 static/less/main.less     | 47 ++++++++++++++++++++++++++++++++++++++-
 views/pages/app.gotmpl    | 30 +++++++++++++++----------
 webserver.go              |  2 ++
 6 files changed, 123 insertions(+), 15 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index b375bf9..62dd257 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -85,13 +85,20 @@ button {
 }
 #editor-node > div.ops {
   display: grid;
-  grid-template-columns: min-content 1fr repeat(3, min-content);
+  grid-template-columns: min-content 1fr repeat(4, min-content);
   align-items: center;
   grid-gap: 8px;
 }
 #editor-node > div.ops #editor-node-name {
   font-weight: bold;
 }
+#editor-node > div.ops img {
+  display: block;
+  height: 32px;
+}
+#editor-node > div.ops img.highlight {
+  filter: invert(0.7) sepia(0.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
+}
 #types {
   grid-area: navigation;
 }
@@ -319,3 +326,38 @@ dialog#connection-data div.button {
 #editor-type-schema img.saving {
   filter: invert(0.7) sepia(0.5) hue-rotate(0deg) saturate(600%) brightness(0.75);
 }
+@keyframes example {
+  0% {
+    opacity: 0%;
+  }
+  50% {
+    opacity: 0%;
+  }
+  100% {
+    opacity: 100%;
+  }
+}
+.tooltip {
+  position: relative;
+}
+.tooltip.left::after {
+  right: 0px;
+}
+.tooltip.right::after {
+  left: 0px;
+}
+.tooltip:hover::after {
+  animation-name: example;
+  animation-duration: 1s;
+  white-space: nowrap;
+  background-color: var(--section-color);
+  box-shadow: 5px 5px 21px -4px rgba(0, 0, 0, 0.75);
+  position: absolute;
+  top: 48px;
+  content: attr(data-tooltip);
+  display: block;
+  padding: 8px 16px;
+  border-radius: 4px;
+  color: #fff;
+  z-index: 8192;
+}
diff --git a/static/js/app.mjs b/static/js/app.mjs
index a11a6ac..4d97a3f 100644
--- a/static/js/app.mjs
+++ b/static/js/app.mjs
@@ -17,6 +17,7 @@ export class App {
 			'EDITOR_NODE_SAVE',
 			'MENU_ITEM_SELECTED',
 			'NODE_CONNECT',
+			'NODE_COPY_PATH',
 			'NODE_CREATE_DIALOG',
 			'NODE_DELETE',
 			'NODE_EDIT_NAME',
@@ -49,6 +50,14 @@ export class App {
 				selectnode.render()
 				break
 
+			case 'NODE_COPY_PATH':
+				const uri = `${location.protocol}//${location.host}/nodes/${event.detail}`
+				const img = document.querySelector('#editor-node .copy-path')
+				img.classList.add('highlight')
+				setTimeout(()=>img.classList.remove('highlight'), 150)
+				navigator.clipboard.writeText(uri)
+				break
+
 			case 'NODE_SELECTED':
 				for (const n of document.querySelectorAll('#nodes .node.selected'))
 					n.classList.remove('selected')
diff --git a/static/js/select_node.mjs b/static/js/select_node.mjs
index b4f0947..3e92114 100644
--- a/static/js/select_node.mjs
+++ b/static/js/select_node.mjs
@@ -205,7 +205,11 @@ export class ConnectionDataDialog {
 		dlg.innerHTML = `
 			<div>
 				<div style="float: left;" class="label">Connection data</div>
-				<div style="float: right;"><img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" /></div>
+				<div style="float: right;">
+					<div class="tooltip left" data-tooltip="Delete the connection">
+						<img src="/images/${_VERSION}/node_modules/@mdi/svg/svg/trash-can.svg" />
+					</div>
+				</div>
 			</div>
 			<div style="clear: both;"><b>${this.node.Name}</b></div>
 			<div><textarea></textarea></div>
diff --git a/static/less/main.less b/static/less/main.less
index 90b1478..3ba2805 100644
--- a/static/less/main.less
+++ b/static/less/main.less
@@ -115,13 +115,22 @@ button {
 
 	& > div.ops {
 		display: grid;
-		grid-template-columns: min-content 1fr repeat(3, min-content);
+		grid-template-columns: min-content 1fr repeat(4, min-content);
 		align-items: center;
 		grid-gap: 8px;
 
 		#editor-node-name {
 			font-weight: bold;
 		}
+
+		img {
+			display: block;
+			height: 32px;
+
+			&.highlight {
+				filter: invert(.7) sepia(.5) hue-rotate(50deg) saturate(300%) brightness(0.85);
+			}
+		}
 	}
 }
 
@@ -422,3 +431,39 @@ dialog#connection-data {
 		}
 	}
 }
+
+@keyframes example {
+	  0% { opacity: 0%   }
+	 50% { opacity: 0%   }
+	100% { opacity: 100% }
+}
+
+.tooltip {
+	position: relative;
+
+	&.left::after {
+		right: 0px;
+	}
+
+	&.right::after {
+		left: 0px;
+	}
+
+	&:hover::after {
+		animation-name: example;
+		animation-duration: 1s;
+
+		white-space: nowrap;
+		background-color: var(--section-color);
+		box-shadow: 5px 5px 21px -4px rgba(0,0,0,0.75);
+
+		position: absolute;
+		top: 48px;
+		content: attr(data-tooltip);
+		display: block;
+		padding: 8px 16px;
+		border-radius: 4px;
+		color: #fff;
+		z-index: 8192;
+	}
+}
diff --git a/views/pages/app.gotmpl b/views/pages/app.gotmpl
index fbaf4b9..4136f9a 100644
--- a/views/pages/app.gotmpl
+++ b/views/pages/app.gotmpl
@@ -11,8 +11,7 @@
 }
 </script>
 
-<!--script src="/js/{{ .VERSION }}/lib/jsoneditor.js"></script-->
-<script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script>
+<script src="/js/{{ .VERSION }}/lib/jsoneditor.js"></script>
 <script type="module" defer>
 	import {App, TreeNode} from '/js/{{ .VERSION }}/app.mjs'
 	window._VERSION = '{{ .VERSION }}'
@@ -29,11 +28,24 @@
 	<div class="page section" id="nodes"></div>
 	<div class="page" id="editor-node" style="display: none">
 		<div class="section ops">
-			<img  onclick="mbus.dispatch('NODE_EDIT_NAME')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/tag-text-outline.svg" style="display: block; height: 32px" />
+			<img onclick="mbus.dispatch('NODE_EDIT_NAME')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/tag-text-outline.svg" />
 			<div onclick="mbus.dispatch('NODE_EDIT_NAME')" id="editor-node-name"></div>
-			<img  onclick="mbus.dispatch('NODE_CREATE_DIALOG')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/plus-box.svg" style="display: block; height: 32px" />
-			<img  onclick="mbus.dispatch('NODE_DELETE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/trash-can.svg" style="display: block; height: 32px" />
-			<img  onclick="mbus.dispatch('NODE_MOVE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/file-move-outline.svg" style="display: block; height: 32px" />
+
+			<div class="tooltip left" data-tooltip="Create new nodes under this one">
+				<img onclick="mbus.dispatch('NODE_CREATE_DIALOG')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/plus-box.svg" />
+			</div>
+
+			<div class="tooltip left" data-tooltip="Delete this node">
+				<img onclick="mbus.dispatch('NODE_DELETE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/trash-can.svg" />
+			</div>
+
+			<div class="tooltip left" data-tooltip="Move nodes under this one">
+				<img onclick="mbus.dispatch('NODE_MOVE')" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/file-move-outline.svg" />
+			</div>
+
+			<div class="tooltip left" data-tooltip="Copy path to JSON">
+				<img style="display: relative" class="copy-path" onclick="mbus.dispatch('NODE_COPY_PATH', _app.currentNode.ID)" src="/images/{{ .VERSION }}/node_modules/@mdi/svg/svg/protocol.svg" />
+			</div>
 		</div>
 
 		<div class="section">
@@ -52,10 +64,4 @@
 	<div class="page section" id="editor-type-schema"></div>
 </div>
 
-<!--
-<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre.min.css">
-<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre-exp.min.css">
-<link rel="stylesheet" href="/css/{{ .VERSION }}/spectre-icons.min.css">
--->
-
 {{ end }}
diff --git a/webserver.go b/webserver.go
index 007d4d7..1d85c94 100644
--- a/webserver.go
+++ b/webserver.go
@@ -125,6 +125,8 @@ func actionNodesTree(w http.ResponseWriter, r *http.Request) { // {{{
 	w.Write(j)
 } // }}}
 func actionNode(w http.ResponseWriter, r *http.Request) { // {{{
+	w.Header().Add("Content-Type", "application/json")
+
 	nodeID := 0
 	nodeIDStr := r.PathValue("nodeID")
 	nodeID, _ = strconv.Atoi(nodeIDStr)