Skip to content

[ZEPPELIN-997] Export data to csv #1008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
minahlee wants to merge 4 commits into from
Closed

[ZEPPELIN-997] Export data to csv #1008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ad6f47
Export data to csv
minahlee Jun 13, 2016
5437c4f
Use split button dropdowns for downloading data
minahlee Jun 14, 2016
e48c303
Fix integration test after adding csv download button
minahlee Jun 14, 2016
dabb603
Add tooltip and change style for dropdown button
minahlee Jun 14, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions zeppelin-server/src/test/java/org/apache/zeppelin/integration/SparkParagraphIT.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,10 +165,10 @@ public void testSqlSpark() throws Exception {
}

WebElement paragraph1Result = driver.findElement(By.xpath(
getParagraphXPath(1) + "//div[@class=\"tableDisplay\"]"));
getParagraphXPath(1) + "//div[@class=\"tableDisplay\"]//table"));
collector.checkThat("Paragraph from SparkParagraphIT of testSqlSpark result: ",
paragraph1Result.getText().toString(), CoreMatchers.equalTo("age\njob\nmarital\neducation\nbalance\n30" +
" unemployed married primary 1,787\nage\njob\nmarital\neducation\nbalance"));
paragraph1Result.getText().toString(), CoreMatchers.equalTo("age\njob\nmarital\neducation\nbalance\n" +
"30 unemployed married primary 1,787"));
} catch (Exception e) {
handleException("Exception in SparkParagraphIT while testSqlSpark", e);
}
Expand Down
19 changes: 15 additions & 4 deletions zeppelin-web/src/app/notebook/paragraph/paragraph-chart-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,22 @@
ng-click="setGraphMode('scatterChart', true)"><i class="cf cf-scatter-chart"></i>
</button>
</div>
<span>
<button type="button" class="btn btn-default btn-sm" style="margin-left:10px"
tooltip="Download Data as TSV" tooltip-placement="bottom"
ng-click="exportToTSV()"><i class="fa fa-download"></i>
<span class="btn-group">
<button type="button" class="btn btn-default btn-sm"
style="margin-left:10px"
Copy link
Contributor

@corneadoug corneadoug Jun 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you restore the tooltip on the main button? (with CSV instead of TSV)

ng-click="exportToDSV(',')"
tooltip="Download Data as CSV" tooltip-placement="bottom">
<i class="fa fa-download"></i>
</button>
<button type="button" class="btn btn-default btn-sm dropdown-toggle caretBtn"
data-toggle="dropdown">
<span class="caret" style="margin: 0px;"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu" style="min-width: 70px;">
<li ng-click="exportToDSV(',')"><a>CSV</a></li>
<li ng-click="exportToDSV('\t')"><a>TSV</a></li>
</ul>
</span>
<span ng-if="getGraphMode()!='table'"
style="margin-left:5px; cursor:pointer; display: inline-block; vertical-align:top; position: relative; line-height:30px;">
Expand Down
22 changes: 14 additions & 8 deletions zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2145,21 +2145,27 @@ angular.module('zeppelinWebApp')
$scope.keepScrollDown = false;
};

$scope.exportToTSV = function () {
$scope.exportToDSV = function (delimiter) {
var data = $scope.paragraph.result;
var tsv = '';
var dsv = '';
for (var titleIndex in $scope.paragraph.result.columnNames) {
tsv += $scope.paragraph.result.columnNames[titleIndex].name + '\t';
dsv += $scope.paragraph.result.columnNames[titleIndex].name + delimiter;
}
tsv = tsv.substring(0, tsv.length - 1) + '\n';
dsv = dsv.substring(0, dsv.length - 1) + '\n';
for (var r in $scope.paragraph.result.msgTable) {
var row = $scope.paragraph.result.msgTable[r];
var tsvRow = '';
var dsvRow = '';
for (var index in row) {
tsvRow += row[index].value + '\t';
dsvRow += row[index].value + delimiter;
}
tsv += tsvRow.substring(0, tsvRow.length - 1) + '\n';
dsv += dsvRow.substring(0, dsvRow.length - 1) + '\n';
}
SaveAsService.SaveAs(tsv, 'data', 'tsv');
var extension = '';
if (delimiter === '\t') {
extension = 'tsv';
Copy link
Member

@felixcheung felixcheung Jun 14, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is likely out of scope for this change, for csv (likely tsv), strictly speaking we would need to escape any , in the data:
https://en.wikipedia.org/wiki/Comma-separated_values#General_functionality
otherwise when the data is read it will be misaligned.

} else if (delimiter === ',') {
extension = 'csv';
}
SaveAsService.SaveAs(dsv, 'data', extension);
};
});
12 changes: 7 additions & 5 deletions zeppelin-web/src/app/notebook/paragraph/paragraph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,10 +449,6 @@ table.dataTable.table-condensed .sorting_desc:after {
font-weight: 500;
}

.dropdown-menu > li:first-child > a:hover {
background-color: transparent;
}

table.table-striped {
border-top: 1px solid #ddd;
margin-top: 20px;
Expand All @@ -464,10 +460,16 @@ table.table-striped {
cursor: pointer;
}


.scroll-paragraph-up {
bottom: 5px;
cursor: pointer;
position: absolute;
right: 15px;
}

/* DSV download toggle button */
.caretBtn {
padding-right: 4px !important;
padding-left: 4px !important;
width: 20px;
}