feat: front-end refinements

- UI/UX refinements - build input form from metadata - improve result visualization work on #9
bsorrentino · Jul 16, 2024 · f48618c · f48618c
1 parent 9e8109d
commit f48618c
Show file tree

Hide file tree

Showing 13 changed files with 219 additions and 140 deletions.
diff --git a/jetty/src/main/js/src/app.css → jetty/src/main/js/app.css b/jetty/src/main/js/src/app.css → jetty/src/main/js/app.css
@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
diff --git a/jetty/src/main/js/deploy.ts b/jetty/src/main/js/deploy.ts
@@ -2,6 +2,6 @@
 import { $ } from "bun";
 
 $.nothrow();
-await $`build.ts`
+await $`bun build.ts`
 await $`rm ../webapp/*`
 await $`cp dist/* ../webapp`
diff --git a/jetty/src/main/js/src/favicon.svg → jetty/src/main/js/favicon.svg b/jetty/src/main/js/src/favicon.svg → jetty/src/main/js/favicon.svg
diff --git a/jetty/src/main/js/index.html b/jetty/src/main/js/index.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="cupcake">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <link href="./app.css" type="text/css" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Lit App</title>
     <script type="module" src="/src/lg4j-workbench.js"></script>

diff --git a/jetty/src/main/js/package.json b/jetty/src/main/js/package.json
@@ -3,8 +3,8 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "parcel index.html",
-    "parcel:build": "parcel build index.html",
+    "dev": "parcel index.html --no-cache",
+    "parcel:build": "parcel build index.html --public-url '.'",
     "build": "./build.ts",
     "deploy": "./deploy.ts",
     "twget": "bun twgen.ts"
@@ -22,7 +22,7 @@
     "daisyui": "^4.12.2",
     "parcel": "^2.12.0",
     "postcss": "^8.4.7",
-    "tailwindcss": "^3.0.23",
+    "tailwindcss": "^3.4.5",
     "typescript": "^5.4.5"
   }
 }
diff --git a/jetty/src/main/js/src/lg4j-executor.js b/jetty/src/main/js/src/lg4j-executor.js
@@ -41,7 +41,8 @@ export class LG4JExecutorElement extends LitElement {
   static styles = [TWStyles, css`
     .container {
       display: flex;
-      flex-direction: row;
+      flex-direction: column;
+      row-gap: 10px;
     }
   `];
 
@@ -52,7 +53,6 @@ export class LG4JExecutorElement extends LitElement {
    * @type {Object}
    */
   static properties = {
-    placeholder: {},
     url: {},
     test: { type: Boolean }
   }
@@ -64,8 +64,8 @@ export class LG4JExecutorElement extends LitElement {
    */
   constructor() {
     super();
-    this.placeholder = "prompt";
     this.test = false
+    this.formMetaData = {}
   }
 
   /**
@@ -74,19 +74,54 @@ export class LG4JExecutorElement extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
-    if( this.test ) {
-      setTimeout( () => 
-        this.dispatchEvent( new CustomEvent( 'graph', { 
-          detail: `
-          flowchart TD
-          Start --> Stop
-          `,
-          bubbles: true,
-          composed: true,
-          cancelable: true
-        })), 1000 );
-      }
-
+    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 );
+
+    }
+    else {
+
+      this.#init()
+
+    }
+
+  }
+
+  async #init() {
+
+    const initResponse = await fetch( `${this.url}/init` )
+
+    const initData = await initResponse.json()
+
+    console.debug( initData );
+
+    this.dispatchEvent( new CustomEvent( 'graph', { 
+      detail: initData.graph,
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+
+    this.formMetaData = initData.args
+    this.requestUpdate()
   }
 
   /**
@@ -95,34 +130,41 @@ export class LG4JExecutorElement extends LitElement {
    * @returns {TemplateResult} The rendered HTML template.
    */
   render() {
+    console.debug( 'render', this.formMetaData )
     return html`
         <div class="container">
-          <textarea id="prompt" class="textarea textarea-bordered" placeholder="${this.placeholder}"></textarea>
+          ${ Object.entries(this.formMetaData).map( ([key,value]) => 
+             html`<textarea id="${key}" class="textarea textarea-primary" placeholder="${key}"></textarea>`
+          )}
           <button @click="${this.#submit}" class="btn btn-primary">Submit</button>
         </div>
     `;
   }
 
-  get #prompt() {
-    // console.debug(  ' --> ' + this.shadowRoot.getElementById('prompt') )
-    return this.shadowRoot.getElementById('prompt').value
-  }
-
   async #submit() {
     // console.debug( 'test', this.test )
+
     if(this.test ) {
-      this.dispatchEvent( new CustomEvent( 'result', { 
-        detail: `TEST: ${this.#prompt}`,
-        bubbles: true,
-        composed: true,
-        cancelable: true
-      } ) );
-      return
-    }
 
-    const data = { 'prompt': this.#prompt }
+      setTimeout( () => {
 
+          this.dispatchEvent( new CustomEvent( 'result', { 
+            detail: { node: 'node1', state: { property1: "value1", property2: "value2" }},
+            bubbles: true,
+            composed: true,
+            cancelable: true
+          } ) );
+
+        }, 1000 );
+
+      return
+    }
 
+    const data = Object.keys(this.formMetaData).reduce( (acc, key) => {
+      acc[key] = this.shadowRoot.getElementById(key).value
+      return acc
+    }, {});
+
     const execResponse = await fetch(`${this.url}/stream`, {
         method: 'POST', // *GET, POST, PUT, DELETE, etc.
         headers: {
@@ -131,22 +173,11 @@ export class LG4JExecutorElement extends LitElement {
         body: JSON.stringify(data)
     });
 
-    const graphResponse = await fetch( `${this.url}/graph` )
-
-    const graphText = await graphResponse.text()
-
-    this.dispatchEvent( new CustomEvent( 'graph', { 
-      detail: graphText,
-      bubbles: true,
-      composed: true,
-      cancelable: true
-    }));
-
     for await (let chunk of streamingResponse( execResponse )  ) {
       console.debug( chunk )
 
       this.dispatchEvent( new CustomEvent( 'result', { 
-        detail: chunk,
+        detail: JSON.parse(chunk),
         bubbles: true,
         composed: true,
         cancelable: true

diff --git a/jetty/src/main/js/src/lg4j-graph.js b/jetty/src/main/js/src/lg4j-graph.js
@@ -5,7 +5,10 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const mermaidAPI = mermaid.mermaidAPI;
 
 
-const renderSVG = (diagram) => html`<div>${unsafeSVG(diagram.svg)}</div>`;
+const renderSVG = (diagram) => html`
+  <div>
+  ${unsafeSVG(diagram.svg)}
+  </div>`;
 
 /**
  * WcMermaid
@@ -28,7 +31,7 @@ export class LG4jMermaid extends LitElement {
   #mermaidTask = new Task(this, {
     task: async ([textContent], { signal }) => {
       return await mermaidAPI.render(
-        'graph',
+        `graph-${Date.now()}-${Math.floor(Math.random() * 10000)}`,
         textContent);
 
     },

diff --git a/jetty/src/main/js/src/lg4j-result.js b/jetty/src/main/js/src/lg4j-result.js
@@ -2,15 +2,16 @@ import TWStyles from './twlit';
 
 import { html, css, LitElement } from 'lit';
 
+/**
+ * @typedef {Object} ResultData
+ * @property {string} node - The node identifier.
+ * @property {Record<string, any>} state - The state associated with the node.
+ */
+
 
 export class LG4JResultElement extends LitElement {
 
-  static styles = [TWStyles, css`
-    .container {
-      display: flex;
-      flex-direction: row;
-    }
-    `]
+  static styles = [TWStyles, css``]
 
   static properties = {
   }
@@ -32,30 +33,56 @@ export class LG4JResultElement extends LitElement {
     this.removeEventListener( 'result',  this.#onResult )
   }
 
-  #renderResult(result) {
+
+  /**
+   * Renders a result.
+   * @param {ResultData} result - The result data to render.
+   * @returns {import('lit').TemplateResult} The template for the result.
+   */
+  #renderResult(result, index) {
     return html`
-    <div class="collapse collapse-arrow join-item border-base-300 border">
-      <input type="radio" name="my-accordion-4" checked="checked" />
-      <div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
+    <div class="collapse collapse-arrow bg-base-200">
+      <input type="radio" name="item-1" checked="checked" />
+      <div class="collapse-title text-xm font-medium">${result.node}</div>
       <div class="collapse-content">
-        <p>${result}</p>
+        <table class="table">
+          <tbody>
+            ${Object.entries(result.state).map(([key, value]) => html`
+              <tr>
+                <td width="30%">${key}</td>
+                <td width="70%">${value}</td>
+              </tr>
+            `)}
+          </tbody>
+        </table>
       </div>
     </div>
     `
   }
 
-  #onResult = ( e ) => {
+
+  /**
+   * Event handler for the 'result' event.
+   * 
+   * @param {CustomEvent} e - The event object containing the result data.
+   * @private
+   */
+  #onResult = (e) => {
 
     console.debug( "onResult", e )
 
+    // TODO: validate e.detail
     this.results.push( e.detail )
     this.requestUpdate()
 
   }
+
+
   render() {
+
     return html`
-      <div class="join join-vertical w-full">
-      ${this.results.map(result => this.#renderResult(result))}
+      <div class="flex flex-col gap-y-1.5 mx-2 mt-2">
+      ${this.results.map( (result, index) => this.#renderResult(result, index))}
       </div>
     `;
   }

diff --git a/jetty/src/main/js/src/lg4j-workbench.js b/jetty/src/main/js/src/lg4j-workbench.js
@@ -1,35 +1,38 @@
-import './app.css';
+import TWStyles from './twlit';
 
 import { html, css, LitElement } from 'lit';
 
 export class LG4JWorkbenchElement extends LitElement {
 
-  static styles = css`
-    .item-a {
+  static styles = [css`
+    .item-graph {
       grid-area: left;
-      background-color: red;
+      
+      // background-color: red;
     }
-    .item-b {
+    .item-result {
       grid-area: right;
-      background-color: blue;
+      // background-color: blue;
     }
-    .item-c {
+    .item-executor {
       grid-area: bottom;
       //background-color: yellow;
     }
-    .container {
+    .item-container {
       height: 100vh;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       grid-template-rows: 25% 25%  25%  25% ;
+      row-gap: 15px;
 
       grid-template-areas: 
         "left left right right"
         "left left right right"
         "left left right right"
         "bottom bottom right right";
     }
-  `;
+  `, TWStyles];
+  ;
 
   #routeEvent( e ) {
 
@@ -64,10 +67,10 @@ export class LG4JWorkbenchElement extends LitElement {
 
   render() {
     return html`
-<div class="container">
-  <div class="item-a" id="panel1"><slot name="graph">LEFT</slot></div>
-  <div class="item-b" id="panel3"><slot name="result">RIGHT</slot></div>
-  <div class="item-c border border-gray-200" id="panel2"><slot name="executor">BOTTOM</slot></div>
+<div class="item-container">
+  <div class="item-graph border border-gray-300 p-5 flex items-center justify-center" id="panel1"><slot name="graph">LEFT</slot></div>
+  <div class="item-result" id="panel3"><slot name="result">RIGHT</slot></div>
+  <div class="item-executor" id="panel2"><slot name="executor">BOTTOM</slot></div>
 </div>
     `;
   }