diff --git a/package-lock.json b/package-lock.json
index 8d90b7153768e04767c5418e61de040e0edccd20..eaa6b864e66c3e6d3556f6482a0816e0eb9e5d0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
- "name": "interactive-viewer",
- "version": "2.8.1",
+ "name": "siibra-explorer",
+ "version": "2.10.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
- "name": "interactive-viewer",
- "version": "2.8.1",
+ "name": "siibra-explorer",
+ "version": "2.10.0",
"license": "apache-2.0",
"dependencies": {
"@angular/animations": "^14.2.12",
@@ -19,6 +19,7 @@
"@angular/platform-browser": "^14.2.12",
"@angular/platform-browser-dynamic": "^14.2.12",
"@angular/router": "^14.2.12",
+ "@ngrx/component-store": "^14.3.3",
"@ngrx/effects": "^14.3.2",
"@ngrx/store": "^14.3.2",
"acorn": "^8.4.1",
@@ -4134,6 +4135,18 @@
"integrity": "sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==",
"dev": true
},
+ "node_modules/@ngrx/component-store": {
+ "version": "14.3.3",
+ "resolved": "https://registry.npmjs.org/@ngrx/component-store/-/component-store-14.3.3.tgz",
+ "integrity": "sha512-q0cY3LIM7eKctzT22udCejO/z5Jp6shEID8aP3NtIg9sYcSiFMK9enTEQkYZ615W3x804s9ARX3liFu98OwoUA==",
+ "dependencies": {
+ "tslib": "^2.0.0"
+ },
+ "peerDependencies": {
+ "@angular/core": "^14.0.0",
+ "rxjs": "^6.5.3 || ^7.5.0"
+ }
+ },
"node_modules/@ngrx/effects": {
"version": "14.3.2",
"resolved": "https://registry.npmjs.org/@ngrx/effects/-/effects-14.3.2.tgz",
@@ -5834,8 +5847,15 @@
}
},
"node_modules/@storybook/addon-controls/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/addon-controls/node_modules/webpack": {
"version": "4.43.0",
@@ -7077,8 +7097,15 @@
}
},
"node_modules/@storybook/addon-docs/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/addon-docs/node_modules/webpack": {
"version": "4.43.0",
@@ -8241,8 +8268,15 @@
}
},
"node_modules/@storybook/addon-essentials/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/addon-essentials/node_modules/webpack": {
"version": "4.43.0",
@@ -10462,8 +10496,15 @@
}
},
"node_modules/@storybook/angular/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/angular/node_modules/webpack": {
"version": "4.43.0",
@@ -12363,8 +12404,15 @@
}
},
"node_modules/@storybook/builder-webpack4/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/builder-webpack4/node_modules/webpack": {
"version": "4.43.0",
@@ -15603,8 +15651,15 @@
}
},
"node_modules/@storybook/core-server/node_modules/webpack/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/core-server/node_modules/y18n": {
"version": "4.0.3",
@@ -18013,8 +18068,15 @@
}
},
"node_modules/@storybook/manager-webpack4/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/manager-webpack4/node_modules/webpack": {
"version": "4.43.0",
@@ -19975,8 +20037,15 @@
}
},
"node_modules/@storybook/telemetry/node_modules/watchpack/chokidar2": {
+ "version": "2.0.0",
"dev": true,
- "optional": true
+ "optional": true,
+ "dependencies": {
+ "chokidar": "^2.1.8"
+ },
+ "engines": {
+ "node": "<8.10.0"
+ }
},
"node_modules/@storybook/telemetry/node_modules/webpack": {
"version": "4.43.0",
diff --git a/package.json b/package.json
index c2e396730cf684a3ba4dd19fa78cd39d6c3d9b4d..816cf85477e6fec9ec48d807c098cd7559b25529 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
"@angular/platform-browser": "^14.2.12",
"@angular/platform-browser-dynamic": "^14.2.12",
"@angular/router": "^14.2.12",
+ "@ngrx/component-store": "^14.3.3",
"@ngrx/effects": "^14.3.2",
"@ngrx/store": "^14.3.2",
"acorn": "^8.4.1",
diff --git a/src/features/module.ts b/src/features/module.ts
index 37712be5079fa5b1351cc0d1029efb9f0adb0bae..a2d380db34d40bfe093c24d4c9f24a32d09b60ec 100644
--- a/src/features/module.ts
+++ b/src/features/module.ts
@@ -23,6 +23,7 @@ import { FeatureViewComponent } from "./feature-view/feature-view.component";
import { TransformPdToDsPipe } from "./transform-pd-to-ds.pipe";
import { NgLayerCtlModule } from "src/viewerModule/nehuba/ngLayerCtlModule/module";
import { VoiBboxDirective } from "./voi-bbox.directive";
+import { ShowBBoxToggleDirective } from "./showBbox-toggle.directive";
@NgModule({
imports: [
@@ -51,6 +52,7 @@ import { VoiBboxDirective } from "./voi-bbox.directive";
FetchDirective,
CategoryAccDirective,
VoiBboxDirective,
+ ShowBBoxToggleDirective,
FeatureNamePipe,
TransformPdToDsPipe,
@@ -59,6 +61,7 @@ import { VoiBboxDirective } from "./voi-bbox.directive";
EntryComponent,
FeatureViewComponent,
VoiBboxDirective,
+ ShowBBoxToggleDirective,
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
diff --git a/src/features/showBbox-toggle.directive.ts b/src/features/showBbox-toggle.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..511b6ed1af8e9daf54c45dfa7f54c53bf8cc5914
--- /dev/null
+++ b/src/features/showBbox-toggle.directive.ts
@@ -0,0 +1,37 @@
+import { Directive, Injectable } from "@angular/core";
+import { ComponentStore } from "@ngrx/component-store";
+import { map } from "rxjs/operators";
+
+interface IVoiState {
+ showVoiFlag: boolean
+}
+
+@Injectable()
+class VoiStore extends ComponentStore<IVoiState>{
+ constructor(){
+ super({ showVoiFlag: false })
+ }
+}
+
+@Directive({
+ selector: '[showBboxToggle]',
+ exportAs: 'showBboxToggle',
+ providers: [
+ VoiStore
+ ]
+})
+export class ShowBBoxToggleDirective {
+ public readonly showVoiFlag$ = this.voiStore.state$.pipe(
+ map(v => v.showVoiFlag)
+ )
+
+ constructor(private readonly voiStore: VoiStore){
+
+ }
+
+ public setState(flag: boolean) {
+ this.voiStore.setState({
+ showVoiFlag: flag
+ })
+ }
+}
diff --git a/src/features/voi-bbox.directive.ts b/src/features/voi-bbox.directive.ts
index a62f3554344f5ce78c9e3256d361041f274a889b..d6ed2e0aac4ca11816b5f214699ed9c07cc8a47d 100644
--- a/src/features/voi-bbox.directive.ts
+++ b/src/features/voi-bbox.directive.ts
@@ -56,7 +56,6 @@ export class VoiBboxDirective implements OnDestroy {
ngOnDestroy(): void {
while (this.#onDestroyCb.length > 0) this.#onDestroyCb.pop()()
-
}
constructor(
diff --git a/src/viewerModule/viewerCmp/viewerCmp.component.ts b/src/viewerModule/viewerCmp/viewerCmp.component.ts
index fa2aa8e61b6fc05102c21fbbfbcca19ed4b974f2..fb796e465b98a5795c561f0907edd0a9c9afbbfe 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.component.ts
+++ b/src/viewerModule/viewerCmp/viewerCmp.component.ts
@@ -10,7 +10,7 @@ import { ContextMenuService, TContextMenuReg } from "src/contextMenuModule";
import { DialogService } from "src/services/dialogService.service";
import { SAPI } from "src/atlasComponents/sapi";
import { Feature, SxplrAtlas, SxplrRegion } from "src/atlasComponents/sapi/sxplrTypes"
-import { atlasAppearance, atlasSelection, userInteraction, userPreference } from "src/state";
+import { atlasAppearance, atlasSelection, userInteraction } from "src/state";
import { SxplrTemplate } from "src/atlasComponents/sapi/sxplrTypes";
@Component({
@@ -60,9 +60,6 @@ import { SxplrTemplate } from "src/atlasComponents/sapi/sxplrTypes";
export class ViewerCmp implements OnDestroy {
- public experimentalFlag$ = this.store$.pipe(
- select(userPreference.selectors.showExperimental)
- )
public CONST = CONST
public ARIA_LABELS = ARIA_LABELS
@@ -321,21 +318,6 @@ export class ViewerCmp implements OnDestroy {
}
showDataset(feat: Feature): void {
- /**
- * TODO if feat is spatial feature, navigate to region
- */
- // if ((feat as SapiSpatialFeatureModel).location) {
- // const feature = feat as SapiSpatialFeatureModel
- // this.store$.dispatch(
- // atlasSelection.actions.navigateTo({
- // navigation: {
- // orientation: [0, 0, 0, 1],
- // position: feature.location.center.coordinates.map(v => v.value * 1e6)
- // },
- // animation: true
- // })
- // )
- // }
this.store$.dispatch(
userInteraction.actions.showFeature({
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 63d30d9436668e34ab5ddd51b10ed538377e792c..59ebbb7f503aa738ab8b6ab389a7946502156f4a 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -969,6 +969,13 @@
</ng-template>
</mat-card-subtitle>
</mat-card-header>
+
+ <mat-slide-toggle
+ showBboxToggle
+ #showBboxToggle="showBboxToggle"
+ (change)="showBboxToggle.setState($event.checked)">
+ Show image location
+ </mat-slide-toggle>
</mat-card>
<sxplr-feature-entry
@@ -1001,7 +1008,7 @@
</ng-template>
</button>
<div
- *ngIf="experimentalFlag$ | async"
+ *ngIf="showBboxToggle.showVoiFlag$ | async"
voiBbox
[features]="voiFeatureEntryCmp.features$ | async">