fix: the brainsprites are behaving now

Author: akeshavan

dmriprepViewer/src/components/BrainSprite.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="brainsprite">
+        <div v-if="!done">Hold on...</div>
+        <canvas :id="id"></canvas>
+        <img :id="id+'_spriteImg'"
+         class="hidden"
+         :src="'data:image/png;base64,' + base"
+         v-if="showOrig"
+        />
+        <img :id="id+'_overlayImg'"
+         class="hidden"
+         v-if="overlay && showOrig"
+         :src="'data:image/png;base64,' + overlay"
+        />
+  </div>
+</template>
+
+<style scoped>
+  .hidden {
+    visibility: hidden;
+    /* display: none; */
+  }
+  canvas {
+    width: 100%;
+  }
+  img {
+    /* width: 10px;
+    height: 10px; */
+  }
+</style>
+
+<script>
+import brainsprite from './brainsprite';
+
+export default {
+  name: 'brainsprite',
+  props: ['base', 'overlay', 'id',
+    'base_dim_x', 'base_dim_y',
+    'overlay_dim_x', 'overlay_dim_y'],
+  data() {
+    return {
+      brain: null,
+      showOrig: true,
+      done: false,
+    };
+  },
+  methods: {
+    initBrainSprite() {
+      /* eslint-disable-next-line */
+      const brain = new brainsprite({
+        canvas: this.id,
+        sprite: `${this.id}_spriteImg`,
+        nbSlice: { Y: this.base_dim_x, Z: this.base_dim_y },
+        overlay: {
+          sprite: `${this.id}_overlayImg`,
+          nbSlice: { Y: this.overlay_dim_x, Z: this.overlay_dim_y },
+          opacity: 0.5,
+        },
+      });
+      this.brain = brain;
+      this.showOrig = false;
+      this.done = true;
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => { this.initBrainSprite(); }, 1);
+    });
+  },
+};
+</script>

dmriprepViewer/src/components/Report.vue

@@ -3,9 +3,7 @@
     <div v-if="report">
       <h2 class="mt-3 pt-3">Corrected dwi</h2>
       <p class="lead">Result of eddy</p>
-      <vue-slider ref="timeSlider" v-model="time"
-       :min="0" :max="report.dwi_corrected[0].num_slices-1">
-     </vue-slider>
+
       <sprite4d v-for="view in report.dwi_corrected"
                 :key="view.orientation"
                 :M="view.M"
@@ -19,7 +17,9 @@
                 opacity="1"
       >
       </sprite4d>
-
+      <vue-slider ref="timeSlider" v-model="time"
+       :min="0" :max="report.dwi_corrected[0].num_slices-1">
+     </vue-slider>
       <h2 class="mt-3 pt-3">Eddy Report</h2>
       <p class="lead"> <b-btn v-b-toggle.collapse1 variant="primary">
         Outliers ({{report.eddy_report.length}})</b-btn> </p>