From f0e19b246c3b94b11caca6f20a91e4e51ab69d32 Mon Sep 17 00:00:00 2001
From: Dave Shanley <dave@quobix.com>
Date: Wed, 21 Jun 2023 15:30:45 -0400
Subject: [PATCH] please release me, let me go.

because I feel another lovely patchy, oh so so!

Signed-off-by: Dave Shanley <dave@quobix.com>
---
 .../transaction/transaction-view.css.ts       | 14 ++++++++--
 .../transaction/transaction-view.ts           | 28 +++++++++++++++----
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/transaction/transaction-view.css.ts b/ui/src/components/transaction/transaction-view.css.ts
index c181cba..314bd13 100644
--- a/ui/src/components/transaction/transaction-view.css.ts
+++ b/ui/src/components/transaction/transaction-view.css.ts
@@ -85,7 +85,7 @@ export default css`
   }
   
   .chain-container {
-    background: var(--secondary-color-very-lowalpha);
+
     max-height: 300px;
     overflow-y: auto;
   }
@@ -103,7 +103,17 @@ export default css`
     background: var(--secondary-color-lowalpha);
   }
   
-  
+  .empty-data.no-chain {
+    margin-bottom: 20px;
+  }
+
+
+  .empty-data.select-chain {
+    margin-bottom: 20px;
+    color: var(--darker-font-color);
+  }
+
+
   .chain-view-container {
     border-top: 1px solid var(--secondary-color);
   }
diff --git a/ui/src/components/transaction/transaction-view.ts b/ui/src/components/transaction/transaction-view.ts
index 90c7a5f..4c6ebdd 100644
--- a/ui/src/components/transaction/transaction-view.ts
+++ b/ui/src/components/transaction/transaction-view.ts
@@ -70,6 +70,8 @@ export class HttpTransactionViewComponent extends LitElement {
     @state()
     private _currentLinks: LinkMatch[];
 
+    private _siblings: HttpTransactionItemComponent[];
+
     constructor() {
         super();
         this._requestHeadersView = new KVViewComponent();
@@ -121,9 +123,7 @@ export class HttpTransactionViewComponent extends LitElement {
     }
 
     tabSelected(event: CustomEvent) {
-        console.log('tab selected');
         this._selectedTab = event.detail.name;
-        //this.syncLinks();
     }
 
     render() {
@@ -248,7 +248,6 @@ export class HttpTransactionViewComponent extends LitElement {
         this._chainTransactionView.linkCache = this._linkCache;
         this._chainTransactionView.hideChain = true;
         this._chainTransactionView._currentLinks = [];
-        console.log('a nice meal', event.detail);
         this.requestUpdate();
     }
 
@@ -276,11 +275,30 @@ export class HttpTransactionViewComponent extends LitElement {
                 siblings.push(siblingComponent);
             }
         })
-        return html`${!hideKv? paramKVComponent: null }${siblings}${siblings.length <= 0 ? 'no more requests in chain...': null}`
+        this._siblings = siblings;
+        return html`${!hideKv? paramKVComponent: null }${siblings}${siblings.length <= 0 ? this.noOtherLinks(): null}`
     }
 
+    noOtherLinks(): TemplateResult {
+        return html`<div class="empty-data no-chain"> <sl-icon name="link-45deg" class="binary-icon"></sl-icon>
+            <br/>
+            There are no other requests in this chain yet.</div>`
+    }
 
     renderChainTabPanel(): TemplateResult {
+
+        const selectChain = () =>{
+            if (this._siblings?.length > 0) {
+                return html`
+                    <div class="empty-data select-chain">
+                        <sl-icon name="link-45deg" class="binary-icon"></sl-icon>
+                        <br/>
+                        Select a request from the chain.
+                    </div>`
+            }
+            return null;
+        }
+
         if (!this.hideChain) {
             return html`
                 <sl-tab-panel name="chain">
@@ -291,7 +309,7 @@ export class HttpTransactionViewComponent extends LitElement {
                             )}
                         </div>
                         <div class="chain-view-container">
-                            ${this._chainTransactionView}
+                            ${this._chainTransactionView? this._chainTransactionView: selectChain()}
                         </div>
                     </section>
                 </sl-tab-panel>`