Merge branch '9964-output-glob-acr' refs #9964

[arvados.git] / services / workbench2 / src / views-components / side-panel / side-panel.tsx

diff --git a/services/workbench2/src/views-components/side-panel/side-panel.tsx b/services/workbench2/src/views-components/side-panel/side-panel.tsx
index e19daefa87da82817c170659788e0181775455a3..fe3edc0016eb1a105ebf63086c8d33d3d2b74cec 100644 (file)
--- a/services/workbench2/src/views-components/side-panel/side-panel.tsx
+++ b/services/workbench2/src/views-components/side-panel/side-panel.tsx
@@ -45,12 +45,13 @@ const mapDispatchToProps = (dispatch: Dispatch): SidePanelTreeProps => ({
 const mapStateToProps = ({ router, sidePanel, detailsPanel }: RootState) => ({
     currentRoute: router.location ? router.location.pathname : '',
     isCollapsed: sidePanel.collapsedState,
+    currentSideWidth: sidePanel.currentSideWidth,
     isDetailsPanelTransitioning: detailsPanel.isTransitioning
 });
 
 export const SidePanel = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
-        ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps & { currentRoute: string, isDetailsPanelTransitioning: boolean }) =>{
+        ({ classes, ...props }: WithStyles<CssRules> & SidePanelTreeProps ) =>{
 
         const splitPaneRef = useRef<any>(null)
 
@@ -59,13 +60,23 @@ export const SidePanel = withStyles(styles)(
 
             if (!splitPane) return;
 
-            const observer = new ResizeObserver((entries)=>{
+            const observerCallback: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => {
+                //entries[0] targets the left side of the split pane
                 const width = entries[0].contentRect.width
-                props.setCurrentSideWidth(width)
-            })
+                if (width === props.currentSideWidth) return;
 
-            observer.observe(splitPane)
+                //prevents potential infinite resize triggers
+                window.requestAnimationFrame((): void | undefined => {
+                  if (!Array.isArray(entries) || !entries.length) {
+                      props.setCurrentSideWidth(width)
+                    return;
+                  }
+                });
+              };
+
+            const observer = new ResizeObserver(observerCallback)
 
+            observer.observe(splitPane)
             return ()=> observer.disconnect()
         }, [props])
 
@@ -73,22 +84,21 @@ export const SidePanel = withStyles(styles)(
                 <Grid item xs>
                         {props.isCollapsed ? 
                             <div ref={splitPaneRef}>
-                        <>
-
-                            <SidePanelToggle />
-                            <SidePanelCollapsed />
-                        </>
-                        </div>
+                                <>
+                                    <SidePanelToggle />
+                                    <SidePanelCollapsed />
+                                </>
+                            </div>
                             :
                             <>
-                        <div ref={splitPaneRef}>
-                            <Grid className={classes.topButtonContainer}>
-                                <SidePanelButton key={props.currentRoute} />
-                                <SidePanelToggle/>
-                            </Grid>
-                            <SidePanelTree {...props} />
-                        </div>
-                        </>
+                                <div ref={splitPaneRef}>
+                                    <Grid className={classes.topButtonContainer}>
+                                        <SidePanelButton key={props.currentRoute} />
+                                        <SidePanelToggle/>
+                                    </Grid>
+                                    <SidePanelTree {...props} />
+                                </div>
+                            </>
                         }
                     </Grid>
         )}