feat(templates): add template mdl

bondia/gui.py

@@ -64,11 +64,11 @@ def update_days(day_selector, event):
 
         # Add a title over the plots showing the selected day and rev (and keep it updated)
         data_description = pn.pane.Markdown(
-            f"<h1>LSD {day_selector.value} - {rev_selector.value}</h1>", width=600
+            f"<h4>LSD {day_selector.value} - {rev_selector.value}</h4>", width=800
         )
 
         def update_data_description_day(data_description, event):
-            data_description.object = f"<h1>LSD {event.new} - {rev_selector.value}</h1>"
+            data_description.object = f"<h4>LSD {event.new} - {rev_selector.value}</h4>"
 
         # It's enough to link the day selector to the description, since the revision selector
         # already is linked to the day selector in update_days.
@@ -79,6 +79,8 @@ def update_data_description_day(data_description, event):
         # Fill the template with components
         components = [
             ("data_description", data_description),
+            ("data_description1", data_description),
+            ("data_description2", data_description),
             ("day_selector", day_selector),
             ("rev_selector", rev_selector),
         ]

bondia/server.py

@@ -21,7 +21,7 @@ class BondiaServer(Reader):
     logging = logging_config(default={"root": "INFO"})
     _config_data = Property({}, proptype=dict, key="data")
     _config_plots = Property({}, proptype=dict, key="plots")
-    _template_name = Property("mwc", str, "html_template")
+    _template_name = Property("mdl", proptype=str, key="html_template")
     _width_drawer_widgets = Property(220, int)
     _root_url = Property(proptype=str, default="", key="root_url")
 

bondia/templates/mdl.html

@@ -0,0 +1,74 @@
+<!-- Simple header with fixed tabs. -->
+{% extends base %}
+
+<!-- goes in head -->
+{% block postamble %}
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-deep_orange.min.css" />
+<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block contents %}
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
+            mdl-layout--fixed-tabs">
+  <header class="mdl-layout__header">
+    <div class="mdl-layout__header-row">
+      <span class="mdl-layout-title">{{ subtitle }}</span>
+    </div>
+
+    <!-- Tabs -->
+    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+      <a href="#delayspectrum" class="mdl-layout__tab is-active">Delay Spectrum</a>
+      <a href="#ringmap" class="mdl-layout__tab">Ringmap</a>
+      <a href="#sensitivity" class="mdl-layout__tab">Sensitivity</a>
+    </div>
+  </header>
+  <div class="mdl-layout__drawer">
+    <span class="mdl-layout-title"><a href="https://github.com/chime-experiment/bondia" target="_blank">
+            <i class="fab fa-github"></i></a>  {{ app_title }}</span>
+      <div align="center"><p>User: <i>{{ username }}</i></p></div>
+        <hr>
+        <div align="center"><h4>Select Data</h4></div>
+        {{ embed(roots.rev_selector) }}
+        {{ embed(roots.day_selector) }}
+        <hr>
+        <div align="center"><h4>Select Plots</h4></div>
+        <div>{{ embed(roots.toggle_delay_spectrum) }}</div>
+        <div>{{ embed(roots.toggle_ringmap) }}</div>
+        <hr>
+        <div align="center"><h4>Decision</h4></div>
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+            Mark day as good
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+            Mark day as bad
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+            I don't know
+        </button>
+  </div>
+  <main class="mdl-layout__content">
+    <section class="mdl-layout__tab-panel is-active" id="delayspectrum">
+      <div class="page-content">
+          {{ embed(roots.data_description) }}
+          {{ embed(roots.plot_delay_spectrum) }}
+      </div>
+    </section>
+    <section class="mdl-layout__tab-panel" id="ringmap">
+      <div class="page-content">
+          {{ embed(roots.data_description1) }}
+          {{ embed(roots.plot_ringmap) }}
+      </div>
+    </section>
+    <section class="mdl-layout__tab-panel" id="sensitivity">
+      <div class="page-content">
+          {{ embed(roots.data_description2) }}
+          <p>Nothing here yet...</p>
+      </div>
+    </section>
+  </main>
+</div>
+{% endblock %}

bondia/templates/mwc.html

@@ -12,6 +12,11 @@
 <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
 <link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet" type="text/css">
 
+<!-- List unused components here -->
+<div style="display: none;">
+{{ embed(roots.data_description1) }}{{ embed(roots.data_description2) }}
+</div>
+
 <style>
 body {
     font-family: roboto;
@@ -68,7 +73,7 @@
             <mwc-icon-button icon="perm_identity" slot="actionItems" label="Login"></mwc-icon-button>
         </mwc-top-app-bar-fixed>
         <div class="appMain">
-            {{ embed(roots.data_description) }}
+            <h1>{{ embed(roots.data_description) }}</h1>
             <h2>{{ title_delay_spectrum }}</h2>
             {{ embed(roots.plot_delay_spectrum) }}
             <h2>{{ title_ringmap }}</h2>

setup.py

@@ -27,7 +27,7 @@
     url="http://github.com/chime-experiment/bondia",
     install_requires=requires,
     package_data={
-        "bondia.templates": ["material.html", "mwc.html"],
+        "bondia.templates": ["material.html", "mwc.html", "mdl.html"],
         "bondia": ["login.html"],
     },
 )