event-matrix v0.1.3

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
     grid: {
       appearance: this.getCellAppearance,
       width: 1000,
       minCellHeight: 15,
       minCellWidth: 30,
     },
     description: {
       bottom: {
         fields: donorFields,
         appearance: this.getColumnsAppearance,
         fieldHeight: 15,
       },
       side: {
         fields: geneFields,
         appearance: this.getRowsAppearance,
         fieldHeight: 15,
       },
     },
     histogram: {
       top: {
         label: 'Mutation freq.',
       },
       side: {
         label: 'Mutation freq.',
       },
     },
   });
   eventMatrix.setGridLines(this.showGridLines);
   eventMatrix.render();

Options

Events

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:

• genes → rows
• donors → columns
• observations → entries
• donorTracks → columnFields
• geneTracks → rowFields
• donorOpacityFunc + donorFillFunc → description.bottom.appearance
• geneOpacityFunc + geneFillFunc → description.side.appearance
• colorMap (Map) → grid.appearance (Function)
• trackLegendLabel → fieldLegendLabel
• trackHeight → fieldHeight

1. Update the structure of observations:

• Before:

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

• After:

  {
    "rowId": "1234",
    "columnId": "5678"
  }

1. 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

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.