TimeSeries panel: Do not reinitialize plot when thresholds mode change (#35952)

packages/grafana-data/src/dataframe/frameComparisons.ts

@@ -9,7 +9,7 @@ import { DataFrame } from '../types/dataFrame';
  * compareArrayValues(a, b, framesHaveSameStructure);
  * ```
  * NOTE: this does a shallow check on the FieldConfig properties, when using the query
- * editor, this should be sufficient, however if applicaitons are mutating properties
+ * editor, this should be sufficient, however if applications are mutating properties
  * deep in the FieldConfig this will not recognize a change
  *
  * @beta

packages/grafana-ui/src/components/uPlot/Plot.tsx

@@ -1,7 +1,7 @@
 import React, { createRef, MutableRefObject } from 'react';
 import uPlot, { Options } from 'uplot';
 import { PlotContext, PlotContextType } from './context';
-import { DEFAULT_PLOT_CONFIG } from './utils';
+import { DEFAULT_PLOT_CONFIG, pluginLog } from './utils';
 import { PlotProps } from './types';
 
 function sameDims(prevProps: PlotProps, nextProps: PlotProps) {
@@ -73,6 +73,7 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
       ...this.props.config.getConfig(),
     };
 
+    pluginLog('UPlot', false, 'Reinitializing plot');
     const plot = new uPlot(config, this.props.data, this.plotContainer!.current!);
 
     if (plotRef) {

packages/grafana-ui/src/components/uPlot/utils.ts

@@ -156,7 +156,7 @@ export function findMidPointYPosition(u: uPlot, idx: number) {
 // Dev helpers
 
 /** @internal */
-export const pluginLogger = createLogger('uPlot Plugin');
+export const pluginLogger = createLogger('uPlot');
 export const pluginLog = pluginLogger.logger;
 // pluginLogger.enable();
 attachDebugger('graphng', undefined, pluginLogger);

public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx

@@ -0,0 +1,18 @@
+import React, { useCallback } from 'react';
+import { FieldOverrideEditorProps, SelectableValue } from '@grafana/data';
+import { GraphTresholdsStyleMode, Select } from '@grafana/ui';
+
+export const ThresholdsStyleEditor: React.FC<
+  FieldOverrideEditorProps<SelectableValue<{ mode: GraphTresholdsStyleMode }>, any>
+> = ({ item, value, onChange }) => {
+  console.log(value);
+  const onChangeCb = useCallback(
+    (v: SelectableValue<GraphTresholdsStyleMode>) => {
+      onChange({
+        mode: v.value,
+      });
+    },
+    [onChange]
+  );
+  return <Select value={value.mode} options={item.settings.options} onChange={onChangeCb} />;
+};

public/app/plugins/panel/timeseries/config.ts

@@ -17,10 +17,12 @@ import {
   PointVisibility,
   StackingMode,
   commonOptionsBuilder,
+  GraphTresholdsStyleMode,
 } from '@grafana/ui';
 import { LineStyleEditor } from './LineStyleEditor';
 import { FillBellowToEditor } from './FillBelowToEditor';
 import { SpanNullsEditor } from './SpanNullsEditor';
+import { ThresholdsStyleEditor } from './ThresholdsStyleEditor';
 
 export const defaultGraphConfig: GraphFieldConfig = {
   drawStyle: DrawStyle.Line,
@@ -177,14 +179,19 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
       commonOptionsBuilder.addAxisConfig(builder, cfg);
       commonOptionsBuilder.addHideFrom(builder);
 
-      builder.addSelect({
-        path: 'thresholdsStyle.mode',
+      builder.addCustomEditor({
+        id: 'thresholdsStyle',
+        path: 'thresholdsStyle',
         name: 'Show thresholds',
         category: ['Thresholds'],
-        defaultValue: graphFieldOptions.thresholdsDisplayModes[0].value,
+        defaultValue: { mode: GraphTresholdsStyleMode.Off },
         settings: {
           options: graphFieldOptions.thresholdsDisplayModes,
         },
+        editor: ThresholdsStyleEditor,
+        override: ThresholdsStyleEditor,
+        process: identityOverrideProcessor,
+        shouldApply: () => true,
       });
     },
   };