enhancement for grid layout

app/packages/core/src/plugins/SchemaIO/components/GridView.tsx

@@ -9,7 +9,7 @@ export default function GridView(props: ViewPropsType) {
   const { schema, path, data } = props;
   const { properties, view = {} } = schema as ObjectSchemaType;
   const { alignX, alignY, align_x, align_y, gap = 1, orientation } = view;
-  const direction = orientation === "vertical" ? "row" : "column";
+  const direction = orientation === "horizontal" ? "row" : "column";
 
   const propertiesAsArray = [];
 
@@ -18,14 +18,20 @@ export default function GridView(props: ViewPropsType) {
   }
 
   const layoutHeight = props?.layout?.height;
+  const parsedGap = parseGap(gap);
+  const adjustedLayoutWidth = getAdjustedLayoutWidth(
+    props?.layout?.width,
+    parsedGap
+  );
 
   const baseGridProps: BoxProps = {
     sx: {
-      display: "grid",
-      gap,
+      display: "flex",
+      flexWrap: "wrap",
+      gap: parsedGap,
       justifyContent: alignX || align_x || "start",
       alignItems: alignY || align_y || "start",
-      gridAutoFlow: direction,
+      flexDirection: direction,
     },
   };
 
@@ -45,14 +51,19 @@ export default function GridView(props: ViewPropsType) {
                 orientation === "vertical"
                   ? spaceToHeight(space, layoutHeight)
                   : undefined,
+              overflow: "hidden",
             },
             key: id,
           };
           return (
             <Box
               key={id}
               {...getProps(
-                { ...props, schema: property },
+                {
+                  ...props,
+                  schema: property,
+                  layout: { width: adjustedLayoutWidth, height: layoutHeight },
+                },
                 "item",
                 baseItemProps
               )}
@@ -72,3 +83,25 @@ export default function GridView(props: ViewPropsType) {
     </Box>
   );
 }
+
+function parseGap(gap: number | string) {
+  if (typeof gap === "string") {
+    const gapStr = gap.trim().replace("px", "");
+    if (isNaN(gapStr)) {
+      console.warn("Ignored invalid gap value " + gap);
+      return 0;
+    }
+    const gapInt = parseInt(gapStr);
+    return gap.includes("px") ? gapInt / 8 : gapInt;
+  } else if (typeof gap === "number") {
+    return gap;
+  }
+  return 0;
+}
+
+function getAdjustedLayoutWidth(layoutWidth?: number, gap?: number) {
+  if (typeof gap === "number" && typeof layoutWidth === "number") {
+    return layoutWidth - gap * 8;
+  }
+  return layoutWidth;
+}

app/packages/operators/src/CustomPanel.tsx

@@ -7,6 +7,7 @@ import { PANEL_LOAD_TIMEOUT } from "./constants";
 import { Property } from "./types";
 
 import { CustomPanelProps, useCustomPanelHooks } from "./useCustomPanelHooks";
+import { useEffect } from "react";
 
 export function CustomPanel(props: CustomPanelProps) {
   const { panelId, dimensions, panelName, panelLabel } = props;
@@ -48,18 +49,33 @@ export function CustomPanel(props: CustomPanelProps) {
   const schema = Property.fromJSON(panelSchema);
 
   return (
-    <Box sx={{ height: "100%", width: "100%", position: "relative" }}>
-      <OperatorIO
-        schema={schema}
-        onChange={handlePanelStateChange}
-        data={data}
-        layout={{ height, width }}
-        onPathChange={handlePanelStatePathChange}
-      />
+    <Box
+      sx={{ height: "100%", width: "100%", position: "relative" }}
+      ref={dimensions.widthRef}
+    >
+      <DimensionRefresher dimensions={dimensions}>
+        <OperatorIO
+          schema={schema}
+          onChange={handlePanelStateChange}
+          data={data}
+          layout={{ height, width }}
+          onPathChange={handlePanelStatePathChange}
+        />
+      </DimensionRefresher>
     </Box>
   );
 }
 
+function DimensionRefresher(props) {
+  const { dimensions, children } = props;
+
+  useEffect(() => {
+    dimensions?.refresh();
+  }, []);
+
+  return children;
+}
+
 export function defineCustomPanel({
   on_load,
   on_change,

app/packages/operators/src/useCustomPanelHooks.ts

@@ -1,15 +1,15 @@
-import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { isEqual, merge } from "lodash";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useRecoilValue } from "recoil";
-import { merge, isEqual } from "lodash";
 
 import { usePanelState, useSetCustomPanelState } from "@fiftyone/spaces";
-import { executeOperator } from "./operators";
 import * as fos from "@fiftyone/state";
-import usePanelEvent from "./usePanelEvent";
+import { executeOperator } from "./operators";
 import {
   panelsStateUpdatesCountAtom,
   useGlobalExecutionContext,
 } from "./state";
+import usePanelEvent from "./usePanelEvent";
 
 export interface CustomPanelProps {
   panelId: string;
@@ -29,6 +29,7 @@ export interface CustomPanelProps {
       height?: number;
       width?: number;
     };
+    widthRef: React.MutableRefObject<HTMLDivElement | null>;
   } | null;
   panelName?: string;
   panelLabel?: string;

app/packages/spaces/src/components/Panel.tsx

@@ -1,4 +1,4 @@
-import { CenteredStack } from "@fiftyone/components";
+import { CenteredStack, scrollable } from "@fiftyone/components";
 import * as fos from "@fiftyone/state";
 import React from "react";
 import { PANEL_LOADING_TIMEOUT } from "../constants";
@@ -35,7 +35,12 @@ function Panel(props: PanelProps) {
   const { component: Component } = panel;
 
   return (
-    <StyledPanel id={node.id} ref={dimensions.ref} data-cy={panelContentTestId}>
+    <StyledPanel
+      id={node.id}
+      data-cy={panelContentTestId}
+      className={scrollable}
+      ref={dimensions.ref}
+    >
       <PanelContext.Provider value={{ node }}>
         <Component panelNode={node} dimensions={dimensions} />
       </PanelContext.Provider>

app/packages/spaces/src/components/StyledElements.tsx

@@ -1,4 +1,3 @@
-import { scrollbarStyles } from "@fiftyone/utilities";
 import styled from "styled-components";
 
 export const SpaceContainer = styled.div`
@@ -24,7 +23,6 @@ export const StyledPanel = styled.div`
   height: calc(100% - 28px);
   overflow: auto;
   background: var(--fo-palette-background-mediaSpace);
-  ${scrollbarStyles}
 `;
 
 export const AddPanelButtonContainer = styled.div`

app/packages/state/src/hooks/useDimensions.ts

@@ -1,28 +1,48 @@
-import { useState, useRef, useLayoutEffect, DOMElement } from "react";
+import { throttle } from "lodash";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 
-type Dimensions = {
-  width: number;
-  height: number;
-};
+const DIMENSION_REFRESH_THROTTLE = 250;
+
+type Dimensions = { width: number; height: number };
 
 export default function useDimensions() {
   const [bounds, update] = useState<Dimensions>(null);
   const ref = useRef<HTMLElement>();
+  const widthRef = useRef<HTMLElement>();
+  const heightRef = useRef<HTMLElement>();
 
   function refresh() {
-    if (!ref.current) return;
-    const { width, height } = ref.current.getBoundingClientRect();
+    if (!ref.current && !widthRef.current && !heightRef.current) return;
+    let height, width;
+    if ((!widthRef.current || !heightRef.current) && ref.current) {
+      height = ref.current.getBoundingClientRect().height;
+      width = ref.current.getBoundingClientRect().width;
+    }
+    if (widthRef.current) {
+      width = widthRef.current.getBoundingClientRect().width;
+    }
+    if (heightRef.current) {
+      height = heightRef.current.getBoundingClientRect().height;
+    }
     update({ width, height });
   }
 
-  const ro = new ResizeObserver(refresh);
+  const throttledRefresh = useMemo(() => {
+    return throttle(() => {
+      refresh();
+    }, DIMENSION_REFRESH_THROTTLE);
+  }, []);
+
+  const ro = useMemo(() => {
+    return new ResizeObserver(throttledRefresh);
+  }, [throttledRefresh]);
 
   useLayoutEffect(() => {
     if (ref.current) {
       refresh();
       ro.observe(ref.current);
     }
-  }, [ref.current]);
+  }, [ro, ref.current]); // eslint-disable-line
 
-  return { bounds, ref, update, refresh };
+  return { bounds, ref, heightRef, widthRef, update, refresh };
 }