Add sample/user/cell counters to deployment about page (#383)

* Add `info/stats` endpoint for counters

* Add basic entry counts table on About page

* Iterate on statistics table in about page

pydatalab/pydatalab/routes/v0_1/info.py

@@ -10,6 +10,7 @@
 
 from pydatalab import __version__
 from pydatalab.models import Person
+from pydatalab.mongo import flask_mongo
 
 from ._version import __api_version__
 
@@ -89,6 +90,20 @@ def get_info():
     )
 
 
+def get_stats():
+    """Returns a dictionary of counts of each entry type in the deployment"""
+
+    user_count = flask_mongo.db.users.count_documents({})
+    sample_count = flask_mongo.db.items.count_documents({"type": "samples"})
+    cell_count = flask_mongo.db.items.count_documents({"type": "cells"})
+
+    return (
+        jsonify({"counts": {"users": user_count, "samples": sample_count, "cells": cell_count}}),
+        200,
+    )
+
+
 ENDPOINTS: Dict[str, Callable] = {
     "/info/": get_info,
+    "/info/stats": get_stats,
 }

webapp/src/components/StatisticsTable.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-if="counts" class="mx-auto">
+    <table>
+      <tr>
+        <td :style="{ color: itemTypes['users'].navbarColor }">{{ counts["users"] }}</td>
+        <td :style="{ color: itemTypes['samples'].navbarColor }">{{ counts["samples"] }}</td>
+        <td :style="{ color: itemTypes['cells'].navbarColor }">{{ counts["cells"] }}</td>
+      </tr>
+      <tr>
+        <th>Active Users</th>
+        <th>Samples</th>
+        <th>Cells</th>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+import { getStats } from "@/server_fetch_utils.js";
+import { itemTypes } from "@/resources.js";
+
+export default {
+  data() {
+    return {
+      counts: null,
+      itemTypes: itemTypes,
+    };
+  },
+  async mounted() {
+    console.log(this.counts);
+    this.counts = await getStats();
+    console.log(this.counts);
+  },
+};
+</script>
+
+<style scoped>
+table {
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+td,
+th {
+  width: 150px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  font-weight: bold;
+}
+
+th {
+  font-weight: normal;
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+
+td {
+  border-top: 1px solid #ddd;
+  font-size: 2em;
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+}
+</style>

webapp/src/resources.js

@@ -78,6 +78,14 @@ export const itemTypes = {
     labelColor: "#845dbf",
     display: "collection",
   },
+  users: {
+    navbarColor: "mediumseagreen",
+    navbarName: "User",
+    lightColor: "mediumseagreen",
+    labelColor: "mediumseagreen",
+    isCreateable: false,
+    display: "user",
+  },
 };
 
 export const cellFormats = {

webapp/src/server_fetch_utils.js

@@ -154,6 +154,17 @@ export function createNewCollection(collection_id, title, startingData = {}, cop
   });
 }
 
+export async function getStats() {
+  return fetch_get(`${API_URL}/info/stats`)
+    .then(function (response_json) {
+      return response_json.counts;
+    })
+    .catch((error) => {
+      console.error("Error when fetching stats");
+      throw error;
+    });
+}
+
 export function getSampleList() {
   return fetch_get(`${API_URL}/samples/`)
     .then(function (response_json) {

webapp/src/views/About.vue

@@ -3,11 +3,12 @@
   <div class="container">
     <div class="row">
       <div class="col-sm-8 mx-auto">
-        <h2>About datalab</h2>
-        <p>Datalab is a place to store experimental data and the connections between them.</p>
+        <h4 class="p-3 mx-auto" style="width: 90%">
+          datalab is a place to store experimental data and the connections between them.
+        </h4>
 
         <p>
-          Datalab is open source (MIT license) and development occurs on GitHub at
+          datalab is open source (MIT license) and development occurs on GitHub at
           <a href="https://github.com/the-grey-group/datalab"
             ><font-awesome-icon :icon="['fab', 'github']" />&nbsp;the-grey-group/datalab</a
           >
@@ -17,7 +18,12 @@
           >.
         </p>
 
-        Datalab was primarily developed by:
+        <h5>Deployment stats:</h5>
+        <div class="mx-auto" style="width: 80%">
+          <StatisticsTable />
+        </div>
+
+        datalab was primarily developed by:
         <ul>
           <li>
             <a href="https://github.com/jdbocarsly"
@@ -39,7 +45,7 @@
         , as an external stakeholder project.
 
         <div align="center" style="padding-top: 20px">
-          <img src="https://avatars.githubusercontent.com/u/75324577" width="100" />
+          <img src="https://avatars.githubusercontent.com/u/75324577" width="100" target="_blank" />
         </div>
 
         <!-- <tiny-mce-inline /> -->
@@ -50,9 +56,10 @@
 
 <script>
 import Navbar from "@/components/Navbar";
+import StatisticsTable from "@/components/StatisticsTable";
 
 export default {
-  components: { Navbar },
+  components: { Navbar, StatisticsTable },
 };
 </script>