@industry-theme/principal-view-panels 0.1.50 → 0.1.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/panels/ExecutionViewerPanel.d.ts.map +1 -1
  2. package/dist/panels/execution-viewer/ExecutionLoader.d.ts +20 -0
  3. package/dist/panels/execution-viewer/ExecutionLoader.d.ts.map +1 -1
  4. package/dist/panels.bundle.js +99 -115
  5. package/dist/panels.bundle.js.map +1 -1
  6. package/package.json +1 -1
package/dist/panels/ExecutionViewerPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExecutionViewerPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ExecutionViewerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAkI/E;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6qB9D,CAAC"}
1
+ {"version":3,"file":"ExecutionViewerPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ExecutionViewerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAoI/E;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAooB9D,CAAC"}
package/dist/panels/execution-viewer/ExecutionLoader.d.ts CHANGED
@@ -10,6 +10,18 @@ export interface ExecutionFile {
10
10
  /** Package name for monorepos (e.g., 'core' from 'packages/core/__executions__/') */
11
11
  packageName?: string;
12
12
  }
13
+ export interface CanvasFile {
14
+ /** Unique identifier for this canvas (derived from filename) */
15
+ id: string;
16
+ /** Display name for this canvas */
17
+ name: string;
18
+ /** Full file path */
19
+ path: string;
20
+ /** Whether this is from a config folder or standalone */
21
+ source: 'folder' | 'standalone';
22
+ /** Canvas basename (without .otel.canvas or .canvas extension) */
23
+ basename: string;
24
+ }
13
25
  export interface ExecutionMetadata {
14
26
  /** Execution name */
15
27
  name: string;
@@ -76,6 +88,14 @@ export declare class ExecutionLoader {
76
88
  relativePath?: string;
77
89
  name?: string;
78
90
  }>): ExecutionFile[];
91
+ /**
92
+ * Find all .otel.canvas and .canvas files in the file tree
93
+ */
94
+ static findCanvasFiles(files: Array<{
95
+ path?: string;
96
+ relativePath?: string;
97
+ name?: string;
98
+ }>): CanvasFile[];
79
99
  /**
80
100
  * Find execution artifact for a given canvas file path
81
101
  */
package/dist/panels/execution-viewer/ExecutionLoader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExecutionLoader.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/ExecutionLoader.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ExecutionLoader.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/ExecutionLoader.ts"],"names":[],"mappings":"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"}
package/dist/panels.bundle.js CHANGED
@@ -55853,12 +55853,35 @@ class ExecutionLoader {
55853
55853
  return a.name.localeCompare(b.name);
55854
55854
  });
55855
55855
  }
55856
+ /**
55857
+ * Find all .otel.canvas and .canvas files in the file tree
55858
+ */
55859
+ static findCanvasFiles(files) {
55860
+ const canvasFiles = [];
55861
+ const VGC_FOLDER = ".principal-views";
55862
+ for (const file of files) {
55863
+ const filePath = file.relativePath || file.path || "";
55864
+ const fileName = file.name || filePath.split("/").pop() || "";
55865
+ if (filePath.startsWith(`${VGC_FOLDER}/`) && (fileName.endsWith(".otel.canvas") || fileName.endsWith(".canvas"))) {
55866
+ const basename = fileName.replace(/\.otel\.canvas$/, "").replace(/\.canvas$/, "");
55867
+ const displayName = basename.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
55868
+ canvasFiles.push({
55869
+ id: basename,
55870
+ name: displayName,
55871
+ path: filePath,
55872
+ source: "folder",
55873
+ basename
55874
+ });
55875
+ }
55876
+ }
55877
+ return canvasFiles.sort((a, b) => a.name.localeCompare(b.name));
55878
+ }
55856
55879
  /**
55857
55880
  * Find execution artifact for a given canvas file path
55858
55881
  */
55859
55882
  static findExecutionForCanvas(canvasPath, files) {
55860
55883
  const canvasFilename = canvasPath.split("/").pop() || "";
55861
- const canvasBasename = canvasFilename.replace(/\.otel\.canvas$/, "");
55884
+ const canvasBasename = canvasFilename.replace(/\.otel\.canvas$/, "").replace(/\.canvas$/, "");
55862
55885
  const executions = ExecutionLoader.findExecutionFiles(files);
55863
55886
  return executions.find((exec) => exec.canvasBasename === canvasBasename) || null;
55864
55887
  }
@@ -56132,9 +56155,10 @@ const ExecutionViewerPanel = ({
56132
56155
  metadata: null,
56133
56156
  loading: true,
56134
56157
  error: null,
56135
- availableExecutions: [],
56136
- selectedExecutionId: null,
56137
- showExecutionSelector: false,
56158
+ availableCanvases: [],
56159
+ selectedCanvasId: null,
56160
+ linkedExecution: null,
56161
+ showCanvasSelector: false,
56138
56162
  isPlaying: false,
56139
56163
  currentSpanIndex: 0,
56140
56164
  currentEventIndex: 0,
@@ -56146,17 +56170,11 @@ const ExecutionViewerPanel = ({
56146
56170
  contextRef.current = context;
56147
56171
  actionsRef.current = actions;
56148
56172
  eventsRef.current = events;
56149
- const selectedExecutionIdRef = useRef(null);
56150
- selectedExecutionIdRef.current = state.selectedExecutionId;
56173
+ const selectedCanvasIdRef = useRef(null);
56174
+ selectedCanvasIdRef.current = state.selectedCanvasId;
56151
56175
  const playbackTimerRef = useRef(null);
56152
56176
  const eventNodeMapRef = useRef(/* @__PURE__ */ new Map());
56153
- const findCanvasFiles = useCallback((files) => {
56154
- return files.filter((file) => {
56155
- const path = file.relativePath || file.path || "";
56156
- return path.endsWith(".otel.canvas") || path.endsWith(".canvas");
56157
- }).map((file) => file.relativePath || file.path || "");
56158
- }, []);
56159
- const loadExecution = useCallback(async (executionId) => {
56177
+ const loadCanvas = useCallback(async (canvasId) => {
56160
56178
  setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
56161
56179
  try {
56162
56180
  const ctx = contextRef.current;
@@ -56177,54 +56195,39 @@ const ExecutionViewerPanel = ({
56177
56195
  metadata: null,
56178
56196
  loading: false,
56179
56197
  error: null,
56180
- availableExecutions: [],
56181
- selectedExecutionId: null
56198
+ availableCanvases: [],
56199
+ selectedCanvasId: null,
56200
+ linkedExecution: null
56182
56201
  }));
56183
56202
  return;
56184
56203
  }
56185
- const availableExecutions = ExecutionLoader.findExecutionFiles(fileTreeData.allFiles);
56186
- if (availableExecutions.length === 0) {
56187
- const readFile2 = acts.readFile;
56188
- const repositoryPath2 = ctx.repositoryPath;
56189
- let canvas2 = null;
56190
- if (readFile2 && repositoryPath2) {
56191
- const canvasFiles = findCanvasFiles(fileTreeData.allFiles);
56192
- if (canvasFiles.length > 0) {
56193
- try {
56194
- const fullCanvasPath = `${repositoryPath2}/${canvasFiles[0]}`;
56195
- const canvasContent = await readFile2(fullCanvasPath);
56196
- if (canvasContent && typeof canvasContent === "string") {
56197
- canvas2 = JSON.parse(canvasContent);
56198
- }
56199
- } catch (error) {
56200
- console.warn("[ExecutionViewer] Failed to load canvas:", error);
56201
- }
56202
- }
56203
- }
56204
+ const availableCanvases = ExecutionLoader.findCanvasFiles(fileTreeData.allFiles);
56205
+ if (availableCanvases.length === 0) {
56204
56206
  setState((prev) => ({
56205
56207
  ...prev,
56206
- canvas: canvas2,
56208
+ canvas: null,
56207
56209
  execution: null,
56208
56210
  metadata: null,
56209
56211
  loading: false,
56210
56212
  error: null,
56211
- availableExecutions: [],
56212
- selectedExecutionId: null
56213
+ availableCanvases: [],
56214
+ selectedCanvasId: null,
56215
+ linkedExecution: null
56213
56216
  }));
56214
56217
  return;
56215
56218
  }
56216
- let selectedExecution2;
56217
- if (executionId) {
56218
- const found = availableExecutions.find((e) => e.id === executionId);
56219
+ let selectedCanvas2;
56220
+ if (canvasId) {
56221
+ const found = availableCanvases.find((c) => c.id === canvasId);
56219
56222
  if (!found) {
56220
- throw new Error(`Execution with ID '${executionId}' not found`);
56223
+ throw new Error(`Canvas with ID '${canvasId}' not found`);
56221
56224
  }
56222
- selectedExecution2 = found;
56223
- } else if (selectedExecutionIdRef.current) {
56224
- const found = availableExecutions.find((e) => e.id === selectedExecutionIdRef.current);
56225
- selectedExecution2 = found || availableExecutions[0];
56225
+ selectedCanvas2 = found;
56226
+ } else if (selectedCanvasIdRef.current) {
56227
+ const found = availableCanvases.find((c) => c.id === selectedCanvasIdRef.current);
56228
+ selectedCanvas2 = found || availableCanvases[0];
56226
56229
  } else {
56227
- selectedExecution2 = availableExecutions[0];
56230
+ selectedCanvas2 = availableCanvases[0];
56228
56231
  }
56229
56232
  const readFile = acts.readFile;
56230
56233
  if (!readFile) {
@@ -56234,34 +56237,31 @@ const ExecutionViewerPanel = ({
56234
56237
  if (!repositoryPath) {
56235
56238
  throw new Error("Repository path not available");
56236
56239
  }
56237
- const fullExecutionPath = `${repositoryPath}/${selectedExecution2.path}`;
56238
- const executionContent = await readFile(fullExecutionPath);
56239
- if (!executionContent || typeof executionContent !== "string") {
56240
- throw new Error("Failed to read execution file");
56240
+ const fullCanvasPath = `${repositoryPath}/${selectedCanvas2.path}`;
56241
+ const canvasContent = await readFile(fullCanvasPath);
56242
+ if (!canvasContent || typeof canvasContent !== "string") {
56243
+ throw new Error("Failed to read canvas file");
56241
56244
  }
56242
- const execution = ExecutionLoader.parseExecutionArtifact(executionContent);
56243
- const metadata = ExecutionLoader.getExecutionMetadata(execution);
56244
- const canvasPath = ExecutionLoader.findCanvasForExecution(
56245
- selectedExecution2.path,
56245
+ const canvas = JSON.parse(canvasContent);
56246
+ const linkedExecution = ExecutionLoader.findExecutionForCanvas(
56247
+ selectedCanvas2.path,
56246
56248
  fileTreeData.allFiles
56247
56249
  );
56248
- let canvas = null;
56249
- if (canvasPath) {
56250
+ let execution = null;
56251
+ let metadata = null;
56252
+ if (linkedExecution) {
56250
56253
  try {
56251
- const fullCanvasPath = `${repositoryPath}/${canvasPath}`;
56252
- const canvasContent = await readFile(fullCanvasPath);
56253
- if (canvasContent && typeof canvasContent === "string") {
56254
- canvas = JSON.parse(canvasContent);
56254
+ const fullExecutionPath = `${repositoryPath}/${linkedExecution.path}`;
56255
+ const executionContent = await readFile(fullExecutionPath);
56256
+ if (executionContent && typeof executionContent === "string") {
56257
+ execution = ExecutionLoader.parseExecutionArtifact(executionContent);
56258
+ metadata = ExecutionLoader.getExecutionMetadata(execution);
56255
56259
  }
56256
56260
  } catch (error) {
56257
- console.warn("[ExecutionViewer] Failed to load canvas:", error);
56261
+ console.warn("[ExecutionViewer] Failed to load linked execution:", error);
56258
56262
  }
56259
56263
  }
56260
- if (canvas) {
56261
- eventNodeMapRef.current = buildEventToNodeMap(canvas);
56262
- } else {
56263
- eventNodeMapRef.current = /* @__PURE__ */ new Map();
56264
- }
56264
+ eventNodeMapRef.current = buildEventToNodeMap(canvas);
56265
56265
  setState((prev) => ({
56266
56266
  ...prev,
56267
56267
  canvas,
@@ -56269,32 +56269,33 @@ const ExecutionViewerPanel = ({
56269
56269
  metadata,
56270
56270
  loading: false,
56271
56271
  error: null,
56272
- availableExecutions,
56273
- selectedExecutionId: selectedExecution2.id,
56272
+ availableCanvases,
56273
+ selectedCanvasId: selectedCanvas2.id,
56274
+ linkedExecution,
56274
56275
  currentSpanIndex: 0,
56275
56276
  currentEventIndex: 0,
56276
56277
  highlightedNodeId: null
56277
56278
  }));
56278
56279
  } catch (error) {
56279
- console.error("[ExecutionViewer] Error loading execution:", error);
56280
+ console.error("[ExecutionViewer] Error loading canvas:", error);
56280
56281
  setState((prev) => ({
56281
56282
  ...prev,
56282
56283
  loading: false,
56283
56284
  error: error.message
56284
56285
  }));
56285
56286
  }
56286
- }, [findCanvasFiles]);
56287
+ }, []);
56287
56288
  useEffect(() => {
56288
- loadExecution();
56289
- }, [loadExecution]);
56289
+ loadCanvas();
56290
+ }, [loadCanvas]);
56290
56291
  useEffect(() => {
56291
56292
  if (!events) return;
56292
56293
  const handleEvent = (event) => {
56293
56294
  var _a2;
56294
- if (event.type === "custom" && event.action === "selectExecution") {
56295
- const executionId = (_a2 = event.payload) == null ? void 0 : _a2.executionId;
56296
- if (executionId) {
56297
- loadExecution(executionId);
56295
+ if (event.type === "custom" && event.action === "selectCanvas") {
56296
+ const canvasId = (_a2 = event.payload) == null ? void 0 : _a2.canvasId;
56297
+ if (canvasId) {
56298
+ loadCanvas(canvasId);
56298
56299
  }
56299
56300
  }
56300
56301
  };
@@ -56302,7 +56303,7 @@ const ExecutionViewerPanel = ({
56302
56303
  return () => {
56303
56304
  events.off("custom", handleEvent);
56304
56305
  };
56305
- }, [events, loadExecution]);
56306
+ }, [events, loadCanvas]);
56306
56307
  const handlePlayPause = useCallback(() => {
56307
56308
  setState((prev) => ({ ...prev, isPlaying: !prev.isPlaying }));
56308
56309
  }, []);
@@ -56378,7 +56379,7 @@ const ExecutionViewerPanel = ({
56378
56379
  }
56379
56380
  };
56380
56381
  }, [state.isPlaying, state.execution]);
56381
- if (!state.loading && state.availableExecutions.length === 0 && !state.canvas) {
56382
+ if (!state.loading && state.availableCanvases.length === 0) {
56382
56383
  return /* @__PURE__ */ jsx(
56383
56384
  "div",
56384
56385
  {
@@ -56392,7 +56393,7 @@ const ExecutionViewerPanel = ({
56392
56393
  },
56393
56394
  children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: "600px", padding: "20px" }, children: [
56394
56395
  /* @__PURE__ */ jsx(Activity, { size: 48, style: { margin: "0 auto 20px", opacity: 0.3 } }),
56395
- /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Execution Artifacts or Canvas Found" }),
56396
+ /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Canvas Files Found" }),
56396
56397
  /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 20px 0", color: theme.colors.textSecondary, lineHeight: 1.5 }, children: [
56397
56398
  "Execution artifacts should be saved to ",
56398
56399
  /* @__PURE__ */ jsx("code", { children: "__executions__/*.spans.json" }),
@@ -56465,8 +56466,8 @@ const ExecutionViewerPanel = ({
56465
56466
  }
56466
56467
  );
56467
56468
  }
56468
- const selectedExecution = state.availableExecutions.find(
56469
- (e) => e.id === state.selectedExecutionId
56469
+ const selectedCanvas = state.availableCanvases.find(
56470
+ (c) => c.id === state.selectedCanvasId
56470
56471
  );
56471
56472
  return /* @__PURE__ */ jsxs(
56472
56473
  "div",
@@ -56491,11 +56492,11 @@ const ExecutionViewerPanel = ({
56491
56492
  gap: "12px"
56492
56493
  },
56493
56494
  children: [
56494
- state.availableExecutions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
56495
+ state.availableCanvases.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
56495
56496
  /* @__PURE__ */ jsxs(
56496
56497
  "button",
56497
56498
  {
56498
- onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: !prev.showExecutionSelector })),
56499
+ onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: !prev.showCanvasSelector })),
56499
56500
  style: {
56500
56501
  display: "flex",
56501
56502
  alignItems: "center",
@@ -56510,25 +56511,25 @@ const ExecutionViewerPanel = ({
56510
56511
  },
56511
56512
  children: [
56512
56513
  /* @__PURE__ */ jsx(Activity, { size: 16 }),
56513
- /* @__PURE__ */ jsx("span", { children: (selectedExecution == null ? void 0 : selectedExecution.name) || "Select Execution" }),
56514
- (selectedExecution == null ? void 0 : selectedExecution.packageName) && /* @__PURE__ */ jsx(
56514
+ /* @__PURE__ */ jsx("span", { children: (selectedCanvas == null ? void 0 : selectedCanvas.name) || "Select Canvas" }),
56515
+ state.linkedExecution && /* @__PURE__ */ jsx(
56515
56516
  "span",
56516
56517
  {
56517
56518
  style: {
56518
56519
  padding: "2px 6px",
56519
- background: "#3b82f6",
56520
+ background: "#22c55e",
56520
56521
  borderRadius: "3px",
56521
56522
  fontSize: "11px",
56522
56523
  fontWeight: 600
56523
56524
  },
56524
- children: selectedExecution.packageName
56525
+ children: "has execution"
56525
56526
  }
56526
56527
  ),
56527
56528
  /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
56528
56529
  ]
56529
56530
  }
56530
56531
  ),
56531
- state.showExecutionSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
56532
+ state.showCanvasSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
56532
56533
  /* @__PURE__ */ jsx(
56533
56534
  "div",
56534
56535
  {
@@ -56537,7 +56538,7 @@ const ExecutionViewerPanel = ({
56537
56538
  inset: 0,
56538
56539
  zIndex: 999
56539
56540
  },
56540
- onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: false }))
56541
+ onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: false }))
56541
56542
  }
56542
56543
  ),
56543
56544
  /* @__PURE__ */ jsx(
@@ -56557,17 +56558,17 @@ const ExecutionViewerPanel = ({
56557
56558
  boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
56558
56559
  zIndex: 1e3
56559
56560
  },
56560
- children: state.availableExecutions.map((execution) => /* @__PURE__ */ jsxs(
56561
+ children: state.availableCanvases.map((canvas) => /* @__PURE__ */ jsxs(
56561
56562
  "button",
56562
56563
  {
56563
56564
  onClick: () => {
56564
- loadExecution(execution.id);
56565
- setState((prev) => ({ ...prev, showExecutionSelector: false }));
56565
+ loadCanvas(canvas.id);
56566
+ setState((prev) => ({ ...prev, showCanvasSelector: false }));
56566
56567
  },
56567
56568
  style: {
56568
56569
  width: "100%",
56569
56570
  padding: "10px 16px",
56570
- background: execution.id === state.selectedExecutionId ? "#3b82f6" : "transparent",
56571
+ background: canvas.id === state.selectedCanvasId ? "#3b82f6" : "transparent",
56571
56572
  border: "none",
56572
56573
  borderBottom: "1px solid #3a3a3a",
56573
56574
  color: "#fff",
@@ -56580,23 +56581,10 @@ const ExecutionViewerPanel = ({
56580
56581
  },
56581
56582
  children: [
56582
56583
  /* @__PURE__ */ jsx(Activity, { size: 14 }),
56583
- /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: execution.name }),
56584
- execution.packageName && /* @__PURE__ */ jsx(
56585
- "span",
56586
- {
56587
- style: {
56588
- padding: "2px 6px",
56589
- background: execution.id === state.selectedExecutionId ? "#2563eb" : "#3b82f6",
56590
- borderRadius: "3px",
56591
- fontSize: "11px",
56592
- fontWeight: 600
56593
- },
56594
- children: execution.packageName
56595
- }
56596
- )
56584
+ /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: canvas.name })
56597
56585
  ]
56598
56586
  },
56599
- execution.id
56587
+ canvas.id
56600
56588
  ))
56601
56589
  }
56602
56590
  )
@@ -56604,7 +56592,7 @@ const ExecutionViewerPanel = ({
56604
56592
  ] }),
56605
56593
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
56606
56594
  /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: ((_a = state.metadata) == null ? void 0 : _a.name) || (state.canvas ? "Canvas Viewer" : "Execution Viewer") }),
56607
- selectedExecution && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedExecution.path })
56595
+ selectedCanvas && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedCanvas.path })
56608
56596
  ] }),
56609
56597
  state.execution && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
56610
56598
  /* @__PURE__ */ jsx(
@@ -56723,12 +56711,8 @@ const ExecutionViewerPanel = ({
56723
56711
  color: "#666"
56724
56712
  },
56725
56713
  children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
56726
- /* @__PURE__ */ jsx("p", { children: "No matching canvas found" }),
56727
- /* @__PURE__ */ jsxs("p", { style: { fontSize: "12px", marginTop: "8px" }, children: [
56728
- "Expected: ",
56729
- selectedExecution == null ? void 0 : selectedExecution.canvasBasename,
56730
- ".otel.canvas"
56731
- ] })
56714
+ /* @__PURE__ */ jsx("p", { children: "Canvas not loaded" }),
56715
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", marginTop: "8px" }, children: (selectedCanvas == null ? void 0 : selectedCanvas.path) || "No canvas selected" })
56732
56716
  ] })
56733
56717
  }
56734
56718
  )