VizTooltips: Remove remaining old bits (#85500)

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

docs/sources/panels-visualizations/visualizations/heatmap/index.md

@@ -114,7 +114,7 @@ Use these settings to refine your visualization.
 
 - **Show tooltip -** Show heatmap tooltip.
 - **Show Histogram -** Show a Y-axis histogram on the tooltip. A histogram represents the distribution of the bucket values for a specific timestamp.
-- **Show color scale -** Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color. This option is configurable when you enable the `newVizTooltips` feature flag.
+- **Show color scale -** Show a color scale on the tooltip. The color scale represents the mapping between bucket value and color.
 
 ### Legend
 

docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md

@@ -74,7 +74,6 @@ Some features are enabled by default. You can disable these feature by setting t
 | `autoMigrateStatPanel`                 | Migrate old stat panel to supported stat panel - broken out from autoMigrateOldPanels to enable granular tracking                                                                            |
 | `autoMigrateXYChartPanel`              | Migrate old XYChart panel to new XYChart2 model                                                                                                                                              |
 | `disableAngular`                       | Dynamic flag to disable angular at runtime. The preferred method is to set `angular_support_enabled` to `false` in the [security] settings, which allows you to change the state at runtime. |
-| `newVizTooltips`                       | New visualizations tooltips UX                                                                                                                                                               |
 | `returnToPrevious`                     | Enables the return to previous context functionality                                                                                                                                         |
 | `grpcServer`                           | Run the GRPC server                                                                                                                                                                          |
 | `accessControlOnCall`                  | Access control primitives for OnCall                                                                                                                                                         |

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -40,7 +40,6 @@ export interface FeatureToggles {
   autoMigrateXYChartPanel?: boolean;
   disableAngular?: boolean;
   canvasPanelNesting?: boolean;
-  newVizTooltips?: boolean;
   scenes?: boolean;
   disableSecretsCompatibility?: boolean;
   logRequestsInstrumentedAsUnknown?: boolean;

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx

@@ -13,7 +13,6 @@ import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { CloseButton } from './CloseButton';
 
 export const DEFAULT_TOOLTIP_WIDTH = undefined;
-export const DEFAULT_TOOLTIP_HEIGHT = undefined;
 export const TOOLTIP_OFFSET = 10;
 
 // todo: barchart? histogram?

pkg/services/featuremgmt/registry.go

@@ -176,14 +176,6 @@ var (
 			Owner:             grafanaDatavizSquad,
 			HideFromAdminPage: true,
 		},
-		{
-			Name:           "newVizTooltips",
-			Description:    "New visualizations tooltips UX",
-			Stage:          FeatureStagePublicPreview,
-			FrontendOnly:   true,
-			Owner:          grafanaDatavizSquad,
-			AllowSelfServe: false,
-		},
 		{
 			Name:         "scenes",
 			Description:  "Experimental framework to build interactive dashboards",

pkg/services/featuremgmt/toggles_gen.csv

@@ -21,7 +21,6 @@ autoMigrateStatPanel,preview,@grafana/dataviz-squad,false,false,true
 autoMigrateXYChartPanel,preview,@grafana/dataviz-squad,false,false,true
 disableAngular,preview,@grafana/dataviz-squad,false,false,true
 canvasPanelNesting,experimental,@grafana/dataviz-squad,false,false,true
-newVizTooltips,preview,@grafana/dataviz-squad,false,false,true
 scenes,experimental,@grafana/dashboards-squad,false,false,true
 disableSecretsCompatibility,experimental,@grafana/hosted-grafana-team,false,true,false
 logRequestsInstrumentedAsUnknown,experimental,@grafana/hosted-grafana-team,false,false,false

pkg/services/featuremgmt/toggles_gen.go

@@ -95,10 +95,6 @@ const (
 	// Allow elements nesting
 	FlagCanvasPanelNesting = "canvasPanelNesting"
 
-	// FlagNewVizTooltips
-	// New visualizations tooltips UX
-	FlagNewVizTooltips = "newVizTooltips"
-
 	// FlagScenes
 	// Experimental framework to build interactive dashboards
 	FlagScenes = "scenes"

pkg/services/featuremgmt/toggles_gen.json

@@ -728,7 +728,8 @@
       "metadata": {
         "name": "newVizTooltips",
         "resourceVersion": "1711130211436",
-        "creationTimestamp": "2024-03-22T17:56:51Z"
+        "creationTimestamp": "2024-03-22T17:56:51Z",
+        "deletionTimestamp": "2024-04-02T22:11:56Z"
       },
       "spec": {
         "description": "New visualizations tooltips UX",

public/app/features/visualization/data-hover/DataHoverView.tsx

@@ -10,7 +10,6 @@ import {
   GrafanaTheme2,
   LinkModel,
 } from '@grafana/data';
-import { config } from '@grafana/runtime';
 import { SortOrder, TooltipDisplayMode } from '@grafana/schema';
 import { TextLink, useStyles2 } from '@grafana/ui';
 import { renderValue } from 'app/plugins/panel/geomap/utils/uiUtils';
@@ -109,7 +108,7 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
 
   const { displayValues, links } = dispValuesAndLinks;
 
-  if (config.featureToggles.newVizTooltips && header === 'Exemplar') {
+  if (header === 'Exemplar') {
     return <ExemplarHoverView displayValues={displayValues} links={links} header={header} />;
   }
 

public/app/features/visualization/data-hover/ExemplarHoverView.tsx

@@ -87,13 +87,9 @@ const getStyles = (theme: GrafanaTheme2, padding = 0) => {
     exemplarFooter: css({
       display: 'flex',
       flexDirection: 'column',
-      flex: 1,
-      borderTop: `1px solid ${theme.colors.border.medium}`,
       padding: theme.spacing(1),
-
-      overflowX: 'auto',
-      overflowY: 'hidden',
-      whiteSpace: 'nowrap',
+      borderTop: `1px solid ${theme.colors.border.medium}`,
+      gap: 4,
     }),
     linkButton: css({
       width: 'fit-content',

public/app/plugins/panel/candlestick/module.tsx

@@ -137,10 +137,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(CandlestickPane
       },
     });
 
-    if (config.featureToggles.newVizTooltips) {
-      commonOptionsBuilder.addTooltipOptions(builder, false, true, opts);
-    }
-
+    commonOptionsBuilder.addTooltipOptions(builder, false, true, opts);
     commonOptionsBuilder.addLegendOptions(builder);
   })
   .setDataSupport({ annotations: true, alertStates: true })

public/app/plugins/panel/heatmap/module.tsx

@@ -411,7 +411,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
       name: 'Show color scale',
       defaultValue: defaultOptions.tooltip.showColorScale,
       category,
-      showIf: (opts) => opts.tooltip.mode === TooltipDisplayMode.Single && config.featureToggles.newVizTooltips,
+      showIf: (opts) => opts.tooltip.mode === TooltipDisplayMode.Single,
     });
 
     builder.addNumberInput({
@@ -421,7 +421,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(HeatmapPanel)
       settings: {
         integer: true,
       },
-      showIf: (options) => false, // config.featureToggles.newVizTooltips && options.tooltip?.mode !== TooltipDisplayMode.None,
+      showIf: (options) => false,
     });
 
     builder.addNumberInput({

public/app/plugins/panel/state-timeline/module.tsx

@@ -5,7 +5,6 @@ import {
   identityOverrideProcessor,
   PanelPlugin,
 } from '@grafana/data';
-import { config } from '@grafana/runtime';
 import { VisibilityMode } from '@grafana/schema';
 import { commonOptionsBuilder } from '@grafana/ui';
 
@@ -122,7 +121,7 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StateTimelinePanel)
       });
 
     commonOptionsBuilder.addLegendOptions(builder, false);
-    commonOptionsBuilder.addTooltipOptions(builder, !config.featureToggles.newVizTooltips);
+    commonOptionsBuilder.addTooltipOptions(builder);
   })
   .setSuggestionsSupplier(new StatTimelineSuggestionsSupplier())
   .setDataSupport({ annotations: true });

public/app/plugins/panel/status-history/module.tsx

@@ -1,5 +1,4 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
-import { config } from '@grafana/runtime';
 import { VisibilityMode } from '@grafana/schema';
 import { commonOptionsBuilder } from '@grafana/ui';
 
@@ -81,7 +80,7 @@ export const plugin = new PanelPlugin<Options, FieldConfig>(StatusHistoryPanel)
       });
 
     commonOptionsBuilder.addLegendOptions(builder, false);
-    commonOptionsBuilder.addTooltipOptions(builder, !config.featureToggles.newVizTooltips);
+    commonOptionsBuilder.addTooltipOptions(builder);
   })
   .setSuggestionsSupplier(new StatusHistorySuggestionsSupplier())
   .setDataSupport({ annotations: true });

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

@@ -11,21 +11,10 @@ import {
 } from '@floating-ui/react';
 import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
 
-import {
-  DataFrame,
-  DataFrameFieldIndex,
-  dateTimeFormat,
-  Field,
-  FieldType,
-  formattedValueToString,
-  GrafanaTheme2,
-  LinkModel,
-  systemDateFormats,
-  TimeZone,
-} from '@grafana/data';
+import { DataFrame, DataFrameFieldIndex, Field, formattedValueToString, GrafanaTheme2, LinkModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { config as runtimeConfig } from '@grafana/runtime';
-import { FieldLinkList, Portal, UPlotConfigBuilder, useStyles2 } from '@grafana/ui';
+import { TimeZone } from '@grafana/schema';
+import { Portal, UPlotConfigBuilder, useStyles2 } from '@grafana/ui';
 import { DisplayValue } from 'app/features/visualization/data-hover/DataHoverView';
 import { ExemplarHoverView } from 'app/features/visualization/data-hover/ExemplarHoverView';
 
@@ -138,13 +127,6 @@ export const ExemplarMarker = ({
       ...dataFrame.fields.filter((field) => !fieldsWithLinks.includes(field)),
     ];
 
-    const timeFormatter = (value: number) => {
-      return dateTimeFormat(value, {
-        format: systemDateFormats.fullDate,
-        timeZone,
-      });
-    };
-
     const onClose = () => {
       setIsLocked(false);
       setIsOpen(false);
@@ -177,61 +159,16 @@ export const ExemplarMarker = ({
       marginRight: 0,
     };
 
-    const getExemplarMarkerContent = () => {
-      if (runtimeConfig.featureToggles.newVizTooltips) {
-        return (
-          <>
-            {isLocked && <ExemplarModalHeader onClick={onClose} style={exemplarHeaderCustomStyle} />}
-            <ExemplarHoverView displayValues={displayValues} links={links} />
-          </>
-        );
-      } else {
-        return (
-          <div className={styles.wrapper}>
-            {isLocked && <ExemplarModalHeader onClick={onClose} />}
-            <div className={styles.body}>
-              <div className={styles.header}>
-                <span className={styles.title}>Exemplars</span>
-              </div>
-              <div>
-                <table className={styles.exemplarsTable}>
-                  <tbody>
-                    {orderedDataFrameFields.map((field: Field, i) => {
-                      const value = field.values[dataFrameFieldIndex.fieldIndex];
-                      const links = field.config.links?.length
-                        ? field.getLinks?.({ valueRowIndex: dataFrameFieldIndex.fieldIndex })
-                        : undefined;
-                      return (
-                        <tr key={i}>
-                          <td valign="top">{field.name}</td>
-                          <td>
-                            <div className={styles.valueWrapper}>
-                              <span>{field.type === FieldType.time ? timeFormatter(value) : value}</span>
-                              {links && <FieldLinkList links={links} />}
-                            </div>
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-        );
-      }
-    };
-
     return (
       <div className={styles.tooltip} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
-        {getExemplarMarkerContent()}
+        {isLocked && <ExemplarModalHeader onClick={onClose} style={exemplarHeaderCustomStyle} />}
+        <ExemplarHoverView displayValues={displayValues} links={links} />
       </div>
     );
   }, [
     dataFrame.fields,
     dataFrameFieldIndex,
     styles,
-    timeZone,
     isLocked,
     setClickedExemplarFieldIndex,
     floatingStyles,

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

@@ -1,17 +0,0 @@
-export interface AnnotationsDataFrameViewDTO {
-  id: string;
-  /** @deprecate */
-  dashboardId: number;
-  dashboardUID: string;
-  time: number;
-  timeEnd: number;
-  text: string;
-  tags: string[];
-  alertId?: number;
-  newState?: string;
-  title?: string;
-  color: string;
-  login?: string;
-  avatarUrl?: string;
-  isRegion?: boolean;
-}