0.0.12 • Published 3 months ago

event-matrix v0.0.12

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

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

  1. Install dependencies:

    npm install event-matrix
  2. Import EventMatrix in your project:

    import EventMatrix from 'event-matrix';
  3. 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

OptionDefault valueExampleDescription
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
fieldHeight1020Row height in the description block
width5001000Width of the main table
fieldLegendLabelundefined""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

EventParamsDescription
grid:cell:hovertarget: HTMLElement,entryId: stringHovered over a table cell
grid:cell:clicktarget: HTMLElement,entryId: stringClicked on a table cell
grid:out-Moved cursor away from the table
grid:label:hovertarget: HTMLElement, rowId: stringHovered over a row label
grid:label:clicktarget: HTMLElement, rowId: stringClicked on a row label
grid:crosshair:hovertarget: HTMLElement, columnId: string, rowId: stringHovered over a table cell in zoom mode
grid:crosshair:out-Moved cursor away from the table in zoom mode
grid:selection:startedtarget: HTMLElement, x: number, y: numberStarted selecting cells in zoom mode; x, y - coordinates of the selection start
grid:selection:finishedtarget: HTMLElement, x: number, y: numberFinished selecting cells in zoom mode; x, y - coordinates of the selection end
histogram:hovertarget: 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:clicktarget: 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:hovertarget: HTMLElement, group: stringHovered 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:hovertarget: HTMLElement, domainId: string, type: "rows"/"columns", field: stringHovered over a cell in the description block; domainId - id of a row or column, field - name of field
description:cell:clicktarget: HTMLElement, domainId: string, type: "rows"/"columns", field: stringClicked 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.

  1. Update options:
  • genesrows
  • donorscolumns
  • observationsentries
  • donorTrackscolumnFields
  • geneTracksrowFields
  • donorOpacityFunc + donorFillFunccolumnsAppearanceFunc
  • geneOpacityFunc + geneFillFuncrowsAppearanceFunc
  • colorMap (Map) → cellAppearanceFunc (Function)
  • trackLegendLabelfieldLegendLabel
  • trackHeightfieldHeight
  1. Update the structure of observations:
  • Before:

    {
      "geneId": "1234",
      "donorId": "5678"
    }
  • After:

    {
      "rowId": "1234",
      "columnId": "5678"
    }
  1. Update events:
  • histogramMouseOverhistogram:hover
  • histogramClickhistogram:click
  • gridMouseOvergrid:cell:hover
  • gridClickgrid:cell:click
  • trackLegendMouseOverdescription:legend:hover
  • trackMouseOverdescription:cell:hover
  • trackClickdescription:cell:click
  1. As the component update is still in progress, please feel free to create issues and provide feedback.

Development

  1. Install Node ~18. Using NVM is recommended.
  2. Install dependencies:

    npm install

Contribution guidelines

The project uses pre-commit.com hooks. Run brew install pre-commit && pre-commit install for automatic configuration.

0.0.11

3 months ago

0.0.12

3 months ago

0.0.10

3 months ago

0.0.9

3 months ago

0.0.8

3 months ago

0.0.7

3 months ago

0.0.6

3 months ago

0.0.5

3 months ago

0.0.4

3 months ago

0.0.3

3 months ago

0.0.2

3 months ago

0.0.1

3 months ago