From b546d6828d9e7be20f6e4cbe5d9e47ab74969ad3 Mon Sep 17 00:00:00 2001 From: ivababukova Date: Mon, 9 Oct 2023 15:23:46 +0200 Subject: [PATCH] Stop using deprecated props for Dropdown components Signed-off-by: ivababukova --- .../DiffExprResults.test.jsx | 3 +- .../heatmap/HeatmapGroupBySettings.test.jsx | 29 ++--- .../cell-sets-tool/CellSetsTool.jsx | 45 ++++--- .../AdvancedFilteringModal.jsx | 35 +++--- .../heatmap/HeatmapCellInfo.jsx | 5 +- .../heatmap/HeatmapGroupBySettings.jsx | 70 +++++------ .../heatmap/HeatmapSettings.jsx | 68 ++++++----- .../data-management/AddMetadataButton.jsx | 69 ++++++----- .../data-management/DownloadDataButton.jsx | 112 +++++++++--------- .../data-management/ProjectsListContainer.jsx | 30 +++-- .../data-processing/StatusIndicator.jsx | 67 ++++++----- src/components/header/FeedbackButton.jsx | 57 ++++----- src/components/header/HelpButton.jsx | 21 ++-- src/components/header/ReferralButton.jsx | 81 +++++++------ src/components/header/UserButton.jsx | 41 ++++--- 15 files changed, 388 insertions(+), 345 deletions(-) diff --git a/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx b/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx index ffe797a724..d6ad5d268c 100644 --- a/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx +++ b/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx @@ -385,8 +385,7 @@ describe('DiffExprResults', () => { // Adding a filter and applying it const dropdown = component.find('Dropdown'); - const menuInstance = shallow(dropdown.props().overlay); - menuInstance.at(0).simulate('click'); + dropdown.simulate('click', 'Up-regulated'); await waitForActions(withResultStore, [DIFF_EXPR_ORDERING_SET, DIFF_EXPR_LOADING, DIFF_EXPR_LOADED]); // closing the modal diff --git a/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx b/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx index c7655db855..343e5b2d1f 100644 --- a/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx +++ b/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx @@ -113,18 +113,17 @@ describe('HeatmapGroupBySettings', () => { // there's a dropdown const dropdown = component.find(Dropdown); - const submenu = shallow(
{dropdown.prop('overlay')}
); - const subMenuItems = submenu.find('MenuItem'); + const menuItems = dropdown.props().menu.items; // With two items. - expect(subMenuItems.length).toEqual(2); + expect(menuItems.length).toEqual(2); // each of which should have the right names. - expect(subMenuItems.at(0).find('div').text()).toEqual('louvain clusters'); - expect(subMenuItems.at(1).find('div').text()).toEqual('Sample'); + expect(menuItems[0].label.props.children[1]).toEqual('louvain clusters'); + expect(menuItems[1].label.props.children[1]).toEqual('Sample'); }); - test('interacting with the groupby add/remove options will trigger the appropriate actions', async () => { + it('interacting with the groupby add/remove options will trigger the appropriate actions', async () => { const store = mockStore({ ...initialState, }); @@ -139,12 +138,11 @@ describe('HeatmapGroupBySettings', () => { expect(component.find('HeatmapGroupBySettings').length).toEqual(1); const dropdown = component.find(Dropdown); - const submenu = shallow(
{dropdown.prop('overlay')}
); - const subMenuItems = submenu.find('MenuItem'); + const menuItems = dropdown.props().menu.items; // When the other group by is clicked... - const buttons = subMenuItems.find(Button); - act(() => { buttons.at(0).simulate('click'); }); + const buttons = menuItems[0].label.props.children; + act(() => { buttons[0].props.onClick() }); component.update(); await waitForActions(store, [UPDATE_CONFIG]); @@ -170,7 +168,7 @@ describe('HeatmapGroupBySettings', () => { expect(groupByItems.at(1).text()).toEqual('louvain clusters'); // when the groupby is clicked again - act(() => { buttons.at(0).simulate('click'); }); + act(() => { buttons[0].props.onClick() }); component.update(); await waitForActions(store, [UPDATE_CONFIG]); @@ -189,7 +187,7 @@ describe('HeatmapGroupBySettings', () => { expect(groupByItems.at(0).text()).toEqual('Sample'); }); - test('interacting with the groupby reorder options will trigger the appropriate actions', async () => { + it('interacting with the groupby reorder options will trigger the appropriate actions', async () => { const store = mockStore({ ...initialState, }); @@ -204,12 +202,11 @@ describe('HeatmapGroupBySettings', () => { expect(component.find('HeatmapGroupBySettings').length).toEqual(1); const dropdown = component.find(Dropdown); - const submenu = shallow(
{dropdown.prop('overlay')}
); - const subMenuItems = submenu.find('MenuItem'); + const menuItems = dropdown.props().menu.items; // Add a louvain group by - const addButtons = subMenuItems.find(Button); - act(() => { addButtons.at(0).simulate('click'); }); + const addButtons = menuItems[0].label.props.children; + act(() => { addButtons[0].props.onClick() }); await waitForActions(store, [UPDATE_CONFIG]); component.update(); diff --git a/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx b/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx index 489cb05f9c..1f9f0ac681 100644 --- a/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx +++ b/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx @@ -170,14 +170,12 @@ const CellSetsTool = (props) => { ); } - return ( - - setActiveTab(key)} - > - + const tabItems = [ + { + key: 'cellSets', + label: 'Cell sets', + children: ( + <> {operations} { showHideButton checkedKeys={selectedCellSetKeys} /> - - - { setActiveTab('cellSets'); }} - /> - - + + ), + }, + { + key: 'annotateClusters', + label: 'Annotate clusters', + children: ( + { setActiveTab('cellSets'); }} + /> + ), + }, + ]; + + return ( + + setActiveTab(key)} + items={tabItems} + /> ); }; diff --git a/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx b/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx index 30907eef44..a861ccd44a 100644 --- a/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx +++ b/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx @@ -79,20 +79,16 @@ const AdvancedFilteringModal = (props) => { setAvailableCriteriaOptions(filteredCriteriaOptions); }, [availableColumns.length]); - const renderPresetFilters = (add) => ( - { - const selectedFilter = availablePresetFilters.find((filter) => filter.label === e.key); - add(selectedFilter); - }} - > - {availablePresetFilters.map((filter) => ( - - {filter.label} - - ))} - - ); + + const onClickPresetFilter = (add, e) => { + const selectedFilter = availablePresetFilters.find((filter) => filter.label === e.key); + add(selectedFilter); + } + + const presetFilterItems = availablePresetFilters.map((filter) => ({ + label: filter.label, + key: filter.label, + })); const applyFilters = (filters) => { const filtersDataToRun = filters.map(({ columnName, comparison, value }) => ({ @@ -104,7 +100,7 @@ const AdvancedFilteringModal = (props) => { return ( { - + onClickPresetFilter(add, e) + }} + > @@ -188,7 +189,7 @@ const AdvancedFilteringModal = (props) => { )} - + ); }; diff --git a/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx b/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx index 74c7ba0adb..9b23d5d8db 100644 --- a/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx +++ b/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx @@ -77,7 +77,10 @@ HeatmapCellInfo.propTypes = { containerHeight: PropTypes.number.isRequired, cellId: PropTypes.string.isRequired, geneName: PropTypes.string.isRequired, - geneExpression: PropTypes.number.isRequired, + geneExpression: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.number), + PropTypes.oneOf([undefined, null]) + ]), coordinates: PropTypes.object.isRequired, }; diff --git a/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx b/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx index 08b59e4a1c..9ef0d036a8 100644 --- a/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx +++ b/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx @@ -7,7 +7,7 @@ import { } from '@ant-design/icons'; import 'antd/dist/antd.css'; import { - Button, Space, Menu, Dropdown, + Button, Space, Dropdown, } from 'antd'; import PropTypes from 'prop-types'; import { ClipLoader } from 'react-spinners'; @@ -80,47 +80,41 @@ const HeatmapGroupBySettings = (props) => { // This is so that a click on + or - buttons doesn't close the menu const stopPropagationEvent = (e) => e.stopPropagation(); - const menu = ( - - { - allCellSetsGroupBys - .map((cellSet, indx) => { - const positionInCellSetOrder = indexOfCellSet(cellSet); - - return ( - // eslint-disable-next-line react/no-array-index-key - -
-
- - ); - }) - } - - ); + const menuItems = + allCellSetsGroupBys + .map((cellSet, indx) => { + const positionInCellSetOrder = indexOfCellSet(cellSet); + + return { + label: ( +
+
+ ), + key: indx.toString(), + }; + }); + return (
- +
Select the parameters to group by diff --git a/src/components/data-exploration/heatmap/HeatmapSettings.jsx b/src/components/data-exploration/heatmap/HeatmapSettings.jsx index fd29d42539..ca128009a0 100644 --- a/src/components/data-exploration/heatmap/HeatmapSettings.jsx +++ b/src/components/data-exploration/heatmap/HeatmapSettings.jsx @@ -3,49 +3,53 @@ import { SettingOutlined, } from '@ant-design/icons'; import { - Button, Dropdown, Menu, Tooltip, + Button, Dropdown, Tooltip } from 'antd'; import PropTypes from 'prop-types'; import HeatmapMetadataTrackSettings from 'components/data-exploration/heatmap/HeatmapMetadataTrackSettings'; import HeatmapGroupBySettings from 'components/data-exploration/heatmap/HeatmapGroupBySettings'; -import NoStyleAntdMenuItem from 'components/NoStyleAntdMenuItem'; - -import styles from 'utils/css/no-style-menu-item.module.css'; - -const { SubMenu } = Menu; - const HeatmapSettings = (props) => { const { componentType } = props; - const renderMenu = () => ( - - } popupClassName={styles['no-style-menu-item']}> - - - - - }> - - - - - - ); + const menuItems = [ + { + label: 'Metadata tracks', key: 'metadataTracks', children: [ + { + label: (), + key: "metadataTracksChild", + } + ] + }, + { + label: 'Group by', key: 'groupBy', children: [ + { + label: (), + key: "groupByChild", + } + ] + }, + ]; return ( - - -
+ ), + disabled: true, + onClick: () => { + setCellLevelUploadVisible(true); + } + } + ] + }} trigger={['click']} placement='bottomRight' disabled={activeExperiment.sampleIds?.length === 0 || isSubsetted || selectedTech === sampleTech.SEURAT} diff --git a/src/components/data-management/DownloadDataButton.jsx b/src/components/data-management/DownloadDataButton.jsx index 5e3002e996..4356ee03a4 100644 --- a/src/components/data-management/DownloadDataButton.jsx +++ b/src/components/data-management/DownloadDataButton.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import _ from 'lodash'; import { - Menu, Tooltip, Dropdown, Button, Space, + Tooltip, Dropdown, Button, Space, } from 'antd'; import { useSelector, useDispatch } from 'react-redux'; @@ -79,64 +79,64 @@ const DownloadDataButton = () => { } }; + const menuItems = [ + { + key: 'download-processed-seurat', + disabled: !pipelineHasRun || backendLoading, + onClick: (e) => { + e.domEvent.stopPropagation(); + downloadExperimentData('processed-matrix'); + }, + label: ( + + + Processed Seurat object (.rds) + {downloadingProcessedSeurat && } + + + ) + }, + { + key: 'download-processing-settings', + disabled: !allSamplesAnalysed || backendLoading, + onClick: () => { + const config = _.omit(experimentSettings.processing, ['meta']); + const filteredConfig = filterQCParameters( + config, activeExperiment.sampleIds, samples, + ); + const blob = exportQCParameters(filteredConfig); + saveAs(blob, `${activeExperimentId.split('-')[0]}_settings.txt`); + }, + label: ( + allSamplesAnalysed + ? 'Data Processing settings (.txt)' + : ( + + Data Processing settings (.txt) + + ) + ) + } + ] + return ( setDropdownExpanded(visible)} + open={dropdownExpanded} + onOpenChange={(visible) => setDropdownExpanded(visible)} trigger={['click']} - overlay={() => ( - { - if (e.key !== 'download-processed-seurat') setDropdownExpanded(false); - }} - > - { - e.domEvent.stopPropagation(); - - downloadExperimentData('processed-matrix'); - }} - > - - - Processed Seurat object (.rds) - {downloadingProcessedSeurat && } - - - - { - const config = _.omit(experimentSettings.processing, ['meta']); - const filteredConfig = filterQCParameters( - config, activeExperiment.sampleIds, samples, - ); - const blob = exportQCParameters(filteredConfig); - saveAs(blob, `${activeExperimentId.split('-')[0]}_settings.txt`); - }} - > - { - allSamplesAnalysed - ? 'Data Processing settings (.txt)' - : ( - - Data Processing settings (.txt) - - ) - } - - - )} + menu={{ + items: menuItems, + onClick: (e) => { + if (e.key !== 'download-processed-seurat') setDropdownExpanded(false); + } + }} placement='bottomRight' disabled={ experiments.ids.length === 0 diff --git a/src/components/data-management/ProjectsListContainer.jsx b/src/components/data-management/ProjectsListContainer.jsx index 9681ff11e8..78955bafd7 100644 --- a/src/components/data-management/ProjectsListContainer.jsx +++ b/src/components/data-management/ProjectsListContainer.jsx @@ -19,25 +19,23 @@ const ProjectsListContainer = (props) => { const { navigateTo } = useAppRouter(); const [filterParam, setFilterParam] = useState(new RegExp('.*', 'i')); + const menuItems = [ + { + label: 'Upload Project', + key: 'upload_project', + onClick: () => onCreateNewProject(), + }, + { + label: 'Select from Dataset Repository', + key: 'copy_from_repository', + onClick: () => { navigateTo(modules.REPOSITORY); }, + }, + ] + return ( ( - - onCreateNewProject()} - > - Upload Project - - { navigateTo(modules.REPOSITORY); }} - > - Select from Dataset Repository - - - )} + menu={{ items: menuItems }} trigger={['click']} placement='bottomRight' > diff --git a/src/components/data-processing/StatusIndicator.jsx b/src/components/data-processing/StatusIndicator.jsx index 8d89238d70..512cf42618 100644 --- a/src/components/data-processing/StatusIndicator.jsx +++ b/src/components/data-processing/StatusIndicator.jsx @@ -115,38 +115,32 @@ const StatusIndicator = (props) => { }, }; - const renderOverlay = () => { - const renderOverlayContent = () => { - if (loadingBackendStatus) { return (Loading run status...); } - if (errorLoadingBackendStatus) { - return (Failed loading run status. Please refresh the page.); - } - - return ( - <> - - - Your data processing is - {' '} - {statusIndicators[status].title} - . - - - - {`${completedSteps.length} of ${allSteps.length} steps complete`} - - - {statusIndicators[status]?.description} - - - ); - }; + const getMenuComponent = () => { + if (loadingBackendStatus) { + return (Loading run status...); + } + if (errorLoadingBackendStatus) { + return (Failed loading run status. Please refresh the page.); + } return ( - - {renderOverlayContent()} - - ); + <> + + + Your data processing is + {' '} + {statusIndicators[status]?.title || 'loading'} + . + + + + {`${completedSteps.length} of ${allSteps.length} steps complete`} + + + {statusIndicators[status]?.description} + + + );; }; const renderIndicator = () => { @@ -169,7 +163,18 @@ const StatusIndicator = (props) => { }; return ( - + + {getMenuComponent()} + + ), + key: 'status-indicator', + } + ] + }}>