@finos/legend-application-query 13.8.24 → 13.8.26

package/src/components/DataSpaceArtifactInspector.tsx

@@ -0,0 +1,1469 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Developer-only diagnostic page for measuring the size and shape of the
+ * DataSpace analytics artifact returned by the Depot server. Used to
+ * investigate Chrome tab OOM crashes when loading large multi execution
+ * context DataSpaces.
+ *
+ * Route: /dev/dataspace-inspector
+ *
+ * The page reuses the application's existing depot client (so it inherits
+ * the same auth / cookies / Envoy origin headers), fetches:
+ *   GET /generations/{groupId}/{artifactId}/{versionId}/types/dataSpace-analytics?elementPath={path}
+ * (the existing per-type endpoint, now narrowed via the `elementPath`
+ * query parameter for QUERY-1054) and reports total uncompressed payload
+ * bytes plus a per-file breakdown for that one DataSpace.
+ *
+ * Also supports loading inputs from a saved query id (hits the engine
+ * query server `/pure/v1/query/{id}` endpoint and pulls groupId /
+ * artifactId / versionId + the dataspace path from the saved query's
+ * `taggedValues` / `executionContext`), and an inline JSON viewer (Monaco)
+ * for the parsed response and individual file contents.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
+import { StoreProjectData } from '@finos/legend-server-depot';
+import { LogEvent } from '@finos/legend-shared';
+import { CodeEditor } from '@finos/legend-lego/code-editor';
+import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
+import { LEGEND_QUERY_APP_EVENT } from '../__lib__/LegendQueryEvent.js';
+import {
+  useLegendQueryApplicationStore,
+  useLegendQueryBaseStore,
+} from './LegendQueryFrameworkProvider.js';
+import { DATA_SPACE_ELEMENT_CLASSIFIER_PATH } from '@finos/legend-extension-dsl-data-space/graph';
+
+const MB = 1024 * 1024;
+const fmtMB = (bytes: number): string => `${(bytes / MB).toFixed(2)} MB`;
+
+const QUERY_PROFILE_PATH = 'meta::pure::profiles::query';
+const QUERY_PROFILE_TAG_DATA_SPACE = 'dataSpace';
+
+interface DataSpaceOption {
+  groupId: string;
+  artifactId: string;
+  versionId: string;
+  path: string;
+  label: string;
+}
+
+interface FileSizeRow {
+  path: string;
+  type: string;
+  filePath: string;
+  bytes: number;
+}
+
+interface InspectionResult {
+  mode: 'parsed' | 'streamed' | 'streamed-headers';
+  totalBytes: number;
+  fileCount: number;
+  rows: FileSizeRow[];
+  fetchMs: number;
+  sizingMs: number;
+  streamedBodyBytes?: number | undefined;
+  streamedCompressedBytes?: number | undefined;
+  streamedContentEncoding?: string | undefined;
+  streamedUrl?: string | undefined;
+  // Only populated in parsed mode — used by the inline JSON viewer.
+  rawFiles?: unknown[] | undefined;
+}
+
+interface JsonViewerState {
+  title: string;
+  content: string;
+}
+
+/**
+ * Pretty-print arbitrary JSON-ish input. If the input is already a string
+ * that happens to be valid JSON (depot returns `content` as a string for
+ * files like `AnalyticsResult.json`), reparse and re-stringify so the
+ * viewer gets a properly indented, foldable tree instead of a long
+ * single-line escaped string.
+ */
+const prettyJson = (value: unknown): string => {
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (
+      (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
+      (trimmed.startsWith('[') && trimmed.endsWith(']'))
+    ) {
+      try {
+        return JSON.stringify(JSON.parse(value), null, 2);
+      } catch {
+        // fall through, return raw string
+      }
+    }
+    return value;
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const inputStyle: React.CSSProperties = {
+  padding: '0.4rem 0.6rem',
+  background: '#2a2a2a',
+  color: '#eee',
+  border: '1px solid #444',
+  borderRadius: 4,
+  fontFamily: 'monospace',
+};
+
+const thStyle: React.CSSProperties = {
+  padding: '0.4rem 0.6rem',
+  textAlign: 'left',
+  borderBottom: '1px solid #444',
+};
+
+const tdStyle: React.CSSProperties = {
+  padding: '0.35rem 0.6rem',
+  borderBottom: '1px solid #2a2a2a',
+  fontFamily: 'monospace',
+  fontSize: '0.85rem',
+};
+
+const Row: React.FC<{ label: string; value: string }> = ({ label, value }) => (
+  <tr>
+    <td style={{ padding: '0.2rem 0.75rem 0.2rem 0', color: '#888' }}>
+      {label}
+    </td>
+    <td style={{ padding: '0.2rem 0', fontFamily: 'monospace' }}>{value}</td>
+  </tr>
+);
+
+const JsonViewerModal: React.FC<{
+  title: string;
+  content: string;
+  onClose: () => void;
+}> = ({ title, content, onClose }) => (
+  <div
+    style={{
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: 'rgba(0, 0, 0, 0.65)',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 1000,
+    }}
+    onClick={onClose}
+  >
+    <div
+      style={{
+        background: '#1e1e1e',
+        border: '1px solid #444',
+        borderRadius: 6,
+        width: 'min(1400px, 95vw)',
+        height: 'min(900px, 92vh)',
+        display: 'flex',
+        flexDirection: 'column',
+        boxShadow: '0 8px 32px rgba(0, 0, 0, 0.5)',
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      <div
+        style={{
+          padding: '0.6rem 1rem',
+          borderBottom: '1px solid #333',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div
+          style={{
+            color: '#ddd',
+            fontFamily: 'monospace',
+            fontSize: '0.9rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            marginRight: '1rem',
+          }}
+          title={title}
+        >
+          {title}
+          <span style={{ color: '#888', marginLeft: '1rem' }}>
+            ({content.length.toLocaleString()} chars)
+          </span>
+        </div>
+        <button
+          type="button"
+          onClick={onClose}
+          style={{
+            padding: '0.3rem 0.8rem',
+            background: '#444',
+            color: 'white',
+            border: '1px solid #666',
+            borderRadius: 4,
+            cursor: 'pointer',
+          }}
+        >
+          Close
+        </button>
+      </div>
+      <div style={{ flex: 1, minHeight: 0 }}>
+        <CodeEditor
+          inputValue={content}
+          isReadOnly={true}
+          language={CODE_EDITOR_LANGUAGE.JSON}
+          hideMinimap={false}
+          hideGutter={false}
+        />
+      </div>
+    </div>
+  </div>
+);
+
+export const DataSpaceArtifactInspector = observer(() => {
+  const applicationStore = useLegendQueryApplicationStore();
+  const depotServerClient = useLegendQueryBaseStore().depotServerClient;
+
+  const [groupId, setGroupId] = useState('');
+  const [artifactId, setArtifactId] = useState('');
+  const [versionId, setVersionId] = useState('');
+  const [elementPath, setElementPath] = useState('');
+
+  const [savedQueryId, setSavedQueryId] = useState('');
+  const [loadingQuery, setLoadingQuery] = useState(false);
+  const [queryLoadError, setQueryLoadError] = useState<string | undefined>(
+    undefined,
+  );
+  const [queryLoadInfo, setQueryLoadInfo] = useState<string | undefined>(
+    undefined,
+  );
+
+  const [dataSpaceOptions, setDataSpaceOptions] = useState<DataSpaceOption[]>(
+    [],
+  );
+  const [loadingDataSpaces, setLoadingDataSpaces] = useState(false);
+  const [dataSpacesError, setDataSpacesError] = useState<string | undefined>(
+    undefined,
+  );
+  const [selectedDataSpaceKey, setSelectedDataSpaceKey] = useState('');
+  const [dataSpaceFilter, setDataSpaceFilter] = useState('');
+
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [result, setResult] = useState<InspectionResult | undefined>(undefined);
+  const [viewer, setViewer] = useState<JsonViewerState | undefined>(undefined);
+
+  const elementPathMissing = !elementPath.trim();
+  const canRun =
+    !running && !!groupId && !!artifactId && !!versionId && !elementPathMissing;
+
+  /**
+   * Load groupId / artifactId / versionId / elementPath from a saved
+   * query. Hits the engine query server `/pure/v1/query/{id}` endpoint
+   * directly (no graphManager dependency required for a diagnostic page).
+   */
+  const loadFromSavedQuery = async (): Promise<void> => {
+    const id = savedQueryId.trim();
+    if (!id) {
+      return;
+    }
+    setLoadingQuery(true);
+    setQueryLoadError(undefined);
+    setQueryLoadInfo(undefined);
+    try {
+      const config = applicationStore.config;
+      const base = config.engineQueryServerUrl ?? config.engineServerUrl;
+      if (!base) {
+        throw new Error('Engine (query) server URL is not configured');
+      }
+      const url = `${base}/pure/v1/query/${encodeURIComponent(id)}`;
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const body = (await response.json()) as {
+        groupId?: string;
+        artifactId?: string;
+        versionId?: string;
+        taggedValues?: {
+          profile?: string;
+          tag?: string;
+          value?: string;
+        }[];
+        executionContext?: {
+          _type?: string;
+          dataSpacePath?: string;
+        };
+      };
+
+      const nextGroupId = body.groupId ?? '';
+      const nextArtifactId = body.artifactId ?? '';
+      const nextVersionId = body.versionId ?? '';
+
+      // Prefer the executionContext.dataSpacePath (set when the saved
+      // query targets a dataspace exec context); fall back to the legacy
+      // `dataSpace` tagged value.
+      const fromExecutionContext =
+        body.executionContext?.dataSpacePath?.trim() ?? '';
+      const fromTaggedValues = (body.taggedValues ?? []).find(
+        (t) =>
+          t.profile === QUERY_PROFILE_PATH &&
+          t.tag === QUERY_PROFILE_TAG_DATA_SPACE &&
+          typeof t.value === 'string' &&
+          t.value.length > 0,
+      )?.value;
+      const nextElementPath = fromExecutionContext || (fromTaggedValues ?? '');
+
+      if (!nextGroupId || !nextArtifactId || !nextVersionId) {
+        throw new Error(
+          'Saved query is missing groupId / artifactId / versionId',
+        );
+      }
+      if (!nextElementPath) {
+        throw new Error(
+          'Saved query has no dataspace tagged value or dataspace execution context — cannot infer elementPath. Fill it in manually.',
+        );
+      }
+
+      setGroupId(nextGroupId);
+      setArtifactId(nextArtifactId);
+      setVersionId(nextVersionId);
+      setElementPath(nextElementPath);
+      setQueryLoadInfo(
+        `Loaded ${nextGroupId}:${nextArtifactId}:${nextVersionId} → ${nextElementPath}`,
+      );
+    } catch (e) {
+      setQueryLoadError(e instanceof Error ? e.message : String(e));
+      applicationStore.logService.error(
+        LogEvent.create(LEGEND_QUERY_APP_EVENT.GENERIC_FAILURE),
+        e,
+      );
+    } finally {
+      setLoadingQuery(false);
+    }
+  };
+
+  /**
+   * Load every DataSpace registered in depot (latest version of each)
+   * into a dropdown. Uses the lightweight `summary` classifier endpoint
+   * so we only get `{groupId, artifactId, versionId, path}` rows, not
+   * full entity content — safe to call with thousands of entries.
+   */
+  const loadAllDataSpaces = async (): Promise<void> => {
+    setLoadingDataSpaces(true);
+    setDataSpacesError(undefined);
+    try {
+      const base = depotServerClient.baseUrl;
+      if (!base) {
+        throw new Error('Depot server baseUrl is not configured');
+      }
+      const url = `${base}/classifiers/${encodeURIComponent(
+        DATA_SPACE_ELEMENT_CLASSIFIER_PATH,
+      )}?summary=true&latest=true`;
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const body = (await response.json()) as {
+        groupId?: string;
+        artifactId?: string;
+        versionId?: string;
+        path?: string;
+      }[];
+      const options: DataSpaceOption[] = body
+        .map((e): DataSpaceOption | undefined => {
+          const { groupId: g, artifactId: a, versionId: v, path: p } = e;
+          if (!g || !a || !v || !p) {
+            return undefined;
+          }
+          return {
+            groupId: g,
+            artifactId: a,
+            versionId: v,
+            path: p,
+            label: `${p}  \u2014  ${g}:${a}:${v}`,
+          };
+        })
+        .filter((o): o is DataSpaceOption => o !== undefined)
+        .sort((a, b) => a.label.localeCompare(b.label));
+      setDataSpaceOptions(options);
+    } catch (e) {
+      setDataSpacesError(e instanceof Error ? e.message : String(e));
+      applicationStore.logService.error(
+        LogEvent.create(LEGEND_QUERY_APP_EVENT.GENERIC_FAILURE),
+        e,
+      );
+    } finally {
+      setLoadingDataSpaces(false);
+    }
+  };
+
+  const applyDataSpaceOption = (key: string): void => {
+    setSelectedDataSpaceKey(key);
+    if (!key) {
+      return;
+    }
+    const option = dataSpaceOptions.find(
+      (o) => `${o.groupId}:${o.artifactId}:${o.versionId}:${o.path}` === key,
+    );
+    if (!option) {
+      return;
+    }
+    setGroupId(option.groupId);
+    setArtifactId(option.artifactId);
+    setVersionId(option.versionId);
+    setElementPath(option.path);
+  };
+
+  const filteredDataSpaceOptions = (() => {
+    const f = dataSpaceFilter.trim().toLowerCase();
+    if (!f) {
+      return dataSpaceOptions;
+    }
+    return dataSpaceOptions.filter((o) => o.label.toLowerCase().includes(f));
+  })();
+
+  const run = async (): Promise<void> => {
+    setRunning(true);
+    setError(undefined);
+    setResult(undefined);
+    try {
+      const project = StoreProjectData.serialization.fromJson(
+        await depotServerClient.getProject(groupId.trim(), artifactId.trim()),
+      );
+
+      const fetchStart = performance.now();
+      const files = await depotServerClient.getGenerationFilesByType(
+        project,
+        versionId.trim(),
+        'dataSpace-analytics',
+        elementPath.trim(),
+      );
+      const fetchMs = performance.now() - fetchStart;
+
+      const sizingStart = performance.now();
+      const rows: FileSizeRow[] = files
+        .map((f) => {
+          const elemPath = (f as { path?: unknown }).path;
+          const type = (f as { type?: unknown }).type;
+          const file = (f as { file?: { path?: unknown; content?: unknown } })
+            .file;
+          const filePath = file?.path;
+          const content = file?.content;
+          let bytes = 0;
+          try {
+            bytes =
+              typeof content === 'string'
+                ? content.length
+                : JSON.stringify(content).length;
+          } catch {
+            bytes = -1;
+          }
+          return {
+            path: typeof elemPath === 'string' ? elemPath : elementPath.trim(),
+            type: typeof type === 'string' ? type : '<unknown>',
+            filePath: typeof filePath === 'string' ? filePath : '<unknown>',
+            bytes,
+          };
+        })
+        .sort((a, b) => b.bytes - a.bytes);
+      const sizingMs = performance.now() - sizingStart;
+
+      const totalBytes = rows.reduce((sum, r) => sum + Math.max(0, r.bytes), 0);
+      setResult({
+        mode: 'parsed',
+        totalBytes,
+        fileCount: rows.length,
+        rows,
+        fetchMs,
+        sizingMs,
+        rawFiles: files,
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      applicationStore.logService.error(
+        LogEvent.create(LEGEND_QUERY_APP_EVENT.GENERIC_FAILURE),
+        e,
+      );
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  /**
+   * Streaming variant that NEVER parses the JSON. Uses fetch() directly,
+   * reads the response as a byte stream, and counts bytes as they arrive.
+   * Memory footprint stays flat regardless of payload size, so this works
+   * even on the OOM-causing payload where the parsed variant would crash.
+   */
+  const runStreaming = async (): Promise<void> => {
+    setRunning(true);
+    setError(undefined);
+    setResult(undefined);
+    try {
+      const base = depotServerClient.baseUrl;
+      if (!base) {
+        throw new Error('Depot server baseUrl is not configured');
+      }
+      const url =
+        `${base}/generations/${encodeURIComponent(groupId.trim())}` +
+        `/${encodeURIComponent(artifactId.trim())}` +
+        `/${encodeURIComponent(versionId.trim())}` +
+        `/types/dataSpace-analytics` +
+        `?elementPath=${encodeURIComponent(elementPath.trim())}`;
+
+      const fetchStart = performance.now();
+      // `credentials: 'include'` mirrors what AbstractServerClient does so
+      // we inherit the user's session cookies.
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const contentEncoding =
+        response.headers.get('content-encoding') ?? '<none>';
+      const compressedHeader = response.headers.get('content-length');
+      const compressedBytes = compressedHeader
+        ? Number(compressedHeader)
+        : undefined;
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error('Response body is not readable as a stream');
+      }
+      let streamedBodyBytes = 0;
+      let chunk = await reader.read();
+      while (!chunk.done) {
+        streamedBodyBytes += chunk.value.byteLength;
+        chunk = await reader.read();
+      }
+      const fetchMs = performance.now() - fetchStart;
+
+      setResult({
+        mode: 'streamed',
+        totalBytes: streamedBodyBytes,
+        fileCount: 0,
+        rows: [],
+        fetchMs,
+        sizingMs: 0,
+        streamedBodyBytes,
+        streamedCompressedBytes: compressedBytes,
+        streamedContentEncoding: contentEncoding,
+        streamedUrl: url,
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      applicationStore.logService.error(
+        LogEvent.create(LEGEND_QUERY_APP_EVENT.GENERIC_FAILURE),
+        e,
+      );
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  /**
+   * Streaming variant that walks the response with a tiny JSON state
+   * machine, recognises top-level array element boundaries, and for each
+   * element keeps only:
+   *   - its total byte length (from where it started to where it ended)
+   *   - its first 64 KB of text (enough to regex out `path`)
+   * Content (the large field) is read past and dropped on the fly, so peak
+   * heap stays roughly element-bounded, not response-bounded. Works on
+   * OOM-causing payloads because we never materialize the full body.
+   */
+  const runStreamingWithHeaders = async (): Promise<void> => {
+    setRunning(true);
+    setError(undefined);
+    setResult(undefined);
+    try {
+      const base = depotServerClient.baseUrl;
+      if (!base) {
+        throw new Error('Depot server baseUrl is not configured');
+      }
+      const url =
+        `${base}/generations/${encodeURIComponent(groupId.trim())}` +
+        `/${encodeURIComponent(artifactId.trim())}` +
+        `/${encodeURIComponent(versionId.trim())}` +
+        `/types/dataSpace-analytics` +
+        `?elementPath=${encodeURIComponent(elementPath.trim())}`;
+
+      const fetchStart = performance.now();
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const contentEncoding =
+        response.headers.get('content-encoding') ?? '<none>';
+      const compressedHeader = response.headers.get('content-length');
+      const compressedBytes = compressedHeader
+        ? Number(compressedHeader)
+        : undefined;
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error('Response body is not readable as a stream');
+      }
+
+      // Cap element header buffer at 64 KB. `StoredFileGeneration.path`
+      // and `type` reliably appear before the (potentially huge)
+      // `file.content` payload, so 64 KB is overkill but safe.
+      const MAX_HEADER_BYTES = 64 * 1024;
+      const decoder = new TextDecoder('utf-8');
+
+      let streamedBodyBytes = 0;
+      // JSON state machine
+      let depth = 0; // brace/bracket depth across all containers
+      let inString = false;
+      let escape = false;
+      let inElement = false; // true while inside a top-level array element
+      let elementByteStart = 0;
+      let elementHeader = ''; // capped to MAX_HEADER_BYTES per element
+      const rows: FileSizeRow[] = [];
+
+      const onElementComplete = (
+        startByte: number,
+        endByte: number,
+        headerText: string,
+      ): void => {
+        const pathMatch = /"path"\s*:\s*"(?<value>(?:[^"\\]|\\.)*)"/.exec(
+          headerText,
+        );
+        const filePath = pathMatch?.groups?.value ?? '<unknown>';
+        rows.push({
+          path: elementPath.trim(),
+          type: '<n/a>',
+          filePath,
+          bytes: endByte - startByte,
+        });
+      };
+
+      let chunk = await reader.read();
+      while (!chunk.done) {
+        const { value } = chunk;
+        const chunkBytes = value.byteLength;
+        const chunkText = decoder.decode(value, { stream: true });
+        const chunkStartByte = streamedBodyBytes;
+
+        for (let i = 0; i < chunkText.length; i++) {
+          const ch = chunkText[i];
+
+          if (inString) {
+            if (escape) {
+              escape = false;
+            } else if (ch === '\\') {
+              escape = true;
+            } else if (ch === '"') {
+              inString = false;
+            }
+          } else if (ch === '"') {
+            inString = true;
+          } else if (ch === '{' || ch === '[') {
+            if (depth === 1 && ch === '{') {
+              // Entering a top-level array element
+              inElement = true;
+              elementByteStart = chunkStartByte + i; // approximate (UTF-8/16 mismatch is OK for sizing)
+              elementHeader = '';
+            }
+            depth++;
+          } else if (ch === '}' || ch === ']') {
+            depth--;
+            if (depth === 1 && inElement && ch === '}') {
+              const elementByteEnd = chunkStartByte + i + 1;
+              onElementComplete(
+                elementByteStart,
+                elementByteEnd,
+                elementHeader,
+              );
+              inElement = false;
+              elementHeader = '';
+            }
+          }
+
+          if (inElement && elementHeader.length < MAX_HEADER_BYTES) {
+            elementHeader += ch;
+          }
+        }
+        streamedBodyBytes += chunkBytes;
+        chunk = await reader.read();
+      }
+      const fetchMs = performance.now() - fetchStart;
+
+      rows.sort((a, b) => b.bytes - a.bytes);
+      const totalBytes = rows.reduce((sum, r) => sum + Math.max(0, r.bytes), 0);
+
+      setResult({
+        mode: 'streamed-headers',
+        totalBytes,
+        fileCount: rows.length,
+        rows,
+        fetchMs,
+        sizingMs: 0,
+        streamedBodyBytes,
+        streamedCompressedBytes: compressedBytes,
+        streamedContentEncoding: contentEncoding,
+        streamedUrl: url,
+      });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+      applicationStore.logService.error(
+        LogEvent.create(LEGEND_QUERY_APP_EVENT.GENERIC_FAILURE),
+        e,
+      );
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  /**
+   * Stream the full response straight to a file on disk. Uses the File
+   * System Access API (`showSaveFilePicker`) so chunks are flushed to the
+   * filesystem as they arrive and the entire body never sits in memory at
+   * once — safe for the OOM-causing payload.
+   *
+   * Falls back to building a Blob and triggering an <a download> click for
+   * browsers without the File System Access API. Note: the fallback path
+   * DOES hold the full response in memory and will OOM on huge payloads;
+   * a warning is logged in that case.
+   */
+  const runStreamDownload = async (): Promise<void> => {
+    setRunning(true);
+    setError(undefined);
+    setResult(undefined);
+    try {
+      const base = depotServerClient.baseUrl;
+      if (!base) {
+        throw new Error('Depot server baseUrl is not configured');
+      }
+      const url =
+        `${base}/generations/${encodeURIComponent(groupId.trim())}` +
+        `/${encodeURIComponent(artifactId.trim())}` +
+        `/${encodeURIComponent(versionId.trim())}` +
+        `/types/dataSpace-analytics` +
+        `?elementPath=${encodeURIComponent(elementPath.trim())}`;
+
+      const suggestedName = `dataSpace-analytics_${groupId.trim()}_${artifactId.trim()}_${versionId.trim()}_${elementPath.trim().replace(/::/g, '_')}.json`;
+
+      // File System Access API is Chromium-only as of 2026. Probe before use.
+      const showSaveFilePicker = (
+        window as unknown as {
+          showSaveFilePicker?: (opts?: unknown) => Promise<{
+            createWritable: () => Promise<{
+              write: (chunk: Uint8Array) => Promise<void>;
+              close: () => Promise<void>;
+            }>;
+          }>;
+        }
+      ).showSaveFilePicker;
+
+      const fetchStart = performance.now();
+      const response = await fetch(url, {
+        method: 'GET',
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const contentEncoding =
+        response.headers.get('content-encoding') ?? '<none>';
+      const compressedHeader = response.headers.get('content-length');
+      const compressedBytes = compressedHeader
+        ? Number(compressedHeader)
+        : undefined;
+
+      let streamedBodyBytes = 0;
+
+      if (showSaveFilePicker) {
+        // Streaming path — bytes flushed to disk per chunk.
+        const handle = await showSaveFilePicker({
+          suggestedName,
+          types: [
+            {
+              description: 'JSON file',
+              accept: { 'application/json': ['.json'] },
+            },
+          ],
+        });
+        const writable = await handle.createWritable();
+        const reader = response.body?.getReader();
+        if (!reader) {
+          await writable.close();
+          throw new Error('Response body is not readable as a stream');
+        }
+        let chunk = await reader.read();
+        while (!chunk.done) {
+          await writable.write(chunk.value);
+          streamedBodyBytes += chunk.value.byteLength;
+          chunk = await reader.read();
+        }
+        await writable.close();
+      } else {
+        // Fallback: blob + anchor click. WARNING: holds full body in memory.
+        // eslint-disable-next-line no-console
+        console.warn(
+          '[DataSpaceArtifactInspector] showSaveFilePicker not available; ' +
+            'falling back to blob download. This holds the full body in memory.',
+        );
+        const blob = await response.blob();
+        streamedBodyBytes = blob.size;
+        const objectUrl = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = objectUrl;
+        a.download = suggestedName;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(objectUrl);
+      }
+
+      const fetchMs = performance.now() - fetchStart;
+
+      setResult({
+        mode: 'streamed',
+        totalBytes: streamedBodyBytes,
+        fileCount: 0,
+        rows: [],
+        fetchMs,
+        sizingMs: 0,
+        streamedBodyBytes,
+        streamedCompressedBytes: compressedBytes,
+        streamedContentEncoding: contentEncoding,
+        streamedUrl: url,
+      });
+    } catch (e) {
+      // AbortError from the user cancelling the save dialog is not a real
+      // error — silently no-op.
+      if (e instanceof DOMException && e.name === 'AbortError') {
+        return;
+      }
+      setError(e instanceof Error ? e.message : String(e));
+      applicationStore.logService.error(
+        LogEvent.create(LEGEND_QUERY_APP_EVENT.GENERIC_FAILURE),
+        e,
+      );
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  const openFullResponseViewer = (): void => {
+    if (!result?.rawFiles) {
+      return;
+    }
+    setViewer({
+      title: 'Full parsed response (StoredFileGeneration[])',
+      content: prettyJson(result.rawFiles),
+    });
+  };
+
+  const openFileViewer = (index: number): void => {
+    const entry = result?.rawFiles?.[index] as
+      | {
+          path?: string;
+          type?: string;
+          file?: { path?: string; content?: unknown };
+        }
+      | undefined;
+    if (!entry) {
+      return;
+    }
+    const filePath = entry.file?.path ?? entry.path ?? '<unknown>';
+    setViewer({
+      title: `File: ${filePath}`,
+      content: prettyJson(entry.file?.content),
+    });
+  };
+
+  return (
+    <div
+      style={{
+        padding: '1.5rem',
+        fontFamily:
+          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        color: '#ddd',
+        background: '#1e1e1e',
+        minHeight: '100vh',
+      }}
+    >
+      <h1 style={{ marginTop: 0 }}>DataSpace Artifact Inspector</h1>
+      <p style={{ color: '#aaa', maxWidth: 760 }}>
+        Diagnostic tool: fetches the per-element depot analytics endpoint for a
+        single DataSpace and reports total uncompressed payload size plus a
+        per-file breakdown. Use this to identify oversized partition files that
+        may cause Chrome tab OOM.
+      </p>
+
+      <h2 style={{ marginTop: '1.5rem', marginBottom: '0.25rem' }}>
+        Load inputs from a saved query (optional)
+      </h2>
+      <p style={{ color: '#888', maxWidth: 760, marginTop: 0 }}>
+        Paste a Legend saved query id; we&apos;ll fetch{' '}
+        <code>/pure/v1/query/&lt;id&gt;</code> and pre-fill groupId, artifactId,
+        versionId, and the dataspace path from the query&apos;s tagged values /
+        execution context.
+      </p>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '160px 1fr auto',
+          gap: '0.5rem 0.75rem',
+          maxWidth: 760,
+        }}
+      >
+        <label htmlFor="ds-savedQueryId">saved query id</label>
+        <input
+          id="ds-savedQueryId"
+          value={savedQueryId}
+          onChange={(e) => setSavedQueryId(e.target.value)}
+          placeholder="e.g. 65f1c0a8b1c0d20012345678"
+          style={inputStyle}
+        />
+        <button
+          type="button"
+          onClick={() => {
+            loadFromSavedQuery().catch(() => undefined);
+          }}
+          disabled={loadingQuery || !savedQueryId.trim()}
+          style={{
+            padding: '0.4rem 0.75rem',
+            background: loadingQuery ? '#555' : '#444',
+            color: 'white',
+            border: '1px solid #666',
+            borderRadius: 4,
+            cursor: loadingQuery ? 'wait' : 'pointer',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {loadingQuery ? 'Loading…' : 'Load'}
+        </button>
+      </div>
+      {queryLoadError && (
+        <div
+          style={{
+            marginTop: '0.5rem',
+            padding: '0.5rem 0.75rem',
+            background: '#5a1f1f',
+            border: '1px solid #a33',
+            borderRadius: 4,
+            maxWidth: 760,
+          }}
+        >
+          {queryLoadError}
+        </div>
+      )}
+      {queryLoadInfo && (
+        <div
+          style={{
+            marginTop: '0.5rem',
+            padding: '0.5rem 0.75rem',
+            background: '#1f3a1f',
+            border: '1px solid #3a6',
+            borderRadius: 4,
+            maxWidth: 760,
+            fontFamily: 'monospace',
+            fontSize: '0.85rem',
+          }}
+        >
+          {queryLoadInfo}
+        </div>
+      )}
+
+      <h2 style={{ marginTop: '1.5rem', marginBottom: '0.25rem' }}>
+        Pick from all DataSpaces (optional)
+      </h2>
+      <p style={{ color: '#888', maxWidth: 760, marginTop: 0 }}>
+        Load every DataSpace registered in depot (latest version of each) via{' '}
+        <code>
+          /classifiers/meta::pure::metamodel::dataSpace::DataSpace?summary=true&amp;latest=true
+        </code>
+        , then pick one to pre-fill all four inputs.
+      </p>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5rem',
+          maxWidth: 1000,
+          marginBottom: '0.5rem',
+        }}
+      >
+        <button
+          type="button"
+          onClick={() => {
+            loadAllDataSpaces().catch(() => undefined);
+          }}
+          disabled={loadingDataSpaces}
+          style={{
+            padding: '0.4rem 0.75rem',
+            background: loadingDataSpaces ? '#555' : '#444',
+            color: 'white',
+            border: '1px solid #666',
+            borderRadius: 4,
+            cursor: loadingDataSpaces ? 'wait' : 'pointer',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {loadingDataSpaces
+            ? 'Loading…'
+            : dataSpaceOptions.length > 0
+              ? `Reload (${dataSpaceOptions.length} loaded)`
+              : 'Load all dataspaces'}
+        </button>
+        <input
+          type="text"
+          value={dataSpaceFilter}
+          onChange={(e) => setDataSpaceFilter(e.target.value)}
+          placeholder="filter…"
+          disabled={dataSpaceOptions.length === 0}
+          style={{ ...inputStyle, flex: '0 0 220px' }}
+        />
+        <select
+          value={selectedDataSpaceKey}
+          onChange={(e) => applyDataSpaceOption(e.target.value)}
+          disabled={dataSpaceOptions.length === 0}
+          style={{
+            ...inputStyle,
+            flex: 1,
+            minWidth: 0,
+          }}
+        >
+          <option value="">
+            {dataSpaceOptions.length === 0
+              ? '(load dataspaces first)'
+              : `Select one of ${filteredDataSpaceOptions.length} dataspace${filteredDataSpaceOptions.length === 1 ? '' : 's'}…`}
+          </option>
+          {filteredDataSpaceOptions.map((o) => {
+            const key = `${o.groupId}:${o.artifactId}:${o.versionId}:${o.path}`;
+            return (
+              <option key={key} value={key}>
+                {o.label}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+      {dataSpacesError && (
+        <div
+          style={{
+            marginTop: '0.5rem',
+            padding: '0.5rem 0.75rem',
+            background: '#5a1f1f',
+            border: '1px solid #a33',
+            borderRadius: 4,
+            maxWidth: 1000,
+          }}
+        >
+          {dataSpacesError}
+        </div>
+      )}
+
+      <h2 style={{ marginTop: '1.5rem', marginBottom: '0.25rem' }}>Inputs</h2>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: '160px 1fr',
+          gap: '0.5rem 0.75rem',
+          maxWidth: 760,
+        }}
+      >
+        <label htmlFor="ds-groupId">groupId</label>
+        <input
+          id="ds-groupId"
+          value={groupId}
+          onChange={(e) => setGroupId(e.target.value)}
+          placeholder="com.groupId"
+          style={inputStyle}
+        />
+        <label htmlFor="ds-artifactId">artifactId</label>
+        <input
+          id="ds-artifactId"
+          value={artifactId}
+          onChange={(e) => setArtifactId(e.target.value)}
+          placeholder="my-artifactId"
+          style={inputStyle}
+        />
+        <label htmlFor="ds-versionId">versionId</label>
+        <input
+          id="ds-versionId"
+          value={versionId}
+          onChange={(e) => setVersionId(e.target.value)}
+          placeholder="1.0.0 or master-SNAPSHOT"
+          style={inputStyle}
+        />
+        <label htmlFor="ds-elementPath">
+          elementPath <span style={{ color: '#e88' }}>*</span>
+        </label>
+        <input
+          id="ds-elementPath"
+          value={elementPath}
+          onChange={(e) => setElementPath(e.target.value)}
+          placeholder="com::path::to::MyDataSpace (required)"
+          style={{
+            ...inputStyle,
+            borderColor: elementPathMissing ? '#a33' : '#444',
+          }}
+          aria-required="true"
+          aria-invalid={elementPathMissing}
+        />
+      </div>
+      {elementPathMissing && (
+        <div
+          style={{
+            marginTop: '0.5rem',
+            color: '#e88',
+            fontSize: '0.85rem',
+          }}
+        >
+          elementPath is required — this endpoint fetches files for a single
+          DataSpace.
+        </div>
+      )}
+
+      <button
+        type="button"
+        onClick={() => {
+          run().catch(() => undefined);
+        }}
+        disabled={!canRun}
+        style={{
+          marginTop: '1rem',
+          padding: '0.5rem 1rem',
+          background: running ? '#555' : '#0066cc',
+          color: 'white',
+          border: 'none',
+          borderRadius: 4,
+          cursor: running ? 'wait' : 'pointer',
+        }}
+      >
+        {running ? 'Fetching…' : 'Fetch and inspect (parsed)'}
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          runStreaming().catch(() => undefined);
+        }}
+        disabled={!canRun}
+        title="Streams the response and counts bytes without parsing. Survives OOM-causing payloads."
+        style={{
+          marginTop: '1rem',
+          marginLeft: '0.5rem',
+          padding: '0.5rem 1rem',
+          background: running ? '#555' : '#444',
+          color: 'white',
+          border: '1px solid #666',
+          borderRadius: 4,
+          cursor: running ? 'wait' : 'pointer',
+        }}
+      >
+        {running ? 'Streaming…' : 'Measure raw size only (streaming)'}
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          runStreamingWithHeaders().catch(() => undefined);
+        }}
+        disabled={!canRun}
+        title="Streams the response with a tiny JSON state machine, extracts each file's path and total byte length, drops the content as it flies past. Survives OOM-causing payloads AND gives per-file breakdown."
+        style={{
+          marginTop: '1rem',
+          marginLeft: '0.5rem',
+          padding: '0.5rem 1rem',
+          background: running ? '#555' : '#2a6',
+          color: 'white',
+          border: '1px solid #2a6',
+          borderRadius: 4,
+          cursor: running ? 'wait' : 'pointer',
+        }}
+      >
+        {running ? 'Streaming…' : 'Stream + per-file breakdown (no content)'}
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          runStreamDownload().catch(() => undefined);
+        }}
+        disabled={!canRun}
+        title="Stream the full response straight to a file on disk via the File System Access API. Body never sits in memory. Chromium-only for the streaming path; falls back to an in-memory blob download on other browsers."
+        style={{
+          marginTop: '1rem',
+          marginLeft: '0.5rem',
+          padding: '0.5rem 1rem',
+          background: running ? '#555' : '#963',
+          color: 'white',
+          border: '1px solid #963',
+          borderRadius: 4,
+          cursor: running ? 'wait' : 'pointer',
+        }}
+      >
+        {running ? 'Downloading…' : 'Download full response to file'}
+      </button>
+
+      {error && (
+        <div
+          style={{
+            marginTop: '1rem',
+            padding: '0.75rem',
+            background: '#5a1f1f',
+            border: '1px solid #a33',
+            borderRadius: 4,
+            whiteSpace: 'pre-wrap',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {result && (
+        <div style={{ marginTop: '1.5rem' }}>
+          <h2 style={{ marginBottom: '0.25rem' }}>
+            Summary (
+            {result.mode === 'streamed'
+              ? 'streaming mode — size only'
+              : result.mode === 'streamed-headers'
+                ? 'streaming mode — per-file headers'
+                : 'parsed mode'}
+            )
+          </h2>
+          <table style={{ borderCollapse: 'collapse', marginBottom: '1rem' }}>
+            <tbody>
+              {result.mode === 'streamed' ||
+              result.mode === 'streamed-headers' ? (
+                <>
+                  <Row label="URL" value={result.streamedUrl ?? '<unknown>'} />
+                  <Row
+                    label="Content-Encoding"
+                    value={result.streamedContentEncoding ?? '<none>'}
+                  />
+                  <Row
+                    label="Content-Length header"
+                    value={
+                      result.streamedCompressedBytes !== undefined
+                        ? `${result.streamedCompressedBytes} bytes (${fmtMB(result.streamedCompressedBytes)})`
+                        : '<not set>'
+                    }
+                  />
+                  <Row
+                    label="Streamed body (decoded by browser)"
+                    value={`${result.streamedBodyBytes ?? 0} bytes (${fmtMB(result.streamedBodyBytes ?? 0)})`}
+                  />
+                  <Row
+                    label="Fetch + drain time"
+                    value={`${result.fetchMs.toFixed(0)} ms`}
+                  />
+                  {result.mode === 'streamed-headers' && (
+                    <>
+                      <Row
+                        label="Element count"
+                        value={String(result.fileCount)}
+                      />
+                      {result.fileCount > 0 && (
+                        <Row
+                          label="Mean element size"
+                          value={fmtMB(result.totalBytes / result.fileCount)}
+                        />
+                      )}
+                      {result.rows[0] && (
+                        <Row
+                          label="Largest element"
+                          value={`${fmtMB(result.rows[0].bytes)} — ${result.rows[0].filePath} (${result.rows[0].type}) [${result.rows[0].path}]`}
+                        />
+                      )}
+                    </>
+                  )}
+                </>
+              ) : (
+                <>
+                  <Row label="File count" value={String(result.fileCount)} />
+                  <Row
+                    label="Total uncompressed"
+                    value={fmtMB(result.totalBytes)}
+                  />
+                  <Row
+                    label="Total uncompressed (bytes)"
+                    value={String(result.totalBytes)}
+                  />
+                  <Row
+                    label="Depot fetch time"
+                    value={`${result.fetchMs.toFixed(0)} ms`}
+                  />
+                  <Row
+                    label="Sizing walk time"
+                    value={`${result.sizingMs.toFixed(0)} ms`}
+                  />
+                  {result.fileCount > 0 && (
+                    <Row
+                      label="Mean file size"
+                      value={fmtMB(result.totalBytes / result.fileCount)}
+                    />
+                  )}
+                  {result.rows[0] && (
+                    <Row
+                      label="Largest file"
+                      value={`${fmtMB(result.rows[0].bytes)} — ${result.rows[0].filePath} [${result.rows[0].path}]`}
+                    />
+                  )}
+                </>
+              )}
+            </tbody>
+          </table>
+
+          {result.mode === 'parsed' && result.rawFiles && (
+            <button
+              type="button"
+              onClick={openFullResponseViewer}
+              style={{
+                padding: '0.4rem 0.9rem',
+                background: '#444',
+                color: 'white',
+                border: '1px solid #666',
+                borderRadius: 4,
+                cursor: 'pointer',
+                marginBottom: '1rem',
+              }}
+              title="Pretty-print the full StoredFileGeneration[] response in a foldable JSON viewer."
+            >
+              View full JSON response
+            </button>
+          )}
+
+          <h2 style={{ marginBottom: '0.25rem' }}>
+            Per-file breakdown (descending)
+          </h2>
+          {result.mode === 'streamed' ? (
+            <p style={{ color: '#aaa' }}>
+              Per-file breakdown is only available in parsed or streamed-headers
+              mode. Raw streaming mode only measures total bytes.
+            </p>
+          ) : (
+            <table
+              style={{
+                borderCollapse: 'collapse',
+                width: '100%',
+                maxWidth: 1200,
+              }}
+            >
+              <thead>
+                <tr style={{ background: '#2a2a2a' }}>
+                  <th style={thStyle}>#</th>
+                  <th style={thStyle}>DataSpace path</th>
+                  <th style={thStyle}>Type</th>
+                  <th style={thStyle}>File</th>
+                  <th style={{ ...thStyle, textAlign: 'right' }}>Size</th>
+                  <th style={{ ...thStyle, textAlign: 'right' }}>% of total</th>
+                  {result.mode === 'parsed' && (
+                    <th style={{ ...thStyle, textAlign: 'right' }}>View</th>
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {result.rows.map((r, i) => {
+                  // In parsed mode, the per-row index in the descending
+                  // size table doesn't match the position in `rawFiles`.
+                  // Match by the inner `file.path` (the actual file path) —
+                  // the outer `path` field on `StoredFileGeneration` is the
+                  // element path and is the same for every row.
+                  const rawIndex =
+                    result.mode === 'parsed' && result.rawFiles
+                      ? result.rawFiles.findIndex(
+                          (f) =>
+                            (f as { file?: { path?: unknown } }).file?.path ===
+                            r.filePath,
+                        )
+                      : -1;
+                  return (
+                    <tr
+                      key={`${r.path}::${r.type}::${r.filePath}::${r.bytes}`}
+                      style={{
+                        background: i % 2 === 0 ? '#222' : '#1a1a1a',
+                      }}
+                    >
+                      <td style={tdStyle}>{i + 1}</td>
+                      <td style={tdStyle}>{r.path}</td>
+                      <td style={{ ...tdStyle, color: '#9cf' }}>{r.type}</td>
+                      <td style={{ ...tdStyle, color: '#fc9' }}>
+                        {r.filePath}
+                      </td>
+                      <td style={{ ...tdStyle, textAlign: 'right' }}>
+                        {fmtMB(r.bytes)}
+                      </td>
+                      <td style={{ ...tdStyle, textAlign: 'right' }}>
+                        {result.totalBytes
+                          ? `${((r.bytes / result.totalBytes) * 100).toFixed(1)}%`
+                          : '—'}
+                      </td>
+                      {result.mode === 'parsed' && (
+                        <td style={{ ...tdStyle, textAlign: 'right' }}>
+                          {rawIndex >= 0 ? (
+                            <button
+                              type="button"
+                              onClick={() => openFileViewer(rawIndex)}
+                              style={{
+                                padding: '0.15rem 0.5rem',
+                                background: '#345',
+                                color: 'white',
+                                border: '1px solid #567',
+                                borderRadius: 3,
+                                cursor: 'pointer',
+                                fontSize: '0.8rem',
+                              }}
+                              title="Open this file's content in the JSON viewer."
+                            >
+                              view
+                            </button>
+                          ) : (
+                            '—'
+                          )}
+                        </td>
+                      )}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+      )}
+
+      {viewer && (
+        <JsonViewerModal
+          title={viewer.title}
+          content={viewer.content}
+          onClose={() => setViewer(undefined)}
+        />
+      )}
+    </div>
+  );
+});