Merge branch 'main' into cb/desktop-app

.github/workflows/FrontendTest.yml

@@ -68,6 +68,7 @@ jobs:
                   options = Pluto.Configuration.from_flat_kwargs(; 
                     port=parse(Int, ENV["PLUTO_PORT"]), 
                     require_secret_for_access=false,
+                    workspace_use_distributed_stdlib=false,
                   )
                   🍭 = Pluto.ServerSession(; options)
                   server = Pluto.run!(🍭)

Project.toml

@@ -2,12 +2,13 @@ name = "Pluto"
 uuid = "c3e4b0f8-55cb-11ea-2926-15256bba5781"
 license = "MIT"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.19.27"
+version = "0.19.31"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
 Configurations = "5218b696-f38b-4ac9-8b61-a12ec717816d"
 Dates = "ade2ca70-3891-5945-98fb-dc099432e06a"
+Downloads = "f43a241f-c20a-4ad4-852c-f6b1247861c6"
 FileWatching = "7b1f6079-737a-58dc-b8bc-7a2ca5c1b5ee"
 FuzzyCompletions = "fb4132e2-a121-4a70-b8a1-d5b831dcdcc2"
 HTTP = "cd3eb016-35fb-5094-929b-558a96fad6f3"
@@ -33,21 +34,33 @@ URIs = "5c2747f8-b7ea-4ff2-ba2e-563bfd36b1d4"
 UUIDs = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"
 
 [compat]
+Base64 = "1"
 Configurations = "0.15, 0.16, 0.17"
+Dates = "1"
+Downloads = "1"
+FileWatching = "1"
 FuzzyCompletions = "0.3, 0.4, 0.5"
 HTTP = "^1.5.2"
 HypertextLiteral = "0.7, 0.8, 0.9"
+InteractiveUtils = "1"
+Logging = "1"
 LoggingExtras = "0.4, 1"
 MIMEs = "0.1"
-Malt = "1.0.3"
+Malt = "1.1"
+Markdown = "1"
 MsgPack = "1.1"
+Pkg = "1"
 PrecompileSignatures = "3"
 PrecompileTools = "1"
+REPL = "1"
 RegistryInstances = "0.1"
 RelocatableFolders = "0.1, 0.2, 0.3, 1"
 Scratch = "1.1"
+Sockets = "1"
+TOML = "1"
 Tables = "1"
 URIs = "1.3"
+UUIDs = "1"
 julia = "^1.6"
 
 [extras]

README.md

@@ -188,7 +188,7 @@ Development of Pluto.jl is partially sponsored by
 |----|----|
 | <a href="https://computationalthinking.mit.edu"><img title="Massachusetts Institute of Technology" src="https://user-images.githubusercontent.com/6933510/103308960-09412e00-4a14-11eb-8a3a-39201a9c186d.png" width=400 alt="MIT logo"></a> | The free online course _[Introduction to Computational Thinking](https://computationalthinking.mit.edu)_ at **MIT** uses Pluto notebooks to teach scientific computing in a new way. Homeworks react to the student in realtime, with _live answer checks and visualizations_ while you solve problems. |
 | <a href="http://quera-computing.com"><img title="QuEra Computing" src="https://user-images.githubusercontent.com/6933510/103309531-9e90f200-4a15-11eb-850f-99609e3b9bd8.png" width=400 alt="QuEra logo"></a> | **QuEra Computing** uses a Pluto notebook as an online dashboard to control their _quantum computer_! |
-| <a href="https://juliacomputing.com/"><img title="Julia Computing" src="https://user-images.githubusercontent.com/6933510/110478267-780dc800-80e4-11eb-91e5-2ef0256ad0db.png" width=400 alt="Julia Computing logo"></a> | [JuliaHub](https://juliahub.com) by **Julia Computing** enables the creation and editing of Pluto notebooks *on the cloud*! |
+| <a href="https://juliahub.com/"><img title="JuliaHub" src="https://i.imgur.com/IGdcVt7.png" width=200 alt="JuliaHub logo"></a> | [**JuliaHub**](https://juliahub.com) enables the creation and editing of Pluto notebooks *on the cloud*! |
 | <a href="https://numfocus.org/"><img title="Julia Computing" src="https://user-images.githubusercontent.com/6933510/110683397-42e4a100-81dc-11eb-9bdb-db58f9c283b4.png" width=400 alt="NumFOCUS logo"></a> | The mission of **NumFOCUS** is to promote open practices in research, data, and scientific computing by serving as a fiscal sponsor for open source projects and organizing community-driven educational programs. |
 
 _Created by [**Fons van der Plas**](https://github.com/fonsp) and [**Mikołaj Bochenski**](https://github.com/malyvsen). Inspired by [Observable](https://observablehq.com/)._

frontend/binder.css

@@ -133,18 +133,17 @@ body.wiggle_binder .edit_or_run > button {
 .binder_help_text {
     --width: min(85vw, 570px);
     position: fixed;
-    top: 5rem;
     max-height: calc(100vh - 4rem);
     overflow: auto;
     width: var(--width);
     padding: 16px;
     border-radius: 8px;
-    left: calc(50vw - var(--width) / 2);
     background-color: white;
     color: black;
     color-scheme: light;
     box-shadow: 0px 0px 0px 100vmax #0000004a;
     font-family: var(--sans-serif-font-stack);
+    border: 0;
 }
 .binder_help_text a {
     color: black;

frontend/common/Binder.js

@@ -144,6 +144,7 @@ export const start_binder = async ({ setStatePromise, connect, launch_params })
             const upload_url = with_token(
                 with_query_params(new URL("notebookupload", binder_session_url), {
                     name: new URLSearchParams(window.location.search).get("name"),
+                    execution_allowed: "true",
                 })
             )
             console.log(`downloading locally and uploading `, upload_url, launch_params.notebookfile)

frontend/common/InstallTimeEstimate.js

@@ -0,0 +1,99 @@
+import { useEffect, useState } from "../imports/Preact.js"
+import _ from "../imports/lodash.js"
+
+const loading_times_url = `https://julia-loading-times-test.netlify.app/pkg_load_times.csv`
+const package_list_url = `https://julia-loading-times-test.netlify.app/top_packages_sorted_with_deps.txt`
+
+/** @typedef {{ install: Number, precompile: Number, load: Number }} LoadingTime */
+
+/**
+ * @typedef PackageTimingData
+ * @type {{
+ *  times: Map<String,LoadingTime>,
+ *  packages: Map<String,String[]>,
+ * }}
+ */
+
+/** @type {{ current: Promise<PackageTimingData>? }} */
+const data_promise_ref = { current: null }
+
+export const get_data = () => {
+    if (data_promise_ref.current != null) {
+        return data_promise_ref.current
+    } else {
+        const times_p = fetch(loading_times_url)
+            .then((res) => res.text())
+            .then((text) => {
+                const lines = text.split("\n")
+                const header = lines[0].split(",")
+                return new Map(
+                    lines.slice(1).map((line) => {
+                        let [pkg, ...times] = line.split(",")
+
+                        return [pkg, { install: Number(times[0]), precompile: Number(times[1]), load: Number(times[2]) }]
+                    })
+                )
+            })
+
+        const packages_p = fetch(package_list_url)
+            .then((res) => res.text())
+            .then(
+                (text) =>
+                    new Map(
+                        text.split("\n").map((line) => {
+                            let [pkg, ...deps] = line.split(",")
+                            return [pkg, deps]
+                        })
+                    )
+            )
+
+        data_promise_ref.current = Promise.all([times_p, packages_p]).then(([times, packages]) => ({ times, packages }))
+
+        return data_promise_ref.current
+    }
+}
+
+export const usePackageTimingData = () => {
+    const [data, set_data] = useState(/** @type {PackageTimingData?} */ (null))
+
+    useEffect(() => {
+        get_data().then(set_data)
+    }, [])
+
+    return data
+}
+
+const recursive_deps = (/** @type {PackageTimingData} */ data, /** @type {string} */ pkg, found = []) => {
+    const deps = data.packages.get(pkg)
+    if (deps == null) {
+        return []
+    } else {
+        const newfound = _.union(found, deps)
+        return [...deps, ..._.difference(deps, found).flatMap((dep) => recursive_deps(data, dep, newfound))]
+    }
+}
+
+export const time_estimate = (/** @type {PackageTimingData} */ data, /** @type {string[]} */ packages) => {
+    let deps = packages.flatMap((pkg) => recursive_deps(data, pkg))
+    let times = _.uniq([...packages, ...deps])
+        .map((pkg) => data.times.get(pkg))
+        .filter((x) => x != null)
+
+    console.log({ packages, deps, times, z: _.uniq([...packages, ...deps]) })
+    let sum = (xs) => xs.reduce((acc, x) => acc + (x == null || isNaN(x) ? 0 : x), 0)
+
+    return {
+        install: sum(times.map(_.property("install"))) * timing_weights.install,
+        precompile: sum(times.map(_.property("precompile"))) * timing_weights.precompile,
+        load: sum(times.map(_.property("load"))) * timing_weights.load,
+    }
+}
+
+const timing_weights = {
+    // Because the GitHub Action runner has superfast internet
+    install: 2,
+    // Because the GitHub Action runner has average compute speed
+    load: 1,
+    // Because precompilation happens in parallel
+    precompile: 0.3,
+}

frontend/common/ProcessStatus.js

@@ -0,0 +1,7 @@
+export const ProcessStatus = {
+    ready: "ready",
+    starting: "starting",
+    no_process: "no_process",
+    waiting_to_restart: "waiting_to_restart",
+    waiting_for_permission: "waiting_for_permission",
+}

frontend/common/RunLocal.js

@@ -41,6 +41,7 @@ export const start_local = async ({ setStatePromise, connect, launch_params }) =
                 with_query_params(new URL("notebookupload", binder_session_url), {
                     name: new URLSearchParams(window.location.search).get("name"),
                     clear_frontmatter: "yesplease",
+                    execution_allowed: "yepperz",
                 })
             ),
             {

frontend/common/useDialog.js

@@ -0,0 +1,38 @@
+//@ts-ignore
+import dialogPolyfill from "https://cdn.jsdelivr.net/npm/[email protected]/dist/dialog-polyfill.esm.min.js"
+
+import { useEffect, useLayoutEffect, useRef } from "../imports/Preact.js"
+
+/**
+ * @returns {[import("../imports/Preact.js").Ref<HTMLDialogElement?>, () => void, () => void, () => void]}
+ */
+export const useDialog = ({ light_dismiss = false } = {}) => {
+    const dialog_ref = useRef(/** @type {HTMLDialogElement?} */ (null))
+
+    useLayoutEffect(() => {
+        if (dialog_ref.current != null) dialogPolyfill.registerDialog(dialog_ref.current)
+    }, [dialog_ref.current])
+
+    const open = () => dialog_ref.current?.showModal()
+    const close = () => dialog_ref.current?.close()
+    const toggle = () => (dialog_ref.current?.open === true ? dialog_ref.current?.close() : dialog_ref.current?.showModal())
+
+    useEffect(() => {
+        if (light_dismiss) {
+            const handleclick = (e) => {
+                if (dialog_ref.current?.open && dialog_ref.current.contains(e.target)) {
+                    close()
+                    // Avoid activating whatever was below
+                    e.stopPropagation()
+                    e.preventDefault()
+                }
+            }
+            document.body.addEventListener("click", handleclick)
+            return () => {
+                document.body.removeEventListener("click", handleclick)
+            }
+        }
+    }, [dialog_ref.current])
+
+    return [dialog_ref, open, close, toggle]
+}

frontend/components/BottomRightPanel.js

@@ -94,7 +94,9 @@ export let BottomRightPanel = ({ desired_doc_query, on_update_doc_query, noteboo
                             "helpbox-process": true,
                             "active": open_tab === "process",
                             "busy": show_business_outline,
+                            "something_is_happening": busy || !connected,
                         })}
+                        id="process-status-tab-button"
                         onClick=${() => {
                             set_open_tab(open_tab === "process" ? null : "process")
                         }}