Unverified Commit 866aa7f9 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Handle the label field that can be either a string or a string array (#523)

parent 3ac7d6a3
Pipeline #176785 canceled with stages
in 3 minutes and 40 seconds
...@@ -35,6 +35,10 @@ ...@@ -35,6 +35,10 @@
.label { .label {
margin-right: 8px; margin-right: 8px;
span + span {
margin-left: 8px;
}
} }
.type { .type {
......
...@@ -20,13 +20,19 @@ import { Link } from 'react-router-dom'; ...@@ -20,13 +20,19 @@ import { Link } from 'react-router-dom';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import * as urlFor from 'src/shared/helpers/urlHelper'; import * as urlFor from 'src/shared/helpers/urlHelper';
import { RootState } from 'src/store'; import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers';
import { PreviouslyViewedObject } from 'src/content/app/browser/track-panel/trackPanelState';
import analyticsTracking from 'src/services/analytics-service';
import { closeTrackPanelModal } from 'src/content/app/browser/track-panel/trackPanelActions'; import { closeTrackPanelModal } from 'src/content/app/browser/track-panel/trackPanelActions';
import { closeDrawer } from 'src/content/app/browser/drawer/drawerActions'; import { closeDrawer } from 'src/content/app/browser/drawer/drawerActions';
import { getActiveGenomePreviouslyViewedObjects } from 'src/content/app/browser/track-panel/trackPanelSelectors'; import { getActiveGenomePreviouslyViewedObjects } from 'src/content/app/browser/track-panel/trackPanelSelectors';
import analyticsTracking from 'src/services/analytics-service';
import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers'; import TextLine from 'src/shared/components/text-line/TextLine';
import { PreviouslyViewedObject } from 'src/content/app/browser/track-panel/trackPanelState';
import { RootState } from 'src/store';
import styles from './DrawerBookmarks.scss'; import styles from './DrawerBookmarks.scss';
...@@ -37,10 +43,9 @@ export type DrawerBookmarksProps = { ...@@ -37,10 +43,9 @@ export type DrawerBookmarksProps = {
}; };
const DrawerBookmarks = (props: DrawerBookmarksProps) => { const DrawerBookmarks = (props: DrawerBookmarksProps) => {
const limitedPreviouslyViewedObjects = const previouslyViewedObjects = props.previouslyViewedObjects.slice(20);
props.previouslyViewedObjects.slice(20);
const onClickHandler = (objectType: string, index: number) => { const onClick = (objectType: string, index: number) => {
analyticsTracking.trackEvent({ analyticsTracking.trackEvent({
category: 'recent_bookmark_link', category: 'recent_bookmark_link',
label: objectType, label: objectType,
...@@ -57,37 +62,29 @@ const DrawerBookmarks = (props: DrawerBookmarksProps) => { ...@@ -57,37 +62,29 @@ const DrawerBookmarks = (props: DrawerBookmarksProps) => {
<div className={styles.drawerTitle}>Previously viewed</div> <div className={styles.drawerTitle}>Previously viewed</div>
<div className={styles.contentWrapper}> <div className={styles.contentWrapper}>
<div className={styles.linksWrapper}> <div className={styles.linksWrapper}>
{limitedPreviouslyViewedObjects.map( {previouslyViewedObjects.map((previouslyViewedObject, index) => {
(previouslyViewedObject, index) => { const path = urlFor.browser({
const path = urlFor.browser({ genomeId: previouslyViewedObject.genome_id,
genomeId: previouslyViewedObject.genome_id, focus: buildFocusIdForUrl(previouslyViewedObject.object_id)
focus: buildFocusIdForUrl(previouslyViewedObject.object_id) });
});
return (
return ( <span key={index} className={styles.linkHolder}>
<span key={index} className={styles.linkHolder}> <Link
<Link to={path}
to={path} onClick={() => onClick(previouslyViewedObject.type, index)}
onClick={() => >
onClickHandler(previouslyViewedObject.type, index) <TextLine
} text={previouslyViewedObject.label}
> className={styles.label}
<span className={styles.label}> />
{previouslyViewedObject.label[0]} </Link>
</span> <span className={styles.type}>
{previouslyViewedObject.label[1] && ( {upperFirst(previouslyViewedObject.type)}
<span className={styles.label}>
{previouslyViewedObject.label[1]}
</span>
)}
</Link>
<span className={styles.type}>
{upperFirst(previouslyViewedObject.type)}
</span>
</span> </span>
); </span>
} );
)} })}
</div> </div>
</div> </div>
</> </>
......
...@@ -17,6 +17,9 @@ ...@@ -17,6 +17,9 @@
} }
.label { .label {
margin-right: 8px; margin-right: 8px;
span + span {
margin-left: 8px;
}
} }
} }
...@@ -34,7 +37,7 @@ ...@@ -34,7 +37,7 @@
.more { .more {
margin-top: 25px; margin-top: 25px;
span { span { /* stylelint-disable-line no-descending-specificity */
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
color: $blue; color: $blue;
......
...@@ -27,13 +27,16 @@ import { getActiveGenomePreviouslyViewedObjects } from 'src/content/app/browser/ ...@@ -27,13 +27,16 @@ import { getActiveGenomePreviouslyViewedObjects } from 'src/content/app/browser/
import { closeTrackPanelModal } from '../../trackPanelActions'; import { closeTrackPanelModal } from '../../trackPanelActions';
import { changeDrawerViewAndOpen } from 'src/content/app/browser/drawer/drawerActions'; import { changeDrawerViewAndOpen } from 'src/content/app/browser/drawer/drawerActions';
import styles from './TrackPanelBookmarks.scss'; import TextLine from 'src/shared/components/text-line/TextLine';
import { DrawerView } from 'src/content/app/browser/drawer/drawerState'; import { DrawerView } from 'src/content/app/browser/drawer/drawerState';
import styles from './TrackPanelBookmarks.scss';
export const PreviouslyViewedLinks = () => { export const PreviouslyViewedLinks = () => {
const previouslyViewedObjects = useSelector( const previouslyViewedObjects = useSelector(
getActiveGenomePreviouslyViewedObjects getActiveGenomePreviouslyViewedObjects
); ).slice(0, 20);
const dispatch = useDispatch(); const dispatch = useDispatch();
const onLinkClick = (objectType: string, index: number) => { const onLinkClick = (objectType: string, index: number) => {
...@@ -47,11 +50,9 @@ export const PreviouslyViewedLinks = () => { ...@@ -47,11 +50,9 @@ export const PreviouslyViewedLinks = () => {
dispatch(closeTrackPanelModal()); dispatch(closeTrackPanelModal());
}; };
const limitedPreviouslyViewedObjects = previouslyViewedObjects.slice(0, 20);
return ( return (
<div data-test-id="previously viewed links"> <div data-test-id="previously viewed links">
{limitedPreviouslyViewedObjects.map((previouslyViewedObject, index) => { {previouslyViewedObjects.map((previouslyViewedObject, index) => {
const path = urlFor.browser({ const path = urlFor.browser({
genomeId: previouslyViewedObject.genome_id, genomeId: previouslyViewedObject.genome_id,
focus: buildFocusIdForUrl(previouslyViewedObject.object_id) focus: buildFocusIdForUrl(previouslyViewedObject.object_id)
...@@ -67,13 +68,10 @@ export const PreviouslyViewedLinks = () => { ...@@ -67,13 +68,10 @@ export const PreviouslyViewedLinks = () => {
to={path} to={path}
onClick={() => onLinkClick(previouslyViewedObject.type, index)} onClick={() => onLinkClick(previouslyViewedObject.type, index)}
> >
{previouslyViewedObject.label.map((label, index) => { <TextLine
return ( text={previouslyViewedObject.label}
<span key={index} className={styles.label}> className={styles.label}
{label} />
</span>
);
})}
</Link> </Link>
<span className={styles.type}> <span className={styles.type}>
{upperFirst(previouslyViewedObject.type)} {upperFirst(previouslyViewedObject.type)}
......
...@@ -139,9 +139,9 @@ export const updatePreviouslyViewedObjectsAndSave = ...@@ -139,9 +139,9 @@ export const updatePreviouslyViewedObjectsAndSave =
(entity) => entity.object_id !== activeEnsObject.object_id (entity) => entity.object_id !== activeEnsObject.object_id
) || []; ) || [];
const versioned_stable_id = const stable_id =
activeEnsObject.type === 'gene' activeEnsObject.type === 'gene'
? activeEnsObject.versioned_stable_id ? activeEnsObject.versioned_stable_id || activeEnsObject.stable_id
: null; : null;
const geneSymbol = const geneSymbol =
...@@ -151,9 +151,9 @@ export const updatePreviouslyViewedObjectsAndSave = ...@@ -151,9 +151,9 @@ export const updatePreviouslyViewedObjectsAndSave =
: null; : null;
const label = const label =
activeEnsObject.type === 'gene' activeEnsObject.type === 'gene' && geneSymbol
? ([geneSymbol, versioned_stable_id].filter(Boolean) as string[]) ? [geneSymbol, stable_id as string]
: [activeEnsObject.label]; : activeEnsObject.label;
const newObject = { const newObject = {
genome_id: activeEnsObject.genome_id, genome_id: activeEnsObject.genome_id,
...@@ -168,10 +168,10 @@ export const updatePreviouslyViewedObjectsAndSave = ...@@ -168,10 +168,10 @@ export const updatePreviouslyViewedObjectsAndSave =
]; ];
// Limit the total number of previously viewed objects to 250 // Limit the total number of previously viewed objects to 250
const limitedPreviouslyViewedObjects = updatedEntitiesArray.slice(-250); const previouslyViewedObjectsSlice = updatedEntitiesArray.slice(-250);
trackPanelStorageService.updatePreviouslyViewedObjects({ trackPanelStorageService.updatePreviouslyViewedObjects({
[activeGenomeId]: limitedPreviouslyViewedObjects [activeGenomeId]: previouslyViewedObjectsSlice
}); });
dispatch( dispatch(
...@@ -179,7 +179,7 @@ export const updatePreviouslyViewedObjectsAndSave = ...@@ -179,7 +179,7 @@ export const updatePreviouslyViewedObjectsAndSave =
activeGenomeId, activeGenomeId,
data: { data: {
...getActiveTrackPanel(state), ...getActiveTrackPanel(state),
previouslyViewedObjects: limitedPreviouslyViewedObjects previouslyViewedObjects: previouslyViewedObjectsSlice
} }
}) })
); );
......
...@@ -22,7 +22,7 @@ export type PreviouslyViewedObject = { ...@@ -22,7 +22,7 @@ export type PreviouslyViewedObject = {
genome_id: string; genome_id: string;
object_id: string; object_id: string;
type: string; type: string;
label: string[]; label: string | string[];
}; };
export type PreviouslyViewedObjects = { export type PreviouslyViewedObjects = {
......
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
.label { .label {
margin-right: 8px; margin-right: 8px;
span + span {
margin-left: 8px;
}
} }
.type { .type {
......
...@@ -32,6 +32,8 @@ import { getPreviouslyViewedEntities } from 'src/content/app/entity-viewer/state ...@@ -32,6 +32,8 @@ import { getPreviouslyViewedEntities } from 'src/content/app/entity-viewer/state
import { closeSidebarModal } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice'; import { closeSidebarModal } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarSlice';
import TextLine from 'src/shared/components/text-line/TextLine';
import { RootState } from 'src/store'; import { RootState } from 'src/store';
import styles from './EntityViewerBookmarks.scss'; import styles from './EntityViewerBookmarks.scss';
...@@ -66,14 +68,10 @@ export const PreviouslyViewedLinks = (props: PreviouslyViewedLinksProps) => { ...@@ -66,14 +68,10 @@ export const PreviouslyViewedLinks = (props: PreviouslyViewedLinksProps) => {
return ( return (
<div key={index} className={styles.linkHolder}> <div key={index} className={styles.linkHolder}>
<Link to={path} onClick={() => dispatch(closeSidebarModal())}> <Link to={path} onClick={() => dispatch(closeSidebarModal())}>
<span className={styles.label}> <TextLine
{previouslyViewedEntity.label[0]} text={previouslyViewedEntity.label}
</span> className={styles.label}
{previouslyViewedEntity.label[1] && ( />
<span className={styles.label}>
{previouslyViewedEntity.label[1]}
</span>
)}
</Link> </Link>
<span className={styles.type}> <span className={styles.type}>
{upperFirst(previouslyViewedEntity.type)} {upperFirst(previouslyViewedEntity.type)}
......
...@@ -19,7 +19,7 @@ import entityViewerBookmarksStorageService from 'src/content/app/entity-viewer/s ...@@ -19,7 +19,7 @@ import entityViewerBookmarksStorageService from 'src/content/app/entity-viewer/s
type PreviouslyViewedEntity = { type PreviouslyViewedEntity = {
entity_id: string; entity_id: string;
label: string[]; label: string | string[];
type: 'gene'; type: 'gene';
}; };
...@@ -64,7 +64,7 @@ const bookmarksSlice = createSlice({ ...@@ -64,7 +64,7 @@ const bookmarksSlice = createSlice({
const newEntity = { const newEntity = {
entity_id: gene.unversioned_stable_id, entity_id: gene.unversioned_stable_id,
label: gene.symbol ? [gene.symbol, gene.stable_id] : [gene.stable_id], label: gene.symbol ? [gene.symbol, gene.stable_id] : gene.stable_id,
type: 'gene' as const type: 'gene' as const
}; };
const updatedEntites = [ const updatedEntites = [
......
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { ReactNode, HTMLAttributes } from 'react';
type Props = HTMLAttributes<HTMLSpanElement> & {
text: string | string[];
};
const TextLine = (props: Props) => {
const { text, className, ...otherProps } = props;
let textElement: ReactNode;
if (Array.isArray(text)) {
textElement = text.map((fragment, index) => (
<span key={index}>{fragment}</span>
));
} else {
textElement = text;
}
return (
<span className={className} {...otherProps}>
{textElement}
</span>
);
};
export default TextLine;
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