KDS-547: Tokenization of Python scripting – Temporary Values Panel

Author: senemdilli

org.knime.python3.scripting.nodes/js-src/src/components/PythonWorkspace.vue

@@ -2,7 +2,7 @@
 import { type Ref, onMounted, onUnmounted, ref } from "vue";
 import { useDebounceFn, useResizeObserver } from "@vueuse/core";
 
-import { Button } from "@knime/components";
+import { KdsButton } from "@knime/kds-components";
 
 import {
   getPythonInitialData,
@@ -18,11 +18,12 @@ import PythonWorkspaceHeader, {
 const resizeContainer = ref<HTMLElement | null>(null);
 const totalWidth: Ref<number> = ref(0);
 const headerWidths = ref<ColumnSizes>([100, 100, 100]);
+const paddingAroundTable = 8;
 
 const useTotalWidth = () => {
   const rootResizeCallback = useDebounceFn((entries) => {
     const rect = entries[0].contentRect;
-    totalWidth.value = rect.width;
+    totalWidth.value = rect.width - paddingAroundTable * 2;
   });
   const resizeObserver = useResizeObserver(resizeContainer, rootResizeCallback);
 
@@ -75,15 +76,16 @@ onMounted(() => {
       </table>
     </div>
     <div class="controls">
-      <Button
+      <KdsButton
         class="reset-button"
-        :with-border="false"
-        compact
+        label="Reset Values"
+        leading-icon="reset-all"
+        variant="transparent"
         :disabled="!resetButtonEnabled"
         @click="resetWorkspace"
       >
         Reset values
-      </Button>
+      </KdsButton>
     </div>
   </div>
 </template>
@@ -94,19 +96,20 @@ onMounted(() => {
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  background-color: var(--knime-gray-ultra-light);
 }
 
 .workspace {
   --controls-height: 40px;
 
   position: relative;
   min-width: 120px;
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x) 0 var(--kds-spacing-container-0-5x);
   margin-top: 0;
   overflow: hidden auto;
 
   & table {
     flex: 1;
+    max-width: 100%;
     height: calc(100% - var(--controls-height));
     font-family: "Roboto Mono", sans-serif;
     font-size: 13px;
@@ -121,17 +124,12 @@ onMounted(() => {
   display: flex;
   flex-direction: row-reverse;
   place-content: center space-between;
-  min-height: var(--controls-height);
-  max-height: var(--controls-height);
+  align-items: center;
+  height: var(--kds-dimension-component-height-2-25x);
+  padding-right: var(--kds-spacing-container-0-25x);
+  padding-left: var(--kds-spacing-container-0-25x);
   overflow: hidden;
-  border-top: 1px solid var(--knime-silver-sand);
-}
-
-.reset-button {
-  height: 30px;
-  margin-top: 5px;
-  margin-right: 10px;
-  margin-bottom: 5px;
+  border-top: var(--kds-border-base-subtle);
 }
 </style>
 @/python-initial-data-service

org.knime.python3.scripting.nodes/js-src/src/components/PythonWorkspaceBody.vue

@@ -52,14 +52,18 @@ tbody {
   & tr {
     display: flex;
     color: var(--knime-dove-gray);
-    border-bottom: 1px solid var(--knime-porcelain);
 
     &:hover {
       color: var(--knime-masala);
       cursor: pointer;
+      background-color: var(--kds-color-background-neutral-hover);
+      border-radius: var(--kds-border-radius-container-0-25x);
     }
 
     & td {
+      height: var(--kds-dimension-component-height-1-5x);
+      padding-right: var(--kds-spacing-container-0-25x);
+      padding-left: var(--kds-spacing-container-0-25x);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -69,6 +73,8 @@ tbody {
         margin: 6px;
         overflow: hidden;
         text-overflow: ellipsis;
+        font: var(--kds-font-base-interactive-small);
+        color: var(--kds-color-text-and-icon-neutral);
       }
     }
   }

org.knime.python3.scripting.nodes/js-src/src/components/PythonWorkspaceHeader.vue

@@ -204,18 +204,20 @@ const onPointerMove = (event: { clientX: number }) => {
 
 <style lang="postcss" scoped>
 thead {
-  position: sticky;
-  top: 0;
-  width: calc(100% - 15px);
+  display: contents;
   font-weight: 500;
   line-height: 15px;
   text-align: left;
   letter-spacing: 0;
-  table-layout: fixed;
-  background-color: var(--knime-porcelain);
+  border-bottom: var(--kds-border-base-subtle);
 
   & tr {
+    position: sticky;
+    top: 0;
     display: flex;
+    height: var(--kds-spacing-container-1-5x);
+    padding-right: var(--kds-spacing-container-0-25x);
+    padding-left: var(--kds-spacing-container-0-25x);
 
     & th {
       display: flex;
@@ -229,6 +231,8 @@ thead {
         margin: 0 5px;
         overflow: hidden;
         text-overflow: ellipsis;
+        font: var(--kds-font-base-interactive-small-strong);
+        color: var(--kds-color-text-and-icon-neutral);
       }
 
       & .drag-handle {