Merge branch 'main' into fastfrwrd/gauge-neutral

Snapshots: Support public snapshot instance in latest version (#116086 )
unified-storage: dont use polling notifier with sqlite in sqlkv (#116283 )
2026-01-14 13:32:57 -05:00 · 2026-01-14 15:28:16 -03:00 · 2026-01-14 18:22:39 +00:00 · 2026-01-14 17:59:03 +00:00 · 2026-01-14 18:33:55 +01:00 · 2026-01-14 12:12:33 -05:00
34 changed files with 1218 additions and 280 deletions
@@ -31,6 +31,7 @@ export interface Options extends common.SingleStatBaseOptions {
  endpointMarker?: ('point' | 'glow' | 'none');
  minVizHeight: number;
  minVizWidth: number;
+  neutral?: number;
  segmentCount: number;
  segmentSpacing: number;
  shape: ('circle' | 'gauge');
@@ -117,6 +117,44 @@ export const MyComponent = () => {
 };
 ```

+### Custom Header Rendering
+
+Column headers can be customized using strings, React elements, or renderer functions. The `header` property accepts any value that matches React Table's `Renderer` type.
+
+**Important:** When using custom header content, prefer inline elements (like `<span>`) over block elements (like `<div>`) to avoid layout issues. Block-level elements can cause extra spacing and alignment problems in table headers because they disrupt the table's inline flow. Use `display: inline-flex` or `display: inline-block` when you need flexbox or block-like behavior.
+
+```tsx
+const columns: Array<Column<TableData>> = [
+  // React element header
+  {
+    id: 'checkbox',
+    header: (
+      <>
+        <label htmlFor="select-all" className="sr-only">
+          Select all rows
+        </label>
+        <Checkbox id="select-all" />
+      </>
+    ),
+    cell: () => <Checkbox aria-label="Select row" />,
+  },
+
+  // Function renderer header
+  {
+    id: 'firstName',
+    header: () => (
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+        <Icon name="user" size="sm" />
+        <span>First Name</span>
+      </span>
+    ),
+  },
+
+  // String header
+  { id: 'lastName', header: 'Last name' },
+];
+```
+
 ### Custom Cell Rendering

 Individual cells can be rendered using custom content dy defining a `cell` property on the column definition.
@@ -3,8 +3,11 @@ import { useCallback, useMemo, useState } from 'react';
 import { CellProps } from 'react-table';

 import { LinkButton } from '../Button/Button';
+import { Checkbox } from '../Forms/Checkbox';
 import { Field } from '../Forms/Field';
+import { Icon } from '../Icon/Icon';
 import { Input } from '../Input/Input';
+import { Text } from '../Text/Text';

 import { FetchDataArgs, InteractiveTable, InteractiveTableHeaderTooltip } from './InteractiveTable';
 import mdx from './InteractiveTable.mdx';
@@ -297,4 +300,40 @@ export const WithControlledSort: StoryFn<typeof InteractiveTable> = (args) => {
  return <InteractiveTable {...args} data={data} pageSize={15} fetchData={fetchData} />;
 };

+export const WithCustomHeader: TableStoryObj = {
+  args: {
+    columns: [
+      // React element header
+      {
+        id: 'checkbox',
+        header: (
+          <>
+            <label htmlFor="select-all" className="sr-only">
+              Select all rows
+            </label>
+            <Checkbox id="select-all" />
+          </>
+        ),
+        cell: () => <Checkbox aria-label="Select row" />,
+      },
+      // Function renderer header
+      {
+        id: 'firstName',
+        header: () => (
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+            <Icon name="user" size="sm" />
+            <Text element="span">First Name</Text>
+          </span>
+        ),
+        sortType: 'string',
+      },
+      // String header
+      { id: 'lastName', header: 'Last name', sortType: 'string' },
+      { id: 'car', header: 'Car', sortType: 'string' },
+      { id: 'age', header: 'Age', sortType: 'number' },
+    ],
+    data: pageableData.slice(0, 10),
+    getRowId: (r) => r.id,
+  },
+};
 export default meta;
@@ -2,6 +2,9 @@ import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';

+import { Checkbox } from '../Forms/Checkbox';
+import { Icon } from '../Icon/Icon';
+
 import { InteractiveTable } from './InteractiveTable';
 import { Column } from './types';

@@ -247,4 +250,104 @@ describe('InteractiveTable', () => {
      expect(fetchData).toHaveBeenCalledWith({ sortBy: [{ id: 'id', desc: false }] });
    });
  });
+
+  describe('custom header rendering', () => {
+    it('should render string headers', () => {
+      const columns: Array<Column<TableData>> = [{ id: 'id', header: 'ID' }];
+      const data: TableData[] = [{ id: '1', value: '1', country: 'Sweden' }];
+      render(<InteractiveTable columns={columns} data={data} getRowId={getRowId} />);
+
+      expect(screen.getByRole('columnheader', { name: 'ID' })).toBeInTheDocument();
+    });
+
+    it('should render React element headers', () => {
+      const columns: Array<Column<TableData>> = [
+        {
+          id: 'checkbox',
+          header: (
+            <>
+              <label htmlFor="select-all" className="sr-only">
+                Select all rows
+              </label>
+              <Checkbox id="select-all" data-testid="header-checkbox" />
+            </>
+          ),
+          cell: () => <Checkbox data-testid="cell-checkbox" aria-label="Select row" />,
+        },
+      ];
+      const data: TableData[] = [{ id: '1', value: '1', country: 'Sweden' }];
+      render(<InteractiveTable columns={columns} data={data} getRowId={getRowId} />);
+
+      expect(screen.getByTestId('header-checkbox')).toBeInTheDocument();
+      expect(screen.getByTestId('cell-checkbox')).toBeInTheDocument();
+      expect(screen.getByLabelText('Select all rows')).toBeInTheDocument();
+      expect(screen.getByLabelText('Select row')).toBeInTheDocument();
+      expect(screen.getByText('Select all rows')).toBeInTheDocument();
+    });
+
+    it('should render function renderer headers', () => {
+      const columns: Array<Column<TableData>> = [
+        {
+          id: 'firstName',
+          header: () => (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+              <Icon name="user" size="sm" data-testid="header-icon" />
+              <span>First Name</span>
+            </span>
+          ),
+          sortType: 'string',
+        },
+      ];
+      const data: TableData[] = [{ id: '1', value: '1', country: 'Sweden' }];
+      render(<InteractiveTable columns={columns} data={data} getRowId={getRowId} />);
+
+      expect(screen.getByTestId('header-icon')).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: /first name/i })).toBeInTheDocument();
+    });
+
+    it('should render all header types together', () => {
+      const columns: Array<Column<TableData>> = [
+        {
+          id: 'checkbox',
+          header: (
+            <>
+              <label htmlFor="select-all" className="sr-only">
+                Select all rows
+              </label>
+              <Checkbox id="select-all" data-testid="header-checkbox" />
+            </>
+          ),
+          cell: () => <Checkbox aria-label="Select row" />,
+        },
+        {
+          id: 'id',
+          header: () => (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
+              <Icon name="user" size="sm" data-testid="header-icon" />
+              <span>ID</span>
+            </span>
+          ),
+          sortType: 'string',
+        },
+        { id: 'country', header: 'Country', sortType: 'string' },
+        { id: 'value', header: 'Value' },
+      ];
+      const data: TableData[] = [
+        { id: '1', value: 'Value 1', country: 'Sweden' },
+        { id: '2', value: 'Value 2', country: 'Norway' },
+      ];
+      render(<InteractiveTable columns={columns} data={data} getRowId={getRowId} />);
+
+      expect(screen.getByTestId('header-checkbox')).toBeInTheDocument();
+      expect(screen.getByTestId('header-icon')).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Country' })).toBeInTheDocument();
+      expect(screen.getByRole('columnheader', { name: 'Value' })).toBeInTheDocument();
+
+      // Verify data is rendered
+      expect(screen.getByText('Sweden')).toBeInTheDocument();
+      expect(screen.getByText('Norway')).toBeInTheDocument();
+      expect(screen.getByText('Value 1')).toBeInTheDocument();
+      expect(screen.getByText('Value 2')).toBeInTheDocument();
+    });
+  });
 });
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { CellProps, DefaultSortTypes, IdType, SortByFn } from 'react-table';
+import { CellProps, DefaultSortTypes, HeaderProps, IdType, Renderer, SortByFn } from 'react-table';

 export interface Column<TableData extends object> {
  /**
@@ -11,9 +11,9 @@ export interface Column<TableData extends object> {
   */
  cell?: (props: CellProps<TableData>) => ReactNode;
  /**
-   * Header name. if `undefined` the header will be empty. Useful for action columns.
+   * Header name. Can be a string, renderer function, or undefined. If `undefined` the header will be empty. Useful for action columns.
   */
-  header?: string;
+  header?: Renderer<HeaderProps<TableData>>;
  /**
   * Column sort type. If `undefined` the column will not be sortable.
   * */
@@ -1,4 +1,6 @@
-import { FALLBACK_COLOR, FieldDisplay } from '@grafana/data';
+import { useMemo } from 'react';
+
+import { colorManipulator, FALLBACK_COLOR, FieldDisplay } from '@grafana/data';

 import { useTheme2 } from '../../themes/ThemeContext';

@@ -6,7 +8,6 @@ import { RadialArcPath } from './RadialArcPath';
 import { RadialShape, RadialGaugeDimensions, GradientStop } from './types';

 export interface RadialBarProps {
-  angle: number;
  angleRange: number;
  dimensions: RadialGaugeDimensions;
  fieldDisplay: FieldDisplay;
@@ -15,11 +16,12 @@ export interface RadialBarProps {
  endpointMarker?: 'point' | 'glow';
  shape: RadialShape;
  startAngle: number;
+  startValueAngle: number;
+  endValueAngle: number;
  glowFilter?: string;
  endpointMarkerGlowFilter?: string;
 }
 export function RadialBar({
-  angle,
  angleRange,
  dimensions,
  fieldDisplay,
@@ -28,26 +30,45 @@ export function RadialBar({
  endpointMarker,
  shape,
  startAngle,
+  startValueAngle,
+  endValueAngle,
  glowFilter,
  endpointMarkerGlowFilter,
 }: RadialBarProps) {
  const theme = useTheme2();
  const colorProps = gradient ? { gradient } : { color: fieldDisplay.display.color ?? FALLBACK_COLOR };
+  const trackColor = useMemo(
+    () => colorManipulator.onBackground(theme.colors.action.hover, theme.colors.background.primary).toHexString(),
+    [theme]
+  );
+
  return (
    <>
-      {/** Track */}
+      {/** Track before value */}
+      {startValueAngle !== 0 && (
+        <RadialArcPath
+          arcLengthDeg={startValueAngle}
+          fieldDisplay={fieldDisplay}
+          color={trackColor}
+          dimensions={dimensions}
+          roundedBars={roundedBars}
+          shape={shape}
+          startAngle={startAngle}
+        />
+      )}
+      {/** Track after value */}
      <RadialArcPath
-        arcLengthDeg={angleRange - angle}
+        arcLengthDeg={angleRange - endValueAngle - startValueAngle}
        fieldDisplay={fieldDisplay}
-        color={theme.colors.action.hover}
+        color={trackColor}
        dimensions={dimensions}
        roundedBars={roundedBars}
        shape={shape}
-        startAngle={startAngle + angle}
+        startAngle={startAngle + startValueAngle + endValueAngle}
      />
      {/** The colored bar */}
      <RadialArcPath
-        arcLengthDeg={angle}
+        arcLengthDeg={endValueAngle}
        barEndcaps={shape === 'circle' && roundedBars}
        dimensions={dimensions}
        endpointMarker={roundedBars ? endpointMarker : undefined}
@@ -56,7 +77,7 @@ export function RadialBar({
        glowFilter={glowFilter}
        roundedBars={roundedBars}
        shape={shape}
-        startAngle={startAngle}
+        startAngle={startAngle + startValueAngle}
        {...colorProps}
      />
    </>
@@ -11,6 +11,7 @@ import {
  getFieldConfigMinMax,
  getFieldDisplayProcessor,
  getOptimalSegmentCount,
+  getValuePercentageForValue,
 } from './utils';

 export interface RadialBarSegmentedProps {
@@ -18,6 +19,8 @@ export interface RadialBarSegmentedProps {
  dimensions: RadialGaugeDimensions;
  angleRange: number;
  startAngle: number;
+  startValueAngle: number;
+  endValueAngle: number;
  glowFilter?: string;
  segmentCount: number;
  segmentSpacing: number;
@@ -36,22 +39,24 @@ export const RadialBarSegmented = memo(
    segmentCount,
    segmentSpacing,
    shape,
+    startValueAngle,
+    endValueAngle,
  }: RadialBarSegmentedProps) => {
    const theme = useTheme2();
    const segments: React.ReactNode[] = [];
    const segmentCountAdjusted = getOptimalSegmentCount(dimensions, segmentSpacing, segmentCount, angleRange);
    const [min, max] = getFieldConfigMinMax(fieldDisplay);
-    const value = fieldDisplay.display.numeric;
    const angleBetweenSegments = getAngleBetweenSegments(segmentSpacing, segmentCount, angleRange);
    const segmentArcLengthDeg = angleRange / segmentCountAdjusted - angleBetweenSegments;
    const displayProcessor = getFieldDisplayProcessor(fieldDisplay);

    for (let i = 0; i < segmentCountAdjusted; i++) {
-      const angleValue = min + ((max - min) / segmentCountAdjusted) * i;
-      const segmentAngle = startAngle + (angleRange / segmentCountAdjusted) * i + 0.01;
-      const segmentColor =
-        angleValue >= value ? theme.colors.border.medium : (displayProcessor(angleValue).color ?? FALLBACK_COLOR);
-      const colorProps = angleValue < value && gradient ? { gradient } : { color: segmentColor };
+      const value = min + ((max - min) / segmentCountAdjusted) * i;
+      const segmentAngle = getValuePercentageForValue(fieldDisplay, value) * angleRange;
+      const isTrack = segmentAngle < startValueAngle || segmentAngle >= startValueAngle + endValueAngle;
+      const segmentStartAngle = startAngle + (angleRange / segmentCountAdjusted) * i + 0.01;
+      const segmentColor = isTrack ? theme.colors.border.medium : (displayProcessor(value).color ?? FALLBACK_COLOR);
+      const colorProps = !isTrack && gradient ? { gradient } : { color: segmentColor };

      segments.push(
        <RadialArcPath
@@ -61,7 +66,7 @@ export const RadialBarSegmented = memo(
          fieldDisplay={fieldDisplay}
          glowFilter={glowFilter}
          shape={shape}
-          startAngle={segmentAngle}
+          startAngle={segmentStartAngle}
          {...colorProps}
        />
      );
@@ -50,6 +50,7 @@ const meta: Meta<StoryProps> = {
    thresholdsBar: false,
    colorScheme: FieldColorModeId.Thresholds,
    decimals: 0,
+    neutral: undefined,
  },
  argTypes: {
    barWidthFactor: { control: { type: 'range', min: 0.1, max: 1, step: 0.01 } },
@@ -75,6 +76,7 @@ const meta: Meta<StoryProps> = {
      ],
    },
    decimals: { control: { type: 'range', min: 0, max: 7 } },
+    neutral: { control: { type: 'number' } },
  },
 };

@@ -270,6 +272,23 @@ export const Examples: StoryFn<StoryProps> = (args) => {
          barWidthFactor={0.7}
        />
      </Stack>
+      <div>
+        Neutral <em>(range -50 to 50, neutral = 0)</em>
+      </div>
+      <Stack direction={'row'} gap={3}>
+        <RadialGaugeExample
+          min={-50}
+          max={50}
+          value={-20}
+          colorScheme={FieldColorModeId.Thresholds}
+          gradient
+          shape="gauge"
+          glowCenter={true}
+          roundedBars={false}
+          barWidthFactor={0.7}
+          neutral={0}
+        />
+      </Stack>
    </Stack>
  );
 };
@@ -330,6 +349,7 @@ interface ExampleProps {
  endpointMarker?: RadialGaugeProps['endpointMarker'];
  decimals?: number;
  showScaleLabels?: boolean;
+  neutral?: number;
 }

 export function RadialGaugeExample({
@@ -357,6 +377,7 @@ export function RadialGaugeExample({
  endpointMarker = 'glow',
  decimals = 0,
  showScaleLabels,
+  neutral,
 }: ExampleProps) {
  const theme = useTheme2();

@@ -442,6 +463,7 @@ export function RadialGaugeExample({
      thresholdsBar={thresholdsBar}
      showScaleLabels={showScaleLabels}
      endpointMarker={endpointMarker}
+      neutral={neutral}
    />
  );
 }
@@ -16,6 +16,7 @@ describe('RadialGauge', () => {
    { description: 'with endpoint marker point', props: { roundedBars: true, endpointMarker: 'point' } },
    { description: 'with thresholds bar', props: { thresholdsBar: true } },
    { description: 'with sparkline', props: { sparkline: true } },
+    { description: 'with neutral value', props: { neutral: 50 } },
  ] satisfies Array<{ description: string; props?: ComponentProps<typeof RadialGaugeExample> }>)(
    'should render $description without throwing',
    ({ props }) => {
@@ -67,6 +67,11 @@ export interface RadialGaugeProps {
  /** Specify which text should be visible  */
  textMode?: RadialTextMode;
  showScaleLabels?: boolean;
+  /**
+   * If set, the gauge will use the neutral value instead of the min value as the starting point for a gauge.
+   * this is most useful when you need to show positive and negative values on a gauge.
+   */
+  neutral?: number;
  /** For data links */
  onClick?: React.MouseEventHandler<HTMLElement>;
  timeRange?: TimeRange;
@@ -91,6 +96,7 @@ export function RadialGauge(props: RadialGaugeProps) {
    roundedBars = true,
    thresholdsBar = false,
    showScaleLabels = false,
+    neutral,
    endpointMarker,
    onClick,
    values,
@@ -113,7 +119,13 @@ export function RadialGauge(props: RadialGaugeProps) {

  for (let barIndex = 0; barIndex < values.length; barIndex++) {
    const displayValue = values[barIndex];
-    const { angle, angleRange } = getValueAngleForValue(displayValue, startAngle, endAngle);
+    const { startValueAngle, endValueAngle, angleRange } = getValueAngleForValue(
+      displayValue,
+      startAngle,
+      endAngle,
+      neutral
+    );
+
    const gradientStops = gradient ? buildGradientColors(theme, displayValue) : undefined;
    const color = displayValue.display.color ?? FALLBACK_COLOR;
    const dimensions = calculateDimensions(
@@ -140,7 +152,7 @@ export function RadialGauge(props: RadialGaugeProps) {
        <SpotlightGradient
          key={spotlightGradientId}
          id={spotlightGradientId}
-          angle={angle + startAngle}
+          angle={endValueAngle + startAngle}
          dimensions={dimensions}
          roundedBars={roundedBars}
          theme={theme}
@@ -156,6 +168,8 @@ export function RadialGauge(props: RadialGaugeProps) {
          fieldDisplay={displayValue}
          angleRange={angleRange}
          startAngle={startAngle}
+          startValueAngle={startValueAngle}
+          endValueAngle={endValueAngle}
          glowFilter={glowFilterRef}
          segmentCount={segmentCount}
          segmentSpacing={segmentSpacing}
@@ -168,9 +182,10 @@ export function RadialGauge(props: RadialGaugeProps) {
        <RadialBar
          key={`radial-bar-${barIndex}-${gaugeId}`}
          dimensions={dimensions}
-          angle={angle}
          angleRange={angleRange}
          startAngle={startAngle}
+          startValueAngle={startValueAngle}
+          endValueAngle={endValueAngle}
          roundedBars={roundedBars}
          glowFilter={glowFilterRef}
          endpointMarkerGlowFilter={spotlightGradientRef}
@@ -233,7 +233,8 @@ describe('RadialGauge utils', () => {
      const fieldDisplay = createFieldDisplay(50, 0, 100);
      const result = getValueAngleForValue(fieldDisplay, 0, 360);

-      expect(result.angle).toBe(180); // 50% of 360°
+      expect(result.startValueAngle).toBe(0);
+      expect(result.endValueAngle).toBe(180); // 50% of 360°
      expect(result.angleRange).toBe(360);
    });

@@ -241,7 +242,8 @@ describe('RadialGauge utils', () => {
      const fieldDisplay = createFieldDisplay(50, 0, 100);
      const result = getValueAngleForValue(fieldDisplay, 90, 270);

-      expect(result.angle).toBe(135); // 50% of 360° range
+      expect(result.startValueAngle).toBe(0);
+      expect(result.endValueAngle).toBe(135); // 50% of 360° range
      expect(result.angleRange).toBe(270);
    });

@@ -249,28 +251,28 @@ describe('RadialGauge utils', () => {
      const fieldDisplay = createFieldDisplay(150, 0, 100); // value exceeds max
      const result = getValueAngleForValue(fieldDisplay, 0, 360);

-      expect(result.angle).toBe(360); // clamped to angleRange
+      expect(result.endValueAngle).toBe(360); // clamped to angleRange
    });

    it('should handle minimum values', () => {
      const fieldDisplay = createFieldDisplay(0, 0, 100);
      const result = getValueAngleForValue(fieldDisplay, 0, 360);

-      expect(result.angle).toBe(0);
+      expect(result.endValueAngle).toBe(0);
    });

    it('should handle maximum values', () => {
      const fieldDisplay = createFieldDisplay(100, 0, 100);
      const result = getValueAngleForValue(fieldDisplay, 0, 360);

-      expect(result.angle).toBe(360);
+      expect(result.endValueAngle).toBe(360);
    });

    it('should handle values lower than min', () => {
      const fieldDisplay = createFieldDisplay(-50, 0, 100);
      const result = getValueAngleForValue(fieldDisplay, 240, 120);

-      expect(result.angle).toBe(0);
+      expect(result.endValueAngle).toBe(0);
    });

    it('should handle values higher than max', () => {
@@ -278,7 +280,39 @@ describe('RadialGauge utils', () => {
      const result = getValueAngleForValue(fieldDisplay, 240, 120);

      // Expect the angle to be clamped to the maximum range
-      expect(result.angle).toBe(240);
+      expect(result.endValueAngle).toBe(240);
+    });
+
+    it('should handle neutral values', () => {
+      const fieldDisplay = createFieldDisplay(75, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, 50);
+
+      expect(result.startValueAngle).toBe(180); // Neutral at 50% of 360°
+      expect(result.endValueAngle).toBe(90); // 75% - 50% = 25% of 360°
+    });
+
+    it('should handle neutral values equal to value', () => {
+      const fieldDisplay = createFieldDisplay(50, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, 50);
+
+      expect(result.startValueAngle).toBe(180); // Neutral at 50% of 360°
+      expect(result.endValueAngle).toBe(0); // No difference
+    });
+
+    it('should handle neutral values greater than value', () => {
+      const fieldDisplay = createFieldDisplay(25, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, 150);
+
+      expect(result.startValueAngle).toBe(90);
+      expect(result.endValueAngle).toBe(270); // remaining angle to 360
+    });
+
+    it('should handle neutral values below range', () => {
+      const fieldDisplay = createFieldDisplay(25, 0, 100);
+      const result = getValueAngleForValue(fieldDisplay, 0, 360, -50);
+
+      expect(result.startValueAngle).toBe(0);
+      expect(result.endValueAngle).toBe(90);
    });
  });

@@ -28,19 +28,32 @@ export function getValueAngleForValue(
  fieldDisplay: FieldDisplay,
  startAngle: number,
  endAngle: number,
-  value = fieldDisplay.display.numeric
+  neutral?: number
 ) {
  const angleRange = (360 % (startAngle === 0 ? 1 : startAngle)) + endAngle;
+  const value = fieldDisplay.display.numeric;

-  let angle = getValuePercentageForValue(fieldDisplay, value) * angleRange;
+  const valueAngle = getValuePercentageForValue(fieldDisplay, value) * angleRange;

-  if (angle > angleRange) {
-    angle = angleRange;
-  } else if (angle < 0) {
-    angle = 0;
+  let endValueAngle = valueAngle;
+
+  let startValueAngle = 0;
+  if (typeof neutral === 'number') {
+    const [min, max] = getFieldConfigMinMax(fieldDisplay);
+    const clampedNeutral = Math.min(Math.max(min, neutral), max);
+    const neutralAngle = getValuePercentageForValue(fieldDisplay, clampedNeutral) * angleRange;
+    if (neutralAngle <= valueAngle) {
+      startValueAngle = neutralAngle;
+      endValueAngle = valueAngle - neutralAngle;
+    } else {
+      startValueAngle = valueAngle;
+      endValueAngle = neutralAngle - valueAngle;
+    }
  }

-  return { angleRange, angle };
+  const clampedEndValueAngle = Math.min(Math.max(endValueAngle, 0), angleRange);
+
+  return { angleRange, startValueAngle, endValueAngle: clampedEndValueAngle };
 }

 /**
@@ -76,21 +76,27 @@ func (hs *HTTPServer) CreateDashboardSnapshot(c *contextmodel.ReqContext) {
 		return
 	}

-	// Do not check permissions when the instance snapshot public mode is enabled
-	if !hs.Cfg.SnapshotPublicMode {
-		evaluator := ac.EvalAll(ac.EvalPermission(dashboards.ActionSnapshotsCreate), ac.EvalPermission(dashboards.ActionDashboardsRead, dashboards.ScopeDashboardsProvider.GetResourceScopeUID(cmd.Dashboard.GetNestedString("uid"))))
-		if canSave, err := hs.AccessControl.Evaluate(c.Req.Context(), c.SignedInUser, evaluator); err != nil || !canSave {
-			c.JsonApiErr(http.StatusForbidden, "forbidden", err)
-			return
-		}
-	}
-
-	dashboardsnapshots.CreateDashboardSnapshot(c, snapshot.SnapshotSharingOptions{
+	cfg := snapshot.SnapshotSharingOptions{
 		SnapshotsEnabled:     hs.Cfg.SnapshotEnabled,
 		ExternalEnabled:      hs.Cfg.ExternalEnabled,
 		ExternalSnapshotName: hs.Cfg.ExternalSnapshotName,
 		ExternalSnapshotURL:  hs.Cfg.ExternalSnapshotUrl,
-	}, cmd, hs.dashboardsnapshotsService)
+	}
+
+	if hs.Cfg.SnapshotPublicMode {
+		// Public mode: no user or dashboard validation needed
+		dashboardsnapshots.CreateDashboardSnapshotPublic(c, cfg, cmd, hs.dashboardsnapshotsService)
+		return
+	}
+
+	// Regular mode: check permissions
+	evaluator := ac.EvalAll(ac.EvalPermission(dashboards.ActionSnapshotsCreate), ac.EvalPermission(dashboards.ActionDashboardsRead, dashboards.ScopeDashboardsProvider.GetResourceScopeUID(cmd.Dashboard.GetNestedString("uid"))))
+	if canSave, err := hs.AccessControl.Evaluate(c.Req.Context(), c.SignedInUser, evaluator); err != nil || !canSave {
+		c.JsonApiErr(http.StatusForbidden, "forbidden", err)
+		return
+	}
+
+	dashboardsnapshots.CreateDashboardSnapshot(c, cfg, cmd, hs.dashboardsnapshotsService)
 }

 // GET /api/snapshots/:key
@@ -213,13 +219,6 @@ func (hs *HTTPServer) DeleteDashboardSnapshot(c *contextmodel.ReqContext) respon
 		return response.Error(http.StatusUnauthorized, "OrgID mismatch", nil)
 	}

-	if queryResult.External {
-		err := dashboardsnapshots.DeleteExternalDashboardSnapshot(queryResult.ExternalDeleteURL)
-		if err != nil {
-			return response.Error(http.StatusInternalServerError, "Failed to delete external dashboard", err)
-		}
-	}
-
 	// Dashboard can be empty (creation error or external snapshot). This means that the mustInt here returns a 0,
 	// which before RBAC would result in a dashboard which has no ACL. A dashboard without an ACL would fallback
 	// to the user’s org role, which for editors and admins would essentially always be allowed here. With RBAC,
@@ -239,6 +238,13 @@ func (hs *HTTPServer) DeleteDashboardSnapshot(c *contextmodel.ReqContext) respon
 		}
 	}

+	if queryResult.External {
+		err := dashboardsnapshots.DeleteExternalDashboardSnapshot(queryResult.ExternalDeleteURL)
+		if err != nil {
+			return response.Error(http.StatusInternalServerError, "Failed to delete external dashboard", err)
+		}
+	}
+
 	cmd := &dashboardsnapshots.DeleteDashboardSnapshotCommand{DeleteKey: queryResult.DeleteKey}

 	if err := hs.dashboardsnapshotsService.DeleteDashboardSnapshot(c.Req.Context(), cmd); err != nil {
@@ -36,6 +36,9 @@ var client = &http.Client{
 	Transport: &http.Transport{Proxy: http.ProxyFromEnvironment},
 }

+// CreateDashboardSnapshot creates a snapshot when running Grafana in regular mode.
+// It validates the user and dashboard exist before creating the snapshot.
+// This mode supports both local and external snapshots.
 func CreateDashboardSnapshot(c *contextmodel.ReqContext, cfg snapshot.SnapshotSharingOptions, cmd CreateDashboardSnapshotCommand, svc Service) {
 	if !cfg.SnapshotsEnabled {
 		c.JsonApiErr(http.StatusForbidden, "Dashboard Snapshots are disabled", nil)
@@ -43,6 +46,7 @@ func CreateDashboardSnapshot(c *contextmodel.ReqContext, cfg snapshot.SnapshotSh
 	}

 	uid := cmd.Dashboard.GetNestedString("uid")
+
 	user, err := identity.GetRequester(c.Req.Context())
 	if err != nil {
 		c.JsonApiErr(http.StatusBadRequest, "missing user in context", nil)
@@ -59,21 +63,18 @@ func CreateDashboardSnapshot(c *contextmodel.ReqContext, cfg snapshot.SnapshotSh
 		return
 	}

+	cmd.ExternalURL = ""
+	cmd.OrgID = user.GetOrgID()
+	cmd.UserID, _ = identity.UserIdentifier(user.GetID())
+
 	if cmd.Name == "" {
 		cmd.Name = "Unnamed snapshot"
 	}

-	var snapshotUrl string
-	cmd.ExternalURL = ""
-	cmd.OrgID = user.GetOrgID()
-	cmd.UserID, _ = identity.UserIdentifier(user.GetID())
-	originalDashboardURL, err := createOriginalDashboardURL(&cmd)
-	if err != nil {
-		c.JsonApiErr(http.StatusInternalServerError, "Invalid app URL", err)
-		return
-	}
+	var snapshotURL string

 	if cmd.External {
+		// Handle external snapshot creation
 		if !cfg.ExternalEnabled {
 			c.JsonApiErr(http.StatusForbidden, "External dashboard creation is disabled", nil)
 			return
@@ -85,40 +86,83 @@ func CreateDashboardSnapshot(c *contextmodel.ReqContext, cfg snapshot.SnapshotSh
 			return
 		}

-		snapshotUrl = resp.Url
 		cmd.Key = resp.Key
 		cmd.DeleteKey = resp.DeleteKey
 		cmd.ExternalURL = resp.Url
 		cmd.ExternalDeleteURL = resp.DeleteUrl
 		cmd.Dashboard = &common.Unstructured{}
+		snapshotURL = resp.Url

 		metrics.MApiDashboardSnapshotExternal.Inc()
 	} else {
-		cmd.Dashboard.SetNestedField(originalDashboardURL, "snapshot", "originalUrl")
-
-		if cmd.Key == "" {
-			var err error
-			cmd.Key, err = util.GetRandomString(32)
-			if err != nil {
-				c.JsonApiErr(http.StatusInternalServerError, "Could not generate random string", err)
-				return
-			}
+		// Handle local snapshot creation
+		originalDashboardURL, err := createOriginalDashboardURL(&cmd)
+		if err != nil {
+			c.JsonApiErr(http.StatusInternalServerError, "Invalid app URL", err)
+			return
 		}

-		if cmd.DeleteKey == "" {
-			var err error
-			cmd.DeleteKey, err = util.GetRandomString(32)
-			if err != nil {
-				c.JsonApiErr(http.StatusInternalServerError, "Could not generate random string", err)
-				return
-			}
+		snapshotURL, err = prepareLocalSnapshot(&cmd, originalDashboardURL)
+		if err != nil {
+			c.JsonApiErr(http.StatusInternalServerError, "Could not generate random string", err)
+			return
 		}

-		snapshotUrl = setting.ToAbsUrl("dashboard/snapshot/" + cmd.Key)
-
 		metrics.MApiDashboardSnapshotCreate.Inc()
 	}

+	saveAndRespond(c, svc, cmd, snapshotURL)
+}
+
+// CreateDashboardSnapshotPublic creates a snapshot when running Grafana in public mode.
+// In public mode, there is no user or dashboard information to validate.
+// Only local snapshots are supported (external snapshots are not available).
+func CreateDashboardSnapshotPublic(c *contextmodel.ReqContext, cfg snapshot.SnapshotSharingOptions, cmd CreateDashboardSnapshotCommand, svc Service) {
+	if !cfg.SnapshotsEnabled {
+		c.JsonApiErr(http.StatusForbidden, "Dashboard Snapshots are disabled", nil)
+		return
+	}
+
+	if cmd.Name == "" {
+		cmd.Name = "Unnamed snapshot"
+	}
+
+	snapshotURL, err := prepareLocalSnapshot(&cmd, "")
+	if err != nil {
+		c.JsonApiErr(http.StatusInternalServerError, "Could not generate random string", err)
+		return
+	}
+
+	metrics.MApiDashboardSnapshotCreate.Inc()
+
+	saveAndRespond(c, svc, cmd, snapshotURL)
+}
+
+// prepareLocalSnapshot prepares the command for a local snapshot and returns the snapshot URL.
+func prepareLocalSnapshot(cmd *CreateDashboardSnapshotCommand, originalDashboardURL string) (string, error) {
+	cmd.Dashboard.SetNestedField(originalDashboardURL, "snapshot", "originalUrl")
+
+	if cmd.Key == "" {
+		key, err := util.GetRandomString(32)
+		if err != nil {
+			return "", err
+		}
+		cmd.Key = key
+	}
+
+	if cmd.DeleteKey == "" {
+		deleteKey, err := util.GetRandomString(32)
+		if err != nil {
+			return "", err
+		}
+		cmd.DeleteKey = deleteKey
+	}
+
+	return setting.ToAbsUrl("dashboard/snapshot/" + cmd.Key), nil
+}
+
+// saveAndRespond saves the snapshot and sends the response.
+func saveAndRespond(c *contextmodel.ReqContext, svc Service, cmd CreateDashboardSnapshotCommand, snapshotURL string) {
 	result, err := svc.CreateDashboardSnapshot(c.Req.Context(), &cmd)
 	if err != nil {
 		c.JsonApiErr(http.StatusInternalServerError, "Failed to create snapshot", err)
@@ -128,7 +172,7 @@ func CreateDashboardSnapshot(c *contextmodel.ReqContext, cfg snapshot.SnapshotSh
 	c.JSON(http.StatusOK, snapshot.DashboardCreateResponse{
 		Key:       result.Key,
 		DeleteKey: result.DeleteKey,
-		URL:       snapshotUrl,
+		URL:       snapshotURL,
 		DeleteURL: setting.ToAbsUrl("api/snapshots-delete/" + result.DeleteKey),
 	})
 }
@@ -20,40 +20,30 @@ import (
 	"github.com/grafana/grafana/pkg/web"
 )

-func TestCreateDashboardSnapshot_DashboardNotFound(t *testing.T) {
-	mockService := &MockService{}
-	cfg := snapshot.SnapshotSharingOptions{
-		SnapshotsEnabled: true,
-		ExternalEnabled:  false,
+func createTestDashboard(t *testing.T) *common.Unstructured {
+	t.Helper()
+	dashboard := &common.Unstructured{}
+	dashboardData := map[string]any{
+		"uid": "test-dashboard-uid",
+		"id":  123,
 	}
-	testUser := &user.SignedInUser{
+	dashboardBytes, _ := json.Marshal(dashboardData)
+	_ = json.Unmarshal(dashboardBytes, dashboard)
+	return dashboard
+}
+
+func createTestUser() *user.SignedInUser {
+	return &user.SignedInUser{
 		UserID: 1,
 		OrgID:  1,
 		Login:  "testuser",
 		Name:   "Test User",
 		Email:  "test@example.com",
 	}
-	dashboard := &common.Unstructured{}
-	dashboardData := map[string]interface{}{
-		"uid": "test-dashboard-uid",
-		"id":  123,
-	}
-	dashboardBytes, _ := json.Marshal(dashboardData)
-	_ = json.Unmarshal(dashboardBytes, dashboard)
-
-	cmd := CreateDashboardSnapshotCommand{
-		DashboardCreateCommand: snapshot.DashboardCreateCommand{
-			Dashboard: dashboard,
-			Name:      "Test Snapshot",
-		},
-	}
-
-	mockService.On("ValidateDashboardExists", mock.Anything, int64(1), "test-dashboard-uid").
-		Return(dashboards.ErrDashboardNotFound)
-
-	req, _ := http.NewRequest("POST", "/api/snapshots", nil)
-	req = req.WithContext(identity.WithRequester(req.Context(), testUser))
+}

+func createReqContext(t *testing.T, req *http.Request, testUser *user.SignedInUser) (*contextmodel.ReqContext, *httptest.ResponseRecorder) {
+	t.Helper()
 	recorder := httptest.NewRecorder()
 	ctx := &contextmodel.ReqContext{
 		Context: &web.Context{
@@ -63,13 +53,319 @@ func TestCreateDashboardSnapshot_DashboardNotFound(t *testing.T) {
 		SignedInUser: testUser,
 		Logger:       log.NewNopLogger(),
 	}
-
-	CreateDashboardSnapshot(ctx, cfg, cmd, mockService)
-
-	mockService.AssertExpectations(t)
-	assert.Equal(t, http.StatusBadRequest, recorder.Code)
-	var response map[string]interface{}
-	err := json.Unmarshal(recorder.Body.Bytes(), &response)
-	require.NoError(t, err)
-	assert.Equal(t, "Dashboard not found", response["message"])
+	return ctx, recorder
+}
+
+// TestCreateDashboardSnapshot tests snapshot creation in regular mode (non-public instance).
+// These tests cover scenarios when Grafana is running as a regular server with user authentication.
+func TestCreateDashboardSnapshot(t *testing.T) {
+	t.Run("should return error when dashboard not found", func(t *testing.T) {
+		mockService := &MockService{}
+		cfg := snapshot.SnapshotSharingOptions{
+			SnapshotsEnabled: true,
+			ExternalEnabled:  false,
+		}
+		testUser := createTestUser()
+		dashboard := createTestDashboard(t)
+
+		cmd := CreateDashboardSnapshotCommand{
+			DashboardCreateCommand: snapshot.DashboardCreateCommand{
+				Dashboard: dashboard,
+				Name:      "Test Snapshot",
+			},
+		}
+
+		mockService.On("ValidateDashboardExists", mock.Anything, int64(1), "test-dashboard-uid").
+			Return(dashboards.ErrDashboardNotFound)
+
+		req, _ := http.NewRequest("POST", "/api/snapshots", nil)
+		req = req.WithContext(identity.WithRequester(req.Context(), testUser))
+		ctx, recorder := createReqContext(t, req, testUser)
+
+		CreateDashboardSnapshot(ctx, cfg, cmd, mockService)
+
+		mockService.AssertExpectations(t)
+		assert.Equal(t, http.StatusBadRequest, recorder.Code)
+		var response map[string]any
+		err := json.Unmarshal(recorder.Body.Bytes(), &response)
+		require.NoError(t, err)
+		assert.Equal(t, "Dashboard not found", response["message"])
+	})
+
+	t.Run("should create external snapshot when external is enabled", func(t *testing.T) {
+		externalServer := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			assert.Equal(t, "/api/snapshots", r.URL.Path)
+			assert.Equal(t, "POST", r.Method)
+
+			response := map[string]any{
+				"key":       "external-key",
+				"deleteKey": "external-delete-key",
+				"url":       "https://external.example.com/dashboard/snapshot/external-key",
+				"deleteUrl": "https://external.example.com/api/snapshots-delete/external-delete-key",
+			}
+			w.Header().Set("Content-Type", "application/json")
+			_ = json.NewEncoder(w).Encode(response)
+		}))
+		defer externalServer.Close()
+
+		mockService := NewMockService(t)
+		cfg := snapshot.SnapshotSharingOptions{
+			SnapshotsEnabled:    true,
+			ExternalEnabled:     true,
+			ExternalSnapshotURL: externalServer.URL,
+		}
+		testUser := createTestUser()
+		dashboard := createTestDashboard(t)
+
+		cmd := CreateDashboardSnapshotCommand{
+			DashboardCreateCommand: snapshot.DashboardCreateCommand{
+				Dashboard: dashboard,
+				Name:      "Test External Snapshot",
+				External:  true,
+			},
+		}
+
+		mockService.On("ValidateDashboardExists", mock.Anything, int64(1), "test-dashboard-uid").
+			Return(nil)
+		mockService.On("CreateDashboardSnapshot", mock.Anything, mock.Anything).
+			Return(&DashboardSnapshot{
+				Key:       "external-key",
+				DeleteKey: "external-delete-key",
+			}, nil)
+
+		req, _ := http.NewRequest("POST", "/api/snapshots", nil)
+		req = req.WithContext(identity.WithRequester(req.Context(), testUser))
+		ctx, recorder := createReqContext(t, req, testUser)
+
+		CreateDashboardSnapshot(ctx, cfg, cmd, mockService)
+
+		mockService.AssertExpectations(t)
+		assert.Equal(t, http.StatusOK, recorder.Code)
+
+		var response map[string]any
+		err := json.Unmarshal(recorder.Body.Bytes(), &response)
+		require.NoError(t, err)
+		assert.Equal(t, "external-key", response["key"])
+		assert.Equal(t, "external-delete-key", response["deleteKey"])
+		assert.Equal(t, "https://external.example.com/dashboard/snapshot/external-key", response["url"])
+	})
+
+	t.Run("should return forbidden when external is disabled", func(t *testing.T) {
+		mockService := NewMockService(t)
+		cfg := snapshot.SnapshotSharingOptions{
+			SnapshotsEnabled: true,
+			ExternalEnabled:  false,
+		}
+		testUser := createTestUser()
+		dashboard := createTestDashboard(t)
+
+		cmd := CreateDashboardSnapshotCommand{
+			DashboardCreateCommand: snapshot.DashboardCreateCommand{
+				Dashboard: dashboard,
+				Name:      "Test External Snapshot",
+				External:  true,
+			},
+		}
+
+		mockService.On("ValidateDashboardExists", mock.Anything, int64(1), "test-dashboard-uid").
+			Return(nil)
+
+		req, _ := http.NewRequest("POST", "/api/snapshots", nil)
+		req = req.WithContext(identity.WithRequester(req.Context(), testUser))
+		ctx, recorder := createReqContext(t, req, testUser)
+
+		CreateDashboardSnapshot(ctx, cfg, cmd, mockService)
+
+		mockService.AssertExpectations(t)
+		assert.Equal(t, http.StatusForbidden, recorder.Code)
+
+		var response map[string]any
+		err := json.Unmarshal(recorder.Body.Bytes(), &response)
+		require.NoError(t, err)
+		assert.Equal(t, "External dashboard creation is disabled", response["message"])
+	})
+
+	t.Run("should create local snapshot", func(t *testing.T) {
+		mockService := NewMockService(t)
+		cfg := snapshot.SnapshotSharingOptions{
+			SnapshotsEnabled: true,
+		}
+		testUser := createTestUser()
+		dashboard := createTestDashboard(t)
+
+		cmd := CreateDashboardSnapshotCommand{
+			DashboardCreateCommand: snapshot.DashboardCreateCommand{
+				Dashboard: dashboard,
+				Name:      "Test Local Snapshot",
+			},
+			Key:       "local-key",
+			DeleteKey: "local-delete-key",
+		}
+
+		mockService.On("ValidateDashboardExists", mock.Anything, int64(1), "test-dashboard-uid").
+			Return(nil)
+		mockService.On("CreateDashboardSnapshot", mock.Anything, mock.Anything).
+			Return(&DashboardSnapshot{
+				Key:       "local-key",
+				DeleteKey: "local-delete-key",
+			}, nil)
+
+		req, _ := http.NewRequest("POST", "/api/snapshots", nil)
+		req = req.WithContext(identity.WithRequester(req.Context(), testUser))
+		ctx, recorder := createReqContext(t, req, testUser)
+
+		CreateDashboardSnapshot(ctx, cfg, cmd, mockService)
+
+		mockService.AssertExpectations(t)
+		assert.Equal(t, http.StatusOK, recorder.Code)
+
+		var response map[string]any
+		err := json.Unmarshal(recorder.Body.Bytes(), &response)
+		require.NoError(t, err)
+		assert.Equal(t, "local-key", response["key"])
+		assert.Equal(t, "local-delete-key", response["deleteKey"])
+		assert.Contains(t, response["url"], "dashboard/snapshot/local-key")
+		assert.Contains(t, response["deleteUrl"], "api/snapshots-delete/local-delete-key")
+	})
+}
+
+// TestCreateDashboardSnapshotPublic tests snapshot creation in public mode.
+// These tests cover scenarios when Grafana is running as a public snapshot server
+// where no user authentication or dashboard validation is required.
+func TestCreateDashboardSnapshotPublic(t *testing.T) {
+	t.Run("should create local snapshot without user context", func(t *testing.T) {
+		mockService := NewMockService(t)
+		cfg := snapshot.SnapshotSharingOptions{
+			SnapshotsEnabled: true,
+		}
+		dashboard := createTestDashboard(t)
+
+		cmd := CreateDashboardSnapshotCommand{
+			DashboardCreateCommand: snapshot.DashboardCreateCommand{
+				Dashboard: dashboard,
+				Name:      "Test Snapshot",
+			},
+			Key:       "test-key",
+			DeleteKey: "test-delete-key",
+		}
+
+		mockService.On("CreateDashboardSnapshot", mock.Anything, mock.Anything).
+			Return(&DashboardSnapshot{
+				Key:       "test-key",
+				DeleteKey: "test-delete-key",
+			}, nil)
+
+		req, _ := http.NewRequest("POST", "/api/snapshots", nil)
+		recorder := httptest.NewRecorder()
+		ctx := &contextmodel.ReqContext{
+			Context: &web.Context{
+				Req:  req,
+				Resp: web.NewResponseWriter("POST", recorder),
+			},
+			Logger: log.NewNopLogger(),
+		}
+
+		CreateDashboardSnapshotPublic(ctx, cfg, cmd, mockService)
+
+		mockService.AssertExpectations(t)
+		assert.Equal(t, http.StatusOK, recorder.Code)
+
+		var response map[string]any
+		err := json.Unmarshal(recorder.Body.Bytes(), &response)
+		require.NoError(t, err)
+		assert.Equal(t, "test-key", response["key"])
+		assert.Equal(t, "test-delete-key", response["deleteKey"])
+		assert.Contains(t, response["url"], "dashboard/snapshot/test-key")
+		assert.Contains(t, response["deleteUrl"], "api/snapshots-delete/test-delete-key")
+	})
+
+	t.Run("should return forbidden when snapshots are disabled", func(t *testing.T) {
+		mockService := NewMockService(t)
+		cfg := snapshot.SnapshotSharingOptions{
+			SnapshotsEnabled: false,
+		}
+		dashboard := createTestDashboard(t)
+
+		cmd := CreateDashboardSnapshotCommand{
+			DashboardCreateCommand: snapshot.DashboardCreateCommand{
+				Dashboard: dashboard,
+				Name:      "Test Snapshot",
+			},
+		}
+
+		req, _ := http.NewRequest("POST", "/api/snapshots", nil)
+		recorder := httptest.NewRecorder()
+		ctx := &contextmodel.ReqContext{
+			Context: &web.Context{
+				Req:  req,
+				Resp: web.NewResponseWriter("POST", recorder),
+			},
+			Logger: log.NewNopLogger(),
+		}
+
+		CreateDashboardSnapshotPublic(ctx, cfg, cmd, mockService)
+
+		assert.Equal(t, http.StatusForbidden, recorder.Code)
+
+		var response map[string]any
+		err := json.Unmarshal(recorder.Body.Bytes(), &response)
+		require.NoError(t, err)
+		assert.Equal(t, "Dashboard Snapshots are disabled", response["message"])
+	})
+}
+
+// TestDeleteExternalDashboardSnapshot tests deletion of external snapshots.
+// This function is called in public mode and doesn't require user context.
+func TestDeleteExternalDashboardSnapshot(t *testing.T) {
+	t.Run("should return nil on successful deletion", func(t *testing.T) {
+		server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			assert.Equal(t, "GET", r.Method)
+			w.WriteHeader(http.StatusOK)
+		}))
+		defer server.Close()
+
+		err := DeleteExternalDashboardSnapshot(server.URL)
+		assert.NoError(t, err)
+	})
+
+	t.Run("should gracefully handle already deleted snapshot", func(t *testing.T) {
+		server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			w.WriteHeader(http.StatusInternalServerError)
+			response := map[string]any{
+				"message": "Failed to get dashboard snapshot",
+			}
+			_ = json.NewEncoder(w).Encode(response)
+		}))
+		defer server.Close()
+
+		err := DeleteExternalDashboardSnapshot(server.URL)
+		assert.NoError(t, err)
+	})
+
+	t.Run("should return error on unexpected status code", func(t *testing.T) {
+		server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			w.WriteHeader(http.StatusNotFound)
+		}))
+		defer server.Close()
+
+		err := DeleteExternalDashboardSnapshot(server.URL)
+		assert.Error(t, err)
+		assert.Contains(t, err.Error(), "unexpected response when deleting external snapshot")
+		assert.Contains(t, err.Error(), "404")
+	})
+
+	t.Run("should return error on 500 with different message", func(t *testing.T) {
+		server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			w.WriteHeader(http.StatusInternalServerError)
+			response := map[string]any{
+				"message": "Some other error",
+			}
+			_ = json.NewEncoder(w).Encode(response)
+		}))
+		defer server.Close()
+
+		err := DeleteExternalDashboardSnapshot(server.URL)
+		assert.Error(t, err)
+		assert.Contains(t, err.Error(), "500")
+	})
 }
@@ -19,13 +19,18 @@ const (
 	defaultBufferSize     = 10000
 )

-type notifier struct {
+type notifier interface {
+	Watch(context.Context, watchOptions) <-chan Event
+}
+
+type pollingNotifier struct {
 	eventStore *eventStore
 	log        logging.Logger
 }

 type notifierOptions struct {
-	log logging.Logger
+	log                logging.Logger
+	useChannelNotifier bool
 }

 type watchOptions struct {
@@ -44,15 +49,26 @@ func defaultWatchOptions() watchOptions {
 	}
 }

-func newNotifier(eventStore *eventStore, opts notifierOptions) *notifier {
+func newNotifier(eventStore *eventStore, opts notifierOptions) notifier {
 	if opts.log == nil {
 		opts.log = &logging.NoOpLogger{}
 	}
-	return &notifier{eventStore: eventStore, log: opts.log}
+
+	if opts.useChannelNotifier {
+		return &channelNotifier{}
+	}
+
+	return &pollingNotifier{eventStore: eventStore, log: opts.log}
+}
+
+type channelNotifier struct{}
+
+func (cn *channelNotifier) Watch(ctx context.Context, opts watchOptions) <-chan Event {
+	return nil
 }

 // Return the last resource version from the event store
-func (n *notifier) lastEventResourceVersion(ctx context.Context) (int64, error) {
+func (n *pollingNotifier) lastEventResourceVersion(ctx context.Context) (int64, error) {
 	e, err := n.eventStore.LastEventKey(ctx)
 	if err != nil {
 		return 0, err
@@ -60,11 +76,11 @@ func (n *notifier) lastEventResourceVersion(ctx context.Context) (int64, error)
 	return e.ResourceVersion, nil
 }

-func (n *notifier) cacheKey(evt Event) string {
+func (n *pollingNotifier) cacheKey(evt Event) string {
 	return fmt.Sprintf("%s~%s~%s~%s~%d", evt.Namespace, evt.Group, evt.Resource, evt.Name, evt.ResourceVersion)
 }

-func (n *notifier) Watch(ctx context.Context, opts watchOptions) <-chan Event {
+func (n *pollingNotifier) Watch(ctx context.Context, opts watchOptions) <-chan Event {
 	if opts.MinBackoff <= 0 {
 		opts.MinBackoff = defaultMinBackoff
 	}
@@ -13,7 +13,7 @@ import (
 	"github.com/stretchr/testify/require"
 )

-func setupTestNotifier(t *testing.T) (*notifier, *eventStore) {
+func setupTestNotifier(t *testing.T) (*pollingNotifier, *eventStore) {
 	db := setupTestBadgerDB(t)
 	t.Cleanup(func() {
 		err := db.Close()
@@ -22,10 +22,10 @@ func setupTestNotifier(t *testing.T) (*notifier, *eventStore) {
 	kv := NewBadgerKV(db)
 	eventStore := newEventStore(kv)
 	notifier := newNotifier(eventStore, notifierOptions{log: &logging.NoOpLogger{}})
-	return notifier, eventStore
+	return notifier.(*pollingNotifier), eventStore
 }

-func setupTestNotifierSqlKv(t *testing.T) (*notifier, *eventStore) {
+func setupTestNotifierSqlKv(t *testing.T) (*pollingNotifier, *eventStore) {
 	dbstore := db.InitTestDB(t)
 	eDB, err := dbimpl.ProvideResourceDB(dbstore, setting.NewCfg(), nil)
 	require.NoError(t, err)
@@ -33,7 +33,7 @@ func setupTestNotifierSqlKv(t *testing.T) (*notifier, *eventStore) {
 	require.NoError(t, err)
 	eventStore := newEventStore(kv)
 	notifier := newNotifier(eventStore, notifierOptions{log: &logging.NoOpLogger{}})
-	return notifier, eventStore
+	return notifier.(*pollingNotifier), eventStore
 }

 func TestNewNotifier(t *testing.T) {
@@ -49,7 +49,7 @@ func TestDefaultWatchOptions(t *testing.T) {
 	assert.Equal(t, defaultBufferSize, opts.BufferSize)
 }

-func runNotifierTestWith(t *testing.T, storeName string, newStoreFn func(*testing.T) (*notifier, *eventStore), testFn func(*testing.T, context.Context, *notifier, *eventStore)) {
+func runNotifierTestWith(t *testing.T, storeName string, newStoreFn func(*testing.T) (*pollingNotifier, *eventStore), testFn func(*testing.T, context.Context, *pollingNotifier, *eventStore)) {
 	t.Run(storeName, func(t *testing.T) {
 		ctx := context.Background()
 		notifier, eventStore := newStoreFn(t)
@@ -62,7 +62,7 @@ func TestNotifier_lastEventResourceVersion(t *testing.T) {
 	runNotifierTestWith(t, "sqlkv", setupTestNotifierSqlKv, testNotifierLastEventResourceVersion)
 }

-func testNotifierLastEventResourceVersion(t *testing.T, ctx context.Context, notifier *notifier, eventStore *eventStore) {
+func testNotifierLastEventResourceVersion(t *testing.T, ctx context.Context, notifier *pollingNotifier, eventStore *eventStore) {
 	// Test with no events
 	rv, err := notifier.lastEventResourceVersion(ctx)
 	assert.Error(t, err)
@@ -113,7 +113,7 @@ func TestNotifier_cachekey(t *testing.T) {
 	runNotifierTestWith(t, "sqlkv", setupTestNotifierSqlKv, testNotifierCachekey)
 }

-func testNotifierCachekey(t *testing.T, ctx context.Context, notifier *notifier, eventStore *eventStore) {
+func testNotifierCachekey(t *testing.T, ctx context.Context, notifier *pollingNotifier, eventStore *eventStore) {
 	tests := []struct {
 		name     string
 		event    Event
@@ -167,7 +167,7 @@ func TestNotifier_Watch_NoEvents(t *testing.T) {
 	runNotifierTestWith(t, "sqlkv", setupTestNotifierSqlKv, testNotifierWatchNoEvents)
 }

-func testNotifierWatchNoEvents(t *testing.T, ctx context.Context, notifier *notifier, eventStore *eventStore) {
+func testNotifierWatchNoEvents(t *testing.T, ctx context.Context, notifier *pollingNotifier, eventStore *eventStore) {
 	ctx, cancel := context.WithTimeout(ctx, 500*time.Millisecond)
 	defer cancel()

@@ -208,7 +208,7 @@ func TestNotifier_Watch_WithExistingEvents(t *testing.T) {
 	runNotifierTestWith(t, "sqlkv", setupTestNotifierSqlKv, testNotifierWatchWithExistingEvents)
 }

-func testNotifierWatchWithExistingEvents(t *testing.T, ctx context.Context, notifier *notifier, eventStore *eventStore) {
+func testNotifierWatchWithExistingEvents(t *testing.T, ctx context.Context, notifier *pollingNotifier, eventStore *eventStore) {
 	ctx, cancel := context.WithTimeout(ctx, 2*time.Second)
 	defer cancel()

@@ -282,7 +282,7 @@ func TestNotifier_Watch_EventDeduplication(t *testing.T) {
 	runNotifierTestWith(t, "sqlkv", setupTestNotifierSqlKv, testNotifierWatchEventDeduplication)
 }

-func testNotifierWatchEventDeduplication(t *testing.T, ctx context.Context, notifier *notifier, eventStore *eventStore) {
+func testNotifierWatchEventDeduplication(t *testing.T, ctx context.Context, notifier *pollingNotifier, eventStore *eventStore) {
 	ctx, cancel := context.WithTimeout(ctx, 2*time.Second)
 	defer cancel()

@@ -348,7 +348,7 @@ func TestNotifier_Watch_ContextCancellation(t *testing.T) {
 	runNotifierTestWith(t, "sqlkv", setupTestNotifierSqlKv, testNotifierWatchContextCancellation)
 }

-func testNotifierWatchContextCancellation(t *testing.T, ctx context.Context, notifier *notifier, eventStore *eventStore) {
+func testNotifierWatchContextCancellation(t *testing.T, ctx context.Context, notifier *pollingNotifier, eventStore *eventStore) {
 	ctx, cancel := context.WithCancel(ctx)

 	// Add an initial event so that lastEventResourceVersion doesn't return ErrNotFound
@@ -394,7 +394,7 @@ func TestNotifier_Watch_MultipleEvents(t *testing.T) {
 	runNotifierTestWith(t, "sqlkv", setupTestNotifierSqlKv, testNotifierWatchMultipleEvents)
 }

-func testNotifierWatchMultipleEvents(t *testing.T, ctx context.Context, notifier *notifier, eventStore *eventStore) {
+func testNotifierWatchMultipleEvents(t *testing.T, ctx context.Context, notifier *pollingNotifier, eventStore *eventStore) {
 	ctx, cancel := context.WithTimeout(ctx, 3*time.Second)
 	defer cancel()
 	rv := time.Now().UnixNano()
@@ -61,7 +61,7 @@ type kvStorageBackend struct {
 	bulkLock                     *BulkLock
 	dataStore                    *dataStore
 	eventStore                   *eventStore
-	notifier                     *notifier
+	notifier                     notifier
 	builder                      DocumentBuilder
 	log                          logging.Logger
 	withPruner                   bool
@@ -91,6 +91,7 @@ type KVBackendOptions struct {
 	Tracer                       trace.Tracer          // TODO add tracing
 	Reg                          prometheus.Registerer // TODO add metrics

+	UseChannelNotifier bool
 	// Adding RvManager overrides the RV generated with snowflake in order to keep backwards compatibility with
 	// unified/sql
 	RvManager *rvmanager.ResourceVersionManager
@@ -121,7 +122,7 @@ func NewKVStorageBackend(opts KVBackendOptions) (KVBackend, error) {
 		bulkLock:                     NewBulkLock(),
 		dataStore:                    newDataStore(kv),
 		eventStore:                   eventStore,
-		notifier:                     newNotifier(eventStore, notifierOptions{}),
+		notifier:                     newNotifier(eventStore, notifierOptions{useChannelNotifier: opts.UseChannelNotifier}),
 		snowflake:                    s,
 		builder:                      StandardDocumentBuilder(), // For now we use the standard document builder.
 		log:                          &logging.NoOpLogger{},     // Make this configurable
@@ -99,6 +99,9 @@ func NewResourceServer(opts ServerOptions) (resource.ResourceServer, error) {
 			return nil, err
 		}

+		isHA := isHighAvailabilityEnabled(opts.Cfg.SectionWithEnvOverrides("database"),
+			opts.Cfg.SectionWithEnvOverrides("resource_api"))
+
 		if opts.Cfg.EnableSQLKVBackend {
 			sqlkv, err := resource.NewSQLKV(eDB)
 			if err != nil {
@@ -106,9 +109,10 @@ func NewResourceServer(opts ServerOptions) (resource.ResourceServer, error) {
 			}

 			kvBackendOpts := resource.KVBackendOptions{
-				KvStore: sqlkv,
-				Tracer:  opts.Tracer,
-				Reg:     opts.Reg,
+				KvStore:            sqlkv,
+				Tracer:             opts.Tracer,
+				Reg:                opts.Reg,
+				UseChannelNotifier: !isHA,
 			}

 			ctx := context.Background()
@@ -140,9 +144,6 @@ func NewResourceServer(opts ServerOptions) (resource.ResourceServer, error) {
 			serverOptions.Backend = kvBackend
 			serverOptions.Diagnostics = kvBackend
 		} else {
-			isHA := isHighAvailabilityEnabled(opts.Cfg.SectionWithEnvOverrides("database"),
-				opts.Cfg.SectionWithEnvOverrides("resource_api"))
-
 			backend, err := NewBackend(BackendOptions{
 				DBProvider:           eDB,
 				Reg:                  opts.Reg,
@@ -8,6 +8,7 @@ import (
 	"github.com/stretchr/testify/require"

 	"github.com/grafana/grafana/pkg/storage/unified/resource"
+	"github.com/grafana/grafana/pkg/util/testutil"
 )

 func TestBadgerKVStorageBackend(t *testing.T) {
@@ -36,7 +37,9 @@ func TestBadgerKVStorageBackend(t *testing.T) {
 	})
 }

-func TestSQLKVStorageBackend(t *testing.T) {
+func TestIntegrationSQLKVStorageBackend(t *testing.T) {
+	testutil.SkipIntegrationTestInShortMode(t)
+
 	skipTests := map[string]bool{
 		TestWatchWriteEvents:          true,
 		TestList:                      true,
@@ -25,6 +25,10 @@ export class ExportAsCode extends ShareExportTab {
  public getTabLabel(): string {
    return t('export.json.title', 'Export dashboard');
  }
+
+  public getSubtitle(): string | undefined {
+    return t('export.json.info-text', 'Copy or download a file containing the definition of your dashboard');
+  }
 }

 function ExportAsCodeRenderer({ model }: SceneComponentProps<ExportAsCode>) {
@@ -53,12 +57,6 @@ function ExportAsCodeRenderer({ model }: SceneComponentProps<ExportAsCode>) {

  return (
    <div data-testid={selector.container} className={styles.container}>
-      <p>
-        <Trans i18nKey="export.json.info-text">
-          Copy or download a file containing the definition of your dashboard
-        </Trans>
-      </p>
-
      {config.featureToggles.kubernetesDashboards ? (
        <ResourceExport
          dashboardJson={dashboardJson}
@@ -0,0 +1,189 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AsyncState } from 'react-use/lib/useAsync';
+
+import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
+import { Dashboard } from '@grafana/schema';
+import { Spec as DashboardV2Spec } from '@grafana/schema/dist/esm/schema/dashboard/v2';
+
+import { ExportMode, ResourceExport } from './ResourceExport';
+
+type DashboardJsonState = AsyncState<{
+  json: Dashboard | DashboardV2Spec | { error: unknown };
+  hasLibraryPanels?: boolean;
+  initialSaveModelVersion: 'v1' | 'v2';
+}>;
+
+const selector = e2eSelectors.pages.ExportDashboardDrawer.ExportAsJson;
+
+const createDefaultProps = (overrides?: Partial<Parameters<typeof ResourceExport>[0]>) => {
+  const defaultProps: Parameters<typeof ResourceExport>[0] = {
+    dashboardJson: {
+      loading: false,
+      value: {
+        json: { title: 'Test Dashboard' } as Dashboard,
+        hasLibraryPanels: false,
+        initialSaveModelVersion: 'v1',
+      },
+    } as DashboardJsonState,
+    isSharingExternally: false,
+    exportMode: ExportMode.Classic,
+    isViewingYAML: false,
+    onExportModeChange: jest.fn(),
+    onShareExternallyChange: jest.fn(),
+    onViewYAML: jest.fn(),
+  };
+
+  return { ...defaultProps, ...overrides };
+};
+
+const createV2DashboardJson = (hasLibraryPanels = false): DashboardJsonState => ({
+  loading: false,
+  value: {
+    json: {
+      title: 'Test V2 Dashboard',
+      spec: {
+        elements: {},
+      },
+    } as unknown as DashboardV2Spec,
+    hasLibraryPanels,
+    initialSaveModelVersion: 'v2',
+  },
+});
+
+const expandOptions = async () => {
+  const button = screen.getByRole('button', { expanded: false });
+  await userEvent.click(button);
+};
+
+describe('ResourceExport', () => {
+  describe('export mode options for v1 dashboard', () => {
+    it('should show three export mode options in correct order: Classic, V1 Resource, V2 Resource', async () => {
+      render(<ResourceExport {...createDefaultProps()} />);
+      await expandOptions();
+
+      const radioGroup = screen.getByRole('radiogroup', { name: /model/i });
+      const labels = within(radioGroup)
+        .getAllByRole('radio')
+        .map((radio) => radio.parentElement?.textContent?.trim());
+
+      expect(labels).toHaveLength(3);
+      expect(labels).toEqual(['Classic', 'V1 Resource', 'V2 Resource']);
+    });
+
+    it('should have first option selected by default when exportMode is Classic', async () => {
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.Classic })} />);
+      await expandOptions();
+
+      const radioGroup = screen.getByRole('radiogroup', { name: /model/i });
+      const radios = within(radioGroup).getAllByRole('radio');
+      expect(radios[0]).toBeChecked();
+    });
+
+    it('should call onExportModeChange when export mode is changed', async () => {
+      const onExportModeChange = jest.fn();
+      render(<ResourceExport {...createDefaultProps({ onExportModeChange })} />);
+      await expandOptions();
+
+      const radioGroup = screen.getByRole('radiogroup', { name: /model/i });
+      const radios = within(radioGroup).getAllByRole('radio');
+      await userEvent.click(radios[1]); // V1 Resource
+      expect(onExportModeChange).toHaveBeenCalledWith(ExportMode.V1Resource);
+    });
+  });
+
+  describe('export mode options for v2 dashboard', () => {
+    it('should not show export mode options', async () => {
+      render(<ResourceExport {...createDefaultProps({ dashboardJson: createV2DashboardJson() })} />);
+      await expandOptions();
+
+      expect(screen.queryByRole('radiogroup', { name: /model/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('format options', () => {
+    it('should not show format options when export mode is Classic', async () => {
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.Classic })} />);
+      await expandOptions();
+
+      expect(screen.getByRole('radiogroup', { name: /model/i })).toBeInTheDocument();
+      expect(screen.queryByRole('radiogroup', { name: /format/i })).not.toBeInTheDocument();
+    });
+
+    it.each([ExportMode.V1Resource, ExportMode.V2Resource])(
+      'should show format options when export mode is %s',
+      async (exportMode) => {
+        render(<ResourceExport {...createDefaultProps({ exportMode })} />);
+        await expandOptions();
+
+        expect(screen.getByRole('radiogroup', { name: /model/i })).toBeInTheDocument();
+        expect(screen.getByRole('radiogroup', { name: /format/i })).toBeInTheDocument();
+      }
+    );
+
+    it('should have first format option selected when isViewingYAML is false', async () => {
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.V1Resource, isViewingYAML: false })} />);
+      await expandOptions();
+
+      const formatGroup = screen.getByRole('radiogroup', { name: /format/i });
+      const formatRadios = within(formatGroup).getAllByRole('radio');
+      expect(formatRadios[0]).toBeChecked(); // JSON
+    });
+
+    it('should have second format option selected when isViewingYAML is true', async () => {
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.V1Resource, isViewingYAML: true })} />);
+      await expandOptions();
+
+      const formatGroup = screen.getByRole('radiogroup', { name: /format/i });
+      const formatRadios = within(formatGroup).getAllByRole('radio');
+      expect(formatRadios[1]).toBeChecked(); // YAML
+    });
+
+    it('should call onViewYAML when format is changed', async () => {
+      const onViewYAML = jest.fn();
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.V1Resource, onViewYAML })} />);
+      await expandOptions();
+
+      const formatGroup = screen.getByRole('radiogroup', { name: /format/i });
+      const formatRadios = within(formatGroup).getAllByRole('radio');
+      await userEvent.click(formatRadios[1]); // YAML
+      expect(onViewYAML).toHaveBeenCalled();
+    });
+  });
+
+  describe('share externally switch', () => {
+    it('should show share externally switch for Classic mode', () => {
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.Classic })} />);
+
+      expect(screen.getByTestId(selector.exportExternallyToggle)).toBeInTheDocument();
+    });
+
+    it('should show share externally switch for V2Resource mode with V2 dashboard', () => {
+      render(
+        <ResourceExport
+          {...createDefaultProps({
+            dashboardJson: createV2DashboardJson(),
+            exportMode: ExportMode.V2Resource,
+          })}
+        />
+      );
+
+      expect(screen.getByTestId(selector.exportExternallyToggle)).toBeInTheDocument();
+    });
+
+    it('should call onShareExternallyChange when switch is toggled', async () => {
+      const onShareExternallyChange = jest.fn();
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.Classic, onShareExternallyChange })} />);
+
+      const switchElement = screen.getByTestId(selector.exportExternallyToggle);
+      await userEvent.click(switchElement);
+      expect(onShareExternallyChange).toHaveBeenCalled();
+    });
+
+    it('should reflect isSharingExternally value in switch', () => {
+      render(<ResourceExport {...createDefaultProps({ exportMode: ExportMode.Classic, isSharingExternally: true })} />);
+
+      expect(screen.getByTestId(selector.exportExternallyToggle)).toBeChecked();
+    });
+  });
+});
@@ -4,7 +4,8 @@ import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { Dashboard } from '@grafana/schema';
 import { Spec as DashboardV2Spec } from '@grafana/schema/dist/esm/schema/dashboard/v2';
-import { Alert, Label, RadioButtonGroup, Stack, Switch } from '@grafana/ui';
+import { Alert, Icon, Label, RadioButtonGroup, Stack, Switch, Box, Tooltip } from '@grafana/ui';
+import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
 import { DashboardJson } from 'app/features/manage-dashboards/types';

 import { ExportableResource } from '../ShareExportTab';
@@ -48,80 +49,90 @@ export function ResourceExport({

  const switchExportLabel =
    exportMode === ExportMode.V2Resource
-      ? t('export.json.export-remove-ds-refs', 'Remove deployment details')
-      : t('share-modal.export.share-externally-label', `Export for sharing externally`);
+      ? t('dashboard-scene.resource-export.share-externally', 'Share dashboard with another instance')
+      : t('share-modal.export.share-externally-label', 'Export for sharing externally');
+  const switchExportTooltip = t(
+    'dashboard-scene.resource-export.share-externally-tooltip',
+    'Removes all instance-specific metadata and data source references from the resource before export.'
+  );
  const switchExportModeLabel = t('export.json.export-mode', 'Model');
  const switchExportFormatLabel = t('export.json.export-format', 'Format');

+  const exportResourceOptions = [
+    {
+      label: t('dashboard-scene.resource-export.label.classic', 'Classic'),
+      value: ExportMode.Classic,
+    },
+    {
+      label: t('dashboard-scene.resource-export.label.v1-resource', 'V1 Resource'),
+      value: ExportMode.V1Resource,
+    },
+    {
+      label: t('dashboard-scene.resource-export.label.v2-resource', 'V2 Resource'),
+      value: ExportMode.V2Resource,
+    },
+  ];
+
  return (
-    <Stack gap={2} direction="column">
-      <Stack gap={1} direction="column">
-        {initialSaveModelVersion === 'v1' && (
-          <Stack alignItems="center">
-            <Label>{switchExportModeLabel}</Label>
-            <RadioButtonGroup
-              options={[
-                { label: t('dashboard-scene.resource-export.label.classic', 'Classic'), value: ExportMode.Classic },
-                {
-                  label: t('dashboard-scene.resource-export.label.v1-resource', 'V1 Resource'),
-                  value: ExportMode.V1Resource,
-                },
-                {
-                  label: t('dashboard-scene.resource-export.label.v2-resource', 'V2 Resource'),
-                  value: ExportMode.V2Resource,
-                },
-              ]}
-              value={exportMode}
-              onChange={(value) => onExportModeChange(value)}
-            />
+    <>
+      <QueryOperationRow
+        id="Advanced options"
+        index={0}
+        title={t('dashboard-scene.resource-export.label.advanced-options', 'Advanced options')}
+        isOpen={false}
+      >
+        <Box marginTop={2}>
+          <Stack gap={1} direction="column">
+            {initialSaveModelVersion === 'v1' && (
+              <Stack gap={1} alignItems="center">
+                <Label>{switchExportModeLabel}</Label>
+                <RadioButtonGroup
+                  options={exportResourceOptions}
+                  value={exportMode}
+                  onChange={(value) => onExportModeChange(value)}
+                  aria-label={switchExportModeLabel}
+                />
+              </Stack>
+            )}
+
+            {exportMode !== ExportMode.Classic && (
+              <Stack gap={1} alignItems="center">
+                <Label>{switchExportFormatLabel}</Label>
+                <RadioButtonGroup
+                  options={[
+                    { label: t('dashboard-scene.resource-export.label.json', 'JSON'), value: 'json' },
+                    { label: t('dashboard-scene.resource-export.label.yaml', 'YAML'), value: 'yaml' },
+                  ]}
+                  value={isViewingYAML ? 'yaml' : 'json'}
+                  onChange={onViewYAML}
+                  aria-label={switchExportFormatLabel}
+                />
+              </Stack>
+            )}
          </Stack>
-        )}
-        {initialSaveModelVersion === 'v2' && (
-          <Stack alignItems="center">
-            <Label>{switchExportModeLabel}</Label>
-            <RadioButtonGroup
-              options={[
-                {
-                  label: t('dashboard-scene.resource-export.label.v2-resource', 'V2 Resource'),
-                  value: ExportMode.V2Resource,
-                },
-                {
-                  label: t('dashboard-scene.resource-export.label.v1-resource', 'V1 Resource'),
-                  value: ExportMode.V1Resource,
-                },
-              ]}
-              value={exportMode}
-              onChange={(value) => onExportModeChange(value)}
-            />
-          </Stack>
-        )}
-        {exportMode !== ExportMode.Classic && (
-          <Stack gap={1} alignItems="center">
-            <Label>{switchExportFormatLabel}</Label>
-            <RadioButtonGroup
-              options={[
-                { label: t('dashboard-scene.resource-export.label.json', 'JSON'), value: 'json' },
-                { label: t('dashboard-scene.resource-export.label.yaml', 'YAML'), value: 'yaml' },
-              ]}
-              value={isViewingYAML ? 'yaml' : 'json'}
-              onChange={onViewYAML}
-            />
-          </Stack>
-        )}
-        {(isV2Dashboard ||
-          exportMode === ExportMode.Classic ||
-          (initialSaveModelVersion === 'v2' && exportMode === ExportMode.V1Resource)) && (
-          <Stack gap={1} alignItems="start">
-            <Label>{switchExportLabel}</Label>
-            <Switch
-              label={switchExportLabel}
-              value={isSharingExternally}
-              onChange={onShareExternallyChange}
-              data-testid={selector.exportExternallyToggle}
-            />
-          </Stack>
-        )}
-      </Stack>
+        </Box>
+      </QueryOperationRow>
+
+      {(isV2Dashboard ||
+        exportMode === ExportMode.Classic ||
+        (initialSaveModelVersion === 'v2' && exportMode === ExportMode.V1Resource)) && (
+        <Stack gap={1} alignItems="start">
+          <Label>
+            <Stack gap={0.5} alignItems="center">
+              <Tooltip content={switchExportTooltip} placement="bottom">
+                <Icon name="info-circle" size="sm" />
+              </Tooltip>
+              {switchExportLabel}
+            </Stack>
+          </Label>
+          <Switch
+            label={switchExportLabel}
+            value={isSharingExternally}
+            onChange={onShareExternallyChange}
+            data-testid={selector.exportExternallyToggle}
+          />
+        </Stack>
+      )}

      {showV2LibPanelAlert && (
        <Alert
@@ -130,6 +141,7 @@ export function ResourceExport({
            'Library panels will be converted to regular panels'
          )}
          severity="warning"
+          topSpacing={2}
        >
          <Trans i18nKey="dashboard-scene.save-dashboard-form.schema-v2-library-panels-export">
            Due to limitations in the new dashboard schema (V2), library panels will be converted to regular panels with
@@ -137,6 +149,6 @@ export function ResourceExport({
          </Trans>
        </Alert>
      )}
-    </Stack>
+    </>
  );
 }
@@ -66,7 +66,12 @@ function ShareDrawerRenderer({ model }: SceneComponentProps<ShareDrawer>) {
  const dashboard = getDashboardSceneFor(model);

  return (
-    <Drawer title={activeShare?.getTabLabel()} onClose={model.onDismiss} size="md">
+    <Drawer
+      title={activeShare?.getTabLabel()}
+      subtitle={activeShare?.getSubtitle?.()}
+      onClose={model.onDismiss}
+      size="md"
+    >
      <ShareDrawerContext.Provider value={{ dashboard, onDismiss: model.onDismiss }}>
        {activeShare && <activeShare.Component model={activeShare} />}
      </ShareDrawerContext.Provider>
@@ -66,6 +66,10 @@ export class ShareExportTab extends SceneObjectBase<ShareExportTabState> impleme
    return t('share-modal.tab-title.export', 'Export');
  }

+  public getSubtitle(): string | undefined {
+    return undefined;
+  }
+
  public onShareExternallyChange = () => {
    this.setState({
      isSharingExternally: !this.state.isSharingExternally,
@@ -15,5 +15,6 @@ export interface SceneShareTab<T extends SceneShareTabState = SceneShareTabState

 export interface ShareView extends SceneObject {
  getTabLabel(): string;
+  getSubtitle?(): string | undefined;
  onDismiss?: () => void;
 }
@@ -1,29 +1,26 @@
 import { SelectableValue } from '@grafana/data';
 import { RadioButtonGroup } from '@grafana/ui';

-import { useDispatch } from '../../hooks/useStatelessReducer';
 import { EditorType } from '../../types';

-import { useQuery } from './ElasticsearchQueryContext';
-import { changeEditorTypeAndResetQuery } from './state';
-
 const BASE_OPTIONS: Array<SelectableValue<EditorType>> = [
  { value: 'builder', label: 'Builder' },
  { value: 'code', label: 'Code' },
 ];

-export const EditorTypeSelector = () => {
-  const query = useQuery();
-  const dispatch = useDispatch();
-
-  // Default to 'builder' if editorType is empty
-  const editorType: EditorType = query.editorType === 'code' ? 'code' : 'builder';
-
-  const onChange = (newEditorType: EditorType) => {
-    dispatch(changeEditorTypeAndResetQuery(newEditorType));
-  };
+interface Props {
+  value: EditorType;
+  onChange: (editorType: EditorType) => void;
+}

+export const EditorTypeSelector = ({ value, onChange }: Props) => {
  return (
-    <RadioButtonGroup<EditorType> fullWidth={false} options={BASE_OPTIONS} value={editorType} onChange={onChange} />
+    <RadioButtonGroup<EditorType>
+      data-testid="elasticsearch-editor-type-toggle"
+      size="sm"
+      options={BASE_OPTIONS}
+      value={value}
+      onChange={onChange}
+    />
  );
 };
@@ -10,9 +10,13 @@ interface Props {
  onRunQuery: () => void;
 }

+// This offset was chosen by testing to match Prometheus behavior
+const EDITOR_HEIGHT_OFFSET = 2;
+
 export function RawQueryEditor({ value, onChange, onRunQuery }: Props) {
  const styles = useStyles2(getStyles);
  const editorRef = useRef<monacoTypes.editor.IStandaloneCodeEditor | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);

  const handleEditorDidMount = useCallback(
    (editor: monacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) => {
@@ -22,6 +26,22 @@ export function RawQueryEditor({ value, onChange, onRunQuery }: Props) {
      editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
        onRunQuery();
      });
+
+      // Make the editor resize itself so that the content fits (grows taller when necessary)
+      // this code comes from the Prometheus query editor.
+      // We may wish to consider abstracting it into the grafana/ui repo in the future
+      const updateElementHeight = () => {
+        const containerDiv = containerRef.current;
+        if (containerDiv !== null) {
+          const pixelHeight = editor.getContentHeight();
+          containerDiv.style.height = `${pixelHeight + EDITOR_HEIGHT_OFFSET}px`;
+          const pixelWidth = containerDiv.clientWidth;
+          editor.layout({ width: pixelWidth, height: pixelHeight });
+        }
+      };
+
+      editor.onDidContentSizeChange(updateElementHeight);
+      updateElementHeight();
    },
    [onRunQuery]
  );
@@ -65,7 +85,17 @@ export function RawQueryEditor({ value, onChange, onRunQuery }: Props) {

  return (
    <Box>
-      <div className={styles.header}>
+      <div ref={containerRef} className={styles.editorContainer}>
+        <CodeEditor
+          value={value ?? ''}
+          language="json"
+          width="100%"
+          onBlur={handleQueryChange}
+          monacoOptions={monacoOptions}
+          onEditorDidMount={handleEditorDidMount}
+        />
+      </div>
+      <div className={styles.footer}>
        <Stack gap={1}>
          <Button
            size="sm"
@@ -76,20 +106,8 @@ export function RawQueryEditor({ value, onChange, onRunQuery }: Props) {
          >
            Format
          </Button>
-          <Button size="sm" variant="primary" icon="play" onClick={onRunQuery} tooltip="Run query (Ctrl/Cmd+Enter)">
-            Run
-          </Button>
        </Stack>
      </div>
-      <CodeEditor
-        value={value ?? ''}
-        language="json"
-        height={200}
-        width="100%"
-        onBlur={handleQueryChange}
-        monacoOptions={monacoOptions}
-        onEditorDidMount={handleEditorDidMount}
-      />
    </Box>
  );
 }
@@ -100,7 +118,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
    flexDirection: 'column',
    gap: theme.spacing(1),
  }),
-  header: css({
+  editorContainer: css({
+    width: '100%',
+    overflow: 'hidden',
+  }),
+  footer: css({
    display: 'flex',
    justifyContent: 'flex-end',
    padding: theme.spacing(0.5, 0),
@@ -1,16 +1,16 @@
 import { css } from '@emotion/css';
-import { useEffect, useId, useState } from 'react';
+import { useCallback, useEffect, useId, useState } from 'react';
 import { SemVer } from 'semver';

 import { getDefaultTimeRange, GrafanaTheme2, QueryEditorProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Alert, InlineField, InlineLabel, Input, QueryField, useStyles2 } from '@grafana/ui';
+import { Alert, ConfirmModal, InlineField, InlineLabel, Input, QueryField, useStyles2 } from '@grafana/ui';

 import { ElasticsearchDataQuery } from '../../dataquery.gen';
 import { ElasticDatasource } from '../../datasource';
 import { useNextId } from '../../hooks/useNextId';
 import { useDispatch } from '../../hooks/useStatelessReducer';
-import { ElasticsearchOptions } from '../../types';
+import { EditorType, ElasticsearchOptions } from '../../types';
 import { isSupportedVersion, isTimeSeriesQuery, unsupportedVersionMessage } from '../../utils';

 import { BucketAggregationsEditor } from './BucketAggregationsEditor';
@@ -20,7 +20,7 @@ import { MetricAggregationsEditor } from './MetricAggregationsEditor';
 import { metricAggregationConfig } from './MetricAggregationsEditor/utils';
 import { QueryTypeSelector } from './QueryTypeSelector';
 import { RawQueryEditor } from './RawQueryEditor';
-import { changeAliasPattern, changeQuery, changeRawDSLQuery } from './state';
+import { changeAliasPattern, changeEditorTypeAndResetQuery, changeQuery, changeRawDSLQuery } from './state';

 export type ElasticQueryEditorProps = QueryEditorProps<ElasticDatasource, ElasticsearchDataQuery, ElasticsearchOptions>;

@@ -97,31 +97,61 @@ const QueryEditorForm = ({ value, onRunQuery }: Props & { onRunQuery: () => void
  const inputId = useId();
  const styles = useStyles2(getStyles);

+  const [switchModalOpen, setSwitchModalOpen] = useState(false);
+  const [pendingEditorType, setPendingEditorType] = useState<EditorType | null>(null);
+
  const isTimeSeries = isTimeSeriesQuery(value);

  const isCodeEditor = value.editorType === 'code';
  const rawDSLFeatureEnabled = config.featureToggles.elasticsearchRawDSLQuery;

+  // Default to 'builder' if editorType is empty
+  const currentEditorType: EditorType = value.editorType === 'code' ? 'code' : 'builder';
+
  const showBucketAggregationsEditor = value.metrics?.every(
    (metric) => metricAggregationConfig[metric.type].impliedQueryType === 'metrics'
  );

+  const onEditorTypeChange = useCallback((newEditorType: EditorType) => {
+    // Show warning modal when switching modes
+    setPendingEditorType(newEditorType);
+    setSwitchModalOpen(true);
+  }, []);
+
+  const confirmEditorTypeChange = useCallback(() => {
+    if (pendingEditorType) {
+      dispatch(changeEditorTypeAndResetQuery(pendingEditorType));
+    }
+    setSwitchModalOpen(false);
+    setPendingEditorType(null);
+  }, [dispatch, pendingEditorType]);
+
+  const cancelEditorTypeChange = useCallback(() => {
+    setSwitchModalOpen(false);
+    setPendingEditorType(null);
+  }, []);
+
  return (
    <>
+      <ConfirmModal
+        isOpen={switchModalOpen}
+        title="Switch editor"
+        body="Switching between editors will reset your query. Are you sure you want to continue?"
+        confirmText="Continue"
+        onConfirm={confirmEditorTypeChange}
+        onDismiss={cancelEditorTypeChange}
+      />
      <div className={styles.root}>
        <InlineLabel width={17}>Query type</InlineLabel>
        <div className={styles.queryItem}>
          <QueryTypeSelector />
        </div>
-      </div>
-      {rawDSLFeatureEnabled && (
-        <div className={styles.root}>
-          <InlineLabel width={17}>Editor type</InlineLabel>
-          <div className={styles.queryItem}>
-            <EditorTypeSelector />
+        {rawDSLFeatureEnabled && (
+          <div style={{ marginLeft: 'auto' }}>
+            <EditorTypeSelector value={currentEditorType} onChange={onEditorTypeChange} />
          </div>
-        </div>
-      )}
+        )}
+      </div>

      {isCodeEditor && rawDSLFeatureEnabled && (
        <RawQueryEditor
@@ -32,26 +32,27 @@ export function RadialBarPanel({

    return (
      <RadialGauge
-        values={[value]}
-        width={width}
-        height={height}
+        alignmentFactors={valueProps.alignmentFactors}
        barWidthFactor={options.barWidthFactor}
-        gradient={options.effects?.gradient}
+        endpointMarker={options.endpointMarker !== 'none' ? options.endpointMarker : undefined}
        glowBar={options.effects?.barGlow}
        glowCenter={options.effects?.centerGlow}
+        gradient={options.effects?.gradient}
+        height={height}
+        nameManualFontSize={options.text?.titleSize}
+        neutral={options.neutral}
+        onClick={menuProps.openMenu}
        roundedBars={options.barShape === 'rounded'}
-        vizCount={valueProps.count}
-        shape={options.shape}
        segmentCount={options.segmentCount}
        segmentSpacing={options.segmentSpacing}
-        thresholdsBar={options.showThresholdMarkers}
+        shape={options.shape}
        showScaleLabels={options.showThresholdLabels}
-        alignmentFactors={valueProps.alignmentFactors}
-        valueManualFontSize={options.text?.valueSize}
-        nameManualFontSize={options.text?.titleSize}
-        endpointMarker={options.endpointMarker !== 'none' ? options.endpointMarker : undefined}
-        onClick={menuProps.openMenu}
        textMode={options.textMode}
+        thresholdsBar={options.showThresholdMarkers}
+        valueManualFontSize={options.text?.valueSize}
+        values={[value]}
+        vizCount={valueProps.count}
+        width={width}
      />
    );
  }
@@ -161,6 +161,17 @@ export const plugin = new PanelPlugin<Options>(RadialBarPanel)
      defaultValue: defaultOptions.textMode,
    });

+    builder.addNumberInput({
+      path: 'neutral',
+      name: t('radialbar.config.neutral.title', 'Neutral value'),
+      description: t('radialbar.config.neutral.description', 'Leave empty to use Min as neutral point'),
+      category,
+      settings: {
+        placeholder: t('radialbar.config.neutral.placeholder', 'none'),
+        step: 1,
+      },
+    });
+
    builder.addBooleanSwitch({
      path: 'sparkline',
      name: t('radialbar.config.sparkline', 'Show sparkline'),
@@ -42,7 +42,8 @@ composableKinds: PanelCfg: {
 					barWidthFactor: number | *0.5
 					barShape: "flat" | "rounded" | *"flat"
 					endpointMarker?: "point" | "glow" | "none" | *"point"
-          textMode?: "auto" | "value_and_name" | "value" | "name" | "none" | *"auto"
+					textMode?: "auto" | "value_and_name" | "value" | "name" | "none" | *"auto"
+					neutral?: number
 					effects: GaugePanelEffects | *{}
 					sizing: common.BarGaugeSizing & (*"auto" | _)
 					minVizWidth: uint32 | *75
@@ -29,6 +29,7 @@ export interface Options extends common.SingleStatBaseOptions {
  endpointMarker?: ('point' | 'glow' | 'none');
  minVizHeight: number;
  minVizWidth: number;
+  neutral?: number;
  segmentCount: number;
  segmentSpacing: number;
  shape: ('circle' | 'gauge');
@@ -6383,12 +6383,15 @@
    },
    "resource-export": {
      "label": {
+        "advanced-options": "Advanced options",
        "classic": "Classic",
        "json": "JSON",
        "v1-resource": "V1 Resource",
        "v2-resource": "V2 Resource",
        "yaml": "YAML"
-      }
+      },
+      "share-externally": "Share dashboard with another instance",
+      "share-externally-tooltip": "Removes all instance-specific metadata and data source references from the resource before export."
    },
    "revert-dashboard-modal": {
      "body-restore-version": "Are you sure you want to restore the dashboard to version {{version}}? All unsaved changes will be lost.",
@@ -7842,7 +7845,6 @@
      "export-externally-label": "Export the dashboard to use in another instance",
      "export-format": "Format",
      "export-mode": "Model",
-      "export-remove-ds-refs": "Remove deployment details",
      "info-text": "Copy or download a file containing the definition of your dashboard",
      "title": "Export dashboard"
    },
@@ -12570,6 +12572,11 @@
      "endpoint-marker-glow": "Glow",
      "endpoint-marker-none": "None",
      "endpoint-marker-point": "Point",
+      "neutral": {
+        "description": "Leave empty to use Min as neutral point",
+        "placeholder": "none",
+        "title": "Neutral value"
+      },
      "segment-count": "Segments",
      "segment-spacing": "Segment spacing",
      "shape": "Style",
Author	SHA1	Message	Date
Paul Marbach	0c4ade9514	Merge branch 'main' into fastfrwrd/gauge-neutral	2026-01-14 13:32:57 -05:00
Ezequiel Victorero	72f7bd3900	Snapshots: Support public snapshot instance in latest version (#116086 )	2026-01-14 15:28:16 -03:00
Will Assis	ba416eab4e	unified-storage: dont use polling notifier with sqlite in sqlkv (#116283 ) * unified-storage: dont use polling notifier with sqlite in sqlkv	2026-01-14 18:22:39 +00:00
Alan Martin	189d50d815	UI: Use react-table column header types in InteractiveTable with story and tests (#116091 ) * feat(InteractiveTable): allow custom header rendering * docs(InteractiveTable): add story for custom header rendering * test(InteractiveTable): add tests for custom header rendering * docs(InteractiveTable): add custom header rendering documentation * fix: test failure from non-a11y code	2026-01-14 17:59:03 +00:00
Mariell Hoversholm	450eaba447	test: skip integration test in short mode (#116280 )	2026-01-14 18:33:55 +01:00
Kristina Demeshchik	87f5d5e741	Dashboard: Hide export options in collapsible row (#116155 ) * Introduce export options * Reset keys * Introduce a new key * Generate new keys * Rename the label * re-generate key * Fix the spacing * Remove debuggers * Add subtitle * refactor component * update labels * faield tests * Update tooltip * Linting issue	2026-01-14 12:12:33 -05:00
Andrew Hackmann	5e68b07cac	Elasticsearch: Make code editor look more like prometheus (#115461 ) * Make code editor look more prometheus * add warning when switching builders * address adam's feedback * yarn	2026-01-14 09:50:35 -07:00
Paul Marbach	e60fb6b1d3	Merge remote-tracking branch 'origin/main' into fastfrwrd/gauge-neutral	2026-01-08 11:14:58 -05:00
Paul Marbach	2992964f32	storybook updates	2026-01-08 11:09:50 -05:00
Paul Marbach	31a806281e	fix off-by-one, update tests	2026-01-08 11:00:24 -05:00
Paul Marbach	d0178cc95d	fix off-by-one in segmented gauge	2026-01-08 10:24:53 -05:00
Paul Marbach	8aa4f518d7	Gauge: Neutral option	2026-01-07 17:34:57 -05:00