Fix multiple layers with different axis labels in workflow metrics.

client/src/components/Help/HelpText.vue

@@ -4,9 +4,12 @@ import HelpPopover from "./HelpPopover.vue";
 interface Props {
     uri: string;
     text: string;
+    forTitle?: boolean;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), {
+    forTitle: false,
+});
 </script>
 
 <template>
@@ -18,7 +21,7 @@ defineProps<Props>();
                 }
             "
             :term="uri" />
-        <span ref="helpTarget" class="help-text">{{ text }}</span>
+        <span ref="helpTarget" class="help-text" :class="{ 'title-help-text': forTitle }">{{ text }}</span>
     </span>
 </template>
 
@@ -28,4 +31,7 @@ defineProps<Props>();
     text-decoration-line: underline;
     text-decoration-style: dashed;
 }
+.title-help-text {
+    text-decoration-thickness: 1px;
+}
 </style>

client/src/components/Help/terms.yml

@@ -72,8 +72,23 @@ galaxy:
         each individual file above. If there is only one extension, Galaxy will attempt to set that as the
         extension for each file.
 
-
   jobs:
+    metrics:
+      cores: |
+        This is how many [cores](https://en.wikipedia.org/wiki/Central_processing_unit) (or distinct central processing units (CPUs)) are
+        allocated to run the job for the tool. This value is generally configured for the tool by the Galaxy administrator. This value
+        does not guarantee how many cores the job actually used - the job may have used more and less based on how Galaxy is configured
+        and how the tool is programmed.
+
+      walltime: |
+        This is estimate of the length of time the job ran created by recording the start and stop of the job in the job script
+        created for the tool execution and subtracting these values. 
+
+      allocated_core_time: |
+        This is the number of cores Galaxy believes is allocated for the job times the estimated walltime for the job. This can be thought
+        of as scaling the runtime/walltime metric by the number of cores allocated - when purchasing compute time per core hour or consuming
+        compute time from a compute center's allocation - this is likely to be a more interesting and useful number than the walltime.
+
     states:
       # upload, waiting, failed, paused, deleting, deleted, stop, stopped, skipped.
       ok: |

client/src/components/WorkflowInvocationState/VegaWrapper.vue

@@ -1,17 +1,24 @@
 <template>
-    <div ref="chartContainer" class="chart"></div>
+    <div ref="chartContainer" class="chart" :style="style"></div>
 </template>
 
 <script setup lang="ts">
 import { useResizeObserver } from "@vueuse/core";
 import embed, { type VisualizationSpec } from "vega-embed";
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 export interface VisSpec {
     spec: VisualizationSpec;
+    width: string;
 }
 
-const props = defineProps<VisSpec>();
+const props = withDefaults(defineProps<VisSpec>(), {
+    width: "100%",
+});
+
+const style = computed(() => {
+    return { width: props.width };
+});
 
 const chartContainer = ref<HTMLDivElement | null>(null);
 let vegaView: any;
@@ -30,7 +37,9 @@ onMounted(embedChart);
 
 watch(props, embedChart, { immediate: true, deep: true });
 useResizeObserver(chartContainer, () => {
-    embedChart();
+    if (vegaView) {
+        vegaView.resize();
+    }
 });
 
 // Cleanup the chart when the component is unmounted
@@ -43,7 +52,5 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .chart {
-    width: 100%;
-    height: 100%;
 }
 </style>