bbovenzi commented on code in PR #75986:
URL: https://github.com/apache/airflow/pull/75986#discussion_r4515468840
##########
airflow-core/src/airflow/ui/src/components/Graph/useGraphLayout.ts:
##########
@@ -18,30 +18,40 @@
*/
import { useQuery } from "@tanstack/react-query";
import type { ElkNode } from "elkjs";
-import ELK from "elkjs/lib/elk-api.js";
-// ?raw imports the file content as a plain string without any transformation.
-// We create a blob: URL from it so the Worker is always same-origin to the
-// page — avoiding the cross-origin SecurityError that occurs in Airflow's dev
-// setup where Vite (5173) and Flask (28080) run on different ports, and all
-// URL-based worker approaches (?worker, ?worker&inline, new URL()) resolve to
-// the Vite origin which browsers reject for Workers.
-import ElkWorkerSource from "elkjs/lib/elk-worker.min.js?raw";
+import ElkConstructor, { type ELK } from "elkjs/lib/elk-api.js";
import type { NodeResponse, StructureDataResponse } from
"openapi/requests/types.gen";
import type { Direction } from "./DirectionDropdown";
import { generateElkGraph } from "./elkGraphUtils";
import { flattenGraph, formatFlowEdges } from "./reactflowUtils";
-// Blob URL created once at module load. `type: "classic"` preserves the
-// original CJS environment detection in elk-worker: as a classic script
-// `typeof module === "undefined"`, so the worker sets self.onmessage rather
-// than exporting a FakeWorker.
-const elkWorkerBlobUrl = URL.createObjectURL(new Blob([ElkWorkerSource], {
type: "application/javascript" }));
+// The layout engine (~1.4 MB) loads the first time a graph is laid out, not
with every page that can show one.
+let elkPromise: Promise<ELK> | undefined;
-const elk = new ELK({
- workerFactory: () => new Worker(elkWorkerBlobUrl, { type: "classic" }),
-});
+const getElk = () => {
+ elkPromise ??= import("elkjs/lib/elk-worker.min.js?raw").then(({ default:
elkWorkerSource }) => {
+ // ?raw imports the file content as a plain string without any
transformation.
+ // We create a blob: URL from it so the Worker is always same-origin to the
+ // page — avoiding the cross-origin SecurityError that occurs in Airflow's
dev
+ // setup where Vite (5173) and Flask (28080) run on different ports, and
all
+ // URL-based worker approaches (?worker, ?worker&inline, new URL())
resolve to
+ // the Vite origin which browsers reject for Workers.
+ // `type: "classic"` preserves the original CJS environment detection in
elk-worker: as a classic script
+ // `typeof module === "undefined"`, so the worker sets self.onmessage
rather than exporting a FakeWorker.
+ const elkWorkerBlobUrl = URL.createObjectURL(
+ new Blob([elkWorkerSource], { type: "application/javascript" }),
+ );
+
+ return new ElkConstructor({ workerFactory: () => new
Worker(elkWorkerBlobUrl, { type: "classic" }) });
+ });
+ // Retry on the next layout if the chunk failed to load, rather than keeping
the rejection.
+ elkPromise.catch(() => {
+ elkPromise = undefined;
+ });
Review Comment:
We should chain `then().catch()` not have a separate catch function that we
call every time
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
