remove UNSAFE component function and clean up state

Author: walesch-yan

ui/src/actions/sampleview.js

@@ -101,14 +101,6 @@ export function deleteShapeAction(id) {
   return { type: 'DELETE_SHAPE', id };
 }
 
-export function saveImageSize(width, height, pixelsPerMm) {
-  return { type: 'SAVE_IMAGE_SIZE', width, height, pixelsPerMm };
-}
-
-export function toggleAutoScale(width = 1) {
-  return { type: 'TOGGLE_AUTO_SCALE', width };
-}
-
 export function videoMessageOverlay(show, msg) {
   return { type: 'SHOW_VIDEO_MESSAGE_OVERLAY', show, msg };
 }
@@ -146,10 +138,6 @@ export function setShapes(shapes) {
   return { type: 'SET_SHAPES', shapes };
 }
 
-export function toggleCinema() {
-  return { type: 'TOOGLE_CINEMA' };
-}
-
 export function setGridOverlay(level) {
   return { type: 'SET_GRID_OVERLAY', level };
 }

ui/src/components/SampleView/SampleImage.jsx

@@ -101,21 +101,12 @@ export default class SampleImage extends React.Component {
     this.initJSMpeg();
   }
 
-  // eslint-disable-next-line react/no-unsafe
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { width, cinema } = this.props;
-    if (
-      nextProps.width !== width ||
-      nextProps.cinema !== cinema ||
-      (nextProps.autoScale && this.props.imageRatio !== nextProps.imageRatio)
-    ) {
+  componentDidUpdate(prevProps) {
+    const { imageRatio, width } = this.props; // #NOSONAR
+    if (imageRatio !== prevProps.imageRatio || width !== prevProps.width) {
+      // #NOSONAR
       this.setImageRatio();
     }
-
-    this.drawGridPlugin.setScale(nextProps.imageRatio);
-  }
-
-  componentDidUpdate(prevProps) {
     // Initialize JSMpeg for decoding the MPEG1 stream
     if (prevProps.videoFormat !== 'MPEG1') {
       this.initJSMpeg();
@@ -201,10 +192,8 @@ export default class SampleImage extends React.Component {
   }
 
   setImageRatio() {
-    if (this.props.autoScale) {
-      const { clientWidth } = document.querySelector('#outsideWrapper');
-      this.props.sampleViewActions.setImageRatio(clientWidth);
-    }
+    const { clientWidth } = document.querySelector('#outsideWrapper');
+    this.props.sampleViewActions.setImageRatio(clientWidth);
   }
 
   setVCellSpacing(e) {

ui/src/reducers/sampleview.js

@@ -11,7 +11,6 @@ const INITIAL_STATE = {
   videoURL: '',
   sourceIsScalable: false,
   videoSizes: [],
-  autoScale: true,
   imageRatio: 0,
   pixelsPerMm: [0, 0],
   sourceScale: 1,
@@ -21,7 +20,6 @@ const INITIAL_STATE = {
   beamPosition: [0, 0],
   beamShape: 'ellipse',
   beamSize: { x: 0, y: 0 },
-  cinema: false,
   phaseList: [],
   drawGrid: false,
   videoMessageOverlay: { show: false, msg: '' },
@@ -32,9 +30,6 @@ const INITIAL_STATE = {
 // eslint-disable-next-line complexity
 function sampleViewReducer(state = INITIAL_STATE, action = {}) {
   switch (action.type) {
-    case 'TOOGLE_CINEMA': {
-      return { ...state, cinema: !state.cinema };
-    }
     case 'SET_PIXELS_PER_MM': {
       return { ...state, pixelsPerMm: action.pixelsPerMm };
     }
@@ -99,10 +94,6 @@ function sampleViewReducer(state = INITIAL_STATE, action = {}) {
     case 'SET_VIDEO_SIZE': {
       return { ...state, videoSize: action.width };
     }
-    case 'TOGGLE_AUTO_SCALE': {
-      const imageRatio = state.autoScale ? 1 : action.width / state.width;
-      return { ...state, autoScale: !state.autoScale, imageRatio };
-    }
     case 'SET_APERTURE': {
       return { ...state, currentAperture: action.size };
     }