From 88e39d0c1b95c71350ddcec89225c64053caf445 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Wed, 19 Feb 2014 03:05:06 -0300
Subject: [PATCH] improved performance of list of transactions

---
 app/views/layouts/default.jade   |   2 +-
 public/src/css/common.css        |   8 +++
 public/src/js/filters.js         |  10 ++-
 public/views/transaction/tx.html | 104 ++++++++++++++++++-------------
 4 files changed, 79 insertions(+), 45 deletions(-)

diff --git a/app/views/layouts/default.jade b/app/views/layouts/default.jade
index 4bf285fa..45ba09c2 100644
--- a/app/views/layouts/default.jade
+++ b/app/views/layouts/default.jade
@@ -1,5 +1,5 @@
 doctype
-html(lang='en', data-ng-app='insight')
+html(lang='en', data-ng-app='insight' data-ng-csp)
   include ../includes/head
   body
     #wrap
diff --git a/public/src/css/common.css b/public/src/css/common.css
index 9d3496a3..12358f4d 100644
--- a/public/src/css/common.css
+++ b/public/src/css/common.css
@@ -1,5 +1,7 @@
 /* Sticky footer styles
 -------------------------------------------------- */
+@charset "UTF-8";
+
 html,
 body {
   color: #373D42;
@@ -13,6 +15,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: 'Ubuntu', sans-serif;
 }
 
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
+.ng-cloak, .x-ng-cloak,
+.ng-hide {
+  display: none !important;
+}
+
 /* Styling for the ngProgress itself */
 #ngProgress {
   background-color: #373D42 !important;
diff --git a/public/src/js/filters.js b/public/src/js/filters.js
index a726efc4..a1cad320 100644
--- a/public/src/js/filters.js
+++ b/public/src/js/filters.js
@@ -1 +1,9 @@
-'use strict';
\ No newline at end of file
+'use strict';
+
+angular.module('insight')
+  .filter('startFrom', function() {
+    return function(input, start) {
+      start = +start; //parse to int
+      return input.slice(start);
+    }
+});
diff --git a/public/views/transaction/tx.html b/public/views/transaction/tx.html
index 8fd3b588..0b7528fc 100644
--- a/public/views/transaction/tx.html
+++ b/public/views/transaction/tx.html
@@ -1,4 +1,4 @@
-<div class="line-bot row">
+<div class="line-bot row ng-clock" data-ng-hide="!tx" data-ng-cloak>
   <div class="col-xs-12 col-md-6">
     <button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
     <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
@@ -18,31 +18,41 @@
 </div>
 <div class="row line-mid">
   <div class="col-md-5">
-    <div class="row" data-ng-show="tx.isCoinBase">
+    <div class="row" data-ng-if="tx.isCoinBase">
       <div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
         <div class="ellipsis">
           <span>No Inputs (Newly Generated Coins)</span>
         </div>
       </div>
     </div>
-    <div class="row" data-ng-show="!tx.isCoinBase">
-      <div data-ng-repeat="vin in tx.vinSimple" data-ng-class="{ 'hidden': itemsExpanded}">
-        <div class="col-md-12 transaction-vin-vout" data-ng-class="{ 'hidden': $index > 5 && !showMoreIn }">
-          <div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
-          <div class="ellipsis">
-            <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
-            <span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
-            <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr && vin.addr != $root.currentAddr">{{vin.addr}}</a>
-          </div>
-          <div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
-          <div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
-          <div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
+    <div class="row" data-ng-if="!tx.isCoinBase">
+
+      <!-- Simple view -->
+      <div data-ng-if="!itemsExpanded" data-ng-init="currentInNoExpanded=0; sizeInNoExpanded=5">
+        <div data-ng-repeat="vin in tx.vinSimple| startFrom:currentInNoExpanded*sizeInNoExpanded | limitTo:sizeInNoExpanded">
+          <div class="col-md-12 transaction-vin-vout">
+            <div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
+            <div class="ellipsis">
+              <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
+              <span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
+              <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr && vin.addr != $root.currentAddr">{{vin.addr}}</a>
+            </div>
+            <div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
+            <div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
+            <div data-ng-show="vin.doubleSpentTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spent attempt detected. From tx:
               <a href="/tx/{{vin.doubleSpentTxID}}">{{vin.doubleSpentTxID}},{{vin.doubleSpentIndex}}</a>
+            </div>
           </div>
         </div>
+        <div class="showmore_collapse text-center" data-ng-show="tx.vinSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
+          <a href="#" ng-hide="sizeInNoExpanded != tx.vinSimple.length" ng-click="currentInNoExpanded=0; sizeInNoExpanded=5">...less</a>
+          <a href="#" ng-hide="currentInNoExpanded >= tx.vinSimple.length/sizeInNoExpanded - 1" ng-click="currentInNoExpanded=0; sizeInNoExpanded=tx.vinSimple.length">more...</a>
+        </div>
       </div>
-      <div data-ng-repeat="vin in tx.vin" data-ng-class="{ 'hidden': !itemsExpanded }">
-        <div data-ng-class="{ 'hidden': $index > 5 && !showMoreIn }">
+
+      <!-- Full view -->
+      <div data-ng-if="itemsExpanded" data-ng-init="currentInExpanded=0; sizeInExpanded=5">
+        <div data-ng-repeat="vin in tx.vin| startFrom:currentInExpanded*sizeInExpanded | limitTo:sizeInExpanded">
           <div class="col-md-12 transaction-vin-vout">
             <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
             <div class="ellipsis">
@@ -68,10 +78,10 @@
             </div>
           </div>
         </div>
-      </div>
-      <div class="showmore_collapse text-center" data-ng-show="tx.vin.length > 6">
-        <a href="#" data-ng-show="!showMoreIn" data-ng-click="showMoreIn = !showMoreIn">more...</a>
-        <a href="#" data-ng-show="showMoreIn" data-ng-click="showMoreIn = !showMoreIn">...less</a>
+        <div class="showmore_collapse text-center" data-ng-show="tx.vin.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
+          <a href="#" ng-hide="sizeInExpanded != tx.vin.length" ng-click="currentInExpanded=0; sizeInExpanded=5">...less</a>
+          <a href="#" ng-hide="currentInExpanded >= tx.vin.length/sizeInExpanded - 1" ng-click="currentInExpanded=0; sizeInExpanded=tx.vin.length">more...</a>
+        </div>
       </div>
     </div>
   </div>
@@ -83,28 +93,36 @@
   </div>
   <div class="col-md-6">
     <div class="row">
-      <div data-ng-repeat="vout in tx.voutSimple" data-ng-class="{ 'hidden': itemsExpanded}">
-        <div class="col-md-12 transaction-vin-vout" data-ng-class="{ 'hidden': $index > 5 && !showMoreOut }">
-          <div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
 
-          <small>
-            {{$root.currency.getConvertion(vout.value)}}
-            <span class="text-danger" data-ng-show="vout.isSpent" tooltip="Output is spent" tooltip-placement="left">(S)</span>
-            <span class="text-success" data-ng-show="!vout.isSpent"  tooltip="Output is unspent" tooltip-placement="left">(U)</span>
-          </small>
+      <!-- Simple view -->
+      <div data-ng-if="!itemsExpanded" data-ng-init="currentOutNoExpanded=0; sizeOutNoExpanded=5">
+        <div data-ng-repeat="vout in tx.voutSimple| startFrom:currentOutNoExpanded*sizeOutNoExpanded | limitTo:sizeOutNoExpanded">
+          <div class="col-md-12 transaction-vin-vout">
+            <div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">
+
+              <small>
+                {{$root.currency.getConvertion(vout.value)}}
+                <span class="text-danger" data-ng-show="vout.isSpent" tooltip="Output is spent" tooltip-placement="left">(S)</span>
+                <span class="text-success" data-ng-show="!vout.isSpent"  tooltip="Output is unspent" tooltip-placement="left">(U)</span>
+              </small>
+            </div>
+
+            <div class="ellipsis">
+              <span data-ng-show="vout.notAddr">{{vout.addr}}</span>
+              <span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
+              <a href="/address/{{address}}"  data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
+            </div>
           </div>
-
-          <div class="ellipsis">
-            <span data-ng-show="vout.notAddr">{{vout.addr}}</span>
-            <span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
-            <a href="/address/{{address}}"  data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
-          </div>
-
-
+        </div>
+        <div class="showmore_collapse text-center" data-ng-show="tx.voutSimple.length > 5" data-ng-class="{ 'hidden': itemsExpanded}">
+          <a href="#" ng-hide="sizeOutNoExpanded != tx.voutSimple.length" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=5">...less</a>
+          <a href="#" ng-hide="currentOutNoExpanded >= tx.voutSimple.length/sizeOutNoExpanded - 1" ng-click="currentOutNoExpanded=0; sizeOutNoExpanded=tx.voutSimple.length">more...</a>
         </div>
       </div>
-      <div data-ng-repeat="vout in tx.vout" data-ng-class="{ 'hidden': !itemsExpanded}">
-        <div data-ng-class="{ 'hidden': $index > 5 && !showMoreOut }">
+
+      <!-- Full view -->
+      <div data-ng-if="itemsExpanded" data-ng-init="currentOutExpanded=0; sizeOutExpanded=5">
+        <div data-ng-repeat="vout in tx.vout| startFrom:currentOutExpanded*sizeOutExpanded | limitTo:sizeOutExpanded">
           <div class="col-md-12 transaction-vin-vout">
             <div class="text-muted pull-right btc-value">
               <small>{{$root.currency.getConvertion(vout.value)}}
@@ -133,10 +151,10 @@
             </div>
           </div>
         </div>
-      </div>
-      <div class="showmore_collapse text-center" data-ng-show="tx.vout.length > 6">
-        <a href="#" data-ng-show="!showMoreOut" data-ng-click="showMoreOut = !showMoreOut">more...</a>
-        <a href="#" data-ng-show="showMoreOut" data-ng-click="showMoreOut = !showMoreOut">...less</a>
+        <div class="showmore_collapse text-center" data-ng-show="tx.vout.length > 5" data-ng-class="{ 'hidden': !itemsExpanded}">
+          <a href="#" ng-hide="sizeOutExpanded != tx.vout.length" ng-click="currentOutExpanded=0; sizeOutExpanded=5">...less</a>
+          <a href="#" ng-hide="currentOutExpanded >= tx.vout.length/sizeOutExpanded - 1" ng-click="currentOutExpanded=0; sizeOutExpanded=tx.vout.length">more...</a>
+        </div>
       </div>
     </div>
   </div>
@@ -150,7 +168,7 @@
     </small>
   </div>
 </div>
-<div class="line-top row">
+<div class="line-top row ng-cloak" data-ng-hide="!tx" data-ng-cloak>
   <div class="col-xs-12 col-sm-4 col-md-4">
     <span data-ng-show="!tx.isCoinBase &&  !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
   </div>