Fix Screenshot captures (#335)

Author: annehaley

client/src/components/EmailDialog.vue

@@ -16,13 +16,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
-    notes: {
-      type: Array,
-      default: () => [],
-    },
   },
   setup() {
     const screenshots = computed(() => store.state.screenshots);
+    const currentViewData = computed(() => store.getters.currentViewData);
     const currentFrame = computed(() => store.getters.currentFrame);
     const currentScan = computed(() => store.getters.currentScan);
     const { removeScreenshot } = store.commit;
@@ -31,6 +28,7 @@ export default defineComponent({
 
     return {
       screenshots,
+      currentViewData,
       currentFrame,
       currentScan,
       removeScreenshot,
@@ -69,11 +67,6 @@ export default defineComponent({
         this.initialize();
       }
     },
-    notes(value) {
-      if (value) {
-        this.initialize();
-      }
-    },
   },
   methods: {
     initialize() {
@@ -95,19 +88,13 @@ export default defineComponent({
       }
       this.showCC = !!this.cc.length;
       this.showBCC = !!this.bcc.length;
-      const experiment = `Regarding ${this.currentScan.experiment}, ${this.currentScan.name}`;
-      this.subject = experiment;
-      this.body = `Experiment: ${this.currentScan.experiment}
-Scan: ${this.currentScan.name}`;
-      if (this.notes) {
-        this.body = `${this.body}
-Notes:
-`;
-        this.body = this.notes
-          .map(
-            (note) => `${note.creator.first_name} ${note.creator.last_name}: ${note.created}\n${note.note}`,
-          )
-          .join('\n');
+      this.subject = `Regarding ${this.currentViewData.experimentName}, ${this.currentScan.name}`;
+      this.body = `Experiment: ${this.currentViewData.experimentName}\nScan: ${this.currentScan.name}\n`;
+      if (this.currentViewData.scanDecisions.length > 0) {
+        this.body += `Decisions:\n ${this.currentViewData.scanDecisions.map(
+          (decision) => `    ${decision.creator.email} (${decision.created}): `
+          + `${decision.decision.toUpperCase()} ${decision.note.length > 0 ? `, ${decision.note}` : ''}`,
+        )}`;
       }
       this.initialized = true;
     },

client/src/components/ScreenshotDialog.vue

@@ -136,7 +136,7 @@ export default {
           color="primary"
           text
         >
-          Save
+          Attach to email draft
         </v-btn>
       </v-card-actions>
     </v-card>

client/src/components/VtkViewer.vue

@@ -4,10 +4,8 @@ import { vec3 } from 'gl-matrix';
 import Vue from 'vue';
 import { mapState, mapGetters, mapMutations } from 'vuex';
 
-import { cleanFrameName } from '@/utils/helper';
 import CrosshairSet from '../utils/crosshairs';
 import fill2DView from '../utils/fill2DView';
-import { getView } from '../vtk/viewManager';
 import { VIEW_ORIENTATIONS } from '../vtk/constants';
 
 export default {
@@ -40,7 +38,7 @@ export default {
       'jIndexSlice',
       'kIndexSlice',
     ]),
-    ...mapGetters(['currentFrame', 'currentScan']),
+    ...mapGetters(['currentFrame', 'currentScan', 'currentViewData']),
     representation() {
       return (
         // force add dependency on currentFrame
@@ -236,14 +234,11 @@ export default {
       return trueAxis;
     },
     async takeScreenshot() {
-      const view = getView(this.proxyManager, `ScreenshotView2D_${this.name}:${this.name}`, this.screenshotContainer);
-      view.getOpenglRenderWindow().setSize(512, 512);
-      fill2DView(view, 512, 512);
-      const dataURL = await view.captureImage();
+      const dataURL = await this.view.captureImage();
       this.setCurrentScreenshot({
-        name: `${this.currentScan.experiment}/${
-          this.currentScan.name
-        }/${cleanFrameName(this.currentFrame.name)}/${this.displayName}`,
+        name: `${this.currentViewData.experimentName}/${
+          this.currentViewData.scanName
+        }/${this.currentFrame.frame_number}/${this.displayName}`,
         dataURL,
       });
     },

client/src/store/index.ts

@@ -57,12 +57,6 @@ function prepareProxyManager(proxyManager) {
   }
 }
 
-function prepareScreenshotViews(proxyManager) {
-  ['ScreenshotView2D_x:x', 'ScreenshotView2D_y:y', 'ScreenshotView2D_z:z'].forEach((type) => {
-    getView(proxyManager, type, null);
-  });
-}
-
 function getArrayName(filename) {
   const idx = filename.lastIndexOf('.');
   const name = idx > -1 ? filename.substring(0, idx) : filename;
@@ -384,8 +378,7 @@ const {
       };
     },
     currentFrame(state) {
-      const { frames, currentFrameId } = state;
-      return currentFrameId ? frames[currentFrameId] : null;
+      return state.currentFrameId ? state.frames[state.currentFrameId] : null;
     },
     previousFrame(state, getters) {
       return getters.currentFrame
@@ -813,9 +806,6 @@ const {
         if (needPrep || !state.proxyManager.getViews().length) {
           prepareProxyManager(state.proxyManager);
           state.vtkViews = state.proxyManager.getViews();
-          // initializing the screenshot view resets the render settings, so do it now instead of
-          // when a screenshot is taken
-          prepareScreenshotViews(state.proxyManager);
         }
         if (!state.vtkViews.length) {
           state.vtkViews = state.proxyManager.getViews();

client/src/utils/helper.js

@@ -1,12 +1,4 @@
-export function cleanFrameName(name) {
-  const cleanName = name.replace(/^image/, '').replace(/.nii.gz$/, '');
-  if (cleanName === '') {
-    return '1';
-  }
-  return cleanName;
-}
-
-export function formatSize(size, { base = 1024, unit = 'B' } = {}) {
+export default function formatSize(size, { base = 1024, unit = 'B' } = {}) {
   if (size < base) {
     return `${size} ${unit}`;
   }

client/src/views/Frame.vue

@@ -8,7 +8,7 @@ import Navbar from '@/components/Navbar.vue';
 import ControlPanel from '@/components/ControlPanel.vue';
 import ExperimentsView from '@/components/ExperimentsView.vue';
 import VtkViewer from '@/components/VtkViewer.vue';
-import { cleanFrameName, formatSize } from '@/utils/helper';
+import formatSize from '@/utils/helper';
 
 export default {
   name: 'Frame',
@@ -96,7 +96,6 @@ export default {
       'swapToFrame',
       'getFrame',
     ]),
-    cleanFrameName,
     async logoutUser() {
       await this.logout();
       this.$router.go('/'); // trigger re-render into oauth flow

client/src/vtk/viewManager.js

@@ -36,7 +36,7 @@ function getViewType(view) {
 
 // ----------------------------------------------------------------------------
 
-function getView(proxyManager, viewType, container) {
+function getView(proxyManager, viewType) {
   const [type, name] = viewType.split(':');
   let view = null;
   const views = proxyManager.getViews();
@@ -71,11 +71,6 @@ function getView(proxyManager, viewType, container) {
     view.setPresetToOrientationAxes('default');
   }
 
-  if (container) {
-    view.setContainer(container);
-    view.resize();
-  }
-
   return view;
 }
 
@@ -98,16 +93,9 @@ function updateViewsAnnotation(proxyManager) {
   }
 }
 
-// ----------------------------------------------------------------------------
-
-function bindView(proxyManager, viewType, container) {
-  return getView(proxyManager, viewType, container);
-}
-
 // ----------------------------------------------------------------------------
 export default {
   getViewType,
-  bindView,
   getView,
   getViewActions,
   getNumberOfVisibleViews,
@@ -116,7 +104,6 @@ export default {
 
 export {
   getViewType,
-  bindView,
   getView,
   getViewActions,
   getNumberOfVisibleViews,