diff --git a/src/__test__/components/data-exploration/cell-sets-tool/CellSetsTool.test.jsx b/src/__test__/components/data-exploration/cell-sets-tool/CellSetsTool.test.jsx
index 1af4480b28..858da2cc16 100644
--- a/src/__test__/components/data-exploration/cell-sets-tool/CellSetsTool.test.jsx
+++ b/src/__test__/components/data-exploration/cell-sets-tool/CellSetsTool.test.jsx
@@ -72,7 +72,6 @@ cellSetsWithAnnotatedCellClass.cellSets.push(
 );
 
 const louvainClusters = cellSetsData.cellSets.find(({ key }) => key === 'louvain').children;
-const sampleList = cellSetsData.cellSets.find(({ key }) => key === 'sample').children;
 
 const experimentId = '1234';
 
diff --git a/src/__test__/components/data-exploration/generic-gene-table/ComponentActions.test.jsx b/src/__test__/components/data-exploration/generic-gene-table/ComponentActions.test.jsx
index cc7ec90b37..6151878f2a 100644
--- a/src/__test__/components/data-exploration/generic-gene-table/ComponentActions.test.jsx
+++ b/src/__test__/components/data-exploration/generic-gene-table/ComponentActions.test.jsx
@@ -77,8 +77,8 @@ describe('ComponentActions', () => {
 
     const dropdown = component.find(Dropdown);
     expect(dropdown.length).toEqual(1);
-    expect(dropdown.props().overlay.type.name).toEqual('Menu');
-    expect(dropdown.props().overlay.props.children.length).toEqual(3);
+    expect(dropdown.props().menu.type.name).toEqual('Menu');
+    expect(dropdown.props().menu.props.children.length).toEqual(3);
   });
 
   it('Renders correctly when there are no selected genes', () => {
@@ -114,7 +114,7 @@ describe('ComponentActions', () => {
       </Provider>,
     );
 
-    const menuButtons = component.find(Dropdown).props().overlay;
+    const menuButtons = component.find(Dropdown).props().menu;
     menuButtons.props.children[0].props.onClick();
 
     // Wait for side-effect to propagate (properties loading and loaded).
@@ -154,7 +154,7 @@ describe('ComponentActions', () => {
       </Provider>,
     );
 
-    const menuButtons = component.find(Dropdown).props().overlay;
+    const menuButtons = component.find(Dropdown).props().menu;
     menuButtons.props.children[1].props.onClick();
 
     // Wait for side-effect to propagate (genes loaded).
@@ -182,7 +182,7 @@ describe('ComponentActions', () => {
       </Provider>,
     );
 
-    const menuButtons = component.find(Dropdown).props().overlay;
+    const menuButtons = component.find(Dropdown).props().menu;
     menuButtons.props.children[2].props.onClick();
 
     // Wait for side-effect to propagate (properties loading and loaded).
diff --git a/src/__test__/components/data-exploration/generic-gene-table/LaunchPathwayAnalysisModal.test.jsx b/src/__test__/components/data-exploration/generic-gene-table/LaunchPathwayAnalysisModal.test.jsx
index eff89990dc..ef9c80fe6c 100644
--- a/src/__test__/components/data-exploration/generic-gene-table/LaunchPathwayAnalysisModal.test.jsx
+++ b/src/__test__/components/data-exploration/generic-gene-table/LaunchPathwayAnalysisModal.test.jsx
@@ -12,7 +12,7 @@ import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
 
 import handleError from 'utils/http/handleError';
 import downloadFromUrl from 'utils/downloadFromUrl';
-import writeToFile from 'utils/writeToFileURL';
+import writeToFile from 'utils/upload/writeToFileURL';
 
 import launchPathwayService from 'utils/pathwayAnalysis/launchPathwayService';
 import getDiffExprGenes from 'utils/extraActionCreators/differentialExpression/getDiffExprGenes';
@@ -27,7 +27,7 @@ jest.mock('utils/extraActionCreators/differentialExpression/getBackgroundExpress
 
 jest.mock('utils/http/handleError');
 jest.mock('utils/downloadFromUrl');
-jest.mock('utils/writeToFileURL');
+jest.mock('utils/upload/writeToFileURL');
 
 const onCancel = jest.fn();
 const onOpenAdvancedFilters = jest.fn();
diff --git a/src/__test__/components/data-management/DownloadDataButton.test.jsx b/src/__test__/components/data-management/DownloadDataButton.test.jsx
index 4e2b6b151d..e82f0f6966 100644
--- a/src/__test__/components/data-management/DownloadDataButton.test.jsx
+++ b/src/__test__/components/data-management/DownloadDataButton.test.jsx
@@ -28,14 +28,14 @@ import fake from '__test__/test-utils/constants';
 import { loadBackendStatus } from 'redux/actions/backendStatus';
 import { loadProcessingSettings } from 'redux/actions/experimentSettings';
 import downloadFromUrl from 'utils/downloadFromUrl';
-import writeToFileURL from 'utils/writeToFileURL';
+import writeToFileURL from 'utils/upload/writeToFileURL';
 
 jest.mock('file-saver');
 
 jest.mock('utils/work/fetchWork');
 jest.mock('utils/pushNotificationMessage');
 jest.mock('utils/downloadFromUrl');
-jest.mock('utils/writeToFileURL');
+jest.mock('utils/upload/writeToFileURL');
 
 const experimentId = `${fake.EXPERIMENT_ID}-0`;
 
diff --git a/src/__test__/components/data-management/ProjectCard.test.jsx b/src/__test__/components/data-management/ProjectCard.test.jsx
index 8129925d89..130788cd26 100644
--- a/src/__test__/components/data-management/ProjectCard.test.jsx
+++ b/src/__test__/components/data-management/ProjectCard.test.jsx
@@ -12,7 +12,7 @@ import { Provider } from 'react-redux';
 import thunk from 'redux-thunk';
 
 import initialState, { experimentTemplate } from 'redux/reducers/experiments/initialState';
-import ProjectCard from 'components/data-management/ProjectCard';
+import ProjectCard from 'components/data-management/project/ProjectCard';
 
 const experimentId = 'experimentId1';
 const experimentName = 'Test Experiment';
diff --git a/src/__test__/components/data-management/ProjectDeleteModal.test.jsx b/src/__test__/components/data-management/ProjectDeleteModal.test.jsx
index a65ed0e3a8..7804937c04 100644
--- a/src/__test__/components/data-management/ProjectDeleteModal.test.jsx
+++ b/src/__test__/components/data-management/ProjectDeleteModal.test.jsx
@@ -7,7 +7,7 @@ import {
 } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import initialExperimentState from 'redux/reducers/experiments/initialState';
-import ProjectDeleteModal from 'components/data-management/ProjectDeleteModal';
+import ProjectDeleteModal from 'components/data-management/project/ProjectDeleteModal';
 
 const mockStore = configureMockStore([thunk]);
 const experimentName = 'super cool experiment';
diff --git a/src/__test__/components/data-management/ProjectDetails.test.jsx b/src/__test__/components/data-management/ProjectDetails.test.jsx
index b910b66fcf..6855d58f9c 100644
--- a/src/__test__/components/data-management/ProjectDetails.test.jsx
+++ b/src/__test__/components/data-management/ProjectDetails.test.jsx
@@ -28,7 +28,7 @@ import { initialExperimentBackendStatus } from 'redux/reducers/backendStatus/ini
 import PipelineStatus from 'utils/pipelineStatusValues';
 import { sampleTech } from 'utils/constants';
 import UploadStatus from 'utils/upload/UploadStatus';
-import ProjectDetails from 'components/data-management/ProjectDetails';
+import ProjectDetails from 'components/data-management/project/ProjectDetails';
 
 import '__test__/test-utils/setupTests';
 import createTestComponentFactory from '__test__/test-utils/testComponentFactory';
diff --git a/src/__test__/components/data-management/ProjectMenu.test.jsx b/src/__test__/components/data-management/ProjectMenu.test.jsx
index 033ea7357e..eb798c5808 100644
--- a/src/__test__/components/data-management/ProjectMenu.test.jsx
+++ b/src/__test__/components/data-management/ProjectMenu.test.jsx
@@ -18,7 +18,7 @@ import { experiments } from '__test__/test-utils/mockData';
 import createTestComponentFactory from '__test__/test-utils/testComponentFactory';
 import mockAPI, { generateDefaultMockAPIResponses } from '__test__/test-utils/mockAPI';
 
-import ProjectMenu from 'components/data-management/ProjectMenu';
+import ProjectMenu from 'components/data-management/project/ProjectMenu';
 import { loadExperiments, setActiveExperiment } from 'redux/actions/experiments';
 
 const mockNavigateTo = jest.fn();
diff --git a/src/__test__/components/data-management/ProjectSearchBox.test.jsx b/src/__test__/components/data-management/ProjectSearchBox.test.jsx
index 906165ad72..b13941716f 100644
--- a/src/__test__/components/data-management/ProjectSearchBox.test.jsx
+++ b/src/__test__/components/data-management/ProjectSearchBox.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import ProjectSearchBox from 'components/data-management/ProjectSearchBox';
+import ProjectSearchBox from 'components/data-management/project/ProjectSearchBox';
 
 const onChangeSpy = jest.fn();
 
diff --git a/src/__test__/components/data-management/ProjectsList.test.jsx b/src/__test__/components/data-management/ProjectsList.test.jsx
index 3979ce904b..ea50b44ffc 100644
--- a/src/__test__/components/data-management/ProjectsList.test.jsx
+++ b/src/__test__/components/data-management/ProjectsList.test.jsx
@@ -5,8 +5,8 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import '@testing-library/jest-dom';
 import initialState, { experimentTemplate } from 'redux/reducers/experiments/initialState';
-import ProjectsList from 'components/data-management/ProjectsList';
-import ProjectCard from 'components/data-management/ProjectCard';
+import ProjectsList from 'components/data-management/project/ProjectsList';
+import ProjectCard from 'components/data-management/project/ProjectCard';
 import '__test__/test-utils/setupTests';
 
 const mockStore = configureMockStore([thunk]);
diff --git a/src/__test__/components/data-management/ProjectsListContainer.test.jsx b/src/__test__/components/data-management/ProjectsListContainer.test.jsx
index cf8f667c1b..8ad49732a1 100644
--- a/src/__test__/components/data-management/ProjectsListContainer.test.jsx
+++ b/src/__test__/components/data-management/ProjectsListContainer.test.jsx
@@ -3,7 +3,7 @@ import '__test__/test-utils/setupTests';
 
 import { render, screen } from '@testing-library/react';
 
-import ProjectsListContainer from 'components/data-management/ProjectsListContainer';
+import ProjectsListContainer from 'components/data-management/project/ProjectsListContainer';
 import { Provider } from 'react-redux';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
diff --git a/src/__test__/components/data-processing/PlotLayout.test.jsx b/src/__test__/components/data-processing/PlotLayout.test.jsx
new file mode 100644
index 0000000000..22f7ca6e6f
--- /dev/null
+++ b/src/__test__/components/data-processing/PlotLayout.test.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import thunk from 'redux-thunk';
+import configureStore from 'redux-mock-store';
+import PlotLayout from 'components/data-processing/PlotLayout';
+import '__test__/test-utils/setupTests';
+
+// Mock data and store setup
+const experimentId = 'exp1';
+const sampleId = 'sample1';
+const sampleIds = ['sample1', 'sample2'];
+const filterName = 'testFilter';
+const filterTableUuid = 'filterTableUuid1';
+const plots = {
+  plot1: {
+    plotUuid: 'plotUuid1',
+    plot: jest.fn(),
+    plotType: 'type1',
+  },
+  plot2: {
+    plotUuid: 'plotUuid2',
+    plot: jest.fn(),
+    plotType: 'type2',
+  },
+};
+const mockStore = configureStore([thunk]);
+const initialState = {
+  componentConfig: {
+    plotUuid1: { config: {}, plotData: {} },
+    plotUuid2: { config: {}, plotData: {} },
+    filterTableUuid1: { plotData: {} },
+  },
+  experimentSettings: {
+    processing: {
+      [filterName]: {
+        [sampleId]: { filterSettings: {} },
+      },
+    },
+  },
+};
+
+const renderComponent = (store) => render(
+  <Provider store={store}>
+    <PlotLayout
+      experimentId={experimentId}
+      plots={plots}
+      filterName={filterName}
+      filterTableUuid={filterTableUuid}
+      sampleId={sampleId}
+      sampleIds={sampleIds}
+      onConfigChange={jest.fn()}
+      stepDisabled={false}
+      plotStylingControlsConfig={[]}
+      renderCalculationConfig={() => <div />}
+      stepHadErrors={false}
+      allowedPlotActions={{}}
+    />
+  </Provider>,
+);
+
+describe('PlotLayout', () => {
+  let store;
+
+  beforeEach(() => {
+    store = mockStore(initialState);
+  });
+
+  it('renders without crashing', () => {
+    renderComponent(store);
+    expect(screen.getByText('Filtering Settings')).toBeInTheDocument();
+  });
+
+  it('changes selected plot on mini plot click', () => {
+    renderComponent(store);
+    const miniPlotButton = screen.getAllByRole('button')[0];
+    userEvent.click(miniPlotButton);
+    expect(plots.plot1.plot).toHaveBeenCalled();
+  });
+});
diff --git a/src/__test__/components/data-processing/StatusIndicator.test.jsx b/src/__test__/components/data-processing/StatusIndicator.test.jsx
index 7f9b787ca4..7e459ddcb4 100644
--- a/src/__test__/components/data-processing/StatusIndicator.test.jsx
+++ b/src/__test__/components/data-processing/StatusIndicator.test.jsx
@@ -4,7 +4,6 @@ import {
 } from '@testing-library/react';
 import StatusIndicator from 'components/data-processing/StatusIndicator';
 import { Provider } from 'react-redux';
-import { act } from 'react-dom/test-utils';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import fake from '__test__/test-utils/constants';
diff --git a/src/__test__/components/plots/MultiViewGrid.test.jsx b/src/__test__/components/plots/MultiViewGrid.test.jsx
index dae175b0b0..19593c6998 100644
--- a/src/__test__/components/plots/MultiViewGrid.test.jsx
+++ b/src/__test__/components/plots/MultiViewGrid.test.jsx
@@ -16,7 +16,7 @@ import { generateMultiViewGridPlotUuid } from 'utils/generateCustomPlotUuid';
 import { makeStore } from 'redux/store';
 import { updatePlotConfig } from 'redux/actions/componentConfig';
 import loadConditionalComponentConfig from 'redux/actions/componentConfig/loadConditionalComponentConfig';
-import { arrayMoveImmutable } from 'utils/array-move';
+import { arrayMoveImmutable } from 'utils/arrayUtils';
 
 import fake from '__test__/test-utils/constants';
 import mockAPI, {
diff --git a/src/__test__/pages/experiments/[experimentId]/plots-and-tables/dot-plot/index.test.jsx b/src/__test__/pages/experiments/[experimentId]/plots-and-tables/dot-plot/index.test.jsx
index 1cd5fdef31..2eaa0e485a 100644
--- a/src/__test__/pages/experiments/[experimentId]/plots-and-tables/dot-plot/index.test.jsx
+++ b/src/__test__/pages/experiments/[experimentId]/plots-and-tables/dot-plot/index.test.jsx
@@ -38,7 +38,7 @@ import { plotNames } from 'utils/constants';
 import ExportAsCSV from 'components/plots/ExportAsCSV';
 
 import waitForComponentToPaint from '__test__/test-utils/waitForComponentToPaint';
-import { arrayMoveImmutable } from 'utils/array-move';
+import { arrayMoveImmutable } from 'utils/arrayUtils';
 
 jest.mock('components/plots/ExportAsCSV', () => jest.fn(() => (<></>)));
 jest.mock('components/header/UserButton', () => () => <></>);
diff --git a/src/__test__/pages/experiments/[experimentId]/plots-and-tables/marker-heatmap/markerDragDrop.test.jsx b/src/__test__/pages/experiments/[experimentId]/plots-and-tables/marker-heatmap/markerDragDrop.test.jsx
index 264fccc836..712901ad1d 100644
--- a/src/__test__/pages/experiments/[experimentId]/plots-and-tables/marker-heatmap/markerDragDrop.test.jsx
+++ b/src/__test__/pages/experiments/[experimentId]/plots-and-tables/marker-heatmap/markerDragDrop.test.jsx
@@ -23,7 +23,7 @@ import mockAPI, {
 } from '__test__/test-utils/mockAPI';
 import createTestComponentFactory from '__test__/test-utils/testComponentFactory';
 import waitForComponentToPaint from '__test__/test-utils/waitForComponentToPaint';
-import { arrayMoveImmutable } from 'utils/array-move';
+import { arrayMoveImmutable } from 'utils/arrayUtils';
 
 jest.mock('components/header/UserButton', () => () => <></>);
 jest.mock('react-resize-detector', () => (props) => {
diff --git a/src/__test__/pages/experiments/[experimentId]/plots-and-tables/normalized-matrix/index.test.jsx b/src/__test__/pages/experiments/[experimentId]/plots-and-tables/normalized-matrix/index.test.jsx
index 978ba2d9fe..b0b2a493ab 100644
--- a/src/__test__/pages/experiments/[experimentId]/plots-and-tables/normalized-matrix/index.test.jsx
+++ b/src/__test__/pages/experiments/[experimentId]/plots-and-tables/normalized-matrix/index.test.jsx
@@ -17,11 +17,11 @@ import { makeStore } from 'redux/store';
 import mockAPI, { generateDefaultMockAPIResponses, promiseResponse, statusResponse } from '__test__/test-utils/mockAPI';
 import cellSetsData from '__test__/data/cell_sets_with_clm.json';
 import fetchWork from 'utils/work/fetchWork';
-import writeToFileURL from 'utils/writeToFileURL';
+import writeToFileURL from 'utils/upload/writeToFileURL';
 import downloadFromUrl from 'utils/downloadFromUrl';
 
 jest.mock('utils/work/fetchWork');
-jest.mock('utils/writeToFileURL');
+jest.mock('utils/upload/writeToFileURL');
 jest.mock('utils/downloadFromUrl');
 jest.mock('utils/pushNotificationMessage');
 
diff --git a/src/__test__/utils/writeToFileURL.test.js b/src/__test__/utils/writeToFileURL.test.js
index c7978e321a..c125dff87a 100644
--- a/src/__test__/utils/writeToFileURL.test.js
+++ b/src/__test__/utils/writeToFileURL.test.js
@@ -1,4 +1,4 @@
-import writeToFileURL from 'utils/writeToFileURL';
+import writeToFileURL from 'utils/upload/writeToFileURL';
 
 const mockCreateObjectURL = jest.fn(() => 'mockURL');
 
diff --git a/src/components/ColorPicker.jsx b/src/components/ColorPicker.jsx
index 10592113c6..8144e675dd 100644
--- a/src/components/ColorPicker.jsx
+++ b/src/components/ColorPicker.jsx
@@ -34,8 +34,8 @@ const ColorPicker = (props) => {
         content={pickerComponent()}
         placement='bottom'
         trigger='click'
-        visible={visible}
-        onVisibleChange={(newVisible) => setVisible(newVisible)}
+        open={visible}
+        onOpenChange={(newVisible) => setVisible(newVisible)}
         destroyTooltipOnHide
         zIndex={zIndex}
       >
diff --git a/src/components/ContentWrapper.jsx b/src/components/ContentWrapper.jsx
index 26cc97b51c..e6423d6ad0 100644
--- a/src/components/ContentWrapper.jsx
+++ b/src/components/ContentWrapper.jsx
@@ -400,25 +400,53 @@ const ContentWrapper = (props) => {
       .includes(currentModule) && disableIfNoExperiment;
     const seuratCompleteDisable = disabledIfSeuratComplete && seuratComplete;
 
-    return (
-      <Menu.Item
-        id={module}
-        disabled={notProcessedExperimentDisable || pipelineStatusDisable
-          || seuratCompleteDisable || nonExperimentModule}
-        key={module}
-        icon={icon}
-        onClick={() => navigateTo(
-          module,
-          { experimentId: currentExperimentId },
-        )}
-      >
-        {name}
-      </Menu.Item>
-    );
+    return {
+      key: module,
+      icon,
+      label: name,
+      disabled: notProcessedExperimentDisable || pipelineStatusDisable
+      || seuratCompleteDisable || nonExperimentModule,
+      onClick: () => navigateTo(
+        module,
+        { experimentId: currentExperimentId },
+      ),
+    };
   };
 
   if (!user) return <></>;
 
+  const mainMenuItems = menuLinks
+    .filter((item) => !item.disableIfNoExperiment)
+    .map(menuItemRender);
+
+  const groupMenuItems = menuLinks
+    .filter((item) => item.disableIfNoExperiment)
+    .map(menuItemRender);
+
+  const groupItem = {
+    type: 'group',
+    label: !collapsed && (
+      <Tooltip title={experimentName} placement='right'>
+        <Space direction='vertical' style={{ width: '100%', cursor: 'default' }}>
+          <Text
+            style={{
+              width: '100%',
+              color: '#999999',
+            }}
+            strong
+            ellipsis
+          >
+            {experimentName || 'No analysis'}
+          </Text>
+          {experimentName && <Text style={{ color: '#999999' }}>Current analysis</Text>}
+        </Space>
+      </Tooltip>
+    ),
+    children: groupMenuItems,
+  };
+
+  const menuItems = [...mainMenuItems, groupItem];
+
   return (
     <>
       <DndProvider backend={MultiBackend} options={HTML5ToTouch}>
@@ -444,43 +472,10 @@ const ContentWrapper = (props) => {
               <Menu
                 data-test-id={integrationTestConstants.ids.NAVIGATION_MENU}
                 theme='dark'
-                selectedKeys={
-                  menuLinks
-                    .filter(({ module }) => module === currentModule)
-                    .map(({ module }) => module)
-                }
+                selectedKeys={menuLinks.filter(({ module }) => module === currentModule).map(({ module }) => module)}
                 mode='inline'
-              >
-                {menuLinks.filter((item) => !item.disableIfNoExperiment).map(menuItemRender)}
-
-                <Menu.ItemGroup
-                  title={!collapsed && (
-                    <Tooltip title={experimentName} placement='right'>
-                      <Space direction='vertical' style={{ width: '100%', cursor: 'default' }}>
-                        <Text
-                          style={{
-                            width: '100%',
-                            color: '#999999',
-                          }}
-                          strong
-                          ellipsis
-                        >
-                          {experimentName || 'No analysis'}
-                        </Text>
-                        {experimentName && (
-                          <Text style={{ color: '#999999' }}>
-                            Current analysis
-                          </Text>
-                        )}
-                      </Space>
-                    </Tooltip>
-
-                  )}
-                >
-                  {menuLinks.filter((item) => item.disableIfNoExperiment).map(menuItemRender)}
-                </Menu.ItemGroup>
-
-              </Menu>
+                items={menuItems}
+              />
             </div>
           </Sider>
           <Layout
diff --git a/src/components/data-exploration/CellInfo.jsx b/src/components/data-exploration/CellInfo.jsx
index 6e75ced7df..afdcf361a5 100644
--- a/src/components/data-exploration/CellInfo.jsx
+++ b/src/components/data-exploration/CellInfo.jsx
@@ -58,7 +58,7 @@ const CellInfo = (props) => {
           </div>
         ) : <></>}
         {cellInfo.cellSets?.length > 0 ? cellInfo.cellSets.map((cellSetName) => (
-          <div style={cellInfoStyle}>
+          <div key={`${cellSetName}-key`} style={cellInfoStyle}>
             {cellSetName}
           </div>
         )) : <></>}
diff --git a/src/components/data-exploration/cell-sets-tool/SubsetCellSetsModal.jsx b/src/components/data-exploration/cell-sets-tool/SubsetCellSetsModal.jsx
index 38cadf6ac3..749d37bd1b 100644
--- a/src/components/data-exploration/cell-sets-tool/SubsetCellSetsModal.jsx
+++ b/src/components/data-exploration/cell-sets-tool/SubsetCellSetsModal.jsx
@@ -15,7 +15,7 @@ const SubsetCellSetsModal = (props) => {
       data-testid='subsetCellSetsModal'
       title='Subset cell sets'
       okText='Create'
-      visible
+      open
       onOk={() => { onOk(subsetExperimentName.current); }}
       cancelText='Cancel'
       onCancel={onCancel}
diff --git a/src/components/data-exploration/differential-expression-tool/LaunchPathwayAnalysisModal.jsx b/src/components/data-exploration/differential-expression-tool/LaunchPathwayAnalysisModal.jsx
index 7b703f7bb1..fe3de26b89 100644
--- a/src/components/data-exploration/differential-expression-tool/LaunchPathwayAnalysisModal.jsx
+++ b/src/components/data-exploration/differential-expression-tool/LaunchPathwayAnalysisModal.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import launchPathwayService from 'utils/pathwayAnalysis/launchPathwayService';
 import getDiffExprGenes from 'utils/extraActionCreators/differentialExpression/getDiffExprGenes';
-import writeToFileURL from 'utils/writeToFileURL';
+import writeToFileURL from 'utils/upload/writeToFileURL';
 import downloadFromUrl from 'utils/downloadFromUrl';
 
 import getBackgroundExpressedGenes from 'utils/extraActionCreators/differentialExpression/getBackgroundExpressedGenes';
@@ -81,7 +81,7 @@ const LaunchPathwayAnalysisModal = (props) => {
   return (
     <>
       <Modal
-        visible
+        open
         title='Pathway Analysis'
         width='50%'
         onCancel={onCancel}
diff --git a/src/components/data-exploration/generic-gene-table/ComponentActions.jsx b/src/components/data-exploration/generic-gene-table/ComponentActions.jsx
index 17c5f573e7..8ae922eac8 100644
--- a/src/components/data-exploration/generic-gene-table/ComponentActions.jsx
+++ b/src/components/data-exploration/generic-gene-table/ComponentActions.jsx
@@ -60,7 +60,7 @@ const ComponentActions = (props) => {
   }
 
   return (
-    <Dropdown arrow type='link' size='small' overlay={menu} trigger={['click']}>
+    <Dropdown arrow type='link' size='small' menu={menu} trigger={['click']}>
       <Button type='link' size='small'>
         {name}
       </Button>
diff --git a/src/components/data-exploration/generic-gene-table/ExpressionCellSetModal.jsx b/src/components/data-exploration/generic-gene-table/ExpressionCellSetModal.jsx
index 75bf202341..08de4d88c0 100644
--- a/src/components/data-exploration/generic-gene-table/ExpressionCellSetModal.jsx
+++ b/src/components/data-exploration/generic-gene-table/ExpressionCellSetModal.jsx
@@ -52,7 +52,7 @@ const ExpressionCellSetModal = (props) => {
 
   return (
     <Modal
-      visible
+      open
       title='Create a new cell set based on gene expression'
       onCancel={onCancel}
       footer={[
diff --git a/src/components/data-exploration/heatmap/HeatmapSettings.jsx b/src/components/data-exploration/heatmap/HeatmapSettings.jsx
index ca128009a0..44e9ee4534 100644
--- a/src/components/data-exploration/heatmap/HeatmapSettings.jsx
+++ b/src/components/data-exploration/heatmap/HeatmapSettings.jsx
@@ -3,7 +3,7 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import {
-  Button, Dropdown, Tooltip
+  Button, Dropdown, Tooltip,
 } from 'antd';
 
 import PropTypes from 'prop-types';
@@ -15,20 +15,24 @@ const HeatmapSettings = (props) => {
 
   const menuItems = [
     {
-      label: 'Metadata tracks', key: 'metadataTracks', children: [
+      label: 'Metadata tracks',
+      key: 'metadataTracks',
+      children: [
         {
           label: (<HeatmapMetadataTrackSettings componentType={componentType} />),
-          key: "metadataTracksChild",
-        }
-      ]
+          key: 'metadataTracksChild',
+        },
+      ],
     },
     {
-      label: 'Group by', key: 'groupBy', children: [
+      label: 'Group by',
+      key: 'groupBy',
+      children: [
         {
           label: (<HeatmapGroupBySettings componentType={componentType} />),
-          key: "groupByChild",
-        }
-      ]
+          key: 'groupByChild',
+        },
+      ],
     },
   ];
 
diff --git a/src/components/data-management/DownloadDataButton.jsx b/src/components/data-management/DownloadDataButton.jsx
index 4356ee03a4..d8ab5c4c93 100644
--- a/src/components/data-management/DownloadDataButton.jsx
+++ b/src/components/data-management/DownloadDataButton.jsx
@@ -101,7 +101,7 @@ const DownloadDataButton = () => {
             {downloadingProcessedSeurat && <ClipLoader size={20} color='#8f0b10' />}
           </Space>
         </Tooltip>
-      )
+      ),
     },
     {
       key: 'download-processing-settings',
@@ -122,9 +122,9 @@ const DownloadDataButton = () => {
               Data Processing settings (.txt)
             </Tooltip>
           )
-      )
-    }
-  ]
+      ),
+    },
+  ];
 
   return (
     <Dropdown
@@ -135,7 +135,7 @@ const DownloadDataButton = () => {
         items: menuItems,
         onClick: (e) => {
           if (e.key !== 'download-processed-seurat') setDropdownExpanded(false);
-        }
+        },
       }}
       placement='bottomRight'
       disabled={
diff --git a/src/components/data-management/FileUploadModal.jsx b/src/components/data-management/FileUploadModal.jsx
index c3a7515967..1469d0ee79 100644
--- a/src/components/data-management/FileUploadModal.jsx
+++ b/src/components/data-management/FileUploadModal.jsx
@@ -172,7 +172,7 @@ const FileUploadModal = (props) => {
   return (
     <Modal
       title=''
-      visible
+      open
       onCancel={onCancel}
       width='50%'
       footer={(
diff --git a/src/components/data-management/NewProjectModal.jsx b/src/components/data-management/NewProjectModal.jsx
index b113ecd65d..2a96b4d06d 100644
--- a/src/components/data-management/NewProjectModal.jsx
+++ b/src/components/data-management/NewProjectModal.jsx
@@ -65,7 +65,7 @@ const NewProjectModal = (props) => {
     <Modal
       className={integrationTestConstants.classes.NEW_PROJECT_MODAL}
       title='Create a new project'
-      visible
+      open
       footer={(
         <Button
           data-test-id={integrationTestConstants.ids.CONFIRM_CREATE_NEW_PROJECT}
diff --git a/src/components/data-management/PrivacyPolicyIntercept.jsx b/src/components/data-management/PrivacyPolicyIntercept.jsx
index eb36e25186..47d8f50474 100644
--- a/src/components/data-management/PrivacyPolicyIntercept.jsx
+++ b/src/components/data-management/PrivacyPolicyIntercept.jsx
@@ -35,7 +35,7 @@ const PrivacyPolicyIntercept = (props) => {
   return (
     <Modal
       title='Agree to the Biomage privacy policy to continue using Cellenics'
-      visible
+      open
       centered
       className={styles['ok-to-the-right-modal']}
       cancelText='Sign out'
diff --git a/src/components/data-management/ShareExperimentModal.jsx b/src/components/data-management/ShareExperimentModal.jsx
index 0624312130..80b863db26 100644
--- a/src/components/data-management/ShareExperimentModal.jsx
+++ b/src/components/data-management/ShareExperimentModal.jsx
@@ -63,7 +63,7 @@ const ShareExperimentModal = (props) => {
 
   return (
     <Modal
-      visible
+      open
       title={[<UserAddOutlined />, 'Share with collaborators']}
       onCancel={onCancel}
       okButtonText='Done'
diff --git a/src/components/data-management/UploadDetailsModal.jsx b/src/components/data-management/UploadDetailsModal.jsx
index 9dc1c1df8f..5e7d4ba4fa 100644
--- a/src/components/data-management/UploadDetailsModal.jsx
+++ b/src/components/data-management/UploadDetailsModal.jsx
@@ -12,7 +12,7 @@ dayjs.extend(utc);
 
 const UploadDetailsModal = (props) => {
   const {
-    visible, onCancel, file, extraFields, onDownload, onRetry, onDelete,
+    onCancel, file, extraFields, onDownload, onRetry, onDelete,
   } = props;
 
   const {
diff --git a/src/components/data-management/metadata/MetadataUploadModal.jsx b/src/components/data-management/metadata/MetadataUploadModal.jsx
index 67f9a20cf2..4320bbe413 100644
--- a/src/components/data-management/metadata/MetadataUploadModal.jsx
+++ b/src/components/data-management/metadata/MetadataUploadModal.jsx
@@ -100,7 +100,7 @@ const MetadataUploadModal = (props) => {
   return (
     <Modal
       title=''
-      visible
+      open
       onCancel={onCancel}
       width='40%'
       footer={(
diff --git a/src/components/data-management/ProjectCard.jsx b/src/components/data-management/project/ProjectCard.jsx
similarity index 97%
rename from src/components/data-management/ProjectCard.jsx
rename to src/components/data-management/project/ProjectCard.jsx
index ab0ccb1c97..6b4e6163fd 100644
--- a/src/components/data-management/ProjectCard.jsx
+++ b/src/components/data-management/project/ProjectCard.jsx
@@ -12,7 +12,7 @@ import integrationTestConstants from 'utils/integrationTestConstants';
 import EditableField from 'components/EditableField';
 import PrettyTime from 'components/PrettyTime';
 
-import ProjectDeleteModal from 'components/data-management/ProjectDeleteModal';
+import ProjectDeleteModal from 'components/data-management/project/ProjectDeleteModal';
 
 const { Item } = Descriptions;
 
diff --git a/src/components/data-management/ProjectDeleteModal.jsx b/src/components/data-management/project/ProjectDeleteModal.jsx
similarity index 99%
rename from src/components/data-management/ProjectDeleteModal.jsx
rename to src/components/data-management/project/ProjectDeleteModal.jsx
index 54f1363636..0f4d6d53b5 100644
--- a/src/components/data-management/ProjectDeleteModal.jsx
+++ b/src/components/data-management/project/ProjectDeleteModal.jsx
@@ -23,7 +23,7 @@ const ProjectDeleteModal = (props) => {
     <Modal
       className={integrationTestConstants.classes.DELETE_PROJECT_MODAL}
       title='Confirm delete'
-      visible
+      open
       footer={(
         <Space>
           <Button
diff --git a/src/components/data-management/ProjectDetails.jsx b/src/components/data-management/project/ProjectDetails.jsx
similarity index 97%
rename from src/components/data-management/ProjectDetails.jsx
rename to src/components/data-management/project/ProjectDetails.jsx
index 9f947c0ab8..470be99150 100644
--- a/src/components/data-management/ProjectDetails.jsx
+++ b/src/components/data-management/project/ProjectDetails.jsx
@@ -15,7 +15,7 @@ import EditableParagraph from 'components/EditableParagraph';
 import { layout } from 'utils/constants';
 
 import SamplesTable from 'components/data-management/SamplesTable';
-import ProjectMenu from 'components/data-management/ProjectMenu';
+import ProjectMenu from 'components/data-management/project/ProjectMenu';
 import AddMetadataButton from 'components/data-management/metadata/AddMetadataButton';
 
 const { Text, Title } = Typography;
diff --git a/src/components/data-management/ProjectMenu.jsx b/src/components/data-management/project/ProjectMenu.jsx
similarity index 86%
rename from src/components/data-management/ProjectMenu.jsx
rename to src/components/data-management/project/ProjectMenu.jsx
index 389bace23f..f25fce6460 100644
--- a/src/components/data-management/ProjectMenu.jsx
+++ b/src/components/data-management/project/ProjectMenu.jsx
@@ -6,10 +6,10 @@ import {
 
 import integrationTestConstants from 'utils/integrationTestConstants';
 import processUpload from 'utils/upload/processUpload';
-import DownloadDataButton from './DownloadDataButton';
-import LaunchAnalysisButton from './LaunchAnalysisButton';
-import FileUploadModal from './FileUploadModal';
-import ShareExperimentModal from './ShareExperimentModal';
+import DownloadDataButton from 'components/data-management/DownloadDataButton';
+import LaunchAnalysisButton from 'components/data-management/LaunchAnalysisButton';
+import FileUploadModal from 'components/data-management/FileUploadModal';
+import ShareExperimentModal from 'components/data-management/ShareExperimentModal';
 
 const ProjectMenu = () => {
   const dispatch = useDispatch();
diff --git a/src/components/data-management/ProjectSearchBox.jsx b/src/components/data-management/project/ProjectSearchBox.jsx
similarity index 100%
rename from src/components/data-management/ProjectSearchBox.jsx
rename to src/components/data-management/project/ProjectSearchBox.jsx
diff --git a/src/components/data-management/ProjectsList.jsx b/src/components/data-management/project/ProjectsList.jsx
similarity index 100%
rename from src/components/data-management/ProjectsList.jsx
rename to src/components/data-management/project/ProjectsList.jsx
diff --git a/src/components/data-management/ProjectsListContainer.jsx b/src/components/data-management/project/ProjectsListContainer.jsx
similarity index 100%
rename from src/components/data-management/ProjectsListContainer.jsx
rename to src/components/data-management/project/ProjectsListContainer.jsx
diff --git a/src/components/data-processing/CellSizeDistribution/CalculationConfig.jsx b/src/components/data-processing/CellSizeDistribution/CalculationConfig.jsx
index 2fcc20174f..5114b8317d 100644
--- a/src/components/data-processing/CellSizeDistribution/CalculationConfig.jsx
+++ b/src/components/data-processing/CellSizeDistribution/CalculationConfig.jsx
@@ -60,11 +60,17 @@ const CellSizeDistributionConfig = (props) => {
     </>
   );
 };
+CellSizeDistributionConfig.defaultProps = {
+  updateSettings: () => {},
+  config: {},
+  disabled: false,
+  highestUmi: null,
+};
 CellSizeDistributionConfig.propTypes = {
-  updateSettings: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  disabled: PropTypes.bool.isRequired,
-  highestUmi: PropTypes.number.isRequired,
+  updateSettings: PropTypes.func,
+  config: PropTypes.object,
+  disabled: PropTypes.bool,
+  highestUmi: PropTypes.number,
 };
 
 export default CellSizeDistributionConfig;
diff --git a/src/components/data-processing/CellSizeDistribution/CellSizeDistribution.jsx b/src/components/data-processing/CellSizeDistribution/CellSizeDistribution.jsx
index fb1d8e1210..5b846b6376 100644
--- a/src/components/data-processing/CellSizeDistribution/CellSizeDistribution.jsx
+++ b/src/components/data-processing/CellSizeDistribution/CellSizeDistribution.jsx
@@ -1,68 +1,33 @@
-import React, {
-  useState, useEffect, useCallback, useRef,
-} from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import _ from 'lodash';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import {
-  Collapse,
-  Row,
-  Col,
-  Space,
-  Skeleton,
-  Divider,
-} from 'antd';
-
+import { useSelector } from 'react-redux';
+import _ from 'lodash';
 import { generateDataProcessingPlotUuid } from 'utils/generateCustomPlotUuid';
-import {
-  updatePlotConfig,
-  loadPlotConfig,
-  savePlotConfig,
-} from 'redux/actions/componentConfig';
 
-import CellSizeDistributionHistogram from '../../plots/CellSizeDistributionHistogram';
-import CellSizeDistributionKneePlot from '../../plots/CellSizeDistributionKneePlot';
-
-import PlotStyling from '../../plots/styling/PlotStyling';
-import MiniPlot from '../../plots/MiniPlot';
-import CalculationConfigContainer from '../CalculationConfigContainer';
+import PlotLayout from 'components/data-processing/PlotLayout';
+import BasicFilterPlot from 'components/plots/BasicFilterPlot';
+import generateKneePlotSpec from 'utils/plotSpecs/generateCellSizeDistributionKneePlot';
+import generateHistogramSpec from 'utils/plotSpecs/generateCellSizeDistributionHistogram';
 import CalculationConfig from './CalculationConfig';
-import FilterResultTable from '../FilterResultTable';
-
-const { Panel } = Collapse;
 
 const HIGHEST_UMI_DEFAULT = 17000;
-
 const filterName = 'cellSizeDistribution';
 
-const allowedPlotActions = {
-  export: true,
-  compiled: false,
-  source: false,
-  editor: false,
-};
-
-const CellSizeDistribution = (props) => {
-  const {
-    experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors,
-  } = props;
-
-  const dispatch = useDispatch();
-
-  const [selectedPlot, setSelectedPlot] = useState('kneePlot');
-  const [plot, setPlot] = useState(null);
-  const highestUmiRef = useRef(null);
+const CellSizeDistribution = ({
+  experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors,
+}) => {
+  const [highestUmi, setHighestUmi] = useState(null);
   const filterTableUuid = generateDataProcessingPlotUuid(sampleId, filterName, 3);
-  const filterTableData = useSelector((state) => state.componentConfig[filterTableUuid]?.plotData);
 
-  const debounceSave = useCallback(
-    _.debounce((plotUuid) => dispatch(savePlotConfig(experimentId, plotUuid)), 2000), [],
+  const histogramPlotData = useSelector(
+    (state) => state.componentConfig[
+      generateDataProcessingPlotUuid(sampleId, filterName, 1)]?.plotData,
   );
 
-  const updatePlotWithChanges = (obj) => {
-    dispatch(updatePlotConfig(plots[selectedPlot].plotUuid, obj));
-    debounceSave(plots[selectedPlot].plotUuid);
-  };
+  useEffect(() => {
+    setHighestUmi(_.maxBy(histogramPlotData,
+      (datum) => datum.u)?.u ?? HIGHEST_UMI_DEFAULT);
+  }, [histogramPlotData]);
 
   const plots = {
     kneePlot: {
@@ -70,11 +35,10 @@ const CellSizeDistribution = (props) => {
       plotUuid: generateDataProcessingPlotUuid(sampleId, filterName, 0),
       plotType: 'cellSizeDistributionKneePlot',
       plot: (config, plotData, actions) => (
-        <CellSizeDistributionKneePlot
-          experimentId={experimentId}
-          config={config}
-          plotData={plotData}
+        <BasicFilterPlot
+          spec={generateKneePlotSpec(config, plotData)}
           actions={actions}
+          miniPlot={config.miniPlot}
         />
       ),
     },
@@ -83,58 +47,15 @@ const CellSizeDistribution = (props) => {
       plotUuid: generateDataProcessingPlotUuid(sampleId, filterName, 1),
       plotType: 'cellSizeDistributionHistogram',
       plot: (config, plotData, actions) => (
-        <CellSizeDistributionHistogram
-          experimentId={experimentId}
-          config={config}
-          plotData={plotData}
+        <BasicFilterPlot
+          spec={generateHistogramSpec(config, plotData, highestUmi)}
           actions={actions}
-          highestUmi={highestUmiRef.current}
+          miniPlot={config.miniPlot}
         />
       ),
     },
   };
 
-  const selectedConfig = useSelector(
-    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.config,
-  );
-  const expConfig = useSelector(
-    (state) => state.experimentSettings.processing[filterName][sampleId].filterSettings,
-  );
-  const selectedPlotData = useSelector(
-    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.plotData,
-  );
-
-  const histogramPlotData = useSelector(
-    (state) => state.componentConfig[plots.histogram.plotUuid]?.plotData,
-  );
-
-  useEffect(() => {
-    highestUmiRef.current = _.maxBy(
-      histogramPlotData,
-      (datum) => datum.u,
-    )?.u ?? HIGHEST_UMI_DEFAULT;
-  }, [histogramPlotData]);
-
-  useEffect(() => {
-    Object.values(plots).forEach((obj) => {
-      if (!selectedConfig) {
-        dispatch(loadPlotConfig(experimentId, obj.plotUuid, obj.plotType));
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!filterTableData) dispatch(loadPlotConfig(experimentId, filterTableUuid, 'filterTable'));
-  }, []);
-
-  useEffect(() => {
-    if (selectedConfig && selectedPlotData && expConfig) {
-      const newConfig = _.clone(selectedConfig);
-      _.merge(newConfig, expConfig);
-      setPlot(plots[selectedPlot].plot(newConfig, selectedPlotData, allowedPlotActions));
-    }
-  }, [expConfig, selectedConfig, selectedPlotData]);
-
   const plotStylingControlsConfig = [
     {
       panelTitle: 'Legend',
@@ -155,104 +76,30 @@ const CellSizeDistribution = (props) => {
     {
       panelTitle: 'Font',
       controls: ['font'],
-    },
-  ];
-
-  const renderPlot = () => {
-    // Spinner for main window
-    if (!selectedConfig || !selectedPlotData || stepHadErrors) {
-      return (
-        <center>
-          <Skeleton.Image style={{ width: 400, height: 400 }} />
-        </center>
-      );
-    }
-
-    if (plot) {
-      return plot;
-    }
-  };
+    }];
 
+  const renderCalculationConfig = () => <CalculationConfig highestUmi={highestUmi} />;
   return (
-    <>
-      <Row gutter={16}>
-        <Col span={18}>
-          <Row>
-            <Col flex='auto'>
-              {renderPlot()}
-            </Col>
-            <Col flex='1 0px'>
-              <Space direction='vertical'>
-                {Object.entries(plots).map(([key, plotObj]) => (
-                  <button
-                    type='button'
-                    key={key}
-                    onClick={() => setSelectedPlot(key)}
-                    style={{
-                      margin: 0,
-                      backgroundColor: 'transparent',
-                      align: 'center',
-                      padding: '8px',
-                      border: '1px solid #000',
-                      cursor: 'pointer',
-                    }}
-                  >
-
-                    <MiniPlot
-                      experimentId={experimentId}
-                      plotUuid={plotObj.plotUuid}
-                      plotFn={plotObj.plot}
-                      actions={false}
-                    />
-
-                  </button>
-
-                ))}
-              </Space>
-            </Col>
-          </Row>
-          <Divider />
-          <Row style={{ marginBottom: '1em' }}>
-            <Col>
-              {filterTableData
-                ? <FilterResultTable tableData={filterTableData} />
-                : <Skeleton />}
-            </Col>
-          </Row>
-        </Col>
-        <Col flex='1 0px'>
-          <Collapse defaultActiveKey='settings'>
-            <Panel header='Filtering Settings' key='settings'>
-              <CalculationConfigContainer
-                filterUuid={filterName}
-                sampleId={sampleId}
-                sampleIds={sampleIds}
-                onConfigChange={onConfigChange}
-                plotType='bin step'
-                stepDisabled={stepDisabled}
-              >
-                <CalculationConfig highestUmi={highestUmiRef.current} />
-              </CalculationConfigContainer>
-            </Panel>
-            <Panel header='Plot styling' key='styling'>
-              <div style={{ height: 8 }} />
-              <PlotStyling
-                formConfig={plotStylingControlsConfig}
-                config={selectedConfig}
-                onUpdate={updatePlotWithChanges}
-              />
-            </Panel>
-          </Collapse>
-        </Col>
-      </Row>
-    </>
+    <PlotLayout
+      experimentId={experimentId}
+      plots={plots}
+      filterName={filterName}
+      filterTableUuid={filterTableUuid}
+      sampleId={sampleId}
+      sampleIds={sampleIds}
+      onConfigChange={onConfigChange}
+      stepDisabled={stepDisabled}
+      plotStylingControlsConfig={plotStylingControlsConfig}
+      renderCalculationConfig={renderCalculationConfig}
+      stepHadErrors={stepHadErrors}
+    />
   );
 };
 
 CellSizeDistribution.propTypes = {
   experimentId: PropTypes.string.isRequired,
   sampleId: PropTypes.string.isRequired,
-  sampleIds: PropTypes.array.isRequired,
+  sampleIds: PropTypes.arrayOf(PropTypes.string).isRequired,
   onConfigChange: PropTypes.func.isRequired,
   stepDisabled: PropTypes.bool,
   stepHadErrors: PropTypes.bool.isRequired,
diff --git a/src/components/data-processing/ChangesNotAppliedModal.jsx b/src/components/data-processing/ChangesNotAppliedModal.jsx
index 83bf29a536..5facd11b00 100644
--- a/src/components/data-processing/ChangesNotAppliedModal.jsx
+++ b/src/components/data-processing/ChangesNotAppliedModal.jsx
@@ -78,7 +78,7 @@ const ChangesNotAppliedModal = (props) => {
       <Modal
         title='Changes not applied'
         onCancel={() => onCloseModal()}
-        visible={!QCDisabledModalVisible}
+        open={!QCDisabledModalVisible}
         footer={(
           <Space size='large' style={{ display: 'flex', justifyContent: 'center' }}>
             <Button
diff --git a/src/components/data-processing/Classifier/CalculationConfig.jsx b/src/components/data-processing/Classifier/CalculationConfig.jsx
index 90ea97f811..d9236e34ca 100644
--- a/src/components/data-processing/Classifier/CalculationConfig.jsx
+++ b/src/components/data-processing/Classifier/CalculationConfig.jsx
@@ -10,7 +10,6 @@ import { InfoCircleOutlined } from '@ant-design/icons';
 
 const ClassifierConfig = (props) => {
   const {
-    // eslint-disable-next-line no-unused-vars
     config, disabled, updateSettings,
   } = props;
 
@@ -56,10 +55,16 @@ const ClassifierConfig = (props) => {
   );
 };
 
+ClassifierConfig.defaultProps = {
+  updateSettings: () => {},
+  config: {},
+  disabled: false,
+};
+
 ClassifierConfig.propTypes = {
-  updateSettings: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  disabled: PropTypes.bool.isRequired,
+  updateSettings: PropTypes.func,
+  config: PropTypes.object,
+  disabled: PropTypes.bool,
 };
 
 export default ClassifierConfig;
diff --git a/src/components/data-processing/Classifier/Classifier.jsx b/src/components/data-processing/Classifier/Classifier.jsx
index 69c3fa8d87..f38f8e61b2 100644
--- a/src/components/data-processing/Classifier/Classifier.jsx
+++ b/src/components/data-processing/Classifier/Classifier.jsx
@@ -1,89 +1,34 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import _ from 'lodash';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import {
-  Collapse, Row, Col, Space, Skeleton, Divider,
-} from 'antd';
 
 import { generateDataProcessingPlotUuid } from 'utils/generateCustomPlotUuid';
-import {
-  updatePlotConfig,
-  loadPlotConfig,
-  savePlotConfig,
-} from 'redux/actions/componentConfig';
-
-import ClassifierEmptyDropsPlot from '../../plots/ClassifierEmptyDropsPlot';
-import ClassifierKneePlot from '../../plots/ClassifierKneePlot';
-
-import PlotStyling from '../../plots/styling/PlotStyling';
-import MiniPlot from '../../plots/MiniPlot';
-import CalculationConfigContainer from '../CalculationConfigContainer';
+import generateKneePlotSpec from 'utils/plotSpecs/generateClassifierKneePlot';
+import generateEmptyDropsSpec from 'utils/plotSpecs/generateClassifierEmptyDropsPlot';
+import BasicFilterPlot from 'components/plots/BasicFilterPlot';
+import PlotLayout from 'components/data-processing/PlotLayout';
 import CalculationConfig from './CalculationConfig';
-import FilterResultTable from '../FilterResultTable';
-
-const { Panel } = Collapse;
 
 const filterName = 'classifier';
 
-const allowedPlotActions = {
-  export: true,
-  compiled: false,
-  source: false,
-  editor: false,
-};
-
-const plotStylingControlsConfig = [
-  {
-    panelTitle: 'Plot Dimensions',
-    controls: ['dimensions'],
-  },
-  {
-    panelTitle: 'Axes',
-    controls: ['axesWithRanges'],
-  },
-  {
-    panelTitle: 'Title',
-    controls: ['title'],
-  },
-  {
-    panelTitle: 'Font',
-    controls: ['font'],
-  },
-];
-
-const Classifier = (props) => {
-  const {
-    experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors,
-  } = props;
-
-  const dispatch = useDispatch();
-
-  const [selectedPlot, setSelectedPlot] = useState('kneePlot');
-  const [plot, setPlot] = useState(null);
+const Classifier = ({
+  experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors,
+}) => {
   const filterTableUuid = generateDataProcessingPlotUuid(sampleId, filterName, 2);
-  const filterTableData = useSelector((state) => state.componentConfig[filterTableUuid]?.plotData);
 
-  const debounceSave = useCallback(
-    _.debounce((uuid) => dispatch(savePlotConfig(experimentId, uuid)), 2000), [],
+  const expConfig = useSelector(
+    (state) => state.experimentSettings.processing[filterName][sampleId].filterSettings,
   );
-
-  const updatePlotWithChanges = (obj) => {
-    dispatch(updatePlotConfig(plots[selectedPlot].plotUuid, obj));
-    debounceSave(plots[selectedPlot].plotUuid);
-  };
-
   const plots = {
     kneePlot: {
       title: 'Knee Plot',
       plotUuid: generateDataProcessingPlotUuid(sampleId, filterName, 1),
       plotType: 'classifierKneePlot',
       plot: (config, plotData, actions) => (
-        <ClassifierKneePlot
-          config={config}
-          expConfig={expConfig}
-          plotData={plotData}
+        <BasicFilterPlot
+          spec={generateKneePlotSpec(config, expConfig, plotData)}
           actions={actions}
+          miniPlot={config.miniPlot}
         />
       ),
     },
@@ -92,134 +37,50 @@ const Classifier = (props) => {
       plotUuid: generateDataProcessingPlotUuid(sampleId, filterName, 0),
       plotType: 'classifierEmptyDropsPlot',
       plot: (config, plotData, actions) => (
-        <ClassifierEmptyDropsPlot
-          config={config}
-          expConfig={expConfig}
-          plotData={plotData}
+        <BasicFilterPlot
+          spec={generateEmptyDropsSpec(config, expConfig, plotData)}
           actions={actions}
+          miniPlot={config.miniPlot}
         />
       ),
     },
   };
 
-  const selectedPlotConfig = useSelector(
-    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.config,
-  );
-
-  const expConfig = useSelector(
-    (state) => state.experimentSettings.processing[filterName][sampleId].filterSettings,
-  );
-
-  const selectedPlotData = useSelector(
-    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.plotData,
-  );
-
-  useEffect(() => {
-    Object.values(plots).forEach((obj) => {
-      if (!selectedPlotConfig) {
-        dispatch(loadPlotConfig(experimentId, obj.plotUuid, obj.plotType));
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    if (selectedPlotConfig && selectedPlotData && expConfig) {
-      const newConfig = _.clone(selectedPlotConfig);
-      _.merge(newConfig, expConfig);
-      setPlot(plots[selectedPlot].plot(newConfig, selectedPlotData, allowedPlotActions));
-    }
-  }, [expConfig, selectedPlotConfig, selectedPlotData]);
-
-  useEffect(() => {
-    if (!filterTableData) dispatch(loadPlotConfig(experimentId, filterTableUuid, 'filterTable'));
-  }, []);
-
-  const renderPlot = () => {
-    // Spinner for main window
-    if (!selectedPlotConfig || !selectedPlotData || stepHadErrors) {
-      return (
-        <center>
-          <Skeleton.Image style={{ width: 400, height: 400 }} />
-        </center>
-      );
-    }
+  const plotStylingControlsConfig = [
+    {
+      panelTitle: 'Plot Dimensions',
+      controls: ['dimensions'],
+    },
+    {
+      panelTitle: 'Axes',
+      controls: ['axesWithRanges'],
+    },
+    {
+      panelTitle: 'Title',
+      controls: ['title'],
+    },
+    {
+      panelTitle: 'Font',
+      controls: ['font'],
+    },
+  ];
 
-    if (plot) {
-      return plot;
-    }
-  };
+  const renderCalculationConfig = () => <CalculationConfig />;
 
   return (
-    <>
-      <Row gutter={16}>
-        <Col span={18}>
-          <Row>
-            <Col flex='auto'>
-              {renderPlot()}
-            </Col>
-
-            <Col flex='1 0px'>
-              <Space direction='vertical'>
-                {Object.entries(plots).map(([key, plotObj]) => (
-                  <button
-                    type='button'
-                    key={key}
-                    onClick={() => setSelectedPlot(key)}
-                    style={{
-                      margin: 0,
-                      backgroundColor: 'transparent',
-                      align: 'center',
-                      padding: '8px',
-                      border: '1px solid #000',
-                      cursor: 'pointer',
-                    }}
-                  >
-                    <MiniPlot
-                      experimentId={experimentId}
-                      plotUuid={plotObj.plotUuid}
-                      plotFn={plotObj.plot}
-                      actions={false}
-                    />
-
-                  </button>
-
-                ))}
-              </Space>
-            </Col>
-          </Row>
-          <Divider />
-          <Row style={{ marginTop: '0.5em' }}>
-            {filterTableData
-              ? <FilterResultTable tableData={filterTableData} />
-              : <Skeleton />}
-          </Row>
-        </Col>
-        <Col flex='1 0px'>
-          <Collapse defaultActiveKey='settings'>
-            <Panel header='Filtering Settings' key='settings'>
-              <CalculationConfigContainer
-                filterUuid={filterName}
-                sampleId={sampleId}
-                sampleIds={sampleIds}
-                onConfigChange={onConfigChange}
-                plotType='unused'
-                stepDisabled={stepDisabled}
-              >
-                <CalculationConfig />
-              </CalculationConfigContainer>
-            </Panel>
-            <Panel header='Plot styling' key='styling'>
-              <div style={{ height: 8 }} />
-              <PlotStyling
-                formConfig={plotStylingControlsConfig}
-                config={selectedPlotConfig}
-                onUpdate={updatePlotWithChanges}
-              />
-            </Panel>
-          </Collapse>
-        </Col>
-      </Row>
-    </>
+    <PlotLayout
+      experimentId={experimentId}
+      plots={plots}
+      filterName={filterName}
+      filterTableUuid={filterTableUuid}
+      sampleId={sampleId}
+      sampleIds={sampleIds}
+      onConfigChange={onConfigChange}
+      stepDisabled={stepDisabled}
+      plotStylingControlsConfig={plotStylingControlsConfig}
+      renderCalculationConfig={renderCalculationConfig}
+      stepHadErrors={stepHadErrors}
+    />
   );
 };
 
diff --git a/src/components/data-processing/DoubletScores/CalculationConfig.jsx b/src/components/data-processing/DoubletScores/CalculationConfig.jsx
index f17b1ffbae..94c407a4aa 100644
--- a/src/components/data-processing/DoubletScores/CalculationConfig.jsx
+++ b/src/components/data-processing/DoubletScores/CalculationConfig.jsx
@@ -33,11 +33,15 @@ const DoubletScoresConfig = (props) => {
     </>
   );
 };
-
+DoubletScoresConfig.defaultProps = {
+  updateSettings: () => {},
+  config: {},
+  disabled: false,
+};
 DoubletScoresConfig.propTypes = {
-  updateSettings: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  disabled: PropTypes.bool.isRequired,
+  updateSettings: PropTypes.func,
+  config: PropTypes.object,
+  disabled: PropTypes.bool,
 };
 
 export default DoubletScoresConfig;
diff --git a/src/components/data-processing/DoubletScores/DoubletScores.jsx b/src/components/data-processing/DoubletScores/DoubletScores.jsx
index 6a8d5a9088..5d0367e1a9 100644
--- a/src/components/data-processing/DoubletScores/DoubletScores.jsx
+++ b/src/components/data-processing/DoubletScores/DoubletScores.jsx
@@ -1,79 +1,32 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import _ from 'lodash';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Collapse, Row, Col, Space, Skeleton, Divider,
-} from 'antd';
 import { generateDataProcessingPlotUuid } from 'utils/generateCustomPlotUuid';
-import {
-  updatePlotConfig,
-  loadPlotConfig,
-  savePlotConfig,
-} from 'redux/actions/componentConfig';
 
-import DoubletScoreHistogram from '../../plots/DoubletScoreHistogram';
-
-import PlotStyling from '../../plots/styling/PlotStyling';
-import CalculationConfigContainer from '../CalculationConfigContainer';
+import PlotLayout from 'components/data-processing/PlotLayout';
+import generateSpec from 'utils/plotSpecs/generateDoubletScoreHistogram';
+import BasicFilterPlot
+from 'components/plots/BasicFilterPlot';
 import CalculationConfig from './CalculationConfig';
-import FilterResultTable from '../FilterResultTable';
-
-const { Panel } = Collapse;
-
-const allowedPlotActions = {
-  export: true,
-  compiled: false,
-  source: false,
-  editor: false,
-};
-
-const filterName = 'doubletScores';
-const plotType = 'doubletScoreHistogram';
-
-const DoubletScores = (props) => {
-  const {
-    experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors,
-  } = props;
 
+const DoubletScores = ({
+  experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors,
+}) => {
+  const filterName = 'doubletScores';
+  const plotType = 'doubletScoreHistogram';
   const plotUuid = generateDataProcessingPlotUuid(sampleId, filterName, 0);
   const filterTableUuid = generateDataProcessingPlotUuid(sampleId, filterName, 1);
-  const filterTableData = useSelector((state) => state.componentConfig[filterTableUuid]?.plotData);
-
-  const dispatch = useDispatch();
-
-  const [renderConfig, setRenderConfig] = useState(null);
-
-  const debounceSave = useCallback(
-    _.debounce((uuid) => dispatch(savePlotConfig(experimentId, uuid)), 2000), [],
-  );
-
-  const config = useSelector((state) => state.componentConfig[plotUuid]?.config);
-  const expConfig = useSelector(
-    (state) => state.experimentSettings.processing[filterName][sampleId].filterSettings,
-  );
-  const plotData = useSelector((state) => state.componentConfig[plotUuid]?.plotData);
 
-  useEffect(() => {
-    const newConfig = _.clone(config);
-    _.merge(newConfig, expConfig);
-
-    setRenderConfig(newConfig);
-  }, [config, expConfig]);
-
-  useEffect(() => {
-    if (!filterTableData) dispatch(loadPlotConfig(experimentId, filterTableUuid, 'filterTable'));
-  }, []);
-
-  useEffect(() => {
-    if (!config) {
-      dispatch(loadPlotConfig(experimentId, plotUuid, plotType));
-    }
-  }, []);
-
-  const updatePlotWithChanges = (obj) => {
-    dispatch(updatePlotConfig(plotUuid, obj));
-    debounceSave(plotUuid);
+  const plots = {
+    doubletScoreHistogram: {
+      plotUuid,
+      plot: (config, plotData, actions) => (
+        <BasicFilterPlot
+          spec={generateSpec(config, plotData)}
+          actions={actions}
+        />
+      ),
+      plotType,
+    },
   };
 
   const plotStylingControlsConfig = [
@@ -95,73 +48,21 @@ const DoubletScores = (props) => {
     },
   ];
 
-  const renderPlot = () => {
-    // Spinner for main window
-    if (!config || !plotData || stepHadErrors) {
-      return (
-        <center>
-          <Skeleton.Image style={{ width: 400, height: 400 }} />
-        </center>
-      );
-    }
-
-    if (renderConfig && plotData) {
-      return (
-        <DoubletScoreHistogram
-          experimentId={experimentId}
-          config={renderConfig}
-          plotData={plotData}
-          actions={allowedPlotActions}
-        />
-      );
-    }
-  };
-
+  const renderCalculationConfig = () => <CalculationConfig />;
   return (
-    <>
-      <Row gutter={16}>
-        <Col span={18}>
-          <Row>
-            <Col flex='auto'>
-              {renderPlot()}
-            </Col>
-          </Row>
-
-          <Divider />
-          <Row style={{ marginTop: '0.5em' }}>
-            {filterTableData
-              ? <FilterResultTable tableData={filterTableData} />
-              : <Skeleton />}
-          </Row>
-        </Col>
-
-        <Col flex='1 0px'>
-          <Space direction='vertical' style={{ width: '100%' }} />
-          <Collapse defaultActiveKey='settings'>
-            <Panel header='Filtering Settings' key='settings'>
-              <CalculationConfigContainer
-                filterUuid={filterName}
-                sampleId={sampleId}
-                sampleIds={sampleIds}
-                onConfigChange={onConfigChange}
-                plotType='bin step'
-                stepDisabled={stepDisabled}
-              >
-                <CalculationConfig />
-              </CalculationConfigContainer>
-            </Panel>
-            <Panel header='Plot styling' key='styling'>
-              <div style={{ height: 8 }} />
-              <PlotStyling
-                formConfig={plotStylingControlsConfig}
-                config={config}
-                onUpdate={updatePlotWithChanges}
-              />
-            </Panel>
-          </Collapse>
-        </Col>
-      </Row>
-    </>
+    <PlotLayout
+      experimentId={experimentId}
+      plots={plots}
+      filterName={filterName}
+      filterTableUuid={filterTableUuid}
+      sampleId={sampleId}
+      sampleIds={sampleIds}
+      onConfigChange={onConfigChange}
+      stepDisabled={stepDisabled}
+      plotStylingControlsConfig={plotStylingControlsConfig}
+      renderCalculationConfig={renderCalculationConfig}
+      stepHadErrors={stepHadErrors}
+    />
   );
 };
 
diff --git a/src/components/data-processing/GenesVsUMIs/CalculationConfig.jsx b/src/components/data-processing/GenesVsUMIs/CalculationConfig.jsx
index 3879765641..09a41e3483 100644
--- a/src/components/data-processing/GenesVsUMIs/CalculationConfig.jsx
+++ b/src/components/data-processing/GenesVsUMIs/CalculationConfig.jsx
@@ -141,13 +141,20 @@ const GenesVsUMIsConfig = (props) => {
     </>
   );
 };
+GenesVsUMIsConfig.defaultProps = {
+  updateSettings: () => {},
+  config: {},
+  disabled: false,
+  rerunRequired: false,
+  onQCRunClick: () => {},
+};
 
 GenesVsUMIsConfig.propTypes = {
-  updateSettings: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  disabled: PropTypes.bool.isRequired,
-  rerunRequired: PropTypes.bool.isRequired,
-  onQCRunClick: PropTypes.func.isRequired,
+  updateSettings: PropTypes.func,
+  config: PropTypes.object,
+  disabled: PropTypes.bool,
+  rerunRequired: PropTypes.bool,
+  onQCRunClick: PropTypes.func,
 };
 
 export default GenesVsUMIsConfig;
diff --git a/src/components/data-processing/GenesVsUMIs/GenesVsUMIs.jsx b/src/components/data-processing/GenesVsUMIs/GenesVsUMIs.jsx
index c5f9b752ff..806977b320 100644
--- a/src/components/data-processing/GenesVsUMIs/GenesVsUMIs.jsx
+++ b/src/components/data-processing/GenesVsUMIs/GenesVsUMIs.jsx
@@ -1,74 +1,52 @@
-import React, { useEffect, useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import _ from 'lodash';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Collapse, Row, Col, Space, Skeleton, Divider,
-} from 'antd';
 import { generateDataProcessingPlotUuid } from 'utils/generateCustomPlotUuid';
-import {
-  updatePlotConfig,
-  loadPlotConfig,
-  savePlotConfig,
-} from 'redux/actions/componentConfig';
+import { useSelector } from 'react-redux';
 
-import FeaturesVsUMIsScatterplot from '../../plots/FeaturesVsUMIsScatterplot';
-
-import PlotStyling from '../../plots/styling/PlotStyling';
-import CalculationConfigContainer from '../CalculationConfigContainer';
+import PlotLayout from 'components/data-processing/PlotLayout';
+import BasicFilterPlot from 'components/plots/BasicFilterPlot';
+import generateSpec from 'utils/plotSpecs/generateFeaturesVsUMIsScatterplot';
+import transformOldFeaturesVsUMIsPlotData from 'components/plots/helpers/transformOldFeaturesVsUMIsPlotData';
 import CalculationConfig from './CalculationConfig';
-import FilterResultTable from '../FilterResultTable';
-
-const { Panel } = Collapse;
-
-const allowedPlotActions = {
-  export: true,
-  compiled: false,
-  source: true,
-  editor: false,
-};
-
-const filterName = 'numGenesVsNumUmis';
-const plotType = 'featuresVsUMIsScatterplot';
-
-const GenesVsUMIs = (props) => {
-  const {
-    experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors, onQCRunClick,
-  } = props;
 
+const GenesVsUMIs = ({
+  experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors, onQCRunClick,
+}) => {
+  const filterName = 'numGenesVsNumUmis';
+  const plotType = 'featuresVsUMIsScatterplot';
   const plotUuid = generateDataProcessingPlotUuid(sampleId, filterName, 0);
   const filterTableUuid = generateDataProcessingPlotUuid(sampleId, filterName, 1);
-  const filterTableData = useSelector((state) => state.componentConfig[filterTableUuid]?.plotData);
-
-  const dispatch = useDispatch();
-
-  const debounceSave = useCallback(
-    _.debounce((uuid) => dispatch(savePlotConfig(experimentId, uuid)), 2000), [],
-  );
-
-  const config = useSelector(
-    (state) => state.componentConfig[plotUuid]?.config,
-  );
   const expConfig = useSelector(
     (state) => state.experimentSettings.processing[filterName][sampleId].filterSettings,
   );
+  const allowedPlotActions = {
+    export: true,
+    compiled: false,
+    source: true,
+    editor: false,
+  };
   const plotData = useSelector(
     (state) => state.componentConfig[plotUuid]?.plotData,
   );
 
-  useEffect(() => {
-    if (!config) {
-      dispatch(loadPlotConfig(experimentId, plotUuid, plotType));
-    }
-  }, [config]);
-
-  useEffect(() => {
-    if (!filterTableData) dispatch(loadPlotConfig(experimentId, filterTableUuid, 'filterTable'));
-  }, []);
-
-  const updatePlotWithChanges = (obj) => {
-    dispatch(updatePlotConfig(plotUuid, obj));
-    debounceSave(plotUuid);
+  const plots = {
+    featuresVsUMIsScatterplot: {
+      plotUuid,
+      plot: (config, data, actions) => {
+        // we can remove this if we migrate old plotData to the new schema
+        const needTransformPlotData = Array.isArray(data) && data.length;
+        const newPlotData = needTransformPlotData
+          ? transformOldFeaturesVsUMIsPlotData(data)
+          : data;
+        return (
+          <BasicFilterPlot
+            spec={newPlotData?.pointsData ? generateSpec(config, newPlotData, expConfig) : null}
+            actions={actions}
+          />
+        );
+      },
+      plotType,
+    },
   };
 
   const plotStylingControlsConfig = [
@@ -90,76 +68,29 @@ const GenesVsUMIs = (props) => {
     },
   ];
 
-  const renderPlot = () => {
-    // Spinner for main window
-    if (!config || !plotData || stepHadErrors) {
-      return (
-        <center>
-          <Skeleton.Image style={{ width: 400, height: 400 }} />
-        </center>
-      );
-    }
+  const renderCalculationConfig = () => (
+    <CalculationConfig
+      rerunRequired={plotData?.linesData && !plotData?.linesData[0]?.length}
+      onQCRunClick={onQCRunClick}
+    />
 
-    if (config && plotData) {
-      return (
-        <FeaturesVsUMIsScatterplot
-          config={config}
-          plotData={plotData}
-          actions={allowedPlotActions}
-          expConfig={expConfig}
-        />
-      );
-    }
-  };
+  );
 
   return (
-    <>
-      <Row gutter={16}>
-        <Col span={18}>
-          <Row>
-            <Col flex='auto'>
-              {renderPlot()}
-            </Col>
-          </Row>
-
-          <Divider />
-          <Row style={{ marginTop: '0.5em' }}>
-            {filterTableData
-              ? <FilterResultTable tableData={filterTableData} />
-              : <Skeleton />}
-          </Row>
-        </Col>
-
-        <Col flex='1 0px'>
-          <Collapse defaultActiveKey='settings'>
-            <Space direction='vertical' style={{ width: '100%' }} />
-            <Panel header='Filtering Settings' key='settings'>
-              <CalculationConfigContainer
-                filterUuid={filterName}
-                sampleId={sampleId}
-                sampleIds={sampleIds}
-                onConfigChange={onConfigChange}
-                plotType='unused'
-                stepDisabled={stepDisabled}
-              >
-                <CalculationConfig
-                  rerunRequired={plotData?.linesData && !plotData?.linesData[0]?.length}
-                  onQCRunClick={onQCRunClick}
-                />
-              </CalculationConfigContainer>
-            </Panel>
-            <Panel header='Plot styling' key='styling'>
-              <div style={{ height: 8 }} />
-              <PlotStyling
-                formConfig={plotStylingControlsConfig}
-                config={config}
-                onUpdate={updatePlotWithChanges}
-              />
-            </Panel>
-          </Collapse>
-        </Col>
-      </Row>
-    </>
+    <PlotLayout
+      experimentId={experimentId}
+      plots={plots}
+      filterName={filterName}
+      filterTableUuid={filterTableUuid}
+      sampleId={sampleId}
+      sampleIds={sampleIds}
+      onConfigChange={onConfigChange}
+      stepDisabled={stepDisabled}
+      plotStylingControlsConfig={plotStylingControlsConfig}
+      renderCalculationConfig={renderCalculationConfig}
+      stepHadErrors={stepHadErrors}
+      allowedPlotActions={allowedPlotActions}
+    />
   );
 };
 
diff --git a/src/components/data-processing/MitochondrialContent/CalculationConfig.jsx b/src/components/data-processing/MitochondrialContent/CalculationConfig.jsx
index e506c39373..b7107b4dab 100644
--- a/src/components/data-processing/MitochondrialContent/CalculationConfig.jsx
+++ b/src/components/data-processing/MitochondrialContent/CalculationConfig.jsx
@@ -50,12 +50,16 @@ const CalculationConfig = (props) => {
     </>
   );
 };
-
+CalculationConfig.defaultProps = {
+  updateSettings: () => {},
+  config: {},
+  disabled: false,
+};
 CalculationConfig.propTypes = {
-  updateSettings: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
+  updateSettings: PropTypes.func,
+  config: PropTypes.object,
   plotType: PropTypes.string.isRequired,
-  disabled: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
 };
 
 export default CalculationConfig;
diff --git a/src/components/data-processing/MitochondrialContent/MitochondrialContent.jsx b/src/components/data-processing/MitochondrialContent/MitochondrialContent.jsx
index 20ee5ca02c..57c919f820 100644
--- a/src/components/data-processing/MitochondrialContent/MitochondrialContent.jsx
+++ b/src/components/data-processing/MitochondrialContent/MitochondrialContent.jsx
@@ -1,58 +1,21 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import _ from 'lodash';
+import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Collapse, Row, Col, Space, Skeleton, Divider,
-} from 'antd';
 
 import { generateDataProcessingPlotUuid } from 'utils/generateCustomPlotUuid';
-import {
-  updatePlotConfig,
-  loadPlotConfig,
-  savePlotConfig,
-} from 'redux/actions/componentConfig';
 
-import MitochondrialFractionHistogram from '../../plots/MitochondrialFractionHistogram';
-import MitochondrialFractionScatterplot from '../../plots/MitochondrialFractionScatterplot';
-
-import PlotStyling from '../../plots/styling/PlotStyling';
-import MiniPlot from '../../plots/MiniPlot';
-import CalculationConfigContainer from '../CalculationConfigContainer';
+import PlotLayout from 'components/data-processing/PlotLayout';
+import BasicFilterPlot from 'components/plots/BasicFilterPlot';
+import generateFractionHistogramSpec from 'utils/plotSpecs/generateMitochondrialFractionHistogram';
+import generateFractionScatterplotSpec from 'utils/plotSpecs/generateMitochondrialFractionScatterplot';
 import CalculationConfig from './CalculationConfig';
-import FilterResultTable from '../FilterResultTable';
-
-const { Panel } = Collapse;
 
 const filterName = 'mitochondrialContent';
 
-const allowedPlotActions = {
-  export: true,
-  compiled: false,
-  source: false,
-  editor: false,
-};
-
 const MitochondrialContent = (props) => {
   const {
     experimentId, sampleId, sampleIds, onConfigChange, stepDisabled, stepHadErrors,
   } = props;
-
-  const dispatch = useDispatch();
-
-  const [selectedPlot, setSelectedPlot] = useState('histogram');
-  const [plot, setPlot] = useState(null);
   const filterTableUuid = generateDataProcessingPlotUuid(sampleId, filterName, 2);
-  const filterTableData = useSelector((state) => state.componentConfig[filterTableUuid]?.plotData);
-
-  const debounceSave = useCallback(
-    _.debounce((plotUuid) => dispatch(savePlotConfig(experimentId, plotUuid)), 2000), [],
-  );
-
-  const updatePlotWithChanges = (obj) => {
-    dispatch(updatePlotConfig(plots[selectedPlot].plotUuid, obj));
-    debounceSave(plots[selectedPlot].plotUuid);
-  };
 
   const plots = {
     histogram: {
@@ -60,11 +23,10 @@ const MitochondrialContent = (props) => {
       plotUuid: generateDataProcessingPlotUuid(sampleId, filterName, 0),
       plotType: 'mitochondrialFractionHistogram',
       plot: (config, plotData, actions) => (
-        <MitochondrialFractionHistogram
-          experimentId={experimentId}
-          config={config}
-          plotData={plotData}
+        <BasicFilterPlot
+          spec={generateFractionHistogramSpec(config, plotData)}
           actions={actions}
+          miniPlot={config.miniPlot}
         />
       ),
     },
@@ -73,52 +35,15 @@ const MitochondrialContent = (props) => {
       plotUuid: generateDataProcessingPlotUuid(sampleId, filterName, 1),
       plotType: 'mitochondrialFractionLogHistogram',
       plot: (config, plotData, actions) => (
-        <MitochondrialFractionScatterplot
-          experimentId={experimentId}
-          config={config}
-          plotData={plotData}
+        <BasicFilterPlot
+          spec={generateFractionScatterplotSpec(config, plotData)}
           actions={actions}
+          miniPlot={config.miniPlot}
         />
       ),
     },
   };
 
-  const selectedConfig = useSelector(
-    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.config,
-  );
-
-  const expConfig = useSelector(
-    (state) => state.experimentSettings.processing[filterName][sampleId].filterSettings,
-  );
-
-  const selectedPlotData = useSelector(
-    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.plotData,
-  );
-
-  useEffect(() => {
-    Object.values(plots).forEach((obj) => {
-      if (!selectedConfig) {
-        dispatch(loadPlotConfig(experimentId, obj.plotUuid, obj.plotType));
-      }
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!filterTableData) dispatch(loadPlotConfig(experimentId, filterTableUuid, 'filterTable'));
-  }, []);
-
-  useEffect(() => {
-    if (selectedConfig && selectedPlotData && expConfig) {
-      let newConfig = _.clone(selectedConfig);
-
-      const expConfigSettings = expConfig.methodSettings[expConfig.method];
-
-      newConfig = _.merge(newConfig, expConfigSettings);
-
-      setPlot(plots[selectedPlot].plot(newConfig, selectedPlotData, allowedPlotActions));
-    }
-  }, [expConfig, selectedConfig, selectedPlotData]);
-
   const plotStylingControlsConfig = [
     {
       panelTitle: 'Legend',
@@ -142,90 +67,22 @@ const MitochondrialContent = (props) => {
     },
   ];
 
-  const renderPlot = () => {
-    // Spinner for main window
-    if (!selectedConfig || !selectedPlotData || stepHadErrors) {
-      return (
-        <center>
-          <Skeleton.Image style={{ width: 400, height: 400 }} />
-        </center>
-      );
-    }
-    if (plot) {
-      return plot;
-    }
-  };
+  const renderCalculationConfig = () => <CalculationConfig />;
 
   return (
-    <>
-      <Row gutter={16}>
-        <Col span={18}>
-          <Row>
-            <Col flex='auto'>
-              {renderPlot()}
-            </Col>
-
-            <Col flex='1 0px'>
-              <Space direction='vertical'>
-                {Object.entries(plots).map(([key, plotObj]) => (
-                  <button
-                    type='button'
-                    key={key}
-                    onClick={() => setSelectedPlot(key)}
-                    style={{
-                      margin: 0,
-                      backgroundColor: 'transparent',
-                      align: 'center',
-                      padding: '8px',
-                      border: '1px solid #000',
-                      cursor: 'pointer',
-                    }}
-                  >
-                    <MiniPlot
-                      experimentId={experimentId}
-                      plotUuid={plotObj.plotUuid}
-                      plotFn={plotObj.plot}
-                      actions={false}
-                    />
-                  </button>
-
-                ))}
-              </Space>
-            </Col>
-          </Row>
-          <Divider />
-          <Row style={{ marginTop: '0.5em' }}>
-            {filterTableData
-              ? <FilterResultTable tableData={filterTableData} />
-              : <Skeleton />}
-          </Row>
-        </Col>
-        <Col flex='1 0px'>
-          <Collapse defaultActiveKey='settings'>
-            <Panel header='Filtering Settings' key='settings'>
-              <CalculationConfigContainer
-                filterUuid={filterName}
-                sampleId={sampleId}
-                sampleIds={sampleIds}
-                onConfigChange={onConfigChange}
-                plotType={selectedPlot}
-                stepDisabled={stepDisabled}
-              >
-                <CalculationConfig />
-              </CalculationConfigContainer>
-            </Panel>
-            <Panel header='Plot styling' key='styling'>
-              <div style={{ height: 8 }} />
-              <PlotStyling
-                formConfig={plotStylingControlsConfig}
-                config={selectedConfig}
-                onUpdate={updatePlotWithChanges}
-              />
-            </Panel>
-          </Collapse>
-        </Col>
-      </Row>
-    </>
+    <PlotLayout
+      experimentId={experimentId}
+      plots={plots}
+      filterName={filterName}
+      filterTableUuid={filterTableUuid}
+      sampleId={sampleId}
+      sampleIds={sampleIds}
+      onConfigChange={onConfigChange}
+      stepDisabled={stepDisabled}
+      plotStylingControlsConfig={plotStylingControlsConfig}
+      renderCalculationConfig={renderCalculationConfig}
+      stepHadErrors={stepHadErrors}
+    />
   );
 };
 
diff --git a/src/components/data-processing/PlotLayout.jsx b/src/components/data-processing/PlotLayout.jsx
new file mode 100644
index 0000000000..d69f9cb8b8
--- /dev/null
+++ b/src/components/data-processing/PlotLayout.jsx
@@ -0,0 +1,209 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+  Row, Col, Space, Skeleton, Divider, Collapse,
+} from 'antd';
+import { useSelector, useDispatch } from 'react-redux';
+import _ from 'lodash';
+import MiniPlot from 'components/plots/MiniPlot';
+import FilterResultTable from 'components/data-processing/FilterResultTable';
+import CalculationConfigContainer from 'components/data-processing/CalculationConfigContainer';
+import PlotStyling from 'components/plots/styling/PlotStyling';
+import PropTypes from 'prop-types';
+import {
+  updatePlotConfig,
+  loadPlotConfig,
+  savePlotConfig,
+} from 'redux/actions/componentConfig';
+
+const { Panel } = Collapse;
+
+/*
+This component is used to render the main plot and the mini plots for the
+classifier, cell size distribution and mitochondrial content filters.
+*/
+const PlotLayout = ({
+  experimentId,
+  plots,
+  filterName,
+  filterTableUuid,
+  sampleId,
+  sampleIds,
+  onConfigChange,
+  stepDisabled,
+  plotStylingControlsConfig,
+  renderCalculationConfig,
+  stepHadErrors,
+  allowedPlotActions,
+}) => {
+  const dispatch = useDispatch();
+  const [plot, setPlot] = useState(null);
+  const [selectedPlot, setSelectedPlot] = useState(Object.keys(plots)[0]);
+
+  const selectedPlotConfig = useSelector(
+    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.config,
+  );
+  const filterTableData = useSelector((state) => state.componentConfig[filterTableUuid]?.plotData);
+
+  const filterSettings = useSelector(
+    (state) => state.experimentSettings.processing[filterName][sampleId].filterSettings,
+  );
+
+  const selectedPlotData = useSelector(
+    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.plotData,
+  );
+
+  const selectedConfig = useSelector(
+    (state) => state.componentConfig[plots[selectedPlot].plotUuid]?.config,
+  );
+  const debounceSave = useCallback(
+    _.debounce((plotUuid) => dispatch(savePlotConfig(experimentId, plotUuid)), 2000), [],
+  );
+
+  const updatePlotWithChanges = (obj) => {
+    dispatch(updatePlotConfig(plots[selectedPlot].plotUuid, obj));
+    debounceSave(plots[selectedPlot].plotUuid);
+  };
+
+  useEffect(() => {
+    Object.values(plots).forEach((obj) => {
+      if (!selectedConfig) {
+        dispatch(loadPlotConfig(experimentId, obj.plotUuid, obj.plotType));
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!filterTableData) dispatch(loadPlotConfig(experimentId, filterTableUuid, 'filterTable'));
+  }, []);
+
+  useEffect(() => {
+    if (selectedConfig && selectedPlotData && filterSettings) {
+      const newConfig = _.clone(selectedConfig);
+      // some filters have settings stored under filterSettings.methodSettings[method]
+      // like the mitochondrial content one
+      // so we need to check if the current filter is one of them
+      const expConfigSettings = filterSettings.method ? filterSettings.methodSettings[filterSettings.method] : filterSettings;
+      _.merge(newConfig, expConfigSettings);
+      setPlot(plots[selectedPlot].plot(newConfig, selectedPlotData, allowedPlotActions));
+    }
+  }, [filterSettings, selectedConfig, selectedPlotData]);
+  const renderPlot = () => {
+    // Spinner for main window
+    if (!selectedPlotConfig || !selectedPlotData || stepHadErrors) {
+      return (
+        <center>
+          <Skeleton.Image style={{ width: 400, height: 400 }} />
+        </center>
+      );
+    }
+
+    if (plot) {
+      return plot;
+    }
+  };
+  const renderMiniPlots = () => {
+    if (Object.keys(plots).length > 1) {
+      return (
+        <Space direction='vertical'>
+          {Object.entries(plots).map(([key, plotObj]) => (
+            <button
+              type='button'
+              key={key}
+              onClick={() => setSelectedPlot(key)}
+              style={{
+                margin: 0,
+                backgroundColor: 'transparent',
+                align: 'center',
+                padding: '8px',
+                border: '1px solid #000',
+                cursor: 'pointer',
+              }}
+            >
+              <MiniPlot
+                experimentId={experimentId}
+                plotUuid={plotObj.plotUuid}
+                plotFn={plotObj.plot}
+                actions={false}
+              />
+            </button>
+          ))}
+        </Space>
+      );
+    }
+    return null;
+  };
+  return (
+    <>
+      <Row gutter={16}>
+        <Col span={18}>
+          <Row>
+            <Col flex='auto'>
+              {renderPlot()}
+            </Col>
+            <Col flex='1 0px'>
+              {renderMiniPlots()}
+            </Col>
+          </Row>
+          <Divider />
+          <Row style={{ marginTop: '0.5em' }}>
+            {filterTableData
+              ? <FilterResultTable tableData={filterTableData} />
+              : <Skeleton />}
+          </Row>
+        </Col>
+        <Col flex='1 0px'>
+          <Collapse defaultActiveKey='settings'>
+            <Panel header='Filtering Settings' key='settings'>
+              <CalculationConfigContainer
+                filterUuid={filterName}
+                sampleId={sampleId}
+                sampleIds={sampleIds}
+                onConfigChange={onConfigChange}
+                stepDisabled={stepDisabled}
+                plotType={selectedPlot}
+              >
+                {renderCalculationConfig()}
+              </CalculationConfigContainer>
+            </Panel>
+            <Panel header='Plot styling' key='styling'>
+              <div style={{ height: 8 }} />
+              <PlotStyling
+                formConfig={plotStylingControlsConfig}
+                config={selectedPlotConfig}
+                onUpdate={updatePlotWithChanges}
+              />
+            </Panel>
+          </Collapse>
+        </Col>
+      </Row>
+    </>
+  );
+};
+PlotLayout.propTypes = {
+  experimentId: PropTypes.string.isRequired,
+  plots: PropTypes.object.isRequired,
+  filterName: PropTypes.string.isRequired,
+  sampleId: PropTypes.string.isRequired,
+  sampleIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  onConfigChange: PropTypes.func.isRequired,
+  stepDisabled: PropTypes.bool,
+  plotStylingControlsConfig: PropTypes.arrayOf(PropTypes.shape({
+    panelTitle: PropTypes.string,
+    controls: PropTypes.arrayOf(PropTypes.string),
+  })).isRequired,
+  renderCalculationConfig: PropTypes.func.isRequired,
+  stepHadErrors: PropTypes.bool.isRequired,
+  filterTableUuid: PropTypes.string.isRequired,
+  allowedPlotActions: PropTypes.object,
+};
+
+PlotLayout.defaultProps = {
+  stepDisabled: false,
+  allowedPlotActions: {
+    export: true,
+    compiled: false,
+    source: false,
+    editor: true,
+  },
+};
+export default PlotLayout;
diff --git a/src/components/data-processing/StatusIndicator.jsx b/src/components/data-processing/StatusIndicator.jsx
index 512cf42618..81443fd40e 100644
--- a/src/components/data-processing/StatusIndicator.jsx
+++ b/src/components/data-processing/StatusIndicator.jsx
@@ -140,7 +140,7 @@ const StatusIndicator = (props) => {
           {statusIndicators[status]?.description}
         </Paragraph>
       </>
-    );;
+    );
   };
 
   const renderIndicator = () => {
@@ -172,9 +172,10 @@ const StatusIndicator = (props) => {
             </Card>
           ),
           key: 'status-indicator',
-        }
-      ]
-    }}>
+        },
+      ],
+    }}
+    >
       <Button
         type='text'
         style={{ paddingTop: '1px' }}
diff --git a/src/components/header/FeedbackButton.jsx b/src/components/header/FeedbackButton.jsx
index 606b1dc8e9..76f2999372 100644
--- a/src/components/header/FeedbackButton.jsx
+++ b/src/components/header/FeedbackButton.jsx
@@ -130,9 +130,9 @@ const FeedbackButton = () => {
           </Space>
         </Card>
       ),
-      key: 'feedback-button-contents'
-    }
-  ]
+      key: 'feedback-button-contents',
+    },
+  ];
 
   return (
     <Dropdown
diff --git a/src/components/header/HelpButton.jsx b/src/components/header/HelpButton.jsx
index 2754c7ae50..75c51cac86 100644
--- a/src/components/header/HelpButton.jsx
+++ b/src/components/header/HelpButton.jsx
@@ -12,9 +12,9 @@ const HelpButton = () => {
           {getDomainSpecificContent('HelpButton')}
         </Card>
       ),
-      key: 'help-button-contents'
-    }
-  ]
+      key: 'help-button-contents',
+    },
+  ];
 
   return (
     <Dropdown
diff --git a/src/components/header/ReferralButton.jsx b/src/components/header/ReferralButton.jsx
index f9d853ffc2..abd739459a 100644
--- a/src/components/header/ReferralButton.jsx
+++ b/src/components/header/ReferralButton.jsx
@@ -156,8 +156,8 @@ const ReferralButton = () => {
         </Card>
       ),
       key: 'referral-button-contents',
-    }
-  ]
+    },
+  ];
 
   return (
     <Dropdown
diff --git a/src/components/header/UserButton.jsx b/src/components/header/UserButton.jsx
index 7e89dd0760..41ac01f687 100644
--- a/src/components/header/UserButton.jsx
+++ b/src/components/header/UserButton.jsx
@@ -43,12 +43,12 @@ const UserButton = () => {
     {
       type: 'group',
       label: `Signed in as ${user?.attributes.name}`,
-      key: 'singed-in-username'
+      key: 'singed-in-username',
     },
     {
       disabled: true,
       label: 'Your profile',
-      key: 'user-profile'
+      key: 'user-profile',
     },
     {
       label: (
@@ -56,7 +56,7 @@ const UserButton = () => {
           Settings
         </Link>
       ),
-      key: 'user-settings'
+      key: 'user-settings',
     },
     {
       type: 'divider',
@@ -64,12 +64,12 @@ const UserButton = () => {
     {
       label: 'Sign out',
       key: 'user-signout',
-      onClick: async () => { Auth.signOut() },
-    }
-  ]
+      onClick: async () => { Auth.signOut(); },
+    },
+  ];
 
   return user ? (
-    <Dropdown menu={{ items: menuItems }} trigger={['click']} >
+    <Dropdown menu={{ items: menuItems }} trigger={['click']}>
       <Button
         aria-label='User settings'
         type='text'
@@ -89,7 +89,7 @@ const UserButton = () => {
           </Avatar>
         )}
       />
-    </Dropdown >
+    </Dropdown>
   ) : (
     <Button
       type='dashed'
diff --git a/src/components/modals/QCRerunDisabledModal.jsx b/src/components/modals/QCRerunDisabledModal.jsx
index 929a4b0369..b37b8c84f6 100644
--- a/src/components/modals/QCRerunDisabledModal.jsx
+++ b/src/components/modals/QCRerunDisabledModal.jsx
@@ -53,7 +53,7 @@ const QCRerunDisabledModal = (props) => {
   return (
     <Modal
       title='Run data processing with the changed settings'
-      visible={visible}
+      open={visible}
       onCancel={() => onFinish()}
       footer={
         [
diff --git a/src/components/plots/BasicFilterPlot.jsx b/src/components/plots/BasicFilterPlot.jsx
new file mode 100644
index 0000000000..2e8d073e22
--- /dev/null
+++ b/src/components/plots/BasicFilterPlot.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Vega } from 'react-vega';
+import EmptyPlot from 'components/plots/helpers/EmptyPlot';
+
+const BasicFilterPlot = (props) => {
+  const {
+    spec, actions, miniPlot,
+  } = props;
+
+  const dataAvailable = spec?.data[0].values.length;
+  if (!dataAvailable) {
+    return (
+      <EmptyPlot mini={miniPlot} />
+    );
+  }
+  return (
+    <center data-testid='vega-container'>
+      <Vega spec={spec} renderer='canvas' actions={actions} />
+    </center>
+  );
+};
+
+BasicFilterPlot.propTypes = {
+  spec: PropTypes.object.isRequired,
+  actions: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.object,
+  ]),
+  miniPlot: PropTypes.bool,
+};
+
+BasicFilterPlot.defaultProps = {
+  actions: true,
+  miniPlot: false,
+};
+
+export default BasicFilterPlot;
diff --git a/src/components/plots/CellSizeDistributionHistogram.jsx b/src/components/plots/CellSizeDistributionHistogram.jsx
deleted file mode 100644
index 20783a95b5..0000000000
--- a/src/components/plots/CellSizeDistributionHistogram.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateCellSizeDistributionHistogram';
-import EmptyPlot from './helpers/EmptyPlot';
-
-const CellSizeDistributionHistogram = (props) => {
-  const {
-    config, plotData, actions, highestUmi,
-  } = props;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-
-  useEffect(() => {
-    if (config && plotData) {
-      setPlotSpec(generateSpec(config, plotData, highestUmi));
-    }
-  }, [config, plotData]);
-
-  const render = () => {
-    if (!plotData.length) {
-      return (
-        <EmptyPlot mini={config.miniPlot} />
-      );
-    }
-
-    return (
-      <center>
-        <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-      </center>
-    );
-  };
-
-  return (
-    <>
-      {render()}
-    </>
-  );
-};
-
-CellSizeDistributionHistogram.propTypes = {
-  config: PropTypes.object.isRequired,
-  plotData: PropTypes.array,
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-  highestUmi: PropTypes.number.isRequired,
-};
-
-CellSizeDistributionHistogram.defaultProps = {
-  plotData: null,
-  actions: true,
-};
-
-export default CellSizeDistributionHistogram;
diff --git a/src/components/plots/CellSizeDistributionKneePlot.jsx b/src/components/plots/CellSizeDistributionKneePlot.jsx
deleted file mode 100644
index e5c826645d..0000000000
--- a/src/components/plots/CellSizeDistributionKneePlot.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateCellSizeDistributionKneePlot';
-import EmptyPlot from './helpers/EmptyPlot';
-
-const CellSizeDistributionKneePlot = (props) => {
-  const {
-    config, plotData, actions,
-  } = props;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-
-  useEffect(() => {
-    if (config && plotData) {
-      setPlotSpec(generateSpec(config, plotData));
-    }
-  }, [config, plotData]);
-
-  const render = () => {
-    if (!plotData.length) {
-      return (
-        <EmptyPlot mini={config.miniPlot} />
-      );
-    }
-
-    return (
-      <center>
-        <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-      </center>
-    );
-  };
-
-  return (
-    <>
-      {render()}
-    </>
-  );
-};
-
-CellSizeDistributionKneePlot.propTypes = {
-  config: PropTypes.object.isRequired,
-  plotData: PropTypes.array,
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-};
-
-CellSizeDistributionKneePlot.defaultProps = {
-  plotData: null,
-  actions: true,
-};
-
-export default CellSizeDistributionKneePlot;
diff --git a/src/components/plots/ClassifierEmptyDropsPlot.jsx b/src/components/plots/ClassifierEmptyDropsPlot.jsx
deleted file mode 100644
index f188dd7bda..0000000000
--- a/src/components/plots/ClassifierEmptyDropsPlot.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateClassifierEmptyDropsPlot';
-import EmptyPlot from './helpers/EmptyPlot';
-
-const ClassifierEmptyDropsPlot = (props) => {
-  const {
-    config, expConfig, plotData, actions,
-  } = props;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-
-  useEffect(() => {
-    setPlotSpec(generateSpec(config, expConfig, plotData));
-  }, [config, expConfig, plotData]);
-
-  const render = () => {
-    if (!plotData.length) {
-      return (
-        <EmptyPlot mini={config.miniPlot} />
-      );
-    }
-
-    return (
-      <center>
-        <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-      </center>
-    );
-  };
-
-  return (
-    <>
-      { render()}
-    </>
-  );
-};
-
-ClassifierEmptyDropsPlot.propTypes = {
-  config: PropTypes.object.isRequired,
-  expConfig: PropTypes.object.isRequired,
-  plotData: PropTypes.array,
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-};
-
-ClassifierEmptyDropsPlot.defaultProps = {
-  actions: true,
-  plotData: null,
-};
-
-export default ClassifierEmptyDropsPlot;
diff --git a/src/components/plots/ClassifierKneePlot.jsx b/src/components/plots/ClassifierKneePlot.jsx
deleted file mode 100644
index 886ceafc5f..0000000000
--- a/src/components/plots/ClassifierKneePlot.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateClassifierKneePlot';
-import EmptyPlot from './helpers/EmptyPlot';
-
-const ClassifierKneePlot = (props) => {
-  const {
-    config, expConfig, plotData, actions,
-  } = props;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-
-  useEffect(() => {
-    if (config && plotData) {
-      setPlotSpec(generateSpec(config, expConfig, plotData));
-    }
-  }, [config, expConfig, plotData]);
-
-  if (!plotData.length) {
-    return (
-      <EmptyPlot mini={config.miniPlot} />
-    );
-  }
-
-  return (
-    <center>
-      <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-    </center>
-  );
-};
-
-ClassifierKneePlot.propTypes = {
-  config: PropTypes.object.isRequired,
-  expConfig: PropTypes.object.isRequired,
-  plotData: PropTypes.array,
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-};
-
-ClassifierKneePlot.defaultProps = {
-  plotData: null,
-  actions: true,
-};
-
-export default ClassifierKneePlot;
diff --git a/src/components/plots/DoubletScoreHistogram.jsx b/src/components/plots/DoubletScoreHistogram.jsx
deleted file mode 100644
index 81aa842257..0000000000
--- a/src/components/plots/DoubletScoreHistogram.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateDoubletScoreHistogram';
-import EmptyPlot from './helpers/EmptyPlot';
-
-const DoubletScoreHistogram = (props) => {
-  const {
-    config, plotData, actions,
-  } = props;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-
-  useEffect(() => {
-    if (config && plotData) {
-      setPlotSpec(generateSpec(config, plotData));
-    }
-  }, [config, plotData]);
-
-  const render = () => {
-    if (!plotData.length) {
-      return (
-        <EmptyPlot mini={config.miniPlot} />
-      );
-    }
-
-    return (
-      <center>
-        <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-      </center>
-    );
-  };
-
-  return (
-    <>
-      { render()}
-    </>
-  );
-};
-
-DoubletScoreHistogram.propTypes = {
-  config: PropTypes.object.isRequired,
-  plotData: PropTypes.array,
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-};
-
-DoubletScoreHistogram.defaultProps = {
-  plotData: null,
-  actions: true,
-};
-
-export default DoubletScoreHistogram;
diff --git a/src/components/plots/FeaturesVsUMIsScatterplot.jsx b/src/components/plots/FeaturesVsUMIsScatterplot.jsx
deleted file mode 100644
index 8d96167f10..0000000000
--- a/src/components/plots/FeaturesVsUMIsScatterplot.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateFeaturesVsUMIsScatterplot';
-import EmptyPlot from './helpers/EmptyPlot';
-import transformOldFeaturesVsUMIsPlotData from './helpers/transformOldFeaturesVsUMIsPlotData';
-
-const FeaturesVsUMIsScatterplot = (props) => {
-  const {
-    config, plotData, actions, expConfig,
-  } = props;
-
-  // we can remove this if we migrate old plotData to the new schema
-  const needTransformPlotData = Array.isArray(plotData) && plotData.length;
-
-  const newPlotData = needTransformPlotData
-    ? transformOldFeaturesVsUMIsPlotData(plotData)
-    : plotData;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-  const { predictionInterval } = expConfig;
-  useEffect(() => {
-    if (config && newPlotData?.pointsData?.length) {
-      setPlotSpec(generateSpec(config, newPlotData, expConfig));
-    }
-  }, [config, plotData, predictionInterval]);
-
-  if (!newPlotData?.pointsData?.length) {
-    return (
-      <EmptyPlot mini={config.miniPlot} />
-    );
-  }
-
-  return (
-    <center data-testid='vega-container'>
-      <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-    </center>
-  );
-};
-
-FeaturesVsUMIsScatterplot.propTypes = {
-  config: PropTypes.object.isRequired,
-  plotData: PropTypes.oneOfType([
-    PropTypes.array,
-    PropTypes.object,
-  ]),
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-  expConfig: PropTypes.object.isRequired,
-};
-
-FeaturesVsUMIsScatterplot.defaultProps = {
-  plotData: [],
-  actions: true,
-};
-
-export default FeaturesVsUMIsScatterplot;
diff --git a/src/components/plots/GeneReorderTool.jsx b/src/components/plots/GeneReorderTool.jsx
index 8f51047045..777c8c868c 100644
--- a/src/components/plots/GeneReorderTool.jsx
+++ b/src/components/plots/GeneReorderTool.jsx
@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 
 import { updatePlotConfig } from 'redux/actions/componentConfig';
 
-import { arrayMoveImmutable } from 'utils/array-move';
+import { arrayMoveImmutable } from 'utils/arrayUtils';
 import HierarchicalTreeGenes from 'components/plots/hierarchical-tree-genes/HierarchicalTreeGenes';
 
 import { Space, Button } from 'antd';
diff --git a/src/components/plots/MiniPlot.jsx b/src/components/plots/MiniPlot.jsx
index 4487a8ff36..1ba17b55d2 100644
--- a/src/components/plots/MiniPlot.jsx
+++ b/src/components/plots/MiniPlot.jsx
@@ -50,7 +50,7 @@ const MiniPlot = (props) => {
     if (!config) {
       return (
         <center>
-          <Skeleton.Image />
+          <Skeleton.Image style={{ width: 92, height: 92 }} />
         </center>
       );
     }
diff --git a/src/components/plots/MitochondrialFractionHistogram.jsx b/src/components/plots/MitochondrialFractionHistogram.jsx
deleted file mode 100644
index b5e8050a48..0000000000
--- a/src/components/plots/MitochondrialFractionHistogram.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateMitochondrialFractionHistogram';
-import EmptyPlot from './helpers/EmptyPlot';
-
-const MitochondrialFractionHistogram = (props) => {
-  const {
-    config, plotData, actions,
-  } = props;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-
-  useEffect(() => {
-    if (config && plotData) {
-      setPlotSpec(generateSpec(config, plotData));
-    }
-  }, [config, plotData]);
-
-  const render = () => {
-    if (!plotData.length) {
-      return (
-        <EmptyPlot mini={config.miniPlot} />
-      );
-    }
-
-    return (
-      <center>
-        <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-      </center>
-    );
-  };
-
-  return (
-    <>
-      { render()}
-    </>
-  );
-};
-
-MitochondrialFractionHistogram.propTypes = {
-  config: PropTypes.object.isRequired,
-  plotData: PropTypes.array,
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-};
-
-MitochondrialFractionHistogram.defaultProps = {
-  plotData: null,
-  actions: true,
-};
-
-export default MitochondrialFractionHistogram;
diff --git a/src/components/plots/MitochondrialFractionScatterplot.jsx b/src/components/plots/MitochondrialFractionScatterplot.jsx
deleted file mode 100644
index f6d910ba16..0000000000
--- a/src/components/plots/MitochondrialFractionScatterplot.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Vega } from 'react-vega';
-
-import generateSpec from 'utils/plotSpecs/generateMitochondrialFractionScatterplot';
-import EmptyPlot from './helpers/EmptyPlot';
-
-const MitochondrialFractionScatterplot = (props) => {
-  const {
-    config, plotData, actions,
-  } = props;
-
-  const [plotSpec, setPlotSpec] = useState(config);
-
-  useEffect(() => {
-    if (config && plotData) {
-      setPlotSpec(generateSpec(config, plotData));
-    }
-  }, [config, plotData]);
-
-  const render = () => {
-    if (!plotData?.length) {
-      return (
-        <EmptyPlot mini={config.miniPlot} />
-      );
-    }
-
-    return (
-      <center>
-        <Vega spec={plotSpec} renderer='canvas' actions={actions} />
-      </center>
-    );
-  };
-
-  return (
-    <>
-      { render()}
-    </>
-  );
-};
-
-MitochondrialFractionScatterplot.propTypes = {
-  config: PropTypes.object.isRequired,
-  plotData: PropTypes.array,
-  actions: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.object,
-  ]),
-};
-
-MitochondrialFractionScatterplot.defaultProps = {
-  plotData: null,
-  actions: true,
-};
-
-export default MitochondrialFractionScatterplot;
diff --git a/src/components/plots/PlotsTablesContainer.jsx b/src/components/plots/PlotsTablesContainer.jsx
index 61bdfeef5a..e54fcd1175 100644
--- a/src/components/plots/PlotsTablesContainer.jsx
+++ b/src/components/plots/PlotsTablesContainer.jsx
@@ -8,29 +8,35 @@ import Link from 'next/link';
 import { plotNames, layout } from 'utils/constants';
 
 const CARD_STYLE = { marginBottom: '1em' };
-const CardItem = (({ onClick, item, href }) => (
-  <Card.Grid
-    href={href}
-    onClick={onClick}
-    hoverable={false}
-    style={{ textAlign: 'center', width: '100%', padding: '0' }}
-  >
-    <img
-      alt={item.name}
-      src={item.image}
-      style={{
-        height: '200px', width: '250px', align: 'center', padding: '10px',
-      }}
-    />
-  </Card.Grid>
+const CardItem = (({
+  item, experimentId,
+}) => (
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+  <div style={{ cursor: 'pointer' }}>
+    <Card.Grid
+      hoverable={false}
+      style={{ textAlign: 'center', width: '100%', padding: '0' }}
+    >
+      <Link
+        as={`/experiments/${experimentId}/plots-and-tables/${item.link}`}
+        href={`/experiments/[experimentId]/plots-and-tables/${item.link}`}
+        passHref
+      >
+        <img
+          alt={item.name}
+          src={item.image}
+          style={{
+            height: '200px', width: '250px', align: 'center', padding: '10px',
+          }}
+        />
+      </Link>
+    </Card.Grid>
+  </div>
 ));
 
-CardItem.defaultProps = {};
-
 CardItem.propTypes = {
   item: PropTypes.object.isRequired,
-  href: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
+  experimentId: PropTypes.string.isRequired,
 };
 
 const plots = [
@@ -124,7 +130,7 @@ const PlotsTablesContainer = (props) => {
     >
       <Space style={{ padding: '0 1em' }} direction='vertical'>
         {plots.map((section) => (
-          <Row gutter='16'>
+          <Row gutter='16' key={section.title}>
             <Col span={24}>
               <Divider
                 orientation='left'
@@ -134,7 +140,7 @@ const PlotsTablesContainer = (props) => {
               </Divider>
             </Col>
             {section.plots.map((item) => (
-              <Col className='plot-card'>
+              <Col className='plot-card' key={item.key}>
                 <Card
                   size='small'
                   hoverable
@@ -142,13 +148,7 @@ const PlotsTablesContainer = (props) => {
                   bodyStyle={{ padding: '0' }}
                   style={CARD_STYLE}
                 >
-                  <Link
-                    as={`/experiments/${experimentId}/plots-and-tables/${item.link}`}
-                    href={`/experiments/[experimentId]/plots-and-tables/${item.link}`}
-                    passHref
-                  >
-                    <CardItem item={item} />
-                  </Link>
+                  <CardItem item={item} experimentId={experimentId} />
                 </Card>
               </Col>
             ))}
diff --git a/src/components/plots/styling/MultiViewEditor.jsx b/src/components/plots/styling/MultiViewEditor.jsx
index 1f8b0f54e6..ac20da54f2 100644
--- a/src/components/plots/styling/MultiViewEditor.jsx
+++ b/src/components/plots/styling/MultiViewEditor.jsx
@@ -12,7 +12,7 @@ import {
   Radio,
 } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
-import { arrayMoveImmutable } from 'utils/array-move';
+import { arrayMoveImmutable } from 'utils/arrayUtils';
 import HierarchicalTreeGenes from 'components/plots/hierarchical-tree-genes/HierarchicalTreeGenes';
 import GeneSearchBar from 'components/plots/GeneSearchBar';
 
diff --git a/src/pages/data-management/index.jsx b/src/pages/data-management/index.jsx
index b6f82efed7..67e9c89d44 100644
--- a/src/pages/data-management/index.jsx
+++ b/src/pages/data-management/index.jsx
@@ -5,8 +5,8 @@ import { loadExperiments } from 'redux/actions/experiments';
 import Header from 'components/Header';
 import MultiTileContainer from 'components/MultiTileContainer';
 import NewProjectModal from 'components/data-management/NewProjectModal';
-import ProjectsListContainer from 'components/data-management/ProjectsListContainer';
-import ProjectDetails from 'components/data-management/ProjectDetails';
+import ProjectsListContainer from 'components/data-management/project/ProjectsListContainer';
+import ProjectDetails from 'components/data-management/project/ProjectDetails';
 import { loadProcessingSettings } from 'redux/actions/experimentSettings';
 import loadBackendStatus from 'redux/actions/backendStatus/loadBackendStatus';
 import { loadSamples } from 'redux/actions/samples';
diff --git a/src/pages/experiments/[experimentId]/data-exploration/index.jsx b/src/pages/experiments/[experimentId]/data-exploration/index.jsx
index ad1e8dfb5e..97b8c38b4e 100644
--- a/src/pages/experiments/[experimentId]/data-exploration/index.jsx
+++ b/src/pages/experiments/[experimentId]/data-exploration/index.jsx
@@ -99,19 +99,21 @@ const ExplorationViewPage = ({
           size='small'
           activeKey={selectedTab}
           onChange={(key) => { setSelectedTab(key); }}
-        >
-          <TabPane tab='Gene list' key='Gene list'>
-            <GeneListTool experimentId={experimentId} width={width} height={height} />
-          </TabPane>
-          <TabPane tab='Differential expression' key='Differential expression'>
-            <DiffExprManager
+          items={[{
+            label: 'Gene list',
+            key: 'Gene list',
+            children: <GeneListTool experimentId={experimentId} width={width} height={height} />,
+          }, {
+            label: 'Differential expression',
+            key: 'Differential expression',
+            children: <DiffExprManager
               experimentId={experimentId}
               view='compute'
               width={width}
               height={height}
-            />
-          </TabPane>
-        </Tabs>
+            />,
+          }]}
+        />
       ),
     },
     'Cell sets and Metadata': {
@@ -181,9 +183,9 @@ const ExplorationViewPage = ({
           <Dropdown
             trigger={['click']}
             key='search-menu-dropdown'
-            overlay={searchMenu}
-            visible={addMenuVisible}
-            onVisibleChange={(visible) => setAddMenuVisible(visible)}
+            menu={searchMenu}
+            open={addMenuVisible}
+            onOpenChange={(visible) => setAddMenuVisible(visible)}
           >
             <Button type='primary' onClick={() => setAddMenuVisible(!addMenuVisible)}>
               Add
diff --git a/src/pages/experiments/[experimentId]/data-processing/index.jsx b/src/pages/experiments/[experimentId]/data-processing/index.jsx
index 856d9fd04f..aed33718d5 100644
--- a/src/pages/experiments/[experimentId]/data-processing/index.jsx
+++ b/src/pages/experiments/[experimentId]/data-processing/index.jsx
@@ -23,7 +23,6 @@ import {
 import React, {
   useCallback,
   useEffect,
-  useMemo,
   useState,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -682,7 +681,7 @@ const DataProcessingPage = ({ experimentId, experimentData }) => {
             ) : (
               <Modal
                 title='Run data processing with the changed settings'
-                visible
+                open
                 onCancel={() => setRunQCModalVisible(false)}
                 footer={
                   [
diff --git a/src/pages/settings/profile/index.jsx b/src/pages/settings/profile/index.jsx
index 4fecf30dca..989b402579 100644
--- a/src/pages/settings/profile/index.jsx
+++ b/src/pages/settings/profile/index.jsx
@@ -54,7 +54,7 @@ const ProfileSettings = () => {
     if (name || email || changedUserAttributes[agreedEmailsKey]) {
       setEmailError(false);
       await Auth.updateUserAttributes(user, changedUserAttributes)
-        .then(() => pushNotificationMessage('success', endUserMessages.ACCOUNT_DETAILS_UPDATED, 3))
+        .then((a) => pushNotificationMessage('success', endUserMessages.ACCOUNT_DETAILS_UPDATED, 3))
         .catch(() => {
           setEmailError(true);
         });
@@ -86,7 +86,8 @@ const ProfileSettings = () => {
     }
 
     dispatch(loadUser());
-    setChanges(initialState);
+
+    setNewAttributes(initialState);
   };
 
   // the user might not be loaded already - then return <Empty/>
diff --git a/src/redux/actions/componentConfig/downloadNormalizedMatrix.js b/src/redux/actions/componentConfig/downloadNormalizedMatrix.js
index e1f20844fc..079ae481e7 100644
--- a/src/redux/actions/componentConfig/downloadNormalizedMatrix.js
+++ b/src/redux/actions/componentConfig/downloadNormalizedMatrix.js
@@ -3,7 +3,7 @@ import { PLOT_DATA_LOADED, PLOT_DATA_LOADING, PLOT_DATA_ERROR } from 'redux/acti
 import downloadFromUrl from 'utils/downloadFromUrl';
 import handleError from 'utils/http/handleError';
 import fetchWork from 'utils/work/fetchWork';
-import writeToFileURL from 'utils/writeToFileURL';
+import writeToFileURL from 'utils/upload/writeToFileURL';
 
 const downloadNormalizedMatrix = (
   plotUuid,
diff --git a/src/redux/actions/differentialExpression/loadDifferentialExpression.js b/src/redux/actions/differentialExpression/loadDifferentialExpression.js
index 2f3ec0f96d..29e55178bf 100644
--- a/src/redux/actions/differentialExpression/loadDifferentialExpression.js
+++ b/src/redux/actions/differentialExpression/loadDifferentialExpression.js
@@ -6,7 +6,7 @@ import fetchWork from 'utils/work/fetchWork';
 import getTimeoutForWorkerTask from 'utils/getTimeoutForWorkerTask';
 
 import generateDiffExprBody from 'utils/work/generateDiffExprBody';
-import getArray from 'utils/getArray';
+import { getArray } from 'utils/arrayUtils';
 
 const loadDifferentialExpression = (
   experimentId, comparisonGroup, comparisonType, tableState, newAdvancedFilters = null,
diff --git a/src/redux/reducers/backendStatus/backendStatusUpdated.js b/src/redux/reducers/backendStatus/backendStatusUpdated.js
index dee6bd6a73..d02f95b0fd 100644
--- a/src/redux/reducers/backendStatus/backendStatusUpdated.js
+++ b/src/redux/reducers/backendStatus/backendStatusUpdated.js
@@ -3,7 +3,7 @@ import produce from 'immer';
 
 import initialState from 'redux/reducers/backendStatus/initialState';
 
-import mergeObjectReplacingArrays from 'utils/mergeObjectReplacingArrays';
+import { mergeObjectReplacingArrays } from 'utils/arrayUtils';
 
 const backendStatusUpdated = produce((draft, action) => {
   const { experimentId, status } = action.payload;
diff --git a/src/redux/reducers/cellSets/cellSetsReorder.js b/src/redux/reducers/cellSets/cellSetsReorder.js
index d58a67d289..be186a0d79 100644
--- a/src/redux/reducers/cellSets/cellSetsReorder.js
+++ b/src/redux/reducers/cellSets/cellSetsReorder.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import produce from 'immer';
 
-import { arrayMoveMutable } from 'utils/array-move';
+import { arrayMoveMutable } from 'utils/arrayUtils';
 
 const cellSetsReorder = produce((draft, action) => {
   const { cellSetKey, newPosition, cellClassKey } = action.payload;
diff --git a/src/redux/reducers/componentConfig/updateConfig.js b/src/redux/reducers/componentConfig/updateConfig.js
index c5fc7eb9ed..ef606c18c1 100644
--- a/src/redux/reducers/componentConfig/updateConfig.js
+++ b/src/redux/reducers/componentConfig/updateConfig.js
@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import mergeObjectReplacingArrays from 'utils/mergeObjectReplacingArrays';
+import { mergeObjectReplacingArrays } from 'utils/arrayUtils';
 
 const updateConfig = (state, action) => {
   const { plotUuid, configChanges = null, dataChanges = null } = action.payload;
diff --git a/src/redux/reducers/experimentSettings/processingConfig/updateNonSampleFilterSettings.js b/src/redux/reducers/experimentSettings/processingConfig/updateNonSampleFilterSettings.js
index d0faea5178..dcc23dd1d3 100644
--- a/src/redux/reducers/experimentSettings/processingConfig/updateNonSampleFilterSettings.js
+++ b/src/redux/reducers/experimentSettings/processingConfig/updateNonSampleFilterSettings.js
@@ -2,7 +2,7 @@ import _ from 'lodash';
 /* eslint-disable no-param-reassign */
 import produce, { current } from 'immer';
 
-import mergeObjectReplacingArrays from 'utils/mergeObjectReplacingArrays';
+import { mergeObjectReplacingArrays } from 'utils/arrayUtils';
 import initialState from '../initialState';
 
 const updateNonSampleFilterSettings = produce((draft, action) => {
diff --git a/src/utils/array-move.js b/src/utils/array-move.js
deleted file mode 100644
index 3f3ecb1d69..0000000000
--- a/src/utils/array-move.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/* MIT License
-
-Copyright(c) Sindre Sorhus < sindresorhus@gmail.com>
-(https://sindresorhus.com)
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files(the "Software"), to
-deal in the Software without restriction, including without limitation the
-rights to use, copy, modify, merge, publish, distribute, sublicense, and / or
-sell copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
-PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
-HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.
-*/
-export function arrayMoveMutable(array, fromIndex, toIndex) {
-  const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
-
-  if (startIndex >= 0 && startIndex < array.length) {
-    const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
-
-    const [item] = array.splice(fromIndex, 1);
-    array.splice(endIndex, 0, item);
-  }
-}
-
-export function arrayMoveImmutable(array, fromIndex, toIndex) {
-  // eslint-disable-next-line no-param-reassign
-  array = [...array];
-  arrayMoveMutable(array, fromIndex, toIndex);
-  return array;
-}
diff --git a/src/utils/arrayUtils.js b/src/utils/arrayUtils.js
index e6e135fde2..3268472fb8 100644
--- a/src/utils/arrayUtils.js
+++ b/src/utils/arrayUtils.js
@@ -1,5 +1,35 @@
+/* MIT License
+
+Copyright(c) Sindre Sorhus < sindresorhus@gmail.com>
+(https://sindresorhus.com)
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files(the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and / or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+*/
+
 import _ from 'lodash';
 
+const getArray = (object) => Object.keys(object).reduce((r, k) => {
+  object[k].forEach((a, i) => {
+    // eslint-disable-next-line no-param-reassign
+    r[i] = r[i] || {};
+    // eslint-disable-next-line no-param-reassign
+    r[i][k] = a;
+  });
+  return r;
+}, []);
+
 const isSubset = (
   (subsetArray, containingArray) => _.difference(subsetArray, containingArray).length === 0);
 
@@ -8,4 +38,43 @@ const reversed = (array) => [...array].reverse();
 
 const removed = (item, array) => array.filter((currExpId) => currExpId !== item);
 
-export { isSubset, reversed, removed };
+const arrayMoveMutable = (array, fromIndex, toIndex) => {
+  const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
+
+  if (startIndex >= 0 && startIndex < array.length) {
+    const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
+
+    const [item] = array.splice(fromIndex, 1);
+    array.splice(endIndex, 0, item);
+  }
+};
+
+const arrayMoveImmutable = (array, fromIndex, toIndex) => {
+  // eslint-disable-next-line no-param-reassign
+  array = [...array];
+  arrayMoveMutable(array, fromIndex, toIndex);
+  return array;
+};
+
+/**
+  This function merges objects replacing old arrays in its properties with
+  the new ones unlike _.merge which combines old and new arrays.
+ */
+const mergeObjectReplacingArrays = (source, diff) => {
+  const arrayMerge = (originalArray, resultingArray) => {
+    if (_.isArray(originalArray) && resultingArray) {
+      return resultingArray;
+    }
+  };
+
+  return _.mergeWith(
+    source,
+    diff,
+    arrayMerge,
+  );
+};
+
+export {
+  getArray, isSubset, reversed, removed,
+  arrayMoveMutable, arrayMoveImmutable, mergeObjectReplacingArrays,
+};
diff --git a/src/utils/extraActionCreators/differentialExpression/getBatchDiffExpr.js b/src/utils/extraActionCreators/differentialExpression/getBatchDiffExpr.js
index ca9030bf22..62bd06a039 100644
--- a/src/utils/extraActionCreators/differentialExpression/getBatchDiffExpr.js
+++ b/src/utils/extraActionCreators/differentialExpression/getBatchDiffExpr.js
@@ -1,7 +1,7 @@
 import fetchWork from 'utils/work/fetchWork';
 import getTimeoutForWorkerTask from 'utils/getTimeoutForWorkerTask';
 import { getCellSetKey } from 'utils/cellSets';
-import getArray from 'utils/getArray';
+import { getArray } from 'utils/arrayUtils';
 import pushNotificationMessage from 'utils/pushNotificationMessage';
 
 const getBatchDiffExpr = (experimentId,
diff --git a/src/utils/extraActionCreators/downloadProcessedMatrix.js b/src/utils/extraActionCreators/downloadProcessedMatrix.js
index d15743b98f..051c126340 100644
--- a/src/utils/extraActionCreators/downloadProcessedMatrix.js
+++ b/src/utils/extraActionCreators/downloadProcessedMatrix.js
@@ -3,7 +3,7 @@ import { loadProcessingSettings } from 'redux/actions/experimentSettings';
 
 import fetchWork from 'utils/work/fetchWork';
 import getTimeoutForWorkerTask from 'utils/getTimeoutForWorkerTask';
-import writeToFileURL from 'utils/writeToFileURL';
+import writeToFileURL from 'utils/upload/writeToFileURL';
 import downloadFromUrl from 'utils/downloadFromUrl';
 import handleError from 'utils/http/handleError';
 import endUserMessages from 'utils/endUserMessages';
diff --git a/src/utils/getArray.js b/src/utils/getArray.js
deleted file mode 100644
index ec94e72ae3..0000000000
--- a/src/utils/getArray.js
+++ /dev/null
@@ -1,13 +0,0 @@
-function getArray(object) {
-  return Object.keys(object).reduce((r, k) => {
-    object[k].forEach((a, i) => {
-      // eslint-disable-next-line no-param-reassign
-      r[i] = r[i] || {};
-      // eslint-disable-next-line no-param-reassign
-      r[i][k] = a;
-    });
-    return r;
-  }, []);
-}
-
-export default getArray;
diff --git a/src/utils/mergeObjectReplacingArrays.js b/src/utils/mergeObjectReplacingArrays.js
deleted file mode 100644
index c0bca68145..0000000000
--- a/src/utils/mergeObjectReplacingArrays.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import _ from 'lodash';
-
-/**
-  This function merges objects replacing old arrays in its properties with
-  the new ones unlike _.merge which combines old and new arrays.
- */
-const mergeObjectReplacingArrays = (source, diff) => {
-  const arrayMerge = (originalArray, resultingArray) => {
-    if (_.isArray(originalArray) && resultingArray) {
-      return resultingArray;
-    }
-  };
-
-  return _.mergeWith(
-    source,
-    diff,
-    arrayMerge,
-  );
-};
-
-export default mergeObjectReplacingArrays;
diff --git a/src/utils/plotSpecs/generateFeaturesVsUMIsScatterplot.js b/src/utils/plotSpecs/generateFeaturesVsUMIsScatterplot.js
index 73b0641178..dc840d5808 100644
--- a/src/utils/plotSpecs/generateFeaturesVsUMIsScatterplot.js
+++ b/src/utils/plotSpecs/generateFeaturesVsUMIsScatterplot.js
@@ -5,7 +5,7 @@ const generateSpec = (config, plotData, expConfig) => {
   const { pointsData, linesData } = plotData;
   const { predictionInterval } = expConfig;
 
-  const sd = stdev(pointsData.map((p) => p.log_genes));
+  const sd = stdev(pointsData?.map((p) => p.log_genes));
   let predictionIntervalIndex;
 
   // if the prediction interval is not set yet
diff --git a/src/utils/writeToFileURL.js b/src/utils/upload/writeToFileURL.js
similarity index 100%
rename from src/utils/writeToFileURL.js
rename to src/utils/upload/writeToFileURL.js