From d2d7d20174b9a681880ae20a0b5bd81b8aa3a721 Mon Sep 17 00:00:00 2001
From: SACHIDANAND ALLE <sachidanand.alle@gmail.com>
Date: Mon, 18 Nov 2024 18:04:23 -0800
Subject: [PATCH] Fix ES lint issues (#1784)

Signed-off-by: Sachidanand Alle <salle@nvidia.com>
---
 .../src/components/ModelSelector.tsx          |  9 ++--
 .../src/components/MonaiLabelPanel.tsx        | 19 +++----
 .../src/components/SegmentationToolbox.tsx    | 46 ++++++++++-------
 .../src/components/SettingsTable.tsx          |  8 +--
 .../Toolbox/ThresholdSettingsPreset.tsx       | 17 ++++---
 .../src/components/actions/ActiveLearning.tsx | 41 ++++++---------
 .../components/actions/AutoSegmentation.tsx   | 10 ++--
 .../src/components/actions/BaseTab.tsx        | 13 +++--
 .../src/components/actions/NextSampleForm.tsx | 10 ++--
 .../src/components/actions/OptionTable.tsx    | 30 ++++++-----
 .../src/components/actions/SmartEdit.tsx      | 40 ++++++++-------
 .../src/components/callInputDialog.tsx        |  6 +--
 .../src/components/colorPickerDialog.tsx      |  2 +-
 .../monai-label/src/getCommandsModule.ts      | 18 +++----
 .../monai-label/src/getPanelModule.tsx        |  8 ++-
 .../extensions/monai-label/src/index.tsx      |  1 -
 .../ohifv3/extensions/monai-label/src/init.ts |  4 +-
 .../src/services/MonaiLabelClient.js          |  3 +-
 .../src/utils/GenericAnatomyColors.js         |  1 -
 .../monai-label/src/utils/GenericUtils.js     | 20 +++++---
 .../src/utils/SegmentationReader.js           |  4 +-
 .../src/utils/SegmentationUtils.tsx           | 50 ++++++++-----------
 .../ohifv3/modes/monai-label/babel.config.js  |  6 +--
 .../ohifv3/modes/monai-label/src/index.tsx    |  2 +-
 .../modes/monai-label/src/toolbarButtons.js   |  2 +-
 25 files changed, 187 insertions(+), 183 deletions(-)

diff --git a/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx b/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx
index c2371f336..b70475148 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx
@@ -1,4 +1,3 @@
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -41,9 +40,11 @@ export default class ModelSelector extends Component {
     return null;
   }
 
-  onChangeModel = evt => {
+  onChangeModel = (evt) => {
     this.setState({ currentModel: evt.target.value });
-    if (this.props.onSelectModel) this.props.onSelectModel(evt.target.value);
+    if (this.props.onSelectModel) {
+      this.props.onSelectModel(evt.target.value);
+    }
   };
 
   currentModel = () => {
@@ -84,7 +85,7 @@ export default class ModelSelector extends Component {
                   onChange={this.onChangeModel}
                   value={currentModel}
                 >
-                  {this.props.models.map(model => (
+                  {this.props.models.map((model) => (
                     <option key={model} name={model} value={model}>
                       {`${model} `}
                     </option>
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx b/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx
index f62e3f5d6..5a13d1f54 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx
@@ -121,7 +121,7 @@ export default class MonaiLabelPanel extends Component {
     const response = await this.client().info();
 
     // remove the background
-    const labels = response.data.labels.splice(1)
+    const labels = response.data.labels.splice(1);
 
     const segmentations = [
       {
@@ -129,7 +129,7 @@ export default class MonaiLabelPanel extends Component {
         label: 'Segmentations',
         segments: labels.map((label, index) => ({
           segmentIndex: index + 1,
-          label
+          label,
         })),
         isActive: true,
         activeSegmentIndex: 1,
@@ -137,7 +137,7 @@ export default class MonaiLabelPanel extends Component {
     ];
 
     this.props.commandsManager.runCommand('loadSegmentationsForViewport', {
-      segmentations
+      segmentations,
     });
 
     if (response.status !== 200) {
@@ -163,16 +163,18 @@ export default class MonaiLabelPanel extends Component {
     // Leave Event
     for (const action of Object.keys(this.actions)) {
       if (this.state.action === action) {
-        if (this.actions[action].current)
+        if (this.actions[action].current) {
           this.actions[action].current.onLeaveActionTab();
+        }
       }
     }
 
     // Enter Event
     for (const action of Object.keys(this.actions)) {
       if (name === action) {
-        if (this.actions[action].current)
+        if (this.actions[action].current) {
           this.actions[action].current.onEnterActionTab();
+        }
       }
     }
     this.setState({ action: name });
@@ -193,11 +195,10 @@ export default class MonaiLabelPanel extends Component {
     console.info('These are the predicted labels');
     console.info(onInfoLabelNames);
 
-    if (onInfoLabelNames.hasOwnProperty('background')){
-delete onInfoLabelNames.background;
+    if (onInfoLabelNames.hasOwnProperty('background')) {
+      delete onInfoLabelNames.background;
     }
 
-
     const ret = SegmentationReader.parseNrrdData(response.data);
 
     if (!ret) {
@@ -248,7 +249,7 @@ delete onInfoLabelNames.background;
   };
 
   _debug = async () => {
-    let nrrdFetch = await fetch('http://localhost:3000/pred2.nrrd');
+    const nrrdFetch = await fetch('http://localhost:3000/pred2.nrrd');
 
     const info = {
       spleen: 1,
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/SegmentationToolbox.tsx b/plugins/ohifv3/extensions/monai-label/src/components/SegmentationToolbox.tsx
index 4577a56b7..338b389ab 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/SegmentationToolbox.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/SegmentationToolbox.tsx
@@ -83,11 +83,11 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
 
     const unsubscriptions = [];
 
-    events.forEach(event => {
+    events.forEach((event) => {
       const { unsubscribe } = segmentationService.subscribe(event, () => {
         const segmentations = segmentationService.getSegmentations();
 
-        const activeSegmentation = segmentations?.find(seg => seg.isActive);
+        const activeSegmentation = segmentations?.find((seg) => seg.isActive);
 
         setToolsEnabled(activeSegmentation?.segmentCount > 0);
       });
@@ -96,7 +96,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
     });
 
     return () => {
-      unsubscriptions.forEach(unsubscribe => unsubscribe());
+      unsubscriptions.forEach((unsubscribe) => unsubscribe());
     };
   }, [activeViewportId, viewports, segmentationService]);
 
@@ -117,7 +117,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
   }, [toolbarService, updateActiveTool]);
 
   const setToolActive = useCallback(
-    toolName => {
+    (toolName) => {
       toolbarService.recordInteraction({
         groupId: 'SegmentationTools',
         itemId: 'Brush',
@@ -139,8 +139,12 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
 
   const updateBrushSize = useCallback(
     (toolName, brushSize) => {
-      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-        segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
+      toolGroupService.getToolGroupIds()?.forEach((toolGroupId) => {
+        segmentationUtils.setBrushSizeForToolGroup(
+          toolGroupId,
+          brushSize,
+          toolName
+        );
       });
     },
     [toolGroupService]
@@ -150,7 +154,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
     (valueAsStringOrNumber, toolCategory) => {
       const value = Number(valueAsStringOrNumber);
 
-      _getToolNamesFromCategory(toolCategory).forEach(toolName => {
+      _getToolNamesFromCategory(toolCategory).forEach((toolName) => {
         updateBrushSize(toolName, value);
       });
 
@@ -166,7 +170,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
   );
 
   const handleRangeChange = useCallback(
-    newRange => {
+    (newRange) => {
       if (
         newRange[0] === state.ThresholdBrush.thresholdRange[0] &&
         newRange[1] === state.ThresholdBrush.thresholdRange[1]
@@ -176,8 +180,8 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
 
       const toolNames = _getToolNamesFromCategory('ThresholdBrush');
 
-      toolNames.forEach(toolName => {
-        toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+      toolNames.forEach((toolName) => {
+        toolGroupService.getToolGroupIds()?.forEach((toolGroupId) => {
           const toolGroup = toolGroupService.getToolGroup(toolGroupId);
           toolGroup.setToolConfiguration(toolName, {
             strategySpecificConfiguration: {
@@ -208,7 +212,9 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
           name: 'Brush',
           icon: 'icon-tool-brush',
           disabled: !toolsEnabled,
-          active: state.activeTool === 'CircularBrush' || state.activeTool === 'SphereBrush',
+          active:
+            state.activeTool === 'CircularBrush' ||
+            state.activeTool === 'SphereBrush',
           onClick: () => setToolActive('CircularBrush'),
           options: [
             {
@@ -219,7 +225,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
               max: 100,
               value: state.Brush.brushSize,
               step: 0.5,
-              onChange: value => onBrushSizeChange(value, 'Brush'),
+              onChange: (value) => onBrushSizeChange(value, 'Brush'),
             },
             {
               name: 'Mode',
@@ -230,7 +236,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
                 { value: 'CircularBrush', label: 'Circle' },
                 { value: 'SphereBrush', label: 'Sphere' },
               ],
-              onChange: value => setToolActive(value),
+              onChange: (value) => setToolActive(value),
             },
           ],
         },
@@ -238,7 +244,9 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
           name: 'Eraser',
           icon: 'icon-tool-eraser',
           disabled: !toolsEnabled,
-          active: state.activeTool === 'CircularEraser' || state.activeTool === 'SphereEraser',
+          active:
+            state.activeTool === 'CircularEraser' ||
+            state.activeTool === 'SphereEraser',
           onClick: () => setToolActive('CircularEraser'),
           options: [
             {
@@ -249,7 +257,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
               max: 100,
               value: state.Eraser.brushSize,
               step: 0.5,
-              onChange: value => onBrushSizeChange(value, 'Eraser'),
+              onChange: (value) => onBrushSizeChange(value, 'Eraser'),
             },
             {
               name: 'Mode',
@@ -260,7 +268,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
                 { value: 'CircularEraser', label: 'Circle' },
                 { value: 'SphereEraser', label: 'Sphere' },
               ],
-              onChange: value => setToolActive(value),
+              onChange: (value) => setToolActive(value),
             },
           ],
         },
@@ -284,7 +292,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
                 { value: 'RectangleScissor', label: 'Rectangle' },
                 { value: 'SphereScissor', label: 'Sphere' },
               ],
-              onChange: value => setToolActive(value),
+              onChange: (value) => setToolActive(value),
             },
           ],
         },
@@ -305,7 +313,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
               max: 100,
               value: state.ThresholdBrush.brushSize,
               step: 0.5,
-              onChange: value => onBrushSizeChange(value, 'ThresholdBrush'),
+              onChange: (value) => onBrushSizeChange(value, 'ThresholdBrush'),
             },
             {
               name: 'Mode',
@@ -316,7 +324,7 @@ function SegmentationToolbox({ servicesManager, extensionManager }) {
                 { value: 'ThresholdCircularBrush', label: 'Circle' },
                 { value: 'ThresholdSphereBrush', label: 'Sphere' },
               ],
-              onChange: value => setToolActive(value),
+              onChange: (value) => setToolActive(value),
             },
             {
               type: 'custom',
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/SettingsTable.tsx b/plugins/ohifv3/extensions/monai-label/src/components/SettingsTable.tsx
index d5db4bc9a..12fe1a284 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/SettingsTable.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/SettingsTable.tsx
@@ -8,8 +8,8 @@ export default class SettingsTable extends Component {
   constructor(props) {
     super(props);
 
-    const onInfo = props.onInfo
-    this.onInfo = onInfo
+    const onInfo = props.onInfo;
+    this.onInfo = onInfo;
 
     this.state = this.getSettings();
   }
@@ -35,8 +35,8 @@ export default class SettingsTable extends Component {
     };
   };
 
-  onBlurSeverURL = evt => {
-    let url = evt.target.value;
+  onBlurSeverURL = (evt) => {
+    const url = evt.target.value;
     this.setState({ url: url });
     CookieUtils.setCookie('MONAILABEL_SERVER_URL', url);
   };
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/Toolbox/ThresholdSettingsPreset.tsx b/plugins/ohifv3/extensions/monai-label/src/components/Toolbox/ThresholdSettingsPreset.tsx
index f708233c3..63670c9f6 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/Toolbox/ThresholdSettingsPreset.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/Toolbox/ThresholdSettingsPreset.tsx
@@ -33,16 +33,19 @@ function ThresholdSettings({ onRangeChange }) {
   const [options, setOptions] = useState(defaultOptions);
   const [selectedPreset, setSelectedPreset] = useState(defaultOptions[0].value);
 
-  const handleRangeChange = newRange => {
-    const selectedOption = options.find(o => o.value === selectedPreset);
+  const handleRangeChange = (newRange) => {
+    const selectedOption = options.find((o) => o.value === selectedPreset);
 
-    if (newRange[0] === selectedOption.range[0] && newRange[1] === selectedOption.range[1]) {
+    if (
+      newRange[0] === selectedOption.range[0] &&
+      newRange[1] === selectedOption.range[1]
+    ) {
       return;
     }
 
     onRangeChange(newRange);
 
-    const updatedOptions = options.map(o => {
+    const updatedOptions = options.map((o) => {
       if (o.value === selectedPreset) {
         return {
           ...o,
@@ -55,7 +58,9 @@ function ThresholdSettings({ onRangeChange }) {
     setOptions(updatedOptions);
   };
 
-  const selectedPresetRange = options.find(ds => ds.value === selectedPreset).range;
+  const selectedPresetRange = options.find(
+    (ds) => ds.value === selectedPreset
+  ).range;
 
   return (
     <div>
@@ -66,7 +71,7 @@ function ThresholdSettings({ onRangeChange }) {
           isClearable={false}
           onChange={handlePresetChange}
           options={options}
-          value={options.find(ds => ds.value === selectedPreset)}
+          value={options.find((ds) => ds.value === selectedPreset)}
           className="text-white"
           isSearchable={false}
         />
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.tsx
index dd0bd2fc4..9925c1146 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.tsx
@@ -16,9 +16,7 @@ import React from 'react';
 import './ActiveLearning.css';
 import BaseTab from './BaseTab';
 import NextSampleForm from './NextSampleForm';
-import {
-  createSegmentMetadata,
-} from '../../utils/SegmentationUtils';
+import { createSegmentMetadata } from '../../utils/SegmentationUtils';
 
 export default class OptionTable extends BaseTab {
   constructor(props) {
@@ -30,15 +28,15 @@ export default class OptionTable extends BaseTab {
     };
   }
 
-  onChangeStrategy = evt => {
+  onChangeStrategy = (evt) => {
     this.setState({ strategy: evt.target.value });
   };
 
-  onSegmentSelected = id => {
+  onSegmentSelected = (id) => {
     this.setState({ segmentId: id });
   };
 
-  onSegmentDeleted = id => {
+  onSegmentDeleted = (id) => {
     this.setState({ segmentId: null });
   };
 
@@ -112,8 +110,7 @@ export default class OptionTable extends BaseTab {
   };
 
   onClickSubmitLabel = async () => {
-
-    const labelmaps3D = cornerstone.cache.getVolume('1')
+    const labelmaps3D = cornerstone.cache.getVolume('1');
 
     if (!labelmaps3D) {
       console.info('LabelMap3D is empty.. so zero segments');
@@ -127,19 +124,15 @@ export default class OptionTable extends BaseTab {
       duration: 5000,
     });
 
-    const labelNames = this.props.info.labels
+    const labelNames = this.props.info.labels;
     const segments = [];
     for (let i = 0; i < labelNames.length; i++) {
       if (labelNames[i] === 'background') {
         console.debug('Ignore Background...');
         continue;
       }
-      let segment  = createSegmentMetadata(
-        labelNames[i],
-        i,
-        ''
-      )
-      segments.push(segment)
+      const segment = createSegmentMetadata(labelNames[i], i, '');
+      segments.push(segment);
     }
 
     const params = { label_info: segments };
@@ -150,9 +143,7 @@ export default class OptionTable extends BaseTab {
       type: 'application/octet-stream',
     });
 
-    const response = await this.props
-      .client()
-      .save_label(image, label, params);
+    const response = await this.props.client().save_label(image, label, params);
 
     if (response.status !== 200) {
       this.notification.show({
@@ -181,7 +172,7 @@ export default class OptionTable extends BaseTab {
       ? this.state.segmentId
       : getFirstSegmentId(this.props.viewConstants.element); */
 
-    const segmentId = this.state.segmentId
+    const segmentId = this.state.segmentId;
 
     const ds = this.props.info.datastore;
     const completed = ds && ds.completed ? ds.completed : 0;
@@ -231,7 +222,7 @@ export default class OptionTable extends BaseTab {
                 <td>
                   <button
                     className="actionInput"
-                    style={{backgroundColor:'lightgray'}}
+                    style={{ backgroundColor: 'lightgray' }}
                     onClick={this.onClickNextSample}
                   >
                     Next Sample
@@ -241,7 +232,7 @@ export default class OptionTable extends BaseTab {
                 <td>
                   <button
                     className="actionInput"
-                    style={{backgroundColor:'lightgray'}}
+                    style={{ backgroundColor: 'lightgray' }}
                     onClick={this.onClickUpdateModel}
                   >
                     {this.state.training ? 'Stop Training' : 'Update Model'}
@@ -273,7 +264,7 @@ export default class OptionTable extends BaseTab {
                     onChange={this.onChangeStrategy}
                     value={this.state.strategy}
                   >
-                    {Object.keys(strategies).map(a => (
+                    {Object.keys(strategies).map((a) => (
                       <option key={a} name={a} value={a}>
                         {a}
                       </option>
@@ -290,7 +281,7 @@ export default class OptionTable extends BaseTab {
                   <div className="w3-round w3-light-grey w3-tiny">
                     <div
                       className="w3-round w3-container w3-blue w3-center"
-                      style={{ backgroundColor:'white' }}
+                      style={{ backgroundColor: 'white' }}
                     >
                       {activelearning}
                     </div>
@@ -303,7 +294,7 @@ export default class OptionTable extends BaseTab {
                   <div className="w3-round w3-light-grey w3-tiny">
                     <div
                       className="w3-round w3-container w3-orange w3-center"
-                      style={{ backgroundColor:'white' }}
+                      style={{ backgroundColor: 'white' }}
                     >
                       {training}
                     </div>
@@ -316,7 +307,7 @@ export default class OptionTable extends BaseTab {
                   <div className="w3-round w3-light-grey w3-tiny">
                     <div
                       className="w3-round w3-container w3-green w3-center"
-                      style={{ backgroundColor:'white' }}
+                      style={{ backgroundColor: 'white' }}
                     >
                       {accuracy}
                     </div>
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/AutoSegmentation.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/AutoSegmentation.tsx
index 6192ec063..7430ea967 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/AutoSegmentation.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/AutoSegmentation.tsx
@@ -12,7 +12,7 @@ export default class AutoSegmentation extends BaseTab {
     };
   }
 
-  onSelectModel = model => {
+  onSelectModel = (model) => {
     this.setState({ currentModel: model });
   };
 
@@ -64,9 +64,9 @@ export default class AutoSegmentation extends BaseTab {
   };
 
   render() {
-    let models = [];
+    const models = [];
     if (this.props.info && this.props.info.models) {
-      for (let [name, model] of Object.entries(this.props.info.models)) {
+      for (const [name, model] of Object.entries(this.props.info.models)) {
         if (model.type === 'segmentation') {
           models.push(name);
         }
@@ -98,8 +98,8 @@ export default class AutoSegmentation extends BaseTab {
             onSelectModel={this.onSelectModel}
             usage={
               <p style={{ fontSize: 'smaller' }}>
-                Fully automated segmentation <b>without any user prompt</b>. Just
-                select a model and click to run
+                Fully automated segmentation <b>without any user prompt</b>.
+                Just select a model and click to run
               </p>
             }
           />
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/BaseTab.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/BaseTab.tsx
index cec16e8b3..4bc6267ea 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/BaseTab.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/BaseTab.tsx
@@ -1,4 +1,3 @@
-
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -23,16 +22,16 @@ export default class BaseTab extends Component {
     this.tabId = 'tab-' + this.props.tabIndex;
   }
 
-  onSelectActionTab = evt => {
+  onSelectActionTab = (evt) => {
     this.props.onSelectActionTab(evt.currentTarget.value);
   };
 
   onEnterActionTab = () => {};
   onLeaveActionTab = () => {};
 
-  onSegmentCreated = id => {};
-  onSegmentUpdated = id => {};
-  onSegmentDeleted = id => {};
-  onSegmentSelected = id => {};
-  onSelectModel = model => {};
+  onSegmentCreated = (id) => {};
+  onSegmentUpdated = (id) => {};
+  onSegmentDeleted = (id) => {};
+  onSegmentSelected = (id) => {};
+  onSelectModel = (model) => {};
 }
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.tsx
index 643ad524c..80ceaffd8 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.tsx
@@ -27,15 +27,17 @@ export default class NextSampleForm extends Component {
 
   onSubmit = () => {
     // TODO:: OHIF Doesn't support loading exact series in URI
-    let path = window.location.href.split('=');
+    const path = window.location.href.split('=');
     path[path.length - 1] = this.props.info.StudyInstanceUID;
 
     const pathname = path.join('=');
     console.info(pathname);
 
-    let msg =
+    const msg =
       'This action will reload current page.  Are you sure to continue?';
-    if (!window.confirm(msg)) return;
+    if (!window.confirm(msg)) {
+      return;
+    }
     window.location.href = pathname;
   };
 
@@ -59,7 +61,7 @@ export default class NextSampleForm extends Component {
             </tr>
           </thead>
           <tbody>
-            {Object.keys(fields).map(field => (
+            {Object.keys(fields).map((field) => (
               <tr key={field}>
                 <td>{fields[field]}</td>
                 {field === 'SeriesInstanceUID' ? (
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionTable.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionTable.tsx
index 4a2a86f05..af1f45543 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionTable.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionTable.tsx
@@ -27,12 +27,12 @@ export default class OptionTable extends BaseTab {
     };
   }
 
-  onChangeSection = evt => {
+  onChangeSection = (evt) => {
     this.state.section = evt.target.value;
     this.setState({ section: evt.target.value });
   };
 
-  onChangeName = evt => {
+  onChangeName = (evt) => {
     this.state.name = evt.target.value;
     this.setState({ name: evt.target.value });
   };
@@ -44,17 +44,19 @@ export default class OptionTable extends BaseTab {
     if (typeof c[s][n][k] === 'boolean') {
       c[s][n][k] = !!evt.target.checked;
     } else {
-      if (typeof c[s][n][k] === 'number')
+      if (typeof c[s][n][k] === 'number') {
         c[s][n][k] = Number.isInteger(c[s][n][k])
           ? parseInt(evt.target.value)
           : parseFloat(evt.target.value);
-      else c[s][n][k] = evt.target.value;
+      } else {
+        c[s][n][k] = evt.target.value;
+      }
     }
     this.setState({ config: c });
   };
 
   render() {
-    let config = this.state.config ? this.state.config : {};
+    const config = this.state.config ? this.state.config : {};
     if (!Object.keys(config).length) {
       const info = this.props.info;
       const mapping = {
@@ -66,7 +68,9 @@ export default class OptionTable extends BaseTab {
       for (const [m, n] of Object.entries(mapping)) {
         for (const [k, v] of Object.entries(info && info[n] ? info[n] : {})) {
           if (v && v.config && Object.keys(v.config).length) {
-            if (!config[m]) config[m] = {};
+            if (!config[m]) {
+              config[m] = {};
+            }
             config[m][k] = v.config;
           }
         }
@@ -120,7 +124,7 @@ export default class OptionTable extends BaseTab {
                     onChange={this.onChangeSection}
                     value={this.state.section}
                   >
-                    {Object.keys(config).map(k => (
+                    {Object.keys(config).map((k) => (
                       <option key={k} value={k}>
                         {`${k} `}
                       </option>
@@ -137,7 +141,7 @@ export default class OptionTable extends BaseTab {
                     onChange={this.onChangeName}
                     value={this.state.name}
                   >
-                    {Object.keys(section_map).map(k => (
+                    {Object.keys(section_map).map((k) => (
                       <option key={k} value={k}>
                         {`${k} `}
                       </option>
@@ -147,7 +151,7 @@ export default class OptionTable extends BaseTab {
               </tr>
             </tbody>
           </table>
-          <br/>
+          <br />
           <table className="optionsTable">
             <thead>
               <tr>
@@ -164,7 +168,7 @@ export default class OptionTable extends BaseTab {
                       <input
                         type="checkbox"
                         defaultChecked={v}
-                        onChange={e =>
+                        onChange={(e) =>
                           this.onChangeConfig(
                             this.state.section,
                             this.state.name,
@@ -176,7 +180,7 @@ export default class OptionTable extends BaseTab {
                     ) : v !== null && typeof v === 'object' ? (
                       <select
                         className="optionsInput"
-                        onChange={e =>
+                        onChange={(e) =>
                           this.onChangeConfig(
                             this.state.section,
                             this.state.name,
@@ -185,7 +189,7 @@ export default class OptionTable extends BaseTab {
                           )
                         }
                       >
-                        {Object.keys(v).map(a => (
+                        {Object.keys(v).map((a) => (
                           <option key={a} name={a} value={a}>
                             {a}
                           </option>
@@ -196,7 +200,7 @@ export default class OptionTable extends BaseTab {
                         type="text"
                         defaultValue={v ? v : ''}
                         className="optionsInput"
-                        onChange={e =>
+                        onChange={(e) =>
                           this.onChangeConfig(
                             this.state.section,
                             this.state.name,
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/SmartEdit.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/SmartEdit.tsx
index ba607d19a..a2774c48a 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/SmartEdit.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/SmartEdit.tsx
@@ -59,8 +59,7 @@ export default class SmartEdit extends BaseTab {
         const color = selectedSegment.color;
 
         // get the active viewport toolGroup
-        const { viewports, activeViewportId } =
-          viewportGridService.getState();
+        const { viewports, activeViewportId } = viewportGridService.getState();
         const viewport = viewports.get(activeViewportId);
         const { viewportOptions } = viewport;
         const toolGroupId = viewportOptions.toolGroupId;
@@ -86,8 +85,11 @@ export default class SmartEdit extends BaseTab {
   };
 
   onDeepgrow = async () => {
-    const { segmentationService, cornerstoneViewportService, viewportGridService } =
-      this.props.servicesManager.services;
+    const {
+      segmentationService,
+      cornerstoneViewportService,
+      viewportGridService,
+    } = this.props.servicesManager.services;
     const { info, viewConstants } = this.props;
     const image = viewConstants.SeriesInstanceUID;
     const model = this.modelSelector.current.currentModel();
@@ -114,7 +116,8 @@ export default class SmartEdit extends BaseTab {
     // Getting the clicks in IJK format
 
     const { activeViewportId } = viewportGridService.getState();
-    const viewPort = cornerstoneViewportService.getCornerstoneViewport(activeViewportId);
+    const viewPort =
+      cornerstoneViewportService.getCornerstoneViewport(activeViewportId);
 
     const pts = cornerstoneTools.annotation.state.getAnnotations(
       'ProbeMONAILabel',
@@ -158,25 +161,22 @@ export default class SmartEdit extends BaseTab {
 
     // block the cursor while waiting for MONAI Label response?
 
-    for (let l in labels){
+    for (const l in labels) {
       if (l === segmentId) {
-        console.log('This is the segmentId')
-        let p = []
-        for (var i = 0; i < pointsIJK.length; i++) {
+        console.log('This is the segmentId');
+        const p = [];
+        for (let i = 0; i < pointsIJK.length; i++) {
           p.push(Array.from(pointsIJK[i]));
           console.log(p[i]);
         }
         params[l] = p;
         continue;
-      };
+      }
       console.log(l);
       params[l] = [];
     }
 
-    const response = await this.props
-      .client()
-      .infer(model, image, params);
-
+    const response = await this.props.client().infer(model, image, params);
 
     if (response.status !== 200) {
       this.notification.show({
@@ -239,7 +239,6 @@ export default class SmartEdit extends BaseTab {
       toolName: 'ProbeMONAILabel',
     });
     console.info('Here we activate the probe');
-
   };
 
   onLeaveActionTab = () => {
@@ -272,9 +271,9 @@ export default class SmartEdit extends BaseTab {
   };
 
   render() {
-    let models = [];
+    const models = [];
     if (this.props.info && this.props.info.models) {
-      for (let [name, model] of Object.entries(this.props.info.models)) {
+      for (const [name, model] of Object.entries(this.props.info.models)) {
         if (
           model.type === 'deepgrow' ||
           model.type === 'deepedit' ||
@@ -308,11 +307,14 @@ export default class SmartEdit extends BaseTab {
             onClick={this.onDeepgrow}
             onSelectModel={this.onSelectModel}
             usage={
-              <div style={{ fontSize: 'smaller'}}>
+              <div style={{ fontSize: 'smaller' }}>
                 <p>
                   Create a label and annotate <b>any organ</b>.
                 </p>
-                <a style={{ backgroundColor:'lightgray'}} onClick={() => this.clearPoints()}>
+                <a
+                  style={{ backgroundColor: 'lightgray' }}
+                  onClick={() => this.clearPoints()}
+                >
                   Clear Points
                 </a>
               </div>
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/callInputDialog.tsx b/plugins/ohifv3/extensions/monai-label/src/components/callInputDialog.tsx
index 6de2470d8..c7db40fdb 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/callInputDialog.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/callInputDialog.tsx
@@ -42,11 +42,11 @@ function callInputDialog(uiDialogService, label, callback) {
               className="border-primary-main bg-black"
               type="text"
               value={value.label}
-              onChange={event => {
+              onChange={(event) => {
                 event.persist();
-                setValue(value => ({ ...value, label: event.target.value }));
+                setValue((value) => ({ ...value, label: event.target.value }));
               }}
-              onKeyPress={event => {
+              onKeyPress={(event) => {
                 if (event.key === 'Enter') {
                   onSubmitHandler({ value, action: { id: 'save' } });
                 }
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/colorPickerDialog.tsx b/plugins/ohifv3/extensions/monai-label/src/components/colorPickerDialog.tsx
index 38e85efb2..1337ee103 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/colorPickerDialog.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/colorPickerDialog.tsx
@@ -37,7 +37,7 @@ function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
         ],
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {
-          const handleChange = color => {
+          const handleChange = (color) => {
             setValue({ rgbaColor: color.rgb });
           };
 
diff --git a/plugins/ohifv3/extensions/monai-label/src/getCommandsModule.ts b/plugins/ohifv3/extensions/monai-label/src/getCommandsModule.ts
index a1f4c751a..f61ec9bc0 100644
--- a/plugins/ohifv3/extensions/monai-label/src/getCommandsModule.ts
+++ b/plugins/ohifv3/extensions/monai-label/src/getCommandsModule.ts
@@ -1,7 +1,5 @@
 import { ServicesManager, CommandsManager, ExtensionManager } from '@ohif/core';
-import {
-  Enums,
-} from '@cornerstonejs/tools';
+import { Enums } from '@cornerstonejs/tools';
 
 export default function getCommandsModule({
   servicesManager,
@@ -22,14 +20,12 @@ export default function getCommandsModule({
 
   const actions = {
     setToolActive: ({ toolName }) => {
-
-        uiNotificationService.show({
-          title: 'MONAI Label probe',
-          message:
-            'MONAI Label Probe Activated.',
-          type: 'info',
-          duration: 3000,
-        });
+      uiNotificationService.show({
+        title: 'MONAI Label probe',
+        message: 'MONAI Label Probe Activated.',
+        type: 'info',
+        duration: 3000,
+      });
     },
   };
 
diff --git a/plugins/ohifv3/extensions/monai-label/src/getPanelModule.tsx b/plugins/ohifv3/extensions/monai-label/src/getPanelModule.tsx
index bb43be2d8..d848c282a 100644
--- a/plugins/ohifv3/extensions/monai-label/src/getPanelModule.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/getPanelModule.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
 import MonaiLabelPanel from './components/MonaiLabelPanel';
 
-
 function getPanelModule({
   commandsManager,
   extensionManager,
   servicesManager,
 }) {
-
   const WrappedMonaiLabelPanel = () => {
     return (
       <MonaiLabelPanel
-      commandsManager={commandsManager}
-      servicesManager={servicesManager}
-      extensionManager={extensionManager}
+        commandsManager={commandsManager}
+        servicesManager={servicesManager}
+        extensionManager={extensionManager}
       />
     );
   };
diff --git a/plugins/ohifv3/extensions/monai-label/src/index.tsx b/plugins/ohifv3/extensions/monai-label/src/index.tsx
index 5b3e76f6b..6ff0b7294 100644
--- a/plugins/ohifv3/extensions/monai-label/src/index.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/index.tsx
@@ -53,5 +53,4 @@ export default {
     commandsManager,
     extensionManager,
   }) => {},
-
 };
diff --git a/plugins/ohifv3/extensions/monai-label/src/init.ts b/plugins/ohifv3/extensions/monai-label/src/init.ts
index 58c3afdef..5b0cc3c8d 100644
--- a/plugins/ohifv3/extensions/monai-label/src/init.ts
+++ b/plugins/ohifv3/extensions/monai-label/src/init.ts
@@ -1,6 +1,4 @@
-import {
-  addTool,
-} from '@cornerstonejs/tools';
+import { addTool } from '@cornerstonejs/tools';
 import { Types } from '@ohif/core';
 import ProbeMONAILabelTool from './tools/ProbeMONAILabelTool';
 
diff --git a/plugins/ohifv3/extensions/monai-label/src/services/MonaiLabelClient.js b/plugins/ohifv3/extensions/monai-label/src/services/MonaiLabelClient.js
index 1b2081fcc..45ebe6cfa 100644
--- a/plugins/ohifv3/extensions/monai-label/src/services/MonaiLabelClient.js
+++ b/plugins/ohifv3/extensions/monai-label/src/services/MonaiLabelClient.js
@@ -29,7 +29,6 @@ export default class MonaiLabelClient {
     // url.searchParams.append('output', 'image');
     url = url.toString();
 
-
     if (result_extension) {
       params.result_extension = result_extension;
       params.result_dtype = 'uint16';
@@ -37,7 +36,7 @@ export default class MonaiLabelClient {
     }
 
     // return the indexes as defined in the config file
-    params.restore_label_idx = false
+    params.restore_label_idx = false;
 
     return await MonaiLabelClient.api_post(
       url,
diff --git a/plugins/ohifv3/extensions/monai-label/src/utils/GenericAnatomyColors.js b/plugins/ohifv3/extensions/monai-label/src/utils/GenericAnatomyColors.js
index 6a35cf9d7..666b3e552 100644
--- a/plugins/ohifv3/extensions/monai-label/src/utils/GenericAnatomyColors.js
+++ b/plugins/ohifv3/extensions/monai-label/src/utils/GenericAnatomyColors.js
@@ -1,4 +1,3 @@
-
 function componentToHex(c) {
   const hex = c.toString(16);
   return hex.length === 1 ? '0' + hex : hex;
diff --git a/plugins/ohifv3/extensions/monai-label/src/utils/GenericUtils.js b/plugins/ohifv3/extensions/monai-label/src/utils/GenericUtils.js
index e13c10259..b28881df7 100644
--- a/plugins/ohifv3/extensions/monai-label/src/utils/GenericUtils.js
+++ b/plugins/ohifv3/extensions/monai-label/src/utils/GenericUtils.js
@@ -1,4 +1,3 @@
-
 import { GenericAnatomyColors, GenericNames } from './GenericAnatomyColors';
 
 function getRandomInt(min, max) {
@@ -55,9 +54,15 @@ export class CookieUtils {
       let expires = new Date(exp_y, exp_m, exp_d);
       cookie_string += '; expires=' + expires.toGMTString();
     }
-    if (path) cookie_string += '; path=' + escape(path);
-    if (domain) cookie_string += '; domain=' + escape(domain);
-    if (secure) cookie_string += '; secure';
+    if (path) {
+      cookie_string += '; path=' + escape(path);
+    }
+    if (domain) {
+      cookie_string += '; domain=' + escape(domain);
+    }
+    if (secure) {
+      cookie_string += '; secure';
+    }
     document.cookie = cookie_string;
   }
 
@@ -65,8 +70,11 @@ export class CookieUtils {
     let results = document.cookie.match(
       '(^|;) ?' + cookie_name + '=([^;]*)(;|$)'
     );
-    if (results) return unescape(results[2]);
-    else return null;
+    if (results) {
+      return unescape(results[2]);
+    } else {
+      return null;
+    }
   }
 
   static getCookieString(name, defaultVal = '') {
diff --git a/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationReader.js b/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationReader.js
index 47c0dc4d0..ca117754a 100644
--- a/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationReader.js
+++ b/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationReader.js
@@ -69,14 +69,14 @@ export default class SegmentationReader {
     const nrrdBuffer = SegmentationReader.serializeNrrd(header, image);
 
     const reader = readImageArrayBuffer(null, nrrdBuffer, 'temp.nrrd');
-    reader.then(function(response) {
+    reader.then(function (response) {
       const writer = writeArrayBuffer(
         response.webWorker,
         true,
         response.image,
         filename
       );
-      writer.then(function(response) {
+      writer.then(function (response) {
         SegmentationReader.saveFile(new Blob([response.arrayBuffer]), filename);
         console.debug('File downloaded: ' + filename);
       });
diff --git a/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationUtils.tsx b/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationUtils.tsx
index 6be5582e9..5a762d957 100644
--- a/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationUtils.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/utils/SegmentationUtils.tsx
@@ -1,43 +1,39 @@
-import {
-  getLabelColor,
-} from './GenericUtils';
-
+import { getLabelColor } from './GenericUtils';
 
 function createSegmentMetadata(
   label,
   segmentId,
   description = '',
-  newLabelMap = false,
+  newLabelMap = false
 ) {
-
   const labelMeta = {
-        SegmentedPropertyCategoryCodeSequence: {
-          CodeValue: 'T-D0050',
-          CodingSchemeDesignator: 'SRT',
-          CodeMeaning: 'Tissue',
-        },
-        SegmentNumber: 1,
-        SegmentLabel: label ? label : 'label-0-1',
-        SegmentDescription: description,
-        SegmentAlgorithmType: 'SEMIAUTOMATIC',
-        SegmentAlgorithmName: 'MONAI',
-        SegmentedPropertyTypeCodeSequence: {
-          CodeValue: 'T-D0050',
-          CodingSchemeDesignator: 'SRT',
-          CodeMeaning: 'Tissue',
-        },
-      };
+    SegmentedPropertyCategoryCodeSequence: {
+      CodeValue: 'T-D0050',
+      CodingSchemeDesignator: 'SRT',
+      CodeMeaning: 'Tissue',
+    },
+    SegmentNumber: 1,
+    SegmentLabel: label ? label : 'label-0-1',
+    SegmentDescription: description,
+    SegmentAlgorithmType: 'SEMIAUTOMATIC',
+    SegmentAlgorithmName: 'MONAI',
+    SegmentedPropertyTypeCodeSequence: {
+      CodeValue: 'T-D0050',
+      CodingSchemeDesignator: 'SRT',
+      CodeMeaning: 'Tissue',
+    },
+  };
 
   if (newLabelMap) {
     console.debug('Logic to create a new segment');
   }
 
-  const color = getLabelColor(label)
+  const color = getLabelColor(label);
 
   const rgbColor = [];
-  for (let key in color) {
+  for (const key in color) {
     rgbColor.push(color[key]);
-    }
+  }
 
   rgbColor.push(255);
 
@@ -52,6 +48,4 @@ function createSegmentMetadata(
   };
 }
 
-export {
-  createSegmentMetadata,
-};
+export { createSegmentMetadata };
diff --git a/plugins/ohifv3/modes/monai-label/babel.config.js b/plugins/ohifv3/modes/monai-label/babel.config.js
index 92fbbdeaf..a38ddda21 100644
--- a/plugins/ohifv3/modes/monai-label/babel.config.js
+++ b/plugins/ohifv3/modes/monai-label/babel.config.js
@@ -10,7 +10,7 @@ module.exports = {
             modules: 'commonjs',
             debug: false,
           },
-          "@babel/preset-typescript",
+          '@babel/preset-typescript',
         ],
         '@babel/preset-react',
       ],
@@ -26,7 +26,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
     },
@@ -35,7 +35,7 @@ module.exports = {
         // WebPack handles ES6 --> Target Syntax
         ['@babel/preset-env', { modules: false }],
         '@babel/preset-react',
-        "@babel/preset-typescript",
+        '@babel/preset-typescript',
       ],
       plugins: ['react-hot-loader/babel'],
       ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
diff --git a/plugins/ohifv3/modes/monai-label/src/index.tsx b/plugins/ohifv3/modes/monai-label/src/index.tsx
index 199bafce6..00e4be7da 100644
--- a/plugins/ohifv3/modes/monai-label/src/index.tsx
+++ b/plugins/ohifv3/modes/monai-label/src/index.tsx
@@ -12,7 +12,7 @@ const ohif = {
 
 const monailabel = {
   monaiLabel: '@ohif/extension-monai-label.panelModule.monailabel',
-}
+};
 
 const cornerstone = {
   viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
diff --git a/plugins/ohifv3/modes/monai-label/src/toolbarButtons.js b/plugins/ohifv3/modes/monai-label/src/toolbarButtons.js
index 92de37e89..5b71b36c2 100644
--- a/plugins/ohifv3/modes/monai-label/src/toolbarButtons.js
+++ b/plugins/ohifv3/modes/monai-label/src/toolbarButtons.js
@@ -64,7 +64,7 @@ const toolGroupIds = ['default', 'mpr', 'SRToolGroup'];
  * @returns {Array} an array of 'setToolActive' commands
  */
 function _createSetToolActiveCommands(toolName) {
-  const temp = toolGroupIds.map(toolGroupId => ({
+  const temp = toolGroupIds.map((toolGroupId) => ({
     commandName: 'setToolActive',
     commandOptions: {
       toolGroupId,