diff --git a/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts b/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts index 0b2944c0f3d0d8b04207d6da4c17d2440a8ddb66..2ee14f1e192dfa35eee58ac0f168e7f8071c5461 100644 --- a/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts +++ b/src/ui/atlasLayerSelector/atlasLayerSelector.component.ts @@ -1,11 +1,10 @@ import { Component, OnInit, ViewChildren, QueryList, HostBinding } from "@angular/core"; import { select, Store } from "@ngrx/store"; -import { safeFilter } from "src/services/stateStore.service"; import { distinctUntilChanged, map, withLatestFrom, shareReplay, groupBy, mergeMap, toArray, switchMap, scan, filter } from "rxjs/operators"; import { Observable, Subscription, from, zip, of, combineLatest } from "rxjs"; import { viewerStateSelectTemplateWithId, viewerStateToggleLayer } from "src/services/state/viewerState.store.helper"; import { MatMenuTrigger } from "@angular/material/menu"; -import { viewerStateGetSelectedAtlas, viewerStateAtlasLatestParcellationSelector, viewerStateSelectedTemplateFullInfoSelector } from "src/services/state/viewerState/selectors"; +import { viewerStateGetSelectedAtlas, viewerStateAtlasLatestParcellationSelector, viewerStateSelectedTemplateFullInfoSelector, viewerStateSelectedTemplatePureSelector, viewerStateSelectedParcellationSelector } from "src/services/state/viewerState/selectors"; import { ARIA_LABELS } from 'common/constants' @Component({ @@ -52,9 +51,7 @@ export class AtlasLayerSelector implements OnInit { ) this.selectedTemplate$ = this.store$.pipe( - select('viewerState'), - safeFilter('templateSelected'), - map(state => state.templateSelected), + select(viewerStateSelectedTemplatePureSelector), withLatestFrom(this.selectedAtlas$), map(([templateSelected, templateFromAtlas]) => { return { @@ -64,9 +61,7 @@ export class AtlasLayerSelector implements OnInit { }) ) this.selectedParcellation$ = this.store$.pipe( - select('viewerState'), - safeFilter('parcellationSelected'), - map(state => state.parcellationSelected), + select(viewerStateSelectedParcellationSelector) ) const layersGroupBy$ = this.selectedAtlas$.pipe( @@ -205,4 +200,12 @@ export class AtlasLayerSelector implements OnInit { return layer.name } + + trackbyAtId(t){ + return t['@id'] + } + + trackbyName(t) { + return t['name'] + } } diff --git a/src/ui/atlasLayerSelector/atlasLayerSelector.template.html b/src/ui/atlasLayerSelector/atlasLayerSelector.template.html index 8e1293981f238dac54db12043b217ce35fe3464d..a4e8883b6769fce8f473aa2bd9b4ced768425114 100644 --- a/src/ui/atlasLayerSelector/atlasLayerSelector.template.html +++ b/src/ui/atlasLayerSelector/atlasLayerSelector.template.html @@ -11,7 +11,7 @@ </mat-card-subtitle> <mat-grid-list cols="3" rowHeight="3:4"> <!-- template tiles --> - <mat-grid-tile *ngFor="let template of availableTemplates$ | async"> + <mat-grid-tile *ngFor="let template of availableTemplates$ | async; trackBy: trackbyAtId"> <ng-container *ngTemplateOutlet="tileTmpl; context: { tileSrc: template, selected: selectedTemplateSpaceId === template['@id'], @@ -31,7 +31,7 @@ <mat-grid-list cols="3" rowHeight="3:4"> <!-- non grouped layers --> - <mat-grid-tile *ngFor="let layer of (nonGroupedLayers$ | async)"> + <mat-grid-tile *ngFor="let layer of (nonGroupedLayers$ | async); trackBy: trackbyAtId"> <ng-container *ngTemplateOutlet="tileTmpl; context: { tileSrc: layer, selected: selectedLayersIncludes(layer['@id']), @@ -43,7 +43,7 @@ </mat-grid-tile> <!-- grouped layers --> - <mat-grid-tile *ngFor="let group of (groupedLayers$ | async)"> + <mat-grid-tile *ngFor="let group of (groupedLayers$ | async); trackBy: trackbyName"> <ng-container *ngTemplateOutlet="tileTmpl; context: { tileSrc: group, selected: selectedOneOfTheLayers(group.parcellations),