-
-
-
-
-
-
- | Section: |
+
+
+
+
+ | Key |
+ Value |
+
+
+
+ {Object.entries(name_map).map(([k, v]) => (
+
+ | {k} |
-
+ {v !== null && typeof v === 'boolean' ? (
+
+ this.props.onChangeConfig(section, name, k, e)
+ }
+ />
+ ) : v !== null && typeof v === 'object' ? (
+
+ ) : (
+
+ this.props.onChangeConfig(section, name, k, e)
+ }
+ />
+ )}
|
-
- | Name: |
-
-
- |
-
-
-
-
-
-
-
- | 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
- )
- }
- />
- ) : v !== null && typeof v === 'object' ? (
-
- ) : (
-
- this.onChangeConfig(
- this.state.section,
- this.state.name,
- k,
- e
- )
- }
- />
- )}
- |
-
- ))}
-
-
-
+
);
}
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.css b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.css
new file mode 100644
index 000000000..ac82d5c7d
--- /dev/null
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.css
@@ -0,0 +1,58 @@
+/*
+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.
+*/
+
+.optionsForm {
+ background-color: white;
+}
+.optionsSection {
+ background-color: lightyellow;
+ width: 100%;
+ border-collapse: collapse;
+}
+.optionsSection .selectBox {
+ background-color: white;
+ border: 1px solid grey;
+ font-size: medium;
+ height: fit-content;
+}
+.optionsConfig {
+ width: 800px;
+ height: 300px;
+ overflow: auto;
+}
+.optionsConfigTable {
+ background-color: azure;
+ font-family: arial, sans-serif;
+ border-collapse: collapse;
+ width: 100%;
+ font-size: smaller;
+}
+.optionsConfigTable th {
+ border: 1px solid #070303;
+ text-align: left;
+ background-color: #789;
+}
+.optionsConfigTable td {
+ border: 1px solid #070202;
+ text-align: left;
+}
+.optionsInput {
+ width: 100%;
+ color: #000;
+}
+.selectBox {
+ width: 100%;
+ color: #000;
+ font-size: smaller;
+ height: 18px;
+}
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.tsx
new file mode 100644
index 000000000..6190bb852
--- /dev/null
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/OptionsForm.tsx
@@ -0,0 +1,211 @@
+/*
+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 './OptionsForm.css';
+
+import OptionTable from './OptionTable';
+import PropTypes from 'prop-types';
+
+export default class OptionsForm extends Component {
+ static propTypes = {
+ info: PropTypes.any,
+ config: PropTypes.any,
+ };
+ private configs = {};
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ config: { ...props.config },
+ section: '',
+ name: '',
+ };
+ }
+
+ getConfigs() {
+ const { info } = this.props;
+ const mapping = {
+ infer: 'models',
+ train: 'trainers',
+ activelearning: 'strategies',
+ scoring: 'scoring',
+ };
+
+ if (!Object.keys(this.configs).length) {
+ Object.entries(mapping).forEach(([m, n]) => {
+ const obj = info && info.data && info.data[n] ? info.data[n] : {};
+ Object.entries(obj).forEach(([k, v]) => {
+ if (v && v.config && Object.keys(v.config).length) {
+ if (!this.configs[m]) {
+ this.configs[m] = {};
+ }
+ this.configs[m][k] = v.config;
+ }
+ });
+ });
+ }
+ return this.configs;
+ }
+
+ getSection() {
+ return this.state.section.length && this.configs[this.state.section]
+ ? this.state.section
+ : Object.keys(this.configs).length
+ ? Object.keys(this.configs)[0]
+ : '';
+ }
+
+ getSectionMap(section) {
+ return section && this.configs[section]
+ ? this.configs[section]
+ : Object.keys(this.configs).length
+ ? this.configs[Object.keys(this.configs)[0]]
+ : {};
+ }
+
+ getName(section_map) {
+ return this.state.name.length && section_map[this.state.name]
+ ? this.state.name
+ : Object.keys(section_map).length
+ ? Object.keys(section_map)[0]
+ : '';
+ }
+
+ getNameMap(name, section_map) {
+ return name && section_map[name]
+ ? section_map[name]
+ : Object.keys(section_map).length
+ ? section_map[Object.keys(section_map)[0]]
+ : {};
+ }
+
+ onChangeSection = (evt) => {
+ this.setState({ section: evt.target.value });
+ };
+
+ onChangeName = (evt) => {
+ this.setState({ name: evt.target.value });
+ };
+
+ onReset = () => {
+ console.log('Reset the config map');
+ this.configs = {};
+ this.setState({
+ config: {},
+ section: '',
+ name: '',
+ });
+ };
+
+ onChangeConfig = (s, n, k, evt) => {
+ // console.log(s + ' => ' + n + ' => ' + k, evt);
+ const c = { ...this.state.config };
+ if (!c[s]) {
+ c[s] = {};
+ }
+ if (!c[s][n]) {
+ c[s][n] = {};
+ }
+
+ if (typeof this.configs[s][n][k] === 'boolean') {
+ c[s][n][k] = !!evt.target.checked;
+ } else {
+ if (typeof this.configs[s][n][k] === 'number') {
+ c[s][n][k] = Number.isInteger(this.configs[s][n][k])
+ ? parseInt(evt.target.value)
+ : parseFloat(evt.target.value);
+ } else {
+ c[s][n][k] = evt.target.value;
+ }
+ }
+ this.setState({ config: c });
+ };
+
+ render() {
+ // console.log('Render Options Table..');
+ // console.log('State Config: ', this.state.config);
+
+ const config = this.getConfigs();
+ const section = this.getSection();
+ const section_map = this.getSectionMap(section);
+ const name = this.getName(section_map);
+ const name_map = this.getNameMap(name, section_map);
+ const update_map = {};
+
+ // console.log('Config State: ', this.state.config);
+ Object.keys(name_map).forEach((k) => {
+ if (this.state.config[section] && this.state.config[section][name]) {
+ const x = this.state.config[section][name][k];
+ if (x !== null && x !== undefined) {
+ update_map[k] = x;
+ }
+ }
+ });
+ // console.log('Update Map: ', update_map);
+
+ return (
+
+
+
+
+ | Section: |
+
+
+ |
+
+
+ | Name: |
+
+
+ |
+
+
+ | |
+
+
+
+
+
+ );
+ }
+}
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.css b/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.css
similarity index 57%
rename from plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.css
rename to plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.css
index c69d56a48..31ff41ab6 100644
--- a/plugins/ohifv3/extensions/monai-label/src/components/actions/ActiveLearning.css
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.css
@@ -10,21 +10,26 @@ 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.
*/
-.optionsTable {
- font-family: arial, sans-serif;
- border-collapse: collapse;
- width: 100%;
- font-size: smaller;
+
+.tmpActionButton {
+ border: 2px solid #000;
+ border-radius: 15px;
+ background-color: #00a4d9;
+ color: var(--ui-gray-dark);
+ line-height: 25px;
+ padding: 0 15px;
+ outline: none;
+ cursor: pointer;
}
-.optionsTable th {
- border: 0px solid #070303;
- text-align: left;
- background-color: #789;
+.tmpActionButton:hover,
+.tmpActionButton:active {
+ background-color: #00a4d9;
}
-.optionsTable td {
- border: 0px solid #070202;
- text-align: left;
+.tmpActionButton:disabled {
+ background-color: #00a4d9;
}
-.optionsInput {
- width: 100%;
+.tmpActionButton svg {
+ margin-right: 4px;
+ position: relative;
+ top: 2px;
}
diff --git a/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.tsx b/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.tsx
new file mode 100644
index 000000000..67b4e3517
--- /dev/null
+++ b/plugins/ohifv3/extensions/monai-label/src/components/actions/PointPrompts.tsx
@@ -0,0 +1,434 @@
+/*
+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 './PointPrompts.css';
+import ModelSelector from '../ModelSelector';
+import BaseTab from './BaseTab';
+import * as cornerstoneTools from '@cornerstonejs/tools';
+import { hideNotification } from '../../utils/GenericUtils';
+import { cache } from '@cornerstonejs/core';
+
+export default class PointPrompts extends BaseTab {
+ modelSelector: any;
+
+ constructor(props) {
+ super(props);
+
+ this.modelSelector = React.createRef();
+ this.state = {
+ currentModel: null,
+ currentLabel: null,
+ clickPoints: new Map(),
+ availableOrgans: {},
+ };
+ }
+
+ onSelectModel = (model) => {
+ // console.log('Selecting (Point) Interaction Model...');
+ const currentLabel = null;
+ const clickPoints = new Map();
+ this.setState({
+ currentModel: model,
+ currentLabel: currentLabel,
+ clickPoints: clickPoints,
+ availableOrgans: this.getModelLabels(model),
+ });
+
+ this.clearAllPoints();
+ };
+
+ onEnterActionTab = () => {
+ this.props.commandsManager.runCommand('setToolActive', {
+ toolName: 'ProbeMONAILabel',
+ });
+ // console.info('Here we activate the probe');
+ };
+
+ onLeaveActionTab = () => {
+ this.onChangeLabel(null);
+ this.props.commandsManager.runCommand('setToolDisable', {
+ toolName: 'ProbeMONAILabel',
+ });
+ // console.info('Here we deactivate the probe');
+ };
+
+ onRunInference = async () => {
+ const { currentModel, currentLabel, clickPoints } = this.state;
+ const { info } = this.props;
+ const { viewport, displaySet } = this.props.getActiveViewportInfo();
+
+ const models = this.getModels();
+ let selectedModel = 0;
+ for (const model of models) {
+ if (!currentModel || model === currentModel) {
+ break;
+ }
+ selectedModel++;
+ }
+
+ const model = models.length > 0 ? models[selectedModel] : null;
+ if (!model) {
+ this.notification.show({
+ title: 'MONAI Label',
+ message: 'Something went wrong: Model is not selected',
+ type: 'error',
+ duration: 10000,
+ });
+ return;
+ }
+
+ const nid = this.notification.show({
+ title: 'MONAI Label - ' + model,
+ message: 'Running Point Based Inference...',
+ type: 'info',
+ duration: 4000,
+ });
+
+ const { cornerstoneViewportService } = this.props.servicesManager.services;
+ const viewportInfo = cornerstoneViewportService.getViewportInfo(
+ viewport.viewportId
+ );
+ const { worldToIndex } = viewportInfo.viewportData.data[0].volume.imageData;
+
+ const manager = cornerstoneTools.annotation.state.getAnnotationManager();
+ clickPoints[currentLabel] = manager.saveAnnotations(
+ null,
+ 'ProbeMONAILabel'
+ );
+
+ const points = {};
+ let label_names = [];
+ for (const label in clickPoints) {
+ // console.log(clickPoints[label]);
+ for (const uid in clickPoints[label]) {
+ const annotations = clickPoints[label][uid]['ProbeMONAILabel'];
+ // console.log(annotations);
+ points[label] = [];
+ for (const annotation of annotations) {
+ const pt = annotation.data.handles.points[0];
+ points[label].push(worldToIndex(pt).map(Math.round));
+ }
+ }
+ label_names.push(label);
+ }
+
+ const config = this.props.onOptionsConfig();
+ const params =
+ config && config.infer && config.infer[model] ? config.infer[model] : {};
+ let sidx = -1;
+ if (info.data.models[model].type === 'vista3d') {
+ params['points'] = points[currentLabel];
+ params['point_labels'] = new Array(params['points'].length).fill(1);
+ if (points['background'] && points['background'].length > 0) {
+ for (let i = 0; i < points['background'].length; i++) {
+ params['point_labels'].push(0);
+ }
+ params['points'] = params['points'].concat(points['background']);
+ }
+
+ params['label_prompt'] = [info.modelLabelToIdxMap[model][currentLabel]];
+ label_names = [currentLabel];
+ } else if (info.data.models[model].type === 'deepedit') {
+ params['background'] = [];
+ for (const label in points) {
+ params[label] = points[label];
+ }
+ } else {
+ let bg =
+ points['background'] && points['background'].length
+ ? points['background']
+ : [];
+ let fg = points[currentLabel];
+ if (info.data.models[model].dimension === 2) {
+ sidx = fg.length
+ ? fg[fg.length - 1][2]
+ : bg.length
+ ? bg[bg.length - 1][2]
+ : -1;
+ fg = fg.filter((p) => p[2] === sidx);
+ bg = bg.filter((p) => p[2] === sidx);
+ }
+ params['foreground'] = fg;
+ params['background'] = bg;
+ label_names = [currentLabel];
+ }
+
+ const response = await this.props
+ .client()
+ .infer(model, displaySet.SeriesInstanceUID, params);
+ // console.log(response);
+
+ hideNotification(nid, this.notification);
+ if (response.status !== 200) {
+ this.notification.show({
+ title: 'MONAI Label - ' + model,
+ message: 'Failed to Run Inference for Point Prompts',
+ type: 'error',
+ duration: 6000,
+ });
+ return;
+ }
+
+ this.notification.show({
+ title: 'MONAI Label - ' + model,
+ message: 'Running Inference for Point Prompts - Successful',
+ type: 'success',
+ duration: 4000,
+ });
+
+ const label_class_unknown = info.data.models[model].type === 'deepgrow';
+ console.log('Target Labels to update: ', label_names, label_class_unknown);
+ this.props.updateView(
+ response,
+ model,
+ label_names,
+ true,
+ label_class_unknown,
+ sidx
+ );
+ };
+
+ initPoints = () => {
+ const label = this.state.currentLabel;
+ if (!label) {
+ console.log('Current Label is Null (No need to init)');
+ return;
+ }
+
+ const { toolGroupService, viewportGridService } =
+ this.props.servicesManager.services;
+ const { viewports, activeViewportId } = viewportGridService.getState();
+ const viewport = viewports.get(activeViewportId);
+ const { viewportOptions } = viewport;
+ const toolGroupId = viewportOptions.toolGroupId;
+
+ const colorMap = this.segmentInfo();
+ const customColor = this.segColorToRgb(colorMap[label]);
+ toolGroupService.setToolConfiguration(toolGroupId, 'ProbeMONAILabel', {
+ customColor: customColor,
+ });
+
+ const annotations = this.state.clickPoints[label];
+ if (annotations) {
+ const manager = cornerstoneTools.annotation.state.getAnnotationManager();
+ manager.restoreAnnotations(annotations, null, 'ProbeMONAILabel');
+ }
+ };
+
+ clearPoints = () => {
+ cornerstoneTools.annotation.state
+ .getAnnotationManager()
+ .removeAllAnnotations();
+ this.props.servicesManager.services.cornerstoneViewportService
+ .getRenderingEngine()
+ .render();
+ };
+
+ clearAllPoints = () => {
+ const clickPoints = new Map();
+ this.setState({ clickPoints: clickPoints });
+ this.clearPoints();
+ };
+
+ segColorToRgb(s) {
+ const c = s ? s.color : [0, 0, 0];
+ return `rgb(${c[0]}, ${c[1]}, ${c[2]})`;
+ }
+
+ onChangeLabel = (name) => {
+ console.log(name, this.state.currentLabel);
+ if (name === this.state.currentLabel) {
+ console.log('Both new and prev are same');
+ return;
+ }
+
+ const prev = this.state.currentLabel;
+ const clickPoints = this.state.clickPoints;
+ if (prev) {
+ const manager = cornerstoneTools.annotation.state.getAnnotationManager();
+ const annotations = manager.saveAnnotations(null, 'ProbeMONAILabel');
+ console.log('Saving Prev annotations...', annotations);
+
+ this.state.clickPoints[prev] = annotations;
+ this.clearPoints();
+ }
+
+ this.state.currentLabel = name;
+ this.setState({ currentLabel: name, clickPoints: clickPoints });
+ this.initPoints();
+ };
+
+ getModels() {
+ const { info } = this.props;
+ const models = Object.keys(info.data.models).filter(
+ (m) =>
+ info.data.models[m].type === 'deepgrow' ||
+ info.data.models[m].type === 'deepedit' ||
+ info.data.models[m].type === 'vista3d'
+ );
+ return models;
+ }
+
+ getModelLabels(model) {
+ const { info } = this.props;
+ if (model && info.modelLabelNames[model].length) {
+ return info.modelLabelNames[model];
+ }
+ return info.labels;
+ }
+
+ getSelectedModel() {
+ let selectedModel = 0;
+ const models = this.getModels();
+ for (const model of models) {
+ if (!this.state.currentModel || model === this.state.currentModel) {
+ break;
+ }
+ selectedModel++;
+ }
+ const model = models.length > 0 ? models[selectedModel] : null;
+ // console.log('Selected Model: ', model);
+ if (!model) {
+ console.log('Something went error..');
+ return null;
+ }
+ return model;
+ }
+
+ render() {
+ const models = this.getModels();
+ const display = models.length > 0 ? 'block' : 'none';
+ const segInfo = this.segmentInfo();
+ const labels = this.getModelLabels(this.getSelectedModel());
+
+ return (
+
+
+
+
+ }
+ />
+
+
+
Available Organ(s):
+
+
+
+
+ this.onChangeLabel('background')}
+ >
+ |
+ {/* Content for the "background" entry */}
+
+ |
+ background |
+
+ {labels
+ .filter((l) => l !== 'background')
+ .map((label) => (
+ this.onChangeLabel(label)}
+ >
+ |
+
+ |
+ {label} |
+
+ ))}
+
+
+
+
+
+