# Class: BaseDataLayer

## LocusZoom_DataLayers~BaseDataLayer(parent)

A data layer is an abstract class representing a data set and its graphical representation within a panel

## Constructor

#### new BaseDataLayer(parent)

##### Parameters:

Name | Type | Attributes | Default | Description
--- | --- | --- | --- | ---
`layout.id` | string | <optional> | '' | An identifier string that must be unique across all layers within the same panel
`layout.type` | string | <optional> | '' | The type of data layer. This parameter is used in layouts to specify which class (from the registry) is created; it is also used in CSS class names.
`layout.tag` | string | <optional> | 'custom_data_type' | Tags have no functional purpose, but they can be used as a semantic label for what is being displayed in this element. This makes it easy to write custom code like "find every data layer that shows association scatter plots, anywhere": even if the IDs are different, the tag can be the same. Most built-in data layers will contain a tag that describes, in human-readable terms, what kind of data is being shown. (see: LayoutRegistry.mutate_attrs)
`layout.id_field` | string | <optional> |  | The datum field used for unique element IDs when addressing DOM elements, mouse events, etc. This should be unique to the specified datum, and persistent across re-renders (because it is used to identify where to draw tooltips, eg, if the plot is dragged or zoomed). If no single field uniquely identifies all items, a template expression can be used to create an ID from multiple fields instead. (it is your job to assure that all of the expected fields are present in every element)
`layout.namespace` | object |  |  | A set of key value pairs representing how to map the local usage of data ("assoc") to the globally unique name for something defined in LocusZoom.DataSources. Namespaces allow a single layout to be reused to plot many tracks of the same type: "given some form of association data, plot it". These pairs take the form of { local_name: global_name }. (and all data layer layouts provide a default) In order to reuse a layout with a new provider of data- like plotting two association studies stacked together- only the namespace section of the layout needs to be overridden. Eg, `LocusZoom.Layouts.get('data_layers', 'association_pvalues', { namespace: { assoc: 'assoc_study_2' }})`
`layout.data_operations` | Array.<module:LocusZoom_DataLayers~DataOperation> |  |  | A set of data operations that will be performed on the data returned from the data adapters specified in `namespace`. (see: module:LocusZoom_DataFunctions)
`layout.filters` | Array.<module:LocusZoom_DataLayers~FilterOption> | <optional> |  | If present, restricts the list of data elements to be displayed. Typically, filters hide elements, but arrange the layer so as to leave the space those elements would have occupied. The exact details vary from one layer to the next. See the Interactivity Tutorial for details.
`layout.match` | object | <optional> |  | An object describing how to connect this data layer to other data layers in the same plot. Specifies keys `send` and `receive` containing the names of fields with data to be matched; `operator` specifies the name of a MatchFunction to use. If a datum matches the broadcast value, it will be marked with the special field `lz_is_match=true`, which can be used in any scalable layout directive to control how the item is rendered.
`layout.x_axis.decoupled` | boolean | <optional> | false | If true, the data in this layer will not influence the x-extent of the panel.
`layout.x_axis.extent` | 'state' | null | <optional> |  | If provided, the region plot x-extent will be determined from `plot.state` rather than from the range of the data. This is the most common way of setting x-extent, as it is useful for drawing a set of panels to reflect a particular genomic region.
`layout.x_axis.floor` | number | <optional> |  | The low end of the x-extent, which overrides any actual data range, min_extent, or buffer options.
`layout.x_axis.ceiling` | number | <optional> |  | The high end of the x-extent, which overrides any actual data range, min_extent, or buffer options.
`layout.x_axis.min_extent` | Array.<Number> | <optional> |  | The smallest possible range [min, max] of the x-axis. If the actual values lie outside the extent, the actual data takes precedence.
`layout.x_axis.field` | number | <optional> |  | The datum field to look at when determining data extent along the x-axis.
`layout.x_axis.lower_buffer` | number | <optional> |  | Amount to expand (pad) the lower end of an axis as a proportion of the extent of the data.
`layout.x_axis.upper_buffer` | number | <optional> |  | Amount to expand (pad) the higher end of an axis as a proportion of the extent of the data.
`layout.y_axis.decoupled` | boolean | <optional> | false | If true, the data in this layer will not influence the y-extent of the panel.
`layout.y_axis.axis` | object | <optional> | 1 | Which y axis to use for this data layer (left=1, right=2)
`layout.y_axis.floor` | number | <optional> |  | The low end of the y-extent, which overrides any actual data range, min_extent, or buffer options.
`layout.y_axis.ceiling` | number | <optional> |  | The high end of the y-extent, which overrides any actual data range, min_extent, or buffer options.
`layout.y_axis.min_extent` | Array.<Number> | <optional> |  | The smallest possible range [min, max] of the y-axis. Actual lower or higher data values will take precedence.
`layout.y_axis.field` | number | <optional> |  | The datum field to look at when determining data extent along the y-axis.
`layout.y_axis.lower_buffer` | number | <optional> |  | Amount to expand (pad) the lower end of an axis as a proportion of the extent of the data.
`layout.y_axis.upper_buffer` | number | <optional> |  | Amount to expand (pad) the higher end of an axis as a proportion of the extent of the data.
`layout.tooltip.show` | object | <optional> |  | Define when to show a tooltip in terms of interaction states, eg, `{ or: ['highlighted', 'selected'] }`
`layout.tooltip.hide` | object | <optional> |  | Define when to hide a tooltip in terms of interaction states, eg, `{ and: ['unhighlighted', 'unselected'] }`
`layout.tooltip.closable` | boolean | <optional> |  | Whether a tool tip should render a "close" button in the upper right corner.
`layout.tooltip.html` | string | <optional> |  | HTML template to render inside the tool tip. The template syntax uses curly braces to allow simple expressions: eg `{{sourcename:fieldname}} to insert a field value from the datum associated with the tooltip/element. Conditional tags are supported using the format:` {{#if sourcename:fieldname|transforms_can_be_used_too}}render text here{{#else}}Optional else branch{{/if}}`.
`layout.tooltip_positioning` | 'horizontal' | 'vertical' | 'top' | 'bottom' | 'left' | 'right' | <optional> | 'horizontal' | Where to draw the tooltip relative to the datum. Typically tooltip positions are centered around the midpoint of the data element, subject to overflow off the edge of the plot.
`layout.behaviors` | object | <optional> |  | LocusZoom data layers support the binding of mouse events to one or more layout-definable behaviors. Some examples of behaviors include highlighting an element on mouseover, or linking to a dynamic URL on click, etc.
`layout.legend` | Array.<module:LocusZoom_DataLayers~LegendItem> | <optional> |  | Tick marks found in the panel legend
`layout.behaviors.onclick` | Array.<module:LocusZoom_DataLayers~behavior> | <optional> |  |
`layout.behaviors.onctrlclick` | Array.<module:LocusZoom_DataLayers~behavior> | <optional> |  |
`layout.behaviors.onctrlshiftclick` | Array.<module:LocusZoom_DataLayers~behavior> | <optional> |  |
`layout.behaviors.onshiftclick` | Array.<module:LocusZoom_DataLayers~behavior> | <optional> |  |
`layout.behaviors.onmouseover` | Array.<module:LocusZoom_DataLayers~behavior> | <optional> |  |
`layout.behaviors.onmouseout` | Array.<module:LocusZoom_DataLayers~behavior> | <optional> |  |
`parent` | Panel | null |  |  | Where this layout is used

Source:
  - components/data_layer/base.js, line 122

### Members

#### (protected, static, constant) default_layout

A basic description of keys expected in all data layer layouts. Not intended to be directly used or modified by an end user.

Source:
  - components/data_layer/base.js, line 101

#### (protected) data :Array

The data retrieved from a region request. This field is useful for debugging, but will be overridden on re-render; do not modify it directly. The point annotation cache can be used to preserve markings after re-render.

##### Type:

- Array

Source:
  - components/data_layer/base.js, line 304

#### id :String

The unique identifier for this layer. Should be unique within this panel.

##### Type:

- String

Source:
  - components/data_layer/base.js, line 208

#### layout :Object

The current layout configuration for this data layer. This reflects any resizing or dynamically generated config options produced during rendering. Direct layout mutations are a powerful way to dynamically modify the plot in response to user interactions, but require a deep knowledge of LZ internals to use effectively.

##### Type:

- Object

Source:
  - components/data_layer/base.js, line 245

#### (protected) parent :Panel

##### Type:

- Panel

Source:
  - components/data_layer/base.js, line 221

#### (protected) parent_plot :Plot

##### Type:

- Plot

Source:
  - components/data_layer/base.js, line 232

### Methods

#### (protected) _drawTooltip(tooltip, position, x_min, x_max, y_min, y_max)

Draw a tooltip on the data layer pointed at the specified coordinates, in the specified orientation. Tooltip will be drawn on the edge of the major axis, and centered along the minor axis- see diagram. v

> o < ^

##### Parameters:

Name | Type | Description
--- | --- | ---
`tooltip` | Object | The object representing all data for the tooltip to be drawn
`position` | 'vertical' | 'horizontal' | 'top' | 'bottom' | 'left' | 'right' | Where to draw the tooltip relative to the data
`x_min` | Number | The min x-coordinate for the bounding box of the data element
`x_max` | Number | The max x-coordinate for the bounding box of the data element
`y_min` | Number | The min y-coordinate for the bounding box of the data element
`y_max` | Number | The max y-coordinate for the bounding box of the data element

Source:
  - components/data_layer/base.js, line 763

#### (protected) _getDataExtent(data, axis_config) → {Array}

Implementation hook for fetching the min and max values of available data. Used to determine axis range, if no other explicit axis settings override. Useful for data layers where the data extent depends on more than one field. (eg confidence intervals in a forest plot)

##### Parameters:

Name | Type | Description
--- | --- | ---
`data` |  |
`axis_config` |  | The configuration object for the specified axis.

Source:
  - components/data_layer/base.js, line 430

##### Returns:

[min, max] without any padding applied

Type
  Array

#### (protected) _getTooltipPosition(tooltip) → {Object}

Determine the coordinates for where to point the tooltip at. Typically, this is the center of a datum element (eg, the middle of a scatter plot point). Also provide an offset if the tooltip should not be at that center (most elements are not single points, eg a scatter plot point has a radius and a gene is a rectangle). The default implementation is quite naive: it places the tooltip at the origin for that layer. Individual layers should override this method to position relative to the chosen data element or mouse event.

##### Parameters:

Name | Type | Description
--- | --- | ---
`tooltip` | Object | A tooltip object (including attribute tooltip.data)

Source:
  - components/data_layer/base.js, line 735

##### Returns:

as {x_min, x_max, y_min, y_max} in px, representing bounding box of a rectangle around the data pt Note that these pixels are in the SVG coordinate system

Type
  Object

#### (protected) applyCustomDataMethods() → {BaseDataLayer}

Hook that allows custom datalayers to apply additional methods and properties to data elements as needed. Most data layers will never need to use this.

Source:
  - components/data_layer/base.js, line 577

##### Returns:

Type
  BaseDataLayer

#### (protected) applyDataMethods() → {BaseDataLayer}

Basic method to apply arbitrary methods and properties to data elements. This is called on all data immediately after being fetched. (requires reMap, not just re-render)

Allowing a data element to access its parent enables interactive functionality, such as tooltips that modify the parent plot. This is also used for system-derived fields like "matching" behavior".

Source:
  - components/data_layer/base.js, line 519

##### Returns:

Type
  BaseDataLayer

#### (protected) getElementAnnotation(element, keyopt) → {*}

Get "annotation" metadata associated with a particular point.

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`element` | String | Object |  | The data object or ID string for the element
`key` | String | <optional> | The name of the annotation to track. If omitted, returns all annotations for this element as an object.

Source:
  - components/data_layer/base.js, line 913

##### Returns:

Type
  *

#### (protected) getElementId(element) → {String}

Fetch the fully qualified ID to be associated with a specific visual element, based on the data to which that element is bound. In general this element ID will be unique, allowing it to be addressed directly via selectors.

The ID should also be stable across re-renders, so that tooltips and highlights may be reapplied to that element as we switch regions or drag left/right. If the element is not unique along a single field (eg PheWAS data), a unique ID can be generated via a template expression like `{{phewas:pheno}}-{{phewas:trait_label}}`

##### Parameters:

Name | Type | Description
--- | --- | ---
`element` | Object | The data associated with a particular element

Source:
  - components/data_layer/base.js, line 450

##### Returns:

Type
  String

#### (protected) getTicks(dimension, configopt) → {Array.<Object>}

Allow this data layer to tell the panel what axis ticks it thinks it will require. The panel may choose whether to use some, all, or none of these when rendering, either alone or in conjunction with other data layers.

This method is a stub and should be overridden in data layers that need to specify custom behavior.

##### Parameters:

Name | Type | Attributes | Description
--- | --- | --- | ---
`dimension` | 'x' | 'y1' | 'y2' |  |
`config` | Object | <optional> | Additional parameters for the panel to specify how it wants ticks to be drawn. The names and meanings of these parameters may vary between different data layers.

Source:
  - components/data_layer/base.js, line 717

##### Returns:

An array of objects: each object must have an 'x' attribute to position the tick. Other supported object keys: * text: string to render for a given tick * style: d3-compatible CSS style object * transform: SVG transform attribute string * color: string or LocusZoom scalable parameter object

Type
  Array.<Object>

#### moveBack() → {BaseDataLayer}

Move a data layer back relative to others by z-index

Source:
  - components/data_layer/base.js, line 358

##### Returns:

Type
  BaseDataLayer

#### moveForward() → {BaseDataLayer}

Move a data layer forward relative to others by z-index

Source:
  - components/data_layer/base.js, line 342

##### Returns:

Type
  BaseDataLayer

#### mutateLayout()

A list of operations that should be run when the layout is mutated Typically, these are things done once when a layout is first specified, that would not automatically update when the layout was changed.

Source:
  - components/data_layer/base.js, line 408

#### render()

Source:
  - components/data_layer/base.js, line 333

#### setElementAnnotation(element, key, value)

Set an "annotation": a piece of additional information about a point that is preserved across re-render, or as the user pans and zooms near this region.

Annotations can be referenced as a named pseudo-field in any filters and scalable parameters. (template support may be added in the future) Sample use case: user clicks a tooltip to "label this specific point". (or change any other display property)

##### Parameters:

Name | Type | Description
--- | --- | ---
`element` | String | Object | The data object or ID string for the element
`key` | String | The name of the annotation to track
`value` | * | The value of the marked field

Source:
  - components/data_layer/base.js, line 382

#### setFilter(func)

Select a filter function to be applied to the data. DEPRECATED: Please use the LocusZoom.MatchFunctions registry and reference via declarative filters.

##### Parameters:

Name | Type | Description
--- | --- | ---
`func` |  |

Deprecated:
  - Yes
Source:
  - components/data_layer/base.js, line 397