Update recent changes for test deployment

Author: mkhorton

app.py

@@ -28,10 +28,21 @@
 # region SET UP APP
 ################################################################################
 
-app = dash.Dash()
+meta_tags = [
+    {
+        "name": "description",
+        "content": "Crystal Toolkit allows you to import, view, analyze and transform "
+        "crystal structures and molecules using the full power of the Materials "
+        "Project.",
+    }
+]
+
+app = dash.Dash(meta_tags=meta_tags)
 app.config["suppress_callback_exceptions"] = True
 app.title = "Crystal Toolkit"
-app.scripts.config.serve_locally = True
+app.scripts.config.serve_locally = False
+app.scripts.append_script({"external_url": "https://buttons.github.io/buttons.js"})
+
 app.server.secret_key = str(uuid4())  # TODO: will need to change this one day
 server = app.server
 
@@ -60,6 +71,7 @@
 
 # Enable for debug purposes:
 from mp_dash_components.components.core import DummyCache
+
 cache = DummyCache()
 
 # endregion
@@ -72,18 +84,31 @@
 MPComponent.register_app(app)
 MPComponent.register_cache(cache)
 
-struct = MPRester().get_structure_by_material_id("mp-19306") #"mp-5020") # ("mp-804")  # ("mp-123")
+struct = MPRester().get_structure_by_material_id(
+    "mp-1078929"#"mp-804"
+)  # 19306 #"mp-5020") # ("mp-804")  # ("mp-123")
+
+
+json_editor_component = mpc.JSONEditor(struct)
 
 struct_component = mpc.StructureMoleculeComponent(struct)
 
 search_component = mpc.SearchComponent()
-editor_component = mpc.JSONComponent()
+
 favorites_component = mpc.FavoritesComponent()
+favorites_component.attach_from(search_component, this_store_name="mpid-to-add")
 
 literature_component = mpc.LiteratureComponent(origin_component=struct_component)
 robocrys_component = mpc.RobocrysComponent(origin_component=struct_component)
 magnetism_component = mpc.MagnetismComponent(origin_component=struct_component)
 
+panels = [
+    literature_component,
+    robocrys_component,
+    magnetism_component,
+    json_editor_component,
+]
+
 # endregion
 
 
@@ -93,19 +118,36 @@
 
 footer = mpc.Footer(
     html.Div(
-        dcc.Markdown(
-            f"Bug reports and feature requests gratefully accepted, "
-            f"contact [@mkhorton](mailto:[email protected]).  \n"
-            f"Created by [Crystal Toolkit Development Team]"
-            f"(https://github.com/materialsproject/mash/), "
-            f"powered by [The Materials Project](https://materialsproject.org) "
-            f"and [pymatgen](http://pymatgen.org) v{pmg_version}."
-        ),
+        [
+            html.Iframe(
+                src="https://ghbtns.com/github-btn.html?user=materialsproject&repo=mash&type=star&count=true",
+                style={
+                    "frameborder": False,
+                    "scrolling": False,
+                    "width": "72px",
+                    "height": "20px",
+                },
+            ),
+            dcc.Markdown(
+                f"Bug reports and feature requests gratefully accepted, "
+                f"contact [@mkhorton](mailto:[email protected]).  \n"
+                f"Powered by [The Materials Project](https://materialsproject.org), "
+                f"[pymatgen v{pmg_version}](http://pymatgen.org) and "
+                f"[Dash by Plotly](https://plot.ly/products/dash/). "
+                f"Deployed on [Spin](http://www.nersc.gov/users/data-analytics/spin/)."
+            ),
+        ],
         className="content has-text-centered",
     ),
     style={"padding": "1rem 1rem 1rem", "background-color": "inherit"},
 )
 
+panel_choices = dcc.Dropdown(
+    options=[{"label": panel.title, "value": idx} for idx, panel in enumerate(panels)],
+    multi=True,
+    value=0,
+)
+
 # endregion
 
 
@@ -168,10 +210,11 @@
                         ),
                         Column(
                             [
-                                # search_component.standard_layout,
                                 Reveal(
-                                    [search_component.standard_layout,
-                                     favorites_component.favorite_materials_layout],
+                                    [
+                                        search_component.standard_layout,
+                                        favorites_component.favorite_materials_layout,
+                                    ],
                                     title="Load Crystal or Molecule",
                                     open=True,
                                     style={"line-height": "1"},
@@ -186,7 +229,7 @@
                                     ],
                                     title="Summary",
                                 ),
-                                #favorites_component.notes_layout,
+                                # favorites_component.notes_layout,
                             ],
                             style={"max-width": "65vmin"},
                         ),
@@ -198,15 +241,23 @@
                     [
                         Column(
                             [
-                                magnetism_component.panel_layout,
-                                robocrys_component.panel_layout,
-                                literature_component.panel_layout,
-                                Reveal(title="Bonding and Local Environments"),
-                                Reveal(
-                                    "Coming soon! Matt needs coffee 😪☕️",
-                                    title="Transform Crystal",
+                                dcc.Markdown(
+                                    [
+                                        "Crystal Toolkit offers various *panels* "
+                                        "which each provide different ways "
+                                        "of analyzing, transforming or retrieving information "
+                                        "about a material using "
+                                        "resources and tools available to "
+                                        "The Materials Project. Some panels retrieve data or run algorithms on demand, "
+                                        "so please allow some time for them to run. Explore these panels below."
+                                    ],
+                                    className="mpc-panel-description",
+                                ),
+                                # panel_choices,
+                                html.Div(
+                                    [panel.panel_layout for panel in panels],
+                                    id="panels",
                                 ),
-                                Reveal(title="JSON Editor"),
                             ]
                         )
                     ]
@@ -222,7 +273,7 @@
 
 
 ################################################################################
-# region SET UP API ROUTES (to support creating viewer links)
+# region SET UP API ROUTES (to support creating viewer links in future)
 ################################################################################
 
 
@@ -317,8 +368,7 @@ def update_url_pathname_from_search_term(data):
 
 
 @app.callback(
-    Output(struct_component.id(), "data"),
-    [Input(search_component.id(), "data")]
+    Output(struct_component.id(), "data"), [Input(search_component.id(), "data")]
 )
 def update_structure(search_mpid):
 
@@ -330,6 +380,7 @@ def update_structure(search_mpid):
 
     return MPComponent.to_data(struct)
 
+
 # endregion
 
 

assets/styles.css

@@ -123,3 +123,20 @@ details .input{
 }
 
 @import "../node_modules/bulma/bulma.sass";
+
+
+// style dash_core_component Dropdown
+.Select--multi .Select-value {
+	background-color: $primary;
+	//background-color: rgba(0, 126, 255, .08);
+	border-radius: 2px;
+	border: 1px solid #c2e0ff;
+	border: 1px solid rgba(0, 126, 255, .24);
+	color: $white;
+	display: inline-block;
+	font-size: .9em;
+	line-height: 1.4;
+	margin-left: 5px;
+	margin-top: 5px;
+	vertical-align: top
+}

assets/styles.css.map

@@ -34,10 +34,16 @@
 
 
 # convenience imports
-from mp_dash_components.components.json import JSONComponent
+from mp_dash_components.components.json import JSONEditor
 from mp_dash_components.components.search import SearchComponent
 from mp_dash_components.components.structure import StructureMoleculeComponent
 from mp_dash_components.components.favorites import FavoritesComponent
+from mp_dash_components.components.literature import LiteratureComponent
+from mp_dash_components.components.robocrys import RobocrysComponent
+from mp_dash_components.components.magnetism import MagnetismComponent
+#from mp_dash_components.components.bonding_graph import BondingGraphComponent
+from mp_dash_components.components.magnetism import MagnetismComponent
+from mp_dash_components.components.transformations.core import TransformationsComponent
 from mp_dash_components.helpers.layouts import *
 from mp_dash_components.helpers.scene import *
 from mp_dash_components.helpers.view import view

assets/styles.scss

@@ -29,7 +29,7 @@
 )
 
 from pymatgen.util.string import latexify_spacegroup
-
+from pymatgen import MPRester
 
 class DummyCache:
     @staticmethod
@@ -39,9 +39,6 @@ def memoize(*args, **kwargs):
 
 
 class MPComponent(ABC):
-    """
-
-    """
 
     _instances = {}
     _app_stores = []
@@ -61,7 +58,8 @@ def register_cache(cache):
     def all_app_stores():
         return html.Div(MPComponent._app_stores)
 
-    def __init__(self, id=None, origin_component=None, contents=None):
+    def __init__(self, contents=None, id=None, origin_component=None,
+                 mprester_cache_timeout=60*60*24):
         """
         :param id: a unique id for this component, if not specified a random
         one will be chosen
@@ -99,6 +97,17 @@ def __init__(self, id=None, origin_component=None, contents=None):
                 f"using MPComponent.register_cache(cache)."
             )
 
+        self.mprester_cache_timeout = mprester_cache_timeout
+
+        # a cached MPRester for convenience
+        @MPComponent.cache.memoize(timeout=mprester_cache_timeout)
+        def mpr_query(criteria, properties):
+            with MPRester() as mpr:
+                entries = mpr.query(criteria=criteria, properties=properties)
+            return entries
+
+        self.mpr_query = mpr_query
+
         if origin_component is None:
             self._canonical_store_id = self._id
             self.create_store(name=None, initial_data=contents)
@@ -156,16 +165,16 @@ def from_data(data):
         return loads(data, cls=MontyDecoder)
 
     def attach_from(
-        self, origin_component, origin_store_suffix=None, this_store_suffix=None
+        self, origin_component, origin_store_name=None, this_store_name=None
     ):
         """
         Link two MPComponents together.
 
         :param origin_component: An MPComponent
-        :param origin_store_suffix: The suffix for the Store layout in the
+        :param origin_store_name: The suffix for the Store layout in the
         origin component, e.g. "structure" or "mpid", if None will link to
         the component's default Store
-        :param this_store_suffix: The suffix for the Store layout in this
+        :param this_store_name: The suffix for the Store layout in this
         component to be linked to, this is usually equal to the
         origin_store_suffix
         :return:
@@ -174,8 +183,8 @@ def attach_from(
         if MPComponent.app is None:
             raise AttributeError("No app defined, callbacks cannot be created.")
 
-        origin_store_id = origin_component.id(origin_store_suffix)
-        dest_store_id = self.id(this_store_suffix)
+        origin_store_id = origin_component.id(origin_store_name)
+        dest_store_id = self.id(this_store_name)
 
         @MPComponent.app.callback(
             Output(dest_store_id, "data"),
@@ -312,10 +321,6 @@ def help(self):
         # TODO: Implement
         return None
 
-    @property
-    def warning(self):
-        return None
-
     @property
     def description(self):
         return None
@@ -337,15 +342,7 @@ def all_layouts(self):
             className="mpc-panel-description",
         )
 
-        if self.warning:
-            warning = Tag(
-                self.warning,
-                tag_type="warning"
-            )
-        else:
-            warning = html.Div()
-
-        contents = html.Div([message, warning, description, initial_contents])
+        contents = html.Div([message, description, initial_contents])
 
         panel = Reveal(
             title=self.title,
@@ -372,6 +369,7 @@ def update_message(self, new_store_contents):
                 "An error was encountered when trying to load this component, "
                 "please report this if it seems like a bug, thank you!"
             )
+            # TODO: add Issue badge here
             return MessageContainer(
                 [
                     MessageHeader("Error"),
@@ -392,8 +390,9 @@ def update_contents(*args, **kwargs):
 
         @app.callback(
             Output(self.id("contents"), "children"),
-            [Input(self.id("panel") + "_summary", "n_clicks")],
-            [State(self.id(), "data"), State(self.id("panel"), "open")],
+            [Input(self.id("panel") + "_summary", "n_clicks"),
+             Input(self.id(), "data")],
+            [State(self.id("panel"), "open")],
         )
         def load_contents(panel_n_clicks, store_contents, panel_initially_open):
             """