diff --git a/.storybook/preview.js b/.storybook/preview.js
index ff58e7880dafb6302fe435ed81319e7194ecaa55..fe04984a5e0c3167a2b17260d1e0e6e1768f7871 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,7 @@
import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);
+import * as ConnectivityComponent from 'hbp-connectivity-component/dist/loader'
import 'src/theme.scss'
@@ -17,4 +18,6 @@ export const parameters = {
// Set the initial theme
current: 'light'
}
-}
\ No newline at end of file
+}
+
+ConnectivityComponent.defineCustomElements(window)
diff --git a/src/atlasComponents/sapiViews/core/region/module.ts b/src/atlasComponents/sapiViews/core/region/module.ts
index 6c5b5421845effe0fccbaaba4b36eee3e5f68170..60ab09fc7c34287bf3e100445b00ab64019f6545 100644
--- a/src/atlasComponents/sapiViews/core/region/module.ts
+++ b/src/atlasComponents/sapiViews/core/region/module.ts
@@ -9,7 +9,6 @@ import { SapiViewsCoreRegionRegionListItem } from "./region/listItem/region.list
import { SapiViewsCoreRegionRegionBase } from "./region/region.base.directive";
import { SapiViewsCoreRegionRegionalFeatureDirective } from "./region/region.features.directive";
import { SapiViewsCoreRegionRegionRich } from "./region/rich/region.rich.component";
-import {SapiViewsFeatureConnectivityModule} from "src/atlasComponents/sapiViews/features/connectivity";
@NgModule({
imports: [
@@ -19,7 +18,6 @@ import {SapiViewsFeatureConnectivityModule} from "src/atlasComponents/sapiViews/
SapiViewsFeaturesModule,
SpinnerModule,
SapiViewsFeaturesModule,
- SapiViewsFeatureConnectivityModule
],
declarations: [
SapiViewsCoreRegionRegionListItem,
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 9deee8e218bd339f046ca39681889ad2a3f03008..a3ba5a9a4a2af5cff572fa56c4a812428e03a2f7 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
@@ -77,13 +77,13 @@
</ng-template>
<!-- connectivity -->
-<ng-template #regionConnectivityTmp>
- <connectivity-browser class="pe-all flex-shrink-1"
+<ng-template #sxplrSapiviewsFeaturesConnectivityBrowser>
+ <sxplr-sapiviews-features-connectivity-browser class="pe-all flex-shrink-1"
[region]="region"
- [sxplr-sapiviews-features-connectivity-matrix-atlas]="atlas"
- [sxplr-sapiviews-features-connectivity-matrix-parcellation]="parcellation"
+ [sxplr-sapiviews-features-connectivity-browser-atlas]="atlas"
+ [sxplr-sapiviews-features-connectivity-browser-parcellation]="parcellation"
[accordionExpanded]="expandedPanel === CONST.CONNECTIVITY">
- </connectivity-browser>
+ </sxplr-sapiviews-features-connectivity-browser>
</ng-template>
@@ -105,17 +105,17 @@
<ng-container *ngTemplateOutlet="ngMatAccordionTmpl; context: {
title: CONST.CONNECTIVITY,
- iconClass: 'fas fa-braille',
- content: regionConnectivityTmp,
+ iconClass: 'fab fa-connectdevelop',
+ content: sxplrSapiviewsFeaturesConnectivityBrowser,
desc: hasConnectivityDirective.connectivityNumber,
iconTooltip: hasConnectivityDirective.connectivityNumber + 'Connections',
iavNgIf: hasConnectivityDirective.hasConnectivity
}">
</ng-container>
- <div has-connectivity
- [sxplr-sapiviews-features-connectivity-matrix-atlas]="atlas"
- [sxplr-sapiviews-features-connectivity-matrix-parcellation]="parcellation"
+ <div sxplr-sapiviews-features-connectivity-check
+ [sxplr-sapiviews-features-connectivity-check-atlas]="atlas"
+ [sxplr-sapiviews-features-connectivity-check-parcellation]="parcellation"
[region]="region"
#hasConnectivityDirective="hasConnectivityDirective">
</div>
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts
index 8c4d397486c278f3653e3098e9c6768c8a2b40e1..8e236575220feafeb38481c8828ad968ab4fabf9 100644
--- a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts
+++ b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.component.ts
@@ -23,7 +23,7 @@ import {SapiParcellationFeatureMatrixModel} from "src/atlasComponents/sapi/type"
const CONNECTIVITY_NAME_PLATE = 'Connectivity'
@Component({
- selector: 'connectivity-browser',
+ selector: 'sxplr-sapiviews-features-connectivity-browser',
templateUrl: './connectivityBrowser.template.html',
providers: [
{
@@ -34,10 +34,10 @@ const CONNECTIVITY_NAME_PLATE = 'Connectivity'
})
export class ConnectivityBrowserComponent implements OnInit, AfterViewInit, OnDestroy {
- @Input('sxplr-sapiviews-features-connectivity-matrix-atlas')
+ @Input('sxplr-sapiviews-features-connectivity-browser-atlas')
atlas: SapiAtlasModel
- @Input('sxplr-sapiviews-features-connectivity-matrix-parcellation')
+ @Input('sxplr-sapiviews-features-connectivity-browser-parcellation')
parcellation: SapiParcellationModel
private setColorMap$: Subject<boolean> = new Subject()
@@ -274,7 +274,6 @@ export class ConnectivityBrowserComponent implements OnInit, AfterViewInit, OnDe
this.connectedAreas.next(this.cleanConnectedAreas(areas))
this.matrixString = JSON.stringify(matrixData.columns.map((mc, i) => ([mc, ...matrix.rawArray[i]])))
- console.log(this.matrixString)
})
this.fetching = false
}).catch(() => this.fetching = false)
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.stories.ts b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..27d0d310fb1bd23b8bd0eef86175ae1d1f38bc8a
--- /dev/null
+++ b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.stories.ts
@@ -0,0 +1,192 @@
+// import { CommonModule } from "@angular/common"
+// import { HttpClientModule } from "@angular/common/http"
+// import {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"
+// 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 {ConnectivityBrowserComponent} from "src/atlasComponents/sapiViews/features/connectivity";
+//
+// @Component({
+// selector: 'connectivity-wrapper-cmp',
+// template: `
+// <!-- <hbp-connectivity-matrix-row-->
+// <!-- #connectivityComponent-->
+// <!-- *ngIf="regionName"-->
+// <!-- [region]="regionName"-->
+// <!-- [connections]="connectionsString"-->
+// <!-- theme="dark"-->
+// <!-- show-export="true"-->
+// <!-- show-source="true"-->
+// <!-- show-title="false"-->
+// <!-- show-toolbar="false"-->
+// <!-- show-description="false"-->
+// <!-- show-dataset-name="false"-->
+// <!-- custom-dataset-selector="true"-->
+// <!-- tools_showlog="true"-->
+// <!-- hide-export-view="true">-->
+//
+// <!-- <div slot="dataset">-->
+// <!-- <div *ngIf="features.length && featureId" class=" flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap">-->
+// <!-- <mat-form-field class="flex-grow-1 flex-shrink-1 w-0">-->
+// <!-- <mat-label>-->
+// <!-- Dataset-->
+// <!-- </mat-label>-->
+//
+// <!-- <mat-select-->
+// <!-- [(ngModel)]="featureId"-->
+// <!-- (selectionChange)="fetchConnectivity()">-->
+// <!-- <mat-option-->
+// <!-- [matTooltip]="dataset.dataset.name"-->
+// <!-- *ngFor="let dataset of features"-->
+// <!-- [value]="dataset['@id']">-->
+// <!-- {{ dataset.dataset.name }}-->
+// <!-- </mat-option>-->
+// <!-- </mat-select>-->
+// <!-- </mat-form-field>-->
+// <!-- </div>-->
+// <!-- </div>-->
+//
+// <!-- </hbp-connectivity-matrix-row>-->
+//
+// <div *ngIf="features.length && featureId" class=" flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap">
+// <!-- <mat-form-field class="flex-grow-1 flex-shrink-1 w-0">-->
+// <!-- <mat-label>-->
+// <!-- Dataset-->
+// <!-- </mat-label>-->
+//
+// <!-- <mat-select-->
+// <!-- [(ngModel)]="featureId">-->
+// <!-- <mat-option-->
+// <!-- [matTooltip]="dataset.dataset.name"-->
+// <!-- *ngFor="let dataset of features"-->
+// <!-- [value]="dataset['@id']">-->
+// <!-- {{ dataset.dataset.name }}-->
+// <!-- </mat-option>-->
+// <!-- </mat-select>-->
+// <!-- </mat-form-field>-->
+//
+// <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>
+//
+//
+// </div>
+// `,
+// styles: [
+// `
+// :host
+// {
+// display: block;
+// max-width: 60rem;
+// max-height: 60rem;
+// }
+// `
+// ]
+// })
+// class ExampleConnectivityBrowserWrapper {
+// atlas: SapiAtlasModel
+// parcellation: SapiParcellationModel
+// features: SapiParcellationFeatureModel[] = []
+// featureId: string
+// regionName: string = 'Area TE 3 (STG) right'
+//
+// public connectionsString: string
+//
+// private regionIndexInMatrix = -1
+//
+// public fetching: boolean = false
+// public matrixString: string
+//
+// // constructor( private sapi: SAPI) {
+// // }
+// //
+// //
+// // fetchConnectivity() {
+// // this.fetching = true
+// // this.sapi.getParcellation(this.atlas["@id"], this.parcellation["@id"]).getFeatureInstance(this.featureId)
+// // .then(ds=> {
+// // const matrixData = ds as SapiParcellationFeatureMatrixModel
+// // this.regionIndexInMatrix = (matrixData.columns as Array<string>).findIndex(md => md === this.regionName)
+// // this.sapi.processNpArrayData<PARSE_TYPEDARRAY.RAW_ARRAY>(matrixData.matrix, PARSE_TYPEDARRAY.RAW_ARRAY)
+// // .then(matrix => {
+// // const areas = {}
+// // matrix.rawArray[this.regionIndexInMatrix].forEach((value, i) => {
+// // areas[matrixData.columns[i]] = value
+// // })
+// // this.connectionsString = JSON.stringify(areas)
+// //
+// // this.matrixString = JSON.stringify(matrixData.columns.map((mc, i) => ([mc, ...matrix.rawArray[i]])))
+// // console.log(this.matrixString)
+// // })
+// // this.fetching = false
+// // }).catch(() => this.fetching = false)
+// // }
+// }
+//
+// export default {
+// component: ExampleConnectivityBrowserWrapper,
+// decorators: [
+// moduleMetadata({
+// imports: [
+// CommonModule,
+// AngularMaterialModule,
+// HttpClientModule,
+// BrowserAnimationsModule,
+// FormsModule,
+// ],
+// providers: [
+// SAPI
+// ],
+// schemas: [
+// CUSTOM_ELEMENTS_SCHEMA,
+// ],
+// declarations: [
+// ConnectivityBrowserComponent
+// ]
+// })
+// ],
+// } as Meta
+//
+// const Template: Story<ExampleConnectivityBrowserWrapper> = (args: ExampleConnectivityBrowserWrapper, { 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
+// ]
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.template.html b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.template.html
index 6ad2eee3a422a1f14492eb2b6286f36005e97f9d..9cb092e6d39ca52c100ef6efe94095f37ae3bbbd 100644
--- a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.template.html
+++ b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/connectivityBrowser.template.html
@@ -1,23 +1,5 @@
<div class="w-100 h-100 d-block d-flex flex-column sxplr-pb-2">
-<!-- <hbp-connectivity-matrix-row-->
-<!-- (connectivityDataReceived)="connectivityDataReceived.emit($event)"-->
-<!-- #connectivityComponent-->
-<!-- *ngIf="regionName"-->
-<!-- [region]="regionName + (regionHemisphere? ' - ' + regionHemisphere : '')"-->
-<!-- theme="dark"-->
-<!-- [loadurl]="loadUrl"-->
-<!-- show-export="true"-->
-<!-- show-source="false"-->
-<!-- show-title="false"-->
-<!-- show-toolbar="false"-->
-<!-- show-description="false"-->
-<!-- show-dataset-name="false"-->
-<!-- custom-dataset-selector="true"-->
-<!-- tools_showlog="true"-->
-<!-- [tools_custom]='[{"name": "exportslot", "type": "slot"}]'-->
-<!-- hide-export-view="true">-->
-
- <hbp-connectivity-matrix-row
+ <hbp-connectivity-matrix-row
#connectivityComponent
*ngIf="regionName"
[region]="regionName + (regionHemisphere? ' - ' + regionHemisphere : '')"
@@ -35,9 +17,6 @@
[tools_custom]='[{"name": "exportslot", "type": "slot"}]'
hide-export-view="true">
-
-
-
<div slot="dataset">
<div *ngIf="datasetList.length && selectedDataset" class=" flex-grow-0 flex-shrink-0 d-flex flex-row flex-nowrap">
<mat-form-field class="flex-grow-1 flex-shrink-1 w-0">
diff --git a/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/exampleConnectivity.stories.ts b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/exampleConnectivity.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5b9f485f19b3f67804ca11e018d35627f9cf8821
--- /dev/null
+++ b/src/atlasComponents/sapiViews/features/connectivity/connectivityBrowser/exampleConnectivity.stories.ts
@@ -0,0 +1,138 @@
+import { CommonModule } from "@angular/common"
+import { HttpClientModule } from "@angular/common/http"
+import {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"
+import { SAPI, SapiAtlasModel, SapiParcellationModel } from "src/atlasComponents/sapi"
+import { getJba29Features, getHumanAtlas, getJba29 } from "src/atlasComponents/sapi/stories.base"
+import {SapiParcellationFeatureMatrixModel, SapiParcellationFeatureModel} from "src/atlasComponents/sapi/type"
+import { AngularMaterialModule } from "src/sharedModules"
+import {ConnectivityBrowserComponent} from "src/atlasComponents/sapiViews/features/connectivity";
+import {PARSE_TYPEDARRAY} from "src/atlasComponents/sapi/sapi.service";
+
+@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>
+
+ <div class="d-flex">Source: {{regionName}}</div>
+
+ <hbp-connectivity-matrix-row
+ #connectivityComponent
+ [region]="regionName"
+ [connections]="connectionsString"
+ showSource="true"
+ theme="light">
+ </hbp-connectivity-matrix-row>
+
+ `,
+ styles: [
+ `
+ :host
+ {
+ display: block;
+ max-width: 60rem;
+ max-height: 60rem;
+ }
+ `
+ ]
+})
+class ExampleConnectivityBrowserWrapper {
+ atlas: SapiAtlasModel
+ parcellation: SapiParcellationModel
+ features: SapiParcellationFeatureModel[] = []
+ featureId: string
+
+ regionName: string = 'Area TE 3 (STG) right'
+ private regionIndexInMatrix = -1
+ public connectionsString: string
+
+
+ constructor(private sapi: SAPI) {
+ }
+
+ fetchConnectivity() {
+ this.sapi.getParcellation(this.atlas["@id"], this.parcellation["@id"]).getFeatureInstance(this.featureId)
+ .then(ds=> {
+ const matrixData = ds as SapiParcellationFeatureMatrixModel
+ this.regionIndexInMatrix = (matrixData.columns as Array<string>).findIndex(md => md === this.regionName)
+ this.sapi.processNpArrayData<PARSE_TYPEDARRAY.RAW_ARRAY>(matrixData.matrix, PARSE_TYPEDARRAY.RAW_ARRAY)
+ .then(matrix => {
+ const areas = {}
+ matrix.rawArray[this.regionIndexInMatrix].forEach((value, i) => {
+ areas[matrixData.columns[i]] = value
+ })
+ this.connectionsString = JSON.stringify(areas)
+ })
+ })
+ }
+
+
+}
+
+export default {
+ component: ExampleConnectivityBrowserWrapper,
+ decorators: [
+ moduleMetadata({
+ imports: [
+ CommonModule,
+ AngularMaterialModule,
+ HttpClientModule,
+ BrowserAnimationsModule,
+ FormsModule,
+ ],
+ providers: [
+ SAPI
+ ],
+ schemas: [
+ CUSTOM_ELEMENTS_SCHEMA,
+ ],
+ declarations: [
+ ConnectivityBrowserComponent
+ ]
+ })
+ ],
+} as Meta
+
+const Template: Story<ExampleConnectivityBrowserWrapper> = (args: ExampleConnectivityBrowserWrapper, { 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
+]
diff --git a/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts b/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts
index a636e43ee84bc486a2c4e0915ec8dcdb536b44af..3b08109ef5e5a4eb69d1b9b56432799b0883b4b9 100644
--- a/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts
+++ b/src/atlasComponents/sapiViews/features/connectivity/hasConnectivity.directive.ts
@@ -1,13 +1,12 @@
-import {Directive, Inject, Input, OnDestroy} from "@angular/core";
+import {Directive, Input, OnDestroy} from "@angular/core";
import {from, of, Subscription} from "rxjs";
import {switchMap} from "rxjs/operators";
-import {BS_ENDPOINT} from "src/util/constants";
import {HttpClient} from "@angular/common/http";
import {PARSE_TYPEDARRAY, SAPI} from "src/atlasComponents/sapi/sapi.service";
import {SapiAtlasModel, SapiParcellationFeatureMatrixModel, SapiParcellationModel} from "src/atlasComponents/sapi/type";
@Directive({
- selector: '[has-connectivity]',
+ selector: '[sxplr-sapiviews-features-connectivity-check]',
exportAs: 'hasConnectivityDirective'
})
@@ -15,10 +14,10 @@ export class HasConnectivity implements OnDestroy {
private subscriptions: Subscription[] = []
- @Input('sxplr-sapiviews-features-connectivity-matrix-atlas')
+ @Input('sxplr-sapiviews-features-connectivity-check-atlas')
atlas: SapiAtlasModel
- @Input('sxplr-sapiviews-features-connectivity-matrix-parcellation')
+ @Input('sxplr-sapiviews-features-connectivity-check-parcellation')
parcellation: SapiParcellationModel
private _region: any
@@ -41,8 +40,7 @@ export class HasConnectivity implements OnDestroy {
public hasConnectivity = false
public connectivityNumber = 0
- constructor(@Inject(BS_ENDPOINT) private siibraApiUrl: string,
- private httpClient: HttpClient,
+ constructor(private httpClient: HttpClient,
private sapi: SAPI) {}
checkConnectivity() {
diff --git a/src/atlasComponents/sapiViews/features/module.ts b/src/atlasComponents/sapiViews/features/module.ts
index 654d96c9ca9143516658b3505c9916a83df26858..74f48d868a9048a0f6d73d1636fe338d49d02251 100644
--- a/src/atlasComponents/sapiViews/features/module.ts
+++ b/src/atlasComponents/sapiViews/features/module.ts
@@ -8,6 +8,7 @@ import { FeatureBadgeColourPipe } from "./featureBadgeColor.pipe"
import { FeatureBadgeNamePipe } from "./featureBadgeName.pipe"
import * as ieeg from "./ieeg"
import * as receptor from "./receptors"
+import {SapiViewsFeatureConnectivityModule} from "src/atlasComponents/sapiViews/features/connectivity";
const {
IEEGSessionCmp
@@ -21,6 +22,7 @@ const {
CommonModule,
ReceptorViewModule,
AngularMaterialModule,
+ SapiViewsFeatureConnectivityModule,
],
declarations: [
IEEGSessionCmp,
@@ -40,6 +42,7 @@ const {
IEEGSessionCmp,
FeatureEntryCmp,
SapiViewsFeaturesEntryListItem,
+ SapiViewsFeatureConnectivityModule,
]
})
-export class SapiViewsFeaturesModule{}
\ No newline at end of file
+export class SapiViewsFeaturesModule{}