diff --git a/html/component/popupComponent.html b/html/component/popupComponent.html index a29fe11e..a7fc06f5 100644 --- a/html/component/popupComponent.html +++ b/html/component/popupComponent.html @@ -13,8 +13,9 @@

- Title -

+ +

Title

@@ -29,7 +30,7 @@

Title -

@@ -42,27 +43,28 @@

- + +

- - Minimize this popup

Install Package -

Import Library -

Package Manager -

@@ -87,7 +89,7 @@

- +

Save to block

Code to cell

diff --git a/html/component/successMessage.html b/html/component/successMessage.html index b1766e94..5a02745b 100644 --- a/html/component/successMessage.html +++ b/html/component/successMessage.html @@ -13,7 +13,7 @@

\ No newline at end of file diff --git a/html/m_apps/bind.html b/html/m_apps/bind.html index 38a75bd9..a6c45d2d 100644 --- a/html/m_apps/bind.html +++ b/html/m_apps/bind.html @@ -41,7 +41,7 @@ -

Right Data diff --git a/html/m_apps/frame.html b/html/m_apps/frame.html index 0bf50103..96e245e2 100644 --- a/html/m_apps/frame.html +++ b/html/m_apps/frame.html @@ -33,7 +33,7 @@ DataFrame -

diff --git a/html/m_apps/groupby.html b/html/m_apps/groupby.html index 85cc3cfb..474b7a8f 100644 --- a/html/m_apps/groupby.html +++ b/html/m_apps/groupby.html @@ -5,7 +5,7 @@ -

Groupby diff --git a/html/m_apps/pdf.html b/html/m_apps/pdf.html index 44b37eef..38524b66 100644 --- a/html/m_apps/pdf.html +++ b/html/m_apps/pdf.html @@ -4,7 +4,7 @@ Prepare to use PyMuPDF

--> diff --git a/html/m_apps/profiling.html b/html/m_apps/profiling.html index 4372c43e..9322e492 100644 --- a/html/m_apps/profiling.html +++ b/html/m_apps/profiling.html @@ -4,7 +4,7 @@ Prepare to use Pandas Profiling

--> @@ -15,7 +15,7 @@ -

Allocate to diff --git a/html/m_apps/reshape.html b/html/m_apps/reshape.html index b7bc003f..ba6be98d 100644 --- a/html/m_apps/reshape.html +++ b/html/m_apps/reshape.html @@ -13,7 +13,7 @@ DataFrame -

diff --git a/html/m_apps/snippets.html b/html/m_apps/snippets.html index 307aee0a..59ab211d 100644 --- a/html/m_apps/snippets.html +++ b/html/m_apps/snippets.html @@ -3,7 +3,7 @@

Snippets

Import

Export

@@ -14,12 +14,12 @@

by Names

diff --git a/html/m_apps/variable.html b/html/m_apps/variable.html index d87006f3..4c36778f 100644 --- a/html/m_apps/variable.html +++ b/html/m_apps/variable.html @@ -17,7 +17,7 @@ Variable Name -

Data Type diff --git a/html/m_visualize/plotly.html b/html/m_visualize/plotly.html index d87d9c4f..f9e466ab 100644 --- a/html/m_visualize/plotly.html +++ b/html/m_visualize/plotly.html @@ -120,7 +120,7 @@

Preview -

diff --git a/html/m_visualize/seaborn.html b/html/m_visualize/seaborn.html index 0e39d194..9ddb0d39 100644 --- a/html/m_visualize/seaborn.html +++ b/html/m_visualize/seaborn.html @@ -47,7 +47,7 @@ - Setting + Setting

@@ -276,7 +276,7 @@ Auto Refresh -

diff --git a/html/m_visualize/wordCloud.html b/html/m_visualize/wordCloud.html index 845d0e89..dd4948c8 100644 --- a/html/m_visualize/wordCloud.html +++ b/html/m_visualize/wordCloud.html @@ -52,7 +52,7 @@

Preview -

diff --git a/html/menuFrame.html b/html/menuFrame.html index 23dddcbb..be87acba 100644 --- a/html/menuFrame.html +++ b/html/menuFrame.html @@ -14,7 +14,9 @@

+ + +

@@ -51,7 +53,7 @@

diff --git a/img/file-regular.svg b/img/file-regular.svg new file mode 100644 index 00000000..bb363fb1 --- /dev/null +++ b/img/file-regular.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/img/folder-regular.svg b/img/folder-regular.svg new file mode 100644 index 00000000..6f9bb8f9 --- /dev/null +++ b/img/folder-regular.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/img/gear-solid.svg b/img/gear-solid.svg new file mode 100644 index 00000000..7612bfc3 --- /dev/null +++ b/img/gear-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/img/gear-solid_hover.svg b/img/gear-solid_hover.svg new file mode 100644 index 00000000..a073ccdc --- /dev/null +++ b/img/gear-solid_hover.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/img/spinner-solid.svg b/img/spinner-solid.svg new file mode 100644 index 00000000..52a935de --- /dev/null +++ b/img/spinner-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/img/triangle-exclamation-solid.svg b/img/triangle-exclamation-solid.svg new file mode 100644 index 00000000..f202ff6b --- /dev/null +++ b/img/triangle-exclamation-solid.svg @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/js/MainFrame.js b/js/MainFrame.js index 92da6ca7..1f3a9468 100644 --- a/js/MainFrame.js +++ b/js/MainFrame.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/mainFrame.html!strip', - 'css!vp_base/css/mainFrame.css', + 'css!vp_base/css/mainFrame', // load module './com/com_Config', @@ -69,16 +69,27 @@ define([ // window resize event $(window).resize(function(evt){ - let jupyterHeadHeight = $('#' + JUPYTER_HEADER_ID).height(); - let jupyterBodyHeight = $('#' + JUPYTER_NOTEBOOK_ID).height(); - - let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width; - let vpHeight = $(window).height() - jupyterHeadHeight; - - // $('#vp_wrapper').css( { height: vpHeight + 'px' }); - that._resizeNotebook(vpWidth); + that._resizeWindow(); }); + // CHROME: colab header toggle + if (vpConfig.extensionType === 'colab') { + $('#toggle-header-button').click(function(evt) { + console.log('[vp] click toggle header ') + // change height + let colabHeaderVisible = $('#header').is(':visible'); + let colabHeaderHeight = $('#header').height() * colabHeaderVisible; + let colabFooterHeight = $('colab-status-bar').height(); + + let colabHeight = colabHeaderHeight + colabFooterHeight + 2; + + $('#vp_wrapper').css( { + height: 'calc(100% - ' + colabHeight + 'px)', + top: colabHeaderHeight + 'px' + }); + }); + } + window.vpEvent = new com_Event(this); } @@ -113,6 +124,34 @@ define([ }); } + _resizeWindow() { + // CHROME: resize colab + if (vpConfig.extensionType === 'notebook') { + let jupyterHeadHeight = $('#' + JUPYTER_HEADER_ID).height(); + let jupyterBodyHeight = $('#' + JUPYTER_NOTEBOOK_ID).height(); + + let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width; + let vpHeight = $(window).height() - jupyterHeadHeight; + + $('#vp_wrapper').css( { height: vpHeight + 'px' }); + this._resizeNotebook(vpWidth); + } else if (vpConfig.extensionType === 'colab') { + let colabHeaderVisible = $('#header').is(':visible'); + let colabHeaderHeight = $('#header').height() * colabHeaderVisible; + let colabFooterHeight = $('colab-status-bar').height(); + + let colabHeight = colabHeaderHeight + colabFooterHeight + 2; + + let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width; + + $('#vp_wrapper').css( { + height: 'calc(100% - ' + colabHeight + 'px)', + top: colabHeaderHeight + 'px' + }); + this._resizeNotebook(vpWidth); + } + } + _resizeVp(currentWidth) { // calculate inner frame width var menuWidth = $('#vp_menuFrame').width(); @@ -161,8 +200,14 @@ define([ let nbWidth = baseWidth - vpWidth; let nbContainerWidth = nbWidth - 60; // apply resized width - $('#' + JUPYTER_NOTEBOOK_ID).css({ 'width': nbWidth + 'px' }); - $('#notebook-container').css({ 'width': nbContainerWidth + 'px' }); + // CHROME: resize colab + if (vpConfig.extensionType === 'notebook') { + $('#' + JUPYTER_NOTEBOOK_ID).css({ 'width': nbWidth + 'px' }); + $('#notebook-container').css({ 'width': nbContainerWidth + 'px' }); + } else if (vpConfig.extensionType === 'colab') { + $('.notebook-horizontal').css({ 'width': nbWidth + 'px' }); + // $('#notebook-container').css({ 'width': nbContainerWidth + 'px' }); + } } _getMenuGroupRootType(menu) { @@ -193,9 +238,6 @@ define([ if (!vp_note_display) { this.minWidth = MENU_MIN_WIDTH + MENU_BOARD_SPACING; } - - // resize jupyterNotebook area - let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width; // load menu & board this._menuFrame = new MenuFrame($('#vp_wrapper'), @@ -207,7 +249,8 @@ define([ { parent: this } ); - this._resizeNotebook(vpWidth); + // consider height and width + this._resizeWindow(); // bind event this._bindEvent(); @@ -221,7 +264,8 @@ define([ let vpWidth = $('#vp_wrapper')[0].clientWidth; let metadata = vpConfig.getMetadata(); - let { vp_position, vp_menu_width, vp_note_width } = metadata; + vpLog.display(VP_LOG_TYPE.DEVELOP, 'toggle vp with metadata', metadata); + let { vp_position, vp_menu_width, vp_note_width, vp_note_display } = metadata; let newMetadata = { vp_section_display: !vpDisplay }; if (vpDisplay) { // hide @@ -229,11 +273,15 @@ define([ $('#vp_wrapper').hide(); } else { // show - vpWidth = vp_position.width; - if (vp_position.width == 0) { - vpWidth = (vp_menu_width + vp_note_width + MENU_BOARD_SPACING) + 'px'; + if (!vp_position || vp_position.width <= 0) { + vpWidth = (vp_menu_width + vp_note_width + MENU_BOARD_SPACING); + if (!vpWidth) { + vpWidth = com_Config.MENU_MIN_WIDTH + (vp_note_display? com_Config.BOARD_MIN_WIDTH: 0) + com_Config.MENU_BOARD_SPACING; + } newMetadata['vp_position'] = { width: vpWidth }; $('#vp_wrapper').css({ width: vpWidth }); + } else { + vpWidth = vp_position.width; } $('#vp_wrapper').show(); } diff --git a/js/board/BoardFrame.js b/js/board/BoardFrame.js index 6efce6d7..430e03a6 100644 --- a/js/board/BoardFrame.js +++ b/js/board/BoardFrame.js @@ -14,8 +14,9 @@ //============================================================================ define([ 'text!../../html/boardFrame.html!strip', - 'css!../../css/boardFrame.css', + 'css!../../css/boardFrame', '../com/com_Config', + '../com/com_Const', '../com/com_String', '../com/com_util', '../com/com_interface', @@ -24,7 +25,7 @@ define([ './Block', './BlockMenu', './CodeView' -], function(boardFrameHtml, boardFrameCss, com_Config, com_String, com_util, com_interface, +], function(boardFrameHtml, boardFrameCss, com_Config, com_Const, com_String, com_util, com_interface, Component, FileNavigation, Block, BlockMenu, CodeView) { 'use strict'; //======================================================================== @@ -328,7 +329,7 @@ define([ * Make template */ template() { - return boardFrameHtml; + return boardFrameHtml.replaceAll('${vp_base}', com_Const.BASE_PATH); } /** diff --git a/js/com/com_Config.js b/js/com/com_Config.js index c67cdd8b..34fec0a4 100644 --- a/js/com/com_Config.js +++ b/js/com/com_Config.js @@ -16,7 +16,13 @@ define([ './com_util', './com_interface', 'text!vp_base/python/userCommand.py', -], function(com_Const, com_util, com_interface, userCommandFile) { + 'text!vp_base/python/printCommand.py', + 'text!vp_base/python/fileNaviCommand.py', + 'text!vp_base/python/pandasCommand.py', + 'text!vp_base/python/variableCommand.py', + 'text!vp_base/python/visualizationCommand.py' +], function(com_Const, com_util, com_interface, + userCommandFile, printCommand, fileNaviCommand, pandasCommand, variableCommand, visualizationCommand) { 'use strict'; //======================================================================== // Define Inner Variable @@ -39,7 +45,21 @@ define([ //======================================================================== // Constructor //======================================================================== - constructor(initialData) { + /** + * + * @param {*} initialData + * @param {*} extensionType extension type: notebook/colab/lab + */ + constructor(extensionType='notebook', initialData={}) { + // initial mode + this.extensionType = extensionType; + this.parentSelector = 'body'; + if (extensionType === 'notebook') { + this.parentSelector = '#site'; + } else if (extensionType === 'colab') { + // this.parentSelector = '.notebook-horizontal'; + this.parentSelector = 'body'; + } // initial configuration this.data = { // Configuration @@ -188,7 +208,8 @@ define([ vp_config_version: '1.0.0', vp_signature: 'VisualPython', vp_position: {}, - vp_section_display: false, + // CHROME: default to display vp + vp_section_display: true, vp_note_display: false, vp_menu_width: Config.MENU_MIN_WIDTH, vp_note_width: Config.BOARD_MIN_WIDTH @@ -253,54 +274,135 @@ define([ * - automatically restart on jupyter kernel restart (loadVisualpython.js) */ readKernelFunction() { - var libraryList = [ - 'printCommand.py', - 'fileNaviCommand.py', - 'pandasCommand.py', - 'variableCommand.py', - 'visualizationCommand.py', - // 'userCommand.py' - ]; - let promiseList = []; - libraryList.forEach(libName => { - var libPath = com_Const.PYTHON_PATH + libName - $.get(libPath).done(function(data) { - var code_init = data; - promiseList.push(vpKernel.execute(code_init)); - }).fail(function() { - console.log('visualpython - failed to read library file', libName); + // CHROME: change method to load py files ($.get -> require) + return new Promise(function(resolve, reject) { + var libraryList = [ + printCommand, fileNaviCommand, pandasCommand, variableCommand, visualizationCommand + ]; + let promiseList = []; + // libraryList.forEach(libName => { + // var libPath = com_Const.PYTHON_PATH + libName; + // $.get(libPath).done(function(data) { + // var code_init = data; + // promiseList.push(vpKernel.execute(code_init, true)); + // }).fail(function() { + // console.log('visualpython - failed to read library file', libName); + // }); + // }); + libraryList.forEach(libCode => { + promiseList.push(vpKernel.execute(libCode, true)); + }); + + // run all promises + let failed = false; + Promise.all(promiseList).then(function(resultObj) { + ; + }).catch(function(resultObj) { + failed = true; + console.log('visualpython - failed to load library', resultObj); + // TODO: show to restart kernel + }).finally(function() { + if (!failed) { + console.log('visualpython - loaded libraries', libraryList); + resolve(true); + } else { + reject(false); + } }); }); - // run all promises - let failed = false; - Promise.all(promiseList).then(function(resultObj) { - }).catch(function(resultObj) { - failed = true; - console.log('visualpython - failed to load library', resultObj); - }).finally(function() { - if (!failed) { - console.log('visualpython - loaded libraries', libraryList); - } else { - console.log('visualpython - failed to load libraries'); - } - }); + } getMode() { return Config.serverMode; } - loadData(configKey = 'vpudf') { + _checkMounted() { return new Promise(function(resolve, reject) { - Jupyter.notebook.config.load(); - Jupyter.notebook.config.loaded.then(function() { - var data = Jupyter.notebook.config.data[configKey]; - if (data == undefined) { - data = {}; + try { + vpKernel.getColabMounted().then(function(result) { + if (result==='True') { + resolve(true); + } else { + reject(false); + } + }).catch(function(err) { + reject(false); + }) + } catch (ex) { + reject(false); + } + }); + } + + /** + * CHROME: Read from colab + * @param {*} configKey config key to read + */ + _readFromColab(configKey='vpudf') { + return new Promise(function(resolve, reject) { + // mounted + // read /content/drive/MyDrive/.visualpython + vpKernel.getColabConfig(configKey).then(function(resultObj) { + let { result } = resultObj; + try { + if (result && result.trim() != '') { + let parsedResult = JSON.parse(result); + resolve(parsedResult); + } else { + resolve({}); + } + } catch (err) { + reject(err); } - resolve(data); + }).catch(function(err) { + reject(err); + }) + }); + } + + /** + * CHROME: Write to colab + * @param {*} data data to write + */ + _writeToColab(data={}, configKey='vpudf') { + return new Promise(function(resolve, reject) { + // mounted + // write to /content/drive/MyDrive/.visualpython + vpKernel.setColabConfig(JSON.stringify(data), configKey).then(function(result) { + resolve(result); + }).catch(function(err) { + reject(err); }); }); + } + + loadData(configKey = 'vpudf') { + let that = this; + return new Promise(function(resolve, reject) { + if (that.extensionType === 'notebook') { + Jupyter.notebook.config.load(); + Jupyter.notebook.config.loaded.then(function() { + var data = Jupyter.notebook.config.data[configKey]; + if (data == undefined) { + data = {}; + } + resolve(data); + }); + } else if (that.extensionType === 'colab') { + // CHROME: edited to use .visualpython files + that._checkMounted().then(function() { + that._readFromColab('', configKey).then(function(result) { + resolve(result); + }).catch(function(err) { + reject(err); + }) + }).catch(function() { + // not mounted + reject('Colab Drive is not mounted!'); + }) + } + }); }; /** @@ -310,39 +412,72 @@ define([ * @returns */ getData(dataKey='', configKey='vpudf') { + let that = this; return new Promise(function(resolve, reject) { - Jupyter.notebook.config.load(); - Jupyter.notebook.config.loaded.then(function() { - var data = Jupyter.notebook.config.data[configKey]; - if (data == undefined) { - resolve(data); - return; - } - if (dataKey == '') { - resolve(data); - return; - } - if (Object.keys(data).length > 0) { - resolve(data[dataKey]); - return; - } - reject('No data available.'); - }); + if (that.extensionType === 'notebook') { + Jupyter.notebook.config.load(); + Jupyter.notebook.config.loaded.then(function() { + var data = Jupyter.notebook.config.data[configKey]; + if (data == undefined) { + resolve(data); + return; + } + if (dataKey == '') { + resolve(data); + return; + } + if (Object.keys(data).length > 0) { + resolve(data[dataKey]); + return; + } + reject('No data available.'); + }); + } else if (that.extensionType === 'colab') { + // CHROME: use drive .visualpython files + that._checkMounted().then(function() { + that._readFromColab(configKey).then(function(result) { + let data = result; + if (data == undefined || data == {}) { + resolve(data); + return; + } + if (dataKey == '') { + resolve(data); + return; + } + if (Object.keys(data).length > 0) { + resolve(data[dataKey]); + return; + } + reject('No data available.'); + }).catch(function(err) { + reject(err); + }) + }).catch(function() { + // not mounted + reject('Colab Drive is not mounted!'); + }) + } }); } getDataSimple(dataKey='', configKey='vpudf') { - Jupyter.notebook.config.load(); - var data = Jupyter.notebook.config.data[configKey]; - if (data == undefined) { + if (this.extensionType === 'notebook') { + Jupyter.notebook.config.load(); + var data = Jupyter.notebook.config.data[configKey]; + if (data == undefined) { + return undefined; + } + if (dataKey == '') { + return data; + } + if (Object.keys(data).length > 0) { + return data[dataKey]; + } + } else if (this.extensionType === 'colab') { + // CHROME: TODO: no way to simply get data return undefined; } - if (dataKey == '') { - return data; - } - if (Object.keys(data).length > 0) { - return data[dataKey]; - } return undefined; } @@ -353,16 +488,60 @@ define([ * @param {String} configKey */ setData(dataObj, configKey='vpudf') { - // set data using key - Jupyter.notebook.config.loaded.then(function() { - Jupyter.notebook.config.update({[configKey]: dataObj}); + let that = this; + return new Promise(function(resolve, reject) { + if (that.extensionType === 'notebook') { + // set data using key + Jupyter.notebook.config.loaded.then(function() { + Jupyter.notebook.config.update({[configKey]: dataObj}); + resolve(true); + }); + } else if (that.extensionType === 'colab') { + // CHROME: use .visualpython files + that.getData('', configKey).then(function(data) { + let newDataObj = {}; + if (data && typeof data === 'object') { + newDataObj = { + ...data + }; + } + newDataObj = { + ...newDataObj, + ...dataObj + } + that._writeToColab(newDataObj, configKey).then(function() { + resolve(); + }).catch(function() { + reject(); + }); + }); + } }); } removeData(key, configKey = 'vpudf') { - // if set value to null, it removes from config data - Jupyter.notebook.config.loaded.then(function() { - Jupyter.notebook.config.update({[configKey]: {[key]: null}}); + let that = this; + return new Promise(function(resolve, reject) { + if (that.extensionType === 'notebook') { + // if set value to null, it removes from config data + Jupyter.notebook.config.loaded.then(function() { + Jupyter.notebook.config.update({[configKey]: {[key]: null}}); + }); + resolve(true); + } else if (that.extensionType === 'colab') { + // CHROME: use .visualpython files + that.getData('', configKey).then(function(data) { + let dataObj = data; + delete dataObj[key]; + that._writeToColab(dataObj, configKey).then(function() { + resolve(true); + }).catch(function() { + reject(false); + }); + }).catch(function(err) { + reject(false); + }) + } }); } @@ -372,18 +551,35 @@ define([ * @param {String} configKey */ getMetadata(dataKey='', configKey='vp') { - let metadata = Jupyter.notebook.metadata[configKey]; - if (metadata) { - // update this metadataSetting - this.metadataSettings = { - ...this.metadataSettings, - ...metadata - }; - // no datakey, return all metadata - if (dataKey == '') { - return metadata; + if (this.extensionType === 'notebook') { + let metadata = Jupyter.notebook.metadata[configKey]; + if (metadata) { + // update this metadataSetting + this.metadataSettings = { + ...this.metadataSettings, + ...metadata + }; + // no datakey, return all metadata + if (dataKey == '') { + return metadata; + } + return metadata[dataKey]; + } + } else if (this.extensionType === 'colab') { + // CHROME: use colab.global.notebookModel.metadata + let metadata = colab.global.notebookModel.metadata[configKey]; + if (metadata) { + // update this metadataSetting + this.metadataSettings = { + ...this.metadataSettings, + ...metadata + }; + // no datakey, return all metadata + if (dataKey == '') { + return metadata; + } + return metadata[dataKey]; } - return metadata[dataKey]; } return {}; } @@ -394,19 +590,28 @@ define([ * @param {String} configKey */ setMetadata(dataObj, configKey='vp') { - let oldData = Jupyter.notebook.metadata[configKey]; - Jupyter.notebook.metadata[configKey] = { - ...oldData, - ...dataObj - }; - Jupyter.notebook.set_dirty(); + if (this.extensionType === 'notebook') { + let oldData = Jupyter.notebook.metadata[configKey]; + Jupyter.notebook.metadata[configKey] = { + ...oldData, + ...dataObj + }; + Jupyter.notebook.set_dirty(); + + } else if (this.extensionType === 'colab') { + // CHROME: use colab.global.notebookModel.metadata + let oldData = colab.global.notebookModel.metadata[configKey]; + colab.global.notebookModel.metadata[configKey] = { + ...oldData, + ...dataObj + }; + } // update this metadataSetting this.metadataSettings = { ...this.metadataSettings, ...dataObj }; - } /** @@ -414,7 +619,12 @@ define([ * @param {String} configKey */ resetMetadata(configKey='vp') { - Jupyter.notebook.metadata[configKey] = {}; + if (this.extensionType === 'notebook') { + Jupyter.notebook.metadata[configKey] = {}; + } else if (this.extensionType === 'colab') { + // CHROME: use colab.global.notebookModel.metadata + colab.global.notebookModel.metadata[configKey] = {}; + } } /** @@ -507,15 +717,27 @@ define([ break; case 1: // update - let info = [ - '## Visual Python Upgrade', - 'NOTE: ', - '- Refresh your web browser to start a new version.', - '- Save VP Note before refreshing the page.' - ]; - com_interface.insertCell('markdown', info.join('\n')); - com_interface.insertCell('code', '!pip install visualpython --upgrade'); - com_interface.insertCell('code', '!visualpy install'); + if (that.extensionType === 'notebook') { + let info = [ + '## Visual Python Upgrade', + 'NOTE: ', + '- Refresh your web browser to start a new version.', + '- Save VP Note before refreshing the page.' + ]; + com_interface.insertCell('markdown', info.join('\n')); + com_interface.insertCell('code', '!pip install visualpython --upgrade'); + com_interface.insertCell('code', '!visualpy install'); + } else if (that.extensionType === 'colab') { + // CHROME: TODO: update chrome extension + let info = [ + '## Visual Python Upgrade', + 'NOTE: ', + '- Go to chrome webstore and update visualpython', + '- Refresh your web browser to start a new version.', + '- Save VP Note before refreshing the page.' + ]; + com_interface.insertCell('markdown', info.join('\n')); + } // update version_timestamp that.setData({ 'version_timestamp': new Date().getTime() }, 'vpcfg'); diff --git a/js/com/com_Const.js b/js/com/com_Const.js index f361a617..9557fce3 100644 --- a/js/com/com_Const.js +++ b/js/com/com_Const.js @@ -31,7 +31,10 @@ define ([ // Base Path Constants //======================================================================== Constants.PATH_SEPARATOR = "/"; - Constants.BASE_PATH = Jupyter.notebook.base_url + "nbextensions" + Constants.PATH_SEPARATOR + "visualpython" + Constants.PATH_SEPARATOR; + // CHROME: edited + // Constants.BASE_PATH = Jupyter.notebook.base_url + "nbextensions" + Constants.PATH_SEPARATOR + "visualpython" + Constants.PATH_SEPARATOR; + Constants.BASE_PATH = vpBase + "visualpython" + Constants.PATH_SEPARATOR; + Constants.SOURCE_PATH = Constants.BASE_PATH + "js" + Constants.PATH_SEPARATOR; Constants.IMAGE_PATH = Constants.BASE_PATH + "img" + Constants.PATH_SEPARATOR; Constants.STYLE_PATH = Constants.BASE_PATH + "css" + Constants.PATH_SEPARATOR; diff --git a/js/com/com_Kernel.js b/js/com/com_Kernel.js index 674b65e4..01c3126f 100644 --- a/js/com/com_Kernel.js +++ b/js/com/com_Kernel.js @@ -44,55 +44,198 @@ define([ } } + getNotebookPath() { + if (vpConfig.extensionType === 'notebook') { + return Jupyter.notebook.notebook_path; + } else if (vpConfig.extensionType === 'colab') { + return colab.global.notebookModel.metadata.colab.name; + } + return ''; + } + //==================================================================== // Executing command api //==================================================================== execute(command, isSilent = false) { return new Promise(function(resolve, reject) { - Jupyter.notebook.kernel.execute( - command, - { - iopub: { - output: function (msg) { - var result = ''; - var type = ''; - if (msg.msg_type == 'error') { - reject({result: msg.content, type: 'error', msg: msg}); - } else { - if (msg.content) { - try { - if (msg.content['name'] == 'stderr') { - reject(msg); - } else { - if (msg.content['text']) { - result = String(msg.content['text']); - type = 'text'; - } else if (msg.content.data) { - if (msg.content.data['text/plain']) { - result = String(msg.content.data['text/plain']); - type = 'text/plain'; - } else if (msg.content.data['text/html']) { - result = String(msg.content.data['text/html']); - type = 'text/html'; - } else if (msg.content.data['image/png']) { - result = String(msg.content.data['image/png']); - type = 'image/png'; + if (vpConfig.extensionType === 'notebook') { + Jupyter.notebook.kernel.execute( + command, + { + iopub: { + output: function (msg) { + var result = ''; + var type = ''; + if (msg.msg_type == 'error') { + reject({result: msg.content, type: 'error', msg: msg}); + } else { + if (msg.content) { + try { + if (msg.content['name'] == 'stderr') { + reject(msg); + } else { + if (msg.content['text']) { + result = String(msg.content['text']); + type = 'text'; + } else if (msg.content.data) { + if (msg.content.data['text/plain']) { + result = String(msg.content.data['text/plain']); + type = 'text/plain'; + } else if (msg.content.data['text/html']) { + result = String(msg.content.data['text/html']); + type = 'text/html'; + } else if (msg.content.data['image/png']) { + result = String(msg.content.data['image/png']); + type = 'image/png'; + } } + resolve({result: result, type: type, msg: msg}); } - resolve({result: result, type: type, msg: msg}); + } catch(ex) { + reject(ex); } - } catch(ex) { - reject(ex); + } else { + resolve({result: result, type: type, msg: msg}); } + } + } + } + }, + { silent: isSilent } + ); + } else if (vpConfig.extensionType === 'colab') { + // CHROME: TODO: 3: return background execution + if (isSilent) { + if (!colab.global.notebook.kernel.isConnected()) { + reject({status: 'error', ename: 'Kernel Error', evalue: 'Kernel is not connected...'}); + return; + } + if (!colab.global.notebook.kernel.isRunning()) { + reject({status: 'error', ename: 'Kernel Error', evalue: 'Kernel is not running...'}); + return; + } + colab.global.notebook.kernel.execute(command).then(function(msg) { + if (msg.status === 'ok') { + resolve(true); + } else { + reject(msg); + } + }).catch(function(msg) { + reject(msg); + }); + return; + } + // get focused index + let lastFocusedCellId = ''; + let lastFocusedCellIdx = 0; + try { + // get focused cell id + lastFocusedCellId = colab.global.notebook.focusedCell? colab.global.notebook.focusedCell.getId() : null; + // get focused cell index + lastFocusedCellIdx = colab.global.notebook.cells.findIndex(cell => cell.getId() === lastFocusedCellId); + } catch (err) { + vpLog.display(VP_LOG_TYPE.ERROR, err); + } + // create cell to execute + colab.global.notebook.insertCell('code', {after:true, index:lastFocusedCellIdx}); + + // get cell + let cell = colab.global.notebook.focusedCell; + // hide cell using class + // cell.element_.style.display = "none"; + $(cell.element_).addClass('vp-background-cell'); + // set cell command + cell.setText(command); + // add execution complete listener + cell.model.listenOnce('execution_completed', function() { + let result = ''; + let type = ''; + let msg = { + content: { + name: type + } + }; + let cellJson = cell.model.toJson(); + if (cellJson.outputs.length > 0) { + // {output_type: 'stream', name: 'stdout', text: Array(1)} + /** + * { + * output_type: stream/execute_result/display_data/error + * name: stdout, + * // if output_type==stream + * text: [ ... ] + * // if output_type==execute_result/display_data + * data: { + * 'image/png': '...' + * 'text/html': '...' + * 'text/plain': '...' + * } + * // if output_type==error + * ename: 'NameError/...' + * evalue: 'ignored/...' + * } + */ + cellJson.outputs.forEach(output => { + vpLog.display(VP_LOG_TYPE.DEVELOP, 'kernel output', cellJson.outputs); + try { + if (output.output_type === 'error') { + // convert traceback as evalue + let simpleEvalue = ''; + let convertedEvalue = ''; + if (output.traceback.length > 0) { + let traceback = output.traceback.join('\n'); + convertedEvalue = traceback.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ''); + simpleEvalue = output.traceback[output.traceback.length - 1].replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ''); + } + reject({result: output, type: 'error', msg: { content: { ename: output.ename, evalue: simpleEvalue, detail: convertedEvalue } }}); } else { + if (output.output_type === 'stream') { + result = String(output.text[0]); + type = 'text'; + msg = { + content: { + name: type, + [type]: result + } + }; + } else if (output.output_type === 'execute_result' || output.output_type === 'display_data') { + if (output.data['image/png']) { + result = String(output.data['image/png']); + type = 'image/png'; + } else if (output.data['text/html']) { + result = String(output.data['text/html'].join('')); + type = 'text/html'; + } else if (output.data['text/plain']) { + result = String(output.data['text/plain'].join('')); + type = 'text/plain'; + } + msg = { + content: { + name: type, + data: { + [type]: result + } + } + }; + } resolve({result: result, type: type, msg: msg}); } + } catch(ex) { + reject(ex); } - } + }); } - }, - { silent: isSilent } - ); + // delete cell + colab.global.notebook.notebookModel.deleteCells([cell.model]); + // set last focused cell + // colab.global.notebook.focusCell(lastFocusedCellId); + }) + // run cell + cell.runButton.click(); + // set last focused cell + colab.global.notebook.focusCell(lastFocusedCellId); + } + }); } @@ -238,6 +381,84 @@ define([ }) }); } + + /** + * Get if colab mounted (If mounted, create .visualpython directory) + * - '/content/drive/MyDrive/.visualpython' + * @returns Promise(resolve(true/false), reject(err)) + */ + getColabMounted() { + var that = this; + return new Promise(function(resolve, reject) { + that.execute('_vp_get_colab_mounted()') + .then(function(resultObj) { + resolve(resultObj.result); + }).catch(function(err) { + // reject + reject(err); + }) + }); + } + + /** + * Get colab's vp config file content + * @param {String} configType vpudf, vpcfg + * @returns + */ + getColabConfig(configType='vpudf') { + var that = this; + var configFile = ''; + switch (configType) { + case 'vpudf': + configFile = 'snippets'; + break; + case 'vpcfg': + configFile = 'configure'; + break; + } + var cmd = com_util.formatString("print(_vp_get_colab_vpcfg('{0}'))", configFile); + return new Promise(function(resolve, reject) { + that.execute(cmd) + .then(function(resultObj) { + resolve(resultObj); + }).catch(function(err) { + // reject + reject(err); + }) + }); + } + + /** + * Set colab's vp config file content + * @param {String} content file content to write + * @param {String} configType vpudf, vpcfg + * @returns + */ + setColabConfig(content, configType='vpudf') { + var that = this; + var configFile = ''; + switch (configType) { + case 'vpudf': + configFile = 'snippets'; + break; + case 'vpcfg': + configFile = 'configure'; + break; + } + // write file + var sbfileSaveCmd = new com_String(); + sbfileSaveCmd.appendFormatLine('%%writefile "/content/drive/MyDrive/.visualpython/{0}"', configFile); + sbfileSaveCmd.appendLine(content); + return new Promise(function(resolve, reject) { + that.execute(sbfileSaveCmd.toString()) + .then(function(resultObj) { + resolve(resultObj.result); + }).catch(function(err) { + // reject + reject(err); + }) + }); + } //==================================================================== // Image data //==================================================================== diff --git a/js/com/com_interface.js b/js/com/com_interface.js index fe902556..a9e3d3d0 100644 --- a/js/com/com_interface.js +++ b/js/com/com_interface.js @@ -14,7 +14,15 @@ define([ ], function(com_util, com_String) { var getSelectedCell = function() { - return Jupyter.notebook.get_selected_index(); + if (vpConfig.extensionType === 'notebook') { + return Jupyter.notebook.get_selected_index(); + } else if (vpConfig.extensionType === 'colab') { + if (colab.global.notebook.focusedCell) { + return colab.global.notebook.focusedCell.cellId; + } else { + return ''; + } + } } /** @@ -25,9 +33,6 @@ define([ * @param {int} sigNum */ var insertCell = function(type, command, exec=true, sigText='') { - var selectedIndex = getSelectedCell(); - var targetCell = Jupyter.notebook.insert_cell_below(type, selectedIndex); - // Add signature if (type == 'code') { if (sigText !== '') { @@ -36,20 +41,70 @@ define([ command = '# Visual Python\n' + command; } } - targetCell.set_text(command); - Jupyter.notebook.select_next(); - if (exec) { - switch (type) { - case "markdown": - targetCell.render(); - break; - case "code": - default: - targetCell.execute(); + + if (vpConfig.extensionType === 'notebook') { + var selectedIndex = getSelectedCell(); + var targetCell = Jupyter.notebook.insert_cell_below(type, selectedIndex); + + targetCell.set_text(command); + Jupyter.notebook.select_next(); + if (exec) { + switch (type) { + case "markdown": + targetCell.render(); + break; + case "code": + default: + targetCell.execute(); + } + } + // move to executed cell + Jupyter.notebook.scroll_to_cell(Jupyter.notebook.get_selected_index()); + } else if (vpConfig.extensionType === 'colab') { + // CHROME: use colab api to add cell + let cell = null; + // get focused index + let lastFocusedCellId = ''; + let lastFocusedCellIdx = 0; + try { + // get focused cell id + lastFocusedCellId = colab.global.notebook.focusedCell? colab.global.notebook.focusedCell.getId() : null; + // get focused cell index + lastFocusedCellIdx = colab.global.notebook.cells.findIndex(cell => cell.getId() === lastFocusedCellId); + } catch (err) { + vpLog.display(VP_LOG_TYPE.ERROR, err); + } + if (exec) { + switch (type) { + case "markdown": + // add text + // create cell to execute + colab.global.notebook.insertCell('text', {after:true, index:lastFocusedCellIdx}); + setTimeout(() => { + // cell = colab.global.notebook.focusedCell; + cell = colab.global.notebook.cells[lastFocusedCellIdx + 1]; + cell.setText(command); + // colab text cell's focus out is same as running it + cell.setFocused(false); + }, 300); + break; + case "code": + default: + // add code cell + // colab.global.notebook.notebookToolbar.toolbarButtons.get("insert-cell-below").click(); + // create cell to execute + colab.global.notebook.insertCell('code', {after:true, index:lastFocusedCellIdx}); + setTimeout(() => { + // cell = colab.global.notebook.focusedCell; + cell = colab.global.notebook.cells[lastFocusedCellIdx + 1]; + cell.setText(command); + cell.runButton.click(); + }, 300); + } } + // move to executed cell + // CHROME: TODO: } - // move to executed cell - Jupyter.notebook.scroll_to_cell(Jupyter.notebook.get_selected_index()); com_util.renderSuccessMessage('Your code is successfully generated.'); } @@ -62,9 +117,7 @@ define([ * @param {int} sigNum */ var insertCells = function(type, commands, exec=true, sigText='') { - var selectedIndex = getSelectedCell(); - var targetCell = Jupyter.notebook.insert_cell_below(type, selectedIndex); - + commands && commands.forEach((command, idx) => { // Add signature if (type == 'code') { @@ -74,37 +127,92 @@ define([ command = com_util.formatString('# Visual Python') + command; } } - targetCell.set_text(command); - Jupyter.notebook.select_next(); - if (exec) { - switch (type) { - case "markdown": - targetCell.render(); - break; - case "code": - default: - targetCell.execute(); + + if (vpConfig.extensionType === 'notebook') { + var selectedIndex = getSelectedCell(); + var targetCell = Jupyter.notebook.insert_cell_below(type, selectedIndex); + + targetCell.set_text(command); + Jupyter.notebook.select_next(); + if (exec) { + switch (type) { + case "markdown": + targetCell.render(); + break; + case "code": + default: + targetCell.execute(); + } + } + } else if (vpConfig.extensionType === 'colab') { + // CHROME: use colab api to add cell + let cell = null; + // get focused index + let lastFocusedCellId = ''; + let lastFocusedCellIdx = 0; + try { + // get focused cell id + lastFocusedCellId = colab.global.notebook.focusedCell? colab.global.notebook.focusedCell.getId() : colab.global.notebook.lastFocusedCellId; + // get focused cell index + lastFocusedCellIdx = colab.global.notebook.cells.findIndex(cell => cell.getId() === lastFocusedCellId); + } catch (err) { + vpLog.display(VP_LOG_TYPE.ERROR, err); + } + if (exec) { + switch (type) { + case "markdown": + // add text + // create cell to execute + colab.global.notebook.insertCell('text', {after:true, index:lastFocusedCellIdx}); + setTimeout(() => { + // cell = colab.global.notebook.focusedCell; + cell = colab.global.notebook.cells[lastFocusedCellIdx + 1]; + cell.setText(command); + // colab text cell's focus out is same as running it + cell.setFocused(false); + }, 300); + break; + case "code": + default: + colab.global.notebook.insertCell('code', {after:true, index:lastFocusedCellIdx}); + setTimeout(() => { + // cell = colab.global.notebook.focusedCell; + cell = colab.global.notebook.cells[lastFocusedCellIdx + 1]; + cell.setText(command); + cell.runButton.click(); + }, 300); + } } } - - selectedIndex = getSelectedCell(); - targetCell = Jupyter.notebook.insert_cell_below(type, selectedIndex); }); // move to executed cell - Jupyter.notebook.scroll_to_cell(Jupyter.notebook.get_selected_index()); + if (vpConfig.extensionType === 'notebook') { + Jupyter.notebook.scroll_to_cell(Jupyter.notebook.get_selected_index()); + } else if (vpConfig.extensionType === 'colab') { + // CHROME: TODO: + + } com_util.renderSuccessMessage('Your code is successfully generated.'); } var enableOtherShortcut = function() { vpLog.display(VP_LOG_TYPE.DEVELOP, 'enable short cut'); - Jupyter.notebook.keyboard_manager.enable(); + if (vpConfig.extensionType == 'notebook') { + Jupyter.notebook.keyboard_manager.enable(); + } else if (vpConfig.extensionType == 'colab') { + ; + } } var disableOtherShortcut = function() { vpLog.display(VP_LOG_TYPE.DEVELOP, 'disable short cut'); - Jupyter.notebook.keyboard_manager.disable(); + if (vpConfig.extensionType == 'notebook') { + Jupyter.notebook.keyboard_manager.disable(); + } else if (vpConfig.extensionType == 'colab') { + ; + } } return { diff --git a/js/com/com_util.js b/js/com/com_util.js index b20321ed..2afb8190 100644 --- a/js/com/com_util.js +++ b/js/com/com_util.js @@ -181,9 +181,9 @@ define([ * AlertModal * @param {string} titleStr */ - var renderAlertModal = function(titleStr) { + var renderAlertModal = function(titleStr, detail='') { require(['vp_base/js/com/component/AlertModal'], function(AlertModal) { - new AlertModal(titleStr); + new AlertModal(titleStr, detail=detail); }); } @@ -203,9 +203,9 @@ define([ * @param {*} contentStr * @returns */ - var templateForErrorBox = function(titleStr, contentStr='') { + var templateForErrorBox = function(titleStr, contentStr='', detailStr='') { let errorContent = new com_String(); - errorContent.appendFormatLine('

', 'vp-data-error-box'); + errorContent.appendFormatLine('

', 'vp-data-error-box', (detailStr && detailStr.length > 0)?('title="'+detailStr+"'"):''); errorContent.appendLine(''); errorContent.appendFormatLine('{1}', 'vp-data-error-box-title', titleStr); @@ -230,26 +230,6 @@ define([ return isAPIListRunCode; } - /** - * kernelExecute - */ - var kernelExecute = function(command, isSilent = false, isStoreHistory = !isSilent, isStopOnError = true) { - return new Promise((resolve, reject) => { - Jupyter.notebook.kernel.execute( - command, - { - iopub: { - output: function(msg) { - // msg.content.data['text/plain'] - resolve(msg.content.data); - } - } - }, - { silent: isSilent, store_history: isStoreHistory, stop_on_error: isStopOnError } - ); - }); - } - /** * Convert string(include html text) to safe string to display * @param {String} text @@ -265,6 +245,117 @@ define([ return label; } + //============================================================================ + // Cross-browser RegEx Split + //============================================================================ + + // This code has been MODIFIED from the code licensed below to not replace the + // default browser split. The license is reproduced here. + + // see http://blog.stevenlevithan.com/archives/cross-browser-split for more info: + /*! + * Cross-Browser Split 1.1.1 + * Copyright 2007-2012 Steven Levithan + * Available under the MIT License + * ECMAScript compliant, uniform cross-browser split method + */ + + /** + * Splits a string into an array of strings using a regex or string + * separator. Matches of the separator are not included in the result array. + * However, if `separator` is a regex that contains capturing groups, + * backreferences are spliced into the result each time `separator` is + * matched. Fixes browser bugs compared to the native + * `String.prototype.split` and can be used reliably cross-browser. + * @param {String} str String to split. + * @param {RegExp} separator Regex to use for separating + * the string. + * @param {Number} [limit] Maximum number of items to include in the result + * array. + * @returns {Array} Array of substrings. + * @example + * + * // Basic use + * regex_split('a b c d', ' '); + * // -> ['a', 'b', 'c', 'd'] + * + * // With limit + * regex_split('a b c d', ' ', 2); + * // -> ['a', 'b'] + * + * // Backreferences in result array + * regex_split('..word1 word2..', /([a-z]+)(\d+)/i); + * // -> ['..', 'word', '1', ' ', 'word', '2', '..'] + */ + var regex_split = function (str, separator, limit) { + var output = [], + flags = (separator.ignoreCase ? "i" : "") + + (separator.multiline ? "m" : "") + + (separator.extended ? "x" : "") + // Proposed for ES6 + (separator.sticky ? "y" : ""), // Firefox 3+ + lastLastIndex = 0, + separator2, match, lastIndex, lastLength; + // Make `global` and avoid `lastIndex` issues by working with a copy + separator = new RegExp(separator.source, flags + "g"); + + var compliantExecNpcg = typeof(/()??/.exec("")[1]) === "undefined"; + if (!compliantExecNpcg) { + // Doesn't need flags gy, but they don't hurt + separator2 = new RegExp("^" + separator.source + "$(?!\\s)", flags); + } + /* Values for `limit`, per the spec: + * If undefined: 4294967295 // Math.pow(2, 32) - 1 + * If 0, Infinity, or NaN: 0 + * If positive number: limit = Math.floor(limit); if (limit > 4294967295) limit -= 4294967296; + * If negative number: 4294967296 - Math.floor(Math.abs(limit)) + * If other: Type-convert, then use the above rules + */ + limit = typeof(limit) === "undefined" ? + -1 >>> 0 : // Math.pow(2, 32) - 1 + limit >>> 0; // ToUint32(limit) + for (match = separator.exec(str); match; match = separator.exec(str)) { + // `separator.lastIndex` is not reliable cross-browser + lastIndex = match.index + match[0].length; + if (lastIndex > lastLastIndex) { + output.push(str.slice(lastLastIndex, match.index)); + // Fix browsers whose `exec` methods don't consistently return `undefined` for + // nonparticipating capturing groups + if (!compliantExecNpcg && match.length > 1) { + match[0].replace(separator2, function () { + for (var i = 1; i < arguments.length - 2; i++) { + if (typeof(arguments[i]) === "undefined") { + match[i] = undefined; + } + } + }); + } + if (match.length > 1 && match.index < str.length) { + Array.prototype.push.apply(output, match.slice(1)); + } + lastLength = match[0].length; + lastLastIndex = lastIndex; + if (output.length >= limit) { + break; + } + } + if (separator.lastIndex === match.index) { + separator.lastIndex++; // Avoid an infinite loop + } + } + if (lastLastIndex === str.length) { + if (lastLength || !separator.test("")) { + output.push(""); + } + } else { + output.push(str.slice(lastLastIndex)); + } + return output.length > limit ? output.slice(0, limit) : output; + }; + + //============================================================================ + // End contributed Cross-browser RegEx Split + //============================================================================ + return { getUUID: getUUID, loadCss: loadCss, @@ -285,8 +376,9 @@ define([ setIsAPIListRunCode: setIsAPIListRunCode, getIsAPIListRunCode: getIsAPIListRunCode, - kernelExecute: kernelExecute, - safeString: safeString + safeString: safeString, + + regex_split: regex_split } }); /* function, define */ diff --git a/js/com/component/AlertModal.js b/js/com/component/AlertModal.js index 4321fa47..7bf5f71a 100644 --- a/js/com/component/AlertModal.js +++ b/js/com/component/AlertModal.js @@ -14,16 +14,17 @@ //============================================================================ define([ 'text!vp_base/html/component/alertModal.html!strip', - 'css!vp_base/css/component/alertModal.css', + 'css!vp_base/css/component/alertModal', + 'vp_base/js/com/com_Const', 'vp_base/js/com/component/Component' -], function(msgHtml, msgCss, Component) { +], function(msgHtml, msgCss, com_Const, Component) { /** * AlertModal */ class AlertModal extends Component { - constructor(title) { - super($('body'), { title: title }); + constructor(title, detail='') { + super($('body'), { title: title, detail: detail }); } _bindEvent() { @@ -35,7 +36,7 @@ define([ } template() { - return msgHtml; + return msgHtml.replaceAll('${vp_base}', com_Const.BASE_PATH); } render() { @@ -43,6 +44,10 @@ define([ // set title $(this.wrapSelector('.vp-alertModal-titleStr')).text(this.state.title); + // set detail as tooltip + if (this.state.detail) { + $(this.wrapSelector('.vp-alertModal-titleStr')).attr({ title: this.state.detail }); + } } remove() { diff --git a/js/com/component/DataSelector.js b/js/com/component/DataSelector.js index 0543b481..63e990c4 100644 --- a/js/com/component/DataSelector.js +++ b/js/com/component/DataSelector.js @@ -10,12 +10,13 @@ */ define([ 'text!vp_base/html/component/dataSelector.html!strip', - 'css!vp_base/css/component/dataSelector.css', + 'css!vp_base/css/component/dataSelector', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/Component', 'vp_base/js/com/component/MultiSelector' -], function(dataHTML, dataCss, com_String, com_util, Component, MultiSelector) { +], function(dataHTML, dataCss, com_Const, com_String, com_util, Component, MultiSelector) { //======================================================================== // [CLASS] DataSelector // Usage: @@ -344,7 +345,7 @@ define([ -

`; } @@ -364,10 +365,10 @@ define([

- - - - + + + +

diff --git a/js/com/component/FileNavigation.js b/js/com/component/FileNavigation.js index 5514c3dd..a6f1ed26 100644 --- a/js/com/component/FileNavigation.js +++ b/js/com/component/FileNavigation.js @@ -14,11 +14,13 @@ //============================================================================ define([ 'text!vp_base/html/component/fileNavigation.html!strip', - 'css!vp_base/css/component/fileNavigation.css', + 'css!vp_base/css/component/fileNavigation', + 'vp_base/js/com/component/LoadingSpinner', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/Component' -], function(fileNaviHtml, fileNaviCss, com_String, com_util, Component) { +], function(fileNaviHtml, fileNaviCss, LoadingSpinner, com_Const, com_String, com_util, Component) { // Temporary constant data const NAVIGATION_DIRECTION_TYPE = { TOP: 0, @@ -47,7 +49,7 @@ define([ * @param {Object} state { type, extensions, finish ... } */ constructor(state) { - super($('#site'), state); + super($(vpConfig.parentSelector), state); /** * state.type open / save * state.extensions extensions list @@ -121,9 +123,6 @@ define([ destDir: '/' } switch (pathType) { - case '/': - dirObj.direction = NAVIGATION_DIRECTION_TYPE.TOP; - break; case 'desktop': dirObj.destDir = "_vp_get_desktop_path()"; dirObj.useFunction = true; @@ -140,6 +139,13 @@ define([ dirObj.destDir = "_vp_get_userprofile_path()"; dirObj.useFunction = true; break; + case 'drive': + dirObj.destDir = "/content/drive/MyDrive"; + break; + case '/': + default: + dirObj.direction = NAVIGATION_DIRECTION_TYPE.TOP; + break; } that.getFileList(dirObj); }); @@ -189,7 +195,14 @@ define([ template() { /** Implement generating template */ - return fileNaviHtml; + let fileNaviBody = $(fileNaviHtml.replaceAll('${vp_base}', com_Const.BASE_PATH)); + $(fileNaviBody).find('.fnp-sidebar-menu').hide(); + if (vpConfig.extensionType === 'notebook') { + $(fileNaviBody).find('.fnp-sidebar-menu.notebook').show(); + } else if (vpConfig.extensionType === 'colab') { + $(fileNaviBody).find('.fnp-sidebar-menu.colab').show(); + } + return fileNaviBody; } /** @@ -311,7 +324,7 @@ define([ /** render current path */ var currentRelativePathStrArray = currentRelativePathStr.split('/'); - if (baseFolder === notebookFolder && Jupyter.notebook.notebook_path.indexOf('/') === -1) { + if (baseFolder === notebookFolder && vpKernel.getNotebookPath().indexOf('/') === -1) { var index = currentRelativePathStrArray.indexOf(baseFolder) if (index >= 0) { currentRelativePathStrArray.splice(index,1); @@ -538,6 +551,8 @@ define([ } else { destDir = '.'; } + // loading + let loadingSpinner = new LoadingSpinner($(this.wrapSelector('.fileNavigationPage-directory-container'))); // get file list using kernel return vpKernel.getFileList(destDir, useFunction).then(function(result) { /** Caution : if change code "$1" to '$1' as single quote, json parsing error occurs */ @@ -596,8 +611,23 @@ define([ that.pathState.currentPath = currentDirStr; that.currentFileList = filtered_varList; - that.loadFileList(); - });; + that.loadFileList(); + }).catch(function(resultObj) { + vpLog.display(VP_LOG_TYPE.ERROR, 'FileNavigation error', resultObj); + + let { msg, result } = resultObj; + // show error using alert + + if (msg.content.evalue) { + let resultStr = msg.content.evalue; + //t.match(/\[Errno [0-9]+?\] (.*)/)[1] + // get error message from traceback + let alertMsg = resultStr.match(/\[Errno [0-9]+?\] (.*)/)[1]; + com_util.renderAlertModal(alertMsg); + } + }).finally(function() { + loadingSpinner.remove(); + }); } /** @@ -626,7 +656,7 @@ define([ * RelativePathStr changes when moving through paths */ var rootFolderName = splitedDirStrArr[splitedDirStrArr.length - 1]; - var notebookPath = Jupyter.notebook.notebook_path; + var notebookPath = vpKernel.getNotebookPath(); this.pathState.baseFolder = rootFolderName; this.pathState.relativeDir = rootFolderName; diff --git a/js/com/component/InfoModal.js b/js/com/component/InfoModal.js index 9b0c8919..c6f48556 100644 --- a/js/com/component/InfoModal.js +++ b/js/com/component/InfoModal.js @@ -14,9 +14,10 @@ //============================================================================ define([ 'text!vp_base/html/component/infoModal.html!strip', - 'css!vp_base/css/component/infoModal.css', + 'css!vp_base/css/component/infoModal', + 'vp_base/js/com/com_Const', 'vp_base/js/com/component/Component' -], function(msgHtml, msgCss, Component) { +], function(msgHtml, msgCss, com_Const, Component) { /** * InfoModal @@ -35,7 +36,7 @@ define([ } template() { - return msgHtml; + return msgHtml.replaceAll('${vp_base}', com_Const.BASE_PATH); } render() { diff --git a/js/com/component/InnerFuncViewer.js b/js/com/component/InnerFuncViewer.js index 2bb97366..de67c162 100644 --- a/js/com/component/InnerFuncViewer.js +++ b/js/com/component/InnerFuncViewer.js @@ -14,12 +14,13 @@ //============================================================================ define([ 'text!vp_base/html/component/innerFuncViewer.html!strip', - 'css!vp_base/css/component/innerFuncViewer.css', + 'css!vp_base/css/component/innerFuncViewer', 'vp_base/js/com/com_util', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/component/FileNavigation' -], function(ifHtml, ifCss, com_util, com_String, PopupComponent, FileNavigation) { +], function(ifHtml, ifCss, com_util, com_Const, com_String, PopupComponent, FileNavigation) { /** * InnerFuncViewer @@ -156,7 +157,7 @@ define([ item.appendFormatLine('

', 'vp-if-item-menu'); item.appendFormatLine('

' , 'vp-if-item-menu-item', 'run', 'Run'); - item.appendFormatLine('

', '/nbextensions/visualpython/img/snippets/run.svg'); + item.appendFormatLine('

', com_Const.IMAGE_PATH + 'snippets/run.svg'); item.appendLine('

'); item.appendLine('

'); // end of vp-if-item-menu item.appendLine('

'); // end of vp-if-item-header diff --git a/js/com/component/InstanceEditor.js b/js/com/component/InstanceEditor.js index f8081045..31ddd182 100644 --- a/js/com/component/InstanceEditor.js +++ b/js/com/component/InstanceEditor.js @@ -1,9 +1,10 @@ define([ - 'css!vp_base/css/component/instanceEditor.css', + 'css!vp_base/css/component/instanceEditor', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/SuggestInput' -], function(insCss, com_String, com_util, SuggestInput) { +], function(insCss, com_Const, com_String, com_util, SuggestInput) { // temporary const @@ -104,7 +105,7 @@ define([ // create variable input tag.appendFormatLine('

', VP_CREATE_VAR_BOX); tag.appendFormatLine('', VP_CREATE_VAR); - tag.appendFormatLine('

', VP_CREATE_VAR_BTN, '/nbextensions/visualpython/img/plus.svg'); + tag.appendFormatLine('

', VP_CREATE_VAR_BTN, com_Const.IMAGE_PATH + 'plus.svg'); tag.appendLine('

'); tag.appendLine('

'); // VP_INS_SELECT_CONTAINER diff --git a/js/com/component/LibraryComponent.js b/js/com/component/LibraryComponent.js index 75b364dc..c4e9fc44 100644 --- a/js/com/component/LibraryComponent.js +++ b/js/com/component/LibraryComponent.js @@ -14,11 +14,12 @@ //============================================================================ define([ 'text!vp_base/html/m_library/libraryComponent.html!strip', - 'css!vp_base/css/m_library/libraryComponent.css', + 'css!vp_base/css/m_library/libraryComponent', 'vp_base/js/com/component/PopupComponent', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_generator', 'vp_base/data/m_library/pandasLibrary' -], function(libHtml, libCss, PopupComponent, com_generator, pandasLibrary) { +], function(libHtml, libCss, PopupComponent, com_Const, com_generator, pandasLibrary) { /** * LibraryComponent @@ -123,7 +124,7 @@ define([ } templateForBody() { - return libHtml; + return libHtml.replaceAll('${vp_base}', com_Const.BASE_PATH); } render() { diff --git a/js/com/component/LoadingSpinner.js b/js/com/component/LoadingSpinner.js new file mode 100644 index 00000000..47b2bdc1 --- /dev/null +++ b/js/com/component/LoadingSpinner.js @@ -0,0 +1,46 @@ +/* + * Project Name : Visual Python + * Description : GUI-based Python code generator + * File Name : LoadingSpinner.js + * Author : Black Logic + * Note : LoadingSpinner + * License : GNU GPLv3 with Visual Python special exception + * Date : 2022. 08. 26 + * Change Date : + */ + +//============================================================================ +// [CLASS] LoadingSpinner +//============================================================================ +define([ + 'css!vp_base/css/component/loadingSpinner', + 'vp_base/js/com/component/Component' +], function(msgCss, Component) { + + /** + * LoadingSpinner + * Usage: + * let loadingSpinner = new LoadingSpinner($(this.wrapSelector('.container'))); + * loadingSpinner.remove(); + */ + class LoadingSpinner extends Component { + constructor(targetTag) { + super($(targetTag)); + } + + template() { + return '

'; + } + + render() { + super.render(); + } + + remove() { + $(this.wrapSelector()).remove(); + } + + } + + return LoadingSpinner; +}); \ No newline at end of file diff --git a/js/com/component/Modal.js b/js/com/component/Modal.js index b59b7e7a..888c77e2 100644 --- a/js/com/component/Modal.js +++ b/js/com/component/Modal.js @@ -13,7 +13,7 @@ // [CLASS] Modal //============================================================================ define([ - 'css!vp_base/css/component/modal.css', + 'css!vp_base/css/component/modal', 'vp_base/js/com/com_String', 'vp_base/js/com/component/Component', 'vp_base/js/com/com_util' diff --git a/js/com/component/ModelEditor.js b/js/com/component/ModelEditor.js index 2eee09cf..3ed4a826 100644 --- a/js/com/component/ModelEditor.js +++ b/js/com/component/ModelEditor.js @@ -1,5 +1,5 @@ define([ - 'css!vp_base/css/component/instanceEditor.css', + 'css!vp_base/css/component/instanceEditor', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/com_generatorV2', diff --git a/js/com/component/MultiSelector.js b/js/com/component/MultiSelector.js index 481c8a66..7dd20d7a 100644 --- a/js/com/component/MultiSelector.js +++ b/js/com/component/MultiSelector.js @@ -9,12 +9,13 @@ * Change Date : */ define([ - 'css!vp_base/css/component/multiSelector.css', + 'css!vp_base/css/component/multiSelector', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/Component', 'vp_base/js/com/component/SuggestInput' -], function(multiCss, com_String, com_util, Component, SuggestInput) { +], function(multiCss, com_Const, com_String, com_util, Component, SuggestInput) { //======================================================================== // Define variable @@ -282,14 +283,14 @@ define([ tag.appendLine('

'); // APP_SELECT_LEFT // select - buttons tag.appendFormatLine('

', APP_SELECT_BTN_BOX); - tag.appendFormatLine('' - , APP_SELECT_ADD_ALL_BTN, 'Add all items', '

'); - tag.appendFormatLine('' - , APP_SELECT_ADD_BTN, 'Add selected items', '

'); - tag.appendFormatLine('' - , APP_SELECT_DEL_BTN, 'Remove selected items', '

'); - tag.appendFormatLine('' - , APP_SELECT_DEL_ALL_BTN, 'Remove all items', '

'); + tag.appendFormatLine('' + , APP_SELECT_ADD_ALL_BTN, 'Add all items', com_Const.IMAGE_PATH + 'arrow_right_double.svg'); + tag.appendFormatLine('' + , APP_SELECT_ADD_BTN, 'Add selected items', com_Const.IMAGE_PATH + 'arrow_right.svg'); + tag.appendFormatLine('' + , APP_SELECT_DEL_BTN, 'Remove selected items', com_Const.IMAGE_PATH + 'arrow_left.svg'); + tag.appendFormatLine('' + , APP_SELECT_DEL_ALL_BTN, 'Remove all items', com_Const.IMAGE_PATH + 'arrow_left_double.svg'); tag.appendLine('

'); // APP_SELECT_BTNS // select - right tag.appendFormatLine('

', APP_SELECT_RIGHT); diff --git a/js/com/component/NumpyComponent.js b/js/com/component/NumpyComponent.js index 224e74fb..73a2edf1 100644 --- a/js/com/component/NumpyComponent.js +++ b/js/com/component/NumpyComponent.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_library/numpyComponent.html!strip', - 'css!vp_base/css/m_library/numpyComponent.css', + 'css!vp_base/css/m_library/numpyComponent', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/com_generatorV2', 'vp_base/data/m_library/numpyLibrary', diff --git a/js/com/component/PopupComponent.js b/js/com/component/PopupComponent.js index 1a012ffd..4a1c5fdf 100644 --- a/js/com/component/PopupComponent.js +++ b/js/com/component/PopupComponent.js @@ -12,9 +12,44 @@ //============================================================================ // [CLASS] PopupComponent //============================================================================ +// CHROME: notebook/js/codemirror-ipython +(function(mod) { + if (typeof exports == "object" && typeof module == "object"){ // CommonJS + mod(requirejs("codemirror/lib/codemirror"), + requirejs("codemirror/mode/python/python") + ); + } else if (typeof define == "function" && define.amd){ // AMD + define('notebook/js/codemirror-ipython',["codemirror/lib/codemirror", + "codemirror/mode/python/python"], mod); + } else {// Plain browser env + mod(CodeMirror); + } +})(function(CodeMirror) { + "use strict"; + + CodeMirror.defineMode("ipython", function(conf, parserConf) { + var pythonConf = {}; + for (var prop in parserConf) { + if (parserConf.hasOwnProperty(prop)) { + pythonConf[prop] = parserConf[prop]; + } + } + pythonConf.name = 'python'; + pythonConf.singleOperators = new RegExp("^[\\+\\-\\*/%&|@\\^~<>!\\?]"); + if (pythonConf.version === 3) { + pythonConf.identifiers = new RegExp("^[_A-Za-z\u00A1-\uFFFF][_A-Za-z0-9\u00A1-\uFFFF]*"); + } else if (pythonConf.version === 2) { + pythonConf.identifiers = new RegExp("^[_A-Za-z][_A-Za-z0-9]*"); + } + return CodeMirror.getMode(conf, pythonConf); + }, 'python'); + + CodeMirror.defineMIME("text/x-ipython", "ipython"); +}); + define([ 'text!vp_base/html/component/popupComponent.html!strip', - 'css!vp_base/css/component/popupComponent.css', + 'css!vp_base/css/component/popupComponent', '../com_util', '../com_Const', '../com_String', @@ -25,9 +60,9 @@ define([ /** codemirror */ 'codemirror/lib/codemirror', 'codemirror/mode/python/python', - 'notebook/js/codemirror-ipython', 'codemirror/addon/display/placeholder', - 'codemirror/addon/display/autorefresh' + 'codemirror/addon/display/autorefresh', + 'notebook/js/codemirror-ipython' ], function(popupComponentHtml, popupComponentCss , com_util, com_Const, com_String, com_interface, Component, DataSelector, codemirror ) { @@ -41,7 +76,9 @@ define([ */ class PopupComponent extends Component { constructor(state={ config: { id: 'popup', name: 'Popup title', path: 'path/file' }}, prop={}) { - super($('#site'), state, prop); + // CHROME: FIXME: #site -> .notebook-vertical + // super($('#site'), state, prop); + super($(vpConfig.parentSelector), state, prop); } _init() { @@ -481,11 +518,22 @@ define([ } template() { - this.$pageDom = $(popupComponentHtml); + this.$pageDom = $(popupComponentHtml.replaceAll('${vp_base}', com_Const.BASE_PATH)); // set title this.$pageDom.find('.vp-popup-title').text(this.name); // set body - this.$pageDom.find('.vp-popup-content').html(this.templateForBody()); + let bodyTemplate = this.templateForBody(); + // CHROME: check url keyword and replace it + if (bodyTemplate) { + if (typeof bodyTemplate === 'string') { + // string replacement + bodyTemplate = bodyTemplate.replaceAll('${vp_base}', com_Const.BASE_PATH); + } else { + // object = jquery object + + } + } + this.$pageDom.find('.vp-popup-content').html(bodyTemplate); return this.$pageDom; } @@ -733,9 +781,11 @@ define([ let checkModules = this.config.checkModules; return new Promise(function(resolve, reject) { + // CHROME: TODO: 9: checkmodule works strange... if (checkModules.length > 0) { vpKernel.checkModule(checkModules).then(function(resultObj) { let { result } = resultObj; + vpLog.display(VP_LOG_TYPE.DEVELOP, resultObj); let checkedList = JSON.parse(result); let executeList = []; checkedList && checkedList.forEach((mod, idx) => { @@ -754,6 +804,7 @@ define([ } else { resolve([]); } + // resolve([]); }); } @@ -847,9 +898,9 @@ define([ focus() { $('.vp-popup-frame').removeClass('vp-focused'); - $('.vp-popup-frame').css({ 'z-index': 200 }); + $('.vp-popup-frame').css({ 'z-index': 1200 }); $(this.wrapSelector()).addClass('vp-focused'); - $(this.wrapSelector()).css({ 'z-index': 205 }); // move forward + $(this.wrapSelector()).css({ 'z-index': 1205 }); // move forward // focus on its block if (this.taskItem) { this.taskItem.focusItem(); @@ -883,11 +934,11 @@ define([ if (isClosed) { // show $this.removeClass('vp-close'); - $(this.wrapSelector('.vp-popup-toggle')).attr('src', '/nbextensions/visualpython/img/tri_down_fill_dark.svg'); + $(this.wrapSelector('.vp-popup-toggle')).attr('src', com_Const.IMAGE_PATH + 'tri_down_fill_dark.svg'); } else { // hide $this.addClass('vp-close'); - $(this.wrapSelector('.vp-popup-toggle')).attr('src', '/nbextensions/visualpython/img/tri_right_fill_dark.svg'); + $(this.wrapSelector('.vp-popup-toggle')).attr('src', com_Const.IMAGE_PATH + 'tri_right_fill_dark.svg'); } } diff --git a/js/com/component/SuccessMessage.js b/js/com/component/SuccessMessage.js index 439d9490..a6227a0c 100644 --- a/js/com/component/SuccessMessage.js +++ b/js/com/component/SuccessMessage.js @@ -14,9 +14,10 @@ //============================================================================ define([ 'text!vp_base/html/component/successMessage.html!strip', - 'css!vp_base/css/component/successMessage.css', + 'css!vp_base/css/component/successMessage', + 'vp_base/js/com/com_Const', 'vp_base/js/com/component/Component' -], function(msgHtml, msgCss, Component) { +], function(msgHtml, msgCss, com_Const, Component) { /** * SuccessMessage @@ -27,7 +28,7 @@ define([ } template() { - return msgHtml; + return msgHtml.replaceAll('${vp_base}', com_Const.BASE_PATH); } render() { diff --git a/js/com/component/VarSelector.js b/js/com/component/VarSelector.js index 0475f333..c6756b61 100644 --- a/js/com/component/VarSelector.js +++ b/js/com/component/VarSelector.js @@ -1,7 +1,8 @@ define([ + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', -], function(com_String, com_util) { +], function(com_Const, com_String, com_util) { const VP_VS_BOX = 'vp-vs-box'; const VP_VS_DATA_TYPE = 'vp-vs-data-type'; @@ -153,7 +154,7 @@ define([ // reload tag.appendFormatLine('

', - VP_VS_REFRESH, 'Refresh variables', '/nbextensions/visualpython/img/refresh.svg'); + VP_VS_REFRESH, 'Refresh variables', com_Const.IMAGE_PATH + 'refresh.svg'); tag.appendLine('

'); // VP_VS_BOX return tag.toString(); diff --git a/js/com/component/VarSelector2.js b/js/com/component/VarSelector2.js index 7789f9ee..8638d5db 100644 --- a/js/com/component/VarSelector2.js +++ b/js/com/component/VarSelector2.js @@ -1,8 +1,9 @@ define([ + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/Component', -], function(com_String, com_util, Component) { +], function(com_Const, com_String, com_util, Component) { /** * @class VarSelector * @constructor @@ -348,7 +349,7 @@ define([ 'vp-vs-input', that._additionalClass, that._compID == "" ? "" : com_util.formatString('id="{0}"', that._compID), that._placeholder, that._value, attributes); if (this._showFilterbox) { // filter icon - sbTagString.appendFormatLine('

', 'vp-vs-filter', '/nbextensions/visualpython/img/filter.svg'); + sbTagString.appendFormatLine('

', 'vp-vs-filter', com_Const.IMAGE_PATH + 'filter.svg'); // filter box sbTagString.appendFormatLine('

', 'vp-vs-filter-box'); sbTagString.appendLine('

'); diff --git a/js/loadVisualpython.js b/js/loadVisualpython.js index b0ae9193..bdbbc7a6 100644 --- a/js/loadVisualpython.js +++ b/js/loadVisualpython.js @@ -12,18 +12,10 @@ //============================================================================ // Load Visual Python //============================================================================ -( - require.specified('base/js/namespace') - ? define - : function (deps, callback) { - 'use strict'; - // if here, the Jupyter namespace hasn't been specified to be loaded. - // This means that we're probably embedded in a page, - // so we need to make our definition with a specific module name - return define('vp_base/js/loadVisualpython', deps, callback); - } -)([ - 'css!vp_base/css/root.css', +// CHROME: removed code +define([ + // CHROME: removed .css extension type + 'css!vp_base/css/root', 'vp_base/js/com/com_Const', 'vp_base/js/com/com_util', 'vp_base/js/com/com_Config', @@ -37,7 +29,7 @@ //======================================================================== // Define variable //======================================================================== - var Jupyter; + var Jupyter = null; var events; var liveNotebook = false; @@ -142,8 +134,41 @@ $(document).on('blur', com_util.wrapSelector('.vp-popup-frame textarea'), function() { com_interface.enableOtherShortcut(); }); + + + // CHROME: TODO: 2: background <-> vp + //====================================================================== + // Event listener + //====================================================================== + if (colab) { + document.removeEventListener('vpcomm', _vpcommHandler); + document.addEventListener('vpcomm', _vpcommHandler); + } }; + var _vpcommHandler = function(e) { + let detailObj = e.detail; + switch (detailObj.type) { + // case 'sendBase': + // // get base url of its extension + // vpBase = detailObj.data; + // // initialize vp environment + // vp_init(); + // break; + case 'toggle': + vpLog.display(VP_LOG_TYPE.DEVELOP, 'received from inject - ', e.detail.type, e); + // toggle vp_wrapper + if (window.vpBase != '' && window.$ && $('#vp_wrapper').length > 0) { + vpFrame.toggleVp(); + } else { + vpLog.display(VP_LOG_TYPE.DEVELOP, 'No vp...'); + } + break; + default: + break; + } + } + var _setGlobalVariables = function() { /** * visualpython log util @@ -159,7 +184,12 @@ /** * visualpython config util */ - window.vpConfig = new com_Config(); + // CHROME: added extType as 'colab' + if (colab) { + window.vpConfig = new com_Config('colab'); + } else { + window.vpConfig = new com_Config(); + } window.VP_MODE_TYPE = com_Config.MODE_TYPE; /** * visualpython kernel @@ -246,7 +276,10 @@ let cfg = readConfig(); vpConfig.readKernelFunction(); - _addToolBarVpButton(); + // CHROME: edited + if (Jupyter) { + _addToolBarVpButton(); + } _loadVpResource(cfg); _checkVersion(); @@ -255,11 +288,20 @@ } // Operations on kernel restart - events.on('kernel_ready.Kernel', function (evt, info) { - vpLog.display(VP_LOG_TYPE.LOG, 'vp operations for kernel ready...'); - // read vp functions - vpConfig.readKernelFunction(); - }); + if (vpConfig.extensionType === 'notebook') { + events.on('kernel_ready.Kernel', function (evt, info) { + vpLog.display(VP_LOG_TYPE.LOG, 'vp operations for kernel ready...'); + // read vp functions + vpConfig.readKernelFunction(); + }); + } else if (vpConfig.extensionType === 'colab') { + // CHROME: ready for colab kernel connected, and restart vp + colab.global.notebook.kernel.listen('connected', function(x) { + vpLog.display(VP_LOG_TYPE.LOG, 'vp operations for kernel ready...'); + // read vp functions + vpConfig.readKernelFunction(); + }); + } } return { initVisualpython: initVisualpython, readConfig: readConfig }; diff --git a/js/m_apps/Bind.js b/js/m_apps/Bind.js index 1ffc27f4..8e533217 100644 --- a/js/m_apps/Bind.js +++ b/js/m_apps/Bind.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/bind.html!strip', - 'css!vp_base/css/m_apps/bind.css', + 'css!vp_base/css/m_apps/bind', 'vp_base/js/com/com_util', 'vp_base/js/com/com_String', 'vp_base/js/com/component/PopupComponent', diff --git a/js/m_apps/File.js b/js/m_apps/File.js index 3ae75c07..80aeb777 100644 --- a/js/m_apps/File.js +++ b/js/m_apps/File.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/file.html!strip', - 'css!vp_base/css/m_apps/file.css', + 'css!vp_base/css/m_apps/file', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/com_Const', @@ -51,7 +51,12 @@ define([ ] } - this.dataPath = window.location.origin + com_Const.DATA_PATH + "sample_csv/"; + if (vpConfig.extensionType === 'notebook') { + this.dataPath = window.location.origin + com_Const.DATA_PATH + "sample_csv/"; + } else if (vpConfig.extensionType === 'colab') { + // this.dataPath = com_Const.DATA_PATH + "sample_csv/"; + this.dataPath = 'https://raw.githubusercontent.com/visualpython/visualpython/main/data/sample_csv/'; + } this.state = { fileExtension: 'csv', diff --git a/js/m_apps/Frame.js b/js/m_apps/Frame.js index 9efe8b28..c711877e 100644 --- a/js/m_apps/Frame.js +++ b/js/m_apps/Frame.js @@ -14,14 +14,15 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/frame.html!strip', - 'css!vp_base/css/m_apps/frame.css', + 'css!vp_base/css/m_apps/frame', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/component/SuggestInput', 'vp_base/js/com/component/VarSelector', 'vp_base/js/m_apps/Subset' -], function(frameHtml, frameCss, com_String, com_util, PopupComponent, SuggestInput, VarSelector, Subset) { +], function(frameHtml, frameCss, com_Const, com_String, com_util, PopupComponent, SuggestInput, VarSelector, Subset) { /** * Frame @@ -838,7 +839,7 @@ define([ content.appendFormatLine('', 'vp-inner-popup-replace' + index, 'Replace'); content.appendFormatLine('{1}', 'vp-inner-popup-replace-istext' + index, 'Text'); content.appendLine(''); - content.appendFormatLine('

', 'vp-inner-popup-delete', 'vp-cursor', '/nbextensions/visualpython/img/close_small.svg'); + content.appendFormatLine('

', 'vp-inner-popup-delete', 'vp-cursor', com_Const.IMAGE_PATH + 'close_small.svg'); content.appendLine(''); return content.toString(); } @@ -1171,43 +1172,48 @@ define([ // code.append(".value_counts()"); code.appendFormat('_vp_display_dataframe_info({0})', locObj.toString()); - Jupyter.notebook.kernel.execute( - code.toString(), - { - iopub: { - output: function(msg) { - if (msg.content.data) { - var htmlText = String(msg.content.data["text/html"]); - var codeText = String(msg.content.data["text/plain"]); - if (htmlText != 'undefined') { - $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { - return that.renderInfoPage(htmlText); - }); - } else if (codeText != 'undefined') { - // plain text as code - $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { - return that.renderInfoPage(codeText, false); - }); - } else { - $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { - return that.renderInfoPage(''); - }); - } - } else { - var errorContent = ''; - if (msg.content.ename) { - errorContent = com_util.templateForErrorBox(msg.content.ename, msg.content.evalue); - } - vpLog.display(VP_LOG_TYPE.ERROR, msg.content.ename, msg.content.evalue, msg.content); - $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { - return that.renderInfoPage(errorContent); - }); - } - } + // CHROME: TODO: 6: use com_Kernel.execute + // Jupyter.notebook.kernel.execute( + vpKernel.execute(code.toString()).then(function(resultObj) { + let { msg } = resultObj; + if (msg.content.data) { + var htmlText = String(msg.content.data["text/html"]); + var codeText = String(msg.content.data["text/plain"]); + if (htmlText != 'undefined') { + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(htmlText); + }); + } else if (codeText != 'undefined') { + // plain text as code + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(codeText, false); + }); + } else { + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(''); + }); } - }, - { silent: false, store_history: true, stop_on_error: true } - ); + } else { + var errorContent = ''; + if (msg.content.ename) { + errorContent = com_util.templateForErrorBox(msg.content.ename, msg.content.evalue); + } + vpLog.display(VP_LOG_TYPE.ERROR, msg.content.ename, msg.content.evalue, msg.content); + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(errorContent); + }); + } + }).catch(function(resultObj) { + let { msg } = resultObj; + var errorContent = ''; + if (msg.content.ename) { + errorContent = com_util.templateForErrorBox(msg.content.ename, msg.content.evalue); + } + vpLog.display(VP_LOG_TYPE.ERROR, msg.content.ename, msg.content.evalue, msg.content); + $(that.wrapSelector('.' + VP_FE_INFO_CONTENT)).replaceWith(function() { + return that.renderInfoPage(errorContent); + }); + }) } getTypeCode(type, content={}) { @@ -1417,7 +1423,7 @@ define([ , colCode, FRAME_AXIS.COLUMN, col.type, VP_FE_TABLE_COLUMN, colClass, col.label); }); // add column - table.appendFormatLine('

', VP_FE_ADD_COLUMN, '/nbextensions/visualpython/img/plus.svg'); + table.appendFormatLine('

', VP_FE_ADD_COLUMN, com_Const.IMAGE_PATH + 'plus.svg'); table.appendLine(''); table.appendLine(''); @@ -1448,7 +1454,7 @@ define([ }); // add row table.appendLine(''); - table.appendFormatLine('

', VP_FE_ADD_ROW, '/nbextensions/visualpython/img/plus.svg'); + table.appendFormatLine('

', VP_FE_ADD_ROW, com_Const.IMAGE_PATH + 'plus.svg'); table.appendLine(''); table.appendLine(''); $(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() { diff --git a/js/m_apps/Groupby.js b/js/m_apps/Groupby.js index 8d786397..e6638ba6 100644 --- a/js/m_apps/Groupby.js +++ b/js/m_apps/Groupby.js @@ -14,13 +14,14 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/groupby.html!strip', - 'css!vp_base/css/m_apps/groupby.css', + 'css!vp_base/css/m_apps/groupby', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/component/SuggestInput', 'vp_base/js/com/component/MultiSelector' -], function(gbHtml, gbCss, com_String, com_util, PopupComponent, SuggestInput, MultiSelector) { +], function(gbHtml, gbCss, com_Const, com_String, com_util, PopupComponent, SuggestInput, MultiSelector) { /** * Groupby @@ -429,12 +430,12 @@ define([ page.appendFormatLine('', 'vp-gb-adv-method', 'Type function name', "'" + defaultMethod + "'"); // page.appendFormatLine('', 'vp-gb-adv-method-return'); page.appendFormatLine('

' - , '/nbextensions/visualpython/img/arrow_left.svg', 'vp-gb-adv-method-return', 'Return to select method'); + , com_Const.IMAGE_PATH + 'arrow_left.svg', 'vp-gb-adv-method-return', 'Return to select method'); page.appendLine('

'); // naming page.appendFormatLine('', 'vp-gb-adv-naming', 'Display name'); // delete button - page.appendFormatLine('

', 'vp-gb-adv-item-delete', 'vp-cursor', '/nbextensions/visualpython/img/close_small.svg'); + page.appendFormatLine('

', 'vp-gb-adv-item-delete', 'vp-cursor', com_Const.IMAGE_PATH + 'close_small.svg'); page.appendLine('

'); return page.toString(); } diff --git a/js/m_apps/Import.js b/js/m_apps/Import.js index 4d8ab01b..b8ca9152 100644 --- a/js/m_apps/Import.js +++ b/js/m_apps/Import.js @@ -13,7 +13,7 @@ // [CLASS] Import //============================================================================ define([ - 'css!vp_base/css/m_apps/import.css', + 'css!vp_base/css/m_apps/import', 'vp_base/js/com/com_util', 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', @@ -36,7 +36,7 @@ define([ , include: [ 'from plotly.offline import init_notebook_mode', 'init_notebook_mode(connected=True)' - ] + ], checked: false } ], 'machine-learning': [ @@ -195,7 +195,7 @@ define([ tag.appendFormat('as', 'text-align="center";'); tag.appendFormat('' , 'vp_i1_' + idx, 'vp-input m vp-add-i1', 'Type alias', aliasName); - tag.appendFormat('

', 'vp-remove-option w100 vp-cursor', '/nbextensions/visualpython/img/close_small.svg'); + tag.appendFormat('

', 'vp-remove-option w100 vp-cursor', com_Const.IMAGE_PATH + 'close_small.svg'); tag.append(''); return tag.toString(); } @@ -213,7 +213,7 @@ define([ tag.appendFormat('import', 'text-align="center";'); tag.appendFormat('' , 'vp_i1_' + idx, 'vp-input m vp-add-i1', 'Type function', functionName); - tag.appendFormat('

', 'vp-remove-option w100 vp-cursor', '/nbextensions/visualpython/img/close_small.svg'); + tag.appendFormat('

', 'vp-remove-option w100 vp-cursor', com_Const.IMAGE_PATH + 'close_small.svg'); tag.append(''); return tag.toString(); } diff --git a/js/m_apps/Instance.js b/js/m_apps/Instance.js index 6c856282..97541f8d 100644 --- a/js/m_apps/Instance.js +++ b/js/m_apps/Instance.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/instance.html!strip', - 'css!vp_base/css/m_apps/instance.css', + 'css!vp_base/css/m_apps/instance', 'vp_base/js/com/com_String', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/component/InstanceEditor', diff --git a/js/m_apps/Markdown.js b/js/m_apps/Markdown.js index b1344ed4..ae6e49bf 100644 --- a/js/m_apps/Markdown.js +++ b/js/m_apps/Markdown.js @@ -13,14 +13,16 @@ // [CLASS] Markdown //============================================================================ define([ - 'notebook/js/mathjaxutils', - 'components/marked/lib/marked', - 'css!vp_base/css/m_apps/markdown.css', + 'css!vp_base/css/m_apps/markdown', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/PopupComponent', - 'vp_base/js/com/component/FileNavigation' -], function(mathjaxutils, marked, markdownCss, com_String, com_util, PopupComponent, FileNavigation) { + 'vp_base/js/com/component/FileNavigation', + // CHROME: remove mathjaxutils - use MathJax in colab + 'mathjaxutils', + // 'marked', +// ], function(markdownCss, com_String, com_util, PopupComponent, FileNavigation, marked, mathjaxutils) { +], function(markdownCss, com_String, com_util, PopupComponent, FileNavigation, mathjaxutils) { // markdown default text const VP_MARKDOWN_DEFAULT_NEW_TITLE_TEXT = 'New Title'; @@ -37,6 +39,9 @@ define([ class Markdown extends PopupComponent { _init() { super._init(); + + console.log('Markdown - ', arguments); + /** Write codes executed before rendering */ this.config.executeMode = 'markdown'; this.config.codeview = false; @@ -197,23 +202,25 @@ define([ text = text_and_math[0]; math = text_and_math[1]; - var renderer = new marked.Renderer(); + // CHROME: TODO: 4: marked is not loaded, before fix it comment it + // var renderer = new marked.Renderer(); // get block - let that = this; - let block = this.getTaskType() == 'block'? this.taskItem: null; - // render preview - marked(text, { renderer: renderer }, function (err, html) { - html = mathjaxutils.replace_math(html, math); - let preview = `

${html}

`; - if (html == '') { - preview = ''; - } - that.state.preview = preview; - $(that.wrapSelector("#vp_markdownPreview")).html(preview); - - MathJax.Hub.Queue(["Typeset", MathJax.Hub, "vp_markdownPreview"]); - }); + // let block = this.getTaskType() == 'block'? this.taskItem: null; + + // let that = this; + // // render preview + // marked(text, { renderer: renderer }, function (err, html) { + // html = mathjaxutils.replace_math(html, math); + // let preview = `

${html}

`; + // if (html == '') { + // preview = ''; + // } + // that.state.preview = preview; + // $(that.wrapSelector("#vp_markdownPreview")).html(preview); + + // MathJax.Hub.Queue(["Typeset", MathJax.Hub, "vp_markdownPreview"]); + // }); } getPreview() { diff --git a/js/m_apps/PDF.js b/js/m_apps/PDF.js index d5168aa0..ca179e79 100644 --- a/js/m_apps/PDF.js +++ b/js/m_apps/PDF.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/pdf.html!strip', - 'css!vp_base/css/m_apps/pdf.css', + 'css!vp_base/css/m_apps/pdf', 'vp_base/js/com/com_String', 'vp_base/js/com/com_interface', 'vp_base/js/com/component/PopupComponent', diff --git a/js/m_apps/Profiling.js b/js/m_apps/Profiling.js index c33affd1..0720dbc9 100644 --- a/js/m_apps/Profiling.js +++ b/js/m_apps/Profiling.js @@ -14,13 +14,14 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/profiling.html!strip', - 'css!vp_base/css/m_apps/profiling.css', + 'css!vp_base/css/m_apps/profiling', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_interface', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/component/SuggestInput', 'vp_base/js/com/component/FileNavigation' -], function(proHTML, proCss, com_String, com_interface, PopupComponent, SuggestInput, FileNavigation) { +], function(proHTML, proCss, com_Const, com_String, com_interface, PopupComponent, SuggestInput, FileNavigation) { const PROFILE_TYPE = { NONE: -1, @@ -314,11 +315,11 @@ define([ // button box page.appendFormatLine('

', 'vp-pf-list-button-box'); page.appendFormatLine('

' - , 'vp-pf-list-menu-item', LIST_MENU_ITEM.SHOW, 'Show report', '/nbextensions/visualpython/img/snippets/run.svg'); + , 'vp-pf-list-menu-item', LIST_MENU_ITEM.SHOW, 'Show report', com_Const.IMAGE_PATH + 'snippets/run.svg'); page.appendFormatLine('

' - , 'vp-pf-list-menu-item', LIST_MENU_ITEM.DELETE, 'Delete report', '/nbextensions/visualpython/img/delete.svg'); + , 'vp-pf-list-menu-item', LIST_MENU_ITEM.DELETE, 'Delete report', com_Const.IMAGE_PATH + 'delete.svg'); page.appendFormatLine('

' - , 'vp-pf-list-menu-item', LIST_MENU_ITEM.SAVE, 'Save report', '/nbextensions/visualpython/img/snippets/export.svg'); + , 'vp-pf-list-menu-item', LIST_MENU_ITEM.SAVE, 'Save report', com_Const.IMAGE_PATH + 'snippets/export.svg'); page.appendLine('

'); page.appendLine('

'); }); diff --git a/js/m_apps/Reshape.js b/js/m_apps/Reshape.js index 803c1dd4..fd02638b 100644 --- a/js/m_apps/Reshape.js +++ b/js/m_apps/Reshape.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/reshape.html!strip', - 'css!vp_base/css/m_apps/reshape.css', + 'css!vp_base/css/m_apps/reshape', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/PopupComponent', diff --git a/js/m_apps/Snippets.js b/js/m_apps/Snippets.js index 43ed759b..7704a948 100644 --- a/js/m_apps/Snippets.js +++ b/js/m_apps/Snippets.js @@ -14,12 +14,14 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/snippets.html!strip', - 'css!vp_base/css/m_apps/snippets.css', + 'css!vp_base/css/m_apps/snippets', 'vp_base/js/com/com_util', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/component/PopupComponent', - 'vp_base/js/com/component/FileNavigation' -], function(snHtml, snCss, com_util, com_String, PopupComponent, FileNavigation) { + 'vp_base/js/com/component/FileNavigation', + 'vp_base/js/com/component/LoadingSpinner' +], function(snHtml, snCss, com_util, com_Const, com_String, PopupComponent, FileNavigation, LoadingSpinner) { /** * Snippets @@ -171,10 +173,11 @@ define([ $(that.wrapSelector('.vp-sn-item-check')).prop('checked', true); } else if (menu == 'default-snippets') { // import default snippets + let loadingSpinner = new LoadingSpinner($(that.wrapSelector('.vp-sn-table'))); var timestamp = new Date().getTime(); - var keys = Object.keys(that.defaultSnippets); var importKeys = []; + var newSnippet = {}; keys.forEach(key => { var importKey = key; var importNo = 1; @@ -185,16 +188,17 @@ define([ importNo += 1; } var code = that.defaultSnippets[key].join('\n'); - var newSnippet = { [importKey]: { code: code, timestamp: timestamp } }; - vpConfig.setData(newSnippet); - + newSnippet = { ...newSnippet, [importKey]: { code: code, timestamp: timestamp } }; importKeys.push(importKey); }); - that.importedList = [ ...importKeys ]; - that.loadUdfList(); - - com_util.renderSuccessMessage('Default snippets imported'); + vpConfig.setData(newSnippet).then(function() { + that.importedList = [ ...importKeys ]; + that.loadUdfList(); + com_util.renderSuccessMessage('Default snippets imported'); + }).finally(function() { + loadingSpinner.remove(); + }); } $(that.wrapSelector('.vp-sn-menu-box')).hide(); evt.stopPropagation(); @@ -398,21 +402,21 @@ define([ cmCode.save(); var code = cmCode.getValue(); // Remove original title - vpConfig.removeData(prevTitle); - - // Save data with new title - // save udf - var newTimestamp = new Date().getTime(); - var newSnippet = { [newTitle]: { code: code, timestamp: newTimestamp } }; - vpConfig.setData(newSnippet); - + vpConfig.removeData(prevTitle).then(function() { + // Save data with new title + // save udf + var newTimestamp = new Date().getTime(); + var newSnippet = { [newTitle]: { code: code, timestamp: newTimestamp } }; + vpConfig.setData(newSnippet); + + // update title & codemirror + $(this).closest('.vp-sn-item-title').val(newTitle); + $(this).closest('.vp-sn-item').data('title', newTitle); + // update codemirror + that.codemirrorList[newTitle] = that.codemirrorList[prevTitle]; + delete that.codemirrorList[prevTitle]; + }); } - // update title & codemirror - $(this).closest('.vp-sn-item-title').val(newTitle); - $(this).closest('.vp-sn-item').data('title', newTitle); - // update codemirror - that.codemirrorList[newTitle] = that.codemirrorList[prevTitle]; - delete that.codemirrorList[prevTitle]; } // disable @@ -466,9 +470,9 @@ define([ $(dupItem).find('.vp-sn-indicator').trigger('click'); } else if (menu == 'delete') { - title && vpConfig.getData(title).then(function(dataObj) { - // remove key - vpConfig.removeData(title); + let loadingSpinner = new LoadingSpinner($(that.wrapSelector('.vp-sn-table'))); + // remove key + vpConfig.removeData(title).then(function() { delete that.codemirrorList[title]; // remove item $(that.wrapSelector('.vp-sn-item[data-title="' + title + '"]')).remove(); @@ -476,9 +480,11 @@ define([ // vp-multilang for success message com_util.renderSuccessMessage('Successfully removed!'); }).catch(function(err) { - com_util.renderAlertModal('No key available...'); + com_util.renderAlertModal('Failed to remove data...', err); // load again that.loadUdfList(); + }).finally(function() { + loadingSpinner.remove(); }); } else if (menu == 'save') { @@ -558,15 +564,15 @@ define([ item.appendFormatLine('

', 'vp-sn-item-menu'); item.appendFormatLine('

' , 'vp-sn-item-menu-item', 'run', 'Run'); - item.appendFormatLine('

', '/nbextensions/visualpython/img/snippets/run.svg'); + item.appendFormatLine('

', com_Const.IMAGE_PATH + 'snippets/run.svg'); item.appendLine('

'); item.appendFormatLine('

' , 'vp-sn-item-menu-item', 'duplicate', 'Duplicate'); - item.appendFormatLine('

', '/nbextensions/visualpython/img/snippets/duplicate.svg'); + item.appendFormatLine('

', com_Const.IMAGE_PATH + 'snippets/duplicate.svg'); item.appendLine('

'); item.appendFormatLine('

' , 'vp-sn-item-menu-item', 'delete', 'Delete'); - item.appendFormatLine('

', '/nbextensions/visualpython/img/delete.svg'); + item.appendFormatLine('

', com_Const.IMAGE_PATH + 'delete.svg'); item.appendLine('

'); item.appendLine('

'); // end of vp-sn-item-menu // export mode checkbox @@ -575,7 +581,7 @@ define([ item.appendFormatLine('

', 'vp-sn-item-code'); item.appendFormatLine('', code); item.appendFormatLine('

', 'vp-sn-item-menu-item', 'vp-sn-save', 'save', 'Save changes'); - item.appendFormatLine('

', '/nbextensions/visualpython/img/snippets/save_orange.svg'); + item.appendFormatLine('

', com_Const.IMAGE_PATH + 'snippets/save_orange.svg'); item.appendLine('

'); // vp-sn-save item.appendLine('

'); // end of vp-sn-item-code item.appendLine('

'); // end of vp-sn-item @@ -593,6 +599,7 @@ define([ $(this.wrapSelector('.vp-sn-table')).html(''); // load udf list to table 'vp_udfList' + let loadingSpinner = new LoadingSpinner($(this.wrapSelector('.vp-sn-table'))); vpConfig.getData().then(function(udfObj) { vpLog.display(VP_LOG_TYPE.DEVELOP, udfObj); var snippets = new com_String(); @@ -620,6 +627,10 @@ define([ var title = $(tag).closest('.vp-sn-item').data('title'); that.bindCodeMirror(title, tag); }); + }).catch(function(err) { + com_util.renderAlertModal(err); + }).finally(function() { + loadingSpinner.remove(); }); } diff --git a/js/m_apps/Subset.js b/js/m_apps/Subset.js index 263ea9a8..2f8d2b8a 100644 --- a/js/m_apps/Subset.js +++ b/js/m_apps/Subset.js @@ -14,14 +14,15 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/subset.html!strip', - 'css!vp_base/css/m_apps/subset.css', + 'css!vp_base/css/m_apps/subset', + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/component/SuggestInput', 'vp_base/js/com/component/VarSelector', 'vp_base/js/com/component/MultiSelector' -], function(subsetHtml, subsetCss, com_String, com_util, PopupComponent, SuggestInput, VarSelector, MultiSelector) { +], function(subsetHtml, subsetCss, com_Const, com_String, com_util, PopupComponent, SuggestInput, VarSelector, MultiSelector) { /** * Subset @@ -254,12 +255,12 @@ define([ // row select - buttons tag.appendFormatLine('

', VP_DS_SELECT_BTN_BOX); - tag.appendFormatLine('', - VP_DS_SELECT_ADD_ALL_BTN, 'select-row', 'Add all items', '

'); - tag.appendFormatLine('', VP_DS_SELECT_ADD_BTN, 'select-row', '

'); - tag.appendFormatLine('', VP_DS_SELECT_DEL_BTN, 'select-row', '

'); - tag.appendFormatLine('', - VP_DS_SELECT_DEL_ALL_BTN, 'select-row', 'Remove all items', '

'); + tag.appendFormatLine('', + VP_DS_SELECT_ADD_ALL_BTN, 'select-row', 'Add all items', com_Const.IMAGE_PATH + 'arrow_right_double.svg'); + tag.appendFormatLine('', VP_DS_SELECT_ADD_BTN, 'select-row', com_Const.IMAGE_PATH + 'arrow_right.svg'); + tag.appendFormatLine('', VP_DS_SELECT_DEL_BTN, 'select-row', com_Const.IMAGE_PATH + 'arrow_left.svg'); + tag.appendFormatLine('', + VP_DS_SELECT_DEL_ALL_BTN, 'select-row', 'Remove all items', com_Const.IMAGE_PATH + 'arrow_left_double.svg'); tag.appendLine('

'); // VP_DS_SELECT_BTNS // row select - right @@ -438,12 +439,12 @@ define([ // col select - buttons tag.appendFormatLine('

', VP_DS_SELECT_BTN_BOX); - tag.appendFormatLine('', - VP_DS_SELECT_ADD_ALL_BTN, 'select-col', 'Add all items', '

'); - tag.appendFormatLine('', VP_DS_SELECT_ADD_BTN, 'select-col', '

'); - tag.appendFormatLine('', VP_DS_SELECT_DEL_BTN, 'select-col', '

'); - tag.appendFormatLine('', - VP_DS_SELECT_DEL_ALL_BTN, 'select-col', 'Remove all items', '

'); + tag.appendFormatLine('', + VP_DS_SELECT_ADD_ALL_BTN, 'select-col', 'Add all items', com_Const.IMAGE_PATH + 'arrow_right_double.svg'); + tag.appendFormatLine('', VP_DS_SELECT_ADD_BTN, 'select-col', com_Const.IMAGE_PATH + 'arrow_right.svg'); + tag.appendFormatLine('', VP_DS_SELECT_DEL_BTN, 'select-col', com_Const.IMAGE_PATH + 'arrow_left.svg'); + tag.appendFormatLine('', + VP_DS_SELECT_DEL_ALL_BTN, 'select-col', 'Remove all items', com_Const.IMAGE_PATH + 'arrow_left_double.svg'); tag.appendLine('

'); // VP_DS_SELECT_BTNS // col select - right @@ -1100,7 +1101,7 @@ define([ that.beforeOpen(that); } that.open(); - $(that.wrapSelector()).css({ 'z-index': 205 }); // move forward + $(that.wrapSelector()).css({ 'z-index': 1205 }); // move forward } }); diff --git a/js/m_apps/Variable.js b/js/m_apps/Variable.js index 6d0e175a..dc15937b 100644 --- a/js/m_apps/Variable.js +++ b/js/m_apps/Variable.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/variable.html!strip', - 'css!vp_base/css/m_apps/variable.css', + 'css!vp_base/css/m_apps/variable', 'vp_base/js/com/com_String', 'vp_base/js/com/component/PopupComponent' ], function(varHtml, varCss, com_String, PopupComponent) { diff --git a/js/m_library/m_pandas/readFile.js b/js/m_library/m_pandas/readFile.js index 2083aa44..b5d54cdf 100644 --- a/js/m_library/m_pandas/readFile.js +++ b/js/m_library/m_pandas/readFile.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/file.html!strip', - 'css!vp_base/css/m_apps/file.css', + 'css!vp_base/css/m_apps/file', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/com_Const', diff --git a/js/m_library/m_pandas/toFile.js b/js/m_library/m_pandas/toFile.js index 35e466c1..10810e21 100644 --- a/js/m_library/m_pandas/toFile.js +++ b/js/m_library/m_pandas/toFile.js @@ -14,7 +14,7 @@ //============================================================================ define([ 'text!vp_base/html/m_apps/file.html!strip', - 'css!vp_base/css/m_apps/file.css', + 'css!vp_base/css/m_apps/file', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/com_Const', diff --git a/js/m_logic/Def.js b/js/m_logic/Def.js index 3d3197a6..e6af4117 100644 --- a/js/m_logic/Def.js +++ b/js/m_logic/Def.js @@ -13,10 +13,11 @@ // [CLASS] Def //============================================================================ define([ + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/PopupComponent' -], function(com_String, com_util, PopupComponent) { +], function(com_Const, com_String, com_util, PopupComponent) { /** * Def @@ -109,7 +110,7 @@ define([ page.appendLine('='); page.appendFormatLine('' , 'v2-value', value, 'Value'); - page.appendFormatLine('

', 'v2-del'); + page.appendFormatLine('

', 'v2-del', com_Const.IMAGE_PATH); page.appendLine(''); return page.toString(); } diff --git a/js/m_logic/Elif.js b/js/m_logic/Elif.js index 15f7feeb..cbca304f 100644 --- a/js/m_logic/Elif.js +++ b/js/m_logic/Elif.js @@ -13,11 +13,12 @@ // [CLASS] Elif //============================================================================ define([ + 'vp_base/js/com/com_Const', 'vp_base/js/com/com_String', 'vp_base/js/com/com_util', 'vp_base/js/com/component/PopupComponent', 'vp_base/js/com/component/SuggestInput' -], function(com_String, com_util, PopupComponent, SuggestInput) { +], function(com_Const, com_String, com_util, PopupComponent, SuggestInput) { /** * Elif @@ -156,7 +157,7 @@ define([ page.appendFormatLine('', op, op == v.i4? 'selected': '', op); }) page.appendLine(''); - page.appendFormatLine('