Merge pull request #119 from VEuPathDB/map/scrollbar-bugs

Fix scrollbar UI bugs in map components
VEuPathDB · Apr 27, 2023 · ba7e7e4 · ba7e7e4
2 parents fc902d4 + ce5e532
commit ba7e7e4
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 26 deletions.
diff --git a/packages/libs/components/src/EntityDiagram/EntityDiagram.tsx b/packages/libs/components/src/EntityDiagram/EntityDiagram.tsx
@@ -8,6 +8,7 @@ import {
 } from '@visx/hierarchy/lib/types';
 import { Line } from '@visx/shape';
 import { LinearGradient } from '@visx/gradient';
+import './diagram.css';
 
 interface CustomNodeProps {
   node: HierarchyPointNode<StudyData>;
@@ -420,20 +421,20 @@ export default function EntityDiagram({
         </defs>
         {/*Node background shading definitions*/}
         {entityCounts &&
-          Object.entries(
-            entityCounts
-          ).map(([entityId, { total, filtered }]) => (
-            <LinearGradient
-              key={entityId}
-              vertical={false}
-              x1={0}
-              x2={filtered / total}
-              fromOffset={1}
-              id={`rect-gradient-${entityId}`}
-              from={shadingColor}
-              to={isExpanded ? '#cccccc' : 'white'}
-            />
-          ))}
+          Object.entries(entityCounts).map(
+            ([entityId, { total, filtered }]) => (
+              <LinearGradient
+                key={entityId}
+                vertical={false}
+                x1={0}
+                x2={filtered / total}
+                fromOffset={1}
+                id={`rect-gradient-${entityId}`}
+                from={shadingColor}
+                to={isExpanded ? '#cccccc' : 'white'}
+              />
+            )
+          )}
         <Tree root={data} size={[treeWidth, treeHeight]}>
           {(tree) => (
             <Group left={treeLeft} top={treeTop}>

diff --git a/packages/libs/components/src/EntityDiagram/diagram.css b/packages/libs/components/src/EntityDiagram/diagram.css
@@ -5,6 +5,7 @@
 .expanded-diagram {
   margin: auto;
   max-width: 100vw;
+  overflow: auto;
 }
 
 .expanded-diagram-enter {

diff --git a/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx b/packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx
@@ -142,7 +142,7 @@ export default function DraggablePanel({
           width: ${styleOverrides?.width ?? 'fit-content'};
           // Hey, so you need to explicitly set overflow wherever
           // you plan to use resize.
-          overflow: scroll;
+          overflow: auto;
           resize: ${styleOverrides?.resize ?? 'none'};
           min-height: ${styleOverrides?.minHeight ?? 0};
           min-width: ${styleOverrides?.minWidth ?? 0};
@@ -158,12 +158,15 @@ export default function DraggablePanel({
             display: flex;
             height: 2rem;
             justify-content: center;
-            // Because the panels are positioned absolutely and overflow scroll,
+            // Because the panels are positioned absolutely and overflow auto,
             // the handle will get lost when the user scrolls down. We can pin the
             // handle (which includes the panel title and dismiss button) to
             // the top of the panel with position sticky and top 0.
             position: sticky;
             top: 0;
+            // We give the drag handle a z-index of 2 and the content's container a
+            // z-index of 1, thereby ensuring the drag handle renders above the content.
+            z-index: 2;
             width: 100%;
           `}
         >
@@ -189,7 +192,12 @@ export default function DraggablePanel({
         <div
           css={css`
             border-radius: 7px;
-            overflow: scroll;
+            // We want the content to render below the drag handle, so let's put this
+            // container in the same stacking context as the drag handle by giving it
+            // position: relative. Then, we'll give the drag handle a z-index of 2
+            // and the content's container a z-index of 1.
+            position: relative;
+            z-index: 1;
           `}
         >
           {children}

diff --git a/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx b/packages/libs/eda/src/lib/map/analysis/DraggableVisualization.tsx
@@ -63,7 +63,7 @@ export default function DraggableVisualization({
           confineToParentContainer
           showPanelTitle
           isOpen
-          styleOverrides={{ zIndex: 10 }}
+          styleOverrides={{ zIndex: 10, resize: 'both' }}
           panelTitle={activeVizOverview?.displayName || ''}
           defaultPosition={{
             x: 535,
@@ -73,8 +73,6 @@ export default function DraggableVisualization({
         >
           <div
             style={{
-              overflow: 'scroll',
-              resize: 'both',
               // Initial height & width.
               height: 547,
               width: 779,

diff --git a/packages/libs/eda/src/lib/map/analysis/MapSideNavigation.tsx b/packages/libs/eda/src/lib/map/analysis/MapSideNavigation.tsx
@@ -121,7 +121,7 @@ export function MapSideNavigation({
             // 70% of the navigation, leaving 30% for the navigation
             // footer items.
             height: '70%',
-            overflow: 'scroll',
+            overflow: 'auto',
           }}
         >
           {children}
@@ -175,7 +175,7 @@ export function MapSideNavigation({
         style={{
           minWidth: activeNavigationMenu ? 285 : 0,
           borderLeft: activeNavigationMenu ? mapNavigationBorder : 'unset',
-          overflow: 'scroll',
+          overflow: 'auto',
         }}
         className={isExpanded ? '' : 'screenReaderOnly'}
       >

diff --git a/packages/libs/eda/src/lib/map/analysis/MapVizManagement.scss b/packages/libs/eda/src/lib/map/analysis/MapVizManagement.scss
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: flex-end;
   height: 100%;
-  overflow: scroll;
+  overflow: auto;
   padding-bottom: 10px;
 
   &-VizButton {
@@ -65,7 +65,7 @@
 
   &-VizName {
     max-width: 225px;
-    overflow: scroll;
+    overflow: auto;
     text-align: left;
     margin-left: 10px;
     font-size: 15px;
@@ -78,7 +78,7 @@
     align-items: start;
     width: 400px;
     padding: 5px 10px;
-    overflow: scroll;
+    overflow: auto;
     height: 100%;
   }
   &-VizListContainer {

diff --git a/packages/libs/eda/src/lib/workspace/EDAWorkspace.scss b/packages/libs/eda/src/lib/workspace/EDAWorkspace.scss
@@ -159,7 +159,6 @@
 
   .Entities {
     display: flex;
-    overflow-x: auto;
     max-width: 97vw;
     align-items: center;
     justify-content: space-between;