Use different dataset selector label for Change from Baseline graph

pacificclimate · Jun 10, 2024 · 4858c0f · 4858c0f
1 parent dda3486
commit 4858c0f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/components/graphs/AnnualCycleGraph/AnnualCycleGraph.js b/src/components/graphs/AnnualCycleGraph/AnnualCycleGraph.js
@@ -15,7 +15,10 @@ import {
   errorMessage,
   loadingDataGraphSpec,
 } from "../graph-helpers";
-import { datasetSelectorLabel } from "../../guidance-content/info/InformationItems";
+import {
+  datasetSelectorLabel,
+  baselineSelectorLabel,
+} from "../../guidance-content/info/InformationItems";
 import {
   representativeValue,
   findStartEndDates,
@@ -174,6 +177,9 @@ export default class AnnualCycleGraph extends React.Component {
   replaceInvalidDataSpec = this.props.isAnomalyAnnualCycle
     ? findStartEndDates("1981", "2010")
     : undefined;
+  selectorLabel = this.props.isAnomalyAnnualCycle
+    ? baselineSelectorLabel
+    : datasetSelectorLabel;
 
   exportData(format) {
     exportDataToWorksheet(
@@ -220,7 +226,7 @@ export default class AnnualCycleGraph extends React.Component {
         <Row>
           <Col lg={6} md={6} sm={6}>
             <ControlLabel className={styles.selector_label}>
-              {datasetSelectorLabel}
+              {this.selectorLabel}
             </ControlLabel>
             <DataspecSelector
               bases={this.props.meta}

diff --git a/src/components/graphs/AnnualCycleGraph/AnnualCycleGraph.module.css b/src/components/graphs/AnnualCycleGraph/AnnualCycleGraph.module.css
@@ -4,5 +4,5 @@
 
 .selector {
   display: inline-block;
-  width: 80%;
+  width: 75%;
 }
diff --git a/src/components/guidance-content/info/InformationItems.js b/src/components/guidance-content/info/InformationItems.js
@@ -492,6 +492,25 @@ export const datasetSelectorLabel = (
   </LabelWithInfo>
 );
 
+export const baselineSelectorLabel = (
+  <LabelWithInfo label="Baseline">
+    <p>
+      Select a single baseline dataset to display from all of those that match
+      the Model, Emissions Scenario, Variable, and historical averaging period
+      selected.
+    </p>
+    <p>
+      On the graph, the datasets with the same Model, Emissions Scenario, and
+      Variable for all available future periods will be compared with this
+      selected baseline.
+    </p>
+    <p>
+      Datasets are identified by a combination of model run id (e.g.,{" "}
+      <code>r1i1p1</code>) and averaging period (e.g., <code>1961-1990</code>).
+    </p>
+  </LabelWithInfo>
+);
+
 export const timeOfYearSelectorLabel = (
   <LabelWithInfo label="Time of Year">
     <p>