Pbi 620 organ rotation

package.json

@@ -54,7 +54,6 @@
     "@angular/platform-browser-dynamic": "^12.1.1",
     "@angular/router": "^12.1.1",
     "@angular/youtube-player": "^12.1.1",
-    "@danmarshall/deckgl-typings": "^4.7.0",
     "@deck.gl/core": "^8.4.9",
     "@deck.gl/geo-layers": "^8.4.9",
     "@deck.gl/layers": "^8.4.9",
@@ -104,12 +103,13 @@
     "@angular-eslint/builder": "^12.0.0",
     "@angular-eslint/eslint-plugin": "^12.0.0",
     "@angular-eslint/eslint-plugin-template": "^12.0.0",
-    "@angular-eslint/schematics": "12.3.0",
+    "@angular-eslint/schematics": "^12.3.1",
     "@angular-eslint/template-parser": "^12.0.0",
     "@angular/cli": "^12.1.1",
     "@angular/compiler-cli": "^12.1.1",
     "@angular/language-service": "^12.1.1",
     "@compodoc/compodoc": "^1.1.11",
+    "@danmarshall/deckgl-typings": "^4.7.0",
     "@types/file-saver": "^2.0.1",
     "@types/jasmine": "^3.8.1",
     "@types/jasminewd2": "~2.0.3",
@@ -125,7 +125,7 @@
     "@types/sax": "^1.2.1",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "4.28.3",
-    "@typescript-eslint/parser": "4.28.3",
+    "@typescript-eslint/parser": "^4.28.4",
     "browserify": "^17.0.0",
     "dts-gen": "^0.6.0",
     "eslint": "^7.26.0",

projects/ccf-body-ui/package.json

@@ -1,11 +1,11 @@
-{
-  "name": "ccf-body-ui",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^9.1.1",
+{
+  "name": "ccf-body-ui",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^9.1.1",
     "@angular/core": "^9.1.1"
-},
+  },
   "dependencies": {
     "tslib": "^2.0.0"
   }
-}
+}

projects/ccf-body-ui/tsconfig.lib.json

@@ -6,7 +6,6 @@
     "target": "es2015",
     "declaration": true,
     "inlineSources": true,
-    "types": [],
     "lib": [
       "dom",
       "es2018"

projects/ccf-rui/src/app/core/store/anatomical-structure-tags/anatomical-structure-tags.state.ts

@@ -1,13 +1,13 @@
 /* eslint-disable no-underscore-dangle */
 /* eslint-disable @typescript-eslint/member-ordering */
 import { createEntityCollections, EntityCollections } from '@angular-ru/common/entity';
-import { Injectable, Injector } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Computed, DataAction, StateRepository } from '@ngxs-labs/data/decorators';
 import { NgxsDataEntityCollectionsRepository } from '@ngxs-labs/data/repositories';
 import { State } from '@ngxs/store';
 import { bind as Bind } from 'bind-decorator';
 import { combineLatest, Observable, ObservableInput } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, shareReplay } from 'rxjs/operators';
 
 import { Tag, TagId, TagSearchResult } from '../../models/anatomical-structure-tag';
 import { ModelState } from '../model/model.state';
@@ -60,7 +60,8 @@ export class AnatomicalStructureTagState extends NgxsDataEntityCollectionsReposi
           }
         }
         return tags;
-      })
+      }),
+      shareReplay(1)
     );
   }
 
@@ -70,18 +71,14 @@ export class AnatomicalStructureTagState extends NgxsDataEntityCollectionsReposi
     return this._latestTags;
   }
 
-  /** Reference to the model state */
-  private model: ModelState;
-  /** Reference to the scene state */
-  private scene: SceneState;
-
   /**
    * Creates an instance of scene state.
    *
    * @param injector Injector service used to lazy load page and model state
    */
   constructor(
-    private readonly injector: Injector
+    private readonly model: ModelState,
+    private readonly scene: SceneState,
   ) {
     super();
   }
@@ -92,11 +89,6 @@ export class AnatomicalStructureTagState extends NgxsDataEntityCollectionsReposi
   ngxsOnInit(): void {
     super.ngxsOnInit();
 
-    // Injecting page and model states in the constructor breaks things!?
-    // Lazy load here
-    this.model = this.injector.get(ModelState);
-    this.scene = this.injector.get(SceneState);
-
     this.tags$.subscribe((tags) => {
       this._latestTags = tags;
     });

projects/ccf-rui/src/app/core/store/model/model.state.ts

@@ -1,15 +1,17 @@
 /* eslint-disable @typescript-eslint/member-ordering */
-import { Inject, Injectable, Injector } from '@angular/core';
+import { Immutable } from '@angular-ru/common/typings';
+import { Inject, Injectable } from '@angular/core';
 import { Computed, DataAction, StateRepository } from '@ngxs-labs/data/decorators';
 import { NgxsImmutableDataRepository } from '@ngxs-labs/data/repositories';
 import { State } from '@ngxs/store';
+import { ALL_ORGANS, OrganInfo } from 'ccf-shared';
+import { pluckUnique } from 'ccf-shared/rxjs-ext/operators';
 import { sortBy } from 'lodash';
-import { pluck } from 'rxjs/operators';
+import { Observable } from 'rxjs';
 
-import { OrganInfo, ALL_ORGANS } from 'ccf-shared';
 import { ExtractionSet } from '../../models/extraction-set';
 import { VisibilityItem } from '../../models/visibility-item';
-import { GlobalConfig, GLOBAL_CONFIG } from '../../services/config/config';
+import { GLOBAL_CONFIG, GlobalConfig } from '../../services/config/config';
 import { ReferenceDataState } from '../reference-data/reference-data.state';
 
 
@@ -109,62 +111,98 @@ export const RUI_ORGANS = ALL_ORGANS;
 @Injectable()
 export class ModelState extends NgxsImmutableDataRepository<ModelStateModel> {
   /** Identifier observable */
-  readonly id$ = this.state$.pipe(pluck('id'));
+  @Computed()
+  get id$(): Observable<string> {
+    return this.state$.pipe(pluckUnique('id'));
+  }
   /** Block size observable */
-  readonly blockSize$ = this.state$.pipe(pluck('blockSize'));
+  @Computed()
+  get blockSize$(): Observable<XYZTriplet> {
+    return this.state$.pipe(pluckUnique('blockSize'));
+  }
   /** Rotation observable */
-  readonly rotation$ = this.state$.pipe(pluck('rotation'));
+  @Computed()
+  get rotation$(): Observable<XYZTriplet> {
+    return this.state$.pipe(pluckUnique('rotation'));
+  }
   /** Position observable */
-  readonly position$ = this.state$.pipe(pluck('position'));
+  @Computed()
+  get position$(): Observable<XYZTriplet> {
+    return this.state$.pipe(pluckUnique('position'));
+  }
   /** Slice configuration observable */
-  readonly slicesConfig$ = this.state$.pipe(pluck('slicesConfig'));
+  @Computed()
+  get slicesConfig$(): Observable<SlicesConfig> {
+    return this.state$.pipe(pluckUnique('slicesConfig'));
+  }
   /** View type observable */
-  readonly viewType$ = this.state$.pipe(pluck('viewType'));
+  @Computed()
+  get viewType$(): Observable<ViewType> {
+    return this.state$.pipe(pluckUnique('viewType'));
+  }
   /** View side observable */
-  readonly viewSide$ = this.state$.pipe(pluck('viewSide'));
+  @Computed()
+  get viewSide$(): Observable<ViewSide> {
+    return this.state$.pipe(pluckUnique('viewSide'));
+  }
   /** Organ observable */
-  readonly organ$ = this.state$.pipe(pluck('organ'));
+  @Computed()
+  get organ$(): Observable<Immutable<OrganInfo>> {
+    return this.state$.pipe(pluckUnique('organ'));
+  }
   /** Organ IRI observable */
-  readonly organIri$ = this.state$.pipe(pluck('organIri'));
+  @Computed()
+  get organIri$(): Observable<string | undefined> {
+    return this.state$.pipe(pluckUnique('organIri'));
+  }
   /** Organ IRI observable */
-  readonly organDimensions$ = this.state$.pipe(pluck('organDimensions'));
+  @Computed()
+  get organDimensions$(): Observable<XYZTriplet> {
+    return this.state$.pipe(pluckUnique('organDimensions'));
+  }
   /** Sex observable */
-  readonly sex$ = this.state$.pipe(pluck('sex'));
+  @Computed()
+  get sex$(): Observable<'male' | 'female' | undefined> {
+    return this.state$.pipe(pluckUnique('sex'));
+  }
   /** Side observable */
-  readonly side$ = this.state$.pipe(pluck('side'));
+  @Computed()
+  get side$(): Observable<'left' | 'right' | undefined> {
+    return this.state$.pipe(pluckUnique('side'));
+  }
   /** Show previous observable */
-  readonly showPrevious$ = this.state$.pipe(pluck('showPrevious'));
+  @Computed()
+  get showPrevious$(): Observable<boolean> {
+    return this.state$.pipe(pluckUnique('showPrevious'));
+  }
   /** Extraction sites observable */
-  readonly extractionSites$ = this.state$.pipe(pluck('extractionSites'));
+  @Computed()
+  get extractionSites$(): Observable<Immutable<VisibilityItem[]>> {
+    return this.state$.pipe(pluckUnique('extractionSites'));
+  }
   /** Anatomical structures observable */
-  readonly anatomicalStructures$ = this.state$.pipe(pluck('anatomicalStructures'));
+  @Computed()
+  get anatomicalStructures$(): Observable<Immutable<VisibilityItem[]>> {
+    return this.state$.pipe(pluckUnique('anatomicalStructures'));
+  }
   /** Extraction sets observable */
-  readonly extractionSets$ = this.state$.pipe(pluck('extractionSets'));
-
-  /** Reference to the reference data state */
-  private referenceData: ReferenceDataState;
+  @Computed()
+  get extractionSets$(): Observable<Immutable<ExtractionSet[]>> {
+    return this.state$.pipe(pluckUnique('extractionSets'));
+  }
 
   /**
    * Creates an instance of model state.
    *
    * @param injector Injector service used to lazy load reference data state
    */
   constructor(
-    private readonly injector: Injector,
+    private readonly referenceData: ReferenceDataState,
     @Inject(GLOBAL_CONFIG) private readonly globalConfig: GlobalConfig
   ) {
     super();
   }
 
-  /**
-   * Initializes this state service.
-   */
-  ngxsOnInit(): void {
-    super.ngxsOnInit();
-
-    this.referenceData = this.injector.get(ReferenceDataState);
-  }
-
   ngxsAfterBootstrap(): void {
     super.ngxsAfterBootstrap();
 

projects/ccf-rui/src/app/core/store/page/page.state.ts

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/member-ordering */
 import { Immutable } from '@angular-ru/common/typings';
-import { Inject, Injectable, Injector } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { Computed, DataAction, StateRepository } from '@ngxs-labs/data/decorators';
 import { NgxsImmutableDataRepository } from '@ngxs-labs/data/repositories';
 import { State } from '@ngxs/store';
 import { iif, patch } from '@ngxs/store/operators';
+import { pluckUnique } from 'ccf-shared/rxjs-ext/operators';
 import { combineLatest, Observable } from 'rxjs';
-import { map, pluck } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 import { GLOBAL_CONFIG, GlobalConfig } from '../../services/config/config';
 import { ModelState } from './../model/model.state';
@@ -53,13 +54,25 @@ export interface PageStateModel {
 @Injectable()
 export class PageState extends NgxsImmutableDataRepository<PageStateModel> {
   /** Embedded observable */
-  readonly embedded$ = this.state$.pipe(pluck('embedded'));
+  @Computed()
+  get embedded$(): Observable<boolean> {
+    return this.state$.pipe(pluckUnique('embedded'));
+  }
   /** Home url observable */
-  readonly homeUrl$ = this.state$.pipe(pluck('homeUrl'));
+  @Computed()
+  get homeUrl$(): Observable<string> {
+    return this.state$.pipe(pluckUnique('homeUrl'));
+  }
   /** Active user observable */
-  readonly user$ = this.state$.pipe(pluck('user'));
+  @Computed()
+  get user$(): Observable<Immutable<Person>> {
+    return this.state$.pipe(pluckUnique('user'));
+  }
   /** RegistrationStated observable */
-  readonly registrationStarted$ = this.state$.pipe(pluck('registrationStarted'));
+  @Computed()
+  get registrationStarted$(): Observable<boolean> {
+    return this.state$.pipe(pluckUnique('registrationStarted'));
+  }
 
   /** Tutorial mode observable */
   @Computed()
@@ -69,15 +82,13 @@ export class PageState extends NgxsImmutableDataRepository<PageStateModel> {
     );
   }
 
-  private model: ModelState;
-
   /**
    * Creates an instance of page state.
    *
    * @param globalConfig The global configuration
    */
   constructor(
-    private readonly injector: Injector,
+    private readonly model: ModelState,
     @Inject(GLOBAL_CONFIG) private readonly globalConfig: GlobalConfig
   ) {
     super();
@@ -89,10 +100,6 @@ export class PageState extends NgxsImmutableDataRepository<PageStateModel> {
   ngxsOnInit(): void {
     super.ngxsOnInit();
 
-    // Injecting page and model states in the constructor breaks things!?
-    // Lazy load here
-    this.model = this.injector.get(ModelState);
-
     const { globalConfig: { embedded, homeUrl, user, tutorialMode } } = this;
     this.ctx.setState(patch<Immutable<PageStateModel>>({
       embedded: embedded ?? !!user,