SDLB Schema Viewer

A React component for visualizing the Smart Data Lake Builder config schema. It retrieves the SDLB JSON schemas and renders them as dynamic trees using the d3 library.

Installation

In order to install the package, you need to authenticate yourselves against GitHub.

In order that the package is fetched from the correct registry, add the following to your .npmrc:

@smart-data-lake:registry=https://npm.pkg.github.com  
//npm.pkg.github.com/:_authToken=TOKEN

Then you can install the package as follows:

npm install @smart-data-lake/sdlb-schema-viewer[@x.x.x]

Usage

Inside JSX:

import { SchemaViewer } from 'sdlb-schema-viewer';

<SchemaViewer loadSchemaNames={...} loadSchema={...} />

The SchemaViewer component has the following properties:

• loadSchemaNames: A function for loading a list of schema names. These are the schemas that a user can select.
• loadSchema: A function for loading a JSON schema which takes the selected schema name as an input parameter.

Example

This example shows how to visualize a simple example schema.

import { SchemaViewer } from 'sdlb-schema-viewer';

<SchemaViewer loadSchemaNames={loadSchemaNames} loadSchema={loadSchema}/>

const exampleSchema =
    {
        "title": "Person",
        "type": "object",
        "properties": {
            "firstName": {
                "type": "string",
                "description": "The person's first name."
            },
            "lastName": {
                "type": "string",
                "description": "The person's last name."
            },
            "age": {
                "description": "Age in years which must be equal to or greater than zero.",
                "type": "integer",
            }
        }
    }

function loadSchemaNames() {
    return Promise.resolve(['exampleSchema.json']);
}

function loadSchema(schemaName) {
    return schemaName === 'exampleSchema.json' ? Promise.resolve(exampleSchema) : Promise.reject();
}

Styling

The SchemaViewer component uses @mui/joy for component styling. The default theme can be overridden by providing a custom theme:

import { SchemaViewer } from 'sdlb-schema-viewer';
import { CssVarsProvider, extendTheme } from "@mui/joy";

const theme = extendTheme({...});

<CssVarsProvider theme={theme}>
    <SchemaViewer loadSchemaNames={...} loadSchema={...}/>
</CssVarsProvider>

See https://mui.com/joy-ui/customization/theme-colors/ for more information about color theme configuration.

The default theme for the schema viewer can be imported with

import { defaultTheme } from 'sdlb-schema-viewer';

Build

For building and testing the component, Node.js (Version 24+) and yarn are required.

Install

Checkout the repository and install the required packages by executing:

yarn install

in the project directory.

Available Scripts

In the project directory, you can run:

• yarn start
  Runs the app in the development mode.
  Open http://localhost:5173 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

• yarn test
  Runs the unit tests in src once. yarn test:watch launches the test runner in the interactive watch mode.

• yarn test:e2e
  Runs the end-to-end tests in tests/e2e, which drive the component in a real browser with Playwright. The dev server and the schemas it serves are provided by the tests, see playwright.config.ts and vite.config.e2e.ts. On the first run, install the browser with npx playwright install chromium.
  yarn test:e2e:ui opens the interactive Playwright runner, yarn test:e2e:report the report of the last run.

• yarn build
  Compiles the components into the dist folder to be used by other React projects.

Test with SDLB website

To test changes of schema-viewer component with SDLB documentation website, build the component locally and run yarn pack, then in SDLB projects documentation branch:

• remove schema-viewer from dependencies in package.json file
• add local packed dependency using yarn add ../schema-viewer/sdlb-schema-viewer-v2.0.0.tgz.