Feature: Big map diff count

baking-bad · Nov 25, 2020 · 2d3593c · 2d3593c
1 parent cfff3b3
commit 2d3593c
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 28 deletions.
diff --git a/src/api/bcd.js b/src/api/bcd.js
@@ -404,6 +404,17 @@ export class BetterCallApi {
       })
   }
 
+  getContractBigMapDiffsCount(network, ptr) {
+    return getCancellable(this.api, `/bigmap/${network}/${ptr}/count`, {})
+      .then((res) => {
+        if (!res) { return res; }
+        if (res.status != 200) {
+          throw new RequestFailedError(res);
+        }
+        return res.data
+      })
+  }
+
   getContractBigMapKeys(network, ptr, q = '', offset = 0) {
     return getCancellable(this.api, `/bigmap/${network}/${ptr}/keys?q=${q}&offset=${offset}`, {})
       .then((res) => {

diff --git a/src/components/MiguelTreeView.vue b/src/components/MiguelTreeView.vue
@@ -16,7 +16,8 @@
           <span
             class="key"
             :class="item.name.startsWith('@') ? 'text--secondary' : ''"
-          >{{ item.name }}:</span>
+            >{{ item.name }}:</span
+          >
 
           <v-btn
             v-if="hasAddress(item.name)"
@@ -40,11 +41,18 @@
               class="px-3 mb-1"
             >
               <v-icon class x-small left>mdi-vector-link</v-icon>
-              <span class>Big Map {{ item.value }}</span>
-            </v-btn>
+              <span class>Big Map {{ item.value }}</span> </v-btn
+            >&nbsp;&nbsp;&nbsp;
+            <span v-if="item.count" class="caption gray--disabled"
+              >{{ helpers.plural(item.count, "key") }}</span
+            >
             <template v-else>
               <span class="accent--text">big_map&nbsp;</span>
-              <span v-if="item.children.length === 0 && diffMode" class="text--disabled">0 diffs</span>
+              <span
+                v-if="item.children.length === 0 && diffMode"
+                class="text--disabled"
+                >0 diffs</span
+              >
               <span v-else :class="item.type">{{ item.value }}</span>
             </template>
           </template>
@@ -53,46 +61,50 @@
         </div>
       </template>
     </v-treeview>
-    <TreeNodeDetails v-model="showTreeNodeDetails" :data="active" :network="network" />
+    <TreeNodeDetails
+      v-model="showTreeNodeDetails"
+      :data="active"
+      :network="network"
+    />
   </div>
 </template>
 
 <script>
 import { getTree } from "@/utils/diff.js";
-import TreeNodeDetails from "@/components/TreeNodeDetails.vue"
+import TreeNodeDetails from "@/components/TreeNodeDetails.vue";
 
 export default {
   name: "MiguelTreeView",
   components: {
-    TreeNodeDetails
+    TreeNodeDetails,
   },
   props: {
     miguel: Object,
     network: String,
     openAll: Boolean,
-    diffMode: Boolean
+    diffMode: Boolean,
   },
   data: () => ({
     showTreeNodeDetails: false,
-    activeNodes: []
+    activeNodes: [],
   }),
   computed: {
     tree() {
       return getTree(this.miguel, true);
     },
     openNodes() {
-      return this.tree.map(x => this.getChangedItems(x), this).flat();
+      return this.tree.map((x) => this.getChangedItems(x), this).flat();
     },
     active() {
       if (this.activeNodes.length > 0) {
         return this.activeNodes[0];
       }
       return null;
-    }
+    },
   },
   methods: {
     getChangedItems(item) {
-      let res = item.children.map(x => this.getChangedItems(x), this).flat();
+      let res = item.children.map((x) => this.getChangedItems(x), this).flat();
       if (item.kind || res.length > 0 || this.openAll) {
         res.push(item);
       }
@@ -107,19 +119,19 @@ export default {
     handleAddress(s) {
       const address = s.match(/(tz|KT)[1-9A-HJ-NP-Za-km-z]{34}/)[0];
       let routeData = this.$router.resolve({
-        path: `/${this.network}/${address}`
+        path: `/${this.network}/${address}`,
       });
-      window.open(routeData.href, "_blank");     
-    }
+      window.open(routeData.href, "_blank");
+    },
   },
   watch: {
     active(newVal) {
       if (newVal !== null) this.showTreeNodeDetails = true;
     },
     showTreeNodeDetails(newVal) {
       if (!newVal) this.activeNodes = [];
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -136,13 +148,13 @@ export default {
   font-family: "Roboto Mono", monospace;
 
   .key {
-    opacity: .8;
+    opacity: 0.8;
   }
   .value {
     color: var(--v-tree-base);
   }
   .object {
-    opacity: .8;
+    opacity: 0.8;
     font-weight: 300;
   }
 

diff --git a/src/utils/diff.js b/src/utils/diff.js
@@ -114,7 +114,8 @@ function parseMap(x) {
         realPrim: x.prim,
         val: x.prim === 'big_map' && x.value !== undefined && x.value !== null ? String(x.value) : undefined,
         id: getId(),
-        kind: parseDiffType(x.diff_type)
+        kind: parseDiffType(x.diff_type),
+        count: x.count,
     }
 
     if (x.children) {

diff --git a/src/views/contract/StorageTab.vue b/src/views/contract/StorageTab.vue
@@ -10,7 +10,7 @@
             :items="storageVersions"
             item-text="version"
             item-value="level"
-            style="max-width: 175px;"
+            style="max-width: 175px"
             rounded
             dense
             background-color="data"
@@ -41,22 +41,36 @@
           </v-tooltip>
           <v-btn
             v-if="rawStorage && raw"
-            @click="() => {
-                  $clipboard(getStorageString());
-                  showClipboardOK();
-                }"
+            @click="
+              () => {
+                $clipboard(getStorageString());
+                showClipboardOK();
+              }
+            "
             class="ml-2"
             small
             text
           >
             <v-icon class="mr-1" small>mdi-content-copy</v-icon>
             <span class="text--secondary">Copy</span>
           </v-btn>
-          <v-btn v-if="raw" @click="getStorage()" class="ml-2 text--secondary" small text>
+          <v-btn
+            v-if="raw"
+            @click="getStorage()"
+            class="ml-2 text--secondary"
+            small
+            text
+          >
             <v-icon class="mr-1" small>mdi-file-tree</v-icon>
             <span>Switch to Tree View</span>
           </v-btn>
-          <v-btn v-else @click="getStorageRaw()" class="ml-2 text--secondary" small text>
+          <v-btn
+            v-else
+            @click="getStorageRaw()"
+            class="ml-2 text--secondary"
+            small
+            text
+          >
             <v-icon class="mr-1" small>mdi-code-parentheses</v-icon>
             <span>Switch to Micheline</span>
           </v-btn>
@@ -71,7 +85,12 @@
             </v-col>
             <v-divider vertical></v-divider>
             <v-col v-if="schema">
-               <TypeDef :typedef="schema.typedef" first="storage" class="pt-3 pb-1 px-6" style="opacity: .8;" />            
+              <TypeDef
+                :typedef="schema.typedef"
+                first="storage"
+                class="pt-3 pb-1 px-6"
+                style="opacity: 0.8"
+              />
             </v-col>
           </v-row>
         </v-card-text>
@@ -147,6 +166,7 @@ export default {
         .getContractStorage(this.network, this.address, this.level)
         .then((res) => {
           if (!res) return;
+          this.findPointers(res);
           this.storage = res;
           this.raw = false;
           return this.api.getContractStorageSchema(this.network, this.address);
@@ -211,6 +231,24 @@ export default {
         })
         .finally(() => (this.downloading = false));
     },
+    findPointers(value) {
+      if (value.prim === "big_map") {
+        this.api
+          .getContractBigMapDiffsCount(this.network, value.value)
+          .then((res) => {
+            value.count = res.count;
+          })
+          .catch((err) => {
+            console.log(err);
+            this.showError(err);
+          });
+      }
+      if (value.children) {
+        for (let i = 0; i < value.children.length; i++) {
+          this.findPointers(value.children[i]);
+        }
+      }
+    },
   },
   watch: {
     address() {