Add public dashboard and route, add DoubleMetricPlot and GQL queries

- add roofline legend display switch
- small fixes

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

@@ -0,0 +1,148 @@
+<!--
+  @component Main cluster status view component; renders current system-usage information
+
+  Properties:
+  - `presetCluster String`: The cluster to show status information for
+-->
+
+ <script>
+  import { getContext } from "svelte";
+  import {
+    Row,
+    Col,
+    Spinner,
+    Card,
+    Icon,
+    Button,
+  } from "@sveltestrap/sveltestrap";
+  import {
+    queryStore,
+    gql,
+    getContextClient,
+  } from "@urql/svelte";
+  import {
+    convert2uplot,
+  } from "../../generic/utils.js";
+  import PlotGrid from "../../generic/PlotGrid.svelte";
+  import Histogram from "../../generic/plots/Histogram.svelte";
+  import HistogramSelection from "../../generic/select/HistogramSelection.svelte";
+  import Refresher from "../../generic/helper/Refresher.svelte";
+
+  /* Svelte 5 Props */
+  let {
+    presetCluster
+  } = $props();
+
+  /* Const Init */
+  const ccconfig = getContext("cc-config");
+  const client = getContextClient();
+
+  /* State Init */
+  let cluster = $state(presetCluster);
+  // Histogram
+  let isHistogramSelectionOpen = $state(false);
+
+  /* Derived */
+  let selectedHistograms = $derived(cluster
+    ? ccconfig[`statusView_selectedHistograms:${cluster}`] || ( ccconfig['statusView_selectedHistograms'] || [] )
+    : ccconfig['statusView_selectedHistograms'] || []);
+
+  // Note: nodeMetrics are requested on configured $timestep resolution
+  const metricStatusQuery = $derived(queryStore({
+    client: client,
+    query: gql`
+      query (
+        $filter: [JobFilter!]!
+        $selectedHistograms: [String!]
+      ) {
+        jobsStatistics(filter: $filter, metrics: $selectedHistograms) {
+          histMetrics {
+            metric
+            unit
+            data {
+              min
+              max
+              count
+              bin
+            }
+          }
+        }
+      }
+    `,
+    variables: {
+      filter: [{ state: ["running"] }, { cluster: { eq: cluster} }],
+      selectedHistograms: selectedHistograms
+    },
+    requestPolicy: "network-only"
+  }));
+</script>
+
+<!-- Loading indicators & Metric Sleect -->
+<Row class="justify-content-between">
+  <Col class="mb-2 mb-md-0" xs="12" md="5" lg="4" xl="3">
+    <Button
+      outline
+      color="secondary"
+      onclick={() => (isHistogramSelectionOpen = true)}
+    >
+      <Icon name="bar-chart-line" /> Select Histograms
+    </Button>
+  </Col>
+  <Col xs="12" md="5" lg="4" xl="3">
+    <Refresher
+      initially={120}
+      onRefresh={() => {
+        selectedHistograms = [...$state.snapshot(selectedHistograms)]
+      }}
+    />
+  </Col>
+</Row>
+
+<Row cols={1} class="text-center mt-3">
+  {#if $metricStatusQuery.fetching}
+    <Col>
+      <Spinner />
+    </Col>
+  {:else if $metricStatusQuery.error}
+    <Col>  
+      <Card body color="danger">{$metricStatusQuery.error.message}</Card>
+    </Col>
+  {/if}
+</Row>
+
+{#if $metricStatusQuery.data}
+  <!-- Selectable Stats as Histograms : Average Values of Running Jobs -->
+  {#if selectedHistograms}
+    <!-- Note: Ignore '#snippet' Error in IDE -->
+    {#snippet gridContent(item)}
+      <Histogram
+        data={convert2uplot(item.data)}
+        title="Distribution of '{item.metric}' averages"
+        xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
+        xunit={item.unit}
+        ylabel="Number of Jobs"
+        yunit="Jobs"
+        usesBins
+        enableFlip
+      />
+    {/snippet}
+    
+    {#key $metricStatusQuery.data.jobsStatistics[0].histMetrics}
+      <PlotGrid
+        items={$metricStatusQuery.data.jobsStatistics[0].histMetrics}
+        itemsPerRow={2}
+        {gridContent}
+      />
+    {/key}
+  {/if}
+{/if}
+
+<HistogramSelection
+  {cluster}
+  bind:isOpen={isHistogramSelectionOpen}
+  presetSelectedHistograms={selectedHistograms}
+  configName="statusView_selectedHistograms"
+  applyChange={(newSelection) => {
+    selectedHistograms = [...newSelection];
+  }}
+/>