diff --git a/app/src/components/nanomine/ImageUpload.vue b/app/src/components/nanomine/ImageUpload.vue
index 76ecfc46..c5af2b9f 100644
--- a/app/src/components/nanomine/ImageUpload.vue
+++ b/app/src/components/nanomine/ImageUpload.vue
@@ -13,41 +13,60 @@
 -->
 
 <template>
-  <div class="md-layout-item md-size-100 md-layout md-alignment-top-left section_imageUpload">
-
+  <div
+    class="md-layout-item md-size-100 md-layout md-alignment-top-left section_imageUpload"
+  >
     <!-- file upload button -->
     <div class="md-layout-item fileButtonWrapper">
-      <md-button class="md-primary fileButton" @click='$refs.myUpload.click()'>Browse files</md-button>
-      <input type="file" style="display: none" :accept="acceptFileTypes" ref="myUpload" @change="uploadFiles">
+      <md-button class="md-primary fileButton" @click="$refs.myUpload.click()"
+        >Browse files</md-button
+      >
+      <input
+        type="file"
+        style="display: none"
+        :accept="acceptFileTypes"
+        ref="myUpload"
+        @change="uploadFiles"
+      />
     </div>
 
     <!-- image dimension input section -->
-    <div v-if="fileUploaded && collectDimensions && filesEditable" class="md-layout-item md-size-100">
-
-      <h4 class='subheader'>Image Dimensions</h4>
-
-      <div class='imageDimensionsWrapper'>
-
-        <div class='imgDimWidth'>
+    <div
+      v-if="fileUploaded && collectDimensions && filesEditable"
+      class="md-layout-item md-size-100"
+    >
+      <h4 class="subheader">Image Dimensions</h4>
+
+      <div class="imageDimensionsWrapper">
+        <div class="imgDimWidth">
           <md-field>
             <label>Width</label>
-            <md-input v-model='inputtedDimensions.width' @change="userDimensionsCallback"></md-input>
+            <md-input
+              v-model="inputtedDimensions.width"
+              @change="userDimensionsCallback"
+            ></md-input>
           </md-field>
         </div>
 
         <h3>x</h3>
 
-        <div class='imgDimHeight'>
+        <div class="imgDimHeight">
           <md-field>
             <label>Height</label>
-            <md-input v-model='inputtedDimensions.height' @change="userDimensionsCallback"></md-input>
+            <md-input
+              v-model="inputtedDimensions.height"
+              @change="userDimensionsCallback"
+            ></md-input>
           </md-field>
         </div>
 
-        <div class='imgDimUnits'>
+        <div class="imgDimUnits">
           <md-field>
             <label>Units</label>
-            <md-select v-model="inputtedDimensions.units" @change="userDimensionsCallback">
+            <md-select
+              v-model="inputtedDimensions.units"
+              @change="userDimensionsCallback"
+            >
               <md-option value="nanometers">Nanometers (nm)</md-option>
               <md-option value="micrometers">Micrometers (µM)</md-option>
               <md-option value="millimeters">Millimeters (mm)</md-option>
@@ -55,44 +74,67 @@
           </md-field>
         </div>
 
-        <md-button v-if='filesEditable' class='imgDimButton md-primary' @click="openImageEditor(0, 'calibrate')">
+        <md-button
+          v-if="filesEditable"
+          class="imgDimButton md-primary"
+          @click="openImageEditor(0, 'calibrate')"
+        >
           Scale Bar Calibration Tool
         </md-button>
       </div>
-
     </div>
 
     <!-- parameters that are specific to job type -->
-    <div v-if="fileUploaded && (selects && selects.length > 0)" class="md-layout-item md-size-100">
-
-      <h4 class='subheader'>Parameters</h4>
-
-      <div class='selectDropdownsWrapper'>
-        <div class='singleSelectDropdown' v-for="(select, index) in selects" :key='index'>
-
+    <div
+      v-if="fileUploaded && selects && selects.length > 0"
+      class="md-layout-item md-size-100"
+    >
+      <h4 class="subheader">Parameters</h4>
+
+      <div class="selectDropdownsWrapper">
+        <div
+          class="singleSelectDropdown"
+          v-for="(select, index) in selects"
+          :key="index"
+        >
           <md-field v-if="'options' in select">
             <label>{{ select.title }}</label>
-            <md-select :label="select.title" v-model="selectedOptions[select.submitJobTitle]"
-              @change="$emit('set-selectors', selectedOptions)">
-              <md-option v-for="option of select.options" :key="option" :value="option">{{ option }}</md-option>
+            <md-select
+              :label="select.title"
+              v-model="selectedOptions[select.submitJobTitle]"
+              @change="$emit('set-selectors', selectedOptions)"
+            >
+              <md-option
+                v-for="option of select.options"
+                :key="option"
+                :value="option"
+                >{{ option }}</md-option
+              >
             </md-select>
           </md-field>
 
           <div v-else>
             <md-field @change="$emit('set-selectors', selectedOptions)">
               <label>{{ select.title }}</label>
-              <md-input v-model="selectedOptions[select.submitJobTitle]"></md-input>
+              <md-input
+                v-model="selectedOptions[select.submitJobTitle]"
+              ></md-input>
             </md-field>
           </div>
-
         </div>
       </div>
-
     </div>
 
     <!-- image cropper & phase selection modal -->
-    <EditImage v-model='imageEditorOpen' :file='imageEditorData' :aspectRatio='aspectRatio' :type='editImageType'
-      @setCroppedImage="cropCallback" @setPhase="phaseCallback" @setCalibration="calibrationCallback"></EditImage>
+    <EditImage
+      v-model="imageEditorOpen"
+      :file="imageEditorData"
+      :aspectRatio="aspectRatio"
+      :type="editImageType"
+      @setCroppedImage="cropCallback"
+      @setPhase="phaseCallback"
+      @setCalibration="calibrationCallback"
+    ></EditImage>
 
     <!-- table of uploaded images -->
     <!-- <div v-if="fileUploaded" class='imageTable md-layout-item md-size-100'>
@@ -134,14 +176,12 @@
       </div>
 
     </div> -->
-
   </div>
 </template>
 
 <script>
-
-import EditImage from './EditImage.vue' // image cropping modal
-import Jszip from 'jszip' // for unzipping and rezipping files
+import EditImage from './EditImage.vue'; // image cropping modal
+import Jszip from 'jszip'; // for unzipping and rezipping files
 
 export default {
   name: 'ImageUpload',
@@ -157,321 +197,396 @@ export default {
     acceptFileTypes: String
   },
 
-  data () {
+  data() {
     return {
-
       submissionFile: {},
       displayedFiles: [],
       selectedOptions: {},
 
       filesEditable: true,
-      errorAlert: { count: 0, text: 'Error: selected phase for one or more images falls outside the image(s). This is likely due to cropping the image after setting the phase.' },
+      errorAlert: {
+        count: 0,
+        text: 'Error: selected phase for one or more images falls outside the image(s). This is likely due to cropping the image after setting the phase.'
+      },
 
       dimensionsEntered: false,
       inputtedDimensions: { units: null, width: 0, height: 0 },
 
       imageEditorOpen: false,
-      imageEditorData: { url: null, name: null, phase: { x_offset: null, y_offset: null } },
+      imageEditorData: {
+        url: null,
+        name: null,
+        phase: { x_offset: null, y_offset: null }
+      },
       editImageType: 'crop'
-
-    }
+    };
   },
 
   computed: {
-
     fileUploaded: function () {
       if (this.displayedFiles.length > 0) {
-        return true
+        return true;
       }
-      return false
+      return false;
     }
-
   },
 
   methods: {
-
     // process uploaded files
     uploadFiles: function (e) {
       // initial variable declaration and input validation
-      const inputFile = e.target.files[0]
-      if (inputFile === undefined) { return }
+      const inputFile = e.target.files[0];
+      if (inputFile === undefined) {
+        return;
+      }
 
       // reset file information
-      this.submissionFile = {}
-      this.displayedFiles = []
-      this.filesEditable = true
-      if ('phase' in this.selectedOptions) { delete this.selectedOptions.phase }
+      this.submissionFile = {};
+      this.displayedFiles = [];
+      this.filesEditable = true;
+      if ('phase' in this.selectedOptions) {
+        delete this.selectedOptions.phase;
+      }
       if ('dimensions' in this.selectedOptions) {
-        this.selectedOptions.dimensions = { units: this.inputtedDimensions.units, width: parseInt(this.inputtedDimensions.width), height: parseInt(this.inputtedDimensions.height), ratio: null }
+        this.selectedOptions.dimensions = {
+          units: this.inputtedDimensions.units,
+          width: parseInt(this.inputtedDimensions.width),
+          height: parseInt(this.inputtedDimensions.height),
+          ratio: null
+        };
       }
-      this.$emit('set-selectors', this.selectedOptions)
+      this.$emit('set-selectors', this.selectedOptions);
 
-      const fr = new FileReader()
-      fr.readAsDataURL(inputFile)
+      const fr = new FileReader();
+      fr.readAsDataURL(inputFile);
       fr.addEventListener('load', async () => {
         // get file information
         this.submissionFile = {
           name: inputFile.name.toLowerCase(),
           url: fr.result,
           fileType: inputFile.name.split('.').pop().toLowerCase()
-        }
+        };
 
         // push to parent
-        this.$emit('setFiles', this.submissionFile)
+        this.$emit('setFiles', this.submissionFile);
 
         // push to displayed files
         if (this.submissionFile.fileType === 'zip') {
-          this.unzipUploadedFiles(inputFile) // function unzips contents, sets editable status and gets image dimensions
+          this.unzipUploadedFiles(inputFile); // function unzips contents, sets editable status and gets image dimensions
         } else {
-          var lowerCaseName = inputFile.name.toLowerCase()
-          this.displayedFiles = [{
-            name: lowerCaseName,
-            originalName: lowerCaseName,
-            url: fr.result,
-            fileType: lowerCaseName.split('.').pop(),
-            size: { width: 0, height: 0, units: null },
-            pixelSize: { width: 0, height: 0 },
-            phase: { x_offset: 0, y_offset: 0 },
-            errors: { size: false }
-          }]
-          this.getInitialDimensions(0) // set pixel dimensions for image
-          if (this.displayableFileType(0) === false) { this.filesEditable = false } // set displayable status for image
-          this.pushPhase(0)
-          this.pushImageDimensions()
+          var lowerCaseName = inputFile.name.toLowerCase();
+          this.displayedFiles = [
+            {
+              name: lowerCaseName,
+              originalName: lowerCaseName,
+              url: fr.result,
+              fileType: lowerCaseName.split('.').pop(),
+              size: { width: 0, height: 0, units: null },
+              pixelSize: { width: 0, height: 0 },
+              phase: { x_offset: 0, y_offset: 0 },
+              errors: { size: false }
+            }
+          ];
+          this.getInitialDimensions(0); // set pixel dimensions for image
+          if (this.displayableFileType(0) === false) {
+            this.filesEditable = false;
+          } // set displayable status for image
+          this.pushPhase(0);
+          this.pushImageDimensions();
           // console.log(this.displayedFiles[0].size.width, this.displayedFiles[0].pixelSize.width)
         }
-      })
+      });
     },
 
     getInitialDimensions: function (index) {
-      if (this.displayableFileType(index) === false) { return }
+      if (this.displayableFileType(index) === false) {
+        return;
+      }
 
-      var img = new Image()
-      img.src = this.displayedFiles[index].url
-      const vm = this
+      var img = new Image();
+      img.src = this.displayedFiles[index].url;
+      const vm = this;
       img.onload = function () {
-        vm.displayedFiles[index].pixelSize = { width: img.width, height: img.height }
-        vm.displayedFiles[index].originalSize = { width: img.width, height: img.height }
-        vm.updateUserDimensions(index)
-        vm.displayedFiles[index].name += ' '
-        vm.pushImageDimensions()
-      }
+        vm.displayedFiles[index].pixelSize = {
+          width: img.width,
+          height: img.height
+        };
+        vm.displayedFiles[index].originalSize = {
+          width: img.width,
+          height: img.height
+        };
+        vm.updateUserDimensions(index);
+        vm.displayedFiles[index].name += ' ';
+        vm.pushImageDimensions();
+      };
     },
 
     // unzip if the user uploads a zip file
     unzipUploadedFiles: function (inputFile) {
       // initial variable declaration
-      const jszipObj = new Jszip()
+      const jszipObj = new Jszip();
 
       // unzip
-      jszipObj.loadAsync(inputFile)
-        .then(async function (zip) {
-          // transform contents to base64
-          Object.keys(zip.files).forEach(function (filename) {
-            zip.files[filename].async('base64')
-              .then(function (fileData) {
-                var lowerCaseName = filename.toLowerCase()
-                var filetype = lowerCaseName.split('.').pop()
-                this.displayedFiles.push({
-                  name: lowerCaseName,
-                  originalName: lowerCaseName,
-                  url: 'data:image/' + filetype + ';base64,' + fileData,
-                  fileType: filetype,
-                  size: { width: 0, height: 0, units: null },
-                  pixelSize: { width: 0, height: 0 },
-                  phase: { x_offset: 0, y_offset: 0 },
-                  errors: { size: false }
-                })
-              })
-              .then(function () {
-                this.getInitialDimensions(this.displayedFiles.length - 1) // get image dimensions
-                this.pushPhase(this.displayedFiles.length - 1)
-                this.pushImageDimensions()
-                if (this.displayableFileType(this.displayedFiles.length - 1) === false) { this.filesEditable = false } // reduce functionality if image is tif or mat
-              })
-          })
-        })
+      jszipObj.loadAsync(inputFile).then(async function (zip) {
+        // transform contents to base64
+        Object.keys(zip.files).forEach(function (filename) {
+          zip.files[filename]
+            .async('base64')
+            .then(function (fileData) {
+              var lowerCaseName = filename.toLowerCase();
+              var filetype = lowerCaseName.split('.').pop();
+              this.displayedFiles.push({
+                name: lowerCaseName,
+                originalName: lowerCaseName,
+                url: 'data:image/' + filetype + ';base64,' + fileData,
+                fileType: filetype,
+                size: { width: 0, height: 0, units: null },
+                pixelSize: { width: 0, height: 0 },
+                phase: { x_offset: 0, y_offset: 0 },
+                errors: { size: false }
+              });
+            })
+            .then(function () {
+              this.getInitialDimensions(this.displayedFiles.length - 1); // get image dimensions
+              this.pushPhase(this.displayedFiles.length - 1);
+              this.pushImageDimensions();
+              if (
+                this.displayableFileType(this.displayedFiles.length - 1) ===
+                false
+              ) {
+                this.filesEditable = false;
+              } // reduce functionality if image is tif or mat
+            });
+        });
+      });
     },
 
     calibrationCallback: function (...args) {
-      this.inputtedDimensions.width = args[0].width
-      this.inputtedDimensions.height = args[0].height
-      this.inputtedDimensions.units = args[1].units
-      this.userDimensionsCallback()
+      this.inputtedDimensions.width = args[0].width;
+      this.inputtedDimensions.height = args[0].height;
+      this.inputtedDimensions.units = args[1].units;
+      this.userDimensionsCallback();
     },
 
     // callback function for when users enter data into the image dimensions section
     userDimensionsCallback: function () {
-      if (this.inputtedDimensions.units !== null && parseInt(this.inputtedDimensions.width) > 0 && parseInt(this.inputtedDimensions.height) > 0) {
-        this.dimensionsEntered = true
-        for (let i = 0; i < this.displayedFiles.length; i++) { this.updateUserDimensions(i) }
-        this.pushImageDimensions()
+      if (
+        this.inputtedDimensions.units !== null &&
+        parseInt(this.inputtedDimensions.width) > 0 &&
+        parseInt(this.inputtedDimensions.height) > 0
+      ) {
+        this.dimensionsEntered = true;
+        for (let i = 0; i < this.displayedFiles.length; i++) {
+          this.updateUserDimensions(i);
+        }
+        this.pushImageDimensions();
       }
     },
 
     // emit image dimensions data back to parent
     pushImageDimensions: function () {
       if (this.displayableFileType(0) === true) {
-        var ratio = this.displayedFiles[0].size.width / this.displayedFiles[0].pixelSize.width
+        var ratio =
+          this.displayedFiles[0].size.width /
+          this.displayedFiles[0].pixelSize.width;
 
         if (this.inputtedDimensions.units === 'nanometers') {
-          ratio = ratio / 1000000000
+          ratio = ratio / 1000000000;
         } else if (this.inputtedDimensions.units === 'micrometers') {
-          ratio = ratio / 1000000
+          ratio = ratio / 1000000;
         } else if (this.inputtedDimensions.units === 'millimeters') {
-          ratio = ratio / 1000
+          ratio = ratio / 1000;
         }
 
-        this.selectedOptions.dimensions = { units: this.inputtedDimensions.units, width: this.displayedFiles[0].size.width, height: this.displayedFiles[0].size.height, ratio: ratio }
+        this.selectedOptions.dimensions = {
+          units: this.inputtedDimensions.units,
+          width: this.displayedFiles[0].size.width,
+          height: this.displayedFiles[0].size.height,
+          ratio: ratio
+        };
       } else {
-        this.selectedOptions.dimensions = { units: this.inputtedDimensions.units, width: parseInt(this.inputtedDimensions.width), height: parseInt(this.inputtedDimensions.height), ratio: null }
+        this.selectedOptions.dimensions = {
+          units: this.inputtedDimensions.units,
+          width: parseInt(this.inputtedDimensions.width),
+          height: parseInt(this.inputtedDimensions.height),
+          ratio: null
+        };
       }
-      this.$emit('set-selectors', this.selectedOptions)
+      this.$emit('set-selectors', this.selectedOptions);
     },
 
     // scale user inputted dimensions by how much user has cropped the images
     updateUserDimensions: function (index) {
-      this.displayedFiles[index].size.units = this.inputtedDimensions.units
-      this.displayedFiles[index].size.width = parseInt((parseInt(this.inputtedDimensions.width) / this.displayedFiles[index].originalSize.width) * this.displayedFiles[index].pixelSize.width)
-      this.displayedFiles[index].size.height = parseInt((parseInt(this.inputtedDimensions.height) / this.displayedFiles[index].originalSize.height) * this.displayedFiles[index].pixelSize.height)
+      this.displayedFiles[index].size.units = this.inputtedDimensions.units;
+      this.displayedFiles[index].size.width = parseInt(
+        (parseInt(this.inputtedDimensions.width) /
+          this.displayedFiles[index].originalSize.width) *
+          this.displayedFiles[index].pixelSize.width
+      );
+      this.displayedFiles[index].size.height = parseInt(
+        (parseInt(this.inputtedDimensions.height) /
+          this.displayedFiles[index].originalSize.height) *
+          this.displayedFiles[index].pixelSize.height
+      );
     },
 
     // args: [fileName, phase]
     phaseCallback: function (...args) {
       // find index of object to change in array
-      const indexFunction = (object) => object.name === args[0]
-      const index = this.displayedFiles.findIndex(indexFunction)
+      const indexFunction = (object) => object.name === args[0];
+      const index = this.displayedFiles.findIndex(indexFunction);
 
       // apply new phase
-      this.displayedFiles[index].phase = args[1]
+      this.displayedFiles[index].phase = args[1];
       if (this.displayedFiles[index].errors.size === true) {
-        this.displayedFiles[index].errors.size = false
-        this.errorAlert.count -= 1
+        this.displayedFiles[index].errors.size = false;
+        this.errorAlert.count -= 1;
       }
 
-      this.displayedFiles[index].name += ' ' // force rerender
+      this.displayedFiles[index].name += ' '; // force rerender
 
       // push to parent
-      this.pushPhase(index)
+      this.pushPhase(index);
     },
 
     pushPhase: function (index) {
       if ('phase' in this.selectedOptions) {
-        this.selectedOptions.phase[this.displayedFiles[index].originalName] = this.displayedFiles[index].phase
+        this.selectedOptions.phase[this.displayedFiles[index].originalName] =
+          this.displayedFiles[index].phase;
       } else {
-        this.selectedOptions.phase = {}
-        this.selectedOptions.phase[this.displayedFiles[index].originalName] = this.displayedFiles[index].phase
+        this.selectedOptions.phase = {};
+        this.selectedOptions.phase[this.displayedFiles[index].originalName] =
+          this.displayedFiles[index].phase;
       }
-      this.$emit('set-selectors', this.selectedOptions)
+      this.$emit('set-selectors', this.selectedOptions);
     },
 
     // args: [cropped image, filename of cropped image, coordinates]
     cropCallback: async function (...args) {
       for (let i = 0; i < this.displayedFiles.length; i++) {
         if (this.displayedFiles[i].name === args[1]) {
-          await this.cropImage(args[0], args[2], i)
+          await this.cropImage(args[0], args[2], i);
         } else if (this.displayableFileType(i) === false) {
-          continue
+          continue;
         } else {
-          await this.cropImage(null, args[2], i)
+          await this.cropImage(null, args[2], i);
         }
 
-        this.displayedFiles[i].name = 'cropped_' + this.displayedFiles[i].name // force rerender
+        this.displayedFiles[i].name = 'cropped_' + this.displayedFiles[i].name; // force rerender
       }
 
       // push to parent
       if (this.submissionFile.fileType === 'zip') {
-        this.rezipFiles()
+        this.rezipFiles();
       } else {
-        this.submissionFile.url = this.displayedFiles[0].url
-        this.$emit('setFiles', this.submissionFile)
+        this.submissionFile.url = this.displayedFiles[0].url;
+        this.$emit('setFiles', this.submissionFile);
+      }
+      this.pushImageDimensions();
+      for (let i = 0; i < this.displayedFiles.length; i++) {
+        this.pushPhase(i);
       }
-      this.pushImageDimensions()
-      for (let i = 0; i < this.displayedFiles.length; i++) { this.pushPhase(i) }
     },
 
     // crops a single image: update the image, the image's phase, and the image dimensions
     cropImage: async function (url, coordinates, index) {
-      function awaitImageCrop (image) {
+      function awaitImageCrop(image) {
         return new Promise((resolve, reject) => {
           image.onload = function () {
-            ctx.drawImage(image, (-1) * coordinates.left, (-1) * coordinates.top)
-            this.displayedFiles[index].url = canvas.toDataURL()
-            resolve()
-          }
-        })
+            ctx.drawImage(image, -1 * coordinates.left, -1 * coordinates.top);
+            this.displayedFiles[index].url = canvas.toDataURL();
+            resolve();
+          };
+        });
       }
 
       // crop the image
       if (url !== null) {
-        this.displayedFiles[index].url = url
+        this.displayedFiles[index].url = url;
       } else {
-        var canvas = document.createElement('canvas')
-        canvas.width = coordinates.width
-        canvas.height = coordinates.height
+        var canvas = document.createElement('canvas');
+        canvas.width = coordinates.width;
+        canvas.height = coordinates.height;
 
-        var ctx = canvas.getContext('2d')
-        var image = new Image()
-        image.src = this.displayedFiles[index].url
+        var ctx = canvas.getContext('2d');
+        var image = new Image();
+        image.src = this.displayedFiles[index].url;
 
-        await awaitImageCrop(image) // done to ensure that all images are cropped before files are rezipped
+        await awaitImageCrop(image); // done to ensure that all images are cropped before files are rezipped
       }
 
       // update the phase based on new top left of image
-      if (this.displayedFiles[index].phase.x_offset !== 0 || this.displayedFiles[index].phase.y_offset !== 0) {
-        this.displayedFiles[index].phase.x_offset -= coordinates.left
-        this.displayedFiles[index].phase.y_offset -= coordinates.top
+      if (
+        this.displayedFiles[index].phase.x_offset !== 0 ||
+        this.displayedFiles[index].phase.y_offset !== 0
+      ) {
+        this.displayedFiles[index].phase.x_offset -= coordinates.left;
+        this.displayedFiles[index].phase.y_offset -= coordinates.top;
 
         // validate that new phase is still within the image
-        if (this.displayedFiles[index].phase.x_offset < 0 || this.displayedFiles[index].phase.y_offset < 0) {
-          this.errorAlert.count += 1
-          this.displayedFiles[index].errors.size = true
-        } else if (this.displayedFiles[index].phase.x_offset > coordinates.width || this.displayedFiles[index].phase.y_offset > coordinates.height) {
-          this.errorAlert.count += 1
-          this.displayedFiles[index].errors.size = true
+        if (
+          this.displayedFiles[index].phase.x_offset < 0 ||
+          this.displayedFiles[index].phase.y_offset < 0
+        ) {
+          this.errorAlert.count += 1;
+          this.displayedFiles[index].errors.size = true;
+        } else if (
+          this.displayedFiles[index].phase.x_offset > coordinates.width ||
+          this.displayedFiles[index].phase.y_offset > coordinates.height
+        ) {
+          this.errorAlert.count += 1;
+          this.displayedFiles[index].errors.size = true;
         }
       }
 
       // update the image dimensions
-      this.displayedFiles[index].pixelSize.width = coordinates.width
-      this.displayedFiles[index].pixelSize.height = coordinates.height
+      this.displayedFiles[index].pixelSize.width = coordinates.width;
+      this.displayedFiles[index].pixelSize.height = coordinates.height;
 
       if (this.dimensionsEntered === true) {
-        this.updateUserDimensions(index)
+        this.updateUserDimensions(index);
       }
     },
 
     // rezip images when images are altered and emit that back to parent component
-    async rezipFiles () {
-      const jszipObj = new Jszip()
+    async rezipFiles() {
+      const jszipObj = new Jszip();
 
       // add images to zip file
       for (let i = 0; i < this.displayedFiles.length; i++) {
-        jszipObj.file(this.displayedFiles[i].originalName, this.displayedFiles[i].url.split(',').pop(), { base64: true })
+        jszipObj.file(
+          this.displayedFiles[i].originalName,
+          this.displayedFiles[i].url.split(',').pop(),
+          { base64: true }
+        );
       }
 
       // create zip file
-      jszipObj.generateAsync({ type: 'base64', compression: 'DEFLATE' })
+      jszipObj
+        .generateAsync({ type: 'base64', compression: 'DEFLATE' })
         .then(function (base64) {
-          this.submissionFile.url = 'data:application/zip;base64,' + base64
-          this.$emit('setFiles', this.submissionFile)
-        })
+          this.submissionFile.url = 'data:application/zip;base64,' + base64;
+          this.$emit('setFiles', this.submissionFile);
+        });
     },
 
     // opens image editor modal and passes information for specific image that is opened
     openImageEditor: function (index, type) {
-      this.editImageType = type
-      this.imageEditorData = this.displayedFiles[index]
-      this.imageEditorOpen = !this.imageEditorOpen // toggle the image editor modal being open and closed
+      this.editImageType = type;
+      this.imageEditorData = this.displayedFiles[index];
+      this.imageEditorOpen = !this.imageEditorOpen; // toggle the image editor modal being open and closed
     },
 
     displayableFileType: function (index) {
-      if (this.displayedFiles === []) {
-        return false
-      } else if (this.displayedFiles[index].fileType === 'mat' || this.displayedFiles[index].fileType === 'tif') {
-        return false
+      if (!this.displayedFiles.length) {
+        return false;
+      } else if (
+        this.displayedFiles[index].fileType === 'mat' ||
+        this.displayedFiles[index].fileType === 'tif'
+      ) {
+        return false;
       }
-      return true
+      return true;
     }
   },
   watch: {
@@ -480,10 +595,11 @@ export default {
       if (newValue) {
         this.$emit('fileTypeAlert', {
           title: 'File Type Alert',
-          content: 'Note: due to browser limitations, image editing functionality and pulling data about image dimensions ' +
+          content:
+            'Note: due to browser limitations, image editing functionality and pulling data about image dimensions ' +
             'is not available for mat and tif file types. But, these file types can still be submitted for jobs.',
           reason: 'fileTypeAlert'
-        })
+        });
       }
     },
 
@@ -494,9 +610,9 @@ export default {
           title: 'Likely Cropping Error',
           content: this.errorAlert.text,
           reason: 'croppingError'
-        })
+        });
       }
     }
   }
-}
+};
 </script>
diff --git a/app/src/pages/explorer/chart/editor/Chart.vue b/app/src/pages/explorer/chart/editor/Chart.vue
index f5c9a479..35179a94 100644
--- a/app/src/pages/explorer/chart/editor/Chart.vue
+++ b/app/src/pages/explorer/chart/editor/Chart.vue
@@ -123,19 +123,19 @@
 </template>
 
 <script>
-import { querySparql } from '@/modules/sparql'
+import { querySparql } from '@/modules/sparql';
 import {
   saveChart,
   getDefaultChart,
   buildSparqlSpec,
   loadChart,
   toChartId
-} from '@/modules/vega-chart'
-import VJsoneditor from 'v-jsoneditor'
-import VegaLite from '@/components/explorer/VegaLiteWrapper.vue'
-import yasqe from '@/components/explorer/yasqe'
-import yasr from '@/components/explorer/yasr'
-import spinner from '@/components/Spinner'
+} from '@/modules/vega-chart';
+import VJsoneditor from 'v-jsoneditor';
+import VegaLite from '@/components/explorer/VegaLiteWrapper.vue';
+import yasqe from '@/components/explorer/yasqe';
+import yasr from '@/components/explorer/yasr';
+import spinner from '@/components/Spinner';
 export default {
   name: 'ChartCreate',
   components: {
@@ -145,7 +145,7 @@ export default {
     yasr,
     spinner
   },
-  data () {
+  data() {
     return {
       loading: true,
       mouseIsDown: false,
@@ -166,69 +166,70 @@ export default {
       },
       actionType: 'Save Chart',
       submittedIdentifier: undefined
-    }
+    };
   },
   props: ['chartId'],
   computed: {
-    spec () {
-      const spec = buildSparqlSpec(this.chart.baseSpec, this.results) ?? {}
-      return spec
+    spec() {
+      const spec = buildSparqlSpec(this.chart.baseSpec, this.results) ?? {};
+      return spec;
     }
   },
   methods: {
-    getSparqlData () {
-      const vm = this
+    getSparqlData() {
+      const vm = this;
       querySparql(vm.chart.query)
         .then(this.onQuerySuccess)
-        .then((this.loading = false))
+        .then((this.loading = false));
     },
-    onQuerySuccess (results) {
-      this.results = results
+    onQuerySuccess(results) {
+      this.results = results;
     },
-    onSpecJsonError () {
-      console.log('bad', arguments)
+    onSpecJsonError() {
+      // console.log('bad', arguments)
+      return;
     },
-    async onNewVegaView (view) {
+    async onNewVegaView(view) {
       const blob = await view
         .toImageURL('png')
         .then((url) => fetch(url))
-        .then((resp) => resp.blob())
-      const fr = new FileReader()
+        .then((resp) => resp.blob());
+      const fr = new FileReader();
       fr.addEventListener('load', () => {
-        this.chart.depiction = fr.result
-      })
-      fr.readAsDataURL(blob)
+        this.chart.depiction = fr.result;
+      });
+      fr.readAsDataURL(blob);
     },
-    async loadChart () {
+    async loadChart() {
       // this.types = 'new, edit, restore & delete'
-      let getChartPromise
+      let getChartPromise;
       if (this.$route.params.type === 'new') {
-        this.actionType = 'Save Chart'
-        getChartPromise = Promise.resolve(getDefaultChart())
+        this.actionType = 'Save Chart';
+        getChartPromise = Promise.resolve(getDefaultChart());
       } else if (this.$route.params.type === 'edit') {
         // fetch chart from knowledge graph
-        this.actionType = 'Edit Chart'
-        getChartPromise = Promise.resolve(loadChart(this.chartId))
+        this.actionType = 'Edit Chart';
+        getChartPromise = Promise.resolve(loadChart(this.chartId));
       } else {
         // Get chart from mongo backup
-        this.actionType = 'Restore Chart'
-        this.reloadRestored()
+        this.actionType = 'Restore Chart';
+        this.reloadRestored();
       }
       getChartPromise.then((chart) => {
-        this.chart = chart
-        return this.getSparqlData()
-      })
+        this.chart = chart;
+        return this.getSparqlData();
+      });
     },
-    async reloadRestored () {
+    async reloadRestored() {
       // 1. Fetch backup from mongo
       // 2. Post each chart (schema + sparql) to knowledge graph
       // 3. Toggle restore flag in mongo
     },
-    async saveChart () {
-      this.loading = true
+    async saveChart() {
+      this.loading = true;
       // Todo (ticket xx): Move this into vuex
       try {
-        const chartNanopub = await saveChart(this.chart)
+        const chartNanopub = await saveChart(this.chart);
 
         if (this.$route.params.type === 'new') {
           // Save chart to MongoDB - async operation
@@ -237,7 +238,7 @@ export default {
             // TODO: Can we change these to a materialsmine.org uri or will that break things?
             identifier: `http://nanomine.org/viz/${this.chartId}`,
             type: 'charts'
-          })
+          });
           // Find in mongo and update - async operation
         }
 
@@ -248,39 +249,39 @@ export default {
             resourceNanopub: chartNanopub,
             type: 'charts'
           }
-        )
+        );
 
         if (resp.identifier) {
-          this.submittedIdentifier = resp.identifier
+          this.submittedIdentifier = resp.identifier;
         }
 
         // This next line tells the gallery page to fetch cos a new chart exist
-        this.$store.commit('explorer/curation/setNewChartExist', true)
-        this.loading = false
+        this.$store.commit('explorer/curation/setNewChartExist', true);
+        this.loading = false;
         // Change button name after submission
-        this.actionType = 'Edit Chart'
+        this.actionType = 'Edit Chart';
         this.$store.commit('setSnackbar', {
           message: 'Chart saved successfully!',
           duration: 15000
-        })
+        });
 
         if (this.$route.params.type === 'new') {
           return this.$router.push(
             `/explorer/chart/editor/edit/${toChartId(resp.identifier)}`
-          )
+          );
         }
       } catch (err) {
         // TODO (Ticket xxx): USE THE APP DIALOGUE BOX INSTEAD OF ALERT BOX
-        return alert(err)
+        return alert(err);
       }
     },
-    goToExplorer () {
-      this.$router.push('/explorer/chart')
+    goToExplorer() {
+      this.$router.push('/explorer/chart');
     }
   },
-  created () {
-    this.loading = true
-    this.loadChart()
+  created() {
+    this.loading = true;
+    this.loadChart();
   }
-}
+};
 </script>
diff --git a/app/src/store/modules/explorer/gallery/actions.js b/app/src/store/modules/explorer/gallery/actions.js
index 18ec06e8..c444b339 100644
--- a/app/src/store/modules/explorer/gallery/actions.js
+++ b/app/src/store/modules/explorer/gallery/actions.js
@@ -1,52 +1,52 @@
-import router from '@/router'
+import router from '@/router';
 export default {
-  async loadItems ({ commit, getters, dispatch }, { page = 1 } = {}) {
+  async loadItems({ commit, getters, dispatch }, { page = 1 } = {}) {
     if (getters.totalPages > 0) {
       if (page < 1 || (page > 1 && page > getters.totalPages)) {
         throw new Error(
           `Invalid Page Number: ${page}. Must be number from 1 to ${getters.totalPages}`
-        )
+        );
       }
     }
-    const url = `/api/knowledge/charts/?page=${page}&pageSize=${getters.pageSize}`
+    const url = `/api/knowledge/charts/?page=${page}&pageSize=${getters.pageSize}`;
     const response = await fetch(url, {
       method: 'GET'
-    })
+    });
     if (!response || response?.statusText !== 'OK') {
-      const error = new Error(response.message || 'Something went wrong!')
-      throw error
+      const error = new Error(response.message || 'Something went wrong!');
+      throw error;
     }
 
     if (response.status === 201) {
-      return
+      return;
     }
 
-    const responseData = await response.json()
-    commit('setTotal', responseData.total)
-    commit('setPage', page)
+    const responseData = await response.json();
+    commit('setTotal', responseData.total);
+    commit('setPage', page);
 
     if (!responseData.data) {
-      commit('setItems', [])
-      return dispatch('fetchFavoriteCharts')
+      commit('setItems', []);
+      return dispatch('fetchFavoriteCharts');
     }
 
     commit(
       'setItems',
       responseData.data.map((el) => el._source)
-    )
-    return dispatch('fetchFavoriteCharts')
+    );
+    return dispatch('fetchFavoriteCharts');
   },
 
-  async fetchFavoriteCharts ({ commit, rootGetters, dispatch }, root = true) {
-    const token = rootGetters['auth/token']
-    const name = rootGetters['auth/displayName']
-    const isAdmin = rootGetters['auth/isAdmin']
+  async fetchFavoriteCharts({ commit, rootGetters, dispatch }, root = true) {
+    const token = rootGetters['auth/token'];
+    const name = rootGetters['auth/displayName'];
+    const isAdmin = rootGetters['auth/isAdmin'];
 
     try {
-      if (!token) return
+      if (!token) return;
 
       // Route the user to the correct route depending on isAdmin status
-      const favoriteUrl = isAdmin ? '/favoritechart' : '/user/favorite-charts'
+      const favoriteUrl = isAdmin ? '/favoritechart' : '/user/favorite-charts';
 
       const response = await fetch(
         '/api/knowledge/charts/favorites?pageSize=50',
@@ -56,28 +56,24 @@ export default {
             Authorization: `Bearer ${token}`
           }
         }
-      )
+      );
       if (response.status !== 200) {
-        console.log('tolu01', response.message)
         const error = new Error(
           `Server error - ${response.message ?? response.statusText}`
-        )
-        throw error
+        );
+        throw error;
       }
 
-      const responseData = await response.json()
+      const responseData = await response.json();
       commit(
         'setfavoriteChartItems',
         responseData.data.map((el) => el._source)
-      )
-      commit('setTotalFavorites', responseData.total)
-      commit('setMissingCharts', responseData.missingCharts)
+      );
+      commit('setTotalFavorites', responseData.total);
+      commit('setMissingCharts', responseData.missingCharts);
 
-      console.log('1', responseData)
-      if (!root) return
-      console.log('2', responseData)
-      const faveLength = responseData.total
-      console.log('faveLength', faveLength)
+      if (!root) return;
+      const faveLength = responseData.total;
       commit(
         'setSnackbar',
         {
@@ -89,7 +85,7 @@ export default {
           })
         },
         { root: true }
-      )
+      );
     } catch (error) {
       return commit(
         'setSnackbar',
@@ -99,17 +95,17 @@ export default {
           callToActionText: 'Retry'
         },
         { root: true }
-      )
+      );
     }
   },
 
-  async bookmarkChart ({ commit, rootGetters, dispatch }, { chart }) {
-    const token = rootGetters['auth/token']
-    const storeCharts = rootGetters['explorer/gallery/favoriteChartItems']
-    let totalData = []
+  async bookmarkChart({ commit, rootGetters, dispatch }, { chart }) {
+    const token = rootGetters['auth/token'];
+    const storeCharts = rootGetters['explorer/gallery/favoriteChartItems'];
+    let totalData = [];
 
     try {
-      if (!token) return
+      if (!token) return;
       const response = await fetch('/api/knowledge/charts/favorites', {
         method: 'POST',
         body: JSON.stringify({ chartId: chart.identifier }),
@@ -117,13 +113,13 @@ export default {
           'Content-Type': 'application/json',
           Authorization: `Bearer ${token}`
         }
-      })
-      if (response.status !== 200) return
-      const responseData = await response.json()
+      });
+      if (response.status !== 200) return;
+      const responseData = await response.json();
 
-      totalData = [...storeCharts, { chartId: chart.identifier }]
-      commit('setfavoriteChartItems', totalData)
-      commit('setSnackbar', { message: responseData.message }, { root: true })
+      totalData = [...storeCharts, { chartId: chart.identifier }];
+      commit('setfavoriteChartItems', totalData);
+      commit('setSnackbar', { message: responseData.message }, { root: true });
     } catch (error) {
       return commit(
         'setSnackbar',
@@ -133,7 +129,7 @@ export default {
           callToActionText: 'Retry'
         },
         { root: true }
-      )
+      );
     }
   }
-}
+};
diff --git a/resfulservice/spec/controllers/favouritesController.spec.js b/resfulservice/spec/controllers/favouritesController.spec.js
index c55b4265..f6aca76e 100644
--- a/resfulservice/spec/controllers/favouritesController.spec.js
+++ b/resfulservice/spec/controllers/favouritesController.spec.js
@@ -104,7 +104,6 @@ describe('Favourites Controllers Unit Tests:', function () {
       .returns(mockElasticSearchChartsResult);
     sinon.stub(latency, 'latencyCalculator').returns(true);
     const result = await getFavoriteCharts(req, res, next);
-    console.log(result);
     expect(result).to.be.an('Object');
     expect(result).to.have.property('data');
     expect(result).to.have.property('total');