fix(dashboard): change min widget sizing from 2 to 1

awslabs · May 25, 2023 · d840fc1 · d840fc1
1 parent 64f99a7
commit d840fc1
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dashboard/src/store/actions/resizeWidgets/index.spec.ts b/packages/dashboard/src/store/actions/resizeWidgets/index.spec.ts
@@ -96,10 +96,10 @@ describe('top-left anchor', () => {
     ).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          x: 2,
-          y: 2,
-          width: 2,
-          height: 2,
+          x: 3,
+          y: 3,
+          width: 1,
+          height: 1,
         }),
       ])
     );
@@ -207,17 +207,17 @@ describe('top anchor', () => {
         setupDashboardState([lineChartWidget]),
         onResizeWidgetsAction({
           widgets: [lineChartWidget],
-          vector: { x: 210.2, y: 0.2 },
+          vector: { x: 210, y: 1 },
           anchor: 'top',
         })
       ).dashboardConfiguration.widgets
     ).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
           x: 2,
-          y: 2,
+          y: 3,
           width: 2,
-          height: 2,
+          height: 1,
         }),
       ])
     );

diff --git a/packages/dashboard/src/util/resizeSelectionBox.spec.ts b/packages/dashboard/src/util/resizeSelectionBox.spec.ts
@@ -73,39 +73,39 @@ it('should resize selection box on right anchor', () => {
 });
 
 describe('should not vertically resize selection box below minimum width', () => {
-  const curr = { x: 50, y: 50, width: 2, height: 100 };
+  const curr = { x: 50, y: 50, width: 1, height: 100 };
   const leftAnchors: Anchor[] = ['top', 'top-left', 'bottom-left'];
   leftAnchors.forEach((anchor) => {
     const vector = { x: 10, y: 10 };
     it(`should not resize selection box on ${anchor} anchor`, () => {
-      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).width).toEqual(2);
+      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).width).toEqual(1);
     });
   });
 
   const rightAnchors: Anchor[] = ['top-right', 'bottom-right', 'right'];
   rightAnchors.forEach((anchor) => {
     const vector = { x: -10, y: 10 };
     it(`should not resize selection box on ${anchor} anchor`, () => {
-      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).width).toEqual(2);
+      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).width).toEqual(1);
     });
   });
 });
 
 describe('should not horizontally resize selection box below minimum height', () => {
-  const curr = { x: 50, y: 50, width: 100, height: 2 };
+  const curr = { x: 50, y: 50, width: 100, height: 1 };
   const topAnchors: Anchor[] = ['top', 'top-left', 'top-right'];
   topAnchors.forEach((anchor) => {
     const vector = { x: 10, y: 10 };
     it(`should not resize selection box on ${anchor} anchor`, () => {
-      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).height).toEqual(2);
+      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).height).toEqual(1);
     });
   });
 
   const bottomAnchors: Anchor[] = ['bottom-left', 'bottom-right', 'bottom'];
   bottomAnchors.forEach((anchor) => {
     const vector = { x: 10, y: -10 };
     it(`should not resize selection box on ${anchor} anchor`, () => {
-      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).height).toEqual(2);
+      expect(resizeSelectionBox({ selectionBox: curr, anchor, vector, grid }).height).toEqual(1);
     });
   });
 });

diff --git a/packages/dashboard/src/util/resizeSelectionBox.ts b/packages/dashboard/src/util/resizeSelectionBox.ts
@@ -2,8 +2,8 @@ import type { Position, Rect } from '~/types';
 import type { Anchor } from '~/store/actions';
 import { DashboardState } from '~/store/state';
 
-const MIN_WIDTH = 2;
-const MIN_HEIGHT = 2;
+const MIN_WIDTH = 1;
+const MIN_HEIGHT = 1;
 const rectWithinMin = (rect: Rect): Rect => {
   const { width, height } = rect;
 

diff --git a/packages/dashboard/src/util/trimRectPosition.ts b/packages/dashboard/src/util/trimRectPosition.ts
@@ -5,7 +5,7 @@ export const trimRectPosition = <R extends Rect>(rect: R): R => {
     ...rect,
     x: Math.round(rect.x),
     y: Math.round(rect.y),
-    width: Math.round(rect.width),
-    height: Math.round(rect.height),
+    width: Math.max(1, Math.round(rect.width)), // prevent rounding a widget to 0 width
+    height: Math.max(1, Math.round(rect.height)), // prevent rounding a widget to 0 height
   };
 };
diff --git a/packages/dashboard/src/util/trimWidgetPosition.spec.ts b/packages/dashboard/src/util/trimWidgetPosition.spec.ts
@@ -39,6 +39,25 @@ it('rounds the width and height to the nearest decimal', () => {
   );
 });
 
+it('prevents a widgets size from being 0', () => {
+  expect(
+    trimRectPosition(
+      MockWidgetFactory.getKpiWidget({
+        x: 1,
+        y: 2,
+        width: 0.3,
+        height: 0.3,
+        id: 'some-id',
+      })
+    )
+  ).toEqual(
+    expect.objectContaining({
+      width: 1,
+      height: 1,
+    })
+  );
+});
+
 it('does nothing to widgets with integer based position and dimensions', () => {
   expect(
     trimRectPosition(