implement scroll scpy in report card navigator

components/report_cards/chemical_probe/ChemicalProbeReportCard.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
 import EntityReportCard from '~/components/report_cards/shared/EntityReportCard.vue'
 import CompoundReportCardGenerator from '~/report_cards_structure/CompoundReportCardGenerator.js'
 
@@ -10,10 +11,15 @@ export default {
   components: {
     EntityReportCard,
   },
-  computed: {
-    reportCardStructure() {
-      return CompoundReportCardGenerator.generateReportCardStructure()
-    },
+  computed: mapState({
+    reportCardStructure: (state) => state.reportCard.reportCardStructure,
+  }),
+  mounted() {
+    const reportCardStructure = CompoundReportCardGenerator.generateReportCardStructure()
+    this.$store.dispatch(
+      'reportCard/setReportCardStructure',
+      reportCardStructure
+    )
   },
 }
 </script>

components/report_cards/shared/ReportCardSection.vue

 <template>
-  <div :id="sectionDescription.id" class="report-card-section">
+  <div
+    :id="sectionDescription.id"
+    ref="sectionContainer"
+    class="report-card-section"
+  >
     <v-row>
       <v-col cols="12">
         <a
@@ -23,6 +27,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   props: {
     sectionDescription: {
@@ -33,7 +39,26 @@ export default {
   data() {
     return {
       showLinkIcon: false,
+      ignoreFirstIntersection: true,
+    }
+  },
+  computed: mapState({
+    activeSection: (state) => state.reportCard.activeSection,
+  }),
+  mounted() {
+    const callback = (entries, observer) => {
+      const sectionIndex = this.sectionDescription.index
+
+      if (entries[0].isIntersecting) {
+        this.$store.dispatch('reportCard/setActiveSection', sectionIndex)
+      }
+    }
+    const options = {
+      threshold: 0.5,
     }
+
+    const observer = new IntersectionObserver(callback, options)
+    observer.observe(this.$refs.sectionContainer)
   },
 }
 </script>

report_cards_structure/CompoundReportCardGenerator.js

@@ -12,21 +12,25 @@ const methods = {
           id: 'Summary',
           title: 'Summary',
           component: Summary,
+          index: 0,
         },
         {
           id: 'ControlStructuresAndUse',
           title: 'Control Structures And Use',
           component: ControlStructuresAndUse,
+          index: 1,
         },
         {
           id: 'ProbeProfile',
           title: 'Probe Profile',
           component: ProbeProfile,
+          index: 2,
         },
         {
           id: 'CrystalStructures',
           title: 'Crystal Structures',
           component: CrystalStructures,
+          index: 3,
         },
       ],
     }

store/reportCard.js

+import reportCard from '~/web-components-submodule/store/reportCard.js'
+
+export default reportCard

web-components-submodule @ 9234c346

-Subproject commit 4a1c5882ae02999a91bf698fb9ee6625e5262528
+Subproject commit 9234c346d68eca62090852c93978aae0e9a4b817