diff --git a/web/frontend/rollup.config.mjs b/web/frontend/rollup.config.mjs
index 44a7688..8336287 100644
--- a/web/frontend/rollup.config.mjs
+++ b/web/frontend/rollup.config.mjs
@@ -5,8 +5,8 @@ import resolve from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
 import css from 'rollup-plugin-css-only';
 
-// const production = !process.env.ROLLUP_WATCH;
-const production = false
+const production = !process.env.ROLLUP_WATCH;
+// const production = false
 
 const plugins = [
     svelte({
diff --git a/web/frontend/src/List.root.svelte b/web/frontend/src/List.root.svelte
index 87a678d..9afd2d5 100644
--- a/web/frontend/src/List.root.svelte
+++ b/web/frontend/src/List.root.svelte
@@ -4,12 +4,20 @@
 <script>
     import { onMount } from "svelte";
     import { init } from "./utils.js";
-    import { Row, Col, Button, Icon, Table,
-        Card, Spinner, InputGroup, Input, } from "sveltestrap";
+    import {
+        Row,
+        Col,
+        Button,
+        Icon,
+        Table,
+        Card,
+        Spinner,
+        InputGroup,
+        Input,
+    } from "sveltestrap";
     import Filters from "./filters/Filters.svelte";
     import { queryStore, gql, getContextClient } from "@urql/svelte";
     import { scramble, scrambleNames } from "./joblist/JobInfo.svelte";
-  import { UniqueInputFieldNamesRule } from "graphql";
 
     const {} = init();
 
@@ -21,9 +29,9 @@
         "Invalid list type provided!"
     );
 
-    let filter = []
+    let filter = [];
 
-    $: stats = queryStore({
+    const stats = queryStore({
         client: getContextClient(),
         query: gql`
         query($filter: [JobFilter!]!) {
@@ -36,7 +44,7 @@
         }
     }`,
         variables: { filter },
-        pause: true
+        pause: true,
     });
 
     let filters;
@@ -92,7 +100,7 @@
             startTimeQuickSelect={true}
             menuText="Only {type.toLowerCase()}s with jobs that match the filters will show up"
             on:update={({ detail }) => {
-                $stats.variables = { filter: detail.filters }
+                filter = detail.filters;
                 stats.resume();
             }}
         />
@@ -102,7 +110,10 @@
     <thead>
         <tr>
             <th scope="col">
-                {({ USER: "Username", PROJECT: "Project Name" })[type]}
+                <!-- {({ -->
+                <!--     USER: "Username", -->
+                <!--     PROJECT: "Project Name", -->
+                <!-- })[type]} -->
                 <Button
                     color={sorting.field == "id" ? "primary" : "light"}
                     size="sm"
diff --git a/web/frontend/src/joblist/JobList.svelte b/web/frontend/src/joblist/JobList.svelte
index 5985db5..d63c95a 100644
--- a/web/frontend/src/joblist/JobList.svelte
+++ b/web/frontend/src/joblist/JobList.svelte
@@ -9,84 +9,125 @@
     - update(filters?: [JobFilter])
  -->
 <script>
-    import { queryStore, gql, getContextClient , mutationStore } from '@urql/svelte'
-    import { getContext } from 'svelte';
-    import { Row, Table, Card, Spinner } from 'sveltestrap'
-    import Pagination from './Pagination.svelte'
-    import JobListRow from './Row.svelte'
-    import { stickyHeader } from '../utils.js'
+    import {
+        queryStore,
+        gql,
+        getContextClient,
+        mutationStore,
+    } from "@urql/svelte";
+    import { getContext } from "svelte";
+    import { Row, Table, Card, Spinner } from "sveltestrap";
+    import Pagination from "./Pagination.svelte";
+    import JobListRow from "./Row.svelte";
+    import { stickyHeader } from "../utils.js";
 
-    const ccconfig = getContext('cc-config'),
-          clusters = getContext('clusters'),
-          initialized = getContext('initialized')
+    const ccconfig = getContext("cc-config"),
+        clusters = getContext("clusters"),
+        initialized = getContext("initialized");
 
-    export let sorting = { field: "startTime", order: "DESC" }
-    export let matchedJobs = 0
-    export let metrics = ccconfig.plot_list_selectedMetrics
+    export let sorting = { field: "startTime", order: "DESC" };
+    export let matchedJobs = 0;
+    export let metrics = ccconfig.plot_list_selectedMetrics;
 
-    let itemsPerPage = ccconfig.plot_list_jobsPerPage
-    let page = 1
-    let paging = { itemsPerPage, page }
-    let filter = []
+    let itemsPerPage = ccconfig.plot_list_jobsPerPage;
+    let page = 1;
+    let paging = { itemsPerPage, page };
+    let filter = [];
 
-    $: jobs = queryStore({
+    const jobs = queryStore({
         client: getContextClient(),
         query: gql`
-        query($filter: [JobFilter!]!, $sorting: OrderByInput!, $paging: PageRequest! ){
-            jobs(filter: $filter, order: $sorting, page: $paging) {
-                items {
-                    id, jobId, user, project, jobName, cluster, subCluster, startTime,
-                duration, numNodes, numHWThreads, numAcc, walltime, resources { hostname },
-                SMT, exclusive, partition, arrayJobId,
-                monitoringStatus, state,
-                tags { id, type, name }
-                userData { name }
-                metaData
+            query (
+                $filter: [JobFilter!]!
+                $sorting: OrderByInput!
+                $paging: PageRequest!
+            ) {
+                jobs(filter: $filter, order: $sorting, page: $paging) {
+                    items {
+                        id
+                        jobId
+                        user
+                        project
+                        jobName
+                        cluster
+                        subCluster
+                        startTime
+                        duration
+                        numNodes
+                        numHWThreads
+                        numAcc
+                        walltime
+                        resources {
+                            hostname
+                        }
+                        SMT
+                        exclusive
+                        partition
+                        arrayJobId
+                        monitoringStatus
+                        state
+                        tags {
+                            id
+                            type
+                            name
+                        }
+                        userData {
+                            name
+                        }
+                        metaData
+                    }
+                    count
+                }
             }
-            count
-        }
-    }`,
-    variables: { paging, sorting, filter },
-    pause: true
-    })
+        `,
+        variables: { paging, sorting, filter },
+        pause: true,
+    });
 
     const updateConfiguration = ({ name, value }) => {
-    result = mutationStore({
-        client: getContextClient(),
-        query: gql`mutation($name: String!, $value: String!) {
-            updateConfiguration(name: $name, value: $value)
-        }`,
-        variables: {name, value}
-    })
-    }
+        result = mutationStore({
+            client: getContextClient(),
+            query: gql`
+                mutation ($name: String!, $value: String!) {
+                    updateConfiguration(name: $name, value: $value)
+                }
+            `,
+            variables: { name, value },
+        });
+    };
 
     // $: $jobs.variables = { ...$jobs.variables, sorting, paging }
-    $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0
+    $: matchedJobs = $jobs.data != null ? $jobs.data.jobs.count : 0;
 
     // (Re-)query and optionally set new filters.
     export function update(filters) {
         if (filters != null) {
-            let minRunningFor = ccconfig.plot_list_hideShortRunningJobs
+            let minRunningFor = ccconfig.plot_list_hideShortRunningJobs;
             if (minRunningFor && minRunningFor > 0) {
-                filters.push({ minRunningFor })
+                filters.push({ minRunningFor });
             }
 
-            $jobs.variables.filter = filters
+            filter = filters;
             // console.log('filters:', ...filters.map(f => Object.entries(f)).flat(2))
         }
 
-        page = 1
-        $jobs.variables.paging = paging = { page, itemsPerPage };
-        $jobs.context.pause = false
-        $jobs.reexecute({ requestPolicy: 'network-only' })
+        page = 1;
+        paging = paging = { page, itemsPerPage };
+        jobs.resume();
+        // $jobs.reexecute({ requestPolicy: 'network-only' })
     }
 
-    let tableWidth = null
-    let jobInfoColumnWidth = 250
-    $: plotWidth = Math.floor((tableWidth - jobInfoColumnWidth) / metrics.length - 10)
+    let tableWidth = null;
+    let jobInfoColumnWidth = 250;
+    $: plotWidth = Math.floor(
+        (tableWidth - jobInfoColumnWidth) / metrics.length - 10
+    );
 
-    let headerPaddingTop = 0
-    stickyHeader('.cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)', (x) => (headerPaddingTop = x))
+    let headerPaddingTop = 0;
+    stickyHeader(
+        ".cc-table-wrapper > table.table >thead > tr > th.position-sticky:nth-child(1)",
+        (x) => (headerPaddingTop = x)
+    );
 </script>
 
 <Row>
@@ -94,20 +135,43 @@
         <Table cellspacing="0px" cellpadding="0px">
             <thead>
                 <tr>
-                    <th class="position-sticky top-0" scope="col" style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px">
+                    <th
+                        class="position-sticky top-0"
+                        scope="col"
+                        style="width: {jobInfoColumnWidth}px; padding-top: {headerPaddingTop}px"
+                    >
                         Job Info
                     </th>
                     {#each metrics as metric (metric)}
-                        <th class="position-sticky top-0 text-center" scope="col" style="width: {plotWidth}px; padding-top: {headerPaddingTop}px">
+                        <th
+                            class="position-sticky top-0 text-center"
+                            scope="col"
+                            style="width: {plotWidth}px; padding-top: {headerPaddingTop}px"
+                        >
                             {metric}
                             {#if $initialized}
                                 ({clusters
-                                    .map(cluster => cluster.metricConfig.find(m => m.name == metric))
-                                    .filter(m => m != null)
-                                    .map(m => (m.unit?.prefix?m.unit?.prefix:'') + (m.unit?.base?m.unit?.base:'')) // Build unitStr
-                                    .reduce((arr, unitStr) => arr.includes(unitStr) ? arr : [...arr, unitStr], []) // w/o this, output would be [unitStr, unitStr]
-                                    .join(', ')
-                                })
+                                    .map((cluster) =>
+                                        cluster.metricConfig.find(
+                                            (m) => m.name == metric
+                                        )
+                                    )
+                                    .filter((m) => m != null)
+                                    .map(
+                                        (m) =>
+                                            (m.unit?.prefix
+                                                ? m.unit?.prefix
+                                                : "") +
+                                            (m.unit?.base ? m.unit?.base : "")
+                                    ) // Build unitStr
+                                    .reduce(
+                                        (arr, unitStr) =>
+                                            arr.includes(unitStr)
+                                                ? arr
+                                                : [...arr, unitStr],
+                                        []
+                                    ) // w/o this, output would be [unitStr, unitStr]
+                                    .join(", ")})
                             {/if}
                         </th>
                     {/each}
@@ -116,28 +180,27 @@
             <tbody>
                 {#if $jobs.error}
                     <tr>
-                        <td colspan="{metrics.length + 1}">
-                            <Card body color="danger" class="mb-3"><h2>{$jobs.error.message}</h2></Card>
+                        <td colspan={metrics.length + 1}>
+                            <Card body color="danger" class="mb-3"
+                                ><h2>{$jobs.error.message}</h2></Card
+                            >
                         </td>
                     </tr>
                 {:else if $jobs.fetching || !$jobs.data}
                     <tr>
-                        <td colspan="{metrics.length + 1}">
+                        <td colspan={metrics.length + 1}>
                             <Spinner secondary />
                         </td>
                     </tr>
                 {:else if $jobs.data && $initialized}
                     {#each $jobs.data.jobs.items as job (job)}
-                        <JobListRow
-                            job={job}
-                            metrics={metrics}
-                            plotWidth={plotWidth} />
+                        <JobListRow {job} {metrics} {plotWidth} />
                     {:else}
-                    <tr>
-                        <td colspan="{metrics.length + 1}">
-                            No jobs found
-                        </td>
-                    </tr>
+                        <tr>
+                            <td colspan={metrics.length + 1}>
+                                No jobs found
+                            </td>
+                        </tr>
                     {/each}
                 {/if}
             </tbody>
@@ -146,24 +209,24 @@
 </Row>
 
 <Pagination
-    bind:page={page}
+    bind:page
     {itemsPerPage}
     itemText="Jobs"
     totalItems={matchedJobs}
     on:update={({ detail }) => {
         if (detail.itemsPerPage != itemsPerPage) {
-            itemsPerPage = detail.itemsPerPage
+            itemsPerPage = detail.itemsPerPage;
             updateConfiguration({
                 name: "plot_list_jobsPerPage",
-                value: itemsPerPage.toString()
-            }).then(res => {
-                if (res.error)
-                    console.error(res.error);
-            })
+                value: itemsPerPage.toString(),
+            }).then((res) => {
+                if (res.error) console.error(res.error);
+            });
         }
 
-        paging = { itemsPerPage: detail.itemsPerPage, page: detail.page }
-    }} />
+        paging = { itemsPerPage: detail.itemsPerPage, page: detail.page };
+    }}
+/>
 
 <style>
     .cc-table-wrapper {
diff --git a/web/frontend/src/joblist/Row.svelte b/web/frontend/src/joblist/Row.svelte
index aa8eb4f..20be176 100644
--- a/web/frontend/src/joblist/Row.svelte
+++ b/web/frontend/src/joblist/Row.svelte
@@ -9,136 +9,173 @@
  -->
 
 <script>
-    import { queryStore, gql, getContextClient } from '@urql/svelte'
-    import { getContext } from 'svelte'
-    import { Card, Spinner } from 'sveltestrap'
-    import MetricPlot from '../plots/MetricPlot.svelte'
-    import JobInfo from './JobInfo.svelte'
-    import { maxScope } from '../utils.js'
+    import { queryStore, gql, getContextClient } from "@urql/svelte";
+    import { getContext } from "svelte";
+    import { Card, Spinner } from "sveltestrap";
+    import MetricPlot from "../plots/MetricPlot.svelte";
+    import JobInfo from "./JobInfo.svelte";
+    import { maxScope } from "../utils.js";
 
-    export let job
-    export let metrics
-    export let plotWidth
-    export let plotHeight = 275
+    export let job;
+    export let metrics;
+    export let plotWidth;
+    export let plotHeight = 275;
 
-    let scopes = [job.numNodes == 1 ? 'core' : 'node']
+    let { id } = job;
+    let scopes = [job.numNodes == 1 ? "core" : "node"];
 
-    const cluster = getContext('clusters').find(c => c.name == job.cluster)
+    const cluster = getContext("clusters").find((c) => c.name == job.cluster);
     // Get all MetricConfs which include subCluster-specific settings for this job
-    const metricConfig = getContext('metrics')
+    const metricConfig = getContext("metrics");
     const metricsQuery = queryStore({
         client: getContextClient(),
         query: gql`
-        query($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
-        jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
-            name
-            scope
-            metric {
-                unit { prefix, base }, timestep
-                statisticsSeries { min, mean, max }
-                series {
-                    hostname, id, data
-                    statistics { min, avg, max }
-                }
-            }
-        }
-    }`,
-    pause: true,
-    variables: {
-        id: job.id,
-        metrics,
-        scopes}
-    })
-
-    const selectScope = (jobMetrics) => jobMetrics.reduce(
-        (a, b) => maxScope([a.scope, b.scope]) == a.scope
-            ? (job.numNodes > 1 ? a : b)
-            : (job.numNodes > 1 ? b : a), jobMetrics[0])
-
-    const sortAndSelectScope = (jobMetrics) => metrics
-        .map(function(name) {
-            // Get MetricConf for this selected/requested metric
-            let thisConfig = metricConfig(cluster, name)
-            let thisSCIndex = thisConfig.subClusters.findIndex(sc => sc.name == job.subCluster)
-            // Check if Subcluster has MetricConf: If not found (index == -1), no further remove flag check required
-            if (thisSCIndex >= 0) {
-                // SubCluster Config present: Check if remove flag is set
-                if (thisConfig.subClusters[thisSCIndex].remove == true) {
-                    // Return null data and informational flag
-                    return {removed: true, data: null}
-                } else {
-                    // load and return metric, if data available
-                    let thisMetric = jobMetrics.filter(jobMetric => jobMetric.name == name) // Returns Array
-                    if (thisMetric.length > 0) {
-                        return {removed: false, data: thisMetric}
-                    } else {
-                        return {removed: false, data: null}
+            query ($id: ID!, $metrics: [String!]!, $scopes: [MetricScope!]!) {
+                jobMetrics(id: $id, metrics: $metrics, scopes: $scopes) {
+                    name
+                    scope
+                    metric {
+                        unit {
+                            prefix
+                            base
+                        }
+                        timestep
+                        statisticsSeries {
+                            min
+                            mean
+                            max
+                        }
+                        series {
+                            hostname
+                            id
+                            data
+                            statistics {
+                                min
+                                avg
+                                max
+                            }
+                        }
                     }
                 }
-            } else {
-                // No specific subCluster config: 'remove' flag not set, deemed false -> load and return metric, if data available
-                let thisMetric = jobMetrics.filter(jobMetric => jobMetric.name == name) // Returns Array
-                if (thisMetric.length > 0) {
-                    return {removed: false, data: thisMetric}
+            }
+        `,
+        pause: true,
+        variables: {
+            id,
+            metrics,
+            scopes,
+        },
+    });
+
+    const selectScope = (jobMetrics) =>
+        jobMetrics.reduce(
+            (a, b) =>
+                maxScope([a.scope, b.scope]) == a.scope
+                    ? job.numNodes > 1
+                        ? a
+                        : b
+                    : job.numNodes > 1
+                    ? b
+                    : a,
+            jobMetrics[0]
+        );
+
+    const sortAndSelectScope = (jobMetrics) =>
+        metrics
+            .map(function (name) {
+                // Get MetricConf for this selected/requested metric
+                let thisConfig = metricConfig(cluster, name);
+                let thisSCIndex = thisConfig.subClusters.findIndex(
+                    (sc) => sc.name == job.subCluster
+                );
+                // Check if Subcluster has MetricConf: If not found (index == -1), no further remove flag check required
+                if (thisSCIndex >= 0) {
+                    // SubCluster Config present: Check if remove flag is set
+                    if (thisConfig.subClusters[thisSCIndex].remove == true) {
+                        // Return null data and informational flag
+                        return { removed: true, data: null };
+                    } else {
+                        // load and return metric, if data available
+                        let thisMetric = jobMetrics.filter(
+                            (jobMetric) => jobMetric.name == name
+                        ); // Returns Array
+                        if (thisMetric.length > 0) {
+                            return { removed: false, data: thisMetric };
+                        } else {
+                            return { removed: false, data: null };
+                        }
+                    }
                 } else {
-                    return {removed: false, data: null}
+                    // No specific subCluster config: 'remove' flag not set, deemed false -> load and return metric, if data available
+                    let thisMetric = jobMetrics.filter(
+                        (jobMetric) => jobMetric.name == name
+                    ); // Returns Array
+                    if (thisMetric.length > 0) {
+                        return { removed: false, data: thisMetric };
+                    } else {
+                        return { removed: false, data: null };
+                    }
                 }
-            }
-        })
-        .map(function(jobMetrics) {
-            if (jobMetrics.data != null && jobMetrics.data.length > 0) {
-                return {removed: jobMetrics.removed, data: selectScope(jobMetrics.data)}
-            } else {
-                return jobMetrics
-            }
-        })
+            })
+            .map(function (jobMetrics) {
+                if (jobMetrics.data != null && jobMetrics.data.length > 0) {
+                    return {
+                        removed: jobMetrics.removed,
+                        data: selectScope(jobMetrics.data),
+                    };
+                } else {
+                    return jobMetrics;
+                }
+            });
 
-    $: metricsQuery.variables = { id: job.id, metrics, scopes }
+    // $: metricsQuery.variables = { id: job.id, metrics, scopes };
 
-    if (job.monitoringStatus)
-        $metricsQuery.resume()
+    if (job.monitoringStatus) metricsQuery.resume();
 </script>
 
 <tr>
     <td>
-        <JobInfo job={job}/>
+        <JobInfo {job} />
     </td>
     {#if job.monitoringStatus == 0 || job.monitoringStatus == 2}
-        <td colspan="{metrics.length}">
+        <td colspan={metrics.length}>
             <Card body color="warning">Not monitored or archiving failed</Card>
         </td>
     {:else if $metricsQuery.fetching}
-        <td colspan="{metrics.length}" style="text-align: center;">
+        <td colspan={metrics.length} style="text-align: center;">
             <Spinner secondary />
         </td>
     {:else if $metricsQuery.error}
-        <td colspan="{metrics.length}">
+        <td colspan={metrics.length}>
             <Card body color="danger" class="mb-3">
                 {$metricsQuery.error.message.length > 500
-                    ? $metricsQuery.error.message.substring(0, 499)+'...'
+                    ? $metricsQuery.error.message.substring(0, 499) + "..."
                     : $metricsQuery.error.message}
             </Card>
         </td>
     {:else}
         {#each sortAndSelectScope($metricsQuery.data.jobMetrics) as metric, i (metric || i)}
             <td>
-            <!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->
-            {#if metric.removed == false && metric.data != null}
-                <MetricPlot
-                    width={plotWidth}
-                    height={plotHeight}
-                    timestep={metric.data.metric.timestep}
-                    scope={metric.data.scope}
-                    series={metric.data.metric.series}
-                    statisticsSeries={metric.data.metric.statisticsSeries}
-                    metric={metric.data.name}
-                    cluster={cluster}
-                    subCluster={job.subCluster} />
-            {:else if metric.removed == true && metric.data == null}
-                <Card body color="info">Metric disabled for subcluster '{ job.subCluster }'</Card>
-            {:else}
-                <Card body color="warning">Missing Data</Card>
-            {/if}
+                <!-- Subluster Metricconfig remove keyword for jobtables (joblist main, user joblist, project joblist) to be used here as toplevel case-->
+                {#if metric.removed == false && metric.data != null}
+                    <MetricPlot
+                        width={plotWidth}
+                        height={plotHeight}
+                        timestep={metric.data.metric.timestep}
+                        scope={metric.data.scope}
+                        series={metric.data.metric.series}
+                        statisticsSeries={metric.data.metric.statisticsSeries}
+                        metric={metric.data.name}
+                        {cluster}
+                        subCluster={job.subCluster}
+                    />
+                {:else if metric.removed == true && metric.data == null}
+                    <Card body color="info"
+                        >Metric disabled for subcluster '{job.subCluster}'</Card
+                    >
+                {:else}
+                    <Card body color="warning">Missing Data</Card>
+                {/if}
             </td>
         {/each}
     {/if}
diff --git a/web/frontend/src/utils.js b/web/frontend/src/utils.js
index 73c1575..a46bd3c 100644
--- a/web/frontend/src/utils.js
+++ b/web/frontend/src/utils.js
@@ -1,8 +1,8 @@
 import { expiringCacheExchange } from "./cache-exchange.js";
 import {
-  CreateClient,
-  setContextClient,
-  fetchExchange,
+    Client,
+    setContextClient,
+    fetchExchange,
 } from "@urql/svelte";
 import { setContext, getContext, hasContext, onDestroy, tick } from "svelte";
 import { readable } from "svelte/store";
@@ -18,28 +18,28 @@ import { readable } from "svelte/store";
  * - Adds 'metrics' to the context, a function that takes a cluster and metric name and returns the MetricConfig (or undefined)
  */
 export function init(extraInitQuery = "") {
-  const jwt = hasContext("jwt")
-    ? getContext("jwt")
-    : getContext("cc-config")["jwt"];
+    const jwt = hasContext("jwt")
+        ? getContext("jwt")
+        : getContext("cc-config")["jwt"];
 
-  const client = CreateClient({
-    url: `${window.location.origin}/query`,
-    fetchOptions:
-      jwt != null ? { headers: { Authorization: `Bearer ${jwt}` } } : {},
-    exchanges: [
-      expiringCacheExchange({
-        ttl: 5 * 60 * 1000,
-        maxSize: 150,
-      }),
-      fetchExchange,
-    ],
-  });
+    const client = new Client({
+        url: `${window.location.origin}/query`,
+        fetchOptions:
+            jwt != null ? { headers: { Authorization: `Bearer ${jwt}` } } : {},
+        exchanges: [
+            expiringCacheExchange({
+                ttl: 5 * 60 * 1000,
+                maxSize: 150,
+            }),
+            fetchExchange,
+        ],
+    });
 
-  setContextClient(client);
+    setContextClient(client);
 
-  const query = client
-    .query(
-      `query {
+    const query = client
+        .query(
+            `query {
         clusters {
             name,
             metricConfig {
@@ -68,246 +68,246 @@ export function init(extraInitQuery = "") {
         tags { id, name, type }
         ${extraInitQuery}
     }`
-    )
-    .toPromise();
+        )
+        .toPromise();
 
-  let state = { fetching: true, error: null, data: null };
-  let subscribers = [];
-  const subscribe = (callback) => {
-    callback(state);
-    subscribers.push(callback);
-    return () => {
-      subscribers = subscribers.filter((cb) => cb != callback);
+    let state = { fetching: true, error: null, data: null };
+    let subscribers = [];
+    const subscribe = (callback) => {
+        callback(state);
+        subscribers.push(callback);
+        return () => {
+            subscribers = subscribers.filter((cb) => cb != callback);
+        };
     };
-  };
 
-  const tags = [],
-    clusters = [];
-  setContext("tags", tags);
-  setContext("clusters", clusters);
-  setContext("metrics", (cluster, metric) => {
-    if (typeof cluster !== "object")
-      cluster = clusters.find((c) => c.name == cluster);
+    const tags = [],
+        clusters = [];
+    setContext("tags", tags);
+    setContext("clusters", clusters);
+    setContext("metrics", (cluster, metric) => {
+        if (typeof cluster !== "object")
+            cluster = clusters.find((c) => c.name == cluster);
 
-    return cluster.metricConfig.find((m) => m.name == metric);
-  });
-  setContext("on-init", (callback) =>
-    state.fetching ? subscribers.push(callback) : callback(state)
-  );
-  setContext(
-    "initialized",
-    readable(false, (set) => subscribers.push(() => set(true)))
-  );
+        return cluster.metricConfig.find((m) => m.name == metric);
+    });
+    setContext("on-init", (callback) =>
+        state.fetching ? subscribers.push(callback) : callback(state)
+    );
+    setContext(
+        "initialized",
+        readable(false, (set) => subscribers.push(() => set(true)))
+    );
 
-  query.then(({ error, data }) => {
-    state.fetching = false;
-    if (error != null) {
-      console.error(error);
-      state.error = error;
-      tick().then(() => subscribers.forEach((cb) => cb(state)));
-      return;
-    }
+    query.then(({ error, data }) => {
+        state.fetching = false;
+        if (error != null) {
+            console.error(error);
+            state.error = error;
+            tick().then(() => subscribers.forEach((cb) => cb(state)));
+            return;
+        }
 
-    for (let tag of data.tags) tags.push(tag);
+        for (let tag of data.tags) tags.push(tag);
 
-    for (let cluster of data.clusters) clusters.push(cluster);
+        for (let cluster of data.clusters) clusters.push(cluster);
 
-    state.data = data;
-    tick().then(() => subscribers.forEach((cb) => cb(state)));
-  });
+        state.data = data;
+        tick().then(() => subscribers.forEach((cb) => cb(state)));
+    });
 
-  return {
-    query: { subscribe },
-    tags,
-    clusters,
-  };
+    return {
+        query: { subscribe },
+        tags,
+        clusters,
+    };
 }
 
 export function formatNumber(x) {
-  let suffix = "";
-  if (x >= 1000000000) {
-    x /= 1000000;
-    suffix = "G";
-  } else if (x >= 1000000) {
-    x /= 1000000;
-    suffix = "M";
-  } else if (x >= 1000) {
-    x /= 1000;
-    suffix = "k";
-  }
+    let suffix = "";
+    if (x >= 1000000000) {
+        x /= 1000000;
+        suffix = "G";
+    } else if (x >= 1000000) {
+        x /= 1000000;
+        suffix = "M";
+    } else if (x >= 1000) {
+        x /= 1000;
+        suffix = "k";
+    }
 
-  return `${Math.round(x * 100) / 100} ${suffix}`;
+    return `${Math.round(x * 100) / 100} ${suffix}`;
 }
 
 // Use https://developer.mozilla.org/en-US/docs/Web/API/structuredClone instead?
 export function deepCopy(x) {
-  return JSON.parse(JSON.stringify(x));
+    return JSON.parse(JSON.stringify(x));
 }
 
 function fuzzyMatch(term, string) {
-  return string.toLowerCase().includes(term);
+    return string.toLowerCase().includes(term);
 }
 
 export function fuzzySearchTags(term, tags) {
-  if (!tags) return [];
+    if (!tags) return [];
 
-  let results = [];
-  let termparts = term
-    .split(":")
-    .map((s) => s.trim())
-    .filter((s) => s.length > 0);
+    let results = [];
+    let termparts = term
+        .split(":")
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0);
 
-  if (termparts.length == 0) {
-    results = tags.slice();
-  } else if (termparts.length == 1) {
-    for (let tag of tags)
-      if (
-        fuzzyMatch(termparts[0], tag.type) ||
-        fuzzyMatch(termparts[0], tag.name)
-      )
-        results.push(tag);
-  } else if (termparts.length == 2) {
-    for (let tag of tags)
-      if (
-        fuzzyMatch(termparts[0], tag.type) &&
-        fuzzyMatch(termparts[1], tag.name)
-      )
-        results.push(tag);
-  }
+    if (termparts.length == 0) {
+        results = tags.slice();
+    } else if (termparts.length == 1) {
+        for (let tag of tags)
+            if (
+                fuzzyMatch(termparts[0], tag.type) ||
+                fuzzyMatch(termparts[0], tag.name)
+            )
+                results.push(tag);
+    } else if (termparts.length == 2) {
+        for (let tag of tags)
+            if (
+                fuzzyMatch(termparts[0], tag.type) &&
+                fuzzyMatch(termparts[1], tag.name)
+            )
+                results.push(tag);
+    }
 
-  return results.sort((a, b) => {
-    if (a.type < b.type) return -1;
-    if (a.type > b.type) return 1;
-    if (a.name < b.name) return -1;
-    if (a.name > b.name) return 1;
-    return 0;
-  });
+    return results.sort((a, b) => {
+        if (a.type < b.type) return -1;
+        if (a.type > b.type) return 1;
+        if (a.name < b.name) return -1;
+        if (a.name > b.name) return 1;
+        return 0;
+    });
 }
 
 export function groupByScope(jobMetrics) {
-  let metrics = new Map();
-  for (let metric of jobMetrics) {
-    if (metrics.has(metric.name)) metrics.get(metric.name).push(metric);
-    else metrics.set(metric.name, [metric]);
-  }
+    let metrics = new Map();
+    for (let metric of jobMetrics) {
+        if (metrics.has(metric.name)) metrics.get(metric.name).push(metric);
+        else metrics.set(metric.name, [metric]);
+    }
 
-  return [...metrics.values()].sort((a, b) =>
-    a[0].name.localeCompare(b[0].name)
-  );
+    return [...metrics.values()].sort((a, b) =>
+        a[0].name.localeCompare(b[0].name)
+    );
 }
 
 const scopeGranularity = {
-  node: 10,
-  socket: 5,
-  accelerator: 5,
-  core: 2,
-  hwthread: 1,
+    node: 10,
+    socket: 5,
+    accelerator: 5,
+    core: 2,
+    hwthread: 1,
 };
 
 export function maxScope(scopes) {
-  console.assert(
-    scopes.length > 0 && scopes.every((x) => scopeGranularity[x] != null)
-  );
-  let sm = scopes[0],
-    gran = scopeGranularity[scopes[0]];
-  for (let scope of scopes) {
-    let otherGran = scopeGranularity[scope];
-    if (otherGran > gran) {
-      sm = scope;
-      gran = otherGran;
+    console.assert(
+        scopes.length > 0 && scopes.every((x) => scopeGranularity[x] != null)
+    );
+    let sm = scopes[0],
+        gran = scopeGranularity[scopes[0]];
+    for (let scope of scopes) {
+        let otherGran = scopeGranularity[scope];
+        if (otherGran > gran) {
+            sm = scope;
+            gran = otherGran;
+        }
     }
-  }
-  return sm;
+    return sm;
 }
 
 export function minScope(scopes) {
-  console.assert(
-    scopes.length > 0 && scopes.every((x) => scopeGranularity[x] != null)
-  );
-  let sm = scopes[0],
-    gran = scopeGranularity[scopes[0]];
-  for (let scope of scopes) {
-    let otherGran = scopeGranularity[scope];
-    if (otherGran < gran) {
-      sm = scope;
-      gran = otherGran;
+    console.assert(
+        scopes.length > 0 && scopes.every((x) => scopeGranularity[x] != null)
+    );
+    let sm = scopes[0],
+        gran = scopeGranularity[scopes[0]];
+    for (let scope of scopes) {
+        let otherGran = scopeGranularity[scope];
+        if (otherGran < gran) {
+            sm = scope;
+            gran = otherGran;
+        }
     }
-  }
-  return sm;
+    return sm;
 }
 
 export async function fetchMetrics(job, metrics, scopes) {
-  if (job.monitoringStatus == 0) return null;
+    if (job.monitoringStatus == 0) return null;
 
-  let query = [];
-  if (metrics != null) {
-    for (let metric of metrics) {
-      query.push(`metric=${metric}`);
+    let query = [];
+    if (metrics != null) {
+        for (let metric of metrics) {
+            query.push(`metric=${metric}`);
+        }
     }
-  }
-  if (scopes != null) {
-    for (let scope of scopes) {
-      query.push(`scope=${scope}`);
-    }
-  }
-
-  try {
-    let res = await fetch(
-      `/api/jobs/metrics/${job.id}${query.length > 0 ? "?" : ""}${query.join(
-        "&"
-      )}`
-    );
-    if (res.status != 200) {
-      return { error: { status: res.status, message: await res.text() } };
+    if (scopes != null) {
+        for (let scope of scopes) {
+            query.push(`scope=${scope}`);
+        }
     }
 
-    return await res.json();
-  } catch (e) {
-    return { error: e };
-  }
+    try {
+        let res = await fetch(
+            `/api/jobs/metrics/${job.id}${query.length > 0 ? "?" : ""}${query.join(
+                "&"
+            )}`
+        );
+        if (res.status != 200) {
+            return { error: { status: res.status, message: await res.text() } };
+        }
+
+        return await res.json();
+    } catch (e) {
+        return { error: e };
+    }
 }
 
 export function fetchMetricsStore() {
-  let set = null;
-  let prev = { fetching: true, error: null, data: null };
-  return [
-    readable(prev, (_set) => {
-      set = _set;
-    }),
-    (job, metrics, scopes) =>
-      fetchMetrics(job, metrics, scopes).then((res) => {
-        let next = { fetching: false, error: res.error, data: res.data };
-        if (prev.data && next.data)
-          next.data.jobMetrics.push(...prev.data.jobMetrics);
+    let set = null;
+    let prev = { fetching: true, error: null, data: null };
+    return [
+        readable(prev, (_set) => {
+            set = _set;
+        }),
+        (job, metrics, scopes) =>
+            fetchMetrics(job, metrics, scopes).then((res) => {
+                let next = { fetching: false, error: res.error, data: res.data };
+                if (prev.data && next.data)
+                    next.data.jobMetrics.push(...prev.data.jobMetrics);
 
-        prev = next;
-        set(next);
-      }),
-  ];
+                prev = next;
+                set(next);
+            }),
+    ];
 }
 
 export function stickyHeader(datatableHeaderSelector, updatePading) {
-  const header = document.querySelector("header > nav.navbar");
-  if (!header) return;
+    const header = document.querySelector("header > nav.navbar");
+    if (!header) return;
 
-  let ticking = false,
-    datatableHeader = null;
-  const onscroll = (event) => {
-    if (ticking) return;
+    let ticking = false,
+        datatableHeader = null;
+    const onscroll = (event) => {
+        if (ticking) return;
 
-    ticking = true;
-    window.requestAnimationFrame(() => {
-      ticking = false;
-      if (!datatableHeader)
-        datatableHeader = document.querySelector(datatableHeaderSelector);
+        ticking = true;
+        window.requestAnimationFrame(() => {
+            ticking = false;
+            if (!datatableHeader)
+                datatableHeader = document.querySelector(datatableHeaderSelector);
 
-      const top = datatableHeader.getBoundingClientRect().top;
-      updatePading(
-        top < header.clientHeight ? header.clientHeight - top + 10 : 10
-      );
-    });
-  };
+            const top = datatableHeader.getBoundingClientRect().top;
+            updatePading(
+                top < header.clientHeight ? header.clientHeight - top + 10 : 10
+            );
+        });
+    };
 
-  document.addEventListener("scroll", onscroll);
-  onDestroy(() => document.removeEventListener("scroll", onscroll));
+    document.addEventListener("scroll", onscroll);
+    onDestroy(() => document.removeEventListener("scroll", onscroll));
 }