Revised based on review.

TerriaJS · May 10, 2024 · cc8e8f8 · cc8e8f8
1 parent affc743
commit cc8e8f8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -3,7 +3,7 @@
 #### next release (8.7.2)
 
 - Add NumberParameterEditor to enable WPS AllowedValues Ranges to be set and use DefaultValue
-- FeatureInfoSection has access to activeStyle of item having TableTraits.
+- Feature info template has access to activeStyle of item having TableTraits.
 
 #### 8.7.1 - 2024-04-16
 

diff --git a/lib/ReactViews/FeatureInfo/FeatureInfoSection.tsx b/lib/ReactViews/FeatureInfo/FeatureInfoSection.tsx
@@ -217,7 +217,7 @@ export class FeatureInfoSection extends React.Component<FeatureInfoProps> {
       currentTime?: Date;
       timeSeries?: TimeSeriesContext;
       rawDataTable?: string;
-      activeStyle?: string;
+      activeStyle?: Object;
     } = {
       partialByName: mustacheRenderPartialByName(
         this.props.catalogItem.featureInfoTemplate?.partials ?? {},
@@ -260,8 +260,12 @@ export class FeatureInfoSection extends React.Component<FeatureInfoProps> {
     }
 
     // Add activeStyle property
-    if (TableMixin.isMixedInto(this.props.catalogItem))
-      terria.activeStyle = this.props.catalogItem.activeStyle;
+    if (TableMixin.isMixedInto(this.props.catalogItem)) {
+      const activeStyleId = this.props.catalogItem.activeStyle;
+      terria.activeStyle = this.props.catalogItem.styles.find(
+        (style) => style.id === activeStyleId
+      );
+    }
 
     // If catalog item has featureInfoContext function
     // Merge it into other properties

diff --git a/test/ReactViews/FeatureInfoSectionSpec.tsx b/test/ReactViews/FeatureInfoSectionSpec.tsx
@@ -32,6 +32,7 @@ import MappableTraits from "../../lib/Traits/TraitsClasses/MappableTraits";
 import * as FeatureInfoPanel from "../../lib/ViewModels/FeatureInfoPanel";
 import { createWithContexts } from "./withContext";
 import CsvCatalogItem from "../../lib/Models/Catalog/CatalogItems/CsvCatalogItem";
+import updateModelFromJson from "../../lib/Models/Definition/updateModelFromJson";
 
 let separator = ",";
 if (typeof Intl === "object" && typeof Intl.NumberFormat === "function") {
@@ -404,8 +405,31 @@ describe("FeatureInfoSection", function () {
 
     it("uses activeStyle of catalog item having TableTraits in featureInfoTemplate", function () {
       const csvItem = new CsvCatalogItem("testId", terria, undefined);
-      csvItem.setTrait(CommonStrata.user, "activeStyle", "COOL");
-      const template = "The active style is {{terria.activeStyle}}.";
+      csvItem.setTrait(CommonStrata.user, "activeStyle", "User Style");
+      // Do not specify the styles as TableStyleTraits[] type, as it will cause an error in the vscode editor.
+      const styles = [
+        {
+          id: "User Style",
+          color: {
+            colorColumn: "ste_name",
+            colorPalette: "HighContrast"
+          },
+          hidden: false
+        },
+        {
+          id: "Other Style",
+          color: {
+            colorColumn: "other",
+            colorPalette: "HighContrast"
+          },
+          hidden: false
+        }
+      ];
+
+      updateModelFromJson(csvItem, CommonStrata.user, { styles });
+
+      const template =
+        "For the active style, id: {{terria.activeStyle.id}}, color.colorColumn: {{terria.activeStyle.color.colorColumn}}.";
       csvItem.featureInfoTemplate.setTrait(
         CommonStrata.definition,
         "template",
@@ -421,9 +445,12 @@ describe("FeatureInfoSection", function () {
         />
       );
       const result = createWithContexts(viewState, section);
-      expect(findWithText(result, "The active style is COOL.").length).toEqual(
-        1
-      );
+      expect(
+        findWithText(
+          result,
+          "For the active style, id: User Style, color.colorColumn: ste_name."
+        ).length
+      ).toEqual(1);
     });
 
     it("can use _ to refer to . and # in property keys in the featureInfoTemplate", function () {