Standardize use of send message across setup, experiments and plots (#4077)

Author: mattseddon

webview/src/experiments/components/AddStage.tsx

@@ -1,9 +1,8 @@
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React from 'react'
 import styles from './table/styles.module.scss'
 import { IconButton } from '../../shared/components/button/IconButton'
 import { Add } from '../../shared/components/icons'
-import { sendMessage } from '../../shared/vscode'
+import { addConfiguration } from '../util/messages'
 
 interface AddStageProps {
   hasValidDvcYaml: boolean
@@ -14,10 +13,7 @@ export const AddStage: React.FC<AddStageProps> = ({ hasValidDvcYaml }) => (
     <p>Easily and efficiently reproduce your experiments </p>
     <IconButton
       icon={Add}
-      onClick={() =>
-        hasValidDvcYaml &&
-        sendMessage({ type: MessageFromWebviewType.ADD_CONFIGURATION })
-      }
+      onClick={() => hasValidDvcYaml && addConfiguration()}
       text="Add a Pipeline Stage"
       disabled={!hasValidDvcYaml}
     />

webview/src/experiments/components/Experiments.tsx

@@ -21,7 +21,6 @@ import {
   getExpandedRowModel,
   ColumnSizingState
 } from '@tanstack/react-table'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { Table } from './table/Table'
 import styles from './table/styles.module.scss'
 import { ErrorState } from './emptyState/ErrorState'
@@ -31,11 +30,11 @@ import { CellValue } from './table/content/Cell'
 import { AddStage } from './AddStage'
 import { ExperimentCell } from './table/content/ExperimentCell'
 import { buildColumns, columnHelper } from '../util/buildColumns'
-import { sendMessage } from '../../shared/vscode'
 import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { ExperimentsState } from '../store'
 import { EXPERIMENT_COLUMN_ID } from '../util/columns'
+import { resizeColumn } from '../util/messages'
 
 const DEFAULT_COLUMN_WIDTH = 90
 const MINIMUM_COLUMN_WIDTH = 90
@@ -109,10 +108,7 @@ const reportResizedColumn = (
     if (width !== columnWidths[id]) {
       window.clearTimeout(debounceTimer.current)
       debounceTimer.current = window.setTimeout(() => {
-        sendMessage({
-          payload: { id, width },
-          type: MessageFromWebviewType.RESIZE_COLUMN
-        })
+        resizeColumn(id, width)
       }, 500)
     }
   }

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

@@ -2,18 +2,17 @@ import { Experiment } from 'dvc/src/experiments/webview/contract'
 import React, { DragEvent, useRef, useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { Table, Header, ColumnOrderState } from '@tanstack/react-table'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { MergedHeaderGroups } from './MergeHeaderGroups'
 import { setDropTarget } from '../../../state/headerDropTargetSlice'
 import { ExperimentsState } from '../../../store'
-import { sendMessage } from '../../../../shared/vscode'
 import {
   leafColumnIds,
   reorderColumnIds,
   isExperimentColumn
 } from '../../../util/columns'
 import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
 import styles from '../styles.module.scss'
+import { reorderColumns } from '../../../util/messages'
 
 interface TableHeadProps {
   instance: Table<Experiment>
@@ -109,10 +108,7 @@ export const TableHead = ({
       newOrder = reorderColumnIds(fullOrder, displacer, leafs)
 
       setColumnOrder(newOrder)
-      sendMessage({
-        payload: newOrder,
-        type: MessageFromWebviewType.REORDER_COLUMNS
-      })
+      reorderColumns(newOrder)
       onDragEnd()
       onOrderChange(newOrder)
     }

webview/src/experiments/util/messages.ts

@@ -15,6 +15,21 @@ export const addStarredFilter = () =>
     type: MessageFromWebviewType.ADD_STARRED_EXPERIMENT_FILTER
   })
 
+export const addConfiguration = () =>
+  sendMessage({ type: MessageFromWebviewType.ADD_CONFIGURATION })
+
+export const reorderColumns = (newOrder: string[]) =>
+  sendMessage({
+    payload: newOrder,
+    type: MessageFromWebviewType.REORDER_COLUMNS
+  })
+
+export const resizeColumn = (id: string, width: number) =>
+  sendMessage({
+    payload: { id, width },
+    type: MessageFromWebviewType.RESIZE_COLUMN
+  })
+
 export const selectColumns = () =>
   sendMessage({ type: MessageFromWebviewType.SELECT_COLUMNS })
 

webview/src/plots/components/PlotsContainer.tsx

@@ -8,15 +8,14 @@ import React, {
 import { AnyAction } from '@reduxjs/toolkit'
 import { useDispatch, useSelector } from 'react-redux'
 import { PlotHeight, PlotsSection } from 'dvc/src/plots/webview/contract'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { PlotsPicker, PlotsPickerProps } from './PlotsPicker'
 import styles from './styles.module.scss'
 import { IconMenuItemProps } from '../../shared/components/iconMenu/IconMenuItem'
-import { sendMessage } from '../../shared/vscode'
 import { ListFilter, Add, Trash } from '../../shared/components/icons'
 import { Slider } from '../../shared/components/slider/Slider'
 import { PlotsState } from '../store'
 import { SectionContainer } from '../../shared/components/sectionContainer/SectionContainer'
+import { resizePlots, togglePlotsSection } from '../util/messages'
 
 interface PlotsContainerProps {
   sectionCollapsed: boolean
@@ -96,25 +95,12 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
           nbItemsPerRowOrWidth: positiveNbItems
         })
       )
-      sendMessage({
-        payload: {
-          height: newHeight,
-          nbItemsPerRow: positiveNbItems,
-          section: sectionKey
-        },
-        type: MessageFromWebviewType.RESIZE_PLOTS
-      })
+      resizePlots(newHeight, positiveNbItems, sectionKey)
     },
     [dispatch, changeSize, sectionKey]
   )
 
-  const toggleSection = () =>
-    sendMessage({
-      payload: {
-        [sectionKey]: !sectionCollapsed
-      },
-      type: MessageFromWebviewType.TOGGLE_PLOTS_SECTION
-    })
+  const toggleSection = () => togglePlotsSection(sectionKey, sectionCollapsed)
 
   const plotHeights = Object.values(PlotHeight).filter(
     value => typeof value !== 'string'

webview/src/plots/components/ZoomablePlot.tsx

@@ -7,7 +7,7 @@ import VegaLite, { VegaLiteProps } from 'react-vega/lib/VegaLite'
 import { setZoomedInPlot } from './webviewSlice'
 import styles from './styles.module.scss'
 import { config } from './constants'
-import { zoomPlot } from './messages'
+import { zoomPlot } from '../util/messages'
 import { useGetPlot } from '../hooks/useGetPlot'
 import { GripIcon } from '../../shared/components/dragDrop/GripIcon'
 

webview/src/plots/components/comparisonTable/ComparisonTable.tsx

@@ -2,17 +2,16 @@ import { ComparisonPlots, Revision } from 'dvc/src/plots/webview/contract'
 import { reorderObjectList } from 'dvc/src/util/array'
 import React, { useState, useRef, useEffect, useCallback } from 'react'
 import { useSelector } from 'react-redux'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import {
   ComparisonTableColumn,
   ComparisonTableHead
 } from './ComparisonTableHead'
 import { ComparisionTableRows } from './ComparisonTableRows'
 import plotsStyles from '../styles.module.scss'
 import { withScale, withVariant } from '../../../util/styles'
-import { sendMessage } from '../../../shared/vscode'
 import { PlotsState } from '../../store'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+import { reorderComparisonPlots } from '../../util/messages'
 
 export const ComparisonTable: React.FC = () => {
   const { revisions, plots, width } = useSelector(
@@ -61,10 +60,7 @@ export const ComparisonTable: React.FC = () => {
   const setColumnsOrder = (order: string[]) => {
     const newOrder = reorderObjectList<Revision>(order, columns, 'id')
     setColumns(newOrder)
-    sendMessage({
-      payload: newOrder.map(({ id }) => id),
-      type: MessageFromWebviewType.REORDER_PLOTS_COMPARISON
-    })
+    reorderComparisonPlots(newOrder)
   }
 
   const changePinnedColumn = (column: string) => {

webview/src/plots/components/comparisonTable/ComparisonTableCell.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ComparisonPlot } from 'dvc/src/plots/webview/contract'
 import styles from './styles.module.scss'
 import { RefreshButton } from '../../../shared/components/button/RefreshButton'
-import { refreshRevisions, zoomPlot } from '../messages'
+import { refreshRevisions, zoomPlot } from '../../util/messages'
 import { ErrorIcon } from '../../../shared/components/errorIcon/ErrorIcon'
 
 type ComparisonTableCellProps = {

webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx

@@ -1,13 +1,12 @@
 import { ComparisonPlots } from 'dvc/src/plots/webview/contract'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import React, { createRef, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { ComparisonTableColumn } from './ComparisonTableHead'
 import { ComparisonTableRow } from './ComparisonTableRow'
 import { changeRowHeight, DEFAULT_ROW_HEIGHT } from './comparisonTableSlice'
 import { RowDropTarget } from './RowDropTarget'
 import { DragDropContainer } from '../../../shared/components/dragDrop/DragDropContainer'
-import { sendMessage } from '../../../shared/vscode'
+import { reorderComparisonRows } from '../../util/messages'
 
 interface ComparisonTableRowsProps {
   plots: ComparisonPlots
@@ -57,10 +56,7 @@ export const ComparisionTableRows: React.FC<ComparisonTableRowsProps> = ({
 
   const changeRowsOrder = (order: string[]) => {
     setRowsOrder(order)
-    sendMessage({
-      payload: order,
-      type: MessageFromWebviewType.REORDER_PLOTS_COMPARISON_ROWS
-    })
+    reorderComparisonRows(order)
   }
 
   return (

webview/src/plots/components/customPlots/CustomPlots.tsx

@@ -1,7 +1,6 @@
 import React, { DragEvent, useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
-import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { CustomPlot } from './CustomPlot'
 import styles from '../styles.module.scss'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
@@ -13,9 +12,9 @@ import { DropTarget } from '../DropTarget'
 import { VirtualizedGrid } from '../../../shared/components/virtualizedGrid/VirtualizedGrid'
 import { shouldUseVirtualizedGrid } from '../util'
 import { PlotsState } from '../../store'
-import { sendMessage } from '../../../shared/vscode'
 import { changeOrderWithDraggedInfo } from '../../../util/array'
 import { LoadingSection, sectionIsLoading } from '../LoadingSection'
+import { reorderCustomPlots } from '../../util/messages'
 
 interface CustomPlotsProps {
   plotsIds: string[]
@@ -40,10 +39,7 @@ export const CustomPlots: React.FC<CustomPlotsProps> = ({ plotsIds }) => {
 
   const setPlotsIdsOrder = (order: string[]): void => {
     setOrder(order)
-    sendMessage({
-      payload: order,
-      type: MessageFromWebviewType.REORDER_PLOTS_CUSTOM
-    })
+    reorderCustomPlots(order)
   }
 
   if (sectionIsLoading(selectedRevisions, hasItems)) {