tsp-1185/ fix chevron position and show tooltip for empty bias, step and sweep (#24)

This PR has changes made according to recommendation from UI team. Empty
sections (bias, step and/or sweep) are unexpanded; chevrons are disabled
with appropriate tooltip.

Author: kaur-mananjeet

script-gen-ui/src/app/components/main-sweep/main-sweep.component.html

@@ -43,15 +43,36 @@
 
     <div class="expander">
       <div style="display: flex">
-        <button
-          (click)="toggleBias()"
-          class="h3-button"
-          [attr.aria-label]="'BiasExpander'"
-        >
-          <mat-icon>{{
-            isBiasExpanded ? "expand_more" : "chevron_right"
-          }}</mat-icon>
-        </button>
+        <span style="position: relative; display: flex">
+          <button
+            (click)="toggleBias()"
+            class="button-icon"
+            [attr.aria-label]="'BiasExpander'"
+            [disabled]="!hasBiasChannels()"
+            (mouseenter)="showBiasExpanderTooltip = true"
+            (mouseleave)="showBiasExpanderTooltip = false"
+          >
+            <mat-icon>{{
+              biasChannels.length === 0
+                ? "chevron_right"
+                : isBiasExpanded
+                ? "expand_more"
+                : "chevron_right"
+            }}</mat-icon>
+            <app-tooltip
+              class="biasExpander-tooltip"
+              *ngIf="
+                !hasBiasChannels() &&
+                hasAvailableChannels() &&
+                showBiasExpanderTooltip
+              "
+              text="No bias channels. Click + to add one"
+              position="bottom"
+              [visible]="showBiasExpanderTooltip"
+            >
+            </app-tooltip>
+          </button>
+        </span>
         <h3>Bias</h3>
       </div>
       <span style="position: relative; display: flex">
@@ -65,6 +86,7 @@ <h3>Bias</h3>
         >
           <mat-icon>add</mat-icon>
           <app-tooltip
+            class="addBias-tooltip"
             *ngIf="!hasAvailableChannels() && showBiasTooltip"
             text="No channels available"
             position="bottom"
@@ -103,15 +125,36 @@ <h3>Bias</h3>
 
     <div class="expander">
       <div style="display: flex">
-        <button
-          (click)="toggleStep()"
-          class="h3-button"
-          [attr.aria-label]="'StepExpander'"
-        >
-          <mat-icon>{{
-            isStepExpanded ? "expand_more" : "chevron_right"
-          }}</mat-icon>
-        </button>
+        <span style="position: relative; display: flex">
+          <button
+            (click)="toggleStep()"
+            class="button-icon"
+            [attr.aria-label]="'StepExpander'"
+            [disabled]="!hasStepChannels()"
+            (mouseenter)="showStepExpanderTooltip = true"
+            (mouseleave)="showStepExpanderTooltip = false"
+          >
+            <mat-icon>{{
+              stepChannels.length === 0
+                ? "chevron_right"
+                : isStepExpanded
+                ? "expand_more"
+                : "chevron_right"
+            }}</mat-icon>
+            <app-tooltip
+              class="stepExpander-tooltip"
+              *ngIf="
+                !hasStepChannels() &&
+                hasAvailableChannels() &&
+                showStepExpanderTooltip
+              "
+              text="No step channels. Click + to add one"
+              position="bottom"
+              [visible]="showStepExpanderTooltip"
+            >
+            </app-tooltip>
+          </button>
+        </span>
         <h3>Step</h3>
       </div>
       <span style="position: relative; display: flex">
@@ -125,6 +168,7 @@ <h3>Step</h3>
         >
           <mat-icon>add</mat-icon>
           <app-tooltip
+            class="addStep-tooltip"
             *ngIf="!hasAvailableChannels() && showStepTooltip"
             text="No channels available"
             position="bottom"
@@ -178,15 +222,37 @@ <h3>Step</h3>
 
     <div class="expander">
       <div style="display: flex">
-        <button
-          (click)="toggleSweep()"
-          class="h3-button"
-          [attr.aria-label]="'SweepExpander'"
-        >
-          <mat-icon>{{
-            isSweepExpanded ? "expand_more" : "chevron_right"
-          }}</mat-icon>
-        </button>
+        <span style="position: relative; display: flex">
+          <button
+            (click)="toggleSweep()"
+            class="button-icon"
+            [attr.aria-label]="'SweepExpander'"
+            [disabled]="!hasSweepChannels()"
+            (mouseenter)="showSweepExpanderTooltip = true"
+            (mouseleave)="showSweepExpanderTooltip = false"
+          >
+            <mat-icon>{{
+              sweepChannels.length === 0
+                ? "chevron_right"
+                : isSweepExpanded
+                ? "expand_more"
+                : "chevron_right"
+            }}</mat-icon>
+            <app-tooltip
+              class="sweepExpander-tooltip"
+              *ngIf="
+                !hasSweepChannels() &&
+                hasAvailableChannels() &&
+                showSweepExpanderTooltip
+              "
+              text="No sweep channels. Click + to add one"
+              position="bottom"
+              [visible]="showSweepExpanderTooltip"
+            >
+            </app-tooltip>
+          </button>
+        </span>
+
         <h3>Sweep</h3>
       </div>
       <span style="position: relative; display: flex">
@@ -200,6 +266,7 @@ <h3>Sweep</h3>
         >
           <mat-icon>add</mat-icon>
           <app-tooltip
+            class="addSweep-tooltip"
             *ngIf="!hasAvailableChannels() && showSweepTooltip"
             text="No channels available"
             position="bottom"

script-gen-ui/src/app/components/main-sweep/main-sweep.component.scss

@@ -363,6 +363,25 @@ input:focus {
   }
 }
 
+.biasExpander-tooltip::ng-deep {
+  &.bottom {
+    transform: translateX(0%) translateY(1px)!important;
+  }
+}
+
+.stepExpander-tooltip::ng-deep {
+  &.bottom {
+    transform: translateX(0%) translateY(1px)!important;
+  }
+}
+
+.sweepExpander-tooltip::ng-deep {
+  &.bottom {
+    transform: translateX(0%) translateY(1px)!important;
+  }
+}
+
+
 // mat-icon {
 //   padding: 5px;
 // }

script-gen-ui/src/app/components/main-sweep/main-sweep.component.ts

@@ -108,6 +108,9 @@ export class MainSweepComponent implements OnChanges {
   showBiasTooltip = false;
   showStepTooltip = false;
   showSweepTooltip = false;
+  showBiasExpanderTooltip = false;
+  showStepExpanderTooltip = false;
+  showSweepExpanderTooltip = false;
   stepGlobalParameters: StepGlobalParameters | undefined;
   sweepGlobalParameters: SweepGlobalParameters | undefined;
 
@@ -354,6 +357,23 @@ export class MainSweepComponent implements OnChanges {
     return this.channelsExpanderState.get(uuid) || false;
   }
 
+  hasBiasChannels(): boolean {
+    return this.biasChannels.length > 0;
+  }
+
+  hasStepChannels(): boolean {
+    return this.stepChannels.length > 0;
+  }
+
+  hasSweepChannels(): boolean {
+    if (this.sweepChannels.length > 0) {
+      return true;
+    } else {
+      this.isSweepExpanded = false; // if no sweep channels, close the expander
+      return false;
+    }
+  }
+
   updateTimingConfig() {
     const sweepTimingConfig =
       this.timingComponent.getSweepTimingConfigFromComponent();