fix: orderbook sticky behaviour and precision options (#1519)

* fix: orderbook sticky behaviour and precision options

* chore: add handling of y-axis resize

* fix: addressed PR comments

* fix: addressed PR comments

* added cy.log

* Update apps/trading-e2e/src/support/vega-wallet.ts

apps/trading-e2e/src/support/vega-wallet.ts

@@ -3,7 +3,6 @@ export const connectVegaWallet = () => {
   const manageVegaBtn = 'manage-vega-wallet';
   const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
   const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
-
   cy.getByTestId('connect-vega-wallet').click();
   cy.getByTestId('connectors-list').find('button').click();
   cy.getByTestId(form).find('#wallet').click().type(walletName);

libs/market-depth/src/lib/orderbook.tsx

@@ -12,7 +12,12 @@ import {
 } from 'react';
 import classNames from 'classnames';
 
-import { formatNumber, t, ThemeContext } from '@vegaprotocol/react-helpers';
+import {
+  formatNumber,
+  t,
+  ThemeContext,
+  useResizeObserver,
+} from '@vegaprotocol/react-helpers';
 import { MarketTradingMode } from '@vegaprotocol/types';
 import { OrderbookRow } from './orderbook-row';
 import { createRow, getPriceLevel } from './orderbook-data';
@@ -109,6 +114,9 @@ export const Orderbook = ({
 }: OrderbookProps) => {
   const theme = useContext(ThemeContext);
   const scrollElement = useRef<HTMLDivElement>(null);
+  const gridElement = useRef<HTMLDivElement>(null);
+  const headerElement = useRef<HTMLDivElement>(null);
+  const footerElement = useRef<HTMLDivElement>(null);
   // scroll offset for which rendered rows are selected, will change after user will scroll to margin of rendered data
   const [scrollOffset, setScrollOffset] = useState(0);
   // actual scrollTop of scrollElement current element
@@ -249,7 +257,7 @@ export const Orderbook = ({
     }
   }, [scrollToMidPrice, scrollToPrice, resolution]);
 
-  // handles viewport resize
+  // handles window resize
   useEffect(() => {
     function handleResize() {
       if (scrollElement.current) {
@@ -262,6 +270,50 @@ export const Orderbook = ({
     handleResize();
     return () => window.removeEventListener('resize', handleResize);
   }, []);
+  // sets the correct width of header and footer
+  useLayoutEffect(() => {
+    if (
+      !gridElement.current ||
+      !headerElement.current ||
+      !footerElement.current
+    ) {
+      return;
+    }
+    const gridWidth = gridElement.current.clientWidth;
+    headerElement.current.style.width = `${gridWidth}px`;
+    footerElement.current.style.width = `${gridWidth}px`;
+  }, [headerElement, footerElement, gridElement]);
+  // handles resizing of the Allotment.Pane (x-axis)
+  // adjusts the header and footer width
+  const gridResizeHandler: ResizeObserverCallback = useCallback(
+    (entries) => {
+      if (
+        !headerElement.current ||
+        !footerElement.current ||
+        entries.length === 0
+      ) {
+        return;
+      }
+      const {
+        contentRect: { width, height },
+      } = entries[0];
+      headerElement.current.style.width = `${width}px`;
+      footerElement.current.style.width = `${width}px`;
+      setViewportHeight(height);
+    },
+    [headerElement, footerElement]
+  );
+  // handles resizing of the Allotment.Pane (y-axis)
+  // adjusts the scroll height
+  const scrollElementResizeHandler: ResizeObserverCallback = useCallback(
+    (entries) => {
+      if (!scrollElement.current || entries.length === 0) return;
+      setViewportHeight(entries[0].contentRect.height);
+    },
+    [setViewportHeight, scrollElement]
+  );
+  useResizeObserver(gridElement.current, gridResizeHandler);
+  useResizeObserver(scrollElement.current, scrollElementResizeHandler);
 
   let offset = Math.max(0, Math.round(scrollOffset / rowHeight));
   const prependingBufferSize = Math.min(bufferSize, offset);
@@ -313,16 +365,16 @@ export const Orderbook = ({
   const c = theme === 'dark' ? colors.neutral[600] : colors.neutral[300];
   const gradientStyles = `linear-gradient(${c},${c}) 24.6% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 50% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 75.2% 0/1px 100% no-repeat`;
 
+  const resolutions = new Array(decimalPlaces + 1)
+    .fill(null)
+    .map((v, i) => Math.pow(10, i));
+
   return (
+    <div className="h-full relative pl-2 text-xs">
       <div
-      className={`h-full overflow-auto relative ${styles['scroll']} pl-2 text-xs`}
-      onScroll={onScroll}
-      ref={scrollElement}
-      data-testid="scroll"
-    >
-      <div
-        className="sticky top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default"
+        className="absolute top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default w-full"
         style={{ gridAutoRows: '17px' }}
+        ref={headerElement}
       >
         <div>{t('Bid vol')}</div>
         <div>{t('Price')}</div>
@@ -330,13 +382,19 @@ export const Orderbook = ({
         <div className="pr-[2px]">{t('Cumulative vol')}</div>
       </div>
       <div
-        className="relative text-right"
+        className={`h-full overflow-auto relative ${styles['scroll']} pt-[26px] pb-[17px]`}
+        onScroll={onScroll}
+        ref={scrollElement}
+        data-testid="scroll"
+      >
+        <div
+          className="relative text-right min-h-full"
           style={{
-          paddingTop: `${paddingTop}px`,
-          paddingBottom: `${paddingBottom}px`,
-          minHeight: `calc(100% - ${2 * (rowHeight + 2)}px)`,
+            paddingTop: paddingTop,
+            paddingBottom: paddingBottom,
             background: tableBody ? gradientStyles : 'none',
           }}
+          ref={gridElement}
         >
           {tableBody || (
             <div className="inset-0 absolute">
@@ -344,43 +402,6 @@ export const Orderbook = ({
             </div>
           )}
         </div>
-      <div
-        className="sticky bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-default mt-2 z-10 bg-white dark:bg-black"
-        style={{ gridAutoRows: '17px' }}
-      >
-        <div className="col-start-2">
-          <select
-            onChange={(e) => onResolutionChange(Number(e.currentTarget.value))}
-            value={resolution}
-            className="block bg-neutral-100 dark:bg-neutral-700 font-mono text-right w-full h-full"
-            data-testid="resolution"
-          >
-            {new Array(3)
-              .fill(null)
-              .map((v, i) => Math.pow(10, i))
-              .map((r) => (
-                <option key={r} value={r}>
-                  {formatNumber(0, decimalPlaces - Math.log10(r))}
-                </option>
-              ))}
-          </select>
-        </div>
-        <div className="col-start-4">
-          <button
-            onClick={scrollToMidPrice}
-            className={classNames('w-full h-full', {
-              hidden: lockOnMidPrice,
-              block: !lockOnMidPrice,
-            })}
-            data-testid="scroll-to-midprice"
-          >
-            Go to mid
-            <span className="ml-4">
-              <Icon name="th-derived" />
-            </span>
-          </button>
-        </div>
-      </div>
         {maxPriceLevel &&
           bestStaticBidPrice &&
           BigInt(bestStaticBidPrice) < BigInt(maxPriceLevel) &&
@@ -412,6 +433,42 @@ export const Orderbook = ({
             />
           )}
       </div>
+      <div
+        className="absolute bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-default mt-2 z-10 bg-white dark:bg-black w-full"
+        style={{ gridAutoRows: '17px' }}
+        ref={footerElement}
+      >
+        <div className="col-start-2">
+          <select
+            onChange={(e) => onResolutionChange(Number(e.currentTarget.value))}
+            value={resolution}
+            className="block bg-neutral-100 dark:bg-neutral-700 font-mono text-right w-full h-full"
+            data-testid="resolution"
+          >
+            {resolutions.map((r) => (
+              <option key={r} value={r}>
+                {formatNumber(0, decimalPlaces - Math.log10(r))}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="col-start-4">
+          <button
+            onClick={scrollToMidPrice}
+            className={classNames('w-full h-full', {
+              hidden: lockOnMidPrice,
+              block: !lockOnMidPrice,
+            })}
+            data-testid="scroll-to-midprice"
+          >
+            {t('Go to mid')}
+            <span className="ml-4">
+              <Icon name="th-derived" />
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
   );
 };
 

libs/market-depth/src/setup-tests.ts

@@ -14,3 +14,13 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
+
+Object.defineProperty(window, 'ResizeObserver', {
+  writable: false,
+  value: jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+  })),
+});

libs/react-helpers/src/hooks/index.ts

@@ -6,3 +6,5 @@ export * from './use-outside-click';
 export * from './use-resize';
 export * from './use-screen-dimensions';
 export * from './use-theme-switcher';
+export * from './use-mutation-observer';
+export * from './use-resize-observer';

libs/react-helpers/src/hooks/use-mutation-observer.ts

@@ -0,0 +1,41 @@
+import { captureException } from '@sentry/react';
+import debounce from 'lodash/debounce';
+import { useEffect, useMemo } from 'react';
+
+type MutationObserverConfiguration = {
+  debounceTime: number;
+  config: MutationObserverInit;
+};
+
+const DEFAULT_OPTIONS: MutationObserverConfiguration = {
+  debounceTime: 0,
+  config: {
+    attributes: true,
+    childList: false,
+    subtree: false,
+  },
+};
+
+export function useMutationObserver(
+  target: Node | null,
+  callback: MutationCallback,
+  options: MutationObserverConfiguration = DEFAULT_OPTIONS
+) {
+  const observer = useMemo(() => {
+    return new MutationObserver(
+      options.debounceTime > 0
+        ? debounce(callback, options.debounceTime)
+        : callback
+    );
+  }, [callback, options.debounceTime]);
+
+  useEffect(() => {
+    if (!observer || !target) return;
+    try {
+      observer.observe(target, options.config);
+    } catch (err) {
+      captureException(err);
+    }
+    return () => observer?.disconnect();
+  }, [observer, options.config, target]);
+}

libs/react-helpers/src/hooks/use-resize-observer.ts

@@ -0,0 +1,39 @@
+import { captureException } from '@sentry/react';
+import debounce from 'lodash/debounce';
+import { useEffect, useMemo } from 'react';
+
+type ResizeObserverConfiguration = {
+  debounceTime: number;
+  config: ResizeObserverOptions;
+};
+
+const DEFAULT_OPTIONS: ResizeObserverConfiguration = {
+  debounceTime: 0,
+  config: {
+    box: 'border-box',
+  },
+};
+
+export function useResizeObserver(
+  target: Element | null,
+  callback: ResizeObserverCallback,
+  options: ResizeObserverConfiguration = DEFAULT_OPTIONS
+) {
+  const observer = useMemo(() => {
+    return new ResizeObserver(
+      options.debounceTime > 0
+        ? debounce(callback, options.debounceTime)
+        : callback
+    );
+  }, [callback, options.debounceTime]);
+
+  useEffect(() => {
+    if (!observer || !target) return;
+    try {
+      observer.observe(target, options.config);
+    } catch (err) {
+      captureException(err);
+    }
+    return () => observer?.disconnect();
+  }, [observer, options.config, target]);
+}