feat(grid): remove viewportIndex and only rely on viewportId (#3591)

Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx

@@ -49,12 +49,12 @@ class DicomMicroscopyViewport extends Component {
 
   static propTypes = {
     viewportData: PropTypes.object,
-    activeViewportIndex: PropTypes.number,
+    activeViewportId: PropTypes.string,
     setViewportActive: PropTypes.func,
 
     // props from OHIF Viewport Grid
     displaySets: PropTypes.array,
-    viewportIndex: PropTypes.number,
+    viewportId: PropTypes.string,
     viewportLabel: PropTypes.string,
     dataSource: PropTypes.object,
     viewportOptions: PropTypes.object,
@@ -230,7 +230,7 @@ class DicomMicroscopyViewport extends Component {
 
       this.managedViewer = this.microscopyService.addViewer(
         this.viewer,
-        this.props.viewportIndex,
+        this.props.viewportId,
         container,
         StudyInstanceUID,
         SeriesInstanceUID
@@ -259,8 +259,10 @@ class DicomMicroscopyViewport extends Component {
   }
 
   componentDidMount() {
-    const { displaySets, viewportIndex } = this.props;
-    const displaySet = displaySets[viewportIndex];
+    const { displaySets, viewportOptions } = this.props;
+    const { viewportId } = viewportOptions;
+    // Todo-rename: this is always getting the 0
+    const displaySet = displaySets[0];
     this.installOpenLayersRenderer(this.container.current, displaySet).then(
       () => {
         this.setState({ isLoaded: true });
@@ -295,14 +297,10 @@ class DicomMicroscopyViewport extends Component {
   }
 
   setViewportActiveHandler = () => {
-    const {
-      setViewportActive,
-      viewportIndex,
-      activeViewportIndex,
-    } = this.props;
+    const { setViewportActive, viewportId, activeViewportId } = this.props;
 
-    if (viewportIndex !== activeViewportIndex) {
-      setViewportActive(viewportIndex);
+    if (viewportId !== activeViewportId) {
+      setViewportActive(viewportId);
     }
   };
 

extensions/dicom-microscopy/src/components/MicroscopyPanel/MicroscopyPanel.tsx

@@ -52,7 +52,7 @@ const formatLength = (length, unit) => {
 
 interface IMicroscopyPanelProps extends WithTranslation {
   viewports: PropTypes.array;
-  activeViewportIndex: PropTypes.number;
+  activeViewportId: PropTypes.string;
 
   //
   onSaveComplete?: PropTypes.func; // callback when successfully saved annotations
@@ -83,7 +83,7 @@ function MicroscopyPanel(props: IMicroscopyPanelProps) {
   const { uiDialogService, displaySetService } = servicesManager.services;
 
   useEffect(() => {
-    const viewport = props.viewports[props.activeViewportIndex];
+    const viewport = props.viewports[props.activeViewportId];
     if (viewport.displaySetInstanceUIDs[0]) {
       const displaySet = displaySetService.getDisplaySetByUID(
         viewport.displaySetInstanceUIDs[0]
@@ -92,7 +92,7 @@ function MicroscopyPanel(props: IMicroscopyPanelProps) {
         setStudyInstanceUID(displaySet.StudyInstanceUID);
       }
     }
-  }, [props.viewports, props.activeViewportIndex]);
+  }, [props.viewports, props.activeViewportId]);
 
   useEffect(() => {
     const onAnnotationUpdated = () => {
@@ -265,7 +265,7 @@ function MicroscopyPanel(props: IMicroscopyPanelProps) {
    */
   const onDeleteCurrentSRHandler = async () => {
     try {
-      const activeViewport = props.viewports[props.activeViewportIndex];
+      const activeViewport = props.viewports[props.activeViewportId];
       const { StudyInstanceUID } = activeViewport;
 
       // TODO: studies?
@@ -307,7 +307,7 @@ function MicroscopyPanel(props: IMicroscopyPanelProps) {
   const onMeasurementItemClickHandler = ({ uid }: { uid: string }) => {
     const roiAnnotation = microscopyService.getAnnotation(uid);
     microscopyService.selectAnnotation(roiAnnotation);
-    microscopyService.focusAnnotation(roiAnnotation, props.activeViewportIndex);
+    microscopyService.focusAnnotation(roiAnnotation, props.activeViewportId);
   };
 
   /**

extensions/dicom-microscopy/src/getCommandsModule.ts

@@ -122,19 +122,6 @@ export default function getCommandsModule({
         ]);
       }
     },
-
-    incrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
-      const nextViewportIndex = (activeViewportIndex + 1) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
-    },
-    decrementActiveViewport: () => {
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
-      const nextViewportIndex =
-        (activeViewportIndex - 1 + viewports.length) % viewports.length;
-      viewportGridService.setActiveViewportIndex(nextViewportIndex);
-    },
-
     toggleOverlays: () => {
       // overlay
       const overlays = document.getElementsByClassName(
@@ -149,8 +136,8 @@ export default function getCommandsModule({
       }
 
       // overview
-      const { activeViewportIndex, viewports } = viewportGridService.getState();
-      microscopyService.toggleOverviewMap(activeViewportIndex);
+      const { activeViewportId, viewports } = viewportGridService.getState();
+      microscopyService.toggleOverviewMap(activeViewportId);
     },
     toggleAnnotations: () => {
       microscopyService.toggleROIsVisibility();
@@ -173,14 +160,6 @@ export default function getCommandsModule({
       storeContexts: [] as any[],
       options: {},
     },
-    incrementActiveViewport: {
-      commandFn: actions.incrementActiveViewport,
-      storeContexts: [] as any[],
-    },
-    decrementActiveViewport: {
-      commandFn: actions.decrementActiveViewport,
-      storeContexts: [] as any[],
-    },
     toggleOverlays: {
       commandFn: actions.toggleOverlays,
       storeContexts: [] as any[],

extensions/dicom-microscopy/src/getPanelModule.tsx

@@ -18,15 +18,12 @@ export default function getPanelModule({
   extensionManager: ExtensionManager;
 }) {
   const wrappedMeasurementPanel = () => {
-    const [
-      { activeViewportIndex, viewports },
-      viewportGridService,
-    ] = useViewportGrid();
+    const [{ activeViewportId, viewports }] = useViewportGrid();
 
     return (
       <MicroscopyPanel
         viewports={viewports}
-        activeViewportIndex={activeViewportIndex}
+        activeViewportId={activeViewportId}
         onSaveComplete={() => {}}
         onRejectComplete={() => {}}
         commandsManager={commandsManager}

extensions/dicom-microscopy/src/index.tsx

@@ -52,7 +52,7 @@ export default {
      *
      * @param props {*}
      * @param props.displaySets
-     * @param props.viewportIndex
+     * @param props.viewportId
      * @param props.viewportLabel
      * @param props.dataSource
      * @param props.viewportOptions
@@ -63,16 +63,16 @@ export default {
       const { viewportOptions } = props;
 
       const [viewportGrid, viewportGridService] = useViewportGrid();
-      const { viewports, activeViewportIndex } = viewportGrid;
+      const { activeViewportId } = viewportGrid;
 
       return (
         <MicroscopyViewport
           servicesManager={servicesManager}
           extensionManager={extensionManager}
           commandsManager={commandsManager}
-          activeViewportIndex={activeViewportIndex}
-          setViewportActive={(viewportIndex: number) => {
-            viewportGridService.setActiveViewportIndex(viewportIndex);
+          activeViewportId={activeViewportId}
+          setViewportActive={(viewportId: string) => {
+            viewportGridService.setActiveViewportId(viewportId);
           }}
           viewportData={viewportOptions}
           {...props}

extensions/dicom-microscopy/src/services/MicroscopyService.ts

@@ -286,31 +286,31 @@ export default class MicroscopyService extends PubSubService {
   }
 
   /**
-   * Creates a managed viewer instance for the given thrid-party API's viewer.
+   * Creates a managed viewer instance for the given third-party API's viewer.
    * Restores existing annotations for the given study/series.
    * Adds event subscriptions for the viewer being added.
    * Focuses the selected annotation when the viewer is being loaded into the
    * active viewport.
    *
-   * @param {Object} viewer Third-party viewer API's object to be managed
-   * @param {Number} viewportIndex The index of the viewport to load the viewer
-   * @param {HTMLElement} container The DOM element where it will be renderd
-   * @param {String} studyInstanceUID The study UID of the loaded image
-   * @param {String} seriesInstanceUID The series UID of the loaded image
-   * @param {Array} displaySets All displaySets related to the same StudyInstanceUID
+   * @param viewer - Third-party viewer API's object to be managed
+   * @param viewportId - The viewport Id where the viewer will be loaded
+   * @param container - The DOM element where it will be rendered
+   * @param studyInstanceUID - The study UID of the loaded image
+   * @param seriesInstanceUID - The series UID of the loaded image
+   * @param displaySets - All displaySets related to the same StudyInstanceUID
    *
    * @returns {ViewerManager} managed viewer
    */
   addViewer(
     viewer,
-    viewportIndex,
+    viewportId,
     container,
     studyInstanceUID,
     seriesInstanceUID
   ) {
     const managedViewer = new ViewerManager(
       viewer,
-      viewportIndex,
+      viewportId,
       container,
       studyInstanceUID,
       seriesInstanceUID
@@ -325,7 +325,7 @@ export default class MicroscopyService extends PubSubService {
 
     if (this.pendingFocus) {
       this.pendingFocus = false;
-      this.focusAnnotation(this.selectedAnnotation, viewportIndex);
+      this.focusAnnotation(this.selectedAnnotation, viewportId);
     }
 
     return managedViewer;
@@ -502,13 +502,13 @@ export default class MicroscopyService extends PubSubService {
   /**
    * Toggles overview map
    *
-   * @param viewportIndex The active viewport index
+   * @param viewportId The active viewport index
    * @returns {void}
    */
-  toggleOverviewMap(viewportIndex) {
+  toggleOverviewMap(viewportId) {
     const managedViewers = Array.from(this.managedViewers);
     const managedViewer = managedViewers.find(
-      mv => mv.viewportIndex === viewportIndex
+      mv => mv.viewportId === viewportId
     );
     if (managedViewer) {
       managedViewer.toggleOverviewMap();
@@ -550,10 +550,10 @@ export default class MicroscopyService extends PubSubService {
    * the managed viewer instance is created.
    *
    * @param {RoiAnnotation} roiAnnotation RoiAnnotation instance to be focused
-   * @param {Number} viewportIndex Index of the viewport to focus
+   * @param {string} viewportId Index of the viewport to focus
    */
-  focusAnnotation(roiAnnotation, viewportIndex) {
-    const filter = mv => mv.viewportIndex === viewportIndex;
+  focusAnnotation(roiAnnotation, viewportId) {
+    const filter = mv => mv.viewportId === viewportId;
     const managedViewer = Array.from(this.managedViewers).find(filter);
     if (managedViewer) {
       managedViewer.setViewStateByExtent(roiAnnotation);

extensions/dicom-microscopy/src/tools/viewerManager.js

@@ -48,14 +48,14 @@ const EVENTS = {
 class ViewerManager extends PubSubService {
   constructor(
     viewer,
-    viewportIndex,
+    viewportId,
     container,
     studyInstanceUID,
     seriesInstanceUID
   ) {
     super(EVENTS);
     this.viewer = viewer;
-    this.viewportIndex = viewportIndex;
+    this.viewportId = viewportId;
     this.container = container;
     this.studyInstanceUID = studyInstanceUID;
     this.seriesInstanceUID = seriesInstanceUID;