fix: add top list query fixes to analysis and dashboard

web/frontend/src/Analysis.root.svelte

@@ -187,6 +187,12 @@
     })
   );
 
+  const topListData = $derived(
+    $topQuery?.data?.topList
+      ?.toSorted((a, b) => b[sortSelection.key] - a[sortSelection.key])
+      .slice(0, 10) ?? [],
+  );
+
   // Note: Different footprints than those saved in DB per Job -> Caused by Legacy Naming
   let footprintsQuery = $derived(
     queryStore({
@@ -424,10 +430,12 @@
               canvasId={`pie-${groupSelection.key}`}
               size={colWidth1 / 1.9}
               sliceLabel={sortSelection.label}
-              quantities={$topQuery.data.topList.map(
+              quantities={topListData.map(
                 (t) => t[sortSelection.key],
               )}
-              entities={$topQuery.data.topList.map((t) => scrambleNames ? scramble(t.id) : t.id)}
+              entities={topListData.map((t) => 
+                scrambleNames ? scramble(t.id) : t.id)
+              }
             />
           {/if}
         {/key}
@@ -454,7 +462,7 @@
                 </select>
               </th>
             </tr>
-            {#each $topQuery.data.topList as te, i}
+            {#each topListData as te, i}
               <tr>
                 <td><Icon name="circle-fill" style="color: {colors['colorblind'][i]};" /></td>
                 {#if groupSelection.key == "user"}

web/frontend/src/status/DashInternal.svelte

@@ -53,7 +53,6 @@
   const useCbColors = getContext("cc-config")?.plotConfiguration_colorblindMode || false
 
   /* States */
-  let pagingState = $state({page: 1, itemsPerPage: 10}) // Top 10
   let from = $state(new Date(Date.now() - 5 * 60 * 1000));
   let clusterFrom = $state(new Date(Date.now() - (8 * 60 * 60 * 1000)));
   let to = $state(new Date(Date.now()));
@@ -201,11 +200,9 @@
     query: gql`
       query (
         $filter: [JobFilter!]!
-        $paging: PageRequest!
       ) {
         jobsStatistics(
           filter: $filter
-          page: $paging
           sortBy: TOTALJOBS
           groupBy: PROJECT
         ) {
@@ -215,12 +212,17 @@
       }
     `,
     variables: {
-      filter: [{ cluster: { eq: presetCluster} }, { state: ["running"] }],
-      paging: pagingState // Top 10
+      filter: [{ cluster: { eq: presetCluster} }, { state: ["running"] }]
     },
     requestPolicy: "network-only"
   }));
 
+  const topProjectJobs = $derived(
+    $topJobsQuery?.data?.jobsStatistics
+      ?.toSorted((a, b) => b.totalJobs - a.totalJobs)
+      .slice(0, 10) ?? [],
+  );
+
   const clusterInfo = $derived.by(() => {
     let rawInfos = {};
     if ($initq?.data?.clusters) {
@@ -365,7 +367,6 @@
             from = new Date(Date.now() - 5 * 60 * 1000);
             to = new Date(Date.now());
             clusterFrom = new Date(Date.now() - (8 * 60 * 60 * 1000))
-            pagingState = { page:1, itemsPerPage: 10 };
 
             if (interval) stackedFrom += Math.floor(interval / 1000);
             else stackedFrom += 1 // Workaround: TimeSelection not linked, just trigger new data on manual refresh
@@ -490,10 +491,12 @@
                     canvasId="hpcpie-jobs-projects"
                     size={colWidthJobs * 0.75}
                     sliceLabel={'Jobs'}
-                    quantities={$topJobsQuery.data.jobsStatistics.map(
+                    quantities={topProjectJobs.map(
                       (tp) => tp['totalJobs'],
                     )}
-                    entities={$topJobsQuery.data.jobsStatistics.map((tp) => scrambleNames ? scramble(tp.id) : tp.id)}
+                    entities={topProjectJobs.map((tp) =>
+                      scrambleNames ? scramble(tp.id) : tp.id)
+                    }
                   />
                 </div>
               </Col>
@@ -504,7 +507,7 @@
                     <th style="padding-left: 0.5rem;">Project</th>
                     <th>Jobs</th>
                   </tr>
-                  {#each $topJobsQuery.data.jobsStatistics as tp, i}
+                  {#each topProjectJobs as tp, i}
                     <tr>
                       <td><Icon name="circle-fill" style="color: {legendColors(i)};" /></td>
                       <td>

web/frontend/src/status/dashdetails/UsageDash.svelte

@@ -45,7 +45,6 @@
   const durationBinOptions = ["1m", "10m", "1h", "6h", "12h"];
 
   /* State Init */
-  let pagingState = $state({ page: 1, itemsPerPage: 10 }); // Top 10
   let selectedHistograms = $state([]); // Dummy For Refresh
   let colWidthJobs = $state(0);
   let colWidthNodes = $state(0);
@@ -208,7 +207,6 @@
     <Refresher
       initially={120}
       onRefresh={() => {
-        pagingState = { page: 1, itemsPerPage: 10 };
         selectedHistograms = [...$state.snapshot(selectedHistograms)];
       }}
     />