diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx
index 9210909ff31..82a0aae520f 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/DetailViewHeader.tsx
@@ -1,7 +1,13 @@
import { css, cx } from '@emotion/css';
import { useCallback, useMemo, useState } from 'react';
-import { CoreApp, DataQuery, DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
+import {
+ CoreApp,
+ DataQuery,
+ DataSourceInstanceSettings,
+ GrafanaTheme2,
+ standardTransformersRegistry,
+} from '@grafana/data';
import { t } from '@grafana/i18n';
import { getDataSourceSrv } from '@grafana/runtime';
import { VizPanel } from '@grafana/scenes';
@@ -247,6 +253,16 @@ export const DetailViewHeader = ({ selectedItem, panel }: DetailViewHeaderProps)
'hide' in selectedItem.data &&
selectedItem.data.hide;
+ // Get transformation display name
+ const transformationName = useMemo(() => {
+ if (selectedItem.type === 'transform' && 'id' in selectedItem.data) {
+ const transformId = selectedItem.data.id;
+ const transformer = standardTransformersRegistry.get(transformId);
+ return transformer?.name || transformId;
+ }
+ return '';
+ }, [selectedItem]);
+
return (
@@ -264,6 +280,11 @@ export const DetailViewHeader = ({ selectedItem, panel }: DetailViewHeaderProps)
/>
)}
+ {/* Transformation name */}
+ {selectedItem.type === 'transform' && transformationName && (
+ {transformationName}
+ )}
+
{/* Editable query/expression name */}
{(selectedItem.type === 'query' || selectedItem.type === 'expression') && refId && (
<>
@@ -345,15 +366,15 @@ export const DetailViewHeader = ({ selectedItem, panel }: DetailViewHeaderProps)
const getStyles = (theme: GrafanaTheme2, config: { color: string }) => {
return {
header: css({
- padding: theme.spacing(1, 2),
+ padding: theme.spacing(1.5, 2),
borderLeft: `4px solid ${config.color}`,
borderBottom: `1px solid ${theme.colors.border.weak}`,
background: theme.colors.background.secondary,
- minHeight: theme.spacing(6),
}),
icon: css({
color: theme.colors.text.secondary,
fontSize: theme.typography.h5.fontSize,
+ lineHeight: 1,
}),
queryNameWrapper: css({
display: 'flex',
@@ -399,5 +420,10 @@ const getStyles = (theme: GrafanaTheme2, config: { color: string }) => {
maxWidth: '300px',
margin: '-4px 0',
}),
+ transformName: css({
+ fontWeight: theme.typography.fontWeightMedium,
+ color: theme.colors.text.primary,
+ fontSize: theme.typography.body.fontSize,
+ }),
};
};
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
index 41e1844d7cb..7f3e04f8c8a 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx
@@ -81,8 +81,6 @@ export const QueryTransformList = memo(
}
});
- console.log('Detected connections:', conns);
-
return conns;
}, [items]);