@ni/nimble-components 29.1.7 → 29.2.0

package/dist/all-components-bundle.js

@@ -16278,7 +16278,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Fri, 31 May 2024 15:10:22 GMT
+   * Generated on Tue, 04 Jun 2024 01:53:57 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -16709,9 +16709,9 @@
       return `${prefix}${uniqueIdCounter++}`;
   }
 
-  const template$H = html `<slot></slot>`;
+  const template$I = html `<slot></slot>`;
 
-  const styles$_ = css `
+  const styles$$ = css `
     ${display('contents')}
 `;
 
@@ -16826,8 +16826,8 @@
   ], ThemeProvider.prototype, "theme", void 0);
   const nimbleDesignSystemProvider = ThemeProvider.compose({
       baseName: 'theme-provider',
-      styles: styles$_,
-      template: template$H
+      styles: styles$$,
+      template: template$I
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -17012,7 +17012,7 @@
       }
   }
 
-  const styles$Z = css `
+  const styles$_ = css `
     @layer base, hover, focusVisible, active, disabled;
 
     @layer base {
@@ -17092,7 +17092,7 @@
 `;
 
   // prettier-ignore
-  const template$G = (_context, definition) => html `${
+  const template$H = (_context, definition) => html `${
 /* top-container div is necessary because setting contenteditable directly on the native anchor instead
    leaves it focusable, unlike the behavior you get when the anchor is _within_ a contenteditable element.
 */ ''}<div
@@ -17195,8 +17195,8 @@
   const nimbleAnchor = Anchor.compose({
       baseName: 'anchor',
       baseClass: Anchor$1,
-      template: template$G,
-      styles: styles$Z,
+      template: template$H,
+      styles: styles$_,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17308,7 +17308,7 @@
     padding: 0;
 `;
 
-  const styles$Y = css `
+  const styles$Z = css `
     @layer base, checked, hover, focusVisible, active, disabled, top;
 
     @layer base {
@@ -17586,8 +17586,8 @@
             }
         `));
 
-  const styles$X = css `
-    ${styles$Y}
+  const styles$Y = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17607,7 +17607,7 @@
     }
 `;
 
-  const template$F = (context, definition) => html `
+  const template$G = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17689,8 +17689,8 @@
   ], AnchorButton.prototype, "disabled", void 0);
   const nimbleAnchorButton = AnchorButton.compose({
       baseName: 'anchor-button',
-      template: template$F,
-      styles: styles$X,
+      template: template$G,
+      styles: styles$Y,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17698,7 +17698,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
   const anchorButtonTag = 'nimble-anchor-button';
 
-  const styles$W = css `
+  const styles$X = css `
     ${display('grid')}
 
     :host {
@@ -17782,7 +17782,7 @@
     }
 `;
 
-  const template$E = (context, definition) => html `
+  const template$F = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17883,8 +17883,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorMenuItem = AnchorMenuItem.compose({
       baseName: 'anchor-menu-item',
-      template: template$E,
-      styles: styles$W,
+      template: template$F,
+      styles: styles$X,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -17894,7 +17894,7 @@
       .register(nimbleAnchorMenuItem());
   const anchorMenuItemTag = 'nimble-anchor-menu-item';
 
-  const styles$V = css `
+  const styles$W = css `
     ${display('inline-flex')}
 
     :host {
@@ -18011,7 +18011,7 @@
     }
 `;
 
-  const template$D = (context, definition) => html `
+  const template$E = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -18063,15 +18063,15 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
-      template: template$D,
-      styles: styles$V,
+      template: template$E,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
-  const styles$U = css `
+  const styles$V = css `
     ${display('grid')}
 
     :host {
@@ -18093,7 +18093,7 @@
     }
 `;
 
-  const template$C = (context, definition) => html `
+  const template$D = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18299,8 +18299,8 @@
   applyMixins(AnchorTabs, StartEnd);
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
-      template: template$C,
-      styles: styles$U,
+      template: template$D,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18316,7 +18316,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$T = css `
+  const styles$U = css `
     ${display('block')}
 
     :host {
@@ -18422,7 +18422,7 @@
     }
 `;
 
-  const template$B = (context, definition) => html `
+  const template$C = (context, definition) => html `
     <template
         role="treeitem"
         slot="${x => (x.isNestedItem() ? 'item' : null)}"
@@ -18559,8 +18559,8 @@
   // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
-      template: template$B,
-      styles: styles$T,
+      template: template$C,
+      styles: styles$U,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18576,7 +18576,7 @@
       zIndex1000: '1000'
   };
 
-  const styles$S = css `
+  const styles$T = css `
     ${display('block')}
 
     :host {
@@ -18607,7 +18607,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$S
+      styles: styles$T
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18687,7 +18687,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$R = css `
+  const styles$S = css `
     ${display('flex')}
 
     :host {
@@ -18802,12 +18802,12 @@
             }
         `));
 
-  const styles$Q = css `
-    ${styles$Y}
+  const styles$R = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 `;
 
-  const template$A = (context, definition) => html `
+  const template$B = (context, definition) => html `
     <button
         class="control"
         part="control"
@@ -18898,8 +18898,8 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$A,
-      styles: styles$Q,
+      template: template$B,
+      styles: styles$R,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19650,13 +19650,13 @@
   };
 
   // Avoiding any whitespace in the template because this is an inline element
-  const template$z = html `<div
+  const template$A = html `<div
     class="icon"
     aria-hidden="true"
     :innerHTML=${x => x.icon.data}
 ></div>`;
 
-  const styles$P = css `
+  const styles$Q = css `
     ${display('inline-flex')}
 
     :host {
@@ -19709,8 +19709,8 @@
   const registerIcon = (baseName, iconClass) => {
       const composedIcon = iconClass.compose({
           baseName,
-          template: template$z,
-          styles: styles$P
+          template: template$A,
+          styles: styles$Q
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
   };
@@ -19823,7 +19823,7 @@
   }).withDefault(coreLabelDefaults.filterNoResultsLabel);
 
   // prettier-ignore
-  const template$y = html `
+  const template$z = html `
     <${themeProviderTag} theme="${Theme.color}">
         <div class="container"
             role="status"
@@ -19941,12 +19941,12 @@
   applyMixins(Banner, ARIAGlobalStatesAndProperties);
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
-      template: template$y,
-      styles: styles$R
+      template: template$z,
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
-  const styles$O = css `
+  const styles$P = css `
     ${display('inline-block')}
 
     :host {
@@ -19987,11 +19987,11 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$O
+      styles: styles$P
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
-  const styles$N = css `
+  const styles$O = css `
     ${display('inline-flex')}
 
     :host {
@@ -20069,14 +20069,14 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$N,
+      styles: styles$O,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleBreadcrumbItem());
 
-  const styles$M = css `
+  const styles$N = css `
     ${display('flex')}
 
     :host {
@@ -20100,7 +20100,7 @@
     }
 `;
 
-  const template$x = html `
+  const template$y = html `
     <section aria-labelledby="title-slot">
         <span id="title-slot"><slot name="title"></slot></span>
         <slot></slot>
@@ -20115,12 +20115,12 @@
   const nimbleCard = Card.compose({
       baseName: 'card',
       baseClass: Card$1,
-      template: template$x,
-      styles: styles$M
+      template: template$y,
+      styles: styles$N
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCard());
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('inline-flex')}
 
     :host {
@@ -20279,14 +20279,14 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$L,
+      styles: styles$M,
       shadowOptions: {
           delegatesFocus: true
       }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('inline-flex')}
 
     :host {
@@ -20395,7 +20395,7 @@
     }
 `;
 
-  const template$w = (_context, definition) => html `
+  const template$x = (_context, definition) => html `
     <template
         role="checkbox"
         aria-checked="${x => x.checked}"
@@ -20444,16 +20444,16 @@
   const nimbleCheckbox = Checkbox.compose({
       baseName: 'checkbox',
       baseClass: Checkbox$1,
-      template: template$w,
-      styles: styles$K,
+      template: template$x,
+      styles: styles$L,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = 'nimble-checkbox';
 
-  const styles$J = css `
-    ${styles$Y}
+  const styles$K = css `
+    ${styles$Z}
     ${buttonAppearanceVariantStyles}
 
     @layer checked {
@@ -20502,7 +20502,7 @@
 
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
-  const template$v = (context, definition) => html `
+  const template$w = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -20598,8 +20598,8 @@
   applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
-      template: template$v,
-      styles: styles$J,
+      template: template$w,
+      styles: styles$K,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20636,7 +20636,7 @@
       block: 'block'
   };
 
-  const styles$I = css `
+  const styles$J = css `
     ${display('inline-flex')}
 
     :host {
@@ -20856,7 +20856,7 @@
             }
         `));
 
-  const styles$H = css `
+  const styles$I = css `
     .error-icon {
         display: none;
     }
@@ -20903,9 +20903,9 @@
       standard: 'standard'
   };
 
-  const styles$G = css `
+  const styles$H = css `
+    ${styles$J}
     ${styles$I}
-    ${styles$H}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -21041,7 +21041,7 @@
   }
 
   // prettier-ignore
-  const template$u = (context, definition) => html `
+  const template$v = (context, definition) => html `
     <template
         aria-disabled="${x => x.ariaDisabled}"
         autocomplete="${x => x.autocomplete}"
@@ -21102,7 +21102,7 @@
                 ?disabled="${x => x.disabled}"
                 ${ref('listbox')}
             >
-                <slot
+                <slot name="option"
                     ${slotted({
     filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n),
     flatten: true,
@@ -21746,8 +21746,8 @@
   const nimbleCombobox = Combobox.compose({
       baseName: 'combobox',
       baseClass: FormAssociatedCombobox,
-      template: template$u,
-      styles: styles$G,
+      template: template$v,
+      styles: styles$H,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -21792,7 +21792,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('grid')}
 
     dialog {
@@ -21898,7 +21898,7 @@
             }
         `));
 
-  const template$t = html `
+  const template$u = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -22046,13 +22046,13 @@
   applyMixins(Dialog, ARIAGlobalStatesAndProperties);
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
-      template: template$t,
-      styles: styles$F,
+      template: template$u,
+      styles: styles$G,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-  const styles$E = css `
+  const styles$F = css `
     ${display('block')}
 
     :host {
@@ -22205,7 +22205,7 @@
             }
         `));
 
-  const template$s = html `
+  const template$t = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -22348,8 +22348,8 @@
   applyMixins(Drawer, ARIAGlobalStatesAndProperties);
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
-      template: template$s,
-      styles: styles$E
+      template: template$t,
+      styles: styles$F
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -24579,7 +24579,7 @@
       }
   }
 
-  const styles$D = css `
+  const styles$E = css `
     ${display('none')}
 `;
 
@@ -24628,7 +24628,7 @@
   ], LabelProviderCore.prototype, "filterNoResults", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -24795,13 +24795,13 @@
   ], LabelProviderTable.prototype, "groupRowPlaceholderEmpty", void 0);
   const nimbleLabelProviderTable = LabelProviderTable.compose({
       baseName: 'label-provider-table',
-      styles: styles$D
+      styles: styles$E
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleLabelProviderTable());
 
-  const styles$C = css `
+  const styles$D = css `
     ${display('flex')}
 
     :host {
@@ -24878,7 +24878,7 @@
    * @public
    */
   // prettier-ignore
-  const template$r = (context, definition) => html `
+  const template$s = (context, definition) => html `
     <template
         aria-checked="${x => x.ariaChecked}"
         aria-disabled="${x => x.ariaDisabled}"
@@ -24889,6 +24889,7 @@
     .filter(Boolean)
     .join(' ')}"
         role="option"
+        slot="option"
     >
         ${startSlotTemplate(context, definition)}
         <span
@@ -24973,12 +24974,228 @@
   const nimbleListOption = ListOption.compose({
       baseName: 'list-option',
       baseClass: ListboxOption,
-      template: template$r,
-      styles: styles$C
+      template: template$s,
+      styles: styles$D
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   const listOptionTag = 'nimble-list-option';
 
+  const styles$C = css `
+    ${display('flex')}
+
+    :host {
+        cursor: default;
+        flex-direction: column;
+    }
+
+    :host([visually-hidden]) {
+        display: none;
+    }
+
+    :host::after,
+    :host::before {
+        content: ' ';
+        margin-top: ${smallPadding};
+        margin-bottom: ${smallPadding};
+        border-bottom: ${borderColor} 2px solid;
+        opacity: 0.1;
+        display: none;
+    }
+
+    :host([top-separator-visible])::before,
+    :host([bottom-separator-visible])::after {
+        display: block;
+    }
+
+    slot[name='option']::slotted([role='option']) {
+        background-color: transparent;
+    }
+
+    slot[name='option']::slotted([role='option']:hover) {
+        background-color: ${fillHoverColor};
+    }
+
+    slot[name='option']::slotted([role='option'][active-option]) {
+        background-color: ${fillSelectedColor};
+    }
+
+    slot[name='option']::slotted([role='option'][active-option]:hover) {
+        background-color: ${fillHoverSelectedColor};
+    }
+
+    .label-display {
+        font: ${groupHeaderFont};
+        text-transform: ${groupHeaderTextTransform};
+        color: ${groupHeaderFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-left: ${smallPadding};
+        margin-bottom: ${smallPadding};
+    }
+
+    .label-slot.hidden {
+        display: none;
+    }
+`;
+
+  const isListOption$1 = (n) => {
+      return n instanceof ListOption;
+  };
+  // prettier-ignore
+  const template$r = html `
+<template
+    role="group"
+    aria-label="${x => x.labelContent}"
+    slot="option"
+>
+    <span ${overflow('hasOverflow')} 
+        class="label-display"
+        aria-hidden="true"
+        title=${x => (x.hasOverflow && x.labelContent ? x.labelContent : null)}
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        ${when(x => (typeof x.label === 'string'), html `${x => x.label}`)} 
+        <slot ${ref('labelSlot')}
+            class="label-slot ${x => (typeof x.label === 'string' ? 'hidden' : '')}"
+        >
+        </slot>
+    </span>
+    <span class="content" part="content" role="none">
+        <slot name="option"
+        ${slotted({
+    flatten: true,
+    filter: (n) => isListOption$1(n),
+    property: 'listOptions'
+})}
+></slot>
+    </span>
+</template>
+`;
+
+  /**
+   * A nimble-styled HTML listbox option group
+   */
+  class ListOptionGroup extends FoundationElement {
+      constructor() {
+          super(...arguments);
+          /**
+           * The hidden state of the element.
+           *
+           * @public
+           * @defaultValue - false
+           * @remarks
+           * HTML Attribute: hidden
+           */
+          this.hidden = false;
+          /**
+           * @internal
+           * This attribute is required to allow use-cases that offer dynamic filtering
+           * (like the Select) to visually hide groups that are filtered out, but still
+           * allow users to use the native 'hidden' attribute without it being affected
+           * by the filtering process.
+           */
+          this.visuallyHidden = false;
+          /**
+           * @internal
+           */
+          this.topSeparatorVisible = false;
+          /**
+           * @internal
+           */
+          this.bottomSeparatorVisible = false;
+          /** @internal */
+          this.hasOverflow = false;
+          this.hiddenOptions = new Set();
+      }
+      /** @internal */
+      get labelContent() {
+          if (this.label) {
+              return this.label;
+          }
+          if (!this.$fastController.isConnected) {
+              return '';
+          }
+          const nodes = this.labelSlot.assignedNodes();
+          return nodes
+              .filter(node => node.textContent?.trim() !== '')
+              .map(node => node.textContent?.trim())
+              .join(' ');
+      }
+      /**
+       * @internal
+       */
+      clickHandler(e) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+      }
+      /**
+       * @internal
+       */
+      handleChange(source, propertyName) {
+          if (source instanceof ListOption
+              && (propertyName === 'hidden' || propertyName === 'visuallyHidden')) {
+              if (source.hidden || source.visuallyHidden) {
+                  this.hiddenOptions.add(source);
+              }
+              else {
+                  this.hiddenOptions.delete(source);
+              }
+              this.visuallyHidden = this.hiddenOptions.size === this.listOptions.length;
+          }
+      }
+      listOptionsChanged(prev, next) {
+          this.hiddenOptions.clear();
+          next.filter(o => o.hidden || o.visuallyHidden).forEach(o => this.hiddenOptions.add(o));
+          prev?.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.unsubscribe(this, 'hidden');
+              notifier.unsubscribe(this, 'visuallyHidden');
+          });
+          let allOptionsHidden = true;
+          next?.forEach(o => {
+              const notifier = Observable.getNotifier(o);
+              notifier.subscribe(this, 'hidden');
+              notifier.subscribe(this, 'visuallyHidden');
+              allOptionsHidden = allOptionsHidden && (o.hidden || o.visuallyHidden);
+          });
+          this.visuallyHidden = next.length === 0 || allOptionsHidden;
+      }
+  }
+  __decorate$1([
+      attr
+  ], ListOptionGroup.prototype, "label", void 0);
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], ListOptionGroup.prototype, "hidden", void 0);
+  __decorate$1([
+      attr({ attribute: 'visually-hidden', mode: 'boolean' })
+  ], ListOptionGroup.prototype, "visuallyHidden", void 0);
+  __decorate$1([
+      attr({ attribute: 'top-separator-visible', mode: 'boolean' })
+  ], ListOptionGroup.prototype, "topSeparatorVisible", void 0);
+  __decorate$1([
+      attr({ attribute: 'bottom-separator-visible', mode: 'boolean' })
+  ], ListOptionGroup.prototype, "bottomSeparatorVisible", void 0);
+  __decorate$1([
+      observable
+  ], ListOptionGroup.prototype, "hasOverflow", void 0);
+  __decorate$1([
+      observable
+  ], ListOptionGroup.prototype, "listOptions", void 0);
+  __decorate$1([
+      volatile
+  ], ListOptionGroup.prototype, "labelContent", null);
+  const nimbleListOptionGroup = ListOptionGroup.compose({
+      baseName: 'list-option-group',
+      baseClass: FoundationElement,
+      template: template$r,
+      styles: styles$C
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleListOptionGroup());
+
   /**
    * Base class for mapping configuration elements
    */
@@ -25604,7 +25821,7 @@
 
   const styles$x = css `
     ${display('inline-block')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -43737,7 +43954,7 @@ img.ProseMirror-separator {
   }).withDefault(richTextLabelDefaults.richTextToggleNumberedListLabel);
 
   const styles$t = css `
-    ${styles$I}
+    ${styles$J}
 
     :host {
         height: auto;
@@ -43775,8 +43992,8 @@ img.ProseMirror-separator {
                 @click="${(x, c) => x.clickHandler(c.event)}"
                 ?disabled="${x => x.disabled}"
             >
-                <slot
-                    ${slotted({ filter: (n) => n instanceof HTMLElement && ListboxElement.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
+                <slot name="option"
+                    ${slotted({ filter: (n) => n instanceof HTMLElement && Listbox.slottedOptionFilter(n), flatten: true, property: 'slottedOptions' })}
                 >
                 </slot>
             </div>
@@ -44129,7 +44346,7 @@ img.ProseMirror-separator {
 
   const styles$s = css `
     ${display('inline-flex')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -52912,9 +53129,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"]; }
           },
@@ -53168,6 +53385,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.
@@ -53375,6 +53593,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
@@ -53439,9 +53669,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.
@@ -53472,7 +53715,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);
@@ -53484,7 +53727,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));
               })) {
@@ -53497,7 +53740,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
@@ -53505,11 +53748,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)
@@ -53615,7 +53858,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);
       }
@@ -59006,8 +59249,8 @@ img.ProseMirror-separator {
       .register(nimbleRichTextViewer());
 
   const styles$q = css `
+    ${styles$J}
     ${styles$I}
-    ${styles$H}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -59145,6 +59388,12 @@ img.ProseMirror-separator {
             }
         `));
 
+  const isListOption = (el) => {
+      return el instanceof ListOption;
+  };
+  const isListOptionGroup = (n) => {
+      return n instanceof ListOptionGroup;
+  };
   /* eslint-disable @typescript-eslint/indent */
   // prettier-ignore
   const template$l = (context, definition) => html `
@@ -59246,8 +59495,9 @@ img.ProseMirror-separator {
                     <div ${ref('scrollableRegion')}
                         class="scrollable-region">
                         <slot
+                            name="option"
                             ${slotted({
-    filter: (n) => n instanceof HTMLElement && isListboxOption(n),
+    filter: (n) => n instanceof HTMLElement && (isListOption(n) || isListOptionGroup(n)),
     flatten: true,
     property: 'slottedOptions',
 })}
@@ -59282,15 +59532,15 @@ img.ProseMirror-separator {
       }
   }
 
-  const isNimbleListOption = (el) => {
-      return el instanceof ListOption;
-  };
   const isOptionSelectable = (el) => {
       return !el.visuallyHidden && !el.disabled && !el.hidden;
   };
   const isOptionPlaceholder = (el) => {
       return el.disabled && el.hidden;
   };
+  const isOptionOrGroupVisible = (el) => {
+      return !el.visuallyHidden && !el.hidden;
+  };
   /**
    * A nimble-styled HTML select.
    */
@@ -59411,13 +59661,25 @@ img.ProseMirror-separator {
               notifier.unsubscribe(this, 'hidden');
               notifier.unsubscribe(this, 'disabled');
           });
-          super.slottedOptionsChanged(prev, next);
-          this.options.forEach(o => {
+          prev?.filter(isListOptionGroup).forEach(el => {
+              const notifier = Observable.getNotifier(el);
+              notifier.unsubscribe(this, 'hidden');
+              notifier.unsubscribe(this, 'visuallyHidden');
+          });
+          const options = this.getSlottedOptions(next);
+          super.slottedOptionsChanged(prev, options);
+          options.forEach(o => {
               const notifier = Observable.getNotifier(o);
               notifier.subscribe(this, 'value');
               notifier.subscribe(this, 'hidden');
               notifier.subscribe(this, 'disabled');
           });
+          next?.filter(isListOptionGroup).forEach(el => {
+              this.updateAdjacentSeparatorState(el);
+              const notifier = Observable.getNotifier(el);
+              notifier.subscribe(this, 'hidden');
+              notifier.subscribe(this, 'visuallyHidden');
+          });
           this.setProxyOptions();
           this.updateValue();
           // We need to force an update to the filteredOptions observable
@@ -59470,8 +59732,7 @@ img.ProseMirror-separator {
                   break;
               }
               case 'selected': {
-                  if (isNimbleListOption(sourceElement)
-                      && sourceElement.selected) {
+                  if (isListOption(sourceElement) && sourceElement.selected) {
                       this.selectedIndex = this.options.indexOf(sourceElement);
                   }
                   else {
@@ -59480,12 +59741,27 @@ img.ProseMirror-separator {
                   break;
               }
               case 'hidden': {
-                  if (isNimbleListOption(sourceElement)) {
+                  if (isListOption(sourceElement)) {
                       sourceElement.visuallyHidden = sourceElement.hidden;
+                      this.updateAdjacentSeparatorState(sourceElement);
+                  }
+                  else if (isListOptionGroup(sourceElement)) {
+                      sourceElement.listOptions.forEach(e => {
+                          e.visuallyHidden = sourceElement.hidden;
+                      });
+                      this.updateAdjacentSeparatorState(sourceElement);
                   }
+                  this.filterOptions();
                   this.updateDisplayValue();
                   break;
               }
+              case 'visuallyHidden': {
+                  if (isListOptionGroup(sourceElement)
+                      || isListOption(sourceElement)) {
+                      this.updateAdjacentSeparatorState(sourceElement);
+                  }
+                  break;
+              }
               case 'disabled': {
                   this.updateDisplayValue();
                   break;
@@ -59738,8 +60014,7 @@ img.ProseMirror-separator {
           const startIndex = this.openActiveIndex ?? this.selectedIndex;
           for (let i = startIndex + 1; i < this.options.length; i++) {
               const listOption = this.options[i];
-              if (isNimbleListOption(listOption)
-                  && isOptionSelectable(listOption)) {
+              if (isListOption(listOption) && isOptionSelectable(listOption)) {
                   this.setActiveOption(i);
                   break;
               }
@@ -59754,8 +60029,7 @@ img.ProseMirror-separator {
           const startIndex = this.openActiveIndex ?? this.selectedIndex;
           for (let i = startIndex - 1; i >= 0; i--) {
               const listOption = this.options[i];
-              if (isNimbleListOption(listOption)
-                  && isOptionSelectable(listOption)) {
+              if (isListOption(listOption) && isOptionSelectable(listOption)) {
                   this.setActiveOption(i);
                   break;
               }
@@ -59765,14 +60039,14 @@ img.ProseMirror-separator {
        * @internal
        */
       selectFirstOption() {
-          const newActiveOptionIndex = this.options.findIndex(o => isNimbleListOption(o) && isOptionSelectable(o));
+          const newActiveOptionIndex = this.options.findIndex(o => isListOption(o) && isOptionSelectable(o));
           this.setActiveOption(newActiveOptionIndex);
       }
       /**
        * @internal
        */
       selectLastOption() {
-          const newActiveOptionIndex = findLastIndex(this.options, o => isNimbleListOption(o) && isOptionSelectable(o));
+          const newActiveOptionIndex = findLastIndex(this.options, o => isListOption(o) && isOptionSelectable(o));
           this.setActiveOption(newActiveOptionIndex);
       }
       /**
@@ -59840,7 +60114,7 @@ img.ProseMirror-separator {
               return;
           }
           const activeOption = this.options[this.openActiveIndex ?? this.selectedIndex];
-          if (isNimbleListOption(activeOption)) {
+          if (isListOption(activeOption)) {
               activeOption.activeOption = false;
           }
           this.openActiveIndex = undefined;
@@ -59883,7 +60157,7 @@ img.ProseMirror-separator {
        */
       setDefaultSelectedOption() {
           const options = this.options
-              ?? Array.from(this.children).filter(o => isNimbleListOption(o));
+              ?? Array.from(this.children).filter(o => isListOption(o));
           const optionIsSelected = (option) => {
               return option.hasAttribute('selected') || option.selected;
           };
@@ -59917,16 +60191,28 @@ img.ProseMirror-separator {
               this.selectedIndex = 0;
           }
       }
+      getSlottedOptions(slottedElements) {
+          const options = [];
+          slottedElements?.forEach(el => {
+              if (isListOption(el)) {
+                  options.push(el);
+              }
+              else if (isListOptionGroup(el)) {
+                  options.push(...this.getGroupOptions(el));
+              }
+          });
+          return options;
+      }
       setActiveOption(newActiveIndex) {
           const activeOption = this.options[newActiveIndex];
           if (this.open) {
-              if (isNimbleListOption(activeOption)) {
+              if (isListOption(activeOption)) {
                   activeOption.activeOption = true;
               }
               const previousActiveIndex = this.openActiveIndex ?? this.selectedIndex;
               const previousActiveOption = this.options[previousActiveIndex];
               if (previousActiveIndex !== newActiveIndex
-                  && isNimbleListOption(previousActiveOption)) {
+                  && isListOption(previousActiveOption)) {
                   previousActiveOption.activeOption = false;
               }
               this.openActiveIndex = newActiveIndex;
@@ -59980,32 +60266,110 @@ img.ProseMirror-separator {
               : Math.trunc(availableBottom);
           this.updateListboxMaxHeightCssVariable();
       }
+      updateAdjacentSeparatorState(element) {
+          const previousElement = this.getPreviousVisibleOptionOrGroup(element);
+          const nextElement = this.getNextVisibleOptionOrGroup(element);
+          if (isOptionOrGroupVisible(element)) {
+              const topSeparatorVisible = isListOption(previousElement);
+              this.setTopSeparatorState(element, topSeparatorVisible);
+              const bottomSeparatorVisible = nextElement !== null;
+              this.setBottomSeparatorState(element, bottomSeparatorVisible);
+              this.setBottomSeparatorState(previousElement, true);
+          }
+          else {
+              const nextTopSeparatorVisible = isListOption(previousElement);
+              this.setTopSeparatorState(nextElement, nextTopSeparatorVisible);
+              const previousBottomSeparatorVisible = nextElement !== null;
+              this.setBottomSeparatorState(previousElement, previousBottomSeparatorVisible);
+          }
+      }
+      setTopSeparatorState(element, visible) {
+          if (isListOptionGroup(element)) {
+              element.topSeparatorVisible = visible;
+          }
+      }
+      setBottomSeparatorState(element, visible) {
+          if (isListOptionGroup(element)) {
+              element.bottomSeparatorVisible = visible;
+          }
+      }
+      getPreviousVisibleOptionOrGroup(element) {
+          let previousElement = element.previousElementSibling;
+          while (previousElement) {
+              if ((isListOption(previousElement)
+                  || isListOptionGroup(previousElement))
+                  && isOptionOrGroupVisible(previousElement)) {
+                  return previousElement;
+              }
+              previousElement = previousElement.previousElementSibling;
+          }
+          return null;
+      }
+      getNextVisibleOptionOrGroup(element) {
+          let nextElement = element.nextElementSibling;
+          while (nextElement) {
+              if ((isListOption(nextElement) || isListOptionGroup(nextElement))
+                  && isOptionOrGroupVisible(nextElement)) {
+                  return nextElement;
+              }
+              nextElement = nextElement.nextElementSibling;
+          }
+          return null;
+      }
+      isOptionHiddenOrFilteredOut(option) {
+          if (option.hidden) {
+              return true;
+          }
+          return !this.filterMatchesText(option.text);
+      }
+      filterMatchesText(text) {
+          const filter = this.filter.toLowerCase();
+          const normalizedFilter = diacriticInsensitiveStringNormalizer(filter);
+          return diacriticInsensitiveStringNormalizer(text).includes(normalizedFilter);
+      }
       /**
        * Filter available options by text value.
        *
        * @public
        */
       filterOptions() {
-          const filter = this.filter.toLowerCase();
-          if (filter) {
-              this.filteredOptions = this.options.filter(option => {
-                  const normalizedFilter = diacriticInsensitiveStringNormalizer(filter);
-                  return (!option.hidden
-                      && diacriticInsensitiveStringNormalizer(option.text).includes(normalizedFilter));
-              });
-          }
-          else {
-              this.filteredOptions = this.options.filter(option => !option.hidden);
+          if (!this.$fastController.isConnected) {
+              return;
           }
-          this.options.forEach(o => {
-              if (isNimbleListOption(o)) {
-                  if (!this.filteredOptions.includes(o)) {
-                      o.visuallyHidden = true;
+          const filteredOptions = [];
+          for (const element of this.slottedOptions) {
+              if (isListOptionGroup(element)) {
+                  if (element.hidden) {
+                      continue; // no need to process hidden groups
                   }
-                  else {
-                      o.visuallyHidden = false;
+                  const groupOptions = this.getGroupOptions(element);
+                  const groupMatchesFilter = this.filterMatchesText(element.labelContent);
+                  groupOptions.forEach(option => {
+                      option.visuallyHidden = groupMatchesFilter
+                          ? false
+                          : this.isOptionHiddenOrFilteredOut(option);
+                      if (!option.visuallyHidden) {
+                          filteredOptions.push(option);
+                      }
+                  });
+              }
+              else if (isListOption(element)) {
+                  element.visuallyHidden = this.isOptionHiddenOrFilteredOut(element);
+                  if (!element.visuallyHidden) {
+                      filteredOptions.push(element);
                   }
               }
+          }
+          this.filteredOptions = filteredOptions;
+      }
+      getGroupOptions(group) {
+          return Array.from(group.children)
+              .filter(el => isListOption(el))
+              .map(el => {
+              if (group.hidden && isListOption(el)) {
+                  el.visuallyHidden = true;
+              }
+              return el;
           });
       }
       /**
@@ -70710,7 +71074,7 @@ img.ProseMirror-separator {
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -71056,7 +71420,7 @@ img.ProseMirror-separator {
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$H}
+    ${styles$I}
 
     :host {
         font: ${bodyFont};
@@ -76724,7 +77088,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;
       }
@@ -76831,12 +77195,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;
       }
@@ -76873,7 +77237,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();
@@ -76897,258 +77261,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();
-      }
   }
 
   /**
@@ -77307,8 +77419,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')
@@ -77317,15 +77428,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')
@@ -77334,6 +77465,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');
       }
@@ -77344,6 +77483,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');
       }
@@ -78374,7 +78521,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;
   /**
@@ -78404,66 +78551,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
@@ -78472,17 +78598,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]})`;
           }
@@ -78642,10 +78768,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;
@@ -78704,6 +78828,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
    */
@@ -78725,8 +79080,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);
           /**
@@ -78795,24 +79150,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
@@ -78859,6 +79212,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();