Merge branch 'ui-orgs-performance' of 'https://github.com/jjmerchante…

…/grimoirelab-sortinghat'

Merges #845
Closes #845

releases/unreleased/performance-of-organizations-query.yml

@@ -0,0 +1,8 @@
+---
+title: Performance of organizations query
+category: performance
+author: Jose Javier Merchante <[email protected]>
+issue: null
+notes: >
+  Improve organization query for the table by avoiding individual
+  queries.

ui/src/apollo/queries.js

@@ -115,9 +115,6 @@ const GET_PAGINATED_ORGANIZATIONS = gql`
         name
         enrollments {
           id
-          individual {
-            mk
-          }
         }
         domains {
           domain

ui/src/components/ExpandedOrganization.stories.js

@@ -31,17 +31,17 @@ export const Default = () => ({
                 name: "Committee on Experimental Charms",
                 numchild: 0,
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
-                  { id: 4, individual: { mk: 4 } },
-                  { id: 5, individual: { mk: 5 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
+                  { id: 4 },
+                  { id: 5 },
                 ],
               },
               {
                 name: "Department of Magical Law Enforcement",
                 numchild: 2,
-                enrollments: [{ id: 1, individual: { mk: 1 } }],
+                enrollments: [{ id: 1}],
               },
               {
                 name: "Department of Magical Accidents and Catastrophes",
@@ -51,32 +51,32 @@ export const Default = () => ({
                 name: "Department for the Regulation and Control of Magical Creatures",
                 numchild: 1,
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
                 ],
               },
               {
                 name: "Auror Office",
                 parent: "Department of Magical Law Enforcement",
                 numchild: 0,
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
-                  { id: 4, individual: { mk: 4 } },
-                  { id: 5, individual: { mk: 5 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
+                  { id: 4 },
+                  { id: 5 },
                 ],
               },
               {
                 name: "Improper Use of Magic Office",
                 parent: "Department of Magical Law Enforcement",
                 numchild: 0,
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
-                  { id: 4, individual: { mk: 4 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
+                  { id: 4 },
                 ],
               },
               {
@@ -85,8 +85,8 @@ export const Default = () => ({
                   "Department for the Regulation and Control of Magical Creatures",
                 numchild: 0,
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
+                  { id: 1 },
+                  { id: 2 },
                 ],
               },
             ],
@@ -153,11 +153,11 @@ export const Group = () => ({
               name: "Witches' League",
               numchild: 0,
               enrollments: [
-                { id: 1, individual: { mk: 1 } },
-                { id: 2, individual: { mk: 2 } },
-                { id: 3, individual: { mk: 3 } },
-                { id: 4, individual: { mk: 4 } },
-                { id: 5, individual: { mk: 5 } },
+                { id: 1 },
+                { id: 2 },
+                { id: 3 },
+                { id: 4 },
+                { id: 5 },
               ],
             },
           ],

ui/src/components/ExpandedOrganization.vue

@@ -162,7 +162,7 @@ export default {
         return 0;
       }
       const uniqueIndividuals = new Set(
-        enrollments.map((item) => item.individual.mk)
+        enrollments.map((item) => item.id)
       );
 
       return uniqueIndividuals.size;

ui/src/components/OrganizationsTable.stories.js

@@ -98,30 +98,30 @@ export const Organizations = () => ({
                 id: 1,
                 name: "Griffyndor",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
-                  { id: 4, individual: { mk: 4 } },
-                  { id: 5, individual: { mk: 5 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
+                  { id: 4 },
+                  { id: 5 },
                 ],
                 domains: [{ domain: "griffyndor.hogwarts.edu" }],
               },
               {
                 id: 2,
                 name: "Slytherin",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
+                  { id: 1 },
+                  { id: 2 },
                 ],
                 domains: [{ domain: "slytherin.hogwarts.edu" }],
               },
               {
                 id: 3,
                 name: "Ravenclaw",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
                 ],
                 domains: [{ domain: "ravenclaw.hogwarts.edu" }],
               },
@@ -143,10 +143,10 @@ export const Organizations = () => ({
                 id: 4,
                 name: "Hufflepuff",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
-                  { id: 4, individual: { mk: 4 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
+                  { id: 4 },
                 ],
                 domains: [{ domain: "hufflepuff.hogwarts.edu" }],
               },
@@ -243,28 +243,28 @@ export const Groups = () => ({
                 id: 1,
                 name: "Dark Force Defence League",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
-                  { id: 4, individual: { mk: 4 } },
-                  { id: 5, individual: { mk: 5 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
+                  { id: 4 },
+                  { id: 5 },
                 ],
               },
               {
                 id: 2,
                 name: "Extraordinary Society of Potioneers",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
+                  { id: 1 },
+                  { id: 2 },
                 ],
               },
               {
                 id: 3,
                 name: "Society for the Tolerance of Vampires",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
                 ],
               },
             ],
@@ -285,27 +285,27 @@ export const Groups = () => ({
                 id: 4,
                 name: "Frog Choir",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
-                  { id: 4, individual: { mk: 4 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
+                  { id: 4 },
                 ],
               },
               {
                 id: 5,
                 name: "Celestial Ball decorating committee",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
-                  { id: 3, individual: { mk: 3 } },
+                  { id: 1 },
+                  { id: 2 },
+                  { id: 3 },
                 ],
               },
               {
                 id: 6,
                 name: "Duelling Club",
                 enrollments: [
-                  { id: 1, individual: { mk: 1 } },
-                  { id: 2, individual: { mk: 2 } },
+                  { id: 1 },
+                  { id: 2 },
                 ],
               },
             ],

ui/src/components/OrganizationsTable.vue

@@ -459,7 +459,7 @@ export default {
         return 0;
       }
       const uniqueIndividuals = new Set(
-        enrollments.map((item) => item.individual.mk)
+        enrollments.map((item) => item.id)
       );
 
       return uniqueIndividuals.size;