add optional legend flip to plots

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}

web/frontend/src/User.root.svelte

@@ -348,6 +348,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         usesBins
+        enableFlip
       />
     {/snippet}
 

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,

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 {

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 });

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 {

web/frontend/src/job/Metric.svelte

@@ -185,6 +185,7 @@
       {isShared}
       {zoomState}
       {thresholdState}
+      enableFlip
     />
   {:else if statsSeries[selectedScopeIndex] != null && patternMatches}
     <MetricPlot
@@ -202,6 +203,7 @@
       {thresholdState}
       statisticsSeries={statsSeries[selectedScopeIndex]}
       useStatsSeries={!!statsSeries[selectedScopeIndex]}
+      enableFlip
     />
   {/if}
 {/key}

web/frontend/src/status/StatisticsDash.svelte

@@ -132,6 +132,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         usesBins
+        enableFlip
       />
     {/snippet}
     

web/frontend/src/status/UsageDash.svelte

@@ -255,6 +255,7 @@
           height="275"
           usesBins
           xtime
+          enableFlip
         />
       {/key}
     </Col>
@@ -359,6 +360,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         height="275"
+        enableFlip
       />
     </Col>
     <Col xs="6" md="3" lg="2" class="p-2">
@@ -462,6 +464,7 @@
         ylabel="Number of Jobs"
         yunit="Jobs"
         height="275"
+        enableFlip
       />
     </Col>
     <Col xs="6" md="3" lg="2" class="p-2">

web/frontend/src/systems/NodeOverview.svelte

@@ -149,6 +149,7 @@
                 {cluster}
                 subCluster={item.subCluster}
                 forNode
+                enableFlip
               />
             {/key}
           {:else if item.disabled === null}