feat: grid improvements

config/testSetup.js

@@ -0,0 +1,9 @@
+import { configure } from '@testing-library/dom'
+import '@testing-library/jest-dom'
+import ResizeObserver from 'resize-observer-polyfill'
+
+global.ResizeObserver = ResizeObserver
+
+configure({
+    testIdAttribute: 'data-test',
+})

package.json

@@ -61,6 +61,7 @@
         "patch-package": "^7",
         "postinstall-postinstall": "^2.1.0",
         "redux-mock-store": "^1.5.4",
+        "resize-observer-polyfill": "^1.5.1",
         "semantic-release": "^20",
         "start-server-and-test": "^1.14.0"
     },

src/components/DashboardContainer.js

@@ -1,26 +1,48 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, {
+    useRef,
+    useState,
+    useEffect,
+    createContext,
+    useContext,
+} from 'react'
 import classes from './styles/DashboardContainer.module.css'
 
-const DashboardContainer = ({ children, covered }) => {
+const ContainerWidthContext = createContext(0)
+
+const DashboardContainer = ({ children }) => {
+    const [containerWidth, setContainerWidth] = useState(0)
+    const ref = useRef(null)
+
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver((entries) => {
+            setContainerWidth(entries[0].contentRect.width)
+        })
+        resizeObserver.observe(ref.current)
+
+        return () => {
+            resizeObserver.disconnect()
+        }
+    }, [])
+
     return (
         <div
-            className={cx(
-                classes.container,
-                'dashboard-scroll-container',
-                covered && classes.covered
-            )}
+            className={cx(classes.container, 'dashboard-scroll-container')}
             data-test="inner-scroll-container"
         >
-            {children}
+            <div ref={ref} className={classes.contentWrap}>
+                <ContainerWidthContext.Provider value={containerWidth}>
+                    {children}
+                </ContainerWidthContext.Provider>
+            </div>
         </div>
     )
 }
 
 DashboardContainer.propTypes = {
     children: PropTypes.node,
-    covered: PropTypes.bool,
 }
 
+export const useContainerWidth = () => useContext(ContainerWidthContext)
 export default DashboardContainer

src/components/styles/DashboardContainer.module.css

@@ -1,19 +1,18 @@
 .container {
     background-color: #f4f6f8;
-    padding-inline-start: var(--spacers-dp16);
-    padding-inline-end: var(--spacers-dp16);
-    padding-block-end: var(--spacers-dp24);
+    padding-inline-start: var(--spacers-dp8);
+    padding-inline-end: var(--spacers-dp8);
+    padding-block-end: var(--spacers-dp12);
     overflow: auto;
 }
-
+.contentWrap {
+    overflow: visible;
+    margin: 0;
+    padding: 0;
+    inline-size: 100%;
+}
 @media only screen and (max-height: 480px) {
     .container {
         overflow: visible;
     }
 }
-
-@media only screen and (max-height: 480px), only screen and (max-width: 480px) {
-    .covered {
-        overflow: hidden;
-    }
-}

src/modules/__tests__/gridUtil.spec.js

@@ -10,7 +10,7 @@ import {
 describe('withShape', () => {
     it('returns objects with new properties (x, y, w, h)', () => {
         const items = withShape([{}])
-        expect(items).toMatchObject([{ x: 0, y: 0, w: 29, h: 20 }])
+        expect(items).toMatchObject([{ x: 0, y: 0, w: 29, h: 32 }])
     })
 
     it('returns same objects', () => {
@@ -47,17 +47,17 @@ describe('hasShape', () => {
 describe('getProportionalHeight', () => {
     it('returns the proportional height in grid units for 480px', () => {
         const item = { w: 20, h: 20, type: 'CHART' }
-        expect(getProportionalHeight(item, 480)).toEqual(18)
+        expect(getProportionalHeight(item, 480)).toEqual(22)
     })
 
     it('returns the proportional height in grid units for 360px', () => {
         const item = { w: 20, h: 20, type: 'CHART' }
-        expect(getProportionalHeight(item, 360)).toEqual(13)
+        expect(getProportionalHeight(item, 360)).toEqual(17)
     })
 
     it('returns the initial height for non vis type', () => {
         const item = { w: 20, h: 10, type: 'TEXT' }
-        expect(getProportionalHeight(item, 360)).toEqual(8)
+        expect(getProportionalHeight(item, 360)).toEqual(7)
     })
 })
 
@@ -93,31 +93,31 @@ describe('getSmallLayout', () => {
                 x: 0,
                 y: 2,
                 w: SM_SCREEN_GRID_COLUMNS,
-                h: 38,
+                h: 47,
                 type: 'CHART',
                 i: 'B',
             },
             {
                 x: 0,
                 y: 3,
                 w: SM_SCREEN_GRID_COLUMNS,
-                h: 36,
+                h: 44,
                 type: 'CHART',
                 i: 'E',
             },
             {
                 x: 0,
                 y: 4,
                 w: SM_SCREEN_GRID_COLUMNS,
-                h: 32,
+                h: 39,
                 type: 'CHART',
                 i: 'D',
             },
             {
                 x: 0,
                 y: 5,
                 w: SM_SCREEN_GRID_COLUMNS,
-                h: 8,
+                h: 7,
                 type: 'TEXT',
                 i: 'F',
             },

src/modules/gridUtil.js

@@ -14,15 +14,13 @@ import {
 import { isSmallScreen } from './smallScreen.js'
 
 export const GRID_COMPACT_TYPE = 'vertical' // vertical | horizonal | null
-export const GRID_ROW_HEIGHT_PX = 10
-export const MARGIN_PX = [10, 10]
+export const GRID_ROW_HEIGHT_PX = 16
+export const MARGIN_PX = [4, 4]
 
 const SM_SCREEN_MIN_ITEM_GRID_HEIGHT = 13 // minimum of ~320px
 export const SM_SCREEN_GRID_COLUMNS = 1
 export const MARGIN_SM_PX = [0, 16]
 export const GRID_PADDING_PX = [0, 0]
-// sum of left+right padding of dashboard-wrapper (App.css)
-export const DASHBOARD_WRAPPER_LR_MARGIN_PX = 32
 // make an assumption about the original item w/h ratio
 // assumes grid width of ~1200px at time dashboard was created
 const GRID_COL_WIDTH_PX = 10
@@ -87,15 +85,12 @@ export const withShape = (items = []) => {
     )
 }
 
-export const getGridWidth = (windowWidthPx) =>
-    windowWidthPx - DASHBOARD_WRAPPER_LR_MARGIN_PX
-
 const getGridUnitsForSmFromPx = (hPx) => {
     const gridUnitHeightPx = GRID_ROW_HEIGHT_PX + MARGIN_SM_PX[1]
     return Math.round((hPx + MARGIN_SM_PX[1]) / gridUnitHeightPx)
 }
 
-export const getProportionalHeight = (item, windowWidthPx) => {
+export const getProportionalHeight = (item, gridWidthPx) => {
     // get w/h ratio of the original item
     const wPx = getItemWHPx(item.w, GRID_COL_WIDTH_PX, MARGIN_PX[0])
     const hPx = getItemWHPx(item.h, GRID_ROW_HEIGHT_PX, MARGIN_PX[1])
@@ -105,8 +100,6 @@ export const getProportionalHeight = (item, windowWidthPx) => {
         return getGridUnitsForSmFromPx(hPx)
     }
 
-    const gridWidthPx = getGridWidth(windowWidthPx)
-
     // get new height in px based on the ratio
     const newColWidthPx =
         (gridWidthPx -

src/modules/smallScreen.js

@@ -1,8 +1,6 @@
-import { DASHBOARD_WRAPPER_LR_MARGIN_PX } from './gridUtil.js'
-
 const SMALL_SCREEN_BREAKPOINT = 480
 
 export const isSmallScreen = (width) => width <= SMALL_SCREEN_BREAKPOINT
 
-export const getBreakpoint = () =>
-    SMALL_SCREEN_BREAKPOINT - DASHBOARD_WRAPPER_LR_MARGIN_PX
+export const getBreakpoint = (containerWidth) =>
+    SMALL_SCREEN_BREAKPOINT - (window.innerWidth - containerWidth)

src/pages/edit/ItemGrid.js

@@ -5,10 +5,10 @@ import React, { useState } from 'react'
 import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 import { connect } from 'react-redux'
 import { acUpdateDashboardItemShapes } from '../../actions/editDashboard.js'
+import { useContainerWidth } from '../../components/DashboardContainer.js'
 import { Item } from '../../components/Item/Item.js'
 import NoContentMessage from '../../components/NoContentMessage.js'
 import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.js'
-import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js'
 import { EDIT } from '../../modules/dashboardModes.js'
 import { getFirstOfTypes } from '../../modules/getFirstOfType.js'
 import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
@@ -19,7 +19,6 @@ import {
     GRID_PADDING_PX,
     GRID_COLUMNS,
     hasShape,
-    getGridWidth,
     hasLayout,
 } from '../../modules/gridUtil.js'
 import { getBreakpoint } from '../../modules/smallScreen.js'
@@ -37,8 +36,8 @@ const EditItemGrid = ({
     hasLayout,
     hideGrid,
 }) => {
+    const containerWidth = useContainerWidth()
     const [gridWidth, setGridWidth] = useState({ width: 0 })
-    const { width } = useWindowDimensions()
     const firstOfTypes = getFirstOfTypes(dashboardItems)
 
     const onLayoutChange = (newLayout) => {
@@ -90,10 +89,10 @@ const EditItemGrid = ({
         <ResponsiveReactGridLayout
             className={classes.grid}
             rowHeight={GRID_ROW_HEIGHT_PX}
-            width={getGridWidth(width)}
+            width={containerWidth}
             cols={{ lg: GRID_COLUMNS }}
             breakpoints={{
-                lg: getBreakpoint(),
+                lg: getBreakpoint(containerWidth),
             }}
             layouts={{ lg: dashboardItems }}
             compactType={GRID_COMPACT_TYPE}

src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap

@@ -20,11 +20,15 @@ exports[`EditDashboard renders dashboard 1`] = `
       class="container dashboard-scroll-container"
       data-test="inner-scroll-container"
     >
-      <div>
-        TitleBar
-      </div>
-      <div>
-        ItemGrid
+      <div
+        class="contentWrap"
+      >
+        <div>
+          TitleBar
+        </div>
+        <div>
+          ItemGrid
+        </div>
       </div>
     </div>
   </div>

src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.js.snap

@@ -15,11 +15,15 @@ exports[`NewDashboard renders dashboard 1`] = `
       class="container dashboard-scroll-container"
       data-test="inner-scroll-container"
     >
-      <div>
-        TitleBar
-      </div>
-      <div>
-        ItemGrid
+      <div
+        class="contentWrap"
+      >
+        <div>
+          TitleBar
+        </div>
+        <div>
+          ItemGrid
+        </div>
       </div>
     </div>
   </div>

src/pages/view/ItemGrid.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import React, { useState, useEffect } from 'react'
 import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 import { connect } from 'react-redux'
+import { useContainerWidth } from '../../components/DashboardContainer.js'
 import { Item } from '../../components/Item/Item.js'
 import NoContentMessage from '../../components/NoContentMessage.js'
 import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.js'
@@ -20,7 +21,6 @@ import {
     MARGIN_SM_PX,
     GRID_COLUMNS,
     getSmallLayout,
-    getGridWidth,
     getProportionalHeight,
 } from '../../modules/gridUtil.js'
 import { getBreakpoint, isSmallScreen } from '../../modules/smallScreen.js'
@@ -36,6 +36,7 @@ const EXPANDED_HEIGHT_SM = 15
 
 const ResponsiveItemGrid = ({ dashboardId, dashboardItems }) => {
     const { width } = useWindowDimensions()
+    const containerWidth = useContainerWidth()
     const [expandedItems, setExpandedItems] = useState({})
     const [displayItems, setDisplayItems] = useState(dashboardItems)
     const [layoutSm, setLayoutSm] = useState([])
@@ -134,10 +135,10 @@ const ResponsiveItemGrid = ({ dashboardId, dashboardItems }) => {
         <ResponsiveReactGridLayout
             className={classes.grid}
             rowHeight={GRID_ROW_HEIGHT_PX}
-            width={getGridWidth(width)}
+            width={containerWidth}
             cols={{ lg: GRID_COLUMNS, sm: SM_SCREEN_GRID_COLUMNS }}
             breakpoints={{
-                lg: getBreakpoint(),
+                lg: getBreakpoint(containerWidth),
                 sm: 0,
             }}
             layouts={{ lg: displayItems, sm: layoutSm }}

src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap

@@ -14,14 +14,15 @@ exports[`ViewDashboard renders dashboard 1`] = `
       class="container dashboard-scroll-container"
       data-test="inner-scroll-container"
     >
-      <div>
-        TitleBar
-      </div>
-      <div>
-        MockFilterBar
-      </div>
-      <div>
-        MockItemGrid
+      <div
+        class="contentWrap"
+      >
+        <div>
+          MockFilterBar
+        </div>
+        <div>
+          MockItemGrid
+        </div>
       </div>
     </div>
   </div>

src/pages/view/styles/ItemGrid.module.css

@@ -1,3 +1,3 @@
 .grid {
-    margin-block-start: var(--spacers-dp16);
+    margin-block-start: var(--spacers-dp8);
 }