diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx index 9198e7a7d6..aebc2bee21 100644 --- a/webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx +++ b/webview/src/plots/components/comparisonTable/ComparisonTableRows.tsx @@ -1,13 +1,12 @@ import { ComparisonPlots } from 'dvc/src/plots/webview/contract' import React, { createRef, useEffect, useState } from 'react' -import { useDispatch, useSelector } from 'react-redux' +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 { reorderComparisonRows } from '../../util/messages' -import { PlotsState } from '../../store' interface ComparisonTableRowsProps { plots: ComparisonPlots @@ -23,9 +22,6 @@ export const ComparisionTableRows: React.FC = ({ const [rowsOrder, setRowsOrder] = useState([]) const dispatch = useDispatch() const firstRowRef = createRef() - const disabledDragPlotIds = useSelector( - (state: PlotsState) => state.comparison.disabledDragPlotIds - ) useEffect(() => { setRowsOrder(plots.map(({ path }) => path)) @@ -71,7 +67,6 @@ export const ComparisionTableRows: React.FC = ({ group="comparison-table" dropTarget={} onLayoutChange={onLayoutChange} - disabledDropIds={disabledDragPlotIds} vertical /> ) diff --git a/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts b/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts index 930e85ba59..d9f9a3a1ed 100644 --- a/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts +++ b/webview/src/plots/components/comparisonTable/comparisonTableSlice.ts @@ -11,18 +11,14 @@ export interface ComparisonTableState extends PlotsComparisonData { isCollapsed: boolean hasData: boolean rowHeight: number - multiPlotValues: { [path: string]: number } - disabledDragPlotIds: string[] } export const DEFAULT_ROW_HEIGHT = 200 export const comparisonTableInitialState: ComparisonTableState = { - disabledDragPlotIds: [], hasData: false, height: DEFAULT_HEIGHT[PlotsSection.COMPARISON_TABLE], isCollapsed: DEFAULT_SECTION_COLLAPSED[PlotsSection.COMPARISON_TABLE], - multiPlotValues: {}, plots: [], revisions: [], rowHeight: DEFAULT_ROW_HEIGHT, @@ -34,9 +30,6 @@ export const comparisonTableSlice = createSlice({ initialState: comparisonTableInitialState, name: 'comparison', reducers: { - changeDisabledDragIds: (state, action: PayloadAction) => { - state.disabledDragPlotIds = action.payload - }, changeRowHeight: (state, action: PayloadAction) => { state.rowHeight = action.payload }, @@ -49,12 +42,6 @@ export const comparisonTableSlice = createSlice({ setCollapsed: (state, action: PayloadAction) => { state.isCollapsed = action.payload }, - setMultiPlotValue: ( - state, - action: PayloadAction<{ path: string; value: number }> - ) => { - state.multiPlotValues[action.payload.path] = action.payload.value - }, update: (state, action: PayloadAction) => { if (!action.payload) { return comparisonTableInitialState @@ -68,13 +55,7 @@ export const comparisonTableSlice = createSlice({ } }) -export const { - update, - setCollapsed, - setMultiPlotValue, - changeSize, - changeDisabledDragIds, - changeRowHeight -} = comparisonTableSlice.actions +export const { update, setCollapsed, changeSize, changeRowHeight } = + comparisonTableSlice.actions export default comparisonTableSlice.reducer diff --git a/webview/src/plots/components/comparisonTable/styles.module.scss b/webview/src/plots/components/comparisonTable/styles.module.scss index 2139e59e63..9784d666aa 100644 --- a/webview/src/plots/components/comparisonTable/styles.module.scss +++ b/webview/src/plots/components/comparisonTable/styles.module.scss @@ -88,6 +88,25 @@ $gap: 4px; transform: rotate(0deg); } +.imageWrapper { + width: 100%; + display: block; + padding: 0; + border: 0; +} + +.noImage { + background-color: $bg-color; + border-style: solid; + border-width: thin; + border-color: $bg-color; +} + +.noImageContent { + padding-top: 25%; + padding-bottom: 25%; +} + .rowToggler { border: none; background: none; @@ -151,45 +170,12 @@ $gap: 4px; max-height: 0; } -.image { +.cell img { width: 100%; height: auto; vertical-align: middle; } -.imageWrapper { - width: 100%; - display: block; - padding: 0; - border: 0; -} - -.noImageContent { - padding-top: 25%; - padding-bottom: 25%; - display: flex; - align-items: center; - justify-content: center; -} - -.multiImageWrapper { - .image, - .noImageContent { - height: 380px; - object-fit: contain; - } -} - -.multiImageSlider { - display: flex; - height: 40px; - align-items: center; - justify-content: center; - color: $fg-color; - background-color: $bg-color; - box-shadow: inset 40px 40px $fg-transparency-1; -} - .experimentName { color: $meta-cell-color; }