add toggle for json and make list of regstries a dropdown

Signed-off-by: Doug Davis <[email protected]>

registry/const.go

@@ -56,3 +56,6 @@ const (
 	ENTITY_VERSION
 	ENTITY_MODEL
 )
+
+const HTML_EXP = "▾" // Expanded json symbol for HTML output
+const HTML_MIN = "▸" // Minimized json symbol for HTML output

registry/httpStuff.go

@@ -509,7 +509,7 @@ func (pw *PageWriter) Done() {
     margin-bottom: 10px ;
   }
   #commit {
-	background-color: lightsteelblue ;
+    background-color: lightsteelblue ;
     font-size: 12px ;
     font-family: courier ;
     position: fixed ;
@@ -552,7 +552,40 @@ func (pw *PageWriter) Done() {
     padding: 5px ;
     flex: 1 ;
     overflow: auto ;
+    font-family: courier ;
+    font-size: 14px ;
+    white-space: pre ;
+  }
+
+  .spc {
+    cursor: default ;
+    width: 14px ;
+    display: inline ;
+    user-select: none ;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    text-align: center ;
+  }
+
+  .exp {
+    cursor: default ;
+    width: 1ch ;
+    display: inline-block ;
+    user-select: none ;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    text-align: center ;
+
+    // background-color: lightsteelblue ; // #e7eff7 ;
+    // color: black ;
+    font-weight: bold ;
+  }
+
+  .hide {
+    width:0px ;
+    display:inline-block ;
   }
+
   pre {
     margin: 0px ;
   }
@@ -589,12 +622,12 @@ func (pw *PageWriter) Done() {
 var structureswitch = `+structureswitch+`;
 
 function changeRegistry(name) {
-	var loc = ""
+  var loc = ""
 
-	if (name == "Default") loc = "/?ui"
-	else loc = "/reg-" + name + "?ui"
+  if (name == "Default") loc = "/?ui"
+  else loc = "/reg-" + name + "?ui"
 
-	window.location = loc
+  window.location = loc
 }
 
 function apply() {
@@ -621,6 +654,18 @@ function apply() {
 
   window.location = loc
 }
+
+function toggleExp(elem) {
+  var id = elem.id
+  var block = document.getElementById(id+'block')
+  var exp = (block.style.display == "none")
+
+  elem.innerHTML = (exp ? "`+HTML_EXP+`" : "`+HTML_MIN+`")
+
+  block.style.display = (exp?"inline":"none")
+  document.getElementById(id+'dots').style.display = (exp?"none":"inline")
+}
+
 </script>
 
 <div id=right>
@@ -634,11 +679,8 @@ function apply() {
   <div id=urlPath>
   <b>Path:</b> `+urlPath+`
   </div>
-  <div id=myOutput>
-    <pre>%s</pre>
-  </div>
-  <!-- <div id=buttonBar>%s</div> -->
-</div>
+  <div id=myOutput>%s</div> <!--myOutput-->
+</div> <!--right-->
 </html>
 `, RegHTMLify(pw.Info.OriginalRequest, buf))))
 

registry/utils.go

@@ -258,7 +258,84 @@ func RegHTMLify(r *http.Request, buf []byte) []byte {
 	buf = []byte(strings.ReplaceAll(string(buf), "<", "&lt;"))
 	buf = []byte(strings.ReplaceAll(string(buf), ">", "&gt;"))
 
-	return re.ReplaceAll(buf, []byte(repl))
+	buf = re.ReplaceAll(buf, []byte(repl))
+
+	res := new(bytes.Buffer)
+
+	// Now add the toggle (expand) stuff for the JSON nested entities
+
+	// remove trailing \n so we don't have an extra line for the next stuff
+	if len(buf) > 0 && buf[len(buf)-1] == '\n' {
+		buf = buf[:len(buf)-1]
+	}
+
+	count := 0
+	for _, line := range strings.Split(string(buf), "\n") {
+		spaces := "" // leading spaces
+		numSpaces := 0
+		first := rune(0) // first non-space char
+		last := rune(0)  // last non-space char
+		decDepth := false
+
+		for _, ch := range line {
+			if first == 0 { // doing spaces
+				if ch == ' ' {
+					numSpaces++
+					spaces += " "
+					continue
+				}
+			}
+			if ch != ' ' {
+				if first == 0 {
+					first = rune(ch)
+				}
+				last = rune(ch)
+			}
+		}
+		line = line[numSpaces:] // Remove leading spaces
+
+		decDepth = (first == '}' || first == ']')
+		incDepth := (last == '{' || last == '[')
+
+		// btn is the special first column of the output, non-selectable
+		btn := "<span class=spc> </span>" // default: non-selectable space
+
+		if incDepth {
+			// Build the 'expand' toggle char
+			count++
+			exp := fmt.Sprintf("<span class=exp id='s%d' "+
+				"onclick='toggleExp(this)'>"+HTML_EXP+"</span>", count)
+
+			if numSpaces == 0 {
+				// Use the special first column for it
+				btn = exp
+			} else {
+				// Replace the last space with the toggle.
+				// Add a nearly-hidden space so when people copy the text it
+				// won't be missing a space due to the toggle
+				spaces = spaces[:numSpaces-1] + exp +
+					"<span class=hide > </span>"
+			}
+		}
+
+		res.WriteString(btn)    // special first column
+		res.WriteString(spaces) // spaces + 'exp' if needed
+		if decDepth {
+			// End the block before the tailing "}" or "]"
+			res.WriteString("</span>") // block
+		}
+		res.WriteString(line)
+		if incDepth {
+			// write the "..." and then the <span> for the toggle text
+			res.WriteString(fmt.Sprintf("<span style='display:none' "+
+				"id='s%ddots'>...</span>", count))
+			res.WriteString(fmt.Sprintf("<span id='s%dblock'>", count))
+		}
+
+		res.WriteString("\n")
+	}
+
+	return res.Bytes()
 }
 
 func AnyToUInt(val any) (int, error) {