chore: alex - fix linter, card min and max widths, other small formatting changes

public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx

@@ -1,10 +1,8 @@
-import { css } from '@emotion/css';
 import { memo } from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
 import { config } from '@grafana/runtime';
-import { Dropdown, IconButton, Menu, Stack, useStyles2 } from '@grafana/ui';
+import { Dropdown, IconButton, Menu, Stack } from '@grafana/ui';
 import { ExpressionQueryType } from 'app/features/expressions/types';
 
 interface AddDataItemMenuProps {
@@ -14,8 +12,6 @@ interface AddDataItemMenuProps {
 }
 
 export const AddDataItemMenu = memo(({ onAddQuery, onAddTransform, onAddExpression }: AddDataItemMenuProps) => {
-  const styles = useStyles2(getStyles);
-
   const expressionTypes = [
     { type: ExpressionQueryType.math, label: t('dashboard-scene.add-data-item-menu.expression-math', 'Math') },
     { type: ExpressionQueryType.reduce, label: t('dashboard-scene.add-data-item-menu.expression-reduce', 'Reduce') },
@@ -80,11 +76,3 @@ export const AddDataItemMenu = memo(({ onAddQuery, onAddTransform, onAddExpressi
 });
 
 AddDataItemMenu.displayName = 'AddDataItemMenu';
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    container: css({
-      width: '100%',
-    }),
-  };
-};

public/app/features/dashboard-scene/panel-edit/PanelDataPane/ConnectionLines.tsx

@@ -68,17 +68,22 @@ export function ConnectionLines({ connections }: ConnectionLinesProps) {
     return <svg ref={containerRef} className={styles.svg} />;
   }
 
-  const cardIds = new Set<string>();
+  // Helper to find card rect by refId (tries query-X and expression-X formats)
+  const findCardRect = (refId: string): DOMRect | undefined => {
+    return positions.get(`query-${refId}`) || positions.get(`expression-${refId}`);
+  };
+
+  const refIds = new Set<string>();
   connections.forEach(({ from, to }) => {
-    cardIds.add(from);
-    cardIds.add(to);
+    refIds.add(from);
+    refIds.add(to);
   });
 
-  const swimlaneX = containerRect.width - 32;
+  const swimlaneX = containerRect.width - 24;
 
   const cardPositions: number[] = [];
-  cardIds.forEach((cardId) => {
-    const cardRect = positions.get(cardId);
+  refIds.forEach((refId) => {
+    const cardRect = findCardRect(refId);
     if (cardRect) {
       cardPositions.push(cardRect.top + cardRect.height / 2 - containerRect.top);
     }
@@ -95,13 +100,13 @@ export function ConnectionLines({ connections }: ConnectionLinesProps) {
     <svg ref={containerRef} className={styles.svg}>
       <g className={styles.connectionGroup}>
         <line x1={swimlaneX} y1={minY} x2={swimlaneX} y2={maxY} className={styles.swimlane} />
-        {Array.from(cardIds).map((cardId) => {
-          const cardRect = positions.get(cardId);
+        {Array.from(refIds).map((refId) => {
+          const cardRect = findCardRect(refId);
           if (!cardRect) {
             return null;
           }
           const pointY = cardRect.top + cardRect.height / 2 - containerRect.top;
-          return <circle key={cardId} cx={swimlaneX} cy={pointY} r={4} className={styles.point} />;
+          return <circle key={refId} cx={swimlaneX} cy={pointY} r={4} className={styles.point} />;
         })}
       </g>
     </svg>

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataPane.tsx

@@ -412,14 +412,14 @@ function PanelDataPaneRendered({ model }: SceneComponentProps<PanelDataPane>) {
 
   const { containerProps, primaryProps, secondaryProps, splitterProps } = useSplitter({
     direction: 'row',
-    initialSize: 0.25,
+    initialSize: 0.01,
     handleSize: 'xs',
   });
 
   return (
     <div className={styles.dataPane} data-testid={selectors.components.PanelEditor.DataPane.content}>
       <div {...containerProps} className={cx(containerProps.className, styles.unifiedLayout)}>
-        <div {...primaryProps}>
+        <div {...primaryProps} className={cx(primaryProps.className, styles.leftPane)}>
           <QueryTransformList
             items={items}
             selectedId={effectiveSelectedId}
@@ -470,6 +470,10 @@ export function shouldShowAlertingTab(pluginId: string) {
   return isGraph || isTimeseries;
 }
 
+// Left pane sizing: card width + padding (16px left + 48px right = 64px)
+const LEFT_PANE_MIN = 180 + 64; // 244px (180px card + padding)
+const LEFT_PANE_MAX = 240 + 64; // 304px (240px card + padding)
+
 function getStyles(theme: GrafanaTheme2) {
   return {
     dataPane: css({
@@ -491,5 +495,10 @@ function getStyles(theme: GrafanaTheme2) {
       background: theme.colors.background.canvas,
       cursor: 'col-resize',
     }),
+    leftPane: css({
+      // !important to override useSplitter's inline minWidth: 'min-content'
+      minWidth: `${LEFT_PANE_MIN}px !important`,
+      maxWidth: `${LEFT_PANE_MAX}px !important`,
+    }),
   };
 }

public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformCard.tsx

@@ -87,7 +87,7 @@ export const QueryTransformCard = memo(
             <Icon name={icon} className={styles.headerIcon} />
             <span className={styles.typeLabel}>{typeLabel}</span>
           </div>
-          <Stack gap={0.5}>
+          <Stack gap={0.25}>
             {(type === 'query' || type === 'expression') && onToggleVisibility && (
               <IconButton
                 name={isHidden ? 'eye-slash' : 'eye'}
@@ -131,7 +131,7 @@ export const QueryTransformCard = memo(
 
         {/* Content: Name */}
         <div className={styles.content}>
-          <Stack direction="row" gap={1}>
+          <Stack direction="row" alignItems="center" gap={1}>
             {type === 'query' && datasourceIcon && (
               <img src={datasourceIcon} alt="" className={styles.datasourceIcon} />
             )}
@@ -158,6 +158,8 @@ const getStyles = (theme: GrafanaTheme2) => {
       overflow: 'hidden',
       background: theme.colors.background.primary,
       width: '100%',
+      minWidth: 180,
+      maxWidth: 240,
       '&:hover': {
         borderColor: theme.colors.border.strong,
       },
@@ -179,7 +181,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
-      padding: theme.spacing(1, 1.5),
+      padding: theme.spacing(0.5),
       background: theme.colors.primary.transparent,
       borderBottom: `1px solid ${theme.colors.border.weak}`,
     }),
@@ -187,7 +189,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
-      padding: theme.spacing(1, 1.5),
+      padding: theme.spacing(0.5),
       background: theme.isDark
         ? `${theme.visualization.getColorByName('orange')}20`
         : `${theme.visualization.getColorByName('orange')}15`,
@@ -197,7 +199,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
-      padding: theme.spacing(1, 1.5),
+      padding: theme.spacing(0.5),
       background: theme.isDark
         ? `${theme.visualization.getColorByName('purple')}20`
         : `${theme.visualization.getColorByName('purple')}15`,
@@ -206,7 +208,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     headerLeft: css({
       display: 'flex',
       alignItems: 'center',
-      gap: theme.spacing(1),
+      gap: theme.spacing(0.5),
       flex: 1,
       minWidth: 0,
     }),
@@ -217,10 +219,8 @@ const getStyles = (theme: GrafanaTheme2) => {
     typeLabel: css({
       fontFamily: "'CommitMono', monospace",
       fontSize: theme.typography.bodySmall.fontSize,
-      fontWeight: theme.typography.fontWeightMedium,
-      color: theme.colors.text.secondary,
+      color: theme.colors.text.maxContrast,
       textTransform: 'uppercase',
-      letterSpacing: '0.05em',
     }),
     actionButton: css({
       '&:hover': {
@@ -237,9 +237,11 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     name: css({
       fontFamily: "'CommitMono', monospace",
-      fontSize: theme.typography.body.fontSize,
-      fontWeight: theme.typography.fontWeightMedium,
-      color: theme.colors.text.primary,
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.maxContrast,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
     }),
   };
 };

public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryTransformList.tsx

@@ -174,15 +174,15 @@ export const QueryTransformList = memo(
         <div className={styles.footer}>
           <Stack direction="row" gap={1.5}>
             <span className={styles.footerStat}>
-              {stats.totalCards} {t('dashboard-scene.query-transform-list.nodes-total', 'nodes total')}
+              {stats.totalCards} {t('dashboard-scene.query-transform-list.nodes', 'nodes')}
             </span>
             <span className={styles.footerStat}>
               <Icon size="xs" name="eye" />
-              {t('dashboard-scene.query-transform-list.visible-queries', 'Visible')}: {stats.visibleQueries}
+              {stats.visibleQueries}
             </span>
             <span className={styles.footerStat}>
               <Icon size="xs" name="eye-slash" />
-              {t('dashboard-scene.query-transform-list.hidden-queries', 'Hidden')}: {stats.hiddenQueries}
+              {stats.hiddenQueries}
             </span>
           </Stack>
         </div>
@@ -211,7 +211,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'flex',
       flexDirection: 'column',
       height: '100%',
-      width: '100%',
       overflow: 'hidden',
       border: `1px solid ${theme.colors.border.weak}`,
     }),

public/locales/en-US/grafana.json

@@ -6278,9 +6278,7 @@
     },
     "query-transform-list": {
       "header": "Pipeline flow",
-      "hidden-queries": "Hidden",
-      "nodes-total": "nodes total",
-      "visible-queries": "Visible"
+      "nodes": "nodes"
     },
     "query-variable-editor-form": {
       "description-examples": "Named capture groups can be used to separate the display text and value (<1>see examples</1> ).",