Skip to content

Latest commit

 

History

History
110 lines (85 loc) · 2.81 KB

components.md

File metadata and controls

110 lines (85 loc) · 2.81 KB
Raw

Periodic table

MatPeriodicTable

A single periodic table; you can pass an array of enable/disabled elements

 html.Div([
            PeriodicContextTable(
                id=self.id("periodic-table-absorbing"),
                maxElementSelectable=1,
                forwardOuterChange=False,
                disabledElements=NON_SUPPORTED_ELEMENTS,
                forceTableLayout="small")],
            className="mp-absorbing-table")
    ]

You can use the prop state in your callbacks. The callback will be fired when the state of the table change.

PeriodicContext, SelectableTable, PeriodicFilter

You can use this component to wire multiple table together. PeriodicContext is a top-level that provides a model for the periodic table that it wraps. PeriodicFilter allows you to use filter some elements on table, by groups/periods/properties. It updates the PeriodicContext, which in turn is mirrored on the table.

//TODO example file

#3D Scene

Simple3DScene

Simple3DScene displays a simple scene

dash_mp_components.Simple3DScene(
     id='3d-3',
     sceneSize=800,
     debug=True,
     inletSize=150,
     settings={'extractAxis': True},
     inletPadding=0,
     axisView='SW',
     data={ /* scene definition */ }

selectedObject can be used in your callback. The callback will fire when an object is selected. The JSON of the object will be passed as an argument

CameraContext

Camera context allows you to wire the camera of multiple SimpleScenes together. See scene_usage.py

dash_mp_components.CameraContext(children=[
   html.Div([
      dash_mp_components.Simple3DScene(
         id='3d-2',
         axisView='NW',
         animation='play',
         settings={
             'secondaryObjectView': True,
             'staticScene': False
         },
         sceneSize=550,
         data={ /* scene definition  */ }
      ),
      dash_mp_components.Simple3DScene(
         id='3d-3',
          sceneSize=800,
         debug=True,
         inletSize=150,
         settings={'extractAxis': True},
         inletPadding=0,
         axisView='SW',
         data={ /* scene definition */ }
      )
   ])
])

Search

SearchGrid

This is the whole search interface, wrapped in a React component. From a dash point of view, this component is opaque. Everything happens in the frontend.

MatSearchGrid / MatPrintViewContext / MatMaterialsTable

This is the same interface. The search funnel and the result table are decoupled. The REST call happens in dash. See usage.py. The whole search is implemented there

See search_usage.py for a very simple example of a card

dash_mp_components.MatPrintViewContext(children=[
        dash_mp_components.MatSearchGrid(id='search-table'),
        dcc.Loading(
            [dash_mp_components.MatMaterialsTable(id='mat-result-table')]),
    ])