add style

Author: risenW

notebookjs/src/public/javascripts/index.js

@@ -41,16 +41,30 @@ $("#div-1")
 
 
 
+// function clear_cell() {
+//     document.getElementById("log-container").style.display = "none"
+//     $(`#log`).html("")
+    
+
+// }
 
 function exec_cell(c_id) {
+    // document.getElementById("log-container").style.display = "block"
     let id = c_id.split("_")[1]
     let count = c_id.split("-")[1]
     window.current_cell = id;
-
     $(`#out_${id}`).html("")
+    // console.log(id);
+    // logger(`log-${id.split("-")[1]}`, `log_container-${id.split("-")[1]}`, true)
+
+
+    // let command = vars_in_scope[id].getValue()
+    // console.log(command);
+    // logger(`log-container-${id.split("-")[1]}`, `log-${id.split("-")[1]}`)
 
     try {
         let output = ("global", eval)(vars_in_scope[id].getValue())
+
         if (Array.isArray(output)) {
             output = print_val(output)
         } else if (typeof output === 'object' && output !== null) {
@@ -59,7 +73,7 @@ function exec_cell(c_id) {
                 output = ""
             }
         } else if (console) {
-            //retreive value from the console funcction
+            // retreive value from the console funcction
             console.oldLog = console.log;
             console.log = function (value) {
                 return value;
@@ -81,10 +95,11 @@ function exec_cell(c_id) {
 
         // $(`#out_${id}`).empty()
         let command = vars_in_scope[id].getValue()
-       if (command.includes("table") || command.includes("plot") || command.includes("console.log(")){
-        // $(`#out_${id}`).html("")
-        $(`#out_${id}`).html(output);
-       }
+        // console.log(command);
+        if (command.includes("table") || command.includes("plot") || command.includes("console.log(")) {
+            $(`#out_${id}`).html("")
+            $(`#out_${id}`).html(output);
+        }
         // document.getElementById("cell_spinner-1").style.display = "none"
         // document.getElementById("cell_num-1").style.display = "block"
 
@@ -152,6 +167,9 @@ function add_new_code_cell(c_id, where) {
     </div>
     <div class="col-md-2"></div>
     <div class="col-md-1"></div>
+    <div id="log_container-${new_id}" class="col-md-9 out-divs">
+    <pre id="log-${new_id}"></pre>
+</div>
     <div id="out_div-${new_id}" class="col-md-9 out-divs">
 
     </div>
@@ -381,13 +399,11 @@ function update_text_box_size() {
 $("#download").click(function () {
     let out = notebook_json(cells_order, vars_in_scope, md_texts);
 
-    let blob = new Blob([out], { "type": "application/json" });
-    let url = (window.URL || window.webkitURL).createObjectURL(blob);
+    var blob = new Blob([out], { "type": "application/json" });
+    var url = (window.URL || window.webkitURL).createObjectURL(blob);
 
-    let link = document.createElement('a');
-    let text = $("#notebookname").text()
-    let name = text.length > 0 ? `${text}.json` : "Dnotebook.json"
-    link.download = name;
+    var link = document.createElement('a');
+    link.download = 'danfo_notebook.json';
     link.href = url;
 
     var link_pae = $(link);
@@ -438,22 +454,45 @@ $("#import-notebook-file").change(() => {
 // })
 
 
+// rewireLoggingToElement(
+//     () => document.getElementById("log"),
+//     () => document.getElementById("log-container"), true);
+
+// function rewireLoggingToElement(eleLocator, eleOverflowLocator, autoScroll) {
+//     fixLoggingFunc('log');
+//     fixLoggingFunc('debug');
+//     fixLoggingFunc('warn');
+//     fixLoggingFunc('error');
+//     fixLoggingFunc('info');
+
+
+//     function fixLoggingFunc(name) {
+//         console['old' + name] = console[name];
+//         console[name] = function (...arguments) {
+//             const output = produceOutput(name, arguments);
+//             const eleLog = eleLocator();
+
+//             if (autoScroll) {
+//                 const eleContainerLog = eleOverflowLocator();
+//                 const isScrolledToBottom = eleContainerLog.scrollHeight - eleContainerLog.clientHeight <= eleContainerLog.scrollTop + 1;
+//                 eleLog.innerHTML += output + "<br>";
+//                 if (isScrolledToBottom) {
+//                     eleContainerLog.scrollTop = eleContainerLog.scrollHeight - eleContainerLog.clientHeight;
+//                 }
+//             } else {
+//                 eleLog.innerHTML += output + "<br>";
+//             }
+
+//             console['old' + name].apply(undefined, arguments);
+//         };
+//     }
 
-async function load_data(path) {
-    document.getElementById("cell-running").style.display = "block"
-    let df = await dfd.read_csv(path)
-    document.getElementById("cell-running").style.display = "none"
-    return df
-
-}
-
-$("#closename").click(function(){
-
-    let textval = $("#namebook").val()
-    
-    $("#notebookname").html(`<h2>${textval}</h2>`)
-});
-
-
-
-
+//     function produceOutput(name, args) {
+//         return args.reduce((output, arg) => {
+//             return output +
+//                 "<span class=\"log-" + (typeof arg) + " log-" + name + "\">" +
+//                 (typeof arg === "object" && (JSON || {}).stringify ? JSON.stringify(arg) : arg) +
+//                 "</span>&nbsp;";
+//         }, '');
+//     }
+// }

notebookjs/src/public/stylesheets/style.css

@@ -1,15 +1,15 @@
-/* body {
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-} */
+body {
+  font: 8px
+}
 
 a {
   color: #00B7FF;
 }
 
 .container{
   padding: 20px;
-  /* margin-left: 10px; */
-  /* margin-right: 10px; */
+  margin-left: 10px; 
+  margin-right: 10px;
 }
 
 .out-divs{
@@ -70,4 +70,15 @@ table.df-table th, td {
 
 table.df-table .float32, .int32 {
   text-align: right;
-}
+}
+
+.ow-break-word {
+  overflow-wrap: break-word;
+}
+
+/* body {background: #333;} */
+.log-boolean,
+.log-undefined {color: magenta;}
+.log-object,
+.log-string {color: orange;}
+.log-number {color: cyan;}