https://github.com/fzj-inm1-bda/hbp-connectivity-component
https://github.com/fzj-inm1-bda/hbp-connectivity-component
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/fzj-inm1-bda/hbp-connectivity-component
- Owner: FZJ-INM1-BDA
- License: mit
- Created: 2019-12-18T16:48:59.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-31T12:59:23.000Z (7 months ago)
- Last Synced: 2025-06-10T19:50:56.034Z (4 months ago)
- Language: TypeScript
- Size: 308 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# HBP Connectivity browser component
HBP connectivity component is a component
*built with [StencilJS](https://stenciljs.com/)* 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
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
-> Send HTML to set custom header
-> Sent HTML to set any content under connected area after user clicks
## 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]
3. Import "defineCustomElements" from "hbp-connectivity-component/dist/loader" into main.ts file
main.ts
import {defineCustomElements} from 'hbp-connectivity-component/dist/loader'
4. Use "defineCustomElements" in main.ts file
main.ts
defineCustomElements(window)
5. Done! component is available in application you can use it with tag:
#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` |
| `connectivityDataReceived` | Event emits when connectivity data will initialized | `CustomEvent` |
| `datasetDataReceived` | Event emits when dataset information will initialized | `CustomEvent` |
### Dependencies
#### Depends on
- [export-connectivity-diagram](../export-connectivity-diagram)
#### Graph
```mermaid
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`
##### Returns
Type: `Promise`
#### `getCSVData() => Promise`
##### Returns
Type: `Promise`
### Dependencies
#### Used by
- [hbp-connectivity-matrix-row](../hbp-connectivity-matrix-row)
#### Graph
```mermaid
graph TD;
hbp-connectivity-matrix-row --> export-connectivity-diagram
style export-connectivity-diagram fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------