Fix track panel opened on desktop rather than big desktop (#223)

* fix track panel opened on desktop rather than big desktop

* fix wrong desktop value in BreakpointWidth enum

* close track panel for desktop (not big desktop) and smaller

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

@@ -33,7 +33,7 @@ describe('<TrackPanel />', () => {
   const defaultProps: TrackPanelProps = {
     activeGenomeId: null,
     browserActivated: false,
-    breakpointWidth: BreakpointWidth.DESKTOP,
+    breakpointWidth: BreakpointWidth.LAPTOP,
     isDrawerOpened: false,
     activeEnsObject: null,
     isTrackPanelModalOpened: false,
@@ -41,19 +41,32 @@ describe('<TrackPanel />', () => {
     toggleTrackPanel: jest.fn()
   };
 
-  const mountBrowserImageComponent = (props?: Partial<TrackPanelProps>) =>
+  const mountTrackPanel = (props?: Partial<TrackPanelProps>) =>
     mount(<TrackPanel {...defaultProps} {...props} />);
 
   describe('rendering', () => {
     test('renders track panel when active genome is present', () => {
-      const wrapper = mountBrowserImageComponent({
+      const wrapper = mountTrackPanel({
         activeGenomeId: faker.lorem.words()
       });
       expect(wrapper.html()).not.toBe(null);
     });
 
+    test('shows track panel only if the screen width is desktop or larger', () => {
+      const wrapper = mountTrackPanel({
+        breakpointWidth: BreakpointWidth.DESKTOP
+      });
+      expect(wrapper.props().toggleTrackPanel).toHaveBeenCalledWith(true);
+
+      jest.resetAllMocks();
+
+      wrapper.setProps({ breakpointWidth: BreakpointWidth.LAPTOP });
+      wrapper.update();
+      expect(wrapper.props().toggleTrackPanel).toHaveBeenCalledWith(false);
+    });
+
     test('renders track panel bar and track panel list when browser is activated and active feature is selected', () => {
-      const wrapper = mountBrowserImageComponent({
+      const wrapper = mountTrackPanel({
         activeGenomeId: faker.lorem.words(),
         browserActivated: true,
         activeEnsObject: createEnsObject()
@@ -63,7 +76,7 @@ describe('<TrackPanel />', () => {
     });
 
     test('renders track panel modal view when a track panel modal is selected', () => {
-      const wrapper = mountBrowserImageComponent({
+      const wrapper = mountTrackPanel({
         activeGenomeId: faker.lorem.words(),
         browserActivated: true,
         activeEnsObject: createEnsObject(),
@@ -73,7 +86,7 @@ describe('<TrackPanel />', () => {
     });
 
     test('renders drawer when it is set to open', () => {
-      const wrapper = mountBrowserImageComponent({
+      const wrapper = mountTrackPanel({
         activeGenomeId: faker.lorem.words(),
         browserActivated: true,
         activeEnsObject: createEnsObject(),

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

@@ -42,10 +42,10 @@ export const TrackPanel = (props: TrackPanelProps) => {
   const { isDrawerOpened } = props;
 
   useEffect(() => {
-    if (props.breakpointWidth <= BreakpointWidth.DESKTOP) {
-      props.toggleTrackPanel(false);
-    } else {
+    if (props.breakpointWidth >= BreakpointWidth.DESKTOP) {
       props.toggleTrackPanel(true);
+    } else {
+      props.toggleTrackPanel(false);
     }
   }, [props.breakpointWidth, props.toggleTrackPanel]);
 

src/ensembl/src/global/globalConfig.ts

@@ -5,7 +5,7 @@ export enum BreakpointWidth {
   PHONE = 0,
   TABLET = 600,
   LAPTOP = 900,
-  DESKTOP = 1400,
+  DESKTOP = 1200,
   BIG_DESKTOP = 1800
 }