set up placeholder for subthreat text

src/assets/text/text.js

@@ -247,7 +247,36 @@ export default {
                     tabMapImageAlt: "Habitat alt.",
                     tabLegendImageAlt: "Legend",
                     subThreatPrefix: "H",
-                    subThreatData: ["Dams", "Wetland drainage", "Deforestation and associated runoff", "Riparian degradation", "Agricultural extraction", "Urban extraction", "Industrial Extraction"]
+                    subThreatData: [
+                        {
+                            subThreat: "Dams",
+                            subThreatText: "Dams text"
+                        },
+                        {
+                            subThreat: "Wetland drainage",
+                            subThreatText: "Wetland drainage text"
+                        },
+                        {
+                            subThreat: "Deforestation and associated runoff",
+                            subThreatText: "Deforestation and associated runoff text"
+                        },
+                        {
+                            subThreat: "Riparian degradation",
+                            subThreatText: "Riparian degradation text"
+                        },
+                        {
+                            subThreat: "Agricultural extraction",
+                            subThreatText: "Agricultural extraction text"
+                        },
+                        {
+                            subThreat: "Urban extraction",
+                            subThreatText: "Urban extraction text"
+                        },
+                        {
+                            subThreat: "Industrial Extraction",
+                            subThreatText: "Industrial Extraction text"
+                        }
+                    ]
                 },
                 {
                     tabTitle: "Pollution",
@@ -258,7 +287,40 @@ export default {
                     tabMapImageAlt: "Pollution alt.",
                     tabLegendImageAlt: "Legend",
                     subThreatPrefix: "P",
-                    subThreatData: ["Agricultural effluents", "Urban wastewater", "Industrial effluents", "Aquaculture effluents", "Pharmaceuticals", "Oil or gas exploration", "Plastics", "Mining"]
+                    subThreatData: [
+                        {
+                            subThreat: "Agricultural effluents",
+                            subThreatText: "Agricultural effluents text"
+                        },
+                        {
+                            subThreat: "Urban wastewater",
+                            subThreatText: "Urban wastewater text"
+                        },
+                        {
+                            subThreat: "Industrial effluents",
+                            subThreatText: "Industrial effluents text"
+                        },
+                        {
+                            subThreat: "Aquaculture effluents",
+                            subThreatText: "Aquaculture effluents text"
+                        },
+                        {
+                            subThreat: "Pharmaceuticals",
+                            subThreatText: "Pharmaceuticals text"
+                        },
+                        {
+                            subThreat: "Oil or gas exploration",
+                            subThreatText: "Oil or gas exploration text"
+                        },
+                        {
+                            subThreat: "Plastics",
+                            subThreatText: "Plastics text"
+                        },
+                        {
+                            subThreat: "Mining",
+                            subThreatText: "Mining text"
+                        }
+                    ]
                 },
                 {
                     tabTitle: "Climate and Weather",
@@ -269,7 +331,28 @@ export default {
                     tabMapImageAlt: "Climate and Weather alt.",
                     tabLegendImageAlt: "Legend",
                     subThreatPrefix: "CW",
-                    subThreatData: ["Change in water temperature", "Drought", "Change in flooding", "Change in wind patterns", "Change in ice cover"]
+                    subThreatData: [
+                        {
+                            subThreat: "Change in water temperature",
+                            subThreatText: "Change in water temperature text"
+                        },
+                        {
+                            subThreat: "Drought",
+                            subThreatText: "Drought text"
+                        },
+                        {
+                            subThreat: "Change in flooding",
+                            subThreatText: "Change in flooding text"
+                        },
+                        {
+                            subThreat: "Change in wind patterns",
+                            subThreatText: "Change in wind patterns text"
+                        },
+                        {
+                            subThreat: "Change in ice cover",
+                            subThreatText: "Change in ice cover text"
+                        }
+                    ]
                 },
                 {
                     tabTitle: "Invasive species",

src/components/FindexGlobalThreatsViz.vue

@@ -22,13 +22,14 @@
                     </h3>
                     <div id="button-container">
                         <h4 v-if="tab.subThreatData.length > 1">Subthreat categories:
-                            <span v-for="subThreat, index in tab.subThreatData" :key="subThreat">
-                                <button @click="switchToSubCategory(subThreat, tab.subThreatPrefix)" :class="[tab.tabContentTitleID, { 'highlight': currentCategory == subThreat }]" v-html="subThreat" class="category-button sub"></button>
+                            <span v-for="subThreatCategory, index in tab.subThreatData" :key="subThreatCategory.subThreat">
+                                <button @click="switchToSubCategory(subThreatCategory.subThreat, tab.subThreatPrefix)" :class="[tab.tabContentTitleID, { 'highlight': currentCategory == subThreatCategory.subThreat }]" v-html="subThreatCategory.subThreat" class="category-button sub"></button>
                                 <span v-if="index < tab.subThreatData.length-1" :class="tab.tabContentTitleID" class="separator"> &#x2022; </span>
                             </span>
                         </h4>
                     </div>
-                    <p v-html="tab.tabText" />
+                    <p v-html="tab.tabText" v-if="primaryCategorySelected"/>
+                    <p v-html="subThreatText" v-if="!primaryCategorySelected"/>
                     <img class="tab-legend-image" :src="legendSource" :alt="tab.tabLegendImageAlt">
                     <img class="tab-map-image" :src="mapSource" :alt="tab.tabMapImageAlt">
                 </tabItem>
@@ -61,6 +62,7 @@
     let currentCategorySubThreatPrefix = ref(null);
     let legendSource = ref(null);
     let mapSource = ref(null);
+    let subThreatText = ref("sub threat text")
 
     // Declare behavior on mounted
     // functions called here