build based on e6474b1

dev/.documenter-siteinfo.json

@@ -1 +1 @@
-{"documenter":{"julia_version":"1.9.3","generation_timestamp":"2023-10-16T12:03:36","documenter_version":"1.1.1"}}
+{"documenter":{"julia_version":"1.10.4","generation_timestamp":"2024-08-19T14:06:53","documenter_version":"1.5.0"}}

dev/assets/documenter.js

@@ -4,7 +4,6 @@ requirejs.config({
     'highlight-julia': 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/julia.min',
     'headroom': 'https://cdnjs.cloudflare.com/ajax/libs/headroom/0.12.0/headroom.min',
     'jqueryui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min',
-    'minisearch': 'https://cdn.jsdelivr.net/npm/minisearch@6.1.0/dist/umd/index.min',
     'katex-auto-render': 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/contrib/auto-render.min',
     'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min',
     'headroom-jquery': 'https://cdnjs.cloudflare.com/ajax/libs/headroom/0.12.0/jQuery.headroom.min',
@@ -103,9 +102,10 @@ $(document).on("click", ".docstring header", function () {
   });
 });
 
-$(document).on("click", ".docs-article-toggle-button", function () {
+$(document).on("click", ".docs-article-toggle-button", function (event) {
   let articleToggleTitle = "Expand docstring";
   let navArticleToggleTitle = "Expand all docstrings";
+  let animationSpeed = event.noToggleAnimation ? 0 : 400;
 
   debounce(() => {
     if (isExpanded) {
@@ -116,7 +116,7 @@ $(document).on("click", ".docs-article-toggle-button", function () {
 
       isExpanded = false;
 
-      $(".docstring section").slideUp();
+      $(".docstring section").slideUp(animationSpeed);
     } else {
       $(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
       $(".docstring-article-toggle-button")
@@ -127,7 +127,7 @@ $(document).on("click", ".docs-article-toggle-button", function () {
       articleToggleTitle = "Collapse docstring";
       navArticleToggleTitle = "Collapse all docstrings";
 
-      $(".docstring section").slideDown();
+      $(".docstring section").slideDown(animationSpeed);
     }
 
     $(this).prop("title", navArticleToggleTitle);
@@ -224,15 +224,93 @@ $(document).ready(function () {
 
 })
 ////////////////////////////////////////////////////////////////////////////////
-require(['jquery', 'minisearch'], function($, minisearch) {
+require(['jquery'], function($) {
 
-// In general, most search related things will have "search" as a prefix.
+$(document).ready(function () {
-// To get an in-depth about the thought process you can refer: https://hetarth02.hashnode.dev/series/gsoc
+  let meta = $("div[data-docstringscollapsed]").data();
 
-let results = [];
+  if (meta?.docstringscollapsed) {
-let timer = undefined;
+    $("#documenter-article-toggle-button").trigger({
+      type: "click",
+      noToggleAnimation: true,
+    });
+  }
+});
 
-let data = documenterSearchIndex["docs"].map((x, key) => {
+})
+////////////////////////////////////////////////////////////////////////////////
+require(['jquery'], function($) {
+
+/*
+To get an in-depth about the thought process you can refer: https://hetarth02.hashnode.dev/series/gsoc
+
+PSEUDOCODE:
+
+Searching happens automatically as the user types or adjusts the selected filters.
+To preserve responsiveness, as much as possible of the slow parts of the search are done
+in a web worker. Searching and result generation are done in the worker, and filtering and
+DOM updates are done in the main thread. The filters are in the main thread as they should
+be very quick to apply. This lets filters be changed without re-searching with minisearch
+(which is possible even if filtering is on the worker thread) and also lets filters be
+changed _while_ the worker is searching and without message passing (neither of which are
+possible if filtering is on the worker thread)
+
+SEARCH WORKER:
+
+Import minisearch
+
+Build index
+
+On message from main thread
+  run search
+  find the first 200 unique results from each category, and compute their divs for display
+    note that this is necessary and sufficient information for the main thread to find the
+    first 200 unique results from any given filter set
+  post results to main thread
+
+MAIN:
+
+Launch worker
+
+Declare nonconstant globals (worker_is_running,  last_search_text, unfiltered_results)
+
+On text update
+  if worker is not running, launch_search()
+
+launch_search
+  set worker_is_running to true, set last_search_text to the search text
+  post the search query to worker
+
+on message from worker
+  if last_search_text is not the same as the text in the search field,
+    the latest search result is not reflective of the latest search query, so update again
+    launch_search()
+  otherwise
+    set worker_is_running to false
+
+  regardless, display the new search results to the user
+  save the unfiltered_results as a global
+  update_search()
+
+on filter click
+  adjust the filter selection
+  update_search()
+
+update_search
+  apply search filters by looping through the unfiltered_results and finding the first 200
+    unique results that match the filters
+
+  Update the DOM
+*/
+
+/////// SEARCH WORKER ///////
+
+function worker_function(documenterSearchIndex, documenterBaseURL, filters) {
+  importScripts(
+    "https://cdn.jsdelivr.net/npm/minisearch@6.1.0/dist/umd/index.min.js"
+  );
+
+  let data = documenterSearchIndex.map((x, key) => {
     x["id"] = key; // minisearch requires a unique for each object
     return x;
   });
@@ -348,9 +426,9 @@ const stopWords = new Set([
     "your",
   ]);
 
-let index = new minisearch({
+  let index = new MiniSearch({
     fields: ["title", "text"], // fields to index for full-text search
-  storeFields: ["location", "title", "text", "category", "page"], // fields to return with search results
+    storeFields: ["location", "title", "text", "category", "page"], // fields to return with results
     processTerm: (term) => {
       let word = stopWords.has(term) ? null : term;
       if (word) {
@@ -358,90 +436,262 @@ let index = new minisearch({
         word = word
           .replace(/^[^a-zA-Z0-9@!]+/, "")
           .replace(/[^a-zA-Z0-9@!]+$/, "");
+
+        word = word.toLowerCase();
       }
 
       return word ?? null;
     },
-  // add . as a separator, because otherwise "title": "Documenter.Anchors.add!", would not find anything if searching for "add!", only for the entire qualification
+    // add . as a separator, because otherwise "title": "Documenter.Anchors.add!", would not
+    // find anything if searching for "add!", only for the entire qualification
     tokenize: (string) => string.split(/[\s\-\.]+/),
     // options which will be applied during the search
     searchOptions: {
+      prefix: true,
       boost: { title: 100 },
       fuzzy: 2,
-    processTerm: (term) => {
-      let word = stopWords.has(term) ? null : term;
-      if (word) {
-        word = word
-          .replace(/^[^a-zA-Z0-9@!]+/, "")
-          .replace(/[^a-zA-Z0-9@!]+$/, "");
-      }
-
-      return word ?? null;
-    },
-    tokenize: (string) => string.split(/[\s\-\.]+/),
     },
   });
 
   index.addAll(data);
 
-let filters = [...new Set(data.map((x) => x.category))];
+  /**
-var modal_filters = make_modal_body_filters(filters);
+   *  Used to map characters to HTML entities.
-var filter_results = [];
+   * Refer: https://github.com/lodash/lodash/blob/main/src/escape.ts
+   */
+  const htmlEscapes = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+  };
 
-$(document).on("keyup", ".documenter-search-input", function (event) {
+  /**
-  // Adding a debounce to prevent disruptions from super-speed typing!
+   * Used to match HTML entities and HTML characters.
-  debounce(() => update_search(filter_results), 300);
+   * Refer: https://github.com/lodash/lodash/blob/main/src/escape.ts
+   */
+  const reUnescapedHtml = /[&<>"']/g;
+  const reHasUnescapedHtml = RegExp(reUnescapedHtml.source);
+
+  /**
+   * Escape function from lodash
+   * Refer: https://github.com/lodash/lodash/blob/main/src/escape.ts
+   */
+  function escape(string) {
+    return string && reHasUnescapedHtml.test(string)
+      ? string.replace(reUnescapedHtml, (chr) => htmlEscapes[chr])
+      : string || "";
+  }
+
+  /**
+   * RegX escape function from MDN
+   * Refer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
+   */
+  function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+  }
+
+  /**
+   * Make the result component given a minisearch result data object and the value
+   * of the search input as queryString. To view the result object structure, refer:
+   * https://lucaong.github.io/minisearch/modules/_minisearch_.html#searchresult
+   *
+   * @param {object} result
+   * @param {string} querystring
+   * @returns string
+   */
+  function make_search_result(result, querystring) {
+    let search_divider = `<div class="search-divider w-100"></div>`;
+    let display_link =
+      result.location.slice(Math.max(0), Math.min(50, result.location.length)) +
+      (result.location.length > 30 ? "..." : ""); // To cut-off the link because it messes with the overflow of the whole div
+
+    if (result.page !== "") {
+      display_link += ` (${result.page})`;
+    }
+    searchstring = escapeRegExp(querystring);
+    let textindex = new RegExp(`${searchstring}`, "i").exec(result.text);
+    let text =
+      textindex !== null
+        ? result.text.slice(
+            Math.max(textindex.index - 100, 0),
+            Math.min(
+              textindex.index + querystring.length + 100,
+              result.text.length
+            )
+          )
+        : ""; // cut-off text before and after from the match
+
+    text = text.length ? escape(text) : "";
+
+    let display_result = text.length
+      ? "..." +
+        text.replace(
+          new RegExp(`${escape(searchstring)}`, "i"), // For first occurrence
+          '<span class="search-result-highlight py-1">$&</span>'
+        ) +
+        "..."
+      : ""; // highlights the match
+
+    let in_code = false;
+    if (!["page", "section"].includes(result.category.toLowerCase())) {
+      in_code = true;
+    }
+
+    // We encode the full url to escape some special characters which can lead to broken links
+    let result_div = `
+        <a href="${encodeURI(
+          documenterBaseURL + "/" + result.location
+        )}" class="search-result-link w-100 is-flex is-flex-direction-column gap-2 px-4 py-2">
+          <div class="w-100 is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-flex-start">
+            <div class="search-result-title has-text-weight-bold ${
+              in_code ? "search-result-code-title" : ""
+            }">${escape(result.title)}</div>
+            <div class="property-search-result-badge">${result.category}</div>
+          </div>
+          <p>
+            ${display_result}
+          </p>
+          <div
+            class="has-text-left"
+            style="font-size: smaller;"
+            title="${result.location}"
+          >
+            <i class="fas fa-link"></i> ${display_link}
+          </div>
+        </a>
+        ${search_divider}
+      `;
+
+    return result_div;
+  }
+
+  self.onmessage = function (e) {
+    let query = e.data;
+    let results = index.search(query, {
+      filter: (result) => {
+        // Only return relevant results
+        return result.score >= 1;
+      },
+      combineWith: "AND",
     });
 
+    // Pre-filter to deduplicate and limit to 200 per category to the extent
+    // possible without knowing what the filters are.
+    let filtered_results = [];
+    let counts = {};
+    for (let filter of filters) {
+      counts[filter] = 0;
+    }
+    let present = {};
+
+    for (let result of results) {
+      cat = result.category;
+      cnt = counts[cat];
+      if (cnt < 200) {
+        id = cat + "---" + result.location;
+        if (present[id]) {
+          continue;
+        }
+        present[id] = true;
+        filtered_results.push({
+          location: result.location,
+          category: cat,
+          div: make_search_result(result, query),
+        });
+      }
+    }
+
+    postMessage(filtered_results);
+  };
+}
+
+// `worker = Threads.@spawn worker_function(documenterSearchIndex)`, but in JavaScript!
+const filters = [
+  ...new Set(documenterSearchIndex["docs"].map((x) => x.category)),
+];
+const worker_str =
+  "(" +
+  worker_function.toString() +
+  ")(" +
+  JSON.stringify(documenterSearchIndex["docs"]) +
+  "," +
+  JSON.stringify(documenterBaseURL) +
+  "," +
+  JSON.stringify(filters) +
+  ")";
+const worker_blob = new Blob([worker_str], { type: "text/javascript" });
+const worker = new Worker(URL.createObjectURL(worker_blob));
+
+/////// SEARCH MAIN ///////
+
+// Whether the worker is currently handling a search. This is a boolean
+// as the worker only ever handles 1 or 0 searches at a time.
+var worker_is_running = false;
+
+// The last search text that was sent to the worker. This is used to determine
+// if the worker should be launched again when it reports back results.
+var last_search_text = "";
+
+// The results of the last search. This, in combination with the state of the filters
+// in the DOM, is used compute the results to display on calls to update_search.
+var unfiltered_results = [];
+
+// Which filter is currently selected
+var selected_filter = "";
+
+$(document).on("input", ".documenter-search-input", function (event) {
+  if (!worker_is_running) {
+    launch_search();
+  }
+});
+
+function launch_search() {
+  worker_is_running = true;
+  last_search_text = $(".documenter-search-input").val();
+  worker.postMessage(last_search_text);
+}
+
+worker.onmessage = function (e) {
+  if (last_search_text !== $(".documenter-search-input").val()) {
+    launch_search();
+  } else {
+    worker_is_running = false;
+  }
+
+  unfiltered_results = e.data;
+  update_search();
+};
+
 $(document).on("click", ".search-filter", function () {
   if ($(this).hasClass("search-filter-selected")) {
-    $(this).removeClass("search-filter-selected");
+    selected_filter = "";
   } else {
-    $(this).addClass("search-filter-selected");
+    selected_filter = $(this).text().toLowerCase();
   }
 
-  // Adding a debounce to prevent disruptions from crazy clicking!
+  // This updates search results and toggles classes for UI:
-  debounce(() => get_filters(), 300);
+  update_search();
 });
 
-/**
- * A debounce function, takes a function and an optional timeout in milliseconds
- *
- * @function callback
- * @param {number} timeout
- */
-function debounce(callback, timeout = 300) {
-  clearTimeout(timer);
-  timer = setTimeout(callback, timeout);
-}
-
 /**
  * Make/Update the search component
- *
- * @param {string[]} selected_filters
  */
-function update_search(selected_filters = []) {
+function update_search() {
-  let initial_search_body = `
-      <div class="has-text-centered my-5 py-5">Type something to get started!</div>
-    `;
-
   let querystring = $(".documenter-search-input").val();
 
   if (querystring.trim()) {
-    results = index.search(querystring, {
+    if (selected_filter == "") {
-      filter: (result) => {
+      results = unfiltered_results;
-        // Filtering results
-        if (selected_filters.length === 0) {
-          return result.score >= 1;
     } else {
-          return (
+      results = unfiltered_results.filter((result) => {
-            result.score >= 1 && selected_filters.includes(result.category)
+        return selected_filter == result.category.toLowerCase();
-          );
-        }
-      },
       });
+    }
 
     let search_result_container = ``;
+    let modal_filters = make_modal_body_filters();
     let search_divider = `<div class="search-divider w-100"></div>`;
 
     if (results.length) {
@@ -449,19 +699,23 @@ function update_search(selected_filters = []) {
       let count = 0;
       let search_results = "";
 
-      results.forEach(function (result) {
+      for (var i = 0, n = results.length; i < n && count < 200; ++i) {
-        if (result.location) {
+        let result = results[i];
-          // Checking for duplication of results for the same page
+        if (result.location && !links.includes(result.location)) {
-          if (!links.includes(result.location)) {
+          search_results += result.div;
-            search_results += make_search_result(result, querystring);
           count++;
-          }
-
           links.push(result.location);
         }
-      });
+      }
 
-      let result_count = `<div class="is-size-6">${count} result(s)</div>`;
+      if (count == 1) {
+        count_str = "1 result";
+      } else if (count == 200) {
+        count_str = "200+ results";
+      } else {
+        count_str = count + " results";
+      }
+      let result_count = `<div class="is-size-6">${count_str}</div>`;
 
       search_result_container = `
             <div class="is-flex is-flex-direction-column gap-2 is-align-items-flex-start">
@@ -490,125 +744,37 @@ function update_search(selected_filters = []) {
 
     $(".search-modal-card-body").html(search_result_container);
   } else {
-    filter_results = [];
-    modal_filters = make_modal_body_filters(filters, filter_results);
-
     if (!$(".search-modal-card-body").hasClass("is-justify-content-center")) {
       $(".search-modal-card-body").addClass("is-justify-content-center");
     }
 
-    $(".search-modal-card-body").html(initial_search_body);
+    $(".search-modal-card-body").html(`
+      <div class="has-text-centered my-5 py-5">Type something to get started!</div>
+    `);
   }
 }
 
 /**
  * Make the modal filter html
  *
- * @param {string[]} filters
- * @param {string[]} selected_filters
  * @returns string
  */
-function make_modal_body_filters(filters, selected_filters = []) {
+function make_modal_body_filters() {
-  let str = ``;
+  let str = filters
-
+    .map((val) => {
-  filters.forEach((val) => {
+      if (selected_filter == val.toLowerCase()) {
-    if (selected_filters.includes(val)) {
+        return `<a href="javascript:;" class="search-filter search-filter-selected"><span>${val}</span></a>`;
-      str += `<a href="javascript:;" class="search-filter search-filter-selected"><span>${val}</span></a>`;
       } else {
-      str += `<a href="javascript:;" class="search-filter"><span>${val}</span></a>`;
+        return `<a href="javascript:;" class="search-filter"><span>${val}</span></a>`;
       }
-  });
+    })
+    .join("");
 
-  let filter_html = `
+  return `
         <div class="is-flex gap-2 is-flex-wrap-wrap is-justify-content-flex-start is-align-items-center search-filters">
             <span class="is-size-6">Filters:</span>
             ${str}
-        </div>
+        </div>`;
-    `;
-
-  return filter_html;
-}
-
-/**
- * Make the result component given a minisearch result data object and the value of the search input as queryString.
- * To view the result object structure, refer: https://lucaong.github.io/minisearch/modules/_minisearch_.html#searchresult
- *
- * @param {object} result
- * @param {string} querystring
- * @returns string
- */
-function make_search_result(result, querystring) {
-  let search_divider = `<div class="search-divider w-100"></div>`;
-  let display_link =
-    result.location.slice(Math.max(0), Math.min(50, result.location.length)) +
-    (result.location.length > 30 ? "..." : ""); // To cut-off the link because it messes with the overflow of the whole div
-
-  if (result.page !== "") {
-    display_link += ` (${result.page})`;
-  }
-
-  let textindex = new RegExp(`\\b${querystring}\\b`, "i").exec(result.text);
-  let text =
-    textindex !== null
-      ? result.text.slice(
-          Math.max(textindex.index - 100, 0),
-          Math.min(
-            textindex.index + querystring.length + 100,
-            result.text.length
-          )
-        )
-      : ""; // cut-off text before and after from the match
-
-  let display_result = text.length
-    ? "..." +
-      text.replace(
-        new RegExp(`\\b${querystring}\\b`, "i"), // For first occurrence
-        '<span class="search-result-highlight p-1">$&</span>'
-      ) +
-      "..."
-    : ""; // highlights the match
-
-  let in_code = false;
-  if (!["page", "section"].includes(result.category.toLowerCase())) {
-    in_code = true;
-  }
-
-  // We encode the full url to escape some special characters which can lead to broken links
-  let result_div = `
-      <a href="${encodeURI(
-        documenterBaseURL + "/" + result.location
-      )}" class="search-result-link w-100 is-flex is-flex-direction-column gap-2 px-4 py-2">
-        <div class="w-100 is-flex is-flex-wrap-wrap is-justify-content-space-between is-align-items-flex-start">
-          <div class="search-result-title has-text-weight-bold ${
-            in_code ? "search-result-code-title" : ""
-          }">${result.title}</div>
-          <div class="property-search-result-badge">${result.category}</div>
-        </div>
-        <p>
-          ${display_result}
-        </p>
-        <div
-          class="has-text-left"
-          style="font-size: smaller;"
-          title="${result.location}"
-        >
-          <i class="fas fa-link"></i> ${display_link}
-        </div>
-      </a>
-      ${search_divider}
-    `;
-
-  return result_div;
-}
-
-/**
- * Get selected filters, remake the filter html and lastly update the search modal
- */
-function get_filters() {
-  let ele = $(".search-filters .search-filter-selected").get();
-  filter_results = ele.map((x) => $(x).text().toLowerCase());
-  modal_filters = make_modal_body_filters(filters, filter_results);
-  update_search(filter_results);
 }
 
 })
@@ -635,6 +801,7 @@ $(document).ready(function () {
 ////////////////////////////////////////////////////////////////////////////////
 require(['jquery'], function($) {
 
+$(document).ready(function () {
   let search_modal_header = `
     <header class="modal-card-head gap-2 is-align-items-center is-justify-content-space-between w-100 px-3">
       <div class="field mb-0 w-100">
@@ -684,7 +851,9 @@ document.querySelector(".docs-search-query").addEventListener("click", () => {
     openModal();
   });
 
-document.querySelector(".close-search-modal").addEventListener("click", () => {
+  document
+    .querySelector(".close-search-modal")
+    .addEventListener("click", () => {
       closeModal();
     });
 
@@ -732,6 +901,7 @@ document
     .addEventListener("click", () => {
       closeModal();
     });
+});
 
 })
 ////////////////////////////////////////////////////////////////////////////////

dev/jacobi_2D_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>

dev/julia_async.ipynb

@@ -28,6 +28,56 @@
     "Understanding these concepts is important to learn distributed computing later."
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "cde5ee75",
+   "metadata": {},
+   "source": [
+    "<div class=\"alert alert-block alert-info\">\n",
+    "<b>Note:</b> Do not forget to execute the next cell before starting this notebook! \n",
+    "</div>"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0b0496c7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "function why_q1()\n",
+    "    msg = \"\"\"\n",
+    "    Evaluating compute_π(100_000_000) takes about 0.25 seconds on the teacher's laptop. Thus, the loop would take about 2.5 seconds since we are calling the function 10 times.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "function why_q2()\n",
+    "    msg = \"\"\"\n",
+    "    The time in doing the loop will be almost zero since the loop just schedules 10 tasks, which should be very fast.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "function why_q3()\n",
+    "    msg = \"\"\"\n",
+    "    It will take 2.5 seconds, like in question 1. The @sync macro forces to wait for all tasks we have generated with the @async macro. Since we have created 10 tasks and each of them takes about 0.25 seconds, the total time will be about 2.5 seconds.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "function why_q4()\n",
+    "    msg = \"\"\"\n",
+    "    It will take about 3 seconds. The channel has buffer size 4, thus the call to put!will not block. The call to take! will not block neither since there is a value stored in the channel. The taken value is 3 and therefore we will wait for 3 seconds.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "function why_q5()\n",
+    "    msg = \"\"\"\n",
+    "    The channel is not buffered and therefore the call to put! will block. The cell will run forever, since there is no other task that calls take! on this channel.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "println(\"🥳 Well done! \")"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "caf64254",
@@ -37,7 +87,7 @@
     "\n",
     "### Creating  a task\n",
     "\n",
-    "Technically, a task in Julia is a *symmetric co-routine*. More informally, a task is a piece of computation work that can be started (scheduled) at some point in the future, and that can be interrupted and resumed.  To create a task, we first need to create a function that represents the work to be done in the task. In next cell, we generate a task that generates and sums two matrices."
+    "Technically, a task in Julia is a *symmetric* [*co-routine*](https://en.wikipedia.org/wiki/Coroutine). More informally, a task is a piece of computational work that can be started (scheduled) at some point in the future, and that can be interrupted and resumed.  To create a task, we first need to create a function that represents the work to be done in the task. In next cell, we generate a task that generates and sums two matrices."
    ]
   },
   {
@@ -726,6 +776,16 @@
     "end"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d6b8382e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q1()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "5f19d38c",
@@ -754,6 +814,16 @@
     "end"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "edff9747",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q2()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "5041c355",
@@ -781,6 +851,16 @@
     "end"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "87bc7c5c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q3()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "841b690e",
@@ -821,6 +901,16 @@
     "end"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a18a0a7d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q4()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "df663f11",
@@ -860,6 +950,26 @@
     "end"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d8923fae",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q5()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0ee77abe",
+   "metadata": {},
+   "source": [
+    "<div class=\"alert alert-block alert-info\">\n",
+    "<b>Note:</b> If for some reason a cell keeps running forever, we can stop it with Kernel > Interrupt or Kernel > Restart (see tabs above).\n",
+    "</div>"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "a5d3730b",
@@ -873,15 +983,15 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Julia 1.9.0",
+   "display_name": "Julia 1.10.0",
    "language": "julia",
-   "name": "julia-1.9"
+   "name": "julia-1.10"
   },
   "language_info": {
    "file_extension": ".jl",
    "mimetype": "application/julia",
    "name": "julia",
-   "version": "1.9.0"
+   "version": "1.10.0"
   }
  },
  "nbformat": 4,

dev/julia_async_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>
@@ -7506,13 +7540,70 @@ a.anchor-link {
 </div>
 </div>
 </div>
+<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=cde5ee75">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
+</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
+<div class="alert alert-block alert-info">
+<b>Note:</b> Do not forget to execute the next cell before starting this notebook! 
+</div>
+</div>
+</div>
+</div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=0b0496c7">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="k">function</span><span class="w"> </span><span class="n">why_q1</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    Evaluating compute_π(100_000_000) takes about 0.25 seconds on the teacher's laptop. Thus, the loop would take about 2.5 seconds since we are calling the function 10 times.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="k">function</span><span class="w"> </span><span class="n">why_q2</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    The time in doing the loop will be almost zero since the loop just schedules 10 tasks, which should be very fast.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="k">function</span><span class="w"> </span><span class="n">why_q3</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    It will take 2.5 seconds, like in question 1. The @sync macro forces to wait for all tasks we have generated with the @async macro. Since we have created 10 tasks and each of them takes about 0.25 seconds, the total time will be about 2.5 seconds.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="k">function</span><span class="w"> </span><span class="n">why_q4</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    It will take about 3 seconds. The channel has buffer size 4, thus the call to put!will not block. The call to take! will not block neither since there is a value stored in the channel. The taken value is 3 and therefore we will wait for 3 seconds.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="k">function</span><span class="w"> </span><span class="n">why_q5</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    The channel is not buffered and therefore the call to put! will block. The cell will run forever, since there is no other task that calls take! on this channel.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="n">println</span><span class="p">(</span><span class="s">"🥳 Well done! "</span><span class="p">)</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
+</div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=caf64254">
 <div class="jp-Cell-inputWrapper" tabindex="0">
 <div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
 </div>
 <div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
 </div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
-<h2 id="Tasks">Tasks<a class="anchor-link" href="#Tasks">¶</a></h2><h3 id="Creating--a-task">Creating  a task<a class="anchor-link" href="#Creating--a-task">¶</a></h3><p>Technically, a task in Julia is a <em>symmetric co-routine</em>. More informally, a task is a piece of computation work that can be started (scheduled) at some point in the future, and that can be interrupted and resumed.  To create a task, we first need to create a function that represents the work to be done in the task. In next cell, we generate a task that generates and sums two matrices.</p>
+<h2 id="Tasks">Tasks<a class="anchor-link" href="#Tasks">¶</a></h2><h3 id="Creating--a-task">Creating  a task<a class="anchor-link" href="#Creating--a-task">¶</a></h3><p>Technically, a task in Julia is a <em>symmetric</em> <a href="https://en.wikipedia.org/wiki/Coroutine"><em>co-routine</em></a>. More informally, a task is a piece of computational work that can be started (scheduled) at some point in the future, and that can be interrupted and resumed.  To create a task, we first need to create a function that represents the work to be done in the task. In next cell, we generate a task that generates and sums two matrices.</p>
 </div>
 </div>
 </div>
@@ -8397,6 +8488,20 @@ d) near 0*t </code></pre>
 </div>
 </div>
 </div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=d6b8382e">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q1</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
 </div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=5f19d38c">
 <div class="jp-Cell-inputWrapper" tabindex="0">
@@ -8430,6 +8535,20 @@ d) near 0*t </code></pre>
 </div>
 </div>
 </div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=edff9747">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q2</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
 </div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=5041c355">
 <div class="jp-Cell-inputWrapper" tabindex="0">
@@ -8463,6 +8582,20 @@ d) near 0*t </code></pre>
 </div>
 </div>
 </div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=87bc7c5c">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q3</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
 </div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=841b690e">
 <div class="jp-Cell-inputWrapper" tabindex="0">
@@ -8513,6 +8646,20 @@ d) 3 seconds</code></pre>
 </div>
 </div>
 </div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=a18a0a7d">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q4</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
 </div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=df663f11">
 <div class="jp-Cell-inputWrapper" tabindex="0">
@@ -8562,6 +8709,33 @@ d) 3 seconds</code></pre>
 </div>
 </div>
 </div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=d8923fae">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q5</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=0ee77abe">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
+</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
+<div class="alert alert-block alert-info">
+<b>Note:</b> If for some reason a cell keeps running forever, we can stop it with Kernel &gt; Interrupt or Kernel &gt; Restart (see tabs above).
+</div>
+</div>
+</div>
+</div>
 </div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=a5d3730b">
 <div class="jp-Cell-inputWrapper" tabindex="0">

dev/julia_basics.ipynb

@@ -147,6 +147,44 @@
     "foo()"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "d18e679d",
+   "metadata": {},
+   "source": [
+    "### A very easy first exercise\n",
+    "\n",
+    "Run the following cell. It contains definitions used later in the notebook."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "81678b3d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "function why_q1()\n",
+    "    msg = \"\"\"\n",
+    "    In the first line, we assign a variable to a value. In the second line, we assign another variable to the same value. Thus, we have 2 variables associated with the same value. In line 3, we associate y to a new value (re-assignment). Thus, we have 2 variables associated with 2 different values. Variable x is still associated with its original value. Thus, the value at the final line is x=1.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "function why_q2()\n",
+    "    msg = \"\"\"\n",
+    "    It will be 1 for very similar reasons as in the previous questions: we are reassigning a local variable, not the global variable defined outside the function.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "function why_q3()\n",
+    "    msg = \"\"\"\n",
+    "    It will be 6. In the returned function f2, x is equal to 2. Thus, when calling f2(3) we compute 2*3.\n",
+    "    \"\"\"\n",
+    "    println(msg)\n",
+    "end\n",
+    "println(\"🥳 Well done! \")"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "92112bd1",
@@ -467,6 +505,24 @@
     "x"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "a2f94960",
+   "metadata": {},
+   "source": [
+    "Run next cell to get an explanation of this question."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fc562337",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q1()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "4d2cb752",
@@ -586,6 +642,24 @@
     "x"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "f69108c2",
+   "metadata": {},
+   "source": [
+    "Run next cell to get an explanation of this question."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "05c62aa3",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q2()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "4fc5eb9b",
@@ -1068,6 +1142,24 @@
     "x"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "062ff145",
+   "metadata": {},
+   "source": [
+    "Run next cell to get an explanation of this question."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "6bf7818e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "why_q3()"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "bc8e9bcf",
@@ -1649,15 +1741,15 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Julia 1.9.0",
+   "display_name": "Julia 1.10.0",
    "language": "julia",
-   "name": "julia-1.9"
+   "name": "julia-1.10"
   },
   "language_info": {
    "file_extension": ".jl",
    "mimetype": "application/julia",
    "name": "julia",
-   "version": "1.9.0"
+   "version": "1.10.0"
   }
  },
  "nbformat": 4,

dev/julia_basics_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>
@@ -7635,6 +7669,49 @@ a.anchor-link {
 </div>
 </div>
 </div>
+<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=d18e679d">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
+</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
+<h3 id="A-very-easy-first-exercise">A very easy first exercise<a class="anchor-link" href="#A-very-easy-first-exercise">¶</a></h3><p>Run the following cell. It contains definitions used later in the notebook.</p>
+</div>
+</div>
+</div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=81678b3d">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="k">function</span><span class="w"> </span><span class="n">why_q1</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    In the first line, we assign a variable to a value. In the second line, we assign another variable to the same value. Thus, we have 2 variables associated with the same value. In line 3, we associate y to a new value (re-assignment). Thus, we have 2 variables associated with 2 different values. Variable x is still associated with its original value. Thus, the value at the final line is x=1.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="k">function</span><span class="w"> </span><span class="n">why_q2</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    It will be 1 for very similar reasons as in the previous questions: we are reassigning a local variable, not the global variable defined outside the function.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="k">function</span><span class="w"> </span><span class="n">why_q3</span><span class="p">()</span>
+<span class="w">    </span><span class="n">msg</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s">"""</span>
+<span class="s">    It will be 6. In the returned function f2, x is equal to 2. Thus, when calling f2(3) we compute 2*3.</span>
+<span class="s">    """</span>
+<span class="w">    </span><span class="n">println</span><span class="p">(</span><span class="n">msg</span><span class="p">)</span>
+<span class="k">end</span>
+<span class="n">println</span><span class="p">(</span><span class="s">"🥳 Well done! "</span><span class="p">)</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
+</div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=92112bd1">
 <div class="jp-Cell-inputWrapper" tabindex="0">
 <div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
@@ -8049,6 +8126,31 @@ a.anchor-link {
 </div>
 </div>
 </div>
+<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=a2f94960">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
+</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
+<p>Run next cell to get an explanation of this question.</p>
+</div>
+</div>
+</div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=fc562337">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q1</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
+</div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=4d2cb752">
 <div class="jp-Cell-inputWrapper" tabindex="0">
 <div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
@@ -8200,6 +8302,31 @@ a.anchor-link {
 </div>
 </div>
 </div>
+<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=f69108c2">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
+</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
+<p>Run next cell to get an explanation of this question.</p>
+</div>
+</div>
+</div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=05c62aa3">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q2</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
+</div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=4fc5eb9b">
 <div class="jp-Cell-inputWrapper" tabindex="0">
 <div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
@@ -8825,6 +8952,31 @@ a.anchor-link {
 </div>
 </div>
 </div>
+<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=062ff145">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
+</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
+<p>Run next cell to get an explanation of this question.</p>
+</div>
+</div>
+</div>
+</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=6bf7818e">
+<div class="jp-Cell-inputWrapper" tabindex="0">
+<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
+</div>
+<div class="jp-InputArea jp-Cell-inputArea">
+<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
+<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
+<div class="cm-editor cm-s-jupyter">
+<div class="highlight hl-julia"><pre><span></span><span class="n">why_q3</span><span class="p">()</span>
+</pre></div>
+</div>
+</div>
+</div>
+</div>
+</div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=bc8e9bcf">
 <div class="jp-Cell-inputWrapper" tabindex="0">
 <div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">

dev/julia_intro_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>

dev/julia_jacobi_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>

dev/julia_tutorial_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>

dev/matrix_matrix.ipynb

@@ -219,10 +219,10 @@
    "metadata": {},
    "source": [
     "<div class=\"alert alert-block alert-info\">\n",
-    "<b>Note:</b> The matrix-matrix multiplication naively implemented with 3 nested loops as above is known to be very inefficient (memory bound). Libraries such as BLAS provide much more efficient implementations, which are the ones used in practice (e.g., by the `*` operator in Julia). We consider, our hand-written implementation as a simple way of expressing the algorithm we are interested in.\n",
+    "<b>Note:</b> The matrix-matrix multiplication naively implemented with 3 nested loops as above is known to be very inefficient (memory bound). Libraries such as BLAS provide much more efficient implementations, which are the ones used in practice (e.g., by the `*` operator in Julia). We consider our hand-written implementation as a simple way of expressing the algorithm we are interested in.\n",
     "</div>\n",
     "\n",
-    "Run the following cell to compare the performance of our hand-written function with respect to the built in function `mul!`\n"
+    "Run the following cell to compare the performance of our hand-written function with respect to the built in function `mul!`.\n"
    ]
   },
   {
@@ -1060,107 +1060,6 @@
     "println(\"Efficiency = \", 100*(T1/TP)/P, \"%\")"
    ]
   },
-  {
-   "cell_type": "markdown",
-   "id": "fa8d7f40",
-   "metadata": {},
-   "source": [
-    "### Exercise 2"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "0e7c607e",
-   "metadata": {},
-   "source": [
-    "The implementation of algorithm 1 is very impractical. One needs as many processors as entries in the result matrix C. For 1000 times 1000 matrix one would need a supercomputer with one million processes! We can easily fix this problem by using less processors and spawning the computation of an entry in any of the available processes.\n",
-    "See the following code:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "023b20d1",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "function matmul_dist_1_v2!(C, A, B)\n",
-    "    m = size(C,1)\n",
-    "    n = size(C,2)\n",
-    "    l = size(A,2)\n",
-    "    @assert size(A,1) == m\n",
-    "    @assert size(B,2) == n\n",
-    "    @assert size(B,1) == l\n",
-    "    z = zero(eltype(C))\n",
-    "    @sync for j in 1:n\n",
-    "        for i in 1:m\n",
-    "            Ai = A[i,:]\n",
-    "            Bj = B[:,j]\n",
-    "            ftr = @spawnat :any begin\n",
-    "                Cij = z\n",
-    "                for k in 1:l\n",
-    "                    @inbounds Cij += Ai[k]*Bj[k]\n",
-    "                end\n",
-    "                Cij\n",
-    "            end\n",
-    "            @async C[i,j] = fetch(ftr)\n",
-    "        end\n",
-    "    end\n",
-    "    C\n",
-    "end"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "52005ca1",
-   "metadata": {},
-   "source": [
-    "With this new implementation, we can multiply matrices of arbitrary size with a fixed number of workers. Test it:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "c1d3595b",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "using Test\n",
-    "N = 50\n",
-    "A = rand(N,N)\n",
-    "B = rand(N,N)\n",
-    "C = similar(A)\n",
-    "@test matmul_dist_1_v2!(C,A,B) ≈ A*B"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "ab609c18",
-   "metadata": {},
-   "source": [
-    "Run the next cell to check the performance of this implementation. Note that we are far away from the optimal speed up. Why? To answer this question compute the theoretical communication over computation ratio for this implementation and reason about the obtained result. Hint: the number of times a worker is spawned in this implementation is N^2/P on average."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "id": "d7d31710",
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "N = 100\n",
-    "A = rand(N,N)\n",
-    "B = rand(N,N)\n",
-    "C = similar(A)\n",
-    "P = nworkers()\n",
-    "T1 = @belapsed matmul_seq!(C,A,B)\n",
-    "C = similar(A)\n",
-    "TP = @belapsed matmul_dist_1_v2!(C,A,B)\n",
-    "println(\"Speedup = \", T1/TP)\n",
-    "println(\"Optimal speedup = \", P)\n",
-    "println(\"Efficiency = \", 100*(T1/TP)/P, \"%\")"
-   ]
-  },
   {
    "cell_type": "markdown",
    "id": "8e171362",
@@ -1175,15 +1074,15 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Julia 1.9.0",
+   "display_name": "Julia 1.10.0",
    "language": "julia",
-   "name": "julia-1.9"
+   "name": "julia-1.10"
   },
   "language_info": {
    "file_extension": ".jl",
    "mimetype": "application/julia",
    "name": "julia",
-   "version": "1.9.0"
+   "version": "1.10.0"
   }
  },
  "nbformat": 4,

dev/matrix_matrix_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>
@@ -7742,9 +7776,9 @@ a.anchor-link {
 <div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
 </div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
 <div class="alert alert-block alert-info">
-<b>Note:</b> The matrix-matrix multiplication naively implemented with 3 nested loops as above is known to be very inefficient (memory bound). Libraries such as BLAS provide much more efficient implementations, which are the ones used in practice (e.g., by the `*` operator in Julia). We consider, our hand-written implementation as a simple way of expressing the algorithm we are interested in.
+<b>Note:</b> The matrix-matrix multiplication naively implemented with 3 nested loops as above is known to be very inefficient (memory bound). Libraries such as BLAS provide much more efficient implementations, which are the ones used in practice (e.g., by the `*` operator in Julia). We consider our hand-written implementation as a simple way of expressing the algorithm we are interested in.
 </div>
-<p>Run the following cell to compare the performance of our hand-written function with respect to the built in function <code>mul!</code></p>
+<p>Run the following cell to compare the performance of our hand-written function with respect to the built in function <code>mul!</code>.</p>
 </div>
 </div>
 </div>
@@ -8757,131 +8791,6 @@ d) O(N²/P) communication and O(N³/P) computation</code></pre>
 </div>
 </div>
 </div>
-<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=fa8d7f40">
-<div class="jp-Cell-inputWrapper" tabindex="0">
-<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
-</div>
-<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
-</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
-<h3 id="Exercise-2">Exercise 2<a class="anchor-link" href="#Exercise-2">¶</a></h3>
-</div>
-</div>
-</div>
-</div>
-<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=0e7c607e">
-<div class="jp-Cell-inputWrapper" tabindex="0">
-<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
-</div>
-<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
-</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
-<p>The implementation of algorithm 1 is very impractical. One needs as many processors as entries in the result matrix C. For 1000 times 1000 matrix one would need a supercomputer with one million processes! We can easily fix this problem by using less processors and spawning the computation of an entry in any of the available processes.
-See the following code:</p>
-</div>
-</div>
-</div>
-</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=023b20d1">
-<div class="jp-Cell-inputWrapper" tabindex="0">
-<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
-</div>
-<div class="jp-InputArea jp-Cell-inputArea">
-<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
-<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
-<div class="cm-editor cm-s-jupyter">
-<div class="highlight hl-julia"><pre><span></span><span class="k">function</span><span class="w"> </span><span class="n">matmul_dist_1_v2!</span><span class="p">(</span><span class="n">C</span><span class="p">,</span><span class="w"> </span><span class="n">A</span><span class="p">,</span><span class="w"> </span><span class="n">B</span><span class="p">)</span>
-<span class="w">    </span><span class="n">m</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">size</span><span class="p">(</span><span class="n">C</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span>
-<span class="w">    </span><span class="n">n</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">size</span><span class="p">(</span><span class="n">C</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span>
-<span class="w">    </span><span class="n">l</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">size</span><span class="p">(</span><span class="n">A</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span>
-<span class="w">    </span><span class="nd">@assert</span><span class="w"> </span><span class="n">size</span><span class="p">(</span><span class="n">A</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="n">m</span>
-<span class="w">    </span><span class="nd">@assert</span><span class="w"> </span><span class="n">size</span><span class="p">(</span><span class="n">B</span><span class="p">,</span><span class="mi">2</span><span class="p">)</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="n">n</span>
-<span class="w">    </span><span class="nd">@assert</span><span class="w"> </span><span class="n">size</span><span class="p">(</span><span class="n">B</span><span class="p">,</span><span class="mi">1</span><span class="p">)</span><span class="w"> </span><span class="o">==</span><span class="w"> </span><span class="n">l</span>
-<span class="w">    </span><span class="n">z</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">zero</span><span class="p">(</span><span class="n">eltype</span><span class="p">(</span><span class="n">C</span><span class="p">))</span>
-<span class="w">    </span><span class="nd">@sync</span><span class="w"> </span><span class="k">for</span><span class="w"> </span><span class="n">j</span><span class="w"> </span><span class="k">in</span><span class="w"> </span><span class="mi">1</span><span class="o">:</span><span class="n">n</span>
-<span class="w">        </span><span class="k">for</span><span class="w"> </span><span class="n">i</span><span class="w"> </span><span class="k">in</span><span class="w"> </span><span class="mi">1</span><span class="o">:</span><span class="n">m</span>
-<span class="w">            </span><span class="n">Ai</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">A</span><span class="p">[</span><span class="n">i</span><span class="p">,</span><span class="o">:</span><span class="p">]</span>
-<span class="w">            </span><span class="n">Bj</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">B</span><span class="p">[</span><span class="o">:</span><span class="p">,</span><span class="n">j</span><span class="p">]</span>
-<span class="w">            </span><span class="n">ftr</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nd">@spawnat</span><span class="w"> </span><span class="ss">:any</span><span class="w"> </span><span class="k">begin</span>
-<span class="w">                </span><span class="n">Cij</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">z</span>
-<span class="w">                </span><span class="k">for</span><span class="w"> </span><span class="n">k</span><span class="w"> </span><span class="k">in</span><span class="w"> </span><span class="mi">1</span><span class="o">:</span><span class="n">l</span>
-<span class="w">                    </span><span class="nd">@inbounds</span><span class="w"> </span><span class="n">Cij</span><span class="w"> </span><span class="o">+=</span><span class="w"> </span><span class="n">Ai</span><span class="p">[</span><span class="n">k</span><span class="p">]</span><span class="o">*</span><span class="n">Bj</span><span class="p">[</span><span class="n">k</span><span class="p">]</span>
-<span class="w">                </span><span class="k">end</span>
-<span class="w">                </span><span class="n">Cij</span>
-<span class="w">            </span><span class="k">end</span>
-<span class="w">            </span><span class="nd">@async</span><span class="w"> </span><span class="n">C</span><span class="p">[</span><span class="n">i</span><span class="p">,</span><span class="n">j</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">fetch</span><span class="p">(</span><span class="n">ftr</span><span class="p">)</span>
-<span class="w">        </span><span class="k">end</span>
-<span class="w">    </span><span class="k">end</span>
-<span class="w">    </span><span class="n">C</span>
-<span class="k">end</span>
-</pre></div>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=52005ca1">
-<div class="jp-Cell-inputWrapper" tabindex="0">
-<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
-</div>
-<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
-</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
-<p>With this new implementation, we can multiply matrices of arbitrary size with a fixed number of workers. Test it:</p>
-</div>
-</div>
-</div>
-</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=c1d3595b">
-<div class="jp-Cell-inputWrapper" tabindex="0">
-<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
-</div>
-<div class="jp-InputArea jp-Cell-inputArea">
-<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
-<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
-<div class="cm-editor cm-s-jupyter">
-<div class="highlight hl-julia"><pre><span></span><span class="k">using</span><span class="w"> </span><span class="n">Test</span>
-<span class="n">N</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi">50</span>
-<span class="n">A</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">rand</span><span class="p">(</span><span class="n">N</span><span class="p">,</span><span class="n">N</span><span class="p">)</span>
-<span class="n">B</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">rand</span><span class="p">(</span><span class="n">N</span><span class="p">,</span><span class="n">N</span><span class="p">)</span>
-<span class="n">C</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">similar</span><span class="p">(</span><span class="n">A</span><span class="p">)</span>
-<span class="nd">@test</span><span class="w"> </span><span class="n">matmul_dist_1_v2!</span><span class="p">(</span><span class="n">C</span><span class="p">,</span><span class="n">A</span><span class="p">,</span><span class="n">B</span><span class="p">)</span><span class="w"> </span><span class="o">≈</span><span class="w"> </span><span class="n">A</span><span class="o">*</span><span class="n">B</span>
-</pre></div>
-</div>
-</div>
-</div>
-</div>
-</div>
-<div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=ab609c18">
-<div class="jp-Cell-inputWrapper" tabindex="0">
-<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
-</div>
-<div class="jp-InputArea jp-Cell-inputArea"><div class="jp-InputPrompt jp-InputArea-prompt">
-</div><div class="jp-RenderedHTMLCommon jp-RenderedMarkdown jp-MarkdownOutput" data-mime-type="text/markdown">
-<p>Run the next cell to check the performance of this implementation. Note that we are far away from the optimal speed up. Why? To answer this question compute the theoretical communication over computation ratio for this implementation and reason about the obtained result. Hint: the number of times a worker is spawned in this implementation is N^2/P on average.</p>
-</div>
-</div>
-</div>
-</div><div class="jp-Cell jp-CodeCell jp-Notebook-cell jp-mod-noOutputs" id="cell-id=d7d31710">
-<div class="jp-Cell-inputWrapper" tabindex="0">
-<div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">
-</div>
-<div class="jp-InputArea jp-Cell-inputArea">
-<div class="jp-InputPrompt jp-InputArea-prompt">In [ ]:</div>
-<div class="jp-CodeMirrorEditor jp-Editor jp-InputArea-editor" data-type="inline">
-<div class="cm-editor cm-s-jupyter">
-<div class="highlight hl-julia"><pre><span></span><span class="n">N</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mi">100</span>
-<span class="n">A</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">rand</span><span class="p">(</span><span class="n">N</span><span class="p">,</span><span class="n">N</span><span class="p">)</span>
-<span class="n">B</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">rand</span><span class="p">(</span><span class="n">N</span><span class="p">,</span><span class="n">N</span><span class="p">)</span>
-<span class="n">C</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">similar</span><span class="p">(</span><span class="n">A</span><span class="p">)</span>
-<span class="n">P</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">nworkers</span><span class="p">()</span>
-<span class="n">T1</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nd">@belapsed</span><span class="w"> </span><span class="n">matmul_seq!</span><span class="p">(</span><span class="n">C</span><span class="p">,</span><span class="n">A</span><span class="p">,</span><span class="n">B</span><span class="p">)</span>
-<span class="n">C</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">similar</span><span class="p">(</span><span class="n">A</span><span class="p">)</span>
-<span class="n">TP</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nd">@belapsed</span><span class="w"> </span><span class="n">matmul_dist_1_v2!</span><span class="p">(</span><span class="n">C</span><span class="p">,</span><span class="n">A</span><span class="p">,</span><span class="n">B</span><span class="p">)</span>
-<span class="n">println</span><span class="p">(</span><span class="s">"Speedup = "</span><span class="p">,</span><span class="w"> </span><span class="n">T1</span><span class="o">/</span><span class="n">TP</span><span class="p">)</span>
-<span class="n">println</span><span class="p">(</span><span class="s">"Optimal speedup = "</span><span class="p">,</span><span class="w"> </span><span class="n">P</span><span class="p">)</span>
-<span class="n">println</span><span class="p">(</span><span class="s">"Efficiency = "</span><span class="p">,</span><span class="w"> </span><span class="mi">100</span><span class="o">*</span><span class="p">(</span><span class="n">T1</span><span class="o">/</span><span class="n">TP</span><span class="p">)</span><span class="o">/</span><span class="n">P</span><span class="p">,</span><span class="w"> </span><span class="s">"%"</span><span class="p">)</span>
-</pre></div>
-</div>
-</div>
-</div>
-</div>
-</div>
 <div class="jp-Cell jp-MarkdownCell jp-Notebook-cell" id="cell-id=8e171362">
 <div class="jp-Cell-inputWrapper" tabindex="0">
 <div class="jp-Collapser jp-InputCollapser jp-Cell-inputCollapser">

dev/mpi_tutorial_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>

dev/notebook-hello_src/index.html

@@ -7333,11 +7333,12 @@ a.anchor-link {
     if (!diagrams.length) {
       return;
     }
-    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.5.0/mermaid.esm.min.mjs")).default;
+    const mermaid = (await import("https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.esm.min.mjs")).default;
     const parser = new DOMParser();
 
     mermaid.initialize({
       maxTextSize: 100000,
+      maxEdges: 100000,
       startOnLoad: false,
       fontFamily: window
         .getComputedStyle(document.body)
@@ -7408,7 +7409,8 @@ a.anchor-link {
       let results = null;
       let output = null;
       try {
-        const { svg } = await mermaid.render(id, raw, el);
+        let { svg } = await mermaid.render(id, raw, el);
+        svg = cleanMermaidSvg(svg);
         results = makeMermaidImage(svg);
         output = document.createElement("figure");
         results.map(output.appendChild, output);
@@ -7423,6 +7425,38 @@ a.anchor-link {
       parent.appendChild(output);
     }
 
+
+    /**
+     * Post-process to ensure mermaid diagrams contain only valid SVG and XHTML.
+     */
+    function cleanMermaidSvg(svg) {
+      return svg.replace(RE_VOID_ELEMENT, replaceVoidElement);
+    }
+
+
+    /**
+     * A regular expression for all void elements, which may include attributes and
+     * a slash.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Glossary/Void_element
+     *
+     * Of these, only `<br>` is generated by Mermaid in place of `\n`,
+     * but _any_ "malformed" tag will break the SVG rendering entirely.
+     */
+    const RE_VOID_ELEMENT =
+      /<\s*(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\s*([^>]*?)\s*>/gi;
+
+    /**
+     * Ensure a void element is closed with a slash, preserving any attributes.
+     */
+    function replaceVoidElement(match, tag, rest) {
+      rest = rest.trim();
+      if (!rest.endsWith('/')) {
+        rest = `${rest} /`;
+      }
+      return `<${tag} ${rest}>`;
+    }
+
     void Promise.all([...diagrams].map(renderOneMarmaid));
   });
 </script>