ruclib-data-flow

A component for creating a canvas for data flow. Canvas can contain containers/tables with some elements or data. The componenets can be interconnected via links.

Features

• User is allowed to add the container on the canvas of their choice to create the relations between them.
• User is allowed to create the connection by drawing the connection lines of different types i.e Arrowed, Dotted etc.
• User is allowed to adjust the width, stroke of the connection line.
• User is allowed to search within the table.
• User is allowed edit attributes by dobule click on the row.
• User is allow to open the action menu with double click on box.
• User is allowed to add new attribute, remove the container etc.
• User is allowed to toggle the visibility of the icons and can add icons of their choice.
• Use can change the layout of canvas i.e default or grid view.

Installation guide

Install complete library

npm install @uxpractice/ruc-lib

Install individual component

If users only need the dataflow component, they can install it separately npm install @ruc-lib/data-flow

Usage

After installing the the required package successfully, we have to import the CSS in our style.scss file in following way.

@import "../node_modules/jointjs/css/layout.css";

here path of the scss file is subject to change as per choice of the installation

for library @import "../node_modules/@ruc-lib/data-flow/lib/data-flow.scss";

for seperate package @import "../node_modules/@uxpractice/ruc-lib/data-flow/lib/data-flow.scss";

import required modules

for library import { RuclibDataFlowModule } from '@uxpractice/ruc-lib/data-flow';

for seperate package import { RuclibDataFlowModule } from '@ruc-lib/data-flow';

use component selector

<uxp-ruclib-data-flow [rucInputData]="inputObjectDataFlow" [customTheme]="customTheme"
  (rucEvent)="passEvent($event)"></uxp-ruclib-data-flow>

Input and Output

Inputs

rucInputData -> It is the configuration input to configure the data flow

customTheme -> It is the name of the theme.

Output

rucEvent -> is the event which will be fired when any change is made in data flow component

rucInputData (sample object)

Detail definition of the each property can be found in type definition file.

inputObjectDataFlow = {
   title: 'Data Flow',
   defaultCellHeader: 'Student',
   line: {
     type: ELineType.Plain,  # ELineType to be imported from the data flow as same as module.
   },
   drawGrid: true,
   showMenuOnDoubleClick: true,
   fieldValues: {
       icon: '../assets/pipeline/generic.png',
       title: 'Generic',
       isMenuOpen: 'false',
       activeIcon: '../assets/pipeline/generic.png',
   },
   htmlMarkup:  {
   tagName: 'div',
   selector: 'htmlRoot',
   groupSelector: 'field',
   className: 'canvas__element',
   style: {
     gap: '16px',
     display: 'flex',
     position: 'absolute',
     'user-select': 'none',
     'align-items': 'center',
     'pointer-events': 'auto',
     'box-sizing': 'border-box',
     'flex-direction': 'column',
     'justify-content': 'space-between',
   },
   attributes: {
     'data-attribute': 'isMenuOpen',
   },
   children: [
     {
       tagName: 'div',
       className: 'canvas__element--icon',
       selector: 'iconWrapper',
       style: {
         width: '60px',
         display: 'flex',
         cursor: 'pointer',
         padding: '1.25em',
         'border-radius': '50%',
         'aspect-ratio': '1 / 1',
         'align-items': 'center',
         'box-sizing': 'border-box',
         'justify-content': 'center',
         'background-color': 'white',
         'box-shadow':
           '0 0 3px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.24)',
       },
       children: [
         {
           tagName: 'img',
           style: {},
           groupSelector: 'field',
           attributes: {
             src: '../assets/pipeline/generic.png',
             'data-attribute': 'icon',
           },
         },
         {
           tagName: 'img',
           style: {
             display: 'none',
           },
           groupSelector: 'field',
           attributes: {
             src: '../assets/pipeline/generic.png',
             'data-attribute': 'activeIcon',
           },
         },
       ],
     },
     {
       tagName: 'p',
       className: 'canvas__element--title',
       groupSelector: 'field',
       textContent: 'Home',
       style: {
         top: '100%',
         margin: '0',
         position: 'absolute',
         'padding-top': '4px',
         'text-align': 'center',
       },
       attributes: {
         'data-attribute': 'title',
       },
     },
   ],
 },
   hasElements: false,
   elements: [
     {
       icon: '../assets/pipeline/migration.png',
       activeIcon: '../assets/pipeline/active/migration.png',
       title: 'Migration',
     },
     {
       icon: '../assets/pipeline/validation.png',
       activeIcon: '../assets/pipeline/active/validation.png',
       title: 'Validation',
     },
     {
       icon: '../assets/pipeline/translation.png',
       activeIcon: '../assets/pipeline/active/translation.png',
       title: 'Transformation',
     },
     {
       icon: '../assets/pipeline/querylevelvalidation.png',
       activeIcon: '../assets/pipeline/active/querylevelvalidation.png',
       title: 'Query Validation',
     },
     {
       icon: '../assets/pipeline/execution.png',
       activeIcon: '../assets/pipeline/active/execution.png',
       title: 'Execution',
     },
     {
       icon: '../assets/pipeline/etlgraph.png',
       activeIcon: '../assets/pipeline/active/etlgraph.png',
       title: 'ETL Conversion',
     },
     {
       icon: '../assets/pipeline/dataload.png',
       activeIcon: '../assets/pipeline/active/dataload.png',
       title: 'Data Load',
     },
     {
       icon: '../assets/pipeline/metaDifference.png',
       activeIcon: '../assets/pipeline/active/metaDifference.png',
       title: 'Meta Diff',
     },
     {
       icon: '../assets/pipeline/extract.png',
       activeIcon: '../assets/pipeline/active/extract.png',
       title: 'Multi Algo',
     },
     {
       icon: '../assets/pipeline/ksh.png',
       activeIcon: '../assets/pipeline/active/ksh.png',
       title: 'Variable Extractor',
     },
     {
       icon: '../assets/pipeline/flatfile.png',
       activeIcon: '../assets/pipeline/active/flatfile.png',
       title: 'File Validation',
     },
   ],
   attributes: {
     width: 65,
     height: 65,
     titleCharacterLimit: 10,
   },
   menuOptions: [{}],
 };

Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

Acknowledgements

Thank you for choosing the Data flow Component Library. If you have any feedback or suggestions, please let us know!