{
+ pointerDownRef.current = { x: event.clientX, y: event.clientY };
+ }}
onClick={handleChartClick}
/>
+
{formatMessage({ id: 'panels.plot.empty.selectTopic' })}
diff --git a/src/features/panels/Plot/PlotPanelSettings.tsx b/src/features/panels/Plot/PlotPanelSettings.tsx
index a737930..abf8d80 100644
--- a/src/features/panels/Plot/PlotPanelSettings.tsx
+++ b/src/features/panels/Plot/PlotPanelSettings.tsx
@@ -1,9 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { Eye, EyeOff } from 'lucide-react';
import { useIntl } from 'react-intl';
import { useShallow } from 'zustand/react/shallow';
import type { MessagePipelineState } from '@/core/pipeline/store';
import { useMessagePipeline } from '@/core/pipeline/useMessagePipeline';
+import type { Time, TopicInfo } from '@/core/types/ros';
+import { isJointStateSchema } from '@/shared/ros/rosMessageTypes';
import type { PanelSettingsContext } from '../framework/types';
import {
SettingsField,
@@ -22,10 +24,12 @@ import {
type JointStateField,
type PlotConfig,
type PlotLineStyle,
+ type PlotSeriesConfig,
type PlotXAxisMode,
} from './defaults';
import { exportPlotCsvFromConfig } from './exportCsv';
-import { isArrayLikePlotPath } from './messagePath';
+import { isArrayLikePlotPath, splitPlotPathList } from './messagePath';
+import { detectPlotPaths } from './autoDetect';
import { filterPlottableTopics, isPlottableSchema } from './plottableSchemas';
import {
addPlotSeriesToConfig,
@@ -35,8 +39,180 @@ import {
} from './plotConfigActions';
import { buildTopicByName } from './plotConfigSelectors';
import { PlotLegendSettings } from './PlotLegendSettings';
+import { sampleTopicMessage } from './plotTopicService';
import { usePlotTopicDetection } from './usePlotTopicDetection';
+interface FieldTreeNode {
+ label: string;
+ path?: string;
+ children: FieldTreeNode[];
+}
+
+function pathSegments(path: string): string[] {
+ return path
+ .split('.')
+ .map((segment) => segment.trim())
+ .filter(Boolean);
+}
+
+function buildFieldTree(paths: string[]): FieldTreeNode[] {
+ const root: FieldTreeNode = { label: '', children: [] };
+
+ for (const path of paths) {
+ let cursor = root;
+ const segments = pathSegments(path);
+ for (let i = 0; i < segments.length; i++) {
+ const label = segments[i] ?? '';
+ let next = cursor.children.find((child) => child.label === label);
+ if (!next) {
+ next = { label, children: [] };
+ cursor.children.push(next);
+ }
+ if (i === segments.length - 1) next.path = path;
+ cursor = next;
+ }
+ }
+
+ const sortChildren = (node: FieldTreeNode) => {
+ node.children.sort((a, b) => a.label.localeCompare(b.label));
+ node.children.forEach(sortChildren);
+ };
+ sortChildren(root);
+ return root.children;
+}
+
+function togglePath(path: string, currentPath: string): string {
+ const selected = new Set(splitPlotPathList(currentPath));
+ if (selected.has(path)) {
+ selected.delete(path);
+ } else {
+ selected.add(path);
+ }
+ return Array.from(selected).join(',');
+}
+
+function FieldTreeRows({
+ nodes,
+ selected,
+ onToggle,
+ depth = 0,
+}: {
+ nodes: FieldTreeNode[];
+ selected: Set
;
+ onToggle: (path: string) => void;
+ depth?: number;
+}): React.ReactNode {
+ return nodes.map((node) => (
+
+
+ {node.path ? (
+
+ ) : (
+ {node.label}
+ )}
+
+ {node.children.length > 0 && (
+
+ )}
+
+ {loading && tree.length === 0 ? (
+
+ {formatMessage({ id: 'panels.plot.settings.field.topicFields.loading', defaultMessage: 'Detecting fields…' })}
+
+ ) : tree.length === 0 ? (
+
+ {formatMessage({ id: 'panels.plot.settings.field.topicFields.empty', defaultMessage: 'No numeric fields detected.' })}
+
+ ) : (
+
onPathChange(togglePath(path, series.path))}
+ />
+ )}
+