diff --git a/src/viewerModule/pipes/nehubaVCtxToBbox.pipe.ts b/src/viewerModule/pipes/nehubaVCtxToBbox.pipe.ts
index e3ceaad46..98ac66955 100644
--- a/src/viewerModule/pipes/nehubaVCtxToBbox.pipe.ts
+++ b/src/viewerModule/pipes/nehubaVCtxToBbox.pipe.ts
@@ -1,4 +1,4 @@
-import { TContextArg } from './../viewer.interface';
+import { TViewerEvtCtxData } from './../viewer.interface';
import { Pipe, PipeTransform } from "@angular/core";
type Point = [number, number, number]
@@ -12,26 +12,32 @@ const MAGIC_RADIUS = 256
})
export class NehubaVCtxToBbox implements PipeTransform{
- public transform(event: TContextArg<'nehuba' | 'threeSurfer'>, unit: string = "mm"): BBox{
+ public transform(event: TViewerEvtCtxData<'nehuba' | 'threeSurfer'>, boxDims: [number, number, number]=null, unit: string = "mm"): BBox{
if (!event) {
return null
}
if (event.viewerType === 'threeSurfer') {
return null
}
+ if (!boxDims) {
+ boxDims = [MAGIC_RADIUS, MAGIC_RADIUS, MAGIC_RADIUS]
+ }
+
let divisor = 1
- if (unit === "mm") {
- divisor = 1e6
+ if (unit !== "mm") {
+ console.warn(`unit other than mm is not yet supported`)
+ return null
}
- const { payload } = event as TContextArg<'nehuba'>
+ divisor = 1e6
+ const { payload } = event as TViewerEvtCtxData<'nehuba'>
if (!payload.nav) return null
const { position, zoom } = payload.nav
// position is in nm
// zoom can be directly applied as a multiple
- const min = position.map(v => (v - (MAGIC_RADIUS * zoom)) / divisor) as Point
- const max = position.map(v => (v + (MAGIC_RADIUS * zoom)) / divisor) as Point
+ const min = position.map((v, idx) => (v - (boxDims[idx] * zoom)) / divisor) as Point
+ const max = position.map((v, idx) => (v + (boxDims[idx] * zoom)) / divisor) as Point
return [min, max]
}
}
diff --git a/src/viewerModule/threeSurfer/store/effects.ts b/src/viewerModule/threeSurfer/store/effects.ts
index 86992a1c3..7eef500a7 100644
--- a/src/viewerModule/threeSurfer/store/effects.ts
+++ b/src/viewerModule/threeSurfer/store/effects.ts
@@ -43,7 +43,8 @@ export class ThreeSurferEffects {
map(
cl => cl.filter(layer =>
layer.clType === "baselayer/threesurfer" ||
- layer.clType === "baselayer/threesurfer-label"
+ layer.clType === "baselayer/threesurfer-label/annot" ||
+ layer.clType === "baselayer/threesurfer-label/gii-label"
) as ThreeSurferCustomLayer[]
)
)
@@ -121,9 +122,9 @@ export class ThreeSurferEffects {
switchMap(({ labels }) => {
const labelMaps: ThreeSurferCustomLabelLayer[] = []
for (const key in labels) {
- const { laterality, url } = labels[key]
+ const { laterality, url, clType } = labels[key]
labelMaps.push({
- clType: 'baselayer/threesurfer-label',
+ clType,
id: `${url}-${laterality}`,
laterality,
source: url
diff --git a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
index 9a44a02e1..68822f1b2 100644
--- a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
+++ b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
@@ -1,12 +1,10 @@
-import { Component, Output, EventEmitter, ElementRef, OnDestroy, AfterViewInit, Inject, Optional, ChangeDetectionStrategy } from "@angular/core";
+import { Component, Output, EventEmitter, ElementRef, OnDestroy, AfterViewInit, Optional, ChangeDetectionStrategy } from "@angular/core";
import { EnumViewerEvt, IViewer, TViewerEvent } from "src/viewerModule/viewer.interface";
-import { BehaviorSubject, combineLatest, concat, forkJoin, from, merge, NEVER, Observable, of, Subject } from "rxjs";
+import { BehaviorSubject, combineLatest, concat, forkJoin, from, merge, NEVER, Observable, of, Subject, throwError } from "rxjs";
import { catchError, debounceTime, distinctUntilChanged, filter, map, scan, shareReplay, startWith, switchMap, tap, withLatestFrom } from "rxjs/operators";
import { ComponentStore, LockError } from "src/viewerModule/componentStore";
import { select, Store } from "@ngrx/store";
-import { ClickInterceptor, CLICK_INTERCEPTOR_INJECTOR } from "src/util";
import { MatSnackBar } from "src/sharedModules/angularMaterial.exports"
-import { CONST } from 'common/constants'
import { getUuid, switchMapWaitFor } from "src/util/fn";
import { AUTO_ROTATE, TInteralStatePayload, ViewerInternalStateSvc } from "src/viewerModule/viewerInternalState.service";
import { atlasAppearance, atlasSelection } from "src/state";
@@ -97,6 +95,17 @@ type TThreeSurfer = {
loadColormap: (url: string) => Promise
setupAnimation: () => void
dispose: () => void
+ loadVertexData: (url: string) => Promise<{
+ vertex: number[]
+ labels: {
+ index: number
+ name: string
+ color: number[]
+ vertices: number[]
+ }[]
+ readonly vertexLabels: Uint16Array
+ readonly colormap: Map
+ }>
control: any
camera: any
customColormap: WeakMap
@@ -254,7 +263,9 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
)
private vertexIndexLayers$: Observable = this.customLayers$.pipe(
- map(layers => layers.filter(l => l.clType === "baselayer/threesurfer-label") as ThreeSurferCustomLabelLayer[]),
+ map(layers => layers.filter(l =>
+ l.clType === "baselayer/threesurfer-label/gii-label" || l.clType === "baselayer/threesurfer-label/annot"
+ ) as ThreeSurferCustomLabelLayer[]),
distinctUntilChanged(arrayEqual((o, n) => o.id === n.id)),
)
@@ -267,22 +278,37 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
),
switchMap(layers =>
forkJoin(
- layers.map(layer =>
- from(
- this.tsRef.loadColormap(layer.source)
- ).pipe(
- map(giiInstance => {
- let vertexIndices: number[] = giiInstance[0].getData()
- if (giiInstance[0].attributes.DataType === 'NIFTI_TYPE_INT16') {
- vertexIndices = (window as any).ThreeSurfer.GiftiBase.castF32UInt16(vertexIndices)
- }
- return {
- indexLayer: layer,
- vertexIndices
- }
- })
- )
- )
+ layers.map(layer => {
+ if (layer.clType === "baselayer/threesurfer-label/gii-label") {
+ return from(
+ this.tsRef.loadColormap(layer.source)
+ ).pipe(
+ map(giiInstance => {
+ let vertexIndices: number[] = giiInstance[0].getData()
+ if (giiInstance[0].attributes.DataType === 'NIFTI_TYPE_INT16') {
+ vertexIndices = (window as any).ThreeSurfer.GiftiBase.castF32UInt16(vertexIndices)
+ }
+ return {
+ indexLayer: layer,
+ vertexIndices
+ }
+ })
+ )
+ }
+ if (layer.clType === "baselayer/threesurfer-label/annot") {
+ return from(
+ this.tsRef.loadVertexData(layer.source)
+ ).pipe(
+ map(v => {
+ return {
+ indexLayer: layer,
+ vertexIndices: v.vertexLabels
+ }
+ })
+ )
+ }
+ return throwError(() => new Error(`layer is neither annot nor gii-label`))
+ })
)
),
map(layers => {
@@ -319,8 +345,13 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
const { label, region } = curr
let key : 'left' | 'right'
- if ( /left/i.test(region.name) ) key = 'left'
- if ( /right/i.test(region.name) ) key = 'right'
+ if (
+ /left/i.test(region.name) || /^lh/i.test(region.name)
+ ) key = 'left'
+ if (
+ /right/i.test(region.name) || /^rh/i.test(region.name)
+ ) key = 'right'
+
if (!key) {
/**
* TODO
@@ -400,7 +431,6 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
private sapi: SAPI,
private snackbar: MatSnackBar,
@Optional() intViewerStateSvc: ViewerInternalStateSvc,
- @Optional() @Inject(CLICK_INTERCEPTOR_INJECTOR) clickInterceptor: ClickInterceptor,
){
if (intViewerStateSvc) {
const {
@@ -430,37 +460,6 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
this.onDestroyCb.push(() => done())
}
- /**
- * intercept click and act
- */
- if (clickInterceptor) {
- const handleClick = (ev: MouseEvent) => {
-
- // if does not click inside container, ignore
- if (!(el.nativeElement as HTMLElement).contains(ev.target as HTMLElement)) {
- return true
- }
-
- if (this.mouseoverRegions.length === 0) return true
- if (this.mouseoverRegions.length > 1) {
- this.snackbar.open(CONST.DOES_NOT_SUPPORT_MULTI_REGION_SELECTION, 'Dismiss', {
- duration: 3000
- })
- return true
- }
-
- const regions = this.mouseoverRegions.slice(0, 1) as any[]
- this.store$.dispatch(
- atlasSelection.actions.setSelectedRegions({ regions })
- )
- return true
- }
- const { register, deregister } = clickInterceptor
- register(handleClick)
- this.onDestroyCb.push(
- () => { deregister(register) }
- )
- }
this.domEl = el.nativeElement
@@ -726,8 +725,8 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
const { evDetail: detail, latMeshRecord, latLblIdxRecord, latLblIdxReg, meshVisibility } = arg
const evMesh = detail.mesh && {
faceIndex: detail.mesh.faceIndex,
- // typo in three-surfer
- verticesIndicies: detail.mesh.verticesIdicies
+ verticesIndicies: detail.mesh.verticesIndicies,
+ vertexIndex: detail.mesh.vertexIndex,
}
const custEv: THandlingCustomEv = {
regions: [],
@@ -740,9 +739,9 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
const {
geometry: evGeometry,
- // typo in three-surfer
- verticesIdicies: evVerticesIndicies,
- } = detail.mesh as { geometry: TThreeGeometry, verticesIdicies: number[] }
+ verticesIndicies: evVerticesIndicies,
+ vertexIndex
+ } = detail.mesh as { geometry: TThreeGeometry, verticesIndicies: number[], vertexIndex: number }
for (const laterality in latMeshRecord) {
const meshRecord = latMeshRecord[laterality]
@@ -771,14 +770,22 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, AfterViewInit
* translate vertex indices to label indicies via set, to remove duplicates
*/
const labelIndexSet = new Set()
- for (const idx of evVerticesIndicies){
- const labelOfInterest = labelIndexRecord.vertexIndices[idx]
- if (!labelOfInterest) {
- continue
- }
- labelIndexSet.add(labelOfInterest)
+ if (labelIndexRecord.vertexIndices[vertexIndex]) {
+ labelIndexSet.add(labelIndexRecord.vertexIndices[vertexIndex])
}
+ /**
+ * old implementation (perhaps less CPU intensive)
+ * gets all vertices and label them
+ */
+ // for (const idx of evVerticesIndicies){
+ // const labelOfInterest = labelIndexRecord.vertexIndices[idx]
+ // if (!labelOfInterest) {
+ // continue
+ // }
+ // labelIndexSet.add(labelOfInterest)
+ // }
+
/**
* decode label index to region
*/
diff --git a/src/viewerModule/viewer.interface.ts b/src/viewerModule/viewer.interface.ts
index cbc85aca0..488f8ee12 100644
--- a/src/viewerModule/viewer.interface.ts
+++ b/src/viewerModule/viewer.interface.ts
@@ -35,7 +35,9 @@ export interface IViewerCtx {
'threeSurfer': TThreeSurferContextInfo
}
-export type TContextArg = ({
+export type ViewerType = "nehuba" | "threeSurfer"
+
+export type TViewerEvtCtxData = ({
viewerType: K
payload: RecursivePartial
})
@@ -45,25 +47,40 @@ export enum EnumViewerEvt {
VIEWER_CTX,
}
-type TViewerEventViewerLoaded = {
+export type TViewerEventViewerLoaded = {
type: EnumViewerEvt.VIEWERLOADED
data: boolean
}
-export type TViewerEvent = TViewerEventViewerLoaded |
- {
- type: EnumViewerEvt.VIEWER_CTX
- data: TContextArg
- }
+type TViewerEventCtx = {
+ type: EnumViewerEvt.VIEWER_CTX
+ data: TViewerEvtCtxData
+}
+
+export type TViewerEvent<
+ T extends ViewerType=ViewerType
+> = TViewerEventViewerLoaded | TViewerEventCtx
+
+export function isViewerCtx(ev: TViewerEvent): ev is TViewerEventCtx {
+ return ev.type === EnumViewerEvt.VIEWER_CTX
+}
+
+export function isNehubaVCtxEvt(ev: TViewerEvent): ev is TViewerEventCtx<"nehuba"> {
+ return ev.type === EnumViewerEvt.VIEWER_CTX && ev.data.viewerType === "nehuba"
+}
+
+export function isThreeSurferVCtxEvt(ev: TViewerEvent): ev is TViewerEventCtx<"threeSurfer"> {
+ return ev.type === EnumViewerEvt.VIEWER_CTX && ev.data.viewerType === "threeSurfer"
+}
-export type TSupportedViewers = keyof IViewerCtx
+export type TSupportedViewers = ViewerType
-export interface IViewer {
+export interface IViewer {
viewerCtrlHandler?: IViewerCtrl
viewerEvent: EventEmitter>
}
export interface IGetContextInjArg {
- register: (fn: (contextArg: TContextArg) => void) => void
- deregister: (fn: (contextArg: TContextArg) => void) => void
+ register: (fn: (contextArg: TViewerEvtCtxData) => void) => void
+ deregister: (fn: (contextArg: TViewerEvtCtxData) => void) => void
}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.component.ts b/src/viewerModule/viewerCmp/viewerCmp.component.ts
index 1954de2ba..ac84f5c6e 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.component.ts
+++ b/src/viewerModule/viewerCmp/viewerCmp.component.ts
@@ -1,11 +1,11 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, TemplateRef, ViewChild, inject } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, TemplateRef, ViewChild, inject } from "@angular/core";
import { select, Store } from "@ngrx/store";
-import { BehaviorSubject, combineLatest, Observable, of, Subscription } from "rxjs";
+import { BehaviorSubject, combineLatest, Observable, of } from "rxjs";
import { debounceTime, distinctUntilChanged, map, shareReplay, switchMap, takeUntil } from "rxjs/operators";
import { CONST, ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
import { animate, state, style, transition, trigger } from "@angular/animations";
import { IQuickTourData } from "src/ui/quickTour";
-import { EnumViewerEvt, TContextArg, TSupportedViewers, TViewerEvent } from "../viewer.interface";
+import { EnumViewerEvt, TViewerEvtCtxData, TSupportedViewers, TViewerEvent } from "../viewer.interface";
import { ContextMenuService, TContextMenuReg } from "src/contextMenuModule";
import { DialogService } from "src/services/dialogService.service";
import { SAPI } from "src/atlasComponents/sapi";
@@ -55,7 +55,7 @@ interface HasName {
]
})
-export class ViewerCmp implements OnDestroy {
+export class ViewerCmp {
public readonly destroy$ = inject(DestroyDirective).destroyed$
@@ -74,8 +74,6 @@ export class ViewerCmp implements OnDestroy {
description: QUICKTOUR_DESC.ATLAS_SELECTOR,
}
- private subscriptions: Subscription[] = []
- private onDestroyCb: (() => void)[] = []
public viewerLoaded: boolean = false
private selectedATP = this.store$.pipe(
@@ -238,7 +236,7 @@ export class ViewerCmp implements OnDestroy {
constructor(
private store$: Store,
- private ctxMenuSvc: ContextMenuService>,
+ private ctxMenuSvc: ContextMenuService>,
private dialogSvc: DialogService,
private cdr: ChangeDetectorRef,
private sapi: SAPI,
@@ -293,51 +291,51 @@ export class ViewerCmp implements OnDestroy {
this.#fullNavBarSwitch$.next(flag)
})
- this.subscriptions.push(
- this.templateSelected$.subscribe(
- t => this.templateSelected = t
- ),
- combineLatest([
- this.templateSelected$,
- this.parcellationSelected$,
- this.selectedAtlas$,
- ]).pipe(
- debounceTime(160)
- ).subscribe(async ([tmpl, parc, atlas]) => {
- const regex = /pre.?release/i
- const checkPrerelease = (obj: any) => {
- if (obj?.name) return regex.test(obj.name)
- return false
- }
- const message: string[] = []
- if (checkPrerelease(atlas)) {
- message.push(`- _${atlas.name}_`)
- }
- if (checkPrerelease(tmpl)) {
- message.push(`- _${tmpl.name}_`)
- }
- if (checkPrerelease(parc)) {
- message.push(`- _${parc.name}_`)
- }
- if (message.length > 0) {
- message.unshift(`The following have been tagged pre-release, and may be updated frequently:`)
- try {
- await this.dialogSvc.getUserConfirm({
- title: `Pre-release warning`,
- markdown: message.join('\n\n'),
- confirmOnly: true
- })
- // eslint-disable-next-line no-empty
- } catch (e) {
-
- }
- }
- })
+ this.templateSelected$.pipe(
+ takeUntil(this.destroy$)
+ ).subscribe(
+ t => this.templateSelected = t
)
- }
- ngAfterViewInit(): void{
- const cb: TContextMenuReg> = ({ append, context }) => {
+ combineLatest([
+ this.templateSelected$,
+ this.parcellationSelected$,
+ this.selectedAtlas$,
+ ]).pipe(
+ takeUntil(this.destroy$),
+ debounceTime(160),
+ ).subscribe(async ([tmpl, parc, atlas]) => {
+ const regex = /pre.?release/i
+ const checkPrerelease = (obj: any) => {
+ if (obj?.name) return regex.test(obj.name)
+ return false
+ }
+ const message: string[] = []
+ if (checkPrerelease(atlas)) {
+ message.push(`- _${atlas.name}_`)
+ }
+ if (checkPrerelease(tmpl)) {
+ message.push(`- _${tmpl.name}_`)
+ }
+ if (checkPrerelease(parc)) {
+ message.push(`- _${parc.name}_`)
+ }
+ if (message.length > 0) {
+ message.unshift(`The following have been tagged pre-release, and may be updated frequently:`)
+ try {
+ await this.dialogSvc.getUserConfirm({
+ title: `Pre-release warning`,
+ markdown: message.join('\n\n'),
+ confirmOnly: true
+ })
+ // eslint-disable-next-line no-empty
+ } catch (e) {
+
+ }
+ }
+ })
+
+ const cb: TContextMenuReg> = ({ append, context }) => {
if (this.#lastSelectedPoint && this.lastViewedPointTmpl) {
const { point, template, face, vertices } = this.#lastSelectedPoint
@@ -373,14 +371,14 @@ export class ViewerCmp implements OnDestroy {
*/
let hoveredRegions = []
if (context.viewerType === 'nehuba') {
- hoveredRegions = ((context as TContextArg<'nehuba'>).payload.nehuba || []).reduce(
+ hoveredRegions = ((context as TViewerEvtCtxData<'nehuba'>).payload.nehuba || []).reduce(
(acc, curr) => acc.concat(...curr.regions),
[]
)
}
if (context.viewerType === 'threeSurfer') {
- hoveredRegions = (context as TContextArg<'threeSurfer'>).payload.regions
+ hoveredRegions = (context as TViewerEvtCtxData<'threeSurfer'>).payload.regions
}
if (hoveredRegions.length > 0) {
@@ -397,14 +395,11 @@ export class ViewerCmp implements OnDestroy {
return true
}
this.ctxMenuSvc.register(cb)
- this.onDestroyCb.push(
- () => this.ctxMenuSvc.deregister(cb)
- )
- }
- ngOnDestroy(): void {
- while (this.subscriptions.length) this.subscriptions.pop().unsubscribe()
- while (this.onDestroyCb.length > 0) this.onDestroyCb.pop()()
+ this.destroy$.subscribe(() => {
+ this.ctxMenuSvc.deregister(cb)
+ })
+
}
public clearRoi(): void{
@@ -484,47 +479,6 @@ export class ViewerCmp implements OnDestroy {
)
}
- public handleViewerEvent(event: TViewerEvent<'nehuba' | 'threeSurfer'>): void{
- switch(event.type) {
- case EnumViewerEvt.VIEWERLOADED:
- this.viewerLoaded = event.data
- this.cdr.detectChanges()
- break
- case EnumViewerEvt.VIEWER_CTX:
- this.ctxMenuSvc.deepMerge(event.data)
- if (event.data.viewerType === "nehuba") {
- const { nehuba, nav } = (event.data as TContextArg<"nehuba">).payload
- if (nehuba) {
- const mousingOverRegions = (nehuba || []).reduce((acc, { regions }) => acc.concat(...regions), [])
- this.store$.dispatch(
- userInteraction.actions.mouseoverRegions({
- regions: mousingOverRegions
- })
- )
- }
- if (nav) {
- this.store$.dispatch(
- userInteraction.actions.mouseoverPosition({
- position: {
- loc: nav.position as [number, number, number],
- space: this.templateSelected
- }
- })
- )
- }
- }
- if (event.data.viewerType === "threeSurfer") {
- const { regions=[] } = (event.data as TContextArg<"threeSurfer">).payload
- this.store$.dispatch(
- userInteraction.actions.mouseoverRegions({
- regions: regions as SxplrRegion[]
- })
- )
- }
- break
- default:
- }
- }
public disposeCtxMenu(): void{
this.ctxMenuSvc.dismissCtxMenu()
@@ -539,12 +493,6 @@ export class ViewerCmp implements OnDestroy {
)
}
- clearSelectedFeature(): void{
- this.store$.dispatch(
- userInteraction.actions.clearShownFeature()
- )
- }
-
navigateTo(position: number[]): void {
this.store$.dispatch(
atlasSelection.actions.navigateTo({
@@ -597,4 +545,15 @@ export class ViewerCmp implements OnDestroy {
nameEql(a: HasName, b: HasName){
return a.name === b.name
}
+
+ handleViewerCtxEvent(event: TViewerEvent) {
+ if (event.type === EnumViewerEvt.VIEWERLOADED) {
+ this.viewerLoaded = event.data
+ this.cdr.detectChanges()
+ return
+ }
+ if (event.type === EnumViewerEvt.VIEWER_CTX) {
+ this.ctxMenuSvc.deepMerge(event.data)
+ }
+ }
}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.style.css b/src/viewerModule/viewerCmp/viewerCmp.style.css
index d72febea4..05cfce23c 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.style.css
+++ b/src/viewerModule/viewerCmp/viewerCmp.style.css
@@ -93,13 +93,13 @@ mat-drawer
display: block;
}
-mat-list.contextual-block
+.contextual-block
{
display: inline-block;
background-color:rgba(200,200,200,0.8);
}
-:host-context([darktheme="true"]) mat-list.contextual-block
+:host-context([darktheme="true"]) .contextual-block
{
background-color : rgba(30,30,30,0.8);
}
@@ -155,13 +155,6 @@ sxplr-sapiviews-core-region-region-list-item
align-items: center;
}
-.centered
-{
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
.leave-me-alone
{
margin-top: 0.5rem;
@@ -194,4 +187,11 @@ sxplr-tab
{
display: inline-flex;
flex-direction: column;
-}
\ No newline at end of file
+}
+
+viewer-wrapper
+{
+ width: 100%;
+ height: 100%;
+ display: block;
+}
diff --git a/src/viewerModule/viewerCmp/viewerCmp.template.html b/src/viewerModule/viewerCmp/viewerCmp.template.html
index 5406251d2..b837c843a 100644
--- a/src/viewerModule/viewerCmp/viewerCmp.template.html
+++ b/src/viewerModule/viewerCmp/viewerCmp.template.html
@@ -10,21 +10,13 @@