Merge branch 'main' into ask-for-less-revisions

extension/package.json

@@ -1554,7 +1554,7 @@
     "vscode-languageclient": "8.0.2"
   },
   "devDependencies": {
-    "@swc/core": "1.3.6",
+    "@swc/core": "1.3.7",
     "@swc/jest": "0.2.23",
     "@types/chai": "4.3.3",
     "@types/chai-as-promised": "7.1.5",

extension/src/experiments/columns/collect/util.ts

@@ -34,7 +34,7 @@ export const limitAncestorDepth = (
 } => {
   const [path, ...rest] = ancestors
   const collectedLimit = Number(
-    getConfigValue(ConfigKey.EXP_TABLE_HEAD_MAX_DEPTH, limit)
+    getConfigValue(ConfigKey.EXP_TABLE_HEAD_MAX_HEIGHT, limit)
   )
 
   switch (collectedLimit) {

extension/src/experiments/index.ts

@@ -132,7 +132,7 @@ export class Experiments extends BaseRepository<TableData> {
 
     this.dispose.track(
       workspace.onDidChangeConfiguration((event: ConfigurationChangeEvent) => {
-        if (event.affectsConfiguration(ConfigKey.EXP_TABLE_HEAD_MAX_DEPTH)) {
+        if (event.affectsConfiguration(ConfigKey.EXP_TABLE_HEAD_MAX_HEIGHT)) {
           this.cliData.update()
         }
       })

extension/src/experiments/webview/messages.ts

@@ -186,7 +186,7 @@ export class WebviewMessages {
       return
     }
 
-    setConfigValue(ConfigKey.EXP_TABLE_HEAD_MAX_DEPTH, Number(newValue))
+    setConfigValue(ConfigKey.EXP_TABLE_HEAD_MAX_HEIGHT, Number(newValue))
     sendTelemetryEvent(
       EventName.VIEWS_EXPERIMENTS_TABLE_SET_MAX_HEADER_HEIGHT,
       undefined,

extension/src/test/suite/experiments/index.test.ts

@@ -173,11 +173,11 @@ suite('Experiments Test Suite', () => {
   })
 
   describe('handleMessageFromWebview', () => {
-    after(() => {
+    after(() =>
       workspace
-        .getConfiguration(ConfigKey.EXP_TABLE_HEAD_MAX_DEPTH)
-        .update('', undefined, false)
-    })
+        .getConfiguration()
+        .update(ConfigKey.EXP_TABLE_HEAD_MAX_HEIGHT, undefined, false)
+    )
 
     const setupExperimentsAndMockCommands = () => {
       const {
@@ -891,7 +891,7 @@ suite('Experiments Test Suite', () => {
       const { experiments } = buildExperiments(disposable, expShowFixture)
       const inputEvent = getInputBoxEvent('0')
       const tableMaxDepthChanged = configurationChangeEvent(
-        ConfigKey.EXP_TABLE_HEAD_MAX_DEPTH,
+        ConfigKey.EXP_TABLE_HEAD_MAX_HEIGHT,
         disposable
       )
 
@@ -907,7 +907,7 @@ suite('Experiments Test Suite', () => {
       await tableMaxDepthChanged
 
       expect(
-        workspace.getConfiguration().get(ConfigKey.EXP_TABLE_HEAD_MAX_DEPTH)
+        workspace.getConfiguration().get(ConfigKey.EXP_TABLE_HEAD_MAX_HEIGHT)
       ).to.equal(0)
       expect(mockSendTelemetryEvent).to.be.called
       expect(

extension/src/vscode/config.ts

@@ -5,7 +5,7 @@ export enum ConfigKey {
   DO_NOT_SHOW_CLI_UNAVAILABLE = 'dvc.doNotShowCliUnavailable',
   DO_NOT_SHOW_WALKTHROUGH_AFTER_INSTALL = 'dvc.doNotShowWalkthroughAfterInstall',
   DO_NOT_SHOW_UNABLE_TO_FILTER = 'dvc.doNotShowUnableToFilter',
-  EXP_TABLE_HEAD_MAX_DEPTH = 'dvc.experimentsTableHeadMaxHeight',
+  EXP_TABLE_HEAD_MAX_HEIGHT = 'dvc.experimentsTableHeadMaxHeight',
   DVC_PATH = 'dvc.dvcPath',
   PYTHON_PATH = 'dvc.pythonPath'
 }

languageServer/package.json

@@ -24,13 +24,13 @@
     "format": "prettier --write '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'",
     "lint:prettier": "prettier -c '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'",
     "lint:eslint": "eslint --cache '**/*.{js,ts,jsx,tsx}'",
-    "lint:tsc": "tsc --noEmit",
+    "lint:compile": "webpack --mode development",
     "lint": "run-p 'lint:*'",
     "dev": "webpack watch --mode development",
     "test": "jest --collect-coverage"
   },
   "devDependencies": {
-    "@swc/core": "1.3.6",
+    "@swc/core": "1.3.7",
     "@swc/jest": "0.2.23",
     "@types/jest": "29.1.2",
     "clean-webpack-plugin": "4.0.0",

webview/package.json

@@ -6,7 +6,7 @@
     "format": "prettier --write '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'",
     "lint:prettier": "prettier -c '**/*.{js,json,jsx,md,scss,ts,tsx,yaml,yml}'",
     "lint:eslint": "eslint --cache '**/*.{js,ts,jsx,tsx}'",
-    "lint:tsc": "tsc --noEmit",
+    "lint:compile": "webpack --mode development",
     "lint": "run-p 'lint:*'",
     "dev": "webpack watch --mode development",
     "build": "webpack --mode production",
@@ -49,7 +49,7 @@
     "@storybook/react": "6.5.12",
     "@storybook/testing-library": "0.0.13",
     "@svgr/cli": "6.4.0",
-    "@swc/core": "1.3.6",
+    "@swc/core": "1.3.7",
     "@swc/jest": "0.2.23",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",

webview/src/experiments/components/App.test.tsx

@@ -737,19 +737,14 @@ describe('App', () => {
       jest.useRealTimers()
     })
 
-    it('should open on left click', () => {
+    it('should not open on left click', () => {
       renderTableWithoutRunningExperiments()
 
       const paramsFileHeader = screen.getByText('params.yaml')
       fireEvent.click(paramsFileHeader, { bubbles: true })
 
       jest.advanceTimersByTime(100)
-      const menuitems = screen.getAllByRole('menuitem')
-      const itemLabels = menuitems.map(item => item.textContent)
-      expect(itemLabels).toStrictEqual([
-        'Open to the Side',
-        'Set Max Header Height'
-      ])
+      expect(screen.queryAllByRole('menuitem')).toHaveLength(0)
     })
 
     it('should open on right click and close on esc', () => {

webview/src/experiments/components/table/Table.test.tsx

@@ -18,7 +18,7 @@ import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React from 'react'
 import { TableInstance } from 'react-table'
 import tableDataFixture from 'dvc/src/test/fixtures/expShow/tableData'
-import { SortOrder } from './TableHeader'
+import { SortOrder } from './header/TableHeader'
 import { Table } from './Table'
 import styles from './styles.module.scss'
 import { ExperimentsTable } from '../Experiments'

webview/src/experiments/components/table/Table.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState, CSSProperties } from 'react'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import styles from './styles.module.scss'
-import { TableHead } from './TableHead'
+import { TableHead } from './header/TableHead'
 import { InstanceProp, RowProp } from './interfaces'
 import { RowSelectionContext } from './RowSelectionContext'
 import { TableBody } from './TableBody'

webview/src/experiments/components/table/MergeHeaderGroups.tsx → webview/src/experiments/components/table/header/MergeHeaderGroups.tsx

@@ -3,8 +3,8 @@ import cx from 'classnames'
 import { Experiment, Column } from 'dvc/src/experiments/webview/contract'
 import { HeaderGroup } from 'react-table'
 import { TableHeader } from './TableHeader'
-import styles from './styles.module.scss'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
+import styles from '../styles.module.scss'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
 
 export const MergedHeaderGroups: React.FC<{
   headerGroup: HeaderGroup<Experiment>

webview/src/experiments/components/table/TableHead.tsx → webview/src/experiments/components/table/header/TableHead.tsx

@@ -3,17 +3,16 @@ import React, { DragEvent, useRef, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { HeaderGroup, TableInstance } from 'react-table'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
-import styles from './styles.module.scss'
 import { MergedHeaderGroups } from './MergeHeaderGroups'
-import { Indicators } from './Indicators'
-import { setDropTarget } from './headerDropTargetSlice'
-import { useColumnOrder } from '../../hooks/useColumnOrder'
-import { ExperimentsState } from '../../store'
-import { sendMessage } from '../../../shared/vscode'
-import { leafColumnIds, reorderColumnIds } from '../../util/columns'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
-import { getSelectedForPlotsCount } from '../../util/rows'
-
+import { setDropTarget } from '../headerDropTargetSlice'
+import styles from '../styles.module.scss'
+import { Indicators } from '../Indicators'
+import { useColumnOrder } from '../../../hooks/useColumnOrder'
+import { ExperimentsState } from '../../../store'
+import { sendMessage } from '../../../../shared/vscode'
+import { leafColumnIds, reorderColumnIds } from '../../../util/columns'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
+import { getSelectedForPlotsCount } from '../../../util/rows'
 interface TableHeadProps {
   instance: TableInstance<Experiment>
   root: HTMLElement | null

webview/src/experiments/components/table/TableHeader.tsx → webview/src/experiments/components/table/header/TableHeader.tsx

@@ -9,10 +9,10 @@ import { HeaderGroup } from 'react-table'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { VSCodeDivider } from '@vscode/webview-ui-toolkit/react'
 import { TableHeaderCell } from './TableHeaderCell'
-import { ExperimentsState } from '../../store'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
-import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu'
-import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption'
+import { ExperimentsState } from '../../../store'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
+import { MessagesMenu } from '../../../../shared/components/messagesMenu/MessagesMenu'
+import { MessagesMenuOptionProps } from '../../../../shared/components/messagesMenu/MessagesMenuOption'
 
 export enum SortOrder {
   ASCENDING = 'Sort Ascending',
@@ -38,6 +38,39 @@ interface TableHeaderProps {
   root: HTMLElement | null
 }
 
+export const sortOption = (
+  label: SortOrder,
+  currentSort: SortOrder,
+  columnId: string
+) => {
+  const sortOrder = currentSort
+  const hidden = sortOrder === label
+  const descending = label === SortOrder.DESCENDING
+  const path = columnId
+  const removeSortMessage = {
+    payload: columnId,
+    type: MessageFromWebviewType.REMOVE_COLUMN_SORT
+  }
+  const payload = {
+    descending,
+    path
+  }
+  const message =
+    label === SortOrder.NONE
+      ? removeSortMessage
+      : {
+          payload,
+          type: MessageFromWebviewType.SORT_COLUMN
+        }
+
+  return {
+    hidden,
+    id: label,
+    label,
+    message
+  } as MessagesMenuOptionProps
+}
+
 export const TableHeader: React.FC<TableHeaderProps> = ({
   column,
   columns,
@@ -116,39 +149,9 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
               <VSCodeDivider />
               <MessagesMenu
                 options={[
-                  {
-                    hidden: sortOrder === SortOrder.ASCENDING,
-                    id: SortOrder.ASCENDING,
-                    label: SortOrder.ASCENDING,
-                    message: {
-                      payload: {
-                        descending: false,
-                        path: column.id
-                      },
-                      type: MessageFromWebviewType.SORT_COLUMN
-                    }
-                  },
-                  {
-                    hidden: sortOrder === SortOrder.DESCENDING,
-                    id: SortOrder.DESCENDING,
-                    label: SortOrder.DESCENDING,
-                    message: {
-                      payload: {
-                        descending: true,
-                        path: column.id
-                      },
-                      type: MessageFromWebviewType.SORT_COLUMN
-                    }
-                  },
-                  {
-                    hidden: sortOrder === SortOrder.NONE,
-                    id: SortOrder.NONE,
-                    label: SortOrder.NONE,
-                    message: {
-                      payload: column.id,
-                      type: MessageFromWebviewType.REMOVE_COLUMN_SORT
-                    }
-                  }
+                  sortOption(SortOrder.ASCENDING, sortOrder, column.id),
+                  sortOption(SortOrder.DESCENDING, sortOrder, column.id),
+                  sortOption(SortOrder.NONE, sortOrder, column.id)
                 ]}
               />
             </>

webview/src/experiments/components/table/TableHeaderCell.tsx → webview/src/experiments/components/table/header/TableHeaderCell.tsx

@@ -8,17 +8,17 @@ import { useSelector } from 'react-redux'
 import { HeaderGroup } from 'react-table'
 import cx from 'classnames'
 import { useInView } from 'react-intersection-observer'
-import styles from './styles.module.scss'
 import { SortOrder } from './TableHeader'
 import { TableHeaderCellContents } from './TableHeaderCellContents'
+import styles from '../styles.module.scss'
 import {
   countUpperLevels,
   isExperimentColumn,
   isFirstLevelHeader
-} from '../../util/columns'
-import { ContextMenu } from '../../../shared/components/contextMenu/ContextMenu'
-import { DragFunction } from '../../../shared/components/dragDrop/Draggable'
-import { ExperimentsState } from '../../store'
+} from '../../../util/columns'
+import { ExperimentsState } from '../../../store'
+import { ContextMenu } from '../../../../shared/components/contextMenu/ContextMenu'
+import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
 
 const calcResizerHeight = (
   isPlaceholder: boolean,
@@ -147,7 +147,7 @@ export const TableHeaderCell: React.FC<{
     <ContextMenu
       content={menuContent}
       disabled={menuDisabled || menuSuppressed}
-      trigger={'contextmenu click'}
+      trigger={'contextmenu'}
     >
       <div
         {...column.getHeaderProps(

webview/src/experiments/components/table/TableHeaderCellContents.tsx → webview/src/experiments/components/table/header/TableHeaderCellContents.tsx

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from 'react'
 import cx from 'classnames'
 import { ColumnType, Experiment } from 'dvc/src/experiments/webview/contract'
 import { HeaderGroup } from 'react-table'
-import styles from './styles.module.scss'
 import { SortOrder } from './TableHeader'
+import styles from '../styles.module.scss'
 import {
   Draggable,
   DragFunction
-} from '../../../shared/components/dragDrop/Draggable'
-import { IconMenu } from '../../../shared/components/iconMenu/IconMenu'
-import { DownArrow, Lines, UpArrow } from '../../../shared/components/icons'
+} from '../../../../shared/components/dragDrop/Draggable'
+import { IconMenu } from '../../../../shared/components/iconMenu/IconMenu'
+import { DownArrow, Lines, UpArrow } from '../../../../shared/components/icons'
 
 const getIconMenuItems = (
   sortEnabled: boolean,

webview/src/plots/components/App.test.tsx

@@ -428,6 +428,32 @@ describe('App', () => {
     })
   })
 
+  it('should not toggle the checkpoint plots section if a link is clicked', () => {
+    renderAppWithOptionalData({
+      checkpoint: checkpointPlotsFixture
+    })
+
+    const checkpointsTooltipToggle = screen.getAllByTestId(
+      'info-tooltip-toggle'
+    )[2]
+    fireEvent.mouseEnter(checkpointsTooltipToggle, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    const tooltip = screen.getByTestId('tooltip-checkpoint-plots')
+    const tooltipLink = within(tooltip).getByRole('link')
+    fireEvent.click(tooltipLink, {
+      bubbles: true,
+      cancelable: true
+    })
+
+    expect(mockPostMessage).not.toHaveBeenCalledWith({
+      payload: { [Section.CHECKPOINT_PLOTS]: true },
+      type: MessageFromWebviewType.TOGGLE_PLOTS_SECTION
+    })
+  })
+
   it('should not toggle the checkpoint plots section when its header is clicked and the content of its tooltip is selected', async () => {
     renderAppWithOptionalData({
       checkpoint: checkpointPlotsFixture

webview/src/plots/components/PlotsContainer.tsx

@@ -18,6 +18,7 @@ import {
   Lines
 } from '../../shared/components/icons'
 import { isSelecting } from '../../util/strings'
+import { EventTargetWithNodeName } from '../../util/objects'
 
 export interface CommonPlotsContainerProps {
   onResize: (size: PlotSize) => void
@@ -139,7 +140,10 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
 
   const toggleSection = (e: MouseEvent) => {
     e.preventDefault()
-    if (!isSelecting([title, SectionDescription[sectionKey].props.children])) {
+    if (
+      !isSelecting([title, SectionDescription[sectionKey].props.children]) &&
+      !['A', 'BUTTON'].includes((e.target as EventTargetWithNodeName).nodeName)
+    ) {
       sendMessage({
         payload: {
           [sectionKey]: !sectionCollapsed