All Vitessce components should consist of at least two React components: an outer "subscriber" component and an inner "plain" component.
By convention, we add the suffix
Subscriber to the name of the subscriber component.
The subscriber component carries out several functions:
- the subscriber component may get and set values from the coordination space with the
- the subscriber component should render the
<TitleInfo />component as a parent of its "plain" component.
- the subscriber component may load data from files specified in the view config with React hook functions.
The nodes of the React subtree for a component called
Genes should ultimately look like:
A full example of a subscriber component can be found here.
The plain component may take data and callback functions as props from its parent subscriber function, and should use its props to render a visualization or controller component. The plain component should not use the
useCoordination hook or any of the
use___Data hook functions.
A full example of a plain component can be found here.
In order for a component to access or change values in the coordination space, the mapping from components to coordination types must be defined here.
For each component, a subset of coordination types may be specified. This helps to avoid unnecessary component re-rendering events (i.e. we know that the heatmap does not depend on the
spatialZoom coordination type, so we omit this from the list of coordination types used by the heatmap component).
Once the component has been developed, add a key for the component in the component registry here. This key is the string that will be used to specify the component in the
component property of the layout array in JSON view configurations.