From 8a00301f81afea163509b4071a971e70a9143457 Mon Sep 17 00:00:00 2001
From: Daniil Orain <dnlorn@gmail.com>
Date: Wed, 8 Jun 2022 06:09:56 +1100
Subject: [PATCH] bring back the stats

---
 src/components/MainHeaderDescriptive.vue     |   4 +-
 src/router/index.js                          |  39 +++-
 src/views/network/Network.vue                |  89 +++++++++
 src/views/{stats => network}/NetworkInfo.vue |   0
 src/views/{stats => network}/NetworkTab.vue  |   0
 src/views/{stats => network}/SideBar.vue     |   0
 src/views/stats/Stats.vue                    |  55 +++---
 src/views/stats/StatsSideBar.vue             | 108 +++++++++++
 src/views/stats/StatsTab.vue                 | 154 +++++++++++++++
 src/views/stats/TokensTab.vue                | 189 +++++++++++++++++++
 10 files changed, 606 insertions(+), 32 deletions(-)
 create mode 100644 src/views/network/Network.vue
 rename src/views/{stats => network}/NetworkInfo.vue (100%)
 rename src/views/{stats => network}/NetworkTab.vue (100%)
 rename src/views/{stats => network}/SideBar.vue (100%)
 create mode 100644 src/views/stats/StatsSideBar.vue
 create mode 100644 src/views/stats/StatsTab.vue
 create mode 100644 src/views/stats/TokensTab.vue

diff --git a/src/components/MainHeaderDescriptive.vue b/src/components/MainHeaderDescriptive.vue
index 4e170973..99dd20c2 100644
--- a/src/components/MainHeaderDescriptive.vue
+++ b/src/components/MainHeaderDescriptive.vue
@@ -10,8 +10,8 @@
       <v-btn text small :to="{ name: 'search' }" class="text--secondary" active-class="bg-before-transparent">
         Search
       </v-btn>
-      <v-btn text small :to="{ name: 'stats' }" class="text--secondary" active-class="bg-before-transparent">
-        Networks
+      <v-btn text small :to="{ path: `/stats/${config.networks[0]}/general` }" class="text--secondary" active-class="bg-before-transparent">
+        Stats
       </v-btn>
       <v-btn text small :to="{ name: 'dapps' }" class="text--secondary" active-class="bg-before-transparent">
         Dapps
diff --git a/src/router/index.js b/src/router/index.js
index d7683efd..e5cf4fdd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,8 +6,10 @@ import Home from '@/views/home/Home.vue'
 
 import ExtendedSearch from '@/views/extended_search/ExtendedSearch.vue'
 
+import Network from '@/views/network/Network.vue'
+import NetworkTab from '@/views/network/NetworkTab.vue'
 import Stats from '@/views/stats/Stats.vue'
-import NetworkTab from '@/views/stats/NetworkTab.vue'
+import StatsTab from '@/views/stats/StatsTab.vue'
 import Diff from '@/views/diff/Diff.vue'
 import Docs from '@/views/docs/Docs.vue'
 
@@ -16,6 +18,7 @@ import OperationsTab from '@/views/contract/OperationsTab.vue'
 import CodeTab from '@/views/contract/CodeTab.vue'
 import InteractTab from '@/views/contract/InteractTab.vue'
 import ViewsTab from '@/views/contract/ViewsTab/ViewsTab.vue'
+import TokensTab from '@/views/stats/TokensTab.vue'
 import StorageTab from '@/views/contract/StorageTab.vue'
 import ContractTokensTab from '@/views/contract/TokensTab/TokensTab.vue'
 import TransfersTab from '@/views/contract/TransfersTab/TransfersTab.vue'
@@ -95,7 +98,7 @@ const router = new Router({
       ]
     },
     {
-      path: '/:network',
+      path: '/stats/:network',
       components: {
         default: Stats,
       },
@@ -104,6 +107,38 @@ const router = new Router({
         {
           path: '',
           name: 'stats',
+          redirect: 'stats_general'
+        },
+        {
+          name: 'stats_general',
+          path: 'general',
+          component: StatsTab,
+          props: true
+        },
+        {
+          path: 'fa12',
+          name: 'stats_fa12',
+          component: TokensTab,
+          props: true
+        },
+        {
+          path: 'fa2',
+          name: 'stats_fa20',
+          component: TokensTab,
+          props: true
+        }
+      ]
+    },
+    {
+      path: '/:network',
+      components: {
+        default: Network,
+      },
+      props: { default: true },
+      children: [
+        {
+          path: '',
+          name: 'network',
           component: NetworkTab,
           props: true,
         },
diff --git a/src/views/network/Network.vue b/src/views/network/Network.vue
new file mode 100644
index 00000000..659d7e29
--- /dev/null
+++ b/src/views/network/Network.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="fill-height pa-8">
+    <v-breadcrumbs :items="breadcrumbs" divider="/" class="pl-0" />
+    <v-row class="fill-height" no-gutters>
+      <v-col cols="3">
+        <SideBar :loading="loading" :states="states" :network="currentNetwork" />
+      </v-col>
+      <v-col cols="9">
+        <router-view :network="currentNetwork" :state="currentState"></router-view>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import SideBar from "./SideBar.vue";
+import capitalize from 'lodash.capitalize';
+
+export default {
+  name: "Network",
+  components: {
+    SideBar,
+  },
+  data: () => ({
+    loading: true,
+    states: [],
+    currentNetwork: null,
+  }),
+  computed: {
+    currentState() {
+      return this.currentNetwork ? this.states.find((item) => item.network === this.currentNetwork) : {};
+    },
+    breadcrumbs() {
+      return [{
+        text: 'Home',
+        to: '/',
+      }, {
+        text: capitalize(this.currentNetwork),
+        to: `/${this.currentNetwork}${this.$route.hash !== '#' ? '#' : '##'}`
+      }]
+    }
+  },
+  created() {
+    this.getStats();
+  },
+  methods: {
+    ...mapActions(["showError"]),
+    navigate() {
+      if (this.$route.params.network)
+        this.currentNetwork = this.$route.params.network;
+      else if (this.states.length > 0)
+        this.currentNetwork = this.states[0].network;
+    },
+    getStats() {
+      this.loading = true;
+      this.api
+        .getStats()
+        .then((res) => {
+          if (!res) return;
+          this.states = res.sort(function (a, b) {
+            if (a.network === "mainnet") {
+              return -1;
+            } else if (b.network === "mainnet") {
+              return 1;
+            } else {
+              return b.network.localeCompare(a.network);
+            }
+          });
+          this.navigate();
+        })
+        .catch((err) => {
+          console.log(err);
+          this.showError(err);
+        })
+        .finally(() => (this.loading = false));
+    },
+  },
+  watch: {
+    $route: "navigate",
+  },
+};
+</script>
+
+<style>
+.main-navigation > .v-navigation-drawer__content {
+  overflow: hidden;
+}
+</style>
diff --git a/src/views/stats/NetworkInfo.vue b/src/views/network/NetworkInfo.vue
similarity index 100%
rename from src/views/stats/NetworkInfo.vue
rename to src/views/network/NetworkInfo.vue
diff --git a/src/views/stats/NetworkTab.vue b/src/views/network/NetworkTab.vue
similarity index 100%
rename from src/views/stats/NetworkTab.vue
rename to src/views/network/NetworkTab.vue
diff --git a/src/views/stats/SideBar.vue b/src/views/network/SideBar.vue
similarity index 100%
rename from src/views/stats/SideBar.vue
rename to src/views/network/SideBar.vue
diff --git a/src/views/stats/Stats.vue b/src/views/stats/Stats.vue
index e27a42c9..1091b17e 100644
--- a/src/views/stats/Stats.vue
+++ b/src/views/stats/Stats.vue
@@ -1,46 +1,45 @@
 <template>
-  <div class="fill-height pa-8">
-    <v-breadcrumbs :items="breadcrumbs" divider="/" class="pl-0" />
-    <v-row class="fill-height" no-gutters>
-      <v-col cols="3">
-        <SideBar :loading="loading" :states="states" :network="currentNetwork" />
-      </v-col>
-      <v-col cols="9">
-        <router-view :network="currentNetwork" :state="currentState"></router-view>
-      </v-col>
-    </v-row>
+  <div class="fill-height">
+    <v-navigation-drawer floating app permanent width="336" color="canvas" class="main-navigation">
+      <v-row class="fill-height br-1" no-gutters>
+        <v-col cols="12">
+          <StatsSideBar :loading="loading" :states="states" :network="currentNetwork" />
+        </v-col>
+      </v-row>
+    </v-navigation-drawer>
+
+    <v-toolbar flat class color="toolbar" height="75">
+      <v-tabs center-active background-color="transparent" slider-color="primary" class="ml-4">
+        <v-tab :to="{name: 'stats_general'}" replace>
+          <v-icon left small>mdi-align-vertical-bottom</v-icon>&nbsp;General
+        </v-tab>
+        <v-tab :to="{name: 'stats_fa12'}" replace>
+          <v-icon left small>mdi-bank-outline</v-icon>&nbsp;FA1.2
+        </v-tab>
+        <v-tab :to="{name: 'stats_fa20'}" replace>
+          <v-icon left small>mdi-bank</v-icon>&nbsp;FA2.0
+        </v-tab>
+      </v-tabs>
+    </v-toolbar>
+
+    <router-view :network="currentNetwork"></router-view>
   </div>
 </template>
 
 <script>
 import { mapActions } from "vuex";
-import SideBar from "@/views/stats/SideBar.vue";
-import capitalize from 'lodash.capitalize';
+import StatsSideBar from "./StatsSideBar";
 
 export default {
   name: "Stats",
   components: {
-    SideBar,
+    StatsSideBar,
   },
   data: () => ({
     loading: true,
     states: [],
     currentNetwork: null,
   }),
-  computed: {
-    currentState() {
-      return this.currentNetwork ? this.states.find((item) => item.network === this.currentNetwork) : {};
-    },
-    breadcrumbs() {
-      return [{
-        text: 'Home',
-        to: '/',
-      }, {
-        text: capitalize(this.currentNetwork),
-        to: `/${this.currentNetwork}${this.$route.hash !== '#' ? '#' : '##'}`
-      }]
-    }
-  },
   created() {
     this.getStats();
   },
@@ -86,4 +85,4 @@ export default {
 .main-navigation > .v-navigation-drawer__content {
   overflow: hidden;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/stats/StatsSideBar.vue b/src/views/stats/StatsSideBar.vue
new file mode 100644
index 00000000..59bc5c56
--- /dev/null
+++ b/src/views/stats/StatsSideBar.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="fill-height canvas top-margin-from-main-header">
+    <v-list-item style="height: 74px;">
+      <v-list-item-content two-line>
+        <v-list-item-title class="headline">Statistics</v-list-item-title>
+        <v-list-item-subtitle>
+          <span class="overline">{{ network }}</span>
+        </v-list-item-subtitle>
+      </v-list-item-content>
+    </v-list-item>
+    <v-divider></v-divider>
+
+    <v-skeleton-loader
+      :loading="loading"
+      type="list-item-two-line, list-item-two-line, list-item-two-line, list-item-two-line"
+    >
+      <v-expansion-panels flat tile mandatory multiple active-class="opened-panel">
+        <v-expansion-panel class="ma-0 bb-1">
+          <v-expansion-panel-header color="sidebar" class="pl-4 py-0">
+            <span class="caption font-weight-bold text-uppercase text--secondary">Networks</span>
+          </v-expansion-panel-header>
+          <v-expansion-panel-content color="data">
+            <v-list class="stats-sidebar-list">
+              <v-list-item-group v-model="item" mandatory>
+                <template v-for="(state, idx) in states">
+                  <v-divider :key="'divider' + idx" v-if="idx > 0"></v-divider>
+                  <v-list-item :key="idx" @click="navigate(state)">
+                    <v-list-item-content>
+                      <v-list-item-title class="overline text--primary">{{ state.network }}</v-list-item-title>
+                      <v-list-item-subtitle class="body-2">{{ state.protocol.slice(0, 8) }}</v-list-item-subtitle>
+                    </v-list-item-content>
+                    <v-list-item-action>
+                      <v-list-item-action-text
+                        class="overline text--primary"
+                      >{{ helpers.formatDatetime(state.timestamp) }}</v-list-item-action-text>
+                      <v-list-item-action-text class="body-2">level {{ state.level }}</v-list-item-action-text>
+                    </v-list-item-action>
+                  </v-list-item>
+                </template>
+              </v-list-item-group>
+            </v-list>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-skeleton-loader>
+
+    <BakingBadFooter />
+  </div>
+</template>
+
+<script>
+import BakingBadFooter from "@/components/BakingBadFooter.vue";
+
+export default {
+  name: "StatsSideBar",
+  props: {
+    states: Array,
+    loading: Boolean,
+    network: String,
+  },
+  components: {
+    BakingBadFooter,
+  },
+  created() {
+    this.setItem();
+  },
+  watch: {
+    states() {
+      this.setItem();
+    }
+  },
+  data: () => ({
+    item: 0,
+  }),
+  methods: {
+    navigate(state) {
+      this.$router.push({
+        name: this.$router.name,
+        params: { network: state.network },
+      });
+    },
+    setItem() {
+      this.states.forEach((x, idx) => {
+        if (x.network === this.$route.params.network) this.item = idx;
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+.opened-panel {
+  border-bottom: none !important;
+}
+.opened-panel > .v-expansion-panel-content > .v-expansion-panel-content__wrap {
+  padding: 0;
+}
+.opened-panel > .v-expansion-panel-header {
+  min-height: 48px;
+}
+.stats-sidebar-list {
+  max-height: calc(100vh - 75px - 1 * 48px);
+  overflow-y: auto;
+  border-radius: 0;
+  padding: 0;
+  z-index: 1;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/stats/StatsTab.vue b/src/views/stats/StatsTab.vue
new file mode 100644
index 00000000..4f9eeb3d
--- /dev/null
+++ b/src/views/stats/StatsTab.vue
@@ -0,0 +1,154 @@
+<template>
+  <v-container fluid class="pa-8 canvas fill-canvas">
+    <v-row>
+      <v-col cols="6">
+        <v-skeleton-loader :loading="!series.contract" type="image">
+          <v-card flat outlined>
+            <v-card-text class="data pa-0" v-if="series.contract">
+              <ColumnChart
+                :data="series.contract"
+                :title="`New deployments (total ${details.contracts_count})<br/>
+                <div class='text--secondary caption text-center'>Excluding manager.tz</div>`"
+                name="New deployments"
+              ></ColumnChart>
+            </v-card-text>
+          </v-card>
+        </v-skeleton-loader>
+      </v-col>
+      <v-col cols="6">
+        <v-skeleton-loader :loading="!series.operation" type="image">
+          <v-card flat outlined>
+            <v-card-text class="data pa-0" v-if="series.operation">
+              <ColumnChart
+                :data="series.operation"
+                :title="`Contract calls (total ${details.contract_calls})`"
+                name="Contract calls"
+              ></ColumnChart>
+            </v-card-text>
+          </v-card>
+        </v-skeleton-loader>
+      </v-col>
+      <v-col cols="6">
+        <v-skeleton-loader :loading="!series.paidStorageSizeDiff" type="image">
+          <v-card flat outlined>
+            <v-card-text class="data pa-0" v-if="series.paidStorageSizeDiff">
+              <ColumnChart
+                :data="series.paidStorageSizeDiff"
+                formatter="kilobyte"
+                title="Paid storage size diff, KB"
+                name="Paid storage size diff"
+              ></ColumnChart>
+            </v-card-text>
+          </v-card>
+        </v-skeleton-loader>
+      </v-col>
+      <v-col cols="6">
+        <v-skeleton-loader :loading="!series.consumedGas" type="image">
+          <v-card flat outlined>
+            <v-card-text class="data pa-0" v-if="series.consumedGas">
+              <ColumnChart
+                :data="series.consumedGas"
+                :title="`Consumed gas × 10\u2076`"
+                formatter="gas"
+                name="Consumed gas"
+              ></ColumnChart>
+            </v-card-text>
+          </v-card>
+        </v-skeleton-loader>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import Vue from 'vue';
+import { mapActions } from "vuex";
+import ColumnChart from "@/components/Charts/ColumnChart.vue";
+export default {
+  name: "StatsTab",
+  props: {
+    network: String
+  },
+  components: {
+    ColumnChart,
+  },
+  created() {
+    if (this.network) {
+      this.getDetails(this.network);
+    }
+  },
+  data: () => ({
+    loading: true,
+    details: {},
+    series: {},
+  }),
+  computed: {
+    languages() {
+      if (!this.loading && this.details.languages) {
+        let res = Object.keys(this.details.languages)
+          .map(lang => [`${lang[0].toUpperCase()}${lang.slice(1)}`, this.details.languages[lang]]);
+        res.push({
+          name: 'Others',
+          y: this.details.contracts_count - res.reduce((acc, x) => acc + x[1], 0),
+          dataLabels: {
+            enabled: false
+          }
+        });
+        return res;
+      }
+      return [];
+    }
+  },
+  methods: {
+    ...mapActions(["showError"]),
+    setDetailsDataToDefault() {
+      this.details = {};
+      ['contract', 'operation', 'consumedGas', 'paidStorageSizeDiff']
+        .forEach((key) => this.setRes(key, null));
+    },
+    getDetails(network) {
+      this.loading = true;
+      this.api
+        .getNetworkStats(network)
+        .then(res => { this.details = res; })
+        .catch(err => {
+          console.log(err);
+          this.showError(err);
+        })
+        .finally(() => (this.loading = false));
+      this.requestStatsData(network, "contract", 'contract');
+      this.requestStatsData(network, "operation", 'operation');
+      this.requestStatsData(network, "paid_storage_size_diff", 'paidStorageSizeDiff');
+      this.requestStatsData(network, "consumed_gas", 'consumedGas');
+    },
+    requestStatsData(network, index, key) {
+      this.api
+        .getNetworkStatsSeries(network, index, "month")
+        .then(res => this.setRes(key, res))
+        .catch(err => this.setErr(key, err));
+    },
+    setErr(key, err) {
+      Vue.set(this.series, key, []);
+      console.log(err);
+      this.showError(err);
+    },
+    setRes(key, res) {
+      Vue.set(this.series, key, res);
+    },
+  },
+  watch: {
+    network(newValue) {
+      this.setDetailsDataToDefault();
+      this.getDetails(newValue);
+    }
+  }
+};
+</script>
+
+<style>
+.v-timeline-item__dot {
+  background-color: var(--v-data-base) !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/stats/TokensTab.vue b/src/views/stats/TokensTab.vue
new file mode 100644
index 00000000..aee9aff6
--- /dev/null
+++ b/src/views/stats/TokensTab.vue
@@ -0,0 +1,189 @@
+<template>
+  <v-container fluid class="pa-8 canvas fill-canvas">
+    <v-skeleton-loader :loading="loading" type="table">
+      <v-data-table :items="viewedTokens" :headers="headers" class="ba-1 avg-gas-consumption" hide-default-footer>
+        <template v-slot:item="{item}">
+          <tr>
+            <td>
+              <v-btn
+                class="text--secondary hash"
+                :to="`${item.network}/${item.address}/`"
+                style="text-transform: none;"
+                target="_blank"
+                text>
+                <span v-if="item.alias">
+                  {{
+                    item.alias.length > aliasMaxLength
+                      ? item.alias.slice(0, aliasMaxLength).trim()
+                      : item.alias
+                  }}<i
+                  v-if="item.alias.length > aliasMaxLength"
+                  class="v-icon notranslate mdi mdi-dots-horizontal"
+                  style="font-size: 16px;"
+                />
+                </span>
+                <span v-else v-html="helpers.shortcut(item.address)"></span>
+              </v-btn>
+            </td>
+            <td>
+              <span class="text--secondary">{{ item.last_action | fromNow }}</span>
+            </td>
+            <template v-for="(method, key) in item.methods">
+              <td :key="key">
+                <v-icon
+                  small
+                  class="mb-1 mr-1"
+                  :class="method.call_count > 0 ? 'info--text' : 'text--disabled'"
+                >mdi-fire</v-icon>
+                <span
+                  class="hash"
+                  :class="method.call_count > 0 ? '' : 'text--disabled'"
+                >{{ method.average_consumed_gas }}</span>
+              </td>
+            </template>
+          </tr>
+        </template>
+        <template v-slot:top>
+          <v-toolbar flat color="sidebar">
+            <span class="table-title mx-auto">Average gas consumption</span>
+          </v-toolbar>
+        </template>
+        <template v-slot:footer>
+          <v-toolbar flat>
+            <v-spacer></v-spacer>
+            <span
+              class="caption grey--text mr-4"
+            >{{ page*page_size }} - {{ endSlice }} of {{ total }}</span>
+            <v-btn icon @click="left" :disabled="page == 0">
+              <v-icon>mdi-chevron-left</v-icon>
+            </v-btn>
+            <v-btn icon @click="right" :disabled="endSlice == total">
+              <v-icon>mdi-chevron-right</v-icon>
+            </v-btn>
+          </v-toolbar>
+        </template>
+      </v-data-table>
+    </v-skeleton-loader>
+  </v-container>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+const PAGE_SIZE = 10;
+export default {
+  name: "TokenTab",
+  props: {
+    network: String,
+  },
+  computed: {
+    page_size() {
+      return PAGE_SIZE;
+    },
+    endSlice() {
+      return Math.min(this.tokens.length, (this.page + 1) * PAGE_SIZE);
+    },
+    viewedTokens() {
+      return this.tokens.slice(
+        this.page * PAGE_SIZE,
+        (this.page + 1) * PAGE_SIZE
+      );
+    },
+    selectedVersion() {
+      return this.$route.path.split('/').reverse()[0];
+    },
+  },
+  data: () => ({
+    loading: true,
+    tokens: [],
+    page: 0,
+    total: 0,
+    aliasMaxLength: 12,
+    headers: [
+      {
+        text: "Contract",
+        class: "pl-8",
+        sortable: false,
+      },
+      {
+        text: "Last active",
+        sortable: false,
+      },
+    ],
+  }),
+  created() {
+    this.getTokensInfo(this.network, this.selectedVersion);
+  },
+  methods: {
+    ...mapActions(["showError"]),
+    getTokensInfo(network, version) {
+      this.loading = true;
+      this.api
+        .getTokensByVersion(network, version, this.tokens.length, PAGE_SIZE)
+        .then((res) => {
+          if (!res) return;
+          this.total = res.total;
+          this.tokens.push(...res.tokens);
+          if (this.tokens.length > 0) {
+            this.headers = this.headers.splice(0, 2);
+            let methods = this.tokens[0].methods;
+            Object.keys(methods).forEach((element) => {
+              this.headers.push({
+                text: element,
+                align: "left",
+                sortable: false
+              });
+            });
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          this.showError(err);
+        })
+        .finally(() => (this.loading = false));
+    },
+    left() {
+      if (this.page > 0) this.page--;
+    },
+    right() {
+      this.page++;
+      if (this.tokens.length === this.page * PAGE_SIZE) {
+        this.getTokensInfo(this.network, this.selectedVersion);
+      }
+    }
+  },
+  watch: {
+    network: function (newValue) {
+      this.tokens = [];
+      this.page = 0;
+      this.total = 0;
+      this.getTokensInfo(newValue, this.selectedVersion);
+    },
+    selectedVersion: function (newValue) {
+      this.tokens = [];
+      this.page = 0;
+      this.total = 0;
+      this.getTokensInfo(this.network, newValue);
+    },
+  },
+};
+</script>
+
+<style>
+thead.v-data-table-header > tr > th {
+  font-size: 16px;
+  font-weight: 400;
+}
+.avg-gas-consumption tbody tr:hover {
+  background: var(--v-sidebar-base) !important;
+}
+.avg-gas-consumption {
+  background: var(--v-data-base) !important;
+}
+.table-title {
+  font-family: "Roboto Condensed", sans-serif;
+  font-size: 18px;
+}
+.custom-link:hover {
+  cursor: pointer;
+}
+</style>
\ No newline at end of file