Merge pull request #184 from julianpoy/performance-and-bugs

Improve Label FetchAll Performance

Backend/app.js

@@ -22,7 +22,7 @@ var devMode = appConfig.environment === 'dev';
 
 Raven.config(appConfig.sentry.dsn, {
   environment: appConfig.environment,
-  release: '1.5.5'
+  release: '1.5.6'
 }).install();
 
 // Routes

Backend/config/sequelize-config.js

@@ -3,6 +3,7 @@ module.exports = {
     "username": process.env.RS_DEV_DB_USERNAME || "chefbook",
     "password": process.env.RS_DEV_DB_PASSWORD || "admin",
     "database": process.env.RS_DEV_DB_DATABASE || "chefbook",
+    "port"    : process.env.RS_DEV_DB_PORT     || "5432",
     "host"    : process.env.RS_DEV_DB_HOST     || "127.0.0.1",
     "dialect": "postgres",
     "operatorsAliases": false
@@ -17,6 +18,7 @@ module.exports = {
     "username": process.env.RS_STG_DB_USERNAME || "chefbook",
     "password": process.env.RS_STG_DB_PASSWORD || null,
     "database": process.env.RS_STG_DB_DATABASE || "chefbook",
+    "port"    : process.env.RS_STG_DB_PORT     || "5432",
     "host"    : process.env.RS_STG_DB_HOST     || "127.0.0.1",
     "dialect": "postgres",
     "operatorsAliases": false
@@ -25,6 +27,7 @@ module.exports = {
     "username": process.env.RS_PROD_DB_USERNAME || "chefbook",
     "password": process.env.RS_PROD_DB_PASSWORD || null,
     "database": process.env.RS_PROD_DB_DATABASE || "chefbook",
+    "port"    : process.env.RS_PROD_DB_PORT     || "5432",
     "host"    : process.env.RS_PROD_DB_HOST     || "127.0.0.1",
     "dialect": "postgres",
     "operatorsAliases": false

Backend/models/label.js

@@ -27,6 +27,11 @@ module.exports = (sequelize, DataTypes) => {
       as: 'recipes',
       through: models.Recipe_Label
     });
+
+    Label.hasMany(models.Recipe_Label, {
+      foreignKey: 'labelId',
+      as: 'recipe_labels'
+    })
   };
   return Label;
 };

Backend/routes/index.js

@@ -492,7 +492,7 @@ router.post(
               let ingredients = (tableMap.t_recipeingredient || [])
                 .filter(el => el.recipeid == lcbRecipe.recipeid)
                 .sort((a, b) => a.ingredientindex > b.ingredientindex)
-                .map(lcbIngredient => `${lcbIngredient.quantitytext} ${lcbIngredient.unittext} ${lcbIngredient.ingredienttext}`)
+                .map(lcbIngredient => `${lcbIngredient.quantitytext || ''} ${lcbIngredient.unittext || ''} ${lcbIngredient.ingredienttext || ''}`)
                 .join("\r\n")
 
               let instructions = (tableMap.t_recipeprocedure || [])

Backend/routes/labels.js

@@ -59,15 +59,18 @@ router.get(
       userId: res.locals.session.userId
     },
     include: [{
-      model: Recipe,
-      as: 'recipes',
-      attributes: ['id', 'title']
+      model: Recipe_Label,
+      as: 'recipe_labels',
+      attributes: [],
     }],
+    attributes: ['id', 'title', 'createdAt', 'updatedAt', [SQ.fn('COUNT', SQ.col('recipe_labels.id')), 'recipeCount']],
+    group: ['Label.id'],
     order: [
       ['title', 'ASC']
     ]
   })
   .then(function(labels) {
+    labels = labels.map(label => { label = label.toJSON(); label.recipes = []; return label; })
     res.status(200).json(labels);
   })
   .catch(next);

Backend/routes/labels.spec.js

@@ -221,9 +221,7 @@ describe('labels', () => {
       })
 
       it('responds with associated recipes', () => {
-        expect(responseBody[0].recipes.length).to.equal(1)
-        expect(responseBody[0].recipes[0].id).to.equal(recipe1.id)
-        expect(responseBody[0].recipes[0].id).to.equal(recipe1.id)
+        expect(responseBody[0].recipeCount).to.equal(1)
       })
     })
 

Frontend/src/index.html

@@ -88,7 +88,7 @@
   </script>
 
   <script>
-    window.version = '1.5.5';
+    window.version = '1.5.6';
   </script>
 
   <link href="build/main.css" rel="stylesheet" async>

Frontend/src/pages/home-popover/home-popover.html

@@ -56,7 +56,7 @@
       <ion-option
         *ngFor="let label of labels"
         [value]="label.title">
-        {{ label.title }} ({{ label.recipes.length }})
+        {{ label.title }} ({{ label.recipeCount }})
       </ion-option>
     </ion-select>
   </ion-item>

Frontend/src/pages/info-components/release-notes/release-notes.html

@@ -20,6 +20,9 @@
 
   <br />
 
+  <b>v1.5.6</b><br />
+  - Performance improvements for label filter dialogue and for recipe details page<br />
+
   <b>v1.5.5</b><br />
   - Fixed a bug where importing from LCB would create duplicate labels<br />
 

Frontend/src/pages/recipe-components/recipe/recipe.ts

@@ -52,7 +52,7 @@ export class RecipePage {
 
     this.recipe = <Recipe>{};
 
-    Promise.all([this.loadRecipe(), this.loadLabels()])
+    this.loadAll()
     .then(() => {
       loading.dismiss();
     }, () => {
@@ -61,7 +61,7 @@ export class RecipePage {
   }
 
   refresh(loader) {
-    Promise.all([this.loadRecipe(), this.loadLabels()])
+    this.loadAll()
     .then(() => {
       loader.complete();
     }, () => {
@@ -71,6 +71,10 @@ export class RecipePage {
     this.loadLabels();
   }
 
+  loadAll() {
+    return Promise.all([this.loadRecipe(), this.loadLabels()])
+  }
+
   loadRecipe() {
     return new Promise((resolve, reject) => {
       this.recipeService.fetchById(this.recipeId).subscribe(response => {
@@ -82,6 +86,8 @@ export class RecipePage {
 
         this.applyScale();
 
+        this.selectedLabels = this.recipe.labels.map(label => label.title)
+
         resolve();
       }, err => {
         switch(err.status) {
@@ -122,21 +128,16 @@ export class RecipePage {
       this.labelService.fetch().subscribe(response => {
         this.labelObjectsByTitle = {};
         this.existingLabels = [];
-        this.selectedLabels = [];
 
         for (var i = 0; i < response.length; i++) {
           var label = response[i];
           this.existingLabels.push(label.title);
           this.labelObjectsByTitle[label.title] = label;
-
-          if (label.recipes.findIndex(el => { return el.id === this.recipeId }) > -1) {
-            this.selectedLabels.push(label.title);
-          }
         }
 
         this.existingLabels.sort((a, b) => {
-          if (this.labelObjectsByTitle[a].recipes.length === this.labelObjectsByTitle[b].recipes.length) return 0;
-          return this.labelObjectsByTitle[a].recipes.length > this.labelObjectsByTitle[b].recipes.length ? -1 : 1;
+          if (this.labelObjectsByTitle[a].recipeCount === this.labelObjectsByTitle[b].recipeCount) return 0;
+          return this.labelObjectsByTitle[a].recipeCount > this.labelObjectsByTitle[b].recipeCount ? -1 : 1;
         });
 
         resolve();
@@ -331,13 +332,7 @@ export class RecipePage {
     }).subscribe(response => {
       loading.dismiss();
 
-      // if (!this.recipe.labels) this.recipe.labels = [];
-      // if (this.recipe.labels.findIndex(el => { return el.id === response.id }) === -1) this.recipe.labels.push(response);
-      // if (this.selectedLabels.indexOf(response.title) === -1) this.selectedLabels.push(response.title);
-
-      // this.labelObjectsByTitle[response.title] = response;
-
-      this.loadLabels().then(() => {
+      this.loadAll().then(() => {
         this.toggleAutocomplete(false);
         this.pendingLabel = '';
       });
@@ -403,15 +398,12 @@ export class RecipePage {
     this.labelService.remove(label).subscribe(() => {
       loading.dismiss();
 
-      if(label.recipes.length === 1) {
+      if (label.recipeCount === 1) {
         var i = this.existingLabels.indexOf(label.title);
         this.existingLabels.splice(i, 1);
         delete this.labelObjectsByTitle[label.title];
       } else {
-        var recipeIdx = label.recipes.findIndex(el => {
-          return el.id === this.recipe.id;
-        });
-        label.recipes.splice(recipeIdx, 1);
+        label.recipeCount -= 1;
       }
 
       var lblIdx = this.recipe.labels.findIndex(el => {

Frontend/src/providers/label-service/label-service.ts

@@ -6,6 +6,7 @@ import { catchError, retry } from 'rxjs/operators';
 
 export interface Label {
   id: string;
+  title: string;
 }
 
 @Injectable()