in pathology/viewer/src/stores/image-viewer-page.store.ts [263:354]
private setupAnnotationLayers() {
combineLatest([
this.olMapBySlideDescriptorId$, this.selectedSplitViewSlideDescriptor$
])
.pipe(
takeUntil(this.destroy$),
tap(([olMapBySlideDescriptorId, selectedSlideDescriptor]) => {
if (!selectedSlideDescriptor) return;
const selectedSlideDescriptorId =
selectedSlideDescriptor.id as string;
const olMap =
olMapBySlideDescriptorId.get(selectedSlideDescriptorId);
if (!olMap) return;
const drawLayer = olMap.getAllLayers().find((layer) => {
return layer.get('name') === 'draw-layer';
});
if (!drawLayer) return;
const drawSource =
drawLayer.getSource() as Vector<Feature<Geometry>>;
if (!drawSource) return;
// Set up a listener for changes in the draw source (like addition
// or modification of features).
drawSource?.on('change', () => {
const drawSourceFeatures = [...drawSource.getFeatures()];
const sortedDrawSourceFeatures =
drawSourceFeatures.sort((a, b) => {
const featureAnnotationKeyA =
this.getFeatureAnnotationKey(a);
const featureAnnotationKeyB =
this.getFeatureAnnotationKey(b);
return featureAnnotationKeyB.index -
featureAnnotationKeyA.index;
});
// Map and sort the features to be used in a side navigation
// layer.
const sideNavDrawLayers =
sortedDrawSourceFeatures
.map((feature, index) => {
const featureKey = feature.getId();
let featureAnnotationKey: AnnotationKey | undefined =
undefined;
if (!featureKey) {
featureAnnotationKey = {
...DEFAULT_ANNOTATION_KEY,
names: 'ROI',
annotatorId: this.currentUser,
};
feature.setId(JSON.stringify(featureAnnotationKey));
} else {
featureAnnotationKey = {
...DEFAULT_ANNOTATION_KEY,
...this.getFeatureAnnotationKey(feature),
};
}
featureAnnotationKey.names =
`${featureAnnotationKey.names}-${featureAnnotationKey.index}`;
const sideNavLayer: SideNavLayer = {
...featureAnnotationKey,
feature,
};
return sideNavLayer;
})
.sort((a, b) => {
return b.index - a.index;
});
this.sideNavLayersBySlideDescriptorId$.value.set(
selectedSlideDescriptorId, sideNavDrawLayers);
this.sideNavLayersBySlideDescriptorId$.next(
this.sideNavLayersBySlideDescriptorId$.value);
});
}))
.subscribe();
combineLatest([
this.annotationsDicomModelByAnnotationInstanceId$,
this.olMapBySlideDescriptorId$,
this.selectedInstanceIdsBySlideDescriptorId$,
])
.pipe(
takeUntil(this.destroy$),
tap(() => {
this.updateSideNavLayers();
}),
)
.subscribe();
}