Fix browser bar missing focus description (#100)

* Fix BrowserBar info

* Create type BrowserChrLocation

* Fix tests

src/ensembl/src/content/app/browser/Browser.tsx

@@ -15,6 +15,7 @@ import { RootState } from 'src/store';
 import {
   BrowserOpenState,
   BrowserNavStates,
+  BrowserChrLocation,
   ChrLocation
 } from './browserState';
 import {
@@ -76,7 +77,7 @@ type StateProps = {
   browserNavOpened: boolean;
   browserOpenState: BrowserOpenState;
   browserQueryParams: { [key: string]: string };
-  chrLocation: { [genomeId: string]: ChrLocation };
+  chrLocation: BrowserChrLocation;
   drawerOpened: boolean;
   genomeInfo: GenomeInfoData;
   genomeSelectorActive: boolean;
@@ -129,7 +130,8 @@ export const Browser: FunctionComponent<BrowserProps> = (
   };
 
   const changeSelectedSpecies = (genomeId: string) => {
-    const chrLocationForGenome = props.chrLocation[genomeId];
+    const chrLocationForGenome =
+      props.chrLocation[props.activeEnsObjectId[genomeId]];
 
     let newUrl: string;
     if (chrLocationForGenome) {
@@ -199,11 +201,9 @@ export const Browser: FunctionComponent<BrowserProps> = (
   }, [props.browserQueryParams.focus]);
 
   useEffect(() => {
-    const chrLocationForGenome = props.chrLocation[props.activeGenomeId] || [
-      '',
-      0,
-      0
-    ];
+    const chrLocationForGenome = props.chrLocation[
+      props.activeEnsObjectId[props.activeGenomeId]
+    ] || ['', 0, 0];
     const [, chrStart, chrEnd] = chrLocationForGenome;
 
     if (props.browserActivated && chrStart > 0 && chrEnd > 0) {

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.test.tsx

 import React from 'react';
 import { mount } from 'enzyme';
-
+import faker from 'faker';
 import { BrowserBar, BrowserInfo, BrowserNavigatorButton } from './BrowserBar';
 
 import { TrackType } from '../track-panel/trackPanelConfig';
@@ -100,10 +100,11 @@ describe('<BrowserBar />', () => {
     });
 
     test('shows BrowserInfo panel if gene location is provided', () => {
+      const sampleObjectId = faker.lorem.word();
       const renderedBrowserBar = mount(
         renderBrowserBar({
-          activeGenomeId: 'homo_sapiens_grch38',
-          defaultChrLocation: { homo_sapiens_grch38: ['13', 100, 100] }
+          activeObjectId: sampleObjectId,
+          defaultChrLocation: { [sampleObjectId]: ['13', 100, 100] }
         })
       );
       expect(renderedBrowserBar.find(BrowserInfo).length).toBe(1);

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.tsx

@@ -6,7 +6,7 @@ import { browserInfoConfig, BrowserInfoItem } from '../browserConfig';
 import { TrackType } from '../track-panel/trackPanelConfig';
 
 import { toggleBrowserNav, toggleGenomeSelector } from '../browserActions';
-import { ChrLocation } from '../browserState';
+import { BrowserChrLocation, ChrLocation } from '../browserState';
 import {
   getBrowserNavOpened,
   getChrLocation,
@@ -39,8 +39,8 @@ type StateProps = {
   activeObjectId: string;
   browserActivated: boolean;
   browserNavOpened: boolean;
-  chrLocation: { [genomeId: string]: ChrLocation };
-  defaultChrLocation: { [genomeId: string]: ChrLocation };
+  chrLocation: BrowserChrLocation;
+  defaultChrLocation: BrowserChrLocation;
   drawerOpened: boolean;
   genomeSelectorActive: boolean;
   ensObjectInfo: EnsObject;
@@ -76,7 +76,7 @@ export const BrowserBar: FunctionComponent<BrowserBarProps> = (
   props: BrowserBarProps
 ) => {
   const shouldShowBrowserInfo = () => {
-    const chrLocationForGenome = props.defaultChrLocation[props.activeGenomeId];
+    const chrLocationForGenome = props.defaultChrLocation[props.activeObjectId];
     const isLocationOfWholeChromosome =
       chrLocationForGenome === undefined ? true : false;
 

src/ensembl/src/content/app/browser/browser-genome-selector/BrowserGenomeSelector.tsx

@@ -6,7 +6,7 @@ import React, {
   useEffect
 } from 'react';
 
-import { ChrLocation } from '../browserState';
+import { BrowserChrLocation, ChrLocation } from '../browserState';
 
 import applyIcon from 'static/img/shared/apply.svg';
 import clearIcon from 'static/img/shared/clear.svg';
@@ -17,7 +17,7 @@ import { getChrLocationStr } from '../browserHelper';
 type BrowserGenomeSelectorProps = {
   activeGenomeId: string;
   browserActivated: boolean;
-  chrLocation: { [genomeId: string]: ChrLocation };
+  chrLocation: BrowserChrLocation;
   dispatchBrowserLocation: (chrLocation: ChrLocation) => void;
   drawerOpened: boolean;
   genomeSelectorActive: boolean;

src/ensembl/src/content/app/browser/browser-image/BrowserImage.tsx

@@ -26,9 +26,8 @@ import {
   updateBrowserNavStates,
   setChrLocation
 } from '../browserActions';
-import browserStorageService from '../browser-storage-service';
 
-import { ChrLocation } from '../browserState';
+import { BrowserChrLocation, ChrLocation } from '../browserState';
 
 import { CircleLoader } from 'src/shared/loader/Loader';
 
@@ -42,7 +41,7 @@ type StateProps = {
   trackConfigNames: any;
   trackConfigLabel: any;
   browserActivated: boolean;
-  chrLocation: { [genomeId: string]: ChrLocation };
+  chrLocation: BrowserChrLocation;
 };
 
 type DispatchProps = {

src/ensembl/src/content/app/browser/browser-reset/BrowserReset.tsx

 import React, { FunctionComponent, useCallback } from 'react';
 
-import { ChrLocation } from '../browserState';
+import { BrowserChrLocation, ChrLocation } from '../browserState';
 import { ReactComponent as resetIcon } from 'static/img/browser/track-reset.svg';
 import ImageButton, {
   ImageButtonStatus
@@ -12,8 +12,8 @@ import { getChrLocationStr } from '../browserHelper';
 type BrowserResetProps = {
   activeGenomeId: string;
   activeObjectId: string;
-  chrLocation: { [genomeId: string]: ChrLocation };
-  defaultChrLocation: { [genomeId: string]: ChrLocation };
+  chrLocation: BrowserChrLocation;
+  defaultChrLocation: BrowserChrLocation;
   dispatchBrowserLocation: (chrLocation: ChrLocation) => void;
   drawerOpened: boolean;
 };

src/ensembl/src/content/app/browser/browser-storage-service.ts

@@ -6,7 +6,7 @@ import {
   TrackType,
   TrackToggleStates
 } from './track-panel/trackPanelConfig';
-import { ChrLocation } from './browserState';
+import { BrowserChrLocation } from './browserState';
 import { ImageButtonStatus } from 'src/shared/image-button/ImageButton';
 
 export enum StorageKeys {
@@ -51,7 +51,7 @@ export class BrowserStorageService {
     return this.storageService.get(StorageKeys.CHR_LOCATION) || {};
   }
 
-  public updateChrLocation(chrLocation: { [genomeId: string]: ChrLocation }) {
+  public updateChrLocation(chrLocation: BrowserChrLocation) {
     this.storageService.update(StorageKeys.CHR_LOCATION, chrLocation);
   }
 
@@ -59,9 +59,7 @@ export class BrowserStorageService {
     return this.storageService.get(StorageKeys.DEFAULT_CHR_LOCATION) || {};
   }
 
-  public updateDefaultChrLocation(defaultChrLocation: {
-    [genomeId: string]: ChrLocation;
-  }) {
+  public updateDefaultChrLocation(defaultChrLocation: BrowserChrLocation) {
     this.storageService.update(
       StorageKeys.DEFAULT_CHR_LOCATION,
       defaultChrLocation

src/ensembl/src/content/app/browser/browserState.ts

@@ -23,6 +23,8 @@ export type BrowserNavStates = [
 
 export type ChrLocation = [string, number, number];
 
+export type BrowserChrLocation = { [ensObjectId: string]: ChrLocation };
+
 export type CogList = {
   [key: string]: number;
 };
@@ -58,8 +60,8 @@ export const defaultBrowserNavState: BrowserNavState = {
 };
 
 export type BrowserLocationState = Readonly<{
-  chrLocation: { [genomeId: string]: ChrLocation };
-  defaultChrLocation: { [genomeId: string]: ChrLocation };
+  chrLocation: BrowserChrLocation;
+  defaultChrLocation: BrowserChrLocation;
   genomeSelectorActive: boolean;
 }>;
 

src/ensembl/src/content/app/browser/track-panel/TrackPanel.tsx

@@ -33,7 +33,7 @@ import {
 } from 'src/ens-object/ensObjectSelectors';
 import { getLaunchbarExpanded } from 'src/header/headerSelectors';
 import { getBreakpointWidth } from 'src/global/globalSelectors';
-import { ChrLocation } from '../browserState';
+import { BrowserChrLocation } from '../browserState';
 import { BreakpointWidth } from 'src/global/globalConfig';
 import { TrackType, TrackStates } from './trackPanelConfig';
 
@@ -51,7 +51,7 @@ type StateProps = {
   activeGenomeId: string;
   breakpointWidth: BreakpointWidth;
   browserActivated: boolean;
-  defaultChrLocation: { [genomeId: string]: ChrLocation };
+  defaultChrLocation: BrowserChrLocation;
   drawerOpened: boolean;
   drawerView: string;
   ensObjectInfo: EnsObject;

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.tsx

@@ -9,7 +9,7 @@ import React, {
 import TrackPanelListItem from './TrackPanelListItem';
 
 import { TrackType, TrackStates } from '../trackPanelConfig';
-import { ChrLocation } from '../../browserState';
+import { BrowserChrLocation } from '../../browserState';
 
 import styles from './TrackPanelList.scss';
 import { ImageButtonStatus } from 'src/shared/image-button/ImageButton';
@@ -19,7 +19,7 @@ import { EnsObjectTrack, EnsObject } from 'src/ens-object/ensObjectTypes';
 type TrackPanelListProps = {
   activeGenomeId: string;
   browserRef: RefObject<HTMLDivElement>;
-  defaultChrLocation: { [genomeId: string]: ChrLocation };
+  defaultChrLocation: BrowserChrLocation;
   drawerOpened: boolean;
   drawerView: string;
   launchbarExpanded: boolean;