From f9909fe339c03706e86cfa32571448eef89c7738 Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Tue, 18 Jul 2023 17:43:13 +0200
Subject: [PATCH] SSDM-13579: Making data browser scrolling more user friendly.

---
 .../src/js/components/database/Database.jsx   |  8 +++++-
 .../database/data-browser/DataBrowser.jsx     | 26 ++++++++++++++-----
 .../database/data-browser/InfoPanel.jsx       |  5 +++-
 .../database/data-browser/Toolbar.jsx         |  1 +
 4 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/ui-admin/src/js/components/database/Database.jsx b/ui-admin/src/js/components/database/Database.jsx
index c33694b31ad..a2877e70aac 100644
--- a/ui-admin/src/js/components/database/Database.jsx
+++ b/ui-admin/src/js/components/database/Database.jsx
@@ -11,7 +11,12 @@ const styles = () => ({
   container: {
     display: 'flex',
     width: '100%'
-  }
+  },
+  component: {
+    height: 0,
+    flex: '1 1 100%',
+    overflow: 'hidden'
+  },
 })
 
 class Database extends React.PureComponent {
@@ -24,6 +29,7 @@ class Database extends React.PureComponent {
       <div className={classes.container}>
         <DatabaseBrowser />
         <Content
+          classes={{component: classes.component}}
           page={pages.DATABASE}
           renderComponent={this.renderComponent}
           renderTab={this.renderTab}
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index 99bb476f9f4..72c50635e51 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -17,11 +17,15 @@ import InfoPanel from '@src/js/components/database/data-browser/InfoPanel.jsx'
 const HTTP_SERVER_URI = '/data-store-server'
 
 const styles = theme => ({
+  columnFlexContainer: {
+    flexDirection: 'column',
+    display: 'flex',
+    height: '100vh'
+  },
   boundary: {
     padding: theme.spacing(1),
     borderColor: theme.palette.border.secondary,
-    backgroundColor: theme.palette.background.paper,
-    height: '100%'
+    backgroundColor: theme.palette.background.paper
   },
   icon: {
     fontSize: '4rem',
@@ -37,8 +41,16 @@ const styles = theme => ({
       backgroundColor: theme.palette.background.paper
     },
   },
-  container: {
+  grid: {
     flexGrow: '1',
+    flex: '1',
+    height: 'auto',
+    overflowY: 'auto'
+  },
+  content: {
+    flex: '1 1 100%',
+    height: '0',
+    overflowY: 'hidden'
   }
 })
 
@@ -142,21 +154,21 @@ class DataBrowser extends React.Component {
       this.state
 
     return (
-      <Paper className={classes.boundary}>
+      <div className={[classes.boundary, classes.columnFlexContainer].join(' ')}>
         <Toolbar
           viewType={viewType}
           onViewTypeChange={this.handleViewTypeChange}
           onShowInfoChange={this.handleShowInfoChange}
           showInfo={showInfo}
         />
-        <div className={[classes.flexContainer, classes.boundary].join(' ')}>
+        <div className={[classes.flexContainer, classes.boundary, classes.content].join(' ')}>
           {viewType === 'list' && (
             <Grid
               // id={id}
               // settingsId={id}
               filterModes={[GridFilterOptions.COLUMN_FILTERS]}
               header='Files'
-              classes={{ container: classes.container }}
+              classes={{ container: classes.grid }}
               columns={[
                 {
                   name: 'name',
@@ -219,7 +231,7 @@ class DataBrowser extends React.Component {
             <InfoPanel file={selectedFile} configuration={configuration} />
           )}
         </div>
-      </Paper>
+      </div>
     )
   }
 }
diff --git a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
index 18de58cfed0..2024f8dcebc 100644
--- a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
+++ b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
@@ -28,6 +28,9 @@ import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx';
 import { withStyles } from "@material-ui/core/styles";
 
 const styles = () => ({
+  container: {
+    position: 'sticky'
+  },
   icon: {
     verticalAlign: 'middle',
     fontSize: '12rem'
@@ -49,7 +52,7 @@ class InfoPanel extends React.Component {
 
     // TODO: extract strings to messages
     return (file &&
-      <Container>
+      <Container className={classes.container}>
         <Header size='big'>{file.name}</Header>
         <ItemIcon file={file} classes={classes} configuration={configuration} />
         <Table>
diff --git a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
index 55e8cf940e1..f34118393bb 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -31,6 +31,7 @@ import { ToggleButton } from '@material-ui/lab'
 
 const styles = (theme) => ({
   buttons: {
+    flex: '0 0 auto',
     display: 'flex',
     whiteSpace: 'nowrap',
     marginBottom: theme.spacing(1),
-- 
GitLab