This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 34d4966d63 Enable Chart Renaming (as Alias) in Dashboard (#4051)
34d4966d63 is described below
commit 34d4966d63048b322d263cee96c94e8e7d8e1c62
Author: Jacqueline Höllig <[email protected]>
AuthorDate: Wed Dec 17 11:29:12 2025 +0100
Enable Chart Renaming (as Alias) in Dashboard (#4051)
Co-authored-by: Philipp Zehnder <[email protected]>
---
.../src/lib/model/dashboard/dashboard.model.ts | 1 +
.../src/lib/services/name-change.service.ts | 32 +++++++++++++++++++
.../streampipes/shared-ui/src/public-api.ts | 1 +
.../chart-container/chart-container.component.html | 37 +++++++++++++++++++++-
.../chart-container/chart-container.component.ts | 27 +++++++++++++++-
.../base/base-data-explorer-widget.directive.ts | 16 +++++++++-
6 files changed, 111 insertions(+), 3 deletions(-)
diff --git
a/ui/projects/streampipes/platform-services/src/lib/model/dashboard/dashboard.model.ts
b/ui/projects/streampipes/platform-services/src/lib/model/dashboard/dashboard.model.ts
index 7ae48ef399..ad7b00aae7 100644
---
a/ui/projects/streampipes/platform-services/src/lib/model/dashboard/dashboard.model.ts
+++
b/ui/projects/streampipes/platform-services/src/lib/model/dashboard/dashboard.model.ts
@@ -28,6 +28,7 @@ export interface ClientDashboardItem {
widgetType: string;
timeSettings?: TimeSettings;
id: string;
+ name?: string;
cols?: number;
rows?: number;
x: number;
diff --git
a/ui/projects/streampipes/shared-ui/src/lib/services/name-change.service.ts
b/ui/projects/streampipes/shared-ui/src/lib/services/name-change.service.ts
new file mode 100644
index 0000000000..07d5288f40
--- /dev/null
+++ b/ui/projects/streampipes/shared-ui/src/lib/services/name-change.service.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class NameChangeService {
+ public nameChangeSubject = new Subject<{
+ id: string;
+ name: string;
+ }>();
+
+ public notify(id: string, name: string): void {
+ this.nameChangeSubject.next({ id, name });
+ }
+}
diff --git a/ui/projects/streampipes/shared-ui/src/public-api.ts
b/ui/projects/streampipes/shared-ui/src/public-api.ts
index 0e0cc503e6..58d0dfb74d 100644
--- a/ui/projects/streampipes/shared-ui/src/public-api.ts
+++ b/ui/projects/streampipes/shared-ui/src/public-api.ts
@@ -71,6 +71,7 @@ export * from './lib/services/current-user.service';
export * from './lib/services/echarts-toolbox.service';
export * from './lib/services/colorization.service';
export * from './lib/services/time-selection.service';
+export * from './lib/services/name-change.service';
export * from './lib/components/asset-browser/asset-browser.service';
export * from './lib/services/date-format.service';
export * from './lib/services/pipeline-element-schema.service';
diff --git
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
index a09a4140ca..57f2f3585f 100644
---
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
+++
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.html
@@ -36,7 +36,42 @@
fxLayoutAlign="start center"
class="text-md font-bold"
>
- {{ configuredWidget.baseAppearanceConfig.widgetTitle }}
+ @if (!isEditingName) {
+ <ng-container>
+ {{
+ dashboardItem?.name ||
+ configuredWidget.baseAppearanceConfig
+ .widgetTitle
+ }}
+ @if (editMode) {
+ <button
+ mat-icon-button
+ (click)="startEditingName()"
+ >
+ <mat-icon>edit</mat-icon>
+ </button>
+ }
+ </ng-container>
+ } @else {
+ <ng-container>
+ <input
+ type="text"
+ [(ngModel)]="tempName"
+ class="name-input"
+ />
+
+ <button mat-icon-button (click)="saveName()">
+ <mat-icon>check</mat-icon>
+ </button>
+
+ <button
+ mat-icon-button
+ (click)="cancelEditingName()"
+ >
+ <mat-icon>close</mat-icon>
+ </button>
+ </ng-container>
+ }
</div>
@if (!kioskMode) {
<div fxLayout="row" fxLayoutAlign="end center">
diff --git
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
index 3e950d1acf..7f3d583185 100644
---
a/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
+++
b/ui/src/app/chart-shared/components/chart-container/chart-container.component.ts
@@ -33,6 +33,7 @@ import {
} from '@angular/core';
import {
ClientDashboardItem,
+ DashboardItem,
DataExplorerWidgetModel,
DataLakeMeasure,
ExtendedTimeSettings,
@@ -41,7 +42,7 @@ import {
TimeSelectionConstants,
TimeSettings,
} from '@streampipes/platform-services';
-import { interval, Subscription } from 'rxjs';
+import { interval, Subject, Subscription } from 'rxjs';
import { takeWhile } from 'rxjs/operators';
import { ChartRegistry } from '../../registry/chart-registry.service';
import { ChartDirective } from './chart.directive';
@@ -50,6 +51,7 @@ import { AuthService } from '../../../services/auth.service';
import { UserPrivilege } from '../../../_enums/user-privilege.enum';
import {
CurrentUserService,
+ NameChangeService,
TimeRangeSelectorMenuComponent,
TimeSelectionService,
TimeSelectorLabel,
@@ -121,6 +123,8 @@ export class ChartContainerComponent
widgetLoaded = false;
timerActive = false;
loadingTime = 0;
+ isEditingName = false;
+ tempName = '';
quickSelections: QuickTimeSelection[];
labels: TimeSelectorLabel;
@@ -157,6 +161,7 @@ export class ChartContainerComponent
private authService: AuthService,
private currentUserService: CurrentUserService,
private timeSelectionService: TimeSelectionService,
+ private nameChangeService: NameChangeService,
private el: ElementRef<HTMLDivElement>,
private resizeService: ResizeService,
) {}
@@ -434,4 +439,24 @@ export class ChartContainerComponent
this.tooltipText = `${timeString.startDate}
${timeString.startTime} - ${timeString.endDate} ${timeString.endTime}`;
}
}
+
+ startEditingName() {
+ this.tempName = this.dashboardItem?.name || '';
+ this.isEditingName = true;
+ }
+
+ saveName() {
+ if (!this.dashboardItem) return;
+ this.dashboardItem.name = this.tempName.trim();
+ this.nameChangeService.notify(
+ this.dashboardItem.id,
+ this.tempName.trim(),
+ );
+
+ this.isEditingName = false;
+ }
+
+ cancelEditingName() {
+ this.isEditingName = false;
+ }
}
diff --git
a/ui/src/app/chart-shared/components/charts/base/base-data-explorer-widget.directive.ts
b/ui/src/app/chart-shared/components/charts/base/base-data-explorer-widget.directive.ts
index ef6a4f5567..e713cde403 100644
---
a/ui/src/app/chart-shared/components/charts/base/base-data-explorer-widget.directive.ts
+++
b/ui/src/app/chart-shared/components/charts/base/base-data-explorer-widget.directive.ts
@@ -46,7 +46,10 @@ import { ChartFieldProviderService } from
'../../../services/chart-field-provide
import { catchError, switchMap } from 'rxjs/operators';
import { ChartRegistry } from '../../../registry/chart-registry.service';
import { SpFieldUpdateService } from '../../../services/field-update.service';
-import { TimeSelectionService } from '@streampipes/shared-ui';
+import {
+ NameChangeService,
+ TimeSelectionService,
+} from '@streampipes/shared-ui';
import { WidgetSize } from '../../../models/dataset.model';
@Directive()
@@ -108,6 +111,7 @@ export abstract class BaseDataExplorerWidgetDirective<
widgetConfiguration$: Subscription;
resize$: Subscription;
timeSelection$: Subscription;
+ nameChange$: Subscription;
requestQueue$: Subject<Observable<SpQueryResult>[]> = new Subject<
Observable<SpQueryResult>[]
@@ -116,6 +120,7 @@ export abstract class BaseDataExplorerWidgetDirective<
protected widgetConfigurationService = inject(ChartConfigurationService);
protected resizeService = inject(ResizeService);
protected timeSelectionService = inject(TimeSelectionService);
+ protected nameChangeService = inject(NameChangeService);
protected widgetRegistryService = inject(ChartRegistry);
protected fieldUpdateService = inject(SpFieldUpdateService);
public fieldService = inject(ChartFieldProviderService);
@@ -209,6 +214,14 @@ export abstract class BaseDataExplorerWidgetDirective<
}
},
);
+ this.nameChange$ = this.nameChangeService.nameChangeSubject.subscribe(
+ data => {
+ if (this.dataViewDashboardItem.id == data.id) {
+ this.dataViewDashboardItem.name = data.name;
+ }
+ },
+ );
+
this.updateData();
}
@@ -216,6 +229,7 @@ export abstract class BaseDataExplorerWidgetDirective<
this.widgetConfiguration$?.unsubscribe();
this.resize$?.unsubscribe();
this.timeSelection$.unsubscribe();
+ this.nameChange$.unsubscribe();
this.requestQueue$?.unsubscribe();
}
