@ni/spright-components 1.0.7 → 1.0.9

package/dist/all-components-bundle.js

@@ -7829,7 +7829,7 @@
    *
    * @public
    */
-  let Listbox$1 = class Listbox extends FoundationElement {
+  class Listbox extends FoundationElement {
       constructor() {
           super(...arguments);
           /**
@@ -8292,35 +8292,35 @@
               this.typeaheadExpired = false;
           }
       }
-  };
+  }
   /**
    * A static filter to include only selectable options.
    *
    * @param n - element to filter
    * @public
    */
-  Listbox$1.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
+  Listbox.slottedOptionFilter = (n) => isListboxOption(n) && !n.hidden;
   /**
    * Typeahead timeout in milliseconds.
    *
    * @internal
    */
-  Listbox$1.TYPE_AHEAD_TIMEOUT_MS = 1000;
+  Listbox.TYPE_AHEAD_TIMEOUT_MS = 1000;
   __decorate([
       attr({ mode: "boolean" })
-  ], Listbox$1.prototype, "disabled", void 0);
+  ], Listbox.prototype, "disabled", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "selectedIndex", void 0);
+  ], Listbox.prototype, "selectedIndex", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "selectedOptions", void 0);
+  ], Listbox.prototype, "selectedOptions", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "slottedOptions", void 0);
+  ], Listbox.prototype, "slottedOptions", void 0);
   __decorate([
       observable
-  ], Listbox$1.prototype, "typeaheadBuffer", void 0);
+  ], Listbox.prototype, "typeaheadBuffer", void 0);
   /**
    * Includes ARIA states and properties relating to the ARIA listbox role
    *
@@ -8341,7 +8341,7 @@
       observable
   ], DelegatesARIAListbox.prototype, "ariaMultiSelectable", void 0);
   applyMixins(DelegatesARIAListbox, ARIAGlobalStatesAndProperties);
-  applyMixins(Listbox$1, DelegatesARIAListbox);
+  applyMixins(Listbox, DelegatesARIAListbox);
 
   /**
    * Positioning directions for the listbox when a select is open.
@@ -8352,7 +8352,7 @@
       below: "below",
   };
 
-  class _Combobox extends Listbox$1 {
+  class _Combobox extends Listbox {
   }
   /**
    * A form-associated base class for the {@link (Combobox:class)} component.
@@ -10261,7 +10261,7 @@
    *
    * @public
    */
-  class ListboxElement extends Listbox$1 {
+  class ListboxElement extends Listbox {
       constructor() {
           super(...arguments);
           /**
@@ -10700,32 +10700,6 @@
       attr({ converter: nullableNumberConverter })
   ], ListboxElement.prototype, "size", void 0);
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component.
-   * @public
-   */
-  const listboxTemplate = (context, definition) => html `
-    <template
-        aria-activedescendant="${x => x.ariaActiveDescendant}"
-        aria-multiselectable="${x => x.ariaMultiSelectable}"
-        class="listbox"
-        role="listbox"
-        tabindex="${x => (!x.disabled ? "0" : null)}"
-        @click="${(x, c) => x.clickHandler(c.event)}"
-        @focusin="${(x, c) => x.focusinHandler(c.event)}"
-        @keydown="${(x, c) => x.keydownHandler(c.event)}"
-        @mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-    >
-        <slot
-            ${slotted({
-    filter: ListboxElement.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions",
-})}
-        ></slot>
-    </template>
-`;
-
   /**
    * Menu items roles.
    * @public
@@ -12906,7 +12880,7 @@
        */
       setDefaultSelectedOption() {
           var _a;
-          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox$1.slottedOptionFilter);
+          const options = (_a = this.options) !== null && _a !== void 0 ? _a : Array.from(this.children).filter(Listbox.slottedOptionFilter);
           const selectedIndex = options === null || options === void 0 ? void 0 : options.findIndex(el => el.hasAttribute("selected") || el.selected || el.value === this.value);
           if (selectedIndex !== -1) {
               this.selectedIndex = selectedIndex;
@@ -16304,7 +16278,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Tue, 28 May 2024 20:00:12 GMT
+   * Generated on Mon, 03 Jun 2024 22:13:03 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16737,7 +16711,7 @@
 
   const template$I = html `<slot></slot>`;
 
-  const styles$10 = css `
+  const styles$$ = css `
     ${display$1('contents')}
 `;
 
@@ -16852,7 +16826,7 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$10,
+      styles: styles$$,
       template: template$I
   });
   DesignSystem.getOrCreate()
@@ -17038,7 +17012,7 @@
       }
   }
 
-  const styles$$ = css `
+  const styles$_ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -17222,7 +17196,7 @@
       baseName: 'anchor',
       baseClass: Anchor$1,
       template: template$H,
-      styles: styles$$,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17334,7 +17308,7 @@
     padding: 0;
 `;
 
-  const styles$_ = css `
+  const styles$Z = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17612,8 +17586,8 @@
             }
         `));
 
-  const styles$Z = css `
-    ${styles$_}
+  const styles$Y = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17716,7 +17690,7 @@
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
       template: template$G,
-      styles: styles$Z,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17724,7 +17698,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$Y = css `
+  const styles$X = css `
     ${display$1('grid')}
 
     :host {
@@ -17910,7 +17884,7 @@
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
       template: template$F,
-      styles: styles$Y,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17920,7 +17894,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$X = css `
+  const styles$W = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -18090,14 +18064,14 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$E,
-      styles: styles$X,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$W = css `
+  const styles$V = css `
     ${display$1('grid')}
 
     :host {
@@ -18326,7 +18300,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$D,
-      styles: styles$W,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18342,7 +18316,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$V = css `
+  const styles$U = css `
     ${display$1('block')}
 
     :host {
@@ -18586,7 +18560,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$C,
-      styles: styles$V,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18602,7 +18576,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$U = css `
+  const styles$T = css `
     ${display$1('block')}
 
     :host {
@@ -18633,7 +18607,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$U
+      styles: styles$T
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18713,7 +18687,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$T = css `
+  const styles$S = css `
     ${display$1('flex')}
 
     :host {
@@ -18828,8 +18802,8 @@
             }
         `));
 
-  const styles$S = css `
-    ${styles$_}
+  const styles$R = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -18925,7 +18899,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: template$B,
-      styles: styles$S,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19682,7 +19656,7 @@
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$R = css `
+  const styles$Q = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -19736,7 +19710,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$A,
-          styles: styles$R
+          styles: styles$Q
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19968,11 +19942,11 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$z,
-      styles: styles$T
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$Q = css `
+  const styles$P = css `
     ${display$1('inline-block')}
 
     :host {
@@ -20013,11 +19987,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$Q
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$P = css `
+  const styles$O = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -20095,14 +20069,14 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$P,
+      styles: styles$O,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$O = css `
+  const styles$N = css `
     ${display$1('flex')}
 
     :host {
@@ -20142,11 +20116,11 @@
       baseName: 'card',
       baseClass: Card$1,
       template: template$y,
-      styles: styles$O
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$N = css `
+  const styles$M = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -20305,14 +20279,14 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$N,
+      styles: styles$M,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$M = css `
+  const styles$L = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -20471,15 +20445,15 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: template$x,
-      styles: styles$M,
+      styles: styles$L,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$L = css `
-    ${styles$_}
+  const styles$K = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20625,7 +20599,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$w,
-      styles: styles$L,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20662,7 +20636,7 @@
       block: 'block'
   };
 
-  const styles$K = css `
+  const styles$J = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -20882,7 +20856,7 @@
             }
         `));
 
-  const styles$J = css `
+  const styles$I = css `
     .error-icon {
         display: none;
     }
@@ -20929,9 +20903,9 @@
       standard: 'standard'
   };
 
-  const styles$I = css `
-    ${styles$K}
+  const styles$H = css `
     ${styles$J}
+    ${styles$I}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21130,7 +21104,7 @@
             >
                 <slot
                     ${slotted({
-    filter: (n) => n instanceof HTMLElement && Listbox$1.slottedOptionFilter(n),
+    filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
     flatten: true,
     property: 'slottedOptions',
 })}
@@ -21773,7 +21747,7 @@
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
       template: template$v,
-      styles: styles$I,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21818,7 +21792,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$H = css `
+  const styles$G = css `
     ${display$1('grid')}
 
     dialog {
@@ -22073,12 +22047,12 @@
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$u,
-      styles: styles$H,
+      styles: styles$G,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$G = css `
+  const styles$F = css `
     ${display$1('block')}
 
     :host {
@@ -22375,7 +22349,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$t,
-      styles: styles$G
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24605,7 +24579,7 @@
       }
   }
 
-  const styles$F = css `
+  const styles$E = css `
     ${display$1('none')}
 `;
 
@@ -24654,7 +24628,7 @@
   ], LabelProviderCore.prototype, "filterNoResults", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$F
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -24821,13 +24795,13 @@
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$F
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$E = css `
+  const styles$D = css `
     ${display$1('flex')}
 
     :host {
@@ -25000,7 +24974,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: template$s,
-      styles: styles$E
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
@@ -25016,7 +24990,7 @@
 
   const template$r = html `<template slot="mapping"></template>`;
 
-  const styles$D = css `
+  const styles$C = css `
     ${display$1('none')}
 `;
 
@@ -25033,7 +25007,7 @@
   const emptyMapping = MappingEmpty.compose({
       baseName: 'mapping-empty',
       template: template$r,
-      styles: styles$D
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(emptyMapping());
 
@@ -25104,7 +25078,7 @@
   const iconMapping = MappingIcon.compose({
       baseName: 'mapping-icon',
       template: template$r,
-      styles: styles$D
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(iconMapping());
 
@@ -25128,7 +25102,7 @@
   const spinnerMapping = MappingSpinner.compose({
       baseName: 'mapping-spinner',
       template: template$r,
-      styles: styles$D
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(spinnerMapping());
 
@@ -25145,11 +25119,11 @@
   const textMapping = MappingText.compose({
       baseName: 'mapping-text',
       template: template$r,
-      styles: styles$D
+      styles: styles$C
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
 
-  const styles$C = css `
+  const styles$B = css `
     ${display$1('grid')}
 
     :host {
@@ -25221,7 +25195,7 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$C
+      styles: styles$B
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
@@ -25238,7 +25212,7 @@
       auto: 'auto'
   };
 
-  const styles$B = css `
+  const styles$A = css `
     ${display$1('inline-block')}
 
     :host {
@@ -25508,7 +25482,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$q,
-      styles: styles$B,
+      styles: styles$A,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -25516,7 +25490,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = 'nimble-menu-button';
 
-  const styles$A = css `
+  const styles$z = css `
     ${display$1('grid')}
 
     :host {
@@ -25614,7 +25588,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$A,
+      styles: styles$z,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -25628,9 +25602,9 @@
       block: 'block'
   };
 
-  const styles$z = css `
+  const styles$y = css `
     ${display$1('inline-block')}
-    ${styles$J}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -25844,7 +25818,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$z,
+      styles: styles$y,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -25887,7 +25861,7 @@
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-  const styles$y = css `
+  const styles$x = css `
     ${display$1('inline-flex')}
 
     :host {
@@ -25988,12 +25962,12 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$y,
+      styles: styles$x,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-  const styles$x = css `
+  const styles$w = css `
     ${display$1('inline-block')}
 
     .positioning-region {
@@ -26028,7 +26002,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$x,
+      styles: styles$w,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43693,7 +43667,7 @@ img.ProseMirror-separator {
       },
   });
 
-  const styles$w = css `
+  const styles$v = css `
     ${display$1('inline')}
 
     .positioning-region {
@@ -43730,7 +43704,7 @@ img.ProseMirror-separator {
       baseName: 'toolbar',
       baseClass: Toolbar$1,
       template: toolbarTemplate,
-      styles: styles$w,
+      styles: styles$v,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -43762,8 +43736,8 @@ img.ProseMirror-separator {
       cssCustomPropertyName: null
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
-  const styles$v = css `
-    ${styles$K}
+  const styles$u = css `
+    ${styles$J}
 
     :host {
         height: auto;
@@ -43780,42 +43754,6 @@ img.ProseMirror-separator {
     }
 `;
 
-  const styles$u = css `
-    ${display$1('inline-flex')}
-
-    :host {
-        background: ${applicationBackgroundColor};
-        border: ${borderWidth} solid ${popupBorderColor};
-        flex-direction: column;
-        margin: 0;
-        min-width: ${menuMinWidth};
-        box-shadow: ${elevation2BoxShadow};
-        color: ${bodyFontColor};
-        font: ${bodyFont};
-    }
-
-    :host(:focus) {
-        outline: 0px;
-    }
-
-    slot {
-        padding: ${smallPadding};
-        display: block;
-    }
-`;
-
-  /**
-   * A nimble-styled HTML list box
-   */
-  class Listbox extends ListboxElement {
-  }
-  const nimbleListbox = Listbox.compose({
-      baseName: 'listbox',
-      template: listboxTemplate,
-      styles: styles$u
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
-
   // prettier-ignore
   const template$p = html `
     <template>
@@ -43838,7 +43776,7 @@ img.ProseMirror-separator {
                 ?disabled="${x => x.disabled}"
             >
                 <slot
-                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                    ${slotted({ filter: (n) => n instanceof HTMLElement && ListboxElement.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
                 >
                 </slot>
             </div>
@@ -44079,7 +44017,7 @@ img.ProseMirror-separator {
   const nimbleRichTextMentionListbox = RichTextMentionListbox.compose({
       baseName: 'rich-text-mention-listbox',
       template: template$p,
-      styles: styles$v
+      styles: styles$u
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -44191,7 +44129,7 @@ img.ProseMirror-separator {
 
   const styles$t = css `
     ${display$1('inline-flex')}
-    ${styles$J}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -52974,9 +52912,9 @@ img.ProseMirror-separator {
           strong: {
               parseDOM: [
                   { tag: "strong" },
-                  { tag: "b", getAttrs: (node) => node.style.fontWeight != "normal" && null },
+                  { tag: "b", getAttrs: node => node.style.fontWeight != "normal" && null },
                   { style: "font-weight=400", clearMark: m => m.type.name == "strong" },
-                  { style: "font-weight", getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null }
+                  { style: "font-weight", getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null }
               ],
               toDOM() { return ["strong"]; }
           },
@@ -53230,6 +53168,7 @@ img.ProseMirror-separator {
       code_inline: { mark: "code", noCloseToken: true }
   });
 
+  const blankMark = { open: "", close: "", mixable: true };
   /**
   A specification for serializing a ProseMirror document as
   Markdown/CommonMark text.
@@ -53437,6 +53376,18 @@ img.ProseMirror-separator {
           }
       }
       /**
+      @internal
+      */
+      getMark(name) {
+          let info = this.marks[name];
+          if (!info) {
+              if (this.options.strict !== false)
+                  throw new Error(`Mark type \`${name}\` not supported by Markdown renderer`);
+              info = blankMark;
+          }
+          return info;
+      }
+      /**
       Render a block, prefixing each line with `delim`, and the first
       line in `firstDelim`. `node` should be the node that is closed at
       the end of the block, and `f` is a function that renders the
@@ -53501,9 +53452,22 @@ img.ProseMirror-separator {
       Render the given node as a block.
       */
       render(node, parent, index) {
-          if (!this.nodes[node.type.name])
-              throw new Error("Token type `" + node.type.name + "` not supported by Markdown renderer");
-          this.nodes[node.type.name](this, node, parent, index);
+          if (this.nodes[node.type.name]) {
+              this.nodes[node.type.name](this, node, parent, index);
+          }
+          else {
+              if (this.options.strict !== false) {
+                  throw new Error("Token type `" + node.type.name + "` not supported by Markdown renderer");
+              }
+              else if (!node.type.isLeaf) {
+                  if (node.type.inlineContent)
+                      this.renderInline(node);
+                  else
+                      this.renderContent(node);
+                  if (node.isBlock)
+                      this.closeBlock(node);
+              }
+          }
       }
       /**
       Render the contents of `parent` as block nodes.
@@ -53534,7 +53498,7 @@ img.ProseMirror-separator {
               // If whitespace has to be expelled from the node, adjust
               // leading and trailing accordingly.
               if (node && node.isText && marks.some(mark => {
-                  let info = this.marks[mark.type.name];
+                  let info = this.getMark(mark.type.name);
                   return info && info.expelEnclosingWhitespace && !mark.isInSet(active);
               })) {
                   let [_, lead, rest] = /^(\s*)(.*)$/m.exec(node.text);
@@ -53546,7 +53510,7 @@ img.ProseMirror-separator {
                   }
               }
               if (node && node.isText && marks.some(mark => {
-                  let info = this.marks[mark.type.name];
+                  let info = this.getMark(mark.type.name);
                   return info && info.expelEnclosingWhitespace &&
                       (index == parent.childCount - 1 || !mark.isInSet(parent.child(index + 1).marks));
               })) {
@@ -53559,7 +53523,7 @@ img.ProseMirror-separator {
                   }
               }
               let inner = marks.length ? marks[marks.length - 1] : null;
-              let noEsc = inner && this.marks[inner.type.name].escape === false;
+              let noEsc = inner && this.getMark(inner.type.name).escape === false;
               let len = marks.length - (noEsc ? 1 : 0);
               // Try to reorder 'mixable' marks, such as em and strong, which
               // in Markdown may be opened and closed in different order, so
@@ -53567,11 +53531,11 @@ img.ProseMirror-separator {
               // active.
               outer: for (let i = 0; i < len; i++) {
                   let mark = marks[i];
-                  if (!this.marks[mark.type.name].mixable)
+                  if (!this.getMark(mark.type.name).mixable)
                       break;
                   for (let j = 0; j < active.length; j++) {
                       let other = active[j];
-                      if (!this.marks[other.type.name].mixable)
+                      if (!this.getMark(other.type.name).mixable)
                           break;
                       if (mark.eq(other)) {
                           if (i > j)
@@ -53677,7 +53641,7 @@ img.ProseMirror-separator {
       Get the markdown string for a given opening or closing mark.
       */
       markString(mark, open, parent, index) {
-          let info = this.marks[mark.type.name];
+          let info = this.getMark(mark.type.name);
           let value = open ? info.open : info.close;
           return typeof value == "string" ? value : value(this, mark, parent, index);
       }
@@ -59068,8 +59032,8 @@ img.ProseMirror-separator {
       .register(nimbleRichTextViewer());
 
   const styles$r = css `
-    ${styles$K}
     ${styles$J}
+    ${styles$I}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -70772,7 +70736,7 @@ img.ProseMirror-separator {
 
   const styles$7 = css `
     ${display$1('inline-flex')}
-    ${styles$J}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -71118,7 +71082,7 @@ img.ProseMirror-separator {
 
   const styles$6 = css `
     ${display$1('inline-block')}
-    ${styles$J}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -76786,7 +76750,7 @@ img.ProseMirror-separator {
   /**
    * Prerendering prepares render-ready dies data to be used by the rendering module
    */
-  let Prerendering$1 = class Prerendering {
+  class Prerendering {
       get labelsFontSize() {
           return this._labelsFontSize;
       }
@@ -76893,12 +76857,12 @@ img.ProseMirror-separator {
           rgbColor = new ColorRGBA64(rgbColor.r, rgbColor.g, rgbColor.b, this.calculateOpacity(dieTags, highlightedTags));
           return rgbColor.toStringWebRGBA();
       }
-  };
+  }
 
   /**
    * Data Manager uses Computations and Prerendering modules in order and exposes the results
    */
-  let DataManager$1 = class DataManager {
+  class DataManager {
       get containerDimensions() {
           return this.computations.containerDimensions;
       }
@@ -76935,7 +76899,7 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
           this.computations = new Computations$1(wafermap);
-          this.prerendering = new Prerendering$1(wafermap);
+          this.prerendering = new Prerendering(wafermap);
       }
       updateContainerDimensions() {
           this.computations.updateContainerDimensions();
@@ -76959,258 +76923,6 @@ img.ProseMirror-separator {
       updateDataMap() {
           this.dataMap = new Map(this.wafermap.dies.map(die => [`${die.x}_${die.y}`, die]));
       }
-  };
-
-  /**
-   * Computations calculates and stores different measures which are used in the Wafermap
-   */
-  class Computations {
-      get containerDimensions() {
-          return this._containerDimensions;
-      }
-      get dieDimensions() {
-          return this._dieDimensions;
-      }
-      get margin() {
-          return this._margin;
-      }
-      get horizontalScale() {
-          return this._horizontalScale;
-      }
-      get verticalScale() {
-          return this._verticalScale;
-      }
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-          this.defaultPadding = 0;
-          this.baseMarginPercentage = 0.04;
-      }
-      update() {
-          const canvasDimensions = {
-              width: this.wafermap.canvasWidth,
-              height: this.wafermap.canvasHeight
-          };
-          const canvasDiameter = Math.min(canvasDimensions.width, canvasDimensions.height);
-          const canvasMargin = {
-              top: (canvasDimensions.height - canvasDiameter) / 2,
-              right: (canvasDimensions.width - canvasDiameter) / 2,
-              bottom: (canvasDimensions.height - canvasDiameter) / 2,
-              left: (canvasDimensions.width - canvasDiameter) / 2
-          };
-          const baseMargin = {
-              top: canvasDiameter * this.baseMarginPercentage,
-              right: canvasDiameter * this.baseMarginPercentage,
-              bottom: canvasDiameter * this.baseMarginPercentage,
-              left: canvasDiameter * this.baseMarginPercentage
-          };
-          this._margin = this.calculateMarginAddition(baseMargin, canvasMargin);
-          this._containerDimensions = this.calculateContainerDimensions(canvasDimensions, this._margin);
-          const containerDiameter = Math.min(this._containerDimensions.width, this._containerDimensions.height);
-          const gridDimensions = this.gridDimensionsValidAndDefined()
-              ? this.calculateGridDimensionsFromBoundingBox()
-              : this.calculateGridDimensionsFromDies();
-          // this scale is used for positioning the dies on the canvas
-          const originLocation = this.wafermap.originLocation;
-          this._horizontalScale = this.createHorizontalScale(originLocation, gridDimensions, containerDiameter);
-          // this scale is used for positioning the dies on the canvas
-          this._verticalScale = this.createVerticalScale(originLocation, gridDimensions, containerDiameter);
-          this._dieDimensions = {
-              width: Math.abs(this._horizontalScale(0) - this._horizontalScale(1)),
-              height: Math.abs(this._verticalScale(0) - this._verticalScale(1))
-          };
-      }
-      gridDimensionsValidAndDefined() {
-          return (!this.wafermap.validity.invalidGridDimensions
-              && typeof this.wafermap.gridMinX === 'number'
-              && typeof this.wafermap.gridMinY === 'number'
-              && typeof this.wafermap.gridMaxX === 'number'
-              && typeof this.wafermap.gridMinX === 'number');
-      }
-      calculateGridDimensionsFromBoundingBox() {
-          const gridDimensions = { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
-          if (typeof this.wafermap.gridMaxY === 'number'
-              && typeof this.wafermap.gridMinY === 'number'
-              && typeof this.wafermap.gridMaxX === 'number'
-              && typeof this.wafermap.gridMinX === 'number') {
-              gridDimensions.origin.x = this.wafermap.gridMinX;
-              gridDimensions.origin.y = this.wafermap.gridMinY;
-              gridDimensions.rows = this.wafermap.gridMaxY - this.wafermap.gridMinY + 1;
-              gridDimensions.cols = this.wafermap.gridMaxX - this.wafermap.gridMinX + 1;
-          }
-          return gridDimensions;
-      }
-      calculateGridDimensionsFromDies() {
-          if (this.wafermap.diesTable === undefined) {
-              return { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
-          }
-          const colIndex = this.wafermap.diesTable
-              .getChild('colIndex')
-              .toArray();
-          const rowIndex = this.wafermap.diesTable
-              .getChild('rowIndex')
-              .toArray();
-          const minPoint = { x: colIndex[0], y: rowIndex[0] };
-          const maxPoint = { x: colIndex[0], y: rowIndex[0] };
-          // will replace iterating with arquero after fixing issues: https://github.com/uwdata/arquero/pull/346
-          for (let i = 0; i < colIndex.length; i++) {
-              if (colIndex[i] < minPoint.x) {
-                  minPoint.x = colIndex[i];
-              }
-              if (colIndex[i] > maxPoint.x) {
-                  maxPoint.x = colIndex[i];
-              }
-              if (rowIndex[i] < minPoint.y) {
-                  minPoint.y = rowIndex[i];
-              }
-              if (rowIndex[i] > maxPoint.y) {
-                  maxPoint.y = rowIndex[i];
-              }
-          }
-          return {
-              origin: minPoint,
-              rows: maxPoint.y - minPoint.y + 1,
-              cols: maxPoint.x - minPoint.x + 1
-          };
-      }
-      calculateContainerDimensions(canvasDimensions, margin) {
-          return {
-              width: canvasDimensions.width - margin.left - margin.right,
-              height: canvasDimensions.height - margin.top - margin.bottom
-          };
-      }
-      createHorizontalScale(originLocation, grid, containerWidth) {
-          const scale = linear();
-          if (originLocation === WaferMapOriginLocation.bottomLeft
-              || originLocation === WaferMapOriginLocation.topLeft) {
-              return scale
-                  .domain([grid.origin.x, grid.origin.x + grid.cols])
-                  .range([0, containerWidth]);
-          }
-          return scale
-              .domain([grid.origin.x - 1, grid.origin.x + grid.cols - 1])
-              .range([containerWidth, 0]);
-      }
-      createVerticalScale(originLocation, grid, containerHeight) {
-          const scale = linear();
-          // html canvas has top-left origin https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#the_grid
-          // we need to flip the vertical scale
-          if (originLocation === WaferMapOriginLocation.bottomLeft
-              || originLocation === WaferMapOriginLocation.bottomRight) {
-              return scale
-                  .domain([grid.origin.y - 1, grid.origin.y + grid.rows - 1])
-                  .range([containerHeight, 0]);
-          }
-          return scale
-              .domain([grid.origin.y, grid.origin.y + grid.rows])
-              .range([0, containerHeight]);
-      }
-      calculateMarginAddition(baseMargin, addedMargin) {
-          return {
-              top: baseMargin.top + addedMargin.top,
-              right: baseMargin.right + addedMargin.right,
-              bottom: baseMargin.bottom + addedMargin.bottom,
-              left: baseMargin.left + addedMargin.left
-          };
-      }
-  }
-
-  /**
-   * Prerendering prepares render-ready dies data to be used by the rendering module
-   */
-  class Prerendering {
-      get labelsFontSize() {
-          return this._labelsFontSize;
-      }
-      get colorScale() {
-          return this._colorScale;
-      }
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-          this.fontSizeFactor = 0.8;
-          this.colorScaleResolution = 10;
-      }
-      update() {
-          this._labelsFontSize = this.calculateLabelsFontSize(this.wafermap.experimentalDataManager.dieDimensions, this.wafermap.maxCharacters);
-          this._colorScale = this.calculateColorScale();
-      }
-      calculateColorScale() {
-          if (this.wafermap.colorScaleMode === WaferMapColorScaleMode.linear) {
-              const values = this.wafermap.colorScale.values.map(item => +item);
-              const d3ColorScale = linear()
-                  .domain(values)
-                  .range(this.wafermap.colorScale.colors);
-              let min = values[0];
-              let max = values[0];
-              values.forEach(value => {
-                  if (value < min) {
-                      min = value;
-                  }
-                  if (value > max) {
-                      max = value;
-                  }
-              });
-              // the linear color scale will not be infinite but will be limited by the color scale resolution
-              const valueSamples = ticks(min, max, values.length * this.colorScaleResolution);
-              return valueSamples.map(value => {
-                  return {
-                      color: d3ColorScale(value),
-                      value
-                  };
-              });
-          }
-          // ordinal color categories have to be sorted by value
-          return this.wafermap.colorScale.colors
-              .map((color, index) => {
-              return {
-                  color,
-                  value: +this.wafermap.colorScale.values[index]
-              };
-          })
-              .sort((a, b) => a.value - b.value);
-      }
-      calculateLabelsFontSize(dieDimensions, maxCharacters) {
-          return Math.min(dieDimensions.height, (dieDimensions.width / (Math.max(2, maxCharacters) * 0.5))
-              * this.fontSizeFactor);
-      }
-  }
-
-  /**
-   * Data Manager uses Computations and Prerendering modules in order and exposes the results
-   */
-  class DataManager {
-      get containerDimensions() {
-          return this.computations.containerDimensions;
-      }
-      get dieDimensions() {
-          return this.computations.dieDimensions;
-      }
-      get margin() {
-          return this.computations.margin;
-      }
-      get horizontalScale() {
-          return this.computations.horizontalScale;
-      }
-      get verticalScale() {
-          return this.computations.verticalScale;
-      }
-      get labelsFontSize() {
-          return this.prerendering.labelsFontSize;
-      }
-      get colorScale() {
-          return this.prerendering.colorScale;
-      }
-      constructor(wafermap) {
-          this.wafermap = wafermap;
-          this.computations = new Computations(wafermap);
-          this.prerendering = new Prerendering(wafermap);
-      }
-      updateComputations() {
-          this.computations.update();
-          this.prerendering.update();
-      }
-      updatePrerendering() {
-          this.prerendering.update();
-      }
   }
 
   /**
@@ -77369,8 +77081,7 @@ img.ProseMirror-separator {
           this.updateQueued = false;
       }
       get requiresEventsUpdate() {
-          return (this.isTracked('highlightedTags')
-              || this.isTracked('canvasWidth')
+          return (this.isTracked('canvasWidth')
               || this.isTracked('canvasHeight')
               || this.isTracked('originLocation')
               || this.isTracked('gridMinX')
@@ -77379,15 +77090,35 @@ img.ProseMirror-separator {
               || this.isTracked('gridMaxY')
               || this.isTracked('dies')
               || this.isTracked('maxCharacters')
+              || this.isTracked('highlightedTags')
               || this.isTracked('colorScale')
               || this.isTracked('colorScaleMode')
               || this.isTracked('dieLabelsHidden')
               || this.isTracked('dieLabelsSuffix')
               || this.isTracked('transform'));
       }
+      get requiresWorkerWaferSetup() {
+          return (this.isTracked('canvasWidth')
+              || this.isTracked('canvasHeight')
+              || this.isTracked('originLocation')
+              || this.isTracked('gridMinX')
+              || this.isTracked('gridMaxX')
+              || this.isTracked('gridMinY')
+              || this.isTracked('gridMaxY')
+              || this.isTracked('dies')
+              || this.isTracked('maxCharacters')
+              || this.isTracked('highlightedTags')
+              || this.isTracked('colorScale')
+              || this.isTracked('colorScaleMode')
+              || this.isTracked('dieLabelsHidden')
+              || this.isTracked('dieLabelsSuffix'));
+      }
       get requiresContainerDimensionsUpdate() {
           return this.isTracked('canvasWidth') || this.isTracked('canvasHeight');
       }
+      get requiresComponentResizeUpdate() {
+          return this.isTracked('canvasWidth') || this.isTracked('canvasHeight');
+      }
       get requiresScalesUpdate() {
           return (this.isTracked('originLocation')
               || this.isTracked('gridMinX')
@@ -77396,6 +77127,14 @@ img.ProseMirror-separator {
               || this.isTracked('gridMaxY')
               || this.isTracked('dies'));
       }
+      get requiresInputDataUpdate() {
+          return (this.isTracked('originLocation')
+              || this.isTracked('gridMinX')
+              || this.isTracked('gridMaxX')
+              || this.isTracked('gridMinY')
+              || this.isTracked('gridMaxY')
+              || this.isTracked('dies'));
+      }
       get requiresLabelsFontSizeUpdate() {
           return this.isTracked('maxCharacters');
       }
@@ -77406,6 +77145,14 @@ img.ProseMirror-separator {
               || this.isTracked('dieLabelsHidden')
               || this.isTracked('dieLabelsSuffix'));
       }
+      get requiresColorAndTextUpdate() {
+          return (this.isTracked('maxCharacters')
+              || this.isTracked('highlightedTags')
+              || this.isTracked('colorScale')
+              || this.isTracked('colorScaleMode')
+              || this.isTracked('dieLabelsHidden')
+              || this.isTracked('dieLabelsSuffix'));
+      }
       get requiresDrawnWaferUpdate() {
           return this.isTracked('transform');
       }
@@ -78436,7 +78183,7 @@ img.ProseMirror-separator {
   }
 
   // eslint-disable-next-line no-template-curly-in-string
-  const workerCode = "var MatrixRenderer = (function (exports) {\n    'use strict';\n\n    /**\n     * @license\n     * Copyright 2019 Google LLC\n     * SPDX-License-Identifier: Apache-2.0\n     */\n    const proxyMarker = Symbol(\"Comlink.proxy\");\n    const createEndpoint = Symbol(\"Comlink.endpoint\");\n    const releaseProxy = Symbol(\"Comlink.releaseProxy\");\n    const finalizer = Symbol(\"Comlink.finalizer\");\n    const throwMarker = Symbol(\"Comlink.thrown\");\n    const isObject = (val) => (typeof val === \"object\" && val !== null) || typeof val === \"function\";\n    /**\n     * Internal transfer handle to handle objects marked to proxy.\n     */\n    const proxyTransferHandler = {\n        canHandle: (val) => isObject(val) && val[proxyMarker],\n        serialize(obj) {\n            const { port1, port2 } = new MessageChannel();\n            expose(obj, port1);\n            return [port2, [port2]];\n        },\n        deserialize(port) {\n            port.start();\n            return wrap(port);\n        },\n    };\n    /**\n     * Internal transfer handler to handle thrown exceptions.\n     */\n    const throwTransferHandler = {\n        canHandle: (value) => isObject(value) && throwMarker in value,\n        serialize({ value }) {\n            let serialized;\n            if (value instanceof Error) {\n                serialized = {\n                    isError: true,\n                    value: {\n                        message: value.message,\n                        name: value.name,\n                        stack: value.stack,\n                    },\n                };\n            }\n            else {\n                serialized = { isError: false, value };\n            }\n            return [serialized, []];\n        },\n        deserialize(serialized) {\n            if (serialized.isError) {\n                throw Object.assign(new Error(serialized.value.message), serialized.value);\n            }\n            throw serialized.value;\n        },\n    };\n    /**\n     * Allows customizing the serialization of certain values.\n     */\n    const transferHandlers = new Map([\n        [\"proxy\", proxyTransferHandler],\n        [\"throw\", throwTransferHandler],\n    ]);\n    function isAllowedOrigin(allowedOrigins, origin) {\n        for (const allowedOrigin of allowedOrigins) {\n            if (origin === allowedOrigin || allowedOrigin === \"*\") {\n                return true;\n            }\n            if (allowedOrigin instanceof RegExp && allowedOrigin.test(origin)) {\n                return true;\n            }\n        }\n        return false;\n    }\n    function expose(obj, ep = globalThis, allowedOrigins = [\"*\"]) {\n        ep.addEventListener(\"message\", function callback(ev) {\n            if (!ev || !ev.data) {\n                return;\n            }\n            if (!isAllowedOrigin(allowedOrigins, ev.origin)) {\n                console.warn(`Invalid origin '${ev.origin}' for comlink proxy`);\n                return;\n            }\n            const { id, type, path } = Object.assign({ path: [] }, ev.data);\n            const argumentList = (ev.data.argumentList || []).map(fromWireValue);\n            let returnValue;\n            try {\n                const parent = path.slice(0, -1).reduce((obj, prop) => obj[prop], obj);\n                const rawValue = path.reduce((obj, prop) => obj[prop], obj);\n                switch (type) {\n                    case \"GET\" /* MessageType.GET */:\n                        {\n                            returnValue = rawValue;\n                        }\n                        break;\n                    case \"SET\" /* MessageType.SET */:\n                        {\n                            parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);\n                            returnValue = true;\n                        }\n                        break;\n                    case \"APPLY\" /* MessageType.APPLY */:\n                        {\n                            returnValue = rawValue.apply(parent, argumentList);\n                        }\n                        break;\n                    case \"CONSTRUCT\" /* MessageType.CONSTRUCT */:\n                        {\n                            const value = new rawValue(...argumentList);\n                            returnValue = proxy(value);\n                        }\n                        break;\n                    case \"ENDPOINT\" /* MessageType.ENDPOINT */:\n                        {\n                            const { port1, port2 } = new MessageChannel();\n                            expose(obj, port2);\n                            returnValue = transfer(port1, [port1]);\n                        }\n                        break;\n                    case \"RELEASE\" /* MessageType.RELEASE */:\n                        {\n                            returnValue = undefined;\n                        }\n                        break;\n                    default:\n                        return;\n                }\n            }\n            catch (value) {\n                returnValue = { value, [throwMarker]: 0 };\n            }\n            Promise.resolve(returnValue)\n                .catch((value) => {\n                return { value, [throwMarker]: 0 };\n            })\n                .then((returnValue) => {\n                const [wireValue, transferables] = toWireValue(returnValue);\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n                if (type === \"RELEASE\" /* MessageType.RELEASE */) {\n                    // detach and deactive after sending release response above.\n                    ep.removeEventListener(\"message\", callback);\n                    closeEndPoint(ep);\n                    if (finalizer in obj && typeof obj[finalizer] === \"function\") {\n                        obj[finalizer]();\n                    }\n                }\n            })\n                .catch((error) => {\n                // Send Serialization Error To Caller\n                const [wireValue, transferables] = toWireValue({\n                    value: new TypeError(\"Unserializable return value\"),\n                    [throwMarker]: 0,\n                });\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n            });\n        });\n        if (ep.start) {\n            ep.start();\n        }\n    }\n    function isMessagePort(endpoint) {\n        return endpoint.constructor.name === \"MessagePort\";\n    }\n    function closeEndPoint(endpoint) {\n        if (isMessagePort(endpoint))\n            endpoint.close();\n    }\n    function wrap(ep, target) {\n        return createProxy(ep, [], target);\n    }\n    function throwIfProxyReleased(isReleased) {\n        if (isReleased) {\n            throw new Error(\"Proxy has been released and is not useable\");\n        }\n    }\n    function releaseEndpoint(ep) {\n        return requestResponseMessage(ep, {\n            type: \"RELEASE\" /* MessageType.RELEASE */,\n        }).then(() => {\n            closeEndPoint(ep);\n        });\n    }\n    const proxyCounter = new WeakMap();\n    const proxyFinalizers = \"FinalizationRegistry\" in globalThis &&\n        new FinalizationRegistry((ep) => {\n            const newCount = (proxyCounter.get(ep) || 0) - 1;\n            proxyCounter.set(ep, newCount);\n            if (newCount === 0) {\n                releaseEndpoint(ep);\n            }\n        });\n    function registerProxy(proxy, ep) {\n        const newCount = (proxyCounter.get(ep) || 0) + 1;\n        proxyCounter.set(ep, newCount);\n        if (proxyFinalizers) {\n            proxyFinalizers.register(proxy, ep, proxy);\n        }\n    }\n    function unregisterProxy(proxy) {\n        if (proxyFinalizers) {\n            proxyFinalizers.unregister(proxy);\n        }\n    }\n    function createProxy(ep, path = [], target = function () { }) {\n        let isProxyReleased = false;\n        const proxy = new Proxy(target, {\n            get(_target, prop) {\n                throwIfProxyReleased(isProxyReleased);\n                if (prop === releaseProxy) {\n                    return () => {\n                        unregisterProxy(proxy);\n                        releaseEndpoint(ep);\n                        isProxyReleased = true;\n                    };\n                }\n                if (prop === \"then\") {\n                    if (path.length === 0) {\n                        return { then: () => proxy };\n                    }\n                    const r = requestResponseMessage(ep, {\n                        type: \"GET\" /* MessageType.GET */,\n                        path: path.map((p) => p.toString()),\n                    }).then(fromWireValue);\n                    return r.then.bind(r);\n                }\n                return createProxy(ep, [...path, prop]);\n            },\n            set(_target, prop, rawValue) {\n                throwIfProxyReleased(isProxyReleased);\n                // FIXME: ES6 Proxy Handler `set` methods are supposed to return a\n                // boolean. To show good will, we return true asynchronously ¯\\_(ツ)_/¯\n                const [value, transferables] = toWireValue(rawValue);\n                return requestResponseMessage(ep, {\n                    type: \"SET\" /* MessageType.SET */,\n                    path: [...path, prop].map((p) => p.toString()),\n                    value,\n                }, transferables).then(fromWireValue);\n            },\n            apply(_target, _thisArg, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const last = path[path.length - 1];\n                if (last === createEndpoint) {\n                    return requestResponseMessage(ep, {\n                        type: \"ENDPOINT\" /* MessageType.ENDPOINT */,\n                    }).then(fromWireValue);\n                }\n                // We just pretend that `bind()` didn’t happen.\n                if (last === \"bind\") {\n                    return createProxy(ep, path.slice(0, -1));\n                }\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, {\n                    type: \"APPLY\" /* MessageType.APPLY */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n            construct(_target, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, {\n                    type: \"CONSTRUCT\" /* MessageType.CONSTRUCT */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n        });\n        registerProxy(proxy, ep);\n        return proxy;\n    }\n    function myFlat(arr) {\n        return Array.prototype.concat.apply([], arr);\n    }\n    function processArguments(argumentList) {\n        const processed = argumentList.map(toWireValue);\n        return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];\n    }\n    const transferCache = new WeakMap();\n    function transfer(obj, transfers) {\n        transferCache.set(obj, transfers);\n        return obj;\n    }\n    function proxy(obj) {\n        return Object.assign(obj, { [proxyMarker]: true });\n    }\n    function toWireValue(value) {\n        for (const [name, handler] of transferHandlers) {\n            if (handler.canHandle(value)) {\n                const [serializedValue, transferables] = handler.serialize(value);\n                return [\n                    {\n                        type: \"HANDLER\" /* WireValueType.HANDLER */,\n                        name,\n                        value: serializedValue,\n                    },\n                    transferables,\n                ];\n            }\n        }\n        return [\n            {\n                type: \"RAW\" /* WireValueType.RAW */,\n                value,\n            },\n            transferCache.get(value) || [],\n        ];\n    }\n    function fromWireValue(value) {\n        switch (value.type) {\n            case \"HANDLER\" /* WireValueType.HANDLER */:\n                return transferHandlers.get(value.name).deserialize(value.value);\n            case \"RAW\" /* WireValueType.RAW */:\n                return value.value;\n        }\n    }\n    function requestResponseMessage(ep, msg, transfers) {\n        return new Promise((resolve) => {\n            const id = generateUUID();\n            ep.addEventListener(\"message\", function l(ev) {\n                if (!ev.data || !ev.data.id || ev.data.id !== id) {\n                    return;\n                }\n                ep.removeEventListener(\"message\", l);\n                resolve(ev.data);\n            });\n            if (ep.start) {\n                ep.start();\n            }\n            ep.postMessage(Object.assign({ id }, msg), transfers);\n        });\n    }\n    function generateUUID() {\n        return new Array(4)\n            .fill(0)\n            .map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))\n            .join(\"-\");\n    }\n\n    /**\n     * MatrixRenderer class is meant to be used within a Web Worker context,\n     * using Comlink to facilitate communication between the main thread and the worker.\n     * The MatrixRenderer class manages a matrix of dies, once an instance of MatrixRenderer is created,\n     * it is exposed to the main thread using Comlink's `expose` method.\n     * This setup is used in the wafer-map component to perform heavy computational duties\n     */\n    class MatrixRenderer {\n        constructor() {\n            this.columnIndexes = Int32Array.from([]);\n            this.rowIndexes = Int32Array.from([]);\n            this.values = Float64Array.from([]);\n            this.scaledColumnIndex = Float64Array.from([]);\n            this.scaledRowIndex = Float64Array.from([]);\n            this.columnIndexPositions = Int32Array.from([]);\n            this.scaleX = 1;\n            this.scaleY = 1;\n            this.baseX = 1;\n            this.baseY = 1;\n            this.dieDimensions = { width: 1, height: 1 };\n            this.transform = { k: 1, x: 0, y: 0 };\n            this.smallestMarginPossible = 20;\n            this.margin = {\n                top: this.smallestMarginPossible,\n                right: this.smallestMarginPossible,\n                bottom: this.smallestMarginPossible,\n                left: this.smallestMarginPossible\n            };\n        }\n        calculateXScaledIndex(columnIndex) {\n            return this.scaleX * columnIndex + this.baseX + this.margin.left;\n        }\n        calculateYScaledIndex(rowIndex) {\n            return this.scaleY * rowIndex + this.baseY + this.margin.top;\n        }\n        setColumnIndexes(columnIndexes) {\n            this.columnIndexes = columnIndexes;\n            if (columnIndexes.length === 0 || this.columnIndexes[0] === undefined) {\n                return;\n            }\n            const scaledColumnIndex = [\n                this.calculateXScaledIndex(this.columnIndexes[0])\n            ];\n            const columnPositions = [0];\n            let prev = this.columnIndexes[0];\n            for (let i = 1; i < this.columnIndexes.length; i++) {\n                const xIndex = this.columnIndexes[i];\n                if (xIndex && xIndex !== prev) {\n                    const scaledX = this.calculateXScaledIndex(this.columnIndexes[i]);\n                    scaledColumnIndex.push(scaledX);\n                    columnPositions.push(i);\n                    prev = xIndex;\n                }\n            }\n            this.scaledColumnIndex = Float64Array.from(scaledColumnIndex);\n            this.columnIndexPositions = Int32Array.from(columnPositions);\n        }\n        setRowIndexes(rowIndexesBuffer) {\n            this.rowIndexes = rowIndexesBuffer;\n            this.scaledRowIndex = new Float64Array(this.rowIndexes.length);\n            for (let i = 0; i < this.rowIndexes.length; i++) {\n                this.scaledRowIndex[i] = this.calculateYScaledIndex(this.rowIndexes[i]);\n            }\n        }\n        setMargin(margin) {\n            this.margin = margin;\n        }\n        setCanvasCorners(topLeft, bottomRight) {\n            this.topLeftCanvasCorner = topLeft;\n            this.bottomRightCanvasCorner = bottomRight;\n        }\n        setDiesDimensions(data) {\n            this.dieDimensions = { width: data.width, height: data.height };\n        }\n        setScaling(scaleX, scaleY) {\n            this.scaleX = scaleX;\n            this.scaleY = scaleY;\n        }\n        setBases(baseX, baseY) {\n            this.baseX = baseX;\n            this.baseY = baseY;\n        }\n        setTransform(transform) {\n            this.transform = transform;\n        }\n        setCanvas(canvas) {\n            this.canvas = canvas;\n            this.context = canvas.getContext('2d');\n        }\n        getMatrix() {\n            return {\n                columnIndexes: this.columnIndexes,\n                rowIndexes: this.rowIndexes,\n                values: this.values\n            };\n        }\n        emptyMatrix() {\n            this.columnIndexes = Int32Array.from([]);\n            this.rowIndexes = Int32Array.from([]);\n            this.values = Float64Array.from([]);\n        }\n        scaleCanvas() {\n            this.context.translate(this.transform.x, this.transform.y);\n            this.context.scale(this.transform.k, this.transform.k);\n        }\n        updateMatrix(data) {\n            this.columnIndexes = Int32Array.from(data.columnIndexes);\n            this.rowIndexes = Int32Array.from(data.rowIndexes);\n            this.values = Float64Array.from(data.values);\n        }\n        setCanvasDimensions(data) {\n            this.canvas.width = data.width;\n            this.canvas.height = data.height;\n        }\n        getCanvasDimensions() {\n            return {\n                width: this.canvas.width,\n                height: this.canvas.height\n            };\n        }\n        clearCanvas() {\n            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n        }\n        drawWafer() {\n            this.context.restore();\n            this.context.save();\n            this.clearCanvas();\n            this.scaleCanvas();\n            if (this.topLeftCanvasCorner === undefined\n                || this.bottomRightCanvasCorner === undefined) {\n                throw new Error('Canvas corners are not set');\n            }\n            for (let i = 0; i < this.scaledColumnIndex.length; i++) {\n                const scaledX = this.scaledColumnIndex[i];\n                if (!(scaledX >= this.topLeftCanvasCorner.x\n                    && scaledX < this.bottomRightCanvasCorner.x)) {\n                    continue;\n                }\n                // columnIndexPositions is used to get chunks to determine the start and end index of the column, it looks something like [0, 1, 4, 9, 12]\n                // This means that the first column has a start index of 0 and an end index of 1, the second column has a start index of 1 and an end index of 4, and so on\n                // scaledRowIndex is used when we reach the end of the columnIndexPositions, when columnIndexPositions is [0, 1, 4, 9, 12], scaledRowIndex is 13\n                const columnEndIndex = this.columnIndexPositions[i + 1] !== undefined\n                    ? this.columnIndexPositions[i + 1]\n                    : this.scaledRowIndex.length;\n                for (let columnStartIndex = this.columnIndexPositions[i]; columnStartIndex < columnEndIndex; columnStartIndex++) {\n                    const scaledY = this.scaledRowIndex[columnStartIndex];\n                    if (!(scaledY >= this.topLeftCanvasCorner.y\n                        && scaledY < this.bottomRightCanvasCorner.y)) {\n                        continue;\n                    }\n                    // Fill style is temporary green for all dies, will be replaced with a color based on the value of the die in a future implementation\n                    this.context.fillStyle = 'Green';\n                    this.context.fillRect(scaledX, scaledY, this.dieDimensions.width, this.dieDimensions.height);\n                }\n            }\n        }\n    }\n    expose(MatrixRenderer);\n\n    exports.MatrixRenderer = MatrixRenderer;\n\n    return exports;\n\n})({});\n";
+  const workerCode = "var MatrixRenderer = (function (exports) {\n    'use strict';\n\n    /**\n     * @license\n     * Copyright 2019 Google LLC\n     * SPDX-License-Identifier: Apache-2.0\n     */\n    const proxyMarker = Symbol(\"Comlink.proxy\");\n    const createEndpoint = Symbol(\"Comlink.endpoint\");\n    const releaseProxy = Symbol(\"Comlink.releaseProxy\");\n    const finalizer = Symbol(\"Comlink.finalizer\");\n    const throwMarker = Symbol(\"Comlink.thrown\");\n    const isObject = (val) => (typeof val === \"object\" && val !== null) || typeof val === \"function\";\n    /**\n     * Internal transfer handle to handle objects marked to proxy.\n     */\n    const proxyTransferHandler = {\n        canHandle: (val) => isObject(val) && val[proxyMarker],\n        serialize(obj) {\n            const { port1, port2 } = new MessageChannel();\n            expose(obj, port1);\n            return [port2, [port2]];\n        },\n        deserialize(port) {\n            port.start();\n            return wrap(port);\n        },\n    };\n    /**\n     * Internal transfer handler to handle thrown exceptions.\n     */\n    const throwTransferHandler = {\n        canHandle: (value) => isObject(value) && throwMarker in value,\n        serialize({ value }) {\n            let serialized;\n            if (value instanceof Error) {\n                serialized = {\n                    isError: true,\n                    value: {\n                        message: value.message,\n                        name: value.name,\n                        stack: value.stack,\n                    },\n                };\n            }\n            else {\n                serialized = { isError: false, value };\n            }\n            return [serialized, []];\n        },\n        deserialize(serialized) {\n            if (serialized.isError) {\n                throw Object.assign(new Error(serialized.value.message), serialized.value);\n            }\n            throw serialized.value;\n        },\n    };\n    /**\n     * Allows customizing the serialization of certain values.\n     */\n    const transferHandlers = new Map([\n        [\"proxy\", proxyTransferHandler],\n        [\"throw\", throwTransferHandler],\n    ]);\n    function isAllowedOrigin(allowedOrigins, origin) {\n        for (const allowedOrigin of allowedOrigins) {\n            if (origin === allowedOrigin || allowedOrigin === \"*\") {\n                return true;\n            }\n            if (allowedOrigin instanceof RegExp && allowedOrigin.test(origin)) {\n                return true;\n            }\n        }\n        return false;\n    }\n    function expose(obj, ep = globalThis, allowedOrigins = [\"*\"]) {\n        ep.addEventListener(\"message\", function callback(ev) {\n            if (!ev || !ev.data) {\n                return;\n            }\n            if (!isAllowedOrigin(allowedOrigins, ev.origin)) {\n                console.warn(`Invalid origin '${ev.origin}' for comlink proxy`);\n                return;\n            }\n            const { id, type, path } = Object.assign({ path: [] }, ev.data);\n            const argumentList = (ev.data.argumentList || []).map(fromWireValue);\n            let returnValue;\n            try {\n                const parent = path.slice(0, -1).reduce((obj, prop) => obj[prop], obj);\n                const rawValue = path.reduce((obj, prop) => obj[prop], obj);\n                switch (type) {\n                    case \"GET\" /* MessageType.GET */:\n                        {\n                            returnValue = rawValue;\n                        }\n                        break;\n                    case \"SET\" /* MessageType.SET */:\n                        {\n                            parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);\n                            returnValue = true;\n                        }\n                        break;\n                    case \"APPLY\" /* MessageType.APPLY */:\n                        {\n                            returnValue = rawValue.apply(parent, argumentList);\n                        }\n                        break;\n                    case \"CONSTRUCT\" /* MessageType.CONSTRUCT */:\n                        {\n                            const value = new rawValue(...argumentList);\n                            returnValue = proxy(value);\n                        }\n                        break;\n                    case \"ENDPOINT\" /* MessageType.ENDPOINT */:\n                        {\n                            const { port1, port2 } = new MessageChannel();\n                            expose(obj, port2);\n                            returnValue = transfer(port1, [port1]);\n                        }\n                        break;\n                    case \"RELEASE\" /* MessageType.RELEASE */:\n                        {\n                            returnValue = undefined;\n                        }\n                        break;\n                    default:\n                        return;\n                }\n            }\n            catch (value) {\n                returnValue = { value, [throwMarker]: 0 };\n            }\n            Promise.resolve(returnValue)\n                .catch((value) => {\n                return { value, [throwMarker]: 0 };\n            })\n                .then((returnValue) => {\n                const [wireValue, transferables] = toWireValue(returnValue);\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n                if (type === \"RELEASE\" /* MessageType.RELEASE */) {\n                    // detach and deactive after sending release response above.\n                    ep.removeEventListener(\"message\", callback);\n                    closeEndPoint(ep);\n                    if (finalizer in obj && typeof obj[finalizer] === \"function\") {\n                        obj[finalizer]();\n                    }\n                }\n            })\n                .catch((error) => {\n                // Send Serialization Error To Caller\n                const [wireValue, transferables] = toWireValue({\n                    value: new TypeError(\"Unserializable return value\"),\n                    [throwMarker]: 0,\n                });\n                ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);\n            });\n        });\n        if (ep.start) {\n            ep.start();\n        }\n    }\n    function isMessagePort(endpoint) {\n        return endpoint.constructor.name === \"MessagePort\";\n    }\n    function closeEndPoint(endpoint) {\n        if (isMessagePort(endpoint))\n            endpoint.close();\n    }\n    function wrap(ep, target) {\n        return createProxy(ep, [], target);\n    }\n    function throwIfProxyReleased(isReleased) {\n        if (isReleased) {\n            throw new Error(\"Proxy has been released and is not useable\");\n        }\n    }\n    function releaseEndpoint(ep) {\n        return requestResponseMessage(ep, {\n            type: \"RELEASE\" /* MessageType.RELEASE */,\n        }).then(() => {\n            closeEndPoint(ep);\n        });\n    }\n    const proxyCounter = new WeakMap();\n    const proxyFinalizers = \"FinalizationRegistry\" in globalThis &&\n        new FinalizationRegistry((ep) => {\n            const newCount = (proxyCounter.get(ep) || 0) - 1;\n            proxyCounter.set(ep, newCount);\n            if (newCount === 0) {\n                releaseEndpoint(ep);\n            }\n        });\n    function registerProxy(proxy, ep) {\n        const newCount = (proxyCounter.get(ep) || 0) + 1;\n        proxyCounter.set(ep, newCount);\n        if (proxyFinalizers) {\n            proxyFinalizers.register(proxy, ep, proxy);\n        }\n    }\n    function unregisterProxy(proxy) {\n        if (proxyFinalizers) {\n            proxyFinalizers.unregister(proxy);\n        }\n    }\n    function createProxy(ep, path = [], target = function () { }) {\n        let isProxyReleased = false;\n        const proxy = new Proxy(target, {\n            get(_target, prop) {\n                throwIfProxyReleased(isProxyReleased);\n                if (prop === releaseProxy) {\n                    return () => {\n                        unregisterProxy(proxy);\n                        releaseEndpoint(ep);\n                        isProxyReleased = true;\n                    };\n                }\n                if (prop === \"then\") {\n                    if (path.length === 0) {\n                        return { then: () => proxy };\n                    }\n                    const r = requestResponseMessage(ep, {\n                        type: \"GET\" /* MessageType.GET */,\n                        path: path.map((p) => p.toString()),\n                    }).then(fromWireValue);\n                    return r.then.bind(r);\n                }\n                return createProxy(ep, [...path, prop]);\n            },\n            set(_target, prop, rawValue) {\n                throwIfProxyReleased(isProxyReleased);\n                // FIXME: ES6 Proxy Handler `set` methods are supposed to return a\n                // boolean. To show good will, we return true asynchronously ¯\\_(ツ)_/¯\n                const [value, transferables] = toWireValue(rawValue);\n                return requestResponseMessage(ep, {\n                    type: \"SET\" /* MessageType.SET */,\n                    path: [...path, prop].map((p) => p.toString()),\n                    value,\n                }, transferables).then(fromWireValue);\n            },\n            apply(_target, _thisArg, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const last = path[path.length - 1];\n                if (last === createEndpoint) {\n                    return requestResponseMessage(ep, {\n                        type: \"ENDPOINT\" /* MessageType.ENDPOINT */,\n                    }).then(fromWireValue);\n                }\n                // We just pretend that `bind()` didn’t happen.\n                if (last === \"bind\") {\n                    return createProxy(ep, path.slice(0, -1));\n                }\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, {\n                    type: \"APPLY\" /* MessageType.APPLY */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n            construct(_target, rawArgumentList) {\n                throwIfProxyReleased(isProxyReleased);\n                const [argumentList, transferables] = processArguments(rawArgumentList);\n                return requestResponseMessage(ep, {\n                    type: \"CONSTRUCT\" /* MessageType.CONSTRUCT */,\n                    path: path.map((p) => p.toString()),\n                    argumentList,\n                }, transferables).then(fromWireValue);\n            },\n        });\n        registerProxy(proxy, ep);\n        return proxy;\n    }\n    function myFlat(arr) {\n        return Array.prototype.concat.apply([], arr);\n    }\n    function processArguments(argumentList) {\n        const processed = argumentList.map(toWireValue);\n        return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];\n    }\n    const transferCache = new WeakMap();\n    function transfer(obj, transfers) {\n        transferCache.set(obj, transfers);\n        return obj;\n    }\n    function proxy(obj) {\n        return Object.assign(obj, { [proxyMarker]: true });\n    }\n    function toWireValue(value) {\n        for (const [name, handler] of transferHandlers) {\n            if (handler.canHandle(value)) {\n                const [serializedValue, transferables] = handler.serialize(value);\n                return [\n                    {\n                        type: \"HANDLER\" /* WireValueType.HANDLER */,\n                        name,\n                        value: serializedValue,\n                    },\n                    transferables,\n                ];\n            }\n        }\n        return [\n            {\n                type: \"RAW\" /* WireValueType.RAW */,\n                value,\n            },\n            transferCache.get(value) || [],\n        ];\n    }\n    function fromWireValue(value) {\n        switch (value.type) {\n            case \"HANDLER\" /* WireValueType.HANDLER */:\n                return transferHandlers.get(value.name).deserialize(value.value);\n            case \"RAW\" /* WireValueType.RAW */:\n                return value.value;\n        }\n    }\n    function requestResponseMessage(ep, msg, transfers) {\n        return new Promise((resolve) => {\n            const id = generateUUID();\n            ep.addEventListener(\"message\", function l(ev) {\n                if (!ev.data || !ev.data.id || ev.data.id !== id) {\n                    return;\n                }\n                ep.removeEventListener(\"message\", l);\n                resolve(ev.data);\n            });\n            if (ep.start) {\n                ep.start();\n            }\n            ep.postMessage(Object.assign({ id }, msg), transfers);\n        });\n    }\n    function generateUUID() {\n        return new Array(4)\n            .fill(0)\n            .map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))\n            .join(\"-\");\n    }\n\n    /**\n     * MatrixRenderer class is meant to be used within a Web Worker context,\n     * using Comlink to facilitate communication between the main thread and the worker.\n     * The MatrixRenderer class manages a matrix of dies, once an instance of MatrixRenderer is created,\n     * it is exposed to the main thread using Comlink's `expose` method.\n     * This setup is used in the wafer-map component to perform heavy computational duties\n     */\n    class MatrixRenderer {\n        constructor() {\n            this.values = Float64Array.from([]);\n            this.scaledColumnIndices = Float64Array.from([]);\n            this.scaledRowIndices = Float64Array.from([]);\n            this.columnIndicesPositions = Int32Array.from([]);\n            this.renderConfig = {\n                dieDimensions: {\n                    width: 0,\n                    height: 0\n                },\n                margin: {\n                    top: 0,\n                    right: 0,\n                    bottom: 0,\n                    left: 0\n                },\n                verticalCoefficient: 1,\n                horizontalCoefficient: 1,\n                horizontalConstant: 0,\n                verticalConstant: 0,\n                labelsFontSize: 0,\n                colorScale: []\n            };\n            this.transformConfig = {\n                transform: {\n                    k: 1,\n                    x: 0,\n                    y: 0\n                },\n                topLeftCanvasCorner: {\n                    x: 0,\n                    y: 0\n                },\n                bottomRightCanvasCorner: {\n                    x: 0,\n                    y: 0\n                }\n            };\n        }\n        calculateHorizontalScaledIndices(columnIndex) {\n            return (this.renderConfig.horizontalCoefficient * columnIndex\n                + this.renderConfig.horizontalConstant\n                + this.renderConfig.margin.left);\n        }\n        calculateVerticalScaledIndices(rowIndex) {\n            return (this.renderConfig.verticalCoefficient * rowIndex\n                + this.renderConfig.verticalConstant\n                + this.renderConfig.margin.top);\n        }\n        setColumnIndices(columnIndices) {\n            if (columnIndices.length === 0 || columnIndices[0] === undefined) {\n                return;\n            }\n            const scaledColumnIndex = [\n                this.calculateHorizontalScaledIndices(columnIndices[0])\n            ];\n            const columnPositions = [0];\n            let prev = columnIndices[0];\n            for (let i = 1; i < columnIndices.length; i++) {\n                const xIndex = columnIndices[i];\n                if (xIndex && xIndex !== prev) {\n                    const scaledX = this.calculateHorizontalScaledIndices(columnIndices[i]);\n                    scaledColumnIndex.push(scaledX);\n                    columnPositions.push(i);\n                    prev = xIndex;\n                }\n            }\n            this.scaledColumnIndices = Float64Array.from(scaledColumnIndex);\n            this.columnIndicesPositions = Int32Array.from(columnPositions);\n        }\n        setRowIndices(rowIndices) {\n            this.scaledRowIndices = new Float64Array(rowIndices.length);\n            for (let i = 0; i < rowIndices.length; i++) {\n                this.scaledRowIndices[i] = this.calculateVerticalScaledIndices(rowIndices[i]);\n            }\n        }\n        setRenderConfig(renderConfig) {\n            this.renderConfig = renderConfig;\n        }\n        setTransformConfig(transformData) {\n            this.transformConfig = transformData;\n        }\n        setCanvas(canvas) {\n            this.canvas = canvas;\n            this.context = canvas.getContext('2d');\n        }\n        scaleCanvas() {\n            this.context.translate(this.transformConfig.transform.x, this.transformConfig.transform.y);\n            this.context.scale(this.transformConfig.transform.k, this.transformConfig.transform.k);\n        }\n        setCanvasDimensions(data) {\n            this.canvas.width = data.width;\n            this.canvas.height = data.height;\n        }\n        getCanvasDimensions() {\n            return {\n                width: this.canvas.width,\n                height: this.canvas.height\n            };\n        }\n        clearCanvas() {\n            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);\n        }\n        drawWafer() {\n            this.context.restore();\n            this.context.save();\n            this.clearCanvas();\n            this.scaleCanvas();\n            for (let i = 0; i < this.scaledColumnIndices.length; i++) {\n                const scaledX = this.scaledColumnIndices[i];\n                if (!(scaledX >= this.transformConfig.topLeftCanvasCorner.x\n                    && scaledX < this.transformConfig.bottomRightCanvasCorner.x)) {\n                    continue;\n                }\n                // columnIndexPositions is used to get chunks to determine the start and end index of the column, it looks something like [0, 1, 4, 9, 12]\n                // This means that the first column has a start index of 0 and an end index of 1, the second column has a start index of 1 and an end index of 4, and so on\n                // scaledRowIndices is used when we reach the end of the columnIndexPositions, when columnIndexPositions is [0, 1, 4, 9, 12], scaledRowIndices is 13\n                const columnEndIndex = this.columnIndicesPositions[i + 1] !== undefined\n                    ? this.columnIndicesPositions[i + 1]\n                    : this.scaledRowIndices.length;\n                for (let columnStartIndex = this.columnIndicesPositions[i]; columnStartIndex < columnEndIndex; columnStartIndex++) {\n                    const scaledY = this.scaledRowIndices[columnStartIndex];\n                    if (!(scaledY >= this.transformConfig.topLeftCanvasCorner.y\n                        && scaledY < this.transformConfig.bottomRightCanvasCorner.y)) {\n                        continue;\n                    }\n                    // Fill style is temporary green for all dies, will be replaced with a color based on the value of the die in a future implementation\n                    this.context.fillStyle = 'Green';\n                    this.context.fillRect(scaledX, scaledY, this.renderConfig.dieDimensions.width, this.renderConfig.dieDimensions.height);\n                }\n            }\n        }\n    }\n    expose(MatrixRenderer);\n\n    exports.MatrixRenderer = MatrixRenderer;\n\n    return exports;\n\n})({});\n";
 
   let url;
   /**
@@ -78466,66 +78213,45 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
       }
-      async setupWafer() {
+      async setupWafer(snapshot) {
           if (this.matrixRenderer === undefined) {
               const { matrixRenderer } = await createMatrixRenderer();
               this.matrixRenderer = matrixRenderer;
               const offscreenCanvas = this.wafermap.workerCanvas.transferControlToOffscreen();
               await this.matrixRenderer.setCanvas(transfer(offscreenCanvas, [offscreenCanvas]));
           }
-          await this.matrixRenderer.setCanvasDimensions({
-              width: this.wafermap.canvasWidth ?? 0,
-              height: this.wafermap.canvasHeight ?? 0
-          });
-          await this.matrixRenderer.setDiesDimensions(this.wafermap.experimentalDataManager.dieDimensions);
-          const scaleX = this.wafermap.experimentalDataManager.horizontalScale(1)
-              - this.wafermap.experimentalDataManager.horizontalScale(0);
-          const scaleY = this.wafermap.experimentalDataManager.verticalScale(1)
-              - this.wafermap.experimentalDataManager.verticalScale(0);
-          await this.matrixRenderer.setScaling(scaleX, scaleY);
-          await this.matrixRenderer.setBases(this.wafermap.experimentalDataManager.horizontalScale(0), this.wafermap.experimentalDataManager.verticalScale(0));
-          await this.matrixRenderer.setMargin(this.wafermap.experimentalDataManager.margin);
-          if (this.wafermap.diesTable === undefined) {
-              await this.matrixRenderer.setColumnIndexes(Int32Array.from([]));
-              await this.matrixRenderer.setRowIndexes(Int32Array.from([]));
-              return;
-          }
-          const columnIndexes = this.wafermap.diesTable
-              .getChild('colIndex')
-              .toArray();
-          await this.matrixRenderer.setColumnIndexes(columnIndexes);
-          const rowIndexes = this.wafermap.diesTable
-              .getChild('rowIndex')
-              .toArray();
-          await this.matrixRenderer.setRowIndexes(rowIndexes);
-      }
-      async drawWafer() {
-          await this.matrixRenderer.setTransform(this.wafermap.transform);
-          const topLeftCanvasCorner = this.wafermap.transform.invert([0, 0]);
-          const bottomRightCanvasCorner = this.wafermap.transform.invert([
-              this.wafermap.canvasWidth,
-              this.wafermap.canvasHeight
+          await this.matrixRenderer.setCanvasDimensions(snapshot.canvasDimensions);
+          await this.matrixRenderer.setRenderConfig(snapshot.renderConfig);
+          await this.matrixRenderer.setColumnIndices(snapshot.columnIndices);
+          await this.matrixRenderer.setRowIndices(snapshot.rowIndices);
+      }
+      async drawWafer(snapshot) {
+          const topLeftCanvasCorner = snapshot.transform.invert([0, 0]);
+          const bottomRightCanvasCorner = snapshot.transform.invert([
+              snapshot.canvasDimensions.width,
+              snapshot.canvasDimensions.height
           ]);
-          await this.matrixRenderer.setCanvasCorners({
-              x: topLeftCanvasCorner[0]
-                  - this.wafermap.experimentalDataManager.dieDimensions.width,
-              y: topLeftCanvasCorner[1]
-                  - this.wafermap.experimentalDataManager.dieDimensions.height
-          }, {
-              x: bottomRightCanvasCorner[0],
-              y: bottomRightCanvasCorner[1]
+          await this.matrixRenderer.setTransformConfig({
+              transform: snapshot.transform,
+              topLeftCanvasCorner: {
+                  x: topLeftCanvasCorner[0] - snapshot.dieDimensions.width,
+                  y: topLeftCanvasCorner[1] - snapshot.dieDimensions.height
+              },
+              bottomRightCanvasCorner: {
+                  x: bottomRightCanvasCorner[0],
+                  y: bottomRightCanvasCorner[1]
+              }
           });
           await this.matrixRenderer.drawWafer();
-          this.renderHover();
       }
       renderHover() {
-          if (this.wafermap.experimentalDataManager.dieDimensions === undefined
+          if (this.wafermap.computations.dieDimensions === undefined
               || this.wafermap.transform === undefined) {
               return;
           }
-          this.wafermap.hoverWidth = this.wafermap.experimentalDataManager.dieDimensions.width
+          this.wafermap.hoverWidth = this.wafermap.computations.dieDimensions.width
               * this.wafermap.transform.k;
-          this.wafermap.hoverHeight = this.wafermap.experimentalDataManager.dieDimensions.height
+          this.wafermap.hoverHeight = this.wafermap.computations.dieDimensions.height
               * this.wafermap.transform.k;
           this.wafermap.hoverOpacity = this.wafermap.hoverDie === undefined
               ? HoverDieOpacity.hide
@@ -78534,17 +78260,17 @@ img.ProseMirror-separator {
       }
       calculateHoverTransform() {
           if (this.wafermap.hoverDie !== undefined) {
-              const scaledX = this.wafermap.experimentalDataManager.horizontalScale(this.wafermap.hoverDie.x);
+              const scaledX = this.wafermap.computations.horizontalScale(this.wafermap.hoverDie.x);
               if (scaledX === undefined) {
                   return '';
               }
-              const scaledY = this.wafermap.experimentalDataManager.verticalScale(this.wafermap.hoverDie.y);
+              const scaledY = this.wafermap.computations.verticalScale(this.wafermap.hoverDie.y);
               if (scaledY === undefined) {
                   return '';
               }
               const transformedPoint = this.wafermap.transform.apply([
-                  scaledX + this.wafermap.experimentalDataManager.margin.left,
-                  scaledY + this.wafermap.experimentalDataManager.margin.top
+                  scaledX + this.wafermap.computations.margin.left,
+                  scaledY + this.wafermap.computations.margin.top
               ]);
               return `translate(${transformedPoint[0]}, ${transformedPoint[1]})`;
           }
@@ -78704,10 +78430,8 @@ img.ProseMirror-separator {
                   ? Math.ceil
                   : Math.floor;
               // go to x and y scale to get the x,y values of the die.
-              const x = xRoundFunction(this.wafermap.experimentalDataManager.horizontalScale.invert(mousePosition.x
-                  - this.wafermap.experimentalDataManager.margin.left));
-              const y = yRoundFunction(this.wafermap.experimentalDataManager.verticalScale.invert(mousePosition.y
-                  - this.wafermap.experimentalDataManager.margin.top));
+              const x = xRoundFunction(this.wafermap.computations.horizontalScale.invert(mousePosition.x - this.wafermap.computations.margin.left));
+              const y = yRoundFunction(this.wafermap.computations.verticalScale.invert(mousePosition.y - this.wafermap.computations.margin.top));
               return { x, y };
           }
           return undefined;
@@ -78766,6 +78490,237 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * Computations calculates and stores different measures which are used in the Wafermap
+   */
+  class Computations {
+      get horizontalScale() {
+          return this._horizontalScale;
+      }
+      get verticalScale() {
+          return this._verticalScale;
+      }
+      get containerDimensions() {
+          return this._containerDimensions;
+      }
+      get dieDimensions() {
+          return this._dieDimensions;
+      }
+      get margin() {
+          return this._margin;
+      }
+      get verticalCoefficient() {
+          return this._verticalCoefficient;
+      }
+      get horizontalCoefficient() {
+          return this._horizontalCoefficient;
+      }
+      get horizontalConstant() {
+          return this._horizontalConstant;
+      }
+      get verticalConstant() {
+          return this._verticalConstant;
+      }
+      get labelsFontSize() {
+          return this._labelsFontSize;
+      }
+      get colorScale() {
+          return this._colorScale;
+      }
+      constructor(wafermap) {
+          this.wafermap = wafermap;
+          this.baseMarginPercentage = 0.04;
+          this.fontSizeFactor = 0.8;
+          this.colorScaleResolution = 10;
+      }
+      componentResizeUpdate() {
+          const canvasDimensions = {
+              width: this.wafermap.canvasWidth,
+              height: this.wafermap.canvasHeight
+          };
+          const canvasDiameter = Math.min(canvasDimensions.width, canvasDimensions.height);
+          const canvasMargin = {
+              top: (canvasDimensions.height - canvasDiameter) / 2,
+              right: (canvasDimensions.width - canvasDiameter) / 2,
+              bottom: (canvasDimensions.height - canvasDiameter) / 2,
+              left: (canvasDimensions.width - canvasDiameter) / 2
+          };
+          const baseMargin = {
+              top: canvasDiameter * this.baseMarginPercentage,
+              right: canvasDiameter * this.baseMarginPercentage,
+              bottom: canvasDiameter * this.baseMarginPercentage,
+              left: canvasDiameter * this.baseMarginPercentage
+          };
+          this._margin = this.calculateMarginAddition(baseMargin, canvasMargin);
+          this._containerDimensions = this.calculateContainerDimensions(canvasDimensions, this.margin);
+          this.inputDataUpdate();
+      }
+      inputDataUpdate() {
+          if (this._containerDimensions === undefined) {
+              this.componentResizeUpdate();
+              return;
+          }
+          const containerDiameter = Math.min(this._containerDimensions.width, this._containerDimensions.height);
+          const gridDimensions = this.gridDimensionsValidAndDefined()
+              ? this.calculateGridDimensionsFromBoundingBox()
+              : this.calculateGridDimensionsFromDies();
+          // this scale is used for positioning the dies on the canvas
+          const originLocation = this.wafermap.originLocation;
+          this._horizontalScale = this.createHorizontalScale(originLocation, gridDimensions, containerDiameter);
+          // this scale is used for positioning the dies on the canvas
+          this._verticalScale = this.createVerticalScale(originLocation, gridDimensions, containerDiameter);
+          this._horizontalCoefficient = this._horizontalScale(1) - this._horizontalScale(0);
+          this._verticalCoefficient = this._verticalScale(1) - this._verticalScale(0);
+          this._horizontalConstant = this._horizontalScale(0);
+          this._verticalConstant = this._verticalScale(0);
+          this._dieDimensions = {
+              width: Math.abs(this._horizontalScale(0) - this._horizontalScale(1)),
+              height: Math.abs(this._verticalScale(0) - this._verticalScale(1))
+          };
+          this.colorAndTextUpdate();
+      }
+      colorAndTextUpdate() {
+          if (this._dieDimensions === undefined) {
+              this.inputDataUpdate();
+              return;
+          }
+          this._labelsFontSize = this.calculateLabelsFontSize(this._dieDimensions, this.wafermap.maxCharacters);
+          this._colorScale = this.calculateColorScale();
+      }
+      gridDimensionsValidAndDefined() {
+          return (!this.wafermap.validity.invalidGridDimensions
+              && typeof this.wafermap.gridMinX === 'number'
+              && typeof this.wafermap.gridMinY === 'number'
+              && typeof this.wafermap.gridMaxX === 'number'
+              && typeof this.wafermap.gridMinX === 'number');
+      }
+      calculateGridDimensionsFromBoundingBox() {
+          const gridDimensions = { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
+          if (typeof this.wafermap.gridMaxY === 'number'
+              && typeof this.wafermap.gridMinY === 'number'
+              && typeof this.wafermap.gridMaxX === 'number'
+              && typeof this.wafermap.gridMinX === 'number') {
+              gridDimensions.origin.x = this.wafermap.gridMinX;
+              gridDimensions.origin.y = this.wafermap.gridMinY;
+              gridDimensions.rows = this.wafermap.gridMaxY - this.wafermap.gridMinY + 1;
+              gridDimensions.cols = this.wafermap.gridMaxX - this.wafermap.gridMinX + 1;
+          }
+          return gridDimensions;
+      }
+      calculateGridDimensionsFromDies() {
+          if (this.wafermap.diesTable === undefined) {
+              return { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
+          }
+          const colIndex = this.wafermap.diesTable
+              .getChild('colIndex')
+              .toArray();
+          const rowIndex = this.wafermap.diesTable
+              .getChild('rowIndex')
+              .toArray();
+          const minPoint = { x: colIndex[0], y: rowIndex[0] };
+          const maxPoint = { x: colIndex[0], y: rowIndex[0] };
+          // will replace iterating with arquero after fixing issues: https://github.com/uwdata/arquero/pull/346
+          for (let i = 0; i < colIndex.length; i++) {
+              if (colIndex[i] < minPoint.x) {
+                  minPoint.x = colIndex[i];
+              }
+              if (colIndex[i] > maxPoint.x) {
+                  maxPoint.x = colIndex[i];
+              }
+              if (rowIndex[i] < minPoint.y) {
+                  minPoint.y = rowIndex[i];
+              }
+              if (rowIndex[i] > maxPoint.y) {
+                  maxPoint.y = rowIndex[i];
+              }
+          }
+          return {
+              origin: minPoint,
+              rows: maxPoint.y - minPoint.y + 1,
+              cols: maxPoint.x - minPoint.x + 1
+          };
+      }
+      calculateContainerDimensions(canvasDimensions, margin) {
+          return {
+              width: canvasDimensions.width - margin.left - margin.right,
+              height: canvasDimensions.height - margin.top - margin.bottom
+          };
+      }
+      createHorizontalScale(originLocation, grid, containerWidth) {
+          const scale = linear();
+          if (originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.topLeft) {
+              return scale
+                  .domain([grid.origin.x, grid.origin.x + grid.cols])
+                  .range([0, containerWidth]);
+          }
+          return scale
+              .domain([grid.origin.x - 1, grid.origin.x + grid.cols - 1])
+              .range([containerWidth, 0]);
+      }
+      createVerticalScale(originLocation, grid, containerHeight) {
+          const scale = linear();
+          // html canvas has top-left origin https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#the_grid
+          // we need to flip the vertical scale
+          if (originLocation === WaferMapOriginLocation.bottomLeft
+              || originLocation === WaferMapOriginLocation.bottomRight) {
+              return scale
+                  .domain([grid.origin.y - 1, grid.origin.y + grid.rows - 1])
+                  .range([containerHeight, 0]);
+          }
+          return scale
+              .domain([grid.origin.y, grid.origin.y + grid.rows])
+              .range([0, containerHeight]);
+      }
+      calculateMarginAddition(baseMargin, addedMargin) {
+          return {
+              top: baseMargin.top + addedMargin.top,
+              right: baseMargin.right + addedMargin.right,
+              bottom: baseMargin.bottom + addedMargin.bottom,
+              left: baseMargin.left + addedMargin.left
+          };
+      }
+      calculateColorScale() {
+          if (this.wafermap.colorScaleMode === WaferMapColorScaleMode.linear) {
+              const values = this.wafermap.colorScale.values.map(item => +item);
+              const d3ColorScale = linear()
+                  .domain(values)
+                  .range(this.wafermap.colorScale.colors);
+              let min = values[0];
+              let max = values[0];
+              values.forEach(value => {
+                  if (value < min) {
+                      min = value;
+                  }
+                  if (value > max) {
+                      max = value;
+                  }
+              });
+              // the linear color scale will not be infinite but will be limited by the color scale resolution
+              const valueSamples = ticks(min, max, values.length * this.colorScaleResolution);
+              return valueSamples.map(value => {
+                  return {
+                      color: d3ColorScale(value),
+                      value
+                  };
+              });
+          }
+          // ordinal color categories have to be sorted by value
+          return this.wafermap.colorScale.colors
+              .map((color, index) => {
+              return {
+                  color,
+                  value: +this.wafermap.colorScale.values[index]
+              };
+          })
+              .sort((a, b) => a.value - b.value);
+      }
+      calculateLabelsFontSize(dieDimensions, maxCharacters) {
+          return Math.min(dieDimensions.height, (dieDimensions.width / (Math.max(2, maxCharacters) * 0.5))
+              * this.fontSizeFactor);
+      }
+  }
+
   /**
    * A nimble-styled WaferMap
    */
@@ -78787,8 +78742,8 @@ img.ProseMirror-separator {
           this.dieLabelsHidden = false;
           this.dieLabelsSuffix = '';
           this.colorScaleMode = WaferMapColorScaleMode.linear;
-          this.experimentalDataManager = new DataManager(this.asRequiredFieldsWaferMap);
-          this.dataManager = new DataManager$1(this.asRequiredFieldsWaferMap);
+          this.computations = new Computations(this.asRequiredFieldsWaferMap);
+          this.dataManager = new DataManager(this.asRequiredFieldsWaferMap);
           this.workerRenderer = new WorkerRenderer(this.asRequiredFieldsWaferMap);
           this.renderer = new RenderingModule(this.asRequiredFieldsWaferMap);
           /**
@@ -78857,24 +78812,22 @@ img.ProseMirror-separator {
               return;
           }
           if (this.waferMapUpdateTracker.requiresEventsUpdate) {
-              if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate
-                  || this.waferMapUpdateTracker.requiresScalesUpdate) {
-                  this.experimentalDataManager.updateComputations();
-                  await this.workerRenderer.setupWafer();
-                  await this.workerRenderer.drawWafer();
+              if (this.waferMapUpdateTracker.requiresComponentResizeUpdate) {
+                  this.computations.componentResizeUpdate();
               }
-              else if (this.waferMapUpdateTracker.requiresLabelsFontSizeUpdate
-                  || this.waferMapUpdateTracker.requiresDiesRenderInfoUpdate) {
-                  this.experimentalDataManager.updatePrerendering();
-                  await this.workerRenderer.drawWafer();
+              else if (this.waferMapUpdateTracker.requiresInputDataUpdate) {
+                  this.computations.inputDataUpdate();
               }
-              else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) {
-                  await this.workerRenderer.drawWafer();
+              else if (this.waferMapUpdateTracker.requiresColorAndTextUpdate) {
+                  this.computations.colorAndTextUpdate();
               }
+              const snapshot = this.createSnapshot();
+              if (this.waferMapUpdateTracker.requiresWorkerWaferSetup) {
+                  await this.workerRenderer.setupWafer(snapshot);
+              }
+              await this.workerRenderer.drawWafer(snapshot);
           }
-          else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
-              this.workerRenderer.renderHover();
-          }
+          this.workerRenderer.renderHover();
       }
       /**
        * @internal
@@ -78921,6 +78874,44 @@ img.ProseMirror-separator {
       isExperimentalUpdate() {
           return this.diesTable !== undefined;
       }
+      createSnapshot() {
+          const canvasDimensions = {
+              width: this.canvasWidth ?? 0,
+              height: this.canvasHeight ?? 0
+          };
+          const renderConfig = {
+              dieDimensions: this.computations.dieDimensions,
+              margin: this.computations.margin,
+              verticalCoefficient: this.computations.verticalCoefficient,
+              horizontalCoefficient: this.computations.horizontalCoefficient,
+              horizontalConstant: this.computations.horizontalConstant,
+              verticalConstant: this.computations.verticalConstant,
+              labelsFontSize: this.computations.labelsFontSize,
+              colorScale: this.computations.colorScale
+          };
+          const dieDimensions = this.computations.dieDimensions;
+          const transform = this.transform;
+          if (this.diesTable === undefined) {
+              return {
+                  canvasDimensions,
+                  renderConfig,
+                  dieDimensions,
+                  transform,
+                  columnIndices: Int32Array.from([]),
+                  rowIndices: Int32Array.from([])
+              };
+          }
+          const columnIndices = this.diesTable.getChild('colIndex').toArray();
+          const rowIndices = this.diesTable.getChild('rowIndex').toArray();
+          return {
+              canvasDimensions,
+              renderConfig,
+              columnIndices,
+              rowIndices,
+              dieDimensions,
+              transform
+          };
+      }
       validate() {
           this.waferMapValidator.validateGridDimensions();
           this.waferMapValidator.validateDiesTableSchema();