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

src/ensembl/src/content/app/browser/drawer/drawer-views/DrawerBookmarks.scss

@@ -35,6 +35,10 @@
 
   .label {
     margin-right: 8px;
+
+    span + span {
+      margin-left: 8px;
+    }
   }
 
   .type {

src/ensembl/src/content/app/browser/drawer/drawer-views/DrawerBookmarks.tsx

@@ -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>
     </>

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelBookmarks.scss

@@ -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;

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/modal-views/TrackPanelBookmarks.tsx

@@ -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)}

src/ensembl/src/content/app/browser/track-panel/trackPanelActions.ts

@@ -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
         }
       })
     );

src/ensembl/src/content/app/browser/track-panel/trackPanelState.ts

@@ -22,7 +22,7 @@ export type PreviouslyViewedObject = {
   genome_id: string;
   object_id: string;
   type: string;
-  label: string[];
+  label: string | string[];
 };
 
 export type PreviouslyViewedObjects = {

src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-sidebar/entity-viewer-sidebar-modal/modal-views/EntityViewerBookmarks.scss

@@ -9,6 +9,10 @@
 
 .label {
   margin-right: 8px;
+
+  span + span {
+    margin-left: 8px;
+  }
 }
 
 .type {

src/ensembl/src/content/app/entity-viewer/shared/components/entity-viewer-sidebar/entity-viewer-sidebar-modal/modal-views/EntityViewerBookmarks.tsx

@@ -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)}

src/ensembl/src/content/app/entity-viewer/state/bookmarks/entityViewerBookmarksSlice.ts

@@ -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 = [

src/ensembl/src/shared/components/text-line/TextLine.tsx

+/**
+ * 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;