Remove revision filtering from comparison table icon menu (#1823)

* Remove revision filtering from comparison table icon menu

* Remove useless length check

Author: sroy3

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

@@ -335,108 +335,6 @@ describe('App', () => {
     expect(() => screen.getByTestId('plot-summary.json:loss')).not.toThrow()
   })
 
-  it('should toggle the visibility of revisions in the comparison table when clicking the revisions in the picker', async () => {
-    render(
-      <Plots
-        state={{
-          data: {
-            comparison: comparisonTableFixture,
-            sectionCollapsed: DEFAULT_SECTION_COLLAPSED,
-            template: null
-          }
-        }}
-      />
-    )
-
-    const summaryElement = await screen.findByText('Images')
-    fireEvent.click(summaryElement, {
-      bubbles: true,
-      cancelable: true
-    })
-
-    const comparisonTable = screen.getByRole('table')
-
-    const workspaceHeader = within(comparisonTable).queryByText('workspace')
-    expect(workspaceHeader).toBeInTheDocument()
-
-    const [, pickerButton] = screen.queryAllByTestId('icon-menu-item')
-    fireEvent.mouseEnter(pickerButton)
-    fireEvent.click(pickerButton)
-
-    const [, selectMenu] = screen.getAllByRole('menu')
-    const workspaceItem = within(selectMenu).getByText('workspace')
-
-    fireEvent.click(workspaceItem, {
-      bubbles: true,
-      cancelable: true
-    })
-
-    expect(workspaceHeader).not.toBeInTheDocument()
-
-    fireEvent.mouseEnter(pickerButton)
-    fireEvent.click(pickerButton)
-
-    fireEvent.click(workspaceItem, {
-      bubbles: true,
-      cancelable: true
-    })
-
-    expect(within(comparisonTable).getByText('workspace')).toBeInTheDocument()
-  })
-
-  it('should show the newest revision in the comparision table even if some revisions were filtered out', async () => {
-    const { rerender } = render(
-      <Plots
-        state={{
-          data: {
-            comparison: comparisonTableFixture,
-            sectionCollapsed: DEFAULT_SECTION_COLLAPSED
-          }
-        }}
-      />
-    )
-
-    const summaryElement = await screen.findByText('Images')
-    fireEvent.click(summaryElement, {
-      bubbles: true,
-      cancelable: true
-    })
-
-    const [, pickerButton] = screen.queryAllByTestId('icon-menu-item')
-    fireEvent.mouseEnter(pickerButton)
-    fireEvent.click(pickerButton)
-
-    const [, selectMenu] = screen.getAllByRole('menu')
-    const workspaceItem = within(selectMenu).getByText('workspace')
-
-    fireEvent.click(workspaceItem, {
-      bubbles: true,
-      cancelable: true
-    })
-
-    const newRevision = 'newRev'
-
-    rerender(
-      <Plots
-        state={{
-          data: {
-            comparison: {
-              ...comparisonTableFixture,
-              revisions: [
-                ...comparisonTableFixture.revisions,
-                { displayColor: '#945dd6', revision: newRevision }
-              ]
-            },
-            sectionCollapsed: DEFAULT_SECTION_COLLAPSED
-          }
-        }}
-      />
-    )
-
-    const workspaceHeader = screen.queryAllByText(newRevision)
-    expect(workspaceHeader.length).toBe(3) // One in the table, one in the menu, and one in the ribbon
-  })
-
   it('should send a message to the extension with the selected metrics when toggling the visibility of a plot', async () => {
     renderAppWithData({
       checkpoint: checkpointPlotsFixture,

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

@@ -1,70 +1,27 @@
 import { PlotsComparisonData, Section } from 'dvc/src/plots/webview/contract'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { ComparisonTable } from './ComparisonTable'
 import { BasicContainerProps, PlotsContainer } from '../PlotsContainer'
-import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 
 interface ComparisonTableWrapper {
   comparisonTable: PlotsComparisonData
   basicContainerProps: BasicContainerProps
 }
 
-// eslint-disable-next-line sonarjs/cognitive-complexity
 export const ComparisonTableWrapper: React.FC<ComparisonTableWrapper> = ({
   comparisonTable,
   basicContainerProps
 }) => {
-  const { revisions: revs, sectionName, size } = comparisonTable
-  const [allRevisions, setAllRevisions] = useState(
-    revs?.map(rev => rev.revision) || []
-  )
-  const [selectedPlots, setSelectedPlots] = useState<string[]>(allRevisions)
-
-  useEffect(() => {
-    setAllRevisions(allRevs => {
-      const revisionStrings = revs?.map(rev => rev.revision)
-      const newRevisions = revisionStrings.filter(rev => !allRevs.includes(rev))
-      setSelectedPlots(plots => {
-        const filteredRevisions = plots.filter(plot =>
-          revisionStrings.includes(plot)
-        )
-        return [...filteredRevisions, ...newRevisions]
-      })
-
-      return revisionStrings || []
-    })
-  }, [revs, setAllRevisions, setSelectedPlots])
-
-  const plots = comparisonTable.plots.filter(plot => {
-    const plotRevisions = Object.values(plot.revisions)
-    for (const plotRevision of plotRevisions) {
-      if (selectedPlots.includes(plotRevision.revision)) {
-        return true
-      }
-    }
-    return false
-  })
+  const { revisions, sectionName, size, plots } = comparisonTable
 
   return (
     <PlotsContainer
       title={sectionName}
       sectionKey={Section.COMPARISON_TABLE}
-      menu={{
-        plots: allRevisions,
-        selectedPlots: selectedPlots,
-        setSelectedPlots
-      }}
       currentSize={size}
       {...basicContainerProps}
     >
-      {plots.length > 0 ? (
-        <ComparisonTable
-          plots={plots}
-          revisions={revs.filter(rev => selectedPlots.includes(rev.revision))}
-        />
-      ) : (
-        <EmptyState isFullScreen={false}>No Revisions to Show</EmptyState>
-      )}
+      <ComparisonTable plots={plots} revisions={revisions} />
     </PlotsContainer>
   )
 }