Overlay plot for comparing cyclic voltammetry

.github/workflows/build.yml

@@ -38,6 +38,8 @@ jobs:
           # Since no browser is installed during this CI run, plotly fails to
           # produce HTML output, see https://github.com/plotly/plotly.py/blob/2c2dd6ab2eeff73c782457f33c590c1d09a97625/packages/python/plotly/plotly/io/_renderers.py#L532
           export PLOTLY_RENDERER=browser
+          # disable hook to copy data which is a convenience function for local deployment/testing
+          export ENABLE_MKDOCS_COPY_DATA=False
           mkdocs build --strict
           mv data generated/website/
           # Disable further processing by GitHub

environment.yml

@@ -39,3 +39,4 @@ dependencies:
     - pymdown-extensions>=9.2,<10
     - python-frontmatter
     - tabulate
+    - mkdocs-simple-hooks

mkdocs.yml

@@ -25,6 +25,10 @@ plugins:
   - section-index
   - literate-nav:
       nav_file: NAVIGATION.md
+  - mkdocs-simple-hooks:
+      enabled: !ENV [ENABLE_MKDOCS_COPY_DATA, True]
+      hooks:
+        on_post_build: "website.hooks:copy_data"
 
 markdown_extensions:
   - extra

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.

pages/javascripts/compare.js

@@ -0,0 +1,140 @@
+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);
+
+async function updatePlot(names) {
+    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";
+            }
+        }       
+    }
+}

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 }](/cv/entries/{{ entry.identifier }}) {: .echemdb-middle-cell } | {{ entry.system.electrodes.working_electrode.material }}({{ entry.system.electrodes.working_electrode.crystallographic_orientation }}) {: .echemdb-middle-cell } | {{ entry.system.electrolyte | render("components/electrolyte.md") }} {: .echemdb-middle-cell } | {{ database.bibliography.entries[entry.source.citation_key].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,14 @@
+# 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-2.12.1.min.js"></script>
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script src="/javascripts/compare.js"></script>

website/generator/__main__.py

@@ -96,6 +96,16 @@ def main():
                 material_filter=material_filter(),
             )
         )
+    # 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(),
+            )
+        )
 
 
 def material_filter():

website/hooks.py

@@ -0,0 +1,9 @@
+"""Hooks for local usage."""
+import os
+import shutil
+
+
+def copy_data(config):
+    """Copy the data to the website folder."""
+    site_dir = config["site_dir"]
+    shutil.copytree("data", os.path.join(site_dir, "data"))