event-matrix v0.0.12
Event Matrix
Event Matrix is an instrument for the visual representation of multidimensional data, inspired by the earlier project OncoGrid. Initially developed to meet the needs of bioinformaticians, it helps in demonstrating the relationships between genes, donors, and mutations in the genome. It's also well-suited for displaying any three-dimensional (and potentially four-dimensional) data matrices.
Installation & Usage
Install dependencies:
npm install event-matrix
Import
EventMatrix
in your project:import EventMatrix from 'event-matrix';
Set up options:
const eventMatrix = new EventMatrix({ element: '#event-matrix', // HTML ID for mounting the component columns, // Columns of your data grid rows, // Rows of your data grid entries, // Entries/events that occur in a specific cell width: 1000, // Table width }); eventMatrix.setGridLines(this.showGridLines); eventMatrix.render();
Options
Option | Default value | Example | Description |
---|---|---|---|
element | - | "#event-matrix" | HTML selector for mounting the component |
columns | [] | { "id": "12" } | Column data |
rows | [] | { "id": "34" } | Row data |
entries | [] | { "id": "56", "value": "good", "rowId": "34", "columnId": "12" } | "Events" or "Entries" - data defined by the intersection of a row and a column |
columnFields | [] | { "id": "1234", "fieldName": "age", "name": "User age" } | Fields describing column data. This block is located below the table |
rowFields | [] | { "id": "1234", "fieldName": "age", "name": "User age" } | Fields describing row data. This block is located to the right of the table |
rowsAppearanceFunc | () => { color: "black", opacity: 1 } | (val) => { color: (val.name === "red" ? "#FF0000" : "#00FF00"), opacity: .5 } | Function that determines the cell color and opacity in the lower description block |
columnsAppearanceFunc | () => { color: "black", opacity: 1 } | (val) => { color: (val.name === "red" ? "#FF0000" : "#00FF00"), opacity: .5 } | Function that determines the cell color and opacity in the right description block |
cellAppearanceFunc | () => { color: "black", opacity: 1 } | (val) => { color: (val.name === "red" ? "#FF0000" : "#00FF00"), opacity: .5 } | Function that determines the cell color and opacity in the main grid |
fieldHeight | 10 | 20 | Row height in the description block |
width | 500 | 1000 | Width of the main table |
fieldLegendLabel | undefined | "" | HTML icon next to the name of the parameter group in the description block |
margin | {top: 30, right: 100, bottom: 15, left: 80} | {top: 0, right: 0, bottom: 0, left: 0} | Margins around the component |
Events
Event | Params | Description |
---|---|---|
grid:cell:hover | target: HTMLElement,entryId: string | Hovered over a table cell |
grid:cell:click | target: HTMLElement,entryId: string | Clicked on a table cell |
grid:out | - | Moved cursor away from the table |
grid:label:hover | target: HTMLElement, rowId: string | Hovered over a row label |
grid:label:click | target: HTMLElement, rowId: string | Clicked on a row label |
grid:crosshair:hover | target: HTMLElement, columnId: string, rowId: string | Hovered over a table cell in zoom mode |
grid:crosshair:out | - | Moved cursor away from the table in zoom mode |
grid:selection:started | target: HTMLElement, x: number, y: number | Started selecting cells in zoom mode; x , y - coordinates of the selection start |
grid:selection:finished | target: HTMLElement, x: number, y: number | Finished selecting cells in zoom mode; x , y - coordinates of the selection end |
histogram:hover | target: HTMLElement, domainId: string, type: "rows"/"columns" | Hovered over a histogram column; domainId - id of a row or column, depending on the type of histogram |
histogram:click | target: HTMLElement, domainId: string, type: "rows"/"columns" | Clicked on a histogram column; domainId - id of a row or column, depending on the type of histogram |
histogram:out | - | Moved cursor away from the histogram |
description:legend:hover | target: HTMLElement, group: string | Hovered over an icon in the description block; group - the name of the group |
description:legend:out | - | Moved cursor away from an icon in the description block |
description:cell:hover | target: HTMLElement, domainId: string, type: "rows"/"columns", field: string | Hovered over a cell in the description block; domainId - id of a row or column, field - name of field |
description:cell:click | target: HTMLElement, domainId: string, type: "rows"/"columns", field: string | Clicked on a cell in the description block; domainId - id of a row or column, field - name of field |
description:cell:out | - | Moved cursor away from the description block |
Migration from OncoGrid
If you previously used OncoGrid, you might want to switch to this newer version. Note that there have been changes in parameter, function, and event names.
- Update options:
genes
→rows
donors
→columns
observations
→entries
donorTracks
→columnFields
geneTracks
→rowFields
donorOpacityFunc
+donorFillFunc
→columnsAppearanceFunc
geneOpacityFunc
+geneFillFunc
→rowsAppearanceFunc
colorMap
(Map) →cellAppearanceFunc
(Function)trackLegendLabel
→fieldLegendLabel
trackHeight
→fieldHeight
- Update the structure of observations:
Before:
{ "geneId": "1234", "donorId": "5678" }
After:
{ "rowId": "1234", "columnId": "5678" }
- Update events:
histogramMouseOver
→histogram:hover
histogramClick
→histogram:click
gridMouseOver
→grid:cell:hover
gridClick
→grid:cell:click
trackLegendMouseOver
→description:legend:hover
trackMouseOver
→description:cell:hover
trackClick
→description:cell:click
- As the component update is still in progress, please feel free to create issues and provide feedback.
Development
- Install Node ~18. Using NVM is recommended.
Install dependencies:
npm install
Contribution guidelines
The project uses pre-commit.com hooks. Run brew install pre-commit && pre-commit install
for automatic configuration.