Skip to content

[ENHANCEMENT] TimeSeriesChart: add query name support for query settings #585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shahrokni merged 7 commits into from
Jul 2, 2026
Merged

[ENHANCEMENT] TimeSeriesChart: add query name support for query settings #585

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2f19a36
wip
Gladorme Feb 25, 2026
71e2bb7
[ENHANCEMENT/BREAKINGCHANGE] timneserieschart: add query name support…
Gladorme Feb 26, 2026
59cbfe1
Align with shared
Gladorme Jun 23, 2026
7b238ae
Fix cue
Gladorme Jun 26, 2026
eb2f80f
QueryName -> QueryIndex
Gladorme Jun 26, 2026
2aa0ea3
Backward compatible
Gladorme Jun 29, 2026
7e50511
Move to index
Gladorme Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 12 additions & 6 deletions timeserieschart/src/QuerySettingsEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import DeleteIcon from 'mdi-material-ui/DeleteOutline';
import AddIcon from 'mdi-material-ui/Plus';
import CloseIcon from 'mdi-material-ui/Close';
import { produce } from 'immer';
import { useDataQueriesContext } from '@perses-dev/plugin-system';
import { generateQueryNames, useDataQueriesContext } from '@perses-dev/plugin-system';
import {
DEFAULT_AREA_OPACITY,
LINE_STYLE_CONFIG,
Expand Down Expand Up @@ -225,6 +225,7 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R

const { queryDefinitions } = useDataQueriesContext();
const queryCount = queryDefinitions.length;
const queryNames = useMemo(() => generateQueryNames(queryDefinitions), [queryDefinitions]);

// Compute the list of query indexes for which query settings are not already defined.
// This is to avoid already-booked indexes to still be selectable in the dropdown(s)
Expand Down Expand Up @@ -262,13 +263,13 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R
No query defined
</Typography>
) : (
querySettingsList?.length &&
querySettingsList.map((querySettings, i) => (
querySettingsList?.map((querySettings, i) => (
<QuerySettingsInput
inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}
key={i}
querySettings={querySettings}
availableQueryIndexes={availableQueryIndexes}
queryNames={queryNames}
onQueryIndexChange={(e) => {
handleQueryIndexChange(e, i);
}}
Expand Down Expand Up @@ -303,6 +304,7 @@ export function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): R
interface QuerySettingsInputProps {
querySettings: QuerySettingsOptions;
availableQueryIndexes: number[];
queryNames: string[];
onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
onColorValueChange: (colorValue: string) => void;
Expand All @@ -325,6 +327,7 @@ interface QuerySettingsInputProps {
function QuerySettingsInput({
querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },
availableQueryIndexes,
queryNames,
onQueryIndexChange,
onColorModeChange,
onColorValueChange,
Expand Down Expand Up @@ -401,7 +404,7 @@ function QuerySettingsInput({
>
{selectableQueryIndexes.map((qi) => (
<MenuItem key={`query-${qi}`} value={qi}>
#{qi + 1}
{queryNames[qi] ?? `#${qi + 1}`}
</MenuItem>
))}
</TextField>
Expand All @@ -414,7 +417,7 @@ function QuerySettingsInput({
<MenuItem value="fixed">Fixed</MenuItem>
</TextField>
<OptionsColorPicker
label={`Query n°${queryIndex + 1}`}
label={queryNames[queryIndex] ?? `Query n°${queryIndex + 1}`}
color={colorValue || DEFAULT_COLOR_VALUE}
onColorChange={onColorValueChange}
/>
Expand Down Expand Up @@ -506,7 +509,10 @@ function QuerySettingsInput({
</Stack>
{/* Delete Button for this query settings */}
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<IconButton aria-label={`delete settings for query n°${queryIndex + 1}`} onClick={onDelete}>
<IconButton
aria-label={`delete settings for ${queryNames[queryIndex] ?? `query n°${queryIndex + 1}`}`}
onClick={onDelete}
>
<DeleteIcon />
</IconButton>
</Box>
Expand Down
Loading