/*

* Project Name : Visual Python

* Description : GUI-based Python code generator

* File Name : Import.js

* Author : Black Logic

* Note : Apps > Import

* License : GNU GPLv3 with Visual Python special exception

* Date : 2021. 11. 18

* Change Date :

*/

//============================================================================

// [CLASS] Import

//============================================================================

define([

__VP_CSS_LOADER__('vp_base/css/m_apps/import'), // INTEGRATION: unified version of css loader

'vp_base/js/com/com_util',

'vp_base/js/com/com_Const',

'vp_base/js/com/com_String',

'vp_base/js/com/component/PopupComponent'

], function(importCss, com_util, com_Const, com_String, PopupComponent) {

const importTemplates = {

'data-analysis': [

{ i0: 'numpy', i1: 'np', type: 'module', checked: 'checked'},

{ i0: 'pandas', i1: 'pd', type: 'module', checked: 'checked'},

{

i0: 'matplotlib.pyplot', i1: 'plt', type: 'module'

, include: [

'%matplotlib inline'

], checked: 'checked'

},

{ i0: 'seaborn', i1: 'sns', type: 'module', checked: 'checked'},

{

i0: 'plotly.express', i1: 'px', type: 'module'

, include: [

'from plotly.offline import init_notebook_mode',

'init_notebook_mode(connected=True)'

], checked: ''

},

{ i0: 'pyarrow', i1: 'pa', type: 'module', checked: ''},

],

'machine-learning': [

{ i0: 'sklearn.model_selection', i1: 'train_test_split', type: 'function', checked: 'checked' },

{ i0: 'sklearn', i1: 'metrics', type: 'function', checked: 'checked' }

]

}

/**

* Import

*/

class Import extends PopupComponent {

_init() {

super._init();

/** Write codes executed before rendering */

this.config.dataview = false;

this.config.sizeLevel = 1;

let savedData = vpConfig.getDataSimple('', 'vpimport');

// Reset abnormal data

if (savedData == undefined || savedData.tabType == undefined) {

savedData = {};

vpConfig.setData(null, 'vpimport');

}

this.state = {

tabType: 'data-analysis',

importMeta: [],

...savedData,

...this.state

}

this.importTemplatesCopy = JSON.parse(JSON.stringify(importTemplates));

if (!this.state.importMeta || this.state.importMeta.length <= 0) {

this.state.importMeta = JSON.parse(JSON.stringify(this.importTemplatesCopy[this.state.tabType]));

}

}

_bindEvent() {

super._bindEvent();

let that = this;

// select tab

$(this.wrapSelector('.vp-tab-button')).on('click', function() {

let tabType = $(this).data('tab');

// set button selected

that.state.tabType = tabType;

$(that.wrapSelector('.vp-tab-button')).removeClass('vp-tab-selected');

$(this).addClass('vp-tab-selected');

// replace libraries

that.state.importMeta = that.importTemplatesCopy[tabType];

$(that.wrapSelector('#vp_tblImport')).replaceWith(function() {

return that.templateTable(that.state.importMeta);

});

});

// delete lib

$(this.wrapSelector()).on("click", '.vp-remove-option', function() {

$(this).closest('tr').remove();

that.checkAll();

});

// check/uncheck all

$(this.wrapSelector()).on('change', '#vp_libraryCheckAll', function() {

var checked = $(this).prop('checked');

$(that.wrapSelector('.vp-item-check')).prop('checked', checked);

});

// check item

$(this.wrapSelector()).on('change', '.vp-item-check', function() {

var checked = $(this).prop('checked');

// if unchecked at least one item, uncheck check-all

if (!checked) {

$(that.wrapSelector('.vp-check-all')).prop('checked', false);

} else {

// if all checked, check check-all

that.checkAll();

}

});

// add module

$(this.wrapSelector('#vp_addModule')).click(function() {

var libsLength = $(that.wrapSelector("#vp_tblImport tbody tr")).length;

var tagTr = $(that.templateForModule(libsLength, '', ''));

$(that.wrapSelector("#vp_tblImport tr:last")).after(tagTr);

});

// add function

$(this.wrapSelector('#vp_addFunction')).click(function() {

var libsLength = $(that.wrapSelector("#vp_tblImport tbody tr")).length;

var tagTr = $(that.templateForFunction(libsLength, '', ''));

$(that.wrapSelector("#vp_tblImport tr:last")).after(tagTr);

});

}

checkAll() {

// check if all checked

// if all checked, check check-all

var allLength = $(this.wrapSelector('.vp-item-check')).length;

var checkedLength = $(this.wrapSelector('.vp-item-check:checked')).length;

if (allLength == checkedLength) {

$(this.wrapSelector('.vp-check-all')).prop('checked', true);

} else {

$(this.wrapSelector('.vp-check-all')).prop('checked', false);

}

}

templateForBody() {

/** Implement generating template */

var page = new com_String();

// tab buttons

page.appendLine('<div class="vp-tab-box">');

page.appendFormatLine('<div class="vp-tab-button {0}" data-tab="{1}">{2}</div>'

, this.state.tabType=='data-analysis'?'vp-tab-selected':'', 'data-analysis', 'Data Analysis');

page.appendFormatLine('<div class="vp-tab-button {0}" data-tab="{1}">{2}</div>'

, this.state.tabType=='machine-learning'?'vp-tab-selected':'', 'machine-learning', 'Machine Learning');

page.appendLine('</div>');

// import table

page.appendLine(this.templateTable(this.state.importMeta));

page.appendLine('<input type="button" id="vp_addModule" value="+ Module" class="vp-button" title="import (module) as"/>');

page.appendLine('<input type="button" id="vp_addFunction" value="+ Function" class="vp-button" title="from (module) import (function)"/>');

return page.toString();

}

templateTable(libraries) {

var page = new com_String();

page.appendLine('<table id="vp_tblImport" class="vp-tbl-basic w90 vp-tbl-gap5">');

page.appendLine('<colgroup><col width="10px"/><col width="10%"/><col width="30%"/><col width="10%"/><col width="30%"/><col width="*"/></colgroup>');

page.appendLine('<thead><tr>');

page.appendFormat('<th><input id="{0}" type="checkbox" class="vp-checkbox vp-check-all" checked/></th>', 'vp_libraryCheckAll');

page.appendLine('<th></th><th></th><th></th><th></th><th></th>');

page.appendLine('</tr></thead>');

page.appendLine('<tbody>');

let that = this;

libraries && libraries.forEach((lib, idx) => {

if (lib.type == 'function') {

page.appendLine(that.templateForFunction(idx, lib.i0, lib.i1, (lib.checked === 'checked' || lib.checked === true)));

} else {

page.appendLine(that.templateForModule(idx, lib.i0, lib.i1, (lib.checked === 'checked' || lib.checked === true)));

}

});

page.appendLine('</tbody>');

page.appendLine('</table>');

return page.toString();

}

templateForModule(idx, moduleName, aliasName, checked=true) {

var tag = new com_String();

tag.append('<tr data-type="module">');

// checkbox

tag.appendFormat('<td><input id="{0}" type="checkbox" class="vp-checkbox vp-item-check" {1}/></td>'

, 'vp_libraryCheck' + idx, checked?'checked':'');

// inputs

tag.appendFormat('<td style="{0}">import</td>', 'text-align="center";');

tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" required value="{3}"/></td>'

, 'vp_i0_' + idx, 'vp-input m vp-add-i0', 'Type module', moduleName);

tag.appendFormat('<td style="{0}">as</td>', 'text-align="center";');

tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" value="{3}"/></td>'

, 'vp_i1_' + idx, 'vp-input m vp-add-i1', 'Type alias', aliasName);

// LAB: img to url

// tag.appendFormat('<td class="{0}"><img src="{1}"/></td>', 'vp-remove-option w100 vp-cursor', com_Const.IMAGE_PATH + 'close_small.svg');

tag.appendFormat('<td class="{0} {1}"></td>', 'vp-remove-option w100 vp-cursor', 'vp-icon-close-small');

tag.append('</tr>');

return tag.toString();

}

templateForFunction(idx, moduleName, functionName, checked=true) {

var tag = new com_String();

tag.append('<tr data-type="function">');

// checkbox

tag.appendFormat('<td><input id="{0}" type="checkbox" class="vp-checkbox vp-item-check" {1}/></td>'

, 'vp_libraryCheck' + idx, checked?'checked':'');

// inputs

tag.appendFormat('<td style="{0}">from</td>', 'text-align="center";');

tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" required value="{3}"/></td>'

, 'vp_i0_' + idx, 'vp-input m vp-add-i0', 'Type module', moduleName);

tag.appendFormat('<td style="{0}">import</td>', 'text-align="center";');

tag.appendFormat('<td><input id="{0}" type="text" class="{1}" placeholder="{2}" value="{3}"/></td>'

, 'vp_i1_' + idx, 'vp-input m vp-add-i1', 'Type function', functionName);

// LAB: img to url

// tag.appendFormat('<td class="{0}"><img src="{1}"/></td>', 'vp-remove-option w100 vp-cursor', com_Const.IMAGE_PATH + 'close_small.svg');

tag.appendFormat('<td class="{0} {1}"></td>', 'vp-remove-option w100 vp-cursor', 'vp-icon-close-small');

tag.append('</tr>');

return tag.toString();

}

render() {

super.render();

this.checkAll();

}

generateCode() {

var sbCode = new com_String();

// code generate with library list

var importMeta = [];

var libraryList = $(this.wrapSelector("#vp_tblImport tbody tr"));

for (var idx = 0; idx < libraryList.length; idx++) {

var pacType = $(libraryList[idx]).data('type');

var pacI0 = $(libraryList[idx]).find('.vp-add-i0').val();

var pacI1 = $(libraryList[idx]).find('.vp-add-i1').val().trim();

var pacChecked = $(libraryList[idx]).find('.vp-item-check').prop('checked');

if (pacI0 == "") {

continue;

}

if (pacChecked === true) {

if (sbCode.toString().trim().length > 0) {

sbCode.appendLine();

}

if (pacType == 'function') {

// function

sbCode.appendFormat("from {0} import {1}", pacI0, pacI1);

} else {

// module

sbCode.appendFormat("import {0}{1}", pacI0, ((pacI1 === undefined || pacI1 === "") ? "" : (" as " + pacI1)));

}

// Need additional code?

if (pacI0 == 'matplotlib.pyplot' || pacI0 == 'matplotlib') {

sbCode.appendLine();

sbCode.append('%matplotlib inline');

}

if (pacI0 == 'plotly.express' || pacI0 == 'plotly') {

sbCode.appendLine();

sbCode.appendLine('from plotly.offline import init_notebook_mode');

sbCode.append('init_notebook_mode(connected=True)');

}

}

importMeta.push({ i0: pacI0, i1: pacI1, type: pacType, checked: (pacChecked?'checked':'') });

}

this.state.importMeta = importMeta;

// save import packages

vpConfig.setData({ tabType: this.state.tabType, importMeta: importMeta }, 'vpimport');

this.generatedCode = sbCode.toString();

return sbCode.toString();

}

}

return Import;

});