diff --git a/src/components/dropdown/dropdown.component.ts b/src/components/dropdown/dropdown.component.ts
index b083c422a10e3895df87642aa9f80832431d7623..b591d22df432612f72e7ccba9ae0d8d0ffd5c4e8 100644
--- a/src/components/dropdown/dropdown.component.ts
+++ b/src/components/dropdown/dropdown.component.ts
@@ -1,6 +1,6 @@
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, HostListener, ViewChild, ElementRef } from "@angular/core";
import { dropdownAnimation } from "./dropdown.animation";
-import { HasExtraButtons, ExraBtnClickEvent } from '../radiolist/radiolist.component'
+import { HasExtraButtons, ExraBtnClickEvent, ExtraButton } from '../radiolist/radiolist.component'
@Component({
selector : 'dropdown-component',
@@ -16,6 +16,9 @@ import { HasExtraButtons, ExraBtnClickEvent } from '../radiolist/radiolist.compo
export class DropdownComponent{
+ @Input() activeDisplayBtns: ExtraButton[] = []
+ @Output() activeDisplayBtnClicked: EventEmitter<{extraBtn: ExtraButton, event: MouseEvent}> = new EventEmitter()
+
@Input() inputArray : HasExtraButtons[] = []
@Input() selectedItem : any | null = null
@Input() checkSelected: (selectedItem:any, item:any) => boolean = (si,i) => si === i
@@ -38,4 +41,11 @@ export class DropdownComponent{
else
this.openState = false;
}
+
+ handleActiveDisplayBtnClick(btn: ExtraButton, event: MouseEvent){
+ this.activeDisplayBtnClicked.emit({
+ extraBtn: btn,
+ event
+ })
+ }
}
\ No newline at end of file
diff --git a/src/components/dropdown/dropdown.template.html b/src/components/dropdown/dropdown.template.html
index 7476c7408c1f340d1e10ecfa4c984af1bacc0f4e..1ab4afbdaa75c513a92f359885308b5e441b77c4 100644
--- a/src/components/dropdown/dropdown.template.html
+++ b/src/components/dropdown/dropdown.template.html
@@ -1,12 +1,28 @@
<!-- TODO remove dependency on ismobile -->
-<span
- class="btn btn-default dropdownTitle"
- [innerHTML]="activeDisplay(selectedItem)"
- [hoverable]="{translateY:-2}"
- #dropdownToggle
- dropdownToggle
- [ngClass]="openState ? 'dropdownTitleOpen' : 'dropdownTitle'">
-</span>
+<div class="d-flex flex-column">
+ <div class="d-flex">
+
+ <span
+ class="btn btn-default dropdownTitle flex-grow-1 m-auto"
+ [innerHTML]="activeDisplay(selectedItem)"
+ [hoverable]="{translateY:-2}"
+ #dropdownToggle
+ dropdownToggle
+ [ngClass]="openState ? 'dropdownTitleOpen' : 'dropdownTitle'">
+ </span>
+
+ <span
+ *ngFor="let btn of activeDisplayBtns"
+ class="btn btn-default"
+ (click)="handleActiveDisplayBtnClick(btn, $event)"
+ [hoverable]="{translateY:-1}"
+ dropdownToggle>
+ <div class="d-flex align-items-center">
+ <small [ngClass]="btn.faIcon"></small>
+ </div>
+ </span>
+ </div>
+</div>
<!-- needed to ensure dropdown width matches -->
<ul class="m-0 h-0 overflow-hidden">
diff --git a/src/components/radiolist/radiolist.component.ts b/src/components/radiolist/radiolist.component.ts
index f1d3558baa125f695941b3a6153ce50945def293..e8e25b8daa1176d62a17a055d082a0b5a24139d0 100644
--- a/src/components/radiolist/radiolist.component.ts
+++ b/src/components/radiolist/radiolist.component.ts
@@ -42,7 +42,7 @@ export class RadioList{
}
}
-interface ExtraButton{
+export interface ExtraButton{
name: string,
faIcon: string
class?: string
diff --git a/src/components/radiolist/radiolist.template.html b/src/components/radiolist/radiolist.template.html
index d9b7730a761a8073f387af13165462bbb88ce45f..d60939d5579e10c99a9518a7cf12c8db16e26f38 100644
--- a/src/components/radiolist/radiolist.template.html
+++ b/src/components/radiolist/radiolist.template.html
@@ -8,13 +8,13 @@
class="d-flex justify-content-between"
[ngClass]="checkSelected(selectedItem, input) ? 'selected' : 'notselected'"
role="menuitem"
- (click)="itemSelected.emit({previous: selectedItem, current: input})">
+ (click)="itemSelected.emit({previous: selectedItem, current: input})"
+ [matTooltip]="input.tooltipText">
<span class="dropdown-item-1 textSpan"
#DropDownText
[innerHTML]="listDisplay(input)"
- [ngClass]="checkSelected(selectedItem, input) ? 'font-weight-bold' : ''"
- [matTooltip]="overflowText(DropDownText)? DropDownText.innerText: ''">
+ [ngClass]="checkSelected(selectedItem, input) ? 'font-weight-bold' : ''">
</span>
<ng-container *ngIf="input.extraButtons as extraButtons">
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index f21fd1d70d3865cb60a3555d2789183b46a4aadb..d780236c080f653df3db2846abf3e6ad34afdd16 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -342,7 +342,8 @@ markdown-dom pre code
opacity: 0.5;
}
-[darktheme="true"] .card
+.card
{
background:none;
+ border:none;
}
\ No newline at end of file
diff --git a/src/res/ext/bigbrain.json b/src/res/ext/bigbrain.json
index e0d7fa074009c70a22aa086556cae70e47ca5201..0ba32ab3a596d121bf90dade32178ec496f0c554 100644
--- a/src/res/ext/bigbrain.json
+++ b/src/res/ext/bigbrain.json
@@ -1 +1,587 @@
-{"name":"Big Brain (Histology)","type":"template","species":"Human","useTheme":"light","nehubaId":" grey value: ","nehubaConfigURL":"nehubaConfig/bigbrainNehubaConfig","parcellations":[{"name":"Grey/White matter","type":"parcellation","ngData":null,"ngId":" tissue type: ","regions":[{"name":"Grey matter","labelIndex":100,"rgb":[200,200,200],"children":[]},{"name":"White matter","labelIndex":200,"rgb":[255,255,255],"children":[]}]},{"name":"Cytoarchitectonic Maps","properties":{"description":"This dataset contains cytoarchitectonic maps of brain regions in the BigBrain space [Amunts et al. 2013]. The mappings were created using the semi-automatic method presented in Schleicher et al. 1999, based on coronal histological sections on 1 micron resolution. Mappings are available on approximately every 100th section for each region. They were then transformed to the sections of the 3D reconstructed BigBrain space using the transformations used in Amunts et al. 2013, which were provided by Claude Lepage (McGill). Only a few cytoarchitectonic maps in the Big Brain are currently **fully mapped**, based on a workflow that automatically fills in missing sections based on expert annotations. Other 3D maps are available in a preliminary version, in which the expert annotations in the Big Brain space were simply **interpolated**."},"regions":[{"name":"telencephalon","children":[{"name":"cerebral cortex","children":[{"name":"temporal lobe","children":[{"name":"Heschl's gyrus","children":[{"name":"Area TE 1.0 (HESCHL)","ngId":"interpolated","status":"interpolated","labelIndex":4,"rgb":[0,146,63],"children":[],"position":[4363384,836825,4887117]},{"name":"Area TE 1.1 (HESCHL)","ngId":"interpolated","status":"interpolated","labelIndex":5,"rgb":[132,194,37],"children":[],"position":[-11860944,-3841071,6062770]},{"name":"Area TE 1.2 (HESCHL)","ngId":"interpolated","status":"interpolated","labelIndex":6,"rgb":[117,197,240],"children":[],"position":[19474750,7932494,3511322]}]},{"name":"superior temporal gyrus","children":[{"name":"Area TE 3 (STG)","ngId":"interpolated","status":"interpolated","labelIndex":7,"rgb":[231,120,23],"children":[],"position":[3479937,2702958,3819372]}]},{"name":"superior temporal sulcus","children":[{"name":"Area STS1 (STS)","ngId":"interpolated","status":"interpolated","labelIndex":24,"children":[],"position":[-3185950,3919067,-8346900]},{"name":"Area STS2 (STS)","ngId":"interpolated","status":"interpolated","labelIndex":25,"children":[],"position":[8584703,6170348,-11790982]}]}]},{"name":"frontal lobe","children":[{"name":"precentral gyrus","children":[{"name":"Area 6d1 (PreCG)","ngId":"interpolated","status":"interpolated","labelIndex":1,"children":[],"position":[-10496194,13643679,42286812]},{"name":"Area 6d2 (PreCG)","ngId":"interpolated","status":"interpolated","labelIndex":2,"children":[],"position":[-9255504,27432072,43445689]},{"name":"Area 6ma (preSMA, mesial SFG)","ngId":"interpolated","status":"interpolated","labelIndex":22,"children":[],"position":[-9349145,27783957,38734627]},{"name":"Area 6mp (SMA, mesial SFG)","ngId":"interpolated","status":"interpolated","labelIndex":23,"children":[],"position":[-11566856,15797100,42172031]}]},{"name":"superior frontal sulcus","children":[{"name":"Area 6d3 (SFS)","ngId":"interpolated","status":"interpolated","labelIndex":3,"children":[],"position":[-8973604,28973429,35691250]}]},{"name":"inferior frontal sulcus","children":[{"name":"Area ifj1 (IFS/PreCS)","ngId":"interpolated","status":"interpolated","labelIndex":9,"children":[],"position":[-7394436,33562602,19086364]},{"name":"Area ifj2 (IFS/PreCS)","ngId":"interpolated","status":"interpolated","labelIndex":10,"children":[],"position":[-26787581,30975651,16855869]},{"name":"Area ifs1 (IFS)","ngId":"interpolated","status":"interpolated","labelIndex":11,"children":[],"position":[-4044465,40212624,17596493]},{"name":"Area ifs2 (IFS)","ngId":"interpolated","status":"interpolated","labelIndex":12,"children":[],"position":[6807265,40114241,18114896]},{"name":"Area ifs3 (IFS)","ngId":"interpolated","status":"interpolated","labelIndex":13,"children":[],"position":[-2260366,37593844,19960703]},{"name":"Area ifs4 (IFS)","ngId":"interpolated","status":"interpolated","labelIndex":14,"children":[],"position":[-3440565,37895181,17378851]}]}]},{"name":"limbic lobe","children":[{"name":"hippocampal formation","children":[{"name":"Entorhinal Cortex","ngId":"interpolated","status":"interpolated","labelIndex":8,"rgb":[153,153,255],"children":[],"position":[4800238,8859989,-24872710]}]}]},{"name":"parietal lobe","children":[{"name":"intraparietal sulcus","children":[{"name":"Area hIP4 (IPS)","ngId":"interpolated","status":"interpolated","labelIndex":15,"children":[],"position":[-5671181,-44793673,21692004]},{"name":"Area hIP5 (IPS)","ngId":"interpolated","status":"interpolated","labelIndex":16,"children":[],"position":[-13546343,-38230309,26252296]},{"name":"Area hIP6 (IPS)","ngId":"interpolated","status":"interpolated","labelIndex":17,"children":[],"position":[-3723403,-33064127,32569712]},{"name":"Area hIP7 (IPS)","ngId":"interpolated","status":"interpolated","labelIndex":18,"children":[],"position":[-5344588,-43655931,24702722]}]},{"name":"parieto-occipital sulcus","children":[{"name":"Area hPO1 (POS)","ngId":"interpolated","status":"interpolated","labelIndex":21,"children":[],"position":[-4455614,-44097379,28855803]}]}]},{"name":"occipital lobe","children":[{"name":"occipital cortex","children":[{"name":"Area hOc1 (V1, 17, CalcS)","ngId":"v1","status":"fully mapped","labelIndex":1,"position":[3187941,-50436479,3430986],"rgb":[250,30,250],"children":[]},{"name":"Area hOc2 (V2, 18)","ngId":"v2","status":"fully mapped","labelIndex":1,"position":[311768,-54882875,4142912],"rgb":[155,100,250],"children":[]},{"name":"dorsal occipital cortex","children":[{"name":"Area hOc6 (POS)","ngId":"interpolated","status":"interpolated","labelIndex":20,"children":[],"position":[-4399437,-36706104,15113374]}]}]}]}]}]}]},{"name":"BigBrain Cortical Layers Segmentation","ngId":"cortical layers","properties":{"description":"The cerebral isocortex has six cytoarchitectonic layers that vary depending on cortical area and local morphology. This datasets provides a 3D segmentation of all cortical and laminar surfaces in the BigBrain, a high-resolution, 3D histological model of the human brain. The segmentation has been computed automatically based on histological intensities along 3D cortical profiles which were sampled between the pial and white matter throughout the dataset. These cortical profiles were segmented into layers using a convolutional neural network. Training profiles were generated from examples of manually segmented layers on cortical regions from 2D histological sections of the BigBrain. From the segmented intensity profiles, surface meshes and voxel masks of all six cortical layers in the space of the Big Brain have been computed.","publications":[{"doi":"https://doi.org/10.1101/580597","citation":"Konrad Wagstyl, Stéphanie Larocque, Guillem Cucurull, Claude Lepage, Joseph Paul Cohen, Sebastian Bludau, Nicola Palomero-Gallagher, Thomas Funck, Hannah Spitzer, Timo Dicksheid, Paul C Fletcher, Adriana Romero, Karl Zilles, Katrin Amunts, Yoshua Bengio, Alan C. Evans (2019) Automated segmentation of cortical layers in BigBrain reveals divergent cortical and laminar thickness gradients in sensory and motor cortices. bioRxiv 580597; doi: https://doi.org/10.1101/580597"}]},"regions":[{"name":"telencephalon","children":[{"name":"cortical layer 1","labelIndex":1,"rgb":[128,128,0],"children":[]},{"name":"cortical layer 2","labelIndex":2,"rgb":[250,190,190],"children":[]},{"name":"cortical layer 3","labelIndex":3,"rgb":[255,215,180],"children":[]},{"name":"cortical layer 4","labelIndex":4,"rgb":[255,250,200],"children":[]},{"name":"cortical layer 5","labelIndex":5,"rgb":[0,128,128],"children":[]},{"name":"cortical layer 6","labelIndex":6,"rgb":[230,190,255],"children":[]},{"name":"non-cortical structures","labelIndex":7,"rgb":[255,255,255],"children":[]}]}]}],"properties":{"name":"Big Brain (Histology)","description":"A microscopic resolution 3D model of a complete human brain, based on a 3D reconstruction from 7404 digitized histological brain sections (Amunts, Evans et al., Science 2013). The BigBrain model provides a highly detailed anatomical reference space which resolves individual cortical layers and large cell bodies. Maps of cytoarchitectonic areas (Amunts et al.) and cortical layers (Wagstyl et al.) are available.","publications":[{"doi":"https://doi.org/10.1126/science.1235381","citation":"K. Amunts, A. Evans et al.: BigBrain: An Ultrahigh-Resolution 3D Human Brain Model. Science 2013"},{"doi":"http://bigbrain.loris.ca","citation":"http://bigbrain.loris.ca"}]}}
\ No newline at end of file
+{
+ "name": "Big Brain (Histology)",
+ "type": "template",
+ "species": "Human",
+ "useTheme": "light",
+ "nehubaId": " grey value: ",
+ "nehubaConfigURL": "nehubaConfig/bigbrainNehubaConfig",
+ "parcellations": [
+ {
+ "name": "Grey/White matter",
+ "type": "parcellation",
+ "ngData": null,
+ "ngId": " tissue type: ",
+ "regions": [
+ {
+ "name": "Grey matter",
+ "labelIndex": 100,
+ "rgb": [
+ 200,
+ 200,
+ 200
+ ],
+ "children": []
+ },
+ {
+ "name": "White matter",
+ "labelIndex": 200,
+ "rgb": [
+ 255,
+ 255,
+ 255
+ ],
+ "children": []
+ }
+ ]
+ },
+ {
+ "name": "Cytoarchitectonic Maps",
+ "properties": {
+ "description": "This dataset contains cytoarchitectonic maps of brain regions in the BigBrain space [Amunts et al. 2013]. The mappings were created using the semi-automatic method presented in Schleicher et al. 1999, based on coronal histological sections on 1 micron resolution. Mappings are available on approximately every 100th section for each region. They were then transformed to the sections of the 3D reconstructed BigBrain space using the transformations used in Amunts et al. 2013, which were provided by Claude Lepage (McGill). Only a few cytoarchitectonic maps in the Big Brain are currently **fully mapped**, based on a workflow that automatically fills in missing sections based on expert annotations. Other 3D maps are available in a preliminary version, in which the expert annotations in the Big Brain space were simply **interpolated**."
+ },
+ "regions": [
+ {
+ "name": "telencephalon",
+ "children": [
+ {
+ "name": "cerebral cortex",
+ "children": [
+ {
+ "name": "temporal lobe",
+ "children": [
+ {
+ "name": "Heschl's gyrus",
+ "children": [
+ {
+ "name": "Area TE 1.0 (HESCHL)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 4,
+ "rgb": [
+ 0,
+ 146,
+ 63
+ ],
+ "children": [],
+ "position": [
+ 4363384,
+ 836825,
+ 4887117
+ ]
+ },
+ {
+ "name": "Area TE 1.1 (HESCHL)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 5,
+ "rgb": [
+ 132,
+ 194,
+ 37
+ ],
+ "children": [],
+ "position": [
+ -11860944,
+ -3841071,
+ 6062770
+ ]
+ },
+ {
+ "name": "Area TE 1.2 (HESCHL)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 6,
+ "rgb": [
+ 117,
+ 197,
+ 240
+ ],
+ "children": [],
+ "position": [
+ 19474750,
+ 7932494,
+ 3511322
+ ]
+ }
+ ]
+ },
+ {
+ "name": "superior temporal gyrus",
+ "children": [
+ {
+ "name": "Area TE 3 (STG)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 7,
+ "rgb": [
+ 231,
+ 120,
+ 23
+ ],
+ "children": [],
+ "position": [
+ 3479937,
+ 2702958,
+ 3819372
+ ]
+ }
+ ]
+ },
+ {
+ "name": "superior temporal sulcus",
+ "children": [
+ {
+ "name": "Area STS1 (STS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 24,
+ "children": [],
+ "position": [
+ -3185950,
+ 3919067,
+ -8346900
+ ]
+ },
+ {
+ "name": "Area STS2 (STS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 25,
+ "children": [],
+ "position": [
+ 8584703,
+ 6170348,
+ -11790982
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "frontal lobe",
+ "children": [
+ {
+ "name": "precentral gyrus",
+ "children": [
+ {
+ "name": "Area 6d1 (PreCG)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 1,
+ "children": [],
+ "position": [
+ -10496194,
+ 13643679,
+ 42286812
+ ]
+ },
+ {
+ "name": "Area 6d2 (PreCG)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 2,
+ "children": [],
+ "position": [
+ -9255504,
+ 27432072,
+ 43445689
+ ]
+ },
+ {
+ "name": "Area 6ma (preSMA, mesial SFG)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 22,
+ "children": [],
+ "position": [
+ -9349145,
+ 27783957,
+ 38734627
+ ]
+ },
+ {
+ "name": "Area 6mp (SMA, mesial SFG)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 23,
+ "children": [],
+ "position": [
+ -11566856,
+ 15797100,
+ 42172031
+ ]
+ }
+ ]
+ },
+ {
+ "name": "superior frontal sulcus",
+ "children": [
+ {
+ "name": "Area 6d3 (SFS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 3,
+ "children": [],
+ "position": [
+ -8973604,
+ 28973429,
+ 35691250
+ ]
+ }
+ ]
+ },
+ {
+ "name": "inferior frontal sulcus",
+ "children": [
+ {
+ "name": "Area ifj1 (IFS/PreCS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 9,
+ "children": [],
+ "position": [
+ -7394436,
+ 33562602,
+ 19086364
+ ]
+ },
+ {
+ "name": "Area ifj2 (IFS/PreCS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 10,
+ "children": [],
+ "position": [
+ -26787581,
+ 30975651,
+ 16855869
+ ]
+ },
+ {
+ "name": "Area ifs1 (IFS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 11,
+ "children": [],
+ "position": [
+ -4044465,
+ 40212624,
+ 17596493
+ ]
+ },
+ {
+ "name": "Area ifs2 (IFS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 12,
+ "children": [],
+ "position": [
+ 6807265,
+ 40114241,
+ 18114896
+ ]
+ },
+ {
+ "name": "Area ifs3 (IFS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 13,
+ "children": [],
+ "position": [
+ -2260366,
+ 37593844,
+ 19960703
+ ]
+ },
+ {
+ "name": "Area ifs4 (IFS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 14,
+ "children": [],
+ "position": [
+ -3440565,
+ 37895181,
+ 17378851
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "limbic lobe",
+ "children": [
+ {
+ "name": "hippocampal formation",
+ "children": [
+ {
+ "name": "Entorhinal Cortex",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 8,
+ "rgb": [
+ 153,
+ 153,
+ 255
+ ],
+ "children": [],
+ "position": [
+ 4800238,
+ 8859989,
+ -24872710
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "parietal lobe",
+ "children": [
+ {
+ "name": "intraparietal sulcus",
+ "children": [
+ {
+ "name": "Area hIP4 (IPS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 15,
+ "children": [],
+ "position": [
+ -5671181,
+ -44793673,
+ 21692004
+ ]
+ },
+ {
+ "name": "Area hIP5 (IPS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 16,
+ "children": [],
+ "position": [
+ -13546343,
+ -38230309,
+ 26252296
+ ]
+ },
+ {
+ "name": "Area hIP6 (IPS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 17,
+ "children": [],
+ "position": [
+ -3723403,
+ -33064127,
+ 32569712
+ ]
+ },
+ {
+ "name": "Area hIP7 (IPS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 18,
+ "children": [],
+ "position": [
+ -5344588,
+ -43655931,
+ 24702722
+ ]
+ }
+ ]
+ },
+ {
+ "name": "parieto-occipital sulcus",
+ "children": [
+ {
+ "name": "Area hPO1 (POS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 21,
+ "children": [],
+ "position": [
+ -4455614,
+ -44097379,
+ 28855803
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "occipital lobe",
+ "children": [
+ {
+ "name": "occipital cortex",
+ "children": [
+ {
+ "name": "Area hOc1 (V1, 17, CalcS)",
+ "ngId": "v1",
+ "status": "fully mapped",
+ "labelIndex": 1,
+ "position": [
+ 3187941,
+ -50436479,
+ 3430986
+ ],
+ "rgb": [
+ 250,
+ 30,
+ 250
+ ],
+ "children": []
+ },
+ {
+ "name": "Area hOc2 (V2, 18)",
+ "ngId": "v2",
+ "status": "fully mapped",
+ "labelIndex": 1,
+ "position": [
+ 311768,
+ -54882875,
+ 4142912
+ ],
+ "rgb": [
+ 155,
+ 100,
+ 250
+ ],
+ "children": []
+ },
+ {
+ "name": "dorsal occipital cortex",
+ "children": [
+ {
+ "name": "Area hOc6 (POS)",
+ "ngId": "interpolated",
+ "status": "interpolated",
+ "labelIndex": 20,
+ "children": [],
+ "position": [
+ -4399437,
+ -36706104,
+ 15113374
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "name": "BigBrain Cortical Layers Segmentation",
+ "ngId": "cortical layers",
+ "properties": {
+ "description": "The cerebral isocortex has six cytoarchitectonic layers that vary depending on cortical area and local morphology. This datasets provides a 3D segmentation of all cortical and laminar surfaces in the BigBrain, a high-resolution, 3D histological model of the human brain. The segmentation has been computed automatically based on histological intensities along 3D cortical profiles which were sampled between the pial and white matter throughout the dataset. These cortical profiles were segmented into layers using a convolutional neural network. Training profiles were generated from examples of manually segmented layers on cortical regions from 2D histological sections of the BigBrain. From the segmented intensity profiles, surface meshes and voxel masks of all six cortical layers in the space of the Big Brain have been computed.",
+ "publications": [
+ {
+ "doi": "https://doi.org/10.1101/580597",
+ "cite": "Konrad Wagstyl, Stéphanie Larocque, Guillem Cucurull, Claude Lepage, Joseph Paul Cohen, Sebastian Bludau, Nicola Palomero-Gallagher, Thomas Funck, Hannah Spitzer, Timo Dicksheid, Paul C Fletcher, Adriana Romero, Karl Zilles, Katrin Amunts, Yoshua Bengio, Alan C. Evans (2019) Automated segmentation of cortical layers in BigBrain reveals divergent cortical and laminar thickness gradients in sensory and motor cortices. bioRxiv 580597; doi: https://doi.org/10.1101/580597"
+ }
+ ]
+ },
+ "regions": [
+ {
+ "name": "telencephalon",
+ "children": [
+ {
+ "name": "cortical layer 1",
+ "labelIndex": 1,
+ "rgb": [
+ 128,
+ 128,
+ 0
+ ],
+ "children": []
+ },
+ {
+ "name": "cortical layer 2",
+ "labelIndex": 2,
+ "rgb": [
+ 250,
+ 190,
+ 190
+ ],
+ "children": []
+ },
+ {
+ "name": "cortical layer 3",
+ "labelIndex": 3,
+ "rgb": [
+ 255,
+ 215,
+ 180
+ ],
+ "children": []
+ },
+ {
+ "name": "cortical layer 4",
+ "labelIndex": 4,
+ "rgb": [
+ 255,
+ 250,
+ 200
+ ],
+ "children": []
+ },
+ {
+ "name": "cortical layer 5",
+ "labelIndex": 5,
+ "rgb": [
+ 0,
+ 128,
+ 128
+ ],
+ "children": []
+ },
+ {
+ "name": "cortical layer 6",
+ "labelIndex": 6,
+ "rgb": [
+ 230,
+ 190,
+ 255
+ ],
+ "children": []
+ },
+ {
+ "name": "non-cortical structures",
+ "labelIndex": 7,
+ "rgb": [
+ 255,
+ 255,
+ 255
+ ],
+ "children": []
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "properties": {
+ "name": "Big Brain (Histology)",
+ "description": "A microscopic resolution 3D model of a complete human brain, based on a 3D reconstruction from 7404 digitized histological brain sections (Amunts, Evans et al., Science 2013). The BigBrain model provides a highly detailed anatomical reference space which resolves individual cortical layers and large cell bodies. Maps of cytoarchitectonic areas (Amunts et al.) and cortical layers (Wagstyl et al.) are available.",
+ "publications": [
+ {
+ "doi": "10.1126/science.1235381",
+ "cite": "K. Amunts, A. Evans et al.: BigBrain: An Ultrahigh-Resolution 3D Human Brain Model. Science 2013"
+ },
+ {
+ "doi": "http://bigbrain.loris.ca",
+ "cite": "http://bigbrain.loris.ca"
+ }
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/ui/databrowserModule/databrowser.module.ts b/src/ui/databrowserModule/databrowser.module.ts
index 9868e3f2c55553d316e56b6f2dabbae9b0c83087..d272cf211d8f2b0648453c12ddccd88d7f094ce1 100644
--- a/src/ui/databrowserModule/databrowser.module.ts
+++ b/src/ui/databrowserModule/databrowser.module.ts
@@ -24,6 +24,7 @@ import { AggregateArrayIntoRootPipe } from "./util/aggregateArrayIntoRoot.pipe";
import { KgSingleDatasetService } from "./kgSingleDatasetService.service"
import { SingleDatasetView } from './singleDataset/singleDataset.component'
import { AngularMaterialModule } from 'src/ui/sharedModules/angularMaterial.module'
+import { DoiParserPipe } from "src/util/pipes/doiPipe.pipe";
@NgModule({
imports:[
@@ -54,7 +55,8 @@ import { AngularMaterialModule } from 'src/ui/sharedModules/angularMaterial.modu
CopyPropertyPipe,
FilterDataEntriesbyMethods,
FilterDataEntriesByRegion,
- AggregateArrayIntoRootPipe
+ AggregateArrayIntoRootPipe,
+ DoiParserPipe
],
exports:[
DataBrowser,
diff --git a/src/ui/databrowserModule/singleDataset/singleDataset.component.ts b/src/ui/databrowserModule/singleDataset/singleDataset.component.ts
index 20f58c6675a3476797a7cd26efafe5ca63ff6561..df2e0e71bf37141fa63e464f9b71b012c58486f2 100644
--- a/src/ui/databrowserModule/singleDataset/singleDataset.component.ts
+++ b/src/ui/databrowserModule/singleDataset/singleDataset.component.ts
@@ -93,6 +93,12 @@ export class SingleDatasetView implements OnInit {
: null
}
+ get showFooter(){
+ return (this.appendedKgReferences && this.appendedKgReferences.length > 0)
+ || (this.publications && this.publications.length > 0)
+ || (this.files && this.files.length > 0)
+ }
+
downloadZipFromKg() {
this.downloadInProgress = true
const { kgId, kgSchema } = this
diff --git a/src/ui/databrowserModule/singleDataset/singleDataset.template.html b/src/ui/databrowserModule/singleDataset/singleDataset.template.html
index 8467234746854c190a08a2d9925176be62de1ba8..5cf855846d9765f0b290745161896274129c3ec9 100644
--- a/src/ui/databrowserModule/singleDataset/singleDataset.template.html
+++ b/src/ui/databrowserModule/singleDataset/singleDataset.template.html
@@ -11,14 +11,17 @@
{{ description }}
</p>
- <hr>
+ <hr *ngIf="showFooter">
<!-- publications -->
- <a
- *ngFor="let publication of publications"
- [href]="'https://doi.org/' + publication.doi"
- target="_blank">
- {{ publication.cite }}
- </a>
+ <div class="d-flex flex-column">
+
+ <a
+ *ngFor="let publication of publications"
+ [href]="publication.doi | doiParserPipe"
+ target="_blank">
+ {{ publication.cite }}
+ </a>
+ </div>
<!-- footer -->
<div class="d-flex justify-content-end">
@@ -39,6 +42,8 @@
<!-- download -->
<a
+ (click)="downloadZipFromKg()"
+ [disabled]="downloadInProgress"
class="m-2"
*ngIf="files.length > 0"
mat-raised-button
@@ -46,7 +51,7 @@
<span>
Download Zip
</span>
- <span *ngIf="false">({{ numOfFiles }} files ~ {{ totalFileByteSize / 1e6 | number: '.1-2' }} MB)</span>
+ <span>({{ numOfFiles }} files ~ {{ totalFileByteSize / 1e6 | number: '.1-2' }} MB)</span>
<i class="fas" [ngClass]="!downloadInProgress? 'fa-download' :'fa-spinner fa-pulse'"></i>
</a>
</div>
diff --git a/src/ui/signinBanner/signinBanner.components.ts b/src/ui/signinBanner/signinBanner.components.ts
index ae687ba8d2d8811279faa9585f34a4bef174ad5c..592e3101d2f6bc897fdee15efdabbefd948011c5 100644
--- a/src/ui/signinBanner/signinBanner.components.ts
+++ b/src/ui/signinBanner/signinBanner.components.ts
@@ -3,14 +3,16 @@ import { AtlasViewerConstantsServices } from "src/atlasViewer/atlasViewer.consta
import { AuthService, User } from "src/services/auth.service";
import { Store, select } from "@ngrx/store";
import { ViewerConfiguration } from "src/services/state/viewerConfig.store";
-import { Subscription, Observable, merge, Subject, interval } from "rxjs";
+import { Subscription, Observable, merge, Subject, combineLatest } from "rxjs";
import { safeFilter, isDefined, NEWVIEWER, SELECT_REGIONS, SELECT_PARCELLATION, CHANGE_NAVIGATION } from "src/services/stateStore.service";
-import { map, filter, distinctUntilChanged, bufferTime, delay, share, tap } from "rxjs/operators";
+import { map, filter, distinctUntilChanged, bufferTime, delay, share, tap, withLatestFrom } from "rxjs/operators";
import { regionFlattener } from "src/util/regionFlattener";
import { ToastService } from "src/services/toastService.service";
import { getSchemaIdFromName } from "src/util/pipes/templateParcellationDecoration.pipe";
-const compareParcellation = (o, n) => o.name === n.name
+const compareParcellation = (o, n) => !o || !n
+ ? false
+ : o.name === n.name
@Component({
selector: 'signin-banner',
@@ -27,12 +29,14 @@ export class SigninBanner implements OnInit, OnDestroy{
public compareParcellation = compareParcellation
private subscriptions: Subscription[] = []
+
public loadedTemplates$: Observable<any[]>
+
public selectedTemplate$: Observable<any>
public selectedParcellation$: Observable<any>
+
public selectedRegions$: Observable<any[]>
private selectedRegions: any[] = []
- selectedTemplate: any
@Input() darktheme: boolean
@ViewChild('publicationTemplate', {read:TemplateRef}) publicationTemplate: TemplateRef<any>
@@ -74,28 +78,19 @@ export class SigninBanner implements OnInit, OnDestroy{
distinctUntilChanged((arr1, arr2) => arr1.length === arr2.length && (arr1 as any[]).every((item, index) => item.name === arr2[index].name))
)
- this.focusedDatasets$ = merge(
- this.selectedTemplate$.pipe(
- map(v => [v])
- ),
- this.selectedParcellation$.pipe(
- distinctUntilChanged((o, n) => o.name === n.name),
- map(p => {
- if (!p.originDatasets || !p.originDatasets.map) return [p]
- return p.originDatasets.map(od => {
- return {
- ...p,
- ...od
- }
- })
- })
+ this.focusedDatasets$ = this.userFocusedDataset$.pipe(
+ filter(v => !!v),
+ withLatestFrom(
+ combineLatest(this.selectedTemplate$, this.selectedParcellation$)
),
- this.userFocusedDataset$.pipe(
- filter(v => !!v)
- )
).pipe(
+ map(([userFocusedDataset, [selectedTemplate, selectedParcellation]]) => {
+ const { type, ...rest } = userFocusedDataset
+ if (type === 'template') return { ...selectedTemplate, ...rest}
+ if (type === 'parcellation') return { ...selectedParcellation, ...rest }
+ return { ...rest }
+ }),
bufferTime(100),
- map(arrOfArr => arrOfArr.reduce((acc, curr) => acc.concat(curr), [])),
filter(arr => arr.length > 0),
/**
* merge properties field with the root level
@@ -119,9 +114,6 @@ export class SigninBanner implements OnInit, OnDestroy{
this.selectedRegions = regions
})
)
- this.subscriptions.push(
- this.selectedTemplate$.subscribe(template => this.selectedTemplate = template)
- )
this.subscriptions.push(
this.focusedDatasets$.subscribe(() => {
@@ -239,6 +231,22 @@ export class SigninBanner implements OnInit, OnDestroy{
})
}
+ handleActiveDisplayBtnClicked(event, type: 'parcellation' | 'template'){
+ const {
+ extraBtn,
+ event: extraBtnClickEvent
+ } = event
+
+ const { name } = extraBtn
+ const { kgSchema, kgId } = getSchemaIdFromName(name)
+
+ this.userFocusedDataset$.next({
+ kgSchema,
+ kgId,
+ type
+ })
+ }
+
handleExtraBtnClicked(event, toastType: 'parcellation' | 'template'){
const {
extraBtn,
@@ -249,11 +257,11 @@ export class SigninBanner implements OnInit, OnDestroy{
const { name } = extraBtn
const { kgSchema, kgId } = getSchemaIdFromName(name)
- this.userFocusedDataset$.next([{
+ this.userFocusedDataset$.next({
...inputItem,
kgSchema,
kgId
- }])
+ })
extraBtnClickEvent.stopPropagation()
}
diff --git a/src/ui/signinBanner/signinBanner.template.html b/src/ui/signinBanner/signinBanner.template.html
index 66e68ffef875a91c176bbecaeae45b00c2e3acb5..ff3936c96b5fef1109ba26ff253d5bd2ef54008a 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -4,11 +4,14 @@
<dropdown-component
(itemSelected)="changeTemplate($event)"
+ [checkSelected]="compareParcellation"
[activeDisplay]="displayActiveTemplate"
[selectedItem]="selectedTemplate$ | async"
- [inputArray]="loadedTemplates$ | async | filterNull | templateParcellationsDecorationPipe"
+ [inputArray]="loadedTemplates$ | async | filterNull | appendTooltipTextPipe"
[ngClass]="isMobile ? flexItemIsMobileClass : flexItemIsDesktopClass"
(extraBtnClicked)="handleExtraBtnClicked($event, 'template')"
+ [activeDisplayBtns]="(selectedTemplate$ | async | templateParcellationsDecorationPipe)?.extraButtons"
+ (activeDisplayBtnClicked)="handleActiveDisplayBtnClicked($event, 'template')"
(listItemButtonClicked)="showInfoToast($event, 'template')">
</dropdown-component>
@@ -19,9 +22,11 @@
[checkSelected]="compareParcellation"
[activeDisplay]="displayActiveParcellation"
[selectedItem]="selectedParcellation"
- [inputArray]="selectedTemplate.parcellations | templateParcellationsDecorationPipe"
+ [inputArray]="selectedTemplate.parcellations | appendTooltipTextPipe"
[ngClass]="isMobile ? flexItemIsMobileClass : flexItemIsDesktopClass"
(extraBtnClicked)="handleExtraBtnClicked($event, 'parcellation')"
+ [activeDisplayBtns]="(selectedParcellation | templateParcellationsDecorationPipe)?.extraButtons"
+ (activeDisplayBtnClicked)="handleActiveDisplayBtnClicked($event, 'parcellation')"
(listItemButtonClicked)="showInfoToast($event, 'parcellation')">
</dropdown-component>
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
index 21f85b35e4777115981aa10a249c18bfc6f2cb97..a7c08e93c200ab6454d88efa8a618687ca049dec 100644
--- a/src/ui/ui.module.ts
+++ b/src/ui/ui.module.ts
@@ -47,6 +47,7 @@ import { CookieAgreement } from "./cookieAgreement/cookieAgreement.component";
import { KGToS } from "./kgtos/kgtos.component";
import { AngularMaterialModule } from 'src/ui/sharedModules/angularMaterial.module'
import { TemplateParcellationsDecorationPipe } from "src/util/pipes/templateParcellationDecoration.pipe";
+import { AppendtooltipTextPipe } from "src/util/pipes/appendTooltipText.pipe";
@NgModule({
@@ -97,6 +98,7 @@ import { TemplateParcellationsDecorationPipe } from "src/util/pipes/templateParc
FilterNgLayer,
FilterNameBySearch,
TemplateParcellationsDecorationPipe,
+ AppendtooltipTextPipe,
/* directive */
DownloadDirective,
diff --git a/src/util/pipes/appendTooltipText.pipe.ts b/src/util/pipes/appendTooltipText.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3295876c677f28e34bc92035ffa8824852aebee2
--- /dev/null
+++ b/src/util/pipes/appendTooltipText.pipe.ts
@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+/**
+ * TODO
+ * merge this pipe into cpProp pipe
+ */
+
+@Pipe({
+ name: 'appendTooltipTextPipe'
+})
+
+export class AppendtooltipTextPipe implements PipeTransform{
+ public transform(array: any[]){
+ return array.map(item => {
+ const { properties = {} } = item
+ const { description: tooltipText } = properties
+ return {
+ ...item,
+ tooltipText
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/src/util/pipes/doiPipe.pipe.ts b/src/util/pipes/doiPipe.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..353b8ea659908a78a4c9fe23aa5605b4584889c0
--- /dev/null
+++ b/src/util/pipes/doiPipe.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+ name: 'doiParserPipe'
+})
+
+export class DoiParserPipe implements PipeTransform{
+ public transform(s: string, prefix: string = 'https://doi.org/'){
+ const prependFlag = /^https?:\.\./.test(s)
+ return `${prependFlag ? prefix : ''}${s}`
+ }
+}
\ No newline at end of file
diff --git a/src/util/pipes/templateParcellationDecoration.pipe.ts b/src/util/pipes/templateParcellationDecoration.pipe.ts
index cb199ed5bfeeb46645bcc23b7140177b87e05729..6e64082b3a9cebf1df7681b5b3d7491bb3f453a4 100644
--- a/src/util/pipes/templateParcellationDecoration.pipe.ts
+++ b/src/util/pipes/templateParcellationDecoration.pipe.ts
@@ -15,29 +15,36 @@ const notEmptyArray = (arr) => !!arr && arr instanceof Array && arr.length > 0
})
export class TemplateParcellationsDecorationPipe implements PipeTransform{
- public transform(parcellations:any[]){
- return parcellations.map(p => {
- const { description, properties = {}, publications } = p
- const { description:pDescriptions, publications: pPublications } = properties
- const defaultOriginaldataset = notNullNotEmptyString(description)
- || notNullNotEmptyString(pDescriptions)
- || notEmptyArray(publications)
- || notEmptyArray(pPublications)
- ? [{}]
- : []
+ private decorateSingle(p:any){
- const { originDatasets = defaultOriginaldataset } = p
- return {
- ...p,
- extraButtons: originDatasets
- .map(({ kgSchema, kgId }) => {
- return {
- name: getNameFromSchemaId({ kgSchema, kgId }),
- faIcon: 'fas fa-info-circle'
- }
- })
- }
- })
+ const { description, properties = {}, publications } = p
+ const { description:pDescriptions, publications: pPublications } = properties
+ const defaultOriginaldataset = notNullNotEmptyString(description)
+ || notNullNotEmptyString(pDescriptions)
+ || notEmptyArray(publications)
+ || notEmptyArray(pPublications)
+ ? [{}]
+ : []
+
+ const { originDatasets = defaultOriginaldataset } = p
+ return {
+ ...p,
+ extraButtons: originDatasets
+ .map(({ kgSchema, kgId }) => {
+ return {
+ name: getNameFromSchemaId({ kgSchema, kgId }),
+ faIcon: 'fas fa-info'
+ }
+ })
+ }
+ }
+ private decorateArray (array:any[]) {
+ return array.map(this.decorateSingle)
+ }
+ public transform(item:any){
+ if (!item) return item
+ if(item instanceof Array) return this.decorateArray(item)
+ else return this.decorateSingle(item)
}
}