diff --git a/src/atlasViewer/atlasViewer.component.ts b/src/atlasViewer/atlasViewer.component.ts
index 18a1131c532fef980a53ce66a214e06e4fff844d..f866c771f21c42422f72bc7c32a9c9938146d7de 100644
--- a/src/atlasViewer/atlasViewer.component.ts
+++ b/src/atlasViewer/atlasViewer.component.ts
@@ -18,7 +18,6 @@ import {
isDefined,
safeFilter,
} from "../services/stateStore.service";
-import { UNSUPPORTED_INTERVAL, UNSUPPORTED_PREVIEW } from "src/util/constants";
import { WidgetServices } from "src/widget";
import { LocalFileService } from "src/services/localFile.service";
@@ -31,7 +30,6 @@ import {MatSnackBar, MatSnackBarRef} from "@angular/material/snack-bar";
import {MatDialog, MatDialogRef} from "@angular/material/dialog";
import { ARIA_LABELS, CONST } from 'common/constants'
-import { MIN_REQ_EXPLAINER } from 'src/util/constants'
import { SlServiceService } from "src/spotlight/sl-service.service";
import { PureContantService } from "src/util";
import { ClickInterceptorService } from "src/glue";
@@ -83,11 +81,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
private subscriptions: Subscription[] = []
- public unsupportedPreviewIdx: number = 0
- public unsupportedPreviews: any[] = UNSUPPORTED_PREVIEW
-
- public MIN_REQ_EXPLAINER = MIN_REQ_EXPLAINER
-
private selectedParcellation$: Observable<any>
public selectedParcellation: any
@@ -173,23 +166,6 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
)
}
- if (!this.meetsRequirement) {
- merge(
- of(-1),
- interval(UNSUPPORTED_INTERVAL),
- ).pipe(
- map(v => {
- let idx = v
- while (idx < 0) {
- idx = v + this.unsupportedPreviews.length
- }
- return idx % this.unsupportedPreviews.length
- }),
- ).subscribe(val => {
- this.unsupportedPreviewIdx = val
- })
- }
-
this.subscriptions.push(
this.pureConstantService.useTouchUI$.subscribe(bool => this.ismobile = bool),
)
@@ -220,7 +196,7 @@ export class AtlasViewer implements OnDestroy, OnInit, AfterViewInit {
this.subscriptions.push(
this.pureConstantService.darktheme$.subscribe(flag => {
- this.rd.setAttribute(document.body, 'darktheme', flag.toString())
+ this.rd.setAttribute(document.body, 'darktheme', this.meetsRequirement && flag.toString())
}),
)
}
diff --git a/src/atlasViewer/atlasViewer.style.css b/src/atlasViewer/atlasViewer.style.css
index d89f76ce6b5edcc4463c44fd0c80db2465b002a8..c6c87ac87da646244f55ce6654b404763ee369c8 100644
--- a/src/atlasViewer/atlasViewer.style.css
+++ b/src/atlasViewer/atlasViewer.style.css
@@ -54,12 +54,6 @@ layout-floating-container > *
max-width: 100%;
}
-div[imageContainer]
-{
- flex-grow: 1;
- background: no-repeat center / contain;
-}
-
div.displayCard
{
opacity: 0.8;
diff --git a/src/atlasViewer/atlasViewer.template.html b/src/atlasViewer/atlasViewer.template.html
index 01d2391c3916c8e6eeb1706c711aab6ee4df3825..fbaa8bf4c5dee3f37516c8d928c4c1a008897130 100644
--- a/src/atlasViewer/atlasViewer.template.html
+++ b/src/atlasViewer/atlasViewer.template.html
@@ -122,39 +122,7 @@
<!-- does not meet req template -->
<ng-template #doesNotMeetReqTemplate>
- <div class="d-flex flex-column w-100 h-100" *ngIf="!meetsRequirement">
- <div class="jumbotron bg-light text-center mb-0">
- <div>
- <h1 class="mb-3">
- <i class="fas fa-exclamation-triangle"></i> Unsupported browser detected
- </h1>
- <p>
- We recommend using the latest version of <a target="_blank" href="https://www.google.com/chrome/">Google
- Chrome</a>
- or <a target="_blank" href="https://www.mozilla.org/firefox/">Mozilla Firefox)</a> for viewing the interactive
- viewer.
- </p>
- <div class="col-6 d-inline-block text-left">
- <readmore-component [collapsedHeight]="0">
- <markdown-dom [markdown]="MIN_REQ_EXPLAINER">
-
- </markdown-dom>
- </readmore-component>
- </div>
-
- </div>
- </div>
- <ng-container *ngFor="let preview of unsupportedPreviews; let idx = index">
- <div [hidden]="idx !== unsupportedPreviewIdx" class="text-center mb-3" imageContainer
- [style.backgroundImage]="'url(' + preview.previewSrc + ')'">
- <div class="mt-2 card d-inline-block displayCard">
- <div class="card-body">
- {{ preview.text }}
- </div>
- </div>
- </div>
- </ng-container>
- </div>
+ <not-supported-component></not-supported-component>
</ng-template>
<!-- logo tmpl -->
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
index cf003404fd52616175b04be8cec8d85543d11c2f..1eafa1a3db4056567b6d554b6dbc1ffa65e89355 100644
--- a/src/components/components.module.ts
+++ b/src/components/components.module.ts
@@ -25,7 +25,6 @@ import { IAVVerticalButton } from './vButton/vButton.component';
import { DynamicMaterialBtn } from './dynamicMaterialBtn/dynamicMaterialBtn.component';
import { SpinnerCmp } from './spinner/spinner.component';
import { ReadmoreModule } from './readmore';
-import { HoverableModule } from './hoverable';
@NgModule({
imports : [
@@ -36,7 +35,6 @@ import { HoverableModule } from './hoverable';
AngularMaterialModule,
UtilModule,
ReadmoreModule,
- HoverableModule,
],
declarations : [
/* components */
@@ -65,7 +63,6 @@ import { HoverableModule } from './hoverable';
exports : [
BrowserAnimationsModule,
ReadmoreModule,
- HoverableModule,
MarkdownDom,
TreeComponent,
diff --git a/src/components/hoverable/hoverableBlock.directive.ts b/src/components/hoverable/hoverableBlock.directive.ts
deleted file mode 100644
index 8868d046199d7706197fe7d31513f893e7b64b36..0000000000000000000000000000000000000000
--- a/src/components/hoverable/hoverableBlock.directive.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Directive, HostBinding, HostListener, Input, SecurityContext } from "@angular/core";
-import { DomSanitizer } from "@angular/platform-browser";
-
-@Directive({
- selector : '[hoverable]',
- host : {
- style: `
- transition :
- opacity 0.3s ease,
- box-shadow 0.3s ease,
- transform 0.3s ease;
- cursor : default;`,
- },
-})
-
-export class HoverableBlockDirective {
-
- @Input('hoverable')
- public config: any = {
- disable: false,
- translateY: -5,
- }
-
- private _disable = false
- private _translateY = -5
-
- public ngOnChanges() {
- this._disable = this.config && !!this.config.disable
- /**
- * 0 is evaluated as falsy, but a valid number
- * conditional tests for whether we need to fall back to default
- */
- this._translateY = this.config && this.config.translateY !== 0 && !!Number(this.config.translateY)
- ? Number(this.config.translateY)
- : -5
- }
-
- @HostBinding('style.opacity')
- public opacity: number = 0.9
-
- @HostBinding('style.transform')
- public transform = this.sanitizer.sanitize(SecurityContext.STYLE, `translateY(0px)`)
-
- @HostBinding('style.box-shadow')
- public boxShadow = this.sanitizer.sanitize(SecurityContext.STYLE, '0 4px 6px 0 rgba(5,5,5,0.1)')
-
- @HostListener('mouseenter')
- public onMouseenter() {
- if (this._disable) { return }
- this.opacity = 1.0
- this.boxShadow = this.sanitizer.sanitize(SecurityContext.STYLE, `0 4px 6px 0 rgba(5,5,5,0.25)`)
- /**
- * n.b. risk of XSS. But sincle translate Y is passed through Number, and corerced into a number,
- * and using 5 as a fallback, it should be safe
- */
- this.transform = this.sanitizer.sanitize(SecurityContext.STYLE, `translateY(${this._translateY}px)`)
- }
-
- @HostListener('mouseleave')
- public onmouseleave() {
- if (this._disable) { return }
- this.opacity = 0.9
- this.boxShadow = this.sanitizer.sanitize(SecurityContext.STYLE, `0 4px 6px 0 rgba(5,5,5,0.1)`)
- this.transform = this.sanitizer.sanitize(SecurityContext.STYLE, `translateY(0px)`)
- }
-
- constructor(private sanitizer: DomSanitizer) {
-
- }
-}
diff --git a/src/components/hoverable/index.ts b/src/components/hoverable/index.ts
deleted file mode 100644
index d0dc8b0c22be37dc381f8a507362cedc78f78370..0000000000000000000000000000000000000000
--- a/src/components/hoverable/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { HoverableModule } from './module'
-export { HoverableBlockDirective } from './hoverableBlock.directive'
\ No newline at end of file
diff --git a/src/components/hoverable/module.ts b/src/components/hoverable/module.ts
deleted file mode 100644
index 0913063fdfbe173b6b7b18637364f56373329c91..0000000000000000000000000000000000000000
--- a/src/components/hoverable/module.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { NgModule } from "@angular/core";
-import { HoverableBlockDirective } from "./hoverableBlock.directive";
-
-@NgModule({
- imports: [
- CommonModule,
- ],
- declarations: [
- HoverableBlockDirective,
- ],
- exports: [
- HoverableBlockDirective
- ]
-})
-
-export class HoverableModule{}
\ No newline at end of file
diff --git a/src/components/readmore/module.ts b/src/components/readmore/module.ts
index 255b721bcc67ce576a20103f7f8e13c87c387d39..ee0fb494d76221aea2171789c36c104eeb9325ef 100644
--- a/src/components/readmore/module.ts
+++ b/src/components/readmore/module.ts
@@ -1,14 +1,14 @@
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { HoverableModule } from "../hoverable";
+import { AngularMaterialModule } from "src/sharedModules";
import { ReadmoreComponent } from "./readmoreCmp/readmore.component";
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule,
- HoverableModule,
+ AngularMaterialModule,
],
declarations: [
ReadmoreComponent
diff --git a/src/components/readmore/readmoreCmp/readmore.component.ts b/src/components/readmore/readmoreCmp/readmore.component.ts
index ccbc0f773b993daaa1ed785b058d1177df5d0f76..914f7c09278b4953c8e24e67f9fe844db5fc38ce 100644
--- a/src/components/readmore/readmoreCmp/readmore.component.ts
+++ b/src/components/readmore/readmoreCmp/readmore.component.ts
@@ -14,7 +14,7 @@ export class ReadmoreComponent implements OnChanges, AfterContentChecked {
@Input() public collapsedHeight: number = 45
@Input() public show: boolean = false
@Input() public animationLength: number = 180
- @ViewChild('contentContainer') public contentContainer: ElementRef
+ @ViewChild('contentContainer', { read: ElementRef, static: true }) public contentContainer: ElementRef
public fullHeight: number = 200
diff --git a/src/components/readmore/readmoreCmp/readmore.style.css b/src/components/readmore/readmoreCmp/readmore.style.css
index eda7922c5fa7532c99c4db4744aa95fd479c54af..166ec29d499bd01a7010e8753854ef89d1cfd161 100644
--- a/src/components/readmore/readmoreCmp/readmore.style.css
+++ b/src/components/readmore/readmoreCmp/readmore.style.css
@@ -1,12 +1,15 @@
-div.readmore-content
+:host
{
- overflow:hidden;
+ display: inline-block;
+
+}
+
+.read-more-btn-container
+{
+ text-align: center;
}
-div.readmore-sliver
+
+div.readmore-content
{
- width:100%;
- display:flex;
- flex-direction: column;
- align-items: center;
- background-color: rgba(128,128,128,0.1);
+ overflow:hidden;
}
diff --git a/src/components/readmore/readmoreCmp/readmore.template.html b/src/components/readmore/readmoreCmp/readmore.template.html
index 2fa6c9975b6b2aa49712109c30512925157eebef..0eea38ac44faaa477c9757137a660c8804e3b5f4 100644
--- a/src/components/readmore/readmoreCmp/readmore.template.html
+++ b/src/components/readmore/readmoreCmp/readmore.template.html
@@ -1,18 +1,24 @@
-<div
- [@collapseState] = "{ value : show ? 'visible' : 'collapsed', params : { collapsedHeight: collapsedHeight, fullHeight: fullHeight, animationLength: animationLength } }"
+<div [@collapseState] = "{
+ value: show
+ ? 'visible'
+ : 'collapsed',
+ params: {
+ collapsedHeight: collapsedHeight,
+ fullHeight: fullHeight,
+ animationLength: animationLength
+ }}"
class="readmore-content">
<div #contentContainer>
<ng-content>
</ng-content>
</div>
</div>
-<div
- (click)="toggle($event)"
- class="readmore-sliver"
- [hoverable]="{translateY:-1}">
- <i
- [ngClass] = "show ? 'fa-chevron-up' : 'fa-chevron-down'"
- class = "fas">
- </i>
+<div class="read-more-btn-container">
+
+ <button mat-button (click)="toggle($event)" >
+ <i [ngClass] = "show ? 'fa-chevron-up' : 'fa-chevron-down'"
+ class = "fas">
+ </i>
+ </button>
</div>
\ No newline at end of file
diff --git a/src/main.module.ts b/src/main.module.ts
index 14806e6db813a562e356e7c6e94d47db01d499b5..ea82fa7eb23dbd27e2037f7f52ad1f3e7bdd43e1 100644
--- a/src/main.module.ts
+++ b/src/main.module.ts
@@ -57,6 +57,7 @@ import { of } from 'rxjs';
import { GET_KGDS_PREVIEW_INFO_FROM_ID_FILENAME, OVERRIDE_IAV_DATASET_PREVIEW_DATASET_FN, kgTos, IAV_DATASET_PREVIEW_ACTIVE } from './databrowser.fallback'
import { CANCELLABLE_DIALOG } from './util/interfaces';
import { environment } from 'src/environments/environment'
+import { NotSupportedCmp } from './notSupportedCmp/notSupported.component';
export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
return function(state, action) {
@@ -123,6 +124,7 @@ export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
],
declarations : [
AtlasViewer,
+ NotSupportedCmp,
TryMeComponent,
/* directives */
diff --git a/src/notSupportedCmp/notSupported.component.ts b/src/notSupportedCmp/notSupported.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6562a46a650f2c2c8b01caa6b1fc174d7251157f
--- /dev/null
+++ b/src/notSupportedCmp/notSupported.component.ts
@@ -0,0 +1,35 @@
+import { Component } from "@angular/core";
+import { interval, merge, of } from "rxjs";
+import { map } from "rxjs/operators";
+import { UNSUPPORTED_INTERVAL, UNSUPPORTED_PREVIEW } from "src/util/constants";
+import { MIN_REQ_EXPLAINER } from 'src/util/constants'
+
+@Component({
+ selector: 'not-supported-component',
+ templateUrl: './notSupported.template.html',
+ styleUrls: [
+ './notSupported.style.css'
+ ]
+})
+
+export class NotSupportedCmp{
+ public unsupportedPreviews: any[] = UNSUPPORTED_PREVIEW
+ public unsupportedPreviewIdx: number = 0
+ public MIN_REQ_EXPLAINER = MIN_REQ_EXPLAINER
+ ngOnInit(){
+ merge(
+ of(-1),
+ interval(UNSUPPORTED_INTERVAL),
+ ).pipe(
+ map(v => {
+ let idx = v
+ while (idx < 0) {
+ idx = v + this.unsupportedPreviews.length
+ }
+ return idx % this.unsupportedPreviews.length
+ }),
+ ).subscribe(val => {
+ this.unsupportedPreviewIdx = val
+ })
+ }
+}
\ No newline at end of file
diff --git a/src/notSupportedCmp/notSupported.style.css b/src/notSupportedCmp/notSupported.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..1d84ab645f8df54d59b8171693b704c6e2c5d87b
--- /dev/null
+++ b/src/notSupportedCmp/notSupported.style.css
@@ -0,0 +1,11 @@
+:host
+{
+ display: grid;
+ grid-template-rows: min-content 1fr;
+ height: 100%;
+}
+
+div.image-container
+{
+ background: no-repeat center / contain;
+}
diff --git a/src/notSupportedCmp/notSupported.template.html b/src/notSupportedCmp/notSupported.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..3a6b141b3f74abca4a63153bd376439901a3cca1
--- /dev/null
+++ b/src/notSupportedCmp/notSupported.template.html
@@ -0,0 +1,31 @@
+<div class="jumbotron bg-light text-center mb-0">
+ <div>
+ <h1 class="mb-3">
+ <i class="fas fa-exclamation-triangle"></i> Unsupported browser detected
+ </h1>
+ <p>
+ We recommend using the latest version of <a target="_blank" href="https://www.google.com/chrome/">Google
+ Chrome</a>
+ or <a target="_blank" href="https://www.mozilla.org/firefox/">Mozilla Firefox)</a> for viewing the interactive
+ viewer.
+ </p>
+ <div class="col-6 d-inline-block text-left">
+ <readmore-component [collapsedHeight]="0">
+ <markdown-dom [markdown]="MIN_REQ_EXPLAINER">
+
+ </markdown-dom>
+ </readmore-component>
+ </div>
+
+ </div>
+</div>
+<ng-container *ngFor="let preview of unsupportedPreviews; let idx = index">
+ <div [hidden]="idx !== unsupportedPreviewIdx" class="text-center mb-3 image-container"
+ [style.backgroundImage]="'url(' + preview.previewSrc + ')'">
+ <div class="mt-2 card d-inline-block displayCard">
+ <div class="card-body">
+ {{ preview.text }}
+ </div>
+ </div>
+ </div>
+</ng-container>
\ No newline at end of file
diff --git a/src/services/state/ngViewerState.store.ts b/src/services/state/ngViewerState.store.ts
index f0ad5000d6b1e1e295f38c09a0749d30fdc9f03e..4b30e79372125b271161308125f9835400ec7886 100644
--- a/src/services/state/ngViewerState.store.ts
+++ b/src/services/state/ngViewerState.store.ts
@@ -14,6 +14,7 @@ import { generalApplyState } from '../stateStore.helper';
import { ngViewerSelectorPanelMode, ngViewerSelectorPanelOrder } from './ngViewerState/selectors';
import { uiActionSnackbarMessage } from './uiState/actions';
import { TUserRouteError } from 'src/auth/auth.service';
+import { viewerStateSelectedTemplateSelector } from './viewerState.store.helper';
export function mixNgLayers(oldLayers: INgLayerInterface[], newLayers: INgLayerInterface|INgLayerInterface[]): INgLayerInterface[] {
if (newLayers instanceof Array) {
@@ -352,8 +353,8 @@ export class NgViewerUseEffect implements OnDestroy {
* simplify with layer browser
*/
const baseNgLayerName$ = this.store$.pipe(
- select('viewerState'),
- select('templateSelected'),
+ select(viewerStateSelectedTemplateSelector),
+
map(templateSelected => {
if (!templateSelected) { return [] }
diff --git a/src/theme.scss b/src/theme.scss
index 5d8358d9b5f293359edd5bddb5fa63b09daab771..87c14ed3d10df20ac5ee476027f0071633be9ba2 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -71,15 +71,6 @@
{
color: mat.get-color-from-palette($warn, 500);
}
-
- &.hoverable
- {
- &:hover
- {
- // background-color: mat-color($background, hover);
- cursor: pointer;
- }
- }
}
}
diff --git a/src/ui/logoContainer/logoContainer.style.css b/src/ui/logoContainer/logoContainer.style.css
index d36734ae3983a6fb3d974aef86ed828811f50b61..06a5526ebb72d220faddb2402cd0641d9327cb84 100644
--- a/src/ui/logoContainer/logoContainer.style.css
+++ b/src/ui/logoContainer/logoContainer.style.css
@@ -1,11 +1,11 @@
-[hbpLogoContainer]
+.hbpLogoContainer
{
display:inline-block;
background-size: cover;
height: 100%;
}
-[hbpLogoContainer] > img
+.hbpLogoContainer > img
{
visibility: hidden;
height: 100%;
diff --git a/src/ui/logoContainer/logoContainer.template.html b/src/ui/logoContainer/logoContainer.template.html
index 647ad7b86efe97d7edfdf11c293b32ce42b11049..989a828bec45e8d4f232c71c15b9322a3bd0c509 100644
--- a/src/ui/logoContainer/logoContainer.template.html
+++ b/src/ui/logoContainer/logoContainer.template.html
@@ -1,3 +1,3 @@
-<span [ngStyle]="containerStyle" hbpLogoContainer>
+<span [ngStyle]="containerStyle" class="hbpLogoContainer">
<img [src]="imgSrc" />
</span>
\ No newline at end of file
diff --git a/src/util/constants.ts b/src/util/constants.ts
index 03b462fb3e4573b084b2444b56805a3711e0d4e2..f341ca2817f3a06a0717dd0c70c36b6d5711b150 100644
--- a/src/util/constants.ts
+++ b/src/util/constants.ts
@@ -122,13 +122,13 @@ export const BS_ENDPOINT = new InjectionToken<string>('BS_ENDPOINT')
export const UNSUPPORTED_PREVIEW = [{
text: 'Preview of Colin 27 and JuBrain Cytoarchitectonic',
- previewSrc: './res/image/1.png',
+ previewSrc: 'assets/images/1.png',
}, {
text: 'Preview of Big Brain 2015 Release',
- previewSrc: './res/image/2.png',
+ previewSrc: 'assets/images/2.png',
}, {
text: 'Preview of Waxholm Rat V2.0',
- previewSrc: './res/image/3.png',
+ previewSrc: 'assets/images/3.png',
}]
export const UNSUPPORTED_INTERVAL = 7000