fix(toolbar): allow customizable toolbar for active viewport and allow active tool to be deactivated via a click (#3608)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js

@@ -48,6 +48,7 @@ describe('OHIF Measurement Panel', function () {
 
     cy.scrollToIndex(13);
 
+    // Reset to default tool so that the new add length works
     cy.addLengthMeasurement([100, 100], [200, 200]); //Adding measurement in the viewport
 
     cy.get('@viewportInfoTopRight').should('contains.text', '(14/');

platform/app/cypress/integration/volume/MPR.spec.js

@@ -88,19 +88,7 @@ describe('OHIF MPR', () => {
   });
 
   it('should correctly render Crosshairs for MPR', () => {
-    cy.wait(250);
-
-    cy.get('[data-cy="Crosshairs"]').click();
-    cy.window()
-      .its('cornerstoneTools')
-      .then(cornerstoneTools => {
-        const state = cornerstoneTools.annotation.state.getAnnotationManager();
-
-        const fORMap = state.annotations;
-        // it should not have crosshairs yet
-        expect(Object.keys(fORMap)).to.have.length(0);
-      });
-
+    cy.get('[data-cy="Crosshairs"]').should('not.exist');
     cy.get(':nth-child(3) > [data-cy="study-browser-thumbnail"]').dblclick();
     cy.get('[data-cy="MPR"]').click();
     cy.get('[data-cy="Crosshairs"]').click();
@@ -131,4 +119,19 @@ describe('OHIF MPR', () => {
         );
       });
   });
+
+  it('should activate window level when the active Crosshairs tool for MPR is clicked', () => {
+    cy.get(':nth-child(3) > [data-cy="study-browser-thumbnail"]').dblclick();
+    cy.get('[data-cy="MPR"]').click();
+    cy.get('[data-cy="Crosshairs"]').click();
+
+    // wait for the crosshairs tool to be active
+    cy.get('[data-cy="Crosshairs"].active');
+
+    // Click the crosshairs button to deactivate it.
+    cy.get('[data-cy="Crosshairs"]').click();
+
+    // wait for the window level button to be active
+    cy.get('[data-cy="WindowLevel-split-button-primary"].active');
+  });
 });