wip on react transition 8

Packages/ohif-viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.js

@@ -48,7 +48,7 @@ Template.thumbnailEntry.events({
         // Get the viewport index
         let { viewportIndex } = instance.data;
         if (_.isUndefined(viewportIndex)) {
-            viewportIndex = Session.get('activeViewport') || 0;
+            viewportIndex = window.store.getState().viewports.activeViewport || 0;
         }
 
         // Rerender the viewport using the clicked thumbnail data
@@ -61,7 +61,7 @@ Template.thumbnailEntry.events({
 
         // Get the active viewport index and total number of viewports...
         const viewportCount = OHIF.viewerbase.layoutManager.getNumberOfViewports();
-        let viewportIndex = Session.get('activeViewport') || 0;
+        let viewportIndex = window.store.getState().viewports.activeViewport || 0;
         if (viewportIndex >= viewportCount) {
             viewportIndex = viewportCount > 0 ? viewportCount - 1 : 0;
         }

Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/CornerstoneViewport.styl

@@ -3,6 +3,10 @@
 .CornerstoneViewport
   width: 100%
   height: 100%
+
+.viewport-element
+  width: 100%
+  height: 100%
   position: relative;
   background-color: black
 

Packages/ohif-viewerbase/client/components/viewer/CornerstoneViewport/imageViewerViewport.js

@@ -413,7 +413,7 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
             // Check if the current active viewport in the Meteor Session
             // Is the same as the viewport in which the activation event was fired.
             // If it was, no changes are necessary, so stop here.
-            const activeViewportIndex = Session.get('activeViewport');
+            const activeViewportIndex = window.store.getState().viewports.activeViewport;
             if (viewportIndex === activeViewportIndex) return;
 
             $element.focus();
@@ -473,7 +473,7 @@ const loadDisplaySetIntoViewport = (data, templateData) => {
         // Set the active viewport based on the Session variable
         // This is done to ensure that the active element has the current
         // focus, so that keyboard events are triggered.
-        if (viewportIndex === Session.get('activeViewport')) {
+        if (viewportIndex === window.store.getState().viewports.activeViewport) {
             const viewportContainer = $element.parents('.viewportContainer');
 
             setActiveViewport(viewportContainer);
@@ -563,7 +563,7 @@ Template.imageViewerViewport.onRendered(function() {
 
     // Get the current active viewport index, if this viewport has the same index,
     // add the CSS 'active' class to highlight this viewport.
-    const activeViewport = Session.get('activeViewport');
+    const activeViewport = window.store.getState().viewports.activeViewport;
 
     // Focus the viewport if it's the active one
     if (templateData.viewportIndex === activeViewport) {

Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.js

@@ -2,42 +2,129 @@ import { Component } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import './ViewportOverlay.styl';
+import { viewportOverlayUtils } from '../../../lib/viewportOverlayUtils';
+import { helpers } from '../../../lib/helpers/index.js';
+const { formatPN, formatDA, formatNumberPrecision, formatTM, isValidNumber} = helpers;
+
+function getCompression(imageId) {
+  const instance = cornerstone.metaData.get('instance', imageId);
+  if (!instance) {
+      return '';
+  }
+
+  if (instance.lossyImageCompression === '01' &&
+      instance.lossyImageCompressionRatio !== '') {
+      const compressionMethod = instance.lossyImageCompressionMethod || 'Lossy: ';
+      const compressionRatio = formatNumberPrecision(instance.lossyImageCompressionRatio, 2);
+      return compressionMethod + compressionRatio + ' : 1';
+  }
+
+  return 'Lossless / Uncompressed';
+}
+
+function getImageDimensions(imageId) {
+  const instance = cornerstone.metaData.get('instance', imageId)
+  if (!instance) {
+      return '';
+  }
+
+  return `${instance.columns} x ${instance.rows}`;
+}
 
 class ViewportOverlay extends Component {
   render() {
-    const scale = Math.round(this.props.viewport.scale * 100) / 100;
+    const zoom = this.props.viewport.scale * 100;
     const imageId = this.props.imageId;
 
-    /*const patientId = cornerstone.metaData.get('00100020', imageId);
-    const studyDate = cornerstone.metaData.get('00080020', imageId);
-    const collection = cornerstone.metaData.get('00131010', imageId);
-    const studyDescription = cornerstone.metaData.get('00081030', imageId);*/
+    const patientMetadata = cornerstone.metaData.get('patient', imageId);
+    const studyMetadata = cornerstone.metaData.get('study', imageId);
+    const seriesMetadata = cornerstone.metaData.get('series', imageId);
+    const instanceMetadata = cornerstone.metaData.get('instance', imageId);
 
-    const windowWidth = Math.round(this.props.viewport.voi.windowWidth);
-    const windowCenter = Math.round(this.props.viewport.voi.windowCenter);
-    const imagesLeft =
-      this.props.stack.imageIds.length - this.props.numImagesLoaded;
+    const patientName = patientMetadata.name;
+    const patientId = patientMetadata.id;;
+    const { studyDate, studyTime, studyDescription } = studyMetadata;
+    const { seriesNumber, seriesDescription } = seriesMetadata;
+    const { instanceNumber, frameTime, thickness, spacingBetweenSlices, sliceLocation } = instanceMetadata;
+    const frameRate = formatNumberPrecision(1000 / frameTime, 1);
+    const compression = getCompression(imageId);
+    const windowWidth = this.props.viewport.voi.windowWidth || 0;
+    const windowCenter = this.props.viewport.voi.windowCenter || 0;
+    const wwwc = `W: ${windowWidth.toFixed(0)} L: ${windowCenter.toFixed(0)}`;
+    const imageIndex = this.props.stack.imageIds.indexOf(this.props.imageId) + 1;
+    const numImages = this.props.stack.imageIds.length;
+    const imageDimensions = getImageDimensions(imageId);
+
+    const normal = (<>
+      <div className="top-left overlay-element">
+          <div>{formatPN(patientName)}</div>
+          <div>{patientId}</div>
+      </div>
+      <div className="top-right overlay-element">
+          <div>{studyDescription}</div>
+          <div>{formatDA(studyDate)} {formatTM(studyTime)}</div>
+      </div>
+      <div className="bottom-right overlay-element">
+        <div>Zoom: {formatNumberPrecision(zoom,0)}%</div>
+            <div className="compressionIndicator">{compression}</div>
+            <div>{wwwc}</div>
+        </div>
+        <div className="bottom-left overlay-element">
+            <div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
+            <div>{numImages > 1 ? `Img: ${instanceNumber} ${imageIndex}/${numImages}` : ''}</div>
+            <div>{frameRate >= 0 ? `${formatNumberPrecision(frameRate, 2)} FPS` : ''}
+            <div>{imageDimensions}</div>
+            <div>
+              <span>{isValidNumber(sliceLocation) ? `Loc: ${formatNumberPrecision(sliceLocation, 2)} mm` : ''}</span>
+              <span>{thickness ? `Thick: ${formatNumberPrecision(thickness, 2)} mm` : ''}</span>
+              <span>{spacingBetweenSlices ? `Spacing: ${formatNumberPrecision(spacingBetweenSlices, 2)} mm` : ''}</span>
+            </div>
+            <div>{seriesDescription}</div>
+        </div>
+      </div>
+    </>);
+
+    const rightOnly = (<>
+      <div className="top-right overlay-element">
+        <div>{formatPN(patientName)}</div>
+        <div>{patientId}</div>
+        <div>{studyDescription}</div>
+        <div>{formatDA(studyDate)} {formatTM(studyTime)}</div>
+      </div>
+      <div className="bottom-right overlay-element">
+        <div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
+        <div>{numImages > 1 ? `Img: ${instanceNumber} ${imageIndex}/${numImages}` : ''}</div>
+        <div>{frameRate >= 0 ? `${formatNumberPrecision(frameRate, 2)} FPS` : ''}</div>
+        <div>{imageDimensions}</div>
+        <div>{seriesDescription}</div>
+        <div>Zoom: ${formatNumberPrecision(zoom, 0)}%</div>
+        <div className="compressionIndicator">{compression}</div>
+        <div>{wwwc}</div>
+      </div>
+    </>);
+
+    const leftOnly = (<>
+      <div className="top-left overlay-element">
+        <div>{formatPN(patientName)}</div>
+        <div>{patientId}</div>
+        <div>{studyDescription}</div>
+        <div>{formatDA(studyDate)} {formatTM(studyTime)}</div>
+      </div>
+      <div className="bottom-left overlay-element">
+        <div>{seriesNumber >= 0 ? `Ser: ${seriesNumber}` : ''}</div>
+        <div>{numImages > 1 ? `Img: ${instanceNumber} ${imageIndex}/${numImages}` : ''}</div>
+        <div>{frameRate >= 0 ? `${formatNumberPrecision(frameRate, 2)} FPS` : ''}</div>
+        <div>{imageDimensions}</div>
+        <div>{seriesDescription}</div>
+        <div>Zoom: ${formatNumberPrecision(zoom, 0)}%</div>
+        <div className="compressionIndicator">{compression}</div>
+        <div>{wwwc}</div>
+      </div>
+    </>);
 
     return (
-      <div className="ViewportOverlay">
-        <div className="top-left overlay-element">
-          <span>{this.props.patientId}</span>
-          <span>{this.props.studyDate}</span>
-          <span>{this.props.studyDescription}</span>
-          <span>
-            {imagesLeft > 0 ? `${imagesLeft} images remaining...` : ''}
-          </span>
-        </div>
-        <div className="bottom-left overlay-element">Zoom: {scale}</div>
-        <div className="bottom-right overlay-element">
-          <span>
-            WW/WC: {windowWidth} / {windowCenter}
-          </span>
-          <span>
-            Image: {this.props.stack.currentImageIdIndex + 1} /{' '}
-            {this.props.stack.imageIds.length}
-          </span>
-        </div>
+      <div className='ViewportOverlay'>
+        {normal}
       </div>
     );
   }

Packages/ohif-viewerbase/client/components/viewer/ViewportOverlay/ViewportOverlay.styl

@@ -2,10 +2,10 @@
 
 $viewportTagPadding = 20px
 
-.imageViewerViewport.empty ~ .imageViewerViewportOverlay
+.imageViewerViewport.empty ~ .ViewportOverlay
   display: none
 
-.imageViewerViewportOverlay
+.ViewportOverlay
   theme('color', '$textSecondaryColor')
 
   .overlay-element

Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.js

@@ -88,7 +88,7 @@ Template.cineDialog.onCreated(() => {
 
     // Run this computation every time the active viewport is changed
     instance.autorun(() => {
-        Session.get('activeViewport');
+        window.store.getState().viewports.activeViewport;
 
         Tracker.afterFlush(() => {
             // Get the active viewportElement

Packages/ohif-viewerbase/client/components/viewer/toolbarSectionButton/toolbarSectionButton.js

@@ -100,7 +100,7 @@ Template.toolbarSectionButton.helpers({
     },
 
     disableButton() {
-        Session.get('activeViewport');
+        window.store.getState().viewports.activeViewport;
         Session.get('LayoutManagerUpdated');
         const instance = Template.instance();
         const isCommandDisabled = OHIF.commands.isDisabled(instance.data.id);