plot resize with draggable panel

packages/libs/components/src/stories/plots/Barplot.stories.tsx

@@ -6,6 +6,9 @@ import FacetedBarplot from '../../plots/facetedPlots/FacetedBarplot';
 import AxisRangeControl from '../../components/plotControls/AxisRangeControl';
 import { NumberRange, NumberOrDateRange } from '../../types/general';
 import { Toggle } from '@veupathdb/coreui';
+import DraggablePanel, {
+  HeightAndWidthInPixels,
+} from '@veupathdb/coreui/lib/components/containers/DraggablePanel';
 
 export default {
   title: 'Plots/Barplot',
@@ -185,3 +188,47 @@ LogScale.args = {
     width: '750px',
   },
 };
+
+// demo plot resize with draggable panel
+export const PlotResizeWithDraggablePanel: Story<BarplotProps> = (args) => {
+  const panelTitle = 'Panel 1';
+  const draggablePanelHeight = 600;
+  const draggablePanelWidth = 900;
+
+  const [panelDimension, setPanelDimension] = useState<HeightAndWidthInPixels>({
+    height: draggablePanelHeight,
+    width: draggablePanelWidth,
+  });
+
+  return (
+    <DraggablePanel
+      defaultPosition={{ x: 200, y: 200 }}
+      confineToParentContainer
+      key={panelTitle}
+      isOpen
+      panelTitle={panelTitle}
+      showPanelTitle={true}
+      styleOverrides={{
+        resize: 'both',
+      }}
+      onPanelResize={(dimensions: HeightAndWidthInPixels) => {
+        setPanelDimension(dimensions);
+      }}
+    >
+      <Barplot
+        data={dataSet}
+        dependentAxisLabel={'Awesomeness'}
+        independentAxisLabel={'Animal'}
+        displayLegend={false}
+        containerStyles={{
+          // perhaps plot height may be set to be proportional to to plot width
+          // as mostly resize invloves the change of width
+          // Otherwise, if DraggablePanel has other elements like InputVariables, Plot controls,
+          // then, height should substract heights of those elements to be better represented
+          height: panelDimension.height,
+          width: panelDimension.width,
+        }}
+      />
+    </DraggablePanel>
+  );
+};

packages/libs/coreui/src/components/containers/DraggablePanel/index.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { CSSProperties, ReactNode, useEffect, useState, useMemo } from 'react';
 import Draggable, { DraggableEvent, DraggableData } from 'react-draggable';
 import { css } from '@emotion/react';
 import useResizeObserver from 'use-resize-observer';
@@ -102,18 +102,31 @@ export default function DraggablePanel({
     }
   }
 
+  // convert rem to px
+  const dragHandleHeightValue = 2;
+  const dragHandleHeight = useMemo(() => {
+    return (
+      dragHandleHeightValue *
+      parseFloat(getComputedStyle(document.documentElement).fontSize)
+    );
+  }, []);
+
   const { ref, height, width } = useResizeObserver();
 
   useEffect(
     function invokeOnPanelResize() {
       if (!onPanelResize || !height || !width) return;
 
       onPanelResize({
-        height: height,
+        // Note: since height from useResizeObserver includes dragHandle's height, 2rem,
+        // dragHandle's height should be substracted from height to compute main panel size
+        // without this, the use of useResizeObserver's height may lead to infinite loop
+        // when changing plot size inside the pannel
+        height: height - dragHandleHeight,
         width: width,
       });
     },
-    [height, width, onPanelResize]
+    [height, width]
   );
 
   const finalPosition = confineToParentContainer
@@ -162,7 +175,9 @@ export default function DraggablePanel({
             background: ${theme?.palette?.primary?.hue[100] ?? gray[100]};
             cursor: ${isDragging ? 'grabbing' : 'grab'};
             display: flex;
-            height: 2rem;
+            height: ${dragHandleHeightValue != null
+              ? dragHandleHeightValue + 'rem'
+              : '2rem'};
             justify-content: center;
             // Because the panels are positioned absolutely and overflow auto,
             // the handle will get lost when the user scrolls down. We can pin the