Merge pull request #505 from biomage-ltd/fix-diff-expr-no-data-loading

[BIOMAGE-1412] - Fix DE Loading
hms-dbmi-cellenics · Sep 13, 2021 · cf37304 · cf37304
2 parents 870182b + 9bd7206
commit cf37304
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 14 deletions.
diff --git a/...on/differential-expression-tool/DiffExprManager-regression-load-on-second-render.test.jsx b/...on/differential-expression-tool/DiffExprManager-regression-load-on-second-render.test.jsx
@@ -11,6 +11,8 @@ import DiffExprManager from '../../../../components/data-exploration/differentia
 import DiffExprCompute from '../../../../components/data-exploration/differential-expression-tool/DiffExprCompute';
 import DiffExprResults from '../../../../components/data-exploration/differential-expression-tool/DiffExprResults';
 import initialState from '../../../../redux/reducers/differentialExpression/initialState';
+import genesInitialState from '../../../../redux/reducers/genes/initialState';
+import cellSetsInitialState from '../../../../redux/reducers/cellSets/initialState';
 
 import { DIFF_EXPR_LOADING, DIFF_EXPR_LOADED } from '../../../../redux/actionTypes/differentialExpression';
 
@@ -52,10 +54,12 @@ const experimentId = '1234';
 
 const storeState = {
   cellSets: {
+    ...cellSetsInitialState,
     hierarchy: [],
     properties: {},
   },
   genes: {
+    ...genesInitialState,
     focused: undefined,
   },
   differentialExpression: {

diff --git a/..._test__/components/data-exploration/differential-expression-tool/DiffExprManager.test.jsx b/..._test__/components/data-exploration/differential-expression-tool/DiffExprManager.test.jsx
@@ -10,6 +10,8 @@ import DiffExprManager from '../../../../components/data-exploration/differentia
 import DiffExprCompute from '../../../../components/data-exploration/differential-expression-tool/DiffExprCompute';
 import DiffExprResults from '../../../../components/data-exploration/differential-expression-tool/DiffExprResults';
 import initialState from '../../../../redux/reducers/differentialExpression/initialState';
+import genesInitialState from '../../../../redux/reducers/genes/initialState';
+import cellSetsInitialState from '../../../../redux/reducers/cellSets/initialState';
 
 jest.mock('localforage');
 jest.mock('../../../../utils/environment', () => ({
@@ -22,10 +24,12 @@ const mockStore = configureMockStore([thunk]);
 const emptyState = {
   differentialExpression: { ...initialState },
   cellSets: {
+    ...cellSetsInitialState,
     hierarchy: [],
     properties: {},
   },
   genes: {
+    ...genesInitialState,
     focused: undefined,
   },
 };

diff --git a/..._test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx b/..._test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx
@@ -9,6 +9,7 @@ import thunk from 'redux-thunk';
 
 import waitForActions from 'redux-mock-store-await-actions';
 
+import { Empty } from 'antd';
 import DiffExprResults from '../../../../components/data-exploration/differential-expression-tool/DiffExprResults';
 import { fetchWork } from '../../../../utils/work/fetchWork';
 import { DIFF_EXPR_LOADING, DIFF_EXPR_LOADED } from '../../../../redux/actionTypes/differentialExpression';
@@ -60,7 +61,7 @@ const backendStatus = {
   },
 };
 
-const store = mockStore({
+const resultState = {
   genes: {
     selected: [],
   },
@@ -154,7 +155,24 @@ const store = mockStore({
     },
   },
   backendStatus,
-});
+};
+
+const noResultState = {
+  ...resultState,
+  differentialExpression: {
+    ...resultState.differentialExpression,
+    properties: {
+      ...resultState.differentialExpression.properties,
+      data: [],
+      loading: false,
+      error: false,
+      total: 0,
+    },
+  },
+};
+
+const withResultStore = mockStore(resultState);
+const noResultStore = mockStore(noResultState);
 
 describe('DiffExprResults', () => {
   beforeAll(async () => {
@@ -164,7 +182,7 @@ describe('DiffExprResults', () => {
   configure({ adapter: new Adapter() });
   it('renders correctly', () => {
     const component = mount(
-      <Provider store={store}>
+      <Provider store={withResultStore}>
         <DiffExprResults experimentId={experimentId} onGoBack={jest.fn()} width={100} height={200} />
       </Provider>,
     );
@@ -205,7 +223,7 @@ describe('DiffExprResults', () => {
     };
 
     const component = mount(
-      <Provider store={store}>
+      <Provider store={withResultStore}>
         <DiffExprResults experimentId={experimentId} onGoBack={jest.fn()} width={100} height={200} />
       </Provider>,
     );
@@ -217,7 +235,7 @@ describe('DiffExprResults', () => {
     });
 
     // // Wait for side-effect to propagate (properties loading and loaded).
-    await waitForActions(store, [DIFF_EXPR_LOADING, DIFF_EXPR_LOADED]);
+    await waitForActions(withResultStore, [DIFF_EXPR_LOADING, DIFF_EXPR_LOADED]);
 
     expect(fetchWork).toHaveBeenCalledWith(
       '1234',
@@ -228,7 +246,7 @@ describe('DiffExprResults', () => {
         experimentId: '1234',
         name: 'DifferentialExpression',
       },
-      store.getState,
+      withResultStore.getState,
       {
         extras: {
           pagination: {
@@ -239,14 +257,14 @@ describe('DiffExprResults', () => {
       },
     );
 
-    expect(store.getActions()[0]).toMatchSnapshot();
-    expect(store.getActions()[1]).toMatchSnapshot();
+    expect(withResultStore.getActions()[0]).toMatchSnapshot();
+    expect(withResultStore.getActions()[1]).toMatchSnapshot();
   });
 
   it('Having a focused gene triggers focused view for `eye` button.', () => {
     // Redefine store from `beforeEach`.
     const component = mount(
-      <Provider store={store}>
+      <Provider store={withResultStore}>
         <DiffExprResults experimentId={experimentId} onGoBack={jest.fn()} width={100} height={200} />
       </Provider>,
     );
@@ -255,7 +273,7 @@ describe('DiffExprResults', () => {
 
     table.getElement().props.data.forEach((row) => {
       const lookupComponent = mount(
-        <Provider store={store}>
+        <Provider store={withResultStore}>
           {row.lookup}
         </Provider>,
       );
@@ -271,9 +289,10 @@ describe('DiffExprResults', () => {
       lookupComponent.unmount();
     });
   });
+
   it('Show comparison settings button works.', () => {
     const component = mount(
-      <Provider store={store}>
+      <Provider store={withResultStore}>
         <DiffExprResults experimentId={experimentId} onGoBack={jest.fn()} width={100} height={200} />
       </Provider>,
     );
@@ -289,4 +308,23 @@ describe('DiffExprResults', () => {
     expect(button.childAt(0).text()).toEqual('Show settings');
     expect(!div);
   });
+
+  it("Doesn't show loading indicator if there is no data returned", () => {
+    const component = mount(
+      <Provider store={noResultStore}>
+        <DiffExprResults
+          experimentId={experimentId}
+        />
+      </Provider>,
+    );
+
+    const spin = component.find('Table').find(Loader);
+    const empty = component.find('Table').find(Empty);
+
+    // There should be no loader
+    expect(spin.length).toEqual(0);
+
+    // Expect table to contain Empty component
+    expect(empty.length).toEqual(1);
+  });
 });
diff --git a/src/components/data-exploration/differential-expression-tool/DiffExprResults.jsx b/src/components/data-exploration/differential-expression-tool/DiffExprResults.jsx
@@ -74,8 +74,6 @@ const DiffExprResults = (props) => {
     }
   }, [data, properties]);
 
-  const isTableLoading = () => data.length === 0 || loading;
-
   const onUpdate = (newState, reason) => {
     // We handle `loading` and `loaded` in the HOC, no need to react to these.
     if (reason === geneTableUpdateReason.loaded || reason === geneTableUpdateReason.loading) {
@@ -182,7 +180,7 @@ const DiffExprResults = (props) => {
         }}
         onUpdate={onUpdate}
         columns={columns}
-        loading={isTableLoading()}
+        loading={loading}
         onExportCSV={() => { setExportAlert(true); }}
         error={error}
         width={width}