hide chr region in genome selector and also hide main tracks when user inputs only chr

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

@@ -32,6 +32,7 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
   const [chrLocationInput, setChrLocationInput] = useState('');
 
   const [chrCode, chrStart, chrEnd] = props.defaultChrLocation;
+  const displayChrRegion = chrStart === 0 && chrEnd === 0 ? false : true;
 
   useEffect(() => {
     setChrLocationPlaceholder(chrLocationStr);
@@ -116,11 +117,13 @@ const BrowserGenomeSelector: FunctionComponent<BrowserGenomeSelectorProps> = (
       ) : (
         <div className={styles.chrLocationView} onClick={activateForm}>
           <div className={styles.chrCode}>{chrCode}</div>
-          <div className={styles.chrRegion}>
-            <span>{chrStart}</span>
-            <span className={styles.chrSeparator}> - </span>
-            <span>{chrEnd}</span>
-          </div>
+          {displayChrRegion ? (
+            <div className={styles.chrRegion}>
+              <span>{chrStart}</span>
+              <span className={styles.chrSeparator}> - </span>
+              <span>{chrEnd}</span>
+            </div>
+          ) : null}
         </div>
       )}
     </dd>

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

@@ -30,9 +30,10 @@ import {
   getSelectedBrowserTab,
   getTrackCategories,
   getObjectInfo,
-  getExampleObjects
+  getExampleObjects,
+  getDefaultChrLocation
 } from '../browserSelectors';
-
+import { ChrLocation } from '../browserState';
 import { getLaunchbarExpanded } from 'src/header/headerSelectors';
 import { getBreakpointWidth } from 'src/globalSelectors';
 import { BreakpointWidth } from 'src/globalConfig';
@@ -43,6 +44,7 @@ import styles from './TrackPanel.scss';
 type StateProps = {
   breakpointWidth: BreakpointWidth;
   browserActivated: boolean;
+  defaultChrLocation: ChrLocation;
   drawerOpened: boolean;
   drawerView: string;
   exampleObjects: any;
@@ -99,6 +101,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
             <Fragment>
               <TrackPanelList
                 browserRef={props.browserRef}
+                defaultChrLocation={props.defaultChrLocation}
                 drawerOpened={props.drawerOpened}
                 drawerView={props.drawerView}
                 launchbarExpanded={props.launchbarExpanded}
@@ -127,6 +130,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
 const mapStateToProps = (state: RootState): StateProps => ({
   breakpointWidth: getBreakpointWidth(state),
   browserActivated: getBrowserActivated(state),
+  defaultChrLocation: getDefaultChrLocation(state),
   drawerOpened: getDrawerOpened(state),
   drawerView: getDrawerView(state),
   exampleObjects: getExampleObjects(state),

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

@@ -7,16 +7,19 @@ import React, {
 } from 'react';
 
 import TrackPanelListItem from './TrackPanelListItem';
+
 import {
   TrackPanelCategory,
   TrackPanelItem,
   TrackType
 } from '../trackPanelConfig';
+import { ChrLocation } from '../../browserState';
 
 import styles from './TrackPanelList.scss';
 
 type TrackPanelListProps = {
   browserRef: RefObject<HTMLDivElement>;
+  defaultChrLocation: ChrLocation;
   drawerOpened: boolean;
   drawerView: string;
   launchbarExpanded: boolean;
@@ -64,8 +67,13 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
     return `${styles.trackPanelList} ${heightClass}`;
   };
 
-  const getMainTracks = () => {
-    const { objectInfo } = props;
+  const getMainTracks = (): TrackPanelItem | null => {
+    const { defaultChrLocation, objectInfo } = props;
+    const [, chrStart, chrEnd] = defaultChrLocation;
+
+    if (chrStart === 0 && chrEnd === 0) {
+      return null;
+    }
 
     let geneLabel = objectInfo.obj_symbol;
     let transcriptLabel = objectInfo.associated_object.stable_id;
@@ -93,21 +101,27 @@ const TrackPanelList: FunctionComponent<TrackPanelListProps> = (
     };
   };
 
-  const getTrackListItem = (track: TrackPanelItem) => (
-    <TrackPanelListItem
-      browserRef={props.browserRef}
-      drawerOpened={props.drawerOpened}
-      drawerView={props.drawerView}
-      key={track.id}
-      track={track}
-      updateDrawerView={changeDrawerView}
-    >
-      {track.childTrackList &&
-        track.childTrackList.map((childTrack: TrackPanelItem) =>
-          getTrackListItem(childTrack)
-        )}
-    </TrackPanelListItem>
-  );
+  const getTrackListItem = (track: TrackPanelItem | null) => {
+    if (!track) {
+      return;
+    }
+
+    return (
+      <TrackPanelListItem
+        browserRef={props.browserRef}
+        drawerOpened={props.drawerOpened}
+        drawerView={props.drawerView}
+        key={track.id}
+        track={track}
+        updateDrawerView={changeDrawerView}
+      >
+        {track.childTrackList &&
+          track.childTrackList.map((childTrack: TrackPanelItem) =>
+            getTrackListItem(childTrack)
+          )}
+      </TrackPanelListItem>
+    );
+  };
 
   return (
     <div className={getTrackPanelListClasses()}>