How-to Guide

ChemDCAT-AP Widget · interactive metadata editor

Overview

The ChemDCAT-AP Widget is a browser-based, schema-driven metadata editor. It turns LinkML class definitions from the dcat-4C-ap schema into interactive node cards on a canvas. You connect nodes, fill in field values, and export the result as a valid LinkML instance document (JSON or YAML).

No installation required — it runs entirely in the browser.

LinkML round-trip The exported JSON/YAML is compatible with LinkML generators (linkml-convert, gen-jsonld, gen-rdf, etc.). You can also re-import a saved file to continue editing.

The Canvas

Schema nodes

Each node represents a LinkML class instance. The node header shows the class name (e.g. MaterialSample). Click the header to expand/collapse the field list. Fields are grouped by type:

Primitive fields — plain text, numbers, booleans
Lookup fields — multiple free-text values (e.g. keywords)
Measurement fields (widget) — structured rows with value, unit, and quantity type
Reference fields — slots that link to other class nodes

Node palette

On the left side of the canvas you will find the node palette. Drag any class card onto the canvas to create a new node of that type. You can also use the ⌂ Home button in the toolbar to return to the welcome screen.

Connecting nodes

Reference slots are shown as connection handles (dots) on node edges. Drag from a source handle to a target node to create a relationship. The edge label shows which slot the connection represents (e.g. has_sample).

Measurements

Quantitative attributes

Quantitative measurement rows contain three inputs:

Field	Description	Example
`title`	Human-readable label for this measurement entry	sample mass
`value / unit`	Numeric value and unit abbreviation	2.5 mg
`has_quantity_type`	QUDT quantity kind URI (auto-derived for known classes)	…quantitykind/Mass

For well-known classes (has_mass, has_temperature, has_volume, has_pressure, etc.) the has_quantity_type URI is filled in automatically on export. For generic QuantitativeAttribute slots you can type the URI directly; a grey placeholder shows the expected pattern.

Supported unit abbreviations and their QUDT expansions:

Input	QUDT URI (abbreviated)
`mg`	`qudt/unit/MilliGM`
`g`	`qudt/unit/GM`
`kg`	`qudt/unit/KiloGM`
`mL`	`qudt/unit/MilliL`
`L`	`qudt/unit/L`
`°C`	`qudt/unit/DEG_C`
`K`	`qudt/unit/K`
`bar`	`qudt/unit/BAR`
`Pa`	`qudt/unit/PA`
`%`	`qudt/unit/PERCENT`

Qualitative attributes

Qualitative slots (e.g. has_qualitative_attribute) only have a title and a value field — no unit or quantity type.

Import / Export

JSON export

Click ↓ JSON in the toolbar. The downloaded file is a LinkML instance JSON document using @type for class names and slot names as keys:

{
  "@type": "MaterialSample",
  "id": "ms-001",
  "name": "Catalyst powder",
  "has_mass": [
    {
      "@type": "Mass",
      "value": 2.5,
      "unit": "https://qudt.org/vocab/unit/MilliGM",
      "has_quantity_type": "http://qudt.org/vocab/quantitykind/Mass"
    }
  ]
}

YAML export

Click ↓ YAML for the same content as YAML — often preferred as input for LinkML CLI tools:

"@type": MaterialSample
id: ms-001
name: Catalyst powder
has_mass:
  - "@type": Mass
    value: 2.5
    unit: https://qudt.org/vocab/unit/MilliGM
    has_quantity_type: http://qudt.org/vocab/quantitykind/Mass

Using the export with LinkML

After exporting, use standard LinkML tools to convert or validate the instance document:

# Convert to JSON-LD
linkml-convert -s dcat_4c_ap.yaml -t jsonld my-export.yaml

# Validate against the schema
linkml-validate -s dcat_4c_ap.yaml my-export.yaml

# Generate RDF (Turtle)
linkml-convert -s dcat_4c_ap.yaml -t ttl my-export.yaml

The schema YAML used by the widget is bundled at src/schema/dcat_4c_ap.schema.json. It is compiled from the LinkML source at nfdi-de/chem-dcat-ap.

Embedding the widget

The widget is deployed as a static web app and can be embedded in any HTML page via <iframe>:

<iframe
  src="https://hendrikborgelt.github.io/React_flow_test/widget/"
  width="100%"
  height="700px"
  style="border:none; border-radius:8px;"
  title="ChemDCAT-AP metadata widget"
></iframe>