@ni/nimble-components 16.1.3 → 16.1.5

package/dist/all-components-bundle.js

@@ -22234,7 +22234,7 @@
             let result = originalRow;
             for (const key of accessorKey.split('.')) {
               result = result[key];
-              if (process.env.NODE_ENV !== 'production' && result === undefined) {
+              if (result === undefined) {
                 throw new Error(`"${key}" in deeply nested key "${accessorKey}" returned undefined.`);
               }
             }
@@ -22245,10 +22245,9 @@
         }
       }
       if (!id) {
-        if (process.env.NODE_ENV !== 'production') {
+        {
           throw new Error(resolvedColumnDef.accessorFn ? `Columns require an id when using an accessorFn` : `Columns require an id when using a non-string header`);
         }
-        throw new Error();
       }
       let column = {
         id: `${String(id)}`,
@@ -22261,7 +22260,7 @@
           var _column$columns;
           return [column, ...((_column$columns = column.columns) == null ? void 0 : _column$columns.flatMap(d => d.getFlatColumns()))];
         }, {
-          key: process.env.NODE_ENV === 'production' && 'column.getFlatColumns',
+          key: "development" === 'production' ,
           debug: () => {
             var _table$options$debugA;
             return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugColumns;
@@ -22275,7 +22274,7 @@
           }
           return [column];
         }, {
-          key: process.env.NODE_ENV === 'production' && 'column.getLeafColumns',
+          key: "development" === 'production' ,
           debug: () => {
             var _table$options$debugA2;
             return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugColumns;
@@ -22341,7 +22340,7 @@
             const headerGroups = buildHeaderGroups(allColumns, [...leftColumns, ...centerColumns, ...rightColumns], table);
             return headerGroups;
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getHeaderGroups',
+            key: 'getHeaderGroups',
             debug: () => {
               var _table$options$debugA;
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugHeaders;
@@ -22351,7 +22350,7 @@
             leafColumns = leafColumns.filter(column => !(left != null && left.includes(column.id)) && !(right != null && right.includes(column.id)));
             return buildHeaderGroups(allColumns, leafColumns, table, 'center');
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getCenterHeaderGroups',
+            key: 'getCenterHeaderGroups',
             debug: () => {
               var _table$options$debugA2;
               return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugHeaders;
@@ -22362,7 +22361,7 @@
             const orderedLeafColumns = (_left$map$filter2 = left == null ? void 0 : left.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _left$map$filter2 : [];
             return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'left');
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getLeftHeaderGroups',
+            key: 'getLeftHeaderGroups',
             debug: () => {
               var _table$options$debugA3;
               return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugHeaders;
@@ -22373,7 +22372,7 @@
             const orderedLeafColumns = (_right$map$filter2 = right == null ? void 0 : right.map(columnId => leafColumns.find(d => d.id === columnId)).filter(Boolean)) != null ? _right$map$filter2 : [];
             return buildHeaderGroups(allColumns, orderedLeafColumns, table, 'right');
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getRightHeaderGroups',
+            key: 'getRightHeaderGroups',
             debug: () => {
               var _table$options$debugA4;
               return (_table$options$debugA4 = table.options.debugAll) != null ? _table$options$debugA4 : table.options.debugHeaders;
@@ -22384,7 +22383,7 @@
           getFooterGroups: memo(() => [table.getHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getFooterGroups',
+            key: 'getFooterGroups',
             debug: () => {
               var _table$options$debugA5;
               return (_table$options$debugA5 = table.options.debugAll) != null ? _table$options$debugA5 : table.options.debugHeaders;
@@ -22393,7 +22392,7 @@
           getLeftFooterGroups: memo(() => [table.getLeftHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getLeftFooterGroups',
+            key: 'getLeftFooterGroups',
             debug: () => {
               var _table$options$debugA6;
               return (_table$options$debugA6 = table.options.debugAll) != null ? _table$options$debugA6 : table.options.debugHeaders;
@@ -22402,7 +22401,7 @@
           getCenterFooterGroups: memo(() => [table.getCenterHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getCenterFooterGroups',
+            key: 'getCenterFooterGroups',
             debug: () => {
               var _table$options$debugA7;
               return (_table$options$debugA7 = table.options.debugAll) != null ? _table$options$debugA7 : table.options.debugHeaders;
@@ -22411,7 +22410,7 @@
           getRightFooterGroups: memo(() => [table.getRightHeaderGroups()], headerGroups => {
             return [...headerGroups].reverse();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getRightFooterGroups',
+            key: 'getRightFooterGroups',
             debug: () => {
               var _table$options$debugA8;
               return (_table$options$debugA8 = table.options.debugAll) != null ? _table$options$debugA8 : table.options.debugHeaders;
@@ -22424,7 +22423,7 @@
               return headerGroup.headers;
             }).flat();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getFlatHeaders',
+            key: 'getFlatHeaders',
             debug: () => {
               var _table$options$debugA9;
               return (_table$options$debugA9 = table.options.debugAll) != null ? _table$options$debugA9 : table.options.debugHeaders;
@@ -22435,7 +22434,7 @@
               return headerGroup.headers;
             }).flat();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getLeftFlatHeaders',
+            key: 'getLeftFlatHeaders',
             debug: () => {
               var _table$options$debugA10;
               return (_table$options$debugA10 = table.options.debugAll) != null ? _table$options$debugA10 : table.options.debugHeaders;
@@ -22446,7 +22445,7 @@
               return headerGroup.headers;
             }).flat();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getCenterFlatHeaders',
+            key: 'getCenterFlatHeaders',
             debug: () => {
               var _table$options$debugA11;
               return (_table$options$debugA11 = table.options.debugAll) != null ? _table$options$debugA11 : table.options.debugHeaders;
@@ -22457,7 +22456,7 @@
               return headerGroup.headers;
             }).flat();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getRightFlatHeaders',
+            key: 'getRightFlatHeaders',
             debug: () => {
               var _table$options$debugA12;
               return (_table$options$debugA12 = table.options.debugAll) != null ? _table$options$debugA12 : table.options.debugHeaders;
@@ -22471,7 +22470,7 @@
               return !((_header$subHeaders = header.subHeaders) != null && _header$subHeaders.length);
             });
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getCenterLeafHeaders',
+            key: 'getCenterLeafHeaders',
             debug: () => {
               var _table$options$debugA13;
               return (_table$options$debugA13 = table.options.debugAll) != null ? _table$options$debugA13 : table.options.debugHeaders;
@@ -22483,7 +22482,7 @@
               return !((_header$subHeaders2 = header.subHeaders) != null && _header$subHeaders2.length);
             });
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getLeftLeafHeaders',
+            key: 'getLeftLeafHeaders',
             debug: () => {
               var _table$options$debugA14;
               return (_table$options$debugA14 = table.options.debugAll) != null ? _table$options$debugA14 : table.options.debugHeaders;
@@ -22495,7 +22494,7 @@
               return !((_header$subHeaders3 = header.subHeaders) != null && _header$subHeaders3.length);
             });
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getRightLeafHeaders',
+            key: 'getRightLeafHeaders',
             debug: () => {
               var _table$options$debugA15;
               return (_table$options$debugA15 = table.options.debugAll) != null ? _table$options$debugA15 : table.options.debugHeaders;
@@ -22507,7 +22506,7 @@
               return header.getLeafHeaders();
             }).flat();
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getLeafHeaders',
+            key: 'getLeafHeaders',
             debug: () => {
               var _table$options$debugA16;
               return (_table$options$debugA16 = table.options.debugAll) != null ? _table$options$debugA16 : table.options.debugHeaders;
@@ -23611,7 +23610,7 @@
             }
             return orderColumns(orderedColumns, grouping, groupedColumnMode);
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getOrderColumnsFn'
+            key: 'getOrderColumnsFn'
             // debug: () => table.options.debugAll ?? table.options.debugTable,
           })
         };
@@ -23722,7 +23721,7 @@
             }
             return pageOptions;
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getPageOptions',
+            key: 'getPageOptions',
             debug: () => {
               var _table$options$debugA;
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
@@ -23842,7 +23841,7 @@
             const leftAndRight = [...(left != null ? left : []), ...(right != null ? right : [])];
             return allCells.filter(d => !leftAndRight.includes(d.column.id));
           }, {
-            key: process.env.NODE_ENV === 'production' && 'row.getCenterVisibleCells',
+            key: "development" === 'production' ,
             debug: () => {
               var _table$options$debugA;
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
@@ -23855,7 +23854,7 @@
             }));
             return cells;
           }, {
-            key: process.env.NODE_ENV === 'production' && 'row.getLeftVisibleCells',
+            key: "development" === 'production' ,
             debug: () => {
               var _table$options$debugA2;
               return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugRows;
@@ -23868,7 +23867,7 @@
             }));
             return cells;
           }, {
-            key: process.env.NODE_ENV === 'production' && 'row.getRightVisibleCells',
+            key: "development" === 'production' ,
             debug: () => {
               var _table$options$debugA3;
               return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugRows;
@@ -23895,7 +23894,7 @@
           getLeftLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.left], (allColumns, left) => {
             return (left != null ? left : []).map(columnId => allColumns.find(column => column.id === columnId)).filter(Boolean);
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getLeftLeafColumns',
+            key: 'getLeftLeafColumns',
             debug: () => {
               var _table$options$debugA4;
               return (_table$options$debugA4 = table.options.debugAll) != null ? _table$options$debugA4 : table.options.debugColumns;
@@ -23904,7 +23903,7 @@
           getRightLeafColumns: memo(() => [table.getAllLeafColumns(), table.getState().columnPinning.right], (allColumns, right) => {
             return (right != null ? right : []).map(columnId => allColumns.find(column => column.id === columnId)).filter(Boolean);
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getRightLeafColumns',
+            key: 'getRightLeafColumns',
             debug: () => {
               var _table$options$debugA5;
               return (_table$options$debugA5 = table.options.debugAll) != null ? _table$options$debugA5 : table.options.debugColumns;
@@ -23914,7 +23913,7 @@
             const leftAndRight = [...(left != null ? left : []), ...(right != null ? right : [])];
             return allColumns.filter(d => !leftAndRight.includes(d.id));
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getCenterLeafColumns',
+            key: 'getCenterLeafColumns',
             debug: () => {
               var _table$options$debugA6;
               return (_table$options$debugA6 = table.options.debugAll) != null ? _table$options$debugA6 : table.options.debugColumns;
@@ -24056,7 +24055,7 @@
             }
             return selectRowsFn(table, rowModel);
           }, {
-            key: process.env.NODE_ENV === 'development' && 'getSelectedRowModel',
+            key: 'getSelectedRowModel',
             debug: () => {
               var _table$options$debugA;
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
@@ -24072,7 +24071,7 @@
             }
             return selectRowsFn(table, rowModel);
           }, {
-            key: process.env.NODE_ENV === 'production' && 'getFilteredSelectedRowModel',
+            key: "development" === 'production' ,
             debug: () => {
               var _table$options$debugA2;
               return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugTable;
@@ -24088,7 +24087,7 @@
             }
             return selectRowsFn(table, rowModel);
           }, {
-            key: process.env.NODE_ENV === 'production' && 'getGroupedSelectedRowModel',
+            key: "development" === 'production' ,
             debug: () => {
               var _table$options$debugA3;
               return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugTable;
@@ -24663,14 +24662,14 @@
           _getAllVisibleCells: memo(() => [row.getAllCells(), table.getState().columnVisibility], cells => {
             return cells.filter(cell => cell.column.getIsVisible());
           }, {
-            key: process.env.NODE_ENV === 'production' && 'row._getAllVisibleCells',
+            key: "development" === 'production' ,
             debug: () => {
               var _table$options$debugA;
               return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
             }
           }),
           getVisibleCells: memo(() => [row.getLeftVisibleCells(), row.getCenterVisibleCells(), row.getRightVisibleCells()], (left, center, right) => [...left, ...center, ...right], {
-            key: process.env.NODE_ENV === 'development' && 'row.getVisibleCells',
+            key: 'row.getVisibleCells',
             debug: () => {
               var _table$options$debugA2;
               return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugRows;
@@ -24812,10 +24811,9 @@
         getRow: id => {
           const row = table.getRowModel().rowsById[id];
           if (!row) {
-            if (process.env.NODE_ENV !== 'production') {
+            {
               throw new Error(`getRow expected an ID, but got ${id}`);
             }
-            throw new Error();
           }
           return row;
         },
@@ -24848,7 +24846,7 @@
             var _table$options$debugA;
             return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugColumns;
           },
-          key: process.env.NODE_ENV === 'development' && 'getDefaultColumnDef'
+          key: 'getDefaultColumnDef'
         }),
         _getColumnDefs: () => table.options.columns,
         getAllColumns: memo(() => [table._getColumnDefs()], columnDefs => {
@@ -24865,7 +24863,7 @@
           };
           return recurseColumns(columnDefs);
         }, {
-          key: process.env.NODE_ENV === 'development' && 'getAllColumns',
+          key: 'getAllColumns',
           debug: () => {
             var _table$options$debugA2;
             return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugColumns;
@@ -24876,7 +24874,7 @@
             return column.getFlatColumns();
           });
         }, {
-          key: process.env.NODE_ENV === 'development' && 'getAllFlatColumns',
+          key: 'getAllFlatColumns',
           debug: () => {
             var _table$options$debugA3;
             return (_table$options$debugA3 = table.options.debugAll) != null ? _table$options$debugA3 : table.options.debugColumns;
@@ -24888,7 +24886,7 @@
             return acc;
           }, {});
         }, {
-          key: process.env.NODE_ENV === 'development' && 'getAllFlatColumnsById',
+          key: 'getAllFlatColumnsById',
           debug: () => {
             var _table$options$debugA4;
             return (_table$options$debugA4 = table.options.debugAll) != null ? _table$options$debugA4 : table.options.debugColumns;
@@ -24898,7 +24896,7 @@
           let leafColumns = allColumns.flatMap(column => column.getLeafColumns());
           return orderColumns(leafColumns);
         }, {
-          key: process.env.NODE_ENV === 'development' && 'getAllLeafColumns',
+          key: 'getAllLeafColumns',
           debug: () => {
             var _table$options$debugA5;
             return (_table$options$debugA5 = table.options.debugAll) != null ? _table$options$debugA5 : table.options.debugColumns;
@@ -24907,7 +24905,7 @@
         getColumn: columnId => {
           const column = table._getAllFlatColumnsById()[columnId];
           if (!column) {
-            if (process.env.NODE_ENV !== 'production') {
+            {
               console.warn(`[Table] Column with id ${columnId} does not exist.`);
             }
             throw new Error();
@@ -24941,7 +24939,7 @@
           getValue: cell.getValue,
           renderValue: cell.renderValue
         }), {
-          key: process.env.NODE_ENV === 'development' && 'cell.getContext',
+          key: 'cell.getContext',
           debug: () => table.options.debugAll
         })
       };
@@ -24996,7 +24994,7 @@
             return createCell(table, row, column, column.id);
           });
         }, {
-          key: process.env.NODE_ENV === 'development' && 'row.getAllCells',
+          key: 'row.getAllCells',
           debug: () => {
             var _table$options$debugA;
             return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugRows;
@@ -25008,7 +25006,7 @@
             return acc;
           }, {});
         }, {
-          key: process.env.NODE_ENV === 'production' && 'row.getAllCellsByColumnId',
+          key: "development" === 'production' ,
           debug: () => {
             var _table$options$debugA2;
             return (_table$options$debugA2 = table.options.debugAll) != null ? _table$options$debugA2 : table.options.debugRows;
@@ -25037,7 +25035,7 @@
           for (let i = 0; i < originalRows.length; i++) {
             // This could be an expensive check at scale, so we should move it somewhere else, but where?
             // if (!id) {
-            //   if (process.env.NODE_ENV !== 'production') {
+            //   if ("development" !== 'production') {
             //     throw new Error(`getRowId expected an ID, but got ${id}`)
             //   }
             // }
@@ -25068,7 +25066,7 @@
         rowModel.rows = accessRows(data);
         return rowModel;
       }, {
-        key: process.env.NODE_ENV === 'development' && 'getRowModel',
+        key: 'getRowModel',
         debug: () => {
           var _table$options$debugA;
           return (_table$options$debugA = table.options.debugAll) != null ? _table$options$debugA : table.options.debugTable;
@@ -26474,24 +26472,39 @@ Instead styling against the role which is more general and likely a better appro
     const template = html `
     <div class="wafer-map-container">
         <svg class="svg-root ${x => x.orientation}">
-            <g class="zoom-container">               
-                <svg class="circle-base" version="1.1" x="0px" y="0px" viewbox="1 .45 20 21">
-                    <path class="circle-drawing-path" d="m 21 12 a 10 10 330 1 1 0 -1.98 a 1 1 0 0 0 0 2"/>
+            <g class="zoom-container">
+                <svg
+                    class="circle-base"
+                    version="1.1"
+                    x="0px"
+                    y="0px"
+                    viewBox="1 .45 20 21"
+                >
+                    <path
+                        class="circle-drawing-path"
+                        d="m 21 12 a 10 10 330 1 1 0 -1.98 a 1 1 0 0 0 0 2"
+                    />
                 </svg>
             </g>
         </svg>
-        <div class="wafer-map-area" style="left: 0px; top: 0px">
-            <canvas width=500 height="500" ${ref('canvas')}>
+        <div class="wafer-map-area">
+            <canvas class="wafer-map-canvas" ${ref('canvas')}></canvas>
         </div>
     </div>
 `;
 
     const styles = css `
-    .wafer-map-container {
+    :host {
+        display: inline-block;
         width: 500px;
         height: 500px;
+    }
+
+    .wafer-map-container {
+        width: 100%;
+        padding-bottom: 100%;
         position: relative;
-        display: flex;
+        display: inline-block;
         justify-content: center;
         align-items: center;
     }
@@ -26499,6 +26512,7 @@ Instead styling against the role which is more general and likely a better appro
     .svg-root {
         width: 100%;
         height: 100%;
+        position: absolute;
     }
 
     .svg-root.top {
@@ -26520,13 +26534,14 @@ Instead styling against the role which is more general and likely a better appro
     .zoom-container {
         width: 100%;
         height: 100%;
+        position: absolute;
     }
 
     .circle-base {
         width: 100%;
         height: 100%;
         position: absolute;
-        fill: white;
+        fill: transparent;
     }
 
     .circle-drawing-path {
@@ -26538,6 +26553,16 @@ Instead styling against the role which is more general and likely a better appro
 
     .wafer-map-area {
         position: absolute;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .wafer-map-canvas {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
     }
 `;
 
@@ -29392,8 +29417,8 @@ Instead styling against the role which is more general and likely a better appro
                 this.context.fillText(die.text, die.x + dimensions.width / 2, die.y + dimensions.height / 2 + aproxTextHeight.width / 2);
             }
         }
-        clearCanvas() {
-            this.context.clearRect(0, 0, this.waferData.containerDimensions.width, this.waferData.containerDimensions.height);
+        clearCanvas(width, height) {
+            this.context.clearRect(0, 0, width, height);
         }
     }
 
@@ -29419,16 +29444,31 @@ Instead styling against the role which is more general and likely a better appro
         }
         connectedCallback() {
             super.connectedCallback();
+            this.resizeObserver = new ResizeObserver(entries => {
+                const entry = entries[0];
+                if (entry === undefined)
+                    return;
+                const { height, width } = entry.contentRect;
+                this.canvasSideLength = Math.min(height, width);
+            });
+            this.resizeObserver.observe(this);
             this.queueRender();
         }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.resizeObserver.unobserve(this);
+        }
         /**
          * @internal
          */
         render() {
             this.renderQueued = false;
-            this.dataManager = new DataManager(this.dies, this.quadrant, { width: 500, height: 500 }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
-            const renderer = new RenderingModule(this.dataManager, this.canvas);
-            renderer.drawWafer();
+            if (this.canvasSideLength === undefined || this.canvasSideLength === 0)
+                return;
+            this.renderer?.clearCanvas(this.canvasSideLength, this.canvasSideLength);
+            this.dataManager = new DataManager(this.dies, this.quadrant, { width: this.canvasSideLength, height: this.canvasSideLength }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
+            this.renderer = new RenderingModule(this.dataManager, this.canvas);
+            this.renderer.drawWafer();
         }
         quadrantChanged() {
             this.queueRender();
@@ -29457,6 +29497,14 @@ Instead styling against the role which is more general and likely a better appro
         colorScaleChanged() {
             this.queueRender();
         }
+        canvasSideLengthChanged() {
+            if (this.canvasSideLength !== undefined
+                && this.canvasSideLength !== 0) {
+                this.canvas.width = this.canvasSideLength;
+                this.canvas.height = this.canvasSideLength;
+            }
+            this.queueRender();
+        }
         queueRender() {
             if (!this.$fastController.isConnected) {
                 return;
@@ -29495,6 +29543,9 @@ Instead styling against the role which is more general and likely a better appro
             attribute: 'color-scale-mode'
         })
     ], WaferMap.prototype, "canvas", void 0);
+    __decorate$1([
+        observable
+    ], WaferMap.prototype, "canvasSideLength", void 0);
     __decorate$1([
         observable
     ], WaferMap.prototype, "colorScaleMode", void 0);