Overlay plot for comparing cyclic voltammetry

mkdocs.yml

@@ -58,8 +58,10 @@ extra_javascript:
   - javascripts/config.js
   - https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js
   - javascripts/tables.js
-  - https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js
+  - https://cdn.jsdelivr.net/npm/tablesort@5/src/tablesort.min.js
+  - https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js
   - javascripts/katex.js
   - https://cdn.jsdelivr.net/npm/katex@0.16/dist/katex.min.js
   - https://cdn.jsdelivr.net/npm/katex@0.16/dist/contrib/mhchem.min.js
   - https://cdn.jsdelivr.net/npm/katex@0.16/dist/contrib/auto-render.min.js
+  - https://cdn.plot.ly/plotly-3.1.0.min.js

pages/cv/index.md

@@ -21,6 +21,9 @@ as in **[Ionic Liquids](ionic_liquid.md)**, or it consists of a non-conductive s
 * **COOR**: CO Oxidation Reaction, usually studied in a CO saturated electrolyte.
 * **HER**: Hydrogen Evolution Reaction.
 
+## Individual Comparisons
+**[Compare](compare.md)**
+
 [^1]:
     Note that in the literature the abbreviation CV is sometimes
     used for the technique cyclic voltammetry.

pyproject.toml

@@ -31,7 +31,7 @@ mkdocs = "*"
 myst-nb = "*"
 myst-parser = "*"
 pip = "*"
-plotly = ">=5,<6" # Workaround for https://github.com/executablebooks/MyST-NB/issues/667
+plotly = "*"
 pylatexenc = "*"
 pylint = "*"
 pytest = "*"

templates/components/cv_compare_table.md

@@ -0,0 +1,5 @@
+| Selected |       | Substrate | Electrolyte {: .echemdb-expand-column } | Year {: .echemdb-hide-mobile } | Reference {: .echemdb-hide-mobile } |
+| -------- | ----- | --------- | ----------- | ---- | --------- |
+{% for entry in database %}
+| <input class="checkbox" type="checkbox" name="{{ entry.identifier }}" unchecked> {{entry.identifier}} | [![{{ entry.identifier}}](data:image/png;base64,{{ entry.thumbnail(96, 72) | b64encode }}){: .echemdb-cv-thumbnail }](entries/{{ entry.identifier }}.md) {: .echemdb-middle-cell } | {{ material }}({{ entry.get_electrode('WE').crystallographicOrientation }}) {: .echemdb-middle-cell } | {{ entry.system.electrolyte | render("components/electrolyte.md") }} {: .echemdb-middle-cell } | {{ database.bibliography.entries[entry.source.citationKey].fields['year'] }} {: .echemdb-hide-mobile .echemdb-middle-cell } | [ {{ entry.bibliography.persons['author'][0].last_names[0] | unicode }} ***et. al.*** Fig. {{ entry.source.figure }} ({{ entry.source.curve }})]({{ entry.source.url }}) {: .echemdb-hide-mobile .echemdb-middle-cell } |
+{% endfor %}

templates/pages/compare.md

@@ -0,0 +1,161 @@
+# Cyclic Voltammograms
+{{ intro }}
+<div id="vis"></div>
+Click a graph to add it to the comparison.
+
+
+
+<input type="text" id="filterInput" onkeyup="quickFilter()" placeholder="Filter list ..." title="Type in a name">
+
+{{ render("components/cv_compare_table.md", entries_path=entries_path, database=database) }}
+
+
+
+
+<script src="https://cdn.plot.ly/plotly-3.1.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+
+<script>
+
+var cache = {};
+var traces = [];
+
+var layout = {
+
+    xaxis: {
+        title: {
+            text: '<i>E</i> [V]',
+            font: {
+                family: 'Courier New, monospace',
+                size: 18,
+            }
+        },
+        showline: true,
+        zeroline: false,
+        ticks: "outside",
+        mirror: true,
+        side: "bottom"
+    },
+
+    yaxis: {
+        title: {
+            text: '<i>j</i> [A m⁻²]',
+            font: {
+                family: 'Courier New, monospace',
+                size: 18,
+            }
+        },
+        showline: true,
+        zeroline: true,
+        ticks: "outside",
+        mirror: true,
+        side: "left"
+    },
+    legend: {
+        yanchor: "top",
+        y: -0.3,
+        xanchor: "left",
+        x: 0.01
+    }
+};
+
+Plotly.newPlot('vis', traces, layout);
+
+function updatePlot(names) {
+    return Promise.all(
+            names.map(name => {
+                const source = name.split("_")
+                    .slice(0, -2)
+                    .join("_");
+                if (name in cache) {
+                    return cache[name];
+                } else {
+                    return d3.csv(["/data/generated/svgdigitizer/", source, "/", name, ".csv"].join(""), convertNumbers)
+                        .then(processData)
+                        .then(function (result) {
+                            return {
+                                x: result[0],
+                                y: result[1],
+                                name: name,
+                                type: 'scatter'
+                            }
+                        })
+                        .then(function (result) {
+                            cache[name] = result;
+                            return result;
+                        });
+                }
+            })
+        )
+        .then(function (traces) {
+            Plotly.newPlot('vis', traces, layout);
+        });
+};
+
+function convertNumbers(row) {
+    var r = {};
+    for (var k in row) {
+        r[k] = +row[k];
+        if (isNaN(r[k])) {
+            r[k] = row[k];
+        }
+    }
+    return r;
+}
+
+function processData(allRows) {
+    var x = [];
+    var y = [];
+    for (var i = 0; i < allRows.length; i++) {
+        row = allRows[i];
+        x.push(row['E']);
+        y.push(row['j']);
+    }
+
+    return [x, y]
+};
+
+// selection mechanism
+var selected_cyclic_voltammograms = [];
+// callback on selections for all checkboxes
+// not ideal since for every selection iterate over all checkboxes
+d3.selectAll(".checkbox")
+    .on("change", function (d, i) {
+        selected_cyclic_voltammograms = [...d3.selectAll("input[class='checkbox']:checked")
+            ._groups[0]
+        ].map(checkbox => {
+            return checkbox.name
+        });
+        updatePlot(selected_cyclic_voltammograms);
+    });
+
+function quickFilter() {
+    var input, filter, table, tr, i, f, trContent, results;
+    input = document.getElementById("filterInput");
+    filter = input.value.toUpperCase().split(" ");
+    table = document.getElementsByClassName("md-typeset__table")[0];
+    tr = table.getElementsByTagName("tr");
+    for (i = 1; i < tr.length; i++) {
+
+        trContent = tr[i].textContent.replace(/[\s]+/g, ' ');
+
+        if (trContent) {
+            results = []
+            for (f of filter)  {
+                if (trContent.toUpperCase().indexOf(f) > -1) {
+                    results.push(true);
+                } else {
+                    results.push(false);
+                }
+            }
+
+            if (results.every( (val, r, arr) => val === true )) {
+                tr[i].style.display = "";
+            } else {
+                tr[i].style.display = "none";
+            }
+        }       
+    }
+}
+
+</script>

website/filters/render.py

@@ -148,5 +148,8 @@ def render_plot(entry):
     fig.update_yaxes(
         showline=True, mirror=True, range=(y_min - y_padding, y_max + y_padding)
     )
-
-    return fig._repr_html_()  # pylint: disable=W0212
+    return fig.to_html(
+        full_html=False,
+        include_plotlyjs="https://cdn.plot.ly/plotly-3.1.0.min.js",
+        include_mathjax=False,
+    )

website/generator/__main__.py

@@ -77,6 +77,18 @@ def main():
         )
     t_aqueous = time.time() - t_aqueous_start
     print(f"Generated aqueous overview page in {t_aqueous:.2f} seconds")
+
+    # Create an overview page with tabulated and linked entries for all systems to compare.
+    with mkdocs_gen_files.open(os.path.join("cv", "compare.md"), "w") as markdown:
+        markdown.write(
+            render(
+                "pages/compare.md",
+                database=database,
+                intro="Cyclic voltammograms to compare.",
+                material_filter=material_filter(),
+            )
+        )
+
     t_coor_start = time.time()
     # Create an overview page with tabulated and linked entries for CO oxidation (COOR) in aqueous systems.
     with mkdocs_gen_files.open(
@@ -110,6 +122,7 @@ def main():
                 material_filter=material_filter(),
             )
         )
+
     t_ionic_liquid = time.time() - t_ionic_liquid_start
     print(f"Generated ionic liquid overview page in {t_ionic_liquid:.2f} seconds")
 

website/generator/database.py

@@ -37,11 +37,15 @@
 # ********************************************************************
 import os
 
+from mkdocs.config import load_config
 from unitpackage.database.echemdb import Echemdb
 
+config = load_config("mkdocs.yml")
+
 ECHEMDB_DATABASE_URL = os.environ.get(
     "ECHEMDB_DATABASE_URL",
     "https://github.com/echemdb/electrochemistry-data/releases/download/0.5.1/data-0.5.1.zip",
 )
 
 cv = Echemdb.from_remote(url=ECHEMDB_DATABASE_URL)
+cv.save_entries(outdir=os.path.join(config["site_dir"], "data"))