Data display

Dense data table

Tables are for comparison and dense structured data—not primary navigation.

Representative engine comparison
Engine	Latency	Peak RAM	Flash	Status
heliaRT	5.2 ms	196 KB	412 KB	Released
heliaAOT	4.8 ms	184 KB	286 KB	Beta
TFLM	7.9 ms	212 KB	438 KB	Reference
CMSIS-NN	6.7 ms	204 KB	354 KB	Reference
Reference C	12.4 ms	176 KB	248 KB	Baseline

A table that becomes a tool rather than a comparison belongs on the React side instead: the shadcn table primitives draw it, TanStack drives the sorting and the paging, and the page pays for an island.

Symbol index

RefIndex is the searchable half of a generated API reference. The rows are built at build time from the same reference.json the reference pages are a view of, and the part mounts one island with them, so an MDX page writes one tag and the reader gets a filter over the whole library.

It is the only Astro part that mounts an island. A filter is the one thing on a reference page that has to happen in the reader’s hands, and the alternative is every consuming site writing the same island itself.

---
import RefIndex from '@ambiqai/helia-ui/astro/RefIndex';
import reference from '../../public/reference/api/reference.json';
import { groups } from '../../reference.config.json';
---

<RefIndex reference={reference} base="/my-product/" groups={groups} />

Facets are derived, not declared: the data type comes off the name suffix a kernel library already encodes, the header off the declaring file, and the group off a config of name patterns. A facet with no values renders no control, which is why the path filter below exists only because the manifest supplies it. Search matches the name, the summary, the module and every facet value.

Prerequisites, the buffer-size rule, tolerances and supported paths are not in any declaration. They come from an overlay keyed by symbol name, which is the shape a kernel manifest takes, and a row that the overlay covers gains a disclosure. Two of the fourteen rows below are covered.

The library is invented and so are the routes: the links are the anchors a generated reference serves, and this site publishes no such reference, so they are here to be read rather than followed.

Group

Data type

Path

Header

14 of 14 symbols

Kernel index
Symbol	Summary	Group	Data type	Path	Header
ex_avgpool_s8	Average pooling.	Pooling	s8		nn_functions.h
ex_convolve_f16	Half precision 2D convolution.	Convolution	f16	helium, scalar	nn_functions.h
ex_convolve_f32	Single precision 2D convolution.	Convolution	f32		nn_functions.h
ex_convolve_s16	Wide quantized 2D convolution.	Convolution	s16		nn_functions.h
ex_convolve_s8	Quantized 2D convolution.	Convolution	s8	helium, dsp, scalar	nn_functions.h
ex_depthwise_s4	Four-bit depthwise convolution.	Convolution	s4		nn_functions.h
ex_depthwise_s8	Quantized depthwise convolution.	Convolution	s8		nn_functions.h
ex_dequantize_s8	Fixed point to float.	Other	s8		nn_support.h
ex_maxpool_s8	Max pooling.	Pooling	s8		nn_functions.h
ex_quantize_f32	Float to fixed point.	Other	f32		nn_support.h
ex_relu_f32	Rectified linear unit, single precision.	Activation	f32		nn_functions.h
ex_relu_s8	Rectified linear unit.	Activation	s8		nn_functions.h
ex_softmax_s8	Softmax over the last axis.	Other	s8		nn_support.h
ex_tanh_s16	Hyperbolic tangent.	Activation	s16		nn_functions.h

Charts

ChartPlot is the React counterpart of the Chart Astro part: the same props, the same frame, the same marks, drawn in the browser instead of at build. Reach for it when the data is not known until the page runs — a filter, a range the reader picks, a live feed. When the data is known at build, use the Astro part instead and the page ships no chart JavaScript at all.

Plot is the default for new charts. The Recharts wrapper below stays for the shadcn compatibility path: it is the registry component, so a shadcn block or a generated dashboard that expects ChartContainer keeps working.

import { ChartPlot } from '@ambiqai/helia-ui/react/chart-plot';

Weekly page views

Page views against week of the quarter, by section

Guides
Reference

Synthetic series. Nothing here is a measurement of any part.

Build time by stage

Wall-clock seconds against build stage, by cache profile

Cold
Warm

Interactive charts

ChartInteractive takes the same props as ChartPlot and draws them with Apache ECharts, which is the interactive layer: a tooltip on hover, a legend that toggles a series, a zoom on the axis, a brush that hands the selected rows back through onSelect. The title, subtitle, legend and caption are the same HTML and the same classes as the Plot parts, so the two are one figure with different behavior; ECharts is given the plot area and nothing else.

Reach for Chart first. The Astro part ships inline SVG and zero JavaScript, and ChartPlot redraws the same figure in the browser when the data is not known until the page runs. ChartInteractive costs an island and a charting library, so it earns its place only when the reader has to do something to the chart to get the answer — narrow a range, drop a series, select a group.

import { ChartInteractive } from '@ambiqai/helia-ui/react/chart-interactive';

Weekly page views

Page views against week of the quarter, by section

Drag the slider or scroll over the plot to narrow the weeks. Synthetic series.

Build time by stage

Wall-clock seconds against build stage, by cache profile

Hover a stage to compare the profiles; use the legend to drop one.

Page weight against performance

Lighthouse score against transferred kilobytes, by template

Pick the rectangle in the top right, then drag across the marks.

Plots

These standard examples use the shadcn chart wrapper over Recharts. Use bars for direct comparison and scatter plots for tradeoffs between two measures; keep the framing compact and the number of series restrained.

Runtime latency

Median milliseconds per inference · lower is better

Memory and latency

Runtime footprint tradeoff · lower-left is better

A converted MkDocs chart

The worked example behind the charts section of the migration guide. On the MkDocs side this is two Plotly traces carried as data attributes on an empty div and drawn by chart-init.js at load. Here the series are a typed module the build can see, the renderer is the package wrapper, and the two colors are --chart-1 and --chart-2 rather than hexes, so the lines follow the theme.

The series is illustrative and not a measurement of any part.