Unverified Commit a1c40c90 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Update StandardAppLayout (#351)

Also, fixed extra width bug in EntityViewer transcripts view
that was caused by moving transcript-wrapping divs via `transform: translate`
parent 6122caa1
Pipeline #100948 passed with stages
in 12 minutes and 38 seconds
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
.browserInnerWrapper { .browserInnerWrapper {
display: grid; display: grid;
height: 100%;
grid-template-rows: 80px 1fr; grid-template-rows: 80px 1fr;
} }
......
...@@ -46,7 +46,6 @@ import GeneViewSidebarTabs from './gene-view/components/gene-view-sidebar-tabs/G ...@@ -46,7 +46,6 @@ import GeneViewSidebarTabs from './gene-view/components/gene-view-sidebar-tabs/G
import { RootState } from 'src/store'; import { RootState } from 'src/store';
import { SidebarStatus } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarState'; import { SidebarStatus } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarState';
import { SidebarBehaviourType } from 'src/shared/components/layout/StandardAppLayout';
import styles from './EntityViewer.scss'; import styles from './EntityViewer.scss';
...@@ -101,7 +100,6 @@ const EntityViewer = (props: Props) => { ...@@ -101,7 +100,6 @@ const EntityViewer = (props: Props) => {
sidebarContent={<GeneViewSideBar />} sidebarContent={<GeneViewSideBar />}
sidebarNavigation={<GeneViewSidebarTabs />} sidebarNavigation={<GeneViewSidebarTabs />}
sidebarToolstripContent={<EntityViewerSidebarToolstrip />} sidebarToolstripContent={<EntityViewerSidebarToolstrip />}
sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
isSidebarOpen={props.isSidebarOpen} isSidebarOpen={props.isSidebarOpen}
onSidebarToggle={props.toggleSidebar} onSidebarToggle={props.toggleSidebar}
isDrawerOpen={false} isDrawerOpen={false}
......
...@@ -20,8 +20,7 @@ $backgroundColor: $black; ...@@ -20,8 +20,7 @@ $backgroundColor: $black;
padding: 60px 20px 10px; padding: 60px 20px 10px;
height: 100%; // may need to change this later height: 100%; // may need to change this later
width: 100%; width: 100%;
overflow-y: auto; overflow: auto;
overflow-x: hidden;
} }
.featureImage { .featureImage {
...@@ -33,6 +32,7 @@ $backgroundColor: $black; ...@@ -33,6 +32,7 @@ $backgroundColor: $black;
display: grid; display: grid;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
align-items: end; align-items: end;
padding-right: 30px;
} }
.geneViewTabs { .geneViewTabs {
......
...@@ -12,6 +12,14 @@ ...@@ -12,6 +12,14 @@
cursor: pointer; cursor: pointer;
} }
.clickableTranscriptArea {
cursor: pointer;
}
.transcriptWrapper {
display: inline-block;
}
.defaultTranscriptLabel { .defaultTranscriptLabel {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
......
...@@ -67,7 +67,7 @@ describe('<DefaultTranscriptListItem />', () => { ...@@ -67,7 +67,7 @@ describe('<DefaultTranscriptListItem />', () => {
it('toggles transcript item info onClick', () => { it('toggles transcript item info onClick', () => {
wrapper = renderComponent(); wrapper = renderComponent();
wrapper.find('.middle').simulate('click'); wrapper.find('.clickableTranscriptArea').simulate('click');
expect(toggleTranscriptInfo).toHaveBeenCalledTimes(1); expect(toggleTranscriptInfo).toHaveBeenCalledTimes(1);
wrapper.find('.right').simulate('click'); wrapper.find('.right').simulate('click');
expect(toggleTranscriptInfo).toHaveBeenCalledTimes(2); expect(toggleTranscriptInfo).toHaveBeenCalledTimes(2);
......
...@@ -60,10 +60,6 @@ export const DefaultTranscriptListItem = ( ...@@ -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 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 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 = { const defaultTranscriptLabelMap = {
selected: { selected: {
...@@ -86,16 +82,21 @@ export const DefaultTranscriptListItem = ( ...@@ -86,16 +82,21 @@ export const DefaultTranscriptListItem = (
/> />
</div> </div>
)} )}
<div <div className={transcriptsListStyles.middle}>
className={transcriptsListStyles.middle} <div
onClick={() => props.toggleTranscriptInfo(props.transcript.id)} className={styles.clickableTranscriptArea}
> onClick={() => props.toggleTranscriptInfo(props.transcript.id)}
<div style={style}> >
<UnsplicedTranscript <div
transcript={props.transcript} className={styles.transcriptWrapper}
width={transcriptWidth} style={{ transform: `translateX(${transcriptStartX}px)` }}
standalone={true} >
/> <UnsplicedTranscript
transcript={props.transcript}
width={transcriptWidth}
standalone={true}
/>
</div>
</div> </div>
</div> </div>
<div <div
......
@import 'src/styles/common'; @import 'src/styles/common';
.fullWidthPanel { .panel {
width: 100%; width: initial;
height: 100%; min-height: 100%;
}
.narrowPanel {
width: calc(100% - 320px);
height: 100%;
} }
.panelBody { .panelBody {
......
...@@ -124,7 +124,7 @@ const GeneFunction = (props: Props) => { ...@@ -124,7 +124,7 @@ const GeneFunction = (props: Props) => {
<Panel <Panel
header={<TabWrapper />} header={<TabWrapper />}
classNames={{ classNames={{
panel: props.isNarrow ? styles.narrowPanel : styles.fullWidthPanel, panel: styles.panel,
body: styles.panelBody body: styles.panelBody
}} }}
> >
......
@import 'src/styles/common'; @import 'src/styles/common';
.fullWidthPanel { .panel {
width: 100%; width: initial;
height: 100%; min-height: 100%;
}
.narrowPanel {
width: calc(100% - 320px);
height: 100%;
} }
.panelBody { .panelBody {
......
...@@ -111,7 +111,7 @@ const GeneRelationships = (props: Props) => { ...@@ -111,7 +111,7 @@ const GeneRelationships = (props: Props) => {
<Panel <Panel
header={<TabWrapper />} header={<TabWrapper />}
classNames={{ classNames={{
panel: props.isSidebarOpen ? styles.narrowPanel : styles.fullWidthPanel, panel: styles.panel,
body: styles.panelBody body: styles.panelBody
}} }}
> >
......
...@@ -91,7 +91,7 @@ const UnsplicedTranscript = (props: UnsplicedTranscriptProps) => { ...@@ -91,7 +91,7 @@ const UnsplicedTranscript = (props: UnsplicedTranscriptProps) => {
return props.standalone ? ( return props.standalone ? (
<svg <svg
className={styles.containerSvg} className={styles.containerSvg}
width={props.width} width={scale(length)}
height={BLOCK_HEIGHT} height={BLOCK_HEIGHT}
> >
{renderedTranscript} {renderedTranscript}
......
...@@ -29,10 +29,7 @@ import { isSidebarOpen } from 'src/content/app/species/state/sidebar/speciesSide ...@@ -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 { toggleSidebar } from 'src/content/app/species/state/sidebar/speciesSidebarSlice';
import SpeciesAppBar from './components/species-app-bar/SpeciesAppBar'; import SpeciesAppBar from './components/species-app-bar/SpeciesAppBar';
import { import { StandardAppLayout } from 'src/shared/components/layout';
StandardAppLayout,
SidebarBehaviourType
} from 'src/shared/components/layout';
import SpeciesMainView from 'src/content/app/species/components/species-main-view/SpeciesMainView'; import SpeciesMainView from 'src/content/app/species/components/species-main-view/SpeciesMainView';
import { RootState } from 'src/store'; import { RootState } from 'src/store';
...@@ -71,7 +68,6 @@ const SpeciesPage = () => { ...@@ -71,7 +68,6 @@ const SpeciesPage = () => {
sidebarContent={sidebarContent} sidebarContent={sidebarContent}
sidebarNavigation={sidebarNavigationContent} sidebarNavigation={sidebarNavigationContent}
topbarContent={topbarContent} topbarContent={topbarContent}
sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
isSidebarOpen={sidebarStatus} isSidebarOpen={sidebarStatus}
onSidebarToggle={() => { onSidebarToggle={() => {
dispatch(toggleSidebar()); dispatch(toggleSidebar());
......
@import 'src/styles/common'; @import 'src/styles/common';
$headerHeight: 79px; // launchbar height + topbar height
$appbarHeight: 80px;
$availableScreenHeight: calc(100vh - #{$headerHeight} - #{$appbarHeight});
$sidebarContentWidth: 320px; $sidebarContentWidth: 320px;
$sidebarToolstripWidth: 46px; $sidebarToolstripWidth: 46px;
$topbarHeight: 38px; $topbarHeight: 38px;
$drawerWindowWidth: 45px; $drawerWindowWidth: 45px;
.standardAppLayout { .standardAppLayout {
height: calc(100vh - 159px); height: $availableScreenHeight;
min-height: 550px; // based on the current interface of genome browser min-height: 550px; // based on the current interface of genome browser
overflow: hidden; overflow: hidden;
} }
...@@ -44,6 +47,7 @@ $drawerWindowWidth: 45px; ...@@ -44,6 +47,7 @@ $drawerWindowWidth: 45px;
.main { .main {
height: 100%; height: 100%;
overflow: auto;
&Default { &Default {
margin-right: calc(#{$sidebarContentWidth} + #{$sidebarToolstripWidth}); margin-right: calc(#{$sidebarContentWidth} + #{$sidebarToolstripWidth});
......
...@@ -18,7 +18,7 @@ import React from 'react'; ...@@ -18,7 +18,7 @@ import React from 'react';
import { mount, render } from 'enzyme'; import { mount, render } from 'enzyme';
import faker from 'faker'; import faker from 'faker';
import StandardAppLayout, { SidebarBehaviourType } from './StandardAppLayout'; import StandardAppLayout from './StandardAppLayout';
import { BreakpointWidth } from 'src/global/globalConfig'; import { BreakpointWidth } from 'src/global/globalConfig';
...@@ -98,13 +98,20 @@ describe('StandardAppLayout', () => { ...@@ -98,13 +98,20 @@ describe('StandardAppLayout', () => {
).toBe(1); ).toBe(1);
}); });
it('does not change main area styles when sidebar slides over it', () => { it('applies correct classes to the main section depending on whether sidebar is open', () => {
const props = { // sidebar is open; main section is narrower
...minimalProps, let wrapper, mainContent;
sidebarBehaviour: SidebarBehaviourType.SLIDEOVER wrapper = render(<StandardAppLayout {...minimalProps} />);
}; mainContent = wrapper.find('.main');
const wrapper = render(<StandardAppLayout {...props} />); expect(mainContent.hasClass('mainDefault')).toBe(true);
const mainContent = wrapper.find('.main'); 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); expect(mainContent.hasClass('mainFullWidth')).toBe(true);
}); });
......
...@@ -31,11 +31,6 @@ enum SidebarModeToggleAction { ...@@ -31,11 +31,6 @@ enum SidebarModeToggleAction {
CLOSE = 'close' CLOSE = 'close'
} }
export enum SidebarBehaviourType {
PUSH = 'push',
SLIDEOVER = 'slideover'
}
type SidebarModeToggleProps = { type SidebarModeToggleProps = {
onClick: () => void; onClick: () => void;
showAction: SidebarModeToggleAction; showAction: SidebarModeToggleAction;
...@@ -47,7 +42,6 @@ type StandardAppLayoutProps = { ...@@ -47,7 +42,6 @@ type StandardAppLayoutProps = {
sidebarToolstripContent?: ReactNode; sidebarToolstripContent?: ReactNode;
sidebarNavigation: ReactNode; sidebarNavigation: ReactNode;
topbarContent: ReactNode; topbarContent: ReactNode;
sidebarBehaviour: SidebarBehaviourType;
isSidebarOpen: boolean; isSidebarOpen: boolean;
onSidebarToggle: () => void; onSidebarToggle: () => void;
isDrawerOpen: boolean; isDrawerOpen: boolean;
...@@ -67,16 +61,7 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => { ...@@ -67,16 +61,7 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => {
const mainClassNames = classNames( const mainClassNames = classNames(
styles.main, styles.main,
{ props.isSidebarOpen ? styles.mainDefault : styles.mainFullWidth
[styles.mainDefault]:
props.isSidebarOpen &&
props.sidebarBehaviour === SidebarBehaviourType.PUSH
},
{
[styles.mainFullWidth]:
!props.isSidebarOpen ||
props.sidebarBehaviour === SidebarBehaviourType.SLIDEOVER
}
); );
const shouldShowSidebarNavigation = const shouldShowSidebarNavigation =
...@@ -133,7 +118,6 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => { ...@@ -133,7 +118,6 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => {
StandardAppLayout.defaultProps = { StandardAppLayout.defaultProps = {
isDrawerOpen: false, isDrawerOpen: false,
sidebarBehaviour: SidebarBehaviourType.PUSH,
onDrawerClose: noop onDrawerClose: noop
}; };
......
...@@ -14,7 +14,4 @@ ...@@ -14,7 +14,4 @@
* limitations under the License. * limitations under the License.
*/ */
export { export { default as StandardAppLayout } from './StandardAppLayout';
default as StandardAppLayout,
SidebarBehaviourType
} from './StandardAppLayout';
...@@ -22,6 +22,10 @@ p { ...@@ -22,6 +22,10 @@ p {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
&::-webkit-scrollbar-corner {
background-color: transparent;
}
&::-webkit-scrollbar:vertical { &::-webkit-scrollbar:vertical {
width: 11px; width: 11px;
} }
......
.wrapper { .wrapper {
height: 100vh; height: calc(100vh - 2rem);
padding: 50px 0 0; border: 2px solid black;
padding-top: calc(155px - 2rem);
} }
.mainContent { .mainContent {
...@@ -40,3 +41,23 @@ ...@@ -40,3 +41,23 @@
background: rgba(255, 192, 203, 0.3); background: rgba(255, 192, 203, 0.3);
height: 100%; 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
);
}
...@@ -22,7 +22,6 @@ import { StandardAppLayout } from 'src/shared/components/layout'; ...@@ -22,7 +22,6 @@ import { StandardAppLayout } from 'src/shared/components/layout';
import { SecondaryButton } from 'src/shared/components/button/Button'; import { SecondaryButton } from 'src/shared/components/button/Button';
import styles from './Layout.stories.scss'; import styles from './Layout.stories.scss';
import { SidebarBehaviourType } from 'src/shared/components/layout/StandardAppLayout';
const TopbarContent = () => ( const TopbarContent = () => (
<div className={styles.topbarContent}>This is top bar content</div> <div className={styles.topbarContent}>This is top bar content</div>
...@@ -86,9 +85,9 @@ const DrawerContent = () => ( ...@@ -86,9 +85,9 @@ const DrawerContent = () => (
const Wrapper = (props: { const Wrapper = (props: {
isSidebarOpen: boolean; isSidebarOpen: boolean;
isDrawerOpen?: boolean;
sidebarContent: ReactNode; sidebarContent: ReactNode;
sidebarBehaviour?: SidebarBehaviourType; mainContent?: ReactNode;
isDrawerOpen?: boolean;
drawerContent?: ReactNode; drawerContent?: ReactNode;
onSidebarToggle: () => void; onSidebarToggle: () => void;
onDrawerClose?: () => void; onDrawerClose?: () => void;
...@@ -96,7 +95,7 @@ const Wrapper = (props: { ...@@ -96,7 +95,7 @@ const Wrapper = (props: {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<StandardAppLayout <StandardAppLayout
mainContent={<MainContent />} mainContent={props.mainContent || <MainContent />}
topbarContent={<TopbarContent />} topbarContent={<TopbarContent />}
sidebarNavigation={<SidebarNavigation />} sidebarNavigation={<SidebarNavigation />}
sidebarToolstripContent={<SidebarToolstripContent />} sidebarToolstripContent={<SidebarToolstripContent />}
...@@ -156,23 +155,33 @@ export const WithDrawerStory = () => { ...@@ -156,23 +155,33 @@ export const WithDrawerStory = () => {
WithDrawerStory.storyName = 'with drawer'; WithDrawerStory.storyName = 'with drawer';
export const SlideoveSidebarStory = () => { export const OverflowingContentStory = () => {
const [isSidebarOpen, setIsSidebarOpen] = useState(true); const [isSidebarOpen, setIsSidebarOpen] = useState(true);
const toggleSidebar = () => { const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen); 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 ( return (
<Wrapper <Wrapper
mainContent={mainContent}
isSidebarOpen={isSidebarOpen}