Add option to show top bar with logo and username (#1)

Co-authored-by: Fedde Schaeffer <[email protected]>

apps/genetics/src/components/NavBar/NavBar.jsx

@@ -11,6 +11,8 @@ import classNames from 'classnames';
 import Link from '../Link';
 import OpenTargetsTitle from './OpenTargetsTitle';
 import HeaderMenu from './HeaderMenu';
+import config from '../../config';
+import { TopBar } from 'ui';
 
 const styles = theme => ({
   navbar: {
@@ -71,7 +73,18 @@ const MenuExternalLink = ({ classes, href, children }) => (
   </Typography>
 );
 
-const NavBar = ({
+const NavBar = props => (
+  <>
+    {/*
+      * Outside of the NavBar AppBar to mirror
+      * apps/platform/src/components/NavBar.jsx.
+      */}
+    {config.showTopBar && <TopBar />}
+    <NavBarContent {...props} />
+  </>
+)
+
+const NavBarContent = ({
   classes,
   name,
   search,
@@ -94,6 +107,9 @@ const NavBar = ({
       color="primary"
       elevation={0}
     >
+      {/* push the content down so it isn't hidden behind the logo bar */}
+      {config.showTopBar &&
+          <div id="placeholder-div" style={{ height: '50px', width: '100%' }} />}
       <Toolbar variant="dense">
         {homepage ? null : (
           <Button component={ReactRouterLink} to="/" color="inherit">

apps/platform/src/components/NavBar.jsx

@@ -12,6 +12,8 @@ import Link from './Link';
 import OpenTargetsTitle from './OpenTargetsTitle';
 import HeaderMenu from './HeaderMenu';
 import PrivateWrapper from './PrivateWrapper';
+import config from '../config';
+import { TopBar } from 'ui';
 
 const styles = theme => ({
   navbar: {
@@ -67,7 +69,26 @@ const MenuExternalLink = ({ classes, href, children }) => (
   </Typography>
 );
 
-const NavBar = ({
+const NavBar = props => (
+  <>
+    {/*
+      * Keep the TopBar outside of the NavBar's AppBar component, as nesting it
+      * renders the top bar behind the ProtVista protein structure viewer when
+      * scrolling down the target profile page. That's probably because the
+      * NavBar's AppBar has its own z-index lower than 40001, which creates a
+      * local stacking context outside of which the z-indices of descendants
+      * are not compared.
+      *
+      * This still leaves the issue that the bar also overlays the 3d structure
+      * viewer when it's expanded to fill the viewport, blocking some of the
+      * buttons of the viewer.
+      */}
+    {config.showTopBar && <TopBar />}
+    <NavBarContent {...props} />
+  </>
+)
+
+const NavBarContent = ({
   classes,
   name,
   search,
@@ -91,6 +112,9 @@ const NavBar = ({
       color="primary"
       elevation={0}
     >
+      {/* push the content down so it isn't hidden behind the logo bar */}
+      {config.showTopBar &&
+          <div id="placeholder-div" style={{ height: '50px', width: '100%' }} />}
       <Toolbar variant="dense">
         {homepage ? null : (
           <Button component={ReactRouterLink} to="/" color="inherit">

apps/platform/src/components/NavPanel/NavPanel.jsx

@@ -4,6 +4,7 @@ import { Drawer } from '@material-ui/core';
 import GoBackButton from './GoBackButton';
 import navPanelStyles from './navPanelStyles';
 import SectionMenu from './SectionMenu';
+import config from '../../config';
 
 function NavPanel({ ...props }) {
   const classes = navPanelStyles();
@@ -13,6 +14,9 @@ function NavPanel({ ...props }) {
       variant="permanent"
       classes={{ root: classes.drawer, paper: classes.paper }}
     >
+      {/* leave the space that will be hidden behind the logo bar unused */}
+      {config.showTopBar &&
+          <div style={{ height: '50px', width: '100%', flexShrink: 0 }} />}
       <GoBackButton />
       <SectionMenu {...props} />
     </Drawer>

apps/platform/src/config.js

@@ -10,6 +10,7 @@ const config = {
   downloadsURL: window.configDownloadsURL ?? '/data/downloads.json',
   geneticsPortalUrl:
     window.configGeneticsPortalUrl ?? 'https://genetics.opentargets.org',
+  showTopBar: window.configShowTopBar ?? false,
 };
 
 export default config;

packages/ui/index.js

@@ -1,3 +1,4 @@
 export { default as Footer } from "./src/Footer";
 export { default as ThemeProvider } from "./src/ThemeProvider/ThemeProvider";
 export { default as LoadingBackdrop } from "./src/LoadingBackdrop";
+export { default as TopBar } from "./src/TopBar";

packages/ui/src/TopBar.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+
+import AppBar from '@material-ui/core/AppBar';
+import useScrollTrigger from '@material-ui/core/useScrollTrigger';
+import { Typography } from '@material-ui/core';
+
+
+/**
+ * Shadows the AppBar to hint at content scrolling up.
+ *
+ * @see {@link https://mui.com/material-ui/react-app-bar/#elevate-app-bar}
+ */
+function ElevationScroll({children}) {
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+  });
+  return React.cloneElement(children, {
+    elevation: trigger ? 4 : 0,
+  });
+}
+
+export default function TopBar() {
+  const [username, setUsername] = useState('');
+  useEffect(() => {
+    let isCurrent = true;
+
+    async function displayLoggedInUser() {
+      const userFunction = window.getLoggedInUser || (() => Promise.resolve(''));
+      const username = await resolveWithNameOrErrorMessage(userFunction());
+      if (isCurrent) {
+        setUsername(username)
+      }
+    }
+    async function resolveWithNameOrErrorMessage(userPromise) {
+      try {
+        return await userPromise;
+      } catch {
+        return 'Unidentified user';
+      }
+    }
+    displayLoggedInUser();
+
+    return () => {
+      isCurrent = false;
+    };
+  }, []);
+
+  return (
+    <ElevationScroll>
+      <AppBar
+        id="ot-org-top-bar"
+        style={{
+          display: 'block',
+          position: 'fixed',
+          backgroundColor: '#005284',
+          zIndex: 2000000,
+          height: '50px',
+          width: '100%',
+        }}
+      >
+        <img
+          src="/assets/img/logo-org.png"
+          title="Logo"
+          alt="Logo"
+          style={{
+            float: 'left',
+            marginLeft: '20px',
+            marginTop: '5px',
+            height: '40px',
+          }}
+        />
+        <Typography
+          title="Logged-in user"
+          style={{
+            float: 'right',
+            marginRight: '20px',
+            marginTop: '15px',
+            color: 'white',
+            fontFamily: 'Inter, serif',
+            fontStyle: 'italic',
+          }}
+        >
+          {username}
+        </Typography>
+      </AppBar>
+    </ElevationScroll>
+  );
+}