graph css

dnet-app/apps/dnet-wf-manager/src/main/java/eu/dnetlib/wfs/manager/controller/ApiController.java

@@ -112,4 +112,10 @@ public class ApiController extends DnetRestController {
 	public WfTemplate findWfTemplate(@PathVariable final String id) {
 		return wfManagerService.findWfTemplate(id);
 	}
+
+	@GetMapping("/confs/byApi/{id}")
+	public List<WfConfiguration> listWfConfigurationsByApi(@PathVariable final String id) {
+		return wfManagerService.listWfConfigurationsByApiId(id);
+	}
+
 }

dnet-app/apps/dnet-wf-manager/src/main/java/eu/dnetlib/wfs/manager/service/WorkflowManagerService.java

@@ -66,6 +66,11 @@ public class WorkflowManagerService {
 		return wfConfigurationRepository.findBySection(section);
 	}
 
+	@Transactional
+	public List<WfConfiguration> listWfConfigurationsByApiId(final String apiId) {
+		return wfConfigurationRepository.findByApiId(apiId);
+	}
+
 	@Transactional
 	public WfConfiguration saveWfConfiguration(final WfConfiguration conf) {
 		if (StringUtils.isBlank(conf.getId())) {

dnet-app/frontends/is/src/app/dsm/dsm-api.component.html

@@ -18,7 +18,8 @@
 <div style="display: flex; gap: 10px;">
 	<mat-card>
 		<mat-card-header>
-			<mat-card-title>Datasource</mat-card-title>
+			<mat-card-title>Datasource Details</mat-card-title>
+			<mat-card-subtitle>ID: {{ds.id}}</mat-card-subtitle>
 		</mat-card-header>
 		<mat-card-content>
 			<table>
@@ -148,9 +149,3 @@
 		{{wfs | json}}
 	</mat-card-content>
 </mat-card>
-
-DS
-<pre>{{ds | json}}</pre>
-
-API
-<pre>{{api | json}}</pre>

dnet-app/frontends/is/src/app/dsm/dsm.client.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Page, DsmConf, KeyValue, BrowseTerm, SimpleDatasource, WfRepoHi, WfTemplate } from '../common/is.model';
+import { Page, DsmConf, KeyValue, BrowseTerm, SimpleDatasource, WfRepoHi, WfTemplate, WfConf } from '../common/is.model';
 import { ISClient } from '../common/is.client';
 
 @Injectable({
@@ -38,7 +38,7 @@ export class DsmClient extends ISClient {
 	}
 
 	dsmLoadWfs(apiId: string, onSuccess: Function) {
-		alert('TODO');
+		this.httpGet<WfConf[]>('/proxy/byType/wf_manager/api/confs/byApi/' + encodeURIComponent(apiId), onSuccess);
 	}
 
 	dsmListRepoHiWfs(onSuccess: Function) {

dnet-app/frontends/is/src/app/dsm/dsm.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, Injectable, OnInit, ViewChild } from '@angular/core';
-import { Page, BrowseTerm, SimpleDatasource, KeyValue, DsmConf, ProtocolParam, Api, ApiInsert, WfRepoHi, WfTemplate } from '../common/is.model';
+import { Page, BrowseTerm, SimpleDatasource, KeyValue, DsmConf, ProtocolParam, Api, ApiInsert, WfRepoHi, WfTemplate, WfConf } from '../common/is.model';
 import { ActivatedRoute, Params } from '@angular/router';
 import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
@@ -123,7 +123,7 @@ export class DsmApiComponent implements OnInit {
 	apiId: string = '';
 	api: any = {};
 	ds: any = {};
-	wfs: any[] = [];
+	wfs: WfConf[] = [];
 
 	constructor(public client: DsmClient, public route: ActivatedRoute, public router: Router, public dialog: MatDialog) {
 	}

dnet-app/frontends/is/src/app/wf-confs/wf-common.component.ts

@@ -38,50 +38,68 @@ export class WfTemplateDialog implements AfterViewInit {
 				B -- No ----> E[End]
 		*/
 
-		let code = 'flowchart TD\n';
+		let code = "%%{ init: { 'theme': 'base', 'themeVariables': { 'fontSize' : '11px' } } }%%\n";
 
 
-		code += "\tsuccess([success])\n";
+
+		code += 'flowchart TD\n';
+
+		code += "\tstart([" + this.graphNodeText('start', undefined) + "])\n";
+		code += "\tclass start graphStartNode\n";
+		code += "\tsuccess([" + this.graphNodeText('success', undefined) + "])\n";
 		code += "\tclass success graphSuccessNode\n";
+		code += "\tfailure([" + this.graphNodeText('failure', undefined) + "])\n";
+		code += "\tclass failure graphFailureNode\n";
 
 		this.template.graph.forEach((node: any) => {
 			let from: string = node.name;
 
+			if (node.start) { code += "\tstart --> " + from + "\n"; }
+
 			code += "\t" + from;
 
-			if (node.start) {
-				code += '([' + this.graphNodeText(from, node.type) + '])';
-				code += "\n\tclass " + from + " graphNodeStart\n";
-			} else if (node.join) {
+			if (node.join) {
 				code += '{{' + this.graphNodeText(from, node.type) + '}}';
-				code += "\n\tclass " + from + " graphNodeJoin\n";
+				code += "\n\tclass " + from + " graphJoinNode\n";
 			} else {
 				code += '(' + this.graphNodeText(from, node.type) + ')';
-				code += "\n\tclass " + from + " graphNodeSimple\n";
+				code += "\n\tclass " + from + " graphSimpleNode\n";
 			}
 
-			node.arcs.forEach((arc: any) => {
-				code += "\t\t" + from;
-				if (arc.condition) { code += ' -- ' + arc.condition; }
-				code += ' --> ' + arc.to + "\n";
-			});
-		});
-		code += "classDef default font-size:9pt, margin-right: 0.5em\n";
+			code += "\t\t" + from + " --> failure\n";
 
+			if (node.arcs.length) {
+				node.arcs.forEach((arc: any) => {
+					code += "\t\t" + from;
+					if (arc.condition) { code += ' -- ' + arc.condition; }
+					code += ' --> ' + arc.to + "\n";
+				});
+			} else {
+				code += "\t\t" + from + " --> success\n";
+			}
+
+		});
+
+		code += "classDef default font-size:9pt\n";
 
 		element.innerHTML = code;
 
-		mermaid.initialize({ theme: "default", flowchart: { useMaxWidth: true, htmlLabels: true } });
+		mermaid.initialize({ theme: "base", flowchart: { titleTopMargin: 0, useMaxWidth: false, htmlLabels: false } });
 		mermaid.run();
 	}
 
-	graphNodeText(name: string, type?: string) {
+	graphNodeText2(name: string, type?: string) {
 		let res = name;
-		if (type) { res += "<br/><small><b>" + type + "</b></small>"; }
+		if (type) { res += '<br/><small><b>' + type + '</b></small>'; }
 		return res;
 	}
 
-
+	graphNodeText(name: string, type?: string) {
+		let res = '"`' + name;
+		if (type) { res += '\n**(' + type + ')**'; }
+		res += '`"';
+		return res;
+	}
 	startRepoHiWf(wfId: string): void {
 		alert('TODO REPO HI');
 	}

dnet-app/frontends/is/src/app/wf-confs/wf-template-dialog.html

@@ -1,9 +1,11 @@
 <h1 mat-dialog-title>Workflow Template</h1>
 
-<div mat-dialog-content style="height: 500px; overflow: scroll;">
+<div mat-dialog-content>
 	<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" animationDuration="0ms">
 		<mat-tab label="Graph">
-			<pre class="mermaid" #mermaidGraph style="min-height: 200px;"></pre>
+			<div style="height: 500px; overflow: scroll;">
+				<pre class="mermaid" #mermaidGraph style="min-height: 200px;"></pre>
+			</div>
 		</mat-tab>
 
 		<mat-tab label="Parameters" *ngIf="template.parameters.length">

dnet-app/frontends/is/src/styles.css

@@ -139,17 +139,22 @@ a:not([href]):hover {
 
 /* Mermaid Graph */
 
-.graphNodeStart>rect {
+.graphStartNode>rect {
+	fill: white !important;
 	stroke: #336699 !important;
 	stroke-width: 3px !important;
 }
 
-.graphNodeJoin>rect {
-	stroke-dasharray: 5 !important;
+.graphJoinNode>polygon {
+	fill: #ffffcc !important;
+	stroke: darkorange !important;
 	stroke-width: 2px !important;
+	stroke-dasharray: 5 !important;
 }
 
-.graphNodeSimple>rect {
+.graphSimpleNode>rect {
+	fill: #ccccff !important;
+	stroke: #336699 !important;
 	stroke-width: 2px !important;
 }
 
@@ -163,4 +168,11 @@ a:not([href]):hover {
 	stroke-width: 3px !important;
 }
 
+.graphFailureNode>rect {
+	fill: #ffaaaa !important;
+	stroke: darkred !important;
+	stroke-width: 3px !important;
+}
+
+
 /* End Mermaid Graph */

dnet-app/libs/dnet-wf-common/src/main/java/eu/dnetlib/wfs/repository/WfConfigurationRepository.java

@@ -10,4 +10,6 @@ public interface WfConfigurationRepository extends JpaRepository<WfConfiguration
 
 	List<WfConfiguration> findBySection(String section);
 
+	List<WfConfiguration> findByApiId(String apiId);
+
 }