@ohif/app 3.8.0-beta.8 → 3.8.0-beta.80

package/dist/{530.bundle.a03b6f942ace3e1baa1e.js → 835.bundle.15aff0b7433bb0dd6d6d.js}

@@ -1,25 +1,25 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[530],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[835],{
 
-/***/ 44530:
+/***/ 6835:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  eO: () => (/* reexport */ useMachine)
+  zl: () => (/* reexport */ useMachine)
 });
 
 // UNUSED EXPORTS: createActorContext, shallowEqual, useActor, useInterpret, useSelector, useSpawn
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(43001);
+var react = __webpack_require__(41766);
 // EXTERNAL MODULE: ../../../node_modules/use-sync-external-store/shim/with-selector.js
-var with_selector = __webpack_require__(56901);
+var with_selector = __webpack_require__(33724);
 // EXTERNAL MODULE: ../../../node_modules/xstate/es/index.js + 22 modules
-var es = __webpack_require__(261);
+var es = __webpack_require__(57593);
 // EXTERNAL MODULE: ../../../node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js
-var use_isomorphic_layout_effect_browser_esm = __webpack_require__(89067);
+var use_isomorphic_layout_effect_browser_esm = __webpack_require__(96025);
 ;// CONCATENATED MODULE: ../../../node_modules/@xstate/react/es/useConstant.js
 
 function useConstant_useConstant(fn) {
@@ -89,12 +89,12 @@ function useIdleInterpreter(getMachine, options) {
             delays: delays
         };
         var machineWithConfig = machine.withConfig(machineConfig, function () { return (__assign(__assign({}, machine.context), context)); });
-        return (0,es/* interpret */.kJ)(machineWithConfig, interpreterOptions);
+        return (0,es/* interpret */.U4)(machineWithConfig, interpreterOptions);
     });
     // Make sure options are kept updated when they change.
     // This mutation assignment is safe because the service instance is only used
     // in one place -- this hook's caller.
-    (0,use_isomorphic_layout_effect_browser_esm/* default */.Z)(function () {
+    (0,use_isomorphic_layout_effect_browser_esm/* default */.A)(function () {
         Object.assign(service.machine.options.actions, actions);
         Object.assign(service.machine.options.guards, guards);
         Object.assign(service.machine.options.activities, activities);
@@ -221,7 +221,7 @@ function utils_isService(actor) {
     return 'state' in actor && 'machine' in actor;
 }
 function utils_isInterpreterStateEqual(service, prevState, nextState) {
-    if (service.status === es/* InterpreterStatus */.TM.NotStarted) {
+    if (service.status === es/* InterpreterStatus */.vy.NotStarted) {
         return true;
     }
     // Only change the current state if:
@@ -270,9 +270,9 @@ function useMachine(getMachine) {
     // so we don't miss any notifications
     var service = useIdleInterpreter(getMachine, options);
     var getSnapshot = (0,react.useCallback)(function () {
-        if (service.status === es/* InterpreterStatus */.TM.NotStarted) {
+        if (service.status === es/* InterpreterStatus */.vy.NotStarted) {
             return (options.state
-                ? es/* State */.ZM.create(options.state)
+                ? es/* State */.Uw.create(options.state)
                 : service.machine.initialState);
         }
         return service.getSnapshot();
@@ -287,10 +287,10 @@ function useMachine(getMachine) {
     var storeSnapshot = (0,with_selector.useSyncExternalStoreWithSelector)(subscribe, getSnapshot, getSnapshot, identity, isEqual);
     (0,react.useEffect)(function () {
         var rehydratedState = options.state;
-        service.start(rehydratedState ? es/* State */.ZM.create(rehydratedState) : undefined);
+        service.start(rehydratedState ? es/* State */.Uw.create(rehydratedState) : undefined);
         return function () {
             service.stop();
-            service.status = es/* InterpreterStatus */.TM.NotStarted;
+            service.status = es/* InterpreterStatus */.vy.NotStarted;
         };
     }, []);
     return [storeSnapshot, service.send, service];
@@ -477,7 +477,7 @@ function createActorContext(machine, interpreterOptions, observerOrListener) {
 
 /***/ }),
 
-/***/ 17145:
+/***/ 2465:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 /**
@@ -489,13 +489,13 @@ function createActorContext(machine, interpreterOptions, observerOrListener) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var e=__webpack_require__(43001);function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
+var e=__webpack_require__(41766);function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d}
 function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u;
 
 
 /***/ }),
 
-/***/ 1594:
+/***/ 2878:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 /**
@@ -507,51 +507,51 @@ function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f)
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var h=__webpack_require__(43001),n=__webpack_require__(75011);function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
+var h=__webpack_require__(41766),n=__webpack_require__(28178);function p(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var q="function"===typeof Object.is?Object.is:p,r=n.useSyncExternalStore,t=h.useRef,u=h.useEffect,v=h.useMemo,w=h.useDebugValue;
 exports.useSyncExternalStoreWithSelector=function(a,b,e,l,g){var c=t(null);if(null===c.current){var f={hasValue:!1,value:null};c.current=f}else f=c.current;c=v(function(){function a(a){if(!c){c=!0;d=a;a=l(a);if(void 0!==g&&f.hasValue){var b=f.value;if(g(b,a))return k=b}return k=a}b=k;if(q(d,a))return b;var e=l(a);if(void 0!==g&&g(b,e))return b;d=a;return k=e}var c=!1,d,k,m=void 0===e?null:e;return[function(){return a(b())},null===m?void 0:function(){return a(m())}]},[b,e,l,g]);var d=r(a,c[0],c[1]);
 u(function(){f.hasValue=!0;f.value=d},[d]);w(d);return d};
 
 
 /***/ }),
 
-/***/ 75011:
+/***/ 28178:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 
 
 if (true) {
-  module.exports = __webpack_require__(17145);
+  module.exports = __webpack_require__(2465);
 } else {}
 
 
 /***/ }),
 
-/***/ 56901:
+/***/ 33724:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 
 
 if (true) {
-  module.exports = __webpack_require__(1594);
+  module.exports = __webpack_require__(2878);
 } else {}
 
 
 /***/ }),
 
-/***/ 261:
+/***/ 57593:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  TM: () => (/* reexport */ InterpreterStatus),
-  J: () => (/* reexport */ Machine),
-  ZM: () => (/* reexport */ State_State),
-  f0: () => (/* binding */ es_assign),
-  kJ: () => (/* reexport */ interpret)
+  vy: () => (/* reexport */ InterpreterStatus),
+  u5: () => (/* reexport */ Machine),
+  Uw: () => (/* reexport */ State_State),
+  kp: () => (/* binding */ es_assign),
+  U4: () => (/* reexport */ interpret)
 });
 
-// UNUSED EXPORTS: ActionTypes, Interpreter, SpecialTargets, StateNode, actions, choose, createMachine, createSchema, doneInvoke, forwardTo, log, mapState, matchState, matchesState, pure, raise, send, sendParent, sendTo, sendUpdate, spawn, spawnBehavior, stop, t, toActorRef, toEventObject, toObserver, toSCXMLEvent
+// UNUSED EXPORTS: ActionTypes, Interpreter, SpecialTargets, StateNode, actions, cancel, choose, createMachine, createSchema, doneInvoke, forwardTo, log, mapState, matchState, matchesState, pure, raise, send, sendParent, sendTo, sendUpdate, spawn, spawnBehavior, stop, t, toActorRef, toEventObject, toObserver, toSCXMLEvent
 
 ;// CONCATENATED MODULE: ../../../node_modules/xstate/es/_virtual/_tslib.js
 /*! *****************************************************************************
@@ -3744,7 +3744,13 @@ function () {
 
 
     scheduler.schedule(function () {
-      // it feels weird to handle this here but we need to handle this even slightly "out of band"
+      var _a;
+
+      if ((_a = _this._state) === null || _a === void 0 ? void 0 : _a.done) {
+        return;
+      } // it feels weird to handle this here but we need to handle this even slightly "out of band"
+
+
       var _event = toSCXMLEvent({
         type: 'xstate.stop'
       });
@@ -6194,6 +6200,7 @@ var t = (/* unused pure expression or super */ null && (createSchema));
 
 
 var es_assign = actions_assign,
+    es_cancel = (/* unused pure expression or super */ null && (cancel$1)),
     es_send = (/* unused pure expression or super */ null && (send$1)),
     es_sendTo = (/* unused pure expression or super */ null && (sendTo$1)),
     es_sendParent = (/* unused pure expression or super */ null && (sendParent$1)),

package/dist/{822.bundle.82cdc418f8f56da6060b.js → 862.bundle.c0ee6e1d4d97e1353213.js}

@@ -1,22 +1,21 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[822],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[862],{
 
-/***/ 86822:
+/***/ 49862:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(43001);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3827);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(41766);
+/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11374);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _ohif_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(71771);
-/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(22582);
-/* harmony import */ var react_i18next__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(69190);
-/* harmony import */ var _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14957);
-/* harmony import */ var _getContextModule__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(41832);
-/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3743);
+/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5085);
+/* harmony import */ var _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24542);
+/* harmony import */ var _getContextModule__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(219);
+/* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(44656);
+/* harmony import */ var react_i18next__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(80619);
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 
@@ -25,30 +24,30 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
-
-const {
-  formatDate
-} = _ohif_core__WEBPACK_IMPORTED_MODULE_2__.utils;
 function TrackedCornerstoneViewport(props) {
   const {
     displaySets,
     viewportId,
-    viewportLabel,
     servicesManager,
     extensionManager
   } = props;
-  const {
-    t
-  } = (0,react_i18next__WEBPACK_IMPORTED_MODULE_4__/* .useTranslation */ .$G)('Common');
   const {
     measurementService,
     cornerstoneViewportService,
-    viewportGridService
+    viewportGridService,
+    viewportActionCornersService
   } = servicesManager.services;
 
   // Todo: handling more than one displaySet on the same viewport
   const displaySet = displaySets[0];
-  const [trackedMeasurements, sendTrackedMeasurementsEvent] = (0,_getContextModule__WEBPACK_IMPORTED_MODULE_6__/* .useTrackedMeasurements */ .I)();
+  const {
+    t
+  } = (0,react_i18next__WEBPACK_IMPORTED_MODULE_6__/* .useTranslation */ .Bd)('Common');
+  const [viewportGrid] = (0,_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .useViewportGrid */ .ih)();
+  const {
+    activeViewportId
+  } = viewportGrid;
+  const [trackedMeasurements, sendTrackedMeasurementsEvent] = (0,_getContextModule__WEBPACK_IMPORTED_MODULE_4__/* .useTrackedMeasurements */ .B)();
   const [isTracked, setIsTracked] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const [trackedMeasurementUID, setTrackedMeasurementUID] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
   const [viewportElem, setViewportElem] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
@@ -56,24 +55,11 @@ function TrackedCornerstoneViewport(props) {
     trackedSeries
   } = trackedMeasurements.context;
   const {
-    SeriesDate,
-    SeriesDescription,
-    SeriesInstanceUID,
-    SeriesNumber
+    SeriesInstanceUID
   } = displaySet;
-  const {
-    PatientID,
-    PatientName,
-    PatientSex,
-    PatientAge,
-    SliceThickness,
-    SpacingBetweenSlices,
-    StudyDate,
-    ManufacturerModelName
-  } = displaySet.images[0];
   const updateIsTracked = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
     const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport instanceof _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_7__.BaseVolumeViewport) {
+    if (viewport instanceof _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_5__.BaseVolumeViewport) {
       // A current image id will only exist for volume viewports that can have measurements tracked.
       // Typically these are those volume viewports for the series of acquisition.
       const currentImageId = viewport?.getCurrentImageId();
@@ -91,12 +77,12 @@ function TrackedCornerstoneViewport(props) {
   const onElementEnabled = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(evt => {
     if (evt.detail.element !== viewportElem) {
       // The VOLUME_VIEWPORT_NEW_VOLUME event allows updateIsTracked to reliably fetch the image id for a volume viewport.
-      evt.detail.element?.addEventListener(_cornerstonejs_core__WEBPACK_IMPORTED_MODULE_7__.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, updateIsTracked);
+      evt.detail.element?.addEventListener(_cornerstonejs_core__WEBPACK_IMPORTED_MODULE_5__.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, updateIsTracked);
       setViewportElem(evt.detail.element);
     }
   }, [updateIsTracked, viewportElem]);
   const onElementDisabled = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
-    viewportElem?.removeEventListener(_cornerstonejs_core__WEBPACK_IMPORTED_MODULE_7__.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, updateIsTracked);
+    viewportElem?.removeEventListener(_cornerstonejs_core__WEBPACK_IMPORTED_MODULE_5__.Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME, updateIsTracked);
   }, [updateIsTracked, viewportElem]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(updateIsTracked, [updateIsTracked]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -114,7 +100,7 @@ function TrackedCornerstoneViewport(props) {
   }, [updateIsTracked, viewportId]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     if (isTracked) {
-      _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_5__.annotation.config.style.setViewportToolStyles(viewportId, {
+      _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_3__.annotation.config.style.setViewportToolStyles(viewportId, {
         global: {
           lineDash: ''
         }
@@ -122,14 +108,14 @@ function TrackedCornerstoneViewport(props) {
       cornerstoneViewportService.getRenderingEngine().renderViewport(viewportId);
       return;
     }
-    _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_5__.annotation.config.style.setViewportToolStyles(viewportId, {
+    _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_3__.annotation.config.style.setViewportToolStyles(viewportId, {
       global: {
         lineDash: '4,4'
       }
     });
     cornerstoneViewportService.getRenderingEngine().renderViewport(viewportId);
     return () => {
-      _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_5__.annotation.config.style.setViewportToolStyles(viewportId, {});
+      _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_3__.annotation.config.style.setViewportToolStyles(viewportId, {});
     };
   }, [isTracked]);
 
@@ -145,11 +131,10 @@ function TrackedCornerstoneViewport(props) {
     const addedRaw = measurementService.EVENTS.RAW_MEASUREMENT_ADDED;
     const subscriptions = [];
     [added, addedRaw].forEach(evt => {
-      subscriptions.push(measurementService.subscribe(evt, _ref => {
-        let {
-          source,
-          measurement
-        } = _ref;
+      subscriptions.push(measurementService.subscribe(evt, ({
+        source,
+        measurement
+      }) => {
         const {
           activeViewportId
         } = viewportGridService.getState();
@@ -160,7 +145,8 @@ function TrackedCornerstoneViewport(props) {
         if (viewportId === activeViewportId) {
           const {
             referenceStudyUID: StudyInstanceUID,
-            referenceSeriesUID: SeriesInstanceUID
+            referenceSeriesUID: SeriesInstanceUID,
+            uid: measurementId
           } = measurement;
           sendTrackedMeasurementsEvent('SET_DIRTY', {
             SeriesInstanceUID
@@ -168,7 +154,8 @@ function TrackedCornerstoneViewport(props) {
           sendTrackedMeasurementsEvent('TRACK_SERIES', {
             viewportId,
             StudyInstanceUID,
-            SeriesInstanceUID
+            SeriesInstanceUID,
+            measurementId
           });
         }
       }).unsubscribe);
@@ -179,14 +166,31 @@ function TrackedCornerstoneViewport(props) {
       });
     };
   }, [measurementService, sendTrackedMeasurementsEvent, viewportId, viewportGridService]);
-  function switchMeasurement(direction) {
+  const switchMeasurement = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(direction => {
     const newTrackedMeasurementUID = _getNextMeasurementUID(direction, servicesManager, trackedMeasurementUID, trackedMeasurements);
     if (!newTrackedMeasurementUID) {
       return;
     }
     setTrackedMeasurementUID(newTrackedMeasurementUID);
     measurementService.jumpToMeasurement(viewportId, newTrackedMeasurementUID);
-  }
+  }, [measurementService, servicesManager, trackedMeasurementUID, trackedMeasurements, viewportId]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const statusComponent = _getStatusComponent(isTracked, t);
+    const arrowsComponent = _getArrowsComponent(isTracked, switchMeasurement, viewportId === activeViewportId);
+    viewportActionCornersService.setComponents([{
+      viewportId,
+      id: 'viewportStatusComponent',
+      component: statusComponent,
+      indexPriority: -100,
+      location: viewportActionCornersService.LOCATIONS.topLeft
+    }, {
+      viewportId,
+      id: 'viewportActionArrowsComponent',
+      component: arrowsComponent,
+      indexPriority: 0,
+      location: viewportActionCornersService.LOCATIONS.topRight
+    }]);
+  }, [activeViewportId, isTracked, switchMeasurement, viewportActionCornersService, viewportId]);
   const getCornerstoneViewport = () => {
     const {
       component: Component
@@ -196,32 +200,7 @@ function TrackedCornerstoneViewport(props) {
       onElementDisabled: onElementDisabled
     }));
   };
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_3__/* .ViewportActionBar */ .uY, {
-    onDoubleClick: evt => {
-      evt.stopPropagation();
-      evt.preventDefault();
-    },
-    useAltStyling: isTracked,
-    onArrowsClick: direction => switchMeasurement(direction),
-    getStatusComponent: () => _getStatusComponent(isTracked),
-    studyData: {
-      label: viewportLabel,
-      studyDate: formatDate(SeriesDate) || formatDate(StudyDate) || t('NoStudyDate'),
-      currentSeries: SeriesNumber,
-      // TODO - switch entire currentSeries to be UID based or actual position based
-      seriesDescription: SeriesDescription,
-      patientInformation: {
-        patientName: PatientName ? _ohif_core__WEBPACK_IMPORTED_MODULE_2__["default"].utils.formatPN(PatientName) : '',
-        patientSex: PatientSex || '',
-        patientAge: PatientAge || '',
-        MRN: PatientID || '',
-        thickness: SliceThickness ? `${parseFloat(SliceThickness).toFixed(2)}` : '',
-        thicknessUnits: 'mm',
-        spacing: SpacingBetweenSlices !== undefined ? `${parseFloat(SpacingBetweenSlices).toFixed(2)}mm` : '',
-        scanner: ManufacturerModelName || ''
-      }
-    }
-  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
     className: "relative flex h-full w-full flex-row overflow-hidden"
   }, getCornerstoneViewport()));
 }
@@ -269,45 +248,47 @@ function _getNextMeasurementUID(direction, servicesManager, trackedMeasurementId
     // Not tracking a measurement, or previous measurement now deleted, revert to 0.
     measurementIndex = 0;
   } else {
-    if (direction === 'left') {
-      measurementIndex--;
-      if (measurementIndex < 0) {
-        measurementIndex = measurementCount - 1;
-      }
-    } else if (direction === 'right') {
-      measurementIndex++;
-      if (measurementIndex === measurementCount) {
-        measurementIndex = 0;
-      }
+    measurementIndex += direction;
+    if (measurementIndex < 0) {
+      measurementIndex = measurementCount - 1;
+    } else if (measurementIndex === measurementCount) {
+      measurementIndex = 0;
     }
   }
   const newTrackedMeasurementId = uids[measurementIndex];
   return newTrackedMeasurementId;
 }
-function _getStatusComponent(isTracked) {
-  const trackedIcon = isTracked ? 'status-tracked' : 'status-untracked';
+const _getArrowsComponent = (isTracked, switchMeasurement, isActiveViewport) => {
+  if (!isTracked) {
+    return null;
+  }
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .ViewportActionArrows */ .$I, {
+    onArrowsClick: direction => switchMeasurement(direction),
+    className: isActiveViewport ? 'visible' : 'invisible group-hover:visible'
+  });
+};
+function _getStatusComponent(isTracked, t) {
+  if (!isTracked) {
+    return null;
+  }
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
     className: "relative"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_3__/* .Tooltip */ .u, {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .Tooltip */ .m_, {
     position: "bottom-left",
     content: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
       className: "flex py-2"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
       className: "flex pt-1"
-    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_3__/* .Icon */ .JO, {
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .Icon */ .In, {
       name: "info-link",
       className: "text-primary-main w-4"
     })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", {
       className: "ml-4 flex"
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
       className: "text-common-light text-base"
-    }, isTracked ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, "Series is", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
-      className: "font-bold text-white"
-    }, " tracked"), " and can be viewed ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("br", null), ' ', "in the measurement panel") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, "Measurements for", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("span", {
-      className: "font-bold text-white"
-    }, " untracked "), "series ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("br", null), " will not be shown in the ", /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("br", null), " measurements panel"))))
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_3__/* .Icon */ .JO, {
-    name: trackedIcon,
+    }, isTracked ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, t('Series is tracked and can be viewed in the measurement panel')) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, t('Measurements for untracked series will not be shown in the measurements panel')))))
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement(_ohif_ui__WEBPACK_IMPORTED_MODULE_2__/* .Icon */ .In, {
+    name: 'viewport-status-tracked',
     className: "text-aqua-pale"
   })));
 }