From ff4beb0dac20a15c430fb2305360925b5301065e Mon Sep 17 00:00:00 2001
From: Guillaume LADORME <Gladorme@users.noreply.github.com>
Date: Mon, 15 Jun 2026 15:16:40 +0200
Subject: [PATCH] [BUGFIX] Align definitions for all explorers

Signed-off-by: Guillaume LADORME <Gladorme@users.noreply.github.com>
---
 .../src/explore/log-explorer/LogExplorer.tsx  | 28 ++---------
 prometheus/src/explore/PrometheusExplorer.tsx | 22 +-------
 .../overview/MetricOverview.tsx               | 50 ++++++++-----------
 pyroscope/src/explore/PyroscopeExplorer.tsx   | 12 +----
 tempo/src/explore/TempoExplorer.tsx           | 12 +----
 5 files changed, 27 insertions(+), 97 deletions(-)

diff --git a/logexplorer/src/explore/log-explorer/LogExplorer.tsx b/logexplorer/src/explore/log-explorer/LogExplorer.tsx
index 83938b4e..dee7c257 100644
--- a/logexplorer/src/explore/log-explorer/LogExplorer.tsx
+++ b/logexplorer/src/explore/log-explorer/LogExplorer.tsx
@@ -22,7 +22,7 @@ import {
   usePluginRegistry,
   useTimeRange,
 } from '@perses-dev/plugin-system';
-import { ReactElement, useMemo, useState } from 'react';
+import { ReactElement, useState } from 'react';
 import { QueryDefinition } from '@perses-dev/spec';
 import { Panel } from '@perses-dev/dashboards';
 import { useExplorerManagerContext } from '@perses-dev/explore';
@@ -39,20 +39,9 @@ const EMPTY_QUERIES: QueryDefinition[] = [];
 function LogsTablePanel({ queries }: { queries: QueryDefinition[] }): ReactElement {
   const height = PANEL_PREVIEW_HEIGHT;
 
-  const definitions = useMemo(
-    () =>
-      queries.length
-        ? queries.map((query) => ({
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec,
-          }))
-        : [],
-    [queries]
-  );
-
   return (
     <Box height={height}>
-      <DataQueriesProvider definitions={definitions}>
+      <DataQueriesProvider definitions={queries}>
         <Panel
           panelOptions={{
             hideHeader: true,
@@ -68,20 +57,9 @@ function LogsTablePanel({ queries }: { queries: QueryDefinition[] }): ReactEleme
 }
 
 function VolumeHistogramPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {
-  const definitions = useMemo(
-    () =>
-      queries.length
-        ? queries.map((query) => ({
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec,
-          }))
-        : [],
-    [queries]
-  );
-
   return (
     <Box height={HISTOGRAM_HEIGHT}>
-      <DataQueriesProvider definitions={definitions}>
+      <DataQueriesProvider definitions={queries}>
         <Panel
           panelOptions={{
             hideHeader: true,
diff --git a/prometheus/src/explore/PrometheusExplorer.tsx b/prometheus/src/explore/PrometheusExplorer.tsx
index fbf4e87b..3e51b630 100644
--- a/prometheus/src/explore/PrometheusExplorer.tsx
+++ b/prometheus/src/explore/PrometheusExplorer.tsx
@@ -36,19 +36,9 @@ function TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElem
 
   const suggestedStepMs = useSuggestedStepMs(width);
 
-  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-  const definitions = queries.length
-    ? queries.map((query) => {
-        return {
-          kind: query.spec.plugin.kind,
-          spec: query.spec.plugin.spec,
-        };
-      })
-    : [];
-
   return (
     <Box ref={boxRef} height={height}>
-      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>
+      <DataQueriesProvider definitions={queries} options={{ suggestedStepMs, mode: 'range' }}>
         <Panel
           panelOptions={{
             hideHeader: true,
@@ -66,17 +56,9 @@ function TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElem
 function MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {
   const height = PANEL_PREVIEW_HEIGHT;
 
-  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-  const definitions = queries.map((query) => {
-    return {
-      kind: query.spec.plugin.kind,
-      spec: query.spec.plugin.spec,
-    };
-  });
-
   return (
     <Box height={height}>
-      <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>
+      <DataQueriesProvider definitions={queries} options={{ mode: 'instant' }}>
         <Panel
           panelOptions={{
             hideHeader: true,
diff --git a/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx b/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx
index de817c09..e0f0c40f 100644
--- a/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx
+++ b/prometheus/src/explore/PrometheusMetricsFinder/overview/MetricOverview.tsx
@@ -18,7 +18,7 @@ import { Panel } from '@perses-dev/dashboards';
 import useResizeObserver from 'use-resize-observer';
 import { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import HelpCircleOutlineIcon from 'mdi-material-ui/HelpCircleOutline';
-import { DatasourceSelector, Definition, QueryDefinition, UnknownSpec } from '@perses-dev/spec';
+import { DatasourceSelector, QueryDefinition } from '@perses-dev/spec';
 import { computeFilterExpr, LabelFilter } from '../types';
 import { useMetricMetadata } from '../utils';
 import { OverviewTab } from './tabs/OverviewTab';
@@ -46,37 +46,27 @@ export function OverviewPanel({
 
   const [rateEnabled, setRateEnabled] = useState(true);
 
-  const { queries, definitions }: { queries: QueryDefinition[]; definitions: Array<Definition<UnknownSpec>> } =
-    useMemo(() => {
-      const expr =
-        type === 'counter' || (rateEnabled && (type === undefined || type === 'summary' || type === 'histogram'))
-          ? `rate({__name__="${metricName}", ${computeFilterExpr(filters)}}[5m])`
-          : `{__name__="${metricName}", ${computeFilterExpr(filters)}}`;
-
-      const queries = [
-        {
-          kind: 'TimeSeriesQuery',
-          spec: {
-            plugin: {
-              kind: 'PrometheusTimeSeriesQuery',
-              spec: {
-                datasource: datasource,
-                query: expr,
-              },
+  const queries: QueryDefinition[] = useMemo(() => {
+    const expr =
+      type === 'counter' || (rateEnabled && (type === undefined || type === 'summary' || type === 'histogram'))
+        ? `rate({__name__="${metricName}", ${computeFilterExpr(filters)}}[5m])`
+        : `{__name__="${metricName}", ${computeFilterExpr(filters)}}`;
+
+    return [
+      {
+        kind: 'TimeSeriesQuery',
+        spec: {
+          plugin: {
+            kind: 'PrometheusTimeSeriesQuery',
+            spec: {
+              datasource: datasource,
+              query: expr,
             },
           },
         },
-      ];
-
-      const definitions = queries.map((query) => {
-        return {
-          kind: query.spec.plugin.kind,
-          spec: query.spec.plugin.spec,
-        };
-      });
-
-      return { queries, definitions };
-    }, [datasource, filters, metricName, rateEnabled, type]);
+      },
+    ];
+  }, [datasource, filters, metricName, rateEnabled, type]);
 
   if (isLoading) {
     return (
@@ -96,7 +86,7 @@ export function OverviewPanel({
           onChange={(_, checked) => setRateEnabled(checked)}
         />
       )}
-      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>
+      <DataQueriesProvider definitions={queries} options={{ suggestedStepMs, mode: 'range' }}>
         <Panel
           panelOptions={{
             hideHeader: true,
diff --git a/pyroscope/src/explore/PyroscopeExplorer.tsx b/pyroscope/src/explore/PyroscopeExplorer.tsx
index 6f0f1788..144eaf28 100644
--- a/pyroscope/src/explore/PyroscopeExplorer.tsx
+++ b/pyroscope/src/explore/PyroscopeExplorer.tsx
@@ -53,16 +53,6 @@ export function PyroscopeExplorer(): ReactElement {
 
   const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);
 
-  // map ProfileQueryDefinition to Definition<UnknownSpec>
-  const definitions = queries.length
-    ? queries.map((query: QueryDefinition) => {
-        return {
-          kind: query.spec.plugin.kind,
-          spec: query.spec.plugin.spec,
-        };
-      })
-    : [];
-
   return (
     <Stack gap={2} sx={{ width: '100%' }}>
       <MultiQueryEditor
@@ -71,7 +61,7 @@ export function PyroscopeExplorer(): ReactElement {
         queries={queryDefinitions}
         onQueryRun={() => setData({ queries: queryDefinitions })}
       />
-      <DataQueriesProvider definitions={definitions}>
+      <DataQueriesProvider definitions={queries}>
         <Box height={980}>
           <FlameGraphPanel queries={queries} />
         </Box>
diff --git a/tempo/src/explore/TempoExplorer.tsx b/tempo/src/explore/TempoExplorer.tsx
index c8ce0100..45e2a945 100644
--- a/tempo/src/explore/TempoExplorer.tsx
+++ b/tempo/src/explore/TempoExplorer.tsx
@@ -148,16 +148,6 @@ export function TempoExplorer(): ReactElement {
 
   const [queryDefinitions, setQueryDefinitions] = useState<QueryDefinition[]>(queries);
 
-  // map TraceQueryDefinition to Definition<UnknownSpec>
-  const definitions = queries.length
-    ? queries.map((query: QueryDefinition) => {
-        return {
-          kind: query.spec.plugin.kind,
-          spec: query.spec.plugin.spec,
-        };
-      })
-    : [];
-
   const firstQuery = (queries[0]?.spec.plugin.spec as TempoTraceQuerySpec | undefined)?.query;
   const isSingleTrace = isValidTraceId(firstQuery ?? '');
 
@@ -171,7 +161,7 @@ export function TempoExplorer(): ReactElement {
       />
 
       <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>
-        <DataQueriesProvider definitions={definitions}>
+        <DataQueriesProvider definitions={queries}>
           <Box height={700}>
             {isSingleTrace ? (
               <TracingGanttChartPanel queries={queries} selectedSpanId={selectedSpanId} />