feat: highlight active node

work on #9

Author: bsorrentino

jetty/src/main/js/src/lg4j-executor.js

@@ -2,6 +2,14 @@ import TWStyles from './twlit';
 
 import { html, css, LitElement } from 'lit';
 
+/**
+ * Asynchronously waits for a specified number of milliseconds.
+ * 
+ * @param {number} ms - The number of milliseconds to wait.
+ * @returns {Promise<void>} A promise that resolves after the specified delay.
+ */
+const delay = async (ms) => (new Promise(resolve => setTimeout(resolve, ms)));
+
 /**
  * Asynchronously fetches data from a given fetch call and yields the data in chunks.
  * 
@@ -75,36 +83,15 @@ export class LG4JExecutorElement extends LitElement {
     super.connectedCallback();
 
     if(this.test ) {
-
-      setTimeout( () => {
-        
-          this.dispatchEvent( new CustomEvent( 'graph', { 
-            detail: `
-            flowchart TD
-            Start --> Stop
-            `,
-            bubbles: true,
-            composed: true,
-            cancelable: true
-          }));
-
-          this.formMetaData = { 
-            input: { type: 'string', required: true }
-          }
-          
-          this.requestUpdate()
-
-      }, 1000 );
-      
+      this.#init_test();
+      return
     }
-    else {
 
-      this.#init()
-
-    }
+    this.#init()
 
   }
 
+
   async #init() {
 
     const initResponse = await fetch( `${this.url}/init` )
@@ -124,6 +111,29 @@ export class LG4JExecutorElement extends LitElement {
     this.requestUpdate()
   }
 
+  async #init_test() {
+        
+    await delay( 1000 );
+    this.dispatchEvent( new CustomEvent( 'graph', { 
+      detail: `
+      flowchart TD
+        Start --> node1:::node1
+        node1:::node1 --> node2:::node2
+        node2:::node2 --> Stop
+      `,
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+
+    this.formMetaData = { 
+      input: { type: 'string', required: true }
+    }
+    
+    this.requestUpdate()
+
+  }
+
   /**
    * Renders the HTML template for the component.
    * 
@@ -141,22 +151,11 @@ export class LG4JExecutorElement extends LitElement {
     `;
   }
 
+
   async #submit() {
-    // console.debug( 'test', this.test )
 
     if(this.test ) {
-
-      setTimeout( () => {
-
-          this.dispatchEvent( new CustomEvent( 'result', { 
-            detail: { node: 'node1', state: { property1: "value1", property2: "value2" }},
-            bubbles: true,
-            composed: true,
-            cancelable: true
-          } ) );
-
-        }, 1000 );
-      
+      await this.#submit_test();
       return
     }
 
@@ -186,6 +185,23 @@ export class LG4JExecutorElement extends LitElement {
     }
   }
 
+  async #submit_test() {
+
+    const send = async ( nodeId ) => {
+      await delay( 1000 );
+      this.dispatchEvent( new CustomEvent( 'result', { 
+        detail: { node: nodeId, state: { property1: "value1", property2: "value2" }},
+        bubbles: true,
+        composed: true,
+        cancelable: true
+      }));
+    }
+
+    await send( 'node1' );
+    await send( 'node2');
+
+  }
+
 }
 
 

jetty/src/main/js/src/lg4j-graph.js

@@ -26,6 +26,7 @@ export class LG4jMermaid extends LitElement {
     });
 
     this._content = null
+    this._activeClass = null
   }
 
   #mermaidTask = new Task(this, {
@@ -52,18 +53,41 @@ export class LG4jMermaid extends LitElement {
    * @private
    */
   get #textContent() {
-    return this._content ?? this.#textNodes.map(node => node.textContent?.trim()).join('');
+    if( this._content ) {
+
+      if( this._activeClass ) {
+        return `
+        ${this._content}
+        classDef ${this._activeClass} fill:#f96
+        `
+      }
+      
+      return this._content
+    }
+
+    return this.#textNodes.map(node => node.textContent?.trim()).join('');
   }
 
   #onContent(e) {
-    this._content = e.detail
+    const { detail: newContent } = e
+
+    this._content = newContent
+    this.requestUpdate()
+  }
+
+  #onActive(e) {
+
+    const { detail: activeClass } = e
+    
+    this._activeClass = activeClass;
     this.requestUpdate()
   }
 
   connectedCallback() {
     super.connectedCallback()
 
     this.addEventListener('graph', this.#onContent)
+    this.addEventListener('graph-active', this.#onActive)
     // this.__observer = new MutationObserver(() => {
     //   this.__observeTextNodes();
     //   this.__renderGraph();
@@ -77,6 +101,7 @@ export class LG4jMermaid extends LitElement {
     super.disconnectedCallback()
 
     this.removeEventListener('graph', this.#onContent)
+    this.removeEventListener('graph-active', this.#onActive)
     //   this.__cleanTextNodeObservers();
 
     //   if (this.__observer) {

jetty/src/main/js/src/lg4j-result.js

@@ -69,10 +69,19 @@ export class LG4JResultElement extends LitElement {
    */
   #onResult = (e) => {
 
+    const { detail: result } = e 
     console.debug( "onResult", e )
 
     // TODO: validate e.detail
-    this.results.push( e.detail )
+    this.results.push( result )
+
+    this.dispatchEvent( new CustomEvent( 'graph-active', { 
+      detail: result.node,
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+    
     this.requestUpdate()
 
   }

jetty/src/main/js/src/lg4j-workbench.js

@@ -38,11 +38,13 @@ export class LG4JWorkbenchElement extends LitElement {
 
     const { type, detail } = e
 
-    console.log( 'routeEvent', type )
+    const slot = type.split('-')[0]
 
-    const elem = this.querySelector(`[slot="${type}"]`)
+    console.debug( 'routeEvent', type, slot )
+    
+    const elem = this.querySelector(`[slot="${slot}"]`)
     if( !elem ) {
-      console.error( `slot "${type}" not found!` )
+      console.error( `slot "${slot}" not found!` )
       return
     }
     elem.dispatchEvent( new CustomEvent( type, { detail } ) )
@@ -53,13 +55,15 @@ export class LG4JWorkbenchElement extends LitElement {
 
     this.addEventListener( "result", this.#routeEvent );
     this.addEventListener( "graph", this.#routeEvent );
+    this.addEventListener( "graph-active", this.#routeEvent );
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
 
     this.removeEventListener( "result", this.#routeEvent );
     this.removeEventListener( "graph", this.#routeEvent );
+    this.removeEventListener( "graph-active", this.#routeEvent );
   }
 
   // firstUpdated() {