Merge branch 'main' into remove-read-file-contents

iterative · Feb 2, 2023 · 801067b · 801067b
2 parents a9e99bc + 9415287
commit 801067b
Show file tree

Hide file tree

Showing 8 changed files with 510 additions and 495 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.6.1] - 2023-02-02
+
+### 🐛 Bug Fixes
+
+- Fix table/plots not updating correctly on windows [#3191](https://github.com/iterative/vscode-dvc/pull/3191) by [@julieg18](https://github.com/julieg18)
+- Fix minor table bugs [#3192](https://github.com/iterative/vscode-dvc/pull/3192) by [@julieg18](https://github.com/julieg18)
+
 ## [0.6.0] - 2023-02-01
 
 ### 🚀 New Features and Enhancements

diff --git a/extension/package.json b/extension/package.json
@@ -9,7 +9,7 @@
   "extensionDependencies": [
     "vscode.git"
   ],
-  "version": "0.6.0",
+  "version": "0.6.1",
   "license": "Apache-2.0",
   "readme": "./README.md",
   "repository": {
@@ -1600,7 +1600,7 @@
     "vscode-languageclient": "8.0.2"
   },
   "devDependencies": {
-    "@swc/core": "1.3.28",
+    "@swc/core": "1.3.29",
     "@swc/jest": "0.2.24",
     "@types/chai": "4.3.4",
     "@types/chai-as-promised": "7.1.5",

diff --git a/languageServer/package.json b/languageServer/package.json
@@ -25,7 +25,7 @@
     "test": "jest --collect-coverage"
   },
   "devDependencies": {
-    "@swc/core": "1.3.28",
+    "@swc/core": "1.3.29",
     "@swc/jest": "0.2.24",
     "@types/jest": "29.4.0",
     "clean-webpack-plugin": "4.0.0",

diff --git a/webview/package.json b/webview/package.json
@@ -39,16 +39,16 @@
     "vega-lite": "^5.6.0"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.5.15",
-    "@storybook/addon-interactions": "6.5.15",
-    "@storybook/addons": "6.5.15",
-    "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/manager-webpack5": "6.5.15",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-interactions": "6.5.16",
+    "@storybook/addons": "6.5.16",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.15",
+    "@storybook/react": "6.5.16",
     "@storybook/testing-library": "0.0.13",
     "@svgr/cli": "6.5.1",
-    "@swc/core": "1.3.28",
+    "@swc/core": "1.3.29",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",

diff --git a/webview/src/experiments/components/table/TableBody.tsx b/webview/src/experiments/components/table/TableBody.tsx
@@ -72,7 +72,10 @@ export const TableBody: React.FC<
         <tbody>
           <tr className={cx(styles.tr, styles.previousCommitsRow)}>
             <td className={styles.th}>Previous Commits</td>
-            <td colSpan={row.getAllCells().length - 1}></td>
+            <td
+              className={styles.th}
+              colSpan={row.getAllCells().length - 1}
+            ></td>
           </tr>
         </tbody>
       )}

diff --git a/webview/src/experiments/components/table/header/TableHeaderCell.tsx b/webview/src/experiments/components/table/header/TableHeaderCell.tsx
@@ -51,6 +51,7 @@ const getHeaderPropsArgs = (
         [styles.paramHeaderCell]: columnWithGroup.group === ColumnType.PARAMS,
         [styles.metricHeaderCell]: columnWithGroup.group === ColumnType.METRICS,
         [styles.depHeaderCell]: columnWithGroup.group === ColumnType.DEPS,
+        [styles.createdHeaderCell]: header.id === 'Created',
         [styles.firstLevelHeader]: isFirstLevelHeader(header.column.id),
         [styles.leafHeader]: header.subHeaders === undefined,
         [styles.menuEnabled]: sortEnabled,

diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss
@@ -56,6 +56,29 @@ $bullet-size: calc(var(--design-unit) * 4px);
   }
 }
 
+%cellBorderLeft {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 100%;
+  top: 0;
+  background-color: transparent;
+}
+
+%headerCellBorderBottom {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  top: auto;
+  left: 1px;
+  width: 100%;
+  height: 1px;
+  display: block;
+  background-color: $header-border-color;
+}
+
 .hidden {
   visibility: hidden;
 }
@@ -263,7 +286,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
     width: fit-content;
 
     &:hover.rowSelected {
-      &:after {
+      &::after {
         box-shadow: inset 0 0 20px $shadow;
         content: '';
         top: 0;
@@ -275,42 +298,30 @@ $bullet-size: calc(var(--design-unit) * 4px);
         pointer-events: none;
       }
 
-      td:not(.experimentCell):hover .innerCell,
-      td:hover .timestampInnerCell,
-      td:hover + td .innerCell,
-      td:hover + td .timestampInnerCell {
-        border-left-color: $row-border-selected-color;
+      td:not(.experimentCell):hover::before,
+      td:hover + td::before {
+        background-color: $row-border-selected-color;
       }
     }
 
-    &:hover:not(.rowSelected),
-    &.rowFocused:not(.rowSelected) {
-      :not(.experimentCell) {
-        .innerCell,
-        .timestampInnerCell {
-          border-right-color: $border-color;
-        }
-      }
-
-      .experimentCell + td {
-        .innerCell,
-        .timestampInnerCell {
-          border-left-color: $border-color;
-        }
-      }
-
+    &:hover:not(.rowSelected) {
       td:not(.experimentCell),
       .experimentCell::before {
         background-color: $row-hover-background-color;
       }
+
+      td:not(.experimentCell):hover::before,
+      td:hover + td::before {
+        background-color: $border-color;
+      }
     }
 
     > *:first-child {
       position: sticky;
       left: 0;
       z-index: 3;
 
-      &:after {
+      &::after {
         content: '';
         height: 100%;
         position: absolute;
@@ -320,20 +331,6 @@ $bullet-size: calc(var(--design-unit) * 4px);
         transition: box-shadow 0.25s;
       }
 
-      &.headerCell,
-      &.placeholderHeaderCell {
-        > div::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: -2px;
-          width: 1px;
-          height: 100%;
-          background-color: $header-border-color;
-          display: block;
-        }
-      }
-
       &.headerCell {
         &::after {
           bottom: auto;
@@ -342,15 +339,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
         }
 
         &::before {
-          content: '';
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          height: 1px;
-          background-color: $header-border-color;
-          display: block;
-          top: auto;
+          @extend %headerCellBorderBottom;
         }
       }
     }
@@ -540,10 +529,8 @@ $bullet-size: calc(var(--design-unit) * 4px);
     line-height: 2rem;
     align-items: center;
 
-    .innerCell,
-    .timestampInnerCell {
-      border-right: 1px solid transparent;
-      border-left: 1px solid transparent;
+    &:not(.experimentCell)::before {
+      @extend %cellBorderLeft;
     }
 
     &:first-child {
@@ -558,10 +545,8 @@ $bullet-size: calc(var(--design-unit) * 4px);
       }
     }
   }
-  .experimentCell {
-    border-right: none;
-    border-left: none;
 
+  .experimentCell {
     .innerCell {
       display: flex;
       flex-flow: row nowrap;
@@ -609,12 +594,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
     }
 
     &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -2px;
-      height: 100%;
-      width: 1px;
+      @extend %cellBorderLeft;
       background-color: $header-border-color;
     }
 
@@ -633,7 +613,7 @@ $bullet-size: calc(var(--design-unit) * 4px);
       content: '';
       position: absolute;
       bottom: 0;
-      left: 0;
+      left: 1px;
       width: 100%;
       height: 1px;
       background-color: $header-border-color;
@@ -649,6 +629,10 @@ $bullet-size: calc(var(--design-unit) * 4px);
       outline-style: dashed;
       outline-color: $header-dnd-outline;
       outline-offset: -4px;
+
+      .iconMenu ul[role='menu'] {
+        background-color: transparent;
+      }
     }
   }
 
@@ -663,6 +647,16 @@ $bullet-size: calc(var(--design-unit) * 4px);
     .th {
       font-size: 0.6rem;
       padding-left: 16px;
+
+      &::before {
+        display: none;
+      }
+    }
+
+    &:hover {
+      .th:not(.experimentCell) {
+        background: $bg-color;
+      }
     }
   }
 }
@@ -869,11 +863,21 @@ $bullet-size: calc(var(--design-unit) * 4px);
   @extend %truncateLeftChild;
   font-size: 0.7em;
 }
+
 .timestampTime {
   @extend %truncateLeftChild;
   font-size: 0.9em;
 }
 
+.createdHeaderCell .iconMenu {
+  left: auto;
+  right: 0;
+
+  ul[role='menu'] {
+    margin: 0 4px 0 0;
+  }
+}
+
 .timestampHeader {
   @extend %headerCellPadding;
   overflow-x: hidden;
@@ -946,7 +950,7 @@ $badge-size: 0.85rem;
 }
 
 .experimentCell {
-  &:before {
+  &::before {
     content: '';
     top: 0;
     right: 0;