dash_mp_components¶

Bases: Component

A JsonView component.

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
collapseStringsAfterLength (boolean | number; optional)
collapsed (boolean | number; optional)
defaultValue (dict; optional)
displayDataTypes (boolean; optional)
displayObjectSize (boolean; optional)
enableClipboard (boolean; optional)
groupArraysAfterLength (number; optional)
iconStyle (string; optional)
indentWidth (number; optional)
name (boolean | string; optional)
sortKeys (boolean; optional)
src (dict; optional)
theme (string; optional)
validationMessage (string; optional)

Bases: Component

A MatSidebar component. Material navigation bar

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
appId (string; optional):
This is a read-only prop that dash callback can subscribe to.
currentApp (string; optional):
The ID of the current selected app.
layout (a value equal to: ‘vertical’, ‘horizontal’; optional):
The layout of the sidebar.

Bases: Component

A CameraContextProvider component. Use this component to synchronize the camera of multiple

SimpleSceneComponent

Keyword arguments:

children (optional)
id (optional):
The ID used to identify this component in Dash callbacks.

Bases: Component

A CrystalToolkitAnimationScene component.

Keyword arguments:

children (optional):
First child will be rendered as the settings panel. Second child will be rendered as the bottom panel (legend).
id (optional):
The ID used to identify this component in Dash callbacks.
animation (optional):
Animation type.
axisView (optional):
Where is the axis displayed ( ‘NW’ / ‘NE’ / ‘SE’ / ‘SW’ / ‘HIDDEN’ ).
className (optional):
Class name that will wrap around the whole scene component. When enlarged, this class name is applied to the modal-content element.
currentCameraState (optional):
THIS PROP IS SET AUTOMATICALLY Object that maintains the current state of the camera. e.g. { position: {x: 0, y: 0, z: 0}, quarternion: {x: 0, y: 0, z: 0, w: 0}, zoom: 1, setByComponentId: “1”, following: True }.
customCameraState (optional):
Object for setting the scene to a custom camera state. When modified, the camera will update to new custom state. e.g. { position: {x: 0, y: 0, z: 0}, quarternion: {x: 0, y: 0, z: 0, w: 0}, (optional) zoom: 1 (optional) }.
data (optional):
Simple3DScene JSON, the easiest way to generate this is to use the Scene class in crystal_toolkit.core.scene and its to_json method.
debug (optional):
Display a debug view.
fileOptions (optional):
List of options to show in file download dropdown.
fileTimestamp (optional):
THIS PROP IS SET AUTOMATICALLY Date string that represents the time fileType was set. Use this prop in dash callbacks to trigger file downloads.
fileType (optional):
THIS PROP IS SET AUTOMATICALLY The last file type clicked in the file download menu.
imageData (optional):
THIS PROP IS SET AUTOMATICALLY Data string for the image generated on image button click.
imageDataTimestamp (optional):
THIS PROP IS SET AUTOMATICALLY Date string that represents the time imageData was set. Use this prop in dash callbacks to trigger downloads of imageData.
imageRequest (optional):
Set to trigger a screenshot or scene download. Must be an object with the following structure: { “filetype”: “png” // the image format (“png”, “dae”) } Passing this prop as an object ensures that new requests are triggered any time the prop is set.
imageType (optional):
File type to be downloaded as an image. Either png or dae.
inletPadding (optional):
Padding of the axis view.
inletSize (optional):
Size of the axis view.
sceneSize (optional):
Width / Height of the displayed component.
selectedObject (optional):
This points to the last clicked objects. Use it in your dash callback to know which objects are currently selected in the scene.
setProps (optional):
Dash-assigned callback that should be called whenever any of the properties change.
settings (optional):
Options used for generating scene. Supported options and their defaults are given as follows: { antialias: True, // set to False to improve performance renderer: ‘webgl’, // ‘svg’ also an option, used for unit testing transparentBackground: False, // transparent background background: ‘#ffffff’, // background color if not transparent, sphereSegments: 32, // decrease to improve performance cylinderSegments: 16, // decrease to improve performance staticScene: True, // disable if animation required defaultZoom: 1, // 1 will zoom to fit object exactly, <1 will add padding between object and box bounds zoomToFit2D: False // if True, will zoom to fit object only along the X and Y axes (not Z) extractAxis: False // will remove the axis from the main scene isMultiSelectionEnabled: False // allow to use shift to select, secondaryObjectView: True // show the selected object in a detail view animation: ‘play’ | ‘slider’ | ‘none’ // choose which style of animation is use } There are several additional options used for debugging and testing, please consult the source code directly for these.
showControls (optional)
showExpandButton (optional)
showExportButton (optional)
showImageButton (optional)
showPositionButton (optional)
toggleVisibility (optional):
Hide/show nodes in scene by its name (key), value is 1 to show the node and 0 to hide it.

Bases: Component

A CrystalToolkitScene component.

Keyword arguments:

children (optional):
First child will be rendered as the settings panel. Second child will be rendered as the bottom panel (legend).
id (optional):
The ID used to identify this component in Dash callbacks.
animation (optional):
Animation type.
axisView (optional):
Where is the axis displayed ( ‘NW’ / ‘NE’ / ‘SE’ / ‘SW’ / ‘HIDDEN’ ).
className (optional):
Class name that will wrap around the whole scene component. When enlarged, this class name is applied to the modal-content element.
currentCameraState (optional):
THIS PROP IS SET AUTOMATICALLY Object that maintains the current state of the camera. e.g. { position: {x: 0, y: 0, z: 0}, quarternion: {x: 0, y: 0, z: 0, w: 0}, zoom: 1, setByComponentId: “1”, following: True }.
customCameraState (optional):
Object for setting the scene to a custom camera state. When modified, the camera will update to new custom state. e.g. { position: {x: 0, y: 0, z: 0}, quarternion: {x: 0, y: 0, z: 0, w: 0}, (optional) zoom: 1 (optional) }.
data (optional):
Simple3DScene JSON, the easiest way to generate this is to use the Scene class in crystal_toolkit.core.scene and its to_json method.
debug (optional):
Display a debug view.
fileOptions (optional):
List of options to show in file download dropdown.
fileTimestamp (optional):
THIS PROP IS SET AUTOMATICALLY Date string that represents the time fileType was set. Use this prop in dash callbacks to trigger file downloads.
fileType (optional):
THIS PROP IS SET AUTOMATICALLY The last file type clicked in the file download menu.
imageData (optional):
THIS PROP IS SET AUTOMATICALLY Data string for the image generated on image button click.
imageDataTimestamp (optional):
THIS PROP IS SET AUTOMATICALLY Date string that represents the time imageData was set. Use this prop in dash callbacks to trigger downloads of imageData.
imageRequest (optional):
Set to trigger a screenshot or scene download. Must be an object with the following structure: { “filetype”: “png” // the image format (“png”, “dae”) } Passing this prop as an object ensures that new requests are triggered any time the prop is set.
imageType (optional):
File type to be downloaded as an image. Either png or dae.
inletPadding (optional):
Padding of the axis view.
inletSize (optional):
Size of the axis view.
sceneSize (optional):
Width / Height of the displayed component.
selectedObject (optional):
This points to the last clicked objects. Use it in your dash callback to know which objects are currently selected in the scene.
setProps (optional):
Dash-assigned callback that should be called whenever any of the properties change.
settings (optional):
Options used for generating scene. Supported options and their defaults are given as follows: { antialias: True, // set to False to improve performance renderer: ‘webgl’, // ‘svg’ also an option, used for unit testing transparentBackground: False, // transparent background background: ‘#ffffff’, // background color if not transparent, sphereSegments: 32, // decrease to improve performance cylinderSegments: 16, // decrease to improve performance staticScene: True, // disable if animation required defaultZoom: 1, // 1 will zoom to fit object exactly, <1 will add padding between object and box bounds zoomToFit2D: False // if True, will zoom to fit object only along the X and Y axes (not Z) extractAxis: False // will remove the axis from the main scene isMultiSelectionEnabled: False // allow to use shift to select, secondaryObjectView: True // show the selected object in a detail view animation: ‘play’ | ‘slider’ | ‘none’ // choose which style of animation is use } There are several additional options used for debugging and testing, please consult the source code directly for these.
showControls (optional)
showExpandButton (optional)
showExportButton (optional)
showImageButton (optional)
showPositionButton (optional)
toggleVisibility (optional):
Hide/show nodes in scene by its name (key), value is 1 to show the node and 0 to hide it.

Bases: Component

A Download component.

Keyword arguments:

id (optional):
The ID used to identify this component in Dash callbacks.
data (optional):
When set, a download is invoked using a Blob. Accepts an object with the following structure: { filename: string; content: any; isBase64: boolean (optional); isDataURL: boolean (optional); mimeType: string (optional, default: ‘text/plan’); } Properties in data object take precedent over component props.
isBase64 (optional):
Set to True if data.content is a base64 string.
isDataURL (optional):
Set to True if data.content is a data url.
mimeType (optional):
Default value for mimeType.
setProps (optional):
Dash-assigned callback that should be called to report property changes to Dash, to make them available for callbacks.

class dash_mp_components.GraphComponent(id: str | dict | None = None, graph: Any | None = None, options: Any | None = None, **kwargs)[source]¶

Bases: Component

A GraphComponent component.

Keyword arguments:

id (optional):
The ID used to identify this component in Dash callbacks.
graph (optional):
A graph that will be displayed when this component is rendered.
options (optional):
Display options for the graph.
setProps (optional):
Dash-assigned callback that should be called whenever any of the properties change.

Bases: Component

A PhononAnimationScene component.

Keyword arguments:

children (optional):
First child will be rendered as the settings panel. Second child will be rendered as the bottom panel (legend).
id (optional):
The ID used to identify this component in Dash callbacks.
animation (optional):
Animation type.
axisView (optional):
Where is the axis displayed ( ‘NW’ / ‘NE’ / ‘SE’ / ‘SW’ / ‘HIDDEN’ ).
className (optional):
Class name that will wrap around the whole scene component. When enlarged, this class name is applied to the modal-content element.
currentCameraState (optional):
THIS PROP IS SET AUTOMATICALLY Object that maintains the current state of the camera. e.g. { position: {x: 0, y: 0, z: 0}, quarternion: {x: 0, y: 0, z: 0, w: 0}, zoom: 1, setByComponentId: “1”, following: True }.
customCameraState (optional):
Object for setting the scene to a custom camera state. When modified, the camera will update to new custom state. e.g. { position: {x: 0, y: 0, z: 0}, quarternion: {x: 0, y: 0, z: 0, w: 0}, (optional) zoom: 1 (optional) }.
data (optional):
Simple3DScene JSON, the easiest way to generate this is to use the Scene class in crystal_toolkit.core.scene and its to_json method.
debug (optional):
Display a debug view.
fileOptions (optional):
List of options to show in file download dropdown.
fileTimestamp (optional):
THIS PROP IS SET AUTOMATICALLY Date string that represents the time fileType was set. Use this prop in dash callbacks to trigger file downloads.
fileType (optional):
THIS PROP IS SET AUTOMATICALLY The last file type clicked in the file download menu.
imageData (optional):
THIS PROP IS SET AUTOMATICALLY Data string for the image generated on image button click.
imageDataTimestamp (optional):
THIS PROP IS SET AUTOMATICALLY Date string that represents the time imageData was set. Use this prop in dash callbacks to trigger downloads of imageData.
imageRequest (optional):
Set to trigger a screenshot or scene download. Must be an object with the following structure: { “filetype”: “png” // the image format (“png”, “dae”) } Passing this prop as an object ensures that new requests are triggered any time the prop is set.
imageType (optional):
File type to be downloaded as an image. Either png or dae.
inletPadding (optional):
Padding of the axis view.
inletSize (optional):
Size of the axis view.
sceneSize (optional):
Width / Height of the displayed component.
selectedObject (optional):
This points to the last clicked objects. Use it in your dash callback to know which objects are currently selected in the scene.
setProps (optional):
Dash-assigned callback that should be called whenever any of the properties change.
settings (optional):
Options used for generating scene. Supported options and their defaults are given as follows: { antialias: True, // set to False to improve performance renderer: ‘webgl’, // ‘svg’ also an option, used for unit testing transparentBackground: False, // transparent background background: ‘#ffffff’, // background color if not transparent, sphereSegments: 32, // decrease to improve performance cylinderSegments: 16, // decrease to improve performance staticScene: True, // disable if animation required defaultZoom: 1, // 1 will zoom to fit object exactly, <1 will add padding between object and box bounds zoomToFit2D: False // if True, will zoom to fit object only along the X and Y axes (not Z) extractAxis: False // will remove the axis from the main scene isMultiSelectionEnabled: False // allow to use shift to select, secondaryObjectView: True // show the selected object in a detail view animation: ‘play’ | ‘slider’ | ‘none’ // choose which style of animation is use } There are several additional options used for debugging and testing, please consult the source code directly for these.
showControls (optional)
showExpandButton (optional)
showExportButton (optional)
showImageButton (optional)
showPositionButton (optional)
toggleVisibility (optional):
Hide/show nodes in scene by its name (key), value is 1 to show the node and 0 to hide it.

Bases: Component

A DataBlock component. Display a single record of data in a horizontal block element with an optional expanded view to show additional data columns.

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Content to display in the bottom section of the card. AlternativeWill take precedent.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-data-block).
columns (list; optional):
Optional configuration for the columns in the data object. Follows the same format as the columns prop in the SearchUI component.
data (dict; optional):
Object (i.e. dictionary) of data to be displayed in the block.
disableRichColumnHeaders (boolean; optional)
expanded (boolean; optional):
Control the initial expanded state of the block. @default False.
footer (a list of or a singular dash component, string or number; optional):
Content to display in the bottom section of the card. If you want to put a component in the footer, add it to the children prop instead.
iconClassName (string; optional):
Class name(s) to use for the icon in the top right. If no class is supplied, there will not be an icon.
iconTooltip (string; optional):
Optional tooltip to show when hovering over the icon.

Bases: Component

A DataTable component. Common wrapper for filters/inputs and their labels

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class.
columns (list; optional):
An array of column definition objects to control what is rendered in the table. See Column documentation for specifics on how to construct Column objects.
conditionalRowStyles (list; optional):
List of conditions for styling rows based on a property (selector) and a value. Note that this prop currently only supports checking for value equivalence (i.e. row[selector] === value). See ConditionalRowStyle documentation for how to construct ConditionalRowStyle conditions.
data (list; optional):
Array of data objects to display in the table.
disableRichColumnHeaders (boolean; optional):
This is a temporary solution to allow SearchUI’s to render in Storybook. There is an issue with the dynamic column header components that causes Storybook to crash. Rendering column headers as plain PropTypes.strings fixes the problem. Note that this will disable column tooltips and unit labels.
footer (string; optional):
Content to display below the table but inside the table’s box wrapper. Accepts markdown.
hasHeader (boolean; optional):
Set to True to show a header with total number of rows and a columns selector.
headerClassName (string; optional):
Optional class name to apply to the table header.
pagination (boolean; optional):
Set to True to paginate the table records.
paginationIsExpanded (boolean; optional):
If True, an expanded component will be used for pagination (same as in SearchUI). If False, a compact version will be used.
resultLabel (string; optional):
A noun in singular form to describe what a result represents (e.g. “material”). This is displayed in the table header.
resultLabelPlural (string; optional):
Plural form of the result label. If none supplied, it will automatically be the result label plus an “s”.
secondarySortAscending (boolean; optional):
If including a secondarySortField, set whether it should ascend by default. True for ascending, False for descending.
secondarySortField (string; optional):
Optionally include a secondary sort field. If the sortField ever becomes the same as the secondarySortField, the secondary field is removed. Must be a valid field and included in your list of columns.
selectableRows (boolean; optional):
Optionally include/exclude checkboxes next to rows for selecting.
selectedRows (boolean | number | string | dict | list; optional):
Property to maintain the state of selected rows so that they are accessible via Dash callback.
singleSelectableRows (boolean; optional):
Combine with selectableRows prop to only allow one row to be selected at a time.
sortAscending (boolean; optional):
If including a sortField, set whether it should ascend by default True for ascending, False for descending.
sortField (string; optional):
Optionally include a field to sort by on initial load Must be a valid field and included in your list of columns.

Bases: Component

A DownloadButton component. Button for exporting arrays or objects to files

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Use the children prop to set the button content This can be simple text or a component.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class(es) to add to the top-level element of the component Note: the class “mpc-download-button” is always added.
data (optional):
Array or object (list or dictionary) to be downloaded If downloading as csv or xlsx, data must be an array/list.
filename (string; optional):
Name of the file WITHOUT the extension (default: “export”).
filetype (a value equal to: ‘json’, ‘csv’, ‘xlsx’; optional):
File type to be downloaded This is also the extension that will be appended to the filename (default: “json”).
tooltip (string; optional):
Optional tooltip to display above the button on hover.

Bases: Component

A DownloadDropdown component. Dropdown for exporting arrays/lists to json, csv, or xlsx files The dropdown options are prepopulated as JSON, CSV, EXCEL This dropdown contains all the classes used in bulma dropdown

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Use the children prop to set the content for the dropdown button label This can be simple text or a component.
id (string; optional):
The ID used to identify this component in Dash callbacks.
buttonClassName (string; optional):
Class(es) to add to the button element of the component Note: the class “button” is already added by default.
className (string; optional):
Class(es) to add to the top-level element of the component Note: the classes “mpc-download-dropdown dropdown is-active” are already added by default.
data (optional):
Array/list to be downloaded.
filename (string; optional):
Name of the file WITHOUT the extension (default: “export”).
tooltip (string; optional):
Optional tooltip to display above the button on hover.

Bases: Component

A Drawer component. Render drawer that can be opened by a ModalTrigger within a ModalContextProvider

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Children will be rendered as the drawer content.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name applied to the top-level drawer div. The “mpc-drawer” and “modal” classes are added automatically.

Bases: Component

A DrawerContextProvider component. Use DrawerContextProvider to render drawers that will automatically close when another drawer in the context is opened.

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Children will be rendered within the DrawerContext. Should contain at least a DrawerTrigger component and a Drawer component.

Bases: Component

A DrawerTrigger component. Render a trigger that opens a Drawer that is within the same DrawerContextProvider

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Children will be rendered as the trigger content.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name applied to the modal trigger span. The “mpc-modal-trigger” class is added automatically.
forDrawerId (string; optional):
The ID of the drawer that this trigger should open.

Bases: Component

An Enlargeable component. Wrap content within this component to allow it to be enlarged into a full screen modal

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Children will be rendered as the modal content.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Additional class to apply to the modal-content element when enlarged.

Bases: Component

A Formula component. Render formula strings with proper subscripts. Note that this component expects the string to be a valid formula.

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Use the children prop to set the content of the formula. Must be a simple string.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-formula).
setProps (optional):
Dash-assigned callback that should be called whenever any of the properties change.

Bases: Component

A Markdown component. A custom re-worked version of dcc.Markdown. Uses v6 of react-markdown and applies five plugins to the markdown component by default: - remark-gfm - remark-slug - remark-highlight.js - remark-math - rehype-katex

Keyword arguments:

children (string | list of strings; optional):
A markdown string (or array of strings) that adhreres to the CommonMark spec.
id (string; optional):
The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.
className (string; optional):
Class name of the container element.
dedent (boolean; optional):
Remove matching leading whitespace from all lines. Lines that are empty, or contain only whitespace, are ignored. Both spaces and tab characters are removed, but only if they match; we will not convert tabs to spaces or vice versa.
loading_state (dict; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a dict with keys:
- is_loading (boolean; optional):
  Determines if the component is loading or not.
- prop_name (string; optional):
  Holds which property is loading.
- component_name (string; optional):
  Holds the name of the component that is loading.

class LoadingState¶: Bases: TypedDict

Bases: Component

A Modal component. Render modal that can be opened by a ModalTrigger within its same ModalContextProvider

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Children will be rendered as the modal content.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name applied to the top-level modal div. The “mpc-modal” and “modal” classes are added automatically.

Bases: Component

A ModalContextProvider component. Use ModalContextProvider to coordinate modal trigger and modal content

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Children will be rendered within the ModalContext. Should contain at least a ModalTrigger component and a Modal component.
id (string; optional):
The ID used to identify this component in Dash callbacks.
active (boolean; optional):
The current or default state of the modal. If True, the “is-active” class is added to <Modal/>. This value can be watched and changed from outside the component (e.g. via dash callback).
forceAction (boolean; optional):
Prevent modal from being closed without completion of a specific action. If set, there must be a button within the modal that updates the “active” state using the ModalContext or a dash callback on the active prop.
isDrawer (boolean; optional)

Bases: Component

A ModalTrigger component. Render a trigger that opens a ModalContent that is within the same ModalContextProvider

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Children will be rendered as the trigger content.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name applied to the modal trigger span. The “mpc-modal-trigger” class is added automatically.

Bases: Component

A SearchUIContainer component. A component that can wrap around sub-components of SearchUI and ensure they are all hooked up to the same context. This allows you to use the state management functionality of SearchUI with the ability to customize the inner layout and components.

Keyword arguments:

children (a list of or a singular dash component, string or number; optional)
id (string; optional)
apiEndpoint (string; optional)
apiEndpointParams (dict; optional)
apiKey (string; optional)
autocompleteFormulaUrl (string; optional)
className (string; optional)
columns (list; optional)
conditionalRowStyles (list; optional)
disableRichColumnHeaders (boolean; optional)
fieldsKey (string; optional)
filterGroups (list; optional)
hasSortMenu (boolean; optional)
lastClickedCell (dict; optional):
Set automatically by the SearchUI when a LINK_POPOVER cell is clicked. Shape: {selector, value, row, ts}. Used as a Dash callback Input to trigger server-side resolution that populates popoverContent.
limitKey (string; optional)
popoverContent (a list of or a singular dash component, string or number; optional):
Renderable content (Dash component tree) shown inside the popover for the most recently clicked LINK_POPOVER cell. Typically set by a Dash callback responding to lastClickedCell.
resultLabel (string; optional)
results (list; optional)
selectableRows (boolean; optional)
selectedRows (list; optional)
skipKey (string; optional)
sortFields (list of strings; optional)
sortKey (string; optional)
totalKey (string; optional)
view (a value equal to: ‘table’, ‘synthesis’; optional)

Bases: Component

A SearchUIDataHeader component. Data header to be used within a SearchUIContainer.

Keyword arguments:

id (string; optional)
exportDataButton (a list of or a singular dash component, string or number; optional)

class dash_mp_components.SearchUIDataView(id: str | dict | None = None, **kwargs)[source]¶

Bases: Component

A SearchUIDataView component. Data view to be used within a SearchUIContainer. The view type is determined by the prop passed to SearchUIContainer.

Keyword arguments:

id (string; optional)

class dash_mp_components.SearchUIFilters(id: str | dict | None = None, **kwargs)[source]¶

Bases: Component

A SearchUIFilters component. Filters panel to be used within a SearchUIContainer.

Keyword arguments:

id (string; optional)

Bases: Component

A SearchUIGrid component. A component that combines the filters, data header, and data view of a SearchUI into a common grid layout. Note that this must be used within a SearchUIContainer.

Keyword arguments:

id (string; optional)
exportDataButton (a list of or a singular dash component, string or number; optional)

Bases: Component

A SearchUISearchBar component. Search bar to be used within a SearchUIContainer.

Keyword arguments:

id (string; optional)
allowedInputTypesMap (dict; optional)
chemicalSystemSelectHelpText (string; optional)
className (string; optional)
elementsSelectHelpText (string; optional)
errorMessage (string; optional)
helpItems (list; optional)
periodicTableMode (a value equal to: ‘toggle’, ‘focus’, ‘none’; optional)
placeholder (string; optional)

class dash_mp_components.SynthesisRecipeCard(id: str | dict | None = None, className: str | None = None, data: dict | None = None, **kwargs)[source]¶

Bases: Component

A SynthesisRecipeCard component. Display synthesis recipe data in a standardized card view.

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-data-block).
data (dict; optional):
Object (i.e. dictionary) of data to be displayed in the block. Data should be in the format returned for a single result from the synthesis API endpoint.

Bases: Component

A Tooltip component. Tooltip component based on react-tooltip (https://github.com/wwayne/react-tooltip). To attach a Tooltip component to a trigger element, add the attributes “data-tip” and “data-for” to the trigger element. The “data-for” attribute’s value should be equal to the id of the Tooltip component you want to connect it to.

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Use the children prop to set the content of the tooltip. This can be simple text or a component.
id (string; optional):
The ID used to identify this component in Dash callbacks.
border (boolean; optional)
className (string; optional)
clickable (boolean; optional)
delayHide (number; optional)
delayShow (number; optional)
disable (boolean; optional)
effect (string; optional)
event (string; optional)
eventOff (string; optional)
globalEventOff (string; optional)
html (boolean; optional)
multiline (boolean; optional)
offset (dict; optional)
place (string; optional)
scrollHide (boolean; optional)
type (string; optional)

Bases: Component

A DualRangeSlider component. Slider input with controls for both the minimum and maximum bounds.

Keyword arguments:

id (string; optional)
className (string; optional)
debounce (number; optional)
domain (list of numbers; optional)
inclusiveTickBounds (boolean; optional)
isLogScale (boolean; optional)
step (number; optional)
styleInput (dict; optional)
styleSlider (dict; optional)
ticks (number; optional)
valueMax (number; optional)
valueMin (number; optional)

Bases: Component

A FilterField component. Common wrapper for filters/inputs and their labels

Keyword arguments:

children (a list of or a singular dash component, string or number; optional)
id (string; optional)
active (boolean; optional)
className (string; optional)
dois (list of strings; optional)
label (string; optional)
styleLabel (dict; optional)
tooltip (string; optional)
units (string; optional)

Bases: Component

A GlobalSearchBar component. Component for rendering advanced search interfaces for data in an API Renders results in a data table alongside a set of filters that map to properties in the data.

Keyword arguments:

apiKey (string; optional):
API key (if needed) that will be used to hit the autocomplete route.
autocompleteFormulaUrl (string; optional):
Optional URL endpoint for fetching formula autocompletion results e.g. “https://api.materialsproject.org/materials/formula_autocomplete/”.
hidePeriodicTable (boolean; optional):
Boolean flag for showing/hiding the periodic table on initial load.
placeholder (string; optional):
Optionally add a string of text to show up in the top-level search bar.
redirectRoute (string; optional):
The route (minus the query params) that submissions should redirect to.
tooltip (string; optional):
Optionally add a help icon with a tooltip in the search bar This should be used to provide instructions on how to use the search bar e.g. ‘Type in a comma-separated list of element symbols (e.g. Ga, N), a chemical formula (e.g. C3N), or a material id (e.g. mp-10152). You can also click elements on the periodic table to add them to your search.’.

Bases: Component

A MaterialsInput component. An input field component for searching by mp-id, elements, formula, smiles, or text. Renders a text input and a periodic table within a PeriodicContext to support two-way binding between the input and periodic table. i.e. when elements are typed into the field, they are selected in the table, and when elements are selected in the table, they are appended to the field’s input.

Documentation: https://materialsproject.github.io/mp-react-components/?path=/docs/data-entry-materialsinput–multi-type

Keyword arguments:

id (string; optional)
allowedInputTypes (list; optional)
autocompleteApiKey (string; optional)
autocompleteFormulaUrl (string; optional)
chemicalSystemSelectHelpText (string; optional)
className (string; optional)
debounce (number; optional)
elementsSelectHelpText (string; optional)
errorMessage (string; optional)
helpItems (list; optional)
hidePeriodicTable (boolean; optional)
hideWildcardButton (boolean; optional)
inputClassName (string; optional)
label (string; optional)
loading (boolean; optional)
maxElementSelectable (number; optional)
periodicTableMode (a value equal to: ‘toggle’, ‘focus’, ‘none’; optional)
placeholder (string; optional)
showSubmitButton (boolean; optional)
showTypeDropdown (boolean; optional)
submitButtonClicks (number; optional)
submitButtonText (string; optional)
tooltip (string; optional)
type (a value equal to: ‘elements’, ‘chemical_system’, ‘formula’, ‘mpid’, ‘smiles’, ‘text’, ‘molecule_formula’; optional)
value (string; optional)

Bases: Component

A RangeSlider component. Slider input for selecting a single value in a range

Keyword arguments:

id (string; optional)
className (string; optional)
debounce (number; optional)
domain (list of numbers; optional)
inclusiveTickBounds (boolean; optional)
isLogScale (boolean; optional)
step (number; optional)
styleInput (dict; optional)
styleSlider (dict; optional)
ticks (number; optional)
value (number | string; optional)

Bases: Component

A Select component. Wrapper component for react-select This can be used as an alternative to dcc.Dropdown Automatically adds the wrapper class “react-select-container” and the class prefix “react-select-” to all the elements created by react-select

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
arbitraryProps (dict; optional):
Object for placing all other props that are supported by react-select but are not explicitly defined here. See https://react-select.com/props This is a workaround because Dash components cannot accept props that aren’t explicitly defined. e.g. { ‘closeMenuOnSelect’: False, ‘escapeClearsValue’: True }.
defaultValue (boolean | number | string | dict | list; optional):
The default value assigned if no selection is made. (default: None).
isClearable (boolean; optional):
Determines if dropdown has an ‘x’ icon for clearing the current value. (default: False).
isMulti (boolean; optional):
Set to True if select should allow multiple options to be selected. (default: False).
options (list; optional):
List of objects to be used as options in the dropdown e.g. [ { ‘label’: ‘One’, ‘value’: 1 }, { ‘label’: ‘Two’, ‘value’: 2 } ].
value (boolean | number | string | dict | list; optional):
The value of the select dropdown. Accepts either the value itself or the an entire object from the options array. e.g. 1 or {‘label’: ‘One’, ‘value’: 1}.

Bases: Component

A Switch component. Common wrapper for filters/inputs and their labels

Keyword arguments:

id (string; optional)
className (string; optional)
falsyLabel (string; optional)
hasLabel (boolean; optional)
truthyLabel (string; optional)
value (boolean; optional)

Bases: Component

A Dropdown component. Generic dropdown menu that can render arbitrary items for display and navigation purposes only (i.e. not for selecting options or performing actions that are not links)

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Use the children prop to set the dropdown items. This should usually be a list of <div> components with the class “dropdown-item”. The content of each item can be anything from simple text to a component.
id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class (dropdown).
closeOnSelection (boolean; optional):
Set to False to keep the menu open when an item is clicked @default True.
isArrowless (boolean; optional):
Set to True to remove the arrow to the right of the trigger label.
isRight (boolean; optional):
Set to True to align the dropdown menu with the right of the trigger.
isUp (boolean; optional):
Set to True to make the dropdown menu open upwards.
items (list of strings; optional):
List of strings to display inside the dropdown menu. Omit this and use the children prop instead if you want supply components as dropdown items.
triggerClassName (string; optional):
Class name(s) to apply to button that opens the dropdown menu @default ‘button’.
triggerIcon (string; optional):
Class name(s) for the icon to display to the left of the trigger label (optional).
triggerLabel (string; optional):
Text to display in the button that triggers the dropdown to open.

Bases: Component

A Link component. Custom Link component that can handle both internal and external URLs. You can also use this component if you need to preserve the url query parameters when following a link.

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
The children of this component.
id (string; optional):
The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.
className (string; optional):
Often used with CSS to style elements with common properties.
href (string; required):
The URL of a linked resource.
loading_state (dict; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a dict with keys:
- is_loading (boolean; optional):
  Determines if the component is loading or not.
- prop_name (string; optional):
  Holds which property is loading.
- component_name (string; optional):
  Holds the name of the component that is loading.
preserveQuery (boolean; optional):
If True, the current query parameters will not be removed from the url when following the link.
refresh (boolean; optional):
Controls whether or not the page will refresh when the link is clicked.
target (string; optional):
Specifies where to open the link reference.
title (string; optional):
Adds the title attribute to your link, which can contain supplementary information.

class LoadingState¶: Bases: TypedDict

Bases: Component

A Navbar component. Component for including dropdown menus inside a bulma navbar Includes all of the default bulma classes for a navbar-dropdown

Keyword arguments:

children (a list of or a singular dash component, string or number; optional)
id (string; optional):
The ID used to identify this component in Dash callbacks.
brandItem (dict; optional):
Single navbar-item to display on the left of the navbar in the “navbar-brand” element. Expects an object that can support all the same properties of a navbar-item. e.g. { label: “The Materials Project”, href: “/”, image: “/images/brand.png” },.
className (string; optional):
Extra class name applied to top level navbar-item. The “navbar” class is added automatically.
items (list; optional):
An array of navbar-items to show on the right side of the navbar. An item can be a link, a menu label, or a divider. Each item can support the following properties: className: string; label: string (the text to show in the item); href: string (the href value for link items, ignored if item is menu label); target: string (target value to be added to the link); icon: string (class name(s) for an icon to display in the navbar-item); image: string (src attribute of an image to display in the navbar-item); items: array (items to render underneath this item as a dropdown) items of items (i.e. dropdown items) can have all the above properties plus the following: isDivider: boolean (sets this item as just a horizontal rule with the “navbar-divider” class); isMenuLabel: boolean (sets this item as a label with the “menu-label” class); items: NavbarItem[]; isRight: boolean (applies bulma’s “is-right” class to the navbar-dropdown isArrowless: boolean (Set to True to hide the default angle down arrow created by bulma); e.g. [ { label: “API”, href: “/api” }, { label: “Help”, href: “/help” }, { label: “Apps”, isRight: True, items: [ { label: “Materials”, href: “/materials” }, { label: “Molecules”, href: “/molecules” }, { isDivider: True }, { isMenuLabel: True, label: “Other” }, { label: “External Site”, href: “https://externalsite.com”, target: “_blank” } ] } ].

Bases: Component

A NavbarDropdown component. Component for including dropdown menus inside a bulma navbar Includes all of the default bulma classes for a navbar-dropdown

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Use the children prop to set the dropdown trigger content This can be simple text or a component The trigger will automatically be wrapped with the “navbar-link” class.
className (string; optional):
Extra class name applied to top level navbar-item The “navbar-item” and “has-dropdown” classes are added automatically.
isArrowless (boolean; optional):
Set to True to hide the default angle down arrow created by bulma.
isRight (boolean; optional):
Set to True to apply bulma’s “is-right” class to the navbar-dropdown This aligns the dropdown menu with the right side of the trigger.
items (list; optional):
An array of navbar-items to show in the dropdown when hovering over the label. An item can be a link, a menu label, or a divider Each item can support the following properties: – text: string (the text to show in the item) – href: string (the href value for link items, ignored if item is menu label) – isMenuLabel: boolean (sets this item as a label with the “menu-label” class) – isDivider: boolean (sets this item as just a horizontal rule with the “navbar-divider” class) – openInNewTab: boolean (will open link in a new tab, only works if href is a full url) e.g. [ { text: “Materials”, href: “/materials” }, { text: “Molecules”, href: “/molecules” }, { isDivider: True }, { isMenuLabel: True, text: “Other” }, { text: “External Site”, href: “https://externalsite.com”, openInNewTab: True } ].

Bases: Component

A NotificationDropdown component.

Keyword arguments:

children (a list of or a singular dash component, string or number; optional)
id (string; optional)
className (string; optional)
hasUnread (boolean; optional)
isHidden (boolean; optional)
isModal (boolean; optional)
isRight (boolean; optional)
items (list; optional)
link (string; optional)

Bases: Component

A Scrollspy component. Component for building in-page navigation menus with scrollspy functionality

Keyword arguments:

activeClassName (string; optional):
Class name applied to active links in the menu (default: ‘is-active’).
menuClassName (string; optional):
Class name applied to the <aside> that contains the whole menu (default: ‘menu’).
menuGroupLabelClassName (string; optional):
Class name applied to all menu group labels (default: ‘menu-label’).
menuGroups (list; optional):
An array of MenuGroup items that is used to build the menu and its links. Each MenuGroup has an optional label and a required ‘items’ array of MenuItems. Each MenuItem has a label that is rendered in the menu and a targetId that is the id of the element it should link to. Do not include ‘#’ in targetId. example: [ {label: ‘…’, items: [ {label: ‘…’, targetId: ‘…’}, {label: ‘…’, targetId: ‘…’, items: [ {label: ‘…’, targetId: ‘…’} }] ]} ].
menuItemClassName (string; optional):
Class name applied to the <li> of each menu item (default: ‘’).
menuItemContainerClassName (string; optional):
Class name applied to each <ul> of menu items (default: ‘menu-list’).
offset (number; optional):
An integer to determine the scroll offset from an item that will trigger it active (default: -20).

Bases: Component

A Tabs component. Custom wrapper for the react-tabs component. See https://github.com/reactjs/react-tabs

Keyword arguments:

children (a list of or a singular dash component, string or number; optional):
Use the children prop to set the separate tab contents. Children must be a list of elements that is the same length as the list of labels in the labels prop. The element’s order in the children array determines which label it is associated with.
id (string; optional):
The ID used to identify this component in Dash callbacks.
arbitraryProps (dict; optional):
Object for placing all other props that are supported by react-select but are not explicitly defined here. See https://github.com/reactjs/react-tabs This is a workaround because Dash components cannot accept props that aren’t explicitly defined. e.g. { ‘defaultFocus’: True, ‘selectedTabClassName’: ‘active-tab’ }.
className (string; optional):
Class name applied to top level wrapper for tabs and tab content. The “mpc-tabs” class is added automatically.
labels (list of strings; optional):
List of strings to use as labels for the tabs. The number of labels must equal the number of children (i.e. tab content items).
tabIndex (number; optional):
The current or default tabIndex to be active. This value can be watched and changed from outside the component (e.g. via dash callback).

Bases: Component

A PeriodicContext component.

Keyword arguments:

children (boolean | number | string | dict | list; optional)
id (string; optional)
disabledElements (list; optional):
A list of symbols to grey-out as disabled.
enabledElements (list; optional):
A list of selected symbols.
forwardOuterChange (boolean; optional):
Forward external changes.
hiddenElements (list; optional):
A list of hidden symbols.

Bases: Component

A PeriodicContextTable component.

Keyword arguments:

children (boolean | number | string | dict | list; optional)
id (string; optional)
disabledElements (list; optional):
A list of symbols to grey-out as disabled.
enabledElements (list; optional):
A list of selected symbols.
forceTableLayout (string; optional):
Force table layout.
forwardOuterChange (boolean; optional):
Forward external changes.
hiddenElements (list; optional):
A list of hidden symbols.
maxElementSelectable (number; optional):
The maximum number of selectable elements.
state (dict; optional):
The state of the table, as exposed in the dash callback.

Bases: Component

A PeriodicElement component. This component displays a periodic element

Keyword arguments:

id (string; optional)
element (string; optional)
size (number; optional)

class dash_mp_components.PeriodicFilter(id: str | dict | None = None, **kwargs)[source]¶

Bases: Component

A PeriodicFilter component. This component filter an associated periodic table

Keyword arguments:

id (string; optional)

Bases: Component

A PeriodicTableInput component. MpPeriodicTableInput is a component that allows user to select some components from a periodic table

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
forceTableLayout (a value equal to: ‘spaced’, ‘compact’, ‘small’, ‘map’; optional):
Force the table to be in a specific layout.
maxElementSelectable (number; default 10):
Maximum number of selectable elements.
state (dict; optional):
This is a read-only prop that dash callback can subscribe to.

Bases: Component

A BibCard component. Render bibliographic information in a formatted card view

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
author (string; optional):
Authors of the reference This string will render as is, so any formatting must be done beforehand.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-bib-card).
doi (string; optional):
The DOI (Digital Object Identifier) of the reference This identifier is used to generate links to the reference’s online publication, open access PDF, and bibtex.
journal (string; optional):
Name of the journal or publisher of the reference.
openAccessUrl (string; optional):
Directly supply the URL to an accessible PDF of the reference If supplied, the component will not try to fetch an open access URL @default undefined.
preventOpenAccessFetch (boolean; optional):
Set to True to prevent dynamically fetching a link to a free PDF of each reference (using the “doi” field for individual bib entry). NOTE: the open access URL can also be included in a bib entry in the “openAccessUrl” property. If set, the URL will not be fetched. @default False.
shortName (string; optional):
Shortened title of the article.
title (string; optional):
Title of the reference Will render as a link if doi is supplied.
year (string | number; optional):
Year of the reference as either a string or number.

Bases: Component

A BibFilter component. Component for rendering and filtering a list of citations in bibjson or crossref format Expects bibjson in the format output by the bibtexparser library (https://bibtexparser.readthedocs.io/en/v1.1.0/tutorial.html#) Expects crossref in the format returned by the Crossref API

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
ascending (boolean; optional):
Set to True to have the initial sorting direction be ascending @default False.
bibEntries (list; optional):
List of bib objects in bibjson or crossref format Only the following bib properties are used by this component: - title - author (as a list or string) - year - doi - journal If any of those properties are missing, that property will be omitted from the bibjson result card. Any extra properties are simply ignored.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-bib-filter).
format (a value equal to: ‘bibjson’, ‘crossref’; optional):
Format of the bibliographoc objects supplied in bibEntries @default ‘bibjson’.
preventOpenAccessFetch (boolean; optional):
Set to True to prevent dynamically fetching a link to a free PDF of each reference (using the “doi” field for individual bib entry). NOTE: the open access URL can also be included in a bib entry in the “openAccessUrl” property. If set, the URL will not be fetched. @default False.
resultClassName (string; optional):
Class name(s) to append to individual result cards’ default class (mpc-bib-card).
sortField (a value equal to: ‘year’, ‘author’, ‘title’; optional):
Name of property to initially sort entries by @default ‘year’.

Bases: Component

A BibjsonCard component. Parses a bibjson entry and renders a BibCard Expects bibjsonEntry in the format used by the bibtexparser library (https://bibtexparser.readthedocs.io/en/v1.1.0/tutorial.html#)

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
bibjsonEntry (boolean | number | string | dict | list; optional):
A single bib object in bibjson format Only the following bib properties are used by this component: title, author (as a list or string), year, doi, journal. If any of those properties are missing, that property will be omitted from the bibjson result card. Any extra properties are simply ignored. e.g. { “journal”: “Physical Review X”, “year”: “2015”, “issn”: “21603308”, “isbn”: “2160-3308”, “doi”: “10.1103/PhysRevX.5.011006”, “author”: [“Agapito, Luis A.”, “Curtarolo, Stefano”, “Nardelli, Marco Buongiorno”], “title”: “Reformulation of DFT + U as a Pseudohybrid Hubbard Density Functional for Accelerated Materials Discovery”, “ENTRYTYPE”: “article”, “ID”: “agapito2015” }.
className (string; optional):
Class name(s) to append to the component’s default class.
preventOpenAccessFetch (boolean; optional):
Set to True to prevent dynamically fetching a link to a free PDF of each reference (using the “doi” field for individual bib entry). NOTE: the open access URL can also be included in a bib entry in the “openAccessUrl” property. If set, the URL will not be fetched. @default False.

Bases: Component

A BibtexButton component. Standardized button for linking to BibTeX. If no url prop is supplied, a link will be generated using the doi prop and doi2bib.org.

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-bibtex-button) @default ‘button is-small’.
doi (string; optional):
The DOI (Digital Object Identifier) of the reference to pass to doi2bib.org.
target (string; optional):
Value to add to the anchor tag’s target attribute @default ‘_blank’.
url (string; optional):
Directly supply the URL to a reference’s bibtex. If supplied, the component will not generate its own link using the doi prop.

Bases: Component

A CrossrefCard component. Parses a crossref entry or fetches a reference from the crossref API and renders a BibCard.

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class.
crossrefEntry (boolean | number | string | dict | list; optional):
A single bib object in crossref format. If a crossEntry is supplied, a request will not be made to the crossref API. The following bib values are parsed from a Crossref API response: title, authors, year, doi, journal.
errorMessage (string; optional):
Error message to show inside the card if the crossref request fails @default ‘Could not find reference’.
identifier (string; optional):
Either a DOI or bibtex string to use to search against the Crossref /works endpoint. An identifier must be supplied if you are not supplying the crossrefEntry directly.
preventOpenAccessFetch (boolean; optional):
Set to True to prevent dynamically fetching a link to a free PDF of each reference (using the “doi” field for individual bib entry). NOTE: the open access URL can also be included in a bib entry in the “openAccessUrl” property. If set, the URL will not be fetched. @default False.

Bases: Component

An OpenAccessButton component. Standardized button for linking to a publication.

This component can be used in four ways: 1. Supply just a doi and let the component build the url and fetch the journal name and year from crossref. 2. Supply just a url to doi.org and fetch the journal name and year from crossref. 3. Supply a doi and a link label in the component’s children. In this case, there will be no fetch to crossref. 4. Supply a url to any location and a link label in the component’s children. In this case, there will be no fetch to crossref.

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-open-access-button). Note: the “tag” class is the default value for className. If you don’t want the top-level element to have the “tag” class, add className=”” or any other value. If you want to use a bulma tag modifier, use the tagClassName prop instead. @default ‘tag’.
compact (boolean; optional):
Only display the publication icon and hide the link label and OAB. Author names will display in a tooltip on hover.
doi (string; optional):
The DOI (Digital Object Identifier) of the publication Will be used to generate a doi.org link and to fetch an open access PDF link.
showTooltip (boolean; optional):
Show a tooltip on hover with the bibliographic citation for the publication.
target (string; optional):
Value to add to the anchor tag’s target attribute @default ‘_blank’.
url (string; optional):
Directly supply the URL to the publication. If a doi.org url is supplied, this component will automatically parse the url for the doi and use that to fetch an open access link.

Bases: Component

A PublicationButton component. Standardized button for linking to a publication.

This component can be used in four ways: 1. Supply just a doi and let the component build the url and fetch the journal name and year from crossref. 2. Supply just a url to doi.org and fetch the journal name and year from crossref. 3. Supply a doi and a link label in the component’s children. In this case, there will be no fetch to crossref. 4. Supply a url to any location and a link label in the component’s children. In this case, there will be no fetch to crossref.

Keyword arguments:

id (string; optional):
The ID used to identify this component in Dash callbacks.
className (string; optional):
Class name(s) to append to the component’s default class (mpc-open-access-button). Note: the “tag” class is the default value for className. If you don’t want the top-level element to have the “tag” class, add className=”” or any other value. If you want to use a bulma tag modifier, use the tagClassName prop instead. @default ‘tag’.
compact (boolean; optional):
Only display the publication icon and hide the link label and OAB. Author names will display in a tooltip on hover.
doi (string; optional):
The DOI (Digital Object Identifier) of the publication Will be used to generate a doi.org link and to fetch an open access PDF link.
showTooltip (boolean; optional):
Show a tooltip on hover with the bibliographic citation for the publication.
target (string; optional):
Value to add to the anchor tag’s target attribute @default ‘_blank’.
url (string; optional):
Directly supply the URL to the publication. If a doi.org url is supplied, this component will automatically parse the url for the doi and use that to fetch an open access link.

Modules

`BibCard`([id, className, title, author, ...])	A BibCard component.
`BibFilter`([id, className, format, ...])	A BibFilter component.
`BibjsonCard`([id, className, bibjsonEntry, ...])	A BibjsonCard component.
`BibtexButton`([id, className, doi, url, target])	A BibtexButton component.
`CameraContextProvider`([children, id])	A CameraContextProvider component. Use this component to synchronize the camera of multiple SimpleSceneComponent.
`CrossrefCard`([id, className, crossrefEntry, ...])	A CrossrefCard component.
`CrystalToolkitAnimationScene`([children, id, ...])	A CrystalToolkitAnimationScene component.
`CrystalToolkitScene`([children, id, ...])	A CrystalToolkitScene component.
`DataBlock`([children, id, className, data, ...])	A DataBlock component.
`DataTable`([id, className, data, columns, ...])	A DataTable component.
`Download`([id, data, isBase64, isDataURL, ...])	A Download component.
`DownloadButton`([children, id, className, ...])	A DownloadButton component.
`DownloadDropdown`([children, id, className, ...])	A DownloadDropdown component.
`Drawer`([children, id, className])	A Drawer component.
`DrawerContextProvider`([children])	A DrawerContextProvider component.
`DrawerTrigger`([children, id, className, ...])	A DrawerTrigger component.
`Dropdown`([children, id, className, ...])	A Dropdown component.
`DualRangeSlider`([id, className, valueMin, ...])	A DualRangeSlider component.
`Enlargeable`([children, id, className])	An Enlargeable component.
`FilterField`([children, id, className, ...])	A FilterField component.
`Formula`([children, id, className])	A Formula component.
`GlobalSearchBar`([redirectRoute, ...])	A GlobalSearchBar component.
`GraphComponent`([id, graph, options])	A GraphComponent component.
`JsonView`([id, src, name, theme, style, ...])	A JsonView component.
`Link`([children, href, target, refresh, ...])	A Link component.
`Markdown`([children, id, className, dedent, ...])	A Markdown component.
`MatSidebar`([id, currentApp, appId, layout])	A MatSidebar component.
`MaterialsInput`([id, className, ...])	A MaterialsInput component.
`Modal`([children, id, className])	A Modal component.
`ModalContextProvider`([children, id, active, ...])	A ModalContextProvider component.
`ModalTrigger`([children, id, className])	A ModalTrigger component.
`Navbar`([children, id, className, items, ...])	A Navbar component.
`NavbarDropdown`([children, className, ...])	A NavbarDropdown component.
`NotificationDropdown`([children, className, ...])	A NotificationDropdown component.
`OpenAccessButton`([id, doi, className, url, ...])	An OpenAccessButton component.
`PeriodicContext`([children, id, ...])	A PeriodicContext component.
`PeriodicContextTable`([children, id, ...])	A PeriodicContextTable component.
`PeriodicElement`([id, size, element])	A PeriodicElement component.
`PeriodicFilter`([id])	A PeriodicFilter component.
`PeriodicTableInput`([id, state, ...])	A PeriodicTableInput component.
`PhononAnimationScene`([children, id, ...])	A PhononAnimationScene component.
`PublicationButton`([id, doi, className, url, ...])	A PublicationButton component.
`RangeSlider`([id, className, value, domain, ...])	A RangeSlider component.
`Scrollspy`([menuGroups, activeClassName, ...])	A Scrollspy component.
`SearchUIContainer`([children, id, className, ...])	A SearchUIContainer component.
`SearchUIDataHeader`([id, exportDataButton])	A SearchUIDataHeader component.
`SearchUIDataView`([id])	A SearchUIDataView component.
`SearchUIFilters`([id])	A SearchUIFilters component.
`SearchUIGrid`([id, exportDataButton])	A SearchUIGrid component.
`SearchUISearchBar`([id, className, ...])	A SearchUISearchBar component.
`Select`([id, options, value, defaultValue, ...])	A Select component.
`Switch`([id, className, value, hasLabel, ...])	A Switch component.
`SynthesisRecipeCard`([id, className, data])	A SynthesisRecipeCard component.
`Tabs`([children, id, className, labels, ...])	A Tabs component.
`Tooltip`([children, id, place, type, effect, ...])	A Tooltip component.

dash_mp_components¶

dash-mp-components

Navigation

Related Topics