[BIOMAGE-2001] Replace gene selection

src/__test__/components/plots/styling/MarkerGeneSelection.test.jsx

@@ -12,49 +12,24 @@ import { plotTypes } from 'utils/constants';
 
 const mockOnUpdate = jest.fn();
 const mockOnReset = jest.fn();
-const mockOnGeneEnter = jest.fn();
+
+const plotType = plotTypes.DOT_PLOT;
 
 const defaultProps = {
   onUpdate: mockOnUpdate,
   onReset: mockOnReset,
-  onGeneEnter: mockOnGeneEnter,
+  plotUuid: 'dotPlotMain',
+  experimentId: 'experimentId',
+  searchBarUuid: 'searchBarUuid',
 };
 
-const plotType = plotTypes.DOT_PLOT;
-
 const markerGeneSelectionFactory = createTestComponentFactory(MarkerGeneSelection, defaultProps);
 
 describe('MarkerGeneSelection', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it('Should show the custom gene input by default', async () => {
-    const mockConfig = initialPlotConfigStates[plotType];
-
-    await act(async () => {
-      render(
-        markerGeneSelectionFactory({ config: mockConfig }),
-      );
-    });
-
-    // Expect screen to show the custom gene selection input by default
-    expect(screen.getByText(/Type in a gene name/i)).toBeInTheDocument();
-
-    // Typing genes and then pressing enter
-    const geneInput = screen.getByRole('combobox');
-
-    // This is not wrapped in act() because changes to the value causes a re-render
-    // which causes mockOnGeneEnter to lose its  memory of having been called
-    userEvent.type(geneInput, 'ABC{enter}');
-
-    // Expect geneEnter to be called
-    expect(mockOnGeneEnter).toHaveBeenCalledTimes(1);
-    const inputValue = mockOnGeneEnter.mock.calls[0][0];
-
-    expect(inputValue).toEqual(['ABC']);
-  });
-
   it('Should show the number of marker genes input', async () => {
     const mockConfig = { ...initialPlotConfigStates[plotType], useMarkerGenes: true };
 

src/__test__/pages/experiments/[experimentId]/plots-and-tables/dot-plot/__snapshots__/index.test.jsx.snap

@@ -37,13 +37,6 @@ Array [
     },
     Object {},
   ],
-  Array [
-    Object {
-      "data": Array [],
-      "filename": "Test_Experiment-dot_plot-louvain-All",
-    },
-    Object {},
-  ],
   Array [
     Object {
       "data": Array [

src/__test__/pages/experiments/[experimentId]/plots-and-tables/marker-heatmap/index.test.jsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { mount } from 'enzyme';
-import { within, fireEvent } from '@testing-library/dom';
+import { within } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import fetchMock, { enableFetchMocks } from 'jest-fetch-mock';
 import _ from 'lodash';
@@ -85,12 +85,6 @@ const defaultProps = { experimentId };
 
 const heatmapPageFactory = createTestComponentFactory(MarkerHeatmap, defaultProps);
 
-// Helper function to get displayed genes from the gene input
-const getDisplayedGenes = (container) => {
-  const genesNodeList = container.querySelectorAll('span[class*=selection-item-content]');
-  return Array.from(genesNodeList).map((gene) => gene.textContent);
-};
-
 // Helper function to get genes held within the tree
 const getTreeGenes = (container) => {
   const treeNodeList = container.querySelectorAll('span[class*=ant-tree-title]');
@@ -106,7 +100,7 @@ const getCurrentGeneOrder = (component) => {
   });
   newOrder.splice(0, 1);
   return newOrder;
-}
+};
 
 const renderHeatmapPage = async (store) => {
   await act(async () => (
@@ -167,7 +161,7 @@ describe('Marker heatmap plot', () => {
     expect(screen.getByText(/Colours/i)).toBeInTheDocument();
     expect(screen.getByText(/Legend/i)).toBeInTheDocument();
   });
-  
+
   it('Loads the plot', async () => {
     await renderHeatmapPage(storeState);
 
@@ -242,19 +236,19 @@ describe('Marker heatmap plot', () => {
     await renderHeatmapPage(storeState);
 
     // Add in a new gene
-    // This is done because we can not insert text into the genes list input
     const genesToLoad = [...markerGenesData5.order, 'FAKEGENE'];
 
     await act(async () => {
       await storeState.dispatch(loadGeneExpression(experimentId, genesToLoad, plotUuid));
     });
 
-    expect(screen.getByText('FAKEGENE')).toBeInTheDocument();
+    // Get genes displayed in the tree
+    const geneTree = screen.getByRole('tree');
 
-    // The returned value is a HTML NodeList
-    const genesContainer = screen.getByText('FAKEGENE').closest('div[class*=selector]');
+    const displayedGenesList = getTreeGenes(geneTree);
 
-    const displayedGenesList = getDisplayedGenes(genesContainer);
+    // check the added gene is in the tree
+    expect(within(geneTree).getByText('FAKEGENE')).toBeInTheDocument();
 
     // Check that the genes is ordered correctly.
     // This means that FAKEGENE should not be the last in the genes list
@@ -287,64 +281,8 @@ describe('Marker heatmap plot', () => {
   });
 
   it('removing a gene keeps the sorted order without re-sorting', async () => {
-    seekFromS3
-      .mockReset()
-      // load genes list
-      .mockImplementationOnce(() => null)
-      .mockImplementationOnce((Etag) => mockWorkerResponses[Etag])
-      // 1st load
-      .mockImplementationOnce(() => null)
-      .mockImplementationOnce((ETag) => mockWorkerResponses[ETag])
-      // 2nd load
-      .mockImplementationOnce(() => null)
-      .mockImplementationOnce((ETag) => mockWorkerResponses[ETag]);
-
     await renderHeatmapPage(storeState);
 
-    // Setting up so that there is an inserted gene in the list
-    const genesToLoad = [...markerGenesData5.order, 'FAKEGENE'];
-
-    await act(async () => {
-      // This is done because we can not insert text into the genes list input
-      await storeState.dispatch(loadGeneExpression(experimentId, genesToLoad, plotUuid));
-    });
-
-    expect(screen.getByText('FAKEGENE')).toBeInTheDocument();
-
-    // The returned value is a HTML NodeList
-    const genesContainer = screen.getByText('FAKEGENE').closest('div[class*=selector]');
-    const genesListBeforeRemoval = getDisplayedGenes(genesContainer);
-
-    // Removing the 5th gene from the list
-    // genesListBeforeRemoval is modified - splice removes the item from the list
-    const geneToRemove = genesListBeforeRemoval.splice(5, 1);
-    const geneRemoveButton = screen.getByText(geneToRemove).nextSibling;
-
-    userEvent.click(geneRemoveButton);
-
-    // Get newly displayed genes after the removal
-    const genesListAfterRemoval = getDisplayedGenes(genesContainer);
-
-    // The list of displayed genes should be in the same order as the displayed genes
-    expect(_.isEqual(genesListAfterRemoval, genesListBeforeRemoval)).toEqual(true);
-  });
-
-  it('loads the tabs under gene selection', async () => {
-    await renderHeatmapPage(storeState);
-
-    expect(screen.getByText(/Add\/Remove genes/i)).toBeInTheDocument();
-    expect(screen.getByText(/Search for and re-order genes/i)).toBeInTheDocument();
-  });
-
-  it('switches tabs and removes genes within the tree', async () => {
-    await renderHeatmapPage(storeState);
-
-    await act(async () => {
-      userEvent.click(screen.getByText('Search for and re-order genes'));
-    });
-    // note: clicking another tab doesn't remove previous tab from screen
-    // screen.getByText will find multiples of the same gene -> use within(geneTree)
-
     const geneTree = screen.getByRole('tree');
 
     // The genes in Data 5 should be in the tree
@@ -373,10 +311,6 @@ describe('Marker heatmap plot', () => {
   it('searches for genes and adds a valid gene', async () => {
     await renderHeatmapPage(storeState);
 
-    await act(async () => {
-      userEvent.click(screen.getByText('Search for and re-order genes'));
-    });
-
     // check placeholder text is loaded
     expect(screen.getByText('Search for genes...')).toBeInTheDocument();
 
@@ -413,17 +347,13 @@ describe('Marker heatmap plot', () => {
   it('adds an already loaded gene and clears the input', async () => {
     await renderHeatmapPage(storeState);
 
-    await act(async () => {
-      userEvent.click(screen.getByText('Search for and re-order genes'));
-    });
-
     const searchBox = screen.getByRole('combobox');
 
     userEvent.type(searchBox, 'tmem');
 
-    // this finds option for selection box in 1st tab and search box, use second element
-    const option = screen.getAllByTitle('Tmem176a')[1];
+    const option = screen.getByTitle('Tmem176a');
 
+    // expecting option to be disabled throws error, click the option instead and check reaction
     await act(async () => {
       userEvent.click(option, undefined, { skipPointerEventsCheck: true });
     });
@@ -440,7 +370,7 @@ describe('Marker heatmap plot', () => {
   });
 });
 
-// drag and drop is impossible in jest, use enzyme
+// drag and drop is impossible in RTL, use enzyme
 describe('Drag and drop enzyme tests', () => {
   let component;
   let tree;
@@ -471,12 +401,6 @@ describe('Drag and drop enzyme tests', () => {
 
     await waitForComponentToPaint(component);
 
-    // activate re-order genes tab
-    await act(async () => {
-      const reorderTab = component.find('div.ant-tabs-tab-btn');
-      reorderTab.at(1).simulate('click');
-    });
-
     component.update();
 
     // antd renders 5 elements, use the first one

src/components/plots/GeneReorderTool.jsx

@@ -2,30 +2,24 @@ import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { arrayMoveImmutable } from 'utils/array-move';
 import { updatePlotConfig } from 'redux/actions/componentConfig';
-import { loadGeneExpression } from 'redux/actions/genes';
+
+import { arrayMoveImmutable } from 'utils/array-move';
 import HierarchicalTreeGenes from 'components/plots/hierarchical-tree-genes/HierarchicalTreeGenes';
 
 import { Space, Button } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 
 const GeneReorderTool = (props) => {
-  const { plotUuid } = (props);
+  const { plotUuid, onDelete } = props;
 
   const dispatch = useDispatch();
-
+  
   const config = useSelector((state) => state.componentConfig[plotUuid]?.config);
 
-  const experimentId = useSelector((state) => state.componentConfig[plotUuid]?.experimentId);
-
-  const loadedMarkerGenes = useSelector(
-    (state) => state.genes.expression.views[plotUuid]?.data,
-  );
-
   // Tree from antd requires format [{key: , title: }], made from gene names from loadedMarkerGenes and config
   const composeGeneTree = (treeGenes) => {
-    if (!treeGenes) {
+    if (!treeGenes.length) {
       return [];
     }
 
@@ -36,7 +30,7 @@ const GeneReorderTool = (props) => {
     return data;
   };
 
-  const [geneTreeData, setGeneTreeData] = useState(composeGeneTree(loadedMarkerGenes));
+  const [geneTreeData, setGeneTreeData] = useState([]);
 
   useEffect(() => {
     setGeneTreeData(composeGeneTree(config?.selectedGenes));
@@ -56,7 +50,7 @@ const GeneReorderTool = (props) => {
     const genes = geneTreeData.map((treeNode) => treeNode.title);
     genes.splice(geneKey, 1);
 
-    dispatch(loadGeneExpression(experimentId, genes, plotUuid));
+    onDelete(genes);
   };
 
   const renderTitles = (data) => {
@@ -101,6 +95,7 @@ GeneReorderTool.defaultProps = {};
 
 GeneReorderTool.propTypes = {
   plotUuid: PropTypes.string.isRequired,
+  onDelete: PropTypes.func.isRequired,
 };
 
 export default GeneReorderTool;

src/components/plots/GeneSearchBar.jsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import _ from 'lodash';
 import { AutoComplete } from 'antd';
-import { useSelector, useDispatch } from 'react-redux';
-import { loadGeneExpression } from 'redux/actions/genes';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 const filterGenes = (searchText, geneList, loadedGenes) => {
@@ -17,9 +16,9 @@ const filterGenes = (searchText, geneList, loadedGenes) => {
 };
 
 const GeneSearchBar = (props) => {
-  const { plotUuid, experimentId, searchBarUuid } = props;
-
-  const dispatch = useDispatch();
+  const {
+    plotUuid, searchBarUuid, onSelect,
+  } = props;
 
   const geneList = useSelector((state) => state.genes.properties.views[searchBarUuid]?.data);
 
@@ -30,14 +29,15 @@ const GeneSearchBar = (props) => {
   // pass reactive component as value (search text) to allow auto clear on select
   const [value, setValue] = useState('');
 
-  const onSelect = (newGene) => {
+  const onOptionSelect = (newGene) => {
     if (!geneList.includes(newGene) || config?.selectedGenes.includes(newGene)) {
       return;
     }
 
     const genes = _.clone(config?.selectedGenes);
     genes.push(newGene);
-    dispatch(loadGeneExpression(experimentId, genes, plotUuid));
+
+    onSelect(genes);
     setValue('');
   };
 
@@ -52,7 +52,7 @@ const GeneSearchBar = (props) => {
       value={value}
       options={options}
       style={{ width: '100%' }}
-      onSelect={onSelect}
+      onSelect={onOptionSelect}
       onSearch={onSearch}
       placeholder='Search for genes...'
     />
@@ -61,8 +61,8 @@ const GeneSearchBar = (props) => {
 
 GeneSearchBar.propTypes = {
   plotUuid: PropTypes.string.isRequired,
-  experimentId: PropTypes.string.isRequired,
   searchBarUuid: PropTypes.string.isRequired,
+  onSelect: PropTypes.func.isRequired,
 };
 
 export default GeneSearchBar;