From cb4ac1d30f8d7b148bbfe10ae4a2e0fdd9d3596f Mon Sep 17 00:00:00 2001
From: Fons van der Plas <fonsvdplas@gmail.com>
Date: Sat, 11 Apr 2020 22:25:05 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9A=20Live=20docs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Project.toml                 |   2 +-
 assets/editor.html           | 134 +++++++++++++++++++++++++++++++----
 assets/editor.js             |  78 +++++++++++++++++++-
 assets/light.css             |   4 +-
 assets/welcome.html          |  10 +--
 src/react/React.jl           |  14 +---
 src/webserver/Completions.jl |  44 +++++++++++-
 7 files changed, 248 insertions(+), 38 deletions(-)

diff --git a/Project.toml b/Project.toml
index ea39f5415d..8535b39fce 100644
--- a/Project.toml
+++ b/Project.toml
@@ -2,7 +2,7 @@ name = "Pluto"
 uuid = "c3e4b0f8-55cb-11ea-2926-15256bba5781"
 license = "MIT"
 authors = ["Fons van der Plas <fonsvdplas@gmail.com>", "Mikołaj Bochenski <iceflamecode@gmail.com>"]
-version = "0.5.20"
+version = "0.5.21"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"
diff --git a/assets/editor.html b/assets/editor.html
index c9cec5c047..a6ad8790ff 100644
--- a/assets/editor.html
+++ b/assets/editor.html
@@ -86,6 +86,7 @@
         main {
             margin: 0 auto;
             margin-top: 100px;
+            margin-bottom: 4rem;
             min-height: calc(100vh - 100px - 3.5rem - 4rem);
             max-width: 960px;
             align-content: center;
@@ -93,7 +94,7 @@
 
         /* HEADER */
 
-        header {
+        body>header {
             position: absolute;
             top: 0px;
             z-index: 5;
@@ -107,7 +108,7 @@
         }
 
 
-        header h1 {
+        body>header h1 {
             color: black;
             letter-spacing: 2px;
         }
@@ -220,14 +221,14 @@
                 transition: opacity .15s ease-in-out;
             }
 
-            header:hover #logocontainer .CodeMirror,
-            header:focus-within #logocontainer .CodeMirror {
+            body>header:hover #logocontainer .CodeMirror,
+            body>header:focus-within #logocontainer .CodeMirror {
                 border: 2px solid #818181;
                 border-right: none;
             }
 
-            header:hover #logocontainer button,
-            header:focus-within #logocontainer button {
+            body>header:hover #logocontainer button,
+            body>header:focus-within #logocontainer button {
                 opacity: 1.0;
             }
 
@@ -402,12 +403,108 @@
             content: "no";
         }
 
+        #helpbox-wrapper {
+            display: none;
+        }
+
+        @media screen and (min-width: 1050px){
+            
+            #helpbox-wrapper {
+                display: block;
+                position: sticky;
+                bottom: 0px;
+                height: 0px;
+                z-index: 5;
+            }
+
+            helpbox {
+                bottom: 0px;
+                right: 20px;
+                position: absolute;
+                display: flex;
+                flex-direction: column;
+                width: 300px;
+                height: 400px;
+                /* overflow: hidden; */
+                
+                background-color: white;
+                /* border: 2px solid darkgray; */
+                border-right: none;
+                border-bottom: none;
+                border-top-left-radius: 9px;
+                box-shadow: 0 0 11px 0px #00000010;
+                font-family: "Alegreya Sans", sans-serif;
+            }
+            
+            helpbox>header {
+                background-color: #eef1f7;
+                color: hsl(230, 14%, 11%);
+                padding: 15px;
+                font-family: "Roboto Mono", monospace;
+                font-weight: 600;
+                cursor: pointer;
+                /* border-top: 4px solid #8a8a8a; */
+            }
+            
+            helpbox>section {
+                height: 100%;
+                overflow: auto;
+                padding: 10px;
+            }
+
+            helpbox>section h1,
+            helpbox>section h2,
+            helpbox>section h3,
+            helpbox>section h4,
+            helpbox>section h5,
+            helpbox>section h6 {
+                font-family: inherit;
+                border-bottom: none;
+                font-size: 1rem;
+            }
+            
+            helpbox>section h1 {
+                font-size: 1.3rem;
+            }
+            
+            helpbox.hidden {
+                height: initial;
+            }
+
+            helpbox.hidden>section {
+                display: none;
+            }
+
+            helpbox>header::before{
+                content: "📖 ";
+            }
+
+            /* helpbox.loading>header::before{
+                content: "⌛ ";
+            } */
+
+            helpbox.hidden>header::before{
+                content: "📚 ";
+            }
+
+
+        }
+
+        @media screen and (min-width: 1050px) and (max-width: 1400px){
+            main {
+                margin-right: 350px;
+            }
+        }
+
+
         footer {
             width: 100%;
             height: 3.5rem;
-            margin-top: 4rem;
             font-family: "Roboto Mono";
             font-size: .75rem;
+            background-color: #d7dcd3;
+            color: #333333;
+            z-index: 7;
         }
 
         footer form{
@@ -440,7 +537,7 @@
             padding: 3px;
         }
 
-        header button,
+        body>header button,
         footer button{
             background: #896c6c;
             border-radius: 3px;
@@ -469,7 +566,7 @@
                 font-size: 14px;
             }
 
-            header,
+            body>header,
             preamble>button,
             cell>button,
             cellinput>button,
@@ -492,12 +589,12 @@
         }
     </style>
     
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/mode/julia/julia.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/display/placeholder.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.css"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/mode/julia/julia.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/display/placeholder.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.css"></script>
     
     <link rel="stylesheet" href="/assets/light.css" />
     <!-- The instant feedback form at the bottom of the page uses Google Firestore to save feedback. We DO NOT use analytics, and NO DATA is sent except for data entered in the feedback form. We might add telemetry in the future, and this will be an opt-in feature. -->
@@ -547,6 +644,13 @@
             </cell>
         </template>
     </main>
+    <div id="helpbox-wrapper">
+        <helpbox class="hidden">
+            <header></header>
+            <section></section>
+        </helpbox>
+
+    </div>
 
     <footer>
         <div id="info">
diff --git a/assets/editor.js b/assets/editor.js
index d405104ffa..2b357ae054 100644
--- a/assets/editor.js
+++ b/assets/editor.js
@@ -135,6 +135,14 @@ document.addEventListener("DOMContentLoaded", () => {
             }
         })
 
+        editor.on("cursorActivity", (cm) => {
+            const token = cm.getTokenAt(cm.getCursor())
+
+            if(token.type != null && token.type != "string"){
+                updateDocQuery(token.string)
+            }
+        });
+
         return editor
     }
 
@@ -252,7 +260,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 
-    function createLocalCell(newIndex, uuid, code) {
+    function createLocalCell(newIndex, uuid, code, focus=true) {
         if (uuid in window.localCells) {
             console.warn("Tried to add cell with existing UUID. Canceled.")
             console.log(uuid)
@@ -268,6 +276,7 @@ document.addEventListener("DOMContentLoaded", () => {
         moveLocalCell(newCellNode, newIndex)
 
         editor = createCodeMirrorInsideCell(newCellNode, code)
+        focus && editor.focus()
 
         // EVENT LISTENERS FOR CLICKY THINGS
 
@@ -410,7 +419,7 @@ document.addEventListener("DOMContentLoaded", () => {
                 updateLocalCellInput(byMe, update.cellID, message.code)
                 break
             case "cell_added":
-                createLocalCell(message.index, update.cellID, "").focus()
+                createLocalCell(message.index, update.cellID, "", true)
                 break
             case "cell_deleted":
                 // TODO: catch exception
@@ -445,7 +454,7 @@ document.addEventListener("DOMContentLoaded", () => {
             const promises = []
 
             update.message.cells.forEach((cell, index) => {
-                const cellNode = createLocalCell(index, cell.uuid, "")
+                const cellNode = createLocalCell(index, cell.uuid, "", false)
                 promises.push(
                     client.sendreceive("getinput", {}, cell.uuid).then(update => {
                         updateLocalCellInput(true, cell.uuid, update.message.code)
@@ -610,6 +619,69 @@ document.addEventListener("DOMContentLoaded", () => {
         })
     }
 
+    /* LIVE DOCS */
+
+    window.desiredDocQuery = ""
+    window.displayedDocQuery = "nothing yet"
+    window.doc = document.querySelector("helpbox")
+
+    doc.querySelector("header").addEventListener("click", (e) => {
+        doc.classList.toggle("hidden")
+        updateDocQuery(window.desiredDocQuery)
+    })
+
+    var updateDocTimer = undefined
+
+    function updateDocQuery(query=undefined){
+        if(doc.classList.contains("hidden")){
+            doc.querySelector("header").innerText = "Live docs"
+            doc.querySelector("section").innerHTML = "Start typing code to learn more!"
+            window.displayedDocQuery = "the intro page 🍭"
+            return
+        }
+        if(!/[^\s]/.test(query)){
+            // only whitespace
+            return
+        }
+
+        if(query == undefined){
+            query = window.desiredDocQuery
+        }
+        if(query == displayedDocQuery){
+            return
+        }
+
+        window.desiredDocQuery = query
+
+        
+        if(doc.classList.contains("loading")){
+            updateDocTimer = setTimeout(() => {
+                updateDocQuery()
+            }, 1000)
+            return
+        }
+
+        doc.classList.add("loading")
+        console.log("requesting " + query)
+        client.sendreceive("docs", {query: query}).then(u => {
+            if(u.message.status == "⌛"){
+                updateDocTimer = setTimeout(() => {
+                    doc.classList.remove("loading")
+                    updateDocQuery()
+                }, 1000)
+                return
+            }
+            doc.classList.remove("loading")
+            window.displayedDocQuery = query
+            if(u.message.status == "👍"){
+                doc.querySelector("header").innerText = query
+                doc.querySelector("section").innerHTML = u.message.doc
+            }
+        })
+    }
+
+    updateDocQuery()
+
     /* ERROR HINTS */
 
     const errorRewrites = [
diff --git a/assets/light.css b/assets/light.css
index 8e13135ae7..09553a5e94 100644
--- a/assets/light.css
+++ b/assets/light.css
@@ -61,12 +61,12 @@ celloutput>pre>code>a {
 
 
 /* HEADER */
-header {
+body>header {
     transition: background-color .5s ease-in-out;
     background-color: white;
 }
 
-body.loading header {
+body.loading>header {
     background-color: hsla(290, 10%, 59%, 0.14);
 }
 
diff --git a/assets/welcome.html b/assets/welcome.html
index ab136f5ad4..caf1b77db9 100644
--- a/assets/welcome.html
+++ b/assets/welcome.html
@@ -16,11 +16,11 @@
     <script src="/assets/client.js"></script>
     <script src="/assets/filepicker.js"></script>
     
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/display/placeholder.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/codemirror.min.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.0/addon/hint/show-hint.min.css"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/display/placeholder.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/lib/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.50.0/addon/hint/show-hint.min.css"></script>
 
     <style>
         @import url('https://fonts.googleapis.com/css?family=Vollkorn:600,600i&display=swap&subset=latin-ext');
diff --git a/src/react/React.jl b/src/react/React.jl
index c6e124829b..941b9f3c1f 100644
--- a/src/react/React.jl
+++ b/src/react/React.jl
@@ -102,21 +102,13 @@ end
 
 "Return all variables that a cell references, including those referenced through function calls."
 function all_references(notebook::Notebook, cell::Cell)::Set{Symbol}
-	calls = all_recursed_calls!(notebook, cell.symstate)
-	filter!(calls) do call
-		call in keys(notebook.combined_funcdefs)
-	end
-	return union(cell.symstate.references, (notebook.combined_funcdefs[func].references for func in calls)...)
+	return cell.symstate.references
 end
 
 "Return all variables that a cell assigns to, including mutable globals assigned through function calls."
 function all_assignments(notebook::Notebook, cell::Cell)::Set{Symbol}
-	calls = all_recursed_calls!(notebook, cell.symstate)
-	filter!(calls) do call
-		call in keys(notebook.combined_funcdefs)
-	end
-	return union(cell.symstate.assignments, (notebook.combined_funcdefs[func].assignments for func in calls)...)
-end
+	return cell.symstate.assignments
+end 
 
 "Return all functions called by a cell, and all functions called by those functions, et cetera."
 function all_recursed_calls!(notebook::Notebook, symstate::SymbolsState, found::Set{Symbol}=Set{Symbol}())::Set{Symbol}
diff --git a/src/webserver/Completions.jl b/src/webserver/Completions.jl
index 6a8f167662..3ca91bc4dc 100644
--- a/src/webserver/Completions.jl
+++ b/src/webserver/Completions.jl
@@ -1,5 +1,6 @@
 import REPL.REPLCompletions: completions, complete_path, completion_text
 import Distributed
+using Markdown
 
 function format_path_completion(completion)
     replace(replace(completion_text(completion), "\\ " => " "), "\\\\" => "\\")
@@ -80,4 +81,45 @@ responses[:complete] = (body, notebook::Notebook; initiator::Union{Initiator, Mi
             ), notebook, nothing, initiator)
 
     putclientupdates!(initiator, msg)
-end
\ No newline at end of file
+end
+
+function doc_fetcher(query, module_name)
+    quote
+        let
+            mod = Core.eval(Main, $(module_name |> QuoteNode))
+            sym = $(query |> QuoteNode)
+            if isdefined(mod, sym)
+                (Docs.doc(Core.eval(mod, sym)), :👍)
+            else
+                (nothing, :👎)
+            end
+        end
+    end
+end
+
+responses[:docs] = (body, notebook::Notebook; initiator::Union{Initiator, Missing}=missing) -> begin
+    query = Symbol(body["query"])
+
+
+    doc, status = if haskey(Docs.keywords, query)
+        (Docs.formatdoc(Docs.keywords[query]), :👍)
+    else
+        workspace = WorkspaceManager.get_workspace(notebook)
+
+        if isready(workspace.dowork_token)
+            Distributed.remotecall_eval(Main, workspace.workspace_pid, doc_fetcher(query, workspace.module_name))
+        else
+            (nothing, :⌛)
+        end
+    end
+
+    doc_html = doc === nothing ? nothing : repr(MIME("text/html"), doc)
+
+    msg = UpdateMessage(:doc_result, 
+        Dict(
+            :status => status,
+            :doc => doc_html,
+            ), notebook, nothing, initiator)
+
+    putclientupdates!(initiator, msg)
+end