How to use cwl-svg - 10 common examples
To help you get started, we’ve selected a few cwl-svg examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
rabix / composer / src / app / job-editor / graph-job-editor / graph-job-editor.component.ts View on Github 
ngAfterViewInit() {
this.graph = new WorkflowGraph({
svgRoot: this.canvas.nativeElement,
model: this.model as any,
plugins: [
new SVGEdgeHoverPlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new SVGNodeMovePlugin(),
new SVGJobFileDropPlugin(),
new SVGArrangePlugin(),
new SVGRequiredInputMarkup(),
new SVGExecutionProgressPlugin(),
]
});
this.graph.fitToViewport();
this.draw.emit(this);
this.jobControl.valueChanges.pipe(
map(v => this.normalizeJob(v))
// comment for now because JSON.stringify returns null for NaN and Infinity (then not working for numbers)
// distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
).subscribeTracked(this, changes => {
this.graph.getPlugin(SVGJobFileDropPlugin).updateToJobState(changes);
this.metaManager.patchAppMeta("job", changes);
});ngAfterViewInit() {
this.graph = new WorkflowGraph({
svgRoot: this.canvas.nativeElement,
model: this.model as any,
plugins: [
new SVGEdgeHoverPlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new SVGNodeMovePlugin(),
new SVGJobFileDropPlugin(),
new SVGArrangePlugin(),
new SVGRequiredInputMarkup(),
new SVGExecutionProgressPlugin(),
]
});
this.graph.fitToViewport();
this.draw.emit(this);
this.jobControl.valueChanges.pipe(
map(v => this.normalizeJob(v))
// comment for now because JSON.stringify returns null for NaN and Infinity (then not working for numbers)ngAfterViewInit() {
this.graph = new WorkflowGraph({
svgRoot: this.canvas.nativeElement,
model: this.model as any,
plugins: [
new SVGEdgeHoverPlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new SVGNodeMovePlugin(),
new SVGJobFileDropPlugin(),
new SVGArrangePlugin(),
new SVGRequiredInputMarkup(),
new SVGExecutionProgressPlugin(),
]
});
this.graph.fitToViewport();
this.draw.emit(this);
this.jobControl.valueChanges.pipe(
map(v => this.normalizeJob(v))
// comment for now because JSON.stringify returns null for NaN and Infinity (then not working for numbers)
// distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
).subscribeTracked(this, changes => {
this.graph.getPlugin(SVGJobFileDropPlugin).updateToJobState(changes);ngAfterViewInit() {
this.graph = new WorkflowGraph({
svgRoot: this.canvas.nativeElement,
model: this.model as any,
plugins: [
new SVGEdgeHoverPlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new SVGNodeMovePlugin(),
new SVGJobFileDropPlugin(),
new SVGArrangePlugin(),
new SVGRequiredInputMarkup(),
new SVGExecutionProgressPlugin(),
]
});
this.graph.fitToViewport();
this.draw.emit(this);
this.jobControl.valueChanges.pipe(
map(v => this.normalizeJob(v))
// comment for now because JSON.stringify returns null for NaN and Infinity (then not working for numbers)
// distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))ngAfterViewInit() {
this.graph = new WorkflowGraph({
svgRoot: this.canvas.nativeElement,
model: this.model as any,
plugins: [
new SVGEdgeHoverPlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new SVGNodeMovePlugin(),
new SVGJobFileDropPlugin(),
new SVGArrangePlugin(),
new SVGRequiredInputMarkup(),
new SVGExecutionProgressPlugin(),
]
});
this.graph.fitToViewport();
this.draw.emit(this);
this.jobControl.valueChanges.pipe(
map(v => this.normalizeJob(v))
// comment for now because JSON.stringify returns null for NaN and Infinity (then not working for numbers)
// distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
).subscribeTracked(this, changes => {drawGraphAndAttachListeners() {
this.graph = new Workflow({
svgRoot: this.canvas.nativeElement as SVGSVGElement,
model: this.model as any,
plugins: [
new SVGArrangePlugin(),
new SVGPortDragPlugin(),
new SVGNodeMovePlugin(),
new SVGEdgeHoverPlugin(),
new SVGValidatePlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new DeletionPlugin(),
new UpdatePlugin()
],
editingEnabled: !this.readonly
});
try {
this.graph.fitToViewport();
} catch (ex) {
setTimeout(() => {
console.warn("Workflow should be able to fit in by now...");
try {
this.graph.fitToViewport();
this.draw.emit(this);
this.functionsWaitingForRender.forEach(fn => fn());drawGraphAndAttachListeners() {
this.graph = new Workflow({
svgRoot: this.canvas.nativeElement as SVGSVGElement,
model: this.model as any,
plugins: [
new SVGArrangePlugin(),
new SVGPortDragPlugin(),
new SVGNodeMovePlugin(),
new SVGEdgeHoverPlugin(),
new SVGValidatePlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new DeletionPlugin(),
new UpdatePlugin()
],
editingEnabled: !this.readonly
});
try {
this.graph.fitToViewport();
} catch (ex) {
setTimeout(() => {
console.warn("Workflow should be able to fit in by now...");
try {
this.graph.fitToViewport();
this.draw.emit(this);
this.functionsWaitingForRender.forEach(fn => fn());
this.functionsWaitingForRender = undefined;drawGraphAndAttachListeners() {
this.graph = new Workflow({
svgRoot: this.canvas.nativeElement as SVGSVGElement,
model: this.model as any,
plugins: [
new SVGArrangePlugin(),
new SVGPortDragPlugin(),
new SVGNodeMovePlugin(),
new SVGEdgeHoverPlugin(),
new SVGValidatePlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new DeletionPlugin(),
new UpdatePlugin()
],
editingEnabled: !this.readonly
});
try {
this.graph.fitToViewport();
} catch (ex) {
setTimeout(() => {
console.warn("Workflow should be able to fit in by now...");
try {
this.graph.fitToViewport();
this.draw.emit(this);
this.functionsWaitingForRender.forEach(fn => fn());
this.functionsWaitingForRender = undefined;drawGraphAndAttachListeners() {
this.graph = new Workflow({
svgRoot: this.canvas.nativeElement as SVGSVGElement,
model: this.model as any,
plugins: [
new SVGArrangePlugin(),
new SVGPortDragPlugin(),
new SVGNodeMovePlugin(),
new SVGEdgeHoverPlugin(),
new SVGValidatePlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new DeletionPlugin(),
new UpdatePlugin()
],
editingEnabled: !this.readonly
});
try {
this.graph.fitToViewport();
} catch (ex) {
setTimeout(() => {
console.warn("Workflow should be able to fit in by now...");
try {
this.graph.fitToViewport();
this.draw.emit(this);ngAfterViewInit() {
this.graph = new WorkflowGraph({
svgRoot: this.canvas.nativeElement,
model: this.model as any,
plugins: [
new SVGEdgeHoverPlugin(),
new SelectionPlugin(),
new ZoomPlugin(),
new SVGNodeMovePlugin(),
new SVGJobFileDropPlugin(),
new SVGArrangePlugin(),
new SVGRequiredInputMarkup(),
new SVGExecutionProgressPlugin(),
]
});
this.graph.fitToViewport();
this.draw.emit(this);cwl-svg
A library for generating an interactive SVG visualization of CWL workflows
