add extended legend for nodelist acc metrics, move nodelist paging select

web/frontend/src/systems/nodelist/NodeListRow.svelte

@@ -8,7 +8,12 @@
  -->
 
 <script>
-  import { Card } from "@sveltestrap/sveltestrap";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import { Card, CardBody, Spinner } from "@sveltestrap/sveltestrap";
   import { maxScope, checkMetricDisabled } from "../../generic/utils.js";
   import MetricPlot from "../../generic/plots/MetricPlot.svelte";
   import NodeInfo from "./NodeInfo.svelte";
@@ -17,6 +22,43 @@
   export let nodeData;
   export let selectedMetrics;
 
+  const client = getContextClient();
+  const paging = { itemsPerPage: 50, page: 1 };
+  const sorting = { field: "startTime", type: "col", order: "DESC" };
+  const filter = [
+    { cluster: { eq: cluster } },
+    { node: { contains: nodeData.host } },
+    { state: ["running"] },
+  ];
+
+  const nodeJobsQuery = gql`
+    query (
+      $filter: [JobFilter!]!
+      $sorting: OrderByInput!
+      $paging: PageRequest!
+    ) {
+      jobs(filter: $filter, order: $sorting, page: $paging) {
+        items {
+          jobId
+          user
+          project
+          exclusive
+          resources {
+            hostname
+            accelerators
+          }
+        }
+        count
+      }
+    }
+  `;
+
+  $: nodeJobsData = queryStore({
+    client: client,
+    query: nodeJobsQuery,
+    variables: { paging, sorting, filter },
+  });
+
   // Helper
   const selectScope = (nodeMetrics) =>
     nodeMetrics.reduce(
@@ -51,14 +93,44 @@
   let dataHealth;
   $: if (nodeData?.metrics) {
     refinedData = sortAndSelectScope(nodeData?.metrics)
-    // Check data for series, skip disabled
     dataHealth = refinedData.filter((rd) => rd.disabled === false).map((enabled) => (enabled.data.metric.series.length > 0))
   }
+
+  let extendedLegendData = null;
+  $: if ($nodeJobsData?.data) {
+    // Get Shared State of Node: Only Build extended Legend For Shared Nodes
+    if ($nodeJobsData.data.jobs.count >= 1 && !$nodeJobsData.data.jobs.items[0].exclusive) {
+      const accSet = Array.from(new Set($nodeJobsData.data.jobs.items
+        .map((i) => i.resources
+          .filter((r) => r.hostname === nodeData.host)
+          .map((r) => r.accelerators)
+        )
+      )).flat(2)
+
+      extendedLegendData = {}
+      for (const accId of accSet) {
+        const matchJob = $nodeJobsData.data.jobs.items.find((i) => i.resources.find((r) => r.accelerators.includes(accId)))
+        extendedLegendData[accId] = {
+          user: matchJob?.user  ? matchJob?.user  : '-',
+          job:  matchJob?.jobId ? matchJob?.jobId : '-',
+        }
+      }
+      // Theoretically extendable for hwthreadIDs
+    }
+  }
 </script>
 
 <tr>
   <td>
-    <NodeInfo {cluster} subCluster={nodeData.subCluster} hostname={nodeData.host} {dataHealth}/>
+    {#if $nodeJobsData.fetching}
+      <Card>
+        <CardBody class="content-center">
+          <Spinner/>
+        </CardBody>
+      </Card>
+    {:else}
+      <NodeInfo nodeJobsData={$nodeJobsData.data} {cluster} subCluster={nodeData.subCluster} hostname={nodeData.host} {dataHealth}/>
+    {/if}
   </td>
   {#each refinedData as metricData (metricData.data.name)}
     <td>
@@ -83,16 +155,19 @@
           forNode
         />
         <div class="my-2"/>
-        <MetricPlot
-          {cluster}
-          subCluster={nodeData.subCluster}
-          metric={metricData.data.name}
-          scope={metricData.data.scope}
-          timestep={metricData.data.metric.timestep}
-          series={metricData.data.metric.series}
-          height={175}
-          forNode
-        />
+        {#key extendedLegendData}
+          <MetricPlot
+            {cluster}
+            subCluster={nodeData.subCluster}
+            metric={metricData.data.name}
+            scope={metricData.data.scope}
+            timestep={metricData.data.metric.timestep}
+            series={metricData.data.metric.series}
+            height={175}
+            {extendedLegendData}
+            forNode
+          />
+        {/key}
       {:else}
         <MetricPlot
           {cluster}