feat(measurements): Provide for the Load (SR) measurements button to optionally clear existing measurements prior to loading the SR. (#4586)

platform/core/src/services/ToolBarService/ToolbarService.ts

@@ -128,10 +128,11 @@ export default class ToolbarService extends PubSubService {
   /**
    * Adds buttons to the toolbar.
    * @param buttons - The buttons to be added.
+   * @param replace - Flag indicating if any existing button with the same id as one being added should be replaced
    */
-  public addButtons(buttons: Button[]): void {
+  public addButtons(buttons: Button[], replace: boolean = false): void {
     buttons.forEach(button => {
-      if (!this.state.buttons[button.id]) {
+      if (replace || !this.state.buttons[button.id]) {
         if (!button.props) {
           button.props = {};
         }
@@ -383,12 +384,18 @@ export default class ToolbarService extends PubSubService {
 
   /**
    * Creates a button section with the specified key and buttons.
+   * Buttons already in the section (i.e. with the same ids) will NOT be added twice.
    * @param {string} key - The key of the button section.
    * @param {Array} buttons - The buttons to be added to the section.
    */
   createButtonSection(key, buttons) {
     if (this.state.buttonSections[key]) {
-      this.state.buttonSections[key].push(...buttons);
+      this.state.buttonSections[key].push(
+        buttons.filter(
+          button =>
+            !this.state.buttonSections[key].find(sectionButton => sectionButton.id === button.id)
+        )
+      );
     } else {
       this.state.buttonSections[key] = buttons;
     }
@@ -452,7 +459,7 @@ export default class ToolbarService extends PubSubService {
 
     const buttonType = buttonTypes[uiType];
 
-    if (!buttonType) {
+    if (!buttonType && !component) {
       return;
     }
 

platform/ui/src/components/ViewportActionButton/ViewportActionButton.tsx

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+function ViewportActionButton({ onInteraction, commands, id, children }) {
+  return (
+    <div
+      className="bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+      // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+      onMouseUp={() => {
+        onInteraction({
+          itemId: id,
+          commands,
+        });
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+ViewportActionButton.propTypes = {
+  id: PropTypes.string,
+  onInteraction: PropTypes.func.isRequired,
+  commands: PropTypes.array,
+  children: PropTypes.node,
+};
+
+export default ViewportActionButton;

platform/ui/src/components/ViewportActionButton/index.tsx

@@ -0,0 +1,2 @@
+import ViewportActionButton from './ViewportActionButton';
+export default ViewportActionButton;

platform/ui/src/components/index.js

@@ -86,6 +86,7 @@ import LabellingFlow from './Labelling';
 import SwitchButton, { SwitchLabelLocation } from './SwitchButton';
 import * as AllInOneMenu from './AllInOneMenu';
 import ViewportActionArrows from './ViewportActionArrows';
+import ViewportActionButton from './ViewportActionButton';
 import HeaderPatientInfo from './HeaderPatientInfo';
 import LegacySplitButton from './LegacySplitButton';
 import { ToolSettings } from './AdvancedToolbox';
@@ -180,6 +181,7 @@ export {
   Viewport,
   ViewportActionArrows,
   ViewportActionBar,
+  ViewportActionButton,
   ViewportActionCorners,
   ViewportActionCornersLocations,
   ViewportDownloadForm,

platform/ui/src/index.js

@@ -115,6 +115,7 @@ export {
   Viewport,
   ViewportActionArrows,
   ViewportActionBar,
+  ViewportActionButton,
   ViewportActionCorners,
   ViewportActionCornersLocations,
   ViewportDownloadForm,