E3 UI 组件

反应 e3 API 的查询钩和预览组件

E3 UI 组件 为所有人提供反应查询钩 e3- api- 客户端 函数和用于任务、输入和日志的可再使用的预览组件.

特征

• 重复查询钩 - 说吧 useQuery 财务报告和审定财务报表 useMutation 所有 e3 API 客户端功能的包装器
• 任务预览 - 查看任务执行产出和日志的组件
• 输入预览 - 查看数据集输入值的组件
• 虚拟日志查看器 - 有搜索和自动滚动的表演日志显示
• 类型安全 - 完整类型脚本支持,并有适当的返回类型推论

安装

npm install @elaraai/e3-ui-components @elaraai/e3-api-client @tanstack/react-query

钩子

为每个e3 API 域提供了反应查询钩:

快速启动

import { useWorkspaceList, useTaskList } from '@elaraai/e3-ui-components';

function WorkspaceView({ apiUrl, repo }: { apiUrl: string; repo: string }) {
    const { data: workspaces, isLoading } = useWorkspaceList(apiUrl, repo);

    if (isLoading) return <div>Loading...</div>;

    return (
        <ul>
            {workspaces?.map(ws => <li key={ws.name}>{ws.name}</li>)}
        </ul>
    );
}

查询覆盖

所有查询钩子接受可选 QueryOverrides 用于控制查询行为的参数 :

const { data } = useTaskList(apiUrl, repo, workspace, requestOptions, {
    refetchInterval: 5000,
    staleTime: 10000,
    enabled: isReady,
});

投票

屏幕左侧打开时, 服务器的成本尽可能小 :

• 民意测验会尝试一个请求. useWorkspaceStatus, (中文(简体) ), useDataflowExecution, (中文(简体) ), useTaskLogs, (中文(简体) ), useDatasetStatus 和数据集 缓存状态民意调查用e3 -api -客户端发送请求 pollRequestOptions,所以一个短暂的失败 留给下一次民意调查 而不是互相重复三次.
• 数据集缓存有条件地询问 . <ReactiveDatasetProvider>是因为 缓存民调 工作空间状况 pollIntervalMs 1 000 ms),同时什么 它显示变化,后退到 pollBackoffMs (5000ms) 曾经什么都没有 有;每个民意测验都发出最后的答案 ETag 背数( r)workspaceStatusSince, (中文(简体) ), 而一个仍然持有这种状态的服务器却什么也没有回答. 每半个 一分钟它问满, 所以一个跑者死了 显示为 stale 获取失败, 新建手表或刷新, 所以没有有条件的答案 会离开,因为它是保持。 虽然 页面被隐藏——其标签在背景中——它没有进行民意测验和民意测验 当页面再次显示时,每个工作空间一次。 A 类 UITaskPreview 缩短间隔 pollInterval 和背靠边 pollBackoff。 。 。 .
• 数据集的状况每30秒调查一次 (单位:千美元)DATASET_STATUS_POLL_MS: useDatasetStatus是因为 pollInterval预览 pollInterval (单位:千美元)DatasetPreview, (中文(简体) ), InputPreview和 statusPollInterval (单位:千美元)TaskPreview, (中文(简体) ), DataTaskPreview· ; UITaskPreview是因为 outputPollInterval)缩短.
• 任务日志在生长时被调查: 当它改变时, 退到5秒 而不退 任务完成后每半分钟 执行已终止, 并读取日志, 对于任务的另一个执行, 这又开始了投票 记录了剩下的景色——另一条溪流, 另一项任务——保留在读到的地方,因此可以追溯到 从那里开始读. TaskPreview是因为 logPollInterval 财务报告和审定财务报表 logPollBackoff 设置间隔.
• 任务的细节读取一次. useTaskDetails 财务报告和审定财务报表 useTaskGet 份额 一个查询密钥, 所以预览和打开它的主机读取任务 一次;一个持有细节的宿主把它们交给 TaskPreview是因为 details,预览则不提出请求.

恢复失败的读取

在无人触摸的屏幕上看到的景色,如"亭"等,没有人可以重新装入. useQueryRecovery 在视图中再次尝试失败的查询 安装,作为 UITaskPreview 已经 它等待一个随机点在 后半段从1s到30s(recoveryDelay,并显示 每一次尝试中最近的失败, 不再装入 .

import { StatusDisplay, useQueryRecovery, useTaskGet } from '@elaraai/e3-ui-components';

const details = useTaskGet(apiUrl, repo, workspace, task);
const failure = useQueryRecovery(details); // null once it reads
if (failure !== null) return <StatusDisplay variant="error" title="Error" message={failure.message} />;

正在外部渲染用户界面 UITaskPreview

使 UI 功能随平台解码的主机 UITaskPreview 列表。 每一个都是用名字出口的: 东-ui-组件自己的, Decision.bind其数(DecisionBindPlatform),并绑定了UI的范围 显出. 预装清单 paths 与 usePreloadReactiveDatasets 在UI第一次阅读之前.

import { decodeBeast2For } from '@elaraai/east';
import { UIComponentType } from '@elaraai/east-ui';
import {
    StateImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl,
} from '@elaraai/east-ui-components';
import { RecordSliceImpl } from '@elaraai/east-ui-components/platform';
import {
    DecisionBindPlatform, createScopedBindPlatform, createScopedPagedPlatform,
    createScopedFuncPlatform, createScopedRecordPlatform,
} from '@elaraai/e3-ui-components';

const platforms = [
    ...StateImpl, ...SliceImpl, ...RecordSliceImpl, ...SliceApplyImpl, ...OverlayImpl,
    ...ClipboardImpl, ...DownloadImpl, ...ShareImpl, ...DecisionBindPlatform,
    ...createScopedBindPlatform(manifest),
    ...createScopedPagedPlatform(manifest.pages),
    ...createScopedFuncPlatform(manifest.functions),
    ...createScopedRecordPlatform(manifest.records),
];
const ui = decodeBeast2For(UIComponentType, { platform: platforms })(bytes);

构成部分

任务审查

按任务预览任务: a ui() 任务使其UI; 数据任务显示其 输出(Output)及其日志(Logs)在一个带下,持有Out/Logs开关. 产出之上是它的密钥搜索、大小和下载,之上是它的树 折叠全部并展开全部; 在日志之上, 其 stdout/ stderr 标签, 搜索 复制副本.

import { TaskPreview } from '@elaraai/e3-ui-components';

<TaskPreview apiUrl={url} repo="default" workspace={ws} task={taskName} />

其框架控制在标题中的宿主 自己画出并隐藏 乐队:

import {
    TaskPreview, downloadDataset, formatSize, usePreviewControls, useDatasetStatus, useTaskDetails, type LogMatches,
} from '@elaraai/e3-ui-components';

const [view, setView] = useState<'output' | 'logs'>('output');
const [search, setSearch] = useState('');
const [stream, setStream] = useState<'stdout' | 'stderr'>('stdout');
const [logSearch, setLogSearch] = useState('');
const [matches, setMatches] = useState<LogMatches>({ current: 0, count: 0 });
const controls = usePreviewControls();
const details = useTaskDetails(url, 'default', ws, taskName);
const output = details.data?.output.path.map((step) => step.value).join('.') ?? null;
const status = useDatasetStatus(url, 'default', ws, output);

// In the header, at the header's size: the tab; on Output, the search, the size,
// Download, and Collapse all and Expand all; on Logs, the stream, the search,
// `${matches.current + 1}/${matches.count}`, the chevrons and Copy.
// In the body:
<TaskPreview apiUrl={url} repo="default" workspace={ws} task={taskName} bare
    toolbar={false} view={view} onViewChange={setView} search={search}
    logStream={stream} onLogStreamChange={setStream} logSearch={logSearch}
    onLogMatchesChange={setMatches} controls={controls} />
// Download: downloadDataset(url, 'default', ws, output); the size: formatSize(status.data.sizeBytes)
// Collapse all: controls.collapseAll(); Expand all: controls.expandAll()
// The chevrons: controls.previousMatch(), controls.nextMatch(); Copy: controls.copyLog()

search 被读取为预览自己的搜索框读取其文本 : 前缀,一个结构键的主要字段(press, 2页:1 from..to 范围,或 全键在 .east 语法.

usePreviewControls() 使手柄. collapseAll() 财务报告和审定财务报表 expandAll() 动作 在输出的树上; nextMatch() 财务报告和审定财务报表 previousMatch() 步骤通过 log 匹配,从最后一轮到第一回合和后一轮;以及 copyLog() 复制显示的日志, 解析 true 一旦它在剪贴板上 false 当剪贴板拒绝时。 每个人在未显示其观点时都无所作为—— 输出选项卡没有日志,一个值太大而无法显示的值没有树。 A 类 手柄一次服务一个预览,没有查询,所以外面有一个信头 <E3Provider> 可以做到这一点.

数据集审查

显示一个数据集的值: 树, 当它很小时内置, 一个页面 用于只读的集合,以及用于显示太大值的下载. editable 写入可变输入的编辑回放. toolbar, (中文(简体) ), search, (中文(简体) ), onSearchChange 财务报告和审定财务报表 controls 为: TaskPreview光是价值就够了.

import { DatasetPreview } from '@elaraai/e3-ui-components';

<DatasetPreview apiUrl={url} repo="default" workspace={ws} path="inputs.threshold" editable />

输入审查

在命名输入的带下显示输入值,可编辑.

import { InputPreview } from '@elaraai/e3-ui-components';

<InputPreview apiUrl={url} repo="default" workspace={ws} path=".inputs.threshold" />

bare 不绘制带命名输入, 对于一个主机的框名 toolbar, (中文(简体) ), search, (中文(简体) ), onSearchChange, (中文(简体) ), controls 财务报告和审定财务报表 pollInterval 到达 数值 DatasetPreview。 。 。 .

虚拟化LogViewer

一个日志,它的行已虚拟化,在一个带下, 持有 stdout/stderr 标签, a 搜索标记它的匹配和步骤 通过它们,复制。 它跟随 日志在它存在时结束,并说当新行到达时它不在.

import { useTabs } from '@chakra-ui/react';
import { VirtualizedLogViewer } from '@elaraai/e3-ui-components';

const tabs = useTabs({ defaultValue: 'stdout' });

<VirtualizedLogViewer content={tabs.value === 'stderr' ? stderr : stdout} tabs={tabs} />

状态说明

状态反馈组件有出错,警告,信息和加载变体.

import { StatusDisplay } from '@elaraai/e3-ui-components';

<StatusDisplay variant="error" title="Failed" message={error.message} />

发展

npm run build     # Build library
npm run lint      # Check code quality

Claude 代码插件

东方生态系统也运载a 克劳德代码 插件 — East 语言技能, 实例搜索, 以及 East 代码的先发制人诊断 elaraai 市场:

# Inside Claude Code
/plugin marketplace add elaraai/east-workspace
/plugin install east@elaraai

# From a terminal
claude plugin marketplace add elaraai/east-workspace
claude plugin install east@elaraai

许可证

双重许可证:

• 开源数字 : AGPL-3.0 导弹 - 免费开放源码使用
• 商业:可供专有用途-联系方式 支助@elara.ai

生态系统

• 东: statical地打出,以表达为主的语言有可序列的IR. 运行跨 TypeScript, Python, C 等运行时间的可移植逻辑.

  • @elaraai/东边: 有类型系统、表达式和参考JS编译器的核心语言SDK

• 东节点: Node.js 平台用于I/O,数据库和系统操作的功能.

  • @elaraai/东节点-std: 控制台、 文件系统、 获取、 加密、 时间、 路径、 随机
  • @elaraai/东-北-欧: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, 压缩
  • @elaraai/东-节点-cli: 用于在 Node.js 运行 East IR 程序的 CLI

• 东 C: C11本土运行时间用于执行东IR. 被压死 linux-x64 财务报告和审定财务报表 linux-arm64,附于每个 GitHub 发布.

  • east-c: Core 运行时间 — 类型系统, IR 解释器, 200+内置, 序列化( Beast2, JSON, CSV, East text)
  • east-c-std: 控制台、 文件系统、 获取、 加密、 时间、 路径、 随机
  • east-c-cli: 用于在本地运行 East IR 程序的 CLI

• 东 Py: Python 运行时间,标准平台,I/O,以及数据科学平台功能. 发布至PyPI.

  • 东平: Core Python 运行时间——类型系统,IR编译器,212+内建,Cython加速热路
  • 东平-上: 控制台、 文件系统、 获取、 加密、 时间、 路径、 随机
  • 东比欧: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, 压缩
  • 东-平-克利: 用于在 Python 运行 East IR 程序的 CLI
  • 东平数据科学 (平价)+ @elaraai/东平数据科学 (npm):优化(MADS, Optuna, ALNS, GoogleOR),ML(XGBoost, LightGBM, NGBoost, PyTorch, Lightning, GP), 贝叶斯推论(PyMC),可解释性(SHAP),相通性预测(MAPIE)

• 东方大学:已打入UI组件定义和React渲染器,外加VS代码预览.

  • @elaraai/东-伊: 50+ 键入的UI 组件用于布局,窗体,图表,表格,对话框
  • @elaraai/ 东- ui- 组件: 带有 Chakra UI v3 样式的反相渲染器
  • @elaraai/e3-ui (英语):e3 + UI桥-数据绑定, e3.ui() 任务,显示
  • @elaai/e3-ui-组件: 为 e3 API 执行查询钩和预览组件
  • @elaraai/e3-ui-cli (英语): 在终端浏览一个 e3 寄存器(e3-ui [repo]),并将East-ui / e3-ui组件制入PNG(e3-ui shot(中文(简体) )

• e3——东行发动机: 大规模运行东方管线的持久执行引擎。 类似Git的内容可处理存储,自动记忆,反应数据流,实时监测.

  • @elaraai/e3 请检查url=值 (帮助): SDK 用于编写带有打字任务和管道的 E3 包
  • @elaraai/e3-core (英语): 对象存储、数据流管弦器、执行状态
  • @elaai/e3型: e3 包的共享类型定义
  • @elaraai/e3-cli (英语)数字 : e3 repo, (中文(简体) ), e3 package, (中文(简体) ), e3 workspace, (中文(简体) ), e3 dataflow run, (中文(简体) ), e3 watch, (中文(简体) ), e3 task logs 命令
  • @elaraai/e3-api-客户端远程 e3 寄存器的 HTTP 客户端
  • @elaraai/e3-api-服务器: 用于 e3 寄存器的 REST API 服务器
  • @elaraai/e3-api测试: 共享 API 合规测试套件

链接

• 网站数字 : https://elaai.com/ (中文(简体) )
• e3 API 客户端数字 : https://www.npmjs.com/package/@elaai/e3-api-客户端 互联网档案馆的存檔,存档日期2013-12-21
• 东方大学数字 : https://www.npmjs.com/package/@elaraai/east-ui (中文(简体) )
• 问题数字 : https://github.com/elaraai/east-workspace/issues (中文(简体) )
• 电子邮件数字 : 支助@elara.ai

关于埃拉拉

东方由 Elara AI Pty有限公司一个由AI驱动的平台 创造经济数字双胞胎 企业优化业绩。 Elara将业务目标、决定和数据结合起来,以帮助各组织在业务、采购、销售和客户参与以及项目和投资规划方面作出由数据驱动的决定。 东能给以埃拉拉解决方案的计算层,使得复杂的商业逻辑和数据能够以简单,类型安全和可移植的语言来表达.

开发者 Elara AI Pty有限公司。 。 。 .

开发者 Elara AI Pty有限公司 - 为AI驱动的商业优化的计算层提供动力.