Skip to content

feat(viewer.js): Add bidirectional and ellipse annotations #72

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(viewer.js): Add bidirectional and ellipse annotations #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,695 changes: 2,116 additions & 1,579 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
"standard": "^16.0.3"
},
"dependencies": {
"dcmjs": "^0.18",
"dcmjs": "^0.19.0",
"dicomweb-client": "^0.8",
"image-type": "^4.1",
"mathjs": "^9.4",
Expand Down
285 changes: 203 additions & 82 deletions src/annotations/_AnnotationManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,62 @@
import dcmjs from 'dcmjs'
import dcmjs from "dcmjs";
import Feature from "ol/Feature";

import _MarkupManager from './markups/_MarkupManager'
import _MarkupManager from "./markups/_MarkupManager";
Copy link
Collaborator

@hackermd hackermd Dec 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you please revert these stylistic changes? They complicate the code review and are not in compliance with the coding style of the library (see Coding Style section in CONTRIBUTING).


/** Enums */
import Enums from '../enums'
import Enums from "../enums";

/** Markers */
import ArrowMarker, { format as arrowFormat } from './markers/arrow'
import ArrowMarker, { format as arrowFormat } from "./markers/arrow";

/** Markups */
import MeasurementMarkup, {
format as measurementFormat
} from './markups/measurement'
format as measurementFormat,
} from "./markups/measurement";
import TextEvaluationMarkup, {
format as textFormat
} from './markups/textEvaluation'
format as textFormat,
} from "./markups/textEvaluation";

/** Utils */
import { areCodedConceptsEqual, getContentItemNameCodedConcept } from '../utils'
import {
areCodedConceptsEqual,
getContentItemNameCodedConcept,
} from "../utils";
import ellipse from "./markups/ellipse/ellipse";
import bidirectional from "./markups/bidirectional/bidirectional";

const { Marker, Markup } = Enums
const { Marker, Markup } = Enums;

class _AnnotationManager {
constructor ({ map, pyramid, drawingSource } = {}) {
constructor({ map, pyramid, drawingSource, features } = {}) {
const markupManager = new _MarkupManager({
map,
pyramid,
drawingSource,
formatters: {
[Marker.Arrow]: arrowFormat,
[Markup.Measurement]: measurementFormat,
[Markup.TextEvaluation]: textFormat
}
})
[Markup.TextEvaluation]: textFormat,
},
});

this.props = {
map,
pyramid,
markupManager
}
markupManager,
drawingSource,
features,
};

/** Markups */
this[Markup.Measurement] = MeasurementMarkup(this.props)
this[Markup.TextEvaluation] = TextEvaluationMarkup(this.props)
this[Markup.Measurement] = MeasurementMarkup(this.props);
this[Markup.TextEvaluation] = TextEvaluationMarkup(this.props);

/** Markers */
this[Marker.Arrow] = ArrowMarker(this.props)
this[Marker.Arrow] = ArrowMarker(this.props);

/** Init */
this.onInit();
}

/**
Expand All @@ -54,26 +65,40 @@ class _AnnotationManager {
*
* @param {Feature} feature The feature
*/
_addMeasurementsAndEvaluationsProperties (feature) {
const { measurements, evaluations } = feature.getProperties()
_addMeasurementsAndEvaluationsProperties(feature) {
const { measurements, evaluations } = feature.getProperties();

if (measurements && measurements.length) {
return measurements.some((measurement) => {// eslint-disable-line
return measurements.some((measurement) => {
const SUPPORTED_MEASUREMENTS_CODED_CONCEPTS = [
new dcmjs.sr.coding.CodedConcept({
meaning: 'Area',
value: '42798000',
schemeDesignator: 'SCT'
meaning: "Area",
value: "42798000",
schemeDesignator: "SCT",
}),
new dcmjs.sr.coding.CodedConcept({
meaning: "Length",
value: "410668003",
schemeDesignator: "SCT",
}),
new dcmjs.sr.coding.CodedConcept({
meaning: "Long Axis",
value: "G-A185",
schemeDesignator: "SRT",
}),
new dcmjs.sr.coding.CodedConcept({
meaning: "Short Axis",
value: "G-A186",
schemeDesignator: "SRT",
Comment on lines +84 to +92
Copy link
Collaborator

@hackermd hackermd Dec 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use SCT rather than SRT codes.

}),
new dcmjs.sr.coding.CodedConcept({
meaning: 'Length',
value: '410668003',
schemeDesignator: 'SCT'
})
]
const measurementCodedConcept = getContentItemNameCodedConcept(
measurement
)
meaning: "AREA",
value: "G-D7FE",
schemeDesignator: "SRT",
Comment on lines +95 to +97
Copy link
Collaborator

@hackermd hackermd Dec 1, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use SCT rather than SRT codes.

}),
];
const measurementCodedConcept =
getContentItemNameCodedConcept(measurement);
if (
SUPPORTED_MEASUREMENTS_CODED_CONCEPTS.some((codedConcept) =>
areCodedConceptsEqual(measurementCodedConcept, codedConcept)
Expand All @@ -82,23 +107,22 @@ class _AnnotationManager {
feature.set(
Enums.InternalProperties.Markup,
Enums.Markup.Measurement
)
);
}
})
});
}

if (evaluations && evaluations.length) {
return evaluations.some((evaluation) => {// eslint-disable-line
return evaluations.some((evaluation) => {
const SUPPORTED_EVALUATIONS_CODED_CONCEPTS = [
new dcmjs.sr.coding.CodedConcept({
value: '112039',
meaning: 'Tracking Identifier',
schemeDesignator: 'DCM'
})
]
const evaluationCodedConcept = getContentItemNameCodedConcept(
evaluation
)
value: "112039",
meaning: "Tracking Identifier",
schemeDesignator: "DCM",
}),
];
const evaluationCodedConcept =
getContentItemNameCodedConcept(evaluation);
if (
SUPPORTED_EVALUATIONS_CODED_CONCEPTS.some((codedConcept) =>
areCodedConceptsEqual(codedConcept, evaluationCodedConcept)
Expand All @@ -107,9 +131,9 @@ class _AnnotationManager {
feature.set(
Enums.InternalProperties.Markup,
Enums.Markup.TextEvaluation
)
);
}
})
});
}
}

Expand All @@ -118,8 +142,8 @@ class _AnnotationManager {
*
* @param {boolean} isVisible
*/
setVisible (isVisible) {
this.props.markupManager.setVisible(isVisible)
setVisible(isVisible) {
this.props.markupManager.setVisible(isVisible);
}

/**
Expand All @@ -128,59 +152,156 @@ class _AnnotationManager {
* @param {string} id The markup id
* @param {boolean} isVisible The markup visibility
*/
setMarkupVisibility (id, isVisible) {
this.props.markupManager.setVisibility(id, isVisible)
setMarkupVisibility(id, isVisible) {
const feature = this.props.drawingSource.getFeatureById(id);
if (feature) {
this.props.markupManager.setVisibility(id, isVisible);
}
}

getNormalizedFeature(feature) {
return (
bidirectional.getNormalizedFeature(feature, this.props) ||
ellipse.getNormalizedFeature(feature, this.props)
);
}

getNormalizedFeatureId(feature) {
return (
bidirectional.getNormalizedFeatureId(feature, this.props) ||
ellipse.getNormalizedFeatureId(feature, this.props)
);
}

getMeasurements(feature) {
/** Annotations */
return bidirectional
.getMeasurements(feature, this.props)
.concat(ellipse.getMeasurements(feature, this.props));
}

onAdd (feature) {
onAdd(feature) {
/**
* Add properties to ROI feature before triggering
* markup and markers callbacks to keep UI in sync.
*/
this._addMeasurementsAndEvaluationsProperties(feature)
this._addMeasurementsAndEvaluationsProperties(feature);

/** Markups & Markers */
this[Marker.Arrow].onAdd(feature, this.props);
this[Markup.Measurement].onAdd(feature, this.props);
this[Markup.TextEvaluation].onAdd(feature, this.props);

/** Annotations */
bidirectional.onAdd(feature, this.props);
ellipse.onAdd(feature, this.props);
}

onInit() {
/** Markups & Markers */
this[Marker.Arrow].onInit(this.props);
this[Markup.Measurement].onInit(this.props);
this[Markup.TextEvaluation].onInit(this.props);

this[Marker.Arrow].onAdd(feature)
this[Markup.Measurement].onAdd(feature)
this[Markup.TextEvaluation].onAdd(feature)
/** Annotations */
bidirectional.onInit(this.props);
ellipse.onInit(this.props);
}

onFailure (uid) {
this[Marker.Arrow].onFailure(uid)
this[Markup.Measurement].onFailure(uid)
this[Markup.TextEvaluation].onFailure(uid)
onFailure(uid) {
/** Markups & Markers */
this[Marker.Arrow].onFailure(uid, this.props);
this[Markup.Measurement].onFailure(uid, this.props);
this[Markup.TextEvaluation].onFailure(uid, this.props);

/** Annotations */
bidirectional.onFailure(uid, this.props);
ellipse.onFailure(uid, this.props);
}

onRemove(feature) {
/** Markups & Markers */
this[Marker.Arrow].onRemove(feature, this.props);
this[Markup.Measurement].onRemove(feature, this.props);
this[Markup.TextEvaluation].onRemove(feature, this.props);

/** Annotations */
bidirectional.onRemove(feature, this.props);
ellipse.onRemove(feature, this.props);
}

onRemove (feature) {
this[Marker.Arrow].onRemove(feature)
this[Markup.Measurement].onRemove(feature)
this[Markup.TextEvaluation].onRemove(feature)
onUpdate(feature) {
/** Markups & Markers */
this[Marker.Arrow].onUpdate(feature, this.props);
this[Markup.Measurement].onUpdate(feature, this.props);
this[Markup.TextEvaluation].onUpdate(feature, this.props);

/** Annotations */
bidirectional.onUpdate(feature, this.props);
ellipse.onUpdate(feature, this.props);
}

onUpdate (feature) {
this[Marker.Arrow].onUpdate(feature)
this[Markup.Measurement].onUpdate(feature)
this[Markup.TextEvaluation].onUpdate(feature)
onDrawStart(event, drawingOptions) {
this.props.drawingOptions = drawingOptions;

/** Markups & Markers */
this[Marker.Arrow].onDrawStart(event, this.props);
this[Markup.Measurement].onDrawStart(event, this.props);
this[Markup.TextEvaluation].onDrawStart(event, this.props);

/** Annotations */
bidirectional.onDrawStart(event, this.props);
ellipse.onDrawStart(event, this.props);
}

onDrawStart (event) {
this[Marker.Arrow].onDrawStart(event)
this[Markup.Measurement].onDrawStart(event)
this[Markup.TextEvaluation].onDrawStart(event)
onDrawEnd(event, drawingOptions) {
this.props.drawingOptions = drawingOptions;

/** Markups & Markers */
this[Marker.Arrow].onDrawEnd(event, this.props);
this[Markup.Measurement].onDrawEnd(event, this.props);
this[Markup.TextEvaluation].onDrawEnd(event, this.props);

/** Annotations */
bidirectional.onDrawEnd(event, this.props);
ellipse.onDrawEnd(event, this.props);

/** Managers */
this.props.markupManager.onDrawEnd(event, this.props);
}

onDrawEnd (event) {
this[Marker.Arrow].onDrawEnd(event)
this[Markup.Measurement].onDrawEnd(event)
this[Markup.TextEvaluation].onDrawEnd(event)
this.props.markupManager.onDrawEnd(event)
onDrawAbort(event) {
/** Markups & Markers */
this[Marker.Arrow].onDrawAbort(event, this.props);
this[Markup.Measurement].onDrawAbort(event, this.props);
this[Markup.TextEvaluation].onDrawAbort(event, this.props);

/** Annotations */
bidirectional.onDrawAbort(event, this.props);
ellipse.onDrawAbort(event, this.props);

/** Managers */
this.props.markupManager.onDrawAbort(event, this.props);
}

onDrawAbort (event) {
this[Marker.Arrow].onDrawAbort(event)
this[Markup.Measurement].onDrawAbort(event)
this[Markup.TextEvaluation].onDrawAbort(event)
this.props.markupManager.onDrawAbort(event)
onSetFeatureStyle(feature, styleOptions) {
/** Markups & Markers */
this[Marker.Arrow].onSetFeatureStyle(feature, styleOptions, this.props);
this[Markup.Measurement].onSetFeatureStyle(
feature,
styleOptions,
this.props
);
this[Markup.TextEvaluation].onSetFeatureStyle(
feature,
styleOptions,
this.props
);

/** Annotations */
bidirectional.onSetFeatureStyle(feature, styleOptions, this.props);
ellipse.onSetFeatureStyle(feature, styleOptions, this.props);
}
}

export default _AnnotationManager
export default _AnnotationManager;
Loading