@ni/nimble-components 27.0.0 → 27.0.2

package/dist/all-components-bundle.js

@@ -4532,7 +4532,7 @@
           const context = this.context;
           for (let i = 0, ii = params.length; i < ii; ++i) {
               current = params[i];
-              if (!isObject$1(current)) {
+              if (!isObject$2(current)) {
                   continue;
               }
               if (isRegistry(current)) {
@@ -4547,7 +4547,7 @@
                   jj = keys.length;
                   for (; j < jj; ++j) {
                       value = current[keys[j]];
-                      if (!isObject$1(value)) {
+                      if (!isObject$2(value)) {
                           continue;
                       }
                       // note: we could remove this if-branch and call this.register directly
@@ -4882,7 +4882,7 @@
       return [resolver.resolve(handler, requestor)];
   }
   const defaultFriendlyName = "(anonymous)";
-  function isObject$1(value) {
+  function isObject$2(value) {
       return (typeof value === "object" && value !== null) || typeof value === "function";
   }
   /**
@@ -16333,7 +16333,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Wed, 24 Apr 2024 16:04:06 GMT
+   * Generated on Fri, 26 Apr 2024 18:14:56 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -30485,7 +30485,7 @@
           return null;
       return inside;
   }
-  function wrap(tr, range, wrappers) {
+  function wrap$1(tr, range, wrappers) {
       let content = Fragment.empty;
       for (let i = wrappers.length - 1; i >= 0; i--) {
           if (content.size) {
@@ -31403,7 +31403,7 @@
       probably be computed with [`findWrapping`](https://prosemirror.net/docs/ref/#transform.findWrapping).
       */
       wrap(range, wrappers) {
-          wrap(this, range, wrappers);
+          wrap$1(this, range, wrappers);
           return this;
       }
       /**
@@ -50640,7 +50640,7 @@ img.ProseMirror-separator {
 
   function _class (obj) { return Object.prototype.toString.call(obj) }
   function isString (obj) { return _class(obj) === '[object String]' }
-  function isObject (obj) { return _class(obj) === '[object Object]' }
+  function isObject$1 (obj) { return _class(obj) === '[object Object]' }
   function isRegExp (obj) { return _class(obj) === '[object RegExp]' }
   function isFunction$1 (obj) { return _class(obj) === '[object Function]' }
 
@@ -50802,7 +50802,7 @@ img.ProseMirror-separator {
 
       self.__compiled__[name] = compiled;
 
-      if (isObject(val)) {
+      if (isObject$1(val)) {
         if (isRegExp(val.validate)) {
           compiled.validate = createValidator(val.validate);
         } else if (isFunction$1(val.validate)) {
@@ -74747,7 +74747,8 @@ img.ProseMirror-separator {
                 </g>
             </g>
         </svg>
-        <canvas class="wafer-map-canvas" ${ref('canvas')}></canvas>
+        <canvas class="main-wafer" ${ref('canvas')}></canvas>
+        <canvas class="worker-wafer" ${ref('workerCanvas')}></canvas>
         <svg class="hover-layer">
             <rect
                 class="hover-rect ${x => x.hoverOpacity}"
@@ -74766,6 +74767,16 @@ img.ProseMirror-separator {
         height: 500px;
     }
 
+    .main-wafer {
+        display: inline-block;
+        position: absolute;
+    }
+
+    .worker-wafer {
+        display: inline-block;
+        position: absolute;
+    }
+
     .wafer-map-container {
         width: 100%;
         height: 100%;
@@ -74812,11 +74823,6 @@ img.ProseMirror-separator {
         stroke: ${borderColor};
     }
 
-    .wafer-map-canvas {
-        display: inline-block;
-        position: absolute;
-    }
-
     .hover-layer {
         position: absolute;
         pointer-events: none;
@@ -76011,9 +76017,11 @@ img.ProseMirror-separator {
       updateDiesRenderInfo() {
           this.d3ColorScale = this.createD3ColorScale(this.wafermap.colorScale, this.wafermap.colorScaleMode);
           const isDieRenderInfo = (info) => info !== null;
-          this._diesRenderInfo = this.wafermap.dies
-              .map(die => this.computeDieRenderInfo(die))
-              .filter(isDieRenderInfo);
+          if (this.wafermap.diesTable === undefined) {
+              this._diesRenderInfo = this.wafermap.dies
+                  .map(die => this.computeDieRenderInfo(die))
+                  .filter(isDieRenderInfo);
+          }
       }
       computeDieRenderInfo(die) {
           const margin = this.wafermap.dataManager.margin;
@@ -76615,17 +76623,28 @@ img.ProseMirror-separator {
        * After the update is finished, all the tracked items are reset.
        */
       queueUpdate() {
-          if (!this.wafermap.$fastController.isConnected) {
+          if (!this.wafermap.$fastController.isConnected || this.updateQueued) {
               return;
           }
-          if (!this.updateQueued) {
-              this.updateQueued = true;
+          this.updateQueued = true;
+          if (this.wafermap.currentTask === undefined) {
               DOM.queueUpdate(() => {
                   this.wafermap.update();
                   this.untrackAll();
                   this.updateQueued = false;
               });
           }
+          else {
+              void (async () => {
+                  await this.wafermap.currentTask;
+                  DOM.queueUpdate(() => {
+                      this.wafermap.update();
+                      this.untrackAll();
+                      this.updateQueued = false;
+                      this.wafermap.currentTask = undefined;
+                  });
+              })();
+          }
       }
   }
 
@@ -77285,6 +77304,367 @@ img.ProseMirror-separator {
       }
   }
 
+  /**
+   * @license
+   * Copyright 2019 Google LLC
+   * SPDX-License-Identifier: Apache-2.0
+   */
+  const proxyMarker = Symbol("Comlink.proxy");
+  const createEndpoint = Symbol("Comlink.endpoint");
+  const releaseProxy = Symbol("Comlink.releaseProxy");
+  const finalizer = Symbol("Comlink.finalizer");
+  const throwMarker = Symbol("Comlink.thrown");
+  const isObject = (val) => (typeof val === "object" && val !== null) || typeof val === "function";
+  /**
+   * Internal transfer handle to handle objects marked to proxy.
+   */
+  const proxyTransferHandler = {
+      canHandle: (val) => isObject(val) && val[proxyMarker],
+      serialize(obj) {
+          const { port1, port2 } = new MessageChannel();
+          expose(obj, port1);
+          return [port2, [port2]];
+      },
+      deserialize(port) {
+          port.start();
+          return wrap(port);
+      },
+  };
+  /**
+   * Internal transfer handler to handle thrown exceptions.
+   */
+  const throwTransferHandler = {
+      canHandle: (value) => isObject(value) && throwMarker in value,
+      serialize({ value }) {
+          let serialized;
+          if (value instanceof Error) {
+              serialized = {
+                  isError: true,
+                  value: {
+                      message: value.message,
+                      name: value.name,
+                      stack: value.stack,
+                  },
+              };
+          }
+          else {
+              serialized = { isError: false, value };
+          }
+          return [serialized, []];
+      },
+      deserialize(serialized) {
+          if (serialized.isError) {
+              throw Object.assign(new Error(serialized.value.message), serialized.value);
+          }
+          throw serialized.value;
+      },
+  };
+  /**
+   * Allows customizing the serialization of certain values.
+   */
+  const transferHandlers = new Map([
+      ["proxy", proxyTransferHandler],
+      ["throw", throwTransferHandler],
+  ]);
+  function isAllowedOrigin(allowedOrigins, origin) {
+      for (const allowedOrigin of allowedOrigins) {
+          if (origin === allowedOrigin || allowedOrigin === "*") {
+              return true;
+          }
+          if (allowedOrigin instanceof RegExp && allowedOrigin.test(origin)) {
+              return true;
+          }
+      }
+      return false;
+  }
+  function expose(obj, ep = globalThis, allowedOrigins = ["*"]) {
+      ep.addEventListener("message", function callback(ev) {
+          if (!ev || !ev.data) {
+              return;
+          }
+          if (!isAllowedOrigin(allowedOrigins, ev.origin)) {
+              console.warn(`Invalid origin '${ev.origin}' for comlink proxy`);
+              return;
+          }
+          const { id, type, path } = Object.assign({ path: [] }, ev.data);
+          const argumentList = (ev.data.argumentList || []).map(fromWireValue);
+          let returnValue;
+          try {
+              const parent = path.slice(0, -1).reduce((obj, prop) => obj[prop], obj);
+              const rawValue = path.reduce((obj, prop) => obj[prop], obj);
+              switch (type) {
+                  case "GET" /* MessageType.GET */:
+                      {
+                          returnValue = rawValue;
+                      }
+                      break;
+                  case "SET" /* MessageType.SET */:
+                      {
+                          parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);
+                          returnValue = true;
+                      }
+                      break;
+                  case "APPLY" /* MessageType.APPLY */:
+                      {
+                          returnValue = rawValue.apply(parent, argumentList);
+                      }
+                      break;
+                  case "CONSTRUCT" /* MessageType.CONSTRUCT */:
+                      {
+                          const value = new rawValue(...argumentList);
+                          returnValue = proxy(value);
+                      }
+                      break;
+                  case "ENDPOINT" /* MessageType.ENDPOINT */:
+                      {
+                          const { port1, port2 } = new MessageChannel();
+                          expose(obj, port2);
+                          returnValue = transfer(port1, [port1]);
+                      }
+                      break;
+                  case "RELEASE" /* MessageType.RELEASE */:
+                      {
+                          returnValue = undefined;
+                      }
+                      break;
+                  default:
+                      return;
+              }
+          }
+          catch (value) {
+              returnValue = { value, [throwMarker]: 0 };
+          }
+          Promise.resolve(returnValue)
+              .catch((value) => {
+              return { value, [throwMarker]: 0 };
+          })
+              .then((returnValue) => {
+              const [wireValue, transferables] = toWireValue(returnValue);
+              ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);
+              if (type === "RELEASE" /* MessageType.RELEASE */) {
+                  // detach and deactive after sending release response above.
+                  ep.removeEventListener("message", callback);
+                  closeEndPoint(ep);
+                  if (finalizer in obj && typeof obj[finalizer] === "function") {
+                      obj[finalizer]();
+                  }
+              }
+          })
+              .catch((error) => {
+              // Send Serialization Error To Caller
+              const [wireValue, transferables] = toWireValue({
+                  value: new TypeError("Unserializable return value"),
+                  [throwMarker]: 0,
+              });
+              ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);
+          });
+      });
+      if (ep.start) {
+          ep.start();
+      }
+  }
+  function isMessagePort(endpoint) {
+      return endpoint.constructor.name === "MessagePort";
+  }
+  function closeEndPoint(endpoint) {
+      if (isMessagePort(endpoint))
+          endpoint.close();
+  }
+  function wrap(ep, target) {
+      return createProxy(ep, [], target);
+  }
+  function throwIfProxyReleased(isReleased) {
+      if (isReleased) {
+          throw new Error("Proxy has been released and is not useable");
+      }
+  }
+  function releaseEndpoint(ep) {
+      return requestResponseMessage(ep, {
+          type: "RELEASE" /* MessageType.RELEASE */,
+      }).then(() => {
+          closeEndPoint(ep);
+      });
+  }
+  const proxyCounter = new WeakMap();
+  const proxyFinalizers = "FinalizationRegistry" in globalThis &&
+      new FinalizationRegistry((ep) => {
+          const newCount = (proxyCounter.get(ep) || 0) - 1;
+          proxyCounter.set(ep, newCount);
+          if (newCount === 0) {
+              releaseEndpoint(ep);
+          }
+      });
+  function registerProxy(proxy, ep) {
+      const newCount = (proxyCounter.get(ep) || 0) + 1;
+      proxyCounter.set(ep, newCount);
+      if (proxyFinalizers) {
+          proxyFinalizers.register(proxy, ep, proxy);
+      }
+  }
+  function unregisterProxy(proxy) {
+      if (proxyFinalizers) {
+          proxyFinalizers.unregister(proxy);
+      }
+  }
+  function createProxy(ep, path = [], target = function () { }) {
+      let isProxyReleased = false;
+      const proxy = new Proxy(target, {
+          get(_target, prop) {
+              throwIfProxyReleased(isProxyReleased);
+              if (prop === releaseProxy) {
+                  return () => {
+                      unregisterProxy(proxy);
+                      releaseEndpoint(ep);
+                      isProxyReleased = true;
+                  };
+              }
+              if (prop === "then") {
+                  if (path.length === 0) {
+                      return { then: () => proxy };
+                  }
+                  const r = requestResponseMessage(ep, {
+                      type: "GET" /* MessageType.GET */,
+                      path: path.map((p) => p.toString()),
+                  }).then(fromWireValue);
+                  return r.then.bind(r);
+              }
+              return createProxy(ep, [...path, prop]);
+          },
+          set(_target, prop, rawValue) {
+              throwIfProxyReleased(isProxyReleased);
+              // FIXME: ES6 Proxy Handler `set` methods are supposed to return a
+              // boolean. To show good will, we return true asynchronously ¯\_(ツ)_/¯
+              const [value, transferables] = toWireValue(rawValue);
+              return requestResponseMessage(ep, {
+                  type: "SET" /* MessageType.SET */,
+                  path: [...path, prop].map((p) => p.toString()),
+                  value,
+              }, transferables).then(fromWireValue);
+          },
+          apply(_target, _thisArg, rawArgumentList) {
+              throwIfProxyReleased(isProxyReleased);
+              const last = path[path.length - 1];
+              if (last === createEndpoint) {
+                  return requestResponseMessage(ep, {
+                      type: "ENDPOINT" /* MessageType.ENDPOINT */,
+                  }).then(fromWireValue);
+              }
+              // We just pretend that `bind()` didn’t happen.
+              if (last === "bind") {
+                  return createProxy(ep, path.slice(0, -1));
+              }
+              const [argumentList, transferables] = processArguments(rawArgumentList);
+              return requestResponseMessage(ep, {
+                  type: "APPLY" /* MessageType.APPLY */,
+                  path: path.map((p) => p.toString()),
+                  argumentList,
+              }, transferables).then(fromWireValue);
+          },
+          construct(_target, rawArgumentList) {
+              throwIfProxyReleased(isProxyReleased);
+              const [argumentList, transferables] = processArguments(rawArgumentList);
+              return requestResponseMessage(ep, {
+                  type: "CONSTRUCT" /* MessageType.CONSTRUCT */,
+                  path: path.map((p) => p.toString()),
+                  argumentList,
+              }, transferables).then(fromWireValue);
+          },
+      });
+      registerProxy(proxy, ep);
+      return proxy;
+  }
+  function myFlat(arr) {
+      return Array.prototype.concat.apply([], arr);
+  }
+  function processArguments(argumentList) {
+      const processed = argumentList.map(toWireValue);
+      return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];
+  }
+  const transferCache = new WeakMap();
+  function transfer(obj, transfers) {
+      transferCache.set(obj, transfers);
+      return obj;
+  }
+  function proxy(obj) {
+      return Object.assign(obj, { [proxyMarker]: true });
+  }
+  function toWireValue(value) {
+      for (const [name, handler] of transferHandlers) {
+          if (handler.canHandle(value)) {
+              const [serializedValue, transferables] = handler.serialize(value);
+              return [
+                  {
+                      type: "HANDLER" /* WireValueType.HANDLER */,
+                      name,
+                      value: serializedValue,
+                  },
+                  transferables,
+              ];
+          }
+      }
+      return [
+          {
+              type: "RAW" /* WireValueType.RAW */,
+              value,
+          },
+          transferCache.get(value) || [],
+      ];
+  }
+  function fromWireValue(value) {
+      switch (value.type) {
+          case "HANDLER" /* WireValueType.HANDLER */:
+              return transferHandlers.get(value.name).deserialize(value.value);
+          case "RAW" /* WireValueType.RAW */:
+              return value.value;
+      }
+  }
+  function requestResponseMessage(ep, msg, transfers) {
+      return new Promise((resolve) => {
+          const id = generateUUID();
+          ep.addEventListener("message", function l(ev) {
+              if (!ev.data || !ev.data.id || ev.data.id !== id) {
+                  return;
+              }
+              ep.removeEventListener("message", l);
+              resolve(ev.data);
+          });
+          if (ep.start) {
+              ep.start();
+          }
+          ep.postMessage(Object.assign({ id }, msg), transfers);
+      });
+  }
+  function generateUUID() {
+      return new Array(4)
+          .fill(0)
+          .map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16))
+          .join("-");
+  }
+
+  // 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";
+
+  let url;
+  /**
+   * Asynchronously creates and returns a Remote<MatrixRenderer> instance.
+   * This function simplifies the process of creating and accessing MatrixRenderer instances.
+   */
+  const createMatrixRenderer = async () => {
+      if (url === undefined) {
+          const blob = new Blob([workerCode], { type: 'text/javascript' });
+          url = URL.createObjectURL(blob);
+      }
+      const worker = new Worker(url);
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      const RemoteMatrixRenderer = wrap(worker);
+      const matrixRenderer = await new RemoteMatrixRenderer();
+      const terminate = () => worker.terminate();
+      return {
+          matrixRenderer,
+          terminate
+      };
+  };
+
   /**
    * Responsible for drawing the dies inside the wafer map, adding dieText and scaling the canvas
    */
@@ -77292,8 +77672,56 @@ img.ProseMirror-separator {
       constructor(wafermap) {
           this.wafermap = wafermap;
       }
-      drawWafer() {
-          // rendering will be implemented in a future PR
+      async setupWafer() {
+          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.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.drawWafer();
           this.renderHover();
       }
       renderHover() {
@@ -77499,6 +77927,9 @@ img.ProseMirror-separator {
           this.onWheelMove = (event) => {
               event.preventDefault();
           };
+          this.wafermapNotifier = Observable.getNotifier(this.wafermap);
+          this.wafermapNotifier.subscribe(this, 'canvasWidth');
+          this.wafermapNotifier.subscribe(this, 'canvasHeight');
       }
       /**
        * @internal
@@ -77516,6 +77947,12 @@ img.ProseMirror-separator {
           zoom().on('zoom', null)(select(this.wafermap));
           this.wafermap.removeEventListener('wheel', this.onWheelMove);
       }
+      handleChange(source, propertyName) {
+          if (source === this.wafermap
+              && (propertyName === 'canvasWidth' || propertyName === 'canvasHeight')) {
+              this.createZoomBehavior();
+          }
+      }
       createZoomBehavior() {
           zoom()
               .scaleExtent(this.scaleExtent)
@@ -77617,27 +78054,25 @@ img.ProseMirror-separator {
        * @internal
        * Experimental update function called when an update is queued.
        */
-      experimentalUpdate() {
+      async experimentalUpdate() {
           if (this.validity.invalidDiesTableSchema) {
               return;
           }
           if (this.waferMapUpdateTracker.requiresEventsUpdate) {
-              // zoom translateExtent needs to be recalculated when canvas size changes
-              this.zoomHandler.disconnect();
               if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate
                   || this.waferMapUpdateTracker.requiresScalesUpdate) {
                   this.experimentalDataManager.updateComputations();
-                  this.workerRenderer.drawWafer();
+                  await this.workerRenderer.setupWafer();
+                  await this.workerRenderer.drawWafer();
               }
               else if (this.waferMapUpdateTracker.requiresLabelsFontSizeUpdate
                   || this.waferMapUpdateTracker.requiresDiesRenderInfoUpdate) {
                   this.experimentalDataManager.updatePrerendering();
-                  this.workerRenderer.drawWafer();
+                  await this.workerRenderer.drawWafer();
               }
               else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) {
-                  this.workerRenderer.drawWafer();
+                  await this.workerRenderer.drawWafer();
               }
-              this.zoomHandler.connect();
           }
           else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
               this.workerRenderer.renderHover();
@@ -77654,12 +78089,10 @@ img.ProseMirror-separator {
       update() {
           this.validate();
           if (this.isExperimentalUpdate()) {
-              this.experimentalUpdate();
+              this.currentTask = this.experimentalUpdate();
               return;
           }
           if (this.waferMapUpdateTracker.requiresEventsUpdate) {
-              // zoom translateExtent needs to be recalculated when canvas size changes
-              this.zoomHandler.disconnect();
               if (this.waferMapUpdateTracker.requiresContainerDimensionsUpdate) {
                   this.dataManager.updateContainerDimensions();
                   this.renderer.updateSortedDiesAndDrawWafer();
@@ -77679,7 +78112,6 @@ img.ProseMirror-separator {
               else if (this.waferMapUpdateTracker.requiresDrawnWaferUpdate) {
                   this.renderer.drawWafer();
               }
-              this.zoomHandler.connect();
           }
           else if (this.waferMapUpdateTracker.requiresRenderHoverUpdate) {
               this.renderer.renderHover();