diff --git a/webview/src/experiments/components/App.tsx b/webview/src/experiments/components/App.tsx index ed16ad3e15..54a4b3c24a 100644 --- a/webview/src/experiments/components/App.tsx +++ b/webview/src/experiments/components/App.tsx @@ -26,7 +26,7 @@ import { updateRows, updateSelectedForPlotsCount, updateSorts -} from './table/tableDataSlice' +} from '../state/tableDataSlice' import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging' export const App: React.FC> = () => { diff --git a/webview/src/experiments/components/Experiments.tsx b/webview/src/experiments/components/Experiments.tsx index 31e56a903b..7762999607 100644 --- a/webview/src/experiments/components/Experiments.tsx +++ b/webview/src/experiments/components/Experiments.tsx @@ -27,7 +27,7 @@ import styles from './table/styles.module.scss' import { AddColumns, Welcome } from './GetStarted' import { RowSelectionProvider } from './table/RowSelectionContext' import { CellValue } from './table/content/Cell' -import { CellSecondaryName } from './table/CellSecondaryName' +import { CellSecondaryName } from './table/body/CellSecondaryName' import { AddStage } from './AddStage' import { buildColumns, columnHelper } from '../util/buildColumns' import { sendMessage } from '../../shared/vscode' diff --git a/webview/src/experiments/components/table/Indicators.tsx b/webview/src/experiments/components/table/Indicators.tsx index 3be0d12932..4432c5c79c 100644 --- a/webview/src/experiments/components/table/Indicators.tsx +++ b/webview/src/experiments/components/table/Indicators.tsx @@ -1,8 +1,12 @@ import React, { MouseEventHandler, ReactElement, ReactNode } from 'react' import { useSelector } from 'react-redux' import styles from './styles.module.scss' -import { CellHintTooltip } from './CellHintTooltip' -import { focusFiltersTree, focusSortsTree, openPlotsWebview } from './messages' +import { CellHintTooltip } from './body/CellHintTooltip' +import { + focusFiltersTree, + focusSortsTree, + openPlotsWebview +} from '../../util/messages' import { Icon } from '../../../shared/components/Icon' import { Filter, diff --git a/webview/src/experiments/components/table/RowSelectionContext.tsx b/webview/src/experiments/components/table/RowSelectionContext.tsx index 7fc14d507c..b11d0f9e50 100644 --- a/webview/src/experiments/components/table/RowSelectionContext.tsx +++ b/webview/src/experiments/components/table/RowSelectionContext.tsx @@ -1,5 +1,5 @@ import React, { createContext, useState } from 'react' -import { RowProp } from './interfaces' +import { RowProp } from '../../util/interfaces' export interface RowSelectionContextValue { selectedRows: Record diff --git a/webview/src/experiments/components/table/Table.tsx b/webview/src/experiments/components/table/Table.tsx index 8d84a08898..47be368356 100644 --- a/webview/src/experiments/components/table/Table.tsx +++ b/webview/src/experiments/components/table/Table.tsx @@ -1,21 +1,13 @@ -import React, { - useRef, - useState, - CSSProperties, - useContext, - useCallback -} from 'react' -import { useSelector } from 'react-redux' +import React, { useRef, useState, CSSProperties, useContext } from 'react' import { ColumnOrderState } from '@tanstack/react-table' import cx from 'classnames' import styles from './styles.module.scss' import { TableHead } from './header/TableHead' -import { InstanceProp, RowProp } from './interfaces' import { RowSelectionContext } from './RowSelectionContext' -import { TableBody } from './TableBody' import { Indicators } from './Indicators' import { CommitsAndBranchesNavigation } from './commitsAndBranches/CommitsAndBranchesNavigation' -import { ExperimentsState } from '../../store' +import { TableContent } from './body/TableContent' +import { InstanceProp } from '../../util/interfaces' interface TableProps extends InstanceProp { onColumnOrderChange: (order: ColumnOrderState) => void @@ -25,51 +17,12 @@ export const Table: React.FC = ({ instance, onColumnOrderChange }) => { - const { rows, flatRows } = instance.getRowModel() - - const hasCheckpoints = useSelector( - (state: ExperimentsState) => state.tableData.hasCheckpoints - ) - const hasRunningExperiment = useSelector( - (state: ExperimentsState) => state.tableData.hasRunningExperiment - ) - - const { clearSelectedRows, batchSelection, lastSelectedRow } = - useContext(RowSelectionContext) + const { clearSelectedRows } = useContext(RowSelectionContext) const [expColumnNeedsShadow, setExpColumnNeedsShadow] = useState(false) const [tableHeadHeight, setTableHeadHeight] = useState(55) const tableRef = useRef(null) - const batchRowSelection = useCallback( - ({ row: { id } }: RowProp) => { - const lastSelectedRowId = lastSelectedRow?.row.id ?? '' - const lastIndex = - flatRows.findIndex(flatRow => flatRow.id === lastSelectedRowId) || 1 - const selectedIndex = - flatRows.findIndex(flatRow => flatRow.id === id) || 1 - const rangeStart = Math.min(lastIndex, selectedIndex) - const rangeEnd = Math.max(lastIndex, selectedIndex) - - const collapsedIds = flatRows - .filter(flatRow => !flatRow.getIsExpanded()) - .map(flatRow => flatRow.id) - - const batch = flatRows - .slice(rangeStart, rangeEnd + 1) - .filter( - flatRow => - !collapsedIds.some(collapsedId => - flatRow.id.startsWith(`${collapsedId}.`) - ) - ) - .map(row => ({ row })) - - batchSelection?.(batch) - }, - [flatRows, batchSelection, lastSelectedRow] - ) - return (
= ({ setTableHeadHeight={setTableHeadHeight} onOrderChange={onColumnOrderChange} /> - {rows.map(row => ( - - ))} + diff --git a/webview/src/experiments/components/table/Cell.tsx b/webview/src/experiments/components/table/body/Cell.tsx similarity index 89% rename from webview/src/experiments/components/table/Cell.tsx rename to webview/src/experiments/components/table/body/Cell.tsx index d43dcbf8a0..1fff1038bd 100644 --- a/webview/src/experiments/components/table/Cell.tsx +++ b/webview/src/experiments/components/table/body/Cell.tsx @@ -1,12 +1,12 @@ import { flexRender } from '@tanstack/react-table' import React, { ReactNode } from 'react' import cx from 'classnames' -import styles from './styles.module.scss' -import { CellProp, RowProp } from './interfaces' import { CellRowActionsProps, CellRowActions } from './CellRowActions' -import { CellValue, isValueWithChanges } from './content/Cell' -import { clickAndEnterProps } from '../../../util/props' -import { ErrorTooltip } from '../../../shared/components/tooltip/ErrorTooltip' +import styles from '../styles.module.scss' +import { CellValue, isValueWithChanges } from '../content/Cell' +import { CellProp, RowProp } from '../../../util/interfaces' +import { clickAndEnterProps } from '../../../../util/props' +import { ErrorTooltip } from '../../../../shared/components/tooltip/ErrorTooltip' const cellHasChanges = (cellValue: CellValue) => isValueWithChanges(cellValue) ? cellValue.changes : false diff --git a/webview/src/experiments/components/table/CellHintTooltip.tsx b/webview/src/experiments/components/table/body/CellHintTooltip.tsx similarity index 87% rename from webview/src/experiments/components/table/CellHintTooltip.tsx rename to webview/src/experiments/components/table/body/CellHintTooltip.tsx index 9f4b21d322..ce56ce6e4f 100644 --- a/webview/src/experiments/components/table/CellHintTooltip.tsx +++ b/webview/src/experiments/components/table/body/CellHintTooltip.tsx @@ -1,9 +1,9 @@ import React, { ReactNode, ReactElement } from 'react' import { TippyProps } from '@tippyjs/react' -import styles from './styles.module.scss' +import styles from '../styles.module.scss' import Tooltip, { NORMAL_TOOLTIP_DELAY -} from '../../../shared/components/tooltip/Tooltip' +} from '../../../../shared/components/tooltip/Tooltip' export type CellHintTooltipProps = { tooltipContent: ReactNode diff --git a/webview/src/experiments/components/table/CellRowActions.tsx b/webview/src/experiments/components/table/body/CellRowActions.tsx similarity index 92% rename from webview/src/experiments/components/table/CellRowActions.tsx rename to webview/src/experiments/components/table/body/CellRowActions.tsx index e5a8cfd185..16a86d9237 100644 --- a/webview/src/experiments/components/table/CellRowActions.tsx +++ b/webview/src/experiments/components/table/body/CellRowActions.tsx @@ -4,12 +4,12 @@ import { ExperimentStatus, isQueued } from 'dvc/src/experiments/webview/contract' -import { Indicator } from './Indicators' -import { addStarredFilter, openPlotsWebview } from './messages' -import styles from './styles.module.scss' import { CellHintTooltip } from './CellHintTooltip' -import { clickAndEnterProps } from '../../../util/props' -import { Clock, StarFull, StarEmpty } from '../../../shared/components/icons' +import { Indicator } from '../Indicators' +import { addStarredFilter, openPlotsWebview } from '../../../util/messages' +import styles from '../styles.module.scss' +import { clickAndEnterProps } from '../../../../util/props' +import { Clock, StarFull, StarEmpty } from '../../../../shared/components/icons' export type CellRowActionsProps = { bulletColor?: string diff --git a/webview/src/experiments/components/table/CellSecondaryName.tsx b/webview/src/experiments/components/table/body/CellSecondaryName.tsx similarity index 85% rename from webview/src/experiments/components/table/CellSecondaryName.tsx rename to webview/src/experiments/components/table/body/CellSecondaryName.tsx index d9f0d38311..8c73350a25 100644 --- a/webview/src/experiments/components/table/CellSecondaryName.tsx +++ b/webview/src/experiments/components/table/body/CellSecondaryName.tsx @@ -1,10 +1,10 @@ import React from 'react' import { VSCodeTag } from '@vscode/webview-ui-toolkit/react' import { CommitData } from 'dvc/src/experiments/webview/contract' -import styles from './styles.module.scss' -import Tooltip from '../../../shared/components/tooltip/Tooltip' -import { Icon } from '../../../shared/components/Icon' -import { GitCommit } from '../../../shared/components/icons' +import styles from '../styles.module.scss' +import Tooltip from '../../../../shared/components/tooltip/Tooltip' +import { Icon } from '../../../../shared/components/Icon' +import { GitCommit } from '../../../../shared/components/icons' export const CellSecondaryName: React.FC<{ displayName: string diff --git a/webview/src/experiments/components/table/ExperimentGroup.tsx b/webview/src/experiments/components/table/body/ExperimentGroup.tsx similarity index 90% rename from webview/src/experiments/components/table/ExperimentGroup.tsx rename to webview/src/experiments/components/table/body/ExperimentGroup.tsx index 196a01e216..ae6d2746da 100644 --- a/webview/src/experiments/components/table/ExperimentGroup.tsx +++ b/webview/src/experiments/components/table/body/ExperimentGroup.tsx @@ -1,7 +1,7 @@ import React from 'react' import { BatchSelectionProp } from './Row' -import { RowProp } from './interfaces' import { NestedRow } from './NestedRow' +import { RowProp } from '../../../util/interfaces' export const ExperimentGroup: React.FC = ({ row, diff --git a/webview/src/experiments/components/table/NestedRow.tsx b/webview/src/experiments/components/table/body/NestedRow.tsx similarity index 85% rename from webview/src/experiments/components/table/NestedRow.tsx rename to webview/src/experiments/components/table/body/NestedRow.tsx index 9c057c6d0d..65f19182b6 100644 --- a/webview/src/experiments/components/table/NestedRow.tsx +++ b/webview/src/experiments/components/table/body/NestedRow.tsx @@ -1,7 +1,7 @@ import React from 'react' -import styles from './styles.module.scss' import { BatchSelectionProp, RowContent } from './Row' -import { RowProp } from './interfaces' +import styles from '../styles.module.scss' +import { RowProp } from '../../../util/interfaces' export const NestedRow: React.FC = ({ row, diff --git a/webview/src/experiments/components/table/Row.tsx b/webview/src/experiments/components/table/body/Row.tsx similarity index 59% rename from webview/src/experiments/components/table/Row.tsx rename to webview/src/experiments/components/table/body/Row.tsx index 2203aded56..c53a2a5d71 100644 --- a/webview/src/experiments/components/table/Row.tsx +++ b/webview/src/experiments/components/table/body/Row.tsx @@ -1,63 +1,17 @@ -/* eslint-disable @typescript-eslint/no-unsafe-return */ +import cx from 'classnames' import React, { useCallback, useContext, useMemo, useState } from 'react' import { useSelector } from 'react-redux' -import cx from 'classnames' -import { - Experiment, - isQueued, - isRunning -} from 'dvc/src/experiments/webview/contract' -import { MessageFromWebviewType } from 'dvc/src/webview/contract' import { EXPERIMENT_WORKSPACE_ID } from 'dvc/src/cli/dvc/contract' -import { RowProp } from './interfaces' -import styles from './styles.module.scss' +import { isQueued, isRunning } from 'dvc/src/experiments/webview/contract' import { FirstCell, CellWrapper } from './Cell' -import { RowSelectionContext } from './RowSelectionContext' import { RowContextMenu } from './RowContextMenu' -import { sendMessage } from '../../../shared/vscode' -import { ContextMenu } from '../../../shared/components/contextMenu/ContextMenu' -import { HandlerFunc } from '../../../util/props' -import { cond } from '../../../util/helpers' -import { ExperimentsState } from '../../store' - -const getExperimentTypeClass = ({ status, selected }: Experiment) => { - if (isRunning(status)) { - return styles.runningExperiment - } - if (isQueued(status)) { - return styles.queuedExperiment - } - if (selected === false) { - return styles.unselectedExperiment - } - - return styles.normalExperiment -} - -const getRowClassNames = ( - original: Experiment, - flatIndex: number, - isRowFocused: boolean, - isRowSelected: boolean, - isWorkspace: boolean, - className?: string -) => { - return cx( - className, - styles.experimentsTr, - styles.bodyRow, - getExperimentTypeClass(original), - cond( - flatIndex % 2 !== 0 && !isRowSelected, - () => styles.oddRow, - () => styles.evenRow - ), - isWorkspace ? styles.workspaceRow : styles.normalRow, - styles.row, - isRowSelected && styles.rowSelected, - isRowFocused && styles.rowFocused - ) -} +import styles from '../styles.module.scss' +import { RowProp } from '../../../util/interfaces' +import { RowSelectionContext } from '../RowSelectionContext' +import { ContextMenu } from '../../../../shared/components/contextMenu/ContextMenu' +import { HandlerFunc } from '../../../../util/props' +import { ExperimentsState } from '../../../store' +import { toggleExperiment, toggleStarred } from '../../../util/messages' export type BatchSelectionProp = { batchRowSelection: (prop: RowProp) => void @@ -77,25 +31,10 @@ export const RowContent: React.FC< (state: ExperimentsState) => state.tableData.changes ) const { getVisibleCells, original, index, getIsExpanded, subRows } = row - const { id } = original + const { displayColor, error, starred, id, status, selected } = original const [firstCell, ...cells] = getVisibleCells() - const { displayColor, error, starred } = original const isWorkspace = id === EXPERIMENT_WORKSPACE_ID const changesIfWorkspace = isWorkspace ? changes : undefined - const toggleExperiment = () => { - sendMessage({ - payload: id, - type: MessageFromWebviewType.TOGGLE_EXPERIMENT - }) - } - - const toggleStarred = () => { - !isWorkspace && - sendMessage({ - payload: [id], - type: MessageFromWebviewType.TOGGLE_EXPERIMENT_STAR - }) - } const { toggleRowSelected, selectedRows } = useContext(RowSelectionContext) @@ -131,6 +70,11 @@ export const RowContent: React.FC< const [menuActive, setMenuActive] = useState(false) + const running = isRunning(status) + const queued = isQueued(status) + const unselected = selected === false + const isOdd = index % 2 !== 0 && !isRowSelected + return ( toggleExperiment(id)} toggleRowSelection={toggleRowSelection} - toggleStarred={toggleStarred} + toggleStarred={() => !isWorkspace && toggleStarred(id)} /> {cells.map(cell => { const cellId = `${cell.column.id}___${cell.row.original.id}` diff --git a/webview/src/experiments/components/table/RowContextMenu.tsx b/webview/src/experiments/components/table/body/RowContextMenu.tsx similarity index 90% rename from webview/src/experiments/components/table/RowContextMenu.tsx rename to webview/src/experiments/components/table/body/RowContextMenu.tsx index 3390bb3c29..bac3166559 100644 --- a/webview/src/experiments/components/table/RowContextMenu.tsx +++ b/webview/src/experiments/components/table/body/RowContextMenu.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react' +import React, { useContext, useMemo } from 'react' import { MessageFromWebviewType } from 'dvc/src/webview/contract' import { ExperimentStatus, @@ -7,11 +7,11 @@ import { isRunningInQueue } from 'dvc/src/experiments/webview/contract' import { EXPERIMENT_WORKSPACE_ID } from 'dvc/src/cli/dvc/contract' -import { RowProp } from './interfaces' -import { RowSelectionContext } from './RowSelectionContext' -import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu' -import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption' -import { cond } from '../../../util/helpers' +import { RowProp } from '../../../util/interfaces' +import { RowSelectionContext } from '../RowSelectionContext' +import { MessagesMenu } from '../../../../shared/components/messagesMenu/MessagesMenu' +import { MessagesMenuOptionProps } from '../../../../shared/components/messagesMenu/MessagesMenuOption' +import { cond } from '../../../../util/helpers' const experimentMenuOption = ( payload: string | string[] | { id: string; executor?: string | null }[], @@ -36,21 +36,17 @@ const getMultiSelectMenuOptions = ( selectedRowsList: RowProp[], hasRunningExperiment: boolean ) => { - const unstarredExperiments = selectedRowsList.filter( - ({ - row: { - original: { starred } - } - }) => !starred - ) + const filterStarredUnstarred = (isStarred: boolean) => + selectedRowsList.filter( + ({ + row: { + original: { starred } + } + }) => starred === isStarred + ) - const starredExperiments = selectedRowsList.filter( - ({ - row: { - original: { starred } - } - }) => starred - ) + const unstarredExperiments = filterStarredUnstarred(false) + const starredExperiments = filterStarredUnstarred(true) const selectedIds = selectedRowsList.map(value => value.row.original.id) @@ -286,8 +282,7 @@ export const RowContextMenu: React.FC = ({ depth } }) => { - const { selectedRows, clearSelectedRows } = - React.useContext(RowSelectionContext) + const { selectedRows, clearSelectedRows } = useContext(RowSelectionContext) const isWorkspace = id === EXPERIMENT_WORKSPACE_ID diff --git a/webview/src/experiments/components/table/TableBody.tsx b/webview/src/experiments/components/table/body/TableBody.tsx similarity index 61% rename from webview/src/experiments/components/table/TableBody.tsx rename to webview/src/experiments/components/table/body/TableBody.tsx index f8cc0f4501..5fa846c925 100644 --- a/webview/src/experiments/components/table/TableBody.tsx +++ b/webview/src/experiments/components/table/body/TableBody.tsx @@ -1,36 +1,14 @@ import React from 'react' import { useSelector } from 'react-redux' import cx from 'classnames' -import { useInView } from 'react-intersection-observer' import { EXPERIMENT_WORKSPACE_ID } from 'dvc/src/cli/dvc/contract' -import styles from './styles.module.scss' -import { BatchSelectionProp, RowContent } from './Row' -import { InstanceProp, RowProp } from './interfaces' import { ExperimentGroup } from './ExperimentGroup' -import { ExperimentsState } from '../../store' - -const WorkspaceRowGroupWrapper: React.FC< - { - children: React.ReactNode - root: HTMLElement | null - tableHeaderHeight: number - } & InstanceProp -> = ({ children, root, tableHeaderHeight }) => { - const [ref, needsShadow] = useInView({ - root, - rootMargin: `-${tableHeaderHeight + 15}px 0px 0px 0px`, - threshold: 1 - }) +import { BatchSelectionProp, RowContent } from './Row' +import { WorkspaceRowGroup } from './WorkspaceRowGroup' +import styles from '../styles.module.scss' +import { InstanceProp, RowProp } from '../../../util/interfaces' +import { ExperimentsState } from '../../../store' - return ( - - {children} - - ) -} export const TableBody: React.FC< RowProp & InstanceProp & @@ -67,25 +45,24 @@ export const TableBody: React.FC< ) return row.original.id === EXPERIMENT_WORKSPACE_ID ? ( - {content} - + ) : ( <> {row.index === 2 && row.depth === 0 && ( - - + + {isBranchesView ? 'Other Branches' : 'Previous Commits'} - + )} diff --git a/webview/src/experiments/components/table/body/TableContent.tsx b/webview/src/experiments/components/table/body/TableContent.tsx new file mode 100644 index 0000000000..0fd9d1b80b --- /dev/null +++ b/webview/src/experiments/components/table/body/TableContent.tsx @@ -0,0 +1,71 @@ +import React, { RefObject, useCallback, useContext } from 'react' +import { useSelector } from 'react-redux' +import { TableBody } from './TableBody' +import { RowSelectionContext } from '../RowSelectionContext' +import { ExperimentsState } from '../../../store' +import { InstanceProp, RowProp } from '../../../util/interfaces' + +interface TableContentProps extends InstanceProp { + tableRef: RefObject + tableHeadHeight: number +} + +export const TableContent: React.FC = ({ + instance, + tableRef, + tableHeadHeight +}) => { + const { rows, flatRows } = instance.getRowModel() + const { batchSelection, lastSelectedRow } = useContext(RowSelectionContext) + const hasCheckpoints = useSelector( + (state: ExperimentsState) => state.tableData.hasCheckpoints + ) + const hasRunningExperiment = useSelector( + (state: ExperimentsState) => state.tableData.hasRunningExperiment + ) + const batchRowSelection = useCallback( + ({ row: { id } }: RowProp) => { + const lastSelectedRowId = lastSelectedRow?.row.id ?? '' + const lastIndex = + flatRows.findIndex(flatRow => flatRow.id === lastSelectedRowId) || 1 + const selectedIndex = + flatRows.findIndex(flatRow => flatRow.id === id) || 1 + const rangeStart = Math.min(lastIndex, selectedIndex) + const rangeEnd = Math.max(lastIndex, selectedIndex) + + const collapsedIds = flatRows + .filter(flatRow => !flatRow.getIsExpanded()) + .map(flatRow => flatRow.id) + + const batch = flatRows + .slice(rangeStart, rangeEnd + 1) + .filter( + flatRow => + !collapsedIds.some(collapsedId => + flatRow.id.startsWith(`${collapsedId}.`) + ) + ) + .map(row => ({ row })) + + batchSelection?.(batch) + }, + [flatRows, batchSelection, lastSelectedRow] + ) + + return ( + <> + {rows.map(row => ( + + ))} + + ) +} diff --git a/webview/src/experiments/components/table/body/WorkspaceRowGroup.tsx b/webview/src/experiments/components/table/body/WorkspaceRowGroup.tsx new file mode 100644 index 0000000000..ddb73732ca --- /dev/null +++ b/webview/src/experiments/components/table/body/WorkspaceRowGroup.tsx @@ -0,0 +1,28 @@ +import cx from 'classnames' +import React from 'react' +import { useInView } from 'react-intersection-observer' +import { InstanceProp } from '../../../util/interfaces' +import styles from '../styles.module.scss' + +export const WorkspaceRowGroup: React.FC< + { + children: React.ReactNode + root: HTMLElement | null + tableHeaderHeight: number + } & InstanceProp +> = ({ children, root, tableHeaderHeight }) => { + const [ref, needsShadow] = useInView({ + root, + rootMargin: `-${tableHeaderHeight + 15}px 0px 0px 0px`, + threshold: 1 + }) + + return ( + + {children} + + ) +} diff --git a/webview/src/experiments/components/table/commitsAndBranches/AddAndRemoveBranches.tsx b/webview/src/experiments/components/table/commitsAndBranches/AddAndRemoveBranches.tsx index e3edc91a84..1354c516ea 100644 --- a/webview/src/experiments/components/table/commitsAndBranches/AddAndRemoveBranches.tsx +++ b/webview/src/experiments/components/table/commitsAndBranches/AddAndRemoveBranches.tsx @@ -2,7 +2,7 @@ import React from 'react' import { useSelector } from 'react-redux' import styles from '../styles.module.scss' import { ExperimentsState } from '../../../store' -import { selectBranches } from '../messages' +import { selectBranches } from '../../../util/messages' import { featureFlag } from '../../../../util/flags' export const AddAndRemoveBranches: React.FC = () => { diff --git a/webview/src/experiments/components/table/commitsAndBranches/CommitsAndBranchesNavigation.tsx b/webview/src/experiments/components/table/commitsAndBranches/CommitsAndBranchesNavigation.tsx index a3dccbfa21..0c76d7e25b 100644 --- a/webview/src/experiments/components/table/commitsAndBranches/CommitsAndBranchesNavigation.tsx +++ b/webview/src/experiments/components/table/commitsAndBranches/CommitsAndBranchesNavigation.tsx @@ -6,7 +6,7 @@ import { showMoreCommits, switchToBranchesView, switchToCommitsView -} from '../messages' +} from '../../../util/messages' import styles from '../styles.module.scss' import { ExperimentsState } from '../../../store' diff --git a/webview/src/experiments/components/table/header/TableHead.tsx b/webview/src/experiments/components/table/header/TableHead.tsx index 6c3bb2453e..886d1e498c 100644 --- a/webview/src/experiments/components/table/header/TableHead.tsx +++ b/webview/src/experiments/components/table/header/TableHead.tsx @@ -4,7 +4,7 @@ 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 '../headerDropTargetSlice' +import { setDropTarget } from '../../../state/headerDropTargetSlice' import { ExperimentsState } from '../../../store' import { sendMessage } from '../../../../shared/vscode' import { diff --git a/webview/src/experiments/components/table/styles.module.scss b/webview/src/experiments/components/table/styles.module.scss index 33c34b1e27..0e87a18e17 100644 --- a/webview/src/experiments/components/table/styles.module.scss +++ b/webview/src/experiments/components/table/styles.module.scss @@ -473,7 +473,7 @@ $badge-size: 0.85rem; .previousCommitsRow { border-bottom: $row-border; - .experimentsTd { + .previousCommitsText { font-size: 0.6rem; padding-left: 16px; } diff --git a/webview/src/experiments/components/table/headerDropTargetSlice.ts b/webview/src/experiments/state/headerDropTargetSlice.ts similarity index 100% rename from webview/src/experiments/components/table/headerDropTargetSlice.ts rename to webview/src/experiments/state/headerDropTargetSlice.ts diff --git a/webview/src/experiments/components/table/headersSlice.ts b/webview/src/experiments/state/headersSlice.ts similarity index 100% rename from webview/src/experiments/components/table/headersSlice.ts rename to webview/src/experiments/state/headersSlice.ts diff --git a/webview/src/experiments/components/table/tableDataSlice.ts b/webview/src/experiments/state/tableDataSlice.ts similarity index 96% rename from webview/src/experiments/components/table/tableDataSlice.ts rename to webview/src/experiments/state/tableDataSlice.ts index 4f84017db5..a338871fa2 100644 --- a/webview/src/experiments/components/table/tableDataSlice.ts +++ b/webview/src/experiments/state/tableDataSlice.ts @@ -5,8 +5,8 @@ import { Experiment, TableData } from 'dvc/src/experiments/webview/contract' -import { keepEqualOldReferencesInArray } from '../../../util/array' -import { keepReferenceIfEqual } from '../../../util/objects' +import { keepEqualOldReferencesInArray } from '../../util/array' +import { keepReferenceIfEqual } from '../../util/objects' export interface TableDataState extends TableData { hasData?: boolean diff --git a/webview/src/experiments/store.ts b/webview/src/experiments/store.ts index c6a82fd956..4550829dd8 100644 --- a/webview/src/experiments/store.ts +++ b/webview/src/experiments/store.ts @@ -1,7 +1,7 @@ import { configureStore } from '@reduxjs/toolkit' -import tableDataReducer from './components/table/tableDataSlice' -import headersReducer from './components/table/headersSlice' -import headerDropTargetReducer from './components/table/headerDropTargetSlice' +import tableDataReducer from './state/tableDataSlice' +import headersReducer from './state/headersSlice' +import headerDropTargetReducer from './state/headerDropTargetSlice' export const experimentsReducers = { headerDropTarget: headerDropTargetReducer, diff --git a/webview/src/experiments/components/table/interfaces.ts b/webview/src/experiments/util/interfaces.ts similarity index 100% rename from webview/src/experiments/components/table/interfaces.ts rename to webview/src/experiments/util/interfaces.ts diff --git a/webview/src/experiments/components/table/messages.ts b/webview/src/experiments/util/messages.ts similarity index 76% rename from webview/src/experiments/components/table/messages.ts rename to webview/src/experiments/util/messages.ts index 06253b36f1..46ffaad039 100644 --- a/webview/src/experiments/components/table/messages.ts +++ b/webview/src/experiments/util/messages.ts @@ -1,5 +1,5 @@ import { MessageFromWebviewType } from 'dvc/src/webview/contract' -import { sendMessage } from '../../../shared/vscode' +import { sendMessage } from '../../shared/vscode' export const focusFiltersTree = () => sendMessage({ type: MessageFromWebviewType.FOCUS_FILTERS_TREE }) @@ -37,3 +37,15 @@ export const selectBranches = () => sendMessage({ type: MessageFromWebviewType.SELECT_BRANCHES }) + +export const toggleExperiment = (id: string) => + sendMessage({ + payload: id, + type: MessageFromWebviewType.TOGGLE_EXPERIMENT + }) + +export const toggleStarred = (id: string) => + sendMessage({ + payload: [id], + type: MessageFromWebviewType.TOGGLE_EXPERIMENT_STAR + }) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 3d372de22a..c96095a6a0 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -24,7 +24,7 @@ import { addCommitDataToMainBranch } from './util' import Experiments from '../experiments/components/Experiments' import { experimentsReducers } from '../experiments/store' -import { TableDataState } from '../experiments/components/table/tableDataSlice' +import { TableDataState } from '../experiments/state/tableDataSlice' import { NORMAL_TOOLTIP_DELAY } from '../shared/components/tooltip/Tooltip' import { setExperimentsAsSelected,