From 6fdd2edea7b016983589711f65d488aa26a48677 Mon Sep 17 00:00:00 2001
From: Sachidanand Alle <salle@nvidia.com>
Date: Fri, 22 Nov 2024 10:46:41 +0000
Subject: [PATCH] Add Active Learning Section

Signed-off-by: Sachidanand Alle <salle@nvidia.com>
---
 .../src/components/ModelSelector.tsx          |   2 +-
 .../src/components/MonaiLabelPanel.tsx        |  13 +
 .../src/components/actions/ActiveLearning.tsx | 272 ++++++++++--------
 .../components/actions/AutoSegmentation.tsx   |   2 +-
 .../src/components/actions/ClassPrompts.tsx   |   2 +-
 .../src/components/actions/NextSampleForm.css |   3 +-
 .../src/components/actions/NextSampleForm.tsx |   2 +-
 .../src/components/actions/OptionTable.tsx    |   2 +-
 .../src/components/actions/OptionsForm.tsx    |   4 +-
 .../src/components/actions/PointPrompts.tsx   |   2 +-
 10 files changed, 173 insertions(+), 131 deletions(-)

diff --git a/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx b/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx
index 9b57544a5..49ed04ccd 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx
@@ -82,7 +82,7 @@ export default class ModelSelector extends Component {
                 <select
                   className="selectBox"
                   onChange={this.onChangeModel}
-                  value={currentModel}
+                  defaultValue={currentModel}
                 >
                   {this.props.models.map((model) => (
                     <option key={model} name={model} value={model}>
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx b/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx
index c8cee03d4..70e3143a0 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.tsx
@@ -4,6 +4,7 @@ import './MonaiLabelPanel.css';
 import AutoSegmentation from './actions/AutoSegmentation';
 import PointPrompts from './actions/PointPrompts';
 import ClassPrompts from './actions/ClassPrompts';
+import ActiveLearning from './actions/ActiveLearning';
 import MonaiLabelClient from '../services/MonaiLabelClient';
 import { hideNotification, getLabelColor } from '../utils/GenericUtils';
 import { Enums } from '@cornerstonejs/tools';
@@ -24,6 +25,7 @@ export default class MonaiLabelPanel extends Component {
   notification: any;
   settings;
   actions: {
+    activelearning: any;
     segmentation: any;
     pointprompts: any;
     classprompts: any;
@@ -37,6 +39,7 @@ export default class MonaiLabelPanel extends Component {
     this.notification = uiNotificationService;
     this.settings = React.createRef();
     this.actions = {
+      activelearning: React.createRef(),
       segmentation: React.createRef(),
       pointprompts: React.createRef(),
       classprompts: React.createRef(),
@@ -407,6 +410,16 @@ export default class MonaiLabelPanel extends Component {
         )}
         {isDataReady && (
           <div className="tabs scrollbar" id="style-3">
+            <ActiveLearning
+              ref={this.actions['activelearning']}
+              tabIndex={1}
+              info={this.state.info}
+              client={this.client}
+              updateView={this.updateView}
+              onSelectActionTab={this.onSelectActionTab}
+              onOptionsConfig={this.onOptionsConfig}
+              getActiveViewportInfo={this.getActiveViewportInfo}
+            />
             <AutoSegmentation
               ref={this.actions['segmentation']}
               tabIndex={2}
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 af79d4bdf..4e8abcded 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.tsx
@@ -1,43 +1,64 @@
+/*
+Copyright (c) MONAI Consortium
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import React from 'react';
+
 import BaseTab from './BaseTab';
-import { cache, triggerEvent, eventTarget } from '@cornerstonejs/core';
-import { Enums } from '@cornerstonejs/tools';
 import NextSampleForm from './NextSampleForm';
 
-export default class ActiveLearning extends BaseTab {
+export default class OptionTable extends BaseTab {
   constructor(props) {
     super(props);
+    this.state = {
+      strategy: 'random',
+      training: false,
+      segmentId: 'liver',
+    };
   }
 
   onClickNextSample = async () => {
     const nid = this.notification.show({
       title: 'MONAI Label',
-      message: 'Fetching Next Recommended Image for Annotation',
+      message: 'Running Active Learning strategy - ' + this.state.strategy,
       type: 'info',
-      duration: 4000,
+      duration: 60000,
     });
 
-    const response = await this.props.client().next_image();
-    console.log(response.data);
-
+    const strategy = this.state.strategy;
+    const config = this.props.onOptionsConfig();
+    const params =
+      config && config.activelearning && config.activelearning[strategy]
+        ? config.activelearning[strategy]
+        : {};
+    const response = await this.props.client().next_sample(strategy, params);
     if (!nid) {
       window.snackbar.hideAll();
     } else {
       this.notification.hide(nid);
     }
 
-    if (response.status !== 201) {
+    if (response.status !== 200) {
       this.notification.show({
-        title: 'Active Learning',
+        title: 'MONAI Label',
         message: 'Failed to Fetch Next Sample',
         type: 'error',
-        duration: 6000,
+        duration: 5000,
       });
     } else {
       this.uiModelService.show({
         content: NextSampleForm,
         contentProps: {
-          info: response.data.meta,
+          info: response.data,
         },
         shouldCloseOnEsc: true,
         title: 'Active Learning - Next Sample',
@@ -46,103 +67,68 @@ export default class ActiveLearning extends BaseTab {
     }
   };
 
-  onClickRecoverSeg = async () => {
-    const nid = this.notification.show({
-      title: 'MONAI Label',
-      message: 'Recover Annotation from Most Recent Inference',
-      type: 'info',
-      duration: 2000,
-    });
-
-    const scalarDataRecover = window.ScalarDataBuffer;
-    const volumeLoadObject = cache.getVolume('1');
-
-    console.log(volumeLoadObject);
-
-    if (volumeLoadObject) {
-      const { scalarData } = volumeLoadObject;
-      scalarData.set(scalarDataRecover);
-      triggerEvent(eventTarget, Enums.Events.SEGMENTATION_DATA_MODIFIED, {
-        segmentationId: '1',
-      });
-      console.debug("updated the segmentation's scalar data");
-    } else {
-      this.notification.show({
-        title: 'MONAI Label',
-        message: 'No latest inference to recover',
-        type: 'error',
-        duration: 6000,
-      });
-      return;
-    }
-  };
+  onClickUpdateModel = async () => {
+    const training = this.state.training;
+    console.debug('Current training status: ' + training);
+    const config = this.props.onOptionsConfig();
+    const params = config && config.train ? config.train : {};
 
-  onClickNotifyServer = async () => {
-    const { displaySetService } = this.props.servicesManager.services;
-    const activeDisplaySets = displaySetService.activeDisplaySets;
-
-    // iterate all display sets and check if SEG exists, get series IDs
-    let segCount = 0;
-    let latestLabelSeriesTimestamp = 0;
-    let latestLabelSeriesInstanceUID = '';
-    let latestImageSeriesInstanceUID = '';
-
-    for (const item of activeDisplaySets) {
-      if (item.Modality === 'SEG') {
-        segCount++;
-        const curLabelTimestamp = `${item.SeriesDate}${item.instance.SeriesTime}`;
-        if (curLabelTimestamp > latestLabelSeriesTimestamp) {
-          latestLabelSeriesTimestamp = curLabelTimestamp;
-          latestLabelSeriesInstanceUID = item.SeriesInstanceUID;
-        }
-      } else if (item.Modality === 'CT') {
-        //TODO: if image modality is other than CT, add others
-        latestImageSeriesInstanceUID = item.SeriesInstanceUID;
-      }
-    }
+    const response = training
+      ? await this.props.client().stop_train()
+      : await this.props.client().run_train(params);
 
-    if (segCount === 0) {
+    if (response.status !== 200) {
       this.notification.show({
         title: 'MONAI Label',
-        message: 'No segmentation added.',
+        message: 'Failed to ' + (training ? 'STOP' : 'RUN') + ' training',
         type: 'error',
         duration: 5000,
       });
-      return;
-    }
-    const data = {
-      added: [],
-      updated: [],
-      removed: [],
-    };
-
-    data[segCount > 1 ? 'updated' : 'added'].push({
-      image: latestImageSeriesInstanceUID,
-      label: latestLabelSeriesInstanceUID,
-    });
-
-    const response = await this.props.client().notify(data);
-
-    console.log(response.data);
-    if (response.status !== 201) {
+    } else {
       this.notification.show({
         title: 'MONAI Label',
-        message: 'Failed. Response Error',
-        type: 'error',
-        duration: 5000,
+        message: 'Model update task ' + (training ? 'STOPPED' : 'STARTED'),
+        type: 'success',
+        duration: 2000,
       });
-      return;
+      this.setState({ training: !training });
     }
-
-    this.notification.show({
-      title: 'MONAI Label',
-      message: 'Notified Server  - Successful',
-      type: 'success',
-      duration: 2000,
-    });
   };
 
+  async componentDidMount() {
+    const training = await this.props.client().is_train_running();
+    this.setState({ training: training });
+  }
+
   render() {
+    const ds = this.props.info.data.datastore;
+    const completed = ds && ds.completed ? ds.completed : 0;
+    const total = ds && ds.total ? ds.total : 1;
+    const activelearning = Math.round(100 * (completed / total)) + '%';
+    const activelearningTip = completed + '/' + total + ' samples annotated';
+
+    const ts = this.props.info.data.train_stats
+      ? Object.values(this.props.info.data.train_stats)[0]
+      : null;
+
+    const epochs = ts ? (ts.total_time ? 0 : ts.epoch ? ts.epoch : 1) : 0;
+    const total_epochs = ts && ts.total_epochs ? ts.total_epochs : 1;
+    const training = Math.round(100 * (epochs / total_epochs)) + '%';
+    const trainingTip = epochs
+      ? epochs + '/' + total_epochs + ' epochs completed'
+      : 'Not Running';
+
+    const accuracy =
+      ts && ts.best_metric ? Math.round(100 * ts.best_metric) + '%' : '0%';
+    const accuracyTip =
+      ts && ts.best_metric
+        ? accuracy + ' is current best metric'
+        : 'not determined';
+
+    const strategies = this.props.info.data.strategies
+      ? this.props.info.data.strategies
+      : {};
+
     return (
       <div className="tab">
         <input
@@ -150,8 +136,7 @@ export default class ActiveLearning extends BaseTab {
           type="checkbox"
           id={this.tabId}
           name="activelearning"
-          value="activelearning"
-          defaultChecked
+          defaultValue="activelearning"
         />
         <label className="tab-label" htmlFor={this.tabId}>
           Active Learning
@@ -163,46 +148,89 @@ export default class ActiveLearning extends BaseTab {
                 <td>
                   <button
                     className="actionInput"
-                    style={{
-                      backgroundColor: 'lightgray',
-                      padding: '1px 1px',
-                      borderRadius: '2px',
-                      border: 'none',
-                    }}
+                    style={{ backgroundColor: 'lightgray' }}
                     onClick={this.onClickNextSample}
                   >
                     Next Sample
                   </button>
                 </td>
-              </tr>
-              <tr>
+                <td>&nbsp;</td>
                 <td>
                   <button
                     className="actionInput"
-                    style={{
-                      backgroundColor: 'lightgray',
-                      padding: '1px 1px',
-                      borderRadius: '2px',
-                      border: 'none',
-                    }}
-                    onClick={this.onClickNotifyServer}
+                    style={{ backgroundColor: 'lightgray' }}
+                    onClick={this.onClickUpdateModel}
                   >
-                    Notify Server
+                    {this.state.training ? 'Stop Training' : 'Update Model'}
                   </button>
                 </td>
               </tr>
             </tbody>
           </table>
           <br />
-          <u>
-            <a
-              href="#"
-              style={{ color: 'lightyellow', fontSize: 'smaller' }}
-              onClick={() => this.onClickRecoverSeg()}
-            >
-              Recover Seg
-            </a>
-          </u>
+
+          <table className="optionsTable">
+            <tbody>
+              <tr>
+                <td>Strategy:</td>
+                <td width="80%">
+                  <select
+                    className="actionInput"
+                    onChange={this.onChangeStrategy}
+                    defaultValue={this.state.strategy}
+                  >
+                    {Object.keys(strategies).map((a) => (
+                      <option key={a} name={a} value={a}>
+                        {a}
+                      </option>
+                    ))}
+                  </select>
+                </td>
+              </tr>
+              <tr>
+                <td colSpan="2">&nbsp;</td>
+              </tr>
+              <tr>
+                <td>Annotated:</td>
+                <td width="80%" title={activelearningTip}>
+                  <div className="w3-round w3-light-grey w3-tiny">
+                    <div
+                      className="w3-round w3-container w3-blue w3-center"
+                      style={{ backgroundColor: 'white' }}
+                    >
+                      {activelearning}
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Training:</td>
+                <td title={trainingTip}>
+                  <div className="w3-round w3-light-grey w3-tiny">
+                    <div
+                      className="w3-round w3-container w3-orange w3-center"
+                      style={{ backgroundColor: 'white' }}
+                    >
+                      {training}
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <td>Train Acc:</td>
+                <td title={accuracyTip}>
+                  <div className="w3-round w3-light-grey w3-tiny">
+                    <div
+                      className="w3-round w3-container w3-green w3-center"
+                      style={{ backgroundColor: 'white' }}
+                    >
+                      {accuracy}
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </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 0af6e57a5..d249a8d5f 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/AutoSegmentation.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/AutoSegmentation.tsx
@@ -121,7 +121,7 @@ export default class AutoSegmentation extends BaseTab {
           name="rd"
           id={this.tabId}
           className="tab-switch"
-          value="segmentation"
+          defaultValue="segmentation"
           onClick={this.onSelectActionTab}
           defaultChecked
         />
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/ClassPrompts.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/ClassPrompts.tsx
index 086d2f8f7..0601ea76f 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/ClassPrompts.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/ClassPrompts.tsx
@@ -319,7 +319,7 @@ export default class ClassPrompts extends BaseTab {
           name="rd"
           id={this.tabId}
           className="tab-switch"
-          value="segmentation"
+          defaultValue="segmentation"
           onClick={this.onSelectActionTab}
         />
         <label htmlFor={this.tabId} className="tab-label">
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.css b/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.css
index 7fe193316..1ee5e67db 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.css
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.css
@@ -1,5 +1,4 @@
 .nextSampleForm {
-  width: 750px;
 }
 .nextSampleForm .actionButton {
   border: 1px solid var(--ui-border-color-active);
@@ -28,6 +27,8 @@
   border-collapse: collapse;
   width: 100%;
   font-size: smaller;
+  background-color: azure;
+  color: black;
 }
 .nextSampleForm .optionsTable th {
   border: 1px solid #ddd;
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 c355acaf2..61897add4 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/NextSampleForm.tsx
@@ -38,7 +38,7 @@ export default class NextSampleForm extends Component {
       SeriesInstanceUID: 'Series Instance UID',
     };
     return (
-      <div>
+      <div className="nextSampleForm">
         <table className="optionsTable">
           <thead>
             <tr>
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 0dc688f96..406fde423 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionTable.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionTable.tsx
@@ -95,7 +95,7 @@ export default class OptionTable extends Component {
                     <input
                       id={section + name + k}
                       type="text"
-                      defaultValue={v ? v : ''}
+                      defaultValue={v ? '' + v : ''}
                       className="optionsInput"
                       onChange={(e) =>
                         this.props.onChangeConfig(section, name, k, e)
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.tsx
index f436e3aa7..6190bb852 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.tsx
@@ -166,7 +166,7 @@ export default class OptionsForm extends Component {
                   className="selectBox"
                   name="selectSection"
                   onChange={this.onChangeSection}
-                  value={section}
+                  defaultValue={section}
                 >
                   {Object.keys(config).map((k) => (
                     <option key={k} value={k}>
@@ -183,7 +183,7 @@ export default class OptionsForm extends Component {
                   className="selectBox"
                   name="selectName"
                   onChange={this.onChangeName}
-                  value={name}
+                  defaultValue={name}
                 >
                   {Object.keys(section_map).map((k) => (
                     <option key={k} value={k}>
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.tsx
index 2dcebd936..9d967874d 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.tsx
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.tsx
@@ -306,7 +306,7 @@ export default class PointPrompts extends BaseTab {
           name="rd"
           id={this.tabId}
           className="tab-switch"
-          value="pointprompts"
+          defaultValue="pointprompts"
           onClick={this.onSelectActionTab}
         />
         <label htmlFor={this.tabId} className="tab-label">