From 404be5f317691368e555f0195b0e01e2e6a0b4a1 Mon Sep 17 00:00:00 2001 From: Christoph Kluge Date: Wed, 12 Nov 2025 17:20:50 +0100 Subject: [PATCH] add optional legend flip to plots --- web/frontend/src/Node.root.svelte | 1 + web/frontend/src/User.root.svelte | 1 + web/frontend/src/generic/plots/Comparogram.svelte | 11 +++++++---- web/frontend/src/generic/plots/Histogram.svelte | 9 +++++++-- web/frontend/src/generic/plots/MetricPlot.svelte | 12 ++++++++---- web/frontend/src/generic/plots/Stacked.svelte | 9 ++++++--- web/frontend/src/job/Metric.svelte | 2 ++ web/frontend/src/status/StatisticsDash.svelte | 1 + web/frontend/src/status/UsageDash.svelte | 3 +++ web/frontend/src/systems/NodeOverview.svelte | 1 + 10 files changed, 37 insertions(+), 13 deletions(-) diff --git a/web/frontend/src/Node.root.svelte b/web/frontend/src/Node.root.svelte index 5c37ad1..85ea2f0 100644 --- a/web/frontend/src/Node.root.svelte +++ b/web/frontend/src/Node.root.svelte @@ -217,6 +217,7 @@ cluster={clusters.find((c) => c.name == cluster)} subCluster={$nodeMetricsData.data.nodeMetrics[0].subCluster} series={item.metric.series} + enableFlip forNode /> {:else if item.disabled === true && item.metric} diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte index f435846..c5c70a0 100644 --- a/web/frontend/src/User.root.svelte +++ b/web/frontend/src/User.root.svelte @@ -348,6 +348,7 @@ ylabel="Number of Jobs" yunit="Jobs" usesBins + enableFlip /> {/snippet} diff --git a/web/frontend/src/generic/plots/Comparogram.svelte b/web/frontend/src/generic/plots/Comparogram.svelte index 96c06f8..b391a1f 100644 --- a/web/frontend/src/generic/plots/Comparogram.svelte +++ b/web/frontend/src/generic/plots/Comparogram.svelte @@ -271,9 +271,12 @@ function update(u) { const { left, top } = u.cursor; - const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0; - legendEl.style.transform = - "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)"; + const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0; + if (left < (width/2)) { + legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)"; + } else { + legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)"; + } } return { @@ -289,7 +292,7 @@ if (!uplot) { opts.width = ren_width; opts.height = ren_height; - + if (plotSync) { opts.cursor.sync = { key: plotSync.key, diff --git a/web/frontend/src/generic/plots/Histogram.svelte b/web/frontend/src/generic/plots/Histogram.svelte index adbb849..a0af6c2 100644 --- a/web/frontend/src/generic/plots/Histogram.svelte +++ b/web/frontend/src/generic/plots/Histogram.svelte @@ -34,6 +34,7 @@ xtime = false, ylabel = "", yunit = "", + enableFlip = false, } = $props(); /* Const Init */ @@ -117,8 +118,12 @@ function update(u) { const { left, top } = u.cursor; - legendEl.style.transform = - "translate(" + (left + 15) + "px, " + (top + 15) + "px)"; + const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0; + if (enableFlip && (left < (width/2))) { + legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)"; + } else { + legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)"; + } } return { diff --git a/web/frontend/src/generic/plots/MetricPlot.svelte b/web/frontend/src/generic/plots/MetricPlot.svelte index 1073c68..d9dda8e 100644 --- a/web/frontend/src/generic/plots/MetricPlot.svelte +++ b/web/frontend/src/generic/plots/MetricPlot.svelte @@ -49,6 +49,7 @@ thresholdState = null, extendedLegendData = null, plotSync = null, + enableFlip = false, onZoom } = $props(); @@ -396,9 +397,12 @@ function update(u) { const { left, top } = u.cursor; - const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0; - legendEl.style.transform = - "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)"; + const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0; + if (enableFlip && (left < (width/2))) { + legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)"; + } else { + legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)"; + } } if (dataSize <= 12 || useStatsSeries) { @@ -593,7 +597,7 @@ if ((thresholdState === thresholds?.normal)) { opts.scales = {...zoomState} }; } // else: reset scaling to default } - + uplot = new uPlot(opts, plotData, plotWrapper); } else { uplot.setSize({ width: ren_width, height: ren_height }); diff --git a/web/frontend/src/generic/plots/Stacked.svelte b/web/frontend/src/generic/plots/Stacked.svelte index deac815..4c532db 100644 --- a/web/frontend/src/generic/plots/Stacked.svelte +++ b/web/frontend/src/generic/plots/Stacked.svelte @@ -271,9 +271,12 @@ function update(u) { const { left, top } = u.cursor; - const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0; - legendEl.style.transform = - "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)"; + const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0; + if (left < (width/2)) { + legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)"; + } else { + legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)"; + } } return { diff --git a/web/frontend/src/job/Metric.svelte b/web/frontend/src/job/Metric.svelte index 431b7b2..886b483 100644 --- a/web/frontend/src/job/Metric.svelte +++ b/web/frontend/src/job/Metric.svelte @@ -185,6 +185,7 @@ {isShared} {zoomState} {thresholdState} + enableFlip /> {:else if statsSeries[selectedScopeIndex] != null && patternMatches} {/if} {/key} diff --git a/web/frontend/src/status/StatisticsDash.svelte b/web/frontend/src/status/StatisticsDash.svelte index fb2161b..81489a6 100644 --- a/web/frontend/src/status/StatisticsDash.svelte +++ b/web/frontend/src/status/StatisticsDash.svelte @@ -132,6 +132,7 @@ ylabel="Number of Jobs" yunit="Jobs" usesBins + enableFlip /> {/snippet} diff --git a/web/frontend/src/status/UsageDash.svelte b/web/frontend/src/status/UsageDash.svelte index 3b39e55..a64b7d2 100644 --- a/web/frontend/src/status/UsageDash.svelte +++ b/web/frontend/src/status/UsageDash.svelte @@ -255,6 +255,7 @@ height="275" usesBins xtime + enableFlip /> {/key} @@ -359,6 +360,7 @@ ylabel="Number of Jobs" yunit="Jobs" height="275" + enableFlip /> @@ -462,6 +464,7 @@ ylabel="Number of Jobs" yunit="Jobs" height="275" + enableFlip /> diff --git a/web/frontend/src/systems/NodeOverview.svelte b/web/frontend/src/systems/NodeOverview.svelte index 366f705..5051374 100644 --- a/web/frontend/src/systems/NodeOverview.svelte +++ b/web/frontend/src/systems/NodeOverview.svelte @@ -149,6 +149,7 @@ {cluster} subCluster={item.subCluster} forNode + enableFlip /> {/key} {:else if item.disabled === null}