hbp-connectivity-component

HBP Connectivity browser component

HBP connectivity component is a component built with StencilJS to display and export a connectivity matrix in a 3D brain volume viewer. There are 2 core components:

1. hbp-connectivity-matrix-row - visualizes the connection strengths from a single source region as a bar chart.
2. export-connectivity-diagram - exports the connectivity matrix. This functionality is automatically imported in "hbp-connectivity-matrix-row". To enable, set "show-export="true"" in "hbp-connectivity-matrix-row"

Example use

<hbp-connectivity-matrix-row -> Create component
        region="region name" -> Set source region name 
        theme="light" -> Set theme (There are 2 light and dark themes. default theme is dark.)
        loadurl="https://example.com" -> Set source url of connectivity data (It will hardcoded in component soon)
        show-export="true" -> Show export area
        show-source="true" -> Show source component
        show-title="true" -> Show title
        show-toolbar="true"> -> Show toolbar ("log10", "show all results"...)  
        customDatasetSelector="true" -> Enable custom dataset and show dataset details
        customHeight="100px" -> Set custom height of component
        customWidth="100px" -> Set custom width of component        
        datasetUrl="https://example.com" -> Set dataset url to get details about dataset"             
        showDatasetName="true" -> Show Dataset name
        show-description="true" -> Show Dataset description
    <div slot="header"></div> -> Send HTML to set custom header
    <div slot="connectedRegionMenu"></div> -> Sent HTML to set any content under connected area after user clicks
</hbp-connectivity-matrix-row>

Importing the component in your application

Angular 2+ application

1. Install npm package -

   npm install hbp-connectivity-component --save
   

2. Import "CUSTOM_ELEMENTS_SCHEMA" from angular core to main module of application

   import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
   

3. Add "CUSTOM_ELEMENTS_SCHEMA" in schemas in main module

   schemas: [CUSTOM_ELEMENTS_SCHEMA]
   

4. Import "defineCustomElements" from "hbp-connectivity-component/dist/loader" into main.ts file main.ts

   import {defineCustomElements} from 'hbp-connectivity-component/dist/loader'
   

5. Use "defineCustomElements" in main.ts file
   main.ts

   defineCustomElements(window) 
   

6. Done! component is available in application you can use it with tag:

   <hbp-connectivity-matrix-row></hbp-connectivity-matrix-row>
   

#API

hbp-connectivity-matrix-row

Properties

Property	Attribute	Description	Type	Default
customDatasetSelector	custom-dataset-selector	Show dataset info if dataset selector is enabled	string	''
customHeight	custom-height	Set custom height (Component will dynamically re-render on attribute change)	string	''
customWidth	custom-width	Set custom width (Component will dynamically re-render on attribute change)	string	''
datasetUrl	dataset-url	Set URL to get dataset info	string	''
loadurl	loadurl	Set URL to load connectivity data	string	''
region	region	Set source region of connectivity (Component will dynamically re-render on attribute change)	string	''
showDatasetName	show-dataset-name	Show dataset name (Set 'true' to enable)	string	''
showDescription	show-description	Show dataset description (Set 'true' to enable)	string	''
showExport	show-export	Show connectivity export panel (Set 'true' to enable)	string	''
showSource	show-source	Show source region name (Set 'true' to enable)	string	''
showTitle	show-title	Show title (Set 'true' to enable)	string	''
showToolbar	show-toolbar	Show toolbar (Set 'true' to enable) (toolbar contains checkbox to show logarithmic data and show all results on diagram)	string	''
theme	theme	Set theme ('dark' or 'light') (Component will dynamically re-render on attribute change)	string	''

Events

Event	Description	Type
collapsedMenuChanged	Event emits on connected area mouse click	CustomEvent<any>
connectivityDataReceived	Event emits when connectivity data will initialized	CustomEvent<any>
datasetDataReceived	Event emits when dataset information will initialized	CustomEvent<any>

Dependencies

Depends on

• export-connectivity-diagram

Graph

graph TD;
  hbp-connectivity-matrix-row --> export-connectivity-diagram
  style hbp-connectivity-matrix-row fill:#f9f,stroke:#333,stroke-width:4px

---

export-connectivity-diagram component

Properties

Property	Attribute	Description	Type
connectedAreas	connected-areas	Connected areas to export as csv	any
el	el	element to export as png	any
theme	theme	Set theme ('dark' or 'light')	string

Methods

downloadPng() => Promise<void>

Returns

Type: Promise<void>

getCSVData() => Promise<unknown>

Returns

Type: Promise<unknown>

Dependencies

Used by

• hbp-connectivity-matrix-row

Graph

graph TD;
  hbp-connectivity-matrix-row --> export-connectivity-diagram
  style export-connectivity-diagram fill:#f9f,stroke:#333,stroke-width:4px

---