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 @@
.label {
margin-right: 8px;
span + span {
margin-left: 8px;
}
}
.type {
......
......@@ -20,13 +20,19 @@ import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import * as urlFor from 'src/shared/helpers/urlHelper';
import { RootState } from 'src/store';
import { PreviouslyViewedObject } from 'src/content/app/browser/track-panel/trackPanelState';
import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers';
import analyticsTracking from 'src/services/analytics-service';
import { closeTrackPanelModal } from 'src/content/app/browser/track-panel/trackPanelActions';
import { closeDrawer } from 'src/content/app/browser/drawer/drawerActions';
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';
......@@ -37,10 +43,9 @@ export type DrawerBookmarksProps = {
};
const DrawerBookmarks = (props: DrawerBookmarksProps) => {
const limitedPreviouslyViewedObjects =
props.previouslyViewedObjects.slice(20);
const previouslyViewedObjects = props.previouslyViewedObjects.slice(20);
const onClickHandler = (objectType: string, index: number) => {
const onClick = (objectType: string, index: number) => {
analyticsTracking.trackEvent({
category: 'recent_bookmark_link',
label: objectType,
......@@ -57,37 +62,29 @@ const DrawerBookmarks = (props: DrawerBookmarksProps) => {
<div className={styles.drawerTitle}>Previously viewed</div>
<div className={styles.contentWrapper}>
<div className={styles.linksWrapper}>
{limitedPreviouslyViewedObjects.map(
(previouslyViewedObject, index) => {
const path = urlFor.browser({
genomeId: previouslyViewedObject.genome_id,
focus: buildFocusIdForUrl(previouslyViewedObject.object_id)
});
return (
<span key={index} className={styles.linkHolder}>
<Link
to={path}
onClick={() =>
onClickHandler(previouslyViewedObject.type, index)
}
>
<span className={styles.label}>
{previouslyViewedObject.label[0]}
</span>
{previouslyViewedObject.label[1] && (
<span className={styles.label}>
{previouslyViewedObject.label[1]}
</span>
)}
</Link>
<span className={styles.type}>
{upperFirst(previouslyViewedObject.type)}
</span>
{previouslyViewedObjects.map((previouslyViewedObject, index) => {
const path = urlFor.browser({
genomeId: previouslyViewedObject.genome_id,
focus: buildFocusIdForUrl(previouslyViewedObject.object_id)
});
return (
<span key={index} className={styles.linkHolder}>
<Link
to={path}
onClick={() => onClick(previouslyViewedObject.type, index)}
>
<TextLine
text={previouslyViewedObject.label}
className={styles.label}
/>
</Link>
<span className={styles.type}>
{upperFirst(previouslyViewedObject.type)}
</span>
);
}
)}
</span>
);
})}
</div>
</div>
</>
......
......@@ -17,6 +17,9 @@
}
.label {
margin-right: 8px;
span + span {
margin-left: 8px;
}
}
}
......@@ -34,7 +37,7 @@
.more {
margin-top: 25px;
span {
span { /* stylelint-disable-line no-descending-specificity */
font-size: 12px;
cursor: pointer;
color: $blue;
......
......@@ -27,13 +27,16 @@ import { getActiveGenomePreviouslyViewedObjects } from 'src/content/app/browser/
import { closeTrackPanelModal } from '../../trackPanelActions';
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 styles from './TrackPanelBookmarks.scss';
export const PreviouslyViewedLinks = () => {
const previouslyViewedObjects = useSelector(
getActiveGenomePreviouslyViewedObjects
);
).slice(0, 20);
const dispatch = useDispatch();
const onLinkClick = (objectType: string, index: number) => {
......@@ -47,11 +50,9 @@ export const PreviouslyViewedLinks = () => {
dispatch(closeTrackPanelModal());
};
const limitedPreviouslyViewedObjects = previouslyViewedObjects.slice(0, 20);
return (
<div data-test-id="previously viewed links">
{limitedPreviouslyViewedObjects.map((previouslyViewedObject, index) => {
{previouslyViewedObjects.map((previouslyViewedObject, index) => {
const path = urlFor.browser({
genomeId: previouslyViewedObject.genome_id,
focus: buildFocusIdForUrl(previouslyViewedObject.object_id)
......@@ -67,13 +68,10 @@ export const PreviouslyViewedLinks = () => {
to={path}
onClick={() => onLinkClick(previouslyViewedObject.type, index)}
>
{previouslyViewedObject.label.map((label, index) => {
return (
<span key={index} className={styles.label}>
{label}
</span>
);
})}
<TextLine
text={previouslyViewedObject.label}
className={styles.label}
/>
</Link>
<span className={styles.type}>
{upperFirst(previouslyViewedObject.type)}
......
......@@ -139,9 +139,9 @@ export const updatePreviouslyViewedObjectsAndSave =
(entity) => entity.object_id !== activeEnsObject.object_id
) || [];
const versioned_stable_id =
const stable_id =
activeEnsObject.type === 'gene'
? activeEnsObject.versioned_stable_id
? activeEnsObject.versioned_stable_id || activeEnsObject.stable_id
: null;
const geneSymbol =
......@@ -151,9 +151,9 @@ export const updatePreviouslyViewedObjectsAndSave =
: null;
const label =
activeEnsObject.type === 'gene'
? ([geneSymbol, versioned_stable_id].filter(Boolean) as string[])
: [activeEnsObject.label];
activeEnsObject.type === 'gene' && geneSymbol
? [geneSymbol, stable_id as string]
: activeEnsObject.label;
const newObject = {
genome_id: activeEnsObject.genome_id,
......@@ -168,10 +168,10 @@ export const updatePreviouslyViewedObjectsAndSave =
];
// Limit the total number of previously viewed objects to 250
const limitedPreviouslyViewedObjects = updatedEntitiesArray.slice(-250);
const previouslyViewedObjectsSlice = updatedEntitiesArray.slice(-250);
trackPanelStorageService.updatePreviouslyViewedObjects({
[activeGenomeId]: limitedPreviouslyViewedObjects
[activeGenomeId]: previouslyViewedObjectsSlice
});
dispatch(
......@@ -179,7 +179,7 @@ export const updatePreviouslyViewedObjectsAndSave =
activeGenomeId,
data: {
...getActiveTrackPanel(state),
previouslyViewedObjects: limitedPreviouslyViewedObjects
previouslyViewedObjects: previouslyViewedObjectsSlice
}
})
);
......
......@@ -22,7 +22,7 @@ export type PreviouslyViewedObject = {
genome_id: string;
object_id: string;
type: string;
label: string[];
label: string | string[];
};
export type PreviouslyViewedObjects = {
......
......@@ -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 TextLine from 'src/shared/components/text-line/TextLine';
import { RootState } from 'src/store';
import styles from './EntityViewerBookmarks.scss';
......@@ -66,14 +68,10 @@ export const PreviouslyViewedLinks = (props: PreviouslyViewedLinksProps) => {
return (
<div key={index} className={styles.linkHolder}>
<Link to={path} onClick={() => dispatch(closeSidebarModal())}>
<span className={styles.label}>
{previouslyViewedEntity.label[0]}
</span>
{previouslyViewedEntity.label[1] && (
<span className={styles.label}>
{previouslyViewedEntity.label[1]}
</span>
)}
<TextLine
text={previouslyViewedEntity.label}
className={styles.label}
/>
</Link>
<span className={styles.type}>
{upperFirst(previouslyViewedEntity.type)}
......
......@@ -19,7 +19,7 @@ import entityViewerBookmarksStorageService from 'src/content/app/entity-viewer/s
type PreviouslyViewedEntity = {
entity_id: string;
label: string[];
label: string | string[];
type: 'gene';
};
......@@ -64,7 +64,7 @@ const bookmarksSlice = createSlice({
const newEntity = {
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
};
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