feat: add configurability to frontend plot zoom

ClusterCockpit · Sep 24, 2024 · 21e4870 · 21e4870
1 parent f1893c5
commit 21e4870
Show file tree

Hide file tree

Showing 19 changed files with 165 additions and 88 deletions.
diff --git a/internal/graph/schema.resolvers.go b/internal/graph/schema.resolvers.go
diff --git a/internal/routerConfig/routes.go b/internal/routerConfig/routes.go
@@ -13,6 +13,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/ClusterCockpit/cc-backend/internal/config"
 	"github.com/ClusterCockpit/cc-backend/internal/graph/model"
 	"github.com/ClusterCockpit/cc-backend/internal/repository"
 	"github.com/ClusterCockpit/cc-backend/internal/util"
@@ -272,12 +273,13 @@ func SetupRoutes(router *mux.Router, buildInfo web.Build) {
 			availableRoles, _ := schema.GetValidRolesMap(user)
 
 			page := web.Page{
-				Title:  title,
-				User:   *user,
-				Roles:  availableRoles,
-				Build:  buildInfo,
-				Config: conf,
-				Infos:  infos,
+				Title:      title,
+				User:       *user,
+				Roles:      availableRoles,
+				Build:      buildInfo,
+				Config:     conf,
+				Resampling: config.Keys.EnableResampling,
+				Infos:      infos,
 			}
 
 			if route.Filter {

diff --git a/pkg/schema/config.go b/pkg/schema/config.go
@@ -76,6 +76,13 @@ type Retention struct {
 	IncludeDB bool   `json:"includeDB"`
 }
 
+type ResampleConfig struct {
+	// Trigger next zoom level at less than this many visible datapoints
+	Trigger int `json:"trigger"`
+	// Array of resampling target resolutions, in seconds; Example: [600,300,60]
+	Resolutions []int `json:"resolutions"`
+}
+
 // Format of the configuration (file). See below for the defaults.
 type ProgramConfig struct {
 	// Address where the http (or https) server will listen on (for example: 'localhost:80').
@@ -133,6 +140,9 @@ type ProgramConfig struct {
 	// be provided! Most options here can be overwritten by the user.
 	UiDefaults map[string]interface{} `json:"ui-defaults"`
 
+	// If exists, will enable dynamic zoom in frontend metric plots using the configured values
+	EnableResampling *ResampleConfig `json:"enable-resampling"`
+
 	// Where to store MachineState files
 	MachineStateDir string `json:"machine-state-dir"`
 

diff --git a/pkg/schema/schemas/config.schema.json b/pkg/schema/schemas/config.schema.json
@@ -424,6 +424,27 @@
                 "plot_general_colorscheme",
                 "plot_list_selectedMetrics"
             ]
+        },
+        "enable-resampling": {
+            "description": "Enable dynamic zoom in frontend metric plots.",
+            "type": "object",
+            "properties": {
+                "trigger": {
+                    "description": "Trigger next zoom level at less than this many visible datapoints.",
+                    "type": "integer"
+                },
+                "resolutions": {
+                    "description": "Array of resampling target resolutions, in seconds.",
+                    "type": "array",
+                    "items": {
+                        "type": "integer"
+                    }
+                }
+            },
+            "required": [
+                "trigger",
+                "resolutions"
+            ]
         }
     },
     "required": [

diff --git a/web/frontend/src/config.entrypoint.js b/web/frontend/src/config.entrypoint.js
@@ -9,6 +9,7 @@ new Config({
         username: username
     },
     context: new Map([
-            ['cc-config', clusterCockpitConfig]
+            ['cc-config', clusterCockpitConfig],
+            ['resampling', resampleConfig]
     ])
 })
diff --git a/web/frontend/src/config/AdminSettings.svelte b/web/frontend/src/config/AdminSettings.svelte
@@ -51,7 +51,5 @@
   <Col>
     <EditProject on:reload={getUserList} />
   </Col>
-  <Col>
-    <Options />
-  </Col>
+  <Options />
 </Row>
diff --git a/web/frontend/src/config/admin/Options.svelte b/web/frontend/src/config/admin/Options.svelte
@@ -3,11 +3,13 @@
  -->
 
 <script>
-  import { onMount } from "svelte";
-  import { Card, CardBody, CardTitle } from "@sveltestrap/sveltestrap";
+  import { getContext, onMount } from "svelte";
+  import { Col, Card, CardBody, CardTitle } from "@sveltestrap/sveltestrap";
 
   let scrambled;
 
+  const resampleConfig = getContext("resampling");
+
   onMount(() => {
     scrambled = window.localStorage.getItem("cc-scramble-names") != null;
   });
@@ -23,16 +25,30 @@
   }
 </script>
 
-<Card class="h-100">
-  <CardBody>
-    <CardTitle class="mb-3">Scramble Names / Presentation Mode</CardTitle>
-    <input
-      type="checkbox"
-      id="scramble-names-checkbox"
-      style="margin-right: 1em;"
-      on:click={handleScramble}
-      bind:checked={scrambled}
-    />
-    Active?
-  </CardBody>
-</Card>
+<Col>
+  <Card class="h-100">
+    <CardBody>
+      <CardTitle class="mb-3">Scramble Names / Presentation Mode</CardTitle>
+      <input
+        type="checkbox"
+        id="scramble-names-checkbox"
+        style="margin-right: 1em;"
+        on:click={handleScramble}
+        bind:checked={scrambled}
+      />
+      Active?
+    </CardBody>
+  </Card>
+</Col>
+
+{#if resampleConfig}
+  <Col> 
+    <Card class="h-100">
+      <CardBody>
+        <CardTitle class="mb-3">Metric Plot Resampling</CardTitle>
+        <p>Triggered at {resampleConfig.trigger} datapoints.</p>
+        <p>Configured resolutions: {resampleConfig.resolutions}</p>
+      </CardBody>
+    </Card>
+  </Col>
+{/if}
diff --git a/web/frontend/src/generic/joblist/JobListRow.svelte b/web/frontend/src/generic/joblist/JobListRow.svelte
@@ -26,13 +26,16 @@
   export let showFootprint;
   export let triggerMetricRefresh = false;
 
+  const resampleConfig = getContext("resampling") || null;
+  const resampleDefault = resampleConfig ? Math.max(...resampleConfig.resolutions) : 0;
+  
   let { id } = job;
   let scopes = job.numNodes == 1
     ? job.numAcc >= 1
       ? ["core", "accelerator"]
       : ["core"]
     : ["node"];
-  let selectedResolution = 600;
+  let selectedResolution = resampleDefault;
   let zoomStates = {};
 
   const cluster = getContext("clusters").find((c) => c.name == job.cluster);
@@ -69,7 +72,7 @@
   `;
 
   function handleZoom(detail, metric) {
-    if (
+    if ( // States have to differ, causes deathloop if just set
         (zoomStates[metric]?.x?.min !== detail?.lastZoomState?.x?.min) &&
         (zoomStates[metric]?.y?.max !== detail?.lastZoomState?.y?.max)
     ) {
@@ -187,7 +190,7 @@
             isShared={job.exclusive != 1}
             numhwthreads={job.numHWThreads}
             numaccs={job.numAcc}
-            zoomState={zoomStates[metric.data.name]}
+            zoomState={zoomStates[metric.data.name] || null}
           />
         {:else if metric.disabled == true && metric.data}
           <Card body color="info"