private setupAnnotationLayers()

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();
    }