Skip to content

Commit

Permalink
[Feat] Downlaod dataset & preview dataset str
Browse files Browse the repository at this point in the history
  • Loading branch information
@wenjie1991
wenjie1991 committed Aug 6, 2024
1 parent d90a9fa commit 4a2db62
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 30 deletions.
33 changes: 33 additions & 0 deletions R/lib.R
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,39 @@ fd_save = function(fdObj) {
unlock(lock)
}

fd_str_data = function(fdObj, id) {
fd_update(fdObj)
status = "error"
message = "Figure does not exist"
if (id %in% names(fdObj$env)) {
data = fdObj$env[[id]]$data
status = "ok"
message = capture.output(str(data)) |> paste(collapse = "\n")
}
return(list(
status = status,
message = message
))
}

fd_generate_data = function(fdObj, id) {
fd_update(fdObj)
status = "error"
if (id %in% names(fdObj$env)) {
g = fdObj$env[[id]]$g_updated
fig_name = fdObj$env[[id]]$name
csv_file = file.path(fdObj$dir, "tmp", paste0(fig_name, ".csv"))
data = fdObj$env[[id]]$data
write.csv(data, csv_file, row.names = FALSE)
status = "ok"
print(paste0("The csv file is saved to ", csv_file))
}
return(list(
status = status,
message = status
))
}

fd_generate_pdf = function(fdObj, id) {
fd_update(fdObj)
status = "error"
Expand Down
44 changes: 44 additions & 0 deletions R/server.R
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,45 @@
# font_list = sort(unique(sysfonts::font_files()$family))

response_fd_str_data = function(fo, req) {
# print("response_fd_str_data")
parsed_qeury = parse_url(req$QUERY_STRING)$query
figure_id = parsed_qeury$id
res = fd_str_data(fo, figure_id)
if (res$status == "error") {
list(
status = 400L,
headers = list('Content-Type' = "text/plain"),
body = res$message
)
} else {
list(
status = 200L,
headers = list('Content-Type' = "text/plain"),
body = res$message
)
}
}

response_fd_download_data = function(fo, req) {
# print("response_fd_download_data")
parsed_qeury = parse_url(req$QUERY_STRING)$query
figure_id = parsed_qeury$id
res = fd_generate_data(fo, figure_id)
if (res$status == "error") {
list(
status = 400L,
headers = list('Content-Type' = "text/plain"),
body = res$message
)
} else {
list(
status = 200L,
headers = list('Content-Type' = "text/plain"),
body = res$message
)
}
}

response_fd_download_pdf = function(fo, req) {
print("response_fd_download_pdf")
parsed_qeury = parse_url(req$QUERY_STRING)$query
Expand Down Expand Up @@ -147,6 +187,10 @@ fd_server = function(dir, port = 8080) {
response_fd_change_name(fo, req)
} else if (path == "/fd_download_pdf") {
response_fd_download_pdf(fo, req)
} else if (path == "/fd_download_data") {
response_fd_download_data(fo, req)
} else if (path == "/fd_str_data") {
response_fd_str_data(fo, req)
} else {
list(
status = 404L,
Expand Down
7 changes: 2 additions & 5 deletions inst/www/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,15 +154,12 @@ hr {
}

.tab_container {
display: flex;
flex-direction: column;
}

#tab_canvas {
display: none;
flex-direction: column;
}

#tab_ggplot {
display: flex;
}


Expand Down
12 changes: 9 additions & 3 deletions inst/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ <h1>ggfigdone [Making ggplot figure done quickly]</h1>

<h2 id="et_figure_name"></h2>
<div id="div_update_buttons">
<button class="btn_download_data" onclick="downloadData()" title="Download the data as CSV.">Download Data</button>
<button class="btn_download_pdf" onclick="downloadPDF()" title="Download the figure as PDF.">Download PDF</button>
<button class="btn_change_name" onclick="changeFigureName()" title="Change the figure name.">Change Name</button>
<button class="btn_delete" onclick="deleteFigure()" title="Remove figure. NOT reversible!">Delete</button>
Expand All @@ -39,8 +40,9 @@ <h2 id="et_figure_name"></h2>
<hr>

<div class="tab_button_container">
<button id="bt_ggplot" class="tablinks tab_active">Update ggplot code</button>
<button id="bt_canvas" class="tablinks">Update Canvas</button>
<button id="bt_ggplot" class="tablinks tab_active" title="Update ggplot by editing the code.">Update ggplot code</button>
<button id="bt_canvas" class="tablinks" title="Update figure canvas size.">Update Canvas</button>
<button id="bt_data" class="tablinks" title="View the dataset">Dataset structure</button>
</div>


Expand Down Expand Up @@ -78,10 +80,14 @@ <h2 id="et_figure_name"></h2>
<div class="et_options_h4">
<p> Please use `data` variable as dataset in ggplot code. </p>
<!--<textarea id="code" rows = "20"></textarea>-->
<div id="editor"></div>
<div id="editor_code"></div>
</div>
<button id="btn_change_figure" title="Apply the changes of ggplot2 code">Apply Changes</button>
</div>
<div class="tab_container" id="tab_data">
<p>Dataset structure generated by `str(data)` in R:</p>
<div id="editor_data"></div>
</div>
<div id="error_window">
<p id="error_message"></p>
</div>
Expand Down
47 changes: 30 additions & 17 deletions inst/www/js/ace-configure.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// Ace editor configuration options:
// https://github.com/ajaxorg/ace/wiki/Configuring-Ace#editor-options

var editor = ace.edit("editor");
//////////////////////////////////////////////
// Configure of the ggplot code editor

var editor_code = ace.edit("editor_code");

//editor.session.setMode("ace/mode/javascript");
// pass options to ace.edit
Expand All @@ -11,7 +14,7 @@ var editor = ace.edit("editor");
// })

// use setOptions method to set several options at once
editor.setOptions({
editor_code.setOptions({
mode: "ace/mode/r",
selectionStyle: "text",
maxLines: 36,
Expand All @@ -25,14 +28,14 @@ editor.setOptions({
highlightActiveLine: false,
});
// use setOptions method
editor.setOption("mergeUndoDeltas", "always");
editor_code.setOption("mergeUndoDeltas", "always");

// set wrap limit range
editor.session.setUseWrapMode(true);
editor_code.session.setUseWrapMode(true);

// some options are also available as methods e.g.
//editor.setTheme("ace/theme/github_light_default");
editor.setTheme("ace/theme/tomorrow_night");
editor_code.setTheme("ace/theme/tomorrow_night");

// to get the value of the option use
//editor.getOption("optionName");
Expand All @@ -42,22 +45,32 @@ fetch("./js/ggplot2.json")
.then(response => response.json())
.then(data => {
//console.log(data);
editor.completers.push({
getCompletions: function(editor, session, pos, prefix, callback) {
editor_code.completers.push({
getCompletions: function(editor_code, session, pos, prefix, callback) {
callback(null,
data
);
}
})
});

//editor.completers.push({
// getCompletions: function(editor, session, pos, prefix, callback) {
// callback(null,
// [
// {value: "foo", score: 1000, meta: "custom"},
// {value: "bar", score: 1000, meta: "custom"}
// ]
// );
// }
//})
//////////////////////////////////////////////
// Configure of the dataset editor

var editor_data = ace.edit("editor_data");

// The dataset editor is read-only
editor_data.setReadOnly(true);

editor_data.setOptions({
mode: "ace/mode/r",
selectionStyle: "text",
maxLines: 36,
minLines: 12,
autoScrollEditorIntoView: true,
copyWithEmptySelection: true,
showGutter: false,
//highlightActiveLine: false,
});

editor_data.setTheme("ace/theme/tomorrow_night");
60 changes: 55 additions & 5 deletions inst/www/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,40 @@
// Jquery is enabled in the html file

function strData() {
// Get the figure id
let figure_id = $("#et_figure_id").text();
let figure_name = $("#et_figure_name").text();
let baseUrl = window.location.origin;
let url = baseUrl + "/fd_str_data?id=" + figure_id;
$.ajax({
url: url,
type: "GET",
success: function (data) {
console.log(data);
// Show the data in the #editor_data
//$("#editor_data").val(data);
editor_data.setValue(data, -1);
},
});
}

function downloadData() {
// Get the figure id
let figure_id = $("#et_figure_id").text();
let figure_name = $("#et_figure_name").text();
let baseUrl = window.location.origin;
let url = baseUrl + "/fd_download_data?id=" + figure_id;
$.ajax({
url: url,
type: "GET",
success: function (data) {
console.log(data);
// Force the browser to download the file
window.open(baseUrl + "/tmp/" + figure_name + ".csv");
},
});
}

function downloadPDF() {
// Get the figure id
let figure_id = $("#et_figure_id").text();
Expand Down Expand Up @@ -172,7 +207,7 @@ function updateEditToolHtml(figure) {
$("#et_update_date").text(figure.updated_date);
// Update code
//$("#code").val(figure.code_updated);
editor.setValue(figure.code_updated[0], 1);
editor_code.setValue(figure.code_updated[0], 1);


// Update figure labels
Expand Down Expand Up @@ -390,7 +425,7 @@ function closeEditContainer() {

// Delete the code in the textarea
//$("#code").val("");
editor.setValue("");
editor_code.setValue("");

// Hide the mask
$("#mask").css("display", "none");
Expand Down Expand Up @@ -460,7 +495,7 @@ for (let i = 0; i < global_figureList.length; i++) {
// Load the previous code
//$("#code").val(figure.code_updated[0]);
//editor.setValue(figure.code_updated[0]);
editor.setValue(figure.code_updated[0], 1);
editor_code.setValue(figure.code_updated[0], 1);


loadFigure(figure_id, global_figureList);
Expand All @@ -483,7 +518,7 @@ $("#btn_add_to_code").click(function () {

if (gg_code != "") {
//$("#code").val(gg_code);
editor.setValue(gg_code);
editor_code.setValue(gg_code);
}
});

Expand Down Expand Up @@ -527,7 +562,7 @@ $("#btn_change_figure").click(function () {

// If code textarea is not empty, update the figure
//let gg_code = $("#code").val();
let gg_code = editor.getValue();
let gg_code = editor_code.getValue();

if (gg_code != "") {
global_figureList = updateFigurePost(figure_id, gg_code, global_figureList);
Expand All @@ -547,13 +582,28 @@ document.addEventListener("keydown", function(event) {
$("#bt_canvas").click(function () {
$("#tab_canvas").css("display", "flex");
$("#tab_ggplot").css("display", "none");
$("#tab_data").css("display", "none");
$("#bt_canvas").addClass("tab_active");
$("#bt_ggplot").removeClass("tab_active");
$("#bt_data").removeClass("tab_active");
});

$("#bt_ggplot").click(function () {
$("#tab_canvas").css("display", "none");
$("#tab_ggplot").css("display", "flex");
$("#tab_data").css("display", "none");
$("#bt_canvas").removeClass("tab_active");
$("#bt_ggplot").addClass("tab_active");
$("#bt_data").removeClass("tab_active");
});

$("#bt_data").click(function () {
$("#tab_canvas").css("display", "none");
$("#tab_ggplot").css("display", "none");
$("#tab_data").css("display", "flex");
$("#bt_canvas").removeClass("tab_active");
$("#bt_ggplot").removeClass("tab_active");
$("#bt_data").addClass("tab_active");
strData();
});

0 comments on commit 4a2db62

Please sign in to comment.