chore: fix sheet rendering without bounds (#1411)

* chore: support old sheets without bounds

* chore: add rendering test

* chore: sheet fixture fix

* chore: adjust columns

* chore: add baseline

apis/nucleus/src/components/Sheet.jsx

@@ -35,6 +35,18 @@ function getCellRenderer(cell, halo, initialSnOptions, initialSnPlugins, initial
   );
 }
 
+function getBounds(pos, columns, rows) {
+  if (pos.bounds) {
+    return pos.bounds;
+  }
+  return {
+    y: (pos.row / rows) * 100,
+    x: (pos.col / columns) * 100,
+    width: (pos.colspan / columns) * 100,
+    height: (pos.rowspan / rows) * 100,
+  };
+}
+
 function Sheet({ model, halo, initialSnOptions, initialSnPlugins, initialError, onMount }) {
   const { root } = halo;
   const [layout] = useLayout(model);
@@ -64,6 +76,7 @@ function Sheet({ model, halo, initialSnOptions, initialSnPlugins, initialError,
         });
 
         const lCells = layout.cells;
+        const { columns, rows } = layout;
         // TODO - should try reuse existing objects on subsequent renders
         // Non-id updates should only change the "css"
         const cs = await Promise.all(
@@ -75,7 +88,7 @@ function Sheet({ model, halo, initialSnOptions, initialSnPlugins, initialError,
 
             const cell = cells.find((ce) => ce.id === c.name);
             if (cell) {
-              cell.bounds = c.bounds;
+              cell.bounds = getBounds(c, columns, rows);
               delete cell.mountedPromise;
               return cell;
             }
@@ -83,7 +96,7 @@ function Sheet({ model, halo, initialSnOptions, initialSnPlugins, initialError,
             return {
               model: vs.model,
               id: c.name,
-              bounds: c.bounds,
+              bounds: getBounds(c, columns, rows),
               cellRef: React.createRef(),
               currentId: uid(),
               mounted,

test/rendering/sheet/sheet-data.js

@@ -30,6 +30,32 @@ window.getFuncs = function getFuncs() {
         ],
       };
     },
+    getSheetLayout2: () => {
+      return {
+        qInfo: {
+          qId: 'boundLessSheet',
+        },
+        columns: 10,
+        rows: 10,
+        visualization: 'sheet',
+        cells: [
+          {
+            name: 'bar',
+            col: 0,
+            colspan: 4,
+            row: 0,
+            rowspan: 5,
+          },
+          {
+            name: 'pie',
+            col: 5,
+            colspan: 4,
+            row: 5,
+            rowspan: 5,
+          },
+        ],
+      };
+    },
     getBarLayout: () => {
       return {
         qInfo: {

test/rendering/sheet/sheet.js

@@ -2,7 +2,7 @@
 /* eslint no-underscore-dangle: 0 */
 (() => {
   async function getMocks(EnigmaMocker) {
-    const { getSheetLayout, getBarLayout, getPieLayout } = window.getFuncs();
+    const { getSheetLayout, getSheetLayout2, getBarLayout, getPieLayout } = window.getFuncs();
 
     const obj = [
       {
@@ -10,6 +10,11 @@
         type: 'sheet',
         getLayout: () => getSheetLayout(),
       },
+      {
+        id: `boundLessSheet`,
+        type: 'sheet',
+        getLayout: () => getSheetLayout2(),
+      },
       {
         id: `bar`,
         type: 'barchart',
@@ -31,12 +36,14 @@
   }
 
   const init = async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const target = urlParams.get('target');
     const element = document.querySelector('#object');
     const { app } = await getMocks(window.stardust.EnigmaMocker);
 
     const nebbie = configured(app);
 
-    const inst = await nebbie.render({ id: 'sheet', element });
+    const inst = await nebbie.render({ id: target, element });
     return () => {
       inst?.unmount(element);
     };

test/rendering/sheet/sheet.spec.js

@@ -24,7 +24,15 @@ test.describe('sheet mashup rendering test', () => {
   test('sheet basic test', async () => {
     const FILE_NAME = 'sheet_basic.png';
 
-    await page.goto(`${url}/sheet/sheet.html`);
+    await page.goto(`${url}/sheet/sheet.html?target=sheet`);
+    const selector = await page.waitForSelector(object, { visible: true });
+    const image = await selector.screenshot();
+    return expect(image).toMatchSnapshot(FILE_NAME);
+  });
+  test('sheet bound Less test', async () => {
+    const FILE_NAME = 'sheet_bound_less.png';
+
+    await page.goto(`${url}/sheet/sheet.html?target=boundLessSheet`);
     const selector = await page.waitForSelector(object, { visible: true });
     const image = await selector.screenshot();
     return expect(image).toMatchSnapshot(FILE_NAME);