@elaraai/e3-ui-components 1.0.56 → 1.0.58

package/dist/index.js

@@ -23,7 +23,7 @@ import { EastTypeType } from "@elaraai/east/internal";
 import { DataBindModeType, DataBindPrimitives, bindPlatformFn, FuncBindPrimitives, FuncErrorType, FuncStatusType, funcBindPlatformFn, RecordBindPrimitives, recordBindPlatformFn, Diff, Ontology, FuncBindHandleType, Experiment, decisionBindPlatformFn, DecisionBindPrimitives, DecisionConstraintType, DiffBindingType, CommitStateType, VerdictType, AnswerType, judgementInputType, DecisionType, DecisionQueue, DecisionJournal, decodeManifest } from "@elaraai/e3-ui/internal";
 import { registerReactiveTracker, registerPlatformImplementation, StateRuntime, getRegisteredPlatformImplementations, boundSliceConfig } from "@elaraai/east-ui-components/platform";
 import { TreePathType, DatasetStatusType } from "@elaraai/e3-types";
-import { workspaceStatus, datasetListAt, datasetList, dataflowExecuteLaunch, datasetSet, datasetGet, ApiError, workspaceFunctionCall, workspaceFunctionList, workspaceRecordHistory, workspaceRecordMutate, workspaceRecordDescribe, repoCreate, repoGc, repoGcStart, repoGcStatus, repoList, repoRemove, repoStatus, packageExport, packageGet, packageImport, packageList, packageRemove, workspaceCreate, workspaceDeploy, workspaceExport, workspaceGet, workspaceList, workspaceRemove, datasetGetStatus, datasetListRecursive, datasetListRecursivePaths, datasetListWithStatus, taskExecutionList, taskGet, taskList, dataflowCancel, dataflowExecute, dataflowExecutePoll, dataflowGraph, taskLogs } from "@elaraai/e3-api-client";
+import { workspaceStatus, datasetListAt, datasetList, dataflowExecuteLaunch, datasetSet, datasetGet, ApiError, workspaceFunctionCall, workspaceFunctionList, workspaceRecordHistory, workspaceRecordMutate, workspaceRecordDescribe, repoCreate, repoGc, repoGcStart, repoGcStatus, repoList, repoRemove, repoStatus, packageExport, packageGet, packageImport, packageList, packageRemove, workspaceCreate, workspaceDeploy, workspaceExport, workspaceGet, workspaceList, workspaceRemove, datasetGetStatus, datasetListRecursive, datasetListRecursivePaths, datasetListWithStatus, taskExecutionList, taskGet, taskList, dataflowCancel, dataflowExecute, dataflowExecutePoll, dataflowGraph, taskLogs, datasetGetPage } from "@elaraai/e3-api-client";
 import { jsx as jsx$1, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useId, useMemo, useContext, createContext, useRef, useEffect, useState, useCallback, useSyncExternalStore, memo, forwardRef, useLayoutEffect, Fragment as Fragment$1, Component } from "react";
@@ -31,7 +31,7 @@ import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useTo
 import { implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, useContainerBelow, usePersistedState, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, NavImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl, LoadingIcon, EastChakraValueTree, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
 import { createPortal } from "react-dom";
 import { sliceMatches } from "@elaraai/east-ui/internal";
-import { QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery, useQueryClient, keepPreviousData } from "@tanstack/react-query";
+import { QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery, keepPreviousData, useQueryClient } from "@tanstack/react-query";
 import { ValueTree } from "@elaraai/east-ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 var Subscribable = class {
@@ -63839,6 +63839,35 @@ function useDatasetDownload(apiUrl, repo, workspace, datasetPath, requestOptions
     URL.revokeObjectURL(url);
   }, [apiUrl, repo, workspace, datasetPath, pathParts, reqOpts]);
 }
+function useDatasetPage(apiUrl, repo, workspace, datasetPath, options2) {
+  const { requestOptions, queryOverrides, enabled = true, hash: hash2, type, window: window3 } = options2;
+  const reqOpts = requestOptions ?? { token: null };
+  const pathParts = useMemo(
+    () => (datasetPath == null ? void 0 : datasetPath.split(".").filter(Boolean).map((v3) => variant("field", v3))) ?? [],
+    [datasetPath]
+  );
+  const windowKey = "segment" in window3 ? `s${window3.segment}` : `${window3.offset}+${window3.limit}`;
+  return useQuery({
+    queryKey: ["datasetPage", apiUrl, repo, workspace, datasetPath, hash2 ?? null, windowKey],
+    queryFn: async () => {
+      const pinned = hash2 != null ? { ...window3, hash: hash2 } : window3;
+      const page = await datasetGetPage(apiUrl, repo, workspace, pathParts, pinned, reqOpts);
+      const decoded = decodeBeast2For(type)(page.data);
+      return {
+        decoded,
+        totalElements: page.totalElements,
+        totalBytes: page.totalBytes,
+        totalExact: page.totalExact,
+        segmentCount: page.segmentCount,
+        offset: page.offset,
+        count: page.count
+      };
+    },
+    enabled: enabled && !!workspace && !!datasetPath && hash2 != null,
+    placeholderData: keepPreviousData,
+    ...queryOverrides
+  });
+}
 function useTaskDetails(apiUrl, repo, workspace, taskName, options2) {
   const reqOpts = (options2 == null ? void 0 : options2.requestOptions) ?? { token: null };
   return useQuery({
@@ -63982,6 +64011,158 @@ class ErrorBoundary extends Component {
     return this.props.children;
   }
 }
+function pagingDebug(...args) {
+  try {
+    if (typeof localStorage === "undefined") return;
+    const flag = localStorage.getItem("e3-paging-debug");
+    if (flag === null || flag === "off") return;
+  } catch {
+    return;
+  }
+  console.info("[e3-paging]", ...args);
+}
+const PAGE_SIZE = 500;
+function pageRows(type, decoded, offset) {
+  if (type.type === "Array") {
+    const elemType2 = type.value;
+    return decoded.map((el, i) => ({
+      node: ValueTree.materialize(elemType2, el),
+      step: variant("index", BigInt(offset + i))
+    }));
+  }
+  if (type.type === "Dict") {
+    const { key: keyType, value: valueType } = type.value;
+    const printKey = printFor(keyType);
+    const stringKeys = keyType.type === "String";
+    return Array.from(decoded.entries()).map(([k2, v3], i) => ({
+      node: ValueTree.materialize(valueType, v3),
+      step: stringKeys ? variant("key", k2) : variant("index", BigInt(offset + i)),
+      label: stringKeys ? k2 : printKey(k2)
+    }));
+  }
+  const elemType = type.value;
+  return Array.from(decoded.values()).map((el, i) => ({
+    node: ValueTree.materialize(elemType, el),
+    step: variant("index", BigInt(offset + i))
+  }));
+}
+function emptyOf(type) {
+  return type.type === "Array" ? [] : type.type === "Dict" ? /* @__PURE__ */ new Map() : /* @__PURE__ */ new Set();
+}
+const PagedDatasetPreview = memo(function PagedDatasetPreview2({
+  apiUrl,
+  repo,
+  workspace,
+  path: path2,
+  type,
+  hash: hash2,
+  sizeBytes,
+  requestOptions,
+  onDownload
+}) {
+  const queryClient = useQueryClient();
+  const [pages, setPages] = useState(/* @__PURE__ */ new Map());
+  const [totals, setTotals] = useState(null);
+  const [loadingCount, setLoadingCount] = useState(0);
+  const [error3, setError] = useState(null);
+  const inflightRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    pagingDebug(`reset (path=${path2}, hash=${hash2.slice(0, 8)})`);
+    setPages(/* @__PURE__ */ new Map());
+    setTotals(null);
+    setError(null);
+    inflightRef.current.clear();
+  }, [path2, hash2]);
+  const loadPage = useCallback((pageIdx) => {
+    if (inflightRef.current.has(pageIdx)) return;
+    inflightRef.current.add(pageIdx);
+    setLoadingCount((n2) => n2 + 1);
+    pagingDebug(`fetch p${pageIdx} (offset=${pageIdx * PAGE_SIZE}, limit=${PAGE_SIZE}, hash=${hash2.slice(0, 8)})`);
+    const pathParts = path2.split(".").filter(Boolean).map((v3) => variant("field", v3));
+    const reqOpts = requestOptions ?? { token: null };
+    queryClient.fetchQuery({
+      queryKey: ["datasetPage", apiUrl, repo, workspace, path2, hash2, `p${pageIdx}`],
+      // Hash-pinned: the URL is a pure function of the bytes, so any
+      // HTTP cache between here and the server can hold it immutably.
+      queryFn: () => datasetGetPage(apiUrl, repo, workspace, pathParts, { offset: pageIdx * PAGE_SIZE, limit: PAGE_SIZE, hash: hash2 }, reqOpts),
+      staleTime: Infinity
+      // pages of one content hash are immutable
+    }).then((page) => {
+      const decoded = decodeBeast2For(type)(page.data);
+      const rows = pageRows(type, decoded, page.offset);
+      pagingDebug(
+        `p${pageIdx} ok: count=${page.count} rows=${rows.length} offset=${page.offset} total=${page.totalElements} segs=${page.segmentCount}`,
+        rows.length > 0 ? `first=${JSON.stringify(rows[0].label ?? "(derived)")}` : "(empty)"
+      );
+      if (page.count < PAGE_SIZE && page.offset + page.count < page.totalElements) {
+        pagingDebug(`p${pageIdx} SHORT page: server clamped ${PAGE_SIZE} → ${page.count}`);
+      }
+      setTotals({ elements: page.totalElements, bytes: page.totalBytes });
+      setPages((prev2) => new Map(prev2).set(pageIdx, rows));
+    }).catch((err) => {
+      pagingDebug(`p${pageIdx} FAILED:`, err);
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      inflightRef.current.delete(pageIdx);
+      setLoadingCount((n2) => n2 - 1);
+    });
+  }, [queryClient, apiUrl, repo, workspace, path2, hash2, requestOptions, type]);
+  useEffect(() => {
+    if (totals === null && error3 === null) loadPage(0);
+  }, [totals, error3, loadPage]);
+  const onNeedRows = useCallback((startRow, endRow) => {
+    const first2 = Math.max(0, Math.floor(startRow / PAGE_SIZE));
+    const last2 = Math.max(first2, Math.ceil(endRow / PAGE_SIZE) - 1);
+    const missing = [];
+    for (let p2 = first2; p2 <= last2; p2++) {
+      if (!pages.has(p2)) missing.push(p2);
+    }
+    pagingDebug(`need rows [${startRow}, ${endRow}) → pages ${first2}..${last2}, missing=[${missing.join(",")}], inflight=[${[...inflightRef.current].join(",")}]`);
+    for (const p2 of missing) loadPage(p2);
+  }, [pages, loadPage]);
+  const treeValue = useMemo(() => ({
+    root: ValueTree.materialize(type, emptyOf(type)),
+    onEdit: none$1,
+    onInsert: none$1,
+    onRemove: none$1,
+    onTag: none$1,
+    style: some({ height: some("100%"), maxHeight: none$1, openDepth: none$1, toolbar: some(true) })
+  }), [type]);
+  const paging = useMemo(() => totals === null ? null : {
+    totalRows: totals.elements,
+    pageSize: PAGE_SIZE,
+    pages,
+    onNeedRows
+  }, [totals, pages, onNeedRows]);
+  if (error3 !== null) {
+    if (error3 instanceof ApiError && error3.code === "dataset_too_large") {
+      return /* @__PURE__ */ jsxs(Flex, { height: "100%", direction: "column", align: "center", justify: "center", gap: 3, p: 6, children: [
+        /* @__PURE__ */ jsx$1(Text, { fontSize: "lg", color: "fg.warning", fontWeight: "bold", children: "Too large to page" }),
+        /* @__PURE__ */ jsx$1(Text, { color: "fg.muted", fontSize: "sm", textAlign: "center", maxW: "32rem", children: typeof error3.details === "string" ? error3.details : "This dataset cannot be paged server-side." }),
+        /* @__PURE__ */ jsx$1(DownloadButton, { onClick: onDownload, label: "Download value" })
+      ] });
+    }
+    return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "error", title: "Paged load failed", message: error3.message });
+  }
+  if (paging === null || totals === null) {
+    return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "loading", title: "Loading..." });
+  }
+  const itemNoun = type.type === "Dict" ? "entries" : "items";
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", height: "100%", overflow: "hidden", children: [
+    /* @__PURE__ */ jsxs(Flex, { px: 4, py: 2, gap: 2, align: "center", flexShrink: 0, borderBottom: "1px solid", borderColor: "border.subtle", children: [
+      /* @__PURE__ */ jsxs(Text, { fontSize: "xs", color: "fg.muted", whiteSpace: "nowrap", children: [
+        totals.elements.toLocaleString(),
+        " ",
+        itemNoun,
+        " · ",
+        formatSize(totals.bytes > 0 ? totals.bytes : sizeBytes)
+      ] }),
+      loadingCount > 0 && /* @__PURE__ */ jsx$1(Text, { fontSize: "xs", color: "fg.muted", children: "Loading…" }),
+      /* @__PURE__ */ jsx$1(Flex, { flex: 1, justify: "flex-end", children: /* @__PURE__ */ jsx$1(DownloadButton, { onClick: onDownload }) })
+    ] }),
+    /* @__PURE__ */ jsx$1(Box, { flex: 1, minHeight: 0, overflow: "hidden", children: /* @__PURE__ */ jsx$1(EastChakraValueTree, { value: treeValue, storageKey: `${path2}:page`, paging }) })
+  ] });
+}, (prev2, next2) => prev2.path === next2.path && prev2.workspace === next2.workspace && prev2.hash === next2.hash && prev2.sizeBytes === next2.sizeBytes);
 const DEFAULT_SIZE_LIMIT = 200 * 1024;
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -64054,7 +64235,7 @@ const DatasetPreview = memo(function DatasetPreview2({
       onRemove: some((p2) => write(ValueTree.applyEdit(type, decoded, p2, { kind: "remove" }))),
       onTag: some((p2, tag) => write(ValueTree.applyEdit(type, decoded, p2, { kind: "tag", tag })))
     } : { onEdit: none$1, onInsert: none$1, onRemove: none$1, onTag: none$1 };
-    return { root: root2, ...wire, style: some({ height: some("100%"), maxHeight: none$1 }) };
+    return { root: root2, ...wire, style: some({ height: some("100%"), maxHeight: none$1, openDepth: none$1, toolbar: some(true) }) };
   }, [type, decoded, editable, write]);
   if (statusQuery.isLoading) return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "loading", title: "Loading..." });
   if (statusQuery.error) {
@@ -64064,6 +64245,23 @@ const DatasetPreview = memo(function DatasetPreview2({
   if (!status) return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "info", title: "No status" });
   if (!hasValue) return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "info", title: "No data available", message: "Waiting for a value to be set" });
   if (isOversized) {
+    const pageable = type !== void 0 && (type.type === "Array" || type.type === "Set" || type.type === "Dict");
+    if (pageable && workspace != null && path2 != null && status.hash != null) {
+      return /* @__PURE__ */ jsx$1(
+        PagedDatasetPreview,
+        {
+          apiUrl,
+          repo,
+          workspace,
+          path: path2,
+          type,
+          hash: status.hash,
+          sizeBytes,
+          ...requestOptions != null && { requestOptions },
+          onDownload: download
+        }
+      );
+    }
     return /* @__PURE__ */ jsxs(Flex, { height: "100%", direction: "column", align: "center", justify: "center", layerStyle: "banner.stale", borderRadius: "0", gap: 3, p: 6, children: [
       /* @__PURE__ */ jsx$1(Text, { fontSize: "lg", color: "fg.warning", fontWeight: "bold", children: "Value too large to display" }),
       /* @__PURE__ */ jsxs(Text, { color: "fg.muted", fontSize: "sm", children: [
@@ -64078,9 +64276,14 @@ const DatasetPreview = memo(function DatasetPreview2({
   }
   if (valueQuery.isLoading || !valueQuery.data) return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "loading", title: "Loading..." });
   if (valueQuery.error) return /* @__PURE__ */ jsx$1(StatusDisplay, { variant: "error", title: "Decode failed", message: valueQuery.error.message });
+  const count = type === void 0 || decoded === void 0 ? null : type.type === "Array" ? decoded.length : type.type === "Set" || type.type === "Dict" ? decoded.size : null;
+  const countText = count === null ? "" : `${count.toLocaleString()} ${(type == null ? void 0 : type.type) === "Dict" ? "entries" : "items"} · `;
   return /* @__PURE__ */ jsxs(Flex, { direction: "column", height: "100%", overflow: "hidden", children: [
     /* @__PURE__ */ jsxs(Flex, { px: 4, py: 2, justify: "flex-end", flexShrink: 0, borderBottom: "1px solid", borderColor: "border.subtle", children: [
-      /* @__PURE__ */ jsx$1(Text, { fontSize: "xs", color: "fg.muted", mr: 2, alignSelf: "center", children: formatSize(sizeBytes) }),
+      /* @__PURE__ */ jsxs(Text, { fontSize: "xs", color: "fg.muted", mr: 2, alignSelf: "center", children: [
+        countText,
+        formatSize(sizeBytes)
+      ] }),
       /* @__PURE__ */ jsx$1(DownloadButton, { onClick: download })
     ] }),
     /* @__PURE__ */ jsx$1(Box, { flex: 1, minHeight: 0, overflow: "hidden", children: treeValue !== null && /* @__PURE__ */ jsx$1(EastChakraValueTree, { value: treeValue, storageKey: path2 ?? "value" }) })
@@ -65155,6 +65358,7 @@ export {
   useDatasetListRecursive,
   useDatasetListRecursivePaths,
   useDatasetListWithStatus,
+  useDatasetPage,
   useDatasetSet,
   useDatasetStatus,
   useDatasetValue,