nightingale-sequence-heatmap

Nightingale Sequence Heatmap component is used to generate a heatmap visualisation with residue bound data.

It uses heatmap-component to render the canvas heatmap.

Usage

The below example shows how to instantiate the component

<nightingale-sequence-heatmap
  id="id-for-nightingale-sequence-heatmap"
  heatmap-id="seq-heatmap"
  width="400"
  height="400"
  highlight-event="onmouseover"
  highlight-color="#EB3BFF66"
></nightingale-sequence-heatmap>

Please note that after instantiation the component needs to be initialized using the setHeatmapData function as seem below:

const xDomain = [1, 2, 3]; // 1-indexed residue ids
const yDomain = ["A", "B", "C"]; // categories (rows) to show on heatmap
const data = [
  // array of objects to be displayed, see more info on API Reference
  { xValue: 1, yValue: "A", score: 0.4 },
  { xValue: 1, yValue: "B", score: 32 },
  { xValue: 1, yValue: "C", score: 1.6 },
  { xValue: 2, yValue: "A", score: 2.5 },
  { xValue: 2, yValue: "B", score: 1 },
  { xValue: 2, yValue: "C", score: 7.6 },
  { xValue: 3, yValue: "A", score: 25.0 },
  { xValue: 3, yValue: "B", score: 10 },
  { xValue: 3, yValue: "C", score: 6 },
];
customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
  document
    .getElementById("id-for-nightingale-sequence-heatmap")
    .setHeatmapData(xDomain, yDomain, data); // initialization function
});

API Reference

Properties

setHeatmapData(xDomain: number[], yDomain: string[], data: Array)

The data array is of the HotmapData structure.

Please note that this format is flexible to additional properties for specific use cases ([key: string]: any;)

interface HotmapData {
  xValue: number; // residue index (columns)
  yValue: string; // category type (rows)
  score: number; // heatmap value converted to colors
  [key: string]: unknown; // additional properties for specific use cases such as custom tooltips
}

Heatmap-component Reference

Useful functions

setColor((d: HotmapData) => {})

Allows dynamic setting of heatmap color palette

customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
  const heatmapElement = document.getElementById("id-for-nightingale-sequence-heatmap");

  const colorScale = d3.scaleLinear(
    [0, 1], // score value domain
    ["#ffffff", "#00441b"], // color range to map values
  );
  heatmapElement.heatmapInstance.setColor((d) => colorScale(d.score));
});

setTooltip((d: HotmapData, x: number, y: number, xIndex: number, yIndex: number) => {})

Allows dynamic setting of tooltip HTML content

customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
  const heatmapElement = document.getElementById("id-for-nightingale-sequence-heatmap");

  heatmapElement.heatmapInstance.setTooltip((d, x, y, xIndex, yIndex) => {
    let returnHTML = `
      <b>Your are at</b> <br />

      x,y: <b>${d.xValue},${d.yValue}</b><br />
      score: <b>${d.score}</b>`;
    return returnHTML;
  });
});