From f9d01f4439f55fff367e046f89762e66fe7d5e99 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Thu, 12 Mar 2026 13:14:08 +0000
Subject: [PATCH] rename "widget" and "chart" to "panel" in dashboard UI and
 analytics

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../dashboard-view.component.html             | 22 +++++++++----------
 .../dashboard-view.component.ts               | 12 +++++-----
 .../panel-delete-dialog.component.ts          |  4 ++--
 .../panel-edit-dialog.component.html          |  4 ++--
 .../panel-edit-dialog.component.ts            |  8 +++----
 .../text-panel/text-panel.component.html      |  2 +-
 6 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html
index 5da6d863e..5f1b52ad9 100644
--- a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html
+++ b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html
@@ -3,7 +3,7 @@
 <div class="dashboard-view-page">
     <div class="dashboard-header">
         <div class="header-left">
-            <button mat-icon-button (click)="navigateBack()" matTooltip="Back to dashboards">
+            <button type="button" mat-icon-button (click)="navigateBack()" matTooltip="Back to dashboards">
                 <mat-icon>arrow_back</mat-icon>
             </button>
             <div class="header-info">
@@ -22,11 +22,11 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
                     data-testid="edit-mode-toggle">
                     Edit mode
                 </mat-slide-toggle>
-                <button mat-flat-button color="primary"
+                <button type="button" mat-flat-button color="primary"
                     (click)="openAddPanelDialog()"
                     data-testid="add-panel-button">
                     <mat-icon>add</mat-icon>
-                    Add chart
+                    Add panel
                 </button>
             </div>
         }
@@ -41,11 +41,11 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
     @if (!loading() && gridsterItems().length === 0) {
         <div class="no-panels">
             <mat-icon class="no-panels-icon">bar_chart</mat-icon>
-            <h3>No charts yet</h3>
-            <p>Add charts to visualize your data from saved queries.</p>
-            <button mat-flat-button color="primary" (click)="openAddPanelDialog()">
+            <h3>No panels yet</h3>
+            <p>Add panels to visualize your data from saved queries.</p>
+            <button type="button" mat-flat-button color="primary" (click)="openAddPanelDialog()">
                 <mat-icon>add</mat-icon>
-                Add chart
+                Add panel
             </button>
         </div>
     }
@@ -56,19 +56,19 @@ <h3>No charts yet</h3>
                 <gridster-item [item]="item" class="panel-item" [class.edit-mode]="editMode()">
                     <div class="panel-header">
                         <span class="panel-title">{{ panelRef.savedQuery()?.name || 'Loading...' }}</span>
-                        <button mat-icon-button [matMenuTriggerFor]="panelMenu" class="panel-menu-button">
+                        <button type="button" mat-icon-button [matMenuTriggerFor]="panelMenu" class="panel-menu-button">
                             <mat-icon>more_vert</mat-icon>
                         </button>
                         <mat-menu #panelMenu="matMenu">
                             <a mat-menu-item [routerLink]="['/panels', connectionId(), item.widget.query_id]">
                                 <mat-icon>tune</mat-icon>
-                                <span>Configure chart</span>
+                                <span>Configure panel</span>
                             </a>
-                            <button mat-menu-item (click)="openEditPanelDialog(item.widget)">
+                            <button type="button" mat-menu-item (click)="openEditPanelDialog(item.widget)">
                                 <mat-icon>swap_horiz</mat-icon>
                                 <span>Change query</span>
                             </button>
-                            <button mat-menu-item (click)="openDeletePanelDialog(item.widget)" class="delete-action">
+                            <button type="button" mat-menu-item (click)="openDeletePanelDialog(item.widget)" class="delete-action">
                                 <mat-icon color="warn">delete</mat-icon>
                                 <span>Delete</span>
                             </button>
diff --git a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts
index 71a8d2594..96d4b2dd9 100644
--- a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts
+++ b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts
@@ -191,9 +191,9 @@ export class DashboardViewComponent implements OnInit {
 			},
 		});
 		this.angulartics2.eventTrack.next({
-			action: 'Dashboards: add widget dialog opened',
+			action: 'Dashboards: add panel dialog opened',
 		});
-		posthog.capture('Dashboards: add widget dialog opened');
+		posthog.capture('Dashboards: add panel dialog opened');
 
 		const result = await dialogRef.afterClosed().toPromise();
 		if (result) {
@@ -211,9 +211,9 @@ export class DashboardViewComponent implements OnInit {
 			},
 		});
 		this.angulartics2.eventTrack.next({
-			action: 'Dashboards: edit widget dialog opened',
+			action: 'Dashboards: edit panel dialog opened',
 		});
-		posthog.capture('Dashboards: edit widget dialog opened');
+		posthog.capture('Dashboards: edit panel dialog opened');
 
 		const result = await dialogRef.afterClosed().toPromise();
 		if (result) {
@@ -231,9 +231,9 @@ export class DashboardViewComponent implements OnInit {
 			},
 		});
 		this.angulartics2.eventTrack.next({
-			action: 'Dashboards: delete widget dialog opened',
+			action: 'Dashboards: delete panel dialog opened',
 		});
-		posthog.capture('Dashboards: delete widget dialog opened');
+		posthog.capture('Dashboards: delete panel dialog opened');
 
 		const result = await dialogRef.afterClosed().toPromise();
 		if (result) {
diff --git a/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts
index db4262de3..d6e7417ba 100644
--- a/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts
+++ b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts
@@ -34,9 +34,9 @@ export class PanelDeleteDialogComponent {
 		);
 		if (result) {
 			this.angulartics2.eventTrack.next({
-				action: 'Dashboards: widget deleted successfully',
+				action: 'Dashboards: panel deleted successfully',
 			});
-			posthog.capture('Dashboards: widget deleted successfully');
+			posthog.capture('Dashboards: panel deleted successfully');
 			this.dialogRef.close(true);
 		}
 		this.submitting.set(false);
diff --git a/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html
index a5a1bd559..23b4d494e 100644
--- a/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html
+++ b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add chart' }}</h2>
+    <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add panel' }}</h2>
 
     <mat-dialog-content>
         @if (savedQueries().length > 0) {
@@ -27,7 +27,7 @@ <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add chart' }}</h2>
             <div class="no-queries-message">
                 <mat-icon class="no-queries-icon">code</mat-icon>
                 <h3>No saved queries yet</h3>
-                <p>Create a saved query first to add it as a chart on this dashboard.</p>
+                <p>Create a saved query first to add it as a panel on this dashboard.</p>
                 <a mat-stroked-button color="primary"
                     [routerLink]="['/panels', data.connectionId, 'new']"
                     (click)="dialogRef.close()">
diff --git a/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts
index d215601c6..9f4c889ae 100644
--- a/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts
+++ b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts
@@ -79,9 +79,9 @@ export class PanelEditDialogComponent implements OnInit {
 			);
 			if (result) {
 				this.angulartics2.eventTrack.next({
-					action: 'Dashboards: widget updated successfully',
+					action: 'Dashboards: panel updated successfully',
 				});
-				posthog.capture('Dashboards: widget updated successfully');
+				posthog.capture('Dashboards: panel updated successfully');
 				this.dialogRef.close(true);
 			}
 		} else {
@@ -96,9 +96,9 @@ export class PanelEditDialogComponent implements OnInit {
 			const result = await this._dashboards.createWidget(this.data.connectionId, this.data.dashboardId, payload);
 			if (result) {
 				this.angulartics2.eventTrack.next({
-					action: 'Dashboards: widget created successfully',
+					action: 'Dashboards: panel created successfully',
 				});
-				posthog.capture('Dashboards: widget created successfully');
+				posthog.capture('Dashboards: panel created successfully');
 				this.dialogRef.close(true);
 			}
 		}
diff --git a/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html
index f3c41da3c..c2380e8ce 100644
--- a/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html
+++ b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html
@@ -5,6 +5,6 @@
 } @else {
     <div class="no-content-container">
         <p>No content</p>
-        <p class="hint">Edit this widget to add text content.</p>
+        <p class="hint">Edit this panel to add text content.</p>
     </div>
 }