nice-dag is a lightweight javascript library, which is used to present a DAG diagram.

Overview

nice-dag-logo

Nice-DAG

Demo MIT licensed

Overview

Nice-DAG is a lightweight javascript library, which is used to present a DAG diagram. Essentially, it uses dagre to layout nodes and edges on a DAG diagram. However, the functions that Nice-DAG gives are far beyond that of dagre.

Compared with dagre, dagre provides the position coordinates of DAG nodes, while Nice-DAG provides a DOM container of DAG diagram as well as DOM elements as the host of DAG nodes and edges. Based on the visual container, Nice-DAG also provides some generic visual features like zoom in/out, mini-map widget, etc. In addition, Nice-DAG facilitates editing features, which allows the user to drag and drop nodes, to connect one node to the other, and to create/remove nodes or edges. Using Nice-DAG, developers can focus on the rendering of nodes and edges, according to their own requirements, rather than on the implementation of general functions, as above mentioned. Moreover, developers have complete control over the container's placement, as well as the look and feel.

In terms of usage, Nice-DAG provides two views: read-only view and editable view. The read-only view provides a set of APIs which allows the user to customize node and edge renderers. Editable view extends the capabilities of read-only view, providing a set of drag & drop APIs which can be applied to the node or edge renderers.

nice-dag-modules

Ideally, the Nice-DAG is framework agnostic. The DOM operations are covered by nice-dag-core. It doesn't rely on any 3rd party frameworks. Based on it, the Nice-DAG can be adapted for different modern frameworks like React, Vue, Angular.

nice-dag-adaptors

Currently, Nice-DAG provides a React adaptor in the manner of a React hook.

For more details information, you can visit the Doc Portal and the Demo Portal.

Installation

If your project is using yarn, you can run the command.

yarn add @ebay/nice-dag-core
yarn add @ebay/nice-dag-react

If your projet is using npm, you can run the command.

npm install @ebay/nice-dag-core
npm install @ebay/nice-dag-react

Key Features

  • Auto-Layout. No need to give fixed positions for each node and edge.
  • Sub DAG support. A hierarchical node set (without position) can be mapped to a view with Sub-DAGs.
  • Easy customization. Rendering can be controlled completely with the interfaces nice-dag exposes.
  • Framework agnostic. Easily integrated with any UI library.
  • Support scaling. The DAG diagram can be zoomed in/out.
  • Support Mini-Map. For large diagrams, navigation can be done via a mini-map.
  • Powerful Dragging & Dropping. Both nodes and edges can support DnD. Moreover, the page can auto-scroll and the size can be auto-scaled.
  • Rich API. Comprehensive API to control nodes and edges.

Motivation

Nowdays, there are many pipeline engines focusing on back-end pipeline orchestractions. Unfortunately those engines are, very often, lacking good pipeline edition capabilities, with poor or no UI at all. Users have to manually maintain complicated pipeline specific configurations, making it difficult either to write or validate pipelines.

Having a visualized DAG editor significantly increases pipeline efficiency and maintainability.

More Documents

Tutorial

API Reference

License

MIT

You might also like...

A Typescript assembly(ish) interpreter with a nice web UI

Assembly-Online Example Fibonacci Program MOV R0, #1 MOV R1, #1 fib: MOV R2, R0 ADD R0, R0, R1 MOV R1, R2 B print CMP R0, #40 BGT exit B fib exit: \ I

May 23, 2022

Style definitions for nice terminal layouts 👄

Style definitions for nice terminal layouts 👄

blipgloss Style definitions for nice terminal layouts. Powered by lipgloss and bun:ffi. Install bun add blipgloss Usage Blipgloss takes an expressive,

Sep 10, 2022

A cross-platform desktop app with a nice interface to Stable Diffusion and others

A cross-platform desktop app with a nice interface to Stable Diffusion and others

GenerationQ GenerationQ (for "image generation queue") is a cross-platform desktop application (screens below) designed to provide a general purpose G

Sep 16, 2022

A frida script that can be used to find the public RSA key used in the native libakamaibmp.so shared library, seen in version 3.3.0 of Akamai BMP

A frida script that can be used to find the public RSA key used in the native libakamaibmp.so shared library, seen in version 3.3.0 of Akamai BMP

Akamai BMP - RSA/AES Frida Hook This Frida script can be used to find the public RSA key used in the encryption process in Akamai BMP 3.3.0. Since ver

Sep 12, 2022

The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

taste-food The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing

Aug 10, 2022

EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

EggyJS EggyJS is a Javascript micro Library for simple, lightweight toast popups. The goal of this library was to create something that meets the foll

Aug 7, 2022

A native, pure and exquisite web components library which can be used anywhere.

A native, pure and exquisite web components library which can be used anywhere.

What Is This ? This is a project on pure web components merely using native HTML、CSS and JavaScript technologies. It has features below: based on web

Sep 7, 2022

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Macaron is an open-source design tool to visually create Web Components, which can be used in most Web frameworks, or in vanilla HTML/JavaScript

Sep 8, 2022
Suck a DAG out of a peer in the IPFS network.

dagula Suck a DAG out of a peer in the IPFS network. Install npm i dagula Usage import { Dagula } from 'dagula' import { getLibp2p } from 'dagula/p2p

Alan Shaw 10 Sep 16, 2022
This blog is still under development! I present a project scope for science articles, it can now be used in production! But there are some details that need to be put up front.

Science-Blog ?? Attention! This blog is still under development! I present a project scope for science articles, it can now be used in production! But

Raissadev 2 Sep 19, 2022
JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector drawing.

JustGage JustGage is a handy JavaScript plugin for generating and animating nice & clean dashboard gauges. It is based on Raphaël library for vector d

Bojan Djuricic 1.8k Sep 6, 2022
Website to present projects made by me and that are part of my personal portfolio. It was made using React, HTML y Scss (CSS).

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Portfolio Jesús Leal 0 Dec 23, 2021
kimchi is a staple Korean side dish that's present at almost every meal.

(✿◠‿◠)*:・゚✧ (c) 02/2021 Dear reader, Essentially, kimchi is a staple Korean side dish that's present at almost every meal. It's fermented napa cabbage

null 0 Sep 20, 2022
Use XMind share to present your .xmind files on your blog or website.

XMind Embed Viewer Use XMind share to present your .xmind files on your blog or website. Demo Quick start Install As an npm module npm i xmind-embed-v

XMind Ltd. 18 Sep 13, 2022
The Covid-19 data-app collects information from API and present data for the novel coronavirus.

COVID-19-data-app This project was bootstrapped with Create React App. The Covid-19 data-app collects information from API and present data for the no

Sentayhu berhanu 8 Jun 23, 2022
Long-press `⌘` key or press `?` to present a shortcut guide for your Web application.

React Shortcut Guide Status: Alpha Long-press command or press ? to present a shortcut guide for your Web application. Gzip+minify < 3kB Install npm i

Reactify Component 9 Jul 29, 2022
Present your links in style 🔗🔮

links Present your links in style ?? ?? links screenshot Have you ever wanted a place that can make all your profiles and links nicely organized, easi

Abhishek Keshri 18 Sep 11, 2022
sorry Stanley, but PirateStealer is a nice project and cannot be deleted

PirateStealer PirateStealer got deleted by his creator who I love but this project is too cool to be deleted, sorry Stanley please forgive me What is

slow 25 May 15, 2022