place species charts and text in tabs

src/assets/text/text.js

@@ -97,6 +97,38 @@ export default {
             heading1: "Reconstructing past and present ocean climates with Arctic microfossils",
             introParagraph1: "At the mouth of the Mackenzie River, where it spills into the Beaufort Sea north of Yukon, Canada, the sea ice, temperature, salinity, and food availability conditions are continuously changing. Species of ostracodes and foraminifera (forams) respond, and the overall assemblage of species changes through time. These changes are recorded in the sediment layers, which have been collected and analyzed by USGS researchers. These microfossils work as proxies of past climates, based on the species present and their known ecological preferences. The results show major changes in the faunas have occurred during the last 25-50 years compared to the rest of the record.",
             introParagraph2: "Taken together with the results of other proxies analyzed in this study, these indicator species recount the history of climate variability and change in the Arctic Ocean. As glaciers melt, growing seasons change, and the Mackenzie River changes flow, indicator species change. Here, we see the relative decline of <span class='scientificName'>Cassidulina reniforme</span>, <span class='scientificName'>Elphidium excavatum</span>, and <span class='scientificName'>Paracyprideis pseudopunctillata</span> combined with the increases in agglutinated <span class='scientificName'>Spiroplectammina biformis</span> and <span class='scientificName'>Kotoracythere arctoborealis</span>, which indicates that within the last 50 years or so, this region of the Beaufort Sea has been affected by climate change, including water chemistry changes. See the full 2000-year timeline of microfossil composition on the <a href='/visualizations/climate-charts/#/beaufort-sea/beaufort-sea-timeline' target='_blank'>Beaufort Sea timeline</a> page.",
+            tabData: [
+                {
+                    tabTitle: "<span class='scientificName'>Cassidulina reniforme</span>",
+                    tabText: "The tests of species in the genera <span class='scientificName'>Cassidulina</span> and <span class='scientificName'>Elphidium</span> species are made of calcium carbonate, which is highly sensitive to changes in ocean pH. The abundance of calcium carbonate forams has declined very recently.",
+                    tabContentImageSuffix: "2a",
+                    tabPrefixImageName: "F_Cassidulina"
+                },
+                {
+                    tabTitle: "<span class='scientificName'>Elphidium excavatum</span>",
+                    tabText: "As local water chemistry changes from climate change, the environment becomes less favorable to calcium carbonate tests, and the organisms such as <span class='scientificName'>Elphidium excavatum</span> that build them. <span class='scientificName'>Elphidium excavatum</span>, like <span class='scientificName'>Cassidulia reniforme</span>, has declined in abundance in this Beaufort Sea microfossil record in recent years.",
+                    tabContentImageSuffix: "2b",
+                    tabPrefixImageName: "F_Elphidium"
+                },
+                {
+                    tabTitle: "<span class='scientificName'>Spiroplectammina biformis</span>",
+                    tabText: "Species within the genus <span class='scientificName'>Spiroplectammina</span> create tests that are 'agglutinated,' or formed by cementing together particles from their environment such as sand and sediment. Agglutinated species are able to withstand harsh, corrosive and turbid (cloudy) conditions. <span class='scientificName'>Spiroplectammina</span> abundance has increased significantly in the past few decades, indicating that bottom waters may be affected by permafrost melt as a consequence of climate change.",
+                    tabContentImageSuffix: "2c",
+                    tabPrefixImageName: "F_Spiroplectammina"
+                },
+                {
+                    tabTitle: "<span class='scientificName'>Kotorachythere arctoborealis</span>",
+                    tabText: "<span class='scientificName'>Kotorachythere arctoborealis</span> is a species of ostracode that showed relatively low, but steady, abundance in the Beaufort Sea microfossil record until recently, when it has increased in relative abundance.",
+                    tabContentImageSuffix: "3a",
+                    tabPrefixImageName: "O_Kotoracythere"
+                },
+                {
+                    tabTitle: "<span class='scientificName'>Paracyprideis pseudopuntillata</span>",
+                    tabText: "<span class='scientificName'>Paracyprideis pseudopunctillata</span> is one of the most dominant species in this Arctic fossil record. However, the overall abundance has declined at the same time that <span class='scientificName'>Kotochythere arctoborealis</span> and agglutinated forams are increasing.",
+                    tabContentImageSuffix: "3b",
+                    tabPrefixImageName: "O_Paracyprideis"
+                }
+            ],
             heading2: "Meet the forams!",
             paragraph2: "Foraminifera, or 'forams', are a group of single-celled protists that secrete an external shell called a 'test.' These tests are often preserved in the sedimentary fossil record. They each have unique structures and shapes, which is how researchers identify the different species. These are some of the species used in this study as environmental indicators.",
             heading2a: "<span class='scientificName'>Cassidulina reniforme</span>",

src/components/BeaufortSeaSpeciesViz.vue

@@ -15,6 +15,13 @@
                 <p v-html="text.introParagraph2" />
             </template>
         </VizSection>
+        <tabsGroup id="species-tabs" :options="{ useUrlFragment: false }">
+            <tabItem v-for="tab, index in text.tabData" :name="tab.tabTitle" :key="tab.tabTitle" :prefix="getPrefixImageHTML(tab.tabPrefixImageName)">
+                <p v-html="tab.tabText" />
+                {{ index }}
+                <img class="tab-content-image" :src="getContentImageUrl(tab.tabContentImageSuffix)">
+            </tabItem>
+        </tabsGroup>
         <!---VizSection 2-->
         <VizSection
             :figures="true"
@@ -190,12 +197,20 @@
 </template>
 
 <script setup>
+    // import {Tabs, Tab} from 'vue3-tabs-component';
     import VizSection from '@/components/VizSection.vue';
 
     // define props
     defineProps({
         text: { type: Object }
     })
+
+    function getContentImageUrl(suffix) {
+        return `https://labs.waterdata.usgs.gov/visualizations/images/BeaufortSea/BeaufortSeaSpecies_${suffix}.png`
+    }
+    function getPrefixImageHTML(image_name) {
+        return `<img class='tab-image' src='https://labs.waterdata.usgs.gov/visualizations/images/BeaufortSea/${image_name}.png'>`
+    }
 </script>
 
 <style>
@@ -204,4 +219,140 @@
     max-width: 720px;
     margin: 0 auto 0 auto;
 }
+#species-tabs {
+    margin-top: 3rem;
+}
+ul {
+    padding-inline-start: 0px;
+}
+.tabs-component {
+    margin: auto;
+    width: 90vw;
+}
+
+.tabs-component-tabs {
+    border: solid 1px #ddd;
+    border-radius: 6px;
+    margin-bottom: 5px;
+}
+
+@media (min-width: 700px) {
+    .tabs-component-tabs {
+        border: 0;
+        align-items: stretch;
+        display: flex;
+        justify-content: flex-start;
+        margin-bottom: -1px;
+    }
+}
+
+.tabs-component-tab, .tabs-component-tab--custom {
+    color: #999;
+    font-size: 14px;
+    font-weight: 600;
+    margin-right: 0;
+    list-style: none;
+}
+
+.tabs-component-tab:not(:last-child) {
+    border-bottom: dotted 1px #ddd;
+}
+
+.tabs-component-tab:hover {
+    color: #666;
+}
+
+.tabs-component-tab.is-active {
+    color: #000;
+}
+.tabs-component-tab.is-disabled *, .tabs-component-tab--custom.is-disabled * {
+    color: #cdcdcd;
+    cursor: not-allowed !important;
+}
+
+@media (min-width: 700px) {
+    .tabs-component-tab, .tabs-component-tab--custom {
+        background-color: #fff;
+        border: solid 1px #ddd;
+        border-radius: 3px 3px 0 0;
+        margin-right: .5em;
+        /* transform: translateY(4px); */
+        transition: transform .3s ease;
+    }
+
+    .tabs-component-tab.is-active, .tabs-component-tab--custom.is-active {
+        border-bottom: solid 1px #fff;
+        z-index: 2;
+        transform: translateY(0);
+    }
+}
+
+.tabs-component-tab-a, .tabs-component-tab-a--custom {
+    align-items: center;
+    color: inherit;
+    display: flex;
+    padding: .75em 1em;
+    text-decoration: none;
+}
+
+.tabs-component-panels {
+    padding: 4em 0;
+}
+
+@media (min-width: 700px) {
+    .tabs-component-panels {
+        background-color: #fff;
+        border: solid 1px #ddd;
+        border-radius: 0 6px 6px 6px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+        padding: 4em 2em;
+    }
+}
+
+.tabs-component-btn {
+  cursor: pointer;
+  background: #e1ecf4;
+  border-radius: 3px;
+  border: 1px solid #7aa7c7;
+  padding: 4px 8px;
+  color: #39739d;
+}
+
+.tabs-component-btn:hover {
+  background-color: #b3d3ea;
+  color: #2c5777;
+}
+
+.tabs-component-btn:active {
+  background-color: #a0c7e4;
+  box-shadow: none;
+  color: #2c5777;
+}
+
+.tabs-component-tab--custom {
+    border-color: #e1ecf4;
+    color: #68838d;
+}
+
+.tabs-component-tab--custom:hover {
+    border-color: #e1ecf4;
+    color: #39739d;
+}
+
+.tabs-component-tab--custom.is-active {
+    color: #39739d;
+    border-color: #7aa7c7;
+    border-bottom: solid 1px #fff;
+}
+.tab-image {
+    max-width: 5rem;
+    max-height: 5rem;
+    margin-right: 1rem;
+}
+.tabs-component-tab.is-inactive img {
+    opacity: 0.5;
+}
+.tab-content-image {
+    width: 100%;
+}
 </style>
\ No newline at end of file

src/main.js

@@ -5,6 +5,7 @@ import { createPinia } from 'pinia'
 import VueUswds from "vue-uswds"
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {Tabs, Tab} from 'vue3-tabs-component';
 
 // arrow icons
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
@@ -22,5 +23,7 @@ app.use(createPinia())
 app.use(VueUswds)
 app.use(router)
 app.component("FontAwesomeIcon", FontAwesomeIcon)
+app.component("tabsGroup", Tabs)
+app.component("tabItem", Tab)
 
 app.mount('#app')