visualpython · minjk-bl · May 2, 2023 · Apr 7, 2023 · Apr 10, 2023 · Apr 6, 2023
diff --git a/build.sh b/build.sh
@@ -11,8 +11,8 @@
 #=============================================================================
 # Set version and replace it
 #=============================================================================
-VP_ORG_VER=2.3.4
-VP_NEW_VER=2.3.5
+VP_ORG_VER=2.3.5
+VP_NEW_VER=2.3.6
 
 # 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
@@ -11,8 +11,8 @@
 #=============================================================================
 # Replace Version
 #=============================================================================
-VP_ORG_VER=2.3.4
-VP_NEW_VER=2.3.5
+VP_ORG_VER=2.3.5
+VP_NEW_VER=2.3.6
 
 # update version info
 # update manifest version with new numbering for new version

diff --git a/colab/manifest.json b/colab/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Visual Python for Colab",
     "description": "GUI-based Python code generator for Google Colab as an extension",
-    "version": "2.3.5",
+    "version": "2.3.6",
     "manifest_version": 3,
     "icons": {
         "48": "icon.png",

diff --git a/jupyterlab/build.jupyterlab.sh b/jupyterlab/build.jupyterlab.sh
@@ -11,8 +11,8 @@
 #=============================================================================
 # Replace Version and Basic Files
 #=============================================================================
-VP_ORG_VER=2.3.4
-VP_NEW_VER=2.3.5
+VP_ORG_VER=2.3.5
+VP_NEW_VER=2.3.6
 
 # 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
diff --git a/jupyterlab/package.json b/jupyterlab/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jupyterlab-visualpython",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "description": "GUI-based Python code generator for Jupyter Lab as an extension",
   "keywords": [
     "jupyter",

diff --git 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.5"
+version = "2.3.6"
 
 [project.license]
 file = "LICENSE"
@@ -92,7 +92,7 @@ file = [
 ]
 
 [tool.tbump.version]
-current = "2.3.5"
+current = "2.3.6"
 regex = "(?P<major>\\d+)\\.(?P<minor>\\d+)\\.(?P<patch>\\d+)((?P<channel>a|b|rc|.dev)(?P<release>\\d+))?"
 
 [tool.tbump.git]

diff --git a/jupyternotebook/build.jupyternotebook.sh b/jupyternotebook/build.jupyternotebook.sh
@@ -11,8 +11,8 @@
 #=============================================================================
 # Replace Version and Basic Files
 #=============================================================================
-VP_ORG_VER=2.3.4
-VP_NEW_VER=2.3.5
+VP_ORG_VER=2.3.5
+VP_NEW_VER=2.3.6
 
 # update version info
 grep -REil ${VP_ORG_VER//\./\\.} setup.py visualpython/js/com/com_Config.js visualpython/js/com/com_Const.js | xargs sed -i --follow-symlinks "s/${VP_ORG_VER//\./\\.}/${VP_NEW_VER}/g"

diff --git a/jupyternotebook/setup.py b/jupyternotebook/setup.py
@@ -10,7 +10,7 @@
 
 setup(
     name             = name,
-    version          = '2.3.5',
+    version          = '2.3.6',
     packages         = find_packages(),
     package_data     = {"": ["*"], 'visualpython' : ['visualpython.yaml', 'README.md']},
     scripts          = ['visualpython/bin/visualpy', 'visualpython/bin/visualpy.bat'],

diff --git a/visualpython/css/component/popupComponent.css b/visualpython/css/component/popupComponent.css
@@ -17,7 +17,7 @@
     min-height: 400px;
     width: 400px;
     height: 400px;
-    background: var(--vp-background-color);
+    background-color: 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%);
@@ -81,6 +81,24 @@
     font-family: 'AppleSDGothicNeo';
     color: var(--vp-font-highlight);
 }
+.vp-popup-docs {
+    position: absolute;
+    width: 15px;
+    height: 20px;
+    top: 4px;
+    right: 85px;
+    z-index: 3;
+    line-height: 20px;
+    text-align: center;
+    cursor: pointer;
+    color: var(--vp-gray-color);
+}
+.vp-popup-docs > div {
+    width: 20px;
+    height: 20px;
+    /* LAB: img to background-image */
+    background: center / contain no-repeat url(../../img/docs.svg);
+}
 .vp-popup-maximize {
     position: absolute;
     width: 15px;
@@ -342,6 +360,11 @@
 .vp-popup-frame input[type=number]::placeholder {
 	color: var(--vp-gray-color);
 }
+.vp-popup-frame input[type=text]:disabled,
+.vp-popup-frame input[type=number]:disabled {
+	background-color: var(--vp-light-gray-color);
+    cursor: not-allowed;
+}
 
 .vp-popup-frame select {
     width: 160px;

diff --git a/visualpython/css/m_apps/frame.css b/visualpython/css/m_apps/frame.css
@@ -9,7 +9,8 @@
     /* grid-template-rows: 35px 30px 60% calc(40% - 80px); */
     /* grid-template-rows: 35px 30px calc(100% - 80px); */
     /* grid-template-rows: 35px 65px calc(100% - 110px); */
-    grid-template-rows: 35px 65px 35px calc(100% - 145px);
+    /* grid-template-rows: 35px 65px 35px calc(100% - 145px); */
+    grid-template-rows: 65px 30px calc(100% - 115px);
     grid-template-columns: 100%;
 }
 
@@ -55,11 +56,22 @@
 }
 .vp-fe-toolbar {
     /* border-top: 1px solid var(--vp-border-gray-color); */
-    padding-top: 5px;
+    /* padding-top: 5px; */
 }
 .vp-fe-toolbar-item {
-    width: 100px;
-    margin-right: 5px;
+    width: 50px;
+    height: 50px;
+    /* margin-right: 5px; */
+    display: inline-block;
+    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;
+    line-height: 40px;
+    vertical-align: middle;
+    cursor: pointer;
+    padding: 5px;
+    text-align: center;
 }
 .vp-fe-menu-box {
     position: absolute;
@@ -234,6 +246,10 @@
 .vp-inner-popup-addtype {
     width: 153px;
 }
+.vp-inner-popup-delete-value {
+    display: inline-block;
+    cursor: pointer;
+}
 .vp-inner-popup-delete {
     padding-bottom: 20px;
 }
@@ -249,6 +265,27 @@
 .vp-inner-popup-apply-column {
     width: 153px;
 }
+.vp-inner-popup-sortby {
+    border: 0.25px solid var(--vp-border-gray-color);
+    width: 160px;
+    padding: 5px;
+    min-height: 180px;
+}
+.vp-inner-popup-sortby-item {
+    border-bottom: 0.25px solid var(--vp-border-gray-color);
+    padding: 3px;
+    cursor: pointer;
+    height: 30px;
+}
+.vp-inner-popup-sortby-up {
+    float: right;
+    display: inline-block;
+}
+.vp-inner-popup-sortby-down {
+    float: right;
+    display: inline-block;
+
+}
 
 /* UDF Editor - CodeMirror */
 .vp-fr-subset-box {
@@ -281,5 +318,6 @@
 
 .vp-fr-subset-box .vp-ds-button {
     width: 50px;
+    min-width: 50px;
     vertical-align: top;
 }
diff --git a/visualpython/css/m_apps/information.css b/visualpython/css/m_apps/information.css
@@ -0,0 +1,143 @@
+#vp_varDetailTable:empty::after {
+    content: '(Select variables to preview the data.)';
+    color: var(--vp-highlight-color);
+    font-style: italic;
+}
+#vp_varDetailTable {
+    width: 100%;
+    height: 300px;
+    overflow: auto;
+}
+
+.vp-information-body {
+    display: grid;
+    grid-template-columns: calc(50% - 8px) calc(50% - 8px);
+    grid-template-rows: 100%;
+    grid-row-gap: 5px;
+    grid-column-gap: 15px;
+    align-items: baseline;
+    align-content: baseline;
+    height: 100%;
+}
+.vp-information-left-box, 
+.vp-information-right-box {
+    height: 100%;
+}
+.vp-information-left-box {
+    display: grid;
+    grid-template-rows: 30px 10px 30px calc(100% - 75px);
+}
+.vp-information-toolbox {
+    height: 30px;
+}
+/* dropdown menu */
+.vp-dropdown {
+    position: relative;
+    display: inline-block;
+}
+.vp-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: var(--vp-background-color);
+    min-width: 100px;
+    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
+    z-index: 1;
+}
+.vp-dropdown-content .vp-dropdown-item {
+    height: 30px;
+    line-height: 30px;
+    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;
+    font-size: 13px;
+    text-align: left;
+    color: var(--vp-font-primary);
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    text-overflow: ellipsis;
+    /* overflow: hidden; */
+    white-space: nowrap;
+    padding: 0px 5px;
+}
+.vp-dropdown-content .vp-dropdown-item:not(.disabled):not(.selected):hover {
+    background-color: var(--vp-border-gray-color);
+}
+.vp-dropdown:not(.disabled):hover .vp-dropdown-content {
+    display: block;
+}
+.vp-dropdown:not(.disabled):hover .vp-drop-button:not(.selected) {
+    background-color: var(--vp-border-gray-color);
+}
+.vp-drop-button.selected,
+.vp-dropdown-content .vp-dropdown-item.selected {
+    background-color: var(--vp-highlight-color);
+    color: var(--vp-background-color);
+}
+.vp-drop-button {
+    background-color: var(--vp-background-color);
+    color: var(--vp-font-primary);
+    padding: 5px 7px;
+    border: 0.25px solid var(--vp-border-gray-color);
+    cursor: pointer;
+    height: 30px;
+    font-size: 13px;
+}
+.vp-variable-preview {
+    margin-top: 5px;
+    align-content: baseline;
+}
+.vp-variable-preview thead th {
+    cursor: pointer;
+}
+.vp-variable-preview thead th.selected {
+    background-color: var(--vp-highlight-color);
+    color: var(--vp-background-color);
+}
+.vp-information-preview-header {
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 5px;
+}
+.vp-information-run-button {
+    display: inline-block;
+    width: 80px;
+    height: 30px;
+    line-height: 20px;
+    background: var(--vp-highlight-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;
+    padding: 5px 10px;
+    font-size: 13px;
+    vertical-align: middle;
+    text-align: center;
+    color: white;
+    float: right;
+    cursor: pointer;
+}
+.vp-information-preview-box {
+    min-height: 352px;
+    width: 100%;
+    height: calc(100% - 40px);
+    grid-template-rows: 25px 10px calc(100% - 35px);
+    grid-row-gap: 0px;
+}
+.vp-information-preview-content:empty::after {
+    content: 'No preview data';
+    color: var(--vp-gray-color);
+}
+.vp-information-preview-content { 
+    align-content: baseline;
+}
+.vp-information-preview-box img {
+    width: 100%;
+    height: 100%;
+}
diff --git a/visualpython/css/m_apps/instance.css b/visualpython/css/m_apps/instance.css
@@ -11,6 +11,7 @@
 .vp-instance-left-box, 
 .vp-instance-right-box {
     height: 100%;
+    align-content: baseline;
 }
 .vp-instance-base {
     display: grid;
@@ -115,7 +116,11 @@
 .vp-instance-preview-box {
     min-height: 352px;
     width: 100%;
-    height: calc(100% - 30px);
+    height: 400px;
+    min-height: calc(100% - 50px);
+}
+.vp-instance-preview-content {
+    height: 100%;
 }
 .vp-instance-preview-content:empty::after {
     content: 'No preview data';