From 4d7944577e142c55d28b69ecdaa4ba9fc5e1eee4 Mon Sep 17 00:00:00 2001 From: Fershad Irani <27988517+fershad@users.noreply.github.com> Date: Tue, 13 Dec 2022 12:01:06 +0800 Subject: [PATCH 1/3] Add carbon metrics values information to the power usage tooltip --- locales/en-US/app.ftl | 18 ++++++---- package.json | 1 + src/components/tooltip/TrackPower.js | 34 ++++++++++++++----- .../__snapshots__/TrackPower.test.js.snap | 2 +- src/types/libdef/npm/@tgwf/co2_vx.x.x.js | 18 ++++++++++ yarn.lock | 7 ++++ 6 files changed, 65 insertions(+), 15 deletions(-) create mode 100644 src/types/libdef/npm/@tgwf/co2_vx.x.x.js diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl index 36feb53c0c..3127d3dfde 100644 --- a/locales/en-US/app.ftl +++ b/locales/en-US/app.ftl @@ -790,42 +790,48 @@ TrackPower--tooltip-power-milliwatt = { $value } mW # watt-hour unit. # Variables: # $value (String) - the energy value for this range -TrackPower--tooltip-energy-used-in-range-watthour = { $value } Wh +# $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (grams) +TrackPower--tooltip-energy-carbon-used-in-range-watthour = { $value } Wh ({ $carbonValue } g CO₂e) .label = Energy used in the visible range # This is used in the tooltip when the energy used in the current range uses the # milliwatt-hour unit. # Variables: # $value (String) - the energy value for this range -TrackPower--tooltip-energy-used-in-range-milliwatthour = { $value } mWh +# $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams) +TrackPower--tooltip-energy-carbon-used-in-range-milliwatthour = { $value } mWh ({ $carbonValue } mg CO₂e) .label = Energy used in the visible range # This is used in the tooltip when the energy used in the current range uses the # microwatt-hour unit. # Variables: # $value (String) - the energy value for this range -TrackPower--tooltip-energy-used-in-range-microwatthour = { $value } µWh +# $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams) +TrackPower--tooltip-energy-carbon-used-in-range-microwatthour = { $value } µWh ({ $carbonValue } mg CO₂e) .label = Energy used in the visible range # This is used in the tooltip when the energy used in the current preview # selection uses the watt-hour unit. # Variables: # $value (String) - the energy value for this range -TrackPower--tooltip-energy-used-in-preview-watthour = { $value } Wh +# $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (grams) +TrackPower--tooltip-energy-carbon-used-in-preview-watthour = { $value } Wh ({ $carbonValue } g CO₂e) .label = Energy used in the current selection # This is used in the tooltip when the energy used in the current preview # selection uses the milliwatt-hour unit. # Variables: # $value (String) - the energy value for this range -TrackPower--tooltip-energy-used-in-preview-milliwatthour = { $value } mWh +# $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams) +TrackPower--tooltip-energy-carbon-used-in-preview-milliwatthour = { $value } mWh ({ $carbonValue } mg CO₂e) .label = Energy used in the current selection # This is used in the tooltip when the energy used in the current preview # selection uses the microwatt-hour unit. # Variables: # $value (String) - the energy value for this range -TrackPower--tooltip-energy-used-in-preview-microwatthour = { $value } µWh +# $carbonValue (string) - the carbon dioxide equivalent (CO₂e) value (milligrams) +TrackPower--tooltip-energy-carbon-used-in-preview-microwatthour = { $value } µWh ({ $carbonValue } mg CO₂e) .label = Energy used in the current selection ## TrackSearchField diff --git a/package.json b/package.json index 94bce2ea05..1cd02a7d00 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@fluent/langneg": "^0.6.2", "@fluent/react": "^0.14.1", "@lezer/highlight": "^1.1.3", + "@tgwf/co2": "^0.11.4", "array-move": "^3.0.1", "array-range": "^1.0.1", "clamp": "^1.0.1", diff --git a/src/components/tooltip/TrackPower.js b/src/components/tooltip/TrackPower.js index cf7ee8fe71..97fbe754f8 100644 --- a/src/components/tooltip/TrackPower.js +++ b/src/components/tooltip/TrackPower.js @@ -8,6 +8,8 @@ import * as React from 'react'; import { Localized } from '@fluent/react'; import memoize from 'memoize-one'; +import { averageIntensity } from '@tgwf/co2'; + import explicitConnect from 'firefox-profiler/utils/connect'; import { formatNumber } from 'firefox-profiler/utils/format-numbers'; import { @@ -63,6 +65,13 @@ class TooltipTrackPowerImpl extends React.PureComponent { return sum * 1e-12; } + _computeCO2eFromPower(power: number): number { + // total energy Wh to kWh + const energy = power / 1000; + const { WORLD } = averageIntensity.data; + return energy * WORLD; + } + _computePowerSumForCommittedRange = memoize( ({ start, end }: StartEndRange): number => this._computePowerSumForRange(start, end) @@ -85,23 +94,32 @@ class TooltipTrackPowerImpl extends React.PureComponent { l10nIdMilliUnit, l10nIdMicroUnit ): Localized { - let value, l10nId; + let value, l10nId, carbonValue; + const carbon = this._computeCO2eFromPower(power); if (power > 1) { value = formatNumber(power, 3); + carbonValue = formatNumber(carbon, 3); l10nId = l10nIdUnit; } else if (power === 0) { value = 0; + carbonValue = 0; l10nId = l10nIdUnit; } else if (power < 0.001 && l10nIdMicroUnit) { value = formatNumber(power * 1000000); + carbonValue = formatNumber(carbon * 1000); l10nId = l10nIdMicroUnit; } else { value = formatNumber(power * 1000); + carbonValue = formatNumber(carbon * 1000); l10nId = l10nIdMilliUnit; } return ( - + {value} ); @@ -139,16 +157,16 @@ class TooltipTrackPowerImpl extends React.PureComponent { {previewSelection.hasSelection ? this._formatPowerValue( this._computePowerSumForPreviewRange(previewSelection), - 'TrackPower--tooltip-energy-used-in-preview-watthour', - 'TrackPower--tooltip-energy-used-in-preview-milliwatthour', - 'TrackPower--tooltip-energy-used-in-preview-microwatthour' + 'TrackPower--tooltip-energy-carbon-used-in-preview-watthour', + 'TrackPower--tooltip-energy-carbon-used-in-preview-milliwatthour', + 'TrackPower--tooltip-energy-carbon-used-in-preview-microwatthour' ) : null} {this._formatPowerValue( this._computePowerSumForCommittedRange(committedRange), - 'TrackPower--tooltip-energy-used-in-range-watthour', - 'TrackPower--tooltip-energy-used-in-range-milliwatthour', - 'TrackPower--tooltip-energy-used-in-range-microwatthour' + 'TrackPower--tooltip-energy-carbon-used-in-range-watthour', + 'TrackPower--tooltip-energy-carbon-used-in-range-milliwatthour', + 'TrackPower--tooltip-energy-carbon-used-in-range-microwatthour' )} diff --git a/src/test/components/__snapshots__/TrackPower.test.js.snap b/src/test/components/__snapshots__/TrackPower.test.js.snap index baeb177d6c..9c8b7ca90f 100644 --- a/src/test/components/__snapshots__/TrackPower.test.js.snap +++ b/src/test/components/__snapshots__/TrackPower.test.js.snap @@ -27,7 +27,7 @@ exports[`TrackPower has a tooltip that matches the snapshot 1`] = ` Energy used in the visible range : - ⁨7.2⁩ µWh + ⁨7.2⁩ µWh (⁨0.003⁩ mg CO₂e) `; diff --git a/src/types/libdef/npm/@tgwf/co2_vx.x.x.js b/src/types/libdef/npm/@tgwf/co2_vx.x.x.js new file mode 100644 index 0000000000..ceedac16bc --- /dev/null +++ b/src/types/libdef/npm/@tgwf/co2_vx.x.x.js @@ -0,0 +1,18 @@ +// flow-typed signature: b2f76cdf45a9f020ccc81f4258e36209 +// flow-typed version: <>/@tgwf/co2_v0.11.4/flow_v0.96.0 + +/** + * This is an autogenerated libdef stub for: + * + * '@tgwf/co2' + * + * Fill this stub out by replacing all the `any` types. + * + * Once filled out, we encourage you to share your work with the + * community by sending a pull request to: + * https://github.com/flowtype/flow-typed + */ + +declare module '@tgwf/co2' { + declare module.exports: any; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 2ab4b0ecc0..fde1476fcb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1832,6 +1832,13 @@ "@testing-library/dom" "^8.5.0" "@types/react-dom" "^18.0.0" +"@tgwf/co2@^0.11.4": + version "0.11.4" + resolved "https://registry.yarnpkg.com/@tgwf/co2/-/co2-0.11.4.tgz#1e919364a3b1ce5ed835fb6449f78a7c7277e3f4" + integrity sha512-I6e+WzdDpVbKLkTDJXAA0kJvOJQg1TNfTOu7PA5+FfxLEix9EqdigVK0Qd4flC82fLgTKSw4upuh+nCm4fFCaQ== + dependencies: + debug "^4.3.4" + "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" From fce7bd5ad06249a65104d8011a15156d550cddf5 Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Tue, 13 Dec 2022 16:06:39 +0100 Subject: [PATCH 2/3] =?UTF-8?q?Add=20a=20comment=20expliciting=20that=20th?= =?UTF-8?q?e=20carbon=20value=20is=20in=20mg=20even=20when=20the=20power?= =?UTF-8?q?=20value=20is=20in=20=C2=B5Wh?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/tooltip/TrackPower.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/tooltip/TrackPower.js b/src/components/tooltip/TrackPower.js index 97fbe754f8..27bbdb3537 100644 --- a/src/components/tooltip/TrackPower.js +++ b/src/components/tooltip/TrackPower.js @@ -106,6 +106,8 @@ class TooltipTrackPowerImpl extends React.PureComponent { l10nId = l10nIdUnit; } else if (power < 0.001 && l10nIdMicroUnit) { value = formatNumber(power * 1000000); + // Note: even though the power value is expressed in µWh, the carbon value + // is still expressed in mg. carbonValue = formatNumber(carbon * 1000); l10nId = l10nIdMicroUnit; } else { From 714950dbb778a383d7835cad3b0966b41a6e4e3e Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Wed, 14 Dec 2022 15:55:47 +0100 Subject: [PATCH 3/3] Add some more explanation about what CO2 equivalent is --- locales/en-US/app.ftl | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl index 3127d3dfde..0355ed418f 100644 --- a/locales/en-US/app.ftl +++ b/locales/en-US/app.ftl @@ -771,8 +771,12 @@ TrackMemoryGraph--operations-since-the-previous-sample = operations since the pr ## TrackPower ## This is used to show the power used by the CPU and other chips in a computer, ## graphed over time. -## It's not displayed by default in the UI, but an example can be found at +## It's not always displayed in the UI, but an example can be found at ## https://share.firefox.dev/3a1fiT7. +## For the strings in this group, the carbon dioxide equivalent is computed from +## the used energy, using the carbon dioxide equivalent for electricity +## consumption. The carbon dioxide equivalent represents the equivalent amount +## of CO₂ to achieve the same level of global warming potential. # This is used in the tooltip when the power value uses the watt unit. # Variables: