viewportLabels for panel

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { StudyBrowser, useImageViewer } from '@ohif/ui';
+import { StudyBrowser, useImageViewer, useViewportGrid } from '@ohif/ui';
 import { useTrackedMeasurements } from '../../getContextModule';
 
 /**
@@ -19,6 +19,7 @@ function PanelStudyBrowserTracking({
   // doesn't have to have such an intense shape. This works well enough for now.
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const [{ StudyInstanceUIDs }, dispatchImageViewer] = useImageViewer();
+  const [{ viewports }, dispatchViewportGrid] = useViewportGrid();
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,
@@ -109,7 +110,8 @@ function PanelStudyBrowserTracking({
     const mappedDisplaySets = _mapDisplaySets(
       currentDisplaySets,
       thumbnailImageSrcMap,
-      trackedSeries
+      trackedSeries,
+      viewports
     );
 
     setDisplaySets(mappedDisplaySets);
@@ -117,6 +119,7 @@ function PanelStudyBrowserTracking({
     DisplaySetService.activeDisplaySets,
     trackedSeries,
     thumbnailImageSrcMap,
+    viewports,
   ]);
 
   // ~~ subscriptions --> displaySets
@@ -152,7 +155,8 @@ function PanelStudyBrowserTracking({
         const mappedDisplaySets = _mapDisplaySets(
           changedDisplaySets,
           thumbnailImageSrcMap,
-          trackedSeries
+          trackedSeries,
+          viewports,
         );
 
         setDisplaySets(mappedDisplaySets);
@@ -169,6 +173,7 @@ function PanelStudyBrowserTracking({
     getImageSrc,
     thumbnailImageSrcMap,
     trackedSeries,
+    viewports,
   ]);
 
   const tabs = _createStudyBrowserTabs(
@@ -250,10 +255,17 @@ function _mapDataSourceStudies(studies) {
 function _mapDisplaySets(
   displaySets,
   thumbnailImageSrcMap,
-  trackedSeriesInstanceUIDs
+  trackedSeriesInstanceUIDs,
+  viewports // TODO: make array of `displaySetInstanceUIDs`?
 ) {
   return displaySets.map(ds => {
+    const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
+      vp => vp.displaySetInstanceUID === ds.displaySetInstanceUID
+    );
+    const viewportIdentificator =
+      _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid] || '';
     const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
+
     return {
       displaySetInstanceUID: ds.displaySetInstanceUID,
       description: ds.SeriesDescription,
@@ -270,10 +282,13 @@ function _mapDisplaySets(
         // .. Any other data to pass
       },
       isTracked: trackedSeriesInstanceUIDs.includes(ds.SeriesInstanceUID),
+      viewportIdentificator,
     };
   });
 }
 
+const _viewportLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
+
 /**
  *
  * @param {string[]} primaryStudyInstanceUIDs

extensions/measurement-tracking/src/viewports/OHIFCornerstoneViewport.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF, { DicomMetadataStore } from '@ohif/core';
-import { ViewportActionBar } from '@ohif/ui';
+import { ViewportActionBar, useViewportGrid } from '@ohif/ui';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 import { useTrackedMeasurements } from './../getContextModule';
@@ -23,6 +23,7 @@ function OHIFCornerstoneViewport({
   viewportIndex,
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
+  const [{ viewports }, dispatchViewportGrid] = useViewportGrid();
   const [viewportData, setViewportData] = useState(null);
   // TODO: Still needed? Better way than import `OHIF` and destructure?
   // Why is this managed by `core`?
@@ -101,6 +102,10 @@ function OHIFCornerstoneViewport({
   // const seriesMeta = DicomMetadataStore.getSeries(this.props.displaySet.StudyInstanceUID, '');
   // console.log(seriesMeta);
 
+  // TODO: Share this logic so it isn't out of sync where we retrieve
+  const firstViewportIndexWithMatchingDisplaySetUid = viewports.findIndex(
+    vp => vp.displaySetInstanceUID === displaySet.displaySetInstanceUID
+  );
   const { trackedSeries } = trackedMeasurements.context;
   const {
     Modality,
@@ -122,7 +127,7 @@ function OHIFCornerstoneViewport({
       <ViewportActionBar
         onSeriesChange={direction => alert(`Series ${direction}`)}
         studyData={{
-          label: '',
+          label: _viewportLabels[firstViewportIndexWithMatchingDisplaySetUid],
           isTracked: trackedSeries.includes(SeriesInstanceUID),
           isLocked: false,
           studyDate: SeriesDate, // TODO: This is series date. Is that ok?
@@ -167,6 +172,8 @@ OHIFCornerstoneViewport.defaultProps = {
   customProps: {},
 };
 
+const _viewportLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
+
 /**
  * Obtain the CornerstoneTools Stack for the specified display set.
  *