UX improvements described in #106

- bold text for selected address in tx-io-details on address page
- hide large # of outputs by default on address page, only showing default 10 + all outputs for the selected address, with link to show hidden outputs

app/config.js

@@ -111,7 +111,10 @@ module.exports = {
 		blockTxPageSize:20,
 		addressTxPageSize:20,
 		txMaxInput:15,
-		browseBlocksPageSize:20
+		browseBlocksPageSize:20,
+		addressPage:{
+			txOutputMaxDefaultDisplay:10
+		}
 	},
 
 	credentials: credentials,

views/address.pug

@@ -335,6 +335,7 @@ block content
 											if (true)
 												- var txInputs = txInputsByTransaction[tx.txid];
 												- var blockHeight = blockHeightsByTxid[tx.txid];
+												- var txIOHighlightAddress = address;
 
 												include includes/transaction-io-details.pug
 

views/includes/transaction-io-details.pug

@@ -3,6 +3,16 @@
 
 - var totalIOValues = utils.getTxTotalInputOutputValues(tx, txInputs, blockHeight);
 
+script.
+	function showAllTxOutputs(link, txid) {
+		var hiddenRows = document.querySelectorAll("[data-txid='" + txid + "']");
+		hiddenRows.forEach(function(hiddenRow) {
+			hiddenRow.classList.remove("d-none");
+		});
+
+		link.classList.add("d-none");
+	}
+
 div(class="row monospace")
 	div(class="col-lg-6")
 		if (txInputs)
@@ -32,7 +42,7 @@ div(class="row monospace")
 									else
 										if (vout && vout.scriptPubKey && vout.scriptPubKey.addresses)
 											div(class="word-wrap")
-												a(href=("/address/" + vout.scriptPubKey.addresses[0])) #{vout.scriptPubKey.addresses[0]}
+												a(href=("/address/" + vout.scriptPubKey.addresses[0]), class=(txIOHighlightAddress == vout.scriptPubKey.addresses[0] ? "font-weight-bold" : null)) #{vout.scriptPubKey.addresses[0]}
 												if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
 													- var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]];
 													if (specialAddressInfo.type == "minerPayout")
@@ -93,7 +103,23 @@ div(class="row monospace")
 			
 
 	div(class="col-lg-6")
+		- var maxRegularRowCount = (txIOHighlightAddress != null ? config.site.addressPage.txOutputMaxDefaultDisplay : 10000000);
+		- var regularRowCount = 0;
+		- var hiddenRowCount = 0;
 		each vout, voutIndex in tx.vout
+			- var highlightRow = false;
+			if (txIOHighlightAddress != null && vout.scriptPubKey && vout.scriptPubKey.addresses && vout.scriptPubKey.addresses[0] == txIOHighlightAddress)
+				- highlightRow = true;
+
+			if (!highlightRow)
+				- regularRowCount++;
+
+			- var hiddenRow = false;
+			if (!highlightRow && regularRowCount > maxRegularRowCount)
+				- hiddenRow = true;
+				- hiddenRowCount++;
+
+			div(data-txid=tx.txid, class=("pr-3 " + (hiddenRow ? "d-none" : "")))
 				div(class="row")
 					div(class="tx-io-label")
 						a(data-toggle="tooltip", title=("Output #" + (voutIndex + 1).toLocaleString()), style="white-space: nowrap;")
@@ -102,7 +128,7 @@ div(class="row monospace")
 							span #{(voutIndex + 1).toLocaleString()}
 
 					div(class="tx-io-content")
-					div(class="row pr-3")
+						div(class=("row pr-3"))
 							div(class="tx-io-desc")
 								if (vout.scriptPubKey)
 									if (vout.scriptPubKey.addresses)
@@ -117,7 +143,7 @@ div(class="row monospace")
 												span(class="border border-secondary rounded bg-light px-2 py-1 mr-2") V0_P2WPKH
 
 										a(id=("output-" + voutIndex), href=("/address/" + vout.scriptPubKey.addresses[0]))
-										span(class="monospace word-wrap") #{vout.scriptPubKey.addresses[0]}
+											span(class=("monospace word-wrap " + (highlightRow ? "font-weight-bold" : ""))) #{vout.scriptPubKey.addresses[0]}
 
 										if (global.specialAddresses[vout.scriptPubKey.addresses[0]])
 											- var specialAddressInfo = global.specialAddresses[vout.scriptPubKey.addresses[0]];
@@ -164,6 +190,9 @@ div(class="row monospace")
 
 				hr
 
+		if (hiddenRowCount > 0)
+			a(href="javascript:void(0)", onclick=("showAllTxOutputs(this, '" + tx.txid + "');")) Show all #{tx.vout.length.toLocaleString()} outputs
+
 		div(class="row mb-5 pr-3")
 			div(class="col")
 				div(class="font-weight-bold text-left text-md-right")