unaltraweb 0.3.0

data/assets/js/manual.js

@@ -0,0 +1,308 @@
+(function () {
+  var MIN_SCALE = 0.85;
+  var MAX_SCALE = 1.25;
+  var STEP = 0.1;
+  var pageTocCleanup = null;
+
+  function normalize(text) {
+    return (text || "")
+      .toString()
+      .toLowerCase()
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .replace(/\s+/g, " ")
+      .trim();
+  }
+
+  function slugify(text) {
+    return normalize(text).replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "section";
+  }
+
+  function uniqueId(base, seen) {
+    var id = base;
+    var index = 2;
+    while (document.getElementById(id) || seen[id]) {
+      id = base + "-" + index;
+      index += 1;
+    }
+    seen[id] = true;
+    return id;
+  }
+
+  function applyStoredFontScale() {
+    var stored = parseFloat(localStorage.getItem("unaltrawebManualFontScale") || "1");
+    if (!Number.isFinite(stored)) stored = 1;
+    document.documentElement.style.setProperty("--manual-font-scale", String(stored));
+    document.documentElement.style.setProperty("--manual-content-font-size", (1.02 * stored).toFixed(3) + "rem");
+    document.documentElement.style.setProperty("--manual-h2-font-size", (1.42 * stored).toFixed(3) + "rem");
+    document.documentElement.style.setProperty("--manual-h3-font-size", (1.16 * stored).toFixed(3) + "rem");
+  }
+
+  function setupFontControls() {
+    applyStoredFontScale();
+    document.querySelectorAll(".manual-font-menu").forEach(function (menu) {
+      if (menu.dataset.manualFontMenuReady) return;
+      menu.dataset.manualFontMenuReady = "true";
+      menu.addEventListener("click", function (event) {
+        event.stopPropagation();
+      });
+    });
+    document.querySelectorAll("[data-manual-font]").forEach(function (button) {
+      if (button.dataset.manualFontReady) return;
+      button.dataset.manualFontReady = "true";
+      button.addEventListener("click", function () {
+        var current = parseFloat(localStorage.getItem("unaltrawebManualFontScale") || "1");
+        if (!Number.isFinite(current)) current = 1;
+        if (button.dataset.manualFont === "increase") current = Math.min(MAX_SCALE, current + STEP);
+        if (button.dataset.manualFont === "decrease") current = Math.max(MIN_SCALE, current - STEP);
+        if (button.dataset.manualFont === "reset") current = 1;
+        current = Math.round(current * 100) / 100;
+        localStorage.setItem("unaltrawebManualFontScale", String(current));
+        applyStoredFontScale();
+      });
+    });
+  }
+
+  function addNumbering() {
+    var root = document.querySelector(".manual-main[data-chapter]");
+    if (!root) return;
+    root.querySelectorAll(".hd-num").forEach(function (node) { node.remove(); });
+    if (root.getAttribute("data-manual-numbered") === "false") return;
+
+    var chapter = parseInt(root.getAttribute("data-chapter"), 10);
+    if (!Number.isFinite(chapter) || chapter < 0) chapter = 1;
+    var section = 0;
+    var subsection = 0;
+    var subsubsection = 0;
+
+    function prefix(heading, value) {
+      var span = document.createElement("span");
+      span.className = "hd-num";
+      span.textContent = value;
+      heading.insertBefore(span, heading.firstChild);
+    }
+
+    var title = root.querySelector(".manual-chapter-header h1");
+    if (title) prefix(title, String(chapter));
+
+    root.querySelectorAll(".manual-content h2, .manual-content h3, .manual-content h4").forEach(function (heading) {
+      if (heading.tagName.toLowerCase() === "h2") {
+        section += 1;
+        subsection = 0;
+        subsubsection = 0;
+        prefix(heading, chapter + "." + section);
+      } else if (heading.tagName.toLowerCase() === "h3") {
+        if (section === 0) section = 1;
+        subsection += 1;
+        subsubsection = 0;
+        prefix(heading, chapter + "." + section + "." + subsection);
+      } else {
+        if (section === 0) section = 1;
+        if (subsection === 0) subsection = 1;
+        subsubsection += 1;
+        prefix(heading, chapter + "." + section + "." + subsection + "." + subsubsection);
+      }
+    });
+  }
+
+  function buildPageToc() {
+    var target = document.querySelector("[data-manual-page-toc]");
+    var container = document.querySelector("[data-manual-page-toc-container]");
+    var content = document.querySelector(".manual-content");
+    if (!target || !container || !content) return;
+
+    // Fourth-level headings are numbered in the text but intentionally omitted here.
+    var headings = Array.prototype.slice.call(content.querySelectorAll("h2, h3"));
+    target.innerHTML = "";
+    if (!headings.length) {
+      container.hidden = true;
+      return;
+    }
+
+    var seen = {};
+    var sections = [];
+    var current = null;
+
+    function appendLinkLabel(link, item) {
+      link.setAttribute("aria-label", item.number ? item.number + " " + item.text : item.text);
+      if (item.number) {
+        var number = document.createElement("span");
+        number.className = "manual-page-toc-number";
+        number.textContent = item.number;
+        link.appendChild(number);
+      }
+      var title = document.createElement("span");
+      title.className = "manual-page-toc-title";
+      title.textContent = item.text;
+      link.appendChild(title);
+    }
+
+    headings.forEach(function (heading) {
+      if (!heading.id) heading.id = uniqueId(slugify(heading.textContent), seen);
+      var cleanText = heading.textContent.replace(/^\s*\d+(?:\.\d+)*\s*/, "").trim();
+      var number = heading.querySelector(".hd-num") ? heading.querySelector(".hd-num").textContent : "";
+      var item = { heading: heading, number: number, text: cleanText };
+
+      if (heading.tagName.toLowerCase() === "h2" || !current) {
+        current = { parent: item, children: [] };
+        sections.push(current);
+      } else {
+        current.children.push(item);
+      }
+    });
+
+    sections.forEach(function (section) {
+      if (!section.children.length) {
+        var single = document.createElement("a");
+        single.className = "manual-page-toc-link";
+        single.href = "#" + section.parent.heading.id;
+        appendLinkLabel(single, section.parent);
+        target.appendChild(single);
+        return;
+      }
+
+      var details = document.createElement("details");
+      details.className = "manual-page-toc-section";
+      details.open = true;
+      var summary = document.createElement("summary");
+      var link = document.createElement("a");
+      link.href = "#" + section.parent.heading.id;
+      appendLinkLabel(link, section.parent);
+      summary.appendChild(link);
+      details.appendChild(summary);
+
+      var list = document.createElement("ol");
+      section.children.forEach(function (child) {
+        var item = document.createElement("li");
+        var sublink = document.createElement("a");
+        sublink.href = "#" + child.heading.id;
+        appendLinkLabel(sublink, child);
+        item.appendChild(sublink);
+        list.appendChild(item);
+      });
+      details.appendChild(list);
+      target.appendChild(details);
+    });
+
+    container.hidden = false;
+    setupPageTocActiveState(target, headings);
+  }
+
+  function setupPageTocActiveState(target, headings) {
+    if (pageTocCleanup) {
+      pageTocCleanup();
+      pageTocCleanup = null;
+    }
+
+    var links = Array.prototype.slice.call(target.querySelectorAll("a[href^='#']"));
+    if (!headings.length || !links.length) return;
+
+    var linkById = {};
+    links.forEach(function (link) {
+      var id = decodeURIComponent(link.getAttribute("href").slice(1));
+      linkById[id] = link;
+    });
+
+    function activate(id) {
+      links.forEach(function (link) {
+        link.classList.remove("active");
+        link.removeAttribute("aria-current");
+      });
+      var activeLink = linkById[id];
+      if (!activeLink) return;
+      activeLink.classList.add("active");
+      activeLink.setAttribute("aria-current", "location");
+      var parentSection = activeLink.closest("details");
+      if (parentSection) parentSection.open = true;
+    }
+
+    function currentHeadingId() {
+      var offset = Math.min(window.innerHeight * 0.28, 180);
+      var current = headings[0];
+      headings.forEach(function (heading) {
+        if (heading.getBoundingClientRect().top <= offset) current = heading;
+      });
+      return current.id;
+    }
+
+    var ticking = false;
+    function updateActive() {
+      ticking = false;
+      activate(currentHeadingId());
+    }
+    function scheduleUpdate() {
+      if (ticking) return;
+      ticking = true;
+      window.requestAnimationFrame(updateActive);
+    }
+
+    updateActive();
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+    pageTocCleanup = function () {
+      window.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+    };
+  }
+
+  function setupSidebarToggle() {
+    var layout = document.querySelector(".manual-layout");
+    if (!layout) return;
+    var storageKey = "unaltrawebManualSidebarCollapsed";
+    var mobileQuery = window.matchMedia("(max-width: 960px)");
+    var stored = localStorage.getItem(storageKey);
+    var collapsed = stored === null ? mobileQuery.matches : stored === "true";
+
+    function toggleButtons() {
+      return Array.prototype.slice.call(document.querySelectorAll("[data-manual-sidebar-toggle]"));
+    }
+
+    function updateToggleState(isCollapsed) {
+      layout.classList.toggle("manual-sidebar-collapsed", isCollapsed);
+      toggleButtons().forEach(function (button) {
+        button.classList.toggle("is-collapsed", isCollapsed);
+        button.classList.toggle("collapsed", isCollapsed && button.classList.contains("navbar-toggler"));
+        button.setAttribute("aria-expanded", isCollapsed ? "false" : "true");
+      });
+    }
+
+    updateToggleState(collapsed);
+    toggleButtons().forEach(function (button) {
+      if (button.dataset.manualToggleReady) return;
+      button.dataset.manualToggleReady = "true";
+      button.addEventListener("click", function (event) {
+        event.preventDefault();
+        var nowCollapsed = !layout.classList.contains("manual-sidebar-collapsed");
+        localStorage.setItem(storageKey, nowCollapsed ? "true" : "false");
+        updateToggleState(nowCollapsed);
+      });
+    });
+
+    if (layout.dataset.manualOutsideClickReady) return;
+    layout.dataset.manualOutsideClickReady = "true";
+    document.addEventListener("click", function (event) {
+      if (!mobileQuery.matches || layout.classList.contains("manual-sidebar-collapsed")) return;
+      var panel = layout.querySelector(".manual-toc-panel") || layout.querySelector(".manual-sidebar");
+      var clickedToggle = toggleButtons().some(function (button) {
+        return button.contains(event.target);
+      });
+      if ((panel && panel.contains(event.target)) || clickedToggle) return;
+      localStorage.setItem(storageKey, "true");
+      updateToggleState(true);
+    });
+  }
+
+  function enhanceManual() {
+    setupSidebarToggle();
+    setupFontControls();
+    addNumbering();
+    buildPageToc();
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", enhanceManual);
+  } else {
+    enhanceManual();
+  }
+  document.addEventListener("unaltraweb:contentchange", enhanceManual);
+})();

data/assets/js/masonry.js

@@ -0,0 +1,12 @@
+$(document).ready(function () {
+  // Init Masonry
+  var $grid = $(".grid").masonry({
+    gutter: 10,
+    horizontalOrder: true,
+    itemSelector: ".grid-item",
+  });
+  // Layout Masonry after each image loads
+  $grid.imagesLoaded().progress(function () {
+    $grid.masonry("layout");
+  });
+});

data/assets/js/mathjax-setup.js

@@ -0,0 +1,46 @@
+window.MathJax = {
+  loader: {
+    load: ["[tex]/cancel"],
+  },
+  tex: {
+    tags: window.unaltrawebMathJaxTags || "all",
+    packages: { "[+]": ["cancel"] },
+    inlineMath: [
+      ["$", "$"],
+      ["\\(", "\\)"],
+    ],
+    displayMath: [
+      ["$$", "$$"],
+      ["\\[", "\\]"],
+    ],
+    processEscapes: true,
+    processEnvironments: true,
+    macros: {
+      cm: "\\,\\mathrm{cm}",
+      mm: "\\,\\mathrm{mm}",
+      m: "\\,\\mathrm{m}",
+      km: "\\,\\mathrm{km}",
+      cms: "\\,\\mathrm{cm^2}",
+      squarekilometre: "\\,\\mathrm{km^2}",
+      hectare: "\\,\\mathrm{ha}",
+      ha: "\\,\\mathrm{ha}",
+    },
+  },
+  options: {
+    renderActions: {
+      addCss: [
+        200,
+        function (doc) {
+          const style = document.createElement("style");
+          style.innerHTML = `
+          .mjx-container {
+            color: inherit;
+          }
+        `;
+          document.head.appendChild(style);
+        },
+        "",
+      ],
+    },
+  },
+};

data/assets/js/mermaid-setup.js

@@ -0,0 +1,37 @@
+let mermaidTheme = determineComputedTheme() == "dark" ? "dark" : "default";
+
+/* Create mermaid diagram as another node and hide the code block, appending the mermaid node after it
+    this is done to enable retrieving the code again when changing theme between light/dark */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-mermaid").forEach((elem) => {
+      const svgCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create mermaid node */
+      let mermaid = document.createElement("pre");
+      mermaid.classList.add("mermaid");
+      const text = document.createTextNode(svgCode);
+      mermaid.appendChild(text);
+      backup.after(mermaid);
+    });
+
+    mermaid.initialize({ theme: mermaidTheme });
+
+    /* Zoomable mermaid diagrams */
+    if (typeof d3 !== "undefined") {
+      window.addEventListener("load", function () {
+        var svgs = d3.selectAll(".mermaid svg");
+        svgs.each(function () {
+          var svg = d3.select(this);
+          svg.html("<g>" + svg.html() + "</g>");
+          var inner = svg.select("g");
+          var zoom = d3.zoom().on("zoom", function (event) {
+            inner.attr("transform", event.transform);
+          });
+          svg.call(zoom);
+        });
+      });
+    }
+  }
+});

data/assets/js/newsletter.js

@@ -0,0 +1,105 @@
+function submitHandler(event) {
+  event.preventDefault();
+  var container = event.target.parentNode;
+  var form = container.querySelector(".newsletter-form");
+  var formInput = container.querySelector(".newsletter-form-input");
+  var success = container.querySelector(".newsletter-success");
+  var errorContainer = container.querySelector(".newsletter-error");
+  var errorMessage = container.querySelector(".newsletter-error-message");
+  var backButton = container.querySelector(".newsletter-back-button");
+  var submitButton = container.querySelector(".newsletter-form-button");
+  var loadingButton = container.querySelector(".newsletter-loading-button");
+
+  const rateLimit = () => {
+    errorContainer.style.display = "flex";
+    errorMessage.innerText = "Too many signups, please try again in a little while";
+    submitButton.style.display = "none";
+    formInput.style.display = "none";
+    backButton.style.display = "block";
+  };
+
+  // Compare current time with time of previous sign up
+  var time = new Date();
+  var timestamp = time.valueOf();
+  var previousTimestamp = localStorage.getItem("loops-form-timestamp");
+
+  // If last sign up was less than a minute ago
+  // display error
+  if (previousTimestamp && Number(previousTimestamp) + 60000 > timestamp) {
+    rateLimit();
+    return;
+  }
+  localStorage.setItem("loops-form-timestamp", timestamp);
+
+  submitButton.style.display = "none";
+  loadingButton.style.display = "flex";
+
+  var formBody = "userGroup=&email=" + encodeURIComponent(formInput.value);
+  fetch(event.target.action, {
+    method: "POST",
+    body: formBody,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+  })
+    .then((res) => [res.ok, res.json(), res])
+    .then(([ok, dataPromise, res]) => {
+      if (ok) {
+        // If response successful
+        // display success
+        success.style.display = "flex";
+        form.reset();
+      } else {
+        // If response unsuccessful
+        // display error message or response status
+        dataPromise.then((data) => {
+          errorContainer.style.display = "flex";
+          errorMessage.innerText = data.message ? data.message : res.statusText;
+        });
+      }
+    })
+    .catch((error) => {
+      // check for cloudflare error
+      if (error.message === "Failed to fetch") {
+        rateLimit();
+        return;
+      }
+      // If error caught
+      // display error message if available
+      errorContainer.style.display = "flex";
+      if (error.message) errorMessage.innerText = error.message;
+      localStorage.setItem("loops-form-timestamp", "");
+    })
+    .finally(() => {
+      formInput.style.display = "none";
+      loadingButton.style.display = "none";
+      backButton.style.display = "block";
+    });
+}
+function resetFormHandler(event) {
+  var container = event.target.parentNode;
+  var formInput = container.querySelector(".newsletter-form-input");
+  var success = container.querySelector(".newsletter-success");
+  var errorContainer = container.querySelector(".newsletter-error");
+  var errorMessage = container.querySelector(".newsletter-error-message");
+  var backButton = container.querySelector(".newsletter-back-button");
+  var submitButton = container.querySelector(".newsletter-form-button");
+
+  success.style.display = "none";
+  errorContainer.style.display = "none";
+  errorMessage.innerText = "Oops! Something went wrong, please try again";
+  backButton.style.display = "none";
+  formInput.style.display = "flex";
+  submitButton.style.display = "flex";
+}
+
+var formContainers = document.getElementsByClassName("newsletter-form-container");
+
+for (var i = 0; i < formContainers.length; i++) {
+  var formContainer = formContainers[i];
+  var handlersAdded = formContainer.classList.contains("newsletter-handlers-added");
+  if (handlersAdded) continue;
+  formContainer.querySelector(".newsletter-form").addEventListener("submit", submitHandler);
+  formContainer.querySelector(".newsletter-back-button").addEventListener("click", resetFormHandler);
+  formContainer.classList.add("newsletter-handlers-added");
+}

data/assets/js/no_defer.js

@@ -0,0 +1,24 @@
+// add bootstrap classes to tables
+$(document).ready(function () {
+  $("table").each(function () {
+    if (determineComputedTheme() == "dark") {
+      $(this).addClass("table-dark");
+    } else {
+      $(this).removeClass("table-dark");
+    }
+
+    // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class
+    if (
+      $(this).parents('[class*="news"]').length == 0 &&
+      $(this).parents('[class*="card"]').length == 0 &&
+      $(this).parents('[class*="archive"]').length == 0 &&
+      $(this).parents("code").length == 0
+    ) {
+      // make table use bootstrap-table
+      $(this).attr("data-toggle", "table");
+      // add some classes to make the table look better
+      // $(this).addClass('table-sm');
+      $(this).addClass("table-hover");
+    }
+  });
+});

data/assets/js/plotly-setup.js

@@ -0,0 +1,52 @@
+let plotlyTheme = determineComputedTheme();
+/* Create plotly chart as another node and hide the code block, appending the plotly node after it
+       this is done to enable retrieving the code again when changing theme between light/dark */
+document.addEventListener("readystatechange", () => {
+  if (document.readyState === "complete") {
+    document.querySelectorAll("pre>code.language-plotly").forEach((elem) => {
+      const jsonCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add("unloaded");
+      /* create plotly node */
+      let chartElement = document.createElement("div");
+      backup.after(chartElement);
+
+      /* create plotly */
+      var jsonData = JSON.parse(jsonCode);
+
+      if (plotlyTheme === "dark") {
+        // dark theme extracted from https://github.com/plotly/plotly.py/blob/main/plotly/package_data/templates/plotly_dark.json?raw=true
+        // prettier-ignore
+        const plotlyDarkLayout = {"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#f2f5fa"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"rgb(17,17,17)","plot_bgcolor":"rgb(17,17,17)","polar":{"bgcolor":"rgb(17,17,17)","angularaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"radialaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"ternary":{"bgcolor":"rgb(17,17,17)","aaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"baxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"caxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"yaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"zaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2}},"shapedefaults":{"line":{"color":"#f2f5fa"}},"annotationdefaults":{"arrowcolor":"#f2f5fa","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"rgb(17,17,17)","landcolor":"rgb(17,17,17)","subunitcolor":"#506784","showland":true,"showlakes":true,"lakecolor":"rgb(17,17,17)"},"title":{"x":0.05},"updatemenudefaults":{"bgcolor":"#506784","borderwidth":0},"sliderdefaults":{"bgcolor":"#C8D4E3","borderwidth":1,"bordercolor":"rgb(17,17,17)","tickwidth":0},"mapbox":{"style":"dark"}},"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"marker":{"line":{"color":"#283442"}},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#f2f5fa"},"error_y":{"color":"#f2f5fa"},"marker":{"line":{"color":"rgb(17,17,17)","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"marker":{"line":{"color":"#283442"}},"type":"scattergl"}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#A2B1C6","gridcolor":"#506784","linecolor":"#506784","minorgridcolor":"#506784","startlinecolor":"#A2B1C6"},"baxis":{"endlinecolor":"#A2B1C6","gridcolor":"#506784","linecolor":"#506784","minorgridcolor":"#506784","startlinecolor":"#A2B1C6"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#506784"},"line":{"color":"rgb(17,17,17)"}},"header":{"fill":{"color":"#2a3f5f"},"line":{"color":"rgb(17,17,17)"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"rgb(17,17,17)","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]}};
+
+        // if jsonData.layout exists, then update the theme
+        if (jsonData.layout) {
+          if (jsonData.layout.template) {
+            jsonData.layout.template = { ...plotlyDarkLayout, ...jsonData.layout.template };
+          } else {
+            jsonData.layout.template = plotlyDarkLayout;
+          }
+        } else {
+          jsonData.layout = { template: plotlyDarkLayout };
+        }
+      } else {
+        // light theme extracted from https://github.com/plotly/plotly.py/blob/main/plotly/package_data/templates/plotly_white.json?raw=true
+        // prettier-ignore
+        const plotlyLightLayout = {"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"white","polar":{"bgcolor":"white","angularaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""},"radialaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""}},"ternary":{"bgcolor":"white","aaxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"baxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"caxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"yaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"zaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"white","subunitcolor":"#C8D4E3","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox":{"style":"light"}},"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"white","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"#C8D4E3","linecolor":"#C8D4E3","minorgridcolor":"#C8D4E3","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"#C8D4E3","linecolor":"#C8D4E3","minorgridcolor":"#C8D4E3","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"white","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]}};
+
+        // if jsonData.layout exists, then update the theme
+        if (jsonData.layout) {
+          if (jsonData.layout.template) {
+            jsonData.layout.template = { ...plotlyLightLayout, ...jsonData.layout.template };
+          } else {
+            jsonData.layout.template = plotlyLightLayout;
+          }
+        } else {
+          jsonData.layout = { template: plotlyLightLayout };
+        }
+      }
+
+      Plotly.react(chartElement, jsonData.data, jsonData.layout);
+    });
+  }
+});