@explorer-1/vue 0.2.55 → 0.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.55",
+  "version": "0.2.57",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.13"
+    "@explorer-1/common": "1.1.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockText/BlockText.stories.js

@@ -3,13 +3,19 @@ import BlockText, { variants } from './BlockText.vue'
 export default {
   title: 'Components/Blocks/BlockText',
   component: BlockText,
+  tags: ['!autodocs'],
   argTypes: {
     variant: {
       control: { type: 'select' },
       options: Object.keys(variants)
     },
     text: { control: { type: 'text' } }
-  }
+  },
+  decorators: [
+    () => ({
+      template: '<div class="lg:w-2/3 mx-auto"><story /></div>'
+    })
+  ]
 }
 
 export const BaseStory = {
@@ -19,3 +25,26 @@ export const BaseStory = {
     text: `<p>AVIRIS is the first full spectral range imaging spectrometer and dedicated to <a href="https://en.wikipedia.org/wiki/Remote_sensing" target="_blank">Earth Remote Measurement</a>. Test <a href="#">preventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainerpreventlongurlsfrombreakingoutofcontainer</a>. It is a unique optical sensor that continues to deliver calibrated images of the upwelling spectral radiance in 224 contiguous spectral channels (bands) with wavelengths from 380 to 2510 nanometers. AVIRIS has been flown on four aircraft platforms: NASA's high altitude ER-2 jet, Twin Otter International's turboprop, Scaled Composites' Proteus, and NASA's WB-57. The ER-2 flies at approximately 20 km above sea level, at about 730 km/hr. The Twin Otter aircraft flies at 4km above ground level at 130km/hr. AVIRIS has flown North America including Alaska, Hawaii, Europe, Brazil, and Argentina.</p><p>The objective of the AVIRIS project is to support advanced NASA science and applications research.  AVIRIS uses imaging spectroscopy to detect, identify, measure, and monitor constituents and processes of the Earth's surface and atmosphere based on measured constituent absorption and scattering signatures. Science and applications research with AVIRIS data spans a wide range of discipline across the Earth system. </p><hr /><ul><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet <strong>consectatur adipscing</strong></li><li>Lorem ipsum dolor sit amet consectatur adipscing</li></ul><p>Lorem ipsum dolor sit amet paragraph text</p><ol><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor <strong>sit amet</strong> consectatur adipscing</li><li>Lorem <strong>ipsum dolor</strong> sit amet consectatur adipscing</li></ol><hr /><p>Lorem ipsum dolor sit amet consectatur adipscing</p>`
   }
 }
+
+export const RichTextMedia = {
+  args: {
+    variant: 'large',
+    text: `<p data-block-key="5f55p">Description for it.</p><div class="richtext-image fullwidth"><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" height="480" loading="lazy" src="https://picsum.photos/640/480" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">One of the navigation cameras aboard NASAs Perseverance Mars rover captured this view looking back at the Bright Angel area on July 30, 2024.</div>
+                    <span class="credit">Credit: NASA/JPL-Caltech</span>
+                    <a class="caption-link" href="#">Full Image Details</a>
+                </div>
+            </div><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><div class="richtext-image right"><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" height="336" loading="lazy" src="https://picsum.photos/640/336" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">This artists concept depicts one of the Carbon Mapper Coalitions Tanager satellites, the first of which launched on Aug. 16, 2024. Tanager-1 will use imaging spectrometer technology developed at JPL to measure greenhouse gas point-source emissions.</div>
+                    <span class="credit">Credit: Planet Labs PBC</span>
+                    <a class="caption-link" href="#">Full Image Details</a>
+                </div>
+            </div><p data-block-key="4409g">More text and something that&#x27;s right-aligned.</p><p data-block-key="bid36"></p><div class="richtext-image left"><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" height="350" loading="lazy" src="https://picsum.photos/640/350" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
+                </div>
+            </div><p data-block-key="1f4rd">More text and something that&#x27;s left-aligned</p>`
+  }
+}

package/src/components/SearchFilterGroup/SearchFilterGroup.stories.js

@@ -58,3 +58,92 @@ export const DateFilter = {
     truncateFilters: true
   }
 }
+export const SubFilters = {
+  decorators: [
+    () => ({
+      template: '<div id="storyRoot" class="md:w-1/2 lg:w-1/3"><story /></div>'
+    })
+  ],
+  args: {
+    filterBy: [],
+    buckets: [
+      { key: 'Solar System', doc_count: 3308 },
+      { key: 'Earth', doc_count: 1179 },
+      { key: 'Stars and Galaxies', doc_count: 979 },
+      { key: 'Technology', doc_count: 480 }
+    ],
+    groupKey: 'topics',
+    groupTitle: 'Topic',
+    truncateFilters: false,
+    subFilters: {
+      solar_system: [
+        {
+          key: 'Sun',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Mercury',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Venus',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ],
+      earth: [
+        {
+          key: 'Sea Level',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Pollution',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Climate Change',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ],
+      stars_and_galaxies: [
+        {
+          key: 'Sea Level',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Pollution',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Climate Change',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ],
+      technology: [
+        {
+          key: 'Sea Level',
+          agg: 'solar_system_area',
+          doc_count: 20
+        },
+        {
+          key: 'Pollution',
+          agg: 'solar_system_area',
+          doc_count: 21
+        },
+        {
+          key: 'Climate Change',
+          agg: 'solar_system_area',
+          doc_count: 22
+        }
+      ]
+    }
+  }
+}

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -18,27 +18,98 @@
         ref="buckets"
         class="form-group form-check"
       >
-        <!-- correct for zero based index -->
-        <div
-          v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
-          class="flex my-2"
+        <SearchFilterGroupAccordionItem
+          v-if="hasSubFilters(bucket.key_as_string || bucket.key)"
+          class="w-auto"
+          :init-open="subFilterIsInQueryParams(bucket.key_as_string || bucket.key)"
         >
-          <input
-            :id="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
-            v-model="filterByHandler"
-            type="checkbox"
-            :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
-            class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
-          />
-          <!-- 'key_as_string' exists for dates to have a human readable version -->
-          <label
-            :for="bucket.key_as_string ? generateId(bucket.key_as_string) : generateId(bucket.key)"
-            class="form-check-label pl-2 tracking-normal align-middle"
+          <template #header>
+            <!-- correct for zero based index -->
+            <div
+              v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
+              class="flex flex-grow"
+            >
+              <input
+                :id="
+                  bucket.key_as_string
+                    ? generateId(bucket.key_as_string, groupKey)
+                    : generateId(bucket.key, groupKey)
+                "
+                v-model="filterByHandler"
+                type="checkbox"
+                :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
+                class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+              />
+              <!-- 'key_as_string' exists for dates to have a human readable version -->
+              <label
+                :for="
+                  bucket.key_as_string
+                    ? generateId(bucket.key_as_string, groupKey)
+                    : generateId(bucket.key, groupKey)
+                "
+                class="form-check-label pl-2 tracking-normal align-middle"
+              >
+                <span class="font-extrabold">{{
+                  prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key)
+                }}</span>
+                <span class="text-gray-mid-dark font-normal text-sm">
+                  ({{ bucket.doc_count.toLocaleString() }})
+                </span>
+              </label>
+            </div>
+          </template>
+          <template #default>
+            <!-- dynamic slots for subFilters -->
+            <div
+              v-if="
+                (bucket.key_as_string || bucket.key) &&
+                getSubFilters(bucket.key_as_string || bucket.key) &&
+                subFilterParentKeys?.length
+              "
+              class="block"
+            >
+              <div
+                v-if="hasSubFilters(bucket.key_as_string || bucket.key)"
+                class="SubFilters"
+              >
+                <slot :name="`slot_${getSubFilterParentKey(bucket.key_as_string || bucket.key)}`" />
+              </div>
+            </div>
+          </template>
+        </SearchFilterGroupAccordionItem>
+        <template v-else>
+          <!-- correct for zero based index -->
+          <div
+            v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
+            class="flex my-2"
           >
-            {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
-            <span class="text-gray-mid-dark"> ({{ bucket.doc_count.toLocaleString() }}) </span>
-          </label>
-        </div>
+            <input
+              :id="
+                bucket.key_as_string
+                  ? generateId(bucket.key_as_string, groupKey)
+                  : generateId(bucket.key, groupKey)
+              "
+              v-model="filterByHandler"
+              type="checkbox"
+              :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
+              class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+            />
+            <!-- 'key_as_string' exists for dates to have a human readable version -->
+            <label
+              :for="
+                bucket.key_as_string
+                  ? generateId(bucket.key_as_string, groupKey)
+                  : generateId(bucket.key, groupKey)
+              "
+              class="form-check-label pl-2 tracking-normal align-middle"
+            >
+              {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
+              <span class="text-gray-mid-dark text-sm">
+                ({{ bucket.doc_count.toLocaleString() }})
+              </span>
+            </label>
+          </div>
+        </template>
       </div>
     </div>
     <div v-else><span class="text-sm text-gray-mid-dark">No matching filters</span></div>
@@ -63,16 +134,28 @@
 </template>
 <script lang="ts">
 // @ts-nocheck
+import { PropType } from 'vue'
 import isEqual from 'lodash/isEqual.js'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import { lookupContentType } from './../../utils/lookupContentType'
+import { SubFiltersObject } from './../../interfaces'
+import SearchFilterGroupAccordionItem from './../SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue'
 
 export default {
   name: 'SearchFilterGroup',
+  components: {
+    SearchFilterGroupAccordionItem
+  },
   props: {
-    filterBy: Array,
-    buckets: null,
+    filterBy: {
+      type: Array,
+      default: undefined
+    },
+    buckets: {
+      type: Object,
+      default: undefined
+    },
     hideFilterGroups: {
       type: Array,
       default: () => []
@@ -83,12 +166,20 @@ export default {
     },
     groupTitle: {
       type: String,
-      required: false
+      default: ''
     },
     truncateFilters: {
       type: Boolean,
       required: false,
       default: false
+    },
+    subFilters: {
+      type: Object as PropType<SubFiltersObject>,
+      default: undefined
+    },
+    subFilterAggKey: {
+      type: String,
+      default: undefined
     }
   },
   emits: ['update:filterBy'],
@@ -118,7 +209,10 @@ export default {
     },
     showFilterGroup() {
       if (this.themeStore.isEdu) {
-        return this.groupTitle && !this.hideFilterGroups.includes(this.groupKey)
+        return (
+          (this.groupTitle || this.buckets?.length) &&
+          !this.hideFilterGroups.includes(this.groupKey)
+        )
       } else {
         return (
           typeof this.groupKey !== 'undefined' &&
@@ -127,6 +221,9 @@ export default {
           !this.hideFilterGroups.includes(this.groupKey)
         )
       }
+    },
+    subFilterParentKeys() {
+      return this.subFilters ? Object.keys(this.subFilters) : undefined
     }
   },
   watch: {
@@ -152,11 +249,51 @@ export default {
       }
     }
   },
+
   methods: {
-    generateId(value) {
+    generateId(value, group) {
       let valueString = String(value)
       valueString = valueString.split(' ').join('')
-      return `filter_${this.groupKey}_${valueString}`
+      return `filter_${group}_${valueString}`
+    },
+    // used to match sub-filters to their parent
+    getSubFilterParentKey(value) {
+      let key = value
+      if (key) {
+        key = key.toLowerCase()
+        key = key.replaceAll(' ', '_')
+      }
+      return key
+    },
+    hasSubFilters(filterKey) {
+      const lookupKey = this.getSubFilterParentKey(filterKey)
+      // check if any of the keys are populated in subFilters
+      if (this.subFilters && lookupKey && this.subFilters[lookupKey]) {
+        return true
+      }
+      return undefined
+    },
+    subFilterIsInQueryParams(bucketKey) {
+      const subFilters = this.getSubFilters(bucketKey)
+      let state = false
+      if (subFilters?.length) {
+        subFilters.forEach((subFilter) => {
+          const agg = subFilter.agg
+          const key = subFilter.key
+          if (agg && key && this.$route.query[agg]?.includes(key)) {
+            state = true
+          }
+        })
+      }
+      return state
+    },
+    getSubFilters(filterKey) {
+      const lookupKey = this.getSubFilterParentKey(filterKey)
+      // check if any of the keys are populated in subFilters
+      if (this.subFilters && lookupKey && this.subFilters[lookupKey]) {
+        return this.subFilters[lookupKey]
+      }
+      return undefined
     },
     toggleShowMoreFilters() {
       if (this.checkbox.checkboxLimit === this.checkbox.initialLimit) {
@@ -178,6 +315,9 @@ export default {
         name = name.replace('EDU ', '')
       }
       return name ? name : key
+    },
+    getSlotName(key) {
+      return `slot_${key}`
     }
   }
 }

package/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { uniqueId } from 'lodash'
+import IconPlus from './../Icons/IconPlus.vue'
+
+export interface SearchFilterGroupAccordionItemProps {
+  initOpen?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<SearchFilterGroupAccordionItemProps>(), {
+  initOpen: false
+})
+
+const { initOpen } = reactive(props)
+
+const ariaExpanded = ref(false)
+const isHidden = ref(!initOpen)
+const itemId = ref(uniqueId())
+
+const panelId = computed(() => {
+  return `filterGroup_accordion_panel_${itemId.value}`
+})
+
+const headingId = computed(() => {
+  return `filterGroup_accordion_heading_${itemId.value}`
+})
+
+const handleClick = () => {
+  ariaExpanded.value = !ariaExpanded.value
+  isHidden.value = !isHidden.value
+  if (isHidden.value) {
+    emit('filterGroupAccordionItemClosed')
+  } else {
+    emit('filterGroupAccordionItemOpened')
+  }
+}
+
+const emit = defineEmits(['filterGroupAccordionItemOpened', 'filterGroupAccordionItemClosed'])
+</script>
+<template>
+  <div
+    class="SearchFilterGroupAccordionItem border-t pt-2.5"
+    :class="{
+      '-open border-gray-light-mid  -mb-px': !isHidden,
+      'border-transparent mb-3': isHidden
+    }"
+  >
+    <div class="SearchFilterGroupAccordionItemHeader flex flex-row w-full content-between">
+      <template v-if="$slots.header">
+        <slot name="header"></slot>
+        <button
+          v-bind-once="{ id: headingId, 'aria-controls': panelId }"
+          :aria-expanded="ariaExpanded"
+          aria-label="Expand"
+          class="SearchFilterGroupAccordionItem-trigger group block w-auto text-body-lg pl-4 pr-1 -my-2"
+          @click="handleClick()"
+        >
+          <span
+            class="SearchFilterGroupAccordionItem-icon inline-block text-xs text-action flex-shrink-0 transform transition-transform"
+            :class="{ '!rotate-45': !isHidden }"
+          >
+            <IconPlus />
+          </span>
+        </button>
+      </template>
+    </div>
+    <div
+      v-show="!isHidden"
+      class="SearchFilterGroupAccordionItemContent text-sm"
+    >
+      <div
+        v-bind-once="{ id: panelId, 'aria-labelledby': headingId }"
+        role="region"
+        class="SearchFilterGroupAccordionItem-panel border-b border-gray-light-mid"
+      >
+        <slot name="default" />
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.SearchFilterGroupAccordionItemContent {
+  input.mt-px {
+    @apply mt-0 #{!important};
+  }
+}
+</style>

package/src/interfaces.ts

@@ -185,6 +185,27 @@ export interface FooterResponse {
   footer: any
 }
 
+export interface EDUSubjectArea {
+  id: number
+  primarySubject: EduResourcesSubject
+  subjectArea: string
+}
+
+export interface SubFiltersObject {
+  [key: string]: {
+    parentBucketKey: string
+    aggParentKey: string
+    aggMapKey: string
+    subFilterKey: string
+  }
+}
+
+export interface EduSubjectAreasResponse {
+  eduSubjectAreas: {
+    eduSubjectAreas: EDUSubjectArea[]
+  }
+}
+
 export type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu'
 
 export interface Attributes {

package/src/templates/PageImageDetail/PageImageDetail.vue

@@ -159,7 +159,7 @@
                 <BaseLink
                   variant="none"
                   link-class="font-primary text-jpl-red hover:text-jpl-red-light w-full py-3 text-lg"
-                  to="/missions/?mission_target={{ item.target }}"
+                  :to="`/missions/?mission_target=${item.target}`"
                 >
                   {{ item.target }}
                 </BaseLink>