Skip to content
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

Jupyterlab plugin feature improvements #307

Merged
merged 3 commits into from
Nov 14, 2018
Merged

Jupyterlab plugin feature improvements #307

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f99443a
remove copy/dl buttons from jlab, fixes CSS issues
timkpaine Nov 12, 2018
a62fc7d
fix version mismatch, set limit and index
timkpaine Nov 12, 2018
2d2cdcb
fix for index/limit loading
timkpaine Nov 12, 2018
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
Next Next commit
remove copy/dl buttons from jlab, fixes CSS issues
  • Loading branch information
@timkpaine @texodus
timkpaine authored and texodus committed Nov 14, 2018
commit f99443af4e13528f433605234f32eef44a244b43
1 change: 1 addition & 0 deletions packages/perspective-jupyterlab/src/less/material.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ div.jp-PSPContainer {
overflow: auto;
resize: both;
padding-right: 20px;
padding-bottom: 20px;
height: 450px;
}

Expand Down
154 changes: 0 additions & 154 deletions packages/perspective-jupyterlab/src/ts/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
*
*/

import {Clipboard} from '@jupyterlab/apputils';

/* defines */
export
const MIME_TYPE = 'application/psp+json';
Expand All @@ -29,155 +27,3 @@ export function datasourceToSource(source: string){
return 'static';
}
}

export function convertToCSV(objArray: Array<Object>): string {
//https://medium.com/@danny.pule/export-json-to-csv-file-using-javascript-a0b7bc5b00d2
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';

for (var i = 0; i < array.length; i++) {
var header = '';
var line = '';
for (var index in array[i]) {
if (i === 0){
if (header != ''){
header += ', ';
}
header += index;
}
if (line != ''){
line += ', ';
}
line += array[i][index];
}

if (i === 0){
str += header + '\r\n';
}
str += line + '\r\n';
}

return str;
}

export
function createCopyDl(psp: any) : {[key:string]:HTMLElement;} {
let copy_button = document.createElement('button');
copy_button.textContent = 'copy';
let dl_button = document.createElement('button');
dl_button.textContent = 'download';

let viewtype: string;
let data: any;
let height: number;
let width: number;
let png: any;
let canvas: HTMLCanvasElement;
let img: any;

copy_button.onmousedown = () => {
viewtype = psp.getAttribute('view');
if (viewtype === 'hypergrid') {
psp._view.to_json().then((dat: Array<Object>) => {
data = dat;
});
} else {
let svg = psp.querySelector('svg') as SVGSVGElement;
height = svg.height.baseVal.value;
width = svg.width.baseVal.value;
data = new XMLSerializer().serializeToString(svg);
canvas = document.createElement('canvas') as HTMLCanvasElement;
canvas.height = height;
canvas.width = width;

let ctx = canvas.getContext("2d");
let DOMURL = window.URL || (window as any).webkitURL || window;
img = new Image();
let svg2 = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

let url = DOMURL.createObjectURL(svg2);
img.onload = function() {
ctx.drawImage(img, 0, 0, width, height);
png = canvas.toDataURL("image/png");
};
img.src = url;
}
}

dl_button.onmousedown = copy_button.onmousedown;

copy_button.onclick = () => {
let copied = false;
let timeout = 100;
while (timeout<=16000){
setTimeout(() => {
if(copied){
return;
}
if (data) {
if(viewtype === 'hypergrid'){
Clipboard.copyToSystem(convertToCSV(data));
} else {
if (!png){
//not ready
return
}
canvas.focus();
document.execCommand("copy");
}
copied = true;
} else if (timeout == 16000){
console.error('Timeout waiting for perspective!');
}
}, timeout);
timeout *= 2;
}
};

dl_button.onclick = () => {
let dl = false;
let timeout = 100;
while (timeout<=16000){
setTimeout(() => {
if(dl){
return;
}
if (data) {
if(viewtype === 'hypergrid'){
let csv = convertToCSV(data);
let csvContent = "data:text/csv;charset=utf-8," + csv;
let DOMURL = window.URL || (window as any).webkitURL || window;
var a = document.createElement('a');
a.download = 'psp.csv';
a.target = "_blank";
a.href = csvContent;
document.body.appendChild(a);
a.click();
a.remove();
DOMURL.revokeObjectURL(png);
} else {
if (!png){
//not ready
return
}
let DOMURL = window.URL || (window as any).webkitURL || window;
var a = document.createElement('a');
a.download = 'psp.png';
a.target = "_blank";
a.href = png;
document.body.appendChild(a);
a.click();
a.remove();
DOMURL.revokeObjectURL(png);
}
dl = true;
} else if (timeout == 16000){
console.error('Timeout waiting for perspective!');
}
}, timeout);
timeout *= 2;
}
};

return {copy: copy_button, dl:dl_button};
}
17 changes: 10 additions & 7 deletions packages/perspective-jupyterlab/src/ts/widget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ import {MIME_TYPE, PSP_CLASS, PSP_CONTAINER_CLASS, PSP_CONTAINER_CLASS_DARK} fro
import {PERSPECTIVE_VERSION} from './version.ts';

/* Helper methods */
import {
datasourceToSource, createCopyDl
} from './utils.ts';
import {datasourceToSource} from './utils.ts';

/* perspective components */
import "@jpmorganchase/perspective-viewer";
Expand Down Expand Up @@ -251,19 +249,24 @@ namespace Private {
psp.className = PSP_CLASS;
psp.setAttribute('type', MIME_TYPE);

let btns = createCopyDl(psp);

while(node.lastChild){
node.removeChild(node.lastChild);
}

node.appendChild(psp);

// allow perspective's event handlers to do their work
psp.addEventListener( 'contextmenu', stop, false );
psp.addEventListener( 'mousedown', stop, false );
psp.addEventListener( 'mousedown', stop, false );

function stop( event: MouseEvent ) {
event.stopPropagation();
}

let div = document.createElement('div');
div.style.setProperty('display', 'flex');
div.style.setProperty('flex-direction', 'row');
div.appendChild(btns['copy']);
div.appendChild(btns['dl']);
node.appendChild(div);
return psp;
}
Expand Down