From 457f4e31cce5db6c28730fc37a3c0f33477625f3 Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Thu, 5 May 2022 13:21:40 +0200
Subject: [PATCH] Fix connectivity issues by review
---
.../sapi/core/sapiParcellation.ts | 12 +-
src/atlasComponents/sapi/sapi.service.ts | 5 +-
.../sapiViews/core/region/module.ts | 1 -
.../region/rich/region.rich.component.ts | 2 +-
.../region/region/rich/region.rich.stories.ts | 8 ++
.../region/rich/region.rich.template.html | 10 +-
.../connectivityBrowser.component.ts | 2 +-
...ries.ts => connectivityBrowser.stories.ts} | 61 +++++++---
.../connectivityMatrix.component.ts | 87 ---------------
.../connectivityMatrix.style.css | 0
.../connectivityMatrix.template.html | 0
.../exampleConnectivity.stories.ts | 105 ------------------
.../connectivity/hasConnectivity.directive.ts | 2 +-
.../sapiViews/features/connectivity/module.ts | 3 -
14 files changed, 67 insertions(+), 231 deletions(-)
rename src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/{exampleConnectivity.stories.ts => connectivityBrowser.stories.ts} (71%)
delete mode 100644 src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.component.ts
delete mode 100644 src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.style.css
delete mode 100644 src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.template.html
delete mode 100644 src/atlasComponents/sapiViews/features/connectivity/exampleConnectivity.stories.ts
diff --git a/src/atlasComponents/sapi/core/sapiParcellation.ts b/src/atlasComponents/sapi/core/sapiParcellation.ts
index 611b6b0db..4870493b3 100644
--- a/src/atlasComponents/sapi/core/sapiParcellation.ts
+++ b/src/atlasComponents/sapi/core/sapiParcellation.ts
@@ -8,6 +8,10 @@ type PaginationQuery = {
page: number
}
+type ParcellationPaginationQuery = {
+ type?: string
+}
+
export class SAPIParcellation{
constructor(private sapi: SAPI, public atlasId: string, public id: string){
@@ -36,13 +40,13 @@ export class SAPIParcellation{
)
}
- getFeatures(param?: PaginationQuery, type?: string, queryParam?: SapiQueryParam): Observable<SapiParcellationFeatureModel[]> {
+ getFeatures(param?: PaginationQuery, parcPagination?: ParcellationPaginationQuery, queryParam?: SapiQueryParam): Observable<SapiParcellationFeatureModel[]> {
return this.sapi.httpGet<SapiParcellationFeatureModel[]>(
`${this.sapi.bsEndpoint}/atlases/${encodeURIComponent(this.atlasId)}/parcellations/${encodeURIComponent(this.id)}/features`,
{
- type: type,
- size: param && param.size? param.size.toString() : '5',
- page: param && param.page? param.page.toString() : '0',
+ type: parcPagination?.type,
+ size: param?.size?.toString() || '5',
+ page: param?.page?.toString() || '0',
},
queryParam
)
diff --git a/src/atlasComponents/sapi/sapi.service.ts b/src/atlasComponents/sapi/sapi.service.ts
index 2adba633b..dbb7a06d0 100644
--- a/src/atlasComponents/sapi/sapi.service.ts
+++ b/src/atlasComponents/sapi/sapi.service.ts
@@ -21,9 +21,10 @@ type RegistryType = SAPIAtlas | SAPISpace | SAPIParcellation
@Injectable()
export class SAPI{
static bsEndpoint = `https://siibra-api-dev.apps-dev.hbp.eu/v1_0`
+ static modalitiesEndpoint = `https://siibra-api-dev.apps-dev.hbp.eu/v1_0/modalities`
public bsEndpoint = SAPI.bsEndpoint
-
+
registry = {
_map: {} as Record<string, {
func: (...arg: any[]) => RegistryType
@@ -82,7 +83,7 @@ export class SAPI{
}
getModalities() {
- return this.http.get('https://siibra-api-dev.apps-dev.hbp.eu/v1_0/modalities')
+ return this.http.get(SAPI.modalitiesEndpoint)
}
httpGet<T>(url: string, params?: Record<string, string>, sapiParam?: SapiQueryParam){
diff --git a/src/atlasComponents/sapiViews/core/region/module.ts b/src/atlasComponents/sapiViews/core/region/module.ts
index 60ab09fc7..f0e19a9bc 100644
--- a/src/atlasComponents/sapiViews/core/region/module.ts
+++ b/src/atlasComponents/sapiViews/core/region/module.ts
@@ -17,7 +17,6 @@ import { SapiViewsCoreRegionRegionRich } from "./region/rich/region.rich.compone
SapiViewsUtilModule,
SapiViewsFeaturesModule,
SpinnerModule,
- SapiViewsFeaturesModule,
],
declarations: [
SapiViewsCoreRegionRegionListItem,
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts
index 7c8a49b2e..f728d0ee8 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.component.ts
@@ -38,7 +38,7 @@ export class SapiViewsCoreRegionRegionRich extends SapiViewsCoreRegionRegionBase
// eslint-disable-next-line @typescript-eslint/no-empty-function
handleExpansionPanelClosedEv(title: string){
- this.expandedPanel = ''
+ this.expandedPanel = null
}
// eslint-disable-next-line @typescript-eslint/no-empty-function
diff --git a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.stories.ts b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.stories.ts
index 6e9f8907c..662a98325 100644
--- a/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.stories.ts
+++ b/src/atlasComponents/sapiViews/core/region/region/rich/region.rich.stories.ts
@@ -6,6 +6,9 @@ import { getHoc1Right, getHumanAtlas, getJba29, getJba29Regions, getMni152, prov
import { SapiViewsCoreRegionModule } from "../../module"
import { SapiViewsCoreRegionRegionRich } from "./region.rich.component"
import { action } from '@storybook/addon-actions';
+import {CUSTOM_ELEMENTS_SCHEMA} from "@angular/core";
+import {AngularMaterialModule} from "src/sharedModules";
+import {provideMockStore} from "@ngrx/store/testing";
const actionsData = {
onNavigateTo: action('onNavigateTo'),
@@ -20,11 +23,16 @@ export default {
CommonModule,
HttpClientModule,
SapiViewsCoreRegionModule,
+ AngularMaterialModule,
],
providers: [
SAPI,
+ provideMockStore(),
...provideDarkTheme,
],
+ schemas: [
+ CUSTOM_ELEMENTS_SCHEMA,
+ ],
declarations: []
})
],
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 f7dce340e..22ebc5640 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
@@ -96,8 +96,7 @@
<mat-accordion class="d-block mt-2">
<!-- connectivity -->
- <ng-template #sxplrSapiviewsFeaturesConnectivityBrowser
- let-contentAttribute="contentAttribute">
+ <ng-template #sxplrSapiviewsFeaturesConnectivityBrowser>
<sxplr-sapiviews-features-connectivity-browser class="pe-all flex-shrink-1"
[region]="region"
[types]="hasConnectivityDirective.availableModalities"
@@ -113,7 +112,6 @@
title: CONST.CONNECTIVITY,
iconClass: 'fab fa-connectdevelop',
content: sxplrSapiviewsFeaturesConnectivityBrowser,
- contentAttribute: {types: hasConnectivityDirective.availableModalities, defaultProfile: hasConnectivityDirective.defaultProfile},
desc: hasConnectivityDirective.connectivityNumber,
iconTooltip: hasConnectivityDirective.connectivityNumber + 'Connections',
iavNgIf: hasConnectivityDirective.hasConnectivity
@@ -177,9 +175,3 @@
</ng-template>
</mat-expansion-panel>
</ng-template>
-
-<!-- fall back if region is not provided -->
-
-<ng-template [ngIf]="!region">
- Region must be provided!
-</ng-template>
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts
index f0f1e5002..cac404103 100644
--- a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts
@@ -193,7 +193,7 @@ export class ConnectivityBrowserComponent implements AfterViewInit, OnDestroy {
this.fetching = true
const type = this.types.find(t => t.name === this.selectedType).types[0]
return this.sapi.getParcellation(this.atlas["@id"], this.parcellation["@id"])
- .getFeatures({page: this.pageNumber, size: 1}, type)
+ .getFeatures({page: this.pageNumber, size: 1}, {type})
.pipe(
take(1),
catchError(() => {
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/exampleConnectivity.stories.ts b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.stories.ts
similarity index 71%
rename from src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/exampleConnectivity.stories.ts
rename to src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.stories.ts
index 2930574bd..47c3ced73 100644
--- a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/exampleConnectivity.stories.ts
+++ b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.stories.ts
@@ -1,6 +1,6 @@
import { CommonModule } from "@angular/common"
import { HttpClientModule } from "@angular/common/http"
-import {Component, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core"
+import {ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA} from "@angular/core"
import { FormsModule } from "@angular/forms"
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { Meta, moduleMetadata, Story } from "@storybook/angular"
@@ -10,26 +10,29 @@ import {SapiParcellationFeatureMatrixModel, SapiParcellationFeatureModel} from "
import { AngularMaterialModule } from "src/sharedModules"
import {ConnectivityBrowserComponent} from "src/atlasComponents/sapiViews/features/connectivity";
import {PARSE_TYPEDARRAY} from "src/atlasComponents/sapi/sapi.service";
-import { take } from "rxjs/operators"
+import {catchError, take} from "rxjs/operators"
+import {of} from "rxjs";
@Component({
selector: 'autoradiograph-wrapper-cmp',
template: `
- <mat-form-field appearance="fill">
- <mat-select [(ngModel)]="featureId" (selectionChange)="fetchConnectivity()">
- <mat-option value="null" disabled>
- --select--
- </mat-option>
-
- <mat-option [value]="feat['@id']"
- *ngFor="let feat of features">
- {{ feat.name }}
- </mat-option>
- </mat-select>
- </mat-form-field>
-
+
+ <button mat-button (click)="datasetSliderChanged(1)" class="mb-3">Load Connectivity</button>
+
<div class="d-flex">Source: {{regionName}}</div>
+ <mat-label>
+ Dataset
+ </mat-label>
+ <mat-slider [min]="1"
+ [max]="numberOfDatasets"
+ (change)="datasetSliderChanged($event.value)"
+ [value]="pageNumber"
+ thumbLabel
+ step="1"
+ class="w-100">
+ </mat-slider>
+
<hbp-connectivity-matrix-row
#connectivityComponent
[region]="regionName"
@@ -57,11 +60,36 @@ class ExampleConnectivityBrowserWrapper {
featureId: string
regionName: string = 'Area TE 3 (STG) right'
+ type: string = 'siibra/features/connectivity/streamlineCounts'
+ pageNumber = 1
+ numberOfDatasets = 1
private regionIndexInMatrix = -1
public connectionsString: string
- constructor(private sapi: SAPI) {
+ constructor(private sapi: SAPI, private cdf: ChangeDetectorRef) {
+ }
+
+ datasetSliderChanged(pageNumber) {
+ this.pageNumber = pageNumber
+ this.loadDataset()
+ }
+
+ loadDataset() {
+ return this.sapi.getParcellation(this.atlas["@id"], this.parcellation["@id"])
+ .getFeatures({page: this.pageNumber, size: 1}, {type: this.type})
+ .pipe(
+ take(1),
+ catchError(() => {
+ return of(null)
+ })
+ ).subscribe((res: any) => {
+ if (res && res.items) {
+ this.numberOfDatasets = res.total
+ this.featureId = res.items[0]['@id']
+ this.fetchConnectivity()
+ }
+ })
}
fetchConnectivity() {
@@ -93,7 +121,6 @@ export default {
AngularMaterialModule,
HttpClientModule,
BrowserAnimationsModule,
- FormsModule,
],
providers: [
SAPI
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.component.ts b/src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.component.ts
deleted file mode 100644
index 44fa05d66..000000000
--- a/src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.component.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { AfterViewInit, Component, ElementRef, Input, OnChanges, SimpleChanges } from "@angular/core";
-import { SAPI, SapiAtlasModel, SapiParcellationModel } from "src/atlasComponents/sapi";
-import { PARSE_TYPEDARRAY } from "src/atlasComponents/sapi/sapi.service";
-import { SapiParcellationFeatureMatrixModel, SapiSerializationErrorModel } from "src/atlasComponents/sapi/type";
-import { EnumColorMapName } from "src/util/colorMaps";
-
-@Component({
- selector: 'sxplr-sapiviews-features-connectivity-matrix',
- templateUrl: './connectivityMatrix.template.html',
- styleUrls: [
- `./connectivityMatrix.style.css`
- ]
-})
-
-export class ConnectivityMatrixView implements OnChanges, AfterViewInit{
-
- @Input('sxplr-sapiviews-features-connectivity-matrix-atlas')
- atlas: SapiAtlasModel
-
- @Input('sxplr-sapiviews-features-connectivity-matrix-parcellation')
- parcellation: SapiParcellationModel
-
- @Input('sxplr-sapiviews-features-connectivity-matrix-featureid')
- featureId: string
-
- matrixData: SapiParcellationFeatureMatrixModel
- private pleaseRender = false
- private renderBuffer: Uint8ClampedArray
- width: number
- height: number
-
- private async fetchMatrixData(){
- this.matrixData = null
- const matrix = await this.sapi.getParcellation(this.atlas["@id"], this.parcellation["@id"]).getFeatureInstance(this.featureId).toPromise()
- if ((matrix as SapiSerializationErrorModel)?.type === "spy/serialization-error") {
- return
- }
- this.matrixData = matrix as SapiParcellationFeatureMatrixModel
- this.width = this.matrixData.matrix["x-width"]
- this.height = this.matrixData.matrix["x-height"]
- }
-
- ngAfterViewInit(): void {
- if (this.pleaseRender) {
- this.renderCanvas()
- }
- }
-
- async ngOnChanges(changes: SimpleChanges) {
- await this.fetchMatrixData()
- const { result, max, min } = await this.sapi.processNpArrayData<PARSE_TYPEDARRAY.CANVAS_COLORMAP_RGBA>(this.matrixData.matrix, PARSE_TYPEDARRAY.CANVAS_COLORMAP_RGBA, { colormap: EnumColorMapName.JET })
- const rawResult = await this.sapi.processNpArrayData<PARSE_TYPEDARRAY.RAW_ARRAY>(this.matrixData.matrix, PARSE_TYPEDARRAY.RAW_ARRAY)
- console.log({
- rawResult
- })
- this.renderBuffer = result
- this.renderCanvas()
- }
-
- private renderCanvas(){
-
- if (!this.el) {
- this.pleaseRender = true
- return
- }
-
- const arContainer = (this.el.nativeElement as HTMLElement)
- while (arContainer.firstChild) {
- arContainer.removeChild(arContainer.firstChild)
- }
-
- const canvas = document.createElement("canvas")
- canvas.height = this.height
- canvas.width = this.width
- arContainer.appendChild(canvas)
- const ctx = canvas.getContext("2d")
- const imgData = ctx.createImageData(this.width, this.height)
- imgData.data.set(this.renderBuffer)
- ctx.putImageData(imgData, 0, 0)
- this.pleaseRender = false
- }
-
- constructor(private sapi: SAPI, private el: ElementRef){
-
- }
-
-}
\ No newline at end of file
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.style.css b/src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.style.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.template.html b/src/atlasComponents/sapiViews/features/connectivity/connectivityMatrix/connectivityMatrix.template.html
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/atlasComponents/sapiViews/features/connectivity/exampleConnectivity.stories.ts b/src/atlasComponents/sapiViews/features/connectivity/exampleConnectivity.stories.ts
deleted file mode 100644
index 94bf2a984..000000000
--- a/src/atlasComponents/sapiViews/features/connectivity/exampleConnectivity.stories.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { CommonModule } from "@angular/common"
-import { HttpClientModule } from "@angular/common/http"
-import { Component } from "@angular/core"
-import { FormsModule } from "@angular/forms"
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
-import { Meta, moduleMetadata, Story } from "@storybook/angular"
-import { SAPI, SapiAtlasModel, SapiParcellationModel } from "src/atlasComponents/sapi"
-import { getJba29Features, getHumanAtlas, getJba29 } from "src/atlasComponents/sapi/stories.base"
-import { SapiParcellationFeatureModel } from "src/atlasComponents/sapi/type"
-import { AngularMaterialModule } from "src/sharedModules"
-import { ConnectivityMatrixView } from "./connectivityMatrix/connectivityMatrix.component"
-
-@Component({
- selector: 'autoradiograph-wrapper-cmp',
- template: `
- <mat-form-field appearance="fill">
- <mat-select [(ngModel)]="featureId">
- <mat-option value="null" disabled>
- --select--
- </mat-option>
-
- <mat-option [value]="feat['@id']"
- *ngFor="let feat of features">
- {{ feat.name }}
- </mat-option>
- </mat-select>
- </mat-form-field>
- <sxplr-sapiviews-features-connectivity-matrix
- class="d-inline-block w-100 h-100"
- *ngIf="featureId"
- [sxplr-sapiviews-features-connectivity-matrix-atlas]="atlas"
- [sxplr-sapiviews-features-connectivity-matrix-parcellation]="parcellation"
- [sxplr-sapiviews-features-connectivity-matrix-featureid]="featureId"
- >
- </sxplr-sapiviews-features-connectivity-matrix>
- `,
- styles: [
- `
- :host
- {
- display: block;
- max-width: 60rem;
- max-height: 60rem;
- }
- `
- ]
-})
-class ExampleConnectivityMatrixWrapper {
- atlas: SapiAtlasModel
- parcellation: SapiParcellationModel
- features: SapiParcellationFeatureModel[] = []
- featureId: string
-}
-
-export default {
- component: ExampleConnectivityMatrixWrapper,
- decorators: [
- moduleMetadata({
- imports: [
- CommonModule,
- AngularMaterialModule,
- HttpClientModule,
- BrowserAnimationsModule,
- FormsModule,
- ],
- providers: [
- SAPI
- ],
- declarations: [
- ConnectivityMatrixView
- ]
- })
- ],
-} as Meta
-
-const Template: Story<ExampleConnectivityMatrixWrapper> = (args: ExampleConnectivityMatrixWrapper, { loaded }) => {
- const { atlas, parc, features } = loaded
- return ({
- props: {
- ...args,
- atlas: atlas,
- parcellation: parc,
- features
- },
- })
-}
-
-Template.loaders = [
- async () => {
- const atlas = await getHumanAtlas()
- const parc = await getJba29()
- const features = await getJba29Features()
- return {
- atlas, parc, features
- }
- }
-]
-
-export const Default = Template.bind({})
-Default.args = {
-
-}
-Default.loaders = [
- ...Template.loaders
-]
\ No newline at end of file
diff --git a/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts b/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts
index c0dff8fa9..9f4577128 100644
--- a/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts
+++ b/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts
@@ -69,7 +69,7 @@ export class HasConnectivity implements OnDestroy {
const type = m.types[0]
this.sapi.getParcellation(this.atlas["@id"], this.parcellation["@id"])
- .getFeatures({page: 1, size: 1}, type)
+ .getFeatures({page: 1, size: 1}, {type})
.pipe(
take(1),
switchMap((res: any) => {
diff --git a/src/atlasComponents/sapiViews/features/connectivity/module.ts b/src/atlasComponents/sapiViews/features/connectivity/module.ts
index 5bde71aaf..5402b4039 100644
--- a/src/atlasComponents/sapiViews/features/connectivity/module.ts
+++ b/src/atlasComponents/sapiViews/features/connectivity/module.ts
@@ -1,7 +1,6 @@
import { CommonModule } from "@angular/common";
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from "@angular/core";
import { SAPI } from "src/atlasComponents/sapi";
-import { ConnectivityMatrixView } from "./connectivityMatrix/connectivityMatrix.component";
import {ConnectivityBrowserComponent} from "src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component";
import {HasConnectivity} from "src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive";
import {AngularMaterialModule} from "src/sharedModules";
@@ -12,12 +11,10 @@ import {AngularMaterialModule} from "src/sharedModules";
AngularMaterialModule
],
declarations: [
- ConnectivityMatrixView,
ConnectivityBrowserComponent,
HasConnectivity
],
exports: [
- ConnectivityMatrixView,
ConnectivityBrowserComponent,
HasConnectivity
],
--
GitLab