From 948a2b1798b24d12a0bf6dbb9753bbc462444d24 Mon Sep 17 00:00:00 2001
From: Roman Hillje <roman.hillje@googlemail.com>
Date: Fri, 24 Feb 2023 15:30:18 +0100
Subject: [PATCH] Add option to show top bar with logo and username (#1)

Co-authored-by: Fedde Schaeffer <fedde@thehyve.nl>
---
 apps/genetics/public/assets/img/logo-org.png  | Bin 0 -> 3842 bytes
 .../genetics/src/components/NavBar/NavBar.jsx |  18 +++-
 apps/platform/public/assets/img/logo-org.png  | Bin 0 -> 3842 bytes
 apps/platform/src/components/NavBar.jsx       |  26 ++++-
 .../src/components/NavPanel/NavPanel.jsx      |   4 +
 apps/platform/src/config.js                   |   1 +
 packages/ui/index.js                          |   1 +
 packages/ui/src/TopBar.jsx                    |  89 ++++++++++++++++++
 8 files changed, 137 insertions(+), 2 deletions(-)
 create mode 100644 apps/genetics/public/assets/img/logo-org.png
 create mode 100644 apps/platform/public/assets/img/logo-org.png
 create mode 100644 packages/ui/src/TopBar.jsx

diff --git a/apps/genetics/public/assets/img/logo-org.png b/apps/genetics/public/assets/img/logo-org.png
new file mode 100644
index 0000000000000000000000000000000000000000..76e8189a48fe26d1e611ce8160cb4f0468b83784
GIT binary patch
literal 3842
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
E00o8=wg3PC

literal 0
HcmV?d00001

diff --git a/apps/genetics/src/components/NavBar/NavBar.jsx b/apps/genetics/src/components/NavBar/NavBar.jsx
index 0fe35028b..6cefddbb4 100644
--- a/apps/genetics/src/components/NavBar/NavBar.jsx
+++ b/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">
diff --git a/apps/platform/public/assets/img/logo-org.png b/apps/platform/public/assets/img/logo-org.png
new file mode 100644
index 0000000000000000000000000000000000000000..76e8189a48fe26d1e611ce8160cb4f0468b83784
GIT binary patch
literal 3842
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
E00o8=wg3PC

literal 0
HcmV?d00001

diff --git a/apps/platform/src/components/NavBar.jsx b/apps/platform/src/components/NavBar.jsx
index 284b5a3ea..ba060fdd8 100644
--- a/apps/platform/src/components/NavBar.jsx
+++ b/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">
diff --git a/apps/platform/src/components/NavPanel/NavPanel.jsx b/apps/platform/src/components/NavPanel/NavPanel.jsx
index fc262b929..05c2aa594 100644
--- a/apps/platform/src/components/NavPanel/NavPanel.jsx
+++ b/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>
diff --git a/apps/platform/src/config.js b/apps/platform/src/config.js
index f4248423e..464b3caa9 100644
--- a/apps/platform/src/config.js
+++ b/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;
diff --git a/packages/ui/index.js b/packages/ui/index.js
index 66cf4a2b4..a0b9f163e 100644
--- a/packages/ui/index.js
+++ b/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";
diff --git a/packages/ui/src/TopBar.jsx b/packages/ui/src/TopBar.jsx
new file mode 100644
index 000000000..2bb726f3e
--- /dev/null
+++ b/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>
+  );
+}