Skip to content

Commit 252fc14

Browse files
steveonisteveoni
committed
implement downloading and uploading of notebook json
1 parent 9da0ebc commit 252fc14

5 files changed

Lines changed: 178 additions & 12 deletions

File tree

‎notebookjs/src/public/javascripts/index.js‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,11 @@ function exec_cell(c_id) {
3939
let output = ("global", eval)(vars_in_scope[id].getValue())
4040
if (Array.isArray(output)) {
4141
output = print_val(output)
42-
} else if (typeof output === 'object' && output !== null) {
42+
}
43+
else if (typeof output === 'object' && output !== null) {
4344
output = JSON.stringify(output)
44-
} else if (console) {
45+
}
46+
else if (console) {
4547
//retreive value from the console funcction
4648
console.oldLog = console.log;
4749
console.log = function (value) {
@@ -51,7 +53,10 @@ function exec_cell(c_id) {
5153
if (Array.isArray(output)) {
5254
output = print_val(output)
5355
} else {
54-
output = JSON.stringify(output)
56+
if(typeof output === 'object' && output !== null){
57+
output = JSON.stringify(output)
58+
}
59+
5560
}
5661
}
5762

@@ -285,15 +290,15 @@ $(document).on("click", "button.add-text", function () {
285290
add_new_text_cell(this.id, where)
286291
})
287292

288-
$(document).on("dblclick", "textarea.text-box", function () {
289-
let id = this.id.split("_")[1]
290-
show_md(id, this.value)
293+
// $(document).on("dblclick", "textarea.text-box", function () {
294+
// let id = this.id.split("_")[1]
295+
// show_md(id, this.value)
291296

292-
})
297+
// })
293298

294299
function show_md(id, value) {
295300
div_id = `text-div_${id}`
296-
// md_texts[div_id] = value //stores the markdown text for the corresponding div
301+
md_texts[div_id] = value //stores the markdown text for the corresponding div
297302
render_md = md.render(value)
298303
$(`#out-text-div_${id}`).html(render_md).show()
299304
document.getElementById(div_id).style.display = "none"
@@ -322,6 +327,36 @@ function update_text_box_size() {
322327

323328

324329
$("#download").click(function () {
325-
let out = notebook_json(vars_in_scope);
326-
console.log(out);
330+
let out = notebook_json(vars_in_scope,md_texts);
331+
332+
var blob = new Blob([out], { "type": "application/json" });
333+
var url = (window.URL || window.webkitURL).createObjectURL(blob);
334+
335+
var link = document.createElement('a');
336+
link.download = 'danfo_notebook.json';
337+
link.href = url;
338+
339+
var link_pae = $(link);
340+
$("body").append(link_pae);//maybe needed
341+
link.click();
342+
link_pae.remove();
327343
});
344+
345+
$("#uploadnb").click(function() {
346+
347+
var files = $("#import-notebook-file")[0].files
348+
let json_content = null
349+
if(files.length > 0){
350+
var content = files[0];
351+
var reader = new FileReader();
352+
reader.onload = function(t){
353+
json_content = t.target.result;
354+
let json = JSON.parse(json_content)
355+
356+
$(".content").empty()
357+
358+
load_notebook(json);
359+
}
360+
reader.readAsText(content);
361+
}
362+
})

‎notebookjs/src/public/javascripts/utils.js‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,4 +204,129 @@ function LoadPackage(array, callback) {
204204
})();
205205
}
206206

207+
function md_load(id){
208+
209+
let md = `<div class="row" style="margin-top: 10px;" id="cell-${id}"></div>`
210+
211+
return md;
212+
}
213+
214+
function html_load(new_id){
215+
216+
let html = `
217+
<div class="row" style="margin-top: 10px;" id="cell-${new_id}">
218+
<div class="col-md-1">
219+
<p id="cell-num" class="code_symbol">[${new_id}]</p>
220+
</div>
221+
<div id="div-${new_id}" class="col-md-9">
222+
<div id="btn-actions-${new_id}" class="btn-group-horizontal" style="display: none;">
223+
<button type="button" id="run_div-${new_id}" class="btn btn-sm btn-success run"><i
224+
class="fas fa-play"></i>Run</button>
225+
<div class="btn-group" role="group" aria-label="Basic example">
226+
227+
<button type="button" id="add_code_down_btn-${new_id}" class="btn btn-sm btn-info add-code">
228+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Code
229+
</button>
230+
<button type="button" id="add_code_up_btn-${new_id}" class="btn btn-sm btn-info add-code">
231+
<i class="fas fa-sort-up"></i> Code
232+
</button>
233+
234+
</div>
235+
236+
<div class="btn-group" role="group" aria-label="Basic example">
237+
238+
<button type="button" id="add_text_down_btn-${new_id}" class="btn btn-sm btn-info add-text">
239+
<i class="fas fa-sort-down" style="margin-top: -10px;"></i> Text
240+
</button>
241+
<button type="button" id="add_text_up_btn-${new_id}" class="btn btn-sm btn-info add-text">
242+
<i class="fas fa-sort-up"></i> Text
243+
</button>
244+
</div>
245+
246+
<button type="button" id="del_btn-${new_id}" class="btn btn-sm btn-danger del"><i
247+
class="fas fa-trash-alt"></i>
248+
</button>
249+
</div>
250+
251+
</div>
252+
<div class="col-md-2"></div>
253+
<div class="col-md-1"></div>
254+
<div id="out_div-${new_id}" class="col-md-9 out-divs">
255+
256+
</div>
257+
<div class="col-md-2"></div>
258+
</div>
259+
`
260+
return html;
261+
}
262+
263+
function load_notebook(json){
264+
265+
266+
for(let key in json){
267+
268+
let id = key.split("-")[1]
269+
270+
if(Object.prototype.hasOwnProperty.call(json[key], "in")){
271+
let html = html_load(id)
272+
273+
$(".content").append(html)
274+
275+
const editor = CodeMirror(document.getElementById(`div-${id}`), {
276+
lineNumbers: true,
277+
tabSize: 1,
278+
mode: 'javascript',
279+
theme: 'monokai',
280+
value: ''
281+
});
282+
let input = json[key]["in"]
283+
editor.getDoc().setValue(input);
284+
285+
vars_in_scope[`div-${id}`] = editor
286+
287+
let out = json[key]["out"]
288+
289+
$(`#out_div-${id}`).html(out);
290+
291+
$(`#div-${id}`)
292+
.mouseover(function () {
293+
$(`#btn-actions-${id}`).show()
294+
})
295+
.mouseout(function () {
296+
$(`#btn-actions-${id}`).hide()
297+
});
298+
299+
}else{
300+
301+
let md = md_load(id)
302+
303+
$(".content").append(md);
304+
305+
let out = json[key]["out"]
306+
$(`#cell-${id}`).html(out)
307+
308+
let md_out = json[key]["md"]
309+
// console.log(md_out)
310+
md_texts[`text-div_${Number(id)}`] = md_out;
311+
312+
vars_in_scope[`div_text-${id}`] = ""
313+
314+
$(`textarea#text-box_${id}`).addClass("text-box")
315+
$(`textarea#text-box_${id}`).val(md_out)
316+
// update_text_box_size()
317+
318+
$(`#text-div_${id}`)
319+
.mouseover(function () {
320+
document.getElementById(`btn-actions-${id}`).style.display = "block"
321+
})
322+
.mouseout(function () {
323+
document.getElementById(`btn-actions-${id}`).style.display = "none"
324+
});
325+
}
326+
327+
__code_cell_count = parseInt(id)
328+
329+
}
330+
}
331+
207332

‎notebookjs/src/views/index.hbs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<body>
22

3-
<div class="">
3+
<div class="content">
44
<div class="row" style="margin-top: 50px;" id="cell-1">
55
<div class="col-md-1">
66
<p id="cell-num" class="code_symbol">[1]</p>

‎notebookjs/src/views/layout.hbs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@
7474
aria-haspopup="true" aria-expanded="false">
7575
File
7676
</a>
77+
Import: <input type="file"
78+
id="import-notebook-file" name="import-notebook-file" style="display: inline;">
79+
<button type="button" class="btn btn-lg btn-primary" id="uploadnb">Import</button>
7780
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
7881
<a class="dropdown-item" id="download" href="#">Download Notebook</a>
7982
<a class="dropdown-item" id="upload" href="#">Upload Notebook</a>

‎notebookjs/src/views/notebook.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,10 @@
137137
md_texts[`text-div_${Number(id)}`] = md_out;
138138

139139
vars_in_scope[`div_text-${id}`] = ""
140-
update_text_box_size()
140+
141+
$(`textarea#text-box_${id}`).addClass("text-box")
142+
$(`textarea#text-box_${id}`).val(md_out)
143+
// update_text_box_size()
141144

142145
$(`#text-div_${id}`)
143146
.mouseover(function () {

0 commit comments

Comments
 (0)