-
diff --git a/frontend/src/app/program-detail.component.scss b/frontend/src/app/program-detail.component.scss
new file mode 100644
index 00000000..a026b6a4
--- /dev/null
+++ b/frontend/src/app/program-detail.component.scss
@@ -0,0 +1,155 @@
+.program-pad #workspace {
+ width: 100%;
+}
+
+.program-pad #workspace-read-only-marker {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: 999;
+ background-color: rgba(0,0,0,0.7);
+}
+
+.program-pad #workspace-read-only-marker .message {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 250%;
+ color: white;
+ width: 100%;
+ text-align: center;
+}
+
+.program-pad #workspace-read-only-marker .message button .action-icon {
+ font-size: inherit;
+ width: 1em;
+ vertical-align: sub;
+}
+
+.app-content {
+ overflow: hidden;
+}
+
+#program-header {
+ border-bottom: 1px solid #AAA;
+ overflow-y: auto;
+ height: 3em;
+}
+
+#program-header:not(.is-scrollable) > .hint-scrollable {
+ display: none;
+}
+
+#program-header.is-scrollable > .hint-scrollable {
+ position: absolute;
+ top: 1ex;
+ right: 1ex;
+ z-index: 10;
+}
+
+#program-header > .hint-scrollable > mat-icon {
+ background: rgba(255,255,255,0.8);
+ border-radius: 22px;
+}
+
+#program-header > .hint-scrollable > .hint-text {
+ display: none;
+
+ position: absolute;
+ z-index: 10;
+ margin-left: -25ex;
+ padding: 0.5ex;
+ background: rgba(0,0,0,0.8);
+ color: white;
+ border-radius: 5px;
+ top: -0.5ex;
+ width: 25ex;
+ text-align: center;
+ pointer-events: none;
+}
+
+#program-header > .hint:hover > .hint-text {
+ display: block;
+}
+
+
+#sidepanel {
+ max-width: 30em;
+ display: block;
+}
+
+button#program-visibility-state,
+button#program-clone-button,
+button#program-rename-button,
+button#program-start-button,
+button#program-delete-button,
+button#program-logs-button,
+button#advanced-program-controls-button {
+ vertical-align: top;
+ padding: 1ex;
+ margin-left: 0.5ex;
+
+ &.annotated-icon {
+ padding: 0.25ex;
+ margin-bottom: 1px;
+ }
+}
+
+button.dangerous {
+ background-color: #FAA;
+
+ mat-icon {
+ color: #000;
+ }
+
+ &:hover {
+ color: #fff;
+ background-color: #F44336;
+
+ mat-icon {
+ color: #fff;
+ }
+ }
+}
+
+button#program-delete-button{
+ float: right;
+}
+
+button#program-start-button .action-icon {
+ vertical-align: top;
+}
+
+.program-name .program-title {
+ vertical-align: middle;
+}
+
+.program-title {
+ font-size: 1.15rem;
+}
+
+.program-name {
+ display: inline;
+ padding-right: 1ex;
+}
+
+.program-name > a {
+ padding-left: 1ex;
+}
+
+.program-name > .program-title {
+ display: inline-block;
+ width: 15ex;
+ max-width: 50vw;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.program-name .back-arrow {
+ vertical-align: middle;
+}
+
+.viewer {
+ margin: 0;
+}
diff --git a/frontend/src/app/program-detail.component.ts b/frontend/src/app/program-detail.component.ts
index 2c28ba9a..304a63fc 100644
--- a/frontend/src/app/program-detail.component.ts
+++ b/frontend/src/app/program-detail.component.ts
@@ -1,60 +1,120 @@
-
-import {switchMap} from 'rxjs/operators';
-import { Component, Input, OnInit } from '@angular/core';
+import { isPlatformServer, Location } from '@angular/common';
+import { AfterViewInit, Component, Inject, Input, NgZone, OnInit, PLATFORM_ID, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatMenu } from '@angular/material/menu';
+import { MatDrawer } from '@angular/material/sidenav';
+import { MatSnackBar } from '@angular/material/snack-bar';
import { ActivatedRoute, Params, Router } from '@angular/router';
-import { ProgramContent, ScratchProgram } from './program';
+import { ToastrService } from 'ngx-toastr';
+import { Unsubscribable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { environment } from '../environments/environment';
+import { AssetService } from './asset.service';
+import { BlocklyEvent, BlockSynchronizer } from './blocks/BlockSynchronizer';
+import { Toolbox, ToolboxRegistration } from './blocks/Toolbox';
+import { ToolboxController } from './blocks/ToolboxController';
+import { BrowserService } from './browser.service';
+import { ProgramEditorSidepanelComponent } from './components/program-editor-sidepanel/program-editor-sidepanel.component';
+import { ConnectionService } from './connection.service';
+import { CustomBlockService } from './custom_block.service';
+import { CustomSignalService } from './custom_signals/custom_signal.service';
+import { DeleteProgramDialogComponent } from './DeleteProgramDialogComponent';
+import { ChangeProgramVisilibityDialog } from './dialogs/change-program-visibility-dialog/change-program-visibility-dialog.component';
+import { CloneProgramDialogComponent, CloneProgramDialogComponentData } from './dialogs/clone-program-dialog/clone-program-dialog.component';
+import { EnvironmentService } from './environment.service';
+import { MonitorService } from './monitor.service';
+import { ProgramContent, ProgramEditorEventValue, ScratchProgram, VisibilityEnum } from './program';
+import { EditorController } from './program-editors/editor-controller';
import { ProgramService } from './program.service';
-
-import { Toolbox } from './blocks/Toolbox';
-import * as progbar from './ui/progbar';
///
import ScratchProgramSerializer from './program_serialization/scratch-program-serializer';
-import { MonitorService } from './monitor.service';
-import { CustomBlockService } from './custom_block.service';
-
-import { MatDialog } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { SetProgramTagsDialogComponent } from './program_tags/SetProgramTagsDialogComponent';
import { RenameProgramDialogComponent } from './RenameProgramDialogComponent';
-import { DeleteProgramDialogComponent } from './DeleteProgramDialogComponent';
+import { ServiceService } from './service.service';
+import { Session } from './session';
+import { SessionService } from './session.service';
import { StopThreadProgramDialogComponent } from './StopThreadProgramDialogComponent';
-import { SetProgramTagsDialogComponent } from './program_tags/SetProgramTagsDialogComponent';
-import { ToolboxController } from './blocks/ToolboxController';
+import { Synchronizer } from './syncronizer';
import { TemplateService } from './templates/template.service';
-import { ServiceService } from './service.service';
-import { CustomSignalService } from './custom_signals/custom_signal.service';
+import * as progbar from './ui/progbar';
+
+
+type NonReadyReason = 'loading' | 'disconnected';
+
+const SvgNS = "http://www.w3.org/2000/svg";
+const PRINT_MARGIN = 20;
@Component({
selector: 'app-my-program-detail',
templateUrl: './program-detail.component.html',
- providers: [CustomBlockService, CustomSignalService, MonitorService, ProgramService, TemplateService, ServiceService],
+ providers: [
+ AssetService, ConnectionService, CustomBlockService, CustomSignalService,
+ MonitorService, ProgramService, ServiceService, SessionService,
+ TemplateService
+ ],
styleUrls: [
- 'program-detail.component.css',
+ 'program-detail.component.scss',
'libs/css/material-icons.css',
'libs/css/bootstrap.min.css',
],
})
-export class ProgramDetailComponent implements OnInit {
+export class ProgramDetailComponent implements OnInit, AfterViewInit {
@Input() program: ProgramContent;
- currentFillingInput: string;
- workspace: Blockly.Workspace;
- programUserName: string;
+ workspace: Blockly.WorkspaceSvg;
programId: string;
+ programName: string;
+ environment: { [key: string]: any };
+ session: Session;
+
+ @ViewChild('drawer') drawer: MatDrawer;
+ @ViewChild('sidepanel') sidepanel: ProgramEditorSidepanelComponent;
+
toolboxController: ToolboxController;
portraitMode: boolean;
smallScreen: boolean;
+ patchedFunctions: {recordDeleteAreas: (() => void)} = { recordDeleteAreas: null };
+ eventStream: Synchronizer
;
+ isReady: boolean;
+ connectionLost: boolean;
+ private workspaceElement: HTMLElement;
+
+ private cursorDiv: HTMLElement;
+ private cursorInfo: {[key: string]: HTMLElement};
+ nonReadyReason: NonReadyReason;
+
+ read_only: boolean = true;
+ can_admin: boolean = false;
+
+ // HACK: Prevent the MatMenu import for being removed
+ private _pinRequiredMatMenuLibrary: MatMenu;
+ eventSubscription: Unsubscribable | null;
+ mutationObserver: MutationObserver | null;
+ blockSynchronizer: BlockSynchronizer;
+ visibility: VisibilityEnum;
+
constructor(
+ private browser: BrowserService,
private monitorService: MonitorService,
private programService: ProgramService,
private customBlockService: CustomBlockService,
private customSignalService: CustomSignalService,
+ private assetService: AssetService,
private route: ActivatedRoute,
private router: Router,
- public dialog: MatDialog,
+ private _location: Location,
private templateService: TemplateService,
private serviceService: ServiceService,
private notification: MatSnackBar,
+ private dialog: MatDialog,
+ private connectionService: ConnectionService,
+ private sessionService: SessionService,
+ private ngZone: NgZone,
+ private environmentService: EnvironmentService,
+ private toastr: ToastrService,
+
+ @Inject(PLATFORM_ID) private platformId: Object
) {
this.monitorService = monitorService;
this.programService = programService;
@@ -62,46 +122,112 @@ export class ProgramDetailComponent implements OnInit {
this.customSignalService = customSignalService;
this.route = route;
this.router = router;
- this.serviceService = serviceService;
+ this.serviceService = serviceService
+ this.isReady = false;
+ this.nonReadyReason = 'loading';
+
+ this.cursorInfo = {};
}
ngOnInit(): void {
- if (window && (window.innerWidth < window.innerHeight)) {
+ this.environment = environment;
+
+ if (isPlatformServer(this.platformId)) {
+ // This cannot be rendered on server, so halt it's load
+ return;
+ }
+
+ if (this.browser.window && (this.browser.window.innerWidth < this.browser.window.innerHeight)) {
this.portraitMode = true;
} else {
this.portraitMode = false;
}
- this.smallScreen = window.innerWidth < 750;
+ this.smallScreen = this.browser.window.innerWidth < 750;
+
+ progbar.track(new Promise(async (resolve, reject) => {
+
+ this.session = await this.sessionService.getSession();
- progbar.track(new Promise((resolve) => {
this.route.params.pipe(
switchMap((params: Params) => {
- this.programUserName = params['user_id'];
- this.programId = params['program_id'];
- return this.programService.getProgram(params['user_id'], params['program_id']).catch(err => {
- console.error("Error:", err);
- this.goBack();
- throw Error("Error loading");
- });
+ const user = params['user_id'];
+ if (user) {
+ const programName = params['program_id'];
+
+ return this.programService.getProgram(user, programName).catch(err => {
+ if (!this.session.active) {
+ this.router.navigate(['/login'], {replaceUrl:true});
+ reject();
+ this.toastr.error(err.message, "Error loading");
+ throw Error("Error loading");
+ }
+ else {
+ console.error("Error:", err);
+ this.toastr.error(err.message, "Error loading");
+ return null;
+ }
+ });
+ }
+ else {
+ this.programId = params['program_id'];
+ return this.programService.getProgramById(this.programId).catch(err => {
+ if (!this.session.active) {
+ this.router.navigate(['/login'], {replaceUrl:true});
+ reject();
+ throw Error("Error loading");
+ }
+ else {
+ console.error("Error:", err);
+ this.toastr.error(err.message, "Error loading");
+ return null;
+ }
+ })
+ }
}))
.subscribe(program => {
- this.prepareWorkspace().then((controller: ToolboxController) => {
+ if (program === null) {
+ return;
+ }
+
+ this.programName = program.name;
+ this.programId = program.id;
+ this.read_only = program.readonly;
+ this.visibility = program.visibility;
+ this.can_admin = program.can_admin;
+
+ this.prepareWorkspace(program).then((controller: ToolboxController) => {
this.program = program;
this.load_program(controller, program);
resolve();
}).catch(err => {
console.error("Error:", err);
- this.goBack();
+ resolve();
+ this.toastr.error(JSON.stringify(err), "Error loading");
});
});
}));
- this.currentFillingInput = '';
+ }
+
+ ngAfterViewInit() {
+ const elem = (this.drawer as any)._elementRef.nativeElement;
+
+ this.mutationObserver = new MutationObserver(() => {
+ this.notifyResize();
+
+ // HACK: Wait for animations to finish
+ for (let delay = 200; delay < 1000; delay *= 2 ) {
+ setTimeout(() => {
+ this.notifyResize();
+ }, delay);
+ }
+ });
+ this.mutationObserver.observe(elem, { attributes: true, subtree: true });
}
/**
* Check if an DOM element is a Scratch block object.
*/
- is_block(blockCandidate: Element) {
+ is_block(blockCandidate: Element): boolean {
if (blockCandidate.tagName === undefined) {
return false;
}
@@ -125,17 +251,12 @@ export class ProgramDetailComponent implements OnInit {
// Clean the contents of the block
const next = child.getElementsByTagName('next')[0];
- let next_blocks = [];
+ let next_blocks: ChildNode[] = [];
if (next !== undefined) {
this.removeNonExistingBlocks(next, controller);
next_blocks = (Array.from(next.childNodes)
.filter((x: Element) => this.is_block(x)));
-
- if (next_blocks.length == 0) {
- child.removeChild(next);
- continue;
- }
}
const _type = child.getAttribute('type');
@@ -143,50 +264,356 @@ export class ProgramDetailComponent implements OnInit {
if (!controller.isKnownBlock(_type)) {
// If it's not known, pull the next into the top level "function"
if (next !== undefined) {
- next.removeChild(next_blocks[0]);
- dom.insertBefore(next_blocks[0], child);
+ if (next_blocks.length > 0) {
+ next.removeChild(next_blocks[0]);
+ dom.insertBefore(next_blocks[0], child);
+ }
child.removeChild(next);
this.removeNonExistingBlocks(next, controller);
}
// Remove top level
dom.removeChild(child);
- console.debug("To replace:", child, 'with', next);
}
}
}
load_program(controller: ToolboxController, program: ProgramContent) {
- const xml = Blockly.Xml.textToDom(program.orig);
+ let source = program.orig;
+ if (program.checkpoint) {
+ source = program.checkpoint;
+ }
+ const xml = Blockly.Xml.textToDom(source);
this.removeNonExistingBlocks(xml, controller);
(Blockly.Xml as any).clearWorkspaceAndLoadFromXml(xml, this.workspace);
}
+ becomeReady() {
+ this.isReady = true;
+ }
+
+ initializeListeners() {
+ this.initializeEventSynchronization();
+ }
+
+ initializeEventSynchronization() {
+ // Initialize editor event listeners
+ // This is used for collaborative editing.
+
+ if (this.read_only) {
+ this.becomeReady(); // We won't have to wait for the last state to get loaded
+ return;
+ }
+
+ this.eventStream = this.programService.getEventStream(this.program.id);
+ this.blockSynchronizer = new BlockSynchronizer(this.eventStream, this.checkpointProgram.bind(this));
+
+ const onCreation: {[key: string]: boolean} = {};
+ const mirrorEvent = (event: BlocklyEvent) => {
+ if (event instanceof Blockly.Events.Ui) {
+ return; // Don't mirror UI events.
+ }
+
+ if (this.blockSynchronizer.isDuplicated(event)) {
+ return; // Avoid mirroring events received from the net
+ }
+
+ // Convert event to JSON. This could then be transmitted across the net.
+ const json: any = event.toJson() as any;
+
+ // Avoid passing messages about being created outside of this editor
+ if (onCreation[json.blockId]) {
+ console.debug('Skipping sending message to block on creation');
+ return;
+ }
+
+ try {
+ if (this.isReady) {
+ this.eventStream.push({ type: 'blockly_event', value: json, save: true });
+ }
+ }
+ catch (error) {
+ console.log(error);
+ }
+ }
+
+ this.eventSubscription = this.eventStream.subscribe(
+ {
+ next: (ev: ProgramEditorEventValue) => {
+ if (ev.type === 'blockly_event') {
+ const event = Blockly.Events.fromJson(ev.value, this.workspace);
+ if ((event as any).type === 'comment_create'
+ || (event as any).type === 'comment_delete') {
+
+ console.debug("Ignoring changes in comments")
+ return;
+ }
+
+ this.blockSynchronizer.receivedEvent(event as BlocklyEvent);
+ if (ev.value.type === 'create') {
+ onCreation[ev.value.blockId] = true;
+ }
+ else if (ev.value.type === 'endDrag') {
+ delete onCreation[ev.value.blockId];
+ }
+
+ try {
+ event.run(true);
+ }
+ catch(err) {
+ this.toastr.error("Error loading updates");
+ console.log("EV", ev, event);
+ console.error(err);
+ }
+ }
+ else if (ev.type === 'cursor_event') {
+ this.drawPointer(ev.value);
+ }
+ else if (ev.type === 'add_editor') {
+ this.newPointer(ev.value.id);
+ }
+ else if (ev.type === 'remove_editor') {
+ this.deletePointer(ev.value.id);
+ }
+ else if (ev.type === 'ready') {
+ this.becomeReady();
+ }
+ },
+ error: (error: any) => {
+ console.error("Error obtainig editor events:", error);
+ },
+ complete: () => {
+ console.log("Disconnected");
+ this.nonReadyReason = 'disconnected';
+ this.isReady = false;
+ }
+ }
+ );
+
+ const onMouseEvent = ((ev: MouseEvent) => {
+ if (ev.buttons) {
+ return;
+ }
+
+ const disp = ProgramDetailComponent.getEditorPosition(this.workspaceElement);
+
+ const rect = this.workspaceElement.getBoundingClientRect();
+ const cursorInWorkspace = { x: ev.x - rect.left, y: ev.y - rect.top }
+
+ const posInCanvas = {
+ x: (cursorInWorkspace.x - disp.x) / disp.scale,
+ y: (cursorInWorkspace.y - disp.y) / disp.scale,
+ }
+
+ this.eventStream.push({ type: 'cursor_event', value: posInCanvas })
+ });
+
+ this.workspace.addChangeListener(mirrorEvent);
+ this.workspaceElement.onmousemove = onMouseEvent;
+ this.workspaceElement.onmouseup = onMouseEvent;
+ }
+
+ /* Collaborator pointer management */
+ newPointer(id: string): HTMLElement {
+ const cursor = document.createElement('object');
+ cursor.type = 'image/svg+xml';
+ cursor.style.display = 'none';
+ cursor.style.position = 'fixed';
+ cursor.style.height = '2.5ex';
+ cursor.style.color
+ cursor.style.zIndex = '10';
+ cursor.style.pointerEvents = 'none';
+ cursor.data = '/assets/cursor.svg';
+ cursor.onload = () => {
+ // Give the cursor a random color
+ cursor.getSVGDocument().getElementById('cursor').style.fill = `hsl(${Math.random() * 255},50%,50%)`;
+ };
+
+ this.cursorDiv.appendChild(cursor);
+ this.cursorInfo[id] = cursor;
+
+ return cursor;
+ }
+
+ getPointer(id: string): HTMLElement {
+ if (this.cursorInfo[id]) {
+ return this.cursorInfo[id];
+ }
+
+ return this.newPointer(id);
+ }
+
+ deletePointer(id: string) {
+ const cursor = this.cursorInfo[id];
+ if (!cursor) {
+ return;
+ }
+ this.cursorDiv.removeChild(cursor);
+ delete this.cursorInfo[id];
+ }
+
+ drawPointer(pos:{id: string, x : number, y: number}) {
+ const rect = this.workspaceElement.getBoundingClientRect();
+ const disp = ProgramDetailComponent.getEditorPosition(this.workspaceElement);
+ const cursor = this.getPointer(pos.id);
+
+ const posInScreen = {
+ x: pos.x * disp.scale + disp.x + rect.left,
+ y: pos.y * disp.scale + disp.y + rect.top,
+ }
+ cursor.style.left = posInScreen.x + 'px';
+ cursor.style.top = posInScreen.y + 'px';
+
+ let inEditor = false;
+ if (rect.left <= posInScreen.x && rect.right >= posInScreen.x) {
+ if (rect.top <= posInScreen.y && rect.bottom >= posInScreen.y) {
+ inEditor = true;
+ }
+ }
+
+ if (inEditor) {
+ cursor.style.display = 'block';
+ }
+ else {
+ cursor.style.display = 'none';
+ }
+ }
+
+ checkpointProgram() {
+ const xml = Blockly.Xml.workspaceToDom(this.workspace);
+
+ // Remove comments
+ for (const comment of Array.from(xml.getElementsByTagName('COMMENT'))) {
+ comment.parentNode.removeChild(comment);
+ }
+
+ const content = Blockly.Xml.domToPrettyText(xml);
+
+ return this.programService.checkpointProgram(this.program.id, content);
+ }
+
+ static getEditorPosition(workspaceElement: HTMLElement): {x:number, y: number, scale: number} | null {
+
+ const SVG_TRANSFORM_TRANSLATE = 2;
+ const SVG_TRANSFORM_SCALE = 3;
+
+ let reference: HTMLElement | null = workspaceElement.getElementsByClassName('blocklySvg')[0].getElementsByClassName('blocklyBlockCanvas')[0] as HTMLElement;
+
+ // Not dragging, so we can directly use Blockly's canvas as reference
+ if (reference) {
+ const transformations : SVGTransformList = (reference as any).transform.baseVal;
+ let x = 0, y = 0, scale = 1;
+
+ for (let i = 0; i < transformations.numberOfItems; i++) {
+ const t = transformations.getItem(i);
+
+ if (t.type === SVG_TRANSFORM_TRANSLATE) {
+ x = t.matrix.e;
+ y = t.matrix.f;
+ }
+ else if (t.type === SVG_TRANSFORM_SCALE) {
+ scale = t.matrix.a;
+ }
+ }
+
+ return { x, y, scale};
+ }
+
+ // If we have to use the drag surface as refernce this is a bit less clean
+ else {
+ reference = workspaceElement.getElementsByClassName('blocklyWsDragSurface')[0] as HTMLElement;
+
+ if (!reference) {
+ console.error("Could not find reference");
+ return null;
+ }
+
+ // Take transformation from the drag surface
+ const result = /translate3d\((-?\d+)px, *(-?\d+)px, *-?\d+px\)/.exec(reference.style.transform);
+
+ const x = parseInt(result[1]), y = parseInt(result[2]);
+
+ // Take scale from it's inner
+ const canvas = reference.getElementsByClassName('blocklyBlockCanvas')[0] as HTMLElement;
+
+ let scale = 1;
+ const transformations : SVGTransformList = (canvas as any).transform.baseVal;
+
+ for (let i = 0; i < transformations.numberOfItems; i++) {
+ const t = transformations.getItem(i);
+
+ if (t.type === SVG_TRANSFORM_SCALE) {
+ scale = t.matrix.a;
+ }
+ }
+
+ return { x, y, scale };
+ }
+
+ }
+
patch_flyover_area_deletion() {
- const orig = (Blockly.WorkspaceSvg.prototype as any).recordDeleteAreas_;
+ if ((Blockly.WorkspaceSvg.prototype as any).recordDeleteAreas_.orig) {
+ return;
+ }
+
+ this.patchedFunctions.recordDeleteAreas = (Blockly.WorkspaceSvg.prototype as any).recordDeleteAreas_;
(Blockly.WorkspaceSvg.prototype as any).recordDeleteAreas_ = () => {
- orig.bind(this.workspace)();
+ this.patchedFunctions.recordDeleteAreas.bind(this.workspace)();
// Disable toolbox delete area use trashcan for deletion
const tbDelArea = (this.workspace as any).deleteAreaToolbox_;
- tbDelArea.left = -100;
- tbDelArea.top = -100;
- tbDelArea.width = 0;
- tbDelArea.height = 0;
+ if (tbDelArea) {
+ tbDelArea.left = -100;
+ tbDelArea.top = -100;
+ tbDelArea.width = 0;
+ tbDelArea.height = 0;
+ }
}
+ (Blockly.WorkspaceSvg.prototype as any).recordDeleteAreas_.orig = this.patchedFunctions.recordDeleteAreas;
}
- prepareWorkspace(): Promise {
+ async reloadToolbox(): Promise {
+ const toolbox = new Toolbox(
+ this.program,
+ this.assetService,
+ this.monitorService,
+ this.customBlockService,
+ this.dialog,
+ this.templateService,
+ this.serviceService,
+ this.customSignalService,
+ this.connectionService,
+ this.sessionService,
+ this.environmentService,
+ this.read_only,
+ this.toolboxController,
+ );
+
+ const [toolboxXml, registrations, _controller] = await toolbox.inject();
+
+ this.toolboxController.setToolbox(toolboxXml);
+ this.toolboxController.update();
+ this.performToolboxRegistrations(registrations);
+ }
+
+ prepareWorkspace(program: ProgramContent): Promise {
// For consistency and because it affects the positioning of the bottom drawer.
this.reset_header_scroll();
return new Toolbox(
+ program,
+ this.assetService,
this.monitorService,
this.customBlockService,
this.dialog,
this.templateService,
this.serviceService,
this.customSignalService,
+ this.connectionService,
+ this.sessionService,
+ this.environmentService,
+ this.read_only,
)
.inject()
.then(([toolbox, registrations, controller]) => {
@@ -196,17 +623,24 @@ export class ProgramDetailComponent implements OnInit {
});
}
- injectWorkspace(toolbox: HTMLElement, registrations: Function[], controller: ToolboxController) {
+ injectWorkspace(toolbox: HTMLElement, registrations: ToolboxRegistration[], controller: ToolboxController) {
// Avoid initializing it twice
- if (this.workspace !== undefined) {
+ if (this.workspace) {
return;
}
+ this.cursorDiv = document.getElementById('program-cursors');
+
+ this.workspaceElement = document.getElementById('workspace');
+ const programHeaderElement = document.getElementById('program-header');
- const workspaceElement = document.getElementById('workspace');
- this.hide_workspace(workspaceElement);
- window.onresize = () => this.calculate_size(workspaceElement);
- this.calculate_size(workspaceElement);
+ this.hide_workspace(this.workspaceElement);
+ this.browser.window.onresize = (() => {
+ this.calculate_size(this.workspaceElement);
+ this.calculate_program_header_size(programHeaderElement);
+ });
+ this.calculate_size(this.workspaceElement);
+ this.calculate_program_header_size(programHeaderElement);
const rtl = false;
const soundsEnabled = false;
let toolbarLayout = { horizontal: false, position: 'start' };
@@ -219,7 +653,7 @@ export class ProgramDetailComponent implements OnInit {
disable: false,
collapse: true,
media: '../assets/scratch-media/',
- readOnly: false,
+ readOnly: this.read_only,
trashcan: true,
rtl: rtl,
scrollbars: true,
@@ -239,15 +673,15 @@ export class ProgramDetailComponent implements OnInit {
fieldShadow: 'rgba(255, 255, 255, 0.3)',
dragShadowOpacity: 0.6
}
- });
-
- for (const reg of registrations) {
- reg(this.workspace);
- }
+ }) as Blockly.WorkspaceSvg;
+ this.performToolboxRegistrations(registrations);
this.toolboxController = controller;
controller.setWorkspace(this.workspace);
- controller.update();
+
+ if (!this.read_only) {
+ controller.update(); // Setting the toolbox when it can't be shown would generate an error
+ }
// HACK:
// Defer a hide action, this is to compsensate for (what feels like)
@@ -260,7 +694,11 @@ export class ProgramDetailComponent implements OnInit {
// sidebar would be. To compensate for this we set the visibility
// of the workspace to 'hidden' until the process has finished.
setTimeout(() => {
- this.show_workspace(workspaceElement);
+ this.show_workspace(this.workspaceElement);
+
+ // Listeners have to be started after the whole initialization is
+ // done to avoid capturing the events happening during the start-up.
+ this.initializeListeners();
if (this.portraitMode || this.smallScreen){
this.hide_block_menu();
@@ -271,12 +709,23 @@ export class ProgramDetailComponent implements OnInit {
const dragContainer = document.querySelector('.blocklyBlockDragSurface>g');
dragContainer.setAttribute('filter', 'drop-shadow(0 0 5px rgba(0,0,0,0.5))');
+
+ if (this.portraitMode || this.smallScreen) {
+ this.patch_flyover_area_deletion();
+ }
}, 0);
this.patch_blockly();
+ }
- if (this.portraitMode || this.smallScreen) {
- this.patch_flyover_area_deletion();
+ performToolboxRegistrations(registrations: ToolboxRegistration[]) {
+ const editorController: EditorController = {
+ reloadToolbox: () => {
+ this.reloadToolbox();
+ }
+ };
+ for (const reg of registrations) {
+ reg(this.workspace, editorController, this.ngZone);
}
}
@@ -314,9 +763,19 @@ export class ProgramDetailComponent implements OnInit {
const header_pos = this.get_position(header);
const header_end = header_pos.y + header.clientHeight;
- const window_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+ const window_height = Math.max(document.documentElement.clientHeight, this.browser.window.innerHeight || 0);
- workspace.style.height = (window_height - header_end) + 'px';
+ workspace.style.height = (window_height - header_end - 1) + 'px';
+ }
+
+ calculate_program_header_size(programHeader: HTMLElement) {
+ const isScrollable = programHeader.clientHeight < programHeader.scrollHeight;
+ if (!isScrollable) {
+ programHeader.classList.remove('is-scrollable');
+ }
+ else {
+ programHeader.classList.add('is-scrollable');
+ }
}
reset_zoom() {
@@ -371,7 +830,7 @@ export class ProgramDetailComponent implements OnInit {
(category as any).ontouchend = move_and_show;
}
- this.workspace.addChangeListener((event) => {
+ this.workspace.addChangeListener((event: Blockly.Events.Change__Class | Blockly.Events.Create__Class | Blockly.Events.Delete__Class | Blockly.Events.Move__Class) => {
if (event.type === Blockly.Events.BLOCK_CREATE) {
component.hide_block_menu();
}
@@ -379,11 +838,15 @@ export class ProgramDetailComponent implements OnInit {
}
hide_block_menu() {
- (this.workspace as any).getFlyout().setVisible(false);
+ if ((this.workspace as any).getFlyout()) {
+ (this.workspace as any).getFlyout().setVisible(false);
+ }
}
show_block_menu() {
- (this.workspace as any).getFlyout().setVisible(true);
+ if ((this.workspace as any).getFlyout()) {
+ (this.workspace as any).getFlyout().setVisible(true);
+ }
}
show_workspace(workspace: HTMLElement) {
@@ -391,7 +854,7 @@ export class ProgramDetailComponent implements OnInit {
// Elements might have moved around.
// We trigger a resize to notify SVG elements.
- window.dispatchEvent(new Event('resize'));
+ this.browser.window.dispatchEvent(new Event('resize'));
}
hide_workspace(workspace: HTMLElement) {
@@ -399,19 +862,154 @@ export class ProgramDetailComponent implements OnInit {
}
goBack(): boolean {
- this.router.navigate(['/dashboard'])
+ this.dispose();
+ this._location.back();
return false;
}
- sendProgram() {
+ force_reload() {
+ location = location;
+ }
+
+ dispose() {
+ try {
+ if (this.eventSubscription) {
+ this.eventSubscription.unsubscribe();
+ this.eventSubscription = null;
+ }
+
+ if (this.sidepanel) {
+ this.sidepanel.dispose();
+ }
+
+ if (this.mutationObserver) {
+ this.mutationObserver.disconnect();
+ this.mutationObserver = null;
+ }
+
+ if (this.blockSynchronizer) {
+ this.blockSynchronizer.close();
+ this.blockSynchronizer = null;
+ }
+
+ this.eventStream = null;
+ } catch(error) {
+ console.error("Error closing event stream:", error);
+ }
+
+ try {
+ this.workspace.dispose();
+ this.workspace = null;
+ } catch(error) {
+ console.error("Error disposing workspace:", error);
+ }
+
+ // Restore the patched function, to cleaup the state.
+ try {
+ if (this.patchedFunctions.recordDeleteAreas) {
+ (Blockly.WorkspaceSvg.prototype as any).recordDeleteAreas_ = this.patchedFunctions.recordDeleteAreas;
+ this.patchedFunctions.recordDeleteAreas = null;
+ }
+ } catch (error) {
+ console.error("Error restoring recordDeleteAreas:", error);
+ }
+ }
+
+ async sendProgram(): Promise {
+ // Get workspace
+ const xml = Blockly.Xml.workspaceToDom(this.workspace);
+
+ // Remove comments
+ for (const comment of Array.from(xml.getElementsByTagName('COMMENT'))) {
+ comment.parentNode.removeChild(comment);
+ }
+
+ // Serialize result
+ let program;
+ try {
+ const serializer = new ScratchProgramSerializer(this.toolboxController);
+ const serialized = serializer.ToJson(xml);
+ program = new ScratchProgram(this.program,
+ serialized.parsed,
+ serialized.orig);
+ }
+ catch (error) {
+ this.toastr.error(error, 'Invalid program', {
+ closeButton: true,
+ progressBar: true,
+ });
+
+ console.error(error);
+ return;
+ }
+
+ // Send update
+ const button = document.getElementById('program-start-button');
+ if (button){
+ button.classList.add('started');
+ button.classList.remove('completed');
+ }
+
+ const result = await this.programService.updateProgram(program);
+
+ if (button){
+ button.classList.remove('started');
+ button.classList.add('completed');
+ }
+
+ if (result) {
+ this.toastr.success('Upload complete', '', {
+ closeButton: true,
+ progressBar: true,
+ });
+ }
+ else {
+ this.toastr.error('Error on upload', '', {
+ closeButton: true,
+ progressBar: true,
+ });
+ }
+
+ return result;
+ }
+
+ cloneProgram() {
+ const programData: CloneProgramDialogComponentData = {
+ name: this.program.name,
+ program: JSON.parse(JSON.stringify(this.program)),
+ };
+
+ // Get workspace
const xml = Blockly.Xml.workspaceToDom(this.workspace);
+ // Remove comments
+ for (const comment of Array.from(xml.getElementsByTagName('COMMENT'))) {
+ comment.parentNode.removeChild(comment);
+ }
+
+ // Serialize result
const serializer = new ScratchProgramSerializer(this.toolboxController);
const serialized = serializer.ToJson(xml);
- const program = new ScratchProgram(this.program,
- serialized.parsed,
- serialized.orig);
- this.programService.updateProgram(this.programUserName, program);
+
+ programData.program.orig = serialized.orig;
+ if (((!programData.program.parsed) || (programData.program.parsed === 'undefined'))) {
+ programData.program.parsed = { blocks: [], variables: [] };
+ }
+
+ const dialogRef = this.dialog.open(CloneProgramDialogComponent, {
+ data: programData
+ });
+
+ dialogRef.afterClosed().subscribe(async (result) => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const program_id = result.program_id;
+ this.dispose();
+ this.router.navigate([`/programs/${program_id}/scratch`], { replaceUrl: false });
+ });
}
renameProgram() {
@@ -421,13 +1019,14 @@ export class ProgramDetailComponent implements OnInit {
data: programData
});
- dialogRef.afterClosed().subscribe(result => {
+ dialogRef.afterClosed().subscribe(async (result) => {
if (!result) {
console.log("Cancelled");
return;
}
- const rename = (this.programService.renameProgram(this.programUserName, this.program, programData.name)
+ await this.sendProgram();
+ const rename = (this.programService.renameProgram(this.program, programData.name)
.catch(() => { return false; })
.then(success => {
if (!success) {
@@ -435,21 +1034,42 @@ export class ProgramDetailComponent implements OnInit {
}
this.program.name = programData.name;
- const path = document.location.pathname.split("/");
- path[path.length - 1] = encodeURIComponent(this.program.name);
-
- this.router.navigate([path.join("/")]);
- console.log("Changing name to", this.program);
}));
progbar.track(rename);
});
}
+
+ changeVisibility() {
+ const data = {
+ name: this.program.name,
+ visibility: this.visibility
+ };
+
+ const dialogRef = this.dialog.open(ChangeProgramVisilibityDialog, {
+ data: data
+ });
+
+
+ dialogRef.afterClosed().subscribe((result: { visibility: VisibilityEnum } | null) => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const vis = result.visibility;
+ this.programService.updateProgramVisibility( this.program.id, { visibility: vis } ).then(() => {
+ this.visibility = vis;
+ });
+
+ });
+ }
+
setProgramTags() {
const data = {
program: this.program,
user_id: this.program.owner,
- tags: [], // Initially empty, to be updated by dialog
+ tags: [] as string[], // Initially empty, to be updated by dialog
};
const dialogRef = this.dialog.open(SetProgramTagsDialogComponent, {
@@ -462,7 +1082,7 @@ export class ProgramDetailComponent implements OnInit {
return;
}
- const update = (this.programService.updateProgramTags(this.program.owner, this.program.id, data.tags)
+ const update = (this.programService.updateProgramTags(this.program.id, data.tags)
.then((success) => {
if (!success) {
return;
@@ -495,7 +1115,7 @@ export class ProgramDetailComponent implements OnInit {
return;
}
- const stopThreads = (this.programService.stopThreadsProgram(this.program.owner, this.program.id)
+ const stopThreads = (this.programService.stopThreadsProgram(this.program.id)
.catch(() => { return false; })
.then(success => {
if (!success) {
@@ -509,8 +1129,160 @@ export class ProgramDetailComponent implements OnInit {
});
}
+ async downloadScreenshot() {
+ // See: https://stackoverflow.com/q/23218174
+ const canvas = this.workspaceElement.getElementsByTagNameNS(SvgNS, 'svg')[0].cloneNode(true) as SVGElement;
+ const name = this.program.name.replace(/[^a-zA-Z0-9]/g, '-').replace(/--+/g, '-') + '.svg';
+
+ // Pull style file
+ const styles = document.createElementNS(SvgNS, 'style');
+ const styleSheet = Array.from((Blockly.Css.styleSheet_ as any).cssRules).map((r: any) => r.cssText).join('\n');
+
+ styles.innerHTML = ('/* */<');
+
+ canvas.insertBefore(styles, canvas.firstChild);
+
+ // Make image locations absolute
+ for (const image of Array.from(canvas.getElementsByTagNameNS(SvgNS, 'image')) as SVGImageElement[]) {
+ let baseServerPath = document.location.origin;
+
+ if (!image.href) {
+ continue;
+ }
+
+ let stripped = false;
+ while (image.href.baseVal.startsWith('../')) {
+ image.href.baseVal = image.href.baseVal.substring(3);
+ stripped = true;
+ }
+
+ if (stripped) {
+ image.href.baseVal = '/' + image.href.baseVal;
+ }
+
+ if (image.href.baseVal.startsWith('/')) {
+ // Image relative to current domain
+ image.href.baseVal = baseServerPath + image.href.baseVal;
+ }
+ }
+
+ // Remove controls
+ for (const cls of ['blocklyMainBackground', 'blocklyTrash', 'blocklyBubbleCanvas', 'blocklyScrollbarBackground', 'blocklyZoom']) {
+ for (const e of Array.from(canvas.getElementsByClassName(cls))) {
+ e.parentNode.removeChild(e);
+ }
+ }
+
+ // Adjust viewport
+ this.adjustCanvasViewport(canvas);
+
+ // Build XML blob
+ const serializer = new XMLSerializer();
+
+ let source = serializer.serializeToString(canvas);
+
+ //add name spaces.
+ if(!source.match(/^]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
+ source = source.replace(/^]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
+ source = source.replace(/^ {
+
+ const reposition = { x: 0, y: 0};
+ let elem = block.svgGroup_;
+
+ const SVG_TRANSFORM_TRANSLATE = 2;
+
+ while (elem !== topLevel) {
+ if (elem.transform) {
+ for (let i = 0; i < elem.transform.baseVal.numberOfItems; i++) {
+ const t = elem.transform.baseVal.getItem(i);
+ if (t.type === SVG_TRANSFORM_TRANSLATE) {
+ reposition.x += t.matrix.e;
+ reposition.y += t.matrix.f;
+ }
+ }
+ }
+ elem = elem.parentElement as any as SVGGElement;
+ }
+
+ return {
+ left: reposition.x,
+ top: reposition.y,
+ right: reposition.x + block.width,
+ bottom: reposition.y + block.height,
+ }
+ }
+
+ const rect = getRect(blocks[0]);
+
+ for (const block of blocks) {
+ const blockArea = getRect(block);
+
+
+ if (blockArea.left < rect.left) {
+ rect.left = blockArea.left;
+ }
+ if (blockArea.top < rect.top) {
+ rect.top = blockArea.top;
+ }
+ if (blockArea.right > rect.right) {
+ rect.right = blockArea.right;
+ }
+ if (blockArea.bottom > rect.bottom) {
+ rect.bottom = blockArea.bottom;
+ }
+ }
+
+ const width = rect.right - rect.left;
+ const height = rect.bottom - rect.top;
+
+ canvas.getElementsByClassName('blocklyBlockCanvas')[0].removeAttribute('transform');
+
+ canvas.setAttribute('viewBox',
+ `${rect.left - PRINT_MARGIN} ${rect.top - PRINT_MARGIN} ${width + PRINT_MARGIN} ${height + PRINT_MARGIN}`);
+ canvas.removeAttribute('width');
+ canvas.removeAttribute('height');
+ }
+
deleteProgram() {
- const programData = { name: this.program.name };
+ const programData = { name: this.programName || '*error getting program name*' };
const dialogRef = this.dialog.open(DeleteProgramDialogComponent, {
data: programData
@@ -522,7 +1294,7 @@ export class ProgramDetailComponent implements OnInit {
return;
}
- const deletion = (this.programService.deleteProgram(this.programUserName, this.program)
+ const deletion = (this.programService.deleteProgramById(this.programId)
.catch(() => { return false; })
.then(success => {
if (!success) {
@@ -534,4 +1306,49 @@ export class ProgramDetailComponent implements OnInit {
progbar.track(deletion);
});
}
+
+ toggleLogsPanel() {
+ if (this.drawer.opened && this.sidepanel.drawerType === 'logs') {
+ this.closeDrawer();
+ }
+ else {
+ this.sidepanel.setDrawerType('logs');
+ if (!this.drawer.opened) {
+ this.openDrawer();
+ }
+ }
+ }
+
+ toggleVariablesPanel() {
+ if (this.drawer.opened && this.sidepanel.drawerType === 'variables') {
+ this.closeDrawer();
+ }
+ else {
+ this.sidepanel.setDrawerType('variables');
+ if (!this.drawer.opened) {
+ this.openDrawer();
+ }
+ }
+ }
+
+ notifyResize() {
+ this.browser.window.dispatchEvent(new Event('resize'));
+ }
+
+ openDrawer() {
+ return this.drawer.open();
+ }
+
+ closeDrawer = () => {
+ return this.drawer.close();
+ }
+
+ onToggleMark = (blockId: string, activate: boolean, message: string) => {
+ if (activate) {
+ this.workspace.getBlockById(blockId).setCommentText(message);
+ }
+ else {
+ this.workspace.getBlockById(blockId).setCommentText(null);
+ }
+ }
}
diff --git a/frontend/src/app/program-editors/editor-controller.ts b/frontend/src/app/program-editors/editor-controller.ts
new file mode 100644
index 00000000..1bcd402a
--- /dev/null
+++ b/frontend/src/app/program-editors/editor-controller.ts
@@ -0,0 +1,3 @@
+export interface EditorController {
+ reloadToolbox: () => void,
+};
diff --git a/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-compiler.ts b/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-compiler.ts
new file mode 100644
index 00000000..a550d151
--- /dev/null
+++ b/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-compiler.ts
@@ -0,0 +1,449 @@
+import { ResolvedCustomBlock } from '../../custom_block';
+import { get_block_from_base_toolbox } from '../../flow-editor/base_toolbox_description';
+import { InputPortDefinition, MessageType, OutputPortDefinition } from '../../flow-editor/flow_block';
+import { AtomicFlowBlockOperationType, AtomicFlowBlockOptions, BLOCK_TYPE as ATOMIC_BLOCK_TYPE, isAtomicFlowBlockData } from '../../flow-editor/atomic_flow_block';
+import { BLOCK_TYPE as VALUE_BLOCK_TYPE } from '../../flow-editor/direct_value';
+import { CompiledFlowGraph, FlowGraph, FlowGraphNode } from "../../flow-editor/flow_graph";
+import { compile } from "../../flow-editor/graph_analysis";
+import { uuidv4 } from '../../flow-editor/utils';
+import { ISpreadsheetToolbox } from "./spreadsheet-toolbox";
+import { reverse_index_connections, EdgeIndex } from '../../flow-editor/graph_utils';
+import { isUiFlowBlockData } from '../../flow-editor/ui-blocks/ui_flow_block';
+import { find_upstream } from '../../flow-editor/graph_transformations';
+import { get_block_inputs, get_block_outputs, get_block_message } from '../../flow-editor/toolbox_builder';
+
+export function colName(index: number) {
+ const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+ index -= 1;
+ if (letters[index]) {
+ return letters[index];
+ }
+ else {
+ return letters[index / letters.length] + letters[index % letters.length];
+ }
+}
+
+type SpreadsheetConstant = {
+ type: 'constant',
+ value: any,
+};
+
+type SpreadsheetCall = {
+ type: 'call',
+ func_name: string,
+ arguments: SpreadsheetOperation[],
+}
+
+type SpreadsheetCellRef = {
+ type: 'cell-ref',
+ value: string,
+}
+
+type SpreadsheetOperation = SpreadsheetConstant | SpreadsheetCall | SpreadsheetCellRef;
+
+const INFIX_CHARACTERS = [ '+' ];
+const STRING_CHARS = [ "'", '"' ];
+
+// See: https://regex101.com/r/1cZtZG/5
+const TOKENIZE_REGEX = new RegExp(
+ /^((?(?[\da-z_]+)\((?.*)\))|(?"([^"]|\")*")|(?(\s*))|(?\+)|(?[A-Z]{1,2}\d+)|(?-?\d+))$/
+);
+
+// See: https://regex101.com/r/3aGdXJ/1/
+const ARGUMENT_REGEX = new RegExp(
+ /^(?(?[\da-z_]+)(?\((.*)\)))|(?"([^"]|\")*")|(?\+)|(?[A-Z]{1,2}\d+)|(?\d+)(?.*)/
+);
+
+
+
+function parse_op(data: string): SpreadsheetOperation {
+ const tokens = parse_tokens(data);
+ if (tokens.length !== 1) {
+ throw Error(`Unexpected number of tokens (expected 1, found ${tokens.length}): ${data}`);
+ }
+ return tokens[0];
+}
+
+function parse_tokens(data: string): SpreadsheetOperation[] {
+ data = data.trim();
+ const operations = [] as SpreadsheetOperation[];
+ let tokens_in_arg = [] as SpreadsheetOperation[];
+
+ let in_string_char = null;
+ let escaped = false;
+ let current_token = [] as string[];
+ let next_on = tokens_in_arg;
+ let next_on_swap_pos = 0;
+ let arg_start_pos = 0;
+ let m;
+ for (let idx = 0; idx < data.length; idx++){
+ if (data[idx] === ' ') {
+ // Ignore
+ }
+ else if (data[idx] === ',') {
+ if (next_on !== tokens_in_arg) {
+ throw Error(`Uncomplete infix operation: ${data.substr(next_on_swap_pos)}`);
+ }
+ if (tokens_in_arg.length != 1) {
+ throw Error(`Unexpected number of tokens in arg (expected 1, found ${tokens_in_arg.length}): ${data.substr(arg_start_pos)}`);
+ }
+ operations.push(tokens_in_arg[0]);
+ tokens_in_arg = [];
+ next_on = tokens_in_arg;
+
+ arg_start_pos = idx + 1;
+ }
+ else if (m = data.substr(idx).match(/^(?[a-zA-Z0-9_]+)\(/)) {
+ // Function call
+ const name = m.groups["name"];
+
+ const call_start_idx = idx;
+ const arg_start_idx = idx + name.length + 1;
+ idx = arg_start_idx - 1;
+ let parens_count = 0;
+
+ // Find the end of the function call
+ for(; idx < data.length; idx++) {
+ if (in_string_char) {
+ if (escaped) {
+ escaped = false;
+ }
+ else if (data[idx] === '\\') {
+ escaped = true;
+ }
+ else if (data[idx] === in_string_char) {
+ in_string_char = null;
+ }
+ }
+ else if (STRING_CHARS.indexOf(data[idx]) >= 0) {
+ in_string_char = data[idx];
+ }
+ else if (data[idx] === '(') {
+ parens_count++;
+ }
+ else if (data[idx] === ')') {
+ parens_count--;
+ if (parens_count === 0) {
+ break;
+ }
+ }
+ }
+
+ if (idx === data.length){
+ throw Error(`Uncomplete call: ${data.substr(call_start_idx)}`);
+ }
+
+ const args = arg_start_idx < idx
+ ? parse_tokens(data.substring(arg_start_idx, idx))
+ : [];
+
+ next_on.push({
+ type: 'call',
+ func_name: name,
+ arguments: args,
+ });
+ next_on = tokens_in_arg;
+ }
+ else if (STRING_CHARS.indexOf(data[idx]) >= 0) {
+ // Parse string
+ in_string_char = data[idx];
+ while (in_string_char) {
+ idx++;
+ if (escaped) {
+ current_token.push(escape_char(data[idx]));
+ escaped = false;
+ }
+ else if (data[idx] === '\\') {
+ escaped = true;
+ }
+ else if (data[idx] === in_string_char) {
+ next_on.push({
+ type: 'constant',
+ value: current_token.join(''),
+ });
+ next_on = tokens_in_arg;
+ current_token = [];
+ in_string_char = null;
+ }
+ else {
+ current_token.push(data[idx]);
+ }
+ }
+ }
+ else if (m = data.substr(idx).match(/^[A-Z]{1,2}\d+/)) {
+ let token = m[0];
+ next_on.push({
+ type: 'cell-ref',
+ value: token,
+ });
+ next_on = tokens_in_arg;
+ idx += token.length - 1;
+ }
+ else if (m = data.substr(idx).match(/^\d+/)) {
+ let token = m[0];
+ next_on.push({
+ type: 'constant',
+ value: parseFloat(token),
+ });
+ next_on = tokens_in_arg;
+ idx += token.length - 1;
+ }
+ else if (data[idx] === '+') {
+ // Note that this does not take into account
+ const left = tokens_in_arg.pop();
+ const infix_op: SpreadsheetOperation = {
+ type: 'call',
+ func_name: get_infix_operation(data[idx]),
+ arguments: [
+ left,
+ ]
+ };
+ next_on.push(infix_op);
+ next_on = infix_op.arguments;
+ next_on_swap_pos = idx;
+ }
+ else {
+ throw Error(`Error parsing: [${data.substr(0, idx)}] → [${data.substr(idx)}]`);
+ }
+ }
+
+ if (next_on !== tokens_in_arg) {
+ throw Error(`Uncomplete infix operation: ${data.substr(next_on_swap_pos)}`);
+ }
+ if (tokens_in_arg.length != 1) {
+ throw Error(`Unexpected number of tokens in arg (expected 1, found ${tokens_in_arg.length}): [${data.substr(0,arg_start_pos)}] → [${data.substr(arg_start_pos)}]`);
+ }
+ operations.push(tokens_in_arg[0]);
+
+ return operations;
+}
+
+function escape_char(char: string): string {
+ const escape_mapping: {[key: string]: string} = {
+ '"': '"',
+ "'": "'",
+ "n": '\n',
+ "r": '\r',
+ "\\": '\\',
+ };
+
+ return escape_mapping[char]
+}
+
+function get_infix_operation(char: string): string {
+ const mapping: {[key: string]: string} = {
+ '+': 'operator_add',
+ };
+
+ return mapping[char]
+}
+
+function parse_cell(data: string): SpreadsheetOperation {
+ data = data.trim();
+ if (!data.startsWith('=')) {
+ return {
+ type: 'constant',
+ value: data
+ }
+ }
+
+ return parse_op(data.substr(1));
+}
+
+
+export function build_graph(orig: {[key: string]: string}, toolbox: ISpreadsheetToolbox): FlowGraph {
+ const g: FlowGraph = { nodes: {}, edges: [] };
+
+ let deferred_links: (() => void)[] = [];
+ for (const id of Object.keys(orig)) {
+ const data = orig[id];
+ const op = parse_cell(data);
+
+ deferred_links = deferred_links.concat(add_op_to_graph(op, toolbox, g, id));
+ }
+
+ for (const deferred of deferred_links) {
+ deferred();
+ }
+
+ for (const id of Object.keys(orig)) {
+ const rev_conn_index = reverse_index_connections(g);
+ wire_pulse(id, g, rev_conn_index);
+ }
+
+ return g;
+}
+
+function wire_pulse(id: string, g: FlowGraph, rev_conn_index: EdgeIndex) {
+ const target = g.nodes[id];
+ if (isAtomicFlowBlockData(target.data)) {
+ if (target.data.value.options.type === 'getter') {
+ return;
+ }
+ }
+ else if (isUiFlowBlockData(target.data)) {
+ throw Error(`Unexpected UI block in spreadsheet`);
+ }
+ else {
+ return;
+ }
+
+ const upstream = find_upstream(g, id, rev_conn_index,
+ (_node_id: string, node: FlowGraphNode) => {
+ if (isAtomicFlowBlockData(node.data)) {
+ if (node.data.value.options.type !== 'getter') {
+ return 'capture';
+ }
+ else {
+ return 'continue';
+ }
+ }
+ else if (isUiFlowBlockData(node.data)) {
+ throw Error(`Unexpected UI block in spreadsheet`);
+ }
+
+ return 'stop'; // Ignore values and enums
+ });
+ for (const node of upstream) {
+ g.edges.push({
+ from: {
+ id: node,
+ output_index: 0,
+ },
+ to: {
+ id: id,
+ input_index: 0,
+ }
+ });
+ }
+}
+
+function add_op_to_graph(op: SpreadsheetOperation, toolbox: ISpreadsheetToolbox, g: FlowGraph, id: string ): (() => void)[] {
+ if (op.type === 'constant') {
+ g.nodes[id] = {
+ data: {
+ type: VALUE_BLOCK_TYPE,
+ value: {
+ value: op.value,
+ }
+ }
+ }
+ return [];
+ }
+ else if (op.type === 'cell-ref') {
+ throw Error("CELL-REF not implemented as operation");
+ }
+
+ const call = toolbox.blockMap[op.func_name];
+ let options: AtomicFlowBlockOptions;
+
+ if (call) {
+ const block = call.block;
+
+ const block_type = block.block_type as AtomicFlowBlockOperationType;
+
+ const pulseOutputs = [] as OutputPortDefinition[];
+ const pulseInputs = [] as InputPortDefinition[];
+
+ if (block_type === 'operation' || block_type === 'trigger') {
+ pulseOutputs.push({
+ type: 'pulse',
+ })
+ }
+
+ if (block_type === 'operation') {
+ pulseInputs.push({
+ type: 'pulse',
+ })
+ }
+
+ const [message, _translationTable] = get_block_message(block);
+
+ options = {
+ type: block_type,
+ block_function: block.id,
+ message: message,
+ inputs: pulseInputs.concat(get_block_inputs(block)),
+ outputs: pulseOutputs.concat(get_block_outputs(block)),
+ } as AtomicFlowBlockOptions;
+ }
+ else {
+ options = get_block_from_base_toolbox(op.func_name);
+ }
+
+ const block_type = options.type;
+
+ g.nodes[id] = {
+ data: {
+ type: ATOMIC_BLOCK_TYPE,
+ value: {
+ options: options,
+ slots: {},
+ synthetic_input_count: 0,
+ synthetic_output_count: 0,
+ }
+ }
+ }
+
+ let idx = -1;
+ if (block_type === 'operation') {
+ idx++; // First input is pulse
+ }
+
+ let deferred_links: (() => void)[] = [];
+ for (const arg of op.arguments) {
+ idx++; // First argument is index: 0
+
+ if (arg.type === 'cell-ref') {
+ // Cells are referenced directly, to avoid unnecessary intermediate steps
+
+ // These links might need information not yet present on the graph,
+ // so their addition is deferred. Keep original reference for `idx` and `arg` as they
+ // change on later iterations.
+ const def_idx = idx;
+ const def_arg = arg;
+ deferred_links.push(() => {
+ const out_data = g.nodes[def_arg.value].data;
+ let out_port_idx = 0;
+ if (isAtomicFlowBlockData(out_data)) {
+ if (out_data.value.options.type !== 'getter') {
+ out_port_idx++; // Use the second output of the trigger/operation
+ }
+ }
+
+ g.edges.push({
+ from: {
+ id: def_arg.value,
+ output_index: out_port_idx,
+ },
+ to: {
+ id: id,
+ input_index: def_idx,
+ }
+ });
+ });
+ continue;
+ }
+
+ const arg_id = uuidv4();
+ deferred_links = deferred_links.concat(add_op_to_graph(arg, toolbox, g, arg_id));
+ g.edges.push({
+ from: {
+ id: arg_id,
+ output_index: 0,
+ },
+ to: {
+ id: id,
+ input_index: idx,
+ }
+ });
+ }
+
+ return deferred_links;
+}
+
+export function compile_spreadsheet(orig: {[key: string]: string}, toolbox: ISpreadsheetToolbox): CompiledFlowGraph[] {
+ const graph = build_graph(orig, toolbox);
+
+ return compile(graph);
+}
diff --git a/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-editor.component.html b/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-editor.component.html
new file mode 100644
index 00000000..1374bd25
--- /dev/null
+++ b/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-editor.component.html
@@ -0,0 +1,198 @@
+
+
+
+
+
+
+
+
+
+ {{ cat.name }}
+
+
+ {{ block.message }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ _colName(j) }}
+
+
+
+
+
+
+
+
+ {{ i }}
+
+
+ {{ cellValues[_colName(j) + i] }}
+
+
+
+
+
+
+
+
+
+ ;
+
+ program: ProgramContent;
+ portraitMode: boolean;
+ smallScreen: boolean;
+ eventStream: Synchronizer;
+ connectionLost: boolean;
+
+ read_only: boolean = true;
+ can_admin: boolean = false;
+
+ // State
+ cellValues: {[key:string]: string} = {};
+ private cursorDiv: HTMLElement;
+ private cursorInfo: {[key: string]: HTMLElement};
+ activeCells: HTMLTableDataCellElement[] = [];
+ current: HTMLTableDataCellElement;
+
+ // HACK: Prevent the MatMenu import for being removed
+ private _pinRequiredMatMenuLibrary: MatMenu;
+ eventSubscription: Unsubscribable | null;
+ mutationObserver: MutationObserver | null;
+ visibility: VisibilityEnum;
+ toolbox: SpreadsheetToolbox;
+
+ // Tools for template
+ readonly _colName = colName;
+
+
+ constructor(
+ private browser: BrowserService,
+ private programService: ProgramService,
+ private customBlockService: CustomBlockService,
+ private route: ActivatedRoute,
+ private router: Router,
+ private _location: Location,
+ private serviceService: ServiceService,
+ private notification: MatSnackBar,
+ private dialog: MatDialog,
+ private connectionService: ConnectionService,
+ private sessionService: SessionService,
+ private environmentService: EnvironmentService,
+ private toastr: ToastrService,
+
+ @Inject(PLATFORM_ID) private platformId: Object
+ ) {
+ this.cursorInfo = {};
+
+ if (isPlatformServer(this.platformId)) {
+ // This cannot be rendered on server, so halt it's load
+ return;
+ }
+ }
+
+ ngOnInit(): void {
+ this.environment = environment;
+
+ if (isPlatformServer(this.platformId)) {
+ // This cannot be rendered on server, so halt it's load
+ return;
+ }
+
+ if (this.browser.window && (this.browser.window.innerWidth < this.browser.window.innerHeight)) {
+ this.portraitMode = true;
+ } else {
+ this.portraitMode = false;
+ }
+ this.smallScreen = this.browser.window.innerWidth < 750;
+
+ progbar.track(new Promise(async (resolve, reject) => {
+
+ this.session = await this.sessionService.getSession();
+
+ this.route.params.pipe(
+ switchMap((params: Params) => {
+ const user = params['user_id'];
+ if (user) {
+ const programName = params['program_id'];
+
+ return this.programService.getProgram(user, programName).catch(err => {
+ if (!this.session.active) {
+ this.router.navigate(['/login'], {replaceUrl:true});
+ reject();
+ this.toastr.error(err.message, "Error loading");
+ throw Error("Error loading");
+ }
+ else {
+ console.error("Error:", err);
+ this.toastr.error(err.message, "Error loading");
+ return null;
+ }
+ });
+ }
+ else {
+ const programId = params['program_id'];
+ return this.programService.getProgramById(programId).catch(err => {
+ if (!this.session.active) {
+ this.router.navigate(['/login'], {replaceUrl:true});
+ reject();
+ throw Error("Error loading");
+ }
+ else {
+ console.error("Error:", err);
+ this.toastr.error(err.message, "Error loading");
+ return null;
+ }
+ })
+ }
+ }))
+ .subscribe(program => {
+ if (program === null) {
+ return;
+ }
+
+ this.program = program;
+ this.programId = program.id;
+
+ this.toolbox = new SpreadsheetToolbox(this.customBlockService,
+ this.serviceService,
+ this.environmentService,
+ this.program.id,
+ this.connectionService,
+ this.session,
+ );
+
+ this.read_only = program.readonly;
+ this.visibility = program.visibility;
+ this.can_admin = program.can_admin;
+ this.cellValues = program.orig;
+ if (!this.cellValues || (this.cellValues as any) === 'undefined') {
+ this.cellValues = {};
+ }
+ resolve();
+ });
+ }));
+ }
+
+ ngAfterViewInit() {
+ const elem = (this.drawer as any)._elementRef.nativeElement;
+
+ this.mutationObserver = new MutationObserver(() => {
+ this.notifyResize();
+
+ // HACK: Wait for animations to finish
+ for (let delay = 200; delay < 1000; delay *= 2 ) {
+ setTimeout(() => {
+ this.notifyResize();
+ }, delay);
+ }
+ });
+ this.mutationObserver.observe(elem, { attributes: true, subtree: true });
+ }
+
+ initializeListeners() {
+ this.initializeEventSynchronization();
+ }
+
+ initializeEventSynchronization() {
+ }
+
+ checkpointProgram() {
+ }
+
+ async reloadToolbox(): Promise {
+ }
+
+ calculate_size(workspace: HTMLElement) {
+ const header = document.getElementById('program-header');
+ if (!header) { return; }
+ // const header_pos = this.get_position(header);
+ // const header_end = header_pos.y + header.clientHeight;
+
+ // const window_height = Math.max(document.documentElement.clientHeight, this.browser.window.innerHeight || 0);
+
+ // workspace.style.height = (window_height - header_end - 1) + 'px';
+ }
+
+ calculate_program_header_size(programHeader: HTMLElement) {
+ const isScrollable = programHeader.clientHeight < programHeader.scrollHeight;
+ if (!isScrollable) {
+ programHeader.classList.remove('is-scrollable');
+ }
+ else {
+ programHeader.classList.add('is-scrollable');
+ }
+ }
+
+ reset_zoom() {
+ }
+
+ reset_header_scroll() {
+ document.getElementById('program-header').scrollTo(0, 0);
+ }
+
+ goBack(): boolean {
+ this.dispose();
+ this._location.back();
+ return false;
+ }
+
+ force_reload() {
+ location = location;
+ }
+
+ dispose() {
+ if (this.sidepanel) {
+ this.sidepanel.dispose();
+ }
+
+ if (this.mutationObserver) {
+ this.mutationObserver.disconnect();
+ this.mutationObserver = null;
+ }
+ }
+
+ async sendProgram(): Promise {
+ // Serialize result
+ let program;
+ try {
+ const orig = this.cellValues;
+ const parsed: any[] = compile_spreadsheet(orig, this.toolbox);
+ program = new SpreadsheetProgram(this.program,
+ parsed,
+ orig);
+ }
+ catch (error) {
+ this.toastr.error(error, 'Invalid program', {
+ closeButton: true,
+ progressBar: true,
+ });
+
+ console.error(error);
+ return;
+ }
+
+ // Send update
+ const button = document.getElementById('program-start-button');
+ if (button){
+ button.classList.add('started');
+ button.classList.remove('completed');
+ }
+
+ const result = await this.programService.updateProgram(program);
+
+ if (button){
+ button.classList.remove('started');
+ button.classList.add('completed');
+ }
+
+ if (result) {
+ this.toastr.success('Upload complete', '', {
+ closeButton: true,
+ progressBar: true,
+ });
+ }
+ else {
+ this.toastr.error('Error on upload', '', {
+ closeButton: true,
+ progressBar: true,
+ });
+ }
+
+ return result;
+ }
+
+ cloneProgram() {
+ const programData: CloneProgramDialogComponentData = {
+ name: this.program.name,
+ program: JSON.parse(JSON.stringify(this.program)),
+ };
+
+ programData.program.orig = this.cellValues;
+ if (((!programData.program.parsed) || (programData.program.parsed === 'undefined'))) {
+ programData.program.parsed = { blocks: [], variables: [] };
+ }
+
+ const dialogRef = this.dialog.open(CloneProgramDialogComponent, {
+ data: programData
+ });
+
+ dialogRef.afterClosed().subscribe(async (result) => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const program_id = result.program_id;
+ this.dispose();
+ this.router.navigate([`/programs/${program_id}/scratch`], { replaceUrl: false });
+ });
+ }
+
+ renameProgram() {
+ const programData = { name: this.program.name };
+
+ const dialogRef = this.dialog.open(RenameProgramDialogComponent, {
+ data: programData
+ });
+
+ dialogRef.afterClosed().subscribe(async (result) => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ await this.sendProgram();
+ const rename = (this.programService.renameProgram(this.program, programData.name)
+ .catch(() => { return false; })
+ .then((success: boolean) => {
+ if (!success) {
+ return;
+ }
+
+ this.program.name = programData.name;
+ }));
+ progbar.track(rename);
+ });
+ }
+
+
+ changeVisibility() {
+ const data = {
+ name: this.program.name,
+ visibility: this.visibility
+ };
+
+ const dialogRef = this.dialog.open(ChangeProgramVisilibityDialog, {
+ data: data
+ });
+
+
+ dialogRef.afterClosed().subscribe((result: { visibility: VisibilityEnum } | null) => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const vis = result.visibility;
+ this.programService.updateProgramVisibility( this.program.id, { visibility: vis } ).then(() => {
+ this.visibility = vis;
+ });
+
+ });
+ }
+
+ setProgramTags() {
+ const data = {
+ program: this.program,
+ user_id: this.program.owner,
+ tags: [] as string[], // Initially empty, to be updated by dialog
+ };
+
+ const dialogRef = this.dialog.open(SetProgramTagsDialogComponent, {
+ data: data
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const update = (this.programService.updateProgramTags(this.program.id, data.tags)
+ .then((success: boolean) => {
+ if (!success) {
+ return;
+ }
+
+ this.notification.open('Tags updated', 'ok', {
+ duration: 5000
+ });
+ })
+ .catch((error: Error) => {
+ console.error(error);
+
+ this.notification.open('Error updating tags', 'ok', {
+ duration: 5000
+ });
+ }));
+ progbar.track(update);
+ });
+ }
+
+ stopThreadsProgram() {
+ const programData = { name: this.program.name };
+ const dialogRef = this.dialog.open(StopThreadProgramDialogComponent, {
+ data: programData
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const stopThreads = (this.programService.stopThreadsProgram(this.program.id)
+ .catch(() => { return false; })
+ .then((success: boolean) => {
+ if (!success) {
+ return;
+ }
+ this.notification.open('All Threads stopped', 'ok', {
+ duration: 5000
+ });
+ }));
+ progbar.track(stopThreads);
+ });
+ }
+
+ deleteProgram() {
+ const programData = { name: this.program.name };
+
+ const dialogRef = this.dialog.open(DeleteProgramDialogComponent, {
+ data: programData
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const deletion = (this.programService.deleteProgram(this.program)
+ .catch(() => { return false; })
+ .then((success: boolean) => {
+ if (!success) {
+ return;
+ }
+
+ this.goBack();
+ }));
+ progbar.track(deletion);
+ });
+ }
+
+ toggleLogsPanel() {
+ if (this.drawer.opened && this.sidepanel.drawerType === 'logs') {
+ this.closeDrawer();
+ }
+ else {
+ this.sidepanel.setDrawerType('logs');
+ if (!this.drawer.opened) {
+ this.openDrawer();
+ }
+ }
+ }
+
+ toggleFunctionsPanel() {
+ if (this.drawer.opened && this.sidepanel.drawerType === 'custom') {
+ this.closeDrawer();
+ }
+ else {
+ this.sidepanel.setDrawerType('custom');
+ if (!this.drawer.opened) {
+ this.openDrawer();
+ }
+ }
+ }
+
+ notifyResize() {
+ this.browser.window.dispatchEvent(new Event('resize'));
+ }
+
+ openDrawer() {
+ return this.drawer.open();
+ }
+
+ closeDrawer = () => {
+ return this.drawer.close();
+ }
+
+ onToggleMark = (blockId: string, activate: boolean, message: string) => {
+ console.log("TODO: Mark block id=", blockId);
+ }
+
+ // Template helpers
+ seq(start: number, end: number): number[] {
+ if (start >= end) {
+ return [];
+ }
+
+ return Array.from({length: end - start}, (_v, idx) => idx + start);
+ }
+
+ startResize(ev: MouseEvent) {
+ const ref = (ev.target as HTMLElement).parentElement;
+ window.onmousemove = (move: MouseEvent) => {
+ ref.style.minWidth = move.clientX - ref.getBoundingClientRect().left + 'px';
+ }
+
+ window.onmouseup = () => {
+ window.onmousemove = window.onmouseup = null;
+ }
+ }
+
+ contextMenuOnCell(ev: MouseEvent) {
+ console.log("Canceling context menu");
+ ev.preventDefault();
+ }
+
+ mousedownOnCell(ev: MouseEvent) {
+ const elem = ev.target as HTMLTableDataCellElement;
+
+ ev.preventDefault();
+
+ if (elem === this.current) {
+ // Just check that it's being edited
+ if (!this.floatingEditor.nativeElement.classList.contains('editing')) {
+ this.startEditing(elem);
+ }
+
+ return;
+ }
+
+ const editor = this.floatingEditor.nativeElement;
+ if (this.current && editor.value.trim().startsWith('=')) {
+ // Selecting other cell while on formula
+ const val = this.getCellId(elem);
+ editor.value = editor.value.substr(0, editor.selectionStart)
+ + colName(val[0]) + val[1]
+ + editor.value.substr(editor.selectionStart)
+
+ return;
+ }
+
+ // Changing the current cell
+ this.unsetActive();
+ elem.classList.add('active');
+ this.activeCells = [elem];
+ this.makeCurrent(elem);
+ if (ev.button === 2) {
+ this.closeEditor();
+ this.showOptions(elem);
+ }
+ else {
+ this.startEditing(elem);
+ }
+ }
+
+ showOptions(elem: HTMLTableDataCellElement) {
+ console.log("TODO: Show options for", elem);
+ }
+
+ keydownOnEditor(ev: KeyboardEvent) {
+ this.floatingEditor.nativeElement.classList.add('editing');
+ if (ev.key === 'Enter') {
+ this.commitEditor();
+ this.closeEditor();
+ }
+ }
+
+ commitEditor() {
+ const editor = this.floatingEditor.nativeElement;
+ if (this.current) {
+ const value = editor.value;
+ const [col, row] = this.getCellId(this.current);
+
+ this.cellValues[colName(col)+row] = value;
+ }
+ editor.value = '';
+ }
+
+ closeEditor() {
+ const editor = this.floatingEditor.nativeElement;
+ const classes = editor.classList;
+ classes.remove('editing');
+ classes.add('hidden');
+ editor.blur();
+ }
+
+ makeCurrent(elem: HTMLTableDataCellElement) {
+ this.current = elem;
+ }
+
+ startEditing(elem: HTMLTableDataCellElement) {
+ const toRect = this.current.getBoundingClientRect();
+ const editor = this.floatingEditor.nativeElement;
+ editor.value = elem.innerText;
+
+ const workspace = document.querySelector('.spreadsheet-viewer');
+ const wsRect = workspace.getBoundingClientRect();
+
+ editor.classList.remove('hidden');
+ editor.classList.remove('editing');
+
+ editor.style.left = toRect.left - wsRect.left + 'px';
+ editor.style.top = toRect.top - wsRect.top + 'px';
+ editor.style.minHeight = toRect.height + 'px';
+ editor.style.width = toRect.width + 'px';
+
+ setTimeout(() => editor.focus(), 0);
+ }
+
+ getCellId(elem: HTMLTableDataCellElement): [number, number] {
+ const [_, row, col] = elem.id.split('_');
+
+ return [parseInt(col), parseInt(row)];
+ }
+
+ copyBlock(block: BlockDef) {
+ console.log("Copying", block);
+ if (this.current) {
+ const editor = this.floatingEditor.nativeElement;
+ editor.value = '=' + block.id + '()';
+ editor.selectionEnd = editor.selectionStart = editor.value.length - 1;
+ editor.scrollIntoView({ block: 'end' });
+ editor.focus();
+ }
+ }
+
+ unsetActive() {
+ if (this.floatingEditor.nativeElement.classList.contains('editing')) {
+ this.commitEditor();
+ }
+
+ for (const cell of this.activeCells) {
+ cell.classList.remove('active');
+ }
+ }
+}
diff --git a/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-toolbox.ts b/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-toolbox.ts
new file mode 100644
index 00000000..a8eeedb9
--- /dev/null
+++ b/frontend/src/app/program-editors/spreadsheet-editor/spreadsheet-toolbox.ts
@@ -0,0 +1,103 @@
+import { ConnectionService } from "../../connection.service";
+import { CustomBlockService } from "../../custom_block.service";
+import { EnvironmentService } from "../../environment.service";
+import { ServiceService } from "../../service.service";
+import { Session } from "../../session";
+import { BridgeConnection } from "../../connection";
+import { iconDataToUrl } from "../../utils";
+import { ResolvedCustomBlock } from "../../custom_block";
+
+export type BlockDef = {
+ id: string,
+ message: string,
+ icon?: string,
+};
+
+export type CategoryDef = {
+ id: string,
+ name: string,
+ blocks: BlockDef[],
+}
+
+export interface ISpreadsheetToolbox {
+ categories: CategoryDef[];
+ nonEmptyCategories: CategoryDef[];
+ blockMap: { [key: string]: { cat: CategoryDef, block: ResolvedCustomBlock } };
+}
+
+export function simplify_id(block: ResolvedCustomBlock) {
+ return block.service_port_id.substr(0, 2)
+ + block.service_port_id.substr(block.service_port_id.length - 2)
+ + '_' + block.function_name
+}
+
+export class SpreadsheetToolbox {
+
+ public categories: CategoryDef[] = [];
+ public nonEmptyCategories: CategoryDef[];
+ public blockMap: { [key: string]: { cat: CategoryDef, block: ResolvedCustomBlock } } = {};
+
+ constructor (
+ private customBlockService: CustomBlockService,
+ private serviceService: ServiceService,
+ private environmentService: EnvironmentService,
+ private programId: string,
+ private connectionService: ConnectionService,
+ private session: Session,
+ ) {
+ this.init();
+ }
+
+ private async init() {
+ const availableConnectionsQuery = this.connectionService.getAvailableBridgesForNewConnectionOnProgram(this.programId);
+
+ const [connections, services] = await Promise.all([
+ this.connectionService.getConnectionsOnProgram(this.programId),
+ this.serviceService.getAvailableServicesOnProgram(this.programId),
+ ]);
+
+ const connection_by_id: {[key: string]: BridgeConnection} = {};
+
+ for (const connection of connections) {
+ connection_by_id[connection.bridge_id] = connection;
+ }
+
+ const blockMap: { [key: string]: { cat: CategoryDef, block: ResolvedCustomBlock } } = {};
+ const categories: {id: string, name: string, blocks: BlockDef[]}[] = [];
+ for (const service of services) {
+ categories.push({ id: service.id, name: service.name, blocks: [] });
+ }
+
+ const skip_resolve_argument_options = true; // Enum options will be filled when needed
+ const blocks = await this.customBlockService.getCustomBlocksOnProgram(this.programId, skip_resolve_argument_options);
+ for (const block of blocks) {
+ let icon: string | null = null;
+
+ const connection = connection_by_id[block.service_port_id];
+ if (connection) {
+ icon = iconDataToUrl(this.environmentService, connection.icon, connection.bridge_id);
+ }
+ else {
+ console.error("No connection found for", block, connection_by_id);
+ }
+
+ const category = categories.find(c => c.id === block.service_port_id);
+ if (!category) {
+ console.error("Ignoring block. Category not found for", block, block.service_port_id);
+ continue;
+ }
+
+ const reducedId = simplify_id(block);
+ category.blocks.push({
+ icon: icon,
+ message: block.message,
+ id: reducedId
+ });
+ blockMap[reducedId] = { cat: category, block: block };
+ }
+
+ this.categories = categories;
+ this.nonEmptyCategories = this.categories.filter(cat => cat.blocks.length > 0);
+ this.blockMap = blockMap;
+ }
+}
diff --git a/frontend/src/app/program-transformations.ts b/frontend/src/app/program-transformations.ts
new file mode 100644
index 00000000..568cd675
--- /dev/null
+++ b/frontend/src/app/program-transformations.ts
@@ -0,0 +1,294 @@
+import { FlowGraphNode, FlowGraph } from './flow-editor/flow_graph';
+import { ProgramContent } from './program';
+
+export class NoTranslationFoundError extends Error {}
+const TIME_BRIDGE = "0093325b-373f-4f1c-bace-4532cce79df4";
+
+export function getRequiredAssets(programData: ProgramContent): string[] {
+ if (programData.type !== 'flow_program') {
+ return [];
+ }
+
+ const assets: {[key: string]: boolean} = {};
+
+ // Transform graph
+ const graph: FlowGraph = programData.orig;
+ for (const node_id of Object.keys(graph.nodes)) {
+ const node = graph.nodes[node_id];
+
+ // Only simple_flow_blocks have to be transformed
+ if (node.data.type !== 'ui_flow_block') {
+ continue;
+ }
+
+ const ids = getFlowBlockIds(node);
+
+ for (const id of ids) {
+ assets[id] = true;
+ }
+ }
+
+ return Object.keys(assets);
+}
+
+function getBlockRequiredBridges(blocks: any[], required: {[key: string]: boolean}) {
+ for (const block of blocks) {
+ if (block.contents && block.contents.length > 0) {
+ getBlockRequiredBridges(block.contents, required);
+ }
+
+ let args = [];
+
+ if (block.args instanceof Array) {
+ args = block.args;
+ }
+ else if (block.args['service_call_values']) {
+ args = block.args['service_call_values'];
+ }
+
+ for (const arg of args || []) {
+ if (arg.type === 'block') {
+ getBlockRequiredBridges(arg.value, required);
+ }
+ }
+
+ const fun = block.type;
+
+
+ if (fun === 'command_call_service') {
+ const origBridge = block.args.service_id;
+ required[origBridge] = true;
+ }
+ else if ((!fun) || (!fun.startsWith('services.')) || (fun.startsWith('services.ui.'))) {
+ continue;
+ }
+ else {
+ const chunks = fun.split('.');
+
+ const origBridge = chunks[1];
+ required[origBridge] = true;
+ }
+ }
+}
+
+// Destructively transform the program so it can be applied to the target user
+export function getRequiredBridges(programData: ProgramContent): string[] {
+
+ const required: {[key: string]: boolean} = {};
+
+ // Transform editor representation
+ if (programData.type === 'flow_program') {
+ // Transform graph
+ const graph: FlowGraph = programData.orig;
+ for (const node_id of Object.keys(graph.nodes)) {
+ const node = graph.nodes[node_id];
+
+ // Only simple_flow_blocks have to be transformed
+ if (node.data.type !== 'simple_flow_block') {
+ continue;
+ }
+ const fun = node.data.value.options.block_function;
+
+ if ((!fun) || (!fun.startsWith('services.')) || (fun.startsWith('services.ui.'))) {
+ continue;
+ }
+
+ const chunks = fun.split('.');
+
+ const origBridge = chunks[1];
+ required[origBridge] = true;
+ }
+ }
+ else if (programData.type === 'scratch_program') {
+ const parser = new DOMParser();
+ const serializer = new XMLSerializer();
+
+ const xml = parser.parseFromString(programData.orig, 'text/xml');
+ const blocks = xml.getElementsByTagName("block");
+ for (const block of Array.from(blocks)) {
+ const fun = block.getAttribute("type");
+
+ if ((!fun) || (!fun.startsWith('services.')) || (fun.startsWith('services.ui.'))) {
+ continue;
+ }
+
+ const chunks = fun.split('.');
+
+ const origBridge = chunks[1];
+ required[origBridge] = true;
+ }
+ }
+ else {
+ throw new Error(`Translation of program type not supported: ${programData.type}`)
+ }
+
+
+ // Transform parsed structure
+ // Maybe just recompiling the graph would be more robust
+ for (const col of programData.parsed.blocks) {
+ getBlockRequiredBridges(col, required);
+ }
+
+ return Object.keys(required);
+}
+
+function getFlowBlockIds(node: FlowGraphNode): string[] {
+ const ids = [];
+
+ const extra = node.data.value.extra;
+ if (extra) {
+ if (extra.settings) {
+ if (extra.settings.body) {
+ if (extra.settings.body.image) {
+ if (extra.settings.body.image.id) {
+ ids.push(extra.settings.body.image.id);
+ }
+ }
+ }
+ }
+ }
+
+ return ids;
+}
+
+function transformBlocks(blocks: any[], translations: {[key: string]: string}) {
+ for (const block of blocks) {
+ if (block.contents && block.contents.length > 0) {
+ transformBlocks(block.contents, translations);
+ }
+
+ let args = [];
+
+ if (block.args instanceof Array) {
+ args = block.args;
+ }
+ else if (block.args['service_call_values']) {
+ args = block.args['service_call_values'];
+ }
+
+ for (const arg of args || []) {
+ if (arg.type === 'block') {
+ transformBlocks(arg.value, translations);
+ }
+ }
+
+ const fun = block.type;
+
+ if (fun === 'command_call_service') {
+ const origBridge = block.args.service_id;
+ const translated = translations[origBridge];
+ if (!translated) {
+ throw new NoTranslationFoundError(origBridge)
+ }
+
+ console.debug(`[Program] On ${fun}: [${origBridge} -> ${translated}]`);
+ block.args.service_id = translated;
+ }
+ else if ((!fun) || (!fun.startsWith('services.')) || (fun.startsWith('services.ui.'))) {
+ continue;
+ }
+ else {
+ const chunks = fun.split('.');
+
+ const origBridge = chunks[1];
+ const translated = translations[origBridge];
+ if (!translated) {
+ throw new NoTranslationFoundError(origBridge)
+ }
+
+ console.debug(`[Program] On ${fun}: [${origBridge} -> ${translated}]`);
+ chunks[1] = translated;
+
+ block.type = chunks.join('.');
+ }
+ }
+}
+
+// Destructively transform the program so it can be applied to the target user
+export function transformProgram(programData: ProgramContent, translations: { [key: string]: string }) {
+
+ // By default the time bridge maps to itself
+ if (!translations[TIME_BRIDGE]) {
+ translations[TIME_BRIDGE] = TIME_BRIDGE;
+ }
+
+ // Transform editor representation
+ if (programData.type === 'flow_program') {
+ // Transform graph
+ const graph: FlowGraph = programData.orig;
+ for (const node_id of Object.keys(graph.nodes)) {
+ const node = graph.nodes[node_id];
+
+ // Only simple_flow_blocks have to be transformed
+ if (node.data.type !== 'simple_flow_block') {
+ continue;
+ }
+ const fun = node.data.value.options.block_function;
+
+ if ((!fun) || (!fun.startsWith('services.')) || (fun.startsWith('services.ui.'))) {
+ continue;
+ }
+
+ const chunks = fun.split('.');
+
+ const origBridge = chunks[1];
+ const translated = translations[origBridge];
+ if (!translated) {
+ throw new Error(`Cannot find translation for bridge id=${origBridge}.`)
+ }
+
+ console.debug(`[Flow] On ${fun}: [${origBridge} -> ${translated}]`);
+ chunks[1] = translated;
+ node.data.value.options.block_function = chunks.join('.');
+ if (node.data.value.icon) {
+ node.data.value.icon.replace(origBridge, translated);
+ }
+ }
+ }
+ else if (programData.type === 'scratch_program') {
+ const parser = new DOMParser();
+ const serializer = new XMLSerializer();
+
+ const xml = parser.parseFromString(programData.orig, 'text/xml');
+ const blocks = xml.getElementsByTagName("block");
+ for (const block of Array.from(blocks)) {
+ const fun = block.getAttribute("type");
+
+ if ((!fun) || (!fun.startsWith('services.')) || (fun.startsWith('services.ui.'))) {
+ continue;
+ }
+
+ const chunks = fun.split('.');
+
+ const origBridge = chunks[1];
+ const translated = translations[origBridge];
+ if (!translated) {
+ throw new Error(`Cannot find translation for bridge id=${origBridge}.`)
+ }
+
+ chunks[1] = translated;
+ block.setAttribute('type', chunks.join('.'));
+ }
+ programData.orig = serializer.serializeToString(xml);
+ }
+ else {
+ throw new Error(`Translation of program type not supported: ${programData.type}`)
+ }
+
+
+ // Transform parsed structure
+ // Maybe just recompiling the graph would be more robust
+ try {
+ for (const col of programData.parsed.blocks) {
+ transformBlocks(col, translations);
+ }
+ }
+ catch (err) {
+ if (err instanceof NoTranslationFoundError) {
+ const origBridge = err.message;
+ throw new Error(`Cannot find translation for bridge id=${origBridge}.`);
+ }
+ throw err;
+ }
+
+}
diff --git a/frontend/src/app/program.service.ts b/frontend/src/app/program.service.ts
index af6ae843..74183609 100644
--- a/frontend/src/app/program.service.ts
+++ b/frontend/src/app/program.service.ts
@@ -1,22 +1,22 @@
-
-import {map} from 'rxjs/operators';
-import { Injectable } from '@angular/core';
-import { ProgramMetadata, ProgramContent, ProgramType } from './program';
-import * as API from './api-config';
-
-
import { HttpClient } from '@angular/common/http';
-import { SessionService } from './session.service';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map, share } from 'rxjs/operators';
+import { SharedResource } from './bridges/bridge';
import { ContentType } from './content-type';
+import { EnvironmentService } from './environment.service';
+import { ProgramContent, ProgramEditorEvent, ProgramEditorEventValue, ProgramInfoUpdate, ProgramLogEntry, ProgramMetadata, ProgramType, VisibilityEnum } from './program';
+import { SessionService } from './session.service';
+import { Synchronizer } from './syncronizer';
+import { addTokenQueryString, toWebsocketUrl } from './utils';
+
@Injectable()
export class ProgramService {
- private getExamplesForProgramRootUrl = '/api/programs/examples/';
- private addExampleToProgramRootUrl = '/api/programs/examples/';
-
constructor(
private http: HttpClient,
- private sessionService: SessionService
+ private sessionService: SessionService,
+ private environmentService: EnvironmentService,
) {
this.http = http;
this.sessionService = sessionService;
@@ -32,146 +32,520 @@ export class ProgramService {
return userApiRoot + '/programs/';
}
- async getRetrieveProgramUrl(_user_id: string, program_id: string) {
- const userApiRoot = await this.sessionService.getUserApiRoot();
- return userApiRoot + '/programs/' + program_id;
+ private getGroupCreateProgramsUrl(groupId: string) {
+ return `${this.environmentService.getApiRoot()}/groups/by-id/${groupId}/programs`;
}
- async getUpdateProgramUrl(programUserName: string, program_id: string) {
- const userApiRoot = await this.sessionService.getApiRootForUser(programUserName);
- return userApiRoot + '/programs/' + encodeURIComponent(program_id);
+ private listProgramsOnGroupUrl(groupId: string) {
+ return `${this.environmentService.getApiRoot()}/groups/by-id/${groupId}/programs`;
}
- async getProgramTagsUrl(programUserId: string, program_id: string) {
- const userApiRoot = await this.sessionService.getApiRootForUserId(programUserId);
- return userApiRoot + '/programs/id/' + encodeURIComponent(program_id) + '/tags';
+ private getRetrieveProgramUrl(userId: string, programName: string) {
+ return `${this.environmentService.getApiRoot()}/users/${userId}/programs/${programName}`;
}
- async getProgramStopThreadsUrl(programUserId: string, program_id: string) {
- const userApiRoot = await this.sessionService.getApiRootForUserId(programUserId);
- return userApiRoot + '/programs/id/' + encodeURIComponent(program_id) + '/stop-threads';
+ private getRetrieveProgramUrlById(programId: string): string {
+ return this.environmentService.getApiRoot() + '/programs/by-id/' + programId;
}
- async getProgramsStatusUrl(programUserId: string, program_id: string) {
- const userApiRoot = await this.sessionService.getApiRootForUserId(programUserId);
- return userApiRoot + '/programs/id/' + encodeURIComponent(program_id) + '/status';
+ async getUpdateProgramUrl(programId: string) {
+ return this.environmentService.getApiRoot() + '/programs/by-id/' + programId;
}
- getPrograms(): Promise {
- return this.getListProgramsUrl().then(url =>
- this.http.get(url, {headers: this.sessionService.getAuthHeader()}).pipe(
- map(response => response as ProgramMetadata[]))
- .toPromise());
+ async getProgramCheckpointUrlById(programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/checkpoint`;
+ }
+
+ getProgramSharedResourcesUrl(programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/shared-resources`;
+ }
+
+ async getProgramTagsUrl(programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/tags`;
+ }
+
+ private async getProgramLogsUrl(programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/logs`;
+ }
+
+ private async getProgramVariablesUrl(programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/variables`;
+ }
+
+ private async getProgramVariableUrl(programId: string, name: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/variables/${name}`;
+ }
+
+ private async getProgramStreamingLogsUrl(programId: string) {
+ const token = this.sessionService.getToken();
+ return addTokenQueryString(toWebsocketUrl(this.environmentService,
+ `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/logs-stream`),
+ token,
+ );
+ }
+
+ private async getProgramStreamingVariablesUrl(programId: string) {
+ const token = this.sessionService.getToken();
+ return addTokenQueryString(toWebsocketUrl(this.environmentService,
+ `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/variables-stream`),
+ token,
+ );
}
- getProgram(user_id: string, program_id: string): Promise {
- return this.getRetrieveProgramUrl(user_id, program_id).then(url =>
+ private getProgramStreamingEventsUrl(programId: string) {
+ const token = this.sessionService.getToken();
+ return addTokenQueryString(toWebsocketUrl(this.environmentService,
+ `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/editor-events`),
+ token,
+ );
+ }
+
+ async getProgramStopThreadsUrl(programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/stop-threads`;
+ }
+
+ async getProgramsStatusUrl(programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/status`;
+ }
+ getAssetUrlOnProgram(assetId: string, programId: string): string {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/assets/by-id/${assetId}`;
+ }
+
+ getPrograms(): Promise {
+ return this.getListProgramsUrl().then(url =>
this.http.get(url, {headers: this.sessionService.getAuthHeader()}).pipe(
- map(response => response as ProgramContent))
+ map(response => response as ProgramMetadata[]))
.toPromise());
}
- getProgramTags(user_id: string, program_id: string): Promise {
- return this.getProgramTagsUrl(user_id, program_id).then(url =>
+ async getProgramsOnGroup(groupId: string): Promise {
+ const url = this.listProgramsOnGroupUrl(groupId)
+
+ const result = await this.http.get(url, {headers: this.sessionService.getAuthHeader()}).toPromise();
+
+ return (result as any)['programs'];
+ }
+
+ async getProgram(userName: string, programName: string): Promise {
+ const url = this.getRetrieveProgramUrl(userName, programName)
+
+ const result = await this.http.get(url, {headers: this.sessionService.getAuthHeader()}).toPromise();
+
+ return result as ProgramContent;
+ }
+
+ async getProgramById(programId: string): Promise {
+ const url = this.getRetrieveProgramUrlById(programId);
+ return (this.http.get(url, {headers: this.sessionService.getAuthHeader()})
+ .toPromise() as Promise);
+ }
+
+ getProgramTags(programId: string): Promise {
+ return this.getProgramTagsUrl(programId).then(url =>
this.http.get(url, {headers: this.sessionService.getAuthHeader()}).pipe(
map(response => response as string[]))
.toPromise());
}
- createProgram(): Promise {
- return this.getCreateProgramsUrl().then(url =>
- this.http
- .post(url, JSON.stringify({}),
- {headers: this.sessionService.addJsonContentType(
- this.sessionService.getAuthHeader())}).pipe(
- map(response => {
- return response as ProgramMetadata;
- }))
- .toPromise());
+ getProgramLogs(programId: string): Promise {
+ return (this.getProgramLogsUrl(programId)
+ .then(url =>
+ this.http.get(url, {headers: this.sessionService.getAuthHeader()})
+ .toPromise()) as Promise);
}
- updateProgram(username: string,
- program: ProgramContent): Promise {
- return this.getUpdateProgramUrl(username, program.name).then(url =>
+ async getProgramVariables(programId: string): Promise<{ [key: string]: any }> {
+ const url = await this.getProgramVariablesUrl(programId);
+ const result = await this.http.get(url, {headers: this.sessionService.getAuthHeader()}).toPromise();
+
+ return (result as any)['variables'];
+ }
+
+ async updateProgramVariables(programId: string, values: { name: string, value: any }[]): Promise {
+ const url = await this.getProgramVariablesUrl(programId);
+ const result = await this.http.patch(url,
+ { values: values },
+ { headers: this.sessionService.getAuthHeader() }
+ ).toPromise();
+ }
+
+ async removeVariable(programId: string, name: string): Promise {
+ const url = await this.getProgramVariableUrl(programId, name);
+ const result = await this.http.delete(url,
+ { headers: this.sessionService.getAuthHeader() }
+ ).toPromise();
+ }
+
+ public async createProgram(programType?: ProgramType, programName?: string): Promise {
+ const data: { type?: string, name?: string } = {};
+ if (programType) {
+ data.type = programType;
+ }
+ if (programName) {
+ data.name = programName;
+ }
+
+ const url = await this.getCreateProgramsUrl();
+ return await this.http
+ .post(url, JSON.stringify(data), {
+ headers: this.sessionService.addJsonContentType(this.sessionService.getAuthHeader())
+ }).toPromise() as Promise;
+ }
+
+ public async createProgramOnGroup(programType: ProgramType, programName: string | null, groupId: string): Promise {
+ const data: { type?: string, name?: string } = {};
+ if (programType) {
+ data.type = programType;
+ }
+ if (programName) {
+ data.name = programName;
+ }
+
+ const url = this.getGroupCreateProgramsUrl(groupId);
+ return await this.http
+ .post(url, JSON.stringify(data), {
+ headers: this.sessionService.addJsonContentType(this.sessionService.getAuthHeader())
+ }).toPromise() as Promise;
+ }
+
+ updateProgram(program: ProgramContent): Promise {
+ return this.getUpdateProgramUrl(program.id).then(url =>
this.http
.put(url, JSON.stringify({type: program.type, orig: program.orig, parsed: program.parsed}),
{headers: this.sessionService.addContentType(
this.sessionService.getAuthHeader(),
- ContentType.Json)}).pipe(
- map(response => {
- return true;
- }))
+ ContentType.Json)})
+ .pipe(map(_ => true))
.toPromise()
.catch(_ => false)
);
}
- updateProgramTags(user_id: string, program_id: string, programTags: string[]): Promise {
- return this.getProgramTagsUrl(user_id, program_id).then(url =>
+ async updateProgramById(program: { id: string, type: ProgramType, orig: any, parsed: any, pages?: {[key: string]: any} }): Promise {
+ const url = await this.getUpdateProgramUrl(program.id);
+
+ const data = {type: program.type, orig: program.orig, parsed: program.parsed, pages: program.pages};
+
+ try {
+ (await
+ this.http
+ .put(url,
+ JSON.stringify(data),
+ {headers: this.sessionService.addContentType(
+ this.sessionService.getAuthHeader(),
+ ContentType.Json)})
+ .toPromise());
+ return true;
+ }
+ catch (err) {
+ console.error("Error updating program:", err);
+ return false;
+ }
+ }
+
+ updateProgramTags(programId: string, programTags: string[]): Promise {
+ return this.getProgramTagsUrl(programId).then(url =>
this.http
.post(url, JSON.stringify({tags: programTags}),
{headers: this.sessionService.addContentType(
this.sessionService.getAuthHeader(),
- ContentType.Json)}).pipe(
- map(response => {
- return true;
- }))
+ ContentType.Json)})
+ .pipe(map(_ => true))
.toPromise()
.catch(_ => false)
);
}
- renameProgram(username: string, program: ProgramContent, new_name: string): Promise {
- return this.getUpdateProgramUrl(username, program.name).then(
+ renameProgram(program: ProgramContent, newName: string): Promise {
+ return this.getUpdateProgramUrl(program.id).then(
url => (this.http
.patch(url,
- JSON.stringify({name: new_name}),
+ JSON.stringify({name: newName}),
{headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
- ContentType.Json)}).pipe(
- map(response => {
- console.log("R:", response);
- return true;
- }))
- .toPromise()));
+ ContentType.Json)})
+ .pipe(map(_ => true))
+ .toPromise()));
}
- stopThreadsProgram(user_id: string, program_id: string): Promise {
- return this.getProgramStopThreadsUrl(user_id, program_id).then(
+ async renameProgramById(programId: string, newName: string): Promise {
+ const url = await this.getUpdateProgramUrl(programId);
+ const _response = await (this.http
+ .patch(url,
+ JSON.stringify({name: newName}),
+ {headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
+ ContentType.Json)})
+ .toPromise());
+ return true;
+ }
+
+ stopThreadsProgram(programId: string): Promise {
+ return this.getProgramStopThreadsUrl(programId).then(
url => (this.http
.post(url,"",
{headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
ContentType.Json)}).pipe(
map(response => {
- console.log("R:", response);
return true;
}))
.toPromise()));
}
- setProgramStatus(status:string, program_id:string, user_id:string){
- return this.getProgramsStatusUrl(user_id, program_id).then(
+ setProgramStatus(status:string, programId:string){
+ return this.getProgramsStatusUrl(programId).then(
url => (this.http
.post(url,
status,
{headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
- ContentType.Json)}).pipe(
- map(response => {
- console.log("R:", response);
- return true;
- }))
- .toPromise()));
+ ContentType.Json)})
+ .pipe(map(_ => true))
+ .toPromise()));
}
- deleteProgram(username: string, program: ProgramContent): Promise {
- return this.getUpdateProgramUrl(username, program.name).then(
+ updateProgramVisibility(programId: string, options: { visibility: VisibilityEnum }){
+ return this.getUpdateProgramUrl(programId).then(
+ url => (this.http
+ .patch(url,
+ JSON.stringify({visibility: options.visibility}),
+ {headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
+ ContentType.Json)})
+ .pipe(map(_ => true))
+ .toPromise()));
+ }
+
+ deleteProgram(program: ProgramContent): Promise {
+ return this.getUpdateProgramUrl(program.id).then(
url => (this.http
.delete(url,
{headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
- ContentType.Json)}).pipe(
- map(response => {
- console.log("R:", response);
- return true;
- }))
- .toPromise()));
+ ContentType.Json)})
+ .pipe(map(_ => true))
+ .toPromise()));
+ }
+
+ async deleteProgramById(programId: string): Promise {
+ const url = await this.getUpdateProgramUrl(programId);
+ const _response = await(this.http
+ .delete(url,
+ {headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
+ ContentType.Json)})
+ .toPromise());
+ return true;
+ }
+
+ async checkpointProgram(programId: string, content: any): Promise {
+ const url = await this.getProgramCheckpointUrlById(programId);
+ const _response = await(
+ this.http
+ .post(url,
+ JSON.stringify(content),
+ {headers: this.sessionService.addContentType(this.sessionService.getAuthHeader(),
+ ContentType.Json)})
+ .toPromise());
+ }
+
+ public getPageUrl(programId: string, pagePath: string): any {
+ let baseServerPath = document.location.origin;
+ const apiHost = this.environmentService.getBrowserApiHost();
+ if (apiHost != '') {
+ baseServerPath = apiHost;
+ }
+
+ return `${baseServerPath}/api/v0/programs/by-id/${programId}/render${pagePath}`;
+ }
+
+ async getProgramSharedResources(programId: string): Promise {
+ const url = this.getProgramSharedResourcesUrl(programId);
+
+ const response = await (this.http
+ .get(url,
+ {headers: this.sessionService.getAuthHeader()})
+ .toPromise());
+
+ return (response as any)['resources'] as SharedResource[];
+ }
+
+
+ watchProgramLogs(programId: string, options: { request_previous_logs?: boolean }): Observable {
+ let websocket: WebSocket | null = null;
+
+ return new Observable((observer) => {
+
+ this.getProgramStreamingLogsUrl(programId).then(streamingUrl => {
+
+ let buffer: any[] = [];
+ let state : 'none_ready' | 'ws_ready' | 'all_ready' = 'none_ready';
+
+ websocket = new WebSocket(streamingUrl);
+ websocket.onopen = (() => {
+ if (options.request_previous_logs) {
+ state = 'ws_ready';
+
+ this.getProgramLogs(programId).then(entries => {
+ for (const entry of entries) {
+ observer.next({
+ type: 'program_log',
+ value: entry,
+ });
+ }
+
+ for (const entry of buffer) {
+ observer.next(entry);
+ }
+
+ buffer = []; // Empty buffer
+ state = 'all_ready';
+ });
+ }
+ else {
+ state = 'all_ready';
+ }
+ });
+
+ websocket.onmessage = ((ev) => {
+ if (state === 'ws_ready') {
+ buffer.push(JSON.parse(ev.data));
+ }
+ else {
+ observer.next(JSON.parse(ev.data));
+ }
+ });
+
+ websocket.onclose = (() => {
+ observer.complete();
+ });
+
+ websocket.onerror = ((ev) => {
+ observer.error(ev);
+ observer.complete();
+ });
+ });
+
+ return () => {
+ if (websocket) {
+ websocket.close();
+ }
+ }
+ });
+ }
+
+ watchProgramVariables(programId: string, options: { request_previous?: boolean }): Observable<{ name: string, value: any }> {
+ let websocket: WebSocket | null = null;
+
+ return new Observable((observer) => {
+
+ this.getProgramStreamingVariablesUrl(programId).then(streamingUrl => {
+
+ let buffer: any[] = [];
+ let state : 'none_ready' | 'ws_ready' | 'all_ready' = 'none_ready';
+
+ websocket = new WebSocket(streamingUrl);
+ websocket.onopen = (() => {
+ if (options.request_previous) {
+ state = 'ws_ready';
+
+ this.getProgramVariables(programId).then(entries => {
+ for (const name of Object.keys(entries)) {
+ observer.next({ name: name, value: entries[name]});
+ }
+
+ for (const entry of buffer) {
+ observer.next(entry);
+ }
+
+ buffer = []; // Empty buffer
+ state = 'all_ready';
+ });
+ }
+ else {
+ state = 'all_ready';
+ }
+ });
+
+ websocket.onmessage = ((ev) => {
+ if (state === 'ws_ready') {
+ buffer.push(JSON.parse(ev.data));
+ }
+ else {
+ observer.next(JSON.parse(ev.data));
+ }
+ });
+
+ websocket.onclose = (() => {
+ observer.complete();
+ });
+
+ websocket.onerror = ((ev) => {
+ observer.error(ev);
+ observer.complete();
+ });
+ });
+
+ return () => {
+ if (websocket) {
+ websocket.close();
+ }
+ }
+ });
+ }
+
+ getEventStream(programId: string, opts: { skip_previous?: boolean } = {}): Synchronizer {
+ let websocket: WebSocket | null = null;
+ let sendBuffer: {type: string, value: ProgramEditorEventValue}[] = [];
+ let state : 'none_ready' | 'ws_ready' | 'all_ready' | 'closed' = 'none_ready';
+
+ const obs = new Observable((observer) => {
+ let streamingUrl = this.getProgramStreamingEventsUrl(programId);
+ if (opts.skip_previous) {
+ streamingUrl += '&skip_previous=true';
+ }
+
+ if (state === 'closed') {
+ return; // Cancel the opening of websocket if the stream was closed before being established
+ }
+
+ websocket = new WebSocket(streamingUrl)
+
+ websocket.onopen = (() => {
+ state = 'all_ready';
+ for (const ev of sendBuffer) {
+ websocket.send(JSON.stringify(ev));
+ }
+ sendBuffer = null;
+ });
+
+ websocket.onmessage = ((ev) => {
+ const parsed: ProgramEditorEvent = JSON.parse(ev.data);
+ observer.next(parsed.value);
+ });
+
+ websocket.onclose = (() => {
+ observer.complete();
+ });
+
+ websocket.onerror = ((ev) => {
+ observer.error(ev);
+ observer.complete();
+ });
+
+ return () => {
+ if (websocket) {
+ websocket.close();
+ }
+ }
+ });
+
+ const sharedObserver = obs.pipe(share());
+ return {
+ subscribe: sharedObserver.subscribe.bind(sharedObserver),
+ push: (ev: ProgramEditorEventValue) => {
+ const msg = {type: 'editor_event', value: ev};
+ if (state === 'none_ready') {
+ sendBuffer.push(msg);
+ }
+ else {
+ websocket.send(JSON.stringify(msg));
+ }
+ }
+ };
}
}
diff --git a/frontend/src/app/program.ts b/frontend/src/app/program.ts
index 772fb81d..2a799aa0 100644
--- a/frontend/src/app/program.ts
+++ b/frontend/src/app/program.ts
@@ -1,23 +1,37 @@
+import { CompiledFlowGraph } from "./flow-editor/flow_graph";
+
+export type VisibilityEnum = 'public' | 'shareable' | 'private';
+
export class ProgramMetadata {
id: string;
name: string;
- link: string;
enabled: boolean;
+ visibility: VisibilityEnum;
+ type: string;
+ bridges_in_use: string[];
}
-export type ProgramType = 'scratch_program';
+export type ProgramType = 'scratch_program'
+ | 'flow_program'
+ | 'spreadsheet_program' // No longer created through UI
+;
+export type OwnerType = 'user' | 'group';
export class ProgramContent extends ProgramMetadata {
type: ProgramType;
parsed: any;
orig: any;
owner: string;
+ owner_full: { type: OwnerType, id: string};
+ checkpoint?: any;
+
+ "readonly"?: boolean;
+ can_admin?: boolean;
constructor (metadata: ProgramMetadata, parsed: any, orig: any, type: ProgramType) {
super();
this.id = metadata.id;
- this.link = metadata.link;
this.name = metadata.name;
this.parsed = parsed;
@@ -31,3 +45,34 @@ export class ScratchProgram extends ProgramContent {
super(metadata, parsed, orig, 'scratch_program');
}
}
+
+export class FlowProgram extends ProgramContent {
+ constructor(metadata: ProgramMetadata, parsed: any, orig: any) {
+ super(metadata, parsed, orig, 'flow_program');
+ }
+}
+
+export class SpreadsheetProgram extends ProgramContent {
+ constructor(metadata: ProgramMetadata, parsed: CompiledFlowGraph, orig: any) {
+ super(metadata, { blocks: parsed, variables: []}, orig, 'spreadsheet_program');
+ }
+}
+
+export interface ProgramLogEntry {
+ program_id: string,
+ thread_id: string | 'none',
+ user_id: string | 'none',
+ block_id: string | undefined,
+ severity: 'error' | 'debug' | 'warning',
+ event_data: any,
+ event_message: string,
+ event_time: number,
+};
+
+export type ProgramInfoUpdate = { type: "program_log" | "debug_log", value: ProgramLogEntry };
+
+export type ProgramEditorEventType = 'blockly_event' | 'flow_event' | 'cursor_event' | 'save_checkpoint' | 'add_editor' | 'remove_editor' | 'ready';
+
+export type ProgramEditorEventValue = { type: ProgramEditorEventType, value: any, save?: boolean };
+
+export type ProgramEditorEvent = { type: "editor_event", value: ProgramEditorEventValue };
diff --git a/frontend/src/app/program_serialization/scratch-program-serializer.ts b/frontend/src/app/program_serialization/scratch-program-serializer.ts
index 9b582066..3a65bd78 100644
--- a/frontend/src/app/program_serialization/scratch-program-serializer.ts
+++ b/frontend/src/app/program_serialization/scratch-program-serializer.ts
@@ -1,4 +1,7 @@
import { ToolboxController } from "../blocks/ToolboxController";
+import { cleanCallbackSequenceValue } from "app/blocks/CallbackSequenceField";
+
+type CompiledScratchBlock = { id: string, type: string, args: any[] | {[key: string]: any}, contents: any[], save_to?: { index: number } };
export default class ScratchProgramSerializer {
// ====================================================
@@ -15,7 +18,7 @@ export default class ScratchProgramSerializer {
try {
const serialized = {
variables: this.serializeVariables(variables as HTMLElement),
- blocks: blocks.map(block => this.serializeBlock(block as HTMLElement)),
+ blocks: blocks.map(block => this.serializeColumn(block as HTMLElement)).filter(column => !!column),
};
return {
@@ -32,16 +35,30 @@ export default class ScratchProgramSerializer {
// ====================================================
// Internal functions
// ====================================================
+ private serializeColumn(block: HTMLElement): any {
+ const blockType = ScratchProgramSerializer.cleanTypeName(block.getAttribute('type'));
+ const knownBlock = this.toolboxController.customBlocks[blockType];
+
+ if (knownBlock && knownBlock.block_type !== 'trigger') {
+ return null; // This column cannot be executed
+ }
+
+ return this.serializeBlock(block);
+ }
+
private serializeBlock(block: HTMLElement, chain: any[] = null): any {
if (chain === null) {
chain = [];
}
- let cleanedElement = {
+ let cleanedElement: CompiledScratchBlock = {
id: block.id,
type: ScratchProgramSerializer.cleanTypeName(block.getAttribute('type')),
args: Array.from(block.childNodes)
- .filter((x: HTMLElement) => x.tagName !== 'NEXT' && x.tagName !== 'STATEMENT')
+ .filter((x: HTMLElement) => (x.tagName !== 'NEXT'
+ && x.tagName !== 'STATEMENT'
+ && x.tagName !== 'COMMENT'
+ ))
.map(node => this.serializeArg(node as HTMLElement)),
contents: [],
};
@@ -54,7 +71,6 @@ export default class ScratchProgramSerializer {
const contents = Array.from(block.childNodes).filter((x: HTMLElement) => x.tagName === 'STATEMENT');
if (contents.length == 1) {
- console.log("Contents:", contents);
cleanedElement.contents = this.serializeBlock(contents[0].firstChild as HTMLElement);
}
else if (contents.length > 0) {
@@ -76,8 +92,8 @@ export default class ScratchProgramSerializer {
return chain;
}
- private fixArgOrder(cleanedElement: { args: any[] }) {
- const order = cleanedElement.args.map((value) => {
+ private fixArgOrder(cleanedElement: CompiledScratchBlock) {
+ const order = (cleanedElement.args as any[]).map((value) => {
if (!value.name) {
return null;
}
@@ -113,10 +129,9 @@ export default class ScratchProgramSerializer {
return parseInt(match[0]);
}
- private rewriteCustomBlock(element) {
+ private rewriteCustomBlock(element: CompiledScratchBlock) {
const blockInfo = this.toolboxController.getBlockInfo(element.type);
if (!blockInfo) {
-
return element;
}
@@ -131,12 +146,12 @@ export default class ScratchProgramSerializer {
return element;
}
- private rewriteCustomTrigger(element, blockInfo) {
+ private rewriteCustomTrigger(element: CompiledScratchBlock, blockInfo: any) {
const args: any = {};
if (blockInfo.save_to) {
let save_to = null;
if (blockInfo.save_to.type === 'argument') {
- save_to = { 'type': 'variable', 'value': element.args[blockInfo.save_to.index].value };
+ save_to = { 'type': 'variable', 'value': (element.args as any[])[blockInfo.save_to.index].value };
}
args.monitor_save_value_to = save_to;
@@ -145,7 +160,7 @@ export default class ScratchProgramSerializer {
if (blockInfo.expected_value) {
let expected_value = null;
if (blockInfo.expected_value.type === 'argument') {
- expected_value = element.args[blockInfo.expected_value.index];
+ expected_value = (element.args as any[])[blockInfo.expected_value.index];
}
args.monitor_expected_value = expected_value;
@@ -158,7 +173,7 @@ export default class ScratchProgramSerializer {
if (blockInfo.subkey.type === 'argument') {
args.subkey = {
'type': 'constant',
- 'value': element.args[blockInfo.subkey.index].value,
+ 'value': (element.args as any[])[blockInfo.subkey.index].value,
};
}
else {
@@ -171,11 +186,11 @@ export default class ScratchProgramSerializer {
return element;
}
- private replaceServices(element) {
+ private replaceServices(element: CompiledScratchBlock) {
}
- private replaceMonitors(element) {
+ private replaceMonitors(element: CompiledScratchBlock) {
switch (element.type) {
case "time_trigger_at":
// This implies a call to a monitor
@@ -185,14 +200,32 @@ export default class ScratchProgramSerializer {
"monitor_id": { "from_service": "0093325b-373f-4f1c-bace-4532cce79df4" }, // Timekeeping monitor ID
"monitor_expected_value": {
"type": "constant",
- "value": (element.args[0].value.replace(/^0*(\d)$/, "$1") + ':'
- + element.args[1].value.replace(/^0*(\d)$/, "$1") + ':'
- + element.args[2].value.replace(/^0*(\d)$/, "$1")
+ "value": ((element.args as any[])[0].value.replace(/^0*(\d)$/, "$1") + ':'
+ + (element.args as any[])[1].value.replace(/^0*(\d)$/, "$1") + ':'
+ + (element.args as any[])[2].value.replace(/^0*(\d)$/, "$1")
)
}
}
break;
}
+
+ case "time_trigger_at_tz":
+ // This implies a call to a monitor
+ {
+ element.type = "wait_for_monitor";
+ element.args = {
+ "monitor_id": { "from_service": "0093325b-373f-4f1c-bace-4532cce79df4" }, // Timekeeping monitor ID
+ "monitor_expected_value": {
+ "type": "constant",
+ "value": ((element.args as any[])[0].value.replace(/^0*(\d)$/, "$1") + ':'
+ + (element.args as any[])[1].value.replace(/^0*(\d)$/, "$1") + ':'
+ + (element.args as any[])[2].value.replace(/^0*(\d)$/, "$1")
+ )
+ },
+ "timezone": (element.args as any[])[3].value,
+ }
+ break;
+ }
}
}
@@ -204,10 +237,16 @@ export default class ScratchProgramSerializer {
private serializeArg(argument: HTMLElement): any {
if (argument.tagName === 'FIELD') {
let type = argument.getAttribute('name').toLowerCase();
+ let value = argument.innerText;
if (type.startsWith('val')) {
type = "constant";
}
+ else if (type.startsWith('cbsequence')) {
+ // Additional modifications must be done on this blocks
+ type = "constant";
+ value = cleanCallbackSequenceValue(value);
+ }
if (argument.getAttribute('id') === null) {
type = 'constant'; // No block or value, but dropdown/constant
}
@@ -215,7 +254,7 @@ export default class ScratchProgramSerializer {
name: argument.getAttribute('name'),
// Type here might be 'constant', 'variable' or 'list'
type: ScratchProgramSerializer.cleanTypeName(type),
- value: argument.innerText,
+ value: value,
}
}
diff --git a/frontend/src/app/program_tags/SetProgramTagsDialogComponent.ts b/frontend/src/app/program_tags/SetProgramTagsDialogComponent.ts
index 0e75fe29..08b6db5f 100644
--- a/frontend/src/app/program_tags/SetProgramTagsDialogComponent.ts
+++ b/frontend/src/app/program_tags/SetProgramTagsDialogComponent.ts
@@ -5,9 +5,6 @@ import { FormControl } from '@angular/forms';
import { MatChipInputEvent } from '@angular/material/chips';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Observable } from 'rxjs';
-import { map, startWith } from 'rxjs/operators';
-
import { ProgramMetadata } from '../program';
import { ProgramService } from '../program.service';
import { SessionService } from '../session.service';
@@ -54,7 +51,7 @@ export class SetProgramTagsDialogComponent {
this.programService = programService;
data.tags = this.tags;
- this.programService.getProgramTags(this.programUserId, this.program.id).then((tags) => {
+ this.programService.getProgramTags(this.program.id).then((tags) => {
// Bind data.tags again now that this.tags has changed
data.tags = this.tags = tags;
});
@@ -83,7 +80,7 @@ export class SetProgramTagsDialogComponent {
// Remove duplicated tags
deduplicateTags(): void {
- const past = {};
+ const past: {[key: string]: boolean} = {};
for (let index = 0; index < this.tags.length;) {
const tag = this.tags[index];
if (past[tag]) {
diff --git a/frontend/src/app/programs.component.html b/frontend/src/app/programs.component.html
deleted file mode 100644
index 63a069a8..00000000
--- a/frontend/src/app/programs.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
- Add your own!
-
-
-
-
- {{program.name}}
-
-
- {
- return this.programService.getPrograms().then((programs) => this.programs = programs);
- }
-
- gotoDetail(): void {
- this.router.navigate(['/detail', this.selectedProgram.id]);
- }
-
- ngOnInit(): void {
- this.getPrograms();
- }
-
- gotoProgram(programId: number): void {
- this.router.navigate(['/programs/' + programId]);
- }
-
- onSelect(program: ProgramMetadata): void {
- this.selectedProgram = program;
- }
-
- addProgram(): void {
- this.router.navigate(['/programs/add']);
- }
-}
diff --git a/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.html b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.html
new file mode 100644
index 00000000..50baeec8
--- /dev/null
+++ b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.html
@@ -0,0 +1,57 @@
+Name your program and select it's type
+
+
+
+
+ Program name
+ {{getNameErrorMessage()}}
+
+
+
+ Scratch's blocks
+
+
+
+ Classic block style, used by MIT's block-based editor.
+ Choose this if you already used MIT's Scratch.
+
+
+
+ PrograMaker's Flow
+
+
+
+ PrograMaker's re-imagining of visual programming.
+ Choose this if you want to add visual elements to your program.
+
+
+
+ Cancel
+ Start
+
diff --git a/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.scss b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.scss
new file mode 100644
index 00000000..2c1ba58d
--- /dev/null
+++ b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.scss
@@ -0,0 +1,57 @@
+.options-row {
+ margin: 1ex;
+
+ &>mat-card {
+ // margin: 1ex;
+ }
+}
+
+.options-row > mat-card {
+ &.selected {
+ background-color: rgba(170, 255, 170, 0.5);
+ }
+
+ margin-left: 1ex;
+}
+
+.example {
+ text-align: center;
+}
+
+.example > img {
+ max-width: 100%;
+ max-height: 20ex;
+ padding: 1ex;
+
+ background: #ddd;
+ border-radius: 5px;
+}
+
+.description > .reason {
+ font-weight: bold;
+}
+
+.description > .disabled-explanation {
+ background-color: #f66;
+ padding: 1ex;
+ border-radius: 5px;
+ color: black;
+ margin: 0.5ex;
+ text-align: center;
+ font-weight: bold;
+}
+
+
+.description > .warning {
+ background-color: #f66;
+ padding: 1ex;
+ border-radius: 5px;
+ color: black;
+ margin: 0.5ex;
+ text-align: center;
+ font-weight: bold;
+}
+
+.title {
+ text-align: center;
+}
diff --git a/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.spec.ts b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.spec.ts
new file mode 100644
index 00000000..e4e62358
--- /dev/null
+++ b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.spec.ts
@@ -0,0 +1,68 @@
+import { HttpClient } from '@angular/common/http';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { CookiesService } from '@ngx-utils/cookies';
+import { BrowserCookiesModule, BrowserCookiesService } from '@ngx-utils/cookies/browser';
+import { SelectProgrammingModelDialogComponent } from './select-programming-model-dialog.component';
+
+
+describe('SelectProgrammingModelDialogComponent', () => {
+ let component: SelectProgrammingModelDialogComponent;
+ let fixture: ComponentFixture;
+
+ const mockDialogRef = {
+ close: jasmine.createSpy('close')
+ };
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SelectProgrammingModelDialogComponent ],
+ imports: [
+ BrowserCookiesModule.forRoot(),
+ MatDialogModule,
+ NoopAnimationsModule,
+ ],
+ providers: [
+ {
+ provide: CookiesService,
+ useClass: BrowserCookiesService,
+ },
+ {
+ provide: HttpClient,
+ useValue: {}
+ },
+ {
+ provide: MatDialogRef,
+ useValue: mockDialogRef
+ },
+ {
+ provide: MAT_DIALOG_DATA,
+ useValue: [] // Add any data you wish to test if it is passed/used correctly
+ }
+ ]
+ });
+
+
+ TestBed.overrideModule(BrowserDynamicTestingModule, {
+ set: {
+ entryComponents: [ SelectProgrammingModelDialogComponent ]
+ }
+ });
+
+ TestBed.compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SelectProgrammingModelDialogComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+
+ });
+});
diff --git a/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.ts b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.ts
new file mode 100644
index 00000000..b34cbe19
--- /dev/null
+++ b/frontend/src/app/programs/select-programming-model-dialog/select-programming-model-dialog.component.ts
@@ -0,0 +1,52 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ConnectionService } from '../../connection.service';
+import { ProgramType } from '../../program';
+import { ServiceService } from '../../service.service';
+import { SessionService } from '../../session.service';
+
+@Component({
+ selector: 'app-select-programming-model-dialog',
+ templateUrl: './select-programming-model-dialog.component.html',
+ styleUrls: ['./select-programming-model-dialog.component.scss'],
+ providers: [SessionService, ServiceService, ConnectionService],
+})
+export class SelectProgrammingModelDialogComponent implements OnInit {
+ selectedType: ProgramType = null;
+ programName = new FormControl('', [Validators.required, Validators.minLength(4)]);
+
+ constructor(public dialogRef: MatDialogRef,
+ public sessionService: SessionService,
+ public serviceService: ServiceService,
+ public connectionService: ConnectionService,
+
+ @Inject(MAT_DIALOG_DATA)
+ public data: { is_advanced_user: boolean, is_user_in_preview: boolean }) {
+ this.selectedType = 'scratch_program';
+ }
+
+ ngOnInit(): void {
+ }
+
+
+ getNameErrorMessage() {
+ if (this.programName.hasError('required')) {
+ return 'You must enter a value';
+ }
+
+ return this.programName.hasError('minlength') ? 'Name must have at least 4 characters' : '';
+ }
+
+ selectType(program_type: ProgramType) {
+ this.selectedType = program_type;
+ }
+
+ confirmSelection() {
+ this.dialogRef.close({success: true, program_type: this.selectedType, program_name: this.programName.value});
+ }
+
+ onNoClick(): void {
+ this.dialogRef.close({success: false, program_type: null, program_name: null});
+ }
+}
diff --git a/frontend/src/app/resolvers/admin-stats.resolver.ts b/frontend/src/app/resolvers/admin-stats.resolver.ts
new file mode 100644
index 00000000..9b36909d
--- /dev/null
+++ b/frontend/src/app/resolvers/admin-stats.resolver.ts
@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { AdminService, PlatformStatsInfo } from "app/admin.service";
+
+
+@Injectable()
+export class AdminStatsResolver implements Resolve {
+ constructor(
+ private adminService: AdminService,
+ ) {}
+
+ resolve(
+ _route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ return this.adminService.getStats().catch(err => {
+ console.error(err);
+ return null;
+ });
+ }
+}
diff --git a/frontend/src/app/resolvers/admin-user-list.resolver.ts b/frontend/src/app/resolvers/admin-user-list.resolver.ts
new file mode 100644
index 00000000..295084c0
--- /dev/null
+++ b/frontend/src/app/resolvers/admin-user-list.resolver.ts
@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { AdminService, UserAdminData } from "app/admin.service";
+
+
+@Injectable()
+export class AdminUserListResolver implements Resolve {
+ constructor(
+ private adminService: AdminService,
+ ) {}
+
+ resolve(
+ _route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ return this.adminService.listAllUsers().catch(err => {
+ console.error(err);
+ return null;
+ });
+ }
+}
diff --git a/frontend/src/app/resolvers/group-info-with-collaborators.resolver.ts b/frontend/src/app/resolvers/group-info-with-collaborators.resolver.ts
new file mode 100644
index 00000000..22b053c8
--- /dev/null
+++ b/frontend/src/app/resolvers/group-info-with-collaborators.resolver.ts
@@ -0,0 +1,39 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { GroupInfo } from "app/group";
+import { GroupService } from "app/group.service";
+import { Collaborator } from "app/types/collaborator";
+
+type Info = { info: GroupInfo, collaborators: Collaborator[] };
+
+@Injectable()
+export class GroupInfoWithCollaboratorsResolver implements Resolve {
+ constructor(
+ private groupService: GroupService,
+ ) {}
+
+ async resolve(
+ route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ const params = route.params;
+
+ const groupName = params.group_name;
+
+ try {
+ const groupInfo = await this.groupService.getGroupWithName(groupName);
+ const collaborators = await this.groupService.getCollaboratorsOnGroup(groupInfo.id);
+
+ const result = {
+ info: groupInfo,
+ collaborators: collaborators,
+ };
+
+ return result;
+ }
+ catch(err) {
+ console.error(err);
+ return null;
+ }
+ }
+}
diff --git a/frontend/src/app/resolvers/program-list.resolver.ts b/frontend/src/app/resolvers/program-list.resolver.ts
new file mode 100644
index 00000000..af060eb9
--- /dev/null
+++ b/frontend/src/app/resolvers/program-list.resolver.ts
@@ -0,0 +1,47 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { GroupService } from "app/group.service";
+import { ProgramMetadata } from "app/program";
+import { ProgramService } from "app/program.service";
+
+
+@Injectable()
+export class ProgramListResolver implements Resolve {
+ constructor(
+ private programService: ProgramService,
+ private groupService: GroupService,
+ ) {}
+
+ async resolve(
+ route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ const params = route.params;
+
+ let asGroup: string | null = null;
+ if (params.group_name) {
+ const groupName = params.group_name;
+
+ try {
+ asGroup = (await this.groupService.getGroupWithName(groupName)).id;
+ }
+ catch(err) {
+ console.error(err);
+ return null;
+ }
+ }
+
+ let programListing: Promise;
+ if (asGroup) {
+ programListing = this.programService.getProgramsOnGroup(asGroup);
+ }
+ else {
+ programListing = this.programService.getPrograms();
+ }
+
+ return programListing.catch(err => {
+ console.error(err);
+ return null;
+ });
+ }
+}
diff --git a/frontend/src/app/resolvers/rendered-about.resolver.ts b/frontend/src/app/resolvers/rendered-about.resolver.ts
new file mode 100644
index 00000000..9c18b751
--- /dev/null
+++ b/frontend/src/app/resolvers/rendered-about.resolver.ts
@@ -0,0 +1,32 @@
+import { HttpClient } from "@angular/common/http";
+import { Injectable, PLATFORM_ID, Inject } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { environment } from 'environments/environment';
+import { isPlatformServer } from "@angular/common";
+
+@Injectable()
+export class RenderedAboutResolver implements Resolve {
+ constructor(
+ private httpClient: HttpClient,
+ @Inject(PLATFORM_ID) private platformId: Object
+ ) {}
+
+ resolve(
+ _route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ let url = environment.aboutPageRender;
+
+ if (environment.SSRAboutPageRender && isPlatformServer(this.platformId)) {
+ // This cannot be rendered on server, so halt it's load
+ url = environment.SSRAboutPageRender;
+ }
+
+ if (url) {
+ return this.httpClient.get(url, { responseType: 'text' as 'json' }).toPromise();
+ }
+ else {
+ return Promise.resolve(null);
+ }
+ }
+}
diff --git a/frontend/src/app/resolvers/session.resolver.ts b/frontend/src/app/resolvers/session.resolver.ts
new file mode 100644
index 00000000..343b3f48
--- /dev/null
+++ b/frontend/src/app/resolvers/session.resolver.ts
@@ -0,0 +1,19 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { Session } from "app/session";
+import { SessionService } from "app/session.service";
+
+
+@Injectable()
+export class SessionResolver implements Resolve {
+ constructor(
+ private sessionService: SessionService,
+ ) {}
+
+ resolve(
+ _route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ return this.sessionService.getSession();
+ }
+}
diff --git a/frontend/src/app/resolvers/user-bridges.resolver.ts b/frontend/src/app/resolvers/user-bridges.resolver.ts
new file mode 100644
index 00000000..7e46c974
--- /dev/null
+++ b/frontend/src/app/resolvers/user-bridges.resolver.ts
@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { BridgeIndexData } from "app/bridges/bridge";
+import { BridgeService } from "app/bridges/bridge.service";
+
+@Injectable()
+export class UserBridgesResolver implements Resolve {
+ constructor(
+ private bridgeService: BridgeService,
+ ) {}
+
+ async resolve(
+ _route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ try {
+ return (await this.bridgeService.listUserBridges()).bridges;
+ }
+ catch (err) {
+ console.error(err);
+ return null;
+ }
+ }
+}
diff --git a/frontend/src/app/resolvers/user-groups.resolver.ts b/frontend/src/app/resolvers/user-groups.resolver.ts
new file mode 100644
index 00000000..27a35ee1
--- /dev/null
+++ b/frontend/src/app/resolvers/user-groups.resolver.ts
@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { GroupInfo } from "app/group";
+import { GroupService } from "app/group.service";
+
+@Injectable()
+export class UserGroupsResolver implements Resolve {
+ constructor(
+ private groupService: GroupService,
+ ) {}
+
+ async resolve(
+ _route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ return this.groupService.getUserGroups().catch(err => {
+ console.error(err);
+ return null;
+ });
+ }
+}
diff --git a/frontend/src/app/resolvers/user-profile.resolver.ts b/frontend/src/app/resolvers/user-profile.resolver.ts
new file mode 100644
index 00000000..aa64a6f7
--- /dev/null
+++ b/frontend/src/app/resolvers/user-profile.resolver.ts
@@ -0,0 +1,30 @@
+import { Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
+import { ProfileService, UserProfileInfo } from "app/profiles/profile.service";
+import { SessionService } from "app/session.service";
+
+@Injectable()
+export class UserProfileResolver implements Resolve {
+ constructor(
+ private profileService: ProfileService,
+ private sessionService: SessionService,
+ ) {}
+
+ async resolve(
+ route: ActivatedRouteSnapshot,
+ _state: RouterStateSnapshot
+ ): Promise {
+ const params = route.params;
+
+ const userName = params.user_name ? params.user_name : (await this.sessionService.getSession()).username;
+
+ if (!userName) {
+ return Promise.resolve(null);
+ }
+
+ return this.profileService.getProfileFromUsername(userName).catch(err => {
+ console.error(err);
+ return null;
+ });
+ }
+}
diff --git a/frontend/src/app/select_from_json.filter.ts b/frontend/src/app/select_from_json.filter.ts
index 0cd7410e..72e4353d 100644
--- a/frontend/src/app/select_from_json.filter.ts
+++ b/frontend/src/app/select_from_json.filter.ts
@@ -14,7 +14,7 @@ export class SelectFromJSON implements PipeTransform {
this.sanitizer = sanitizer;
}
- set_object_class(html, jtype) {
+ set_object_class(html: HTMLElement, jtype: JSONType) {
switch (jtype) {
case JSONType.Null:
html.setAttribute('class', 'tagged-json-type-null');
@@ -44,7 +44,7 @@ export class SelectFromJSON implements PipeTransform {
}
- indent(element, depth) {
+ indent(element: HTMLElement, depth: number) {
for (let i = 0; i < depth; i++) {
const indent = document.createElement('span');
indent.setAttribute('class', 'tagged-json-indentation');
@@ -54,7 +54,7 @@ export class SelectFromJSON implements PipeTransform {
}
- tag(element, depth) {
+ tag(element: any, depth: number) {
const jtype = GetTypeOfJson(element);
const outer_object = document.createElement('span');
const json_object = document.createElement('span');
@@ -141,7 +141,7 @@ export class SelectFromJSON implements PipeTransform {
}
- transform(item): SafeHtml {
+ transform(item: any): SafeHtml {
const tagged = this.tag(item, 1);
tagged.setAttribute('key', '');
return this.sanitizer.bypassSecurityTrustHtml(tagged.outerHTML);
diff --git a/frontend/src/app/service.service.ts b/frontend/src/app/service.service.ts
index 27c65b74..49675c9b 100644
--- a/frontend/src/app/service.service.ts
+++ b/frontend/src/app/service.service.ts
@@ -1,21 +1,17 @@
-
-import {map} from 'rxjs/operators';
-import { Injectable } from '@angular/core';
-import { Service, AvailableService, ServiceEnableHowTo } from './service';
-import * as API from './api-config';
-
-
-import { SessionService } from './session.service';
import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs/operators';
import { ContentType } from './content-type';
+import { AvailableService, ServiceEnableHowTo } from './service';
+import { SessionService } from './session.service';
+import { EnvironmentService } from './environment.service';
@Injectable()
export class ServiceService {
- private getServicesUrl = API.ApiRoot + '/services/';
-
constructor(
private http: HttpClient,
private sessionService: SessionService,
+ private environmentService: EnvironmentService,
) {
this.http = http;
this.sessionService = sessionService;
@@ -26,44 +22,139 @@ export class ServiceService {
return userApiRoot + '/services/';
}
+ private getListAvailableServicesOnProgramUrl(programId: string): string {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/services`;
+ }
+
async getServiceEnableHowToUrl(service: AvailableService) {
- return API.ApiHost + service.link + '/how-to-enable';
+ return service.link + '/how-to-enable';
}
- async getServiceRegistryUrl(service_id: string) {
- const serviceRoot = await this.getListAvailableServicesUrl();
- return serviceRoot + 'id/' + service_id + '/register';
+ getServiceEnableOnGroupHowToUrl(service: AvailableService, groupId: string) {
+ return `${this.environmentService.getApiRoot()}/services/by-id/${service.id}/how-to-enable`;
+ }
+
+ getServiceEnableOnProgramHowToUrl(service: AvailableService, programId: string) {
+ return `${this.environmentService.getApiRoot()}/services/by-id/${service.id}/how-to-enable`;
+ }
+
+ getServiceRegistryUrl(serviceId: string) {
+ return `${this.environmentService.getApiRoot()}/services/by-id/${serviceId}/register`;
+ }
+ getServiceRegistryUrlOnGroup(service_id: string) {
+ return `${this.environmentService.getApiRoot()}/services/by-id/${service_id}/register`;
+ }
+
+ getServiceRegistryUrlOnProgram(bridgeId: string, programId: string) {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${programId}/services/by-id/${bridgeId}/register`;
}
getAvailableServices(): Promise {
return this.getListAvailableServicesUrl().then(
- url => this.http.get(url, { headers: this.sessionService.getAuthHeader() }).pipe(
- map(response => response as AvailableService[]))
+ url => this.http.get(url, { headers: this.sessionService.getAuthHeader() })
+ .pipe(map(response => response as AvailableService[]))
.toPromise());
}
- getHowToEnable(service: AvailableService): Promise {
- return this.getServiceEnableHowToUrl(service).then(
- url => this.http.get(url, { headers: this.sessionService.getAuthHeader() }).pipe(
- map(response => {
- return response as ServiceEnableHowTo;
- }))
- .toPromise());
+ async getAvailableServicesOnProgram(programId: string): Promise {
+ const url = this.getListAvailableServicesOnProgramUrl(programId);
+
+ return await this.http.get(url, { headers: this.sessionService.getAuthHeader() })
+ .pipe(map(response => response as AvailableService[]))
+ .toPromise();
}
- registerService(service_id: string, data: { [key: string]: string }): Promise {
- return this.getServiceRegistryUrl(service_id).then(
- url => this.http.post(
- url, JSON.stringify(data),
- {
- headers: this.sessionService.addContentType(
- this.sessionService.getAuthHeader(),
- ContentType.Json),
- }).pipe(
- map(response => {
- return (response as any).success;
- }))
- .toPromise());
+ async getHowToEnable(service: AvailableService): Promise {
+ const url = await this.getServiceEnableHowToUrl(service);
+ return (this.http.get(url, { headers: this.sessionService.getAuthHeader() })
+ .toPromise() as Promise);
+ }
+
+ async getHowToEnableOnGroup(service: AvailableService, groupId: string): Promise {
+ const url = this.getServiceEnableOnGroupHowToUrl(service, groupId);
+ return (this.http.get(url, { headers: this.sessionService.getAuthHeader(),
+ params: { group_id: groupId }
+ })
+ .toPromise() as Promise);
+ }
+
+ getHowToEnableOnProgram(service: AvailableService, programId: string): Promise {
+ const url = this.getServiceEnableOnProgramHowToUrl(service, programId);
+ return (this.http.get(url, { headers: this.sessionService.getAuthHeader(),
+ params: { program_id: programId }
+ })
+ .toPromise() as Promise);
+ }
+
+ registerService(data: { [key: string]: string },
+ service_id: string,
+ connection_id: string,
+ params?: { program_id: string, group_id: string } ): Promise<{success: boolean}> {
+
+ if (connection_id) {
+ if (data.metadata === undefined) {
+ (data as any).metadata = {};
+ }
+ (data as any).metadata.connection_id = connection_id;
+ }
+
+ const cleanParams: { program_id?: string, group_id?: string } = {};
+ if (params.program_id) {
+ cleanParams.program_id = params.program_id;
+ }
+ if (params.group_id) {
+ cleanParams.group_id = params.group_id;
+ }
+
+ const url = this.getServiceRegistryUrl(service_id);
+ return (this.http.post(
+ url, JSON.stringify(data),
+ {
+ headers: this.sessionService.addContentType(
+ this.sessionService.getAuthHeader(),
+ ContentType.Json),
+ params: cleanParams,
+ }).toPromise()) as Promise<{success: boolean}>;
+ }
+
+ async directRegisterService(bridge_id: string): Promise<{success: boolean}> {
+ const data = {};
+
+ const url = await this.getServiceRegistryUrl(bridge_id)
+ return (this.http.post(
+ url, JSON.stringify(data),
+ {
+ headers: this.sessionService.addContentType(
+ this.sessionService.getAuthHeader(),
+ ContentType.Json),
+ }).toPromise()) as Promise<{success: boolean}>;
+ }
+
+ async directRegisterServiceOnGroup(bridgeId: string, groupId: string): Promise<{success: boolean}> {
+ const data = { };
+
+ const url = this.getServiceRegistryUrlOnGroup(bridgeId)
+ return (this.http.post(
+ url, JSON.stringify(data),
+ {
+ headers: this.sessionService.addContentType(
+ this.sessionService.getAuthHeader(),
+ ContentType.Json),
+ params: { group_id: groupId }
+ }).toPromise()) as Promise<{success: boolean}>;
+ }
+
+ async directRegisterServiceOnProgram(bridgeId: string, programId: string): Promise<{ success: boolean; }> {
+ const data = { };
+
+ const url = this.getServiceRegistryUrlOnProgram(bridgeId, programId);
+ return (this.http.post(
+ url, JSON.stringify(data),
+ {
+ headers: this.sessionService.addContentType(
+ this.sessionService.getAuthHeader(),
+ ContentType.Json),
+ }).toPromise()) as Promise<{success: boolean}>;
}
}
diff --git a/frontend/src/app/service.ts b/frontend/src/app/service.ts
index e071fa6b..bf12b796 100644
--- a/frontend/src/app/service.ts
+++ b/frontend/src/app/service.ts
@@ -35,16 +35,30 @@ interface ServiceEnableTextEntry {
type ServiceEnableEntry = ServiceEnableTextEntry | ServiceEnableTagEntry;
type ServiceEnableType = 'message' | 'form';
+export interface TwoStepEnableMetadata {
+ service_id: string,
+ connection_id: string,
+}
+
interface ServiceEnableMessage {
type: ServiceEnableType;
value: {
form: ServiceEnableEntry[]
},
- metadata?: any,
+ metadata?: TwoStepEnableMetadata,
+}
+
+interface DirectServiceEnableMetadata {
+ service_id: string,
+}
+
+type DirectEnable = {
+ type: 'direct',
+ metadata: DirectServiceEnableMetadata,
}
-type ServiceEnableHowTo = ServiceEnableMessage;
+type ServiceEnableHowTo = ServiceEnableMessage | DirectEnable;
export {
Service,
diff --git a/frontend/src/app/services/ui-signal.service.ts b/frontend/src/app/services/ui-signal.service.ts
new file mode 100644
index 00000000..75717122
--- /dev/null
+++ b/frontend/src/app/services/ui-signal.service.ts
@@ -0,0 +1,180 @@
+import { Injectable, EventEmitter } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { SessionService } from 'app/session.service';
+import { EnvironmentService } from 'app/environment.service';
+import { toWebsocketUrl } from 'app/utils';
+import { Observable } from 'rxjs';
+import { startWith } from 'rxjs/operators';
+
+type Message = any;
+
+@Injectable()
+export class UiSignalService {
+ programId: string;
+ websocketEstablishment: Promise;
+ messageEmitter: EventEmitter;
+ private _gotInitialValues: boolean | 'in-progress' = false;
+ private _lastMessages: {[key: string]: any} = {};
+
+ constructor(
+ private http: HttpClient,
+ private sessionService: SessionService,
+ private environmentService: EnvironmentService,
+ ) {
+ this.http = http;
+ this.sessionService = sessionService;
+ this.messageEmitter = new EventEmitter(false);
+ }
+
+ setProgramId(programId: string) {
+ if (programId !== this.programId) {
+ this._clearWebsocket();
+ }
+ this.programId = programId;
+ }
+
+ private _assertInitialized() {
+ if (!this.programId) {
+ throw Error("UiSignalService non initialized, ProgramId not set.");
+ }
+ }
+
+
+ _getInitialValuesUrl(): string {
+ return `${this.environmentService.getApiRoot()}/programs/by-id/${this.programId}/ui-values`;
+ }
+
+ private _pullInitialValues() {
+ if (this._gotInitialValues) {
+ return;
+ }
+ this._gotInitialValues = 'in-progress';
+
+ const url = this._getInitialValuesUrl();
+ (this.http.get(url, {headers: this.sessionService.getAuthHeader()})
+ .toPromise()
+ .then((resp: any) => {
+
+ const vals = resp.widget_values;
+ for (const widgetId of Object.keys(vals)) {
+ if (!this._lastMessages[widgetId]) {
+
+ const message = {
+ key: 'ui_events_show',
+ subkey: widgetId,
+ values: vals[widgetId],
+ };
+ this._lastMessages[widgetId] = message;
+ this.messageEmitter.emit(message);
+ }
+ }
+
+ this._gotInitialValues = true;
+ }));
+ }
+
+ _getWebsocketUrl(): string {
+ return toWebsocketUrl(this.environmentService,
+ `${this.environmentService.getApiRoot()}/programs/by-id/${this.programId}/ui-events`);
+ }
+
+ private _clearWebsocket() {
+ if (this.websocketEstablishment) {
+ this.websocketEstablishment.then(ws => ws.close());
+ }
+ this.websocketEstablishment = null;
+ }
+
+ private _getWebsocket(): Promise {
+ if (!this.websocketEstablishment) {
+ this.websocketEstablishment = new Promise((resolve, reject) => {
+ const websocket = new WebSocket(this._getWebsocketUrl());
+
+ websocket.onopen = (() => {
+ const token = this.sessionService.getToken();
+
+ // Authenticate
+ websocket.send(JSON.stringify({
+ "type": "AUTHENTICATION",
+ "value": {"token": token}
+ }));
+
+ resolve(websocket);
+ });
+
+ websocket.onmessage = ((ev) => {
+ const parsed = JSON.parse(ev.data);
+ this.messageEmitter.emit(parsed);
+ });
+
+ websocket.onclose = (() => {
+ this._onWebscoketClose();
+ });
+
+ websocket.onerror = ((ev) => {
+ this._onWebsocketError(ev);
+ reject(ev);
+ });
+
+ });
+
+ this.websocketEstablishment.catch(err => {
+ this._clearWebsocket();
+ })
+ }
+
+ return this.websocketEstablishment;
+ }
+
+ _onWebsocketError(ev: any) {
+ console.error("Websocket error", ev);
+ this._onWebscoketClose();
+ }
+
+ _onWebscoketClose() {
+ this._clearWebsocket();
+ }
+
+ public async sendBlockSignal(blockType: string, blockId: string): Promise {
+ this._assertInitialized();
+
+ const ws = await this._getWebsocket();
+ ws.send(JSON.stringify({
+ type: "ui-event",
+ value: {
+ action: "activated",
+ block_type: blockType,
+ block_id: blockId,
+ }
+ }));
+ }
+
+ public onElementUpdate(blockType: string, blockId: string): Observable {
+ this._assertInitialized();
+ this._getWebsocket(); // Create websocket if not existing
+
+ if (!this._gotInitialValues) {
+ this._pullInitialValues();
+ }
+
+ const selector = `${blockType}.${blockId}`;
+
+ const observer = new Observable(observer => {
+ this.messageEmitter.subscribe({
+ next: (ev: any) => {
+ if (ev.subkey === selector) {
+ this._lastMessages[selector] = ev;
+ observer.next(ev);
+ }
+ }});
+ })
+
+ if (this._lastMessages[selector]) {
+ return observer.pipe(startWith(this._lastMessages[selector]));
+ }
+ else {
+ return observer;
+ }
+
+ }
+}
diff --git a/frontend/src/app/session.service.ts b/frontend/src/app/session.service.ts
index 43ea8a1d..8d8cd4d7 100644
--- a/frontend/src/app/session.service.ts
+++ b/frontend/src/app/session.service.ts
@@ -1,73 +1,184 @@
-
-import {map} from 'rxjs/operators';
-import { Injectable } from '@angular/core';
+import { isPlatformBrowser, isPlatformServer } from '@angular/common';
import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { CookiesService } from '@ngx-utils/cookies';
+import { Observable, Observer } from 'rxjs';
+import { BrowserService } from './browser.service';
+import { ContentType } from './content-type';
+import { EnvironmentService } from './environment.service';
import { Session } from './session';
+import * as progbar from './ui/progbar';
-import * as progbar from './ui/progbar';
-import * as API from './api-config';
-import { Observable } from 'rxjs';
-import { ApiRoot } from './api-config';
-import { ContentType } from './content-type';
+export type SessionInfoUpdate = { session: Session };
@Injectable()
export class SessionService {
- static EstablishedSession: Session = undefined;
- checkSessionUrl = API.ApiRoot + '/sessions/check';
- loginUrl = API.ApiRoot + '/sessions/login';
- registerUrl = API.ApiRoot + '/sessions/register';
- registerValidateUrl = API.ApiRoot + '/sessions/register/verify';
- resetPasswordUrl = API.ApiRoot + '/sessions/login/reset';
- validatePasswordUpdateUrl = API.ApiRoot + '/sessions/login/reset/validate';
- passwordUpdateUrl = API.ApiRoot + '/sessions/login/reset/update';
+
+ private readonly INACTIVE_SESSION: Session = {
+ username: null,
+ user_id: null,
+ active: false,
+ tags: {
+ is_admin: false,
+ is_advanced: false,
+ is_in_preview: false,
+ }
+ };
+
+ private readonly COOKIE_TOKEN_KEY = 'programaker-auth';
+
+ // Keep track of the sessions and promises associated with each token. This
+ // is necessary when multiple users share the same SessionService, as might
+ // happen when doing ServerSideRender.
+ private readonly EstablishedSessions: {[key: string]: Session} = {};
+ private readonly EstablishmentPromises: {[key: string]: Promise} = {};
+
+ // These static values help create a Singleton-like class.
+ // While not strtictly following the Singleton pattern, as class instances
+ // are obtained through Dependency Injection, it allows for every instance
+ // of the class to share the relevant state.
+ //
+ // The shared state are the Observable and Observer, and they are only
+ // available when runnin on browser to avoid session confusion.
+ private static sessionInfoObservable: Observable = null;
+ private static _sessionInfoObserver: Observer = null;
constructor(
private http: HttpClient,
+ private browser: BrowserService,
+ private cookies: CookiesService,
+ private environmentService: EnvironmentService,
+ @Inject(PLATFORM_ID) private platformId: Object,
) {
this.http = http;
}
- storeToken(token: string) {
- const storage = window.localStorage;
- storage.setItem('session.service.token', token);
+ getCheckSessionUrl(): string {
+ return this.environmentService.getApiRoot() + '/sessions/check';
}
-
- removeToken() {
- const storage = window.localStorage;
- storage.removeItem('session.service.token');
+ getLoginUrl(): string {
+ return this.environmentService.getApiRoot() + '/sessions/login';
}
-
- getToken(): string {
- const storage = window.localStorage;
- const token = storage.getItem('session.service.token');
-
- return token;
+ getRegisterUrl(): string {
+ return this.environmentService.getApiRoot() + '/sessions/register';
}
+ getRegisterValidateUrl(): string {
+ return this.environmentService.getApiRoot() + '/sessions/register/verify';
+ }
+ getResetPasswordUrl(): string {
+ return this.environmentService.getApiRoot() + '/sessions/login/reset';
+ }
+ getValidatePasswordUpdateUrl(): string {
+ return this.environmentService.getApiRoot() + '/sessions/login/reset/validate';
+ }
+ getPasswordUpdateUrl(): string {
+ return this.environmentService.getApiRoot() + '/sessions/login/reset/update';
+ }
+ getUploadAssetToProgramIdUrl(programId: string): string {
+ return this.environmentService.getApiRoot() + `/programs/by-id/${programId}/assets`;
+ }
+
async getUserApiRoot(): Promise {
- // tslint:disable-next-line:no-debugger
- let session = SessionService.EstablishedSession;
- if (session === undefined) {
- session = await this.getSession();
+ const session = await this.getSession();
+ if (!session.active) {
+ throw Error("[getUserApiRoot] No active session");
}
return this.getApiRootForUser(session.username);
}
getApiRootForUser(username: string): string {
- return API.ApiRoot + '/users/' + username;
+ return this.environmentService.getApiRoot() + '/users/' + username;
}
async getApiRootForUserId(user_id?: string): Promise {
if (!user_id) {
- let session = SessionService.EstablishedSession;
- if (session === undefined) {
- session = await this.getSession();
+ const session = await this.getSession();
+ if (!session.active) {
+ throw Error("[getApiRootForUserId] No active session");
}
user_id = session.user_id;
}
- return API.ApiRoot + '/users/id/' + user_id;
+ return this.environmentService.getApiRoot() + '/users/id/' + user_id;
+ }
+
+ async getApiRootForUserIdNew(user_id?: string): Promise {
+ if (!user_id) {
+ const session = await this.getSession();
+ if (!session.active) {
+ throw Error("[getApiRootForUserIdNew] No active session");
+ }
+ user_id = session.user_id;
+ }
+ return this.environmentService.getApiRoot() + '/users/by-id/' + user_id;
+ }
+
+ async getUserAvatarUrl(): Promise {
+ const root = await this.getApiRootForUserIdNew();
+
+ return `${root}/picture`;
+ }
+
+ getUpdateUserAvatarUrl(): Promise {
+ return this.getUserAvatarUrl();
+ }
+
+ async generateApiTokenForScopes(scopes: string[]): Promise<{ token: string}> {
+ const url = this.environmentService.getApiRoot() + `/tokens`;
+ const req = await this.http.post(url, JSON.stringify({ scopes: scopes }), {
+ headers: this.addJsonContentType(this.getAuthHeader()),
+ }).toPromise();
+
+
+ return (req as any).value;
+ }
+
+ storeToken(token: string) {
+ const storage = this.browser.window.localStorage;
+
+ storage.setItem('session.service.token', token);
+ this.cookies.put(this.COOKIE_TOKEN_KEY, token);
+ }
+
+ removeToken() {
+ const storage = this.browser.window.localStorage;
+ storage.removeItem('session.service.token');
+ this.cookies.remove(this.COOKIE_TOKEN_KEY);
+ }
+
+ getToken(): string | null {
+ const storage = this.browser.window.localStorage;
+
+ if (!storage) { // Might happen on SSR
+ const auth = this.cookies.get(this.COOKIE_TOKEN_KEY);
+ return auth || null;
+ }
+
+ const token = storage.getItem('session.service.token');
+
+ return token;
+ }
+
+ async updateUserSettings(user_settings_update : { is_advanced: boolean, is_in_preview?: boolean }): Promise {
+ const url = (await this.getApiRootForUserId()) + '/settings';
+ const response = await (this.http
+ .post(url, JSON.stringify(user_settings_update),
+ { headers: this.addJsonContentType(this.getAuthHeader()) })
+ .toPromise());
+
+ return (response as { success: boolean }).success;
+ }
+
+ async updateUserProfileSettings(userProfile: { groups: string[] }) {
+ const url = `${await this.getApiRootForUserId()}/profile`;
+ const response = await (this.http
+ .post(url, JSON.stringify(userProfile),
+ { headers: this.addJsonContentType(this.getAuthHeader()) })
+ .toPromise());
+
+ return (response as { success: boolean }).success;
}
getAuthHeader(): HttpHeaders {
@@ -89,98 +200,144 @@ export class SessionService {
return headers.append('content-type', contentType);
}
+ async getSessionMonitor(): Promise<{session: Session, monitor: Observable | null}> {
+ if (isPlatformServer(this.platformId)) {
+ // This operation is used to change between sessions on browser.
+ // Trying to do that also on the server could (in theory) be
+ // done by tracking the token.
+ //
+ // As this is most interesting accross login operations, the token
+ // cannot be used (and should not happen during SSR, either), so the capability is removed on the server.
+ return {
+ session: await this.getSession(),
+ monitor: null,
+ };
+ }
+
+ if (!SessionService.sessionInfoObservable) {
+ this._monitorSession();
+ }
+
+ return {
+ session: await this.getSession(),
+ monitor: SessionService.sessionInfoObservable,
+ };
+ }
+
getSession(): Promise {
- if (this.getToken() === null) {
- return Promise.resolve(null);
+ const token = this.getToken();
+ if (token === null) {
+ // Return unactive session
+ return Promise.resolve({
+ username: null,
+ user_id: null,
+ active: false,
+ tags: {
+ is_admin: false,
+ is_advanced: false,
+ is_in_preview: false,
+ }
+ });
+ }
+ else {
+ // This is (hopefully) a temporary mechanism to migrate users that
+ // only have localStorage authentication to cookie-enabled auth.
+ this._duplicateSessionTokenToCookie();
+ }
+
+ if (this.EstablishedSessions[token] && this.EstablishedSessions[token].active) {
+ return Promise.resolve(this.EstablishedSessions[token]);
}
- return (this.http
- .get(this.checkSessionUrl, { headers: this.getAuthHeader() }).pipe(
- map((response) => {
- const check = response as any;
- const session = new Session(check.success,
- check.username,
- check.user_id);
- SessionService.EstablishedSession = session;
+ if (!this.EstablishmentPromises[token]) {
+ const thisPromise = this.EstablishmentPromises[token] = this.forceUpdateSession().catch(err => {
+ console.error(err);
- return session;
- }))
- .toPromise());
+ // "Un-cache" the failed session
+ if (this.EstablishmentPromises[token] === thisPromise) {
+ this.EstablishmentPromises[token] = null;
+ this._updateSession(this.INACTIVE_SESSION);
+ }
+
+ // Return unactive session
+ return Promise.resolve({
+ username: null,
+ user_id: null,
+ active: false,
+ tags: {
+ is_admin: false,
+ is_advanced: false,
+ is_in_preview: false,
+ }
+ });
+ });
+ }
+
+ return this.EstablishmentPromises[token];
}
login(username: string, password: string): Promise {
return progbar.track(this.http
- .post(this.loginUrl,
- JSON.stringify({ username: username, password: password }),
- { headers: this.addJsonContentType(this.getAuthHeader()) }).pipe(
- map(response => {
- const data = response as any;
- if (data.success) {
- this.storeToken(data.token);
-
- const newSession = new Session(true, username, data.user_id);
- SessionService.EstablishedSession = newSession;
-
- return true;
- }
- return false;
- }))
- .toPromise());
+ .post(this.getLoginUrl(),
+ JSON.stringify({ username: username, password: password }),
+ { headers: this.addJsonContentType(this.getAuthHeader()) }).toPromise()
+ .then(async response => {
+ const data = response as any;
+ if (data.success) {
+
+ this.storeToken(data.token);
+ await this.forceUpdateSession();
+
+ return true;
+ }
+ return false;
+ }));
}
logout() {
+ this._updateSession(this.INACTIVE_SESSION);
this.removeToken();
- SessionService.EstablishedSession = undefined;
}
-
register(username: string, email: string, password: string): Promise<{ success: boolean, continue_to_login: boolean}> {
const headers = this.addJsonContentType(new HttpHeaders());
- return progbar.track(this.http
- .post(
- this.registerUrl,
- JSON.stringify({
- username: username
- , password: password
- , email: email
- }),
- { headers }).pipe(
- map(response => {
- return {
- success: (response as any).success,
- continue_to_login: (response as any).ready
- };
- }))
- .toPromise());
+ return progbar.track(
+ this.http
+ .post(
+ this.getRegisterUrl(),
+ JSON.stringify({
+ username: username
+ , password: password
+ , email: email
+ }),
+ { headers }).toPromise()
+ .then(response => {
+ return {
+ success: (response as any).success,
+ continue_to_login: (response as any).ready
+ }}));
}
-
validateRegisterCode(verificationCode: string): Promise {
const headers = this.addJsonContentType(new HttpHeaders());
return progbar.track(this.http
.post(
- this.registerValidateUrl,
+ this.getRegisterValidateUrl(),
JSON.stringify({
verification_code: verificationCode
}),
- { headers }).pipe(
- map(response => {
+ { headers }).toPromise()
+ .then(response => {
const success = (response as any).success;
if (!success) {
throw new Error(success.message);
}
-
this.storeToken((response as any).session.token);
- const session = new Session(true,
- (response as any).session.username,
- (response as any).session.user_id);
- SessionService.EstablishedSession = session;
- return session;
- }))
- .toPromise());
+ return this.forceUpdateSession();
+ }));
}
requestResetPassword(email: string): Promise {
@@ -188,15 +345,14 @@ export class SessionService {
return progbar.track(this.http
.post(
- this.resetPasswordUrl,
+ this.getResetPasswordUrl(),
JSON.stringify({
email: email
}),
- { headers }).pipe(
- map(_response => {
+ { headers }).toPromise()
+ .then(_response => {
return;
- }))
- .toPromise());
+ }));
}
validatePasswordUpdateCode(verificationCode: string): Promise {
@@ -204,15 +360,14 @@ export class SessionService {
return progbar.track(this.http
.post(
- this.validatePasswordUpdateUrl,
+ this.getValidatePasswordUpdateUrl(),
JSON.stringify({
verification_code: verificationCode
}),
- { headers }).pipe(
- map(_response => {
+ { headers }).toPromise()
+ .then(_response => {
return;
- }))
- .toPromise());
+ }));
}
resetPasswordUpdate(verificationCode: string, password: string): Promise {
@@ -220,15 +375,83 @@ export class SessionService {
return progbar.track(this.http
.post(
- this.passwordUpdateUrl,
+ this.getPasswordUpdateUrl(),
JSON.stringify({
verification_code: verificationCode,
password: password,
}),
- { headers }).pipe(
- map(_response => {
+ { headers }).toPromise()
+ .then(_response => {
return;
- }))
- .toPromise());
+ }));
+ }
+
+ async updateUserAvatar(image: File): Promise {
+ const formData = new FormData();
+ formData.append('file', image);
+
+ const url = await this.getUpdateUserAvatarUrl();
+
+ await this.http.post(url, formData, { headers: this.getAuthHeader() }).toPromise()
+ }
+
+ async uploadAsset(file: File, programId: string): Promise<{ success: true, value: string }> {
+ const formData = new FormData();
+ formData.append('file', file);
+
+ const url = await this.getUploadAssetToProgramIdUrl(programId);
+
+ const result = await this.http.post(url, formData, { headers: this.getAuthHeader() }).toPromise();
+
+ return result as any;
+ }
+
+ private _monitorSession() {
+ SessionService.sessionInfoObservable = new Observable((observer) => {
+ SessionService._sessionInfoObserver = observer;
+ // This will be operated from `_updateSession`
+ });
+ }
+
+ private _updateSession(session: Session) {
+ const token = this.getToken();
+ if (!token) {
+ if (session) {
+ throw new Error("Cannot update session with no token");
+ }
+ else {
+ throw new Error("Finishing session when token is null, this should NOT happen");
+ }
+ }
+
+ this.EstablishedSessions[token] = session;
+ if (isPlatformBrowser(this.platformId) && SessionService._sessionInfoObserver) {
+ SessionService._sessionInfoObserver.next({ session: session });
+ }
+ }
+
+ private _duplicateSessionTokenToCookie() {
+ const token = this.getToken();
+ if (token && !(this.cookies.get(this.COOKIE_TOKEN_KEY))) {
+ this.cookies.put(this.COOKIE_TOKEN_KEY, token);
+ }
+ }
+
+ public async forceUpdateSession(): Promise {
+ if (this.getToken() === null) {
+ return Promise.resolve(null);
+ }
+
+ const response = (await this.http
+ .get(this.getCheckSessionUrl(), { headers: this.getAuthHeader() }).toPromise());
+
+ const check = response as any;
+ const session = new Session(check.success,
+ check.username,
+ check.user_id,
+ check.tags);
+ this._updateSession(session);
+
+ return session;
}
}
diff --git a/frontend/src/app/session.ts b/frontend/src/app/session.ts
index 1ebb6050..751374ab 100644
--- a/frontend/src/app/session.ts
+++ b/frontend/src/app/session.ts
@@ -1,11 +1,18 @@
-export class Session {
+import {User, UserTags} from './user';
+
+export class Session implements User {
+ // User interface
username: string;
- active: boolean;
user_id: string;
+ tags: UserTags;
+
+ // New elements
+ active: boolean;
- constructor(active: boolean, username: string, user_id: string) {
+ constructor(active: boolean, username: string, user_id: string, tags: UserTags) {
this.active = active;
this.username = username;
this.user_id = user_id;
+ this.tags = tags || { is_admin : false, is_advanced: false, is_in_preview: false };
}
}
diff --git a/frontend/src/app/settings/admin-settings/admin-settings.component.css b/frontend/src/app/settings/admin-settings/admin-settings.component.css
new file mode 100644
index 00000000..a43d4c56
--- /dev/null
+++ b/frontend/src/app/settings/admin-settings/admin-settings.component.css
@@ -0,0 +1,35 @@
+.settings-section {
+ width: 100%;
+}
+
+tbody tr:hover {
+ background-color: #eee;
+}
+
+.warning-icon {
+ color: #ffa500;
+}
+
+.error-icon {
+ color: #ff0000;
+}
+
+.stat-card {
+ padding: 0.5ex;
+ border: 1px solid rgba(0,0,0,0.3);
+ text-align: center;
+}
+
+.stat-card.running-service {
+ color: white;
+ background-color: #080;
+}
+.stat-card.stopped-service {
+ color: white;
+ background-color: #b00;
+}
+
+.loading-message {
+ padding: 1ex;
+ text-align: center;
+}
diff --git a/frontend/src/app/settings/admin-settings/admin-settings.component.html b/frontend/src/app/settings/admin-settings/admin-settings.component.html
new file mode 100644
index 00000000..34e5bb01
--- /dev/null
+++ b/frontend/src/app/settings/admin-settings/admin-settings.component.html
@@ -0,0 +1,61 @@
+
+ Loading stats...
+
+
+
+
+
+
+ UserId
+ Username
+ Email
+ Warnings
+ Tags
+ Reg. time
+ Last active
+
+
+
+
+ {{user.user_id.substring(0,9)}}…
+
+ {{user.username}}
+
+
+ {{user.email}}
+
+
+ {{note.icon}}
+
+
+
+ admin
+ advanced
+ in preview
+
+
+
+ {{getLocalRegistrationTime(user)}}
+
+
+ {{getLocalLastActiveTime(user)}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ edit Upload {{ loadedImage ? ' new ' : '' }} picture
+
+
+ cloud_upload
+ Save
+
+
+
+
+
+
+
+ Collaborators
+
+
+ Update the collaborator list:
+
+
+
+
+
+
+ cloud_upload
+ Save
+
+
+
+
+ Administration
+
+
+ Which collaborators will be able to use the group's bridges for private programs?
+
+
+
+
+ {{ minCollaboratorForPrivateBridgeUsage !== 'not_allowed'
+ ? _roleToIcon(minCollaboratorForPrivateBridgeUsage)
+ : 'do_not_disturb' }}
+
+ {{ group_admitted_for[minCollaboratorForPrivateBridgeUsage] }}
+
+
+ do_not_disturb {{ group_admitted_for['not_allowed'] }}{{ _roleToIcon('admin') }} {{ group_admitted_for['admin'] }}{{ _roleToIcon('editor') }} {{ group_admitted_for['editor'] }}{{ _roleToIcon('viewer') }} {{ group_admitted_for['viewer'] }}
+
+
+
+ cloud_upload
+ Save
+
+
+
+ Deletion
+
+
+ delete_forever Delete group
+
+
+
+
diff --git a/frontend/src/app/settings/group-settings/group-settings.component.ts b/frontend/src/app/settings/group-settings/group-settings.component.ts
new file mode 100644
index 00000000..0fbaae22
--- /dev/null
+++ b/frontend/src/app/settings/group-settings/group-settings.component.ts
@@ -0,0 +1,167 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatButton } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BridgeService } from 'app/bridges/bridge.service';
+import { ConnectionService } from 'app/connection.service';
+import { GroupInfo } from 'app/group';
+import { GroupService, UserAutocompleteInfo } from 'app/group.service';
+import { MonitorService } from 'app/monitor.service';
+import { ProgramService } from 'app/program.service';
+import { ServiceService } from 'app/service.service';
+import { Session } from 'app/session';
+import { SessionService } from 'app/session.service';
+import { Collaborator, CollaboratorRole, roleToIcon } from 'app/types/collaborator';
+import { getGroupPictureUrl } from 'app/utils';
+import { ConfirmDeleteDialogComponent } from 'app/dialogs/confirm-delete-dialog/confirm-delete-dialog.component';
+import { GroupCollaboratorEditorComponent } from 'app/components/group-collaborator-editor/group-collaborator-editor.component';
+import { EnvironmentService } from 'app/environment.service';
+
+const DEFAULT_ROLE : CollaboratorRole = 'editor';
+
+@Component({
+ // moduleId: module.id,
+ selector: 'app-my-group-settings',
+ templateUrl: './group-settings.component.html',
+ providers: [BridgeService, ConnectionService, GroupService, MonitorService, ProgramService, SessionService, ServiceService],
+ styleUrls: [
+ 'group-settings.component.css',
+ '../../libs/css/material-icons.css',
+ '../../libs/css/bootstrap.min.css',
+ ],
+})
+export class GroupSettingsComponent {
+ session: Session;
+ is_advanced: boolean;
+ groupInfo: GroupInfo;
+
+ loadedImage: File = null;
+ minCollaboratorForPrivateBridgeUsage : CollaboratorRole | 'not_allowed';
+ inServerMinCollabLevelForBridge : CollaboratorRole | 'not_allowed';
+
+ @ViewChild('imgPreview') imgPreview: ElementRef ;
+ @ViewChild('imgFileInput') imgFileInput: ElementRef;
+ @ViewChild('saveAvatarButton') saveAvatarButton: MatButton;
+
+ @ViewChild('saveCollaboratorsButton') saveCollaboratorsButton: MatButton;
+ @ViewChild('saveAdminSettingsButton') saveAdminSettingsButton: MatButton;
+ @ViewChild('saveAdminButton') saveAdminButton: MatButton;
+ @ViewChild('deletegroupButton') deletegroupButton: MatButton;
+
+ collaborators: Collaborator[];
+ @ViewChild('groupCollaboratorEditor') groupCollaboratorEditor: GroupCollaboratorEditorComponent;
+
+ readonly _getGroupPicture: (userId: string) => string;
+ readonly _roleToIcon = roleToIcon;
+
+ readonly group_admitted_for = {
+ not_allowed: 'Not allowed for anyone',
+ admin: 'Only Admins',
+ editor: 'Editors and Admins',
+ viewer: 'Viewers, Editors and Admins',
+ }
+
+ constructor(
+ public sessionService: SessionService,
+ private route: ActivatedRoute,
+ public router: Router,
+ public dialog: MatDialog,
+ private groupService: GroupService,
+ private environmentService: EnvironmentService,
+ ) {
+ this._getGroupPicture = getGroupPictureUrl.bind(this, environmentService);
+
+ this.route.data
+ .subscribe((data: { groupInfo: { info: GroupInfo, collaborators: Collaborator[] }, session: Session }) => {
+ this.session = data.session;
+ if (!data.session.active) {
+ this.router.navigate(['/login'], {replaceUrl:true});
+ }
+ else {
+ this.is_advanced = this.session.tags.is_advanced;
+ this.groupInfo = data.groupInfo.info;
+ this.inServerMinCollabLevelForBridge = this.minCollaboratorForPrivateBridgeUsage = this.groupInfo.min_level_for_private_bridge_usage;
+
+ this.collaborators = data.groupInfo.collaborators;
+ }
+ });
+ }
+
+ onChangeAdvancedSettings(event: MatSlideToggleChange) {
+ this.is_advanced = event.checked;
+ }
+
+ async saveCollaborators() {
+ const buttonClass = this.saveCollaboratorsButton._elementRef.nativeElement.classList;
+ buttonClass.add('started');
+ buttonClass.remove('completed');
+
+ await this.groupService.updateGroupCollaboratorList(this.groupInfo.id, this.groupCollaboratorEditor.getCollaborators());
+
+ buttonClass.remove('started');
+ buttonClass.add('completed');
+ }
+
+ async saveAdminSettings() {
+ const buttonClass = this.saveAdminSettingsButton._elementRef.nativeElement.classList;
+ buttonClass.add('started');
+ buttonClass.remove('completed');
+
+ await this.groupService.updateMinLevelForPrivateBridgeUsage(this.groupInfo.id, this.minCollaboratorForPrivateBridgeUsage);
+
+ this.inServerMinCollabLevelForBridge = this.minCollaboratorForPrivateBridgeUsage;
+
+ buttonClass.remove('started');
+ buttonClass.add('completed');
+ }
+
+ previewImage(event: KeyboardEvent) {
+ const input: HTMLInputElement = event.target as HTMLInputElement;
+
+ if (input.files && input.files[0]) {
+ const reader = new FileReader();
+
+ reader.onload = (e) => {
+ this.loadedImage = input.files[0];
+ this.imgPreview.nativeElement.src = e.target.result as string;
+ }
+
+ reader.readAsDataURL(input.files[0]);
+ }
+ }
+
+ async saveAvatar() {
+ const buttonClass = this.saveAvatarButton._elementRef.nativeElement.classList;
+ buttonClass.add('started');
+ buttonClass.remove('completed');
+
+ await this.groupService.updateGroupAvatar(this.groupInfo.id, this.loadedImage);
+ this.loadedImage = null;
+
+ buttonClass.remove('started');
+ buttonClass.add('completed');
+ }
+
+ startDeleteGroup() {
+ const programData = { name: this.groupInfo.name };
+
+ const dialogRef = this.dialog.open(ConfirmDeleteDialogComponent, {
+ data: programData
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ if (!result) {
+ console.log("Cancelled");
+ return;
+ }
+
+ const deletion = (this.groupService.deleteGroup(this.groupInfo.id)
+ .then(() => this.router.navigateByUrl("/"))
+ .catch(() => { return false; }));
+ });
+ }
+
+}
diff --git a/frontend/src/app/settings/user-settings/settings.component.html b/frontend/src/app/settings/user-settings/settings.component.html
new file mode 100644
index 00000000..ff59b639
--- /dev/null
+++ b/frontend/src/app/settings/user-settings/settings.component.html
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+
+
+ edit Upload {{ loadedImage ? ' new ' : '' }} picture
+
+
+ cloud_upload
+ Save
+
+
+
+
+
+
+
+
+
+ Debug info
+
+
+ User ID:
+ {{session.user_id}}
+
+
+
+
+ User settings
+
+
+ Advanced controls
+
+
+ {{ is_advanced ? 'Enabled' : 'Disabled' }}
+
+
+
+
+ Preview features in Development
+
+
+ {{ is_in_preview ? 'Enabled' : 'Disabled' }}
+
+
+
+
+ Profile info
+
+
+ Public collaborations
+
+
+
+
+ {{ group.name }}
+
+
+
+ You have not joined any group yet.
+
+
+
+
+
+
+ cloud_upload
+ Save
+
+
+
+
+ ;
+ @ViewChild('imgFileInput') imgFileInput: ElementRef;
+ @ViewChild('saveAvatarButton') saveAvatarButton: MatButton;
+
+ readonly _getUserPicture: (userId: string) => string;
+
+ groups: GroupInfo[];
+ listedGroups: {[key: string]: boolean} = {};
+
+ bridges: BridgeIndexData[];
+
+ constructor(
+ public sessionService: SessionService,
+ public router: Router,
+ private route: ActivatedRoute,
+ private environmentService: EnvironmentService,
+
+ public dialog: MatDialog,
+ ) {
+ this._getUserPicture = getUserPictureUrl.bind(this, environmentService);
+
+ this.route.data
+ .subscribe((data: { groups: GroupInfo[], user_profile: UserProfileInfo }) => {
+ this.groups = data.groups;
+
+ for (const group of data.user_profile.groups) {
+ this.listedGroups[group.id] = true;
+ }
+ });
+ }
+
+ // tslint:disable-next-line:use-life-cycle-interface
+ ngOnInit(): void {
+ this.route.data
+ .subscribe({
+ next: (data: { session: Session }) => {
+ this.session = data.session;
+ if (!data.session.active) {
+ this.router.navigate(['/login'], {replaceUrl:true});
+ }
+ else {
+ this.is_advanced = this.session.tags.is_advanced;
+ this.is_in_preview = this.session.tags.is_in_preview;
+ }
+ },
+ error: err => {
+ console.log('Error getting session', err);
+ this.router.navigate(['/login'], {replaceUrl:true});
+ }
+ });
+ }
+
+ onChangeAdvancedSettings(event: MatSlideToggleChange) {
+ this.is_advanced = event.checked;
+ }
+
+ onChangeInPreviewSettings(event: MatSlideToggleChange) {
+ this.is_in_preview = event.checked;
+ }
+
+ async saveUserSettings() {
+ // Send update
+ const button = document.getElementById('user-settings-save-button');
+ if (button){
+ button.classList.add('started');
+ button.classList.remove('completed');
+ }
+
+ const publicGroups = [];
+ for (const group of Object.keys(this.listedGroups)) {
+ if (this.listedGroups[group]) {
+ publicGroups.push(group);
+ }
+ }
+
+ await this.sessionService.updateUserProfileSettings({ groups: publicGroups });
+
+ const userSettings: {is_advanced: boolean, is_in_preview?: boolean} = {
+ is_advanced: this.is_advanced,
+ };
+
+ if (this.is_advanced) {
+ userSettings.is_in_preview = this.is_in_preview;
+ }
+
+ const success = await this.sessionService.updateUserSettings(userSettings);
+
+ if (success) {
+ this.session = await this.sessionService.forceUpdateSession();
+ }
+
+ if (button){
+ button.classList.remove('started');
+ button.classList.add('completed');
+ }
+ }
+
+ previewImage(event: KeyboardEvent) {
+ const input: HTMLInputElement = event.target as HTMLInputElement;
+
+ if (input.files && input.files[0]) {
+ const reader = new FileReader();
+
+ reader.onload = (e) => {
+ this.loadedImage = input.files[0];
+ this.imgPreview.nativeElement.src = e.target.result as string;
+ }
+
+ reader.readAsDataURL(input.files[0]);
+ }
+ }
+
+ async saveUserAvatar() {
+ const buttonClass = this.saveAvatarButton._elementRef.nativeElement.classList;
+ buttonClass.add('started');
+ buttonClass.remove('completed');
+
+ await this.sessionService.updateUserAvatar(this.loadedImage);
+
+ buttonClass.remove('started');
+ buttonClass.add('completed');
+ }
+}
diff --git a/frontend/src/app/summarize_json.filter.ts b/frontend/src/app/summarize_json.filter.ts
index ae2c3d74..6b1d0e46 100644
--- a/frontend/src/app/summarize_json.filter.ts
+++ b/frontend/src/app/summarize_json.filter.ts
@@ -1,12 +1,13 @@
import { Pipe, PipeTransform } from '@angular/core';
import { GetTypeOfJson, JSONType } from './json';
+type JsonItem = string | JsonItem[] | {[key: string]: JsonItem};
+
@Pipe({
name: 'SummarizeJSON',
})
-
export class SummarizeJSON implements PipeTransform {
- transform(element) {
+ transform(element: any): JsonItem {
const jtype = GetTypeOfJson(element);
switch (jtype) {
case JSONType.Null:
@@ -28,7 +29,7 @@ export class SummarizeJSON implements PipeTransform {
case JSONType.Map:
{
- const transformed = {};
+ const transformed: {[key: string]: JsonItem} = {};
for (const key in element) {
if (!element.hasOwnProperty(key)) {
continue;
diff --git a/frontend/src/app/syncronizer.ts b/frontend/src/app/syncronizer.ts
new file mode 100644
index 00000000..5d4ca62e
--- /dev/null
+++ b/frontend/src/app/syncronizer.ts
@@ -0,0 +1,4 @@
+import { Subscribable } from 'rxjs';
+
+type Pusher = { push(value: T): void; };
+export type Synchronizer = Subscribable & Pusher;
diff --git a/frontend/src/app/templates/create-dialog.component.ts b/frontend/src/app/templates/create-dialog.component.ts
index f0ce0ece..703ae514 100644
--- a/frontend/src/app/templates/create-dialog.component.ts
+++ b/frontend/src/app/templates/create-dialog.component.ts
@@ -6,6 +6,7 @@ import { Template } from './template';
type VariableType = 'input' | 'ouput';
type PromiseHandler = { resolve: (value: [string, any[]]) => void, reject: Function };
+type TemplateChunk = { type: 'text' | 'line' | 'variable', content: string | TemplateChunk[], class?: string };
@Component({
selector: 'template-create-dialog-component',
@@ -20,7 +21,7 @@ export class TemplateCreateDialogComponent {
promise: PromiseHandler;
selectedVar: HTMLElement;
variables: string[];
- usedOutputs: {};
+ usedOutputs: {[key: string]: boolean};
allOutputsUsed: boolean;
constructor(
@@ -224,7 +225,7 @@ export class TemplateCreateDialogComponent {
return element;
}
- setOutputUsage(name, value) {
+ setOutputUsage(name: string, value: boolean) {
this.usedOutputs[name] = value;
this.checkAllOutputsUsed();
@@ -262,8 +263,8 @@ export class TemplateCreateDialogComponent {
this.splitChildren(editor as HTMLElement, marker);
}
- extractTemplate(element: HTMLElement) {
- const children = [];
+ extractTemplate(element: HTMLElement): TemplateChunk[] {
+ const children: TemplateChunk[] = [];
for (let i = 0; i < element.childNodes.length; i++) {
const node = element.childNodes[i];
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/01-simple.spec.ts b/frontend/src/app/tests/graphic/ui-element-positioning/01-simple.spec.ts
new file mode 100644
index 00000000..89468140
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/01-simple.spec.ts
@@ -0,0 +1,149 @@
+import { async, TestBed } from '@angular/core/testing';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { FlowWorkspace } from '../../../flow-editor/flow_workspace';
+import { SEPARATION as PositioningSeparation } from 'app/flow-editor/ui-blocks/renderers/positioning';
+import { configureTestBed } from './builder';
+
+describe('FlowUI positioning: 01. Simple positioning. ', () => {
+
+ beforeEach(async(() => {
+ configureTestBed(TestBed);
+ }));
+
+ it('Should work vertically', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const graph: FlowGraph = { edges: [], nodes: {
+ // Page
+ page: {
+ data: {
+ value: {
+ "options": {
+ "type": "ui_flow_block",
+ "subtype": "container_flow_block",
+ "outputs": [],
+ "isPage": true,
+ "inputs": [],
+ "id": "responsive_page_holder",
+ },
+ "extra": {
+ "dimensions": {
+ "width": 888.9020385742188,
+ "height": 856.9749755859375
+ }
+ }
+ },
+ type: "ui_flow_block",
+ subtype: "container_flow_block"
+ },
+ container_id: null,
+ position: { x: 0, y: 0 },
+ },
+
+ // Ui Horizontal Section
+ container: {
+ data: {
+ "value": {
+ "options": {
+ "type": "ui_flow_block",
+ "subtype": "container_flow_block",
+ "outputs": [],
+ "inputs": [],
+ "id": "horizontal_ui_section",
+ },
+ "extra": {
+ "dimensions": {
+ "width": 886.9020385742188,
+ "height": 53.024993896484375
+ }
+ }
+ },
+ "type": "ui_flow_block",
+ "subtype": "container_flow_block"
+ },
+ container_id: 'page',
+ position: { x: 10, y: 10 },
+ },
+
+ // Simple element
+ el1: {
+ data: {
+ "value": {
+ "options": {
+ "type": "ui_flow_block",
+ "outputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "string",
+ "name": "button text"
+ }
+ ],
+ "inputs": [],
+ "id": "simple_button",
+ },
+ "extra": {
+ "textContent": "Element 1"
+ }
+ },
+ "type": "ui_flow_block"
+ },
+ container_id: 'container',
+ position: { x: 5, y: 20 },
+ },
+
+ // Simple element
+ el2: {
+ data: {
+ "value": {
+ "options": {
+ "type": "ui_flow_block",
+ "outputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "string",
+ "name": "button text"
+ }
+ ],
+ "inputs": [],
+ "id": "simple_button",
+ },
+ "extra": {
+ "textContent": "Element 2"
+ }
+ },
+ "type": "ui_flow_block"
+ },
+ container_id: 'container',
+ position: { x: 7, y: 20 },
+ },
+ }};
+ workspace.load(graph);
+
+ workspace.repositionAll();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(4);
+
+ // Sample assertions
+ expect(result.nodes.el1.position.x).toBeGreaterThan(result.nodes.container.position.x);
+ expect(result.nodes.el2.position.x).toBeGreaterThan(result.nodes.container.position.x);
+
+ expect(result.nodes.el2.position.x).toBeGreaterThan(result.nodes.el1.position.x + PositioningSeparation);
+
+ // Might be greater than because of the borders
+ expect(result.nodes.container.position.x).toBeGreaterThanOrEqual(result.nodes.page.position.x);
+ });
+});
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/02-responsive-stability.spec.ts b/frontend/src/app/tests/graphic/ui-element-positioning/02-responsive-stability.spec.ts
new file mode 100644
index 00000000..1bff7263
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/02-responsive-stability.spec.ts
@@ -0,0 +1,93 @@
+import { async, TestBed } from '@angular/core/testing';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { FlowWorkspace } from '../../../flow-editor/flow_workspace';
+import { SEPARATION } from 'app/flow-editor/ui-blocks/renderers/positioning';
+import { configureTestBed, pageGraph } from './builder';
+import { doesNotChangePositionsOnReposition } from './utils';
+
+describe('FlowUI positioning: 02. Responsive stability.', () => {
+
+ beforeEach(async(() => {
+ configureTestBed(TestBed);
+ }));
+
+ it('Should work in the first invocation and be stable.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, [ topLeft, botLeft, right ]] = pageGraph([
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ {
+ type: 'simple_button',
+ x: 10, y: 20
+ },
+ {
+ type: 'simple_button',
+ x: 100, y: 10,
+ }
+ ]);
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(4);
+ /**
+ * Source:
+ * +--------+ +--------+
+ * | Btn1 | | Btn3 |
+ * +--------+ +--------+
+ * +--------+
+ * | Btn2 |
+ * +--------+
+ *
+ *
+ * Expected result:
+ * +--------+
+ * | Btn1 |
+ * +--------+ +--------+
+ * | Btn3 |
+ * +--------+ +--------+
+ * | Btn2 |
+ * +--------+
+ */
+
+ const check = () => {
+ expect(result.nodes[topLeft].position.x
+ + workspace.getBlock(topLeft).getBodyArea().width
+ + SEPARATION).toEqual(result.nodes[right].position.x);
+
+ expect(result.nodes[botLeft].position.x
+ + workspace.getBlock(topLeft).getBodyArea().width
+ + SEPARATION).toEqual(result.nodes[right].position.x);
+
+ expect(result.nodes[topLeft].position.y
+ + workspace.getBlock(topLeft).getBodyArea().height
+ + SEPARATION).toEqual(result.nodes[botLeft].position.y);
+
+ expect(result.nodes[topLeft].position.y).toBeLessThan(result.nodes[right].position.y);
+ expect(result.nodes[botLeft].position.y).toBeGreaterThan(result.nodes[right].position.y);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, [ topLeft, botLeft, right ]);
+
+ // Check again
+ check();
+ });
+
+});
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/03-bad-cases.spec.ts b/frontend/src/app/tests/graphic/ui-element-positioning/03-bad-cases.spec.ts
new file mode 100644
index 00000000..95b831ae
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/03-bad-cases.spec.ts
@@ -0,0 +1,94 @@
+import { async, TestBed } from '@angular/core/testing';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { FlowWorkspace } from '../../../flow-editor/flow_workspace';
+import { SEPARATION } from 'app/flow-editor/ui-blocks/renderers/positioning';
+import { configureTestBed, pageGraph } from './builder';
+
+describe('FlowUI positioning: 03. Bad cases. ', () => {
+
+ beforeEach(async(() => {
+ configureTestBed(TestBed);
+ }));
+
+ it('Element right of horizontal separator.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, [ top, bot, sep, right ], page] = pageGraph([
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ {
+ type: 'simple_button',
+ x: 10, y: 200
+ },
+ {
+ type: 'horizontal_separator',
+ x: 2, y: 100,
+ },
+ {
+ type: 'simple_button',
+ x: 10, y: 100,
+ },
+ ]);
+
+ workspace.load(graph);
+ workspace.repositionAll();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(5);
+ /**
+ * Source:
+ * +--------+
+ * | Btn1 |
+ * +--------+
+ * +-----------------+ +--------+
+ * | Horiz separator | | Btn3 |
+ * +-----------------+ +--------+
+ * +--------+
+ * | Btn2 |
+ * +--------+
+ *
+ *
+ * Expected result:
+ * +--------+
+ * | Btn1 |
+ * +--------+
+ * +-----------------+
+ * | Horiz separator |
+ * +-----------------+
+ * +--------+
+ * | Btn3 |
+ * +--------+
+ * +--------+
+ * | Btn2 |
+ * +--------+
+ */
+
+ const check = () => {
+ for (const [up, down] of [[ top, sep ], [sep, right], [right, bot]]) {
+ expect(result.nodes[up].position.y
+ + workspace.getBlock(up).getBodyArea().height
+ + SEPARATION).toEqual(result.nodes[down].position.y);
+ }
+ };
+
+ // Check once
+ check();
+
+ // Re-position
+ workspace.repositionAll();
+
+ // Check again
+ check();
+ });
+
+});
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/04-position-section-single-step.spec.ts b/frontend/src/app/tests/graphic/ui-element-positioning/04-position-section-single-step.spec.ts
new file mode 100644
index 00000000..4b4a2c9b
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/04-position-section-single-step.spec.ts
@@ -0,0 +1,644 @@
+import { async, TestBed } from '@angular/core/testing';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { FlowWorkspace } from '../../../flow-editor/flow_workspace';
+import { SEPARATION } from 'app/flow-editor/ui-blocks/renderers/positioning';
+import { configureTestBed, pageGraph } from './builder';
+import { doesNotChangePositionsOnReposition } from './utils';
+import { MAX_WIDTH as TEXT_MAX_WIDTH } from 'app/flow-editor/ui-blocks/renderers/fixed_text';
+
+describe('FlowUI positioning: 04. Position sections in a single step.', () => {
+
+ beforeEach(async(() => {
+ configureTestBed(TestBed);
+ }));
+
+ it('3 elements in NON-nested section in heavily distorted positions.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ },
+ ]);
+
+ const [ topLevel, left_btn, center_btn, right_btn ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(5);
+ /**
+ * Layout:
+ *
+ * +------------------------------------+
+ * | +-------+ +---------+ +--------+ |
+ * | | LeftB | | CenterB | | RightB | |
+ * | +-------+ +---------+ +--------+ |
+ * | Horizontal Section |
+ * +------------------------------------+
+ *
+ **/
+
+ const check = () => {
+ // Button alignment
+ for (const [pair, pair_left, pair_right] of [['left-center', left_btn, center_btn], ['center-right', center_btn, right_btn]]) {
+ const areaLeft = workspace.getBlock(pair_left).getBodyArea();
+ const areaRight = workspace.getBlock(pair_right).getBodyArea();
+
+ expect(areaLeft.y).toBe(areaRight.y);
+
+ expect(areaLeft.x + areaLeft.width)
+ .toBe(areaRight.x - SEPARATION,
+ `On button pair ${pair}. ${areaLeft.x} + ${areaLeft.width} =/= ${areaRight.x} - ${SEPARATION}`);
+ }
+
+ const areaTopLevel = workspace.getBlock(topLevel).getBodyArea();
+ // Button position on section
+ for (const [name, btn] of [['left', left_btn], ['center', center_btn], ['right', right_btn]]) {
+ const areaButton = workspace.getBlock(btn).getBodyArea();
+
+ expect(areaTopLevel.height)
+ .toBe(areaButton.height + SEPARATION * 2,
+ `On section-group ${name}. Height=${areaTopLevel.height} =/= ${areaButton.height} + ${SEPARATION} * 2 `);
+
+ expect(areaTopLevel.y + SEPARATION)
+ .toBe(areaButton.y,
+ `On section-group ${name}. Y=${areaTopLevel.y} + ${SEPARATION} =/= ${areaButton.y}`);
+ }
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+ it('3 elements in NESTED section in heavily distorted positions.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ },
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ },
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ }
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ },
+ ]);
+
+ const [ topLevel, left, left_btn, center, center_btn, right, right_btn ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(8);
+ /**
+ * Layout:
+ *
+ * +------------------------------------+
+ * |+---------++-----------++----------+|
+ * ||+-------+||+---------+||+--------+||
+ * ||| LeftB |||| CenterB |||| RightB |||
+ * ||+-------+||+---------+||+--------+||
+ * || Vert || Vert || Vert ||
+ * || Section || Section || Section ||
+ * |+---------++-----------++----------+|
+ * | Horizontal Section |
+ * +------------------------------------+
+ *
+ **/
+
+ const check = () => {
+ // Button alignment
+ for (const [pair, pair_left, pair_right] of [['left-center', left_btn, center_btn], ['center-right', center_btn, right_btn]]) {
+ const areaLeft = workspace.getBlock(pair_left).getBodyArea();
+ const areaRight = workspace.getBlock(pair_right).getBodyArea();
+
+ expect(areaLeft.y).toBe(areaRight.y);
+
+ expect(areaLeft.x + areaLeft.width + SEPARATION * 2)
+ .toBe(areaRight.x - SEPARATION,
+ `On button pair ${pair}. ${areaLeft.x} + ${areaLeft.width} + ${SEPARATION * 2} =/= ${areaRight.x} - ${SEPARATION}`);
+ }
+
+ // Section alignment
+ for (const [pair, pair_left, pair_right] of [['left-center', left, center], ['center-right', center, right]]) {
+ const areaLeft = workspace.getBlock(pair_left).getBodyArea();
+ const areaRight = workspace.getBlock(pair_right).getBodyArea();
+
+ expect(areaLeft.y).toBe(areaRight.y);
+ expect(areaLeft.x + areaLeft.width)
+ .toBe(areaRight.x - SEPARATION,
+ `On section pair ${pair}. ${areaLeft.x} + ${areaLeft.width} =/= ${areaRight.x} - ${SEPARATION}`);
+ }
+
+ // Button position on section
+ for (const [name, section, btn] of [['left', left, left_btn], ['center', center, center_btn], ['right', right, right_btn]]) {
+ const areaSection = workspace.getBlock(section).getBodyArea();
+ const areaButton = workspace.getBlock(btn).getBodyArea();
+
+ expect(areaSection.width)
+ .toBe(areaButton.width + SEPARATION * 2,
+ `On section-group ${name}. Width=${areaSection.width} =/= ${areaButton.width} + ${SEPARATION} * 2 `);
+
+ expect(areaSection.x + SEPARATION)
+ .toBe(areaButton.x,
+ `On section-group ${name}. X=${areaSection.x} + ${SEPARATION} =/= ${areaButton.x}`);
+
+ expect(areaSection.height)
+ .toBe(areaButton.height + SEPARATION * 2,
+ `On section-group ${name}. Height=${areaSection.height} =/= ${areaButton.height} + ${SEPARATION} * 2 `);
+
+ expect(areaSection.y + SEPARATION)
+ .toBe(areaButton.y,
+ `On section-group ${name}. Y=${areaSection.y} + ${SEPARATION} =/= ${areaButton.y}`);
+ }
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+ it('3 elements in a SINGLE NESTED section in heavily distorted positions.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ {
+ type: 'simple_button',
+ x: 10, y: 11,
+ },
+ {
+ type: 'simple_button',
+ x: 10, y: 12,
+ },
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ }
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ },
+ ]);
+
+ const [ topLevel, vert, top_btn, center_btn, bot_btn ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(6);
+ /**
+ * Layout:
+ *
+ * +-------------+
+ * |+-----------+|
+ * ||+---------+||
+ * ||| Top Btn |||
+ * ||+---------+||
+ * ||+---------+||
+ * ||| CenterB |||
+ * ||+---------+||
+ * ||+---------+||
+ * ||| BottomB |||
+ * ||+---------+||
+ * || Vertical ||
+ * || Section ||
+ * |+-----------+|
+ * | Horizontal |
+ * | Section |
+ * +-------------+
+ *
+ **/
+
+ const check = () => {
+ // Button alignment
+ for (const [pair, pair_top, pair_bottom] of [['top-center', top_btn, center_btn], ['center-bot', center_btn, bot_btn]]) {
+ const areaTop = workspace.getBlock(pair_top).getBodyArea();
+ const areaBottom = workspace.getBlock(pair_bottom).getBodyArea();
+
+ expect(areaTop.x).toBe(areaBottom.x);
+
+ expect(areaTop.y + areaTop.height + SEPARATION)
+ .toBe(areaBottom.y,
+ `On button pair ${pair}. ${areaTop.y} + ${areaTop.height} + ${SEPARATION} =/= ${areaBottom.y}`);
+ }
+
+ const areaTopLevel = workspace.getBlock(topLevel).getBodyArea();
+ // Button position on section
+ for (const [name, btn] of [['top', top_btn], ['center', center_btn], ['bottom', bot_btn]]) {
+ const areaButton = workspace.getBlock(btn).getBodyArea();
+
+ expect(areaTopLevel.width)
+ .toBe(areaButton.width + SEPARATION * 4,
+ `On section-group ${name}. Width=${areaTopLevel.width} =/= ${areaButton.width} + ${SEPARATION} * 4`);
+
+ expect(areaTopLevel.x + SEPARATION * 2)
+ .toBe(areaButton.x,
+ `On section-group ${name}. X=${areaTopLevel.x} + ${SEPARATION} * 2 =/= ${areaButton.x}`);
+ }
+
+ const areaTopButton = workspace.getBlock(top_btn).getBodyArea();
+ const areaBotButton = workspace.getBlock(bot_btn).getBodyArea();
+
+ expect(areaTopLevel.y + SEPARATION)
+ .toBe(areaTopButton.y,
+ `Y=${areaTopLevel.y} + ${SEPARATION} =/= ${areaTopButton.y}`);
+
+ expect(areaTopLevel.y + areaTopLevel.height)
+ .toBe(areaBotButton.y + areaBotButton.height + SEPARATION,
+ `Y=${areaTopLevel.y} + ${areaTopLevel.height} =/= ${areaBotButton.y} + ${areaBotButton.height} + ${SEPARATION}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+ it('3 elements in NESTED HORIZONTALS in a VERTICAL SINGLE NESTED section in heavily distorted positions.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ]
+ },
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 101,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ]
+ },
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 102,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ]
+ },
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ }
+ ],
+ extra: { dimensions: { width: 9999, height: 9999 }},
+ },
+ ]);
+
+ const [ topLevel, vert, top, top_btn, center, center_btn, bot, bot_btn ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(9);
+ /**
+ * Layout:
+ *
+ * +--------------------+
+ * | |
+ * | +---------------+ |
+ * | | +-----------+ | |
+ * | | |+---------+| | |
+ * | | || Top Btn || | |
+ * | | |+---------+| | |
+ * | | |Horizontal | | |
+ * | | | Section | | |
+ * | | +-----------+ | |
+ * | | | |
+ * | | +-----------+ | |
+ * | | |+---------+| | |
+ * | | || CenterB || | |
+ * | | |+---------+| | |
+ * | | |Horizontal | | |
+ * | | | Section | | |
+ * | | +-----------+ | |
+ * | | | |
+ * | | +-----------+ | |
+ * | | |+---------+| | |
+ * | | || BottomB || | |
+ * | | |+---------+| | |
+ * | | |Horizontal | | |
+ * | | | Section | | |
+ * | | +-----------+ | |
+ * | | Vertical | |
+ * | | Section | |
+ * | +---------------+ |
+ * | |
+ * | Horizontal |
+ * | Section |
+ * +--------------------+
+ **/
+
+ const check = () => {
+ // Button alignment
+ for (const [pair, pair_top, pair_bottom] of [['top-center', top_btn, center_btn], ['center-bot', center_btn, bot_btn]]) {
+ const areaTop = workspace.getBlock(pair_top).getBodyArea();
+ const areaBottom = workspace.getBlock(pair_bottom).getBodyArea();
+
+ expect(areaTop.x).toBe(areaBottom.x);
+
+ expect(areaTop.y + areaTop.height + SEPARATION * 2)
+ .toBe(areaBottom.y - SEPARATION,
+ `On button pair ${pair}. ${areaTop.y} + ${areaTop.height} + ${SEPARATION} =/= ${areaBottom.y} - ${SEPARATION}`);
+ }
+
+ // Section alignment
+ for (const [pair, pair_top, pair_bottom] of [['top-center', top, center], ['center-bottom', center, bot]]) {
+ const areaTop = workspace.getBlock(pair_top).getBodyArea();
+ const areaBottom = workspace.getBlock(pair_bottom).getBodyArea();
+
+ expect(areaTop.x).toBe(areaBottom.x);
+ expect(areaTop.y + areaTop.height)
+ .toBe(areaBottom.y - SEPARATION,
+ `On section pair ${pair}. ${areaTop.y} + ${areaTop.height} =/= ${areaBottom.y} - ${SEPARATION}`);
+ }
+
+ // Button position on section
+ for (const [name, section, btn] of [['top', top, top_btn], ['center', center, center_btn], ['bottom', bot, bot_btn]]) {
+ const areaSection = workspace.getBlock(section).getBodyArea();
+ const areaButton = workspace.getBlock(btn).getBodyArea();
+
+ expect(areaSection.width)
+ .toBe(areaButton.width + SEPARATION * 2,
+ `On section-group ${name}. Width=${areaSection.width} =/= ${areaButton.width} + ${SEPARATION} * 2`);
+
+ expect(areaSection.x + SEPARATION)
+ .toBe(areaButton.x,
+ `On section-group ${name}. X=${areaSection.x} + ${SEPARATION} =/= ${areaButton.x}`);
+
+ expect(areaSection.height)
+ .toBe(areaButton.height + SEPARATION * 2,
+ `On section-group ${name}. Height=${areaSection.height} =/= ${areaButton.height} + ${SEPARATION} * 2 `);
+
+ expect(areaSection.y + SEPARATION)
+ .toBe(areaButton.y,
+ `On section-group ${name}. Y=${areaSection.y} + ${SEPARATION} =/= ${areaButton.y}`);
+ }
+
+ const areaTopLevel = workspace.getBlock(topLevel).getBodyArea();
+ const areaTopButton = workspace.getBlock(top_btn).getBodyArea();
+ const areaBotButton = workspace.getBlock(bot_btn).getBodyArea();
+
+ expect(areaTopLevel.y + SEPARATION * 2)
+ .toBe(areaTopButton.y,
+ `On section-group ${name}. Y=${areaTopLevel.y} + ${SEPARATION} * 2 =/= ${areaTopButton.y}`);
+
+ expect(areaTopLevel.y + areaTopLevel.height)
+ .toBe(areaBotButton.y + areaBotButton.height + SEPARATION * 2,
+ `Y=${areaTopLevel.y} + ${areaTopLevel.height} =/= ${areaBotButton.y} + ${areaBotButton.height} + ${SEPARATION} * 2`);
+
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+
+ it('Long and short FixedText separated by orizontalSeparator.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: 'fixed_text',
+ x: 10, y: 10,
+ extra: {
+ content: [ {
+ value: 'A small text',
+ type: 'text'
+ }],
+ },
+ },
+ {
+ type: 'horizontal_separator',
+ x: 10, y: 12,
+ extra: {
+ dimensions: { width: TEXT_MAX_WIDTH * 2, height: 100 },
+ }
+ },
+ {
+ type: 'fixed_text',
+ x: 10, y: 14,
+ extra: {
+ content: [ {
+ value: 'A long text, which will take more than MAX_WIDTH and will require looking for the proper text break point so it fits on the allocated size, even if it is in a single line.',
+ type: 'text'
+ }],
+ },
+ },
+ ]);
+
+ const [ textTop, separator, textBot ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(blocks.length + 1);
+
+ /**
+ * Layout:
+ *
+ * +---------+
+ * | Text1 |
+ * +---------+
+ * +----------------+
+ * | Separator1 |
+ * +----------------+
+ * +------------+
+ * | Long Text2 |
+ * +------------+
+ *
+ **/
+
+ const check = () => {
+ const topTextArea = workspace.getBlock(textTop).getBodyArea();
+ const bottomTextArea = workspace.getBlock(textBot).getBodyArea();
+ const separatorArea = workspace.getBlock(separator).getBodyArea();
+ const pageArea = workspace.getBlock(page).getBodyArea();
+
+ // Separator has to take all width
+ expect(separatorArea.x).toEqual(pageArea.x);
+ expect(separatorArea.width).toEqual(pageArea.width);
+
+ // Top text (small) has to be centered
+ expect(topTextArea.x + topTextArea.width / 2 )
+ .toBe(pageArea.x + pageArea.width / 2,
+ `TopText centered in page. ${topTextArea.x} + ${topTextArea.width} / 2 =/= ${pageArea.x} + ${pageArea.width} / 2`);
+
+ // Bottom text (large) has to take all width (minus separation)
+ expect(bottomTextArea.x)
+ .toBe(pageArea.x + SEPARATION,
+ `Bottom text must start just after SEPARATION. ${bottomTextArea.x} =/= ${pageArea.x} + ${SEPARATION}`);
+ expect(bottomTextArea.width + SEPARATION * 2)
+ .toBe(pageArea.width,
+ `Bottom text must take all width minus the SEPARATION left and right. ${bottomTextArea.width} + ${SEPARATION} * 2 =/= ${pageArea.width}`);
+
+
+ // Vertically, there must be a separation between the elements
+ expect(topTextArea.y + topTextArea.height + SEPARATION)
+ .toBe(separatorArea.y,
+ `TopText → Separator. ${topTextArea.y} + ${topTextArea.height} + ${SEPARATION} =/= ${separatorArea.y}`);
+
+ expect(separatorArea.y + separatorArea.height + SEPARATION)
+ .toBe(bottomTextArea.y,
+ `Separator → BottomText. ${separatorArea.y} + ${separatorArea.height} + ${SEPARATION} =/= ${bottomTextArea.y}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+});
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/05-image-positioning.spec.ts b/frontend/src/app/tests/graphic/ui-element-positioning/05-image-positioning.spec.ts
new file mode 100644
index 00000000..e0a0a485
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/05-image-positioning.spec.ts
@@ -0,0 +1,118 @@
+import { async, TestBed } from '@angular/core/testing';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { FlowWorkspace } from '../../../flow-editor/flow_workspace';
+import { SEPARATION } from 'app/flow-editor/ui-blocks/renderers/positioning';
+import { configureTestBed, pageGraph } from './builder';
+import { doesNotChangePositionsOnReposition } from './utils';
+import { MIN_WIDTH as MIN_PAGE_WIDTH } from '../../../flow-editor/ui-blocks/renderers/responsive_page';
+
+describe('FlowUI positioning: 05. Image positioning.', () => {
+
+ beforeEach(async(() => {
+ configureTestBed(TestBed);
+ }));
+
+ it('IMAGE positioning with other elements in OTHER section.', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 100,
+ contents: [
+ {
+ type: 'fixed_image',
+ x: 10, y: 10,
+ extra: { dimensions: { width: MIN_PAGE_WIDTH + 100, height: MIN_PAGE_WIDTH + 100 }},
+ },
+ ],
+ extra: { dimensions: { width: 500, height: 500 }},
+ },
+ {
+ type: "horizontal_ui_section",
+ x: 10, y: 101,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ extra: { dimensions: { width: 500, height: 500 }},
+ },
+ ]);
+
+ const [ top, top_img, bot, bot_btn ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(5);
+ /**
+ * Layout:
+ *
+ * +------------+
+ * | |
+ * | +-------+ |
+ * | | Image | |
+ * | +-------+ |
+ * | Horizontal |
+ * | Section |
+ * +------------+
+ * +------------+
+ * | |
+ * | +--------+ |
+ * | | Button | |
+ * | +--------+ |
+ * | Horizontal |
+ * | Section |
+ * +------------+
+ *
+ **/
+
+ const check = () => {
+ const pageArea = workspace.getBlock(page).getBodyArea();
+
+ for (const [name, section, element] of [['top', top, top_img], ['bottom', bot, bot_btn]]) {
+ // Element position on section
+ const areaSection = workspace.getBlock(section).getBodyArea();
+ const areaElement = workspace.getBlock(element).getBodyArea();
+
+ expect(areaSection.height)
+ .toBe(areaElement.height + SEPARATION * 2,
+ `On section-group ${name}. Height=${areaSection.height} =/= ${areaElement.height} + ${SEPARATION} * 2 `);
+
+ expect(areaSection.y + SEPARATION)
+ .toBe(areaElement.y,
+ `On section-group ${name}. Y=${areaSection.y} + ${SEPARATION} =/= ${areaElement.y}`);
+
+ // Everything inside the page
+ expect(areaSection.x)
+ .toBe(pageArea.x,
+ `On section-group ${name}. X=${areaSection.x} =/= ${pageArea.x}`);
+
+ expect(areaElement.x)
+ .toBeGreaterThanOrEqual(pageArea.x,
+ `On section-group ${name}. X=${areaElement.x} < ${pageArea.x}`);
+ }
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+});
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/06-position-responsive-container-single-step.spec.ts b/frontend/src/app/tests/graphic/ui-element-positioning/06-position-responsive-container-single-step.spec.ts
new file mode 100644
index 00000000..8485e92c
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/06-position-responsive-container-single-step.spec.ts
@@ -0,0 +1,411 @@
+import { async, TestBed } from '@angular/core/testing';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { FlowWorkspace } from '../../../flow-editor/flow_workspace';
+import { SEPARATION } from 'app/flow-editor/ui-blocks/renderers/positioning';
+import { configureTestBed, pageGraph } from './builder';
+import { doesNotChangePositionsOnReposition } from './utils';
+
+describe('FlowUI positioning: 06. Position responsive container.', () => {
+
+ beforeEach(async(() => {
+ configureTestBed(TestBed);
+ }));
+
+ // ----------------------------
+ // UI Card tests
+ // ----------------------------
+ it('Simple UI cards should have a stable position', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: "simple_card",
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'horizontal_ui_section',
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+
+ const [ card, section, button ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(blocks.length + 1);
+ /**
+ * Layout:
+ * +--------------+
+ * |+------------+|
+ * || +--------+ ||
+ * || | Button | ||
+ * || +--------+ ||
+ * || Horizontal ||
+ * || Section ||
+ * |+------------+|
+ * | UI Card |
+ * +--------------+
+ *
+ **/
+
+
+ const check = () => {
+ const cardArea = workspace.getBlock(card).getBodyArea();
+ const sectionArea = workspace.getBlock(section).getBodyArea();
+ const buttonArea = workspace.getBlock(button).getBodyArea();
+ const pageArea = workspace.getBlock(page).getBodyArea();
+
+ // Card has to has to take all width (minus separation)
+ expect(cardArea.x)
+ .toBe(pageArea.x + SEPARATION,
+ `${cardArea.x} =/= ${pageArea.x} + ${SEPARATION}`);
+ expect(cardArea.width + SEPARATION * 2)
+ .toBe(pageArea.width,
+ `${cardArea.width} + ${SEPARATION} * 2 =/= ${pageArea.width}`);
+
+ // Section has to take all width on card, and all height minus separation
+ expect(sectionArea.x).toEqual(cardArea.x);
+ expect(sectionArea.width).toEqual(cardArea.width);
+
+ expect(sectionArea.y)
+ .toBe(cardArea.y + SEPARATION,
+ `${sectionArea.y} =/= ${cardArea.y} + ${SEPARATION}`);
+ expect(sectionArea.height + SEPARATION * 2)
+ .toBe(cardArea.height,
+ `${sectionArea.height} + ${SEPARATION} * 2 =/= ${cardArea.height}`);
+
+ // Button must be SEPARATION to the left & top of the section
+ expect(sectionArea.y + SEPARATION)
+ .toBe(buttonArea.y,
+ `${sectionArea.y} + ${SEPARATION} =/= ${buttonArea.y}`);
+
+ expect(sectionArea.x + SEPARATION)
+ .toBe(buttonArea.x,
+ `${sectionArea.x} + ${SEPARATION} =/= ${buttonArea.x}`);
+
+ expect(buttonArea.y + buttonArea.height + SEPARATION)
+ .toBe(sectionArea.y + sectionArea.height,
+ `${buttonArea.y} + ${buttonArea.height} + ${SEPARATION} =/= ${sectionArea.y} + ${sectionArea.height}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+ it('Simple UI cards should have a stable position even out of Pages', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, _page] = pageGraph([
+ {
+ type: "simple_card",
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'horizontal_ui_section',
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ },
+ ],
+ },
+ ], { noPage: true });
+
+ const [ card, section, button ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(blocks.length);
+ /**
+ * Layout:
+ * +--------------+
+ * |+------------+|
+ * || +--------+ ||
+ * || | Button | ||
+ * || +--------+ ||
+ * || Horizontal ||
+ * || Section ||
+ * |+------------+|
+ * | UI Card |
+ * +--------------+
+ *
+ **/
+
+ const check = () => {
+ const cardArea = workspace.getBlock(card).getBodyArea();
+ const sectionArea = workspace.getBlock(section).getBodyArea();
+ const buttonArea = workspace.getBlock(button).getBodyArea();
+
+ // Section has to take all width on card, and all height minus separation
+ expect(sectionArea.x).toEqual(cardArea.x);
+ expect(sectionArea.width).toEqual(cardArea.width);
+
+ expect(sectionArea.y)
+ .toBe(cardArea.y + SEPARATION,
+ `${sectionArea.y} =/= ${cardArea.y} + ${SEPARATION}`);
+ expect(sectionArea.height + SEPARATION * 2)
+ .toBe(cardArea.height,
+ `${sectionArea.height} + ${SEPARATION} * 2 =/= ${cardArea.height}`);
+
+ // Button must be SEPARATION to the left & top of the section
+ expect(sectionArea.y + SEPARATION)
+ .toBe(buttonArea.y,
+ `${sectionArea.y} + ${SEPARATION} =/= ${buttonArea.y}`);
+
+ expect(sectionArea.x + SEPARATION)
+ .toBe(buttonArea.x,
+ `${sectionArea.x} + ${SEPARATION} =/= ${buttonArea.x}`);
+
+ expect(buttonArea.y + buttonArea.height + SEPARATION)
+ .toBe(sectionArea.y + sectionArea.height,
+ `${buttonArea.y} + ${buttonArea.height} + ${SEPARATION} =/= ${sectionArea.y} + ${sectionArea.height}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+ // ----------------------------
+ // Link area tests
+ // ----------------------------
+ it('Link Areas should have a stable position', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: "link_area",
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'horizontal_ui_section',
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ },
+ ],
+ },
+ ]);
+
+ const [ link, section, button ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(blocks.length + 1);
+ /**
+ * Layout:
+ * +--------------+
+ * |+------------+|
+ * || +--------+ ||
+ * || | Button | ||
+ * || +--------+ ||
+ * || Horizontal ||
+ * || Section ||
+ * |+------------+|
+ * | LinkArea |
+ * +--------------+
+ *
+ **/
+
+
+ const check = () => {
+ const linkArea = workspace.getBlock(link).getBodyArea();
+ const sectionArea = workspace.getBlock(section).getBodyArea();
+ const buttonArea = workspace.getBlock(button).getBodyArea();
+ const pageArea = workspace.getBlock(page).getBodyArea();
+
+ // Link area has to has to take all width (minus separation)
+ expect(linkArea.x)
+ .toBe(pageArea.x + SEPARATION,
+ `${linkArea.x} =/= ${pageArea.x} + ${SEPARATION}`);
+ expect(linkArea.width + SEPARATION * 2)
+ .toBe(pageArea.width,
+ `${linkArea.width} + ${SEPARATION} * 2 =/= ${pageArea.width}`);
+
+ // Section has to take all width on link, and all height minus separation
+ expect(sectionArea.x).toEqual(linkArea.x);
+ expect(sectionArea.width).toEqual(linkArea.width);
+
+ expect(sectionArea.y)
+ .toBe(linkArea.y + SEPARATION,
+ `${sectionArea.y} =/= ${linkArea.y} + ${SEPARATION}`);
+ expect(sectionArea.height + SEPARATION * 2)
+ .toBe(linkArea.height,
+ `${sectionArea.height} + ${SEPARATION} * 2 =/= ${linkArea.height}`);
+
+ // Button must be SEPARATION to the left & top of the section
+ expect(sectionArea.y + SEPARATION)
+ .toBe(buttonArea.y,
+ `${sectionArea.y} + ${SEPARATION} =/= ${buttonArea.y}`);
+
+ expect(sectionArea.x + SEPARATION)
+ .toBe(buttonArea.x,
+ `${sectionArea.x} + ${SEPARATION} =/= ${buttonArea.x}`);
+
+ expect(buttonArea.y + buttonArea.height + SEPARATION)
+ .toBe(sectionArea.y + sectionArea.height,
+ `${buttonArea.y} + ${buttonArea.height} + ${SEPARATION} =/= ${sectionArea.y} + ${sectionArea.height}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+ it('Link Areas should have a stable position even out of Pages', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, _page] = pageGraph([
+ {
+ type: "link_area",
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'horizontal_ui_section',
+ x: 10, y: 10,
+ contents: [
+ {
+ type: 'simple_button',
+ x: 10, y: 10,
+ },
+ ],
+ },
+ ],
+ },
+ ], { noPage: true });
+
+ const [ link, section, button ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(blocks.length);
+ /**
+ * Layout:
+ * +--------------+
+ * |+------------+|
+ * || +--------+ ||
+ * || | Button | ||
+ * || +--------+ ||
+ * || Horizontal ||
+ * || Section ||
+ * |+------------+|
+ * | LinkArea |
+ * +--------------+
+ *
+ **/
+
+ const check = () => {
+ const linkArea = workspace.getBlock(link).getBodyArea();
+ const sectionArea = workspace.getBlock(section).getBodyArea();
+ const buttonArea = workspace.getBlock(button).getBodyArea();
+
+ // Section has to take all width on link, and all height minus separation
+ expect(sectionArea.x).toEqual(linkArea.x);
+ expect(sectionArea.width).toEqual(linkArea.width);
+
+ expect(sectionArea.y)
+ .toBe(linkArea.y + SEPARATION,
+ `${sectionArea.y} =/= ${linkArea.y} + ${SEPARATION}`);
+ expect(sectionArea.height + SEPARATION * 2)
+ .toBe(linkArea.height,
+ `${sectionArea.height} + ${SEPARATION} * 2 =/= ${linkArea.height}`);
+
+ // Button must be SEPARATION to the left & top of the section
+ expect(sectionArea.y + SEPARATION)
+ .toBe(buttonArea.y,
+ `${sectionArea.y} + ${SEPARATION} =/= ${buttonArea.y}`);
+
+ expect(sectionArea.x + SEPARATION)
+ .toBe(buttonArea.x,
+ `${sectionArea.x} + ${SEPARATION} =/= ${buttonArea.x}`);
+
+ expect(buttonArea.y + buttonArea.height + SEPARATION)
+ .toBe(sectionArea.y + sectionArea.height,
+ `${buttonArea.y} + ${buttonArea.height} + ${SEPARATION} =/= ${sectionArea.y} + ${sectionArea.height}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+});
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/07-position-responsive-container-inside-section.spec.ts b/frontend/src/app/tests/graphic/ui-element-positioning/07-position-responsive-container-inside-section.spec.ts
new file mode 100644
index 00000000..41e9ff8f
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/07-position-responsive-container-inside-section.spec.ts
@@ -0,0 +1,239 @@
+import { async, TestBed } from '@angular/core/testing';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { FlowWorkspace } from '../../../flow-editor/flow_workspace';
+import { SEPARATION } from 'app/flow-editor/ui-blocks/renderers/positioning';
+import { configureTestBed, pageGraph } from './builder';
+import { doesNotChangePositionsOnReposition } from './utils';
+
+describe('FlowUI positioning: 07. Position responsive container inside section.', () => {
+
+ beforeEach(async(() => {
+ configureTestBed(TestBed);
+ }));
+
+ // ----------------------------
+ // UI Card tests
+ // ----------------------------
+ it('Simple UI cards should have a stable position', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: 'horizontal_ui_section',
+ x: 10, y: 10,
+ contents: [
+ {
+ type: "simple_button",
+ x: 10, y: 10,
+ },
+ {
+ type: "simple_card",
+ x: 11, y: 10,
+ contents: [],
+ extra: { dimensions: { width: 200, height: 200, } }
+ },
+ {
+ type: "simple_button",
+ x: 12, y: 10,
+ },
+ ],
+ },
+ ]);
+
+ const [ section, leftButton, card, rightButton ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(blocks.length + 1);
+ /**
+ * Layout:
+ *
+ * +------------------------------------------------+
+ * | +-------------+ +-----------+ +--------------+ |
+ * | | Left button | | Ui Card | | Right button | |
+ * | +-------------+ +-----------+ +--------------+ |
+ * | Horizontal Section |
+ * +------------------------------------------------+
+ *
+ *
+ **/
+
+ const check = () => {
+ const pageArea = workspace.getBlock(page).getBodyArea();
+ const sectionArea = workspace.getBlock(section).getBodyArea();
+ const leftButtonArea = workspace.getBlock(leftButton).getBodyArea();
+ const cardArea = workspace.getBlock(card).getBodyArea();
+ const rightButtonArea = workspace.getBlock(rightButton).getBodyArea();
+
+ // Section has to take all width on page, and all height minus separation
+ expect(sectionArea.x).toEqual(pageArea.x);
+ expect(sectionArea.width).toEqual(pageArea.width);
+
+ for (const [name, elem] of [['left button', leftButton], ['center card', card], ['right button', rightButton]]) {
+ const eArea = workspace.getBlock(elem).getBodyArea();
+
+ // Height
+ expect(eArea.y)
+ .toBeGreaterThanOrEqual(sectionArea.y + SEPARATION,
+ `Element: ${name}. ${eArea.y} < ${sectionArea.y} + ${SEPARATION}`);
+
+ expect(eArea.y + eArea.height + SEPARATION)
+ .toBeLessThanOrEqual(sectionArea.y + sectionArea.height,
+ `Element: ${name}. ${eArea.y} + ${eArea.height} + ${SEPARATION} > ${sectionArea.y} + ${sectionArea.height}`);
+ }
+
+ for (const [name, left, right ] of [['left -> card', leftButton, card], ['card -> right', card, rightButton]]) {
+ const leftArea = workspace.getBlock(left).getBodyArea();
+ const rightArea = workspace.getBlock(right).getBodyArea();
+
+ // Relative positioning
+ expect(leftArea.x + leftArea.width + SEPARATION)
+ .toBe(rightArea.x,
+ `Group ${name}. ${leftArea.x} + ${leftArea.width} + ${SEPARATION} =/= ${rightArea.x}`);
+
+
+ }
+
+ expect(leftButtonArea.x)
+ .toBe(sectionArea.x + SEPARATION,
+ `Left button X. ${leftButtonArea.x} =/= ${sectionArea.x} + ${SEPARATION}`);
+
+ expect(rightButtonArea.x + rightButtonArea.width + SEPARATION)
+ .toBe(sectionArea.x + sectionArea.width,
+ `Right button X. ${rightButtonArea.x} + ${rightButtonArea.width} + ${SEPARATION} =/= ${sectionArea.x} + ${sectionArea.width}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+
+ // ----------------------------
+ // Link Area tests
+ // ----------------------------
+ it('LinkAreas should have a stable position', async () => {
+ const fixture = TestBed.createComponent(FlowEditorComponent);
+
+ const app: FlowEditorComponent = fixture.debugElement.componentInstance;
+ expect(app).toBeInstanceOf(FlowEditorComponent);
+ await app.ngOnInit();
+
+ const workspace = app.workspace;
+ expect(workspace).toBeInstanceOf(FlowWorkspace);
+
+ const [graph, blocks, page] = pageGraph([
+ {
+ type: 'horizontal_ui_section',
+ x: 10, y: 10,
+ contents: [
+ {
+ type: "simple_button",
+ x: 10, y: 10,
+ },
+ {
+ type: "link_area",
+ x: 11, y: 10,
+ contents: [],
+ extra: { dimensions: { width: 200, height: 200, } }
+ },
+ {
+ type: "simple_button",
+ x: 12, y: 10,
+ },
+ ],
+ },
+ ]);
+
+ const [ section, leftButton, link, rightButton ] = blocks;
+
+ workspace.load(graph);
+ workspace.repositionAll();
+ workspace.center();
+
+ const result = workspace.getGraph();
+
+ expect(Object.keys(result.nodes).length).toBe(blocks.length + 1);
+ /**
+ * Layout:
+ *
+ * +-------------------------------------------------+
+ * | +-------------+ +------------+ +--------------+ |
+ * | | Left button | | Link Area | | Right button | |
+ * | +-------------+ +------------+ +--------------+ |
+ * | Horizontal Section |
+ * +-------------------------------------------------+
+ *
+ *
+ **/
+
+ const check = () => {
+ const pageArea = workspace.getBlock(page).getBodyArea();
+ const sectionArea = workspace.getBlock(section).getBodyArea();
+ const leftButtonArea = workspace.getBlock(leftButton).getBodyArea();
+ const linkArea = workspace.getBlock(link).getBodyArea();
+ const rightButtonArea = workspace.getBlock(rightButton).getBodyArea();
+
+ // Section has to take all width on page, and all height minus separation
+ expect(sectionArea.x).toEqual(pageArea.x);
+ expect(sectionArea.width).toEqual(pageArea.width);
+
+ for (const [name, elem] of [['left button', leftButton], ['center linkArea', link], ['right button', rightButton]]) {
+ const eArea = workspace.getBlock(elem).getBodyArea();
+
+ // Height
+ expect(eArea.y)
+ .toBeGreaterThanOrEqual(sectionArea.y + SEPARATION,
+ `Element: ${name}. ${eArea.y} < ${sectionArea.y} + ${SEPARATION}`);
+
+ expect(eArea.y + eArea.height + SEPARATION)
+ .toBeLessThanOrEqual(sectionArea.y + sectionArea.height,
+ `Element: ${name}. ${eArea.y} + ${eArea.height} + ${SEPARATION} > ${sectionArea.y} + ${sectionArea.height}`);
+ }
+
+ for (const [name, left, right ] of [['left -> linkArea', leftButton, link], ['linkArea -> right', link, rightButton]]) {
+ const leftArea = workspace.getBlock(left).getBodyArea();
+ const rightArea = workspace.getBlock(right).getBodyArea();
+
+ // Relative positioning
+ expect(leftArea.x + leftArea.width + SEPARATION)
+ .toBe(rightArea.x,
+ `Group ${name}. ${leftArea.x} + ${leftArea.width} + ${SEPARATION} =/= ${rightArea.x}`);
+
+
+ }
+
+ expect(leftButtonArea.x)
+ .toBe(sectionArea.x + SEPARATION,
+ `Left button X. ${leftButtonArea.x} =/= ${sectionArea.x} + ${SEPARATION}`);
+
+ expect(rightButtonArea.x + rightButtonArea.width + SEPARATION)
+ .toBe(sectionArea.x + sectionArea.width,
+ `Right button X. ${rightButtonArea.x} + ${rightButtonArea.width} + ${SEPARATION} =/= ${sectionArea.x} + ${sectionArea.width}`);
+ };
+
+ // Check once
+ check();
+
+ // Re-position to check for stability
+ doesNotChangePositionsOnReposition(workspace, blocks);
+
+ // Check again
+ check();
+ });
+});
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/builder.ts b/frontend/src/app/tests/graphic/ui-element-positioning/builder.ts
new file mode 100644
index 00000000..01150e79
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/builder.ts
@@ -0,0 +1,159 @@
+import { HttpClient } from '@angular/common/http';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBedStatic } from '@angular/core/testing';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CookiesService } from '@ngx-utils/cookies';
+import { BrowserCookiesModule, BrowserCookiesService } from '@ngx-utils/cookies/browser';
+import { ConnectionService } from 'app/connection.service';
+import { CustomBlockService } from 'app/custom_block.service';
+import { ProgramService } from 'app/program.service';
+import { ServiceService } from 'app/service.service';
+import { UiSignalService } from 'app/services/ui-signal.service';
+import { FlowEditorComponent } from '../../../flow-editor/flow-editor.component';
+import { SessionService } from '../../../session.service';
+import { FakeConnectionService } from './fake-connection.service';
+import { FakeCustomBlockService } from './fake-custom-block.service';
+import { FakeProgramService } from './fake-program.service';
+import { FakeServiceService } from './fake-service.service';
+import { FakeSessionService } from './fake-session.service';
+import { FakeUiSignalService } from './fake-ui-signal.service';
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { uuidv4 } from '../../../flow-editor/utils';
+import { UiElementWidgetType } from '../../../flow-editor/ui-blocks/renderers/ui_tree_repr';
+import { UiFlowBlockExtraData } from '../../../flow-editor/ui-blocks/ui_flow_block';
+import { ToastrModule } from 'ngx-toastr';
+
+export function configureTestBed(testBed: TestBedStatic) {
+ testBed.configureTestingModule({
+ imports: [
+ BrowserCookiesModule.forRoot(),
+ RouterTestingModule,
+ HttpClientTestingModule,
+ MatDialogModule,
+ MatSnackBarModule,
+ MatMenuModule,
+ NoopAnimationsModule,
+ ToastrModule.forRoot(),
+ ],
+ declarations: [
+ FlowEditorComponent,
+ ],
+ providers: [
+ {
+ provide: CookiesService,
+ useClass: BrowserCookiesService,
+ },
+ {
+ provide: HttpClient,
+ useValue: {}
+ },
+ {
+ provide: SessionService,
+ useClass: FakeSessionService,
+ },
+ {
+ provide: ProgramService,
+ useClass: FakeProgramService,
+ },
+ {
+ provide: UiSignalService,
+ useClass: FakeUiSignalService,
+ },
+ {
+ provide: ConnectionService,
+ useClass: FakeConnectionService,
+ },
+ {
+ provide: ServiceService,
+ useClass: FakeServiceService,
+ },
+ {
+ provide: CustomBlockService,
+ useClass: FakeCustomBlockService,
+ }
+ ]
+ });
+}
+
+type TestGraphElement = {
+ type: UiElementWidgetType,
+ x: number, y: number,
+ contents?: TestGraphElement[],
+ extra?: UiFlowBlockExtraData,
+};
+
+export function pageGraph(elements: TestGraphElement[], options?: { noPage: boolean }): [FlowGraph, string[], string] {
+ const graph: FlowGraph = { edges: [], nodes: {} };
+
+ if (!options) {
+ options = { noPage: false };
+ }
+
+ const pageId = options.noPage ? null : uuidv4();
+
+ if (pageId) {
+ graph.nodes[pageId] = {
+ data: {
+ value: {
+ "options": {
+ "type": "ui_flow_block",
+ "subtype": "container_flow_block",
+ "outputs": [],
+ "isPage": true,
+ "inputs": [],
+ "id": "responsive_page_holder",
+ },
+ extra: {}
+ },
+ type: "ui_flow_block",
+ subtype: "container_flow_block"
+ },
+ container_id: null,
+ position: { x: 0, y: 0 },
+ };
+ }
+
+ const ids = [];
+ const todo: (TestGraphElement & { container?: string })[] = elements.concat();
+
+ while (todo.length > 0) {
+ const el = todo.shift();
+
+ const id = uuidv4();
+ ids.push(id);
+
+ graph.nodes[id] = {
+ data: {
+ "value": {
+ "options": {
+ "type": "ui_flow_block",
+ "id": el.type,
+ },
+ },
+ "type": "ui_flow_block"
+ },
+ container_id: el.container ? el.container : pageId,
+ position: { x: el.x, y: el.y }
+ }
+
+ if (el.extra) {
+ graph.nodes[id].data.value.extra = el.extra;
+ }
+
+ if (el.contents) {
+ graph.nodes[id].data.subtype = 'container_flow_block';
+
+ for (const subEl of el.contents.concat([]).reverse()) {
+ (subEl as any).container = id;
+ todo.unshift(subEl);
+ }
+
+ }
+ }
+
+ return [graph, ids, pageId];
+}
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/fake-connection.service.ts b/frontend/src/app/tests/graphic/ui-element-positioning/fake-connection.service.ts
new file mode 100644
index 00000000..55f4365a
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/fake-connection.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { BridgeIndexData } from "app/bridges/bridge";
+import { BridgeConnection } from "app/connection";
+
+@Injectable()
+export class FakeConnectionService {
+ constructor() {}
+
+ public getAvailableBridgesForNewConnectionOnProgram(programId: string): Promise {
+ return Promise.resolve([]);
+ }
+
+ public getConnectionsOnProgram(programId: string): Promise {
+ return Promise.resolve([]);
+ }
+}
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/fake-custom-block.service.ts b/frontend/src/app/tests/graphic/ui-element-positioning/fake-custom-block.service.ts
new file mode 100644
index 00000000..f0b62367
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/fake-custom-block.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import { ResolvedCustomBlock } from "app/custom_block";
+
+@Injectable()
+export class FakeCustomBlockService {
+ constructor() {}
+
+ public async getCustomBlocksOnProgram(programId: string, skip_resolve_argument_options?: boolean): Promise {
+ return Promise.resolve([]);
+ }
+}
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/fake-program.service.ts b/frontend/src/app/tests/graphic/ui-element-positioning/fake-program.service.ts
new file mode 100644
index 00000000..e8088afa
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/fake-program.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from "@angular/core";
+import { ProgramContent, ProgramInfoUpdate } from "app/program";
+import { Observable, Observer } from "rxjs";
+
+const EMPTY_PROGRAM_GETTER: ((programId: string) => Promise)
+ = (programId: string) => {
+ return Promise.resolve({
+ id: programId,
+ name: 'empty program',
+ enabled: true,
+ bridges_in_use: [],
+ visibility: 'private',
+
+ type: 'flow_program',
+ parsed: null,
+ orig: { nodes: {}, edges: [] },
+ owner: null,
+ owner_full: { type: 'user', id: null },
+ });
+}
+
+@Injectable()
+export class FakeProgramService {
+ private _programGetter: (programId: string) => Promise;
+ private _observers: Observer[] = [];
+
+ constructor() {
+ this._programGetter = EMPTY_PROGRAM_GETTER;
+ }
+
+ setProgramToBePulled(getter: ((programId: string) => Promise) ) {
+ this._programGetter = getter;
+ }
+
+ getProgramById(programId: string): Promise {
+ return this._programGetter(programId);
+ }
+
+ getAssetUrlOnProgram(assetId: string, programId: string): string {
+ return `http://localhost:9999/programs/by-id/${programId}/assets/by-id/${assetId}`;
+ }
+
+ watchProgramLogs(programId: string, options: { request_previous_logs?: boolean }): Observable {
+ return new Observable(observer => {
+ this._observers.push(observer)
+ });
+ }
+}
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/fake-service.service.ts b/frontend/src/app/tests/graphic/ui-element-positioning/fake-service.service.ts
new file mode 100644
index 00000000..97e6f23d
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/fake-service.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+import { AvailableService } from "app/service";
+
+@Injectable()
+export class FakeServiceService {
+ constructor() {}
+
+ getAvailableServicesOnProgram(programId: string): Promise {
+ return Promise.resolve([]);
+ }
+}
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/fake-session.service.ts b/frontend/src/app/tests/graphic/ui-element-positioning/fake-session.service.ts
new file mode 100644
index 00000000..f88badcd
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/fake-session.service.ts
@@ -0,0 +1,20 @@
+import { Session } from "app/session";
+import { Injectable } from "@angular/core";
+
+@Injectable()
+export class FakeSessionService /* implements SessionService */ {
+ constructor() {}
+
+ getSession(): Promise {
+ return Promise.resolve({
+ username: 'fake-username',
+ user_id: '123-fake',
+ active: true,
+ tags: {
+ is_admin: false,
+ is_advanced: false,
+ is_in_preview: false,
+ }
+ });
+ }
+}
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/fake-ui-signal.service.ts b/frontend/src/app/tests/graphic/ui-element-positioning/fake-ui-signal.service.ts
new file mode 100644
index 00000000..36c3e817
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/fake-ui-signal.service.ts
@@ -0,0 +1,16 @@
+import { Injectable } from "@angular/core";
+import { Observable, Observer } from "rxjs";
+
+@Injectable()
+export class FakeUiSignalService {
+ programId: string;
+ observers: Observer[] = [];
+
+ setProgramId(programId: string) {
+ this.programId = programId;
+ }
+
+ public onElementUpdate(blockType: string, blockId: string): Observable {
+ return new Observable(observer => { this.observers.push(observer); });
+ }
+}
diff --git a/frontend/src/app/tests/graphic/ui-element-positioning/utils.ts b/frontend/src/app/tests/graphic/ui-element-positioning/utils.ts
new file mode 100644
index 00000000..8166b2ce
--- /dev/null
+++ b/frontend/src/app/tests/graphic/ui-element-positioning/utils.ts
@@ -0,0 +1,39 @@
+import { FlowWorkspace } from "app/flow-editor/flow_workspace";
+import { Area2D } from "app/flow-editor/flow_block";
+import { maxKey } from "app/flow-editor/utils";
+
+export function doesNotChangePositionsOnReposition(workspace: FlowWorkspace, blocks: string[]) {
+ // Get all block's positions
+ const prevPos: [string, Area2D][] = blocks.map( id => [id, workspace.getBlock(id).getBodyArea() ] );
+
+ workspace.repositionAll();
+
+ const diffs = prevPos.map(([id, prev]) => {
+ const after = workspace.getBlock(id).getBodyArea();
+
+ return {
+ id: id,
+ x: Math.abs(after.x - prev.x),
+ y: Math.abs(after.y - prev.y),
+ width: Math.abs(after.width - prev.width),
+ height: Math.abs(after.height - prev.height),
+ }
+ })
+
+ const x = maxKey(diffs, (e => e.x));
+ const y = maxKey(diffs, (e => e.x));
+ const width = maxKey(diffs, (e => e.width));
+ const height = maxKey(diffs, (e => e.height));
+
+ const mov = {
+ x: { id: x.id, v: x.x },
+ y: { id: y.id, v: y.y },
+ width: { id: width.id, v: width.width },
+ height: { id: height.id, v: height.height },
+ };
+
+ if ((mov.x.v >= 1) || (mov.y.v >= 1) || (mov.width.v >= 1) || (mov.height.v >= 1)) {
+ // @ts-ignore Avoid importing this from assert() as that one has 2 more parameters
+ fail("Movement on iteration that should not change positions: " + JSON.stringify(mov));
+ }
+}
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/.gitignore b/frontend/src/app/tests/logic/flow-graph-analysis/.gitignore
new file mode 100644
index 00000000..b38f8050
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/.gitignore
@@ -0,0 +1,2 @@
+*.dot
+*.png
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/01_simple_flow.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/01_simple_flow.spec.ts
new file mode 100644
index 00000000..52b3c78d
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/01_simple_flow.spec.ts
@@ -0,0 +1,248 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile, get_conversions_to_stepped, get_stepped_ast, get_tree_with_ends, get_unreachable } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled, SimpleArrayAstOperation } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+// @ts-ignore
+import * as _01_simple_flow from '../samples/01_simple_flow.js';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: options.source_id, message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source, 1], [source, 2], 0]});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ builder.add_trigger('trigger_when_all_true', {id: 'trigger', args: [[cond1, 0], [cond2, 0]]})
+ .then(f => f.add_op('send_message', { namespace: chat,
+ args: [channel,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-01: Simple flow.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should find no unreachable blocks', async () => {
+ expect(get_unreachable(gen_flow())).toEqual([]);
+ });
+
+ it('Should recognize conversions to stepped', async () => {
+ expect(get_conversions_to_stepped(gen_flow({source_id: 'source'}), "source")).toEqual([
+ "trigger",
+ ]);
+ });
+
+ it('Synthetic compilation matches DSL program', async () => {
+ const TIME_BLOCK = "ad97e5d1-c725-4cc6-826f-30057f239635";
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ are_equivalent_ast(compile(gen_flow({ source_id: TIME_BLOCK })), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "${TIME_BLOCK}" 0)
+ 11)
+ (= (flow-last-value "${TIME_BLOCK}" 1)
+ (flow-last-value "${TIME_BLOCK}" 2)
+ 0))
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))))
+ `))
+ ]);
+ });
+
+ // Based on sample
+ describe('Sample-based tests.', async () => {
+ it('Sample should match DSL compilation', async () => {
+ const TIME_BLOCK = "ad97e5d1-c725-4cc6-826f-30057f239635";
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ are_equivalent_ast(compile(_01_simple_flow as FlowGraph), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "${TIME_BLOCK}" 0)
+ 11)
+ (= (flow-last-value "${TIME_BLOCK}" 1)
+ (flow-last-value "${TIME_BLOCK}" 2)
+ 0))
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))))
+ `))
+ ]);
+ });
+
+ it('Sample should match synthetic compilation', async () => {
+ are_equivalent_ast(compile(_01_simple_flow as FlowGraph),
+ compile(gen_flow({source_id: 'ad97e5d1-c725-4cc6-826f-30057f239635'})));
+ });
+
+ // Intermediate tests based on sample, might be removed if they prove to
+ // costly to maintain
+ it('Should build correctly the stepper AST from sample', async () => {
+ expect(get_stepped_ast(_01_simple_flow as FlowGraph, "032d2a4e-bfe2-4635-a1cf-dc62692eead7"))
+ .toEqual([
+ {
+ block_id: "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ arguments: [
+ {
+ tree: {
+ block_id: "f1b8670c-0001-4417-8a39-2c52f5140383",
+ arguments: []
+ },
+ output_index: 0,
+ },
+ {
+ tree: {
+ block_id: "918294c3-1e7d-4b2f-ab73-77188a4b89b0",
+ arguments: [
+ {
+ tree: {
+ block_id: "fc4bd63f-d4ff-4e15-8b09-a224e6e1c635",
+ arguments: [],
+ },
+ output_index: 0
+ }
+ ]
+ },
+ output_index: 0,
+ }
+ ],
+ contents: []
+ }
+ ]);
+ });
+
+ it('Sample should build correctly the streaming tree', async () => {
+ expect(get_tree_with_ends(_01_simple_flow as FlowGraph,
+ "ad97e5d1-c725-4cc6-826f-30057f239635",
+ "032d2a4e-bfe2-4635-a1cf-dc62692eead7"))
+ .toEqual({
+ block_id: "032d2a4e-bfe2-4635-a1cf-dc62692eead7",
+ arguments: [
+ { // Hour = 11
+ tree: {
+ block_id: "0f82640f-b40b-4053-981d-1fe0b2c17de0",
+ arguments: [
+ { // Hour
+ tree: {
+ block_id: "ad97e5d1-c725-4cc6-826f-30057f239635",
+ arguments: [],
+ },
+ output_index: 0
+ },
+ { // "11"
+ tree: {
+ block_id: "0b2f1836-aaf3-4e13-84b9-8041c3b5b4b8",
+ arguments: [],
+ },
+ output_index: 0,
+ }
+ ]
+ },
+ output_index: 0
+ },
+ { // Minute = Second = 0
+ tree: {
+ block_id: "0d4937a0-cdd3-4bf6-b8e8-8da2974b1330",
+ arguments: [
+ {
+ tree: {
+ block_id: "ad97e5d1-c725-4cc6-826f-30057f239635",
+ arguments: [],
+ },
+ output_index: 1
+ },
+ {
+ tree: {
+ block_id: "ad97e5d1-c725-4cc6-826f-30057f239635",
+ arguments: [],
+ },
+ output_index: 2
+ },
+ {
+ tree: {
+ block_id: "2b3b54d4-bcfa-4137-825f-ca52e2be4e96",
+ arguments: [],
+ },
+ output_index: 0,
+ }
+ ]
+ },
+ output_index: 0
+ }
+ ]
+ });
+ });
+ });
+
+ // Same, but testing intermediate scaffoling, might be removed if too costly
+ describe('Scaffold step testing.', async () => {
+ it('Should match tool compilation', async () => {
+ are_equivalent_ast(compile(_01_simple_flow as FlowGraph), [
+ gen_compiled([
+ ['wait_for_monitor', { monitor_id: { from_service: TIME_MONITOR_ID }, key: 'utc_time', monitor_expected_value: 'any_value' }],
+ ['control_if_else',
+ ['operator_and', ['operator_equals',
+ ['flow_last_value', 'ad97e5d1-c725-4cc6-826f-30057f239635', 0],
+ 11],
+ ['operator_equals',
+ ['flow_last_value', 'ad97e5d1-c725-4cc6-826f-30057f239635', 1],
+ ['flow_last_value', 'ad97e5d1-c725-4cc6-826f-30057f239635', 2],
+ 0
+ ]
+ ] as SimpleArrayAstOperation,
+ [
+ ['command_call_service', {
+ service_id: 'de5baefb-13da-457e-90a5-57a753da8891',
+ service_action: 'send_message',
+ service_call_values: ['-137414823',
+ ['command_call_service', {
+ service_id: '536bf266-fabf-44a6-ba89-a0c71b8db608',
+ service_action: 'get_today_max_in_place',
+ service_call_values: ["12/36/057/7"]
+ }]],
+ }]
+ ]
+ ]
+ ])
+ ]);
+ });
+ });
+
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/02_lone_block.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/02_lone_block.spec.ts
new file mode 100644
index 00000000..8b5052d4
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/02_lone_block.spec.ts
@@ -0,0 +1,39 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { get_unreachable } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+// @ts-ignore
+import * as _02_lone_block from '../samples/02_lone_block.js';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ builder.add_op('send_message', { id: 'lone', namespace: chat });
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-02: Lone block.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Unreachable blocks?.*/i)
+ });
+
+ it('Should find an unreachable block', async () => {
+ expect(get_unreachable(gen_flow())).toEqual([
+ "lone"
+ ]);
+ });
+
+ describe('Sample-based tests.', async () => {
+ it('Should find an unreachable block', async () => {
+ expect(get_unreachable(_02_lone_block as FlowGraph)).toEqual([
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c"
+ ]);
+ });
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/03_no_start_pulse.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/03_no_start_pulse.spec.ts
new file mode 100644
index 00000000..56989492
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/03_no_start_pulse.spec.ts
@@ -0,0 +1,59 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { get_unreachable } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+// @ts-ignore
+import * as _03_no_start_pulse from '../samples/03_no_start_pulse.js';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7', { id: 'loc'});
+ const channel = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823', {id: 'channel'});
+
+ // Stepped section
+ builder.add_op('send_message', { namespace: chat,
+ id: 'not-started',
+ args: [channel,
+ [(b) => b.add_getter('get_today_max_in_place', { id: 'getter',
+ namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-03: No start pulse.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Unreachable blocks?.*/i)
+ });
+
+ it('Should find an unreachable blocks', async () => {
+ expect(get_unreachable(gen_flow()).sort()).toEqual([
+ "not-started",
+ "getter",
+ "loc",
+ "channel",
+ ].sort());
+ });
+
+ describe('Sample-based tests.', async () => {
+ it('Should find unreachable blocks', async () => {
+ expect(get_unreachable(_03_no_start_pulse as FlowGraph).sort()).toEqual([
+ "4652b79c-603b-4add-9164-92508be43fdf",
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "f1b8670c-0001-4417-8a39-2c52f5140383",
+ "099ee247-851d-41bb-819c-5347247cd06a",
+ ].sort());
+ });
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/04_no_start_loop.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/04_no_start_loop.spec.ts
new file mode 100644
index 00000000..b3c016e6
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/04_no_start_loop.spec.ts
@@ -0,0 +1,72 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { get_unreachable } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+// @ts-ignore
+import * as _04_no_start_loop from '../samples/04_no_start_loop.js';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7', {id: 'loc'});
+ const channel = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823', {id: 'channel'});
+
+ // Stepped section
+ const msg1 = builder.add_op('send_message', { namespace: chat,
+ id: 'first',
+ args: [channel,
+ [(b) => b.add_getter('get_today_max_in_place', { id: 'first-getter',
+ namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ const msg2 = builder.add_op('send_message', { namespace: weather,
+ id: 'second',
+ args: [channel,
+ [(b) => b.add_getter('get_today_max_in_place', { id: 'second-getter',
+ namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ msg1.then(msg2).then(msg1);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-04: No start loop.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Unreachable blocks?.*/i)
+ });
+
+ it('Should find an unreachable blocks', async () => {
+ expect(get_unreachable(gen_flow()).sort()).toEqual([
+ "first",
+ "second",
+ "first-getter",
+ "second-getter",
+ "loc",
+ "channel"
+ ].sort());
+ });
+
+ describe('Sample-based tests.', async () => {
+ it('Should find unreachable blocks', async () => {
+ expect(get_unreachable(_04_no_start_loop as FlowGraph).sort()).toEqual([
+ "4652b79c-603b-4add-9164-92508be43fdf",
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "f1b8670c-0001-4417-8a39-2c52f5140383",
+ "099ee247-851d-41bb-819c-5347247cd06a",
+ ].sort());
+ });
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/05_multiple_stream_in.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/05_multiple_stream_in.spec.ts
new file mode 100644
index 00000000..dcafbb5d
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/05_multiple_stream_in.spec.ts
@@ -0,0 +1,106 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile, get_conversions_to_stepped, get_source_signals, get_unreachable } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+
+ // Stream section
+ const source1 = builder.add_stream('flow_utc_time', {id: 'source1', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source1, 0], 11]});
+
+ const source2 = builder.add_stream('flow_utc_time', {id: 'source2', message: 'UTC time'});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source2, 1], [source2, 2], 0]});
+
+ // Stepped section
+ builder.add_trigger('trigger_when_all_true', {id: 'trigger', args: [[cond1, 0], [cond2, 0]]})
+ .then(f => f.add_op('send_message', { namespace: chat,
+ args: [channel,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-05: Multiple stream in.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should find no unreachable blocks', async () => {
+ expect(get_unreachable(gen_flow())).toEqual([]);
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ are_equivalent_ast(compile(gen_flow()),
+ [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source1" 0)
+ 11)
+ (= (flow-last-value "source2" 1)
+ (flow-last-value "source2" 2)
+ 0))
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))))
+ `
+ )),
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source1" 0)
+ 11)
+ (= (flow-last-value "source2" 1)
+ (flow-last-value "source2" 2)
+ 0))
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))))
+ `
+ ))
+ ]);
+ });
+
+ describe('Intermediate step tests.', async () => {
+ it('Should recognize source signals', async () => {
+ expect(get_source_signals(gen_flow())).toEqual([
+ "source1",
+ "source2",
+ ]);
+ });
+
+ it('Should recognize conversions to stepped', async () => {
+ expect(get_conversions_to_stepped(gen_flow(), "source1")).toEqual([
+ "trigger",
+ ]);
+ });
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/06_stepped_loops.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/06_stepped_loops.spec.ts
new file mode 100644
index 00000000..f9fb3c66
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/06_stepped_loops.spec.ts
@@ -0,0 +1,78 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source, 1], [source, 2], 0]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {id: 'trigger', args: [[cond1, 0], [cond2, 0]]})
+ const send_message = builder.add_op('send_message', { namespace: chat,
+ id: 'loop-start',
+ args: [channel,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+ const wait_1sec = builder.add_op('control_wait', { args: [1]
+ });
+
+ trigger.then(send_message).then(wait_1sec).then(send_message).then(wait_1sec);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-06: Stepped loops.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ are_equivalent_ast(compile(gen_flow()),
+ [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ (= (flow-last-value "source" 1)
+ (flow-last-value "source" 2)
+ 0))
+ ((jump-point "loop-start")
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (wait-seconds 1)
+ (jump-to "loop-start")
+ ))
+ `
+ )),
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/07_streaming_loops.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/07_streaming_loops.spec.ts
new file mode 100644
index 00000000..9424d7a4
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/07_streaming_loops.spec.ts
@@ -0,0 +1,33 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('camera1', { namespace: 'tts',
+ id: 'source', message: 'UTC time'});
+ const sub = builder.add_stream('sub', { namespace: 'tts',
+ args: [[source, 0], ['detector', 0]]});
+ const noise_detector = builder.add_stream('noise_detection', { namespace: 'tts',
+ id: 'detector', args: [[sub, 0]]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('on_word_detection', { namespace: 'tts',
+ id: 'trigger', args: [[noise_detector, 0]]});
+ const op = builder.add_op('show_string', { args: [[trigger, 1]]
+ });
+
+ trigger.then(op);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-07: Streaming loops.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*loops? in streaming section.*/i);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/08_stepped_branching.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/08_stepped_branching.spec.ts
new file mode 100644
index 00000000..d6075474
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/08_stepped_branching.spec.ts
@@ -0,0 +1,86 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel1 = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+ const channel2 = builder.add_enum_node(chat, 'get_known_channels', 'Personal', '-137414824');
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {'id': 'source', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source, 1], [source, 2], 0]});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond1, 0], [cond2, 0]]});
+ const branch1 = builder.add_op('send_message', { namespace: chat,
+ args: [channel1,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ const branch2 = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2]);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-08: Stepped branching.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ (= (flow-last-value "source" 1)
+ (flow-last-value "source" 2)
+ 0))
+ ((fork
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ )))
+ `
+ )),
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/09_stepped_branch_and_join.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/09_stepped_branch_and_join.spec.ts
new file mode 100644
index 00000000..9789c760
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/09_stepped_branch_and_join.spec.ts
@@ -0,0 +1,99 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel1 = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+ const channel2 = builder.add_enum_node(chat, 'get_known_channels', 'Personal', '-137414824');
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source, 1], [source, 2], 0]});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond1, 0], [cond2, 0]]});
+ const branch1 = builder.add_op('send_message', { namespace: chat,
+ args: [channel1,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ const branch2 = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2]);
+
+ const joiner = builder.add_trigger('trigger_when_all_completed', {args: [[ branch1, 'pulse' ], [branch2, 'pulse']]});
+ joiner.then(f => f.add_op('send_message', { namespace: chat,
+ args: [channel2, 'completed']
+ }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-09: Stepped branch-and-join.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ const join = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ (= (flow-last-value "source" 1)
+ (flow-last-value "source" 2)
+ 0))
+ ((fork
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ )
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ "completed"))))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(join, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/10_different_trigger_common_stepped.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/10_different_trigger_common_stepped.spec.ts
new file mode 100644
index 00000000..3ea7b0ce
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/10_different_trigger_common_stepped.spec.ts
@@ -0,0 +1,94 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel1 = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+
+ // First trigger
+ // Stream section
+ const source1 = builder.add_stream('flow_utc_time', {id: 'source1', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source1, 0], 11]});
+ const trigger1 = builder.add_trigger('trigger_when_all_true', {args: [[cond1, 0]]});
+
+
+ // Second trigger
+ const source2 = builder.add_stream('flow_utc_time', {id: 'source2', message: 'UTC time'});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source2, 1], [source2, 2], 0]});
+ const trigger2 = builder.add_trigger('trigger_when_all_true', {args: [[cond2, 0]]});
+
+ // Stepped section
+ const body = builder.add_op('send_message', { namespace: chat,
+ args: [channel1,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ trigger1.then(body);
+ trigger2.then(body);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-10: Different trigger common stepped.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ const join = compile(gen_flow());
+
+ const dsl_ast_branch1 = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source1" 0)
+ 11)
+ )
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))))
+ `
+ );
+
+ const dsl_ast_branch2 = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source2" 1)
+ (flow-last-value "source2" 2)
+ 0))
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast_branch1), gen_compiled(dsl_ast_branch2)];
+
+ are_equivalent_ast(join, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/11_common_stepped_ending.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/11_common_stepped_ending.spec.ts
new file mode 100644
index 00000000..978a24a9
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/11_common_stepped_ending.spec.ts
@@ -0,0 +1,120 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel1 = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+ const channel2 = builder.add_enum_node(chat, 'get_known_channels', 'Personal', '-137414824');
+
+ // First trigger
+ // Stream section
+ const source1 = builder.add_stream('flow_utc_time', {id: 'source1', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source1, 0], 11]});
+ const trigger1 = builder.add_trigger('trigger_when_all_true', {args: [[cond1, 0]]});
+ const body1 = builder.add_op('send_message', { namespace: chat,
+ args: [channel1,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ // Second trigger
+ const source2 = builder.add_stream('flow_utc_time', {id: 'source2', message: 'UTC time'});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source2, 1], [source2, 2], 0]});
+ const trigger2 = builder.add_trigger('trigger_when_all_true', {args: [[cond2, 0]]});
+ const body2 = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ // Common end
+ const ending = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ "done"]
+ });
+
+ trigger1.then(body1).then(body2);
+ trigger2.then(body2).then(ending);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-11: Common stepped ending.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ const join = compile(gen_flow());
+
+ const dsl_ast_branch1 = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source1" 0)
+ 11)
+ )
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ "done"))
+ ))
+ `
+ );
+
+ const dsl_ast_branch2 = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source2" 1)
+ (flow-last-value "source2" 2)
+ 0))
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ "done"))
+ ))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast_branch1), gen_compiled(dsl_ast_branch2)];
+
+ are_equivalent_ast(join, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/12_fork_to_different_branch.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/12_fork_to_different_branch.spec.ts
new file mode 100644
index 00000000..3d62f618
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/12_fork_to_different_branch.spec.ts
@@ -0,0 +1,132 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel1 = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+ const channel2 = builder.add_enum_node(chat, 'get_known_channels', 'Personal', '-137414824');
+
+ // First trigger
+ // Stream section
+ const source1 = builder.add_stream('flow_utc_time', {id: 'source1', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source1, 0], 11]});
+ const trigger1 = builder.add_trigger('trigger_when_all_true', {args: [[cond1, 0]]});
+ const body1 = builder.add_op('send_message', { namespace: chat,
+ args: [channel1,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ // Second trigger
+ const source2 = builder.add_stream('flow_utc_time', {id: 'source2', message: 'UTC time'});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source2, 1], [source2, 2], 0]});
+ const trigger2 = builder.add_trigger('trigger_when_all_true', {args: [[cond2, 0]]});
+ const body2 = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+ const body3 = builder.add_op('send_message', { namespace: chat,
+ args: [channel2, "this in parallel"]
+ });
+
+ // Common end
+ const ending = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ "done"]
+ });
+
+ trigger1.then(body1).then(body2);
+
+ builder.add_fork(trigger2, [body2, body3]);
+ body2.then(ending);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-12: Fork to different branch.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+ const WEATHER_SVC = "536bf266-fabf-44a6-ba89-a0c71b8db608";
+
+ const join = compile(gen_flow());
+
+ const dsl_ast_branch1 = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source1" 0)
+ 11)
+ )
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414823"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ "done"))
+ ))
+ `
+ );
+
+ const dsl_ast_branch2 = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source2" 1)
+ (flow-last-value "source2" 2)
+ 0))
+ ((fork
+ ;; Branch1
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ (call-service id: "${WEATHER_SVC}"
+ action: "get_today_max_in_place"
+ values: ("12/36/057/7"))))
+ (call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ "done")))
+ ;; Branch2
+ ((call-service id: "${CHAT_SVC}"
+ action: "send_message"
+ values: ("-137414824"
+ "this in parallel")))
+ )))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast_branch1), gen_compiled(dsl_ast_branch2)];
+
+ are_equivalent_ast(join, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/13_fork_to_different_branch_then_join.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/13_fork_to_different_branch_then_join.spec.ts
new file mode 100644
index 00000000..57c75c74
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/13_fork_to_different_branch_then_join.spec.ts
@@ -0,0 +1,73 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Services
+ const weather = builder.add_service('536bf266-fabf-44a6-ba89-a0c71b8db608');
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Values
+ const loc = builder.add_enum_node(weather, 'get_locations', 'Vigo', '12/36/057/7');
+ const channel1 = builder.add_enum_node(chat, 'get_known_channels', 'Bot testing', '-137414823');
+ const channel2 = builder.add_enum_node(chat, 'get_known_channels', 'Personal', '-137414824');
+
+ // First trigger
+ // Stream section
+ const source1 = builder.add_stream('flow_utc_time', {id: 'source1', message: 'UTC time'});
+ const cond1 = builder.add_stream('operator_equals', {args: [[source1, 0], 11]});
+ const trigger1 = builder.add_trigger('trigger_when_all_true', {args: [[cond1, 0]]});
+ const body1 = builder.add_op('send_message', { namespace: chat,
+ args: [channel1,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+
+ // Second trigger
+ const source2 = builder.add_stream('flow_utc_time', {id: 'source2', message: 'UTC time'});
+ const cond2 = builder.add_stream('operator_equals', {args: [[source2, 1], [source2, 2], 0]});
+ const trigger2 = builder.add_trigger('trigger_when_all_true', {args: [[cond2, 0]]});
+ const body2 = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ [(b) => b.add_getter('get_today_max_in_place', { namespace: weather,
+ args: [loc]
+ }), 0]]
+ });
+ const body3 = builder.add_op('send_message', { namespace: chat,
+ args: [channel2, "this in parallel"]
+ });
+
+ // Common end
+ const ending = builder.add_op('send_message', { namespace: chat,
+ args: [channel2,
+ "done"]
+ });
+
+ trigger1.then(body1).then(body2);
+
+ builder.add_fork(trigger2, [body2, body3]);
+ body2.then(ending);
+
+ const joiner = builder.add_trigger('trigger_when_all_completed', {args: [[ ending, 'pulse' ], [body3, 'pulse']]});
+ joiner.then(f => f.add_op('send_message', { namespace: chat,
+ args: [channel2, 'completed']
+ }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-13: Fork to different branch then join.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Joins can only be done between flows that have previously forked.*/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/14_stepped_branch_multiple_complex_joins.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/14_stepped_branch_multiple_complex_joins.spec.ts
new file mode 100644
index 00000000..871f74f7
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/14_stepped_branch_multiple_complex_joins.spec.ts
@@ -0,0 +1,104 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ const branch3 = builder.add_op('control_wait', { id: 'branch3',
+ args: [ 3 ]
+ });
+
+ const branch4 = builder.add_op('control_wait', { id: 'branch4',
+ args: [ 4 ]
+ });
+
+ const branch5 = builder.add_op('control_wait', { id: 'branch5',
+ args: [ 5 ]
+ });
+
+ const branch6 = builder.add_op('control_wait', { id: 'branch6',
+ args: [ 6 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2, branch3, branch4, branch5, branch6 ]);
+
+ // Join branch 1 and 2
+ const joiner12 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch1, 'pulse' ], [branch2, 'pulse']]});
+ joiner12.then(f => f.add_op('control_wait', { id: 'joiner12', args: [ 11 ] }));
+
+ // Join branch (4 and 5), then operate, then merge with with 3
+ const joiner45 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch4, 'pulse' ], [branch5, 'pulse']]});
+ const branch4_bot = joiner45.then(f => f.add_op('control_wait', { id: 'branch4-5_bot',
+ args: [ 4.5 ] }));
+
+ // Join result of merge 4-5 with branch3
+ const joiner34 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch3, 'pulse' ], [branch4_bot, 'pulse']]});
+ joiner34.then(f => f.add_op('control_wait', { id: 'joiner34', args: [ 12 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-14: Stepped branch with multiple, complex joins.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork
+ ;; Branches 1 and 2
+ ((fork
+ (control_wait 1) ; Branch 1
+ (control_wait 2)) ; Branch 2
+ ;; After branch 1 and 2 join
+ (control_wait 11))
+ ;; Branches 3, 4, 5
+ ((fork
+ (control_wait 3) ; Branch 3
+ ((fork ; Branches 4 and 5
+ (control_wait 4)
+ (control_wait 5))
+ (control_wait 4.5))) ; Join 4 and 5
+ ;; Join 3 and 4
+ (control_wait 12))
+ ;; Branch 6
+ (control_wait 6))
+ ))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/15_stepped_loop_inside_fork.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/15_stepped_loop_inside_fork.spec.ts
new file mode 100644
index 00000000..d4e666f8
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/15_stepped_loop_inside_fork.spec.ts
@@ -0,0 +1,85 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ const branch3 = builder.add_op('control_wait', { id: 'branch3',
+ args: [ 3 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2, branch3 ]);
+
+ const branch3_loop_helper = builder.add_op('control_wait', { id: 'branch3-loop-helper',
+ args: [ 3.5 ]
+ });
+
+ branch3.then(branch3_loop_helper).then(branch3);
+
+ // Join branch 1 and 2
+ const joiner12 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch1, 'pulse' ], [branch2, 'pulse']]});
+ joiner12.then(f => f.add_op('control_wait', { id: 'joiner12', args: [ 11 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-15: Stepped loop inside fork.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork
+ ;; Branches 1 and 2
+ ((fork
+ (control_wait 1) ; Branch 1
+ (control_wait 2)) ; Branch 2
+ ;; After branch 1 and 2 join
+ (control_wait 11))
+
+ ;; Branch 3
+ ((jump-point "loop-start")
+ (control_wait 3) ; Branch 3
+ (control_wait 3.5)
+ (jump-to "loop-start")
+ )
+ )))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/16_stepped_loop_inside_fork_reches_join.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/16_stepped_loop_inside_fork_reches_join.spec.ts
new file mode 100644
index 00000000..d29d9e52
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/16_stepped_loop_inside_fork_reches_join.spec.ts
@@ -0,0 +1,92 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ const branch3 = builder.add_op('control_wait', { id: 'branch3',
+ args: [ 3 ]
+ });
+
+
+ const branch3_bot = builder.add_op('control_wait', { id: 'branch3-stepout',
+ args: [ 3.5 ]
+ });
+
+ const branch3_cond = builder.add_if(branch3_bot, branch3, { id: 'branch3-loop-helper',
+ cond: f => builder.add_stream('operator_equals', {args: [1, 1]})
+ });
+
+ branch3.then_id(branch3_cond);
+
+ builder.add_fork(trigger, [branch1, branch2, branch3 ]);
+
+ // Join branches
+ const joiner = builder.add_trigger('trigger_when_all_completed', {args: [
+ [ branch1, 'pulse' ],
+ [ branch2, 'pulse' ],
+ [ branch3_bot, 'pulse' ]
+ ]});
+ joiner.then(f => f.add_op('control_wait', { id: 'joiner', args: [ 11 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-16: Stepped loop inside fork reaches join.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork
+ (control_wait 1) ; Branch 1
+ (control_wait 2) ; Branch 2
+
+ ;; Branch 3
+ ((jump-point "loop-start")
+ (control_wait 3) ; Branch 3
+ (if (= 1 1)
+ ()
+ ((jump-to "loop-start")))
+ (control_wait 3.5))
+ )
+ (control_wait 11)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/17_if_else_simple_flow.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/17_if_else_simple_flow.spec.ts
new file mode 100644
index 00000000..8997b3aa
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/17_if_else_simple_flow.spec.ts
@@ -0,0 +1,73 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const stream_cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[stream_cond, 0]]});
+ const root = trigger.then(f => f.add_op('control_wait', { args: [ 0 ] }))
+ const branch1_top = builder.add_op('control_wait', { args: [ 1 ] });
+ const branch1_bot = branch1_top.then(f => f.add_op('control_wait', { args: [ 1.1 ]}));
+
+ const branch2_top = builder.add_op('control_wait', { args: [ 2 ] });
+ const branch2_bot = branch2_top.then(f => f.add_op('control_wait', { args: [ 2.1 ]}));
+
+ const if_cond = builder.add_if(branch1_top, branch2_top,
+ { cond: f => f.add_stream('operator_equals', {args: [1, 1]})
+ });
+
+ root.then_id(if_cond);
+
+ // Join branches
+ const joiner = builder.add_trigger('trigger_when_first_completed', {args: [
+ [ branch1_bot, 'pulse' ],
+ [ branch2_bot, 'pulse' ],
+ ]});
+ joiner.then(f => f.add_op('control_wait', { id: 'joiner', args: [ 3 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-17: Simple If-Else flow.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((wait-seconds 0)
+ (if (= 1 1)
+ ((wait-seconds 1)
+ (wait-seconds 1.1))
+ ((wait-seconds 2)
+ (wait-seconds 2.1)))
+ (control_wait 3)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/18_fork_branch_merged_twice.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/18_fork_branch_merged_twice.spec.ts
new file mode 100644
index 00000000..19092b3c
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/18_fork_branch_merged_twice.spec.ts
@@ -0,0 +1,96 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { lift_common_ops } from '../../../flow-editor/graph_transformations';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function process_flow(graph: FlowGraph): FlowGraph {
+ // Used by visualizing script to produce a processed version specific for this test
+ return lift_common_ops(graph);
+}
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+ const branch3 = builder.add_op('control_wait', { id: 'branch3',
+ args: [ 3 ] });
+
+ builder.add_fork(trigger, [branch1, branch2, branch3 ]);
+
+ const branch4 = builder.add_op('control_wait', { id: 'branch4',
+ args: [ 2.4 ]
+ })
+
+ const branch5 = builder.add_op('control_wait', { id: 'branch5',
+ args: [ 2.5 ]
+ })
+
+ builder.add_fork(branch2, [branch4, branch5]);
+
+ // Join branch 1 and 2
+ const joiner12 = builder.add_trigger('trigger_when_all_completed', { id: 'joiner12',
+ args: [[ branch1, 'pulse' ], [branch4, 'pulse']]})
+ .then(f => f.add_op('control_wait', { id: 'branch12', args: [ 12 ] }));
+
+ // Join branch 2 and 3
+ const joiner23 = builder.add_trigger('trigger_when_all_completed', { id: 'joiner23',
+ args: [[ branch5, 'pulse' ], [branch3, 'pulse']]})
+ .then(f => f.add_op('control_wait', { id: 'branch23', args: [ 23 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-18: Fork branch merged twice.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ;; Operation 2 is lifted out of common joins
+ ((wait-seconds 2)
+ (fork
+ ((fork
+ ((wait-seconds 1))
+ ((wait-seconds 2.4)))
+ (wait-seconds 12))
+ ((fork
+ (wait-seconds 3)
+ (wait-seconds 2.5))
+ (wait-seconds 23))
+ )))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/19_nested_forks.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/19_nested_forks.spec.ts
new file mode 100644
index 00000000..e58e5b27
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/19_nested_forks.spec.ts
@@ -0,0 +1,102 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+import { lift_common_ops } from '../../../flow-editor/graph_transformations';
+
+export function process_flow(graph: FlowGraph): FlowGraph {
+ // Used by visualizing script to produce a processed version specific for this test
+ return lift_common_ops(graph);
+}
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2 ]);
+
+ const branch3 = builder.add_op('control_wait', { args: [ 3 ] });
+ const branch4 = builder.add_op('control_wait', { args: [ 4 ] });
+
+ builder.add_fork(branch2, [branch3, branch4 ]);
+
+ const branch5 = builder.add_op('control_wait', { args: [ 5 ] });
+ const branch6 = builder.add_op('control_wait', { args: [ 6 ] });
+
+ builder.add_fork(branch4, [branch5, branch6 ]);
+
+
+ // Join branch 1 and 6
+ const joiner16 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch1, 'pulse' ], [branch6, 'pulse']]})
+ .then(f => f.add_op('control_wait', { args: [ 16 ] }));
+
+ // Join branch 3 and 5
+ const joiner35 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch3, 'pulse' ], [branch5, 'pulse']]})
+ .then(f => f.add_op('control_wait', { args: [ 35 ] }));
+
+ const joiner_all = builder.add_trigger('trigger_when_all_completed', {args: [[ joiner16, 'pulse' ],
+ [ joiner35, 'pulse' ]
+ ]});
+ joiner_all.then(f => f.add_op('control_wait', { args: [ 9 ]}))
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-19: Nested forks.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ;; Operations 2 and 4 are lifted out of common joins
+ ((wait-seconds 2)
+ (wait-seconds 4)
+ (fork
+ ;; Branch 1 & 6
+ ((fork
+ ((wait-seconds 1))
+ ((wait-seconds 6)))
+ (wait-seconds 16))
+ ;; Branch 2
+ ((fork
+ ((wait-seconds 5))
+ ((wait-seconds 3)))
+ (wait-seconds 35)))
+ (wait-seconds 9)
+ ))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/20_fork_with_non_consecutive_output.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/20_fork_with_non_consecutive_output.spec.ts
new file mode 100644
index 00000000..7c769c1b
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/20_fork_with_non_consecutive_output.spec.ts
@@ -0,0 +1,66 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ const branch3 = builder.add_op('control_wait', { id: 'branch3',
+ args: [ 3 ]
+ });
+
+ builder.add_fork(trigger, [null, branch2, branch3 ]);
+
+ // Join branch 2 and 3
+ const joiner23 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch2, 'pulse' ], [branch3, 'pulse']]});
+ joiner23.then(f => f.add_op('control_wait', { id: 'joiner23', args: [ 23 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-20: Fork with non consecutive output.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork
+ ((wait-seconds 2))
+
+ ((wait-seconds 3)))
+ (wait-seconds 23)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_01_fork_with_if_closer.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_01_fork_with_if_closer.spec.ts
new file mode 100644
index 00000000..f06eb77d
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_01_fork_with_if_closer.spec.ts
@@ -0,0 +1,63 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2]);
+
+ // Join branch 1 and 2
+ const joiner12 = builder.add_trigger('trigger_when_first_completed', {args: [[branch1, 'pulse'], [ branch2, 'pulse' ]]});
+ joiner12.then(f => f.add_op('control_wait', { id: 'joiner12', args: [ 12 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-01: Fork with IF closer (when FIRST completed).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork :exit-when-first-completed
+ ((wait-seconds 1))
+ ((wait-seconds 2)))
+ (wait-seconds 12)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_02_if_with_fork_closer.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_02_if_with_fork_closer.spec.ts
new file mode 100644
index 00000000..46074362
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_02_if_with_fork_closer.spec.ts
@@ -0,0 +1,39 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ trigger.then_id(builder.add_if(branch1, branch2, {
+ cond: [ cond, 0 ]
+ }))
+
+ // Join branch 1 and 2
+ const joiner12 = builder.add_trigger('trigger_when_all_completed', {args: [[branch1, 'pulse'], [ branch2, 'pulse' ]]});
+ joiner12.then(f => f.add_op('control_wait', { id: 'joiner12', args: [ 12 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-02: If with fork closer (when ALL completed).', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*can get to Join.*with no fork.*/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_03_fork_if_wait_all_success.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_03_fork_if_wait_all_success.spec.ts
new file mode 100644
index 00000000..98418e64
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_03_fork_if_wait_all_success.spec.ts
@@ -0,0 +1,75 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', { id: 'eq-check', args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2]);
+
+ // Join branch 1 and 2
+ const if_true = builder.add_op('control_wait', { args: [ 3 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 4 ] });
+
+ branch2.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+
+ const if_joiner = builder.add_trigger('trigger_when_first_completed', {args: [[ if_true, 'pulse' ], [if_false, 'pulse']]});
+ const joiner = builder.add_trigger('trigger_when_all_completed', {args: [[branch1, 'pulse'], [ if_joiner, 'pulse']]});
+ joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-03: Fork then IF, close merging ALL (correct form).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork
+ ((wait-seconds 1))
+ ((wait-seconds 2)
+ (if (flow-last-value "eq-check" 0)
+ ((wait-seconds 3))
+ ((wait-seconds 4)))
+ ))
+ (wait-seconds 9)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_04_fork_if_wait_all_fail_no_if_merge.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_04_fork_if_wait_all_fail_no_if_merge.spec.ts
new file mode 100644
index 00000000..3da091f5
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_04_fork_if_wait_all_fail_no_if_merge.spec.ts
@@ -0,0 +1,49 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2]);
+
+ // Join branch 1 and 2
+ const if_true = builder.add_op('control_wait', { args: [ 3 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 4 ] });
+
+ branch2.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+
+ const joiner = builder.add_trigger('trigger_when_all_completed', {args: [[branch1, 'pulse'], [ if_true, 'pulse' ], [if_false, 'pulse']]});
+ joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-04: Fork then IF, close merging ALL (fail: no if merge).', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*single conditional block.*has two connections to a fork join block/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_05_fork_if_wait_first_success.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_05_fork_if_wait_first_success.spec.ts
new file mode 100644
index 00000000..0370eef9
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_05_fork_if_wait_first_success.spec.ts
@@ -0,0 +1,75 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', { id: 'eq-check', args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2]);
+
+ // Join branch 1 and 2
+ const if_true = builder.add_op('control_wait', { args: [ 3 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 4 ] });
+
+ branch2.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+
+ const if_joiner = builder.add_trigger('trigger_when_first_completed', {args: [[ if_true, 'pulse' ], [if_false, 'pulse']]});
+ const joiner = builder.add_trigger('trigger_when_first_completed', {args: [[branch1, 'pulse'], [ if_joiner, 'pulse']]});
+ joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-05: Fork then IF, close merging FIRST (long form).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork :exit-when-first-completed
+ ((wait-seconds 1))
+ ((wait-seconds 2)
+ (if (flow-last-value "eq-check" 0)
+ ((wait-seconds 3))
+ ((wait-seconds 4)))
+ ))
+ (wait-seconds 9)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_06_fork_if_wait_first_success_shorter.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_06_fork_if_wait_first_success_shorter.spec.ts
new file mode 100644
index 00000000..329ffc96
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_06_fork_if_wait_first_success_shorter.spec.ts
@@ -0,0 +1,73 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {id: 'eq-check', args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const branch1 = builder.add_op('control_wait', { id: 'branch1',
+ args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 2 ]
+ });
+
+ builder.add_fork(trigger, [branch1, branch2]);
+
+ // Join branch 1 and 2
+ const if_true = builder.add_op('control_wait', { args: [ 3 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 4 ] });
+
+ branch2.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+ const joiner = builder.add_trigger('trigger_when_first_completed', {args: [[branch1, 'pulse'], [ if_true, 'pulse'], [if_false, 'pulse']]});
+ joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-06: Fork then IF, close merging first (short form).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((fork :exit-when-first-completed
+ ((wait-seconds 1))
+ ((wait-seconds 2)
+ (if (flow-last-value "eq-check" 0)
+ ((wait-seconds 3))
+ ((wait-seconds 4)))
+ ))
+ (wait-seconds 9)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_07_if_fork_first_long.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_07_if_fork_first_long.spec.ts
new file mode 100644
index 00000000..10c42a2c
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_07_if_fork_first_long.spec.ts
@@ -0,0 +1,74 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {id: 'eq-check', args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const if_true = builder.add_op('control_wait', { args: [ 1 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 2 ] });
+ trigger.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+ const branch3 = builder.add_op('control_wait', { args: [ 3 ]
+ });
+
+ const branch4 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 4 ]
+ });
+
+ builder.add_fork(if_true, [branch3, branch4]);
+
+ // Join branch 1 and 2
+
+
+ const fork_joiner = builder.add_trigger('trigger_when_first_completed', {args: [[branch3, 'pulse'], [ branch4, 'pulse']]});
+
+ const if_joiner = builder.add_trigger('trigger_when_first_completed', {args: [[fork_joiner, 'pulse'], [ if_false, 'pulse']]});
+ if_joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-07: IF then fork, close with IF merging (wait FIRST, long form).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((if (flow-last-value "eq-check" 0)
+ ((wait-seconds 1)
+ (fork :exit-when-first-completed
+ ((wait-seconds 3))
+ ((wait-seconds 4))))
+ ((wait-seconds 2)))
+ (wait-seconds 9)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_08_if_fork_first_short.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_08_if_fork_first_short.spec.ts
new file mode 100644
index 00000000..7f6735a4
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_08_if_fork_first_short.spec.ts
@@ -0,0 +1,70 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {id: 'eq-check', args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const if_true = builder.add_op('control_wait', { args: [ 1 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 2 ] });
+ trigger.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+ const branch3 = builder.add_op('control_wait', { args: [ 3 ]
+ });
+
+ const branch4 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 4 ]
+ });
+
+ builder.add_fork(if_true, [branch3, branch4]);
+
+ // Join branch 1 and 2
+ const if_joiner = builder.add_trigger('trigger_when_first_completed', {args: [[branch3, 'pulse'], [branch4, 'pulse'], [ if_false, 'pulse']]});
+ if_joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-08: IF then fork, close with IF merging (wait FIRST, short form).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((if (flow-last-value "eq-check" 0)
+ ((wait-seconds 1)
+ (fork :exit-when-first-completed
+ ((wait-seconds 3))
+ ((wait-seconds 4))))
+ ((wait-seconds 2)))
+ (wait-seconds 9)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_09_if_fork_wait_all.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_09_if_fork_wait_all.spec.ts
new file mode 100644
index 00000000..bfda8228
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_09_if_fork_wait_all.spec.ts
@@ -0,0 +1,72 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', { id: 'eq-check', args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const if_true = builder.add_op('control_wait', { args: [ 1 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 2 ] });
+ trigger.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+ const branch3 = builder.add_op('control_wait', { args: [ 3 ]
+ });
+
+ const branch4 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 4 ]
+ });
+
+
+ builder.add_fork(if_true, [branch3, branch4]);
+
+ // Join branch 1 and 2
+ const fork_joiner = builder.add_trigger('trigger_when_all_completed', {args: [[branch3, 'pulse'], [ branch4, 'pulse']]});
+ const if_joiner = builder.add_trigger('trigger_when_first_completed', {args: [[ fork_joiner, 'pulse' ], [if_false, 'pulse']]});
+ if_joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-09: IF then Fork, close merging ALL (correct form).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11)
+ )
+ ((if (flow-last-value "eq-check" 0)
+ ((wait-seconds 1)
+ (fork
+ ((wait-seconds 3))
+ ((wait-seconds 4))))
+ ((wait-seconds 2)))
+ (wait-seconds 9)))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/21_10_if_fork_wait_all_fail.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/21_10_if_fork_wait_all_fail.spec.ts
new file mode 100644
index 00000000..3014d36e
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/21_10_if_fork_wait_all_fail.spec.ts
@@ -0,0 +1,48 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { are_equivalent_ast } from './utils.spec';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const if_true = builder.add_op('control_wait', { args: [ 1 ] });
+ const if_false = builder.add_op('control_wait', { args: [ 2 ] });
+ trigger.then_id(builder.add_if(if_true, if_false, { cond: [cond, 0] }))
+
+ const branch3 = builder.add_op('control_wait', { args: [ 3 ]
+ });
+
+ const branch4 = builder.add_op('control_wait', { id: 'branch2',
+ args: [ 4 ]
+ });
+
+
+ builder.add_fork(if_true, [branch3, branch4]);
+
+ // Join branch 1 and 2
+ const fork_joiner = builder.add_trigger('trigger_when_all_completed', {args: [[branch3, 'pulse'], [ branch4, 'pulse']]});
+ const if_joiner = builder.add_trigger('trigger_when_all_completed', {args: [[ fork_joiner, 'pulse' ], [if_false, 'pulse']]});
+ if_joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-21-10: IF then Fork, close merging ALL (wrong form).', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*can get to Join.*with no fork.*$/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/22_stepped_loop_inside_fork_goes_outside.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/22_stepped_loop_inside_fork_goes_outside.spec.ts
new file mode 100644
index 00000000..b7315c4b
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/22_stepped_loop_inside_fork_goes_outside.spec.ts
@@ -0,0 +1,44 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const before_fork = builder.add_op('control_wait', { args: [ 0 ]
+ });
+
+ const branch1 = builder.add_op('control_wait', { args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { args: [ 2 ]
+ });
+
+ const branch3 = builder.add_op('control_wait', { args: [ 3 ]
+ });
+
+ trigger.then(before_fork);
+ builder.add_fork(before_fork, [branch1, branch2, branch3 ]);
+
+ branch3.then(before_fork);
+
+ // Join branch 1 and 2
+ const joiner12 = builder.add_trigger('trigger_when_all_completed', {args: [[ branch1, 'pulse' ], [branch2, 'pulse']]});
+ joiner12.then(f => f.add_op('control_wait', { id: 'joiner12', args: [ 11 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-22: Stepped loop inside fork goes outside of it.', () => {
+ it('Validation should pass', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Loop around Fork blocks not allowed.*/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/23_calling_from_second_source_to_forked_flow_fails.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/23_calling_from_second_source_to_forked_flow_fails.spec.ts
new file mode 100644
index 00000000..bb909521
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/23_calling_from_second_source_to_forked_flow_fails.spec.ts
@@ -0,0 +1,38 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source1 = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+ const source2 = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+
+ const trigger1 = builder.add_trigger('trigger_on_signal', {args: [[source1, 0]]});
+ const trigger2 = builder.add_trigger('trigger_on_signal', {args: [[source2, 0]]});
+
+ // Stepped section
+ const branch1 = builder.add_op('control_wait', { args: [ 1 ]
+ });
+
+ const branch2 = builder.add_op('control_wait', { args: [ 2 ]
+ });
+
+ builder.add_fork(trigger1, [branch1, branch2]);
+ trigger2.then(branch2);
+
+ // Join branch 1 and 2
+ const joiner = builder.add_trigger('trigger_when_all_completed', {args: [[ branch1, 'pulse' ], [branch2, 'pulse']]});
+ joiner.then(f => f.add_op('control_wait', { args: [ 9 ] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-23: Calling from second source to forked flow fails.', () => {
+ it('Validation should pass', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError: Block .* can get to Join .* with no fork.*/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/24_get_output_of_operation.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/24_get_output_of_operation.spec.ts
new file mode 100644
index 00000000..3cc27cc7
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/24_get_output_of_operation.spec.ts
@@ -0,0 +1,55 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: options.source_id, message: 'UTC time'});
+ const trigger = builder.add_trigger('trigger_on_signal', {args: [[source, 0]]});
+
+ // Stepped section
+ const operation = builder.add_op('create_issue', { id: 'operation-with-value',
+ namespace: 'gitlab',
+ args: [ "Sample project", "Sample title" ]
+ });
+ trigger.then(operation);
+ operation
+ .then(f => f.add_op('control_wait', { args: [ 1 ] }))
+ .then(f => f.add_op('logging_add_log', { args: [[operation, 1]] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-24: Get output of operation block.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const TIME_BLOCK = "ad97e5d1-c725-4cc6-826f-30057f239635";
+ const OP_BLOCK_ID = "operation-with-value";
+
+ are_equivalent_ast(compile(gen_flow({ source_id: TIME_BLOCK })), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (call-service id: "gitlab"
+ action: "create_issue"
+ values: ("Sample project" "Sample title"))
+ (wait-seconds 1)
+ (log (flow-last-value "${OP_BLOCK_ID}" 1))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/25_01_defend_against_glitches.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/25_01_defend_against_glitches.spec.ts
new file mode 100644
index 00000000..a9f6138a
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/25_01_defend_against_glitches.spec.ts
@@ -0,0 +1,54 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: options.source_id, message: 'UTC time'});
+ const trigger = builder.add_trigger('trigger_on_signal', {args: [[source, 0]]});
+
+ // Var
+ const xblock = builder.add_variable_getter_node('x', { id: 'x1' });
+ const xblock2 = builder.add_variable_getter_node('x', { id: 'x2' });
+
+ const addition1 = builder.add_op('operator_add', { id: 'add1', args: [[xblock, 0], 1] });
+ const addition2 = builder.add_op('operator_add', { id: 'add2', args: [[addition1, 0], [xblock, 0]] });
+ const log1 = builder.add_op('logging_add_log', { id: 'log1', args: [[addition1, 0]] });
+ const log2 = builder.add_op('logging_add_log', { id: 'log2', args: [[addition2, 0]] });
+ const log3 = builder.add_op('logging_add_log', { id: 'log3', args: [[xblock2, 0]] });
+
+ trigger.then(log1).then(log2).then(log3);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-25-01: Defend against glitches.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const TIME_BLOCK = "ad97e5d1-c725-4cc6-826f-30057f239635";
+
+ are_equivalent_ast(compile(gen_flow({ source_id: TIME_BLOCK })), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (log (+ (get-var x) 1))
+ (log (+ (flow-last-value "add1" 0) (flow-last-value "x1" 0)))
+ (log (get-var x))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/25_02_same_getter_used_twice_by_same_operation.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/25_02_same_getter_used_twice_by_same_operation.spec.ts
new file mode 100644
index 00000000..8919375f
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/25_02_same_getter_used_twice_by_same_operation.spec.ts
@@ -0,0 +1,58 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { extract_internally_reused_arguments } from '../../../flow-editor/graph_transformations';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function process_flow(graph: FlowGraph): FlowGraph {
+ // Used by visualizing script to produce a processed version specific for this test
+ return extract_internally_reused_arguments(graph);
+}
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: options.source_id, message: 'UTC time'});
+ const trigger = builder.add_trigger('trigger_on_signal', {args: [[source, 0]]});
+
+ // Var
+ const xblock = builder.add_variable_getter_node('x', { id: 'x' });
+
+ const addition1 = builder.add_op('operator_add', { id: 'add1', args: [[xblock, 0], 1] });
+ const addition2 = builder.add_op('operator_add', { id: 'add2', args: [[xblock, 0], 2] });
+ const join_add = builder.add_op('operator_add', { id: 'join_add', args: [[addition1, 0], [addition2, 0]] });
+ const log1 = builder.add_op('logging_add_log', { id: 'log1', args: [[join_add, 0]] });
+
+ trigger.then(log1);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-25-02: Same getter used twice by same operation.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const TIME_BLOCK = "ad97e5d1-c725-4cc6-826f-30057f239635";
+
+ are_equivalent_ast(compile(gen_flow({ source_id: TIME_BLOCK })), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (preload (get-var x))
+ (log (+ (+ (flow-last-value x 0) 1)
+ (+ (flow-last-value x 0) 2)))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/25_03_same_getter_twice_two_asts.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/25_03_same_getter_twice_two_asts.spec.ts
new file mode 100644
index 00000000..744b97ac
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/25_03_same_getter_twice_two_asts.spec.ts
@@ -0,0 +1,64 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { extract_internally_reused_arguments } from '../../../flow-editor/graph_transformations';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function process_flow(graph: FlowGraph): FlowGraph {
+ // Used by visualizing script to produce a processed version specific for this test
+ return extract_internally_reused_arguments(graph);
+}
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: options.source_id, message: 'UTC time'});
+ const trigger1 = builder.add_trigger('trigger_on_signal', {args: [[source, 0]]});
+ const trigger2 = builder.add_trigger('trigger_on_signal', {args: [[source, 0]]});
+
+ // Var
+ const xblock = builder.add_variable_getter_node('x', { id: 'x' });
+
+ const addition11 = builder.add_op('operator_add', { id: 'add11', args: [[xblock, 0], 1] });
+ const addition12 = builder.add_op('operator_add', { id: 'add12', args: [[xblock, 0], 2] });
+ const join_add1 = builder.add_op('operator_add', { id: 'join_add1', args: [[addition11, 0], [addition12, 0]] });
+ const log1 = builder.add_op('logging_add_log', { id: 'log1', args: [[join_add1, 0]] });
+
+ const addition21 = builder.add_op('operator_add', { id: 'add21', args: [[xblock, 0], 1] });
+ const addition22 = builder.add_op('operator_add', { id: 'add22', args: [[xblock, 0], 2] });
+ const join_add2 = builder.add_op('operator_add', { id: 'join_add2', args: [[addition21, 0], [addition22, 0]] });
+ const log2 = builder.add_op('logging_add_log', { id: 'log2', args: [[join_add2, 0]] });
+
+ trigger1.then(log1);
+ trigger2.then(log2);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-25-03: Same getter used twice in two ASTs.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const TIME_BLOCK = "ad97e5d1-c725-4cc6-826f-30057f239635";
+
+ const expected_ast = gen_compiled(dsl_to_ast(`;PM-DSL;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (preload (get-var x))
+ (log (+ (+ (flow-last-value x 0) 1)
+ (+ (flow-last-value x 0) 2)))
+ `));
+ are_equivalent_ast(compile(gen_flow({ source_id: TIME_BLOCK })),
+ [ expected_ast, expected_ast ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/26_trigger_with_no_getter.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/26_trigger_with_no_getter.spec.ts
new file mode 100644
index 00000000..4466263f
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/26_trigger_with_no_getter.spec.ts
@@ -0,0 +1,52 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile, get_unreachable } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Stepped section
+ const trigger = builder.add_trigger('on_new_message', {id: 'trigger', namespace: chat, args: []});
+ const operation = builder.add_op('respond', { namespace: chat,
+ args: [[ trigger, 1]]
+ });
+ trigger.then(operation);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-26: Trigger with no getter.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should find no unreachable blocks', async () => {
+ expect(get_unreachable(gen_flow())).toEqual([]);
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.de5baefb-13da-457e-90a5-57a753da8891.on_new_message )
+ (call-service id: ${CHAT_SVC}
+ action: respond
+ values: ((flow-last-value trigger 1)
+ ))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/27_01_control_wait_for_value_directly_bridge_trigger.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/27_01_control_wait_for_value_directly_bridge_trigger.spec.ts
new file mode 100644
index 00000000..b79a2c5e
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/27_01_control_wait_for_value_directly_bridge_trigger.spec.ts
@@ -0,0 +1,46 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Stepped section
+ const trigger = builder.add_trigger('on_new_message', {id: 'trigger', namespace: chat, args: []});
+ const waited = builder.add_trigger('on_new_message', {id: 'waited', namespace: chat, args: []});
+
+ const operation = builder.add_op('control_wait_for_next_value', { args: [[ waited, 1]]
+ });
+ trigger.then(operation);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-27-01: Wait for value might have direct connection from a bridge trigger.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.de5baefb-13da-457e-90a5-57a753da8891.on_new_message )
+ (control_wait_for_next_value (flow-last-value waited 1))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/27_02_control_wait_for_value_directly_variable.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/27_02_control_wait_for_value_directly_variable.spec.ts
new file mode 100644
index 00000000..da4051b0
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/27_02_control_wait_for_value_directly_variable.spec.ts
@@ -0,0 +1,45 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Stepped section
+ const trigger = builder.add_trigger('on_new_message', {id: 'trigger', namespace: chat, args: []});
+
+ const operation = builder.add_op('control_wait_for_next_value', { args: [{from_variable: 'reference'}]
+ });
+ trigger.then(operation);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-27-02: Wait for value might have direct connection from a variable.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const CHAT_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.de5baefb-13da-457e-90a5-57a753da8891.on_new_message )
+ (control_wait_for_next_value (get-var reference))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/27_03_control_wait_for_value_requires_connection.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/27_03_control_wait_for_value_requires_connection.spec.ts
new file mode 100644
index 00000000..a5ae4c13
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/27_03_control_wait_for_value_requires_connection.spec.ts
@@ -0,0 +1,29 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Stepped section
+ const trigger = builder.add_trigger('on_new_message', {id: 'trigger', namespace: chat, args: []});
+
+ const operation = builder.add_op('control_wait_for_next_value', { args: []
+ });
+ trigger.then(operation);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-27-03: Wait for value requires connection.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Required input has no connections.*/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/27_04_control_wait_for_value_not_accept_normal_getter.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/27_04_control_wait_for_value_not_accept_normal_getter.spec.ts
new file mode 100644
index 00000000..2c03e272
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/27_04_control_wait_for_value_not_accept_normal_getter.spec.ts
@@ -0,0 +1,30 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Stepped section
+ const trigger = builder.add_trigger('on_new_message', {id: 'trigger', namespace: chat, args: []});
+ const test = builder.add_stream('operator_equals', {args: [0, 0]});
+
+ const operation = builder.add_op('control_wait_for_next_value', { args: [[test, 0]]
+ });
+ trigger.then(operation);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-27-04: Wait for value does not accept normal getter.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Wait for value does not accept a getter as input.*/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/27_05_control_wait_for_value_not_accept_constant.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/27_05_control_wait_for_value_not_accept_constant.spec.ts
new file mode 100644
index 00000000..ef3540d3
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/27_05_control_wait_for_value_not_accept_constant.spec.ts
@@ -0,0 +1,29 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { validate } from '../../../flow-editor/graph_validation';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const chat = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Stepped section
+ const trigger = builder.add_trigger('on_new_message', {id: 'trigger', namespace: chat, args: []});
+
+ const operation = builder.add_op('control_wait_for_next_value', { args: ["sample"]
+ });
+ trigger.then(operation);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-27-05: Wait for value does not accept a constant input.', () => {
+ it('Validation should FAIL', async () => {
+ expect(() => validate(gen_flow()))
+ .toThrowError(/^ValidationError:.*Wait for value does not accept a constant as input.*/i)
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/27_06_control_wait_for_value_accept_time.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/27_06_control_wait_for_value_accept_time.spec.ts
new file mode 100644
index 00000000..84d53dcd
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/27_06_control_wait_for_value_accept_time.spec.ts
@@ -0,0 +1,49 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ // Stepped section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+
+ const cond = builder.add_stream('operator_equals', {args: [[source, 0], 11]});
+ const trigger = builder.add_trigger('trigger_when_all_true', {id: 'trigger', args: [[cond, 0]]})
+
+ const waited = builder.add_stream('flow_utc_time', {id: 'intermediate', message: 'UTC time'});
+
+ const operation = builder.add_op('control_wait_for_next_value', { args: [[ waited, 1]]
+ });
+ trigger.then(operation);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-27-06: Wait for value might have direct connection from a time trigger.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (flow-last-value "source" 0)
+ 11))
+ ((control_wait_for_next_value (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}" ))))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/28_filter_on_trigger.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/28_filter_on_trigger.spec.ts
new file mode 100644
index 00000000..191ae2e9
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/28_filter_on_trigger.spec.ts
@@ -0,0 +1,55 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Services
+ const dataSource = builder.add_service('de5baefb-13da-457e-90a5-57a753da8891');
+
+ // Trigger
+ const trigger = builder.add_trigger('trigger_on_message', {id: 'trigger', args: [], namespace: dataSource});
+
+ // Condition that flows from trigger
+ const cond = builder.add_getter('operator_equals', {args: [[ trigger, 1], "/clear"]});
+ const check = builder.add_op('control_if_else', {args: [[cond, 0]]});
+
+ // Check result
+ const log1 = builder.add_op('logging_add_log', { id: 'log1', args: ["Clearing"] });
+ const log2 = builder.add_op('logging_add_log', { id: 'log2', args: ["Not clearing"] });
+
+ trigger.then(check);
+ check.then(log1, 0);
+ check.then(log2, 1);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-28: Filter trigger result.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const DATA_SVC = "de5baefb-13da-457e-90a5-57a753da8891";
+
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.${DATA_SVC}.trigger_on_message)
+ (if (= (flow-last-value "trigger" 1) "/clear")
+ ((log "Clearing"))
+ ((log "Not clearing")))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/29_trigger_with_button.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/29_trigger_with_button.spec.ts
new file mode 100644
index 00000000..705dbba4
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/29_trigger_with_button.spec.ts
@@ -0,0 +1,41 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger = builder.add_trigger('simple_button', {id: 'trigger', args: []});
+
+ // Simple operation
+ const log1 = builder.add_op('logging_add_log', { id: 'log1', args: ["Triggered"] });
+
+ trigger.then(log1);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-29: Trigger with button.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger)
+ (log "Triggered")
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/30_update_output_from_variable.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/30_update_output_from_variable.spec.ts
new file mode 100644
index 00000000..23394794
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/30_update_output_from_variable.spec.ts
@@ -0,0 +1,35 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ builder.add_getter('dynamic_text', { id: 'out', args: [{from_variable: 'x'}] });
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-30: Update output from variable.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (on-var x)
+ (services.ui.dynamic_text.out (get-var x))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/31_stepped_out_to_flow.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/31_stepped_out_to_flow.spec.ts
new file mode 100644
index 00000000..6f47e63c
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/31_stepped_out_to_flow.spec.ts
@@ -0,0 +1,63 @@
+import { split_streaming_after_stepped } from '../../../flow-editor/graph_transformations';
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function process_flow(graph: FlowGraph): FlowGraph {
+ // Used by visualizing script to produce a processed version specific for this test
+ return split_streaming_after_stepped(graph);
+}
+
+const SERVICE = 'placeholder';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger = builder.add_trigger('simple_button', {id: 'trigger', args: []});
+
+ // Simple operation
+ const operation = builder.add_op('op_with_output', { id: 'op', args: ["Triggered"], namespace: SERVICE });
+ const out_of_tree_op = builder.add_op('logging_add_log', { id: 'log', args: ["Out of tree"] });
+
+ trigger
+ .then(operation)
+ .then(out_of_tree_op)
+ ;
+
+ builder.add_getter('dynamic_text', { id: 'out', args: [[operation, 1]] });
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-31: Update streaming block from stepped flow.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger)
+ (call-service id: ${SERVICE} action: op_with_output values: ("Triggered"))
+ (log "Out of tree")
+ `)),
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (on-block-run "op" 1)
+ (services.ui.dynamic_text.out (flow-last-value "op" 1))
+ `
+ ))
+
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/32_convergence_of_multiple_trigger_values.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/32_convergence_of_multiple_trigger_values.spec.ts
new file mode 100644
index 00000000..4e9bc631
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/32_convergence_of_multiple_trigger_values.spec.ts
@@ -0,0 +1,58 @@
+import { split_streaming_after_stepped } from '../../../flow-editor/graph_transformations';
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+const SERVICE = 'placeholder';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger1 = builder.add_trigger('simple_button', {id: 'trigger1'});
+ const trigger2 = builder.add_trigger('simple_button', {id: 'trigger2'});
+ (builder.nodes.trigger1.value as any).extra.textContent = '1';
+ (builder.nodes.trigger2.value as any).extra.textContent = '2';
+
+ // Simple operation
+ const out_of_tree_op = builder.add_op('logging_add_log', { id: 'log', args: [] });
+
+ trigger1.then(out_of_tree_op);
+ trigger2.then(out_of_tree_op);
+
+ builder.establish_connection(['trigger1', 1], ['log', 1]);
+ builder.establish_connection(['trigger2', 1], ['log', 1]);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-32: Convergence of multiple trigger values.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger1)
+ (log (data_ui_block_value "trigger1"))
+ `)),
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger2)
+ (log (data_ui_block_value "trigger2"))
+ `
+ ))
+
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/33_parallel_trigger_to_flow_and_stepped.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/33_parallel_trigger_to_flow_and_stepped.spec.ts
new file mode 100644
index 00000000..0e3c7791
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/33_parallel_trigger_to_flow_and_stepped.spec.ts
@@ -0,0 +1,50 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+const SERVICE = 'placeholder';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger = builder.add_trigger('trigger_on_message', {id: 'trigger', args: [], namespace: SERVICE});
+
+ // Simple operation
+ trigger.then(b => b.add_op('logging_add_log', { id: 'log', args: [[trigger, 1]] }));
+
+ // Streaming operation
+ builder.add_getter('dynamic_text', { id: 'out', args: [[trigger, 1 ]] });
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-33: Parallel trigger to flow and stepped.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.${SERVICE}.trigger_on_message)
+ (log (flow-last-value trigger 1))
+ `)),
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.${SERVICE}.trigger_on_message)
+ (services.ui.dynamic_text.out (flow-last-value trigger 1))
+ `))
+
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/34_show_date_on_dynamic_text.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/34_show_date_on_dynamic_text.spec.ts
new file mode 100644
index 00000000..1e86875c
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/34_show_date_on_dynamic_text.spec.ts
@@ -0,0 +1,58 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger = builder.add_trigger('flow_utc_date', {id: 'trigger', args: []});
+
+ // Streaming operation
+ builder.add_getter('dynamic_text', { id: 'year', args: [[trigger, 0 ]] });
+ builder.add_getter('dynamic_text', { id: 'month', args: [[trigger, 1 ]] });
+ builder.add_getter('dynamic_text', { id: 'day', args: [[trigger, 2 ]] });
+ builder.add_getter('dynamic_text', { id: 'dow', args: [[trigger, 3 ]] });
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-34: Show date on dynamic text.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ const TIME_SVC = '0093325b-373f-4f1c-bace-4532cce79df4';
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_date from_service: ${TIME_SVC})
+ (services.ui.dynamic_text.year (flow-last-value trigger 0))
+ `)),
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_date from_service: ${TIME_SVC})
+ (services.ui.dynamic_text.month (flow-last-value trigger 1))
+ `)),
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_date from_service: ${TIME_SVC})
+ (services.ui.dynamic_text.day (flow-last-value trigger 2))
+ `)),
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_date from_service: ${TIME_SVC})
+ (services.ui.dynamic_text.dow (flow-last-value trigger 3))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/35_value_from_textbox.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/35_value_from_textbox.spec.ts
new file mode 100644
index 00000000..2379e1ec
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/35_value_from_textbox.spec.ts
@@ -0,0 +1,40 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger = builder.add_trigger('simple_button', {id: 'trigger', args: []});
+ const textbox = builder.add_trigger('text_box', {id: 'textbox', args: []});
+
+ // Simple operation
+ trigger.then(b => b.add_op('logging_add_log', { id: 'log1', args: [[textbox, 1]] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-35: Value from textbox.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger)
+ (log (data_ui_block_value textbox))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/36_if_else_in_loop.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/36_if_else_in_loop.spec.ts
new file mode 100644
index 00000000..9ec6571c
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/36_if_else_in_loop.spec.ts
@@ -0,0 +1,54 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger = builder.add_trigger('simple_button', {id: 'trigger', args: []});
+
+ // Condition & Check
+ const cond = builder.add_stream('operator_equals', { id: 'equals', args: [1, 2, 11]});
+ const check = builder.add_op('control_if_else', { id: 'check', args: [ [cond, 0] ] });
+
+ // /----------------\
+ // ↓ |
+ // Trigger → wait 1 -/
+ // |
+ // \--→ wait 2 (finish)
+ //
+ trigger.then(check).then(f => f.add_op('control_wait', { id: 'true-branch', args: [ 1 ]})).then(check);
+ check.then(f => f.add_op('control_wait', { id: 'false-branch', args: [ 2 ] }), 1);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-36: If-else in loop.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger)
+ (jump-point "check")
+ (if (= 1 2 11)
+ ((wait-seconds 1)
+ (jump-to "check")
+ )
+ ((wait-seconds 2)))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/37_repeat_loop.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/37_repeat_loop.spec.ts
new file mode 100644
index 00000000..19a54fdf
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/37_repeat_loop.spec.ts
@@ -0,0 +1,72 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(options?: { two_ops: boolean }): FlowGraph {
+ if (!options) { options = { two_ops: false }; }
+
+ const builder = new GraphBuilder();
+
+ // Trigger
+ const trigger = builder.add_trigger('simple_button', {id: 'trigger', args: []});
+
+ // Loop
+ const loop = builder.add_op('control_repeat', { id: 'loop', args: [ 3 ] });
+
+ //
+ // Loop → wait 1 (iteration completed)
+ // |
+ // \→ wait 2 (finish)
+ //
+
+ const log = builder.add_op('logging_add_log', { id: 'in-loop', args: [ [loop, 1] ]});
+
+ trigger
+ .then(loop)
+ .then(log)
+
+ if (options.two_ops) {
+ log.then(f => f.add_op('control_wait', { args: [ 1 ] }));
+ }
+
+ loop.then(f => f.add_op('logging_add_log', { id: 'out-of-loop', args: [ [loop, 1] ] }), 2);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-37: Repeat loop.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile with one op', async () => {
+ are_equivalent_ast(compile(gen_flow({ two_ops: false })), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger)
+ (repeat 3
+ (log (flow-last-value "loop" 1)))
+ (log (flow-last-value "loop" 1))
+ `))
+ ]);
+ });
+
+ it('Should be able to compile with two ops', async () => {
+ are_equivalent_ast(compile(gen_flow({ two_ops: true })), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.trigger)
+ (repeat 3
+ (log (flow-last-value "loop" 1))
+ (wait-seconds 1))
+ (log (flow-last-value "loop" 1))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/38_01_extract_wait_for_monitor_as_argument.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/38_01_extract_wait_for_monitor_as_argument.spec.ts
new file mode 100644
index 00000000..ca021363
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/38_01_extract_wait_for_monitor_as_argument.spec.ts
@@ -0,0 +1,43 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+const TIME_SVC = '0093325b-373f-4f1c-bace-4532cce79df4';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Source
+ const source = builder.add_trigger('flow_utc_date', {id: 'time', args: []});
+
+ // Stepper section operation
+ const trigger = builder.add_trigger('simple_button', {id: 'button', args: []});
+ trigger.then(b => b.add_op('logging_add_log', { id: 'logger', args: [[source, 1 ]] }));
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-38: Extract wait-for-monitor as argument.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.button)
+ (wait-for-monitor key: utc_date from_service: ${TIME_SVC})
+ (log (flow-last-value time 1))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/38_02_extract_wait_for_monitor_as_argument_in_contents.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/38_02_extract_wait_for_monitor_as_argument_in_contents.spec.ts
new file mode 100644
index 00000000..fb37d90a
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/38_02_extract_wait_for_monitor_as_argument_in_contents.spec.ts
@@ -0,0 +1,54 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+const TIME_SVC = '0093325b-373f-4f1c-bace-4532cce79df4';
+
+export function gen_flow(options?: { source_id?: string }): FlowGraph {
+ if (!options) { options = {} }
+
+ const builder = new GraphBuilder();
+
+ // Source
+ const source = builder.add_trigger('flow_utc_date', {id: 'time', args: []});
+
+ // Stepper section operation
+ const trigger = builder.add_trigger('simple_button', {id: 'button', args: []});
+
+ const branch1 = builder.add_op('logging_add_log', { id: 'logger-1', args: [[source, 1 ]] });
+ const branch2 = builder.add_op('logging_add_log', { id: 'logger-2', args: [[source, 2 ]] });
+
+ const if_cond = builder.add_if(branch1, branch2,
+ { cond: f => f.add_stream('operator_equals', {args: [1, 1]})
+ });
+
+ trigger.then_id(if_cond);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-38-02: Extract wait-for-monitor as argument (in contents).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile(gen_flow()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.ui.simple_button.button)
+ (if (= 1 1)
+ ((wait-for-monitor key: utc_date from_service: ${TIME_SVC})
+ (log (flow-last-value time 1)))
+ ((wait-for-monitor key: utc_date from_service: ${TIME_SVC})
+ (log (flow-last-value time 2))))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/90_reactive_get_even.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/90_reactive_get_even.spec.ts
new file mode 100644
index 00000000..20decd68
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/90_reactive_get_even.spec.ts
@@ -0,0 +1,53 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+
+ const mod = builder.add_stream('operator_modulo', {args: [[source, 0], 2]});
+ const cond = builder.add_stream('operator_equals', {args: [[mod, 0], 0]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+ const op = builder.add_op('logging_add_log', { args: [ [source, 0] ]
+ });
+ trigger.then(op);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-90: [Reactive] Get even values.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (mod (flow-last-value "source" 0) 2)
+ 0)
+ )
+ ((log (flow-last-value "source" 0))))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/91_1_reactive_take_n_first.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/91_1_reactive_take_n_first.spec.ts
new file mode 100644
index 00000000..9a1092d7
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/91_1_reactive_take_n_first.spec.ts
@@ -0,0 +1,66 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+
+ const mod = builder.add_stream('operator_modulo', {args: [[source, 0], 2]});
+ const cond = builder.add_stream('operator_equals', {args: [[mod, 0], 0]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const update = builder.add_op('data_setvariableto', {
+ args: [
+ [f => f.add_getter('operator_add', { args: [ 1, { from_variable: 'counter' } ] }) , 0] ],
+ slots: { 'variable': 'counter' }
+ });
+ const op = builder.add_op('logging_add_log', { args: [ [source, 0] ]
+ });
+
+ const take_cond = builder.add_if(update, null, {
+ cond: [f => f.add_getter('operator_lt', { args: [ { from_variable: 'counter' }, 'N' ] }), 0]
+ });
+ trigger.then_id(take_cond);
+ update.then(op);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-91-1: [Reactive] Take N first values.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (mod (flow-last-value "source" 0) 2)
+ 0)
+ )
+ ((if (< (get-var counter) N)
+ ((set-var counter (+ 1 (get-var counter)))
+ (log (flow-last-value "source" 0))))))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/91_2_reactive_take_n_first_inverted_if.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/91_2_reactive_take_n_first_inverted_if.spec.ts
new file mode 100644
index 00000000..dd1bd0d3
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/91_2_reactive_take_n_first_inverted_if.spec.ts
@@ -0,0 +1,68 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+
+ const mod = builder.add_stream('operator_modulo', {args: [[source, 0], 2]});
+ const cond = builder.add_stream('operator_equals', {args: [[mod, 0], 0]});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_when_all_true', {args: [[cond, 0]]});
+
+ const update = builder.add_op('data_setvariableto', {
+ args: [
+ [f => f.add_getter('operator_add', { args: [ 1, { from_variable: 'counter' } ] }) , 0] ],
+ slots: { 'variable': 'counter' }
+ });
+ const op = builder.add_op('logging_add_log', { args: [ [source, 0] ]
+ });
+
+ const take_cond = builder.add_if(null, update, {
+ cond: [f => f.add_getter('operator_gt', { args: [ { from_variable: 'counter' }, 'N' ] }), 0]
+ });
+ trigger.then_id(take_cond);
+ update.then(op);
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-91-2: [Reactive] Take N first values (inverted if).', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (and (= (mod (flow-last-value "source" 0) 2)
+ 0)
+ )
+ ((if (> (get-var counter) N)
+ ()
+ ; Else branch ↓
+ ((set-var counter (+ 1 (get-var counter)))
+ (log (flow-last-value "source" 0))))))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/92_reactive_take_n_last.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/92_reactive_take_n_last.spec.ts
new file mode 100644
index 00000000..cd878037
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/92_reactive_take_n_last.spec.ts
@@ -0,0 +1,65 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+
+ // Stepped section
+ const trigger = builder.add_trigger('trigger_on_signal', {args: [[source, 0]]});
+
+ const make_space = builder.add_op('data_deleteoflist', { slots: { list: 'latest' }, args: [ 1 ] })
+
+ const add_new = builder.add_op('data_addtolist', { slots: { list: 'latest' }, args: [ [source, 0] ] })
+ make_space.then(add_new);
+
+ const take_cond = builder.add_if(make_space, add_new, {
+ cond: [f => f.add_getter('operator_gt',
+ { args: [
+ [
+ f => f.add_getter('data_lengthoflist',
+ {slots: { list: 'latest' }}),
+ 0 ],
+ 3]
+ }),
+ 0,
+ ]
+ });
+ trigger.then_id(take_cond)
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-92: [Reactive] Take N last values.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (if (> (list-length latest) 3)
+ ((delete-list-index latest 1)))
+ (add-to-list latest (flow-last-value "source" 0))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/93_reactive_debounce.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/93_reactive_debounce.spec.ts
new file mode 100644
index 00000000..f5a02b62
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/93_reactive_debounce.spec.ts
@@ -0,0 +1,66 @@
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { compile } from '../../../flow-editor/graph_analysis';
+import { validate } from '../../../flow-editor/graph_validation';
+import { TIME_MONITOR_ID } from '../../../flow-editor/platform_facilities';
+import { gen_compiled } from '../scaffolding/graph-analysis-tools';
+import { dsl_to_ast } from '../scaffolding/graph-analysis-tools-ast-dsl';
+import { GraphBuilder } from '../scaffolding/graph-analysis-tools-graph-builder';
+import { are_equivalent_ast } from './utils.spec';
+
+export function gen_flow(): FlowGraph {
+ const builder = new GraphBuilder();
+
+ // Stream section
+ const source = builder.add_stream('flow_utc_time', {id: 'source', message: 'UTC time'});
+
+ // Stepped section
+ const op = builder.add_op('logging_add_log', { args: [ [source, 0] ]
+ });
+ const cond = builder.add_if(op, null, {
+ cond: [f => f.add_getter('operator_equals', { args: [ { from_variable: 'latest' },
+ [ f => f.add_getter('flow_get_thread_id'),
+ 0 ]
+ ] }), 0]
+ });
+
+ builder
+ .add_trigger('trigger_on_signal', {args: [[source, 0]]})
+ .then(f => f.add_op('data_setvariableto', {
+ args: [
+ [f => f.add_getter('flow_get_thread_id'), 0],
+ ],
+ slots: { 'variable': 'latest' }
+ }))
+ .then(f => f.add_op('control_wait', {args: [ 1 ]}))
+ .then_id(cond)
+ ;
+
+ const graph = builder.build();
+ return graph;
+}
+
+describe('Flow-93: [Reactive] Debounce operation.', () => {
+ it('Validation should pass', async () => {
+ expect(validate(gen_flow()))
+ .toBeTruthy()
+ });
+
+
+ it('Should be able to compile', async () => {
+ const compiled_flow = compile(gen_flow());
+
+ const dsl_ast = dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (wait-for-monitor key: utc_time from_service: "${TIME_MONITOR_ID}")
+ (set-var latest (flow_get_thread_id))
+ (wait-seconds 1)
+ (if (= (get-var latest) (flow_get_thread_id))
+ ((log (flow-last-value "source" 0))))
+ `
+ );
+
+ const from_ast = [gen_compiled(dsl_ast)];
+
+ are_equivalent_ast(compiled_flow, from_ast);
+ });
+});
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/_gen_graphs.utils.ts b/frontend/src/app/tests/logic/flow-graph-analysis/_gen_graphs.utils.ts
new file mode 100644
index 00000000..f8226c5c
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/_gen_graphs.utils.ts
@@ -0,0 +1,43 @@
+import { spawn } from 'child_process';
+import * as fs from 'fs';
+import { convert_to_graphviz } from '../scaffolding/utils';
+import * as util from 'util';
+
+export function run(): Promise {
+ const files = fs.readdirSync(__dirname);
+ const candidates = files.filter((file: string) => file.match(/\d+.*.spec.ts$/));
+
+ let done_count = 0;
+ const promises = candidates.map((file: string) => {
+ return new Promise(async (resolve, reject) => {
+ try {
+ const mod_name = file.substr(0, file.length - 3);
+ const mod = require('./' + mod_name); // Remove '.ts'
+ if (mod.gen_flow) {
+ await util.promisify(fs.writeFile)(`${__dirname}/${file}.dot`, convert_to_graphviz(mod.gen_flow()));
+ spawn("dot", ["-Tpng", `${__dirname}/${file}.dot`, '-o', `${__dirname}/${file}.png`]);
+
+ if (mod.process_flow) {
+ await util.promisify(fs.writeFile)(`${__dirname}/${file}.processed.dot`,
+ convert_to_graphviz(mod.process_flow(mod.gen_flow())));
+ spawn("dot", ["-Tpng", `${__dirname}/${file}.processed.dot`, '-o', `${__dirname}/${file}.processed.png`]);
+ }
+
+ done_count++;
+ process.stdout.write(`[${done_count}/${candidates.length}] ${file}\n`)
+ resolve(file);
+ }
+ else {
+ process.stdout.write('No flow found\n');
+ resolve(null);
+ }
+ }
+ catch (err) {
+ process.stdout.write(file + ': ' + err.toString() + '\n');
+ reject(err);
+ }
+ });
+ });
+
+ return Promise.all(promises) as Promise;
+}
diff --git a/frontend/src/app/tests/logic/flow-graph-analysis/utils.spec.ts b/frontend/src/app/tests/logic/flow-graph-analysis/utils.spec.ts
new file mode 100644
index 00000000..bdce2a0d
--- /dev/null
+++ b/frontend/src/app/tests/logic/flow-graph-analysis/utils.spec.ts
@@ -0,0 +1,23 @@
+import { CompiledFlowGraph } from '../../../flow-editor/flow_graph';
+import { canonicalize_ast_list } from '../scaffolding/graph-analysis-tools';
+import { decompile_to_dsl } from '../scaffolding/graph-analysis-tools-dsl-decompiler';
+
+export function are_equivalent_ast(actual: CompiledFlowGraph[], expected: CompiledFlowGraph[]) {
+ const expectationMsg = `
+╭──────────╮
+│ RESULT │
+╰──────────╯
+
+${decompile_to_dsl(actual).join('\n;; Alternative\n')}
+
+╭──────────╮
+│ EXPECTED │
+╰──────────╯
+
+${decompile_to_dsl(expected).join('\n;; Alternative\n')}
+`;
+
+ expect(canonicalize_ast_list(actual))
+ .withContext(expectationMsg)
+ .toEqual(canonicalize_ast_list(expected), expectationMsg);
+}
diff --git a/frontend/src/app/tests/logic/samples/01_simple_flow.js b/frontend/src/app/tests/logic/samples/01_simple_flow.js
new file mode 100644
index 00000000..846d1cf0
--- /dev/null
+++ b/frontend/src/app/tests/logic/samples/01_simple_flow.js
@@ -0,0 +1,397 @@
+module.exports = {
+ "nodes": {
+ "fc4bd63f-d4ff-4e15-8b09-a224e6e1c635": {
+ "data": {
+ "type": "enum_value_block",
+ "value": {
+ "options": {
+ "enum_namespace": "536bf266-fabf-44a6-ba89-a0c71b8db608",
+ "enum_name": "get_locations"
+ },
+ "value_id": "12/36/057/7",
+ "value_text": "Vigo"
+ }
+ },
+ "position": {
+ "x": 1046,
+ "y": 470
+ }
+ },
+ "f1b8670c-0001-4417-8a39-2c52f5140383": {
+ "data": {
+ "type": "enum_value_block",
+ "value": {
+ "options": {
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ "value_id": "-137414823",
+ "value_text": "Bot testing"
+ }
+ },
+ "position": {
+ "x": 1069,
+ "y": 624
+ }
+ },
+ "918294c3-1e7d-4b2f-ab73-77188a4b89b0": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "getter",
+ "outputs": [
+ {
+ "type": "string"
+ }
+ ],
+ "message": "Get today's max temperature for %i1",
+ "inputs": [
+ {
+ "type": "enum",
+ "enum_namespace": "536bf266-fabf-44a6-ba89-a0c71b8db608",
+ "enum_name": "get_locations"
+ }
+ ],
+ "block_function": "services.536bf266-fabf-44a6-ba89-a0c71b8db608.get_today_max_in_place"
+ },
+ "synthetic_input_count": 0,
+ "synthetic_output_count": 0
+ }
+ },
+ "position": {
+ "x": 1008.5,
+ "y": 535
+ }
+ },
+ "2b3b54d4-bcfa-4137-825f-ca52e2be4e96": {
+ "data": {
+ "type": "direct_value_block",
+ "value": {
+ "value": 0,
+ "type": "integer"
+ }
+ },
+ "position": {
+ "x": 1277,
+ "y": 200
+ }
+ },
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "operation",
+ "outputs": [
+ {
+ "type": "pulse"
+ }
+ ],
+ "message": "On channel %i1 say %i2",
+ "inputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "enum",
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ {
+ "type": "string"
+ }
+ ],
+ "icon": "http://192.168.1.35:8888/api/v0/assets/icons/de5baefb-13da-457e-90a5-57a753da8891",
+ "block_function": "services.de5baefb-13da-457e-90a5-57a753da8891.send_message"
+ },
+ "synthetic_input_count": 1,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 866.5,
+ "y": 679
+ }
+ },
+ "0b2f1836-aaf3-4e13-84b9-8041c3b5b4b8": {
+ "data": {
+ "type": "direct_value_block",
+ "value": {
+ "value": 11,
+ "type": "integer"
+ }
+ },
+ "position": {
+ "x": 883,
+ "y": 237
+ }
+ },
+ "032d2a4e-bfe2-4635-a1cf-dc62692eead7": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "trigger",
+ "outputs": [
+ {
+ "type": "pulse"
+ }
+ ],
+ "message": "When all true",
+ "inputs": [
+ {
+ "type": "boolean"
+ },
+ {
+ "type": "boolean"
+ },
+ {
+ "type": "boolean"
+ }
+ ],
+ "icon": "/assets/logo-dark.png",
+ "extra_inputs": {
+ "type": "boolean",
+ "quantity": "any"
+ },
+ "block_function": "trigger_when_all_true"
+ },
+ "synthetic_input_count": 0,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 867.5,
+ "y": 391.5
+ }
+ },
+ "0f82640f-b40b-4053-981d-1fe0b2c17de0": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "icon": "/assets/logo-dark.png",
+ "message": "Are all equals?",
+ "block_function": "operator_equals",
+ "type": "getter",
+ "inputs": [
+ {
+ "type": "any"
+ },
+ {
+ "type": "any"
+ },
+ {
+ "type": "any"
+ }
+ ],
+ "extra_inputs": {
+ "type": "any",
+ "quantity": "any"
+ },
+ "outputs": [
+ {
+ "type": "boolean"
+ }
+ ]
+ },
+ "synthetic_input_count": 0,
+ "synthetic_output_count": 0
+ }
+ },
+ "position": {
+ "x": 722.5,
+ "y": 293.5
+ }
+ },
+ "0d4937a0-cdd3-4bf6-b8e8-8da2974b1330": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "icon": "/assets/logo-dark.png",
+ "message": "Are all equals?",
+ "block_function": "operator_equals",
+ "type": "getter",
+ "inputs": [
+ {
+ "type": "any"
+ },
+ {
+ "type": "any"
+ },
+ {
+ "type": "any"
+ },
+ {
+ "type": "any"
+ }
+ ],
+ "extra_inputs": {
+ "type": "any",
+ "quantity": "any"
+ },
+ "outputs": [
+ {
+ "type": "boolean"
+ }
+ ]
+ },
+ "synthetic_input_count": 0,
+ "synthetic_output_count": 0
+ }
+ },
+ "position": {
+ "x": 1099.5,
+ "y": 283.5
+ }
+ },
+ "ad97e5d1-c725-4cc6-826f-30057f239635": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "icon": "/assets/logo-dark.png",
+ "message": "UTC time",
+ "block_function": "flow_utc_time",
+ "type": "getter",
+ "outputs": [
+ {
+ "name": "hour",
+ "type": "integer"
+ },
+ {
+ "name": "minute",
+ "type": "integer"
+ },
+ {
+ "name": "second",
+ "type": "integer"
+ }
+ ],
+ "inputs": []
+ },
+ "synthetic_input_count": 0,
+ "synthetic_output_count": 0
+ }
+ },
+ "position": {
+ "x": 881.5,
+ "y": 117.5
+ }
+ }
+ },
+ "edges": [
+ {
+ "from": {
+ "id": "f1b8670c-0001-4417-8a39-2c52f5140383",
+ "output_index": 0
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 1
+ }
+ },
+ {
+ "from": {
+ "id": "918294c3-1e7d-4b2f-ab73-77188a4b89b0",
+ "output_index": 0
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 2
+ }
+ },
+ {
+ "from": {
+ "id": "fc4bd63f-d4ff-4e15-8b09-a224e6e1c635",
+ "output_index": 0
+ },
+ "to": {
+ "id": "918294c3-1e7d-4b2f-ab73-77188a4b89b0",
+ "input_index": 0
+ }
+ },
+ {
+ "from": {
+ "id": "032d2a4e-bfe2-4635-a1cf-dc62692eead7",
+ "output_index": 0
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 0
+ }
+ },
+ {
+ "from": {
+ "id": "ad97e5d1-c725-4cc6-826f-30057f239635",
+ "output_index": 2
+ },
+ "to": {
+ "id": "0d4937a0-cdd3-4bf6-b8e8-8da2974b1330",
+ "input_index": 1
+ }
+ },
+ {
+ "from": {
+ "id": "ad97e5d1-c725-4cc6-826f-30057f239635",
+ "output_index": 1
+ },
+ "to": {
+ "id": "0d4937a0-cdd3-4bf6-b8e8-8da2974b1330",
+ "input_index": 0
+ }
+ },
+ {
+ "from": {
+ "id": "2b3b54d4-bcfa-4137-825f-ca52e2be4e96",
+ "output_index": 0
+ },
+ "to": {
+ "id": "0d4937a0-cdd3-4bf6-b8e8-8da2974b1330",
+ "input_index": 2
+ }
+ },
+ {
+ "from": {
+ "id": "ad97e5d1-c725-4cc6-826f-30057f239635",
+ "output_index": 0
+ },
+ "to": {
+ "id": "0f82640f-b40b-4053-981d-1fe0b2c17de0",
+ "input_index": 0
+ }
+ },
+ {
+ "from": {
+ "id": "0b2f1836-aaf3-4e13-84b9-8041c3b5b4b8",
+ "output_index": 0
+ },
+ "to": {
+ "id": "0f82640f-b40b-4053-981d-1fe0b2c17de0",
+ "input_index": 1
+ }
+ },
+ {
+ "from": {
+ "id": "0f82640f-b40b-4053-981d-1fe0b2c17de0",
+ "output_index": 0
+ },
+ "to": {
+ "id": "032d2a4e-bfe2-4635-a1cf-dc62692eead7",
+ "input_index": 0
+ }
+ },
+ {
+ "from": {
+ "id": "0d4937a0-cdd3-4bf6-b8e8-8da2974b1330",
+ "output_index": 0
+ },
+ "to": {
+ "id": "032d2a4e-bfe2-4635-a1cf-dc62692eead7",
+ "input_index": 1
+ }
+ }
+ ]
+}
diff --git a/frontend/src/app/tests/logic/samples/02_lone_block.js b/frontend/src/app/tests/logic/samples/02_lone_block.js
new file mode 100644
index 00000000..1964b10b
--- /dev/null
+++ b/frontend/src/app/tests/logic/samples/02_lone_block.js
@@ -0,0 +1,79 @@
+module.exports = {
+ "nodes": {
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "operation",
+ "outputs": [
+ {
+ "type": "pulse"
+ }
+ ],
+ "message": "On channel %i1 say %i2",
+ "inputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "enum",
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ {
+ "type": "string"
+ }
+ ],
+ "icon": "http://192.168.1.35:8888/api/v0/assets/icons/de5baefb-13da-457e-90a5-57a753da8891",
+ "block_function": "services.de5baefb-13da-457e-90a5-57a753da8891.send_message"
+ },
+ "synthetic_input_count": 1,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 866.5,
+ "y": 679
+ }
+ },
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "operation",
+ "outputs": [
+ {
+ "type": "pulse"
+ }
+ ],
+ "message": "On channel %i1 say %i2",
+ "inputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "enum",
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ {
+ "type": "string"
+ }
+ ],
+ "icon": "http://192.168.1.35:8888/api/v0/assets/icons/de5baefb-13da-457e-90a5-57a753da8891",
+ "block_function": "services.de5baefb-13da-457e-90a5-57a753da8891.send_message"
+ },
+ "synthetic_input_count": 1,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 973.5,
+ "y": 484
+ }
+ }
+ },
+ "edges": []
+}
diff --git a/frontend/src/app/tests/logic/samples/03_no_start_pulse.js b/frontend/src/app/tests/logic/samples/03_no_start_pulse.js
new file mode 100644
index 00000000..6705b8b9
--- /dev/null
+++ b/frontend/src/app/tests/logic/samples/03_no_start_pulse.js
@@ -0,0 +1,153 @@
+module.exports = {
+ "nodes": {
+ "f1b8670c-0001-4417-8a39-2c52f5140383": {
+ "data": {
+ "type": "enum_value_block",
+ "value": {
+ "options": {
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ "value_id": "-137414823",
+ "value_text": "Bot testing"
+ }
+ },
+ "position": {
+ "x": 1097,
+ "y": 622
+ }
+ },
+ "4652b79c-603b-4add-9164-92508be43fdf": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "operation",
+ "outputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "string"
+ }
+ ],
+ "message": "Get today's max temperature for %i1",
+ "inputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "enum",
+ "enum_namespace": "536bf266-fabf-44a6-ba89-a0c71b8db608",
+ "enum_name": "get_locations"
+ }
+ ],
+ "block_function": "services.536bf266-fabf-44a6-ba89-a0c71b8db608.get_today_max_in_place"
+ },
+ "synthetic_input_count": 1,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 902.5,
+ "y": 531
+ }
+ },
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "operation",
+ "outputs": [
+ {
+ "type": "pulse"
+ }
+ ],
+ "message": "On channel %i1 say %i2",
+ "inputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "enum",
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ {
+ "type": "string"
+ }
+ ],
+ "icon": "http://192.168.1.35:8888/api/v0/assets/icons/de5baefb-13da-457e-90a5-57a753da8891",
+ "block_function": "services.de5baefb-13da-457e-90a5-57a753da8891.send_message"
+ },
+ "synthetic_input_count": 1,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 866.5,
+ "y": 679
+ }
+ },
+ "099ee247-851d-41bb-819c-5347247cd06a": {
+ "data": {
+ "type": "enum_value_block",
+ "value": {
+ "options": {
+ "enum_namespace": "536bf266-fabf-44a6-ba89-a0c71b8db608",
+ "enum_name": "get_locations"
+ },
+ "value_id": "12/36/057/7",
+ "value_text": "Vigo"
+ }
+ },
+ "position": {
+ "x": 1094,
+ "y": 474
+ }
+ }
+ },
+ "edges": [
+ {
+ "from": {
+ "id": "099ee247-851d-41bb-819c-5347247cd06a",
+ "output_index": 0
+ },
+ "to": {
+ "id": "4652b79c-603b-4add-9164-92508be43fdf",
+ "input_index": 1
+ }
+ },
+ {
+ "from": {
+ "id": "4652b79c-603b-4add-9164-92508be43fdf",
+ "output_index": 1
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 2
+ }
+ },
+ {
+ "from": {
+ "id": "f1b8670c-0001-4417-8a39-2c52f5140383",
+ "output_index": 0
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 1
+ }
+ },
+ {
+ "from": {
+ "id": "4652b79c-603b-4add-9164-92508be43fdf",
+ "output_index": 0
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 0
+ }
+ }
+ ]
+}
diff --git a/frontend/src/app/tests/logic/samples/04_no_start_loop.js b/frontend/src/app/tests/logic/samples/04_no_start_loop.js
new file mode 100644
index 00000000..de4f47b1
--- /dev/null
+++ b/frontend/src/app/tests/logic/samples/04_no_start_loop.js
@@ -0,0 +1,163 @@
+module.exports = {
+ "nodes": {
+ "f1b8670c-0001-4417-8a39-2c52f5140383": {
+ "data": {
+ "type": "enum_value_block",
+ "value": {
+ "options": {
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ "value_id": "-137414823",
+ "value_text": "Bot testing"
+ }
+ },
+ "position": {
+ "x": 1069,
+ "y": 624
+ }
+ },
+ "4652b79c-603b-4add-9164-92508be43fdf": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "getter",
+ "outputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "string"
+ }
+ ],
+ "message": "Get today's max temperature for %i1",
+ "inputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "enum",
+ "enum_namespace": "536bf266-fabf-44a6-ba89-a0c71b8db608",
+ "enum_name": "get_locations"
+ }
+ ],
+ "block_function": "services.536bf266-fabf-44a6-ba89-a0c71b8db608.get_today_max_in_place"
+ },
+ "synthetic_input_count": 1,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 903.5,
+ "y": 532
+ }
+ },
+ "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c": {
+ "data": {
+ "type": "simple_flow_block",
+ "value": {
+ "options": {
+ "type": "operation",
+ "outputs": [
+ {
+ "type": "pulse"
+ }
+ ],
+ "message": "On channel %i1 say %i2",
+ "inputs": [
+ {
+ "type": "pulse"
+ },
+ {
+ "type": "enum",
+ "enum_namespace": "de5baefb-13da-457e-90a5-57a753da8891",
+ "enum_name": "get_known_channels"
+ },
+ {
+ "type": "string"
+ }
+ ],
+ "icon": "http://192.168.1.35:8888/api/v0/assets/icons/de5baefb-13da-457e-90a5-57a753da8891",
+ "block_function": "services.de5baefb-13da-457e-90a5-57a753da8891.send_message"
+ },
+ "synthetic_input_count": 1,
+ "synthetic_output_count": 1
+ }
+ },
+ "position": {
+ "x": 867.5,
+ "y": 687
+ }
+ },
+ "099ee247-851d-41bb-819c-5347247cd06a": {
+ "data": {
+ "type": "enum_value_block",
+ "value": {
+ "options": {
+ "enum_namespace": "536bf266-fabf-44a6-ba89-a0c71b8db608",
+ "enum_name": "get_locations"
+ },
+ "value_id": "12/36/057/7",
+ "value_text": "Vigo"
+ }
+ },
+ "position": {
+ "x": 1052,
+ "y": 425
+ }
+ }
+ },
+ "edges": [
+ {
+ "from": {
+ "id": "099ee247-851d-41bb-819c-5347247cd06a",
+ "output_index": 0
+ },
+ "to": {
+ "id": "4652b79c-603b-4add-9164-92508be43fdf",
+ "input_index": 1
+ }
+ },
+ {
+ "from": {
+ "id": "4652b79c-603b-4add-9164-92508be43fdf",
+ "output_index": 1
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 2
+ }
+ },
+ {
+ "from": {
+ "id": "f1b8670c-0001-4417-8a39-2c52f5140383",
+ "output_index": 0
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 1
+ }
+ },
+ {
+ "from": {
+ "id": "4652b79c-603b-4add-9164-92508be43fdf",
+ "output_index": 0
+ },
+ "to": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "input_index": 0
+ }
+ },
+ {
+ "from": {
+ "id": "1545b4f2-8b4f-4c59-ae0b-a0a0e5d6746c",
+ "output_index": 0
+ },
+ "to": {
+ "id": "4652b79c-603b-4add-9164-92508be43fdf",
+ "input_index": 0
+ }
+ }
+ ]
+}
diff --git a/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-ast-dsl.ts b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-ast-dsl.ts
new file mode 100644
index 00000000..c81b60b5
--- /dev/null
+++ b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-ast-dsl.ts
@@ -0,0 +1,297 @@
+import { SimpleArrayAst, SimpleArrayAstArgument, SimpleArrayAstOperation } from './graph-analysis-tools';
+
+const SYMBOL_CHARACTERS = (
+ 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+ + '0123456789'
+ + '!$\'",_-./:;?+<=>#%&*@[\]{|}`^~'
+);
+
+export const OP_TRANSLATIONS: {[key: string]: string} = {
+ // Flow control
+ 'if': 'control_if_else',
+ 'jump-to': 'jump_to_block',
+ 'jump-point': 'jump_point',
+ 'fork': 'op_fork_execution',
+ 'repeat': 'control_repeat',
+
+ // Operations
+ 'log': 'logging_add_log',
+ 'wait-seconds': 'control_wait',
+ 'call-service': 'command_call_service',
+ 'preload': 'op_preload_getter',
+ 'on-block-run': 'op_on_block_run',
+
+ // Variables
+ 'set-var': 'data_setvariableto',
+ 'on-var': 'on_data_variable_update',
+ 'get-var': 'data_variable',
+ 'flow-last-value': 'flow_last_value',
+ 'wait-for-monitor': 'wait_for_monitor',
+
+ // Comparations
+ '=': 'operator_equals',
+ 'and': 'operator_and',
+ '<': 'operator_lt',
+ '>': 'operator_gt',
+
+ // Operations
+ 'mod': 'operator_modulo',
+ '+': 'operator_add',
+ 'add-to-list': 'data_addtolist',
+ 'list-length': 'data_lengthoflist',
+ 'delete-list-index': 'data_deleteoflist',
+};
+
+const OPS_WITH_MAP_ARGUMENTS = [
+ 'wait_for_monitor', 'command_call_service',
+];
+
+function is_digit(c: string) {
+ return '0123456789'.indexOf(c) >= 0;
+}
+
+function array_to_map(args: any[]): {[key: string]: any} {
+ if ((args.length % 2) > 0) {
+ throw new Error("Odd number of arguments on function call, expected even.");
+ }
+
+ const result: {[key: string]: any} = {};
+
+ for (let idx=0; idx < args.length; idx+=2) {
+ let key = args[idx];
+ const value = args[idx+1];
+
+ if (key.indexOf(':') >= 0) {
+ if (key.indexOf(':') != (key.length - 1)) {
+ throw new Error("Character ':' allowed ONLY at the end of symbol, not before");
+ }
+
+ key = key.substring(0, key.length - 1);
+ }
+
+ result[key] = value;
+ }
+
+ return result;
+}
+
+function transform_call(args: any[]): any[] {
+ if (args.length == 0) {
+ return args;
+ }
+
+ let op = args[0] as string;
+ if (OP_TRANSLATIONS[op]) {
+ op = args[0] = OP_TRANSLATIONS[op];
+ }
+
+ if (OPS_WITH_MAP_ARGUMENTS.indexOf(op) >= 0) {
+ args = [op, array_to_map(args.slice(1))];
+ }
+
+ if (op === 'wait_for_monitor') {
+ if (args[1].from_service) {
+ args[1].monitor_id = { from_service: args[1].from_service };
+ delete args[1].from_service;
+ }
+ if (!args[1].monitor_expected_value) {
+ args[1].monitor_expected_value = 'any_value';
+ }
+ }
+
+ if (op === 'command_call_service') {
+ if (args[1].id) {
+ args[1].service_id = args[1].id;
+ delete args[1].id;
+ }
+ if (args[1].action) {
+ args[1].service_action = args[1].action;
+ delete args[1].action;
+ }
+ if (args[1].values) {
+ args[1].service_call_values = args[1].values;
+ delete args[1].values;
+ }
+ }
+
+ if (op === 'op_fork_execution') {
+ let kw_args_index: number;
+ for (kw_args_index = 1; kw_args_index < args.length; kw_args_index++) {
+ const arg = args[kw_args_index];
+
+ if (typeof arg !== 'string') {
+ break;
+ }
+
+ const colon_pos = arg.indexOf(':');
+ if (colon_pos >= 0) {
+ if (colon_pos === 0 && (arg.substring(1).indexOf(':') < 0)) {
+ args[kw_args_index] = arg.substring(1);
+ }
+ else if (colon_pos === (arg.length - 1)) {
+ args[kw_args_index] = arg.substring(0, arg.length - 1);
+ }
+ else {
+ throw new Error(`Character ':' allowed ONLY at beginning or end of symbol. On (op:${op}, arg: ${arg})`);
+ }
+
+ }
+ }
+
+ let contents = [];
+ let kw_args = [];
+
+ if (args.length > kw_args_index) {
+ contents = args.splice(kw_args_index);
+ }
+ if (args.length > 1) {
+ kw_args = args.splice(1);
+ }
+
+ // Translate direct operations (in contents) with an operation list
+ for (let idx = 0; idx < contents.length; idx++) {
+ if (typeof contents[idx][0] === 'string') {
+ contents[idx] = [contents[idx]];
+ }
+ }
+
+ args[1] = kw_args;
+ args[2] = contents;
+ }
+
+ return args;
+}
+
+function read(s: string, idx: number, linenum: number, colnum: number): [SimpleArrayAstArgument, number, number, number] {
+ let op: SimpleArrayAstArgument = null;
+
+ if (s[idx] === ';') {
+ // Wait for the end of the line
+ do {
+ idx++;
+ } while (s[idx] !== '\n');
+ idx++; // Jump over next \n
+
+ colnum = 1;
+ linenum++;
+ }
+ else if (s[idx] === '(') {
+ const start = [idx, linenum, colnum];
+
+ idx++;
+ colnum++;
+
+ op = [] as any;
+ while ((idx < s.length) && (s[idx] !== ')')) {
+
+ let token: SimpleArrayAstArgument;
+ [token, idx, linenum, colnum] = read(s, idx, linenum, colnum);
+ if (token !== null) {
+ (op as any).push(token);
+ }
+ }
+ if (idx >= s.length) {
+ throw new Error(`${start[1]}:${start[2]} Unclosed list`);
+ }
+ if (s[idx] !== ')') {
+ throw new Error(`${start[1]}:${start[2]} Unexpected state on list close (this should not happen)`);
+ }
+
+ try {
+ op = transform_call(op as any) as any;
+ }
+ catch (err) {
+ err.message = `On call starting at ${start[1]}:${start[2]}: ${err.message}`;
+ throw err;
+ }
+
+ idx++;
+ colnum++;
+ }
+ else if (s[idx] === ')') {
+ throw new Error(`${linenum}:${colnum} Unmatched list close ')'`)
+ }
+ else if (s[idx] === '"') {
+ const token = [];
+ const start = [idx, linenum, colnum];
+ let just_escaped = false;
+
+ idx++;
+ colnum++;
+ while ((s[idx] !== '"' ) || just_escaped) {
+ if (just_escaped) {
+ // TODO: Convert current character
+ just_escaped = false;
+ throw new Error('NOT IMPLEMENTED');
+ }
+ else {
+ if (s[idx] === '\\') {
+ just_escaped = true;
+ }
+ else if (s[idx] === '\n') {
+ throw new Error(`${linenum}:${colnum} Unended string starting at ${start[1]}:${start[2]}`)
+ }
+ else {
+ token.push(s[idx]);
+ }
+ }
+ idx++;
+ colnum++;
+
+ }
+ // Jump over end "
+ idx++;
+ colnum++;
+
+ op = token.join('');
+ }
+ else if (' \t'.indexOf(s[idx]) >= 0) {
+ idx++;
+ colnum++; // Whitespace
+ }
+ else if (s[idx] === '\n') {
+ idx++;
+ colnum = 1;
+ linenum++;
+ }
+ else if (SYMBOL_CHARACTERS.indexOf(s[idx]) >= 0) {
+ const token = [];
+
+ while (SYMBOL_CHARACTERS.indexOf(s[idx]) >= 0) {
+ token.push(s[idx]);
+
+ idx++;
+ colnum++;
+ }
+
+ op = token.join('');
+ if (token.filter(c => is_digit(c)).length === token.length) { // All are digits
+ op = parseInt(op);
+ }
+ else if (op.match(/(^\d*\.\d+$)|(^\d+\.\d$)/)) {
+ op = parseFloat(op);
+ }
+ }
+ else {
+ throw new Error(`${linenum}:${colnum} Unexpected character ${s[idx]}`)
+ }
+
+ return [op, idx, linenum, colnum];
+}
+
+export function dsl_to_ast(s: string): SimpleArrayAst {
+ const ast: SimpleArrayAstOperation[] = [];
+
+ let linenum = 1;
+ let colnum = 1;
+
+ for (let idx = 0; idx < s.length;) {
+ let token: SimpleArrayAstArgument;
+ [token, idx, linenum, colnum] = read(s, idx, linenum, colnum);
+ if (token !== null) {
+ ast.push(token as SimpleArrayAstOperation);
+ }
+ }
+
+ return ast;
+}
diff --git a/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-dsl-decompiler.ts b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-dsl-decompiler.ts
new file mode 100644
index 00000000..6eba2472
--- /dev/null
+++ b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-dsl-decompiler.ts
@@ -0,0 +1,106 @@
+import { CompiledBlock, CompiledBlockArg, CompiledBlockArgCallServiceDict, CompiledBlockArgMonitorDict, CompiledBlockArgs, CompiledFlowGraph, ContentBlock, CompiledBlockType } from '../../../flow-editor/flow_graph';
+
+import { OP_TRANSLATIONS } from './graph-analysis-tools-ast-dsl';
+
+const OP_REVERSE_TRANSLATIONS: {[key: string]: string} = {};
+for (const op of Object.keys(OP_TRANSLATIONS)) {
+ OP_REVERSE_TRANSLATIONS[OP_TRANSLATIONS[op]] = op;
+}
+
+function repr_single_arg(arg: CompiledBlockArg, depth: number): string {
+ if (arg.type === 'constant') {
+ return JSON.stringify(arg.value);
+ }
+ else if (arg.type === 'variable' || arg.type === 'list') {
+ return arg.value;
+ }
+ else if (arg.type === 'block') {
+ return repr_contents(arg.value, depth, { skip_first_indent: true });
+ }
+}
+
+function repr_args(args: CompiledBlockArgs, depth: number): string {
+ if (args instanceof Array) {
+ return args.map(arg => repr_single_arg(arg, depth)).join(' ');
+ }
+ else if ((args as CompiledBlockArgMonitorDict).monitor_id) {
+ const mon_args = (args as CompiledBlockArgMonitorDict);
+ const value = JSON.stringify(mon_args.monitor_expected_value);
+ return `key: ${mon_args.key} from_service: "${mon_args.monitor_id.from_service}" monitor_expected_value: ${value}`
+ }
+ else if ((args as CompiledBlockArgCallServiceDict).service_id) {
+ const call_args = (args as CompiledBlockArgCallServiceDict);
+ const values = repr_args(call_args.service_call_values, depth);
+ return `id: ${call_args.service_id} action: ${call_args.service_action} values: (${values})`;
+ }
+ else if ((args as any).key) {
+ const selector = args as any;
+ if (selector.subkey) {
+ return `key: ${selector.key} subkey: ${selector.subkey}`;
+ }
+ return `key: ${selector.key}`;
+ }
+ else {
+ throw new Error(`Unknown args type: ${JSON.stringify(args)}`)
+ }
+}
+
+function repr_contents(contents: (CompiledBlock|ContentBlock)[], depth: number, options?: {skip_first_indent?: boolean}): string {
+ const results = [];
+ for (const content of contents) {
+ if ((content as CompiledBlock).type) {
+ results.push(gen_tree(content as CompiledBlock, depth));
+ }
+ else {
+ results.push(`(${repr_contents(content.contents, depth + 1, { skip_first_indent: true })})`);
+ }
+ }
+
+ if (results.length === 0) {
+ return '';
+ }
+
+ let prefix = '';
+ if (!options || !options.skip_first_indent) {
+ prefix = indentation_for_depth(depth);
+ }
+ return prefix + results.join('\n' + indentation_for_depth(depth));
+}
+
+function indentation_for_depth(depth: number) {
+ const character = ' ';
+
+ return Array(depth).fill(character).join('');
+}
+
+function gen_tree(block: CompiledBlock, depth: number): string {
+ const args = repr_args(block.args, depth);
+ let type = block.type;
+ if (OP_REVERSE_TRANSLATIONS[type]) {
+ type = OP_REVERSE_TRANSLATIONS[type] as CompiledBlockType;
+ }
+
+ const depth_increase = 1 + type.length + 2; // '(' operation ' ' * 2
+
+ if (block.contents && block.contents.length > 0) {
+ const contents = repr_contents(block.contents, depth + depth_increase);
+ return `(${type} ${args}\n${contents})`;
+ }
+ else {
+ return `(${type} ${args})`;
+ }
+}
+
+function decompile_flow(flow: CompiledFlowGraph): string {
+ const tokens = [];
+
+ for (const op of flow) {
+ tokens.push(gen_tree(op, 0));
+ }
+
+ return tokens.join('\n');
+}
+
+export function decompile_to_dsl(flows: CompiledFlowGraph[]): string[] {
+ return flows.map(flow => decompile_flow(flow));
+}
diff --git a/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-graph-builder.ts b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-graph-builder.ts
new file mode 100644
index 00000000..b2416133
--- /dev/null
+++ b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools-graph-builder.ts
@@ -0,0 +1,437 @@
+import { AtomicFlowBlockData, AtomicFlowBlockOptions, BLOCK_TYPE as ATOMIC_BLOCK_TYPE, AtomicFlowBlock, AtomicFlowBlockOperationType, isAtomicFlowBlockOptions } from '../../../flow-editor/atomic_flow_block';
+import { BaseToolboxDescription, ToolboxDescription } from '../../../flow-editor/base_toolbox_description';
+import { BLOCK_TYPE as VALUE_BLOCK_TYPE, DirectValueFlowBlockData } from '../../../flow-editor/direct_value';
+import { BLOCK_TYPE as ENUM_BLOCK_TYPE, EnumDirectValueFlowBlockData, EnumDirectValueOptions } from '../../../flow-editor/enum_direct_value';
+import { MessageType, InputPortDefinition } from '../../../flow-editor/flow_block';
+import { FlowGraph, FlowGraphEdge, FlowGraphNode } from '../../../flow-editor/flow_graph';
+import { uuidv4 } from '../../../flow-editor/utils';
+import { UiToolboxDescription } from '../../../flow-editor/ui-blocks/ui_toolbox_description';
+import { UiFlowBlockOptions, isUiFlowBlockOptions, BLOCK_TYPE as FLOW_BLOCK_TYPE, UiFlowBlockData } from '../../../flow-editor/ui-blocks/ui_flow_block';
+import { is_pulse } from '../../../flow-editor/graph_transformations';
+
+
+
+type NodeDescription = AtomicFlowBlockData | EnumDirectValueFlowBlockData | DirectValueFlowBlockData | UiFlowBlockData;
+
+type ValueNodeRef = [string, number];
+type StreamGenerator = (builder: GraphBuilder) => StreamNodeBuilderRef;
+type NodeGenerator = (builder: GraphBuilder) => OpNodeBuilderRef;
+
+type NodeRef = ValueNodeRef | StreamNodeBuilderRef | OpNodeBuilderRef;
+type VariableRef = {from_variable: string};
+
+type BlockArgument = [OpNodeBuilderRef, 'pulse']
+ | [NodeRef, number]
+ | [StreamGenerator, number]
+ | ValueNodeRef
+ | VariableRef
+ | string
+ | number
+;
+
+
+function index_toolbox_description(desc: ToolboxDescription): {[key: string]: AtomicFlowBlockOptions | UiFlowBlockOptions} {
+ const result: {[key: string]: AtomicFlowBlockOptions | UiFlowBlockOptions} = {};
+
+ for (const cat of desc) {
+ for (const block of cat.blocks) {
+ // TODO: This will most probably require UI block definitions too
+ if (isAtomicFlowBlockOptions(block)) {
+ result[block.block_function] = block;
+ }
+ else if (isUiFlowBlockOptions(block)) {
+ result[block.id] = block;
+ }
+ }
+ }
+
+ return result;
+}
+
+function infer_block_options(block_type: string,
+ options: BlockOptions,
+ params: { type: AtomicFlowBlockOperationType }): AtomicFlowBlockOptions {
+
+ const inputs = [];
+ for (const _arg of options.args || []) {
+ inputs.push({ type: 'any' });
+ }
+
+ return {
+ message: block_type,
+ block_function: `services.${options.namespace}.${block_type}`,
+ type: params.type,
+ inputs: inputs as InputPortDefinition[],
+ outputs: [
+ {
+ type: 'any',
+ }
+ ]
+ };
+}
+
+
+const BaseBlocks = index_toolbox_description([...BaseToolboxDescription, ...UiToolboxDescription]);
+
+interface BlockOptions {
+ namespace?: string,
+ message?: string,
+ args?: BlockArgument[],
+ id?: string,
+ slots?: {[key: string]: string};
+}
+
+class StreamNodeBuilderRef {
+ builder: GraphBuilder;
+ id: string;
+
+ constructor(builder: GraphBuilder, id: string) {
+ this.builder = builder;
+ this.id = id;
+ }
+}
+
+class OpNodeBuilderRef {
+ builder: GraphBuilder;
+ id: string;
+
+ constructor(builder: GraphBuilder, id: string) {
+ this.builder = builder;
+ this.id = id;
+ }
+
+ then_id(next: string) {
+ // Separated from `then` as this cannot guarantee that a
+ // OpNodeBuilderRef that also can perform `.then` can be returned
+ this.builder.establish_connection([this.id, 0], [next, 0]);
+ }
+
+ then(next: NodeGenerator | OpNodeBuilderRef, originSignalPosition=0, targetSignalPosition=0): OpNodeBuilderRef {
+ if ((next as OpNodeBuilderRef).id) {
+ const nextOp = (next as OpNodeBuilderRef);
+ this.builder.establish_connection([this.id, originSignalPosition], [nextOp.id, targetSignalPosition]);
+
+ return nextOp;
+ }
+ else {
+ const nextGen = next as NodeGenerator;
+ const nextOp = nextGen(this.builder);
+ this.builder.establish_connection([this.id, originSignalPosition], [nextOp.id, targetSignalPosition]);
+
+ return nextOp;
+ }
+ }
+}
+
+export class GraphBuilder {
+ nodes: {[key: string]: NodeDescription} = {};
+ edges: FlowGraphEdge[] = [];
+ blocks: {[key: string]: AtomicFlowBlockOptions | UiFlowBlockOptions} = {};
+
+ constructor() {
+ this.blocks = BaseBlocks;
+ }
+
+ add_service(service_id?: string): string {
+ if (!service_id) {
+ service_id = uuidv4();
+ }
+
+ return service_id;
+ }
+
+
+ add_enum_node(namespace: string, name: string, value: string, id: string, options?: { id: string }): ValueNodeRef {
+ const ref = options && options.id ? options.id : 'enum_' + name + '_' + uuidv4();
+
+ this.nodes[ref] = {
+ type: ENUM_BLOCK_TYPE,
+ value: {
+ value_id: id,
+ value_text: value,
+ options: {
+ definition: {
+ type: 'enum',
+ enum_name: name,
+ enum_namespace: namespace,
+ },
+ } as EnumDirectValueOptions
+ }
+ }
+
+ return [ref, 0];
+ }
+
+ private add_direct_node(value: any): ValueNodeRef {
+ const ref = 'dir_' + value.toString().toLowerCase() + '_' + uuidv4();
+
+ let type: MessageType = 'any';
+ if (typeof value === 'string') {
+ type = 'string';
+ }
+ else if (typeof value === 'number') {
+ if (value % 1 === 0) {
+ type = 'integer';
+ }
+ else {
+ type = 'float';
+ }
+ }
+
+ this.nodes[ref] = {
+ type: VALUE_BLOCK_TYPE,
+ value: {
+ value: type === 'string' ? value + '' : value,
+ type: type,
+ }
+ };
+
+ return [ref, 0];
+
+ }
+
+ public add_variable_getter_node(var_name: any, options?: { id: string }): StreamNodeBuilderRef {
+ const id = options && options.id ? options.id : 'get_var_' + var_name + '_' + uuidv4();
+
+ return this.add_getter('data_variable', { id: id, slots: { variable: var_name } });
+ }
+
+ private add_node(block_options: BlockOptions, ref: string): number {
+ let synth_in = 0, synth_out = 0;
+ if (isAtomicFlowBlockOptions(block_options)) {
+ [block_options, synth_in, synth_out] = AtomicFlowBlock.add_synth_io(block_options);
+ this.nodes[ref] = {
+ type: ATOMIC_BLOCK_TYPE,
+ value: {
+ options: block_options as AtomicFlowBlockOptions,
+ slots: block_options.slots || {},
+ synthetic_input_count: synth_in,
+ synthetic_output_count: synth_out,
+ }
+ }
+ }
+ else if (isUiFlowBlockOptions(block_options)) {
+ this.nodes[ref] = {
+ type: FLOW_BLOCK_TYPE,
+ value: {
+ options: block_options,
+ extra: {},
+ }
+ }
+ }
+ else {
+ throw new Error(`Unexpected flow block options: ${JSON.stringify(block_options)}`);
+ }
+
+ return synth_in;
+ }
+
+ private resolve_args(node: string, options?: BlockOptions, offset?: number) {
+ if (!options) {
+ return;
+ }
+
+ let args = options.args || [];
+
+ if (args) {
+ let idx = -1;
+
+ if (offset) {
+ idx += offset;
+ }
+
+ for (const arg of args) {
+ idx++;
+
+ if (arg === null || arg === undefined) { continue; }
+
+ // Direct value
+ if (typeof arg === 'number' || typeof arg === 'string') {
+ const ref = this.add_direct_node(arg);
+ this.establish_connection(ref, [node, idx]);
+ }
+ // Variable reference
+ else if ((arg as VariableRef).from_variable) {
+ const vblock = this.add_variable_getter_node((arg as VariableRef).from_variable);
+
+ this.establish_connection([ vblock.id, 0 ], [node, idx]);
+ }
+ // Direct node reference
+ else if (typeof ((arg as any)[0]) === 'string') {
+ this.establish_connection(arg as [string, number], [node, idx]);
+ }
+ // Node reference
+ else if (((arg as any)[0] as StreamNodeBuilderRef).id) {
+ let out_index = (arg as any)[1] as number;
+ if ((arg as any)[1] === 'pulse'){
+ out_index = 0;
+ }
+ this.establish_connection([((arg as any)[0] as StreamNodeBuilderRef).id, out_index], [node, idx]);
+ }
+ // Generator
+ else {
+ let out_index = (arg as any)[1] as number;
+ if ((arg as any)[1] === 'pulse'){
+ out_index = 0;
+ }
+
+ const gen = (arg as any)[0] as StreamGenerator;
+
+ this.establish_connection([gen(this).id, out_index], [node, idx]);
+ }
+ }
+ }
+ }
+
+ add_stream(block_type: string, options?: BlockOptions): StreamNodeBuilderRef {
+ const ref = options.id ? options.id : (block_type + '_' + uuidv4());
+
+ let block_options = this.blocks[block_type];
+ if (!block_options) {
+ if (options && options.namespace) {
+ block_options = infer_block_options(block_type, options, { type: 'getter' });
+ }
+ else {
+ throw new Error(`Unknown block type: ${block_type}`);
+ }
+ }
+
+ const synth_in = this.add_node(block_options, ref);
+ this.resolve_args(ref, options, synth_in);
+
+ return new StreamNodeBuilderRef(this, ref);
+ }
+
+ add_trigger(block_type: string, options?: BlockOptions): OpNodeBuilderRef {
+ const ref = options.id ? options.id : (block_type + '_' + uuidv4());
+
+ let block_options = this.blocks[block_type];
+ if (!block_options) {
+ if (options && options.namespace) {
+ block_options = infer_block_options(block_type, options, { type: 'trigger' });
+ }
+ else {
+ throw new Error(`Unknown block type: ${block_type}`);
+ }
+ }
+
+ if (options && options.slots) {
+ block_options.slots = Object.assign(block_options.slots || {}, options.slots)
+ }
+
+ const synth_in = this.add_node(block_options, ref);
+ this.resolve_args(ref, options, synth_in);
+
+ return new OpNodeBuilderRef(this, ref);
+ }
+
+ add_getter(block_type: string, options?: BlockOptions): StreamNodeBuilderRef {
+ const ref = options && options.id ? options.id : (block_type + '_' + uuidv4());
+
+ let block_options = this.blocks[block_type];
+
+ if (!block_options) {
+ block_options = infer_block_options(block_type, options, { type: 'getter' });
+ }
+
+ if (options && options.slots) {
+ block_options.slots = Object.assign(block_options.slots || {}, options.slots)
+ }
+
+ const synth_in = this.add_node(block_options, ref);
+ this.resolve_args(ref, options, synth_in);
+
+ return new StreamNodeBuilderRef(this, ref);
+ }
+
+ add_op(block_type: string, options?: BlockOptions): OpNodeBuilderRef {
+ const ref = options.id ? options.id : (block_type + '_' + uuidv4());
+
+ let block_options = this.blocks[block_type];
+
+ if (!block_options) {
+ block_options = infer_block_options(block_type, options, { type: 'operation' });
+ }
+
+ if (options && options.slots) {
+ block_options.slots = Object.assign(block_options.slots || {}, options.slots)
+ }
+
+ const pulse_inputs = block_options.inputs?.filter(p => is_pulse(p)).length || 0;
+
+ const synth_in = this.add_node(block_options, ref);
+ this.resolve_args(ref, options, synth_in + pulse_inputs);
+
+ return new OpNodeBuilderRef(this, ref);
+ }
+
+ add_fork(source: OpNodeBuilderRef, branches: OpNodeBuilderRef[], options?: { id?: string }): string {
+ if (!options) { options = {} };
+
+ const block_type = 'op_fork_execution';
+
+ const ref = options.id ? options.id : (block_type + '_' + uuidv4());
+
+ let block_options = this.blocks[block_type];
+
+ this.add_node(block_options, ref);
+ this.establish_connection([source.id, 0], [ref, 0]);
+ let out_index = -1;
+ for (const branch of branches) {
+ out_index++;
+
+ if (branch) { // Represent null as unused output port
+ this.establish_connection([ref, out_index], [branch.id, 0]);
+ }
+ }
+
+ return ref;
+ }
+
+ add_if(if_true: OpNodeBuilderRef, if_false: OpNodeBuilderRef, options: { id?: string, cond: BlockArgument | StreamGenerator }): string {
+ const block_type = 'control_if_else';
+
+ const ref = options.id ? options.id : (block_type + '_' + uuidv4());
+
+ let block_options = this.blocks[block_type];
+
+ const synth_in = this.add_node(block_options, ref);
+
+ let cond = options.cond;
+ if (typeof cond === 'function') {
+ cond = [(cond as StreamGenerator)(this), 0];
+ }
+
+ this.resolve_args(ref, { args: [ cond ] }, synth_in);
+ if (if_true) {
+ this.establish_connection([ref, 0], [if_true.id, 0]);
+ }
+ if (if_false) {
+ this.establish_connection([ref, 1], [if_false.id, 0]);
+ }
+
+ return ref;
+ }
+
+ establish_connection(source: [string, number], sink: [string, number]) {
+ this.edges.push({
+ from: { id: source[0], output_index: source[1] },
+ to: { id: sink[0], input_index: sink[1] },
+ });
+ }
+
+ build(): FlowGraph {
+ const nodes: {[key: string]: FlowGraphNode} = {};
+
+ for (const node_id of Object.keys(this.nodes)){
+ const node = this.nodes[node_id];
+
+ nodes[node_id] = {data: node, position: null};
+ }
+
+ return { nodes: nodes,
+ edges: this.edges,
+ };
+
+ }
+}
diff --git a/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools.ts b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools.ts
new file mode 100644
index 00000000..f9939827
--- /dev/null
+++ b/frontend/src/app/tests/logic/scaffolding/graph-analysis-tools.ts
@@ -0,0 +1,290 @@
+import { CompiledBlock, CompiledBlockArg, CompiledBlockArgCallServiceDict, CompiledBlockArgList, CompiledFlowGraph, ContentBlock } from '../../../flow-editor/flow_graph';
+import { _link_graph } from '../../../flow-editor/graph_analysis';
+const stable_stringify = require('fast-json-stable-stringify');
+
+type _AndOp = ['operator_and', SimpleArrayAstArgument, SimpleArrayAstArgument];
+type _EqualsOp = ['operator_equals', SimpleArrayAstArgument, SimpleArrayAstArgument]
+ | ['operator_equals', SimpleArrayAstArgument, SimpleArrayAstArgument, SimpleArrayAstArgument];
+type _CallServiceOp = ['command_call_service',
+ { service_id: string, service_action: string, service_call_values: SimpleArrayAstArgument[] }];
+type _WaitForMonitorOp = ['wait_for_monitor', { monitor_id: { from_service: string }, key: "utc_time" | "utc_date", monitor_expected_value: any }];
+type _LastValueOp = ['flow_last_value', string, number | string];
+type _IfElseOp = ['control_if_else', SimpleArrayAstArgument, SimpleArrayAstOperation[]];
+type _RepeatOp = ['control_repeat', SimpleArrayAstArgument, SimpleArrayAstOperation[]];
+type _ForkExecOp = ['op_fork_execution', SimpleArrayAstArgument[], SimpleArrayAstOperation[]]
+
+export type SimpleArrayAstArgument = SimpleArrayAstOperation | string | number
+export type SimpleArrayAstArgs = _AndOp | _EqualsOp
+ | _CallServiceOp
+ | _WaitForMonitorOp | _LastValueOp
+ | _IfElseOp | _RepeatOp
+ | _ForkExecOp
+;
+
+export type SimpleArrayAstOperation = SimpleArrayAstArgs;
+
+export type SimpleArrayAst = SimpleArrayAstOperation[];
+
+const SLOT_OPS = {
+ data_variable: 'variable',
+ on_data_variable_update: 'variable',
+ data_setvariableto: 'variable',
+
+ data_lengthoflist: 'list',
+ data_deleteoflist: 'list',
+ data_addtolist: 'list',
+};
+
+function convert_argument(arg: SimpleArrayAstArgument): CompiledBlockArg {
+ if ((typeof arg === 'string') || (typeof arg === 'number')) {
+ return {
+ type: 'constant',
+ value: arg,
+ };
+ }
+
+ return {
+ type: 'block',
+ value: [convert_operation(arg)],
+ };
+}
+
+function convert_ast(ast: SimpleArrayAstOperation[]): CompiledBlock[] {
+ const result = [];
+ for (let idx = 0; idx < ast.length; idx++) {
+ const op = convert_operation(ast[idx]);
+ result.push(op);
+ }
+
+ return result;
+}
+
+function convert_contents(contents: SimpleArrayAstOperation[]): ContentBlock {
+ return {
+ contents: convert_ast(contents)
+ }
+}
+
+function convert_operation(op: SimpleArrayAstOperation): CompiledBlock {
+ if (op[0] === 'wait_for_monitor') {
+ return {
+ type: op[0],
+ args: op[1],
+ contents: [],
+ }
+ }
+
+ if (op[0] === 'command_call_service') {
+ return {
+ type: op[0],
+ args: {
+ service_action: op[1].service_action,
+ service_id: op[1].service_id,
+ service_call_values: op[1].service_call_values.map(v => convert_argument(v))
+ },
+ contents: [],
+ }
+ }
+
+ if (op[0] === 'control_if_else') {
+ const contents = (op.slice(2) as SimpleArrayAstOperation[][]).map(v => convert_contents(v));
+
+ if (contents.length < 2) {
+ contents.push({ contents: [] });
+ }
+
+ return {
+ type: op[0],
+ args: [ convert_argument(op[1]) ],
+ contents: contents,
+ }
+ }
+
+ if (op[0] === 'control_repeat') {
+ const contents = op.slice(2) as SimpleArrayAstOperation[];
+
+ return {
+ type: op[0],
+ args: [ convert_argument(op[1]) ],
+ contents: convert_ast(contents),
+ }
+ }
+
+ if (op[0] === 'op_fork_execution') {
+ const contents = (op[2] as SimpleArrayAstOperation[][]).map(v => convert_contents(v));
+
+ if (contents.length < 2) {
+ console.warn('Fork (op_fork_execution) with less than two outward paths');
+ }
+
+ return {
+ type: op[0],
+ args: op[1].map(arg => convert_argument(arg)),
+ contents: contents,
+ }
+ }
+
+ if (op[0].startsWith('services.') && (!op[0].startsWith('services.ui.'))) {
+ return {
+ type: op[0],
+ args: {
+ key: op[0].split('.').reverse()[0]
+ },
+ };
+ }
+
+ if (typeof op !== 'object') {
+ throw new Error(`ASTCompilationError: Expected argument array, found: ${JSON.stringify(op)}. Check for errors on argument nesting`);
+ }
+
+ const compiled_args = (op.slice(1) as SimpleArrayAstArgument[]).map(v => convert_argument(v));
+
+ if (op[0] in SLOT_OPS) {
+ // This IF is actually covered in the previous one, it's just here to make TypeScript happy.
+ if (op[0] !== 'operator_and' && op[0] !== 'operator_equals' && op[0] !== 'flow_last_value') {
+ compiled_args[0].type = SLOT_OPS[op[0]];
+ }
+ }
+
+ return {
+ type: op[0],
+ args: compiled_args,
+ contents: []
+ }
+}
+
+export function gen_compiled(ast: SimpleArrayAst): CompiledFlowGraph {
+ const result = convert_ast(ast);
+ return _link_graph(result);
+}
+
+function canonicalize_arg(arg: CompiledBlockArg): CompiledBlockArg {
+ if (arg.type === 'constant') {
+ return arg;
+ }
+ else if (arg.type === 'variable' || arg.type === 'list') {
+ return arg;
+ }
+ else {
+ return {
+ type: arg.type,
+ value: arg.value.map((b: CompiledBlock) => canonicalize_op(b)),
+ }
+ }
+}
+
+function canonicalize_content(content: (CompiledBlock | ContentBlock)): (CompiledBlock | ContentBlock) {
+ if ((content as CompiledBlock).type) {
+ return canonicalize_op((content as CompiledBlock));
+ }
+ else {
+ return {contents: content.contents.map(c => canonicalize_content(c))};
+ }
+}
+
+function canonicalize_op(op: CompiledBlock): CompiledBlock {
+ delete op.id;
+
+ switch (op.type) {
+ // These operations should not appear on a properly compiled AST
+ case "trigger_when_all_completed":
+ case "trigger_when_first_completed":
+ case "trigger_on_signal":
+ case "trigger_when_all_true":
+ throw new Error(`Invalid AST Operation: Operation (type:${op.type}) should now be present on a properly compiled AST.`);
+
+
+ // Nothing to canonicalize
+ case "wait_for_monitor":
+ case "flow_last_value":
+ case "jump_to_position":
+ case "jump_to_block":
+ case "trigger_when_first_completed":
+ break;
+
+ // Cannonicalize args and contents, but don't sort
+ case "control_wait":
+ case "control_wait_for_next_value":
+ case "control_if_else":
+ case "control_repeat":
+ case "operator_modulo":
+ case "operator_add":
+ case "logging_add_log":
+ case "operator_lt":
+ case "operator_gt":
+ case "data_setvariableto":
+ case "data_variable":
+ case "on_data_variable_update":
+ case "data_lengthoflist":
+ case "flow_get_thread_id":
+ case "data_deleteoflist":
+ case "data_addtolist":
+ case "data_ui_block_value":
+ case "op_preload_getter":
+ case "op_on_block_run":
+ if (op.args) {
+ op.args = (op.args as CompiledBlockArgList).map(arg => canonicalize_arg(arg));
+ }
+ if (op.contents) {
+ op.contents = op.contents.map(content => canonicalize_content(content));
+ }
+ break;
+
+ // Special argument handling
+ case "command_call_service":
+ const values = (op.args as CompiledBlockArgCallServiceDict).service_call_values;
+ if (values) {
+ (op.args as CompiledBlockArgCallServiceDict).service_call_values = values.map(arg => canonicalize_arg(arg));
+ }
+ break;
+
+ // Canonicalize args and allow sorting them
+ case "operator_and":
+ case "operator_equals":
+ const args = (op.args as CompiledBlockArgList).map(arg => canonicalize_arg(arg));
+
+ // This is very inefficient, but as canonicalization only makes
+ // sense on unit tests it might be acceptable
+ op.args = args.sort((a, b) => stable_stringify(a).localeCompare(stable_stringify(b)));
+ break;
+
+ // Canonicalize contents and allow sorting them
+ case "op_fork_execution":
+ op.contents = op.contents.map(content => canonicalize_content(content));
+ op.contents = op.contents.sort((a, b) => stable_stringify(a).localeCompare(stable_stringify(b)));
+
+ // Remove redundant parameters
+ if (op.args && Array.isArray(op.args)) {
+ op.args = op.args.filter(a => !(a.type === 'constant' && a.value === 'exit-when-all-completed'))
+ }
+
+ break;
+
+ default:
+ if (op.type.startsWith('services.')) {
+ if (op.args && Array.isArray(op.args)) {
+ op.args = (op.args as CompiledBlockArgList).map(arg => canonicalize_arg(arg));
+ }
+ if (op.contents) {
+ op.contents = op.contents.map(content => canonicalize_content(content));
+ }
+ }
+ else {
+ console.warn(`Unknown operation: ${op.type}`);
+ }
+ }
+
+ delete op.report_state;
+
+ return op;
+}
+
+function canonicalize_ast(ast: CompiledFlowGraph): CompiledFlowGraph {
+ return ast.map(op => canonicalize_op(op));
+}
+
+export function canonicalize_ast_list(asts: CompiledFlowGraph[]): CompiledFlowGraph[] {
+ // This sorting is very inefficient, but as canonicalization only makes
+ // sense on unit tests it might be acceptable
+ return asts.map(ast => canonicalize_ast(ast)).sort((a, b) => stable_stringify(a).localeCompare(stable_stringify(b)));
+}
diff --git a/frontend/src/app/tests/logic/scaffolding/utils.ts b/frontend/src/app/tests/logic/scaffolding/utils.ts
new file mode 100644
index 00000000..9ac77257
--- /dev/null
+++ b/frontend/src/app/tests/logic/scaffolding/utils.ts
@@ -0,0 +1,74 @@
+import { is_pulse_output } from '../../../flow-editor/graph_transformations';
+import { AtomicFlowBlockData, BLOCK_TYPE as ATOMIC_BLOCK_TYPE } from '../../../flow-editor/atomic_flow_block';
+import { BLOCK_TYPE as VALUE_BLOCK_TYPE, DirectValueFlowBlockData } from '../../../flow-editor/direct_value';
+import { BLOCK_TYPE as ENUM_BLOCK_TYPE, EnumDirectValueFlowBlockData } from '../../../flow-editor/enum_direct_value';
+import { FlowGraph } from '../../../flow-editor/flow_graph';
+import { isUiFlowBlockData } from '../../../flow-editor/ui-blocks/ui_flow_block';
+
+export function convert_to_graphviz(graph: FlowGraph): string {
+ const tokens: string[] = ['digraph {'];
+ const raws: {[key: string]: string} = {}
+
+ let next_raw_id = 100000;
+ let raw_value_prefixes = '__RAW_VALUE_';
+
+ for (const node_id of Object.keys(graph.nodes)) {
+ const node = graph.nodes[node_id];
+
+ if (node.data.type === ATOMIC_BLOCK_TYPE) {
+ const a_node = node.data as AtomicFlowBlockData;
+
+ let fillcolor = "#ffffff";
+ let fontcolor = "#000000";
+ switch (a_node.value.options.type) {
+ case 'operation':
+ fillcolor = '#aaaaff';
+ break;
+ case 'getter':
+ fillcolor = '#aaffaa';
+ break;
+ case 'trigger':
+ fillcolor = '#ffffaa';
+ break;
+ }
+
+ tokens.push(` "${node_id}"[label="${a_node.value.options.block_function}",`
+ +`style="filled",shape=rect,fontcolor="${fontcolor}",fillcolor="${fillcolor}"]`);
+ }
+ else if (node.data.type === VALUE_BLOCK_TYPE ) {
+ const v_node = node.data as DirectValueFlowBlockData;
+ if (typeof v_node.value.value === 'string') {
+ raws[node_id] = `\\"${v_node.value.value}\\"`;
+ }
+ else {
+ raws[node_id] = v_node.value.value;
+ }
+ }
+ else if (node.data.type === ENUM_BLOCK_TYPE ) {
+ const e_node = node.data as EnumDirectValueFlowBlockData;
+ raws[node_id] = e_node.value.value_text;
+ }
+ else if (isUiFlowBlockData(node.data)) {
+ tokens.push(` "${node_id}"[label="${node.data.value.options.id}",`
+ +`style="filled",shape=rect,fontcolor="#ffaa00",fillcolor="#000000"]`);
+ }
+ }
+
+ for (const conn of graph.edges) {
+ let from_id = conn.from.id;
+ let extras = '';
+ if (raws[from_id]) {
+ const value = raws[from_id];
+
+ from_id = raw_value_prefixes + next_raw_id++;
+ tokens.push(` "${from_id}"[label="${value}"]`);
+ }
+ else if (is_pulse_output(graph.nodes[from_id], conn.from.output_index)) {
+ extras = ',color="black:#ffaa00:black",arrowhead="vee",penwidth=2';
+ }
+ tokens.push(` "${from_id}" -> "${conn.to.id}"[label="${conn.from.output_index} → ${conn.to.input_index}"${extras}];`);
+ }
+
+ tokens.push('}');
+ return tokens.join('\n');
+}
diff --git a/frontend/src/app/tests/logic/spreadsheet-compilation/.gitignore b/frontend/src/app/tests/logic/spreadsheet-compilation/.gitignore
new file mode 100644
index 00000000..b38f8050
--- /dev/null
+++ b/frontend/src/app/tests/logic/spreadsheet-compilation/.gitignore
@@ -0,0 +1,2 @@
+*.dot
+*.png
diff --git a/frontend/src/app/tests/logic/spreadsheet-compilation/01_sample_spreadsheet.spec.ts b/frontend/src/app/tests/logic/spreadsheet-compilation/01_sample_spreadsheet.spec.ts
new file mode 100644
index 00000000..7790d54b
--- /dev/null
+++ b/frontend/src/app/tests/logic/spreadsheet-compilation/01_sample_spreadsheet.spec.ts
@@ -0,0 +1,105 @@
+import { compile_spreadsheet } from "../../../program-editors/spreadsheet-editor/spreadsheet-compiler";
+import { ISpreadsheetToolbox } from "../../../program-editors/spreadsheet-editor/spreadsheet-toolbox";
+import { are_equivalent_ast } from "../flow-graph-analysis/utils.spec";
+import { gen_compiled } from "../scaffolding/graph-analysis-tools";
+import { dsl_to_ast } from "../scaffolding/graph-analysis-tools-ast-dsl";
+import { FakeSpreadsheetToolbox } from './fake-toolbox';
+
+const BRIDGE_ID = '7e90d22c-4518-4e93-9106-e69e4a85bc34';
+const BRIDGE_NAME = "matrix";
+
+export function gen_sheet(): {[key: string]: string} {
+ return {
+ "C2":"=7e34_on_new_message()",
+ "E2": "=7e34_answer_message(\"Hello\" + C2 + \" \" + 123, 7e34_get_value(123 + 456))",
+ }
+}
+
+export function gen_toolbox() : ISpreadsheetToolbox {
+ return new FakeSpreadsheetToolbox([
+ {
+ id: BRIDGE_ID,
+ name: BRIDGE_NAME,
+ blocks: [
+ {
+ id: '7e34_on_new_message',
+ message: 'When I say something in any channel. Set %1',
+ },
+ {
+ id: '7e34_answer_message',
+ message: 'Respond %1',
+ },
+ {
+ id: '7e34_get_value',
+ message: 'Get value',
+ },
+ ]
+ }
+ ], [
+ {
+ "subkey": null,
+ "save_to": {
+ "type": "argument",
+ "index": 0
+ },
+ "message": "When I say something in any channel. Set %1",
+ "key": "on_new_message",
+ "function_name": "on_new_message",
+ "service_port_id": BRIDGE_ID,
+ "id": 'services.' + BRIDGE_ID + '.' + "on_new_message",
+ "block_type": "trigger",
+ block_result_type: null,
+ "block_id": "on_new_message",
+ "arguments": [
+ {
+ "var_type": "string",
+ "type": "variable",
+ "default_value": "undefined",
+ "class": "single"
+ }
+ ]
+ },
+ {
+ "save_to": null,
+ "message": "Respond %1",
+ "function_name": "answer_message",
+ "block_type": "operation",
+ "block_result_type": null,
+ "id": 'services.' + BRIDGE_ID + '.' + "answer_message",
+ "service_port_id": BRIDGE_ID,
+ "block_id": "answer_message",
+ "arguments": [
+ {
+ "type": "string",
+ "default_value": "Hello",
+ }
+ ]
+ },
+ {
+ "save_to": null,
+ "message": "Get value",
+ "function_name": "get_value",
+ "block_type": "getter",
+ "id": 'services.' + BRIDGE_ID + '.' + "get_value",
+ "service_port_id": BRIDGE_ID,
+ "block_result_type": "string",
+ "block_id": "get_value",
+ "arguments": [],
+ }
+ ]);
+}
+
+describe('Spreadsheet-01: Sample spreadsheet.', () => {
+ it('Should be able to compile', async () => {
+ are_equivalent_ast(compile_spreadsheet(gen_sheet(), gen_toolbox()), [
+ gen_compiled(dsl_to_ast(
+ `;PM-DSL ;; Entrypoint for mmm-mode
+ (services.${BRIDGE_ID}.on_new_message)
+ (call-service id: ${BRIDGE_ID}
+ action: answer_message
+ values: ( (+ (+ (+ "Hello" (flow-last-value "C2" 1)) " ") 123)
+ (call-service id: ${BRIDGE_ID} action: get_value values: ((+ 123 456)))))
+ `))
+ ]);
+ });
+});
diff --git a/frontend/src/app/tests/logic/spreadsheet-compilation/_gen_graphs_and_tables.utils.ts b/frontend/src/app/tests/logic/spreadsheet-compilation/_gen_graphs_and_tables.utils.ts
new file mode 100644
index 00000000..4ba963db
--- /dev/null
+++ b/frontend/src/app/tests/logic/spreadsheet-compilation/_gen_graphs_and_tables.utils.ts
@@ -0,0 +1,41 @@
+import { build_graph } from "../../../program-editors/spreadsheet-editor/spreadsheet-compiler";
+import { spawn } from 'child_process';
+import * as fs from 'fs';
+import { convert_to_graphviz } from '../scaffolding/utils';
+import * as util from 'util';
+
+export function run(): Promise {
+ const files = fs.readdirSync(__dirname);
+ const candidates = files.filter((file: string) => file.match(/\d+.*.spec.ts$/));
+
+ let done_count = 0;
+ const promises = candidates.map((file: string) => {
+ return new Promise(async (resolve, reject) => {
+ try {
+ const mod_name = file.substr(0, file.length - 3);
+ const mod = require('./' + mod_name); // Remove '.ts'
+ if (mod.gen_sheet) {
+ const sheet = mod.gen_sheet();
+ const flow = build_graph(sheet, mod.gen_toolbox())
+
+ await util.promisify(fs.writeFile)(`${__dirname}/${file}.dot`, convert_to_graphviz(flow));
+ spawn("dot", ["-Tpng", `${__dirname}/${file}.dot`, '-o', `${__dirname}/${file}.png`]);
+
+ done_count++;
+ process.stdout.write(`[${done_count}/${candidates.length}] ${file}\n`)
+ resolve(file);
+ }
+ else {
+ process.stdout.write('No sheet found\n');
+ resolve(null);
+ }
+ }
+ catch (err) {
+ process.stdout.write(file + ': ' + err.toString() + '\n');
+ reject(err);
+ }
+ });
+ });
+
+ return Promise.all(promises) as Promise;
+}
diff --git a/frontend/src/app/tests/logic/spreadsheet-compilation/fake-toolbox.ts b/frontend/src/app/tests/logic/spreadsheet-compilation/fake-toolbox.ts
new file mode 100644
index 00000000..5f964e82
--- /dev/null
+++ b/frontend/src/app/tests/logic/spreadsheet-compilation/fake-toolbox.ts
@@ -0,0 +1,21 @@
+import { ISpreadsheetToolbox, CategoryDef, simplify_id } from "../../../program-editors/spreadsheet-editor/spreadsheet-toolbox";
+import { ResolvedCustomBlock } from "../../../custom_block";
+
+export class FakeSpreadsheetToolbox implements ISpreadsheetToolbox {
+ public categories: CategoryDef[];
+ public nonEmptyCategories: CategoryDef[];
+ public blockMap: { [key: string]: { cat: CategoryDef; block: ResolvedCustomBlock; }; };
+
+ constructor (categories: CategoryDef[], blocks: ResolvedCustomBlock[]) {
+ this.categories = categories;
+ this.nonEmptyCategories = categories.filter(c => c.blocks.length > 0);
+ this.blockMap = {};
+
+ for (const block of blocks) {
+ this.blockMap[simplify_id(block)] = {
+ cat: categories.find(c => c.id === block.service_port_id),
+ block: block
+ };
+ }
+ }
+}
diff --git a/frontend/src/app/types/collaborator.ts b/frontend/src/app/types/collaborator.ts
new file mode 100644
index 00000000..1c5b7df4
--- /dev/null
+++ b/frontend/src/app/types/collaborator.ts
@@ -0,0 +1,21 @@
+export type CollaboratorRole = 'admin' | 'editor' | 'viewer';
+
+export function roleToIcon(role: CollaboratorRole) {
+ switch(role) {
+ case 'admin':
+ return 'flash_on';
+ case 'editor':
+ return 'brush';
+ case 'viewer':
+ return 'visibility';
+ default:
+ return null;
+ }
+}
+
+export interface Collaborator {
+ id: string;
+ username: string;
+ picture?: string;
+ role: CollaboratorRole
+};
diff --git a/frontend/src/app/ui/progbar.ts b/frontend/src/app/ui/progbar.ts
index a9eb5ab7..5c1720d6 100644
--- a/frontend/src/app/ui/progbar.ts
+++ b/frontend/src/app/ui/progbar.ts
@@ -1,4 +1,4 @@
-declare const NProgress;
+declare const NProgress : any;
export function track(p: Promise): Promise {
NProgress.configure({ showSpinner: false });
diff --git a/frontend/src/app/user.ts b/frontend/src/app/user.ts
new file mode 100644
index 00000000..79a89452
--- /dev/null
+++ b/frontend/src/app/user.ts
@@ -0,0 +1,11 @@
+export interface UserTags {
+ is_admin: boolean;
+ is_advanced: boolean;
+ is_in_preview: boolean;
+}
+
+export interface User {
+ username: string;
+ user_id: string;
+ tags: UserTags;
+}
diff --git a/frontend/src/app/utils.ts b/frontend/src/app/utils.ts
new file mode 100644
index 00000000..a8c45200
--- /dev/null
+++ b/frontend/src/app/utils.ts
@@ -0,0 +1,114 @@
+import { IconReference, HashedIcon } from './connection';
+import { EnvironmentService } from './environment.service';
+
+function toWebsocketUrl(env: EnvironmentService, url: string): string {
+ let baseServerPath = document.location.origin;
+ const apiHost = env.getBrowserApiHost();
+ if (apiHost != '') {
+ baseServerPath = apiHost;
+ }
+
+ if (url.startsWith('/')) { // We need an absolute address for this
+ url = baseServerPath + url;
+ }
+ return url.replace(/^http/, 'ws');
+}
+
+
+function getUserPictureUrl(env: EnvironmentService, userId: string): string {
+ return `${env.getBrowserApiRoot()}/users/by-id/${userId}/picture`;
+}
+
+function getGroupPictureUrl(env: EnvironmentService, groupId: string): string {
+ return `${env.getBrowserApiRoot()}/groups/by-id/${groupId}/picture`;
+}
+
+function iconDataToUrl(env: EnvironmentService, icon: IconReference, bridge_id: string): string | undefined {
+ if (!icon) { return undefined; }
+ if ((icon as {url: string}).url) {
+ return (icon as {url: string}).url;
+ }
+ else if ((icon as HashedIcon).sha256) {
+ return env.getBrowserApiRoot() + '/assets/icons/' + bridge_id;
+ }
+}
+
+function unixMsToStr(ms_timestamp: number, options?: { ms_precision?: boolean }): string {
+ const date = new Date(ms_timestamp);
+
+ if (!options) {
+ options = {};
+ }
+
+ const left_pad = ((val: string | number, target_length: number, pad_character: string) => {
+ let str = val.toString();
+
+ while (str.length < target_length) {
+ str = pad_character + str;
+ }
+ return str;
+ });
+ const pad02 = (val: string|number) => {
+ return left_pad(val, 2, '0');
+ }
+
+ let result = (`${date.getFullYear()}/${pad02(date.getMonth() + 1)}/${pad02(date.getDate())} `
+ + ` - ${pad02(date.getHours())}:${pad02(date.getMinutes())}:${pad02(date.getSeconds())}`);
+
+ if (options.ms_precision) {
+ result += `.${date.getMilliseconds()}`;
+ }
+ return result;
+}
+
+function addTokenQueryString(url: string, token: string): string {
+ if (url.indexOf('?') === -1) {
+ return url + '?token=' + token;
+ }
+ else {
+ return url + '&token=' + token;
+ }
+}
+
+function ground(environmentService: EnvironmentService, obj: any, field: string){
+ if (obj[field] && obj[field].startsWith('/')) {
+ obj[field] = environmentService.getApiRoot() + obj[field];
+ }
+
+ return obj;
+}
+
+function manageTopLevelError(f: (input: I) => O): (input: I) => O {
+ return (...args) => {
+ try {
+ return f(...args);
+ }
+ catch (error) {
+ logError(error);
+ }
+ };
+}
+
+function logError(error: Error & { _logged?: boolean }) {
+ if (error._logged) {
+ return;
+ }
+
+ error._logged = true;
+
+ console.error(error);
+}
+
+
+export {
+ toWebsocketUrl,
+ getUserPictureUrl,
+ getGroupPictureUrl,
+ iconDataToUrl,
+ unixMsToStr,
+ addTokenQueryString,
+ ground,
+
+ manageTopLevelError,
+ logError,
+};
diff --git a/frontend/src/assets/.gitignore b/frontend/src/assets/.gitignore
new file mode 100644
index 00000000..e2d7ab75
--- /dev/null
+++ b/frontend/src/assets/.gitignore
@@ -0,0 +1 @@
+flow_editor.css
diff --git a/frontend/src/assets/blocks-icon.svg b/frontend/src/assets/blocks-icon.svg
new file mode 100644
index 00000000..b98ba5d6
--- /dev/null
+++ b/frontend/src/assets/blocks-icon.svg
@@ -0,0 +1,21 @@
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/assets/cursor.svg b/frontend/src/assets/cursor.svg
new file mode 100644
index 00000000..67019767
--- /dev/null
+++ b/frontend/src/assets/cursor.svg
@@ -0,0 +1,2 @@
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
diff --git a/frontend/src/assets/icons/aemet_logo.jpg b/frontend/src/assets/icons/aemet_logo.jpg
new file mode 100644
index 00000000..e5eb0a9c
Binary files /dev/null and b/frontend/src/assets/icons/aemet_logo.jpg differ
diff --git a/frontend/src/assets/icons/aemet_logo.png b/frontend/src/assets/icons/aemet_logo.png
new file mode 100644
index 00000000..5f71e36c
Binary files /dev/null and b/frontend/src/assets/icons/aemet_logo.png differ
diff --git a/frontend/src/assets/icons/btn_google_signin_dark_normal_web.png b/frontend/src/assets/icons/btn_google_signin_dark_normal_web.png
new file mode 100644
index 00000000..b1327b4f
Binary files /dev/null and b/frontend/src/assets/icons/btn_google_signin_dark_normal_web.png differ
diff --git a/frontend/src/assets/icons/clone.svg b/frontend/src/assets/icons/clone.svg
new file mode 100644
index 00000000..d939a100
--- /dev/null
+++ b/frontend/src/assets/icons/clone.svg
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
diff --git a/frontend/src/assets/icons/format_color_text.svg b/frontend/src/assets/icons/format_color_text.svg
new file mode 100644
index 00000000..8fc36297
--- /dev/null
+++ b/frontend/src/assets/icons/format_color_text.svg
@@ -0,0 +1 @@
+
+
diff --git a/frontend/src/assets/icons/settings.svg b/frontend/src/assets/icons/settings.svg
new file mode 100644
index 00000000..23f7e77a
--- /dev/null
+++ b/frontend/src/assets/icons/settings.svg
@@ -0,0 +1 @@
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
diff --git a/frontend/src/assets/profile-not-set.png b/frontend/src/assets/profile-not-set.png
new file mode 100644
index 00000000..1db01dab
Binary files /dev/null and b/frontend/src/assets/profile-not-set.png differ
diff --git a/frontend/src/assets/showcase/flow/flow-example.png b/frontend/src/assets/showcase/flow/flow-example.png
new file mode 100644
index 00000000..024ec315
Binary files /dev/null and b/frontend/src/assets/showcase/flow/flow-example.png differ
diff --git a/frontend/src/assets/showcase/scratch/scratch-example.png b/frontend/src/assets/showcase/scratch/scratch-example.png
new file mode 100644
index 00000000..9833a388
Binary files /dev/null and b/frontend/src/assets/showcase/scratch/scratch-example.png differ
diff --git a/frontend/src/assets/spreadsheet-icon.svg b/frontend/src/assets/spreadsheet-icon.svg
new file mode 100644
index 00000000..88396500
--- /dev/null
+++ b/frontend/src/assets/spreadsheet-icon.svg
@@ -0,0 +1,118 @@
+
+
+
+
+
+ image/svg+xml
+
+
+
+
diff --git a/frontend/src/assets/sprites/delete_forever-black.svg b/frontend/src/assets/sprites/delete_forever-black.svg
new file mode 100644
index 00000000..8b57e2bc
--- /dev/null
+++ b/frontend/src/assets/sprites/delete_forever-black.svg
@@ -0,0 +1 @@
+ tag is found inside a one respect the 's color.
+ color: inherit;
+
+ &:hover {
+ color: inherit;
+ }
+}
+
+// Floating button bar over fixed text elements
+.floating-button-bar {
+ position: absolute;
+ z-index: 3; // Less than backdrop
+
+ border-radius: 4px;
+ box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
+
+ button {
+ border-radius: 4px;
+ border: none;
+ min-width: 4ex;
+ min-height: 4ex;
+ vertical-align: bottom;
+
+ &:hover {
+ background-color: #27212e;
+ color: white;
+
+ img.icon {
+ // Same effect as changing font color, but for images
+ filter: invert(100%);
+ }
+ }
+ }
+
+
+
+ .bold-button {
+ font-weight: bold;
+ }
+
+ .italic-button {
+ font-style: italic;
+ }
+
+ .underline-button {
+ text-decoration: underline;
+ }
+}
+
+// Variable dropdown editor
+svg.block_renderer .named_var {
+ cursor: pointer;
+}
+
+svg.block_renderer.read-only .named_var {
+ cursor: not-allowed;
+}
+
+svg.block_renderer.dragging .named_var {
+ cursor: grabbing;
+}
+
+svg.block_renderer .named_var .var_name {
+ font-size: 14px;
+ fill: black;
+}
+
+svg.block_renderer .named_var .var_plate {
+ fill: transparent;
+ stroke-width: 1px;
+ stroke: #444;
+}
+
+// Popup
+.popup_group {
+ position: absolute;
+ background-color: #fafafa;
+ box-shadow: 0 0 4px rgba(0,0,0,0.5);
+
+ z-index: 10; // More than .backdrop
+
+ &.hidden {
+ display: none;
+ }
+
+ &.context_menu {
+ border-radius: 4px;
+ padding: 4px 0;
+
+ ul {
+ margin: 0;
+ padding: 0;
+
+ li {
+ cursor: pointer;
+ padding: 0.5ex 1ex;
+
+ &:hover {
+ color: #fff;
+ background-color: #009688;
+ }
+ }
+ }
+ }
+}
+
+.backdrop {
+ z-index: 5; // More than 0, less than .popup_group
+
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-color: rgba(0,0,0,0.2);
+}
+
+.popup_group > .editor > input {
+ border: none;
+ border-bottom: 2px solid #009688;
+ padding-left: 1ex;
+ width: 100%;
+ min-width: 20ex;
+}
+
+.options {
+ padding: 0;
+ margin: 0;
+ overflow: auto;
+}
+
+.options li {
+ padding-left: 1ex;
+ padding-right: 1ex;
+ cursor: pointer;
+
+ &:hover, &.selected {
+ background-color: #444;
+ color: white;
+ }
+
+ border-bottom: 1px solid rgba(0,0,0,0.3);
+ padding: 0.5ex 1ex 0.5ex 1ex;
+}
+
+// Trashcan
+.trashcan.invisible {
+ visibility: invisible;
+}
+
+.trashcan .backdrop {
+ fill: #fafafa;
+}
+
+.trashcan .backdrop_shadow {
+ // Separated in a different element to avoid problems
+ // in case filter problems make it disappear
+ filter: url("#shadow");
+ fill: #000; // Backdrop color
+}
+
+.trashcan.to-be-activated .backdrop {
+ fill: #ff4444;
+}
+
+// Floating buttons
+svg.block_renderer .fab-button-group {
+ .button {
+ cursor: pointer;
+ }
+
+ .button-body {
+ fill: #27212e;
+ }
+
+ .button-shadow {
+ // Separated in a different element to avoid problems
+ // in case filter problems make it disappear
+ filter: url("#shadow");
+ fill: rgba(0,0,0,0.3); // Shadow color
+ }
+
+ .button-symbol {
+ stroke: #fff;
+ stroke-width: 2px;
+ }
+}
+
+// Toolbox
+.toolbox {
+ background-color: rgba(0,0,0,0.3);
+ position: absolute;
+ left: 0;
+ display: flex;
+
+
+ &.landscape {
+ height: 100%;
+ min-width: 5ex;
+ max-width: min(30vw, 30rem);
+
+ padding-left: 6rem; // Space for the shortcut list
+ top: 0;
+
+ .hide-button-section {
+ display: none;
+ }
+ }
+
+ &.portrait {
+ width: 100%;
+ max-height: min(30vh, 30rem);
+ min-height: 2.2rem;
+
+ padding-left: 0;
+ top: calc(100% - min(30vh, 30rem));
+
+ &.collapsed {
+ height: 2.2rem;
+ top: calc(100% - 2.2rem);
+ }
+
+ .hide-button-section {
+ position: absolute;
+ right: 0.5rem;
+ }
+ }
+}
+
+.toolbox .hide-button-section button {
+ border: none;
+ background-color: #009688;
+ color: white;
+ padding-bottom: 0.5ex;
+ font-weight: bolder;
+ border-radius: 4px;
+}
+
+
+.toolbox.collapsed {
+ .showcase {
+ visibility: hidden;
+ }
+
+ .hide-button-section {
+ display: none;
+ }
+}
+
+.toolbox.subsumed {
+ pointer-events: none;
+ opacity: 0.2;
+}
+
+.toolbox .category-shortcut-list {
+ margin: 0;
+ padding: 0;
+ width: 6rem;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+
+ height: inherit;
+ max-height: inherit;
+ max-width: inherit;
+
+ overflow-y: auto;
+ background-color: #0f110e;
+
+ .contents {
+ padding: 0;
+ margin: 0;
+
+ li {
+ cursor: pointer;
+ color: white;
+ text-align: center;
+ margin: 0.5ex 2px 0.5ex 2px;
+ background-color: #262826;
+ border-radius: 4px;
+ padding: 4px;
+ font-size: small;
+ word-wrap: break-word;
+ user-select: none;
+ }
+ }
+}
+
+.toolbox.portrait {
+ .category-shortcut-list {
+ top: calc(100% - 2.2rem);
+ height: 2.2rem;
+ width: 100%;
+ overflow-x: auto;
+ overflow-y: hidden;
+
+ .contents {
+ width: max-content;
+
+ li {
+ display: inline-block;
+ }
+ }
+ }
+
+ &.collapsed .category-shortcut-list {
+ top: 0; // Nothing more on the section
+ }
+
+ .showcase {
+ overflow-x: auto;
+
+ .category {
+ overflow-x: auto;
+
+ .content {
+ width: max-content;
+ min-width: 100%;
+
+ .block_exhibitor {
+ display: inline-block;
+ }
+ }
+ }
+ }
+}
+
+.toolbox-flow-button {
+ margin: 1ex;
+ padding: 1ex;
+ background: #009688;
+ color: #fff;
+ border: none;
+ font-weight: 500;
+ box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
+}
+
+.toolbox .category.empty {
+ display: none;
+}
+
+.toolbox .category-shortcut-list .contents li.empty {
+ display: none;
+}
+
+.category .category_title {
+ background-color: #27212e;
+ padding: 0.5ex;
+ font-weight: bold;
+ width: 100%;
+ color: white;
+ cursor: pointer;
+}
+
+.toolbox .showcase {
+ width: max-content;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+.toolbox .block_exhibitor {
+ margin: 1ex;
+}
+
+.toolbox .category.collapsed .block_exhibitor {
+ display: none;
+}
+
+.toolbox .category.collapsed .category_title {
+ border-bottom: 1px solid #444;
+}
+
+.toolbox.subsumed .block_exhibitor {
+ pointer-events: none;
+}
+
+.toolbox.subsumed svg g.flow_node > a {
+ pointer-events: none;
+}
+
+.block_exhibitor.hidden g.flow_node {
+ visibility: hidden;
+}
+
+.block_exhibitor {
+ display: block;
+}
+
+// Block internal wiring
+.var_connector {
+ stroke-width: 4px;
+ stroke: $any-color;
+
+ &.string_port {
+ stroke: $string-color;
+ }
+
+ &.integer_port {
+ stroke: $integer-color;
+ }
+
+ &.float_port {
+ stroke: $float-color;
+ }
+
+ &.boolean_port {
+ stroke: $boolean-color;
+ }
+
+ &.enum_port {
+ stroke: $enum-color;
+ }
+
+ &.enum_sequence_port {
+ stroke: $enum-color;
+ }
+
+ &.any_port {
+ stroke: $any-color;
+ }
+
+ &.list_port {
+ stroke: $list-color;
+ }
+
+ &.pulse_port {
+ stroke: $pulse-color;
+ }
+
+ &.unknown_port {
+ stroke: $unknown-color;
+ }
+}
+
+
+path.var_path {
+ stroke-width: 3px;
+ stroke: $any-color;
+ stroke-dasharray: 5;
+
+ &.string_port {
+ stroke: $string-color;
+ }
+
+ &.integer_port {
+ stroke: $integer-color;
+ }
+
+ &.float_port {
+ stroke: $float-color;
+ }
+
+ &.boolean_port {
+ stroke: $boolean-color;
+ }
+
+ &.enum_port {
+ stroke: $enum-color;
+ }
+
+ &.enum_sequence_port {
+ stroke: $enum-color;
+ }
+
+ &.any_port {
+ stroke: $any-color;
+ }
+
+ &.list_port {
+ stroke: $list-color;
+ }
+
+ &.pulse_port {
+ stroke: $pulse-color;
+ }
+
+ &.unknown_port {
+ stroke: $unknown-color;
+ }
+}
+
+// Node icon
+.node_icon_plate {
+ fill: #e7e7e7;
+}
+
+.node_icon, .node_icon_separator, .node_icon_plate {
+ pointer-events: none;
+}
+
+// UI nodes
+svg.block_renderer g.flow_node.button_node .node_body {
+ fill: #EEE;
+ stroke-width: 1;
+ stroke: #BBB;
+}
+
+svg.block_renderer g.flow_node.output_node .node_body {
+ fill: #222;
+}
+
+svg.block_renderer g.flow_node.output_node .output_text {
+ fill: #fc4;
+}
+
+svg.block_renderer g.flow_node.image_node image {
+ pointer-events: none;
+}
+
+svg.block_renderer g.flow_node.image_node .node_body {
+ fill: rgba(255,255,255,0.3)
+}
+
+svg.block_renderer g.flow_node.separator_node {
+ .representation {
+ stroke: #000;
+ mix-blend-mode: difference;
+ stroke-width: 2px;
+ }
+
+ .node_body {
+ fill: rgba(255,255,255,0.3);
+ }
+}
+
+svg.block_renderer g.flow_node.container_node .node_body {
+ stroke-width: 1;
+ stroke-dasharray: 5;
+ stroke: rgba(0,0,0,0.5);
+}
+
+svg.block_renderer g.flow_node.container_node.simple_card .node_body {
+ stroke-width: 0;
+}
+
+svg.block_renderer g.flow_node.selected.container_node.simple_card .node_body {
+ stroke-width: 2;
+ stroke-dasharray: 10;
+}
+
+
+svg.block_renderer g.flow_node.container_node.highlighted .node_body {
+ fill: #AFA !important;
+}
+
+svg.block_renderer g.flow_node.section_node .node_body {
+ fill: rgba(255,255,255,0.5);
+}
+
+svg.block_renderer g.flow_node.action_area .node_body {
+ fill: rgba(255,255,255,0.5);
+ stroke-dasharray: 5;
+}
+
+svg.block_renderer g.flow_node.text_node .node_body {
+ fill: rgba(255,255,255,0.5);
+}
+
+svg.block_renderer g.flow_node.text_box .node_body {
+ fill: #fff;
+ stroke-width: 2;
+ stroke: #444;
+}
+
+// Don't use transparency on showcase
+.showcase svg.block_renderer g.flow_node.text_node .node_body {
+ fill: #fff;
+}
+
+.showcase svg.block_renderer g.flow_node.section_node .node_body {
+ fill: #fff;
+}
+
+svg.block_renderer g.flow_node.container_node.responsive_page {
+
+ .node_body {
+ cursor: auto;
+
+ }
+
+ rect {
+ pointer-events: none;
+ }
+
+ rect.titlebox, text {
+ pointer-events: all;
+ cursor: text
+ }
+}
+
+svg.block_renderer.dragging g.flow_node.container_node.responsive_page {
+ .node_body {
+ cursor: grabbing;
+ }
+ rect.titlebox, text {
+ cursor: grabbing;
+ }
+}
+
+
+svg.block_renderer g.flow_node.container_node.responsive_page .output_text {
+ fill: #fff;
+ font-style: normal;
+}
+
+svg.block_renderer g.flow_node.container_node .output_text {
+ fill: #222;
+ font-style: italic;
+}
+
+svg.block_renderer g.flow_node .manipulators .manipulator path {
+ fill: transparent;
+ stroke: #ff0;
+ stroke-width: 2px;
+}
+
+svg.block_renderer g.flow_node .manipulators .manipulator.hidden {
+ display: none;
+}
+
+svg.block_renderer g.flow_node .manipulators .manipulator .handle-icon-background {
+ fill: #222;
+}
+
+svg.block_renderer g.flow_node .manipulators .resize-manipulator {
+ cursor: se-resize;
+}
+
+svg.block_renderer g.flow_node .manipulators .height-resizer.resize-manipulator {
+ cursor: s-resize;
+}
+
+svg.block_renderer g.flow_node .manipulators .width-resizer.resize-manipulator {
+ cursor: e-resize;
+}
+svg.block_renderer.dragging g.flow_node .manipulators .resize-manipulator {
+ cursor: grabbing;
+}
+
+svg.block_renderer g.flow_node .manipulators .manipulator.settings-manipulator image {
+ cursor: pointer;
+ filter: invert(100%);
+}
+
+svg.block_renderer g.flow_node .manipulators.hidden {
+ display: none;
+}
diff --git a/frontend/src/index.html b/frontend/src/index.html
index d18bf8b7..72ff9252 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -12,21 +12,98 @@
-
+
+
+
+ Loading PrograMaker...
+
+
+
+
+ Sorry, PrograMaker won't work without Javascript.
+ Please consider enabling Javascript.
+
+
+
+
| | ![]( ", ImgUrl, ")
"
+ , <<"
{{title}}
+ 
+ 
+ 
+ 
+
+
+ 
+
+  }})
+
+ 
+ 
+
+
+ {{ group.name }}
+
+ 
+
+
+ {{ user.username }}
+
+ 
+ 
';
+ colorButton.onmousedown = (ev) => {
+ ev.preventDefault(); // Prevent losing focus on element
+ withMovingFocus(() => editColorInSelection(dialog));
+ }
+
+ const linkButton = document.createElement('button');
+ linkButton.classList.add('link-button');
+ buttonBar.appendChild(linkButton);
+ linkButton.innerHTML = '
';
+ linkButton.onmousedown = (ev) => {
+ ev.preventDefault(); // Prevent losing focus on element
+ withMovingFocus(() => editLinkInSelection(dialog));
+ }
+
+ document.body.appendChild(buttonBar);
+
+ const buttonDim = buttonBar.getBoundingClientRect();
+ buttonBar.style.top = elementPos.y - buttonDim.height + 'px';
+ buttonBar.style.left = elementPos.x + 'px';
+ }
+
+ const updateSize = () => {
+ // Update size
+ const area = (element.firstChild as HTMLElement).getBoundingClientRect();
+ resize(
+ area.width + ON_ELEMENT_EDITOR_MARGIN,
+ area.height + ON_ELEMENT_EDITOR_MARGIN,
+ );
+ }
+
+ element.oninput = updateSize;
+ updateSize();
+
+ element.onkeydown = (ev: KeyboardEvent) => {
+ if (ev.ctrlKey && ev.code === 'KeyB') {
+ ev.preventDefault();
+ document.execCommand('bold', false, undefined);
+ }
+ else if (ev.ctrlKey && ev.code === 'KeyU') {
+ ev.preventDefault();
+ document.execCommand('underline', false, undefined);
+ }
+ else if (ev.ctrlKey && ev.code === 'KeyI') {
+ ev.preventDefault();
+ document.execCommand('italic', false, undefined);
+ }
+ else if (ev.ctrlKey && ev.code === 'KeyK') {
+ ev.preventDefault();
+ withMovingFocus(() => editLinkInSelection(dialog));
+ }
+ else if (ev.ctrlKey && ev.code === 'Enter') {
+ ev.preventDefault();
+ element.blur(); // Release focus
+ }
+ }
+
+ const onBlur = (_ev: FocusEvent) => {
+ // Cleanup
+ element.onkeydown = element.onblur = element.oninput = null;
+ document.body.removeChild(buttonBar);
+
+ onDone(trimFormattedTextTree(domToFormattedTextTree(element)));
+ };
+
+ const withMovingFocus = (f: () => Promise
- PrograMaker
-
+ 
- 
+