open-index/open-npm huggingface dataset:
npm package: @nightingale-elements/nightingale-filter
Description: Filter component
Latest version: 5.6.0

# nightingale-filter

[![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale--filter.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-filter)

A custom element to filter data

## Usage

```html
<nightingale-filter for="filtered-component-id"></nightingale-filter>
```

## API Reference

## Properties

#### `filters`: `Array`

The filter configuration

```js
[
  {
    name: "filter_name",
    type: {
      name: "group_name",
      text: "group_label"
    },
    options: {
      label: "filter_option_label",
      color: "#333"
    },
    filterData: item => {} // the filter function
  }
];
```

### Events

When an option is selected, a `change` event is emitted, with type `activefilters`. It contains an array of the selected filters, which contains callback function to apply to the data.
npm package: @nightingale-elements/nightingale-heatmap
Description: [![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-heatmap.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-heatmap)
Latest version: 5.6.0

# nightingale-heatmap

[![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-heatmap.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-heatmap)

Nightingale Heatmap component is used to generate a heatmap visualisation.

## Usage

The below example is using residues contacts data based on the distance.

```html
<nightingale-heatmap
  id="heatmap"
  width="400"
  height="400"
  bottom-color="black"
  top-color="white"
  margin-left="50"
  margin-bottom="50"
  symmetric
></nightingale-heatmap>
```

## API Reference

### Properties

#### `symmetric: boolean (default: false)`

It supports symmetric matrix.

#### `top-color: string (default: 'yellow')`

The heatmap can interpolate colors from the bottom value (`0.0`) to its top (`1.0`).
This attribute defines the color to paint the **top (`1.0`)** value.

It follows the web standard defined in https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

#### `bottom-color: string (default: "darkblue")`

The heatmap can interpolate colors from the bottom value (`0.0`) to its top (`1.0`).
This attribute defines the color to paint the **bottom (`0.0`)** value.

It follows the web standard defined in https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

#### `x-label: string (default: "Residue")`

Label to the legend in the X axix

#### `y-label: string (default: "Residue")`

Label to the legend in the X axix

### Properties

#### `data: Array`

The data array is of the HeatmapData structure.

```typescript
type HeatmapData = Array<
  [
    number, //   X coordinate starting on 1
    number, //   Y coordinate starting on 1
    number, //    Value in that position. Between 0 and 1
  ]
>;
```

For instance:

```javascript
[
  [1, 1, 0.2],
  [1, 2, 0.8],
  [2, 2, 0.5],
];
```

### Events

##### `change`

Is dispatched when hovering over a point in the heatmap.

The `detail` of the event is a `HeatmapPoint`:

```typescript
type HeatmapPoint = {
  xPoint: number;
  yPoint: number;
  value: number | null;
};
```

Usage example:

```js
heatmapElement.addEventListener("change", (evt) => {
  console.log(evt.detail);
});
```
npm package: @nightingale-elements/nightingale-linegraph-track
Description: Nightingale Line Graph
Latest version: 5.6.0

# nightingale-linegraph-track

[![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-linegraph-track.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-linegraph-track)

Nightingale line graph track component is used to display multiple line graphs (either linear or d3 curves).

## Usage

- Include the componet in your HTML:

  ```html
  <nightingale-linegraph-track
    id="track"
    width="600"
    length="5"
  ></nightingale-linegraph-track>
  ```

- Set the `data` in the component:

  ```javascript
  await customElements.whenDefined("nightingale-linegraph-track");
  const track = document.getElementById("track");
  if (track) {
    (track as any).data = tinyData;
  }
  ```

## API Reference

### Properties

#### `data: Array`

The data expects the following structure.

```javascript
{
    name: String,
    range:[min, max],
    color?: Line color,
        (color will be assigned if not provided. Use "none" for no line color)
    fill?: Create area plot using given fill color (default "none"),
    lineCurve?: 'curveLinear'(default)|'curveBasis'|'curveCardinal'|'curveStep'|'curveNatural',
        (More curves - https://github.com/d3/d3-shape/blob/v2.0.0/README.md#curves)
    values: [
        {
            position: Number,
            value: Number
        }
    ]
}
```

### Other attributes and parameters

This component inherits from `NightingaleElement`.

The component implements the following mixins: `withManager`, `withZoom`, `withResizable`, `withMargin`, `withPosition`, `withDimensions`, `withHighlight`
npm package: @nightingale-elements/nightingale-links
Description: [![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-links.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-links)
Latest version: 5.6.0

# nightingale-links

[![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-links.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-links)

A node-link representation to visualize points of interaction between bases in a sequence

## Usage

```html
<nightingale-links
  id="links"
  height="50"
  length="100"
  min-distance="3"
  min-probability="0.99"
></nightingale-links>
```

## API Reference

### Attributes

#### `min-distance: number (default: 0)`

It filters out the links between bases that are closer than the given minimum distance.

#### `min-probability: number (default: 0.7)`

It filters out the links that have less probability than the given one.

### Other attributes and parameters

The component implements the following mixins: `withManager`, `withMargin`, `withPosition`, `withDimensions`, `withHighlight`, and `withZoom`.
npm package: @nightingale-elements/nightingale-msa
Description: [![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-msa.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-msa)
Latest version: 5.6.0

# nightingale-msa

[![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-msa.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-msa)

Multiple Sequence Alignment viewer. This component is a stripped-out version of https://github.com/plotly/react-msa-viewer. This version follows the same principle of nightingale, is written in TypeScript using Lit elements with nightingale mixins. However all the optimizations to handle the canvas were taken from the original project above.

## Usage

```html
<nightingale-msa
  id="msa"
  height="200"
  width="600"
  color-scheme="clustal"
  label-width="200"
></nightingale-msa>
```

## API Reference

### Attributes

#### `color-scheme: string (default: "clustal2")`

Color Scheme to paint the bases in the alignment. Available options:
`aliphatic, aromatic, buried, buried_index, charged, cinema, clustal2, clustal, helix, helix_propensity, hydro, lesk, mae, negative, nucleotide, polar, positive, purine, purine_pyrimidine, serine_threonine, strand, strand_propensity, taylor, turn, turn_propensity, zappo,, conservation`

#### `label-width: number(default: 0)`

Width reserved to render the labels of the sequences. If the value is `0` the labels won't be rendered.

#### `tile-height: number (default: 20)`

Height of each base (AKA tile).

#### `active-label: string (default: "")`

Label to highlight as if selected

#### `conservation-sample-size: number (default: 20)`

One of the color-schemes is `conservation` this requires a precalculation that runs on an inline web worker. The conservation calculation can be sampled to just the first `n` sequences. Which is defined by this parameter.

#### `overlay-conservation: boolean(default: false)`

When this flag is enable the conservation data is used to modify the color of each base.

### Methods

#### `getColorMap()`

Return an object that contains the name of the current colorscheme in usage, and a map, that is a dictionary indicating the colorMapping used. For example the default scheme 'clustal' would return something like:

```javascript
{
 "name": "clustal2",
 "map": {
  "A": "#80a0f0",
  "R": "#f01505",
  "N": "#00ff00",
  "D": "#c048c0",
  "C": "#f08080",
  "Q": "#00ff00",
  "E": "#c048c0",
  "G": "#f09048",
  "H": "#15a4a4",
  "I": "#80a0f0",
  "L": "#80a0f0",
  "K": "#f01505",
  "M": "#80a0f0",
  "F": "#80a0f0",
  "P": "#ffff00",
  "S": "#00ff00",
  "T": "#00ff00",
  "W": "#80a0f0",
  "Y": "#15a4a4",
  "V": "#80a0f0",
  "B": "#fff",
  "X": "#fff",
  "Z": "#fff"
 }
}
```

### Other attributes and parameters

The component implements the following mixins: `withManager`, `withMargin`, `withPosition`, `withDimensions`, `withHighlight`, and `withZoom`.
npm package: @nightingale-elements/nightingale-overlay
Description: [![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-overlay.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-overlay)
Latest version: 5.6.0

[![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-overlay.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-overlay)

## &lt;nightingale-overlay&gt;

The `nightingale-overlay` component is used to create a layer over a component (specified by ID).
The layer will be visible while a `scroll` or `wheel` event is detected.

[Demo](https://ebi-webcomponents.github.io/nightingale/?path=/story/components-manager--manager)

## Usage

#### Basic

```html
<nightingale-saver for="element-id"> </nightingale-saver>
```

## API Reference

### Attributes

#### `for: string`

The Id of the component that the overlay will cover.

#### `label: string`

The text to appear in the middle of the overlay