chem-generic-ui-viewer

A React component library for rendering Chemotion ELN generic-UI schemas.

It is a read-only renderer: given JSON schema definitions (layers + fields, plus their values and select options) it produces styled, responsive HTML. It does not edit data and is not a standalone app — it ships an ESM + CJS library consumed as a dependency by a host application. The field-type definitions and conditional-visibility logic live in the separate generic-ui-core package; this library is the rendering layer only.

Installation

npm install --save chem-generic-ui-viewer

or

yarn add chem-generic-ui-viewer

Peer dependencies

The host application must provide these (they are not bundled):

| Package | Version | | --- | --- | | react, react-dom | >=17 <19 | | ag-grid-community, ag-grid-react | >=33 <34 |

Host-provided CSS

The library bundles its own styles (FontAwesome, the ag-grid quartz theme, and its SCSS). The host app still needs to load:

• Bootstrap 5 — react-bootstrap v2 ships no CSS of its own.

• ag-grid core structural CSS — required by GenGridBase:

  import 'ag-grid-community/styles/ag-grid.css';

ag-grid module registration is handled by the library on import, so the host does not need to call ModuleRegistry.registerModules itself.

Usage

import { LayerPlain, GenGridBase, ButtonConfirm } from 'chem-generic-ui-viewer';
import 'ag-grid-community/styles/ag-grid.css'; // host-provided structural CSS

function Detail({ layers, selectOptions }) {
  return (
    <LayerPlain
      id="sample-42"
      layers={layers}
      options={selectOptions}
      isPublic={false}
    />
  );
}

The rendered data contract (layers / fields) is snake_case end-to-end (value_system, option_layers, sub_fields, cond_fields, …), matching the JSON the ELN produces.

Exports:

• LayerPlain — renders an array of layers (sorts by position, applies conditional-field visibility) into a Bootstrap grid.
• GenGridBase — an ag-grid (v33) table wrapper.
• ButtonConfirm — a confirm/cancel button (react-bootstrap v2).

Development

This project uses Yarn (1.22.x) and Node ≥21 (see .tool-versions).

yarn install --frozen-lockfile

| Command | Description | | --- | --- | | yarn playground | Local Vite dev server with HMR — visual preview of the components (see below) | | yarn build | Vite library build → dist/ (ESM + CJS) | | yarn test | Vitest run (jsdom) — yarn test:watch for watch mode | | yarn lint | ESLint 9 flat config — npx eslint . --fix to auto-format |

Playground

yarn playground starts a dev-only preview (under playground/, never published) that renders the components against sample fixtures:

• a gallery with one example per generic-ui-core field type,
• a LayerPlain example from a layered schema,
• a GenGridBase table.

It exists because the library has no dev demo of its own — it is the fastest way to see a rendering change without wiring the package into the host ELN.

License

AGPL-3.0