diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
index 83724a58b2424c002d4b7e35eccc5e86befc6223..036aa20b5c752ca0e81fdd738603d32e521c3c29 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.style.css
@@ -21,3 +21,24 @@ readmore-component
{
width: 100%;
}
+
+.h-carousel
+{
+ width: 100%;
+ overflow-x: auto;
+}
+
+.h-carousel > .h-carousel-item-container
+{
+ display: inline-flex;
+ height: 100%;
+ flex-wrap: nowrap;
+ flex-direction: row;
+}
+
+.h-carousel-item
+{
+ height: calc(100% - 2rem);
+ width: 16rem;
+ margin: 1rem 0.5rem;
+}
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
index 5be2c5d7c37c1350cb91d4c057f7fbaaebb9225c..1c14d891f5f6f83876b7a06391e65d469769de0c 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.template.html
@@ -175,61 +175,72 @@
[region]="region"
#featureEntryCmp="featureEntryCmp">
</sxplr-feature-entry>
- </mat-tab>
-
-
- <ng-template sxplrExperimentalFlag [experimental]="true"
- #exmptRelatedFeat="sxplrExperimentalFlag"
- [ngIf]="exmptRelatedFeat.show$ | async">
-
- <!-- related region features -->
- <ng-template [ngIf]="relatedRegions$ | async | dedupRelatedRegionPipe" let-relatedRegions>
- <ng-template [ngIf]="relatedRegions.length > 0">
- <mat-tab>
-
- <!-- tab label -->
- <ng-template mat-tab-label>
- <span>
- Related Region Features
- </span>
- </ng-template>
+
+ <ng-template sxplrExperimentalFlag [experimental]="true"
+ #exmptRelatedFeat="sxplrExperimentalFlag"
+ [ngIf]="exmptRelatedFeat.show$ | async">
- <!-- tab-content -->
- <mat-accordion>
-
- <mat-expansion-panel *ngFor="let relatedRegion of relatedRegions" hideToggle>
- <mat-expansion-panel-header>
- <mat-panel-title class="ws-no-wrap">
+ <!-- related region features -->
+ <ng-template [ngIf]="relatedRegions$ | async | dedupRelatedRegionPipe" let-relatedRegions>
+ <ng-template [ngIf]="relatedRegions.length > 0">
+
+ <div class="section-divider"></div>
+
+ <h2 class="sxplr-ml-2 mat-h4">Related Regions</h2>
+
+ <div class="h-carousel">
+ <div class="h-carousel-item-container">
+ <mat-card *ngFor="let relatedRegion of relatedRegions"
+ class="h-carousel-item mat-elevation-z4">
+ <mat-card-subtitle>
+ {{ relatedRegion.qualification | translateQualificationPipe }}
+ </mat-card-subtitle>
+ <mat-card-title>
{{ relatedRegion.region.name }}
- </mat-panel-title>
- <mat-panel-description class="ws-no-wrap">
- {{ relatedRegion.parcellation.name }}
- </mat-panel-description>
- </mat-expansion-panel-header>
+ </mat-card-title>
+ <mat-card-subtitle>
+ {{ relatedRegion.parcellation.name}}
+ </mat-card-subtitle>
+ <mat-card-actions>
+ <button mat-button
+ [sxplr-dialog]="relatedRegFeatTmpl"
+ sxplr-dialog-size="auto">
+ show features
+ </button>
+ </mat-card-actions>
- <ng-template matExpansionPanelContent>
- <div>
- Current region
- <i>{{ region.name }}</i> {{ relatedRegion.qualification | translateQualificationPipe }}
- <i>{{ relatedRegion.region.name }}</i> in
- <b>{{ relatedRegion.parcellation.name }}</b>
- </div>
-
- <sxplr-feature-entry
- [parcellation]="relatedRegion.parcellation"
- [region]="relatedRegion.region">
- </sxplr-feature-entry>
-
- </ng-template>
- </mat-expansion-panel>
- </mat-accordion>
- </mat-tab>
+ <ng-template #relatedRegFeatTmpl>
+ <h2 mat-dialog-title>
+ {{ relatedRegion.region.name }}
+ {{ relatedRegion.parcellation.name }}
+ </h2>
+
+ <mat-dialog-content>
+ <sxplr-feature-entry
+ class="sxplr-d-block sxplr-mb-1"
+ [parcellation]="relatedRegion.parcellation"
+ [region]="relatedRegion.region">
+ </sxplr-feature-entry>
+ </mat-dialog-content>
+
+ <!-- footer -->
+ <mat-dialog-actions align="center">
+ <button mat-button mat-dialog-close>close</button>
+ </mat-dialog-actions>
+ </ng-template>
+
+ </mat-card>
+ </div>
+ </div>
+
+ </ng-template>
</ng-template>
- </ng-template>
- </ng-template>
+ </ng-template>
+ </mat-tab>
+
</mat-tab-group>
</ng-template>
diff --git a/src/extra_styles.css b/src/extra_styles.css
index 2c01c2b2a82ba7e56f13353d55dd38de7f06dea1..bc64f55d732399ae2e092af87a79b18ee928bb01 100644
--- a/src/extra_styles.css
+++ b/src/extra_styles.css
@@ -846,12 +846,6 @@ quick-tour-unit svg
stroke-linejoin: round;
}
-sxplr-sapiviews-features-receptor-autoradiograph canvas
-{
- max-width: 100%;
- max-height: 100%;
-}
-
how-to-cite img
{
width: 100%;
diff --git a/src/overwrite.scss b/src/overwrite.scss
index 5b17076e66aca6d569e24b3e6f5d0b6ab4c65f32..b4a9c686cf9575ce033aef5d83081f561cd711d5 100644
--- a/src/overwrite.scss
+++ b/src/overwrite.scss
@@ -324,3 +324,11 @@ button.#{$llb}
}
}
}
+
+div.section-divider
+{
+ border-bottom-color: rgba(128, 128, 128, 0.5);
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ margin: 3rem 1rem;
+}
\ No newline at end of file
diff --git a/src/state/atlasSelection/effects.spec.ts b/src/state/atlasSelection/effects.spec.ts
index 9ba912441b896aaf519a14893496e1db2beb9a27..9e4778613334f464a82d80ff34b97476e5346923 100644
--- a/src/state/atlasSelection/effects.spec.ts
+++ b/src/state/atlasSelection/effects.spec.ts
@@ -3,7 +3,7 @@ import { provideMockActions } from "@ngrx/effects/testing"
import { Action } from "@ngrx/store"
import { MockStore, provideMockStore } from "@ngrx/store/testing"
import { hot } from "jasmine-marbles"
-import { ReplaySubject, of, throwError } from "rxjs"
+import { NEVER, ReplaySubject, of, throwError } from "rxjs"
import { SAPI, SAPIModule } from "src/atlasComponents/sapi"
import { SxplrRegion, SxplrAtlas, SxplrParcellation, SxplrTemplate } from "src/atlasComponents/sapi/sxplrTypes"
import { IDS } from "src/atlasComponents/sapi/constants"
@@ -14,6 +14,7 @@ import { atlasSelection } from ".."
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { translateV3Entities } from "src/atlasComponents/sapi/translateV3"
import { PathReturn } from "src/atlasComponents/sapi/typeV3"
+import { MatDialog } from "@angular/material/dialog"
describe("> effects.ts", () => {
describe("> Effect", () => {
@@ -90,7 +91,19 @@ describe("> effects.ts", () => {
providers: [
Effect,
provideMockStore(),
- provideMockActions(() => actions$)
+ provideMockActions(() => actions$),
+ {
+ provide: MatDialog,
+ useValue: {
+ open(){
+ return {
+ afterClosed() {
+ return NEVER
+ }
+ }
+ }
+ }
+ },
]
})
})