Remove unneeded redux state changes

iterative · Jul 27, 2023 · 76ee298 · 76ee298
1 parent 739d752
commit 76ee298
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 61 deletions.
diff --git 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<ComparisonTableRowsProps> = ({
   const [rowsOrder, setRowsOrder] = useState<string[]>([])
   const dispatch = useDispatch()
   const firstRowRef = createRef<HTMLTableSectionElement>()
-  const disabledDragPlotIds = useSelector(
-    (state: PlotsState) => state.comparison.disabledDragPlotIds
-  )
 
   useEffect(() => {
     setRowsOrder(plots.map(({ path }) => path))
@@ -71,7 +67,6 @@ export const ComparisionTableRows: React.FC<ComparisonTableRowsProps> = ({
       group="comparison-table"
       dropTarget={<RowDropTarget colSpan={columns.length} />}
       onLayoutChange={onLayoutChange}
-      disabledDropIds={disabledDragPlotIds}
       vertical
     />
   )

diff --git 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<string[]>) => {
-      state.disabledDragPlotIds = action.payload
-    },
     changeRowHeight: (state, action: PayloadAction<number>) => {
       state.rowHeight = action.payload
     },
@@ -49,12 +42,6 @@ export const comparisonTableSlice = createSlice({
     setCollapsed: (state, action: PayloadAction<boolean>) => {
       state.isCollapsed = action.payload
     },
-    setMultiPlotValue: (
-      state,
-      action: PayloadAction<{ path: string; value: number }>
-    ) => {
-      state.multiPlotValues[action.payload.path] = action.payload.value
-    },
     update: (state, action: PayloadAction<PlotsComparisonData>) => {
       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
@@ -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;
 }