Add badge numbers for seg and rtstruct

platform/ui/src/components/roundedButtonGroup/RoundedButtonGroup.css

@@ -4,6 +4,29 @@
   z-index: 0;
 }
 
+.RoundedButtonGroup .badgeNumber-container {
+  background-color: var(--ui-border-color-dark);
+  width: 21px;
+  height: 21px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: 50%;
+  font-size: 12px;
+  font-weight: bold;
+  bottom: 10px;
+  left: 5px;
+  color: white;
+  position: absolute;
+}
+
+.RoundedButtonGroup .badgeNumber {
+  font-size: 10px;
+  font-weight: bold;
+  display: block;
+  width: 25px;
+}
+
 .roundedButtonWrapper {
   cursor: pointer;
   display: inline-block;
@@ -36,7 +59,12 @@
   z-index: 1;
 }
 
-.roundedButtonWrapper .roundedButton svg .roundedButtonWrapper .roundedButton span {
+.roundedButtonWrapper
+  .roundedButton
+  svg
+  .roundedButtonWrapper
+  .roundedButton
+  span {
   margin: 0 2px;
 }
 

platform/ui/src/components/roundedButtonGroup/RoundedButtonGroup.js

@@ -13,6 +13,7 @@ class RoundedButtonGroup extends Component {
       PropTypes.shape({
         value: PropTypes.any,
         label: PropTypes.string,
+        stateEvent: PropTypes.string,
         icon: PropTypes.oneOfType([
           PropTypes.string,
           PropTypes.shape({
@@ -30,6 +31,15 @@ class RoundedButtonGroup extends Component {
     value: null,
   };
 
+  state = {
+    badgeNumbers: [],
+  };
+
+  constructor() {
+    super();
+    this.onStateEvent = this.onStateEvent.bind(this);
+  }
+
   onClickOption = value => {
     let newValue = value;
     if (this.props.value === value) {
@@ -41,6 +51,48 @@ class RoundedButtonGroup extends Component {
     }
   };
 
+  onStateEvent(event) {
+    const optionIndex = this.props.options.findIndex(
+      o => o.value === event.detail.target
+    );
+    if (optionIndex > -1) {
+      const badgeNumbers = this.state.badgeNumbers;
+      badgeNumbers[optionIndex] = event.detail.badgeNumber;
+      this.setState({ badgeNumbers });
+    }
+  }
+
+  componentDidMount() {
+    this.props.options.forEach(option => {
+      if (option.stateEvent) {
+        document.addEventListener(option.stateEvent, this.onStateEvent);
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    this.props.options.forEach((option, index) => {
+      if (
+        option.stateEvent &&
+        option.stateEvent !==
+          (prevProps.options[index]
+            ? prevProps.options[index].stateEvent
+            : null)
+      ) {
+        document.removeEventListener(option.stateEvent, this.onStateEvent);
+        document.addEventListener(option.stateEvent, this.onStateEvent);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.props.options.forEach(option => {
+      if (option.stateEvent) {
+        document.removeEventListener(option.stateEvent, this.onStateEvent);
+      }
+    });
+  }
+
   render() {
     let className = classnames(
       RoundedButtonGroup.className,
@@ -62,6 +114,14 @@ class RoundedButtonGroup extends Component {
         <div className="bottomLabel">{option.bottomLabel}</div>
       );
 
+      let badgeNumber = this.state.badgeNumbers[index];
+      const badgeNumberOverflow = String(badgeNumber).length > 2;
+      badgeNumber = badgeNumber
+        ? badgeNumberOverflow
+          ? 99
+          : badgeNumber
+        : null;
+
       return (
         <div
           key={index}
@@ -70,6 +130,14 @@ class RoundedButtonGroup extends Component {
         >
           <div className="roundedButton">
             {optionText}
+            {badgeNumber && (
+              <div className="badgeNumber-container">
+                <span className="badgeNumber">
+                  {badgeNumber}
+                  {badgeNumberOverflow && '+'}
+                </span>
+              </div>
+            )}
             {iconProps && <Icon {...iconProps} />}
           </div>
           {bottomLabel}