Skip to content

Commit f1f7333

Browse files
RajeshwriKRajeshwari Kiwad
RajeshwriK
and
Rajeshwari Kiwad
authored
Tooltip when no channels available (#5)
Co-authored-by: Rajeshwari Kiwad <rajeshwari.kiwad@tektronix.com>
1 parent e2ec95f commit f1f7333

File tree

7 files changed

+248
-35
lines changed

7 files changed

+248
-35
lines changed

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

Lines changed: 91 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,19 @@
55
></app-banner-display>
66
</div>
77
<div class="parent-container">
8-
<div class="input-container" style="overflow: auto; max-height: 100vh; min-width: min-content">
8+
<div
9+
class="input-container"
10+
style="overflow: auto; max-height: 100vh; min-width: min-content; min-height: 40vh;"
11+
>
912
<div class="timing-autorangebox">
10-
<div [attr.aria-label]="'timingTab'">
11-
<button class="timing" (click)="enableTiming()" [attr.aria-label]="'timing'">Timing</button>
13+
<div [attr.aria-label]="'timingTab'">
14+
<button
15+
class="timing"
16+
(click)="enableTiming()"
17+
[attr.aria-label]="'timing'"
18+
>
19+
Timing
20+
</button>
1221
<app-timing
1322
*ngIf="showTiming"
1423
[sweepTimingConfig]="sweepTimingConfig"
@@ -17,24 +26,48 @@
1726
></app-timing>
1827
</div>
1928
<div>
20-
<button class="open-script" (click)="openScript()" title="Open generated script">
29+
<button
30+
class="open-script"
31+
(click)="openScript()"
32+
title="Open generated script"
33+
>
2134
Open Script
2235
</button>
2336
</div>
2437
</div>
2538

2639
<div class="expander">
2740
<div style="display: flex">
28-
<button (click)="toggleBias()" class="h3-button" [attr.aria-label]="'BiasExpander'">
41+
<button
42+
(click)="toggleBias()"
43+
class="h3-button"
44+
[attr.aria-label]="'BiasExpander'"
45+
>
2946
<mat-icon>{{
3047
isBiasExpanded ? "expand_more" : "chevron_right"
3148
}}</mat-icon>
3249
</button>
3350
<h3>Bias</h3>
3451
</div>
35-
<button class="button-icon" [attr.aria-label]="'addBias'" (click)="addBias()">
36-
<mat-icon>add</mat-icon>
37-
</button>
52+
<span style="position: relative; display: flex">
53+
<button
54+
class="button-icon"
55+
[attr.aria-label]="'addBias'"
56+
(click)="addBias()"
57+
[disabled]="!hasAvailableChannels()"
58+
(mouseenter)="showBiasTooltip = true"
59+
(mouseleave)="showBiasTooltip = false"
60+
>
61+
<mat-icon>add</mat-icon>
62+
<app-tooltip
63+
*ngIf="!hasAvailableChannels() && showBiasTooltip"
64+
text="No channels available"
65+
position="bottom"
66+
[visible]="showBiasTooltip"
67+
>
68+
</app-tooltip>
69+
</button>
70+
</span>
3871
</div>
3972
<div *ngIf="isBiasExpanded">
4073
<div *ngFor="let biasChannel of biasChannels; let i = index">
@@ -65,20 +98,36 @@ <h3>Bias</h3>
6598

6699
<div class="expander">
67100
<div style="display: flex">
68-
<button (click)="toggleStep()" class="h3-button" [attr.aria-label]="'StepExpander'">
101+
<button
102+
(click)="toggleStep()"
103+
class="h3-button"
104+
[attr.aria-label]="'StepExpander'"
105+
>
69106
<mat-icon>{{
70107
isStepExpanded ? "expand_more" : "chevron_right"
71108
}}</mat-icon>
72109
</button>
73110
<h3>Step</h3>
74111
</div>
75-
<button
76-
*ngIf="stepChannels.length === 0"
77-
class="button-icon"
78-
(click)="addStep()"
79-
>
80-
<mat-icon>add</mat-icon>
81-
</button>
112+
<span style="position: relative; display: flex">
113+
<button
114+
*ngIf="stepChannels.length === 0"
115+
class="button-icon"
116+
(click)="addStep()"
117+
[disabled]="!hasAvailableChannels()"
118+
(mouseenter)="showStepTooltip = true"
119+
(mouseleave)="showStepTooltip = false"
120+
>
121+
<mat-icon>add</mat-icon>
122+
<app-tooltip
123+
*ngIf="!hasAvailableChannels() && showStepTooltip"
124+
text="No channels available"
125+
position="bottom"
126+
[visible]="showStepTooltip"
127+
>
128+
</app-tooltip>
129+
</button>
130+
</span>
82131
</div>
83132
<div *ngIf="isStepExpanded">
84133
<div *ngFor="let stepChannel of stepChannels; let i = index">
@@ -124,16 +173,36 @@ <h3>Step</h3>
124173

125174
<div class="expander">
126175
<div style="display: flex">
127-
<button (click)="toggleSweep()" class="h3-button" [attr.aria-label]="'SweepExpander'">
176+
<button
177+
(click)="toggleSweep()"
178+
class="h3-button"
179+
[attr.aria-label]="'SweepExpander'"
180+
>
128181
<mat-icon>{{
129182
isSweepExpanded ? "expand_more" : "chevron_right"
130183
}}</mat-icon>
131184
</button>
132185
<h3>Sweep</h3>
133186
</div>
134-
<button class="button-icon" [attr.aria-label]="'addSweep'" (click)="addSweep()">
135-
<mat-icon>add</mat-icon>
136-
</button>
187+
<span style="position: relative; display: flex">
188+
<button
189+
class="button-icon"
190+
[attr.aria-label]="'addSweep'"
191+
(click)="addSweep()"
192+
[disabled]="!hasAvailableChannels()"
193+
(mouseenter)="showSweepTooltip = true"
194+
(mouseleave)="showSweepTooltip = false"
195+
>
196+
<mat-icon>add</mat-icon>
197+
<app-tooltip
198+
*ngIf="!hasAvailableChannels() && showSweepTooltip"
199+
text="No channels available"
200+
position="bottom"
201+
[visible]="showSweepTooltip"
202+
>
203+
</app-tooltip>
204+
</button>
205+
</span>
137206
</div>
138207
<div *ngIf="isSweepExpanded">
139208
<div class="input-group">
@@ -208,7 +277,8 @@ <h3>Sweep</h3>
208277
</div>
209278
</div>
210279

211-
<div class="plot-container" style="overflow: auto; max-height: 100vh;">
280+
<div class="plot-container">
281+
<!-- style="overflow: auto; max-height: 100vh" -->
212282
<app-plot-container
213283
[biasChannels]="biasChannels"
214284
[stepChannels]="stepChannels"

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

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@
113113
width: 100%;
114114
margin-bottom: 10px;
115115
background-color: black;
116-
color: #FFFFFF;
116+
color: #ffffff;
117117
border-radius: 5px;
118118
gap: 2px;
119119
}
@@ -125,7 +125,7 @@
125125
width: 100%;
126126
margin-bottom: 10px;
127127
background-color: black;
128-
color: #FFFFFF;
128+
color: #ffffff;
129129
}
130130

131131
.form-group-dropdown label {
@@ -230,7 +230,14 @@
230230
border: none;
231231
}
232232

233-
.timing-autorangebox{
233+
.button-icon:disabled,
234+
.button-icon[disabled] {
235+
// opacity: 0.3; // it is causing the tooltip to be greyed out as well
236+
color: var(--vscode-badge-background); //greying out effect when disabled
237+
cursor: not-allowed;
238+
}
239+
240+
.timing-autorangebox {
234241
display: flex;
235242
justify-content: space-between;
236243
color: var(--vscode-editor-foreground);
@@ -241,7 +248,7 @@
241248
padding-top: 7px;
242249
}
243250

244-
.timing{
251+
.timing {
245252
border-radius: 13px;
246253
background-color: transparent;
247254
color: var(--vscode-activityBarBadge-foreground);
@@ -254,28 +261,28 @@
254261
padding-right: 15px;
255262
}
256263

257-
.autorange{
264+
.autorange {
258265
display: flex;
259266
}
260267

261-
.autorange-checkbox{
268+
.autorange-checkbox {
262269
margin-right: 10px;
263270
}
264271

265-
.checkbox{
272+
.checkbox {
266273
display: flex;
267274
justify-content: space-around;
268275
}
269276

270-
.checkbox input{
277+
.checkbox input {
271278
margin-top: 4.2vh;
272279
box-sizing: border-box;
273280
// appearance: none;
274281
padding: 1.3vh;
275282
border-radius: 3px;
276283
}
277284

278-
.h3{
285+
.h3 {
279286
padding: 0;
280287
display: flex;
281288
margin-top: 8px;
@@ -311,7 +318,7 @@ input:focus {
311318
padding-right: 15px;
312319
cursor: pointer;
313320
position: relative;
314-
321+
315322
&:hover::after {
316323
content: attr(title);
317324
position: absolute;

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

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { InputNumericComponent } from '../controls/input-numeric/input-numeric.c
3737
import { ListComponent } from './list/list.component';
3838
import { BannerDisplayComponent } from './banner-display/banner-display.component';
3939
import { StatusMsg } from '../../model/sweep_data/statusMsg';
40+
import { TooltipComponent } from './tooltip/tooltip.component';
4041

4142
@Component({
4243
selector: 'app-main-sweep',
@@ -54,6 +55,7 @@ import { StatusMsg } from '../../model/sweep_data/statusMsg';
5455
PlotContainerComponent,
5556
ListComponent,
5657
BannerDisplayComponent,
58+
TooltipComponent
5759
],
5860
templateUrl: './main-sweep.component.html',
5961
styleUrls: ['./main-sweep.component.scss'],
@@ -64,7 +66,6 @@ export class MainSweepComponent implements OnChanges {
6466
@ViewChildren(SweepComponent) sweepComponents!: QueryList<SweepComponent>;
6567
@ViewChild(TimingComponent) timingComponent!: TimingComponent;
6668
@ViewChild(PlotContainerComponent) plotContainer!: PlotContainerComponent;
67-
6869
biasChannels: BiasChannel[] = [];
6970
stepChannels: StepChannel[] = [];
7071
sweepChannels: SweepChannel[] = [];
@@ -104,6 +105,9 @@ export class MainSweepComponent implements OnChanges {
104105
sweepTimingConfig: SweepTimingConfig | undefined;
105106
showList = false; //Sweep list popup box
106107
deviceList: Device[] = [];
108+
showBiasTooltip = false;
109+
showStepTooltip = false;
110+
showSweepTooltip = false;
107111
stepGlobalParameters: StepGlobalParameters | undefined;
108112
sweepGlobalParameters: SweepGlobalParameters | undefined;
109113

@@ -325,6 +329,11 @@ export class MainSweepComponent implements OnChanges {
325329
// this.buildListSweep(); //the sweepchannels is not updated yet, so the list will not be updated
326330
}
327331

332+
hasAvailableChannels(): boolean {
333+
if (!this.deviceList) return false;
334+
return this.deviceList.some((device) => !device.in_use && device.is_valid);
335+
}
336+
328337
toggleBias() {
329338
this.isBiasExpanded = !this.isBiasExpanded;
330339
}
@@ -360,12 +369,12 @@ export class MainSweepComponent implements OnChanges {
360369
const ipcData = new IpcData({
361370
request_type: 'open_script',
362371
additional_info: '',
363-
json_value: '{}'
372+
json_value: '{}',
364373
});
365-
374+
366375
// Convert to JSON string
367376
const message = JSON.stringify(ipcData);
368-
377+
369378
// Send request via WebSocket service
370379
this.webSocketService.send(message);
371380
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<span
2+
class="tooltip-content"
3+
[ngClass]="position"
4+
*ngIf="visible"
5+
>
6+
{{ text }}
7+
</span>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.tooltip-content {
2+
position: absolute;
3+
/* z-index: 1000; */
4+
background: var(--vscode-button-secondaryHoverBackground);
5+
color: var(--vscode-activityBarBadge-foreground);
6+
padding: 6px 12px;
7+
border-radius: 4px;
8+
font-size: smaller;
9+
white-space: nowrap;
10+
pointer-events: none;
11+
/* box-shadow: 0 2px 8px #0003; */
12+
display: block !important;
13+
opacity: 1 !important;
14+
&.bottom {
15+
top: 70%;
16+
transform: translateX(-75%) translateY(1px);
17+
}
18+
&.top {
19+
left: 10%;
20+
bottom: 100%;
21+
transform: translateX(-75%) translateY(-1px);
22+
}
23+
&.left {
24+
right: 10%;
25+
top: 50%;
26+
transform: translateY(-50%) translateX(-75%);
27+
}
28+
&.right {
29+
left: 10%;
30+
top: 50%;
31+
transform: translateY(-50%) translateX(75%);
32+
}
33+
}

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { TooltipComponent } from './tooltip.component';
4+
5+
describe('TooltipComponent', () => {
6+
let component: TooltipComponent;
7+
let fixture: ComponentFixture<TooltipComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
imports: [TooltipComponent]
12+
})
13+
.compileComponents();
14+
15+
fixture = TestBed.createComponent(TooltipComponent);
16+
component = fixture.componentInstance;
17+
fixture.detectChanges();
18+
});
19+
20+
it('should create', () => {
21+
expect(component).toBeTruthy();
22+
});
23+
});

0 commit comments

Comments
 (0)