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.
npm install sdlb-schema-viewer
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.
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();
}
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';