Merge pull request #819 from hms-dbmi-cellenics/biomage-changes-2

Biomage changes 2

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+

.github/workflows/nextjs_bundle_analysis.yaml

@@ -12,6 +12,10 @@ defaults:
     # change this if your nextjs app does not live at the root of the repo
     working-directory: ./
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   analyze:
     runs-on: ubuntu-latest

package.json

@@ -44,7 +44,7 @@
     "@ant-design/icons": "^4.2.1",
     "@aws-amplify/auth": "^4.3.18",
     "@aws-amplify/core": "^4.3.10",
-    "@aws-amplify/storage": "^4.4.11",
+    "@aws-amplify/storage": "^5.1.5",
     "@aws-sdk/client-cognito-identity": "^3.11.0",
     "@aws-sdk/client-cognito-identity-provider": "^3.11.0",
     "@aws-sdk/client-sts": "^3.12.0",
@@ -95,10 +95,14 @@
     "react-color": "^2.18.1",
     "react-copy-to-clipboard": "^5.0.4",
     "react-csv": "^2.0.3",
+    "react-dnd": "^14.0.4",
+    "react-dnd-html5-backend": "^14.0.2",
+    "react-dnd-multi-backend": "^6.0.2",
+    "react-dnd-test-utils": "^14.1.0",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.3.1",
     "react-keyboard-event-handler": "^1.5.4",
-    "react-mosaic-component": "^5.0.0",
+    "react-mosaic-component": "^5.3.0",
     "react-redux": "^7.2.0",
     "react-resize-detector": "^5.0.6",
     "react-scroll": "^1.8.0",
@@ -124,15 +128,16 @@
     "vega": "^5.21.0",
     "vega-lite": "^4.13.0",
     "vega-webgl-renderer": "^1.0.0-beta.2",
+    "virtualizedtableforantd4": "^1.2.2",
     "vitessce": "github:hms-dbmi-cellenics/vitessce",
     "webpack": "^4.43.0",
-    "webpack-bundle-analyzer": "^3.3.2"
+    "webpack-bundle-analyzer": "^4.7.0"
   },
   "devDependencies": {
     "@testing-library/dom": "^7.30.2",
-    "@testing-library/jest-dom": "^5.8.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.6",
-    "@testing-library/user-event": "^13.1.1",
+    "@testing-library/user-event": "^13.5.0",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^26.0.1",
     "enzyme": "^3.11.0",
@@ -152,9 +157,10 @@
     "jest-watch-typeahead": "^0.6.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
-    "lint-staged": "^8.1.0",
+    "lint-staged": "^13.1.0",
     "pre-commit": "^1.2.2",
     "prettier": "^1.15.3",
+    "react-dnd-test-backend": "^14.0.1",
     "webpack": "^4.43.0"
   },
   "nextBundleAnalysis": {

src/__test__/components/ContentWrapper.test.jsx

@@ -18,7 +18,8 @@ import { getBackendStatus } from 'redux/selectors';
 import { loadExperiments, setActiveExperiment } from 'redux/actions/experiments';
 
 import { updateExperimentInfo } from 'redux/actions/experimentSettings';
-import generatePipelineParamsHash from 'utils/data-management/generatePipelineParamsHash';
+
+import calculatePipelineRerunStatus from 'utils/data-management/calculatePipelineRerunStatus';
 
 import mockAPI, {
   generateDefaultMockAPIResponses,
@@ -28,7 +29,7 @@ import { experiments } from '__test__/test-utils/mockData';
 
 jest.mock('redux/selectors');
 jest.mock('utils/socketConnection');
-jest.mock('utils/data-management/generatePipelineParamsHash');
+jest.mock('utils/data-management/calculatePipelineRerunStatus');
 
 jest.mock('next/router', () => ({
   __esModule: true,
@@ -60,8 +61,6 @@ Object.defineProperty(navigator, 'userAgent', { value: chromeUA, writable: true
 
 enableFetchMocks();
 
-generatePipelineParamsHash.mockImplementation(() => 'mockParamsHash');
-
 const experimentWithSamples = experiments.find((experiment) => experiment.samplesOrder.length > 0);
 
 const sampleIds = experimentWithSamples.samplesOrder;
@@ -98,6 +97,12 @@ const renderContentWrapper = async (expId, expData) => {
   return result;
 };
 
+getBackendStatus.mockImplementation(() => () => ({
+  loading: false,
+  error: false,
+  status: null,
+}));
+
 describe('ContentWrapper', () => {
   beforeAll(async () => {
     await preloadAll();
@@ -117,17 +122,17 @@ describe('ContentWrapper', () => {
 
     navigator.userAgent = chromeUA;
 
-    getBackendStatus.mockImplementation(() => () => ({
-      loading: false,
-      error: false,
-      status: null,
-    }));
+    calculatePipelineRerunStatus.mockImplementation(() => ({ rerun: true, reasons: [], complete: false }));
 
     await store.dispatch(loadExperiments());
     await store.dispatch(setActiveExperiment(experimentId));
     await store.dispatch(updateExperimentInfo({ experimentId, experimentName, sampleIds }));
   });
 
+  afterEach(() => {
+    calculatePipelineRerunStatus.mockRestore();
+  });
+
   it('renders correctly', async () => {
     getBackendStatus.mockImplementation(() => () => ({
       loading: false,
@@ -161,6 +166,8 @@ describe('ContentWrapper', () => {
   });
 
   it('Links are enabled if the selected project is processed', async () => {
+    calculatePipelineRerunStatus.mockImplementationOnce(() => ({ rerun: false, reasons: [], complete: true }));
+
     const mockBackendStatus = {
       loading: false,
       error: false,
@@ -170,18 +177,17 @@ describe('ContentWrapper', () => {
         },
         gem2s: {
           status: 'SUCCEEDED',
-          paramsHash: 'mockParamsHash',
+          shouldRerun: false,
         },
         seurat: {
           status: 'NOT_CREATED',
-          paramsHash: 'mockParamsHash',
         },
       },
     };
 
     getBackendStatus.mockImplementation(() => () => mockBackendStatus);
 
-    await renderContentWrapper();
+    await renderContentWrapper(experimentId, experimentData);
 
     // Data Management is not disabled
     expect(screen.getByText('Data Management').closest('li')).toHaveAttribute('aria-disabled', 'false');

src/__test__/components/PipelineLoadingScreen.test.jsx

@@ -54,24 +54,16 @@ describe('PipelineLoadingScreen', () => {
   });
 
   it('Clicking re-launch analysis re-runs GEM2S', () => {
-    const mockParamsHash = 'mockParamsHash';
-
     const component = mount(
       <Provider store={store}>
-        <PipelineLoadingScreen experimentId='experimentId' paramsHash={mockParamsHash} pipelineStatus='error' pipelineType='gem2s' />
+        <PipelineLoadingScreen experimentId='experimentId' pipelineStatus='error' pipelineType='gem2s' />
       </Provider>,
     );
 
     const relaunchButton = component.find(Button).at(1);
     relaunchButton.simulate('click');
 
     expect(fetchAPI).toHaveBeenCalled();
-
-    const fetchAPIParams = fetchAPI.mock.calls[0];
-    const requestBody = JSON.parse(fetchAPIParams[1].body);
-
-    // Check that the body of the request is correct
-    expect(requestBody.paramsHash).toMatch(mockParamsHash);
   });
 
   it('Renders running state correctly', () => {
@@ -101,4 +93,25 @@ describe('PipelineLoadingScreen', () => {
     // Display step information as shown in steps
     expect(display.find('span.ant-typography').first().text()).toEqual(steps[completedSteps.length]);
   });
+
+  it('Shows correct screen for subsetting experiment ', async () => {
+    const completedSteps = [
+      'step 1',
+      'step 2',
+    ];
+
+    const steps = [
+      'Downloading sample files',
+      'Preprocessing samples',
+      'Computing metrics',
+    ];
+    const experimentName = 'newExperiment';
+    const component = mount(
+      <Provider store={store}>
+        <PipelineLoadingScreen pipelineStatus='subsetting' completedSteps={completedSteps} steps={steps} experimentName={experimentName} pipelineType='gem2s' />
+      </Provider>,
+    );
+
+    expect(component.find('Title').first().text()).toEqual(`Subsetting cell sets into${experimentName}`);
+  });
 });

src/__test__/components/PlatformError.test.jsx

@@ -124,7 +124,7 @@ describe('PlatformError', () => {
     );
 
     const timeoutDate = dayjs().add(120, 's').toISOString();
-    const error = new WorkTimeoutError(timeoutDate, {});
+    const error = new WorkTimeoutError(120, timeoutDate, {}, 'someETag');
 
     act(() => {
       render(<PlatformError error={error} />);

src/__test__/components/PlotContainer.test.jsx

@@ -14,6 +14,7 @@ import fake from '__test__/test-utils/constants';
 import { loadPlotConfig, updatePlotConfig } from 'redux/actions/componentConfig';
 import { initialPlotConfigStates } from 'redux/reducers/componentConfig/initialState';
 import { act } from 'react-dom/test-utils';
+import createTestComponentFactory from '__test__/test-utils/testComponentFactory';
 
 enableFetchMocks();
 
@@ -33,17 +34,13 @@ const defaultProps = {
   plotType,
 };
 
-const renderPlotContainer = (store, props = {}) => {
-  const containerProps = { ...defaultProps, ...props };
+const plotContainerFactory = createTestComponentFactory(PlotContainer, defaultProps);
 
-  render(
-    <Provider store={store}>
-      <PlotContainer {...containerProps}>
-        <>Mock plot</>
-      </PlotContainer>
-    </Provider>,
-  );
-};
+const renderPlotContainer = (store, props = {}) => render(
+  <Provider store={store}>
+    {plotContainerFactory(props)}
+  </Provider>,
+);
 
 let store = null;
 
@@ -64,10 +61,10 @@ describe('PlotContainer', () => {
     await store.dispatch(loadPlotConfig(experimentId, plotUuid, plotType));
   });
 
-  it('Renders itself and its children properly', async () => {
+  it('Renders itself and its children properly', () => {
     renderPlotContainer(store);
 
-    expect(screen.getByText('Mock plot')).toBeInTheDocument();
+    expect(screen.getByTitle('Plot')).toBeInTheDocument();
     expect(screen.getByText('Reset Plot')).toBeInTheDocument();
   });
 

src/__test__/components/PrettyTime.test.jsx

@@ -9,7 +9,7 @@ dayjs.extend(relativeTimePlugin);
 
 const isoTime = '2021-01-01T01:01:01.000Z';
 const relativeTime = dayjs(isoTime).fromNow();
-const localIsoTime = 'Friday, January 1, 2021 1:01 AM';
+const localIsoTime = dayjs(isoTime).format('LLLL');
 
 describe('PrettyTime', () => {
   it('displays the relative time by default', () => {