feat: BROS-62: Responsive grid images

web/libs/datamanager/src/components/Common/Button/Button.jsx

@@ -4,7 +4,7 @@ import { isDefined } from "../../../utils/utils";
 import "./Button.scss";
 
 export const Button = forwardRef(
-  ({ children, type, extra, className, href, size, waiting, icon, tag, look, ...rest }, ref) => {
+  ({ children, type, extra, className, href, size, waiting, icon, tag, look, rawClassName, ...rest }, ref) => {
     const finalTag = (tag ?? href) ? "a" : "button";
 
     const mods = {
@@ -38,6 +38,7 @@ export const Button = forwardRef(
         mod={mods}
         className={className?.toString()}
         type={type}
+        rawClassName={rawClassName}
         {...rest}
       >
         <>

web/libs/datamanager/src/components/Common/Button/Button.scss

@@ -291,9 +291,7 @@
   display: flex;
 
   &:not(.button-group-dm_collapsed) {
-    .button-dm+.button-dm {
-      margin-left: 16px;
-    }
+    gap: var(--spacing-tight)
   }
 
   &_collapsed {

web/libs/datamanager/src/components/DataGroups/ImageDataGroup.jsx

@@ -2,17 +2,21 @@ import { getRoot } from "mobx-state-tree";
 import { AnnotationPreview } from "../Common/AnnotationPreview/AnnotationPreview";
 import { Block } from "../../utils/bem";
 
+export const IMAGE_SIZE_COEFFICIENT = 8;
+
 export const ImageDataGroup = (column) => {
   const {
     value,
     original,
     field: { alias },
+    columnCount,
   } = column;
   const root = getRoot(original);
+  const imageHeight = ImageDataGroup.height * Math.max(1, IMAGE_SIZE_COEFFICIENT - columnCount);
 
   return original.total_annotations === 0 || !root.showPreviews ? (
     <Block name="grid-image-wrapper">
-      <img src={value} width="auto" height={ImageDataGroup.height} alt="" />
+      <img src={value} width="auto" style={{ height: imageHeight }} alt="" />
     </Block>
   ) : (
     <AnnotationPreview

web/libs/datamanager/src/components/DataGroups/TextDataGroup.jsx

@@ -1,5 +1,6 @@
 import { format, isValid } from "date-fns";
 import { dateTimeFormat } from "../CellViews/DateTimeCell";
+import clsx from "clsx";
 
 export const valueToString = (value) => {
   if (typeof value === "string") return value;
@@ -15,18 +16,21 @@ export const valueToString = (value) => {
   }
 };
 
-export const TextDataGroup = ({ value }) => {
+export const TextDataGroup = ({ value, hasImage }) => {
   const output = valueToString(value);
   const style = {
-    padding: 5,
-    height: TextDataGroup.height,
-    overflow: "hidden",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
+    height: hasImage ? TextDataGroup.height : "auto",
   };
 
   return (
-    <div style={style} title={output}>
+    <div
+      style={style}
+      title={output}
+      className={clsx("p-tight", {
+        "text-wrap leading-normal": !hasImage,
+        "text-nowrap": hasImage,
+      })}
+    >
       {output}
     </div>
   );

web/libs/datamanager/src/components/DataManager/Toolbar/GridWidthButton.jsx

@@ -1,49 +1,77 @@
 import { inject } from "mobx-react";
 import { useCallback, useState } from "react";
-import { IconMinus, IconPlus } from "@humansignal/icons";
 import { Button } from "../../Common/Button/Button";
-import { Icon } from "../../Common/Icon/Icon";
-import { Space } from "../../Common/Space/Space";
+import { Dropdown } from "../../Common/Dropdown/DropdownComponent";
+import { Toggle } from "../../Common/Form";
+import { IconSettings, IconMinus, IconPlus } from "@humansignal/icons";
 
 const injector = inject(({ store }) => {
   const view = store?.currentView;
 
+  const cols = view.fieldsAsColumns ?? [];
+  const hasImage = cols.some(({ type }) => type === "Image") ?? false;
+
   return {
     view,
+    isGrid: view.type === "grid",
     gridWidth: view?.gridWidth,
+    responsiveImage: view?.gridResponsiveImage,
+    hasImage,
   };
 });
 
-export const GridWidthButton = injector(({ view, gridWidth, size }) => {
+export const GridWidthButton = injector(({ view, isGrid, gridWidth, responsiveImage, hasImage, size }) => {
   const [width, setWidth] = useState(gridWidth);
 
   const setGridWidth = useCallback(
     (width) => {
-      const newWidth = Math.max(3, Math.min(width, 10));
+      const newWidth = Math.max(1, Math.min(width, 10));
 
       setWidth(newWidth);
       view.setGridWidth(newWidth);
     },
     [view],
   );
 
-  return view.type === "grid" ? (
-    <Space style={{ fontSize: 12 }}>
-      Columns: {width}
-      <Button.Group>
-        <Button
-          size={size}
-          icon={<Icon icon={IconMinus} size="12" color="#595959" />}
-          onClick={() => setGridWidth(width - 1)}
-          disabled={width === 3}
-        />
-        <Button
-          size={size}
-          icon={<Icon icon={IconPlus} size="12" color="#595959" />}
-          onClick={() => setGridWidth(width + 1)}
-          disabled={width === 10}
-        />
-      </Button.Group>
-    </Space>
+  const handleResponsiveImagesToggle = useCallback((e) => {
+    view.setGridResponsiveImage(!e.target.checked);
+  }, []);
+
+  return isGrid ? (
+    <Dropdown.Trigger
+      content={
+        <div className="p-tight min-w-wide space-y-base">
+          <div className="grid grid-cols-[1fr_min-content] gap-base items-center">
+            <span>Columns: {width}</span>
+            <Button.Group>
+              <Button
+                onClick={() => setGridWidth(width - 1)}
+                disabled={width === 1}
+                rawClassName="aspect-square h-6 !p-0"
+              >
+                <IconMinus />
+              </Button>
+              <Button
+                onClick={() => setGridWidth(width + 1)}
+                disabled={width === 10}
+                rawClassName="aspect-square h-6 !p-0"
+              >
+                <IconPlus />
+              </Button>
+            </Button.Group>
+          </div>
+          {hasImage && (
+            <div className="grid grid-cols-[1fr_min-content] gap-base items-center">
+              <span>Fit images to width</span>
+              <Toggle checked={!responsiveImage} onChange={handleResponsiveImagesToggle} />
+            </div>
+          )}
+        </div>
+      }
+    >
+      <Button size={size}>
+        <IconSettings />
+      </Button>
+    </Dropdown.Trigger>
   ) : null;
 });

web/libs/datamanager/src/components/MainView/GridView/GridPreview.tsx

@@ -20,6 +20,7 @@ type GridViewContextType = {
   imageField: string | undefined;
   currentTaskId: number | null;
   setCurrentTaskId: (id: number | null) => void;
+  hasImage: boolean;
 };
 
 type TaskModalProps = GridViewContextType & { view: any; imageField: string };
@@ -29,6 +30,7 @@ export const GridViewContext = createContext<GridViewContextType>({
   imageField: undefined,
   currentTaskId: null,
   setCurrentTaskId: () => {},
+  hasImage: false,
 });
 
 const TaskModal = observer(({ view, tasks, imageField, currentTaskId, setCurrentTaskId }: TaskModalProps) => {
@@ -131,6 +133,7 @@ export const GridViewProvider: React.FC<GridViewProviderProps> = ({ children, da
   const [currentTaskId, setCurrentTaskId] = useState<number | null>(null);
   const modalRef = useRef<{ update: (props: object) => void; close: () => void } | null>(null);
   const imageField = fields.find((f) => f.currentType === "Image")?.alias;
+  const hasImage = fields.some((f) => f.currentType === "Image");
 
   const onClose = useCallback(() => {
     modalRef.current = null;
@@ -152,6 +155,7 @@ export const GridViewProvider: React.FC<GridViewProviderProps> = ({ children, da
         imageField={imageField}
         currentTaskId={currentTaskId}
         setCurrentTaskId={setCurrentTaskId}
+        hasImage={hasImage}
       />
     );
 
@@ -172,7 +176,7 @@ export const GridViewProvider: React.FC<GridViewProviderProps> = ({ children, da
   useEffect(() => () => modalRef.current?.close(), []);
 
   return (
-    <GridViewContext.Provider value={{ tasks: data, imageField, currentTaskId, setCurrentTaskId }}>
+    <GridViewContext.Provider value={{ tasks: data, imageField, currentTaskId, setCurrentTaskId, hasImage }}>
       {children}
     </GridViewContext.Provider>
   );