List components

Author: chabb

components.md

@@ -0,0 +1,107 @@
+# 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
+```
+
+#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.
+
+```
+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. 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 for more details
+
+```
+dash_mp_components.MatPrintViewContext(children=[
+        dash_mp_components.MatSearchGrid(id='search-table'),
+        dcc.Loading(
+            [dash_mp_components.MatMaterialsTable(id='mat-result-table')]),
+    ])
+```
+
+##
+
+

usage.py

@@ -8,22 +8,22 @@
 from dash.exceptions import PreventUpdate
 from pymatgen import MPRester
 
-#
-
 app = dash.Dash(__name__)
 
 app.layout = html.Div(children=[
-    # dash_mp_components.Search(
-    #     id='test3', allDefinitions=grid, initCards=['has_properties']),
-    # dash_mp_components.SearchGrid(id='test'),
-    # dash_mp_components.MatSidebar(id='bar', layout='horizontal'),
     dash_mp_components.MatPrintViewContext(children=[
         dash_mp_components.MatSearchGrid(id='search-table'),
         dcc.Loading(
             [dash_mp_components.MatMaterialsTable(id='mat-result-table')]),
     ])
 ])
 
+# make a dedicated example
+# dash_mp_components.Search(
+#     id='test3', allDefinitions=grid, initCards=['has_properties']),
+# dash_mp_components.SearchGrid(id='test'),
+# dash_mp_components.MatSidebar(id='bar', layout='horizontal'),
+
 
 @app.callback(
     Output(component_id='mat-result-table', component_property='data'),
@@ -112,50 +112,6 @@ def display_output2(c):
     return q
 
 
-# @app.callback([Output(component_id='p2', component_property='children')],
-#               [Input(component_id='bar', component_property='appId')])
-# def display_output2(value):
-#     print(value)
-#     if value is None:
-#         return ['']
-#     return [value]
-
-#
-# @app.callback([Output(component_id='p', component_property='children')],
-#               [Input(component_id='context', component_property='state')])
-# def display_output2(value):
-#     print(value)
-#     if value is None:
-#         return ['']
-#     return [value['enabledElements']]
-#
-#
-# @app.callback([
-#     Output(component_id='context', component_property='disabledElements'),
-#     Output(component_id='context', component_property='enabledElements')
-# ], [Input('RR', 'value')])
-# def display_output(value):
-#     return [], [value]
-#
-#
-# @app.callback(
-#     Output(component_id='context', component_property='forceTableLayout'),
-#     [Input('RR', 'value')])
-# def display_output(value):
-#     if value == 'K':
-#         return 'small'
-#     if value == 'Cl':
-#         return 'compact'
-#     if value == 'Na':
-#         return 'spaced'
-
-#
-# @app.callback(
-#     Output(component_id='selected-object', component_property='children'),
-#     [Input('3d-2', 'selectedObject')])
-# def display_selectedObject(value):
-#     return f'Type {value} color {value}'
-
 # use True to load a dev build of react
 if __name__ == '__main__':
     app.run_server(debug=True)