Upgrade OHIF v3 plugin to support OHIF 3.9+ version

plugins/ohif/monai-label/src/components/SettingsTable.js

@@ -63,7 +63,7 @@ export default class SettingsTable extends Component {
                 name="aiaaServerURL"
                 type="text"
                 defaultValue={this.state.url}
-                onBlur={this.onBlurSeverURL}
+                onChange={this.onBlurSeverURL}
               />
             </td>
             <td>&nbsp;</td>

plugins/ohifv3/build.sh

@@ -27,7 +27,7 @@ cd ${my_dir}
 rm -rf Viewers
 git clone https://github.com/OHIF/Viewers.git
 cd Viewers
-git checkout 33f125940863607f8dba82c71b27a43f35431dd5
+git checkout d8ef36ed24466988586e19b855d2bbb86f8c657a
 
 #cp -r ../extensions/monai-label extensions/
 #cp -r ../modes/monai-label modes/monai-label
@@ -45,6 +45,8 @@ cp ../config/monai_label.js platform/app/public/config/monai_label.js
 
 yarn config set workspaces-experimental true
 yarn install
+yarn run cli list
+
 APP_CONFIG=config/monai_label.js PUBLIC_URL=/ohif/ QUICK_BUILD=true yarn run build
 
 rm -rf ${install_dir}

plugins/ohifv3/extensions.patch

@@ -9,7 +9,7 @@ index 08a42deb0..69e5aa005 100644
 +    {
 +      "packageName": "@ohif/extension-monai-label",
 +      "default": false,
-+      "version": "0.0.1"
++      "version": "3.0.0"
 +    },
      {
        "packageName": "@ohif/extension-dicom-microscopy",
@@ -20,6 +20,7 @@ index 08a42deb0..69e5aa005 100644
      },
 +    {
 +      "packageName": "@ohif/mode-monai-label"
++      "version": "3.0.0"
 +    },
      {
        "packageName": "@ohif/mode-tmtv"

plugins/ohifv3/extensions/monai-label/.webpack/webpack.dev.js

@@ -0,0 +1,12 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.tsx`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

plugins/ohifv3/extensions/monai-label/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@ohif/extension-monai-label",
-    "version": "0.0.1",
+    "version": "3.0.0",
     "description": "OHIFv3 extension for MONAI Label",
     "author": "OHIF,NVIDIA,KCL",
     "license": "MIT",
-    "main": "dist/umd/extension-monai-label/index.umd.js",
+    "main": "dist/ohif-extension-monai-label.umd.js",
+    "module": "src/index.tsx",
     "files": [
         "dist/**",
         "public/**",
@@ -14,7 +15,6 @@
     "keywords": [
         "ohif-extension"
     ],
-    "module": "src/index.tsx",
     "publishConfig": {
         "access": "public"
     },
@@ -24,41 +24,48 @@
         "yarn": ">=1.18.0"
     },
     "scripts": {
+        "clean": "shx rm -rf dist",
+        "clean:deep": "yarn run clean && shx rm -rf node_modules",
         "dev": "cross-env NODE_ENV=development webpack --config .webpack/webpack.dev.js --watch --output-pathinfo",
-        "dev:my-extension": "yarn run dev",
         "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
-        "build:package": "yarn run build",
-        "start": "yarn run dev"
+        "build:package-1": "yarn run build",
+        "start": "yarn run dev",
+        "test:unit": "jest --watchAll",
+        "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests"
     },
     "peerDependencies": {
-        "@ohif/core": "^3.7.0-beta.80",
-        "@ohif/extension-default": "^3.7.0-beta.80",
-        "@ohif/extension-cornerstone": "^3.7.0-beta.80",
-        "@ohif/i18n": "^3.7.0-beta.80",
+        "@ohif/core": "3.10.0-beta.5",
+        "@ohif/extension-cornerstone": "3.10.0-beta.5",
+        "@ohif/extension-default": "3.10.0-beta.5",
+        "@ohif/i18n": "3.10.0-beta.5",
         "prop-types": "^15.6.2",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-i18next": "^12.2.2",
-        "react-router": "^6.8.1",
-        "react-router-dom": "^6.8.1"
+        "react-router": "^6.23.1",
+        "react-router-dom": "^6.23.1"
     },
     "dependencies": {
         "@babel/runtime": "^7.20.13",
+        "@cornerstonejs/adapters": "^2.2.3",
+        "@cornerstonejs/core": "^2.2.3",
+        "@kitware/vtk.js": "32.1.0",
+        "react-color": "^2.19.3",
         "md5.js": "^1.3.5",
         "axios": "^0.21.1",
         "arraybuffer-concat": "^0.0.1",
         "ndarray": "^1.0.19",
         "nrrd-js": "^0.2.1",
         "pako": "^2.0.3",
-        "react-color": "^2.19.3",
         "bootstrap": "^5.0.2",
         "react-select": "^4.3.1",
-        "chroma-js": "^2.1.2",
-        "itk": "^14.1.1"
+        "chroma-js": "^2.1.2"
     },
     "devDependencies": {
         "@babel/runtime": "^7.20.13",
-        "@cornerstonejs/tools": "^1.16.4",
+        "@cornerstonejs/adapters": "^2.2.3",
+        "@cornerstonejs/core": "^2.2.3",
+        "@cornerstonejs/tools": "^2.2.3",
         "react-color": "^2.19.3"
     }
 }

plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.css

@@ -1,3 +1,16 @@
+/*
+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.
+*/
+
 .modelSelector .table {
   border-collapse: collapse;
   border: 0 solid;
@@ -8,23 +21,26 @@
 }
 .modelSelector .selectBox {
   width: 100%;
+  color: #000;
+  font-size: smaller;
+  height: 18px;
 }
 .modelSelector .actionButton {
   border: 2px solid #000;
   border-radius: 15px;
-  background-color: #add8e6;
+  background-color: #00a4d9;
   color: var(--ui-gray-dark);
-  line-height: 25px;
+  line-height: 20px;
   padding: 0 15px;
   outline: none;
   cursor: pointer;
 }
 .modelSelector .actionButton:hover,
 .modelSelector .actionButton:active {
-  background-color: var(--ui-sky-blue);
+  background-color: #00a4d9;
 }
 .modelSelector .actionButton:disabled {
-  background-color: var(--ui-sky-blue);
+  background-color: #00a4d9;
 }
 .modelSelector .actionButton svg {
   margin-right: 4px;

plugins/ohifv3/extensions/monai-label/src/components/ModelSelector.tsx

@@ -1,3 +1,16 @@
+/*
+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, { Component } from 'react';
 import PropTypes from 'prop-types';
 
@@ -12,7 +25,6 @@ export default class ModelSelector extends Component {
     usage: PropTypes.any,
     onClick: PropTypes.func,
     onSelectModel: PropTypes.func,
-    scribblesSelector: PropTypes.any,
   };
 
   constructor(props) {
@@ -21,8 +33,8 @@ export default class ModelSelector extends Component {
     const currentModel = props.currentModel
       ? props.currentModel
       : props.models.length > 0
-      ? props.models[0]
-      : '';
+        ? props.models[0]
+        : '';
     this.state = {
       models: props.models,
       currentModel: currentModel,
@@ -83,7 +95,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}>
@@ -107,7 +119,6 @@ export default class ModelSelector extends Component {
                 </button>
               </td>
             </tr>
-            {this.props.scribblesSelector}
           </tbody>
         </table>
         {this.props.usage}

plugins/ohifv3/extensions/monai-label/src/components/MonaiLabelPanel.css

@@ -1,34 +1,44 @@
-@import url("w3.css");
+/*
+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 url("w3.css");*/
 
 .monaiLabelPanel {
-  background-color: #789;
+  background-color: #000;
   height: 100%;
   width: 100%;
-  display: flex;
   flex-direction: column;
   color: var(--text-primary-color);
   padding: 2px;
-  overflow-y: scroll; /* Make the panel scrollable vertically */
 /* Accordion styles */
 }
 .monaiLabelPanel .subtitle {
-  font-size: 14px;
+  font-size: 9px;
   text-decoration: underline;
   font-weight: 500;
-  color: #000;
+  color: aqua;
   margin: 1px;
   text-align: center;
 }
 .monaiLabelPanel .tabs {
   border-radius: 4px;
   overflow: auto;
   box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);
-  background: #000;
   margin: 1rem 0;
 }
 .monaiLabelPanel .tab {
   width: 100%;
-  color: #fff;
+  /*color: #fff;*/
   overflow: hidden;
 }
 .monaiLabelPanel .tab-switch {
@@ -61,11 +71,11 @@
 .monaiLabelPanel .tab-content {
   max-height: 0;
   padding: 0 1em;
-  background: #808080;
+  background: #000;
   transition: all 0.35s;
   width: 90%;
   font-size: small;
-  color: #000;
+  color: #fff;
 }
 .monaiLabelPanel .tab-close {
   display: flex;
@@ -79,7 +89,7 @@
   background: #1a252f;
 }
 .monaiLabelPanel input:checked + .tab-label {
-  background: #000;
+  background: #00a4d9;
 }
 .monaiLabelPanel input:checked + .tab-label::after {
   transform: rotate(90deg);
@@ -98,22 +108,21 @@
   width: 100%;
   padding: 1px;
   border: 1px solid #000;
-  border-radius: 5px;
   color: #000;
 }
 .monaiLabelPanel .actionButton {
   border: 1px solid #000;
   border-radius: 15px;
-  background-color: #add8e6;
+  background-color: #00a4d9;
   color: #000;
   line-height: 25px;
-  padding: 10px;
+  padding: 10px 20px;
   outline: none;
   cursor: pointer;
 }
 .monaiLabelPanel .actionButton:hover,
 .monaiLabelPanel .actionButton:active {
-  background-color: var(--ui-sky-blue);
+  background-color: #00a4d9;
 }
 .monaiLabelPanel .actionButton:disabled {
   background-color: var(--ui-sky-blue);
@@ -122,6 +131,7 @@
   margin-right: 4px;
   position: relative;
   top: 2px;
+  bottom: 2px;
 }
 .scrollbar {
   overflow-y: scroll;