Your First Component¶
This page is intended for developers of Crystal Toolkit who want to add
MPComponent to support interactive viewing of an
such as crystal structures, phase diagrams, etc.
The basic steps are to:
Sub-class MPComponent. Recognize that the component comes with a
dcc.Storewhich contains the
MSONrepresentation of whatever the component is intended to render.
Implement its master
layout()method to return the “default” layout for your component. You may also add additional
..._layout()methods for optional layouts; for example, the
legend_layout()to return the legend for the structure or molecule being displayed.
_sub_layoutsmethod, which returns a dictionary with values corresponding to different parts of your component, is available for book-keeping if your component is complex.
For interactivity, implement the
generate_callbacks(app, cache)method. Inside this method you can define callbacks to be associated with the component. At minimum, make sure that if the component’s main
dcc.Storeis updated with a new object (for example, a new crystal structure is set for
StructureMoleculeComponent) that the state of the component is also updated appropriately.
Try to keep the total number of callbacks to a minimum, and the size of the data stores small wherever possible, to improve performance of your component. Using multiple-output callbacks, and judicious use of
return no_updatecan help with this, especially if checking for the initial callback firing on page load.
If you have a long-running callback, or one that may be long-running, make sure to wrap it in a
dcc.Loadingcomponent to improve the user experience.
At this point, the component should be working. It needs a simple example app
to be added to
crystal_toolkit.apps.examples and a corresponding test that
the example app runs, and finally a short documentation page in
copy from the existing examples as necessary.