Skip to content

Add custom React config panel via Module Federation#267

Open
msallin wants to merge 1 commit into
SignalK:masterfrom
msallin:feat/config-panel
Open

Add custom React config panel via Module Federation#267
msallin wants to merge 1 commit into
SignalK:masterfrom
msallin:feat/config-panel

Conversation

@msallin

@msallin msallin commented May 25, 2026

Copy link
Copy Markdown
Collaborator

Mirrors the approach taken in SignalK/signalk-to-nmea0183 #154: adds a signalk-plugin-configurator keyword and a webpack-built Module Federation panel so the admin UI renders a purpose-built React form for derived-data instead of the schema-driven RJSF view. The plain plugin.schema() form is left intact as the fallback for older SK server versions.

What the panel does

  • Groups all ~30 calculators by category (air, wind, depth, heading, traffic, ...) into collapsible cards
  • Search input filters by calc title, optionKey, or SignalK path; matching groups auto-expand
  • Per calc: enable/disable toggle and a live path-status list using Unicode glyphs from the README legend — ✅ has data, ❓ value is null, ❌ not present (refreshed every 10s from /signalk/v1/api/vessels/self)
  • Per-calc extras inline: number, string, boolean, enum, plus a dedicated array-of-objects editor (used by cpa_tcpa notification zones and tankVolume calibration pairs)
  • Top-level globals (default_ttl, engine/battery/tank/air_instances) live in their own card at the top
  • ❗DEPRECATED calculators get a badge so they stand out

No new runtime dependencies — Unicode for icons, inline SVG for the trash button (no FontAwesome).

Screenshots

Overview (empty config, groups collapsed):
overview

Several calcs enabled across groups with live path status:
configured

cpa_tcpa settings expanded showing the notification-zones array editor:
extras

Mobile (393 px):
mobile

Build wiring

  • keywords adds signalk-plugin-configurator
  • webpack.config.js bundles src/configpanel/PluginConfigurationPanel.tsx via ModuleFederationPlugin, sharing react/react-dom as singletons
  • tsconfig.build.json excludes the panel (it compiles via ts-loader inside webpack)
  • package.json adds public/ to files and build:config to prepublishOnly

How the panel discovers calcs

It fetches /skServer/plugins, locates derived-data, and walks schema.properties + uiSchema['ui:order'] to build a flat catalog. A boolean property whose title ends with the [paths] suffix is treated as a calc toggle; everything else under the same group attaches to the previous calc as "extras". This keeps the plugin's existing schema as the source of truth — no new server-side endpoints, no changes to plugin.start() or updateSchema().

Testing

  • npm run typecheck clean
  • npm test — 316 passing (unchanged)
  • npm run build:config produces public/remoteEntry.js and chunks (~30 KiB total)
  • Validated end-to-end against the upstream cr.signalk.io/signalk/signalk-server:latest image with --sample-nmea0183-data (the docker harness lives in the gitignored docker-test/ folder)

Out of scope

  • Visual restyle of the path-status icons inside the existing schema description (the /👍/ legend) — that surface is unchanged so users on older servers still get sensible RJSF output

@msallin
msallin requested review from panaaj and tkurki May 30, 2026 11:24
@msallin
msallin force-pushed the feat/config-panel branch 3 times, most recently from 15dc8cc to ead81bb Compare June 3, 2026 10:19
@msallin
msallin force-pushed the feat/config-panel branch from ead81bb to dd245d0 Compare June 11, 2026 15:42
Adds a signalk-plugin-configurator-style panel so the admin UI renders a
purpose-built React form for derived-data instead of the schema-driven
RJSF view. Same approach as signalk-to-nmea0183 PR SignalK#154 (Unicode glyphs
for path status, inline SVG for action icons, no FontAwesome).

The panel groups the 30+ calculators by category in collapsible cards
with a search box, shows each calculator's required SignalK paths with
live availability icons (✅ has data, ❓ value is null, ❌ not present),
and renders per-calc extras inline — including a dedicated array-of-
objects editor for cpa_tcpa notification zones and tankVolume
calibration pairs. Top-level globals (default_ttl, engine/battery/tank/
air instance lists) live in their own card; ❗DEPRECATED calculators
get a badge.

The existing plugin.schema()/uiSchema() form remains untouched and
serves as the fallback for older server versions that don't load
federated panels.

Build wiring mirrors the nmea0183 plugin:
- `signalk-plugin-configurator` keyword on package.json
- webpack.config.js bundles src/configpanel/PluginConfigurationPanel.tsx
  via ModuleFederationPlugin, sharing react/react-dom as singletons
- tsconfig.build.json excludes the panel (compiled by webpack via
  ts-loader)
- public/ added to the package's files list

Replaces the docs/screenshots/1_placeholder.png placeholder (added in
the webapp displayName/appIcon change) with four real config-panel
screenshots, and points package.json `signalk.screenshots` at them.
Screenshots regenerated against a sample-data SK server in Docker.
@msallin
msallin force-pushed the feat/config-panel branch from dd245d0 to 8516f4e Compare June 27, 2026 12:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant