hd-wiring v0.6.1

HdWiring

hdwiring is the part of hetida designer graphical composition tool and makes data wiring trough ui available. It provides a 'ready to use' angular component, which should simplify the use of hetida designer in general.

Requirements

Since hd wiring is an angular component, currently only angular applications can make use of it.

Angular applications with a minimum version of 9.x.

Installing

Peer Deps

you should have these peer dependencies in your package.json.

"@angular/common": "> 9.x.x <=12.x.x",
"@angular/core": "> 9.x.x <=12.x.x",
"@angular/animations": "> 9.x.x <=12.x.x",
"@angular/cdk": "> 9.x.x <=12.x.x",
"@angular/forms": "> 9.x.x <=12.x.x",
"@angular/material": "> 9.x.x <=12.x.x",
"hetida-flowchart": "^0.3.0",
"@danielmoncada/angular-datetime-picker": "^12.3.0",
"moment": "^2.29.1"

Angular Material

The component uses @angular/material as UI Framework, so you have to add it as a peer Dependency in your package.json and also import the styles.

You can either use the pre defined styles from angular material or make you own style.

to use the pre defined style add this line to you primary style file. To create you own style read please the getting started docs of angular material.

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

VScode´s Monaco Editor

we use vscode´s monaco editor for some functionalities like the json editor, if you like to use monaco editor either, just integrate it following this introduction to your app https://github.com/atularen/ngx-monaco-editor#readme. If you decide to not using monaco editor, textarea element will be used instead.

Otherwise a workaround is needed to avoid error in compilation. Add following lines to you tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    ...
    "paths": {
      ....
      "ngx-monaco-editor": ["mock-ngx-monaco-editor.ts"] <== THIS
    }
  },
  "files": [
    ....
    "src/mock-ngx-monaco-editor.ts" <== THIS
  ],
  ....
}

mock-ngx-monaco-editor.ts is a empty file.

Styling

add this lines to you primary style file.

@import url("../node_modules/hd-wiring/hd-wiring.css");
@import url("../node_modules/hetida-flowchart/hetida-flowchart.css");

How To Use

As a Dialog

Because hd-wiring is written with angular material, it is possible to open hd-wiring as a dialog like any other dialog.

const dialogRef = this.dialog.open<WiringDialogComponent, ExecutionDialogData>(
    WiringDialogComponent,
    {
        data: {
            title,
            wiringItem
            adapterList
        }
    }
);

As a Component

you can also use it like a normal component

<hd-wiring-dialog
        [title]="title"
        [adapterList]="adapters"
        [wiringItem]="wiringItem"
></hd-wiring-dialog>

API

Configuration

Configuration will be injected via a DI Token called HD_WIRING_CONFIG.

• endpoint.applicationUrl: string => the url of the server.
• allowManualWiring: boolean => sets if manual wiring should be allowed. (default: true)
• allowOutputWiring: boolean => sets if output wiring should be allowed. Will also hide 'output parameter' section in ui (default: true)
• showUploadJsonButton: boolean => allow to upload a json file to fill the input items. Be sure that allowManualWiring are activated too. (default: true)
• showDownloadExampleJsonButton: boolean => allows to download a json file with examples for paramter types. (default: true)
• monacoEditorTheme: WiringTheme => dark or light theme for the editor.
• enableDateRangeSelectionOnSeriesTypes: boolean => Shows date range picker for series types. Allows to pick a date range for specific series binding. if enabled a range have to be selected (default: false)

Provide the DI token like this in you app.module

    ....
providers: [
    ...
        {
            provide: ADAPTER_LIST_API,
            useFactory: (someServiceYouDependOn: SomeService): HdWiringConfigToken => {
                return {
                    allowManualWiring: someServiceYouDependOn.allowWiring,
                    allowOutputWiring: true,
                    monacoEditorTheme: WiringTheme.LightTheme,
                    showDownloadExampleJsonButton: true,
                    showUploadJsonButton: true,
                };
            },
            deps: [SomeService]
        },
    ...
]
...

Inputs

As you see in the previous section hd-wiring has only few input parameters.

1. title: string
2. wiringItem: WiringItem
3. adapterList: [] | Adapter (you can put here the urls of your adapter implementations.)

Outputs (Events)

1. confirmClick: ConfirmClickEvent
2. cancelDialogClick: void

How To Contribute

I will skip the explanation to clone this repo and so on...

First you have to create a host application where this project is linked with npm link. You have to consider few things.

1. Enable ivy in tsconfig.json, with ivy disabled your host component will not reload on changes.
2. Set "preserveSymlinks": true in host application, otherwise you will get compilation errors.

After that link the dist folder of this project by navigating there in terminal and executing npm link. (First time you will probably do not have a dist folder so just run ng build or create it manually.)In the host application just execute npm link hd-wiring in root folder.

Start this library with ng build --watch and the host component with ng serve.

Installation Guide To "NPM Link", Step By Step

Link to use my local created package, instead of the normally used one in node_modules.

1. Clone the package from git locally in your workspace folder for example: hetida-flowchart

cd .\workspace

git clone git@bitbucket.org:neusta-sd-west/hetida-flowchart.git

2. Move to the root folder, from the package you want to use

cd .\workspace\hetida-flowchart\packages\hd-wiring

3. Install package dependencies

npm install

4. build package

ng build

5. Move to the new created dist folder

cd .\workspace\hetida-flowchart\packages\hd-wiring\dist

6. Link your package in the dist folder, after that go back to the root folder

npm link

cd ..

7. Open up a new terminal and go to your host-application frontend folder

cd .\workspace\hetida-designer\frontend

8. If not happened before install host-application dependencies now

npm install

9. Edit tsconfig.json an set preserveSymlinks = true

{
  ...
  "compilerOptions": {
    ...
    "preserveSymlinks": true
  }
}

10. Edit in angular.json the same

{
  ...
  "projects": {
    "frontend": {
      ...
      "architect": {
        "build": {
		  ...
          "options": {
            "preserveSymlinks": true
          }
        }
      }
    }
  }
}

11. Link in host-application frontend folder

npm link hd-wiring

12. Finished

Setup for working

1. Start the library, in your package root folder, execute

cd .\workspace\hetida-flowchart\packages\hd-wiring

ng build --watch

2. In a new terminal, start your host-application frontend

cd .\workspace\hetida-designer\frontend

ng serve

(Extra) To delete the link, go back to your host-application frontend folder and execute

npm unlink --no-save hd-wiring

npm install