Workflow Editor

angular.json

@@ -51,7 +51,8 @@
               "node_modules/plyr/dist/plyr.css",
               "node_modules/@ali-hm/angular-tree-component/css/angular-tree-component.css",
               "node_modules/katex/dist/katex.min.css",
-              "node_modules/prismjs/themes/prism-okaidia.css"
+              "node_modules/prismjs/themes/prism-okaidia.css",
+              "src/scss/angular2-multiselect-dropdown.scss"
             ],
             "stylePreprocessorOptions": {
               "includePaths": [
@@ -61,6 +62,7 @@
             "scripts": [
               "node_modules/chart.js/dist/chart.min.js",
                 "node_modules/katex/dist/katex.min.js",
+              "node_modules/katex/dist/contrib/auto-render.min.js",
                 "node_modules/prismjs/prism.js",
                 "node_modules/prismjs/components/prism-css.min.js",
                 "node_modules/prismjs/components/prism-cypher.min.js",

package.json

@@ -33,6 +33,7 @@
     "ace-builds": "^1.31.1",
     "ajv": "^8.12.0",
     "angular-ng-autocomplete": "^2.0.12",
+    "angular2-multiselect-dropdown": "^9.0.0",
     "ansi_up": "^5.2.1",
     "bootstrap": "^5.3.1",
     "core-js": "^3.26.1",
@@ -48,7 +49,8 @@
     "highlight.js": "^11.8.0",
     "jquery": "3.7.1",
     "jquery-ui": "^1.13.0",
-    "katex": "^0.16.0",
+    "json-pointer": "^0.6.2",
+    "katex": "0.16.10",
     "lodash": "^4.17.20",
     "marked": "^9.1.6",
     "moment": "^2.30.1",
@@ -89,6 +91,8 @@
     "@types/hammerjs": "^2.0.36",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
+    "@types/json-pointer": "^1.0.34",
+    "@types/lodash": "^4.17.13",
     "@types/marked": "^4.3.0",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.2",

src/app/app.module.ts

@@ -77,6 +77,8 @@ import {ModalModule} from 'ngx-bootstrap/modal';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 import {NotebooksModule} from './plugins/notebooks/notebooks.module';
 import {IconDirective} from '@coreui/icons-angular';
+import {WorkflowsModule} from './plugins/workflows/workflows.module';
+import {MarkdownModule} from 'ngx-markdown';
 
 
 @NgModule({
@@ -90,6 +92,7 @@ import {IconDirective} from '@coreui/icons-angular';
         NgChartsModule,
         // plugins
         NotebooksModule,
+        WorkflowsModule,
         ToastComponent,
         NgChartsModule,
         ToasterComponent,
@@ -151,7 +154,8 @@ import {IconDirective} from '@coreui/icons-angular';
         NavbarComponent,
         CollapseDirective,
         NavbarBrandDirective,
-        NavbarNavComponent
+        NavbarNavComponent,
+        MarkdownModule.forRoot()
     ],
     declarations: [
         AppComponent,

src/app/components/autocomplete/autocomplete.component.html

@@ -0,0 +1,25 @@
+<ng-autocomplete
+        [ngModel]="value()"
+        (ngModelChange)="value.set($event)"
+        [data]="data"
+        [searchKeyword]="value()"
+        [placeholder]="placeholder"
+        [notFoundText]="notFoundText"
+        [disabled]="disabled"
+        [itemTemplate]="itemTemplate"
+        [notFoundTemplate]="notFoundTemplate"
+        (selected)="onItemSelected($event)"
+        (inputChanged)="onInputChanged($event)"
+        (inputFocused)="onInputFocused()"
+        (inputCleared)="onInputCleared()"
+        (opened)="onOpened()"
+        (closed)="onClosed()"
+        (scrolledToEnd)="onScrolledToEnd()">
+</ng-autocomplete>
+
+<ng-template #itemTemplate let-item>
+    <a [innerHTML]="item"></a>
+</ng-template>
+<ng-template #notFoundTemplate let-notFound>
+    <div [innerHTML]="notFound"></div>
+</ng-template>

src/app/components/autocomplete/autocomplete.component.scss

@@ -0,0 +1,51 @@
+.ng-autocomplete {
+  width: 100% !important;
+
+
+  .autocomplete-container {
+    box-shadow: none !important;
+    border: 1px solid #d8dbe0;
+    border-radius: 0.25rem;
+    line-height: 2;
+    height: auto !important;
+  }
+
+  .not-found {
+    margin-bottom: -36px;
+  }
+
+  .input-container {
+    height: initial;
+    max-height: 31px !important; // based on small coreUI input
+    line-height: 2;
+    background-color: white !important;
+    border-radius: 0.25rem;
+
+    input {
+      background-color: transparent !important;
+      height: auto !important;
+      line-height: 1 !important;
+      padding: 0.25rem 0.5rem !important;
+    }
+  }
+
+  .autocomplete-container .suggestions-container ul li a {
+    padding: 0 0.5em !important;
+  }
+
+  .input-container input::placeholder {
+    font-size: 0.875rem; // based on small coreUI input
+  }
+
+  /* bootstrap styles */
+  .autocomplete-container {
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+
+  .autocomplete-container:focus-within {
+    border: 1px #8ad4ee solid !important;
+    border-radius: 0.25rem;
+    outline: 0 !important;
+    box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25) !important;
+  }
+}

src/app/components/autocomplete/autocomplete.component.ts

@@ -0,0 +1,64 @@
+import {Component, EventEmitter, Input, model, Output, ViewEncapsulation} from '@angular/core';
+
+/**
+ * A light-weight wrapper around the ng-autocomplete component.
+ * Its purpose is to introduce the CoreUI style.
+ * If more inputs are required, they can be added in the future.
+ * Also see https://www.npmjs.com/package/angular-ng-autocomplete
+ */
+@Component({
+    selector: 'app-autocomplete',
+    templateUrl: './autocomplete.component.html',
+    styleUrl: './autocomplete.component.scss',
+    encapsulation: ViewEncapsulation.None
+})
+export class AutocompleteComponent {
+    value = model.required<string>();
+
+    @Input({required: true}) data: any[];
+    //@Input({ required: true }) searchKeyword: string; removed, instead we use value()
+    @Input() placeholder: string;
+    @Input() notFoundText = 'Not Found';
+    @Input() disabled = false;
+
+    @Output() changed = new EventEmitter<void>(); // new output, combines selected, inputChanged and inputCleared
+    @Output() selected = new EventEmitter<any>();
+    @Output() inputChanged = new EventEmitter<any>();
+    @Output() inputFocused = new EventEmitter<void>();
+    @Output() inputCleared = new EventEmitter<void>();
+    @Output() opened = new EventEmitter<void>();
+    @Output() closed = new EventEmitter<void>();
+    @Output() scrolledToEnd = new EventEmitter<void>();
+
+    onItemSelected(event: any): void {
+        this.selected.emit(event);
+        this.changed.emit();
+    }
+
+    onInputChanged(event: any): void {
+        this.inputChanged.emit(event);
+        this.changed.emit();
+    }
+
+    onInputFocused(): void {
+        this.inputFocused.emit();
+    }
+
+    onInputCleared(): void {
+        this.inputCleared.emit();
+        this.changed.emit();
+    }
+
+    onOpened(): void {
+        this.opened.emit();
+    }
+
+    onClosed(): void {
+        this.closed.emit();
+    }
+
+    onScrolledToEnd(): void {
+        this.scrolledToEnd.emit();
+    }
+
+}

src/app/components/components.module.ts

@@ -27,7 +27,7 @@ import {
     DropdownItemDirective,
     DropdownMenuDirective,
     DropdownToggleDirective,
-    FormCheckInputDirective,
+    FormCheckComponent,
     FormCheckLabelDirective,
     FormControlDirective,
     FormDirective,
@@ -131,6 +131,7 @@ import {PopoverModule} from 'ngx-bootstrap/popover';
 import {AlgMetadataComponent} from './polyalg/algnode/alg-metadata/alg-metadata.component';
 import {DoubleArgComponent} from './polyalg/controls/double-arg/double-arg.component';
 import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.component';
+import {AutocompleteComponent} from './autocomplete/autocomplete.component';
 
 //import 'hammerjs';
 
@@ -218,7 +219,8 @@ import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.compo
         PopoverDirective,
         PopoverModule,
         ButtonToolbarComponent,
-        BadgeComponent
+        BadgeComponent,
+        FormCheckComponent
     ],
     declarations: [
         BreadcrumbComponent,
@@ -267,7 +269,8 @@ import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.compo
         MagneticConnectionComponent,
         AlgMetadataComponent,
         DoubleArgComponent,
-        WindowArgComponent
+        WindowArgComponent,
+        AutocompleteComponent
     ],
     exports: [
         BreadcrumbComponent,
@@ -291,7 +294,9 @@ import {WindowArgComponent} from './polyalg/controls/window-arg/window-arg.compo
         Toast,
         ReloadButtonComponent,
         DockerInstanceComponent,
-        AlgViewerComponent
+        AlgViewerComponent,
+        JsonTextComponent,
+        AutocompleteComponent
     ]
 })
 export class ComponentsModule {