Config Editor - Base Module

This project includes a React based JSON Schema editor.

Installation

npm install --save config-editor-base

Requirements (v4.x): Node >= 20, React >= 18, @rjsf/core 6.x (installed as a dependency), react-redux >= 8 and react-select >= 5 as peers. Two transitive packages (react-files, react-gh-like-diff) declare stale React peer ranges - consumers should add npm overrides for them or install with --legacy-peer-deps (see this repo's root package.json overrides block for the pattern). Consumers should also pin diff2html to exactly 3.1.6 (dependency + npm override): newer 3.x versions parse the "Review changes" diff as zero files, silently emptying the modal.

Note for Vite-based consumers: the embedded schema loader (loadFile) uses a dynamic CommonJS require("./schema/...") that webpack converts to a context module automatically. Under Vite, add a small window.require shim mapping those paths onto an eager import.meta.glob of dist/schema/**/*.json (see example/src/requireShim.js).

---

Development testing

Use Node >= 20 (e.g. nvm use 24.13.0). Clone this repository, then run npm install in the root and in the example/ folder. After this, run npm start in the root (microbundle watch) and npm start in the example/ folder (Vite dev server on port 3000). Rebuilds of dist/ hot-reload in the example through its file:.. link.

---

Publishing a new package via npm

To publish your own custom version as an npm package, you can modify the package.json and run npm publish. You'll need to be logged in first.

---

Usage in a parent app

The module uses redux, hence you'll need to import the base module and the reducer as follows:

// reducers.js

import { combineReducers } from 'redux'
import alert from './alert/reducer'

import { editor } from 'config-editor-base'

const rootReducer = combineReducers({
  alert,
  editor
})

export default rootReducer

In the parent App we can load an Editor module, which can be constructed as below:

import React from 'react'
import { connect } from 'react-redux'

import { EncryptionModal } from 'config-editor-tools'
import { EditorSection } from 'config-editor-base'

import * as actionsAlert from '../alert/actions'
import AlertContainer from '../alert/AlertContainer'

class Editor extends React.Component {
  render() {
    let editorTools = [
      {
        name: 'encryption-modal',
        comment: 'Encryption tool',
        class: 'fa fa-lock',
        modal: <EncryptionModal showAlert={this.props.showAlert} />
      }
    ]

    return (
      <div className='file-explorer'>
        <div className='fe-body fe-body-offline'>
          <AlertContainer />
          <EditorSection
            editorTools={editorTools}
            showAlert={this.props.showAlert}
          />
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    showAlert: (type, message) =>
      dispatch(actionsAlert.set({ type: type, message: message }))
  }
}

export default connect(null, mapDispatchToProps)(Editor)

---

Parsing embedded Rule Schema and UISchema files

The config editor can take a list of UIschema and Rule Schema files. This enables the editor to "auto-load" the UIschemas upon initial load, as well as "auto-load" the Rule Schema files matching the revision of the loaded Configuration File.

Note that the parsed list of files should match the actual files that are included in the config-editor-base dist/ folder.

For example, the Rule Schema for "schema-01.09.json | CANedge2 GNSS" should be contained in dist/schema/CANedge2 GNSS/schema-01.09.json.

The syntax for parsing these lists is as below (in the config-editor repo Editor.js file):

// define UIschema and Rule Schema names for auto-loading embedded schema files
export const uiSchemaAry = [
  "uischema-01.09.json | Simple",
  "uischema-01.09.json | Advanced",
];

export const schemaAry = [
  "schema-01.09.json | CANedge1",
  "schema-01.09.json | CANedge1 GNSS",
  "schema-01.09.json | CANedge2",
  "schema-01.09.json | CANedge2 GNSS",
  "schema-01.09.json | CANedge3 GNSS",
];

...

<EditorSection
  editorTools={editorTools}
  showAlert={this.props.showAlert}
  uiSchemaAry={uiSchemaAry}
  schemaAry={schemaAry}
/>
...

The revision (XX.YY) is taken from the Configuration File name (config-XX.YY.json, optionally with a prefix such as XYZ_config-01.09.json). The device type is detected from the content of the Configuration File: CANedge1/2/3 are told apart by the connect section (none, connect.wifi or connect.cellular), the GNSS variants by a gnss section, and the CANmod variants (CANmod.gps, CANmod.input, CANmod.router, CANmod.temp) by their sensor/phy sections. The editor then loads the matching Rule Schema and UIschema. Auto-loading is skipped if a Rule Schema has already been uploaded manually.

Loading non-revisioned files

Configuration Files without an XX.YY revision in the name (e.g. the CANsub webCAN settings file webcan-settings-v1.json) can also be loaded via the Configuration File dropdown, as long as they are JSON objects with a .json extension. For these files:

• No Rule Schema/UIschema is auto-loaded. Upload the matching files manually via the Rule Schema and Presentation Mode dropdowns. Names without a revision are accepted as long as they contain schema / uischema (e.g. webcan-settings-schema-v1.json, webcan-settings-uischema-v1.json).
• A previously auto-loaded (embedded) Rule Schema is cleared, so it does not render the new file. A manually uploaded Rule Schema is kept.
• When saving, the file keeps the name of the loaded Configuration File if the Rule Schema name has no revision. With a revisioned Rule Schema it is saved as config-XX.YY.json, as before.

---

Parsing S3 functionality

The config editor also supports various S3 calls, e.g. for loading Rule Schema and Configuration Files from a device S3 folder - as well as submitting updated Configuration Files to S3. See the CANcloud repository for an example of this implementation.

---

Regarding styling

The config editor relies on styling from the parent application. For examples of styling, see the CANedge configuration editor.

---

Editor Base Tools

The module includes built-in tools for OBD configuration and filter building. These are exported as OBDTool and FilterBuilderTool.

OBD Tool

Generates OBD-II transmit lists for CANedge devices. Key features:

• PID Selection: Select standard OBD-II PIDs from a built-in database
• Supported PIDs Parser: Parse response data to identify vehicle-supported PIDs
• Control Signal: Optional GPS-based speed control signal to prevent battery drain when vehicle is off
• Transmit List Generation: Outputs partial JSON for merging with device configuration

import { OBDTool } from "config-editor-base";

// In editorTools array:
{
  name: "obd-modal",
  comment: "OBD tool",
  class: "fa fa-car",
  modal: <OBDTool showAlert={this.props.showAlert} />
}

Filter Builder Tool

Analyzes CSV log files to help users create optimized CAN filters. Key features:

• CSV Analysis: Load mdf2csv output to see CAN ID distribution by size contribution
• DBC Matching: Match CAN IDs to DBC message names and signals
• J1939 PGN Grouping: Group 29-bit IDs by PGN for J1939/ISOBUS protocols
• Filter Generation: Generate acceptance filters with optional prescalers
• Reset Filters: Reset CAN channel filters to defaults (record everything)

import { FilterBuilderTool } from "config-editor-base";

// In editorTools array:
{
  name: "filter-builder-modal",
  comment: "Filter builder",
  class: "fa fa-sliders",
  modal: <FilterBuilderTool showAlert={this.props.showAlert} deviceType="CANedge" />
}

The deviceType prop controls device-specific behavior:

• "CANedge" or "CANedge2 GNSS": Standard CANedge filter structure
• "CANmod": CANmod.router filter structure (requires frame_format field)

Updating for New Firmware Revisions

When a new firmware revision is released (e.g., CANedge 01.10.XX), update these files:

1. Supported Firmware Versions (FilterBuilderTool.js)

// Add new version to the supported arrays at top of file:
const SUPPORTED_FIRMWARE_CANEDGE = ["01.08", "01.09", "01.10"];  // Add here
const SUPPORTED_FIRMWARE_CANMOD_ROUTER = ["01.02"];

2. Default Filter Configs (src/editorBaseTools/filterBuilder/)

If the filter schema changes, create new default filter JSON files:

• canedge-default-filters-XX.YY.json
• canedge-default-filters-gps-XX.YY.json
• canmod-router-default-filters-XX.YY.json

Then update imports in FilterBuilderTool.js if structure changes.

3. Control Signal Config (src/editorBaseTools/obd/)

If the control signal schema changes:

• Create control-signal-internal-gps-XX.YY.json
• Update import in OBDTool.js

4. Schema Files (dist/schema/)

Add new schema and uischema files to the appropriate folders and update schemaAry/uiSchemaAry in Editor.js.

---

Regarding JSON Schema files

The module expects to find JSON Schema files in the structure below to facilitate auto-loading of these:

/
|-- dist/
	|-- schema/
		|-- Advanced/
			|-- uischema-XX.YY.json
		|-- Simple/
			|-- uischema-XX.YY.json
		|-- CANedge1/ (also CANedge2, CANedge1 GNSS, CANedge2 GNSS, CANedge3 GNSS)
			|-- schema-XX.YY.json
		|-- CANmod.router/ (also CANmod.gps, CANmod.input, CANmod.temp)
			|-- config-XX.YY.json
			|-- schema-XX.YY.json
			|-- uischema-XX.YY.json