@nuclent/schema-viewer NPM

@nuclent/schema-viewer

Schema Visualizer for React

@nuclent/schema-viewer is a comprehensive React component library designed to render interactive, customizable graph-based visualizations representing complex schemas. Built on top of React Flow, it provides a simplified API to define nodes, edges, and their interactions, making it perfect for visualizing relational data, database schemas, or any other interconnected structures.

Whether you're dealing with large datasets or intricate relationships within your data, @nuclent/schema-viewer offers a declarative approach to constructing vivid and dynamic graphs. With features like a built-in minimap, controllable node expansion, and various stylings options, your data visualization is both functional and aesthetically pleasing.

With @nuclent/schema-viewer, you can expect:

Ease of Use: Simplify the process of mapping your data into a visual context.
Flexibility: Customize the appearance and behavior of your nodes and edges to meet the specific needs of your application.
Interactivity: Engage with your diagrams through interactive features like zooming, dragging, and event handlers.

Ideal for developers working on data analysis tools, database management systems, or any application that benefits from graph visualization, @nuclent/schema-viewer is the go-to solution for representing data-driven insights.

Installation

npm install @nuclent/schema-viewer

or

yarn add @nuclent/schema-viewer

Usage

Quick start example:

# tsx
import React from 'react';
import { FlowWrapper } from "@nuclent/schema-viewer";

// import styles
import "@nuclent/schema-viewer/dist/style.css";

function App() {
  return (
    <FlowWrapper
      // ...props here
    />
  );
}

export default App;

API Reference

For clarifiation, each node's data field named as Field, but we can call it as a row / field - anything refer to a row in a table schema.

Prop	Type	Default	Description
data *	SchemaData[]	[]	The nodes of the graph.
legend	boolean	true	If true, legend information is displayed.
containerStyle	CSSProperties	position: "relative", height: "100dvh", width: "100%", maxWidth: "100%", margin: 0, padding: 0	Styles applied to the graph container.

More detailed explanation for complex props:

layoutOptions

The layoutOptions prop allows fine-tuning of the graph's layout. It accepts an object where the key is the layout option name and the value is its setting. All reference can be found here: ELK Reference

Example:

const layoutOptions = {
  "elk.algorithm": "org.eclipse.elk.layered",
  "elk.direction": "RIGHT"
};

return <FlowWrapper layoutOptions={layoutOptions} />

Node / Edge Modal Render

import { CustomNodeModalRender } from "../somewhere";

return <FlowWrapper
            nodeModalRender={ <CustomNodeModalRender />}
            // other props ...
        />

Examples & Demo

Live & Editable demo available here: Demo Link

nFlow Data Conversion Code Sample

# tsx
  import { Field, FlowWrapper, Relation } from "@nuclent/schema-viewer";
  import "@nuclent/schema-visualizer/dist/style.css";

  const App = () => {

      return (
        <FlowWrapper
          nodes={nodes}
          edgeModalTitle="hi everyone"
          edgeModalRender={<Test />}
        />
      )
  }

  function Test() {
    return (
        <div>
          <p>im going to sleep</p>
        </div>
    );
  }

  const nodes = array.map((i) => {
  const id = String(i.id);

  return {
    id,
    data: {
      id,
      fields: mapFields(i.fields),
      name: i.name,
      displayName: i.displayName,
      description: i.description,
      relations: mapRelations(i.related, array),
    },
    type: "custom",
  };
});

function mapFields(fields: FieldSchema[]): Field[] {
  return fields.map((f) => ({
    displayName: f.displayName,
    name: f.name,
    type: f.typeName,
    subType: f.subType,
    isGenerated: f.isSystemDefault,

    // this is the step where user gonna convert their data so we can do smthg like this
    isPrimaryKey: f.name == "guid",
    isRelation: f.typeName == "relation",
    isUnique: f.isUnique,
    isRequired: f.isRequired,
    isReadOnly: f.isReadOnly,
  }));
}

function mapRelations(
  related: Record<string, RelatedDataField>,
  array: Schema[]
): Relation[] {
  return Object.entries(related).map((r) => {
    const label = r[0].split(".")[1]; // input: expenses.categories => output: categories
    const { objName } = r[1]; // { objName, name }

    return (
      {
        id: array.find((e) => e.name === objName)?.id + "",
        objName,
        fieldName: label,
        label,
      }
    );
  });
}