From 6e4b9169b71ebc6ac765605fb8b8cdf8030df459 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 1 Jun 2023 12:31:23 +0200
Subject: [PATCH] several tweaks and fixes make bar chart reactive and use ref
 for multiple instances of component typo fixes remove unused nesting from
 CarbonEmissionsIcon remove required from JobId

---
 .../JobMetrics/CarbonEmissions/BarChart.vue   | 29 +++++++++++++---
 .../CarbonEmissions/CarbonEmissions.test.js   |  4 +--
 .../CarbonEmissions/CarbonEmissions.vue       |  2 +-
 .../CarbonEmissionsCalculations.vue           | 30 ++++++++--------
 .../CarbonEmissions/CarbonEmissionsIcon.vue   | 34 ++++---------------
 .../src/components/JobMetrics/JobMetrics.vue  |  2 +-
 6 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/client/src/components/JobMetrics/CarbonEmissions/BarChart.vue b/client/src/components/JobMetrics/CarbonEmissions/BarChart.vue
index 8ae913bc6ad..874204797ab 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/BarChart.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/BarChart.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, ref, watch } from "vue";
 import * as d3 from "d3";
 
 const props = defineProps<{
     data: { name: string; value: number }[];
 }>();
 
-onMounted(() => {
+const barChart = ref<HTMLDivElement | null>(null);
+
+function clearChart() {
+    d3.select(barChart.value).selectAll("*").remove();
+}
+
+function drawChart() {
     const { data } = props;
 
     const margin = { top: 30, right: 30, bottom: 30, left: 30 };
@@ -15,7 +21,7 @@ onMounted(() => {
 
     // Create graph SVG
     const svg = d3
-        .select("#graph-container")
+        .select(barChart.value)
         .append("svg")
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
@@ -52,9 +58,24 @@ onMounted(() => {
         .attr("width", x.bandwidth())
         .attr("height", (d) => height - y(d.value))
         .attr("fill", "#41B883");
+}
+
+onMounted(() => {
+    drawChart();
 });
+
+watch(
+    () => props.data,
+    () => {
+        clearChart();
+        drawChart();
+    },
+    {
+        deep: true,
+    }
+);
 </script>
 
 <template>
-    <div id="graph-container" />
+    <div ref="barChart" />
 </template>
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.test.js b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.test.js
index 5dbc918557d..c84af4d40c8 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.test.js
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.test.js
@@ -4,7 +4,7 @@ import { mount } from "@vue/test-utils";
 
 const localVue = getLocalVue();
 
-const oneGibibyeMemoryInMebibyte = 1024;
+const oneGibibyteMemoryInMebibyte = 1024;
 const oneHourInSeconds = 3600;
 const testServerInstance = {
     name: "some-server-name",
@@ -22,7 +22,7 @@ describe("CarbonEmissions/CarbonEmissions.vue", () => {
                 estimatedServerInstance: testServerInstance,
                 jobRuntimeInSeconds: oneHourInSeconds,
                 coresAllocated: 1,
-                memoryAllocatedInMebibyte: oneGibibyeMemoryInMebibyte,
+                memoryAllocatedInMebibyte: oneGibibyteMemoryInMebibyte,
             },
             localVue,
         });
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
index 2b0fdc87bd3..2f79889ceff 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissions.vue
@@ -114,7 +114,7 @@ const carbonEmissionsComparisons = computed(() => {
 
     const drivingInUS: CarbonComparison = {
         heading: "Distance driven in US",
-        explanation: "Distance driven in km in the US",
+        explanation: "Distance driven in miles in the US",
         value: prettyPrintValue({
             // Multiply by 1.609 to convert km to miles
             value: parseFloat((totalCarbonEmissions / averagePassengerCarEmissionsUS / 1.609).toFixed(2)),
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsCalculations.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsCalculations.vue
index d2128a39b52..7f292f32246 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsCalculations.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsCalculations.vue
@@ -63,18 +63,19 @@ const greenAlgorithmsUrl = "https://www.green-algorithms.org/";
                 cannot always assume this information is provided, we have two approaches:
             </p>
 
-            <p>
-                1. In the case that the server's CPU specifications are known, we proceed as normal.
-                <br />
-                2. When no information is provided, we estimate the server's configuration by matching your job's CPU
-                and/or memory usage to a comparable general purpose
-                <Abbreviation :explanation="'Amazon Web Services Elastic Compute Cloud'">AWS EC2</Abbreviation>
-                instance. EC2 was chosen because its service provides numerous server configurations allowing us to
-                cover more real-world situations.
-                <ExternalLink :href="'https://aws.amazon.com/ec2/instance-types/'">
-                    (Click here to read further about general purpose EC2 machines).
-                </ExternalLink>
-            </p>
+            <ol>
+                <li>In the case that the server's CPU specifications are known, we proceed as normal.</li>
+                <li>
+                    When no information is provided, we estimate the server's configuration by matching your job's CPU
+                    and/or memory usage to a comparable general purpose
+                    <Abbreviation :explanation="'Amazon Web Services Elastic Compute Cloud'">AWS EC2</Abbreviation>
+                    instance. EC2 was chosen because its service provides numerous server configurations allowing us to
+                    cover more real-world situations.
+                    <ExternalLink :href="'https://aws.amazon.com/ec2/instance-types/'">
+                        (Click here to read further about general purpose EC2 machines)
+                    </ExternalLink>
+                </li>
+            </ol>
 
             <p>
                 Once we have the information needed, we calculate the power usage of the CPU and memory in watts. For
@@ -121,9 +122,8 @@ const greenAlgorithmsUrl = "https://www.green-algorithms.org/";
 
             <p>
                 We compare the total carbon emissions of your job (per metric unit of CO2e) with
-                <ExternalLink :href="epaCalculationsUrl">
-                    carbon emission estimates calculated by the EPA. </ExternalLink
-                >. When calculating the equivalent distance driven, we use the same reference values from the Green
+                <ExternalLink :href="epaCalculationsUrl">carbon emission estimates calculated by the EPA</ExternalLink>.
+                When calculating the equivalent distance driven, we use the same reference values from the Green
                 Algorithms Project's "Carbon emissions Calculator" tool.
             </p>
 
diff --git a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
index 0fdf3f8a569..05b4ad0c05c 100644
--- a/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
+++ b/client/src/components/JobMetrics/CarbonEmissions/CarbonEmissionsIcon.vue
@@ -20,33 +20,13 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div v-if="props.icon === 'car'">
-        <FontAwesomeIcon class="icon" icon="fa-car" />
-    </div>
-
-    <div v-else-if="props.icon === 'gasPump'">
-        <FontAwesomeIcon class="icon" icon="fa-gas-pump" />
-    </div>
-
-    <div v-else-if="props.icon === 'lightbulb'">
-        <FontAwesomeIcon class="icon" icon="fa-lightbulb" />
-    </div>
-
-    <div v-else-if="props.icon === 'bolt'">
-        <FontAwesomeIcon class="icon" icon="fa-bolt" />
-    </div>
-
-    <div v-else-if="props.icon === 'mobilePhone'">
-        <FontAwesomeIcon class="icon" icon="fa-mobile" />
-    </div>
-
-    <div v-else-if="props.icon === 'smog'">
-        <FontAwesomeIcon class="icon" icon="fa-smog" />
-    </div>
-
-    <div v-else-if="props.icon === 'tree'">
-        <FontAwesomeIcon class="icon" icon="fa-tree" />
-    </div>
+    <FontAwesomeIcon v-if="props.icon === 'car'" class="icon" icon="fa-car" />
+    <FontAwesomeIcon v-else-if="props.icon === 'gasPump'" class="icon" icon="fa-gas-pump" />
+    <FontAwesomeIcon v-else-if="props.icon === 'lightbulb'" class="icon" icon="fa-lightbulb" />
+    <FontAwesomeIcon v-else-if="props.icon === 'bolt'" class="icon" icon="fa-bolt" />
+    <FontAwesomeIcon v-else-if="props.icon === 'mobilePhone'" class="icon" icon="fa-mobile" />
+    <FontAwesomeIcon v-else-if="props.icon === 'smog'" class="icon" icon="fa-smog" />
+    <FontAwesomeIcon v-else-if="props.icon === 'tree'" class="icon" icon="fa-tree" />
 </template>
 
 <style scoped>
diff --git a/client/src/components/JobMetrics/JobMetrics.vue b/client/src/components/JobMetrics/JobMetrics.vue
index a6804fa6814..f0c897b6bdb 100644
--- a/client/src/components/JobMetrics/JobMetrics.vue
+++ b/client/src/components/JobMetrics/JobMetrics.vue
@@ -7,7 +7,7 @@ import { computed, ref, unref } from "vue";
 const props = defineProps({
     jobId: {
         type: String,
-        required: true,
+        default: null,
     },
     datasetFilesize: {
         type: Number,