Update StandardAppLayout (#351)

Also, fixed extra width bug in EntityViewer transcripts view
that was caused by moving transcript-wrapping divs via `transform: translate`

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

@@ -2,7 +2,6 @@
 
 .browserInnerWrapper {
   display: grid;
-  height: 100%;
   grid-template-rows: 80px 1fr;
 }
 

src/ensembl/src/content/app/entity-viewer/EntityViewer.tsx

@@ -46,7 +46,6 @@ import GeneViewSidebarTabs from './gene-view/components/gene-view-sidebar-tabs/G
 
 import { RootState } from 'src/store';
 import { SidebarStatus } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarState';
-import { SidebarBehaviourType } from 'src/shared/components/layout/StandardAppLayout';
 
 import styles from './EntityViewer.scss';
 
@@ -101,7 +100,6 @@ const EntityViewer = (props: Props) => {
             sidebarContent={<GeneViewSideBar />}
             sidebarNavigation={<GeneViewSidebarTabs />}
             sidebarToolstripContent={<EntityViewerSidebarToolstrip />}
-            sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
             isSidebarOpen={props.isSidebarOpen}
             onSidebarToggle={props.toggleSidebar}
             isDrawerOpen={false}

src/ensembl/src/content/app/entity-viewer/gene-view/GeneView.scss

@@ -20,8 +20,7 @@ $backgroundColor: $black;
   padding: 60px 20px 10px;
   height: 100%; // may need to change this later
   width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: auto;
 }
 
 .featureImage {
@@ -33,6 +32,7 @@ $backgroundColor: $black;
   display: grid;
   grid-template-rows: 1fr 1fr;
   align-items: end;
+  padding-right: 30px;
 }
 
 .geneViewTabs {

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/default-transcripts-list-item/DefaultTranscriptListItem.scss

@@ -12,6 +12,14 @@
   cursor: pointer;
 }
 
+.clickableTranscriptArea {
+  cursor: pointer;
+}
+
+.transcriptWrapper {
+  display: inline-block;
+}
+
 .defaultTranscriptLabel {
   display: flex;
   justify-content: flex-end;

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/default-transcripts-list-item/DefaultTranscriptListItem.test.tsx

@@ -67,7 +67,7 @@ describe('<DefaultTranscriptListItem />', () => {
 
   it('toggles transcript item info onClick', () => {
     wrapper = renderComponent();
-    wrapper.find('.middle').simulate('click');
+    wrapper.find('.clickableTranscriptArea').simulate('click');
     expect(toggleTranscriptInfo).toHaveBeenCalledTimes(1);
     wrapper.find('.right').simulate('click');
     expect(toggleTranscriptInfo).toHaveBeenCalledTimes(2);

src/ensembl/src/content/app/entity-viewer/gene-view/components/default-transcripts-list/default-transcripts-list-item/DefaultTranscriptListItem.tsx

@@ -60,10 +60,6 @@ export const DefaultTranscriptListItem = (
   );
   const transcriptStartX = scale(transcriptStart - geneStart); // FIXME In future, this should be done using relative position of transcript in gene
   const transcriptWidth = scale(transcriptEnd - transcriptStart); // FIXME  this too should be based on relative coordinates of transcript
-  const style = {
-    transform: `translateX(${transcriptStartX}px)`,
-    cursor: 'pointer'
-  };
 
   const defaultTranscriptLabelMap = {
     selected: {
@@ -86,16 +82,21 @@ export const DefaultTranscriptListItem = (
             />
           </div>
         )}
-        <div
-          className={transcriptsListStyles.middle}
-          onClick={() => props.toggleTranscriptInfo(props.transcript.id)}
-        >
-          <div style={style}>
-            <UnsplicedTranscript
-              transcript={props.transcript}
-              width={transcriptWidth}
-              standalone={true}
-            />
+        <div className={transcriptsListStyles.middle}>
+          <div
+            className={styles.clickableTranscriptArea}
+            onClick={() => props.toggleTranscriptInfo(props.transcript.id)}
+          >
+            <div
+              className={styles.transcriptWrapper}
+              style={{ transform: `translateX(${transcriptStartX}px)` }}
+            >
+              <UnsplicedTranscript
+                transcript={props.transcript}
+                width={transcriptWidth}
+                standalone={true}
+              />
+            </div>
           </div>
         </div>
         <div

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-function/GeneFunction.scss

 @import 'src/styles/common';
 
-.fullWidthPanel {
-  width: 100%;
-  height: 100%;
-}
-
-.narrowPanel {
-  width: calc(100% - 320px);
-  height: 100%;
+.panel {
+  width: initial;
+  min-height: 100%;
 }
 
 .panelBody {

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-function/GeneFunction.tsx

@@ -124,7 +124,7 @@ const GeneFunction = (props: Props) => {
     <Panel
       header={<TabWrapper />}
       classNames={{
-        panel: props.isNarrow ? styles.narrowPanel : styles.fullWidthPanel,
+        panel: styles.panel,
         body: styles.panelBody
       }}
     >

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-relationships/GeneRelationships.scss

 @import 'src/styles/common';
 
-.fullWidthPanel {
-  width: 100%;
-  height: 100%;
-}
-
-.narrowPanel {
-  width: calc(100% - 320px);
-  height: 100%;
+.panel {
+  width: initial;
+  min-height: 100%;
 }
 
 .panelBody {

src/ensembl/src/content/app/entity-viewer/gene-view/components/gene-relationships/GeneRelationships.tsx

@@ -111,7 +111,7 @@ const GeneRelationships = (props: Props) => {
     <Panel
       header={<TabWrapper />}
       classNames={{
-        panel: props.isSidebarOpen ? styles.narrowPanel : styles.fullWidthPanel,
+        panel: styles.panel,
         body: styles.panelBody
       }}
     >

src/ensembl/src/content/app/entity-viewer/gene-view/components/unspliced-transcript/UnsplicedTranscript.tsx

@@ -91,7 +91,7 @@ const UnsplicedTranscript = (props: UnsplicedTranscriptProps) => {
   return props.standalone ? (
     <svg
       className={styles.containerSvg}
-      width={props.width}
+      width={scale(length)}
       height={BLOCK_HEIGHT}
     >
       {renderedTranscript}

src/ensembl/src/content/app/species/SpeciesPage.tsx

@@ -29,10 +29,7 @@ import { isSidebarOpen } from 'src/content/app/species/state/sidebar/speciesSide
 import { toggleSidebar } from 'src/content/app/species/state/sidebar/speciesSidebarSlice';
 
 import SpeciesAppBar from './components/species-app-bar/SpeciesAppBar';
-import {
-  StandardAppLayout,
-  SidebarBehaviourType
-} from 'src/shared/components/layout';
+import { StandardAppLayout } from 'src/shared/components/layout';
 import SpeciesMainView from 'src/content/app/species/components/species-main-view/SpeciesMainView';
 
 import { RootState } from 'src/store';
@@ -71,7 +68,6 @@ const SpeciesPage = () => {
         sidebarContent={sidebarContent}
         sidebarNavigation={sidebarNavigationContent}
         topbarContent={topbarContent}
-        sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
         isSidebarOpen={sidebarStatus}
         onSidebarToggle={() => {
           dispatch(toggleSidebar());

src/ensembl/src/shared/components/layout/StandardAppLayout.scss

 @import 'src/styles/common';
 
+$headerHeight: 79px; // launchbar height + topbar height
+$appbarHeight: 80px;
+$availableScreenHeight: calc(100vh - #{$headerHeight} - #{$appbarHeight});
 $sidebarContentWidth: 320px;
 $sidebarToolstripWidth: 46px;
 $topbarHeight: 38px;
 $drawerWindowWidth: 45px;
 
 .standardAppLayout {
-  height: calc(100vh - 159px);
+  height: $availableScreenHeight;
   min-height: 550px; // based on the current interface of genome browser
   overflow: hidden;
 }
@@ -44,6 +47,7 @@ $drawerWindowWidth: 45px;
 
 .main {
   height: 100%;
+  overflow: auto;
 
   &Default {
     margin-right: calc(#{$sidebarContentWidth} + #{$sidebarToolstripWidth});

src/ensembl/src/shared/components/layout/StandardAppLayout.test.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { mount, render } from 'enzyme';
 import faker from 'faker';
 
-import StandardAppLayout, { SidebarBehaviourType } from './StandardAppLayout';
+import StandardAppLayout from './StandardAppLayout';
 
 import { BreakpointWidth } from 'src/global/globalConfig';
 
@@ -98,13 +98,20 @@ describe('StandardAppLayout', () => {
       ).toBe(1);
     });
 
-    it('does not change main area styles when sidebar slides over it', () => {
-      const props = {
-        ...minimalProps,
-        sidebarBehaviour: SidebarBehaviourType.SLIDEOVER
-      };
-      const wrapper = render(<StandardAppLayout {...props} />);
-      const mainContent = wrapper.find('.main');
+    it('applies correct classes to the main section depending on whether sidebar is open', () => {
+      // sidebar is open; main section is narrower
+      let wrapper, mainContent;
+      wrapper = render(<StandardAppLayout {...minimalProps} />);
+      mainContent = wrapper.find('.main');
+      expect(mainContent.hasClass('mainDefault')).toBe(true);
+      expect(mainContent.hasClass('mainFullWidth')).toBe(false);
+
+      // sidebar is closed; main section is wider
+      wrapper = render(
+        <StandardAppLayout {...minimalProps} isSidebarOpen={false} />
+      );
+      mainContent = wrapper.find('.main');
+      expect(mainContent.hasClass('mainDefault')).toBe(false);
       expect(mainContent.hasClass('mainFullWidth')).toBe(true);
     });
 

src/ensembl/src/shared/components/layout/StandardAppLayout.tsx

@@ -31,11 +31,6 @@ enum SidebarModeToggleAction {
   CLOSE = 'close'
 }
 
-export enum SidebarBehaviourType {
-  PUSH = 'push',
-  SLIDEOVER = 'slideover'
-}
-
 type SidebarModeToggleProps = {
   onClick: () => void;
   showAction: SidebarModeToggleAction;
@@ -47,7 +42,6 @@ type StandardAppLayoutProps = {
   sidebarToolstripContent?: ReactNode;
   sidebarNavigation: ReactNode;
   topbarContent: ReactNode;
-  sidebarBehaviour: SidebarBehaviourType;
   isSidebarOpen: boolean;
   onSidebarToggle: () => void;
   isDrawerOpen: boolean;
@@ -67,16 +61,7 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => {
 
   const mainClassNames = classNames(
     styles.main,
-    {
-      [styles.mainDefault]:
-        props.isSidebarOpen &&
-        props.sidebarBehaviour === SidebarBehaviourType.PUSH
-    },
-    {
-      [styles.mainFullWidth]:
-        !props.isSidebarOpen ||
-        props.sidebarBehaviour === SidebarBehaviourType.SLIDEOVER
-    }
+    props.isSidebarOpen ? styles.mainDefault : styles.mainFullWidth
   );
 
   const shouldShowSidebarNavigation =
@@ -133,7 +118,6 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => {
 
 StandardAppLayout.defaultProps = {
   isDrawerOpen: false,
-  sidebarBehaviour: SidebarBehaviourType.PUSH,
   onDrawerClose: noop
 };
 

src/ensembl/src/shared/components/layout/index.ts

@@ -14,7 +14,4 @@
  * limitations under the License.
  */
 
-export {
-  default as StandardAppLayout,
-  SidebarBehaviourType
-} from './StandardAppLayout';
+export { default as StandardAppLayout } from './StandardAppLayout';

src/ensembl/src/styles/_scrollbars.scss

@@ -22,6 +22,10 @@ p {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
   &::-webkit-scrollbar:vertical {
     width: 11px;
   }

src/ensembl/stories/shared-components/layout/Layout.stories.scss

 .wrapper {
-  height: 100vh;
-  padding: 50px 0 0;
+  height: calc(100vh - 2rem);
+  border: 2px solid black;
+  padding-top: calc(155px - 2rem);
 }
 
 .mainContent {
@@ -40,3 +41,23 @@
   background: rgba(255, 192, 203, 0.3);
   height: 100%;
 }
+
+.overflowingContentWrapper {
+  width: 3000px;
+  height: 3000px;
+}
+
+.overflowingContentLabel {
+  padding: 50px;
+}
+
+.overflowingContentPlaceholder {
+  height: 100%;
+  background: repeating-linear-gradient(
+    45deg,
+    #606dbc,
+    #606dbc 10px,
+    #465298 10px,
+    #465298 20px
+  );
+}

src/ensembl/stories/shared-components/layout/Layout.stories.tsx

@@ -22,7 +22,6 @@ import { StandardAppLayout } from 'src/shared/components/layout';
 import { SecondaryButton } from 'src/shared/components/button/Button';
 
 import styles from './Layout.stories.scss';
-import { SidebarBehaviourType } from 'src/shared/components/layout/StandardAppLayout';
 
 const TopbarContent = () => (
   <div className={styles.topbarContent}>This is top bar content</div>
@@ -86,9 +85,9 @@ const DrawerContent = () => (
 
 const Wrapper = (props: {
   isSidebarOpen: boolean;
-  isDrawerOpen?: boolean;
   sidebarContent: ReactNode;
-  sidebarBehaviour?: SidebarBehaviourType;
+  mainContent?: ReactNode;
+  isDrawerOpen?: boolean;
   drawerContent?: ReactNode;
   onSidebarToggle: () => void;
   onDrawerClose?: () => void;
@@ -96,7 +95,7 @@ const Wrapper = (props: {
   return (
     <div className={styles.wrapper}>
       <StandardAppLayout
-        mainContent={<MainContent />}
+        mainContent={props.mainContent || <MainContent />}
         topbarContent={<TopbarContent />}
         sidebarNavigation={<SidebarNavigation />}
         sidebarToolstripContent={<SidebarToolstripContent />}
@@ -156,23 +155,33 @@ export const WithDrawerStory = () => {
 
 WithDrawerStory.storyName = 'with drawer';
 
-export const SlideoveSidebarStory = () => {
+export const OverflowingContentStory = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const toggleSidebar = () => {
     setIsSidebarOpen(!isSidebarOpen);
   };
 
+  const mainContent = (
+    <div className={styles.overflowingContentWrapper}>
+      <div className={styles.overflowingContentLabel}>
+        Both my width and height are 3000px;
+      </div>
+
+      <div className={styles.overflowingContentPlaceholder} />
+    </div>
+  );
+
   return (
     <Wrapper
+      mainContent={mainContent}
       isSidebarOpen={isSidebarOpen}
       sidebarContent={<SidebarContentSimple />}
-      sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
       onSidebarToggle={toggleSidebar}
     />
   );
 };
 
-SlideoveSidebarStory.storyName = 'with slideover sidebar';
+OverflowingContentStory.storyName = 'with overflowing content';
 
 export default {
   title: 'Components/Shared Components/Layout/StandardAppLayout'