Merge pull request hms-dbmi-cellenics#946 from biomage-org/cleanup-ui

Cleanup UI

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';
 

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).

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();

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`;
 

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';

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';

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';

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();

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();
 

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]);

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';

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();
+  });
+});

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';

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, {

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', () => () => <></>);

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) => {

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');
 

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');
 

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}
       >