fix: graph layout

sync container and grapsh svg size work on #24
bsorrentino · Sep 9, 2024 · ab0a0c2 · ab0a0c2
1 parent 963be9b
commit ab0a0c2
Show file tree

Hide file tree

Showing 4 changed files with 274 additions and 66 deletions.
diff --git a/server-jetty/src/main/js/src/lg4j-graph.js b/server-jetty/src/main/js/src/lg4j-graph.js
@@ -30,20 +30,20 @@ export class LG4jMermaid extends HTMLElement {
 
     const style = document.createElement("style");
     style.textContent = `
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
+    // :host {
+    //   display: block;
+    //   width: 100%;
+    //   height: 100%;
+    // }
     .h-full {
       height: 100%;
     }
     .w-full {
       width: 100%;
     }
-    .flex {
-      display: flex;
-    }
+    // .flex {
+    //   display: flex;
+    // }
     .items-center {
       align-items: center;
     }
@@ -115,19 +115,25 @@ export class LG4jMermaid extends HTMLElement {
 
     // console.debug( svgContainer );
     return mermaid.render( 'graph', this.#textContent )
-
         .then( res => { 
           console.debug( "RENDER COMPLETE", svgContainer );
           // svgContainer.innerHTML = res.svg
-          const { right: width,  bottom: height } = svgContainer.getBoundingClientRect();
+          const { width, height } = svgContainer.getBoundingClientRect();
           // console.debug( res.svg )
+          console.debug( 'width:', width, 'height:', height);
           const translated = res.svg
             .replace( /height="[\d\.]+"/, `height="${height}"`) 
             .replace( /width="[\d\.]+"/, `width="${width}"`);
           // console.debug( translated );
           svgContainer.innerHTML = translated;
         })
         .then( () => this.#svgPanZoom() )
+        .then( () => {
+          console.debug( "boundingClientRect", svgContainer.getBoundingClientRect() );
+          for( const rc of svgContainer.getClientRects() ) {
+            console.debug( rc );
+          }
+        })
         .catch( e => console.error( "RENDER ERROR", e ) )
 
   }

diff --git a/server-jetty/src/main/js/src/lg4j-result.js b/server-jetty/src/main/js/src/lg4j-result.js
@@ -37,36 +37,6 @@ export class LG4JResultElement extends LitElement {
     this.removeEventListener( 'result',  this.#onResult )
   }
 
-
-  /**
-   * 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>
-    <div class="collapse collapse-arrow bg-base-200">
-      <input type="radio" name="item-1" checked="checked" />
-      <div class="collapse-title text-xl font-bold">${result.node}</div>
-      <div class="collapse-content">
-      ${Object.entries(result.state).map(([key, value]) => html`
-          <div>
-              <h4 class="italic">${key}</h4>
-              <p class="my-3">
-                <json-viewer id="json${index}">
-                ${JSON.stringify(value)}
-                </json-viewer>
-              </p>
-            </div>
-        `)}
-      </div>
-    </div>
-    </div>
-    `
-  }
-
-
   /**
    * Event handler for the 'result' event.
    * 
@@ -100,15 +70,49 @@ export class LG4JResultElement extends LitElement {
     });
   }
 
-
+  /**
+   * 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 bg-base-200">
+      <input type="radio" name="item-1" checked="checked" />
+      <div class="collapse-title text-ml font-bold">${result.node}</div>
+      <div class="collapse-content">
+      ${Object.entries(result.state).map(([key, value]) => html`
+          <div>
+              <h4 class="italic">${key}</h4>
+              <p class="my-3">
+                <json-viewer id="json${index}">
+                ${JSON.stringify(value)}
+                </json-viewer>
+              </p>
+            </div>
+        `)}
+      </div>
+    </div>
+    `
+  }
+
   render() {
 
     return html`
-      <div class="h-screen flex flex-col">
-        <div class="flex flex-col gap-y-1.5 mx-2 mt-2 h-full overflow-auto">
-        ${this.results.map( (result, index) => this.#renderResult(result, index))}
+      
+      <div class="h-full">
+        <div role="tablist" class="tabs tabs-bordered">
+        <a role="tab" class="tab">No Thread</a>
+        </div> 
+        <div class="max-h-[95%] overflow-x-auto bg-slate-500">
+          <table class="table table-pin-rows">
+            <tbody>
+                ${this.results.map( (result, index) => html`<tr><td>${this.#renderResult(result, index)}</td></tr>`) }
+            </tbody>
+          </table>
         </div>
       </div>
+       
     `;
   }
 

diff --git a/server-jetty/src/main/js/src/lg4j-workbench.js b/server-jetty/src/main/js/src/lg4j-workbench.js
@@ -12,8 +12,6 @@ export class LG4JWorkbenchElement extends LitElement {
 
   constructor() {
     super();
-
-
   }
 
   #routeEvent( e, slot ) {
@@ -69,15 +67,17 @@ export class LG4JWorkbenchElement extends LitElement {
 
   render() {
     return html`
-<div class="grid grid-cols-2 gap-y-2 grid-rows-[60px_auto_auto_auto_auto_auto] h-screen">
-  <div class="col-span-2">
-    <div class="navbar bg-base-100">
-      <a class="btn btn-ghost text-xl">${this.title}</a>
-    </div>
-  </div>  
-  <div class="row-span-4 border border-gray-300 p-2"><slot name="graph">LEFT</slot></div>
-  <div class="row-span-5"><slot name="result">RIGHT</slot></div>
-  <div><slot name="executor">BOTTOM</slot></div>
+<div class="h-screen">
+
+  <div class="navbar bg-base-100">
+    <a class="btn btn-ghost text-xl">${this.title}</a>
+  </div>
+
+  <div class="h-full grid gap-x-2 gap-y-9 grid-cols-2 grid-rows-5 ">    
+    <div class="row-span-3 border border-gray-300"><slot name="graph">LEFT</slot></div>
+    <div class="row-span-5"><slot name="result">RIGHT</slot></div>
+    <div class=" border-slate-50"><slot name="executor">BOTTOM</slot></div>
+  </div>
 </div>
     `;
   }