npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kaolin-graphs

v1.0.0

Published

Produce a dependency graph representation from schema declarations

Downloads

4

Readme

kaolin-graphs

Generates dependency diagrams of a data model that is specified using Kaolin schemas

Installation

npm install kaolin-graphs

Overview

kaolin-graphs takes a kaolin scope object, and allows you to produce graphvis dot files for graphs of the types in this scope. It provides options to modify the style and detail of these graphs.

Example

The most basic usage is to draw a non-hierarchical graph of all of the types in a scope:

const kaolinGraphs = require("kaolin-graphs");
const writeFileSync = require("fs").writeFileSync;
const scope = require("./some-kaolin-scope");

const graphDescription = kaolinGraphs.dotFormatForScope(scope);

writeFileSync("graph.dot", graphDescription);

This produces the file graph.dot, which can be compiled by graphvis with the following:

cat graph.dot | dot -Tpng -Grankdir=BT > output.png

For the scope given in the example directory, (a schema for the AST of a simple imaginary language) we produce this image: ![unordered graph][https://github.com/JosephJNK/kaolin-graphs/blob/master/example-images/whole-scope-unordered.png]

We can produce a graph that partially orders its nodes, by raising types above their dependencies. To customize the graph in this way we can pass an options object to dotFormatForScope:

dotFormatForScope(scope, { ranked: true, rootNodes: ["AST"] });

Producing a more structured graph: ![ordered graph][https://github.com/JosephJNK/kaolin-graphs/blob/master/example-images/whole-scope-ordered.png]

We can zoom into the "neighborhood" of a type, that is, the types which it depends on and the types which depend on it, by using the dotFormatForNeighborhood function:

const graphDescription = kaolinGraphs.dotFormatForNeighborhood(ex, "Expression");

![basic neighborhood][https://github.com/JosephJNK/kaolin-graphs/blob/master/example-images/expression-neighborhood-simple.png] And when focused like this, we can expand the depiction of strictStruct and laxStruct types to show their structure:

dotFormatForNeighborhood(ex, "Expression", { expandStructs: true });

![detailed neighborhood][https://github.com/JosephJNK/kaolin-graphs/blob/master/example-images/expression-neighborhood-detailed.png]

Rendering with Graphviz

To produce images, you need to have Graphvis installed, providing the command line utility dot. The simplest way to render an image is to output the string produced by this library to a file, say temp.txt, and then pipe this file's contents into dot, as in cat temp.txt | dot -Tpng -Grankdir=BT > image.png. The -Tpng option is to select .png as the file's output type; if you wish to output another filetype, do so following graphvis's documentation. -Grankdir=BT is to cause the graph to output correctly when the { ranked: true } option is used. If this command line argument is omitted, then the root nodes will appear at the bottom of the image rather than at the top.

If you wish to render images directly from JavaScript without using a temp file, check scripts/build-examples.js as an example of how to do so.

API

dotFormatForScope(scope, options)

Produces a string in graphvis dot format, representing a drawing of all of the types in the given scope and their relationships.

  • scope: a Kaolin scope object
  • options: an object The schema for options is:
laxStruct({
  rootNodes: optional(array(string())),
  ranked: optional(boolean())
});

Specifying rootNodes and ranked will cause the types to be arranged in a hierarchy based on their dependencies, with the root nodes on top. The strings in the rootNodes array must be the name of types available in the provided scope. If no rootNodes are provided, ranked will have no effect.

dotFormatForNeighborhood(scope, focus, options)

Produces a string in graphvis dot format, representing a drawing of all of the types in the given scope which directly depend on the given focus and which the given focus directly depends on, and their relationships.

  • scope: a Kaolin scope object
  • focus: a string; a type with this name must exist in scope
  • options: an object The schema for options is:
laxStruct({
  expandStructs: optional(boolean(),
  rootNodes: optional(array(string())),
  ranked: optional(boolean())
});

Specifying expandStructs as true will cause structs to be shown in a detailed view, with information on each of their fields. rootNodes and ranked have the same behavior as in dotFormatForScope.

orderTypes(scope, rootNodes)

Produces a data structure containing the types in scope in a hopefully reasonable order, which orders types by the number of hops they are from the root nodes, and secondarily places types before the types which depend on them.

  • scope: a Kaolin scope object
  • rootNodes: an array of type names orderTypes returns an array of nodes which each have this schema:
strictStruct({
  name: string(),
  children: array(string()),
  childCounts: dictionary(string(), number()),
  docString: optional(string()),
  parents: array(string()),
  parentCounts: dictionary(string(), number()),
  siblings: array(string()),
  siblingCounts: dictionary(string(), number()),
  ancestors: array(string()),
  distanceToRoot: number(),
  rank: number()
})

LICENSE

MIT