hbp-connectivity-component v0.6.6

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:

#API

hbp-connectivity-matrix-row

Properties

Events

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

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