diff --git a/.gitignore b/.gitignore index 378a7a07..e35d2e30 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,6 @@ dist/ jupyterlab/lib/visualpython -test/ \ No newline at end of file +jupyternotebook/visualpython +colab/visualpython +test/ +.gitignore diff --git a/build.sh b/build.sh index bbccbcf0..7b33c85f 100755 --- a/build.sh +++ b/build.sh @@ -11,8 +11,8 @@ #============================================================================= # Set version and replace it #============================================================================= -VP_ORG_VER=2.3.2 -VP_NEW_VER=2.3.3 +VP_ORG_VER=2.3.3 +VP_NEW_VER=2.3.4 # update version info grep -REil "VP_ORG_VER=.+$" colab/build.colab.sh jupyterlab/build.jupyterlab.sh jupyternotebook/build.jupyternotebook.sh | xargs sed -i "s/VP_ORG_VER=.\+$/VP_ORG_VER=${VP_ORG_VER}/g" diff --git a/colab/build.colab.sh b/colab/build.colab.sh index 2e15402d..1688e4aa 100755 --- a/colab/build.colab.sh +++ b/colab/build.colab.sh @@ -11,8 +11,8 @@ #============================================================================= # Replace Version #============================================================================= -VP_ORG_VER=2.3.2 -VP_NEW_VER=2.3.3 +VP_ORG_VER=2.3.3 +VP_NEW_VER=2.3.4 # update version info # update manifest version with new numbering for new version @@ -28,7 +28,7 @@ mkdir -p ../dist/colab # build package # sudo apt-get install zip -zip -r ../dist/colab/visualpython-v$VP_NEW_VER.$VP_COLAB_VER.zip * -x build.colab.sh +zip -r ../dist/colab/visualpython-v$VP_NEW_VER.zip * -x build.colab.sh exit 0 # End of file diff --git a/jupyterlab/build.jupyterlab.sh b/jupyterlab/build.jupyterlab.sh index aaac50a6..7c0afef6 100755 --- a/jupyterlab/build.jupyterlab.sh +++ b/jupyterlab/build.jupyterlab.sh @@ -11,8 +11,8 @@ #============================================================================= # Replace Version and Basic Files #============================================================================= -VP_ORG_VER=2.3.2 -VP_NEW_VER=2.3.3 +VP_ORG_VER=2.3.3 +VP_NEW_VER=2.3.4 # update version info grep -REil "\"version\": \"${VP_ORG_VER}\"" package.json | xargs sed -i "s/\"version\": \"${VP_ORG_VER//\./\\.}\"/\"version\": \"${VP_NEW_VER}\"/g" diff --git a/jupyterlab/package-lock.json b/jupyterlab/package-lock.json index a54025fe..4d2a8c67 100644 --- a/jupyterlab/package-lock.json +++ b/jupyterlab/package-lock.json @@ -1,12 +1,12 @@ { "name": "jupyterlab-visualpython", - "version": "2.3.1", + "version": "2.3.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "jupyterlab-visualpython", - "version": "2.3.1", + "version": "2.3.3", "license": "GPLv3 with Visual Python special exception", "dependencies": { "@jupyterlab/cells": "^3.5.2", diff --git a/jupyterlab/package.json b/jupyterlab/package.json index 823dbcaf..7100625a 100644 --- a/jupyterlab/package.json +++ b/jupyterlab/package.json @@ -1,6 +1,6 @@ { "name": "jupyterlab-visualpython", - "version": "2.3.3", + "version": "2.3.4", "description": "GUI-based Python code generator for Jupyter Lab as an extension", "keywords": [ "jupyter", diff --git a/jupyterlab/pyproject.toml b/jupyterlab/pyproject.toml index bf33b397..5d82fac0 100644 --- a/jupyterlab/pyproject.toml +++ b/jupyterlab/pyproject.toml @@ -32,7 +32,7 @@ classifiers = [ "Programming Language :: Python :: 3.9", "Programming Language :: Python :: 3.10", ] -version = "2.3.3" +version = "2.3.4" [project.license] file = "LICENSE" @@ -92,7 +92,7 @@ file = [ ] [tool.tbump.version] -current = "2.3.3" +current = "2.3.4" regex = "(?P\\d+)\\.(?P\\d+)\\.(?P\\d+)((?Pa|b|rc|.dev)(?P\\d+))?" [tool.tbump.git] diff --git a/jupyternotebook/build.jupyternotebook.sh b/jupyternotebook/build.jupyternotebook.sh index 280ee45c..30e0826c 100755 --- a/jupyternotebook/build.jupyternotebook.sh +++ b/jupyternotebook/build.jupyternotebook.sh @@ -11,8 +11,8 @@ #============================================================================= # Replace Version and Basic Files #============================================================================= -VP_ORG_VER=2.3.2 -VP_NEW_VER=2.3.3 +VP_ORG_VER=2.3.3 +VP_NEW_VER=2.3.4 # update version info grep -REil ${VP_ORG_VER//\./\\.} setup.py visualpython/* | xargs sed -i --follow-symlinks "s/${VP_ORG_VER//\./\\.}/${VP_NEW_VER}/g" diff --git a/jupyternotebook/setup.py b/jupyternotebook/setup.py index 16a5458f..bcc16157 100644 --- a/jupyternotebook/setup.py +++ b/jupyternotebook/setup.py @@ -10,7 +10,7 @@ setup( name = name, - version = '2.3.3', + version = '2.3.4', packages = find_packages(), package_data = {"": ["*"], 'visualpython' : ['visualpython.yaml', 'README.md']}, scripts = ['visualpython/bin/visualpy', 'visualpython/bin/visualpy.bat'], diff --git a/visualpython/css/boardFrame.css b/visualpython/css/boardFrame.css index bbc787aa..b88fa5b3 100644 --- a/visualpython/css/boardFrame.css +++ b/visualpython/css/boardFrame.css @@ -16,7 +16,7 @@ position: relative; float: left; - border-left: 1px solid var(--border-gray-color); + border-left: 1px solid var(--vp-border-gray-color); box-sizing: border-box; } .vp-board-header { @@ -24,18 +24,18 @@ width: 100%; height: 50px; text-align: right; - background-color: #FFFFFF; - border-bottom: 1px solid var(--border-gray-color); + background-color: var(--vp-background-color); + border-bottom: 1px solid var(--vp-border-gray-color); } .vp-board-title { width: 100%; height: 50px; - background-color: white; + background-color: var(--vp-background-color); display: flex; flex-direction: row; position: relative; z-index: 10; - border-bottom: 0.25px solid var(--border-gray-color); + border-bottom: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; } .vp-board-title input { @@ -48,8 +48,8 @@ } .vp-board-title input:focus { transition: 0.7s; - border: 0.5px solid var(--highlight-color) !important; - color: var(--font-highlight); + border: 0.5px solid var(--vp-highlight-color) !important; + color: var(--vp-font-highlight); } .vp-board-title input::selection { background-color: #FDEFDD; @@ -72,13 +72,13 @@ position: relative; color: #000; background-size: 5px 5px; - background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 50px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 50px ); - background-color: white; + background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 50px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 50px ); + background-color: var(--vp-background-color); } .vp-board-footer { width: 100%; height: 50px; - border-top: 1px solid var(--border-gray-color); + border-top: 1px solid var(--vp-border-gray-color); line-height: 50px; } .vp-board-footer-buttons { @@ -106,8 +106,8 @@ margin-top: 25px; width: 150px; float: right; - background: #FFFFFF; - border: 0.25px solid var(--border-gray-color); + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; box-sizing: border-box; box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); @@ -119,7 +119,7 @@ margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; - color: var(--font-primary); + color: var(--vp-font-primary); } .vp-board-header-button-inner ul li { overflow: hidden; @@ -131,14 +131,14 @@ line-height: 22px; text-align: left; vertical-align: middle; - color: var(--font-primary); - background-color: #FFFFFF; + color: var(--vp-font-primary); + background-color: var(--vp-background-color); margin-bottom: 2px; float: none; } .vp-board-header-button-inner ul li:hover { - color: var(--font-highlight); - /* background-color: var(--light-gray-color); */ + color: var(--vp-font-highlight); + /* background-color: var(--vp-light-gray-color); */ } /* block */ @@ -156,7 +156,7 @@ flex-direction: column; justify-content: center; touch-action: none; - color: var(--font-primary); + color: var(--vp-font-primary); font-family: 'AppleSDGothicNeo'; } @@ -171,7 +171,7 @@ position: relative; display: flex; flex-direction: row; - background: var(--border-gray-color); + background: var(--vp-border-gray-color); z-index: 10; text-overflow: ellipsis; white-space: nowrap; @@ -222,7 +222,7 @@ /* block color labeling */ .vp-block.vp-focus .vp-block-header { - border: 2px solid var(--highlight-color); + border: 2px solid var(--vp-highlight-color); } .vp-block.vp-focus-child .vp-block-header { background-color: rgb(196, 196, 196); @@ -285,9 +285,9 @@ display: flex; } .vp-block-button { - background-color: white; - color: var(--font-primary); - border: 0.25px solid var(--border-gray-color); + background-color: var(--vp-background-color); + color: var(--vp-font-primary); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); border-radius: 2px; @@ -296,7 +296,7 @@ text-align: center; } .vp-block-button:hover { - background-color: var(--highlight-color); + background-color: var(--vp-highlight-color); color: white; cursor: pointer; transition: 0.2s; @@ -309,7 +309,7 @@ border: 2px solid transparent; } .vp-block-markdown.vp-focus .vp-block-header { - border: 2px solid var(--highlight-color); + border: 2px solid var(--vp-highlight-color); } .vp-block-markdown .vp-block-header:empty::after { content: 'Double click to edit.'; @@ -329,24 +329,24 @@ /* block menu */ .vp-block-menu-box { position: fixed; - background: #FFFFFF; + background: var(--vp-background-color); width: 125px; line-height: 15px; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; padding: 5px; z-index: 50; } .vp-block-menu-item { - color: var(--font-primary); + color: var(--vp-font-primary); padding: 5px; font-size: 14px; } .vp-block-menu-item:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); cursor: pointer; } #vp_block_menu_delete:hover { - background: var(--highlight-color); + background: var(--vp-highlight-color); color: white; } \ No newline at end of file diff --git a/visualpython/css/component/alertModal.css b/visualpython/css/component/alertModal.css index 7378670b..cd2ead1c 100644 --- a/visualpython/css/component/alertModal.css +++ b/visualpython/css/component/alertModal.css @@ -15,7 +15,7 @@ width: 400px; height: 150px; padding: 15px; - background-color: white; + background-color: var(--vp-background-color); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); } .vp-alertModal-inner { diff --git a/visualpython/css/component/dataSelector.css b/visualpython/css/component/dataSelector.css index 8e865b18..530a67bd 100644 --- a/visualpython/css/component/dataSelector.css +++ b/visualpython/css/component/dataSelector.css @@ -18,7 +18,7 @@ padding-right: 23px; } .vp-ds-box input.vp-ds-target:disabled { - background: var(--light-gray-color) !important; + background: var(--vp-light-gray-color) !important; cursor: not-allowed; } .vp-ds-box input.vp-ds-target:disabled + .vp-ds-filter { @@ -41,28 +41,28 @@ } .vp-dataselector { position: absolute; - top: calc(50% - 275px); + top: calc(50% - 290px); left: calc(50% - 325px); width: 650px; - height: 550px; - background: white; - border: 1px solid var(--border-gray-color); + height: 580px; + background: var(--vp-background-color); + border: 1px solid var(--vp-border-gray-color); z-index: 1300; /* font */ font-family: AppleSDGothicNeo; font-size: 14px; - color: var(--font-primary); + color: var(--vp-font-primary); } .vp-ds-data-box { width: 100%; - height: 160px; + height: 130px; align-content: baseline; align-items: center; } .vp-ds-type-box, .vp-ds-variable-box { - border: 0.25px solid var(--border-gray-color); - height: 160px; + border: 0.25px solid var(--vp-border-gray-color); + height: 130px; grid-row-gap: 0px; align-content: baseline; } @@ -71,18 +71,18 @@ padding-left: 5px; height: 25px; line-height: 25px; - border-bottom: 1px solid var(--border-gray-color); + border-bottom: 1px solid var(--vp-border-gray-color); } .vp-ds-type-item:hover, .vp-ds-var-item:hover { - background: var(--light-gray-color); - color: var(--font-highlight); + background: var(--vp-light-gray-color); + color: var(--vp-font-highlight); cursor: pointer; } .vp-ds-type-item.selected, .vp-ds-var-item.selected { - background: var(--light-gray-color); - color: var(--font-highlight); + background: var(--vp-light-gray-color); + color: var(--vp-font-highlight); font-weight: bold; } .vp-ds-option-box { @@ -90,7 +90,7 @@ margin-top: 10px; } .vp-ds-option-inner-box { - height: calc(100% - 30px); + height: calc(100% - 80px); } .vp-ds-df-option-box { height: 100%; diff --git a/visualpython/css/component/fileNavigation.css b/visualpython/css/component/fileNavigation.css index 9c58cb80..35c93c67 100644 --- a/visualpython/css/component/fileNavigation.css +++ b/visualpython/css/component/fileNavigation.css @@ -23,10 +23,10 @@ min-height: 400px; width: 70%; height: 55%; - background-color: white; + background-color: var(--vp-background-color); } #fnpRootFolder:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); cursor: pointer; } @@ -39,7 +39,7 @@ padding-top: 10px; } .fnp-sidebar-menu.selected { - color: var(--font-highlight) + color: var(--vp-font-highlight) } .fnp-sidebar-menu { padding: 5px 0px 5px 15px; @@ -199,7 +199,7 @@ padding-left: 0px; margin-left:5px; white-space: nowrap; - color: var(--font-primary); + color: var(--vp-font-primary); font-size: 13px; } .fileNavigationPage-dir-text:hover { @@ -223,7 +223,7 @@ transition: 0.7s; } .fileNavigationPage-directory-nowLocation { - color: var(--font-primary); + color: var(--vp-font-primary); } .fileNavigationPage-directory-nowLocation:hover { cursor: pointer; @@ -242,7 +242,7 @@ #vp_fileNavigationExt { width: 130px; vertical-align: middle; - color: var(--font-primary); + color: var(--vp-font-primary); font-family: 'AppleSDGothicNeo'; font-size: 13px; border-radius: 3px; diff --git a/visualpython/css/component/infoModal.css b/visualpython/css/component/infoModal.css index 498ab1bf..70b39399 100644 --- a/visualpython/css/component/infoModal.css +++ b/visualpython/css/component/infoModal.css @@ -15,7 +15,7 @@ width: 400px; height: 165px; padding: 2rem; - background-color: white; + background-color: var(--vp-background-color); border-radius: 5px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); font-family: AppleSDGothicNeo; @@ -32,7 +32,7 @@ } .vp-infoModal-icon { font-size: 26px; - color: var(--font-primary); + color: var(--vp-font-primary); /* LAB: img to background-image */ background-image: url(../../img/info_circle.svg); background-repeat: no-repeat; @@ -41,7 +41,7 @@ height: 24px; } .vp-infoModal-titleStr { - color: var(--font-primary); + color: var(--vp-font-primary); font-size: 15px; } .vp-infoModal-style-flex-column-evenly { diff --git a/visualpython/css/component/innerFuncViewer.css b/visualpython/css/component/innerFuncViewer.css index 055a27c8..d48abd77 100644 --- a/visualpython/css/component/innerFuncViewer.css +++ b/visualpython/css/component/innerFuncViewer.css @@ -1,6 +1,6 @@ /* UDF Editor - CodeMirror */ .vp-if-body .CodeMirror { border: 1px solid silver; } -.vp-if-body .CodeMirror.CodeMirror-focused { border: 1px solid var(--highlight-color); } +.vp-if-body .CodeMirror.CodeMirror-focused { border: 1px solid var(--vp-highlight-color); } .vp-if-body .CodeMirror-empty { outline: 1px solid #c22; } .vp-if-body .CodeMirror-empty.CodeMirror-focused { outline: none; } .vp-if-body .CodeMirror pre.CodeMirror-placeholder { color: #999; } @@ -28,9 +28,9 @@ width: 130px; top: 23px; right: 0px; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; - background: #FFFFFF; + background: var(--vp-background-color); padding: 5px; z-index: 5; } @@ -42,7 +42,7 @@ cursor: pointer; } .vp-if-menu-item:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-if-search-box { position: relative; @@ -82,7 +82,7 @@ height: 30px; line-height: 30px; padding: 0px 7px; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; cursor: pointer; } @@ -109,11 +109,11 @@ cursor: pointer; } .vp-if-item-header.selected input.vp-if-item-title { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-if-item-header input.vp-if-item-title:focus { transition: 0.7s; - border: 0.5px solid var(--highlight-color) !important; + border: 0.5px solid var(--vp-highlight-color) !important; cursor: text; } .vp-if-item-menu { @@ -127,5 +127,5 @@ .vp-if-item-code { display: none; position: relative; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); } \ No newline at end of file diff --git a/visualpython/css/component/instanceEditor.css b/visualpython/css/component/instanceEditor.css index 3e67e062..1e9c2c9b 100644 --- a/visualpython/css/component/instanceEditor.css +++ b/visualpython/css/component/instanceEditor.css @@ -8,7 +8,7 @@ } .vp-ins-select-title { font-weight: bold; - color: var(--font-highlight); + color: var(--vp-font-highlight); padding: 5px 5px 5px 0px; } .vp-ins-select-container input.vp-ins-search { @@ -22,7 +22,7 @@ } .vp-ins-select-box { margin-top: 5px; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); } .vp-ins-select-list { height: 145px; @@ -49,11 +49,11 @@ padding-top: 3px; padding-bottom: 3px; cursor: pointer; - border-bottom: 0.25px solid var(--light-gray-color); + border-bottom: 0.25px solid var(--vp-light-gray-color); } .vp-ins-select-item.selected { - color : var(--font-highlight); - background: var(--light-gray-color); + color : var(--vp-font-highlight); + background: var(--vp-light-gray-color); } .vp-ins-select-item span { background: #e0e0e0; @@ -62,10 +62,10 @@ margin-right: 5px; } .vp-ins-select-item:hover { - background: var(--light-gray-color); + background: var(--vp-light-gray-color); } .vp-ins-select-item:hover span { - background: var(--highlight-color); + background: var(--vp-highlight-color); color: #FFFFFF; } .vp-ins-option-box.api { @@ -76,7 +76,7 @@ } .vp-ins-parameter-box:empty::after { content: '(Empty)'; - color: var(--gray-color); + color: var(--vp-gray-color); } .vp-ins-parameter { width: 100% !important; diff --git a/visualpython/css/component/loadingSpinner.css b/visualpython/css/component/loadingSpinner.css index 1d72c1f2..2406f753 100644 --- a/visualpython/css/component/loadingSpinner.css +++ b/visualpython/css/component/loadingSpinner.css @@ -16,7 +16,7 @@ border-top: 1.1em solid #f6ad55; border-right: 1.1em solid #f6ad55; border-bottom: 1.1em solid #f6ad55; - border-left: 1.1em solid #ffffff; + border-left: 1.1em solid var(--vp-background-color); -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); diff --git a/visualpython/css/component/modal.css b/visualpython/css/component/modal.css index 713897f1..d8c49927 100644 --- a/visualpython/css/component/modal.css +++ b/visualpython/css/component/modal.css @@ -16,7 +16,7 @@ width: 400px; height: 170px; padding: 2rem; - background-color: white; + background-color: var(--vp-background-color); border-radius: 5px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); font-family: AppleSDGothicNeo; @@ -38,7 +38,7 @@ overflow: hidden; } #vp_multiButtonModal .vp-multi-button-modal-message span { - color: var(--font-highlight); + color: var(--vp-font-highlight); } #vp_multiButtonModal .vp-multi-button-modal-message-inner { display: flex; diff --git a/visualpython/css/component/multiSelector.css b/visualpython/css/component/multiSelector.css index 0b001277..391a87c2 100644 --- a/visualpython/css/component/multiSelector.css +++ b/visualpython/css/component/multiSelector.css @@ -15,7 +15,7 @@ .vp-cs-select-box { width: 100%; height: 100%; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); overflow-y: auto; overflow-x: hidden; } @@ -28,19 +28,19 @@ width: 100%; height: 25px; padding: 0px 10px; - border-bottom: 0.25px solid #E4E4E4; + border-bottom: 0.25px solid var(--vp-border-gray-color); line-height: 25px; - background-color: white; + background-color: var(--vp-background-color); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .vp-cs-select-item:hover { cursor: pointer; - background-color: #E4E4E4; + background-color: var(--vp-border-gray-color); } .vp-cs-select-item.selected { - color: var(--font-highlight); + color: var(--vp-font-highlight); background-color: #F5F5F5; } /* Item Sorting FIXME: change span to class */ @@ -59,8 +59,8 @@ } .vp-cs-select-btn-box button { height: 24px; - background: #FFFFFF; - border: 0.25px solid #E4E4E4; + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; cursor: pointer; } @@ -72,6 +72,7 @@ } .vp-cs-add-item-name { padding-right: 25px; + width: 100%; } .vp-cs-add-item-btn { display: inline-block; diff --git a/visualpython/css/component/popupComponent.css b/visualpython/css/component/popupComponent.css index 19ab0018..fc7665c8 100644 --- a/visualpython/css/component/popupComponent.css +++ b/visualpython/css/component/popupComponent.css @@ -17,14 +17,14 @@ min-height: 400px; width: 400px; height: 400px; - background: white; - border: 1px solid var(--border-gray-color); - border-top: 3px solid var(--border-gray-color); + background: var(--vp-background-color); + border: 1px solid var(--vp-border-gray-color); + border-top: 3px solid var(--vp-border-gray-color); box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); z-index: 1200; font-family: AppleSDGothicNeo; font-size: 14px; - color: var(--font-primary); + color: var(--vp-font-primary); } /* CHROME: set default box-sizing for popup area */ .vp-popup-frame * { @@ -54,14 +54,14 @@ display: none; } .vp-popup-frame.vp-focused { - border-top: 3px solid var(--highlight-color); + border-top: 3px solid var(--vp-highlight-color); box-shadow: 2px 2px 8px rgb(0 0 0 / 15%); } .vp-popup-header { position: relative; height: 30px; - background: var(--light-gray-color); - border-bottom: 1px solid var(--border-gray-color); + background: var(--vp-light-gray-color); + border-bottom: 1px solid var(--vp-border-gray-color); } .vp-popup-title { line-height: 32px; @@ -70,12 +70,16 @@ padding-left: 10px; font-family: 'AppleSDGothicNeo'; font-size: 15px; - color: var(--font-primary); + color: var(--vp-font-primary); cursor: pointer; } +.vp-popup-category { + color: var(--vp-font-primary); + font-size: 12px; +} .vp-popup-frame.vp-focused .vp-popup-title { font-family: 'AppleSDGothicNeo'; - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-popup-maximize { position: absolute; @@ -87,7 +91,7 @@ line-height: 20px; text-align: center; cursor: pointer; - color: var(--gray-color); + color: var(--vp-gray-color); /* LAB: img to background-image */ background: center / contain no-repeat url(../../img/max_window.svg); } @@ -101,7 +105,7 @@ line-height: 20px; text-align: center; cursor: pointer; - color: var(--gray-color); + color: var(--vp-gray-color); display: none; /* LAB: img to background-image */ background: center / contain no-repeat url(../../img/min_window.svg); @@ -116,7 +120,7 @@ line-height: 20px; text-align: center; cursor: pointer; - color: var(--gray-color); + color: var(--vp-gray-color); /* LAB: img to background-image */ background: center / contain no-repeat url(../../img/minimize.svg); } @@ -147,7 +151,7 @@ .vp-popup-footer { position: relative; height: 50px; - border-top: 0.25px solid var(--border-gray-color); + border-top: 0.25px solid var(--vp-border-gray-color); } .vp-popup-codeview-box, .vp-popup-dataview-box { @@ -157,7 +161,7 @@ position: absolute; bottom: 50px; background: #F7F7F7; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); padding: 10px; z-index: 2; } @@ -193,20 +197,22 @@ .vp-popup-button[data-type="run"] { display: inline-block; width: 60px; + min-width: 60px; border-radius: 3px 0px 0px 3px; border-right: 0.25px solid white !important; } .vp-popup-button[data-type="show-detail"] { display: inline-block; width: 20px; + min-width: 20px; height: 28px; border-radius: 0px 3px 3px 0px; padding: 0px 2px 0px 0px; } .vp-popup-run-detailbox { display: none; - background: white; - border: 0.25px solid var(--border-gray-color); + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); position: absolute; bottom: 45px; right: 10px; @@ -216,11 +222,11 @@ z-index: 2; } .vp-popup-detail-button { - color: var(--font-primary); + color: var(--vp-font-primary); } .vp-popup-detail-button:hover { - color: var(--font-highlight); - background: var(--light-gray-color); + color: var(--vp-font-highlight); + background: var(--vp-light-gray-color); } .vp-popup-save-button { float: right; @@ -231,7 +237,7 @@ /* writable codemirror style*/ /* Code Option Codemirror */ .vp-popup-frame .CodeMirror.vp-writable-codemirror { - border: 1px solid var(--border-gray-color); + border: 1px solid var(--vp-border-gray-color); } .vp-popup-frame .CodeMirror.vp-writable-codemirror .CodeMirror-empty { outline: 1px solid #c22; @@ -267,11 +273,12 @@ padding-left: 20px; cursor: pointer; height: 15px; + line-height: 15px; vertical-align: middle; } .vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label, .vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span { - color: var(--gray-color); + color: var(--vp-gray-color); } .vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label::before, .vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span::before { @@ -324,16 +331,16 @@ line-height: 16px; height: 30px; padding: 3px 7px; - color: var(--font-primary); - background: #FFFFFF; - outline-color: var(--highlight-color); - border: 0.25px solid var(--border-gray-color); + color: var(--vp-font-primary); + background: var(--vp-background-color); + outline-color: var(--vp-highlight-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; border-radius: 3px; } .vp-popup-frame input[type=text]::placeholder, .vp-popup-frame input[type=number]::placeholder { - color: var(--gray-color); + color: var(--vp-gray-color); } .vp-popup-frame select { @@ -344,12 +351,12 @@ font-size: 14px; line-height: 16px; padding: 5px 16px 3px 9px; - background: url(../../img/unfold_more.svg), var(--light-gray-color); + background: url(../../img/unfold_more.svg), var(--vp-light-gray-color); background-position: 97% 50%; background-size: 11px 11px; background-repeat: no-repeat; outline: none; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; @@ -392,16 +399,16 @@ min-height: 150px; width: 450px; height: 450px; - background-color: white; + background-color: var(--vp-background-color); z-index: 200; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); } .vp-inner-popup-header { position: relative; height: 30px; - background: var(--light-gray-color); - border-bottom: 1px solid var(--border-gray-color); + background: var(--vp-light-gray-color); + border-bottom: 1px solid var(--vp-border-gray-color); } .vp-inner-popup-title { line-height: 33px; @@ -409,7 +416,7 @@ height: 30px; padding-left: 10px; font-size: 15px; - color: var(--font-primary); + color: var(--vp-font-primary); cursor: pointer; } .vp-inner-popup-body { @@ -445,16 +452,16 @@ min-height: 370px; width: 370px; height: 370px; - background-color: white; + background-color: var(--vp-background-color); z-index: 200; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); } .vp-variable-popup-header { position: relative; height: 30px; - background: var(--light-gray-color); - border-bottom: 1px solid var(--border-gray-color); + background: var(--vp-light-gray-color); + border-bottom: 1px solid var(--vp-border-gray-color); } .vp-variable-popup-title { line-height: 33px; @@ -462,7 +469,7 @@ height: 30px; padding-left: 10px; font-size: 15px; - color: var(--font-primary); + color: var(--vp-font-primary); cursor: pointer; } .vp-variable-popup-body { @@ -500,7 +507,7 @@ display: inline-flex; } .vp-popup-body-top-bar-item:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-popup-body-top-bar-item div { -moz-box-sizing: border-box; diff --git a/visualpython/css/component/successMessage.css b/visualpython/css/component/successMessage.css index 12dcec32..6be1ac6b 100644 --- a/visualpython/css/component/successMessage.css +++ b/visualpython/css/component/successMessage.css @@ -1,7 +1,7 @@ .vp-successMessage { position: relative; - background-color: white; - color: var(--font-highlight); + background-color: var(--vp-background-color); + color: var(--vp-font-highlight); min-width: 150px; padding: 15px; margin-bottom: 20px; @@ -22,7 +22,7 @@ } .vp-successMessage-icon { margin-left: 15px; - color: var(--font-highlight); + color: var(--vp-font-highlight); /* LAB: img to background-image */ background: top / contain no-repeat url(../../img/code.svg); height: 100%; diff --git a/visualpython/css/m_apps/frame.css b/visualpython/css/m_apps/frame.css index cf833fe7..b653dd87 100644 --- a/visualpython/css/m_apps/frame.css +++ b/visualpython/css/m_apps/frame.css @@ -17,9 +17,9 @@ .vp-fe-preview { width: 100%; height: 31px; - background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ); - background-color: white; - border: 0.25px solid #E4E4E4; + background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ); + background-color: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); } .vp-fe-preview textarea { display: none; @@ -54,7 +54,7 @@ height: 19px; } .vp-fe-toolbar { - /* border-top: 1px solid var(--border-gray-color); */ + /* border-top: 1px solid var(--vp-border-gray-color); */ padding-top: 5px; } .vp-fe-toolbar-item { @@ -65,14 +65,14 @@ position: absolute; top: 0; left: 0; - background: #FFFFFF; + background: var(--vp-background-color); z-index: 70; } .vp-fe-menu-box .vp-fe-menu-item { height: 30px; line-height: 30px; - background: #FFFFFF; - border: 0.25px solid #E4E4E4; + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); border-radius: 2px; @@ -104,15 +104,15 @@ } .vp-fe-table { height: 97%; - background: var(--border-gray-color); - border: 1px solid var(--border-gray-color); + background: var(--vp-border-gray-color); + border: 1px solid var(--vp-border-gray-color); overflow: auto; } .vp-fe-table table { border-collapse: separate; margin-top: 0px; margin-left: 0px; - color: var(--font-primary); + color: var(--vp-font-primary); font-size: 13px; } .vp-fe-table table th { @@ -127,8 +127,8 @@ .vp-fe-table thead th { position: sticky; top: 0; - background: #FFFFFF; - border-bottom: 1px solid #E4E4E4; + background-color: var(--vp-background-color); + border-bottom: 1px solid var(--vp-border-gray-color); text-align: right; text-overflow: ellipsis; @@ -141,15 +141,15 @@ background: #F5F5F5; } .vp-fe-table tbody tr:nth-child(even) { - background: #FFFFFF; + background: var(--vp-background-color); } .vp-fe-table th.selected { - /* color: var(--highlight-color); */ + /* color: var(--vp-highlight-color); */ background: #add3fd; } .vp-fe-table th:hover { cursor: pointer; - /* background: var(--light-gray-color); */ + /* background: var(--vp-light-gray-color); */ /* background: rgba(66, 165, 245, 0.2); */ } @@ -184,7 +184,7 @@ height: 300px; bottom: 50px; background: #F7F7F7; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); padding: 10px; } @@ -219,7 +219,7 @@ position: absolute; bottom: 50px; background: #F7F7F7; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); padding: 10px; } /* popup page */ @@ -258,9 +258,9 @@ display: inline-block; width: calc(100% - 55px); height: 30px; - border: 1px solid var(--gray-color); + border: 1px solid var(--vp-gray-color); border-radius: 3px; - background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ); + background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ); overflow: hidden; } .vp-fr-subset-box .CodeMirror-empty { outline: none; } diff --git a/visualpython/css/m_apps/groupby.css b/visualpython/css/m_apps/groupby.css index fb3f4c48..48d2c6fd 100644 --- a/visualpython/css/m_apps/groupby.css +++ b/visualpython/css/m_apps/groupby.css @@ -29,12 +29,19 @@ } .vp-gb-adv-box { - border: 1px solid var(--border-gray-color); + border: 1px solid var(--vp-border-gray-color); padding: 10px; margin-top: 5px; height: 170px; overflow: auto; } +.vp-gb-adv-head { + +} +.vp-gb-adv-head label { + width: 160px; + font-weight: bold; +} .vp-gb-adv-item { margin-bottom: 10px; } @@ -42,6 +49,18 @@ position: relative; display: inline-block; } +.vp-gb-method-selector { + display: grid; + grid-template-rows: 75px 10px 75px 10px 35px; +} +.vp-gb-method-box { + display: grid; + grid-template-columns: 85px 85px 85px 85px; +} +.vp-gb-method-user-box { + display: grid; + grid-template-columns: 85px 85px 85px 85px; +} .vp-gb-adv-method { padding-right: 25px; } @@ -51,7 +70,7 @@ right: 7px; top: 7px; cursor: pointer; - background: white; + background: var(--vp-background-color); } .vp-gb-adv-item-delete { display: inline-block; diff --git a/visualpython/css/m_apps/import.css b/visualpython/css/m_apps/import.css index 071c84f1..7368f79f 100644 --- a/visualpython/css/m_apps/import.css +++ b/visualpython/css/m_apps/import.css @@ -2,7 +2,7 @@ width: 120px; text-align: center; display: inline-block; - border: 0.24px solid var(--border-gray-color); + border: 0.24px solid var(--vp-border-gray-color); border-radius: 3px; padding: 5px; cursor: pointer; @@ -10,6 +10,6 @@ font-size: 13px; } .vp-tab-button.vp-tab-selected { - color: var(--font-highlight); - border-bottom: 2px solid var(--highlight-color); + color: var(--vp-font-highlight); + border-bottom: 2px solid var(--vp-highlight-color); } \ No newline at end of file diff --git a/visualpython/css/m_apps/instance.css b/visualpython/css/m_apps/instance.css index def3bd30..d0a38e28 100644 --- a/visualpython/css/m_apps/instance.css +++ b/visualpython/css/m_apps/instance.css @@ -49,10 +49,10 @@ display: inline-block; width: calc(100% - 55px); height: 30px; - border: 0.25px solid var(--grid-line-color); + border: 0.25px solid var(--vp-grid-line-color); border-radius: 3px; - background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ); - background-color: white; + background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ); + background-color: var(--vp-background-color); overflow: hidden; } /* .vp-instance-box .CodeMirror.selected { diff --git a/visualpython/css/m_apps/markdown.css b/visualpython/css/m_apps/markdown.css index 1fb2fd20..451e5eae 100644 --- a/visualpython/css/m_apps/markdown.css +++ b/visualpython/css/m_apps/markdown.css @@ -3,10 +3,10 @@ width: 100%; min-height: 30px; background-color: rgb(247 247 247); - border-top: 0.25px solid #E4E4E4; - border-right: 0.25px solid #E4E4E4; + border-top: 0.25px solid var(--vp-border-gray-color); + border-right: 0.25px solid var(--vp-border-gray-color); border-bottom: none; - border-left: 0.25px solid #E4E4E4; + border-left: 0.25px solid var(--vp-border-gray-color); } .vp-markdown-editor-toolbar .vp-markdown-editor-toolbar-btn-title { background-image: url(../../img/font-size-2.svg); @@ -133,5 +133,5 @@ } .vp-divide-bot:empty::after { content: '(Nothing to preview)'; - color: var(--gray-color); + color: var(--vp-gray-color); } \ No newline at end of file diff --git a/visualpython/css/m_apps/pdf.css b/visualpython/css/m_apps/pdf.css index 205c34b8..cc0b362a 100644 --- a/visualpython/css/m_apps/pdf.css +++ b/visualpython/css/m_apps/pdf.css @@ -10,13 +10,13 @@ grid-template-columns: 50% 50%; align-items: baseline; align-content: center; - border: 1px solid #E4E4E4; + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; box-sizing: border-box; padding: 15px; } .vp-pdf-link { - color: var(--highlight-color); + color: var(--vp-highlight-color); } .vp-pdf-install-btn{ margin-left: 7px; @@ -31,7 +31,7 @@ .vp-pdf-show-box { display: grid; grid-row-gap: 10px; - border: 1px solid #E4E4E4; + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; box-sizing: border-box; padding: 15px; diff --git a/visualpython/css/m_apps/profiling.css b/visualpython/css/m_apps/profiling.css index 1994b386..4ed2aa64 100644 --- a/visualpython/css/m_apps/profiling.css +++ b/visualpython/css/m_apps/profiling.css @@ -10,13 +10,13 @@ grid-template-columns: 50% 50%; align-items: baseline; align-content: center; - border: 1px solid #E4E4E4; + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; box-sizing: border-box; padding: 15px; } .vp-pf-link { - color: var(--highlight-color); + color: var(--vp-highlight-color); } .vp-pf-install-btn{ margin-left: 7px; @@ -32,7 +32,7 @@ display: grid; /* grid-template-rows: min-content min-content; */ grid-row-gap: 10px; - border: 1px solid #E4E4E4; + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; box-sizing: border-box; padding: 15px; @@ -70,7 +70,7 @@ display: grid; grid-template-rows: 20px calc(100% - 30px); grid-row-gap: 5px; - border: 1px solid #E4E4E4; + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; box-sizing: border-box; padding: 15px; @@ -94,7 +94,7 @@ line-height: 30px; } .vp-pf-list-item:hover { - background: var(--light-gray-color); + background: var(--vp-light-gray-color); cursor: pointer; } .vp-pf-list-button-box { diff --git a/visualpython/css/m_apps/reshape.css b/visualpython/css/m_apps/reshape.css index 669537a8..e9755170 100644 --- a/visualpython/css/m_apps/reshape.css +++ b/visualpython/css/m_apps/reshape.css @@ -27,8 +27,8 @@ grid-row-gap: 5px; } .vp-rs-type-title { - /* background: var(--light-gray-color); */ - border: 1px solid var(--border-gray-color); + /* background: var(--vp-light-gray-color); */ + border: 1px solid var(--vp-border-gray-color); height: 30px; line-height: 30px; vertical-align: middle; diff --git a/visualpython/css/m_apps/snippets.css b/visualpython/css/m_apps/snippets.css index a8ac7d05..6fec35d4 100644 --- a/visualpython/css/m_apps/snippets.css +++ b/visualpython/css/m_apps/snippets.css @@ -1,6 +1,6 @@ /* UDF Editor - CodeMirror */ .vp-sn-body .CodeMirror { border: 1px solid silver; } -.vp-sn-body .CodeMirror.CodeMirror-focused { border: 1px solid var(--highlight-color); } +.vp-sn-body .CodeMirror.CodeMirror-focused { border: 1px solid var(--vp-highlight-color); } .vp-sn-body .CodeMirror-empty { outline: 1px solid #c22; } .vp-sn-body .CodeMirror-empty.CodeMirror-focused { outline: none; } .vp-sn-body .CodeMirror pre.CodeMirror-placeholder { color: #999; } @@ -81,9 +81,9 @@ width: 130px; top: 23px; right: 0px; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; - background: #FFFFFF; + background: var(--vp-background-color); padding: 5px; z-index: 5; } @@ -95,7 +95,7 @@ cursor: pointer; } .vp-sn-menu-item:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-sn-search-box { position: relative; @@ -137,8 +137,8 @@ width: 90px; /* width: 80px; height: 50px; */ - border: 0.25px solid var(--border-gray-color); - background: #FFFFFF; + border: 0.25px solid var(--vp-border-gray-color); + background: var(--vp-background-color); padding: 5px; z-index: 5; } @@ -149,7 +149,7 @@ cursor: pointer; } .vp-sn-sort-menu-item:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-sn-func-export-mode { display: none; @@ -198,7 +198,7 @@ height: 30px; line-height: 30px; padding: 0px 7px; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; cursor: pointer; } @@ -225,15 +225,15 @@ cursor: pointer; } .vp-sn-item-header.selected input.vp-sn-item-title { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-sn-item-header input.vp-sn-item-title:focus { transition: 0.7s; - border: 0.5px solid var(--highlight-color) !important; + border: 0.5px solid var(--vp-highlight-color) !important; cursor: text; } .vp-sn-imported-item { - color: var(--highlight-color); + color: var(--vp-highlight-color); } .vp-sn-item-menu { float: right; @@ -246,7 +246,7 @@ .vp-sn-item-code { display: none; position: relative; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); } .vp-sn-item-code .CodeMirror { min-height: 50px; diff --git a/visualpython/css/m_apps/subset.css b/visualpython/css/m_apps/subset.css index 2c26dec7..4fa2a8ae 100644 --- a/visualpython/css/m_apps/subset.css +++ b/visualpython/css/m_apps/subset.css @@ -12,9 +12,9 @@ .vp-ds-preview { width: 100%; height: 35px; - background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ); - background-color: white; - border: 0.25px solid #E4E4E4; + background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ); + background-color: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); } .vp-ds-preview textarea { display: none; @@ -60,7 +60,7 @@ .vp-ds-tab-selector-box { width: 100%; height: 25px; - border-bottom: 0.25px solid #E4E4E4; + border-bottom: 0.25px solid var(--vp-border-gray-color); } .vp-ds-tab-selector-btn { display: inline-block; @@ -72,9 +72,9 @@ cursor: pointer; } .vp-ds-tab-selector-btn.selected { - color: var(--font-highlight); - background-color: white; - border: 0.25px solid #E4E4E4; + color: var(--vp-font-highlight); + background-color: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); border-bottom: 2px solid #FFCF73; } @@ -89,14 +89,14 @@ grid-auto-rows: 100%; } .vp-ds-tab-page.data { - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); border-top: 0.25px solid transparent; } .vp-ds-tab-page-box { display: grid; grid-template-rows: 30px calc(100% - 30px); grid-row-gap: 5px; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); padding: 15px; } .vp-ds-tab-page-box.subset-column { @@ -162,7 +162,7 @@ .vp-ds-select-box { width: 100%; height: 100%; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); overflow-y: auto; overflow-x: hidden; } @@ -173,9 +173,9 @@ width: 100%; height: 25px; padding: 0px 10px; - border-bottom: 0.25px solid #E4E4E4; + border-bottom: 0.25px solid var(--vp-border-gray-color); line-height: 25px; - background-color: white; + background-color: var(--vp-background-color); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -185,7 +185,7 @@ background-color: #E4E4E4; } .vp-ds-select-item.selected { - color: var(--font-highlight); + color: var(--vp-font-highlight); background-color: #F5F5F5; } /* Item Sorting FIXME: change span to class */ @@ -204,8 +204,8 @@ } .vp-ds-select-btn-box button { height: 24px; - background: #FFFFFF; - border: 0.25px solid #E4E4E4; + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); grid-row-gap: 5px; margin-top: 5px; cursor: pointer; @@ -213,8 +213,8 @@ .vp-ds-btn-add-condition { width: 95px; height: 30px; - background: #FFFFFF; - border: 0.25px solid #E4E4E4; + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); border-radius: 2px; @@ -239,7 +239,7 @@ bottom: 50px; background: #F7F7F7; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); padding: 10px; } @@ -251,7 +251,7 @@ height: 300px; bottom: 50px; background: #F7F7F7; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); padding: 10px; } .vp-ds-data-title { diff --git a/visualpython/css/m_apps/sweetviz.css b/visualpython/css/m_apps/sweetviz.css new file mode 100644 index 00000000..c6db2b2a --- /dev/null +++ b/visualpython/css/m_apps/sweetviz.css @@ -0,0 +1,105 @@ +.vp-sv-grid-box { + display: grid; + width: 100%; + height: 100%; + grid-row-gap: 5px; + grid-template-rows: 185px auto; +} +.vp-sv-prepare-box { + display: grid; + grid-template-columns: 50% 50%; + align-items: baseline; + align-content: center; + border: 1px solid var(--vp-border-gray-color); + border-radius: 5px; + box-sizing: border-box; + padding: 15px; +} +.vp-sv-link { + color: var(--vp-highlight-color); +} +.vp-sv-install-btn{ + margin-left: 7px; +} +.vp-sv-check-btn { + display: inline-block; + margin-left: 5px; +} +.vp-sv-import-btn { + margin-left: 10px; +} +.vp-sv-show-box { + display: grid; + /* grid-template-rows: min-content min-content; */ + grid-row-gap: 10px; + border: 1px solid var(--vp-border-gray-color); + border-radius: 5px; + box-sizing: border-box; + padding: 15px; +} +.vp-sv-df-box { + display: grid; + grid-template-columns: 95px auto; + grid-row-gap: 3px; + align-items: baseline; + align-content: space-evenly; +} +.vp-pf #vp_pfVariable { + width: 62%; + height: 30px; +} +.vp-sv-df-refresh { + display: inline-block; + cursor: pointer; + padding-left: 4px; + /* LAB: img to background-image */ + background: center / contain no-repeat url(../../img/refresh.svg); + width: 18px; + height: 19px; +} +.vp-sv-input, .vp-sv-select { + width: 62%; +} +.vp-sv-menu-item { + width: 112px !important; + margin-left: 5px; +} + +/** List box */ +.vp-sv-list-box { + display: grid; + grid-template-rows: 20px calc(100% - 30px); + grid-row-gap: 5px; + border: 1px solid var(--vp-border-gray-color); + border-radius: 5px; + box-sizing: border-box; + padding: 15px; +} +.vp-sv-list-header { + display: grid; + grid-template-columns: 35% 35% 30%; +} +.vp-sv-list-header-item { + font-weight: bold; +} +.vp-sv-list-body { + display: grid; + grid-template-rows: 30px; + overflow: auto; +} +.vp-sv-list-item { + display: grid; + grid-template-columns: 35% 35% 30%; + border: 0; + line-height: 30px; +} +.vp-sv-list-item:hover { + background: var(--vp-light-gray-color); + cursor: pointer; +} +.vp-sv-list-button-box { + text-align: right; +} +.vp-sv-list-menu-item { + display: inline-block; +} \ No newline at end of file diff --git a/visualpython/css/m_apps/variable.css b/visualpython/css/m_apps/variable.css index 444c3407..74eb988c 100644 --- a/visualpython/css/m_apps/variable.css +++ b/visualpython/css/m_apps/variable.css @@ -3,7 +3,7 @@ } #vp_var_variableBox table tbody tr:hover, #vp_var_variableBox table tbody tr.vp-selected { - color: var(--font-highlight); + color: var(--vp-font-highlight); background-color: #F5F5F5; } #vp_var_variableBox table tbody tr td:hover { @@ -11,13 +11,13 @@ } #vp_var_variableBox table tbody:empty::after { content: '(No variables available.)'; - color: var(--highlight-color); + color: var(--vp-highlight-color); font-style: italic; } #vp_var_variableBox table thead { position: sticky; top: 0; - background: white; + background: var(--vp-background-color); } #vp_var_variableBox table td { vertical-align: middle; @@ -49,7 +49,7 @@ } #vp_varDetailTable:empty::after { content: '(Select variables to preview the data.)'; - color: var(--highlight-color); + color: var(--vp-highlight-color); font-style: italic; } #vp_varDetailTable { diff --git a/visualpython/css/m_library/libraryComponent.css b/visualpython/css/m_library/libraryComponent.css index dc745b43..9b19905b 100644 --- a/visualpython/css/m_library/libraryComponent.css +++ b/visualpython/css/m_library/libraryComponent.css @@ -25,7 +25,7 @@ /* Input & Select Design */ .vp-popup-frame .vp-input { height: 30px; - background-color: #FFFFFF; + background-color: var(--vp-background-color); box-sizing: border-box; padding: 0px 5px 0px 5px; } @@ -43,7 +43,7 @@ /* Select Option Design */ .vp-popup-frame .vp-select * { - background-color: white; + background-color: var(--vp-background-color); color: #696969; } @@ -63,7 +63,7 @@ width: 116px; } .vp-popup-frame .vp-textarea { - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); width: 100%; height: 100px; margin: 0px; diff --git a/visualpython/css/m_library/numpyComponent.css b/visualpython/css/m_library/numpyComponent.css index 3ba0f8a4..4bc6c783 100644 --- a/visualpython/css/m_library/numpyComponent.css +++ b/visualpython/css/m_library/numpyComponent.css @@ -25,7 +25,7 @@ /* Input & Select Design */ .vp-popup-frame .vp-input { height: 30px; - background-color: #FFFFFF; + background-color: var(--vp-background-color); box-sizing: border-box; padding: 0px 5px 0px 5px; } @@ -43,7 +43,7 @@ /* Select Option Design */ .vp-popup-frame .vp-select * { - background-color: white; + background-color: var(--vp-background-color); color: #696969; } @@ -63,7 +63,7 @@ width: 116px; } .vp-popup-frame .vp-textarea { - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); width: 100%; height: 100px; margin: 0px; @@ -132,7 +132,7 @@ justify-content: center; } .vp-numpy-box-border { - border: 1px solid #E4E4E4; + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; box-sizing: border-box; padding: 10px; diff --git a/visualpython/css/m_ml/fitPredict.css b/visualpython/css/m_ml/fitPredict.css index 1b63388b..2bd9d885 100644 --- a/visualpython/css/m_ml/fitPredict.css +++ b/visualpython/css/m_ml/fitPredict.css @@ -4,7 +4,7 @@ } .vp-ins-select-title { font-weight: bold; - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-ins-select-container input.vp-ins-search { width: 100%; @@ -16,7 +16,7 @@ top: 7px; } .vp-ins-select-box { - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); } .vp-ins-select-list { height: 150px; @@ -31,14 +31,14 @@ padding-top: 3px; padding-bottom: 3px; cursor: pointer; - border-bottom: 0.25px solid var(--light-gray-color); + border-bottom: 0.25px solid var(--vp-light-gray-color); } .vp-ins-select-item.selected { - color: var(--font-highlight); - background: var(--light-gray-color); + color: var(--vp-font-highlight); + background: var(--vp-light-gray-color); } .vp-ins-select-item:hover { - background: var(--light-gray-color); + background: var(--vp-light-gray-color); } .vp-ins-parameter-box { grid-column: 1/3; diff --git a/visualpython/css/m_ml/modelInfo.css b/visualpython/css/m_ml/modelInfo.css index db81a970..2975f521 100644 --- a/visualpython/css/m_ml/modelInfo.css +++ b/visualpython/css/m_ml/modelInfo.css @@ -1,6 +1,6 @@ .vp-ins-select-title { font-weight: bold; - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-ins-select-container input.vp-ins-search { width: 100%; @@ -12,7 +12,7 @@ top: 7px; } .vp-ins-select-box { - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); } .vp-ins-select-list { height: 150px; @@ -27,14 +27,14 @@ padding-top: 3px; padding-bottom: 3px; cursor: pointer; - border-bottom: 0.25px solid var(--light-gray-color); + border-bottom: 0.25px solid var(--vp-light-gray-color); } .vp-ins-select-item.selected { - color: var(--font-highlight); - background: var(--light-gray-color); + color: var(--vp-font-highlight); + background: var(--vp-light-gray-color); } .vp-ins-select-item:hover { - background: var(--light-gray-color); + background: var(--vp-light-gray-color); } .vp-ins-parameter-box { grid-column: 1/3; diff --git a/visualpython/css/m_ml/saveLoad.css b/visualpython/css/m_ml/saveLoad.css new file mode 100644 index 00000000..d50f060d --- /dev/null +++ b/visualpython/css/m_ml/saveLoad.css @@ -0,0 +1,7 @@ +.vp-popup-frame select.vp-modelio-type { + border: 2px solid #FFCF73; + width: 100%; + height: 35px; + background-position: 97% 50%; + cursor: pointer; +} \ No newline at end of file diff --git a/visualpython/css/m_visualize/chart.css b/visualpython/css/m_visualize/chart.css index 48a5f574..3458d8a9 100644 --- a/visualpython/css/m_visualize/chart.css +++ b/visualpython/css/m_visualize/chart.css @@ -8,7 +8,7 @@ display: grid; grid-template-rows: 30px; grid-row-gap: 5px; - border: 1px solid var(--border-gray-color); + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; padding: 10px 0px; } @@ -61,7 +61,7 @@ .vp-plot-cmap { width: 160px; height: 30px; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; margin-top: 5px; position: relative; @@ -89,7 +89,7 @@ left: 0; right: 0; transition: all 0.5s; - background-color: white; + background-color: var(--vp-background-color); border: 0.25px solid var(--color); opacity: 0; visibility: hidden; @@ -165,10 +165,10 @@ margin-top: 5px; } .vp-plot-item.selected .vp-plot-thumb { - border: 2px solid var(--highlight-color); + border: 2px solid var(--vp-highlight-color); } .vp-plot-item.selected .vp-plot-name { - color: var(--font-highlight) !important; + color: var(--vp-font-highlight) !important; } .vp-plot-item .vp-plot-thumb { width: 100%; @@ -176,7 +176,7 @@ background-size: contain; background-repeat: no-repeat; background-position: center center; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; } .vp-plot-item .vp-plot-thumb.plot { @@ -223,7 +223,7 @@ width: 280px; height: 260px; border: 0.25px solid #C4C4C4; - background: #FFFFFF; + background: var(--vp-background-color); color: #696969; padding: 5px; z-index: 99; @@ -243,7 +243,7 @@ cursor: pointer; } .vp-var-view-box .vp-var-view-list tbody tr.selected { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-var-view-box .var-view-footer { margin-top: 7px; @@ -263,12 +263,12 @@ .vp-method-select-item { cursor: pointer; padding: 3px; - border-bottom: 0.25px solid var(--border-gray-color); + border-bottom: 0.25px solid var(--vp-border-gray-color); } .vp-column-select-item.selected, .vp-method-select-item.selected { - color: var(--font-highlight); - background: var(--light-gray-color); + color: var(--vp-font-highlight); + background: var(--vp-light-gray-color); } /* Select Data Button */ diff --git a/visualpython/css/m_visualize/plotly.css b/visualpython/css/m_visualize/plotly.css index 74e297bd..e0d206b7 100644 --- a/visualpython/css/m_visualize/plotly.css +++ b/visualpython/css/m_visualize/plotly.css @@ -29,17 +29,17 @@ width: 85px; height: 30px; line-height: 30px; - background: var(--light-gray-color); + background: var(--vp-light-gray-color); cursor: pointer; - border: 0.24px solid #E4E4E4; + border: 0.24px solid var(--vp-border-gray-color); box-sizing: border-box; border-radius: 2px 2px 0px 0px; font-weight: bold; text-align: center; } .vp-tab-item.vp-focus { - color: var(--font-highlight); - background: white; + color: var(--vp-font-highlight); + background: var(--vp-background-color); border-bottom: 3px solid #FFCF73; } .vp-tab-page { @@ -65,7 +65,7 @@ } .vp-pt-preview-content:empty::after { content: 'No preview image'; - color: var(--gray-color); + color: var(--vp-gray-color); } .vp-pt-preview-box img { width: 100%; diff --git a/visualpython/css/m_visualize/seaborn.css b/visualpython/css/m_visualize/seaborn.css index 0f8613d8..0d7ef81f 100644 --- a/visualpython/css/m_visualize/seaborn.css +++ b/visualpython/css/m_visualize/seaborn.css @@ -1,6 +1,6 @@ .vp-chart-setting { float: right; - color: var(--gray-color); + color: var(--vp-gray-color); /* padding-top: 5px; */ padding-right: 5px; cursor: pointer; @@ -11,7 +11,7 @@ margin-top: 5px; } .vp-chart-setting:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); background-image: url(../../img/gear-solid_hover.svg); } .vp-create-subplot-btn { @@ -27,17 +27,17 @@ width: 85px; height: 30px; line-height: 30px; - background: var(--light-gray-color); + background: var(--vp-light-gray-color); cursor: pointer; - border: 0.24px solid #E4E4E4; + border: 0.24px solid var(--vp-border-gray-color); box-sizing: border-box; border-radius: 2px 2px 0px 0px; font-weight: bold; text-align: center; } .vp-tab-item.vp-focus { - color: var(--font-highlight); - background: white; + color: var(--vp-font-highlight); + background: var(--vp-background-color); border-bottom: 3px solid #FFCF73; } .vp-tab-page { @@ -88,7 +88,7 @@ } .vp-chart-preview-content:empty::after { content: 'No preview image'; - color: var(--gray-color); + color: var(--vp-gray-color); } .vp-chart-preview-box img { width: 100%; @@ -99,7 +99,7 @@ } .vp-tab-group-title { font-weight: bold; - background: var(--light-gray-color); + background: var(--vp-light-gray-color); } .vp-chart-setting-footer { position: absolute; diff --git a/visualpython/css/m_visualize/wordCloud.css b/visualpython/css/m_visualize/wordCloud.css index cceb249f..7af0e1fa 100644 --- a/visualpython/css/m_visualize/wordCloud.css +++ b/visualpython/css/m_visualize/wordCloud.css @@ -29,17 +29,17 @@ width: 85px; height: 30px; line-height: 30px; - background: var(--light-gray-color); + background: var(--vp-light-gray-color); cursor: pointer; - border: 0.24px solid #E4E4E4; + border: 0.24px solid var(--vp-border-gray-color); box-sizing: border-box; border-radius: 2px 2px 0px 0px; font-weight: bold; text-align: center; } .vp-tab-item.vp-focus { - color: var(--font-highlight); - background: white; + color: var(--vp-font-highlight); + background: var(--vp-background-color); border-bottom: 3px solid #FFCF73; } .vp-tab-page { @@ -65,7 +65,7 @@ } .vp-wc-preview-content:empty::after { content: 'No preview image'; - color: var(--gray-color); + color: var(--vp-gray-color); } .vp-wc-preview-box img { width: 100%; diff --git a/visualpython/css/mainFrame.css b/visualpython/css/mainFrame.css index 58c1104c..1ba09cda 100644 --- a/visualpython/css/mainFrame.css +++ b/visualpython/css/mainFrame.css @@ -16,12 +16,12 @@ overflow: hidden; left: unset !important; object-fit: contain; - color: var(--font-primary); + color: var(--vp-font-primary); font-family: AppleSDGothicNeo; - border: 1px solid var(--border-gray-color); + border: 1px solid var(--vp-border-gray-color); top: 110px; right: 0; - background: white; + background: var(--vp-background-color); z-index: 100; } #vp_wrapper.colab { @@ -35,14 +35,14 @@ overflow: hidden; left: unset !important; object-fit: contain; - color: var(--font-primary); + color: var(--vp-font-primary); font-family: AppleSDGothicNeo; - border: 1px solid var(--border-gray-color); + border: 1px solid var(--vp-border-gray-color); /* CHROME: edited top position */ top: 64px; /* top: 110px; */ right: 0; - background: white; + background: var(--vp-background-color); z-index: 100; } /* CHROME: set default box-sizing for vp area */ diff --git a/visualpython/css/menuFrame.css b/visualpython/css/menuFrame.css index aab1c873..ce9d7f21 100644 --- a/visualpython/css/menuFrame.css +++ b/visualpython/css/menuFrame.css @@ -24,8 +24,8 @@ height: 50px; padding: 10px; text-align: right; - background-color: #FFFFFF; - border-bottom: 1px solid var(--border-gray-color); + background-color: var(--vp-background-color); + border-bottom: 1px solid var(--vp-border-gray-color); } .vp-version-updater { display: none; @@ -33,7 +33,7 @@ position: relative; font-size: 13px; font-weight: bold; - color: var(--highlight-color); + color: var(--vp-highlight-color); margin: 8px 6px 8px 3px; cursor: pointer; } @@ -48,7 +48,7 @@ background-position: center; float: right; position: relative; - background-color: #FFFFFF; + background-color: var(--vp-background-color); z-index: 100; } .vp-menu-body { @@ -65,13 +65,13 @@ padding: 10px 0 10px 0px; position: relative; width: 100%; - background: white; + background: var(--vp-background-color); } input.vp-menu-search-box { width: calc(100% - 45px); height: 30px; - background: #FFFFFF; - border: 0.25px solid #e4e4e4; + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; box-shadow: 1px 1px 2px rgb(0 0 0 / 8%); border-radius: 2px; @@ -110,7 +110,7 @@ input.vp-menu-search-box { background-image: url(../img/toggleNote.svg); background-position: center; background-size: contain; - background-color: white; + background-color: var(--vp-background-color); border-radius: 5px; display: inline-block; } @@ -127,7 +127,7 @@ input.vp-menu-search-box { .vp-menu-footer { width: 100%; height: 50px; - border-top: 1px solid var(--border-gray-color); + border-top: 1px solid var(--vp-border-gray-color); line-height: 50px; } @@ -138,8 +138,8 @@ input.vp-menu-search-box { margin: 30px 0px 0px 0px; width: 165px; float: right; - background: #FFFFFF; - border: 0.25px solid var(--border-gray-color); + background: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 3px; box-sizing: border-box; box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); @@ -151,7 +151,7 @@ input.vp-menu-search-box { margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0px; - color: var(--font-primary); + color: var(--vp-font-primary); } #vp_headerExtraMenu .vp-header-extra-menu-list li { overflow: hidden; @@ -162,13 +162,13 @@ input.vp-menu-search-box { line-height: 20px; text-align: left; vertical-align: middle; - color: var(--font-primary); - background-color: #FFFFFF; + color: var(--vp-font-primary); + background-color: var(--vp-background-color); margin-bottom: 2px; float: none; } #vp_headerExtraMenu .vp-header-extra-menu-list li:hover { - color: var(--font-highlight); + color: var(--vp-font-highlight); } /* resizing handle */ .vp-menu-frame .ui-resizable-handle { @@ -186,14 +186,14 @@ input.vp-menu-search-box { width: 150px; margin: 2px 2px; /* LAB: img to background-image */ - background: top / contain no-repeat var(--logo-url); + background: top / contain no-repeat var(--vp-logo-url); height: 100%; } /* Menu Group */ .vp-menugroup-root { width: calc(100% - 10px); - background: var(--light-gray-color); + background: var(--vp-light-gray-color); border-radius: 3px; padding: 5px; font-size: 14px; @@ -215,7 +215,7 @@ input.vp-menu-search-box { } .vp-menugroup-box:empty::after { content: '(Empty)'; - color: var(--gray-color); + color: var(--vp-gray-color); } :not(.apps) > .vp-menugroup-box { padding-left: 8px; @@ -227,7 +227,7 @@ input.vp-menu-search-box { cursor: pointer; box-shadow: 1px 1px 1px rgb(0 0 0 / 5%); margin: 5px 0px 0px 10px; - background-color: var(--border-gray-color); + background-color: var(--vp-border-gray-color); border-radius: 3px; } @@ -267,7 +267,7 @@ input.vp-menu-search-box { background: #578BC7; } .vp-menuitem.apps.vp-color-preparing { - background: var(--gray-color); + background: var(--vp-gray-color); } .vp-menuitem.apps img { width: 25px; @@ -304,17 +304,17 @@ input.vp-menu-search-box { width: 85px; height: 30px; line-height: 30px; - background: var(--light-gray-color); + background: var(--vp-light-gray-color); margin-left: 3px; padding-left: 10px; cursor: pointer; - border: 0.24px solid #E4E4E4; + border: 0.24px solid var(--vp-border-gray-color); box-sizing: border-box; border-radius: 2px 2px 0px 0px; } .vp-menu-task-item.vp-focus{ - color: var(--font-highlight); - background: white; + color: var(--vp-font-highlight); + background: var(--vp-background-color); border-bottom: 3px solid #FFCF73; } .vp-menu-task-item .vp-menu-task-remove { @@ -380,6 +380,9 @@ input.vp-menu-search-box { .vp-menuitem.apps .apps_pdf { background: top / contain no-repeat url(../img/apps/apps_pymupdf.svg); } +.vp-menuitem.apps .apps_sweetviz { + background: top / contain no-repeat url(../img/apps/apps_profiling.svg); +} .vp-menuitem.apps .apps_profiling { background: top / contain no-repeat url(../img/apps/apps_profiling.svg); } @@ -427,6 +430,9 @@ input.vp-menu-search-box { .vp-menuitem.apps .ml_dimensionReduction { background: top / contain no-repeat url(../img/apps/apps_dimension.svg); } +.vp-menuitem.apps .ml_saveLoad { + background: top / contain no-repeat url(../img/apps/apps_file.svg); +} .vp-menuitem.apps .ml_fitPredict { background: top / contain no-repeat url(../img/apps/apps_fit.svg); } diff --git a/visualpython/css/root.css b/visualpython/css/root.css index 1dc7e25c..05f8a609 100644 --- a/visualpython/css/root.css +++ b/visualpython/css/root.css @@ -10,14 +10,15 @@ * Change Date : */ :root { - --border-gray-color: #E4E4E4; - --grid-line-color: #E4E4E4; - --light-gray-color: #F5F5F5; - --highlight-color: #F6AD55; - --gray-color: #C4C4C4; - --font-highlight: #F38504; - --font-primary: #696969; - --logo-url: url(../../visualpython/img/logo.png); + --vp-border-gray-color: #E4E4E4; + --vp-grid-line-color: #E4E4E4; + --vp-light-gray-color: #F5F5F5; + --vp-highlight-color: #F6AD55; + --vp-gray-color: #C4C4C4; + --vp-font-highlight: #F38504; + --vp-font-primary: #696969; + --vp-background-color: #FFFFFF; + --vp-logo-url: url(../../visualpython/img/logo.png); } /* Font */ /* Logo */ @@ -42,13 +43,13 @@ } /* font style */ .vp-primary { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-orange-text { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-gray-text { - color: var(--gray-color); + color: var(--vp-gray-color); } .vp-italic { font-style: italic; @@ -78,14 +79,14 @@ input.vp-input { line-height: 16px; height: 30px; padding: 3px 7px; - color: var(--font-primary); - background: #FFFFFF; - outline-color: var(--highlight-color); - border: 0.25px solid var(--border-gray-color); + color: var(--vp-font-primary); + background: var(--vp-background-color); + outline-color: var(--vp-highlight-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; } input.vp-input::placeholder { - color: var(--gray-color); + color: var(--vp-gray-color); } /* image icons */ @@ -198,7 +199,7 @@ select.vp-select { background-size: 11px 11px; background-repeat: no-repeat; outline: none; - border: 0.25px solid var(--border-gray-color); + border: 0.25px solid var(--vp-border-gray-color); border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; @@ -213,7 +214,7 @@ select.vp-select::-ms-expand { /* Select Option Design */ select.vp-select * { - background-color: white; + background-color: var(--vp-background-color); color: #696969; } @@ -238,10 +239,11 @@ select.vp-select * { /* Buttons */ input.vp-button, button.vp-button { - width: 80px; + min-width: 80px; + width: fit-content; height: 30px; - background: #FFFFFF; - border: 0.25px solid #E4E4E4; + background-color: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%); border-radius: 3px; @@ -263,41 +265,41 @@ button.vp-button { supported by Chrome, Edge, Opera and Firefox */ } .vp-button:hover { - background: #F8F8F8; + background-color: #F8F8F8; } .vp-button.cancel { - background: #E5E5E5; + background-color: #E5E5E5; border: 0px; } .vp-button.cancel:hover { - background: #DEDEDE; + background-color: #DEDEDE; } .vp-button.add { - background: #FFFFFF; + background-color: var(--vp-background-color); } .vp-button.add:hover { - background: #F8F8F8; + background-color: #F8F8F8; } .vp-button.activated { - background: #F38504; + background-color: #F38504; border: 0px; color: #FFFFFF; } .vp-button.activated:hover { - background: #EF6B10; + background-color: #EF6B10; } .vp-button.disabled, .vp-button.disabled:hover, .vp-button:disabled, .vp-button:disabled:hover { - background: #E5E5E5; + background-color: #E5E5E5; border: 0px; - border: 0.25px solid #E4E4E4; + border: 0.25px solid var(--vp-border-gray-color); color: #696969; cursor: not-allowed; } .vp-button.activated.disabled { - background: #FFC09A; + background-color: #FFC09A; color: white; } .vp-checkbox { @@ -358,7 +360,7 @@ button.vp-button { } .vp-accordian .vp-accordian-caption { font-weight: bold; - color: var(--font-primary); + color: var(--vp-font-primary); margin-left: 5px; } .vp-accordian.vp-close + .vp-accordian-box { @@ -390,50 +392,80 @@ hr.vp-extra-menu-line { margin: 5px 0px 7px 0px; } /* width style*/ -.wp100 { +#vp_wrapper .wp100, +.vp-popup-frame .wp100, +.vp-inner-popup-body .wp100 { width: 100% !important; } -.wp80 { +#vp_wrapper .wp80, +.vp-popup-frame .wp80, +.vp-inner-popup-body .wp80 { width: 80% !important; } -.wp50 { +#vp_wrapper .wp50, +.vp-popup-frame .wp50, +.vp-inner-popup-body .wp50 { width: 50% !important; } -.wp49 { +#vp_wrapper .wp49, +.vp-popup-frame .wp49, +.vp-inner-popup-body .wp49 { width: 49% !important; } -.wp5 { +#vp_wrapper .wp5, +.vp-popup-frame .wp5, +.vp-inner-popup-body .wp5 { width: 5% !important; } -.w150 { +#vp_wrapper .w150, +.vp-popup-frame .w150, +.vp-inner-popup-body .w150 { width: 150px !important; } -.w100 { +#vp_wrapper .w100, +.vp-popup-frame .w100, +.vp-inner-popup-body .w100 { width: 100px !important; } -.w80 { +#vp_wrapper .w80, +.vp-popup-frame .w80, +.vp-inner-popup-body .w80 { width: 80px !important; } -.w70 { +#vp_wrapper .w70, +.vp-popup-frame .w70, +.vp-inner-popup-body .w70 { width: 70px !important; } -.w50 { +#vp_wrapper .w50, +.vp-popup-frame .w50, +.vp-inner-popup-body .w50 { width: 50px !important; } -.w30 { +#vp_wrapper .w30, +.vp-popup-frame .w30, +.vp-inner-popup-body .w30 { width: 30px !important; } -.w10 { +#vp_wrapper .w10, +.vp-popup-frame .w10, +.vp-inner-popup-body .w10 { width: 10px !important; } /* temporary margin */ -.mt5 { +#vp_wrapper .mt5, +.vp-popup-frame .mt5, +.vp-inner-popup-body .mt5 { margin-top: 5px; } -.mb5 { +#vp_wrapper .mb5, +.vp-popup-frame .mb5, +.vp-inner-popup-body .mb5 { margin-bottom: 5px; } -.mr5 { +#vp_wrapper .mr5, +.vp-popup-frame .mr5, +.vp-inner-popup-body .mr5 { margin-right: 5px; } /* Layout */ @@ -449,7 +481,7 @@ hr.vp-extra-menu-line { display: grid; align-items: baseline; align-content: center; - border: 1px solid var(--border-gray-color); + border: 1px solid var(--vp-border-gray-color); border-radius: 5px; box-sizing: border-box; padding: 15px; @@ -497,7 +529,7 @@ hr.vp-extra-menu-line { /* width: 100%; */ border-collapse: collapse; table-layout: fixed; - color: var(--font-primary); + color: var(--vp-font-primary); } .vp-option-vertical-table-layout th { min-width: 130px; @@ -508,7 +540,7 @@ hr.vp-extra-menu-line { padding: 2px 5px 2px 16px; } .vp-option-vertical-table-layout.vp-th-highlight th { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-option-vertical-table-layout td { min-width: 200px; @@ -524,7 +556,7 @@ hr.vp-extra-menu-line { width: 100%; border-collapse: collapse; table-layout: fixed; - color: var(--font-primary); + color: var(--vp-font-primary); } .vp-option-horizontal-table-layout th { min-width: 150px; @@ -535,7 +567,7 @@ hr.vp-extra-menu-line { padding: 2px 5px 2px 5px; } .vp-option-horizontal-table-layout.vp-th-highlight th { - color: var(--font-highlight); + color: var(--vp-font-highlight); } .vp-option-horizontal-table-layout td { min-width: 200px; @@ -562,7 +594,7 @@ hr.vp-extra-menu-line { cursor: pointer; } .vp-vs-box input:disabled { - background: var(--light-gray-color) !important; + background-color: var(--vp-light-gray-color) !important; cursor: not-allowed; } .vp-vs-box input:disabled + .vp-vs-filter { @@ -572,7 +604,7 @@ hr.vp-extra-menu-line { display: none; position: absolute; width: 101px; - background: #FFFFFF; + background-color: var(--vp-background-color); border: 0.25px solid #C4C4C4; box-sizing: border-box; box-shadow: 2px 2px 8px rgb(0 0 0 / 10%); @@ -580,16 +612,16 @@ hr.vp-extra-menu-line { padding: 5px; } .vp-vs-item:hover { - background: var(--light-gray-color); - color: var(--font-highlight); + background-color: var(--vp-light-gray-color); + color: var(--vp-font-highlight); cursor: pointer; } /* Data error box */ .vp-data-error-box { margin: 7px; padding: 10px; - background: #FFFFFF; - border: 0.25px solid #E4E4E4; + background-color: var(--vp-background-color); + border: 0.25px solid var(--vp-border-gray-color); box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); border-radius: 2px; } @@ -601,14 +633,14 @@ hr.vp-extra-menu-line { font-weight: bold; } .vp-data-error-box pre { - background: #eeeeee; + background-color: #eeeeee; margin: 0px; padding: 7px; } /* suggest input hover items */ .vp-sg-item:hover { - background: var(--light-gray-color); - color: var(--font-highlight); + background-color: var(--vp-light-gray-color); + color: var(--vp-font-highlight); cursor: pointer; } @@ -620,31 +652,39 @@ hr.vp-extra-menu-line { height: auto; background: none; } -.cm-s-ipython span.cm-comment { +#vp_wrapper .cm-s-ipython span.cm-comment, +.vp-popup-frame .cm-s-ipython span.cm-comment{ color: #007979; font-style: italic; } -.cm-s-ipython span.cm-operator { +#vp_wrapper .cm-s-ipython span.cm-operator, +.vp-popup-frame .cm-s-ipython span.cm-operator{ color: #AA22FF; font-weight: bold; } -.cm-s-ipython span.cm-variable { +#vp_wrapper .cm-s-ipython span.cm-variable, +.vp-popup-frame .cm-s-ipython span.cm-variable { color: #000; } -.cm-s-ipython span.cm-string { +#vp_wrapper .cm-s-ipython span.cm-string, +.vp-popup-frame .cm-s-ipython span.cm-string { color: #BA2121; } -.cm-s-ipython span.cm-number { +#vp_wrapper .cm-s-ipython span.cm-number, +.vp-popup-frame .cm-s-ipython span.cm-number { color: #080; } -.cm-s-ipython span.cm-keyword { +#vp_wrapper .cm-s-ipython span.cm-keyword, +.vp-popup-frame .cm-s-ipython span.cm-keyword { color: #008000; font-weight: bold; } -.cm-s-ipython span.cm-def { +#vp_wrapper .cm-s-ipython span.cm-def, +.vp-popup-frame .cm-s-ipython span.cm-def { color: #00f; } -.cm-s-ipython span.cm-builtin { +#vp_wrapper .cm-s-ipython span.cm-builtin, +.vp-popup-frame .cm-s-ipython span.cm-builtin { color: #008000; } diff --git a/visualpython/data/libraries.json b/visualpython/data/libraries.json index 5cd63821..e2ac6ef9 100644 --- a/visualpython/data/libraries.json +++ b/visualpython/data/libraries.json @@ -3051,14 +3051,14 @@ } }, { - "id" : "apps_profiling", + "id" : "apps_sweetviz", "type" : "function", "level": 1, - "name" : "Profiling", - "tag" : "PROFILING,PANDAS PROFILING,APPS", - "path" : "visualpython - apps - profiling", - "desc" : "Pandas Profiling", - "file" : "m_apps/Profiling", + "name" : "Sweetviz", + "tag" : "SWEETVIZ,APPS", + "path" : "visualpython - apps - sweetviz", + "desc" : "Sweetviz", + "file" : "m_apps/Sweetviz", "apps" : { "color": 4, "icon": "apps/apps_profiling.svg" @@ -3285,6 +3285,20 @@ "icon": "apps/apps_dimension.svg" } }, + { + "id" : "ml_saveLoad", + "type" : "function", + "level": 1, + "name" : "Save/Load", + "tag" : "SAVE,LOAD,MACHINE LEARNING,ML", + "path" : "visualpython - machine_learning - save_load", + "desc" : "Model save/load for machine learning", + "file" : "m_ml/SaveLoad", + "apps" : { + "color": 8, + "icon": "apps/apps_file.svg" + } + }, { "id" : "ml_fitPredict", "type" : "function", diff --git a/visualpython/data/m_library/pythonLibrary.js b/visualpython/data/m_library/pythonLibrary.js index 2407ee5a..cdccd56b 100644 --- a/visualpython/data/m_library/pythonLibrary.js +++ b/visualpython/data/m_library/pythonLibrary.js @@ -877,18 +877,21 @@ define([ { name: 'i0', label: 'Select File', - component: ['file'], + component: ['file-open'], required: true }, { name: 'o0', - label: 'Allocate to' + label: 'Allocate to', + output: true }, { name: 'mode', label: 'Mode', usePair: true, - component: ['option_select'] + component: ['option_suggest'], + type: 'text', + options: ['r', 'w', 'a'] }, { name: 'buffering', @@ -906,7 +909,7 @@ define([ placeholder: 'encoding option' }, { - name: 'error', + name: 'errors', label: 'Errors', usePair: true, component: ['option_suggest'], diff --git a/visualpython/data/m_ml/mlLibrary.js b/visualpython/data/m_ml/mlLibrary.js index 054af1b8..1b1ce5d5 100644 --- a/visualpython/data/m_ml/mlLibrary.js +++ b/visualpython/data/m_ml/mlLibrary.js @@ -21,14 +21,14 @@ define([ */ var ML_LIBRARIES = { /** Data Sets */ - 'load_boston': { - name: 'load_boston', - import: 'from sklearn.datasets import load_boston', - code: 'load_boston()', - options: [ + // 'load_boston': { + // name: 'load_boston', + // import: 'from sklearn.datasets import load_boston', + // code: 'load_boston()', + // options: [ - ] - }, + // ] + // }, 'load_iris': { name: 'load_iris', import: 'from sklearn.datasets import load_iris', @@ -649,6 +649,25 @@ define([ { name: 'learning_rate', component: ['input_number'], default: 200.0, usePair: true }, { name: 'random_state', component: ['input_number'], placeholder: '123', usePair: true } ] + }, + /** Save/Load */ + 'model_save': { + name: 'Save model', + import: 'import joblib', + code: "joblib.dump(${target}, ${savePath}${etc})", + options: [ + { name: 'target', component: ['data_select'], placeholder: 'Select model'}, + { name: 'savePath', component: ['file-save'], placeholder: 'Select path'} + ] + }, + 'model_load': { + name: 'Load model', + import: 'import joblib', + code: "${allocateTo} = joblib.load(${loadPath}${etc})", + options: [ + { name: 'loadPath', component: ['file-open'], placeholder: 'Select path'}, + { name: 'allocateTo', component: ['data_select'], placeholder: 'New variable to load'} + ] } } diff --git a/visualpython/html/m_apps/groupby.html b/visualpython/html/m_apps/groupby.html index 324227fe..12743a2c 100644 --- a/visualpython/html/m_apps/groupby.html +++ b/visualpython/html/m_apps/groupby.html @@ -24,7 +24,7 @@
- +
@@ -35,6 +35,11 @@
diff --git a/visualpython/html/m_apps/sweetviz.html b/visualpython/html/m_apps/sweetviz.html new file mode 100644 index 00000000..f4b7f6ba --- /dev/null +++ b/visualpython/html/m_apps/sweetviz.html @@ -0,0 +1,55 @@ + +
+ +
+
+ +
+ + + +
+ +
+
+ + + +
+ +
+
+ + + +
+ + +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ \ No newline at end of file diff --git a/visualpython/html/m_ml/saveLoad.html b/visualpython/html/m_ml/saveLoad.html new file mode 100644 index 00000000..1ed41f06 --- /dev/null +++ b/visualpython/html/m_ml/saveLoad.html @@ -0,0 +1,13 @@ + +
+ +
+
+ +
+
+
+ \ No newline at end of file diff --git a/visualpython/js/MainFrame.js b/visualpython/js/MainFrame.js index f013ed66..b7601fee 100644 --- a/visualpython/js/MainFrame.js +++ b/visualpython/js/MainFrame.js @@ -135,7 +135,7 @@ define([ let vpWidth = $('#vp_wrapper')[0].getBoundingClientRect().width; let vpHeight = $(window).height() - jupyterHeadHeight; - $('#vp_wrapper').css( { height: vpHeight + 'px' }); + $('#vp_wrapper').css( { height: vpHeight + 'px', top: jupyterHeadHeight + 'px' }); this._resizeNotebook(vpWidth); } else if (vpConfig.extensionType === 'colab') { let colabHeaderVisible = $('#header').is(':visible'); diff --git a/visualpython/js/com/com_Config.js b/visualpython/js/com/com_Config.js index 28f3f853..346e0f15 100644 --- a/visualpython/js/com/com_Config.js +++ b/visualpython/js/com/com_Config.js @@ -168,6 +168,10 @@ define([ code: 'from pandas_profiling import ProfileReport', type: 'package' }, + 'sweetviz': { + code: 'import sweetviz', + type: 'package' + }, 'px': { code: 'import plotly.express as px\nfrom plotly.offline import init_notebook_mode\ninit_notebook_mode(connected=True)', type: 'package' @@ -187,6 +191,10 @@ define([ 'Counter': { code: 'from collections import Counter', type: 'package' + }, + 'joblib': { + code: 'import joblib', + type: 'package' } } @@ -923,7 +931,7 @@ define([ /** * Version */ - Config.version = "2.3.3"; + Config.version = "2.3.4"; /** * Type of mode diff --git a/visualpython/js/com/com_Const.js b/visualpython/js/com/com_Const.js index a37f2591..8315ca65 100644 --- a/visualpython/js/com/com_Const.js +++ b/visualpython/js/com/com_Const.js @@ -19,7 +19,7 @@ define ([ class Constants { } Constants.TOOLBAR_BTN_INFO = { - HELP: "Visual Python 2.3.3" + HELP: "Visual Python 2.3.4" , ICON: "vp-main-icon" , ID: "vpBtnToggle" , NAME: "toggle-vp" diff --git a/visualpython/js/com/com_Kernel.js b/visualpython/js/com/com_Kernel.js index 489554d0..d7a468f2 100644 --- a/visualpython/js/com/com_Kernel.js +++ b/visualpython/js/com/com_Kernel.js @@ -250,30 +250,12 @@ define([ var kernelConnection = that.getLabKernel(); if (kernelConnection) { var future = kernelConnection.requestExecute(codeObj); - future.onIOPub = (msg) => { + var onIOPub = function(msg) { const msgType = msg.header.msg_type; switch(msgType) { case 'status': - // if(!isExpectingOutput){ - // if(msg.content.execution_state === 'idle'){ - // resolve(); - // } - // } return; case 'execute_input': - // var content = msg.content; - // resolve({ - // result: content, - // type: type, - // msg: { - // content: { - // name: type, - // data: { - // [type]: content - // } - // } - // } - // }); return; case 'stream': var content = msg.content; @@ -303,10 +285,24 @@ define([ reject({status: 'error', ename: 'Unknown stream type', evalue: message}); } break; - case 'error': - //stderr does not yield output for all errors - // var message = msg.content.ename + '\n' + msg.content.evalue; - reject({status: 'error', ename: msg.content.ename, evalue: msg.content.evalue}); + case 'error': + // check if it has a problem on restarting vp inner function + // ex) "name '_vp_print' is not defined" + if (msg.content.ename === 'NameError' + && msg.content.evalue.includes('_vp_') + && msg.content.evalue.includes('is not defined')) { + // restart vp + vpConfig.readKernelFunction().then(function() { + // re-try executing code + vpLog.display(VP_LOG_TYPE.LOG, 'Re-try executing code after restarting vp...'); + var future2 = kernelConnection.requestExecute(codeObj); + future2.onIOPub = onIOPub; + }).catch(function(err) { + reject({status: 'error', ename: msg.content.ename, evalue: msg.content.evalue}); + }); + } else { + reject({status: 'error', ename: msg.content.ename, evalue: msg.content.evalue}); + } break; case 'execute_result': var type = 'text'; @@ -383,7 +379,150 @@ define([ }; return; - }; + } + future.onIOPub = onIOPub; + // future.onIOPub = (msg) => { + // const msgType = msg.header.msg_type; + // switch(msgType) { + // case 'status': + // // if(!isExpectingOutput){ + // // if(msg.content.execution_state === 'idle'){ + // // resolve(); + // // } + // // } + // return; + // case 'execute_input': + // // var content = msg.content; + // // resolve({ + // // result: content, + // // type: type, + // // msg: { + // // content: { + // // name: type, + // // data: { + // // [type]: content + // // } + // // } + // // } + // // }); + // return; + // case 'stream': + // var content = msg.content; + // var type = content.name; + // switch(type){ + // case 'stdout': + // var message = content.text; + // resolve({ + // result: message, + // type: type, + // msg: { + // content: { + // name: type, + // data: { + // [type]: message + // } + // } + // } + // }); + // break; + // case 'stderr': + // var message = content.text; + // reject({status: 'stderr', ename: 'stderr', evalue: message}); + // break; + // default: + // var message = '[jupyterLabTerminal]: Unknown stream type ' + type; + // reject({status: 'error', ename: 'Unknown stream type', evalue: message}); + // } + // break; + // case 'error': + // //stderr does not yield output for all errors + // // var message = msg.content.ename + '\n' + msg.content.evalue; + // // check if it has a problem on restarting vp inner function + // // ex) "name '_vp_print' is not defined" + // if (msg.content.ename === 'NameError' + // && msg.content.evalue.includes('_vp_') + // && msg.content.evalue.includes('is not defined')) { + // // restart vp + // vpConfig.readKernelFunction(); + // } + // reject({status: 'error', ename: msg.content.ename, evalue: msg.content.evalue}); + // break; + // case 'execute_result': + // var type = 'text'; + // if (msg.content) { + // try { + // if (msg.content['text']) { + // result = String(msg.content['text']); + // type = 'text'; + // } else if (msg.content.data) { + // if (msg.content.data['image/png']) { + // result = String(msg.content.data['image/png']); + // type = 'image/png'; + // } else 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'; + // } + // } + // resolve({result: result, type: type, msg: msg}); + // } catch(ex) { + // reject(ex); + // } + // } else { + // resolve({result: result, type: type, msg: msg}); + // } + // break; + // case 'display_data': + // var type = 'text'; + // if (msg.content) { + // try { + // if (msg.content['text']) { + // result = String(msg.content['text']); + // type = 'text'; + // } else if (msg.content.data) { + // if (msg.content.data['image/png']) { + // result = String(msg.content.data['image/png']); + // type = 'image/png'; + // } else 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'; + // } + // } + // resolve({result: result, type: type, msg: msg}); + // } catch(ex) { + // reject(ex); + // } + // } else { + // resolve({result: result, type: type, msg: msg}); + // } + // break; + // case 'update_display_data': + // var result = msg.content; + // resolve({ + // result: result, + // type: msgType, + // msg: { + // content: { + // name: msgType, + // data: { + // [msgType]: result + // } + // } + // } + // }); + // break; + // default: + // var message = '[jupyterLabTerminal]: Unknown message type ' + msgType; + // reject({status: 'error', ename: 'Unknown message type', evalue: message}); + + // }; + // return; + // }; } } @@ -591,6 +730,19 @@ define([ }) }); } + + getSweetvizList() { + var that = this; + return new Promise(function(resolve, reject) { + that.execute('_vp_print(_vp_get_sweetviz_list())') + .then(function(resultObj) { + resolve(resultObj); + }).catch(function(err) { + // reject + reject(err); + }) + }); + } getProfilingList() { var that = this; diff --git a/visualpython/js/com/com_generatorV2.js b/visualpython/js/com/com_generatorV2.js index 6113af7b..dd19b769 100644 --- a/visualpython/js/com/com_generatorV2.js +++ b/visualpython/js/com/com_generatorV2.js @@ -13,8 +13,9 @@ define([ 'vp_base/js/com/com_makeDom', 'vp_base/js/com/component/SuggestInput', 'vp_base/js/com/component/VarSelector2', - 'vp_base/js/com/component/DataSelector' -], function (com_util, com_makeDom, SuggestInput, VarSelector2, DataSelector) { + 'vp_base/js/com/component/DataSelector', + 'vp_base/js/com/component/FileNavigation' +], function (com_util, com_makeDom, SuggestInput, VarSelector2, DataSelector, FileNavigation) { /** * show result after code executed */ @@ -41,7 +42,9 @@ define([ 'textarea': 'Input textarea', 'input_number': 'Input number', 'input_text': 'Input text', - 'input': 'Input value' + 'input': 'Input value', + 'file_save': 'Select file', + 'file_load': 'Select file' } const _VP_BOOL_OPTIONS = [ @@ -431,10 +434,86 @@ define([ } content = input; break; + case 'file-save': + var input = $('').attr({ + type: 'text', + class: 'vp-input input-single vp-state', + id: obj.name, + placeholder: (obj.placeholder==undefined?'Input Data':obj.placeholder), + value: (obj.default==undefined?'':obj.default), + title: (obj.help==undefined?'':obj.help), + required: obj.required == true + }); + // cell metadata test + if (value != undefined) { + // set as saved value + $(input).attr({ + 'value': value + }); + } + var fileBrowerButton = $(`
`); + var div = $('
'); + div.append(input); + div.append(fileBrowerButton); + + $(document).off('click', pageThis.wrapSelector(`.vp-file-browser-button[data-parent="${obj.name}"]`)); + $(document).on('click', pageThis.wrapSelector(`.vp-file-browser-button[data-parent="${obj.name}"]`), function() { + let fileNavi = new FileNavigation({ + type: 'save', + extensions: (obj.fileExtension==undefined?[]:[obj.fileExtension]), + finish: function(filesPath, status, error) { + let {file, path} = filesPath[0]; + + // set text + $(pageThis.wrapSelector('#' + obj.name)).data('file', file); + $(pageThis.wrapSelector('#' + obj.name)).val(path); + } + }); + fileNavi.open(); + }); + content = div; + break; + case 'file-open': + var input = $('').attr({ + type: 'text', + class: 'vp-input input-single vp-state', + id: obj.name, + placeholder: (obj.placeholder==undefined?'Input Data':obj.placeholder), + value: (obj.default==undefined?'':obj.default), + title: (obj.help==undefined?'':obj.help), + required: obj.required == true + }); + // cell metadata test + if (value != undefined) { + // set as saved value + $(input).attr({ + 'value': value + }); + } + var fileBrowerButton = $(`
`); + var div = $('
'); + div.append(input); + div.append(fileBrowerButton); + + $(document).off('click', pageThis.wrapSelector(`.vp-file-browser-button[data-parent="${obj.name}"]`)); + $(document).on('click', pageThis.wrapSelector(`.vp-file-browser-button[data-parent="${obj.name}"]`), function() { + let fileNavi = new FileNavigation({ + type: 'open', + extensions: (obj.fileExtension==undefined?[]:[obj.fileExtension]), + finish: function(filesPath, status, error) { + let {file, path} = filesPath[0]; + + // set text + $(pageThis.wrapSelector('#' + obj.name)).data('file', file); + $(pageThis.wrapSelector('#' + obj.name)).val(path); + } + }); + fileNavi.open(); + }); + content = div; + break; case 'table': // break; - case 'file': - // break; // default : input_single default: var input = $('').attr({ @@ -615,8 +694,9 @@ define([ case 'dtype': value = $(pageThis.wrapSelector(parent + ' #'+obj.name)).val(); break; + case 'file-open': + case 'file-save': case 'table': - case 'file': case 'option_select': case 'option_suggest': case 'input_number': @@ -656,7 +736,8 @@ define([ code = code.split(id).join(''); } else { // text quotation - if (v.type == 'text') { + if (v.type == 'text' + || (v.component != undefined && (v.component.includes('file-open') || v.component.includes('file-save')))) { val = "'"+val+"'"; } // code completion diff --git a/visualpython/js/com/com_interface.js b/visualpython/js/com/com_interface.js index 20a02d48..877e232f 100644 --- a/visualpython/js/com/com_interface.js +++ b/visualpython/js/com/com_interface.js @@ -32,7 +32,7 @@ define([ * @param {boolean} exec true(default) / false * @param {int} sigNum */ - var insertCell = function(type, command, exec=true, sigText='') { + var insertCell = async function(type, command, exec=true, sigText='') { // Add signature if (type == 'code') { if (sigText !== '') { @@ -106,6 +106,7 @@ define([ // CHROME: TODO: } else if (vpConfig.extensionType === 'lab') { var { NotebookActions } = require('@jupyterlab/notebook'); + var { signalToPromise } = require('@jupyterlab/coreutils'); var notebookPanel = vpKernel.getLabNotebookPanel(); if (notebookPanel && notebookPanel.sessionContext){ var sessionContext = notebookPanel.sessionContext; @@ -122,7 +123,6 @@ define([ notebookModel.cells.insert(newCellIndex, cellModel); notebook.activeCellIndex = newCellIndex; - var cell = notebook.activeCell; if (exec == true) { try{ NotebookActions.run(notebook, sessionContext); @@ -131,10 +131,7 @@ define([ } } // move to executed cell - let activeCell = notebookPanel.content.activeCell; - let activeCellTop = $(activeCell.node).position().top; - // scroll to current cell top - $(notebookPanel.layout.widgets[2].node).animate({scrollTop: activeCellTop},"fast"); + $(vpKernel.getLabNotebookPanel().content.activeCell.node)[0].scrollIntoView(true); } else if (sessionType === 'console') { var labConsole = notebookPanel.content; var widget = labConsole.widgets[0]; @@ -156,7 +153,6 @@ define([ com_util.renderAlertModal('Visual Python only supports Notebook and Console type. Please use appropriate type of file to use it.'); } } - com_util.renderSuccessMessage('Your code is successfully generated.'); } @@ -268,7 +264,6 @@ define([ var console = notebookPanel.content; var cellModel = console.contentFactory.createCell(type, {}); cellModel.value.text = command; - } } else { // No session found @@ -287,8 +282,8 @@ define([ // LAB: TODO: let activeCell = notebookPanel.content.activeCell; let activeCellTop = $(activeCell.node).position().top; - // scroll to current cell top - $(notebookPanel.layout.widgets[2].node).animate({scrollTop: activeCellTop},"fast"); + // scroll to current cell + $(vpKernel.getLabNotebookPanel().content.activeCell.node)[0].scrollIntoView(true); } com_util.renderSuccessMessage('Your code is successfully generated.'); diff --git a/visualpython/js/com/component/FileNavigation.js b/visualpython/js/com/component/FileNavigation.js index aa37362f..ad06869c 100644 --- a/visualpython/js/com/component/FileNavigation.js +++ b/visualpython/js/com/component/FileNavigation.js @@ -250,7 +250,7 @@ define([ let extension = name.substring(name.lastIndexOf('.') + 1); let allowExtensionList = that.state.extensions; // if it is not allowed extension - if (!allowExtensionList.includes(extension)) { + if (allowExtensionList.length > 0 && !allowExtensionList.includes(extension)) { // TODO: alert //vpCommon.renderAlertModal('Not supported file type'); return; @@ -404,9 +404,13 @@ define([ page.appendFormatLine('' , 'vp_fileNavigationInput', 'New File Name', this.state.fileName); page.appendFormatLine(''); page.appendFormatLine('', 'vp-filenavi-btn', 'select', 'Select'); $('.fileNavigationPage-button').html(page.toString()); @@ -426,6 +430,9 @@ define([ // select file let { fileName, filePath } = that.state; let selectedExt = $(that.wrapSelector('#vp_fileNavigationExt')).val(); + if (selectedExt == undefined || selectedExt == null) { + selectedExt = ''; + } let fileExtIdx = fileName.lastIndexOf('.'); // if no extension, add it if (selectedExt != '' && (fileExtIdx < 0 || fileName.substring(fileExtIdx + 1) != selectedExt)) { diff --git a/visualpython/js/com/component/PopupComponent.js b/visualpython/js/com/component/PopupComponent.js index 8e6cf32c..4f71e2cb 100644 --- a/visualpython/js/com/component/PopupComponent.js +++ b/visualpython/js/com/component/PopupComponent.js @@ -530,7 +530,8 @@ define([ template() { this.$pageDom = $(popupComponentHtml.replaceAll('${vp_base}', com_Const.BASE_PATH)); // set title - this.$pageDom.find('.vp-popup-title').text(this.name); + // this.$pageDom.find('.vp-popup-title').text(this.category + ' > ' + this.name); + this.$pageDom.find('.vp-popup-title').html(`${this.category} > ${this.name}`); // set body let bodyTemplate = this.templateForBody(); // CHROME: check url keyword and replace it diff --git a/visualpython/js/m_apps/Frame.js b/visualpython/js/m_apps/Frame.js index 75d081c7..364ccd17 100644 --- a/visualpython/js/m_apps/Frame.js +++ b/visualpython/js/m_apps/Frame.js @@ -1434,7 +1434,7 @@ define([ // add column // LAB: img to url // table.appendFormatLine('', VP_FE_ADD_COLUMN, com_Const.IMAGE_PATH + 'plus.svg'); - table.appendFormatLine('', VP_FE_ADD_COLUMN, 'vp-icon-plus'); + table.appendFormatLine('
', VP_FE_ADD_COLUMN, 'vp-icon-plus'); table.appendLine(''); table.appendLine(''); @@ -1467,7 +1467,7 @@ define([ table.appendLine(''); // LAB: img to url // table.appendFormatLine('', VP_FE_ADD_ROW, com_Const.IMAGE_PATH + 'plus.svg'); - table.appendFormatLine('', VP_FE_ADD_ROW, 'vp-icon-plus'); + table.appendFormatLine('
', VP_FE_ADD_ROW, 'vp-icon-plus'); table.appendLine(''); table.appendLine(''); $(that.wrapSelector('.' + VP_FE_TABLE)).replaceWith(function() { diff --git a/visualpython/js/m_apps/Groupby.js b/visualpython/js/m_apps/Groupby.js index 3636393e..c62ccd9a 100644 --- a/visualpython/js/m_apps/Groupby.js +++ b/visualpython/js/m_apps/Groupby.js @@ -64,18 +64,18 @@ define([ ] this.methodList = [ - { label: 'None', value: '' }, - { label: 'count', value: 'count' }, - { label: 'first', value: 'first' }, - { label: 'last', value: 'last' }, - { label: 'size', value: 'size' }, - { label: 'std', value: 'std' }, - { label: 'sum', value: 'sum' }, - { label: 'max', value: 'max' }, - { label: 'mean', value: 'mean' }, - { label: 'median', value: 'median' }, - { label: 'min', value: 'min' }, - { label: 'quantile', value: 'quantile' }, + // { label: 'None', value: '' }, + { label: 'count', value: "'count'" }, + { label: 'first', value: "'first'" }, + { label: 'last', value: "'last'" }, + { label: 'size', value: "'size'" }, + { label: 'std', value: "'std'" }, + { label: 'sum', value: "'sum'" }, + { label: 'max', value: "'max'" }, + { label: 'mean', value: "'mean'" }, + { label: 'median', value: "'median'" }, + { label: 'min', value: "'min'" }, + { label: 'quantile', value: "'quantile'" }, ] this.state = { @@ -92,6 +92,8 @@ define([ advPageDom: '', advColList: [], + advMethodList: [], + advMethodUserList: [], advNamingList: [], ...this.state }; @@ -184,7 +186,9 @@ define([ // display select button event $(document).on('click', this.wrapSelector('#vp_gbDisplay'), function() { - that.openColumnSelector($(that.wrapSelector('#vp_gbDisplay')), 'Select columns to display'); + // exclude groupby columns + let excludeList = that.state.groupby.map(x => x.code); + that.openColumnSelector($(that.wrapSelector('#vp_gbDisplay')), 'Select columns to display', [], excludeList); }); // method select event @@ -276,33 +280,71 @@ define([ if (includeList && includeList.length > 0) { includeList = includeList.map(col => col.code); } - that.openColumnSelector($(this).parent().find('.vp-gb-adv-col'), 'Select columns', includeList); + // exclude groupby columns + let excludeList = that.state.groupby.map(x => x.code); + that.openColumnSelector($(this).parent().find('.vp-gb-adv-col'), 'Select columns', includeList, excludeList); }); // select method - $(document).on('change', this.wrapSelector('.vp-gb-adv-method-selector'), function() { - var method = $(this).val(); - var parentDiv = $(this).parent(); - if (method == 'typing') { - // change it to typing input - $(parentDiv).find('.vp-gb-adv-method-selector').hide(); - $(parentDiv).find('.vp-gb-adv-method').val(''); - $(parentDiv).find('.vp-gb-adv-method-box').show(); - } else { - $(parentDiv).find('.vp-gb-adv-method').val(com_util.formatString("'{0}'", method)); - } + $(document).on('click', this.wrapSelector('.vp-gb-adv-method'), function() { + // var method = $(this).val(); + // var parentDiv = $(this).parent(); + // if (method == 'typing') { + // // change it to typing input + // $(parentDiv).find('.vp-gb-adv-method-selector').hide(); + // $(parentDiv).find('.vp-gb-adv-method').val(''); + // $(parentDiv).find('.vp-gb-adv-method-box').show(); + // } else { + // $(parentDiv).find('.vp-gb-adv-method').val(com_util.formatString("'{0}'", method)); + // } + that.openMethodSelector($(this).parent().find('.vp-gb-adv-method'), 'Select methods'); }); // return to selecting method - $(document).on('click', this.wrapSelector('.vp-gb-adv-method-return'), function() { - var defaultValue = ''; - var parentDiv = $(this).parent().parent(); - $(parentDiv).find('.vp-gb-adv-method-selector').val(defaultValue); - $(parentDiv).find('.vp-gb-adv-method').val(defaultValue); - // show and hide - $(parentDiv).find('.vp-gb-adv-method-selector').show(); - $(parentDiv).find('.vp-gb-adv-method-box').hide(); + // $(document).on('click', this.wrapSelector('.vp-gb-adv-method-return'), function() { + // var defaultValue = ''; + // var parentDiv = $(this).parent().parent(); + // $(parentDiv).find('.vp-gb-adv-method-selector').val(defaultValue); + // $(parentDiv).find('.vp-gb-adv-method').val(defaultValue); + // // show and hide + // $(parentDiv).find('.vp-gb-adv-method-selector').show(); + // $(parentDiv).find('.vp-gb-adv-method-box').hide(); + // }); + // advanced item - method change event + $(document).on('change', this.wrapSelector('.vp-gb-adv-method'), function(event) { + var { list, userList } = event; + var idx = $(that.wrapSelector('.vp-gb-adv-method')).index(this); + that.state.advMethodList[idx] = list; + that.state.advMethodUserList[idx] = userList; + }); + + // advanced item - user method add event + $(document).on('click', this.wrapSelector('#vp_gbMethodUserAdd'), function(event) { + let userMethod = $(that.wrapSelector('#vp_gbMethodUser')).val(); + let useText = $(that.wrapSelector('#vp_gbMethodUserAsText')).prop('checked'); + let userCode = userMethod; + if (useText) { + userCode = "'" + userMethod + "'"; + } + that._addUserMethod(userCode); + }); + + // advanced item - user method add event by enter + $(document).on('keyup', this.wrapSelector('#vp_gbMethodUser'), function(event) { + var keycode = event.keyCode + ? event.keyCode + : event.which; + if (keycode == 13) { // enter + let userMethod = $(this).val(); + let useText = $(that.wrapSelector('#vp_gbMethodUserAsText')).prop('checked'); + let userCode = userMethod; + if (useText) { + userCode = "'" + userMethod + "'"; + } + that._addUserMethod(userCode); + } }); + // advanced item - naming change event $(document).on('change', this.wrapSelector('.vp-gb-adv-naming'), function(event) { @@ -318,8 +360,10 @@ define([ if (columns && columns.length > 0) { columns = columns.map(col => col.code); } - var method = $(parentDiv).find('.vp-gb-adv-method').val(); - if (!method || method == '' || method == "''") { + var method = $(parentDiv).find('.vp-gb-adv-method').data('list'); + var userMethod = $(parentDiv).find('.vp-gb-adv-method').data('userList'); + method = [ ...method, ...userMethod ]; + if (method == undefined || method.length <= 0) { // set focus on selecting method tag $(parentDiv).find('.vp-gb-adv-method').focus(); return; @@ -335,6 +379,20 @@ define([ }); } + _addUserMethod(userMethod) { + var addedMethodTag = $(this.wrapSelector(`.vp-gb-method-user-func[value="${userMethod}"]`)); + if (addedMethodTag.length > 0) { + // already added + addedMethodTag.prop('checked', true); + $(this.wrapSelector('#vp_gbMethodUser')).val(''); + return; + } + $(`