Commit 8d69ebf3 authored by Jyothish NT's avatar Jyothish NT

Initial replacement of selected-species

parent 29b8f1cd
Pipeline #104174 failed with stages
in 2 minutes and 29 seconds
...@@ -28,7 +28,7 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta ...@@ -28,7 +28,7 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta
import AppBar, { import AppBar, {
HelpAndDocumentation HelpAndDocumentation
} from 'src/shared/components/app-bar/AppBar'; } from 'src/shared/components/app-bar/AppBar';
import { FocusableSelectedSpecies } from 'src/shared/components/selected-species'; import { SelectedSpecies } from 'src/shared/components/selected-species';
import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper'; import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
import { RootState } from 'src/store'; import { RootState } from 'src/store';
...@@ -43,7 +43,7 @@ type BrowserAppBarProps = { ...@@ -43,7 +43,7 @@ type BrowserAppBarProps = {
const BrowserAppBar = (props: BrowserAppBarProps) => { const BrowserAppBar = (props: BrowserAppBarProps) => {
const speciesTabs = useMemo(() => { const speciesTabs = useMemo(() => {
return props.species.map((species, index) => ( return props.species.map((species, index) => (
<FocusableSelectedSpecies <SelectedSpecies
key={index} key={index}
species={species} species={species}
isActive={species.genome_id === props.activeGenomeId} isActive={species.genome_id === props.activeGenomeId}
......
...@@ -26,7 +26,7 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta ...@@ -26,7 +26,7 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta
import AppBar, { import AppBar, {
HelpAndDocumentation HelpAndDocumentation
} from 'src/shared/components/app-bar/AppBar'; } from 'src/shared/components/app-bar/AppBar';
import { FocusableSelectedSpecies } from 'src/shared/components/selected-species'; import { SelectedSpecies } from 'src/shared/components/selected-species';
import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper'; import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
import { RootState } from 'src/store'; import { RootState } from 'src/store';
...@@ -41,7 +41,7 @@ type CustomDownloadAppBarProps = { ...@@ -41,7 +41,7 @@ type CustomDownloadAppBarProps = {
const CustomDownloadAppBar = (props: CustomDownloadAppBarProps) => { const CustomDownloadAppBar = (props: CustomDownloadAppBarProps) => {
const speciesTabs = props.species.map((species, index) => ( const speciesTabs = props.species.map((species, index) => (
<FocusableSelectedSpecies <SelectedSpecies
key={index} key={index}
species={species} species={species}
isActive={species.genome_id === props.activeGenomeId} isActive={species.genome_id === props.activeGenomeId}
......
...@@ -30,7 +30,7 @@ import { changeActiveGenomeId } from 'src/content/app/entity-viewer/state/genera ...@@ -30,7 +30,7 @@ import { changeActiveGenomeId } from 'src/content/app/entity-viewer/state/genera
import AppBar, { import AppBar, {
HelpAndDocumentation HelpAndDocumentation
} from 'src/shared/components/app-bar/AppBar'; } from 'src/shared/components/app-bar/AppBar';
import { FocusableSelectedSpecies } from 'src/shared/components/selected-species'; import { SelectedSpecies } from 'src/shared/components/selected-species';
import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper'; import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
import { RootState } from 'src/store'; import { RootState } from 'src/store';
...@@ -45,7 +45,7 @@ type EntityViewerAppBarProps = { ...@@ -45,7 +45,7 @@ type EntityViewerAppBarProps = {
const EntityViewerAppBar = (props: EntityViewerAppBarProps) => { const EntityViewerAppBar = (props: EntityViewerAppBarProps) => {
const speciesTabs = useMemo(() => { const speciesTabs = useMemo(() => {
return props.species.map((species, index) => ( return props.species.map((species, index) => (
<FocusableSelectedSpecies <SelectedSpecies
key={index} key={index}
species={species} species={species}
isActive={species.genome_id === props.activeGenomeId} isActive={species.genome_id === props.activeGenomeId}
......
...@@ -26,7 +26,7 @@ import { ...@@ -26,7 +26,7 @@ import {
import * as urlFor from 'src/shared/helpers/urlHelper'; import * as urlFor from 'src/shared/helpers/urlHelper';
import AppBar from 'src/shared/components/app-bar/AppBar'; import AppBar from 'src/shared/components/app-bar/AppBar';
import SelectedSpecies from 'src/content/app/species-selector/components/selected-species/SelectedSpecies'; import SelectedSpecies from 'src/shared/components/selected-species/SelectedSpecies';
import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper'; import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
import { HelpPopupButton } from 'src/shared/components/help-popup'; import { HelpPopupButton } from 'src/shared/components/help-popup';
...@@ -37,7 +37,6 @@ import styles from './SpeciesSelectorAppBar.scss'; ...@@ -37,7 +37,6 @@ import styles from './SpeciesSelectorAppBar.scss';
type Props = { type Props = {
selectedSpecies: CommittedItem[]; selectedSpecies: CommittedItem[];
toggleSpeciesUse: (genomeId: string) => void;
onSpeciesDelete: (genomeId: string) => void; onSpeciesDelete: (genomeId: string) => void;
}; };
...@@ -65,6 +64,10 @@ export const SpeciesSelectorAppBar = (props: Props) => { ...@@ -65,6 +64,10 @@ export const SpeciesSelectorAppBar = (props: Props) => {
); );
}; };
const showSpeciesHomepage = () => {
return;
};
const SelectedSpeciesList = (props: Props) => { const SelectedSpeciesList = (props: Props) => {
const shouldLinkToGenomeBrowser = const shouldLinkToGenomeBrowser =
props.selectedSpecies.filter(({ isEnabled }) => isEnabled).length > 0; props.selectedSpecies.filter(({ isEnabled }) => isEnabled).length > 0;
...@@ -73,8 +76,9 @@ const SelectedSpeciesList = (props: Props) => { ...@@ -73,8 +76,9 @@ const SelectedSpeciesList = (props: Props) => {
<SelectedSpecies <SelectedSpecies
key={species.genome_id} key={species.genome_id}
species={species} species={species}
onToggleUse={props.toggleSpeciesUse} onClick={showSpeciesHomepage}
onRemove={props.onSpeciesDelete} // onToggleUse={props.toggleSpeciesUse}
// onRemove={props.onSpeciesDelete}
/> />
)); ));
...@@ -90,6 +94,7 @@ const mapStateToProps = (state: RootState) => ({ ...@@ -90,6 +94,7 @@ const mapStateToProps = (state: RootState) => ({
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
showSpeciesHomepage: showSpeciesHomepage,
toggleSpeciesUse: toggleSpeciesUseAndSave, toggleSpeciesUse: toggleSpeciesUseAndSave,
onSpeciesDelete: deleteSpeciesAndSave onSpeciesDelete: deleteSpeciesAndSave
}; };
......
...@@ -18,7 +18,7 @@ import React, { useEffect } from 'react'; ...@@ -18,7 +18,7 @@ import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import { getDisplayName } from 'src/shared/components/new-selected-species/selectedSpeciesHelpers'; import { getDisplayName } from 'src/shared/components/selected-species/selectedSpeciesHelpers';
import { isSidebarOpen as getSidebarStatus } from 'src/content/app/species/state/sidebar/speciesSidebarSelectors'; import { isSidebarOpen as getSidebarStatus } from 'src/content/app/species/state/sidebar/speciesSidebarSelectors';
import { getCommittedSpeciesById } from 'src/content/app/species-selector/state/speciesSelectorSelectors'; import { getCommittedSpeciesById } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
......
...@@ -23,12 +23,13 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta ...@@ -23,12 +23,13 @@ import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/sta
import AppBar from 'src/shared/components/app-bar/AppBar'; import AppBar from 'src/shared/components/app-bar/AppBar';
import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper'; import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
import { SimpleSelectedSpecies } from 'src/shared/components/selected-species'; import { SelectedSpecies } from 'src/shared/components/selected-species';
import { RootState } from 'src/store'; import { RootState } from 'src/store';
import { CommittedItem } from 'src/content/app/species-selector/types/species-search'; import { CommittedItem } from 'src/content/app/species-selector/types/species-search';
import styles from './HomepageSpeciesBar.scss'; import styles from './HomepageSpeciesBar.scss';
import { handleSelectedSpecies } from 'src/content/app/species-selector/state/speciesSelectorActions';
type Props = { type Props = {
species: CommittedItem[]; species: CommittedItem[];
...@@ -52,7 +53,11 @@ const HomepageSpeciesBar = (props: Props) => { ...@@ -52,7 +53,11 @@ const HomepageSpeciesBar = (props: Props) => {
); );
} else { } else {
const speciesItems = props.species.map((species, index) => ( const speciesItems = props.species.map((species, index) => (
<SimpleSelectedSpecies key={index} species={species} /> <SelectedSpecies
key={index}
species={species}
onClick={handleSelectedSpecies}
/>
)); ));
barContent = <SpeciesTabsWrapper speciesTabs={speciesItems} />; barContent = <SpeciesTabsWrapper speciesTabs={speciesItems} />;
} }
......
...@@ -14,4 +14,5 @@ ...@@ -14,4 +14,5 @@
* limitations under the License. * limitations under the License.
*/ */
export { default as SelectedSpecies } from './SelectedSpecies'; export { default as SimpleSelectedSpecies } from './SimpleSelectedSpecies';
export { default as FocusableSelectedSpecies } from './FocusableSelectedSpecies';
...@@ -14,5 +14,4 @@ ...@@ -14,5 +14,4 @@
* limitations under the License. * limitations under the License.
*/ */
export { default as SimpleSelectedSpecies } from './SimpleSelectedSpecies'; export { default as SelectedSpecies } from './SelectedSpecies';
export { default as FocusableSelectedSpecies } from './FocusableSelectedSpecies';
...@@ -20,11 +20,11 @@ import { nonBreakingSpace } from 'src/shared/constants/strings'; ...@@ -20,11 +20,11 @@ import { nonBreakingSpace } from 'src/shared/constants/strings';
import styles from './MultiLineSpeciesWrapper.scss'; import styles from './MultiLineSpeciesWrapper.scss';
import { Props as SimpleSelectedSpeciesProps } from 'src/shared/components/selected-species/SimpleSelectedSpecies'; import { Props as SelectedSpeciesProps } from 'src/shared/components/selected-species/SelectedSpecies';
import { Props as SpeciesSelectorSelectedSpeciesProps } from 'src/content/app/species-selector/components/selected-species/SelectedSpecies'; import { Props as SpeciesSelectorSelectedSpeciesProps } from 'src/content/app/species-selector/components/selected-species/SelectedSpecies';
type MultiLineSelectedSpeciesProps = type MultiLineSelectedSpeciesProps =
| SimpleSelectedSpeciesProps | SelectedSpeciesProps
| SpeciesSelectorSelectedSpeciesProps; | SpeciesSelectorSelectedSpeciesProps;
export type Props = { export type Props = {
......
...@@ -22,11 +22,11 @@ import { getSpeciesItemWidths } from './speciesTabsWrapperHelpers'; ...@@ -22,11 +22,11 @@ import { getSpeciesItemWidths } from './speciesTabsWrapperHelpers';
import styles from './SingleLineSpeciesWrapper.scss'; import styles from './SingleLineSpeciesWrapper.scss';
import { Props as FocusableSelectedSpeciesProps } from 'src/shared/components/selected-species/FocusableSelectedSpecies'; import { Props as SelectedSpeciesProps } from 'src/shared/components/selected-species/SelectedSpecies';
export type Props = { export type Props = {
isWrappable: false; isWrappable: false;
speciesTabs: ReactElement<FocusableSelectedSpeciesProps>[]; speciesTabs: ReactElement<SelectedSpeciesProps>[];
link?: React.ReactNode | null; link?: React.ReactNode | null;
}; };
...@@ -36,7 +36,7 @@ const animationCalculator = ({ ...@@ -36,7 +36,7 @@ const animationCalculator = ({
containerRef, containerRef,
containerWidth containerWidth
}: { }: {
items: FocusableSelectedSpeciesProps[]; items: SelectedSpeciesProps[];
hoveredItemIndex: number | null; hoveredItemIndex: number | null;
containerRef: React.RefObject<HTMLElement>; containerRef: React.RefObject<HTMLElement>;
containerWidth: number; containerWidth: number;
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
import { getFullSpeciesItemWidth } from 'src/shared/components/selected-species/selectedSpeciesHelpers'; import { getFullSpeciesItemWidth } from 'src/shared/components/selected-species/selectedSpeciesHelpers';
import { Props as FocusableSelectedSpeciesProps } from 'src/shared/components/selected-species/FocusableSelectedSpecies'; import { Props as SelectedSpeciesProps } from 'src/shared/components/selected-species/SelectedSpecies';
const SPACE_BETWEEN_SPECIES = 7; const SPACE_BETWEEN_SPECIES = 7;
...@@ -24,7 +24,7 @@ export const getSpeciesItemWidths = ({ ...@@ -24,7 +24,7 @@ export const getSpeciesItemWidths = ({
items, items,
containerWidth containerWidth
}: { }: {
items: Array<FocusableSelectedSpeciesProps & { isHovered: boolean }>; items: Array<SelectedSpeciesProps & { isHovered: boolean }>;
containerWidth: number; containerWidth: number;
}) => { }) => {
const naturalItemWidths = items.map((item) => const naturalItemWidths = items.map((item) =>
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
import React from 'react'; import React from 'react';
import SelectedSpecies from 'src/shared/components/new-selected-species/SelectedSpecies'; import SelectedSpecies from 'src/shared/components/selected-species/SelectedSpecies';
import speciesData from '../species-tabs-wrapper/speciesData'; import speciesData from '../species-tabs-wrapper/speciesData';
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment