sdlb-schema-viewer
v1.2.0
Published
React component for visualizing the Smart Data Lake Builder config schema.
Downloads
13
Readme
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
npm install sdlb-schema-viewer
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';