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:

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:

(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:

id :String

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

Type:
  • String
Source:

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:

(protected) parent :Panel

Type:
Source:

(protected) parent_plot :Plot

Type:
Source:

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:

(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:
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:
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:
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:
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:
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:
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:
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:
Returns:
Type
BaseDataLayer

moveForward() → {BaseDataLayer}

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

Source:
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:

render()

Source:

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:

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: