diff --git a/.gitignore b/.gitignore
index 59af1f056..69f5d3f66 100644
--- a/.gitignore
+++ b/.gitignore
@@ -166,3 +166,7 @@ junit
test-output.xml
studies
tests/data
+yarn.lock
+# Packages
+node_modules
+yarn.lock
diff --git a/monailabel/config.py b/monailabel/config.py
index 39c5db3a4..e041cacce 100644
--- a/monailabel/config.py
+++ b/monailabel/config.py
@@ -62,7 +62,7 @@ class Settings(BaseSettings):
MONAI_LABEL_DICOMWEB_FETCH_BY_FRAME: bool = False
MONAI_LABEL_DICOMWEB_CONVERT_TO_NIFTI: bool = True
MONAI_LABEL_DICOMWEB_SEARCH_FILTER: Dict[str, Any] = {"Modality": "CT"}
- MONAI_LABEL_DICOMWEB_CACHE_EXPIRY: int = 180
+ MONAI_LABEL_DICOMWEB_CACHE_EXPIRY: int = 7200
MONAI_LABEL_DICOMWEB_PROXY_TIMEOUT: float = 30.0
MONAI_LABEL_DICOMWEB_READ_TIMEOUT: float = 5.0
diff --git a/monailabel/datastore/utils/convert.py b/monailabel/datastore/utils/convert.py
index 2d6b0ea94..a0403e1d7 100644
--- a/monailabel/datastore/utils/convert.py
+++ b/monailabel/datastore/utils/convert.py
@@ -60,7 +60,7 @@ def dicom_to_nifti(series_dir, is_seg=False):
return output_file
-def binary_to_image(reference_image, label, dtype=np.uint16, file_ext=".nii.gz"):
+def binary_to_image(reference_image, label, dtype=np.uint8, file_ext=".nii.gz"):
start = time.time()
image_np, meta_dict = LoadImage(image_only=False)(reference_image)
diff --git a/monailabel/endpoints/ohif.py b/monailabel/endpoints/ohif.py
index b4d9ad68f..55a4ea597 100644
--- a/monailabel/endpoints/ohif.py
+++ b/monailabel/endpoints/ohif.py
@@ -38,8 +38,17 @@ def get_ohif(path: str):
if not os.path.exists(file):
logger.info(file)
raise HTTPException(status_code=404, detail="Resource NOT Found")
+
return FileResponse(file, media_type=get_mime_type(file))
+ # headers = {
+ # "Cross-Origin-Opener-Policy": "same-origin",
+ # "Cross-Origin-Embedder-Policy": "require-corp",
+ # "Cross-Origin-Resource-Policy": "same-site",
+ # }
+
+ # return FileResponse(file, media_type=get_mime_type(file), headers=headers)
+
@router.get("/{path:path}", include_in_schema=False)
async def api_get_ohif(path: str, user: User = Depends(RBAC(settings.MONAI_LABEL_AUTH_ROLE_USER))):
diff --git a/monailabel/endpoints/proxy.py b/monailabel/endpoints/proxy.py
index 0dc4709ed..8b2529832 100644
--- a/monailabel/endpoints/proxy.py
+++ b/monailabel/endpoints/proxy.py
@@ -65,6 +65,9 @@ async def proxy_dicom(op: str, path: str, response: Response):
)
# some version of ohif requests metadata using qido so change it to wado
+ print(
+ f"This is the server {server} - This is the op {op} - This is the prefix {prefix} - This is the path {path}"
+ )
if path.endswith("metadata") and op == "qido":
prefix = settings.MONAI_LABEL_WADO_PREFIX
@@ -78,10 +81,16 @@ async def proxy_dicom(op: str, path: str, response: Response):
settings.MONAI_LABEL_DICOMWEB_PROXY_TIMEOUT,
read=settings.MONAI_LABEL_DICOMWEB_READ_TIMEOUT,
)
+
+ print(f"This is the proxy path: {proxy_path}")
proxy = await client.get(proxy_path, timeout=timeout)
response.body = proxy.content
response.status_code = proxy.status_code
+ # response.headers["Cross-Origin-Opener-Policy"] = "same-origin"
+ # response.headers["Cross-Origin-Embedder-Policy"] = "require-corp"
+ # response.headers["Cross-Origin-Resource-Policy"] = "same-site"
+ # response.headers["Cross-Origin-Resource-Policy"] = "cross-origin"
return response
diff --git a/monailabel/tasks/infer/basic_infer.py b/monailabel/tasks/infer/basic_infer.py
index 2c335d353..e0b12eddc 100644
--- a/monailabel/tasks/infer/basic_infer.py
+++ b/monailabel/tasks/infer/basic_infer.py
@@ -355,6 +355,17 @@ def __call__(
"transform": data.get("latencies"),
}
+ # Add Centroids to the result json to consume in OHIF v3
+ centroids = data.get("centroids", None)
+ if centroids is not None:
+ centroids_dict = dict()
+ for c in centroids:
+ all_items = list(c.items())
+ centroids_dict[all_items[0][0]] = [str(i) for i in all_items[0][1]] # making it json compatible
+ result_json["centroids"] = centroids_dict
+ else:
+ result_json["centroids"] = dict()
+
if result_file_name is not None and isinstance(result_file_name, str):
logger.info(f"Result File: {result_file_name}")
logger.info(f"Result Json Keys: {list(result_json.keys())}")
diff --git a/plugins/ohif/monai-label/src/components/MonaiLabelPanel.js b/plugins/ohif/monai-label/src/components/MonaiLabelPanel.js
index 6ed5a442e..c17675044 100644
--- a/plugins/ohif/monai-label/src/components/MonaiLabelPanel.js
+++ b/plugins/ohif/monai-label/src/components/MonaiLabelPanel.js
@@ -39,6 +39,10 @@ export default class MonaiLabelPanel extends Component {
super(props);
const { viewports, studies, activeIndex } = props;
+ /* setTimeout(() => {
+ this.viewConstants = this.getViewConstants(viewports, studies, activeIndex);
+ }, 2000) */
+
this.viewConstants = this.getViewConstants(viewports, studies, activeIndex);
console.debug(this.viewConstants);
diff --git a/plugins/ohifv3/README.md b/plugins/ohifv3/README.md
new file mode 100644
index 000000000..f7b1920d7
--- /dev/null
+++ b/plugins/ohifv3/README.md
@@ -0,0 +1,149 @@
+
+
+## MONAI Label Plugin for OHIF Viewer
+The Open Health Imaging Foundation (OHIF) Viewer is an open-source, web-based platform for medical imaging. OHIF Viewer provides a framework for building complex imaging applications with user-friendly interfaces. MONAI Label supports the web-based OHIF viewer with connectivity to a remote DICOM server via DICOMweb.
+
+
+
+
+
+ Models:
+
+
+
+
+ {this.props.models.map(model => (
+
+ {`${model} `}
+
+ ))}
+
+
+
+
+
+ Run
+
+
+
+ {this.props.scribblesSelector}
+
+
+ {this.props.usage}
+
+
+
+
+
+
+
+
{this.state.info.name}
+
+ {/*
Read */}
+
+
+ {this.state.segmentations?.map((segmentation) => (
+ <>
+
+
+
+ ))}
+
+
+ _setSegmentationConfiguration(
+ selectedSegmentationId,
+ 'renderOutline',
+ value
+ )
+ }
+ setOutlineOpacityActive={(value) =>
+ _setSegmentationConfiguration(
+ selectedSegmentationId,
+ 'outlineOpacity',
+ value
+ )
+ }
+ setRenderFill={(value) =>
+ _setSegmentationConfiguration(
+ selectedSegmentationId,
+ 'renderFill',
+ value
+ )
+ }
+ setRenderInactiveSegmentations={(value) =>
+ _setSegmentationConfiguration(
+ selectedSegmentationId,
+ 'renderInactiveSegmentations',
+ value
+ )
+ }
+ setOutlineWidthActive={(value) =>
+ _setSegmentationConfiguration(
+ selectedSegmentationId,
+ 'outlineWidthActive',
+ value
+ )
+ }
+ setFillAlpha={(value) =>
+ _setSegmentationConfiguration(
+ selectedSegmentationId,
+ 'fillAlpha',
+ value
+ )
+ }
+ setFillAlphaInactive={(value) =>
+ _setSegmentationConfiguration(
+ selectedSegmentationId,
+ 'fillAlphaInactive',
+ value
+ )
+ }
+ />
+
+
+ );
+}
+
+MonaiSegmentation.propTypes = {
+ commandsManager: PropTypes.shape({
+ runCommand: PropTypes.func.isRequired,
+ }),
+ servicesManager: PropTypes.shape({
+ services: PropTypes.shape({
+ segmentationService: PropTypes.shape({
+ getSegmentation: PropTypes.func.isRequired,
+ getSegmentations: PropTypes.func.isRequired,
+ toggleSegmentationVisibility: PropTypes.func.isRequired,
+ subscribe: PropTypes.func.isRequired,
+ EVENTS: PropTypes.object.isRequired,
+ }).isRequired,
+ }).isRequired,
+ }).isRequired,
+};
diff --git a/plugins/ohifv3/extension-monai-label/src/components/SegmentationToolbox.tsx b/plugins/ohifv3/extension-monai-label/src/components/SegmentationToolbox.tsx
new file mode 100644
index 000000000..4577a56b7
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/src/components/SegmentationToolbox.tsx
@@ -0,0 +1,368 @@
+import React, { useCallback, useEffect, useState, useReducer } from 'react';
+import { AdvancedToolbox, InputDoubleRange, useViewportGrid } from '@ohif/ui';
+import { Types } from '@ohif/extension-cornerstone';
+import { utilities } from '@cornerstonejs/tools';
+
+const { segmentation: segmentationUtils } = utilities;
+
+const ACTIONS = {
+ SET_BRUSH_SIZE: 'SET_BRUSH_SIZE',
+ SET_TOOL_CONFIG: 'SET_TOOL_CONFIG',
+ SET_ACTIVE_TOOL: 'SET_ACTIVE_TOOL',
+};
+
+const initialState = {
+ Brush: {
+ brushSize: 15,
+ mode: 'CircularBrush', // Can be 'CircularBrush' or 'SphereBrush'
+ },
+ Eraser: {
+ brushSize: 15,
+ mode: 'CircularEraser', // Can be 'CircularEraser' or 'SphereEraser'
+ },
+ Scissors: {
+ brushSize: 15,
+ mode: 'CircleScissor', // E.g., 'CircleScissor', 'RectangleScissor', or 'SphereScissor'
+ },
+ ThresholdBrush: {
+ brushSize: 15,
+ thresholdRange: [-500, 500],
+ },
+ activeTool: null,
+};
+
+function toolboxReducer(state, action) {
+ switch (action.type) {
+ case ACTIONS.SET_TOOL_CONFIG:
+ const { tool, config } = action.payload;
+ return {
+ ...state,
+ [tool]: {
+ ...state[tool],
+ ...config,
+ },
+ };
+ case ACTIONS.SET_ACTIVE_TOOL:
+ return { ...state, activeTool: action.payload };
+ default:
+ return state;
+ }
+}
+
+function SegmentationToolbox({ servicesManager, extensionManager }) {
+ const { toolbarService, segmentationService, toolGroupService } =
+ servicesManager.services as Types.CornerstoneServices;
+
+ const [viewportGrid] = useViewportGrid();
+ const { viewports, activeViewportId } = viewportGrid;
+
+ const [toolsEnabled, setToolsEnabled] = useState(false);
+ const [state, dispatch] = useReducer(toolboxReducer, initialState);
+
+ const updateActiveTool = useCallback(() => {
+ if (!viewports?.size || activeViewportId === undefined) {
+ return;
+ }
+
+ const viewport = viewports.get(activeViewportId);
+
+ dispatch({
+ type: ACTIONS.SET_ACTIVE_TOOL,
+ payload: toolGroupService.getActiveToolForViewport(viewport.viewportId),
+ });
+ }, [activeViewportId, viewports, toolGroupService, dispatch]);
+
+ /**
+ * sets the tools enabled IF there are segmentations
+ */
+ useEffect(() => {
+ const events = [
+ segmentationService.EVENTS.SEGMENTATION_ADDED,
+ segmentationService.EVENTS.SEGMENTATION_UPDATED,
+ ];
+
+ const unsubscriptions = [];
+
+ events.forEach(event => {
+ const { unsubscribe } = segmentationService.subscribe(event, () => {
+ const segmentations = segmentationService.getSegmentations();
+
+ const activeSegmentation = segmentations?.find(seg => seg.isActive);
+
+ setToolsEnabled(activeSegmentation?.segmentCount > 0);
+ });
+
+ unsubscriptions.push(unsubscribe);
+ });
+
+ return () => {
+ unsubscriptions.forEach(unsubscribe => unsubscribe());
+ };
+ }, [activeViewportId, viewports, segmentationService]);
+
+ /**
+ * Update the active tool when the toolbar state changes
+ */
+ useEffect(() => {
+ const { unsubscribe } = toolbarService.subscribe(
+ toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
+ () => {
+ updateActiveTool();
+ }
+ );
+
+ return () => {
+ unsubscribe();
+ };
+ }, [toolbarService, updateActiveTool]);
+
+ const setToolActive = useCallback(
+ toolName => {
+ toolbarService.recordInteraction({
+ groupId: 'SegmentationTools',
+ itemId: 'Brush',
+ interactionType: 'tool',
+ commands: [
+ {
+ commandName: 'setToolActive',
+ commandOptions: {
+ toolName,
+ },
+ },
+ ],
+ });
+
+ dispatch({ type: ACTIONS.SET_ACTIVE_TOOL, payload: toolName });
+ },
+ [toolbarService, dispatch]
+ );
+
+ const updateBrushSize = useCallback(
+ (toolName, brushSize) => {
+ toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+ segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
+ });
+ },
+ [toolGroupService]
+ );
+
+ const onBrushSizeChange = useCallback(
+ (valueAsStringOrNumber, toolCategory) => {
+ const value = Number(valueAsStringOrNumber);
+
+ _getToolNamesFromCategory(toolCategory).forEach(toolName => {
+ updateBrushSize(toolName, value);
+ });
+
+ dispatch({
+ type: ACTIONS.SET_TOOL_CONFIG,
+ payload: {
+ tool: toolCategory,
+ config: { brushSize: value },
+ },
+ });
+ },
+ [toolGroupService, dispatch]
+ );
+
+ const handleRangeChange = useCallback(
+ newRange => {
+ if (
+ newRange[0] === state.ThresholdBrush.thresholdRange[0] &&
+ newRange[1] === state.ThresholdBrush.thresholdRange[1]
+ ) {
+ return;
+ }
+
+ const toolNames = _getToolNamesFromCategory('ThresholdBrush');
+
+ toolNames.forEach(toolName => {
+ toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+ const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+ toolGroup.setToolConfiguration(toolName, {
+ strategySpecificConfiguration: {
+ THRESHOLD_INSIDE_CIRCLE: {
+ threshold: newRange,
+ },
+ },
+ });
+ });
+ });
+
+ dispatch({
+ type: ACTIONS.SET_TOOL_CONFIG,
+ payload: {
+ tool: 'ThresholdBrush',
+ config: { thresholdRange: newRange },
+ },
+ });
+ },
+ [toolGroupService, dispatch, state.ThresholdBrush.thresholdRange]
+ );
+
+ return (
+ setToolActive('CircularBrush'),
+ options: [
+ {
+ name: 'Radius (mm)',
+ id: 'brush-radius',
+ type: 'range',
+ min: 0.01,
+ max: 100,
+ value: state.Brush.brushSize,
+ step: 0.5,
+ onChange: value => onBrushSizeChange(value, 'Brush'),
+ },
+ {
+ name: 'Mode',
+ type: 'radio',
+ id: 'brush-mode',
+ value: state.Brush.mode,
+ values: [
+ { value: 'CircularBrush', label: 'Circle' },
+ { value: 'SphereBrush', label: 'Sphere' },
+ ],
+ onChange: value => setToolActive(value),
+ },
+ ],
+ },
+ {
+ name: 'Eraser',
+ icon: 'icon-tool-eraser',
+ disabled: !toolsEnabled,
+ active: state.activeTool === 'CircularEraser' || state.activeTool === 'SphereEraser',
+ onClick: () => setToolActive('CircularEraser'),
+ options: [
+ {
+ name: 'Radius (mm)',
+ type: 'range',
+ id: 'eraser-radius',
+ min: 0.01,
+ max: 100,
+ value: state.Eraser.brushSize,
+ step: 0.5,
+ onChange: value => onBrushSizeChange(value, 'Eraser'),
+ },
+ {
+ name: 'Mode',
+ type: 'radio',
+ id: 'eraser-mode',
+ value: state.Eraser.mode,
+ values: [
+ { value: 'CircularEraser', label: 'Circle' },
+ { value: 'SphereEraser', label: 'Sphere' },
+ ],
+ onChange: value => setToolActive(value),
+ },
+ ],
+ },
+ {
+ name: 'Scissor',
+ icon: 'icon-tool-scissor',
+ disabled: !toolsEnabled,
+ active:
+ state.activeTool === 'CircleScissor' ||
+ state.activeTool === 'RectangleScissor' ||
+ state.activeTool === 'SphereScissor',
+ onClick: () => setToolActive('CircleScissor'),
+ options: [
+ {
+ name: 'Mode',
+ type: 'radio',
+ value: state.Scissors.mode,
+ id: 'scissor-mode',
+ values: [
+ { value: 'CircleScissor', label: 'Circle' },
+ { value: 'RectangleScissor', label: 'Rectangle' },
+ { value: 'SphereScissor', label: 'Sphere' },
+ ],
+ onChange: value => setToolActive(value),
+ },
+ ],
+ },
+ {
+ name: 'Threshold Tool',
+ icon: 'icon-tool-threshold',
+ disabled: !toolsEnabled,
+ active:
+ state.activeTool === 'ThresholdCircularBrush' ||
+ state.activeTool === 'ThresholdSphereBrush',
+ onClick: () => setToolActive('ThresholdCircularBrush'),
+ options: [
+ {
+ name: 'Radius (mm)',
+ id: 'threshold-radius',
+ type: 'range',
+ min: 0.01,
+ max: 100,
+ value: state.ThresholdBrush.brushSize,
+ step: 0.5,
+ onChange: value => onBrushSizeChange(value, 'ThresholdBrush'),
+ },
+ {
+ name: 'Mode',
+ type: 'radio',
+ id: 'threshold-mode',
+ value: state.activeTool,
+ values: [
+ { value: 'ThresholdCircularBrush', label: 'Circle' },
+ { value: 'ThresholdSphereBrush', label: 'Sphere' },
+ ],
+ onChange: value => setToolActive(value),
+ },
+ {
+ type: 'custom',
+ children: () => {
+ return (
+
+ );
+ },
+ },
+ ],
+ },
+ ]}
+ />
+ );
+}
+
+function _getToolNamesFromCategory(category) {
+ let toolNames = [];
+ switch (category) {
+ case 'Brush':
+ toolNames = ['CircularBrush', 'SphereBrush'];
+ break;
+ case 'Eraser':
+ toolNames = ['CircularEraser', 'SphereEraser'];
+ break;
+ case 'ThresholdBrush':
+ toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'];
+ break;
+ default:
+ break;
+ }
+
+ return toolNames;
+}
+
+export default SegmentationToolbox;
diff --git a/plugins/ohifv3/extension-monai-label/src/components/SettingsTable.styl b/plugins/ohifv3/extension-monai-label/src/components/SettingsTable.styl
new file mode 100644
index 000000000..9416781ea
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/src/components/SettingsTable.styl
@@ -0,0 +1,53 @@
+
+.settingsTable
+ border-collapse: collapse;
+ border: 0 solid;
+ width: 100%;
+ font-size: small
+
+.settingsTable tr td
+ border: 0 solid;
+
+.settings_active,
+.settings_header {
+ background-color: black;
+ color: white;
+ cursor: pointer;
+ padding: 5px;
+ width: 100%;
+ border: none;
+ text-align: left;
+ outline: none;
+}
+
+.settings_active {
+ background-color: #403f3d;
+}
+
+.settings_header:hover {
+ background-color: #2b2a28;
+}
+
+.settings_header:after {
+ content: '\002B';
+ color: white;
+ font-weight: bold;
+ float: right;
+ margin-left: 5px;
+}
+
+.settings_active:after {
+ content: '\2212';
+ color: white;
+ font-weight: bold;
+ float: right;
+ margin-left: 5px;
+}
+
+.settings_content {
+ cursor: pointer;
+ color: #fff;
+ background-color: #2b2a28;
+ padding: 10px
+ font-size: smaller
+}
diff --git a/plugins/ohifv3/extension-monai-label/src/components/SettingsTable.tsx b/plugins/ohifv3/extension-monai-label/src/components/SettingsTable.tsx
new file mode 100644
index 000000000..967c0baf9
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/src/components/SettingsTable.tsx
@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+
+import './MonaiLabelPanel.styl';
+import { Icon } from '@ohif/ui';
+import { CookieUtils } from '../utils/GenericUtils';
+
+export default class SettingsTable extends Component {
+ constructor(props) {
+ super(props);
+
+ const onInfo = props.onInfo
+ this.onInfo = onInfo
+
+ this.state = this.getSettings();
+ }
+
+ getSettings = () => {
+ const url = CookieUtils.getCookieString(
+ 'MONAILABEL_SERVER_URL',
+ 'http://' + window.location.host.split(':')[0] + ':8000/'
+ );
+ const overlap_segments = CookieUtils.getCookieBool(
+ 'MONAILABEL_OVERLAP_SEGMENTS',
+ true
+ );
+ const export_format = CookieUtils.getCookieString(
+ 'MONAILABEL_EXPORT_FORMAT',
+ 'NRRD'
+ );
+
+ return {
+ url: url,
+ overlap_segments: overlap_segments,
+ export_format: export_format,
+ };
+ };
+
+ onBlurSeverURL = evt => {
+ let url = evt.target.value;
+ this.setState({ url: url });
+ CookieUtils.setCookie('MONAILABEL_SERVER_URL', url);
+ };
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/plugins/ohifv3/extension-monai-label/src/components/Toolbox/ThresholdSettingsPreset.tsx b/plugins/ohifv3/extension-monai-label/src/components/Toolbox/ThresholdSettingsPreset.tsx
new file mode 100644
index 000000000..f708233c3
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/src/components/Toolbox/ThresholdSettingsPreset.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { InputDoubleRange, Select } from '@ohif/ui';
+
+const defaultOptions = [
+ {
+ value: 'Soft tissue',
+ label: 'Soft tissue',
+ range: [-160, 240] as [number, number],
+ },
+ {
+ value: 'Lung',
+ label: 'Lung',
+ range: [-1350, 150] as [number, number],
+ },
+ {
+ value: 'Liver',
+ label: 'Liver',
+ range: [15, 165] as [number, number],
+ },
+ {
+ value: 'Bone',
+ label: 'Bone',
+ range: [-770, 1730] as [number, number],
+ },
+ {
+ value: 'Brain',
+ label: 'Brain',
+ range: [0, 80] as [number, number],
+ },
+];
+
+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);
+
+ if (newRange[0] === selectedOption.range[0] && newRange[1] === selectedOption.range[1]) {
+ return;
+ }
+
+ onRangeChange(newRange);
+
+ const updatedOptions = options.map(o => {
+ if (o.value === selectedPreset) {
+ return {
+ ...o,
+ range: newRange,
+ };
+ }
+ return o;
+ });
+
+ setOptions(updatedOptions);
+ };
+
+ const selectedPresetRange = options.find(ds => ds.value === selectedPreset).range;
+
+ return (
+
+
+
Threshold
+
+ ds.value === selectedPreset)}
+ className="text-white"
+ isSearchable={false}
+ />
+
+
+
+
+
+ Active Learning
+
+
+
+
+
+
+
+ Next Sample
+
+
+
+
+ {this.state.training ? 'Stop Training' : 'Update Model'}
+
+
+
+
+
+ Submit Label
+
+
+
+
+
+
+
+
+
+
+ Strategy:
+
+
+ {Object.keys(strategies).map(a => (
+
+ {a}
+
+ ))}
+
+
+
+
+
+
+
+ Annotated:
+
+
+
+
+
+ Training:
+
+
+
+
+
+ Train Acc:
+
+
+
+
+
+
+
+
+
+
+ Auto-Segmentation
+
+
+
+ Fully automated segmentation without any user prompt . Just
+ select a model and click to run
+
+ }
+ />
+
+
+
+
+
+ Field
+ Value
+
+
+
+ {Object.keys(fields).map(field => (
+
+ {fields[field]}
+ {field === 'SeriesInstanceUID' ? (
+
+
+ {this.props.info[field]}
+
+
+ ) : (
+ {this.props.info[field]}
+ )}
+
+ ))}
+
+
+
+
+
+ OK
+
+
+
+
+
+ Options
+
+
+
+
+
+ Section:
+
+
+ {Object.keys(config).map(k => (
+
+ {`${k} `}
+
+ ))}
+
+
+
+
+ Name:
+
+
+ {Object.keys(section_map).map(k => (
+
+ {`${k} `}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Key
+ Value
+
+
+
+ {Object.entries(name_map).map(([k, v]) => (
+
+ {k}
+
+ {v !== null && typeof v === 'boolean' ? (
+
+ this.onChangeConfig(
+ this.state.section,
+ this.state.name,
+ k,
+ e
+ )
+ }
+ >
+ {Object.keys(v).map(a => (
+
+ {a}
+
+ ))}
+
+ ) : (
+
+
+ ))}
+
+
+
+
+
+
+ SmartEdit
+
+
+ }
+ />
+
+
+### Table of Contents
+- [Supported Applications](#supported-applications)
+- [Installing OHIF](#installing-ohif)
+- [Installing Orthanc](#installing-orthanc-dicomweb)
+- [Converting NIFTI Images to DICOM](#converting-nifti-images-to-dicom)
+- [Converting NIFTI Annotations to DICOM-SEG](#converting-nifti-annotations-to-dicom-seg)
+- [Uploading DICOM to Orthanc](#uploading-dicom-to-orthanc)
+
+### Supported Applications
+Supported applications can be found in the [sample-apps](../../sample-apps/radiology/) folder under the radiology section. These applications include models like DeepEdit, DeepGrow, Segmentation, and more, which can be used to create and refine labels for various medical imaging tasks.
+
+### Installing OHIF
+When installing MONAI Label with `pip install monailabel`, a version of OHIF that is pre-built with the MONAI Label library is automatically installed. OHIF will be accessible at http://127.0.0.1:8000/ohif/ when you start the MONAI Label server and connect to local/remote DICOM-web storage.
+
+#### Development setup
+
+To build the OHIF plugin for development, follow these steps:
+ ```bash
+ sudo sh requirements.sh # installs yarn
+ sh build.sh
+ ```
+
+To run Orthanc from the submodule and avoid building the OHIF package for every code change, use the following commands:
+```bash
+cd plugins/ohif/Viewers
+
+yarn run dev:orthanc
+
+# OHIF will run at http://127.0.0.1:3000/
+```
+You can then visit http://127.0.0.1:3000/ on your browser to see the running OHIF.
+
+### Installing Orthanc (DICOMWeb)
+
+#### Ubuntu 20.x
+
+```bash
+# Install Orthanc and DICOMweb plugin
+sudo apt-get install orthanc orthanc-dicomweb -y
+
+# Install Plastimatch
+sudo apt-get install plastimatch -y
+```
+
+However, you must upgrade to the latest version by following the steps mentioned on the [Orthanc Installation Guide](https://book.orthanc-server.com/users/debian-packages.html#replacing-the-package-from-the-service-by-the-lsb-binaries)
+
+```bash
+sudo service orthanc stop
+sudo wget https://lsb.orthanc-server.com/orthanc/1.9.7/Orthanc --output-document /usr/sbin/Orthanc
+sudo rm -f /usr/share/orthanc/plugins/*.so
+
+sudo wget https://lsb.orthanc-server.com/orthanc/1.9.7/libServeFolders.so --output-document /usr/share/orthanc/plugins/libServeFolders.so
+sudo wget https://lsb.orthanc-server.com/orthanc/1.9.7/libModalityWorklists.so --output-document /usr/share/orthanc/plugins/libModalityWorklists.so
+sudo wget https://lsb.orthanc-server.com/plugin-dicom-web/1.6/libOrthancDicomWeb.so --output-document /usr/share/orthanc/plugins/libOrthancDicomWeb.so
+
+sudo service orthanc restart
+```
+
+#### Windows/Others _(latest version)_
+
+- Download and Install Orthanc from https://www.orthanc-server.com/download.php
+
+### Converting NIFTI images to DICOM
+To use Orthanc, your files need to be in DICOM format. You can convert any Nifti files to DICOM using the following command:
+```bash
+plastimatch convert --patient-id patient1 --input image.nii.gz --output-dicom test
+```
+- `plastimatch convert`: This is the command to run the conversion tool.
+- `--patient-id patient1`: This option specifies the ID of the patient to be associated with the DICOM files. In this example, it is set to `patient1`.
+- `--input image.nii.gz`: This option specifies the path to the input Nifti file that you want to convert to DICOM. In this example, the input file is `image.nii.gz`.
+- `--output-dicom test`: This option specifies the path to the output folder where the DICOM files will be saved. In this example, the output folder is named `test`.
+
+When you run this command, plastimatch will read the input Nifti file and convert it to a series of DICOM files with the specified patient ID. These files will be saved in the test folder in DICOM format, which can be uploaded to an Orthanc server.
+
+### Converting NIFTI Annotations to DICOM-SEG
+
+If you want to upload image annotations to the DICOMWeb server (such as Orthanc), you should use DICOM-SEG format. DICOM-SEG is a DICOM standard format for image segmentation. To convert NIFTI annotations to DICOM-SEG, you can use the itkimage2segimage tool from ITK (Insight Toolkit).
+
+Here's how to use itkimage2segimage to convert NIFTI annotations to DICOM-SEG:
+
+1. Install ITK: You can download and install ITK from their website, or use a package manager such as pip or conda to install it.
+2. Convert NIFTI annotations to NIFTI-Segmentations: Use the `plastimatch convert` command to convert the NIFTI annotations to NIFTI-Segmentations format. This format is required as an input to `itkimage2segimage`. The command is similar to the one used to convert NIFTI images to DICOM, but with an additional option:
+
+```bash
+plastimatch convert --input annotations.nii.gz --output-nifti-seg annotations-seg.nii.gz
+```
+This command will convert the NIFTI annotations file named `annotations.nii.gz` to NIFTI-Segmentations format and save the result in a file named `annotations-seg.nii.gz`.
+
+3. Convert NIFTI-Segmentations to DICOM-SEG: Use the `itkimage2segimage` command to convert the NIFTI-Segmentations file to DICOM-SEG format. Here's an example command:
+
+```bash
+itkimage2segimage --inputImage annotations-seg.nii.gz --outputDICOM annotations-seg.dcm --patientID patient1
+```
+This command will convert the `annotations-seg.nii.gz` file to DICOM-SEG format and save the result in a file named `annotations-seg.dcm`. The `--patientID` option specifies the ID of the patient to be associated with the DICOM-SEG file.
+
+After conversion, you can upload the DICOM-SEG file to the DICOMWeb server such as Orthanc.
+
+
+### Uploading DICOM to Orthanc
+
+#### Use Orthanc Browser
+You can use the Orthanc browser located at http://127.0.0.1:8042/app/explorer.html#upload to upload files.
+
+#### Using STORE SCP/SCU
+To upload files using STORE SCP/SCU, you need to enable AET by editing the `orthanc.json` file:
+`sudo vim /etc/orthanc/orthanc.json`
+
+```json5
+// The list of the known DICOM modalities
+"DicomModalities" : {
+/**
+ * Uncommenting the following line would enable Orthanc to
+ * connect to an instance of the "storescp" open-source DICOM
+ * store (shipped in the DCMTK distribution) started by the
+ * command line "storescp 2000".
+ **/
+"sample": ["MONAILABEL", "127.0.0.1", 104]
+```
+Then, restart Orthanc:
+
+```
+sudo service orthanc restart
+```
+
+#### Upload Files
+To upload files, use the following command:
+
+```bash
+python -m pynetdicom storescu 127.0.0.1 4242 test -aet MONAILABEL -r
+```
+That's it! With these steps, you should have successfully installed MONAI Label with the OHIF viewer plugin and connected it to a remote DICOM server via DICOMweb.
diff --git a/plugins/ohifv3/build.sh b/plugins/ohifv3/build.sh
new file mode 100755
index 000000000..a47134569
--- /dev/null
+++ b/plugins/ohifv3/build.sh
@@ -0,0 +1,75 @@
+#!/bin/bash
+
+# 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.
+
+curr_dir="$(pwd)"
+my_dir="$(dirname "$(readlink -f "$0")")"
+
+echo "Installing requirements..."
+sh $my_dir/requirements.sh
+
+install_dir=${1:-$my_dir/../../monailabel/endpoints/static/ohif}
+
+echo "Current Dir: ${curr_dir}"
+echo "My Dir: ${my_dir}"
+echo "Installing OHIF at: ${install_dir}"
+
+cd ${my_dir}
+rm -rf Viewers
+git clone https://github.com/OHIF/Viewers.git
+cd Viewers
+git checkout feat/monai-label
+
+
+sed -i "s|routerBasename: '/'|routerBasename: '/ohif/'|g" ./platform/app/public/config/default.js
+sed -i "s|name: 'aws'|name: 'Orthanc'|g" ./platform/app/public/config/default.js
+sed -i "s|wadoUriRoot: 'https://d33do7qe4w26qo.cloudfront.net/dicomweb'|wadoUriRoot: 'http://localhost/dicom-web'|g" ./platform/app/public/config/default.js
+sed -i "s|wadoRoot: 'https://d33do7qe4w26qo.cloudfront.net/dicomweb'|wadoRoot: 'http://localhost/dicom-web'|g" ./platform/app/public/config/default.js
+sed -i "s|qidoRoot: 'https://d33do7qe4w26qo.cloudfront.net/dicomweb'|qidoRoot: 'http://localhost/dicom-web'|g" ./platform/app/public/config/default.js
+
+sed -i "s|PUBLIC_URL=/|PUBLIC_URL=/ohif/|g" ./platform/app/.env
+
+
+yarn install
+
+# Link the mode and extension HERE
+echo "Linking extension and mode at: $(pwd)"
+yarn run cli link-extension ../extension-monai-label
+yarn run cli link-mode ../mode-monai-label
+
+cd ../extension-monai-label
+
+echo "Running install again at: $(pwd)"
+
+yarn install
+
+echo "Moving nrrd-js and itk node modules to Viewersnode_modules/"
+
+cp -r ./node_modules/nrrd-js ../Viewers/node_modules/
+
+cp -r ./node_modules/itk ../Viewers/node_modules/
+
+echo "Moving to Viewers folder to build OHIF"
+
+cd ../Viewers
+
+echo "Viewers folder before building OHIF $(pwd)"
+
+QUICK_BUILD=true yarn run build
+
+rm -rf ${install_dir}
+mv ./platform/app/dist/ ${install_dir}
+echo "Copied OHIF to ${install_dir}"
+
+rm -rf ../Viewers
+
+cd ${curr_dir}
diff --git a/plugins/ohifv3/extension-monai-label/.gitignore b/plugins/ohifv3/extension-monai-label/.gitignore
new file mode 100644
index 000000000..67045665d
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/plugins/ohifv3/extension-monai-label/.prettierrc b/plugins/ohifv3/extension-monai-label/.prettierrc
new file mode 100644
index 000000000..b80ec6b34
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/.prettierrc
@@ -0,0 +1,8 @@
+{
+ "trailingComma": "es5",
+ "printWidth": 80,
+ "proseWrap": "always",
+ "tabWidth": 2,
+ "semi": true,
+ "singleQuote": true
+}
diff --git a/plugins/ohifv3/extension-monai-label/.webpack/webpack.prod.js b/plugins/ohifv3/extension-monai-label/.webpack/webpack.prod.js
new file mode 100644
index 000000000..070a723e3
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/.webpack/webpack.prod.js
@@ -0,0 +1,63 @@
+const path = require('path');
+const pkg = require('../package.json');
+
+const outputFile = 'index.umd.js';
+const rootDir = path.resolve(__dirname, '../');
+const outputFolder = path.join(__dirname, `../dist/umd/${pkg.name}/`);
+
+// Todo: add ESM build for the extension in addition to umd build
+
+const config = {
+ mode: 'production',
+ entry: rootDir + '/' + pkg.module,
+ devtool: 'source-map',
+ output: {
+ path: outputFolder,
+ filename: outputFile,
+ library: pkg.name,
+ libraryTarget: 'umd',
+ chunkFilename: '[name].chunk.js',
+ umdNamedDefine: true,
+ globalObject: "typeof self !== 'undefined' ? self : this",
+ },
+ externals: [
+ {
+ react: {
+ root: 'React',
+ commonjs2: 'react',
+ commonjs: 'react',
+ amd: 'react',
+ },
+ '@ohif/core': {
+ commonjs2: '@ohif/core',
+ commonjs: '@ohif/core',
+ amd: '@ohif/core',
+ root: '@ohif/core',
+ },
+ '@ohif/ui': {
+ commonjs2: '@ohif/ui',
+ commonjs: '@ohif/ui',
+ amd: '@ohif/ui',
+ root: '@ohif/ui',
+ },
+ },
+ ],
+ module: {
+ rules: [
+ {
+ test: /(\.jsx|\.js|\.tsx|\.ts)$/,
+ loader: 'babel-loader',
+ exclude: /(node_modules|bower_components)/,
+ resolve: {
+ extensions: ['.js', '.jsx', '.ts', '.tsx'],
+ },
+ },
+ ],
+ },
+ resolve: {
+ modules: [path.resolve('./node_modules'), path.resolve('./src')],
+ extensions: ['.json', '.js', '.jsx', '.tsx', '.ts'],
+ },
+};
+
+module.exports = config;
diff --git a/plugins/ohifv3/extension-monai-label/LICENSE b/plugins/ohifv3/extension-monai-label/LICENSE
new file mode 100644
index 000000000..f0f1d2279
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/LICENSE
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023 extension-monai-label (adiazpinto@nvidia.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/plugins/ohifv3/extension-monai-label/README.md b/plugins/ohifv3/extension-monai-label/README.md
new file mode 100644
index 000000000..a8b628c56
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/README.md
@@ -0,0 +1,7 @@
+# extension-monai-label
+## Description
+OHIFv3 extension for MONAI Label
+## Author
+OHIF,NVIDIA,KCL
+## License
+MIT
diff --git a/plugins/ohifv3/extension-monai-label/babel.config.js b/plugins/ohifv3/extension-monai-label/babel.config.js
new file mode 100644
index 000000000..371f77fcf
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/babel.config.js
@@ -0,0 +1,66 @@
+// https://babeljs.io/docs/en/options#babelrcroots
+const { extendDefaultPlugins } = require('svgo');
+
+module.exports = {
+ plugins: [
+ [
+ 'inline-react-svg',
+ {
+ svgo: {
+ plugins: extendDefaultPlugins([
+ {
+ name: 'removeViewBox',
+ active: false,
+ },
+ ]),
+ },
+ },
+ ],
+ ['@babel/plugin-proposal-class-properties', { loose: true }],
+ '@babel/plugin-transform-typescript',
+ ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+ ['@babel/plugin-proposal-private-methods', { loose: true }],
+ ],
+ env: {
+ test: {
+ presets: [
+ [
+ // TODO: https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
+ '@babel/preset-env',
+ {
+ modules: 'commonjs',
+ debug: false,
+ },
+ ],
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
+ plugins: [
+ '@babel/plugin-proposal-object-rest-spread',
+ '@babel/plugin-syntax-dynamic-import',
+ '@babel/plugin-transform-regenerator',
+ '@babel/plugin-transform-runtime',
+ '@babel/plugin-transform-typescript',
+ ],
+ },
+ production: {
+ presets: [
+ // WebPack handles ES6 --> Target Syntax
+ ['@babel/preset-env', { modules: false }],
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
+ ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+ },
+ development: {
+ presets: [
+ // WebPack handles ES6 --> Target Syntax
+ ['@babel/preset-env', { modules: false }],
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
+ plugins: ['react-hot-loader/babel'],
+ ignore: ['**/*.test.jsx', '**/*.test.js', '__snapshots__', '__tests__'],
+ },
+ },
+};
diff --git a/plugins/ohifv3/extension-monai-label/package.json b/plugins/ohifv3/extension-monai-label/package.json
new file mode 100644
index 000000000..6b82ff88c
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/package.json
@@ -0,0 +1,88 @@
+{
+ "name": "@ohif/extension-monai-label",
+ "version": "0.0.1",
+ "description": "OHIFv3 extension for MONAI Label",
+ "author": "OHIF,NVIDIA,KCL",
+ "license": "MIT",
+ "main": "dist/umd/extension-monai-label/index.umd.js",
+ "files": [
+ "dist/**",
+ "public/**",
+ "README.md"
+ ],
+ "repository": "OHIF/Viewers",
+ "keywords": [
+ "ohif-extension"
+ ],
+ "module": "src/index.tsx",
+ "publishConfig": {
+ "access": "public"
+ },
+ "engines": {
+ "node": ">=14",
+ "npm": ">=6",
+ "yarn": ">=1.18.0"
+ },
+ "scripts": {
+ "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"
+ },
+ "peerDependencies": {
+ "@ohif/core": "^3.0.0",
+ "@ohif/extension-default": "^3.0.0",
+ "@ohif/extension-cornerstone": "^3.0.0",
+ "@ohif/i18n": "^1.0.0",
+ "prop-types": "^15.6.2",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-i18next": "^12.2.2",
+ "react-router": "^6.8.1",
+ "react-router-dom": "^6.8.1",
+ "webpack": "^5.50.0",
+ "webpack-merge": "^5.7.3"
+ },
+ "dependencies": {
+ "@babel/runtime": "^7.20.13",
+ "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",
+ "itk": "^14.1.1",
+ "react-color": "^2.19.3",
+ "bootstrap": "^5.0.2",
+ "react-select": "^4.3.1",
+ "chroma-js": "^2.1.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.21.4",
+ "@babel/plugin-proposal-class-properties": "^7.16.7",
+ "@babel/plugin-proposal-object-rest-spread": "^7.17.3",
+ "@babel/plugin-proposal-private-methods": "^7.18.6",
+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+ "@babel/plugin-transform-arrow-functions": "^7.16.7",
+ "@babel/plugin-transform-regenerator": "^7.16.7",
+ "@babel/plugin-transform-runtime": "^7.17.0",
+ "@babel/plugin-transform-typescript": "^7.13.0",
+ "@babel/preset-env": "^7.16.11",
+ "@babel/preset-react": "^7.16.7",
+ "@babel/preset-typescript": "^7.13.0",
+ "babel-eslint": "9.x",
+ "babel-loader": "^8.2.4",
+ "babel-plugin-inline-react-svg": "^2.0.2",
+ "babel-plugin-module-resolver": "^5.0.0",
+ "clean-webpack-plugin": "^4.0.0",
+ "copy-webpack-plugin": "^10.2.0",
+ "cross-env": "^7.0.3",
+ "dotenv": "^14.1.0",
+ "eslint": "^5.0.1",
+ "eslint-loader": "^2.0.0",
+ "webpack": "^5.50.0",
+ "webpack-merge": "^5.7.3",
+ "webpack-cli": "^4.7.2"
+ }
+}
diff --git a/plugins/ohifv3/extension-monai-label/src/components/ModelSelector.styl b/plugins/ohifv3/extension-monai-label/src/components/ModelSelector.styl
new file mode 100644
index 000000000..ec1dbeccc
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/src/components/ModelSelector.styl
@@ -0,0 +1,33 @@
+
+.modelSelector
+ .table
+ border-collapse: collapse;
+ border: 0 solid;
+ width: 100%;
+
+ .table tr td
+ border: 0 solid;
+
+ .selectBox
+ width: 100%
+
+ .actionButton
+ border: 2px solid black
+ border-radius: 15px
+ background-color: lightblue
+ color: var(--ui-gray-dark)
+ line-height: 25px
+ padding: 0 15px
+ outline: none
+ cursor: pointer
+
+ &:hover, &:active
+ background-color: var(--ui-sky-blue)
+
+ &:disabled
+ background-color: var(--ui-sky-blue)
+
+ svg
+ margin-right: 4px
+ position: relative
+ top: 2px
diff --git a/plugins/ohifv3/extension-monai-label/src/components/ModelSelector.tsx b/plugins/ohifv3/extension-monai-label/src/components/ModelSelector.tsx
new file mode 100644
index 000000000..e9c582a6a
--- /dev/null
+++ b/plugins/ohifv3/extension-monai-label/src/components/ModelSelector.tsx
@@ -0,0 +1,116 @@
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './ModelSelector.styl';
+
+export default class ModelSelector extends Component {
+ static propTypes = {
+ name: PropTypes.string,
+ title: PropTypes.string,
+ models: PropTypes.array,
+ currentModel: PropTypes.string,
+ usage: PropTypes.any,
+ onClick: PropTypes.func,
+ onSelectModel: PropTypes.func,
+ scribblesSelector: PropTypes.any,
+ };
+
+ constructor(props) {
+ super(props);
+
+ const currentModel = props.currentModel
+ ? props.currentModel
+ : props.models.length > 0
+ ? props.models[0]
+ : '';
+ this.state = {
+ models: props.models,
+ currentModel: currentModel,
+ buttonDisabled: false,
+ };
+ }
+
+ static getDerivedStateFromProps(props, current_state) {
+ if (current_state.models !== props.models) {
+ return {
+ models: props.models,
+ currentModel: props.models.length > 0 ? props.models[0] : '',
+ };
+ }
+ return null;
+ }
+
+ onChangeModel = evt => {
+ this.setState({ currentModel: evt.target.value });
+ if (this.props.onSelectModel) this.props.onSelectModel(evt.target.value);
+ };
+
+ currentModel = () => {
+ return this.props.currentModel
+ ? this.props.currentModel
+ : this.state.currentModel;
+ };
+
+ onClickBtn = async () => {
+ if (this.state.buttonDisabled) {
+ return;
+ }
+
+ let model = this.state.currentModel;
+ if (!model) {
+ console.error('This should never happen!');
+ model = this.props.models.length > 0 ? this.props.models[0] : '';
+ }
+
+ this.setState({ buttonDisabled: true });
+ await this.props.onClick(model);
+ this.setState({ buttonDisabled: false });
+ };
+
+ render() {
+ const currentModel = this.currentModel();
+ return (
+