feat: 🎸 MPR UI improvements. Added MinIP, AvgIP, slab thickness slider and mode toggle (#947)

platform/ui/src/components/checkbox/checkbox.js

@@ -6,15 +6,29 @@ export class Checkbox extends Component {
   static propTypes = {
     label: PropTypes.string.isRequired,
     checked: PropTypes.bool,
+    onChange: PropTypes.func,
   };
 
   constructor(props) {
     super(props);
-    this.state = { checked: props.checked, label: props.label };
+    this.state = { checked: !!props.checked, label: props.label };
   }
 
   handleChange(e) {
-    this.setState({ checked: e.target.checked });
+    const checked = e.target.checked;
+    this.setState({ checked });
+    if (this.props.onChange) this.props.onChange(checked);
+  }
+
+  componentDidUpdate(props) {
+    const { checked = false, label } = props;
+
+    if (this.state.checked !== checked || this.state.label !== label) {
+      this.setState({
+        checked,
+        label,
+      });
+    }
   }
 
   render() {
@@ -32,9 +46,7 @@ export class Checkbox extends Component {
             <input
               type="checkbox"
               checked={this.state.checked}
-              onChange={e => {
-                this.handleChange(e);
-              }}
+              onChange={this.handleChange.bind(this)}
             />
             {checkbox}
             {this.state.label}

platform/ui/src/components/index.js

@@ -13,6 +13,7 @@ import {
   UserPreferencesModal,
 } from './userPreferencesModal';
 
+import { Checkbox } from './checkbox';
 import { CineDialog } from './cineDialog';
 import { QuickSwitch } from './quickSwitch';
 import { RoundedButtonGroup } from './roundedButtonGroup';
@@ -23,6 +24,7 @@ import { ToolbarSection } from './toolbarSection';
 import { Tooltip } from './tooltip';
 
 export {
+  Checkbox,
   CineDialog,
   ExampleDropTarget,
   LayoutButton,

platform/ui/src/elements/form/Range.css

@@ -2,6 +2,7 @@
   margin: 0;
   width: 100%;
   -webkit-appearance: none;
+  background-color: transparent;
 }
 
 .range:focus {

platform/ui/src/elements/form/Range.js

@@ -11,7 +11,7 @@ class Range extends React.Component {
 
   handleChange = event => {
     this.setState({ value: event.target.value });
-    if (this.props.onChange) this.props.onChange();
+    if (this.props.onChange) this.props.onChange(event);
   };
 
   render() {
@@ -21,6 +21,7 @@ class Range extends React.Component {
         value={this.state.value}
         min={this.props.min}
         max={this.props.max}
+        step={this.props.step || 1}
         onChange={this.handleChange}
         id={this.props.id}
         className="range"

platform/ui/src/elements/form/Select.css

@@ -34,10 +34,6 @@
 }
 
 .select-ohif:focus {
-  border-color: #aaa;
-  box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
-  box-shadow: 0 0 0 3px -moz-mac-focusring;
-  color: #222;
   outline: none;
 }
 

platform/ui/src/elements/form/Select.js

@@ -11,8 +11,9 @@ class Select extends Component {
   }
 
   handleChange = event => {
-    this.setState({ value: event.target.value });
-    if (this.props.onChange) this.props.onChange();
+    const value = event.target.value;
+    this.setState({ value });
+    if (this.props.onChange) this.props.onChange(value);
   };
 
   render() {

platform/ui/src/index.js

@@ -1,4 +1,5 @@
 import {
+  Checkbox,
   CineDialog,
   ExampleDropTarget,
   LayoutButton,
@@ -25,7 +26,7 @@ import {
 import { ICONS, Icon } from './elements';
 
 // Alias this for now as not all dependents are using strict versioning
-import { DropdownMenu as Dropdown } from './elements/form';
+import { DropdownMenu as Dropdown, Range, Select } from './elements/form';
 import ExpandableToolMenu from './viewer/ExpandableToolMenu.js';
 import LayoutManager from './LayoutChooser/LayoutManager.js';
 import LayoutPanelDropTarget from './LayoutChooser/LayoutPanelDropTarget.js';
@@ -38,6 +39,7 @@ import ViewerbaseDragDropContext from './utils/viewerbaseDragDropContext.js';
 export {
   ICONS,
   //
+  Checkbox,
   CineDialog,
   Dropdown,
   ExpandableToolMenu,
@@ -53,8 +55,10 @@ export {
   OverlayTrigger,
   PlayClipButton,
   QuickSwitch,
+  Range,
   RoundedButtonGroup,
   ScrollableArea,
+  Select,
   SelectTree,
   SimpleDialog,
   StudyBrowser,

platform/ui/src/viewer/ExpandableToolMenu.js

@@ -108,16 +108,8 @@ class ExpandableToolMenu extends React.Component {
   };
 
   render() {
-    return (
-      <OverlayTrigger
-        key="menu-button"
-        trigger="click"
-        placement="bottom"
-        rootClose={true}
-        handleHide={this.onOverlayHide}
-        onClick={this.onExpandableToolClick}
-        overlay={this.toolbarMenuOverlay()}
-      >
+    const getToolBarButtonComponent = () => {
+      return (
         <ToolbarButton
           key="menu-button"
           type="tool"
@@ -128,6 +120,22 @@ class ExpandableToolMenu extends React.Component {
           isExpandable={true}
           isExpanded={this.state.isExpanded}
         />
+      );
+    };
+
+    const toolbarComponent = getToolBarButtonComponent();
+
+    return (
+      <OverlayTrigger
+        key="menu-button"
+        trigger="click"
+        placement="bottom"
+        rootClose={true}
+        handleHide={this.onOverlayHide}
+        onClick={this.onExpandableToolClick}
+        overlay={this.toolbarMenuOverlay()}
+      >
+        {toolbarComponent}
       </OverlayTrigger>
     );
   }