E3 UI Components

React Query hooks and preview components for the e3 API

E3 UI Components provides React Query hooks for all e3-api-client functions and reusable preview components for tasks, inputs, and logs.

Features

• React Query Hooks - useQuery and useMutation wrappers for all e3 API client functions
• Task Preview - Component for viewing task execution output and logs
• Input Preview - Component for viewing dataset input values
• Virtualized Log Viewer - Performant log display with search and auto-scroll
• Type-Safe - Full TypeScript support with proper return type inference

Installation

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

Hooks

React Query hooks are provided for every e3 API domain:

| Domain | Hooks | |--------|-------| | Repos | useRepoList, useRepoStatus, useRepoGc, useRepoGcStart, useRepoGcStatus, useRepoCreate, useRepoRemove | | Packages | usePackageList, usePackageGet, usePackageImport, usePackageExport, usePackageRemove | | Workspaces | useWorkspaceList, useWorkspaceCreate, useWorkspaceGet, useWorkspaceStatus, useWorkspaceRemove, useWorkspaceDeploy, useWorkspaceExport | | Datasets | useDatasetList, useDatasetListAt, useDatasetListRecursive, useDatasetGet, useDatasetSet | | Tasks | useTaskList, useTaskGet, useTaskExecutionList | | Executions | useDataflowExecute, useDataflowStart, useDataflowGraph, useDataflowExecution, useDataflowCancel, useTaskLogs |

Quick Start

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>
    );
}

Query Overrides

All query hooks accept an optional QueryOverrides parameter for controlling query behavior:

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

Components

TaskPreview

Displays task execution output and logs with a virtualized log viewer.

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

<TaskPreview apiUrl={url} workspace={ws} task={taskName} taskInfo={info} outputHash={hash} />

InputPreview

Displays dataset input values with type-aware rendering.

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

<InputPreview apiUrl={url} workspace={ws} path={datasetPath} inputInfo={info} />

VirtualizedLogViewer

Performant log viewer with search, copy, and auto-scroll.

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

<VirtualizedLogViewer lines={logLines} isLive={isRunning} />

StatusDisplay

Status feedback component with error, warning, info, and loading variants.

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

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

Development

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

Claude Code plugin

The East ecosystem also ships a Claude Code plugin — East language skills, example search, and preemptive diagnostics for East code — installed separately from the elaraai marketplace:

# 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

License

Dual-licensed:

• Open Source: AGPL-3.0 - Free for open source use
• Commercial: Available for proprietary use - contact [email protected]

Ecosystem

• East: Statically typed, expression-based language with serializable IR. Run portable logic across TypeScript, Python, C, and other runtimes.

  • @elaraai/east: Core language SDK with type system, expressions, and reference JS compiler

• East Node: Node.js platform functions for I/O, databases, and system operations.

  • @elaraai/east-node-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • @elaraai/east-node-io: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, compression
  • @elaraai/east-node-cli: CLI for running East IR programs in Node.js

• East C: C11 native runtime for executing East IR. Distributed via npm (launcher + per-platform optional dependencies) and as tarballs on each GitHub Release.

  • @elaraai/east-c-cli: npm launcher — installs the matching native binary as an optional dependency
  • east-c: Core runtime — type system, IR interpreter, builtins, serialization (Beast2, JSON, CSV, East text)
  • east-c-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • east-c-cli: CLI for running East IR programs natively

• East Python: Python runtime, standard platform, I/O, and data-science platform functions. Published to PyPI.

  • east-py: Core Python runtime — type system, IR compiler, 212+ builtins, Cython-accelerated hot paths
  • east-py-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • east-py-io: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, compression
  • east-py-cli: CLI for running East IR programs in Python
  • east-py-datascience (PyPI) + @elaraai/east-py-datascience (npm): Optimization (MADS, Optuna, ALNS, GoogleOR), ML (XGBoost, LightGBM, NGBoost, PyTorch, Lightning, GP), Bayesian inference (PyMC), explainability (SHAP), conformal prediction (MAPIE)

• East UI: Typed UI component definitions and React renderer, plus VS Code preview.

  • @elaraai/east-ui: 50+ typed UI components for layouts, forms, charts, tables, dialogs
  • @elaraai/east-ui-components: React renderer with Chakra UI v3 styling
  • @elaraai/e3-ui: e3 + UI bridge — Data bindings, e3.ui() task, manifest
  • @elaraai/e3-ui-components: React Query hooks and preview components for the e3 API
  • east-ui-preview: VS Code extension for live East UI component preview

• e3 — East Execution Engine: Durable execution engine for running East pipelines at scale. Git-like content-addressable storage, automatic memoization, reactive dataflow, real-time monitoring.

  • @elaraai/e3: SDK for authoring e3 packages with typed tasks and pipelines
  • @elaraai/e3-core: Object store, dataflow orchestrator, execution state
  • @elaraai/e3-types: Shared type definitions for e3 packages
  • @elaraai/e3-cli: e3 repo, e3 package, e3 workspace, e3 start, e3 watch, e3 logs commands
  • @elaraai/e3-api-client: HTTP client for remote e3 repositories
  • @elaraai/e3-api-server: REST API server for e3 repositories
  • @elaraai/e3-api-tests: Shared API compliance test suites

Links

• Website: https://elaraai.com/
• e3 API Client: https://www.npmjs.com/package/@elaraai/e3-api-client
• East UI: https://www.npmjs.com/package/@elaraai/east-ui
• Issues: https://github.com/elaraai/east-workspace/issues
• Email: [email protected]

About Elara

East is developed by Elara AI Pty Ltd, an AI-powered platform that creates economic digital twins of businesses that optimize performance. Elara combines business objectives, decisions and data to help organizations make data-driven decisions across operations, purchasing, sales and customer engagement, and project and investment planning. East powers the computational layer of Elara solutions, enabling the expression of complex business logic and data in a simple, type-safe and portable language.

Developed by Elara AI Pty Ltd.

Developed by Elara AI Pty Ltd - Powering the computational layer of AI-driven business optimization.