@explorer-1/vue 0.0.0

package/src/components/MissionDetailInlineImage/MissionDetailInlineImage.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    v-if="text || image"
+    class="MissionDetailInlineImage lg:BaseGrid container mx-auto"
+  >
+    <div
+      class="flex flex-row items-start col-span-4"
+      :class="alignment === 'right' ? 'col-start-2 order-1' : 'col-start-9 order-2'"
+    >
+      <div class="lg:mb-10 xl:mb-3 mb-2">
+        <BlockText
+          v-if="text"
+          class="lg:mb-0 mb-5"
+          :text="text"
+        />
+      </div>
+    </div>
+    <div
+      class="col-span-6"
+      :class="alignment === 'right' ? 'col-start-7 order-2' : 'col-start-2 order-1'"
+    >
+      <div class="justify-items-center relative block">
+        <BaseImagePlaceholder
+          aspect-ratio="1:1"
+          dark-mode
+        >
+          <BaseImage
+            v-if="image && image.src"
+            :src="image.src.url"
+            :srcset="theSrcSet"
+            :width="image.src.width"
+            :height="image.src.height"
+            alt=""
+            object-fit-class="cover"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+        <BaseImageCaption
+          class="lg:mt-3 mt-2"
+          :data="image"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetSrcSet } from '../../utils/mixins'
+import BlockText from './../BlockText/BlockText.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
+
+export default defineComponent({
+  name: 'MissionDetailInlineImage',
+  components: {
+    BlockText,
+    BaseImagePlaceholder,
+    BaseImage,
+    BaseImageCaption
+  },
+  props: {
+    alignment: {
+      type: String,
+      required: false,
+      default: 'right'
+    },
+    text: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    theSrcSet() {
+      if (this.image) {
+        return mixinGetSrcSet(this.image)
+      }
+      return undefined
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.MissionDetailInlineImage {
+  .ThemeVariantDark & {
+    > div {
+      @apply text-white;
+    }
+  }
+}
+</style>

package/src/components/MissionDetailStats/DistanceStats.test.js

@@ -0,0 +1,133 @@
+import { supportedAPIPaths } from './DistanceStats.vue'
+
+const consoleError = console.error
+
+describe('DistanceStats - /api/v1/missions/', () => {
+  const config = supportedAPIPaths['/api/v1/missions/']
+
+  beforeEach(() => {
+    console.error = () => {}
+  })
+
+  afterEach(() => {
+    console.error = consoleError
+  })
+
+  test('gets the correct path', () => {
+    expect(config.getPath('https://mars.nasa.gov/api/v1/missions/2/', '/api/v1/missions/')).toBe(
+      '/api/mars/api/v1/missions/2/'
+    )
+  })
+
+  test('throws', () => {
+    const config = supportedAPIPaths['/api/v1/missions/']
+    expect(() => {
+      config.getPath('https://mars.nasa.gov/api/v2/potato/')
+    }).toThrow('/api/v1/missions/')
+  })
+
+  test('gets the correct distance', () => {
+    expect(config.getDistance({ mi_traveled: 10.22 })).toEqual({
+      value: 10.22,
+      system: 'imperial'
+    })
+  })
+
+  test('throws', () => {
+    expect(() => {
+      config.getDistance({})
+    }).toThrow('/api/v1/missions/')
+  })
+})
+
+describe('DistanceStats - /spice_data/getRangefromT1/', () => {
+  const config = supportedAPIPaths['/spice_data/getRangefromT1/']
+
+  beforeEach(() => {
+    console.error = () => {}
+  })
+
+  afterEach(() => {
+    console.error = consoleError
+  })
+
+  test('gets the correct path', () => {
+    expect(
+      config.getPath(
+        'https://mars.nasa.gov/spice_data/getRangefromT1/EARTH/MARS/2020-10-19T11:29:0/2020-10-19T11:34:0/1/',
+        '/spice_data/getRangefromT1/'
+      )
+    ).toMatch(/\/api\/mars\/spice_data\/getRangefromT1\/EARTH\/MARS\/.+\/.+\/1\//)
+  })
+
+  test('also gets the correct path', () => {
+    expect(
+      config.getPath(
+        'https://mars.nasa.gov/spice_data/getRangefromT1/VENUS/MARS/',
+        '/spice_data/getRangefromT1/'
+      )
+    ).toMatch(/\/api\/mars\/spice_data\/getRangefromT1\/VENUS\/MARS\/.+\/.+\/1\//)
+  })
+
+  test('throws', () => {
+    const config = supportedAPIPaths['/spice_data/getRangefromT1/']
+    expect(() => {
+      config.getPath('https://mars.nasa.gov/spice_data/getRangefromT1/1')
+    }).toThrow()
+  })
+
+  test('gets the correct distance', () => {
+    expect(
+      config.getDistance(
+        {
+          items: [{ value: (4500.23).toString() }],
+          error: false,
+          units: 'KM'
+        },
+        0
+      )
+    ).toEqual({
+      value: 4500,
+      system: 'metric'
+    })
+  })
+
+  test('throws if error flag is set', () => {
+    expect(() => {
+      config.getDistance(
+        {
+          items: [{ value: (4500.23).toString() }],
+          error: true,
+          units: 'KM'
+        },
+        0
+      )
+    }).toThrow()
+  })
+
+  test('throws if unit is unexpected', () => {
+    expect(() => {
+      config.getDistance(
+        {
+          items: [{ value: (4500.23).toString() }],
+          error: false,
+          units: 'AU'
+        },
+        0
+      )
+    }).toThrow()
+  })
+
+  test('throws if there is no data', () => {
+    expect(() => {
+      config.getDistance(
+        {
+          items: [],
+          error: false,
+          units: 'KM'
+        },
+        0
+      )
+    }).toThrow()
+  })
+})

package/src/components/MissionDetailStats/DistanceStats.vue

@@ -0,0 +1,250 @@
+<template>
+  <div
+    v-if="typeof value !== 'undefined' || distanceApiUrls"
+    class="DistanceStats"
+  >
+    <slot
+      name="label"
+      :label="distanceTypeLabel"
+    >
+      <p>{{ distanceTypeLabel }}</p>
+    </slot>
+    <p v-if="showError">Unavailable</p>
+    <p v-else-if="isLoading">Loading…</p>
+    <BaseUnitToggle
+      v-else-if="loadedValue"
+      v-slot="slotProps"
+      unit-pair="MI_KM"
+      :value="loadedValue"
+      :value-system="loadedSystem"
+    >
+      <slot
+        name="value"
+        :formatted-value="slotProps.formattedValue"
+      >
+        {{ slotProps.formattedValue }}
+      </slot>
+    </BaseUnitToggle>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import dayjs from 'dayjs'
+import BaseUnitToggle, { UnitSystemName } from './../BaseUnitToggle/BaseUnitToggle.vue'
+
+export const distanceTypes = {
+  earth: 'Distance from Earth',
+  mars: 'Distance traveled on Mars'
+} as const
+export type DistanceType = keyof typeof distanceTypes
+
+type APIDistance = { value: number; system: UnitSystemName }
+
+type SPICEPlanetsResponse = {
+  items: {
+    date: string
+    value: string
+  }[]
+  error: boolean
+  units: 'KM'
+}
+
+/**
+ * Map from mars.nasa.gov API endpoint URLs to our corresponding proxied path.
+ */
+export const supportedAPIPaths = {
+  '/api/v1/missions/': {
+    /**
+     * Query based on mission ID only.
+     * Throws an error if there is no mission ID.
+     */
+    getPath: (endpointURL: string, match: string): string => {
+      const query = endpointURL.split(match)[1]
+
+      if (!query) {
+        console.error(endpointURL, match)
+        throw new Error('Error querying /api/v1/missions/ API')
+      }
+      return `/api/mars${match}${query}`
+    },
+    /**
+     * Extract the distance from the single field.
+     */
+
+    getDistance: (data: { mi_traveled: number }): APIDistance => {
+      const value = data?.mi_traveled
+
+      if (typeof value === 'undefined') {
+        console.error(data)
+        throw new Error('Error processing /api/v1/missions/ data')
+      }
+      return {
+        value: data.mi_traveled,
+        system: 'imperial'
+      }
+    }
+  },
+  '/spice_data/getRangefromT1/': {
+    /**
+     * Query SPICE data based on a planets pair and a pair of current time + future datetime (arbitrary).
+     * Fails if the endpoint URL is not of the expected format.
+     */
+    getPath: (endpointURL: string, match: string): string => {
+      const query = endpointURL.split(match)[1]
+      const queryParams = query.split('/')
+      const planets = `${queryParams[0]}/${queryParams[1]}/`
+      const range = [dayjs(), dayjs().add(1, 'minute')]
+        // Generates the date format expected by the endpoint – ISO 8601, minus milliseconds and zero UTC offset indicator.
+        .map((d) => d.toISOString().replace(/\.\d+Z$/, ''))
+        .join('/')
+      return `/api/mars/spice_data/getRangefromT1/${planets}${range}/1/`
+    },
+    /**
+     * Extract a single value from a SPICE data array.
+     */
+    getDistance: (data: SPICEPlanetsResponse, index: number): APIDistance => {
+      const value = data?.items[index]?.value
+      if (data.error || data.units !== 'KM' || typeof value === 'undefined') {
+        console.error(data, index)
+        throw new Error('Error processing /spice_data/getRangefromT1/ data')
+      }
+      return {
+        // Matches the rounding from the reference implementation, https://mars.nasa.gov/msl/home/.
+        value: Math.round(Number(value)),
+        system: 'metric'
+      }
+    }
+  }
+} as const
+type SupportedAPI = keyof typeof supportedAPIPaths
+type SPICEAPIConfig = (typeof supportedAPIPaths)['/spice_data/getRangefromT1/']
+const supportedPaths = Object.keys(supportedAPIPaths) as SupportedAPI[]
+
+// Normally this should just be `number`, but due to our usage of `@types/node`
+// we need to define this in a way that is compatible with both Node and browser code.
+type Timeout = ReturnType<typeof setTimeout>
+
+/**
+ * Display a distance stat – label, value, unit toggle,
+ * either from a predefined value, or supported API endpoint.
+ */
+export default defineComponent({
+  name: 'DistanceStats',
+  components: {
+    BaseUnitToggle
+  },
+  props: {
+    distanceType: {
+      type: String as PropType<DistanceType | ''>,
+      required: true,
+      validator: (val: string): boolean => val === '' || Object.keys(distanceTypes).includes(val)
+    },
+    value: Number,
+    valueSystem: {
+      type: String as PropType<UnitSystemName>,
+      required: false,
+      default: 'imperial'
+    },
+    distanceApiUrls: {
+      type: String,
+      required: false,
+      validator: (val: string): boolean => supportedPaths.some((p) => val.includes(p) || val === '')
+    },
+    labelClass: String
+  },
+  data(): {
+    apiDistance: APIDistance | null
+    showError: boolean
+    timeout: Timeout | null
+  } {
+    return {
+      apiDistance: null,
+      showError: false,
+      timeout: null
+    }
+  },
+  computed: {
+    distanceTypeLabel(): string {
+      return distanceTypes[this.distanceType as DistanceType] || this.distanceType
+    },
+    loadedValue(): number | undefined {
+      if (this.distanceApiUrls) {
+        return this.apiDistance?.value || 0
+      }
+      return this.value
+    },
+    loadedSystem(): UnitSystemName {
+      if (this.distanceApiUrls) {
+        return this.apiDistance?.system || 'imperial'
+      }
+      return this.valueSystem
+    },
+    isLoading(): boolean {
+      return !!this.distanceApiUrls && this.apiDistance === null
+    }
+  },
+  mounted() {
+    if (this.distanceApiUrls) {
+      this.getAPIDistance()
+    }
+  },
+  beforeUnmount(): void {
+    clearTimeout(this.timeout as Timeout)
+  },
+  methods: {
+    /**
+     * Retrieve distance data from supported API endpoints.
+     */
+    async getAPIDistance(): Promise<void> {
+      // Wrap everything in a try…catch. All this code depends
+      // on the APIs’ data formats, which may change, and should
+      // be handled elegantly if possible.
+      try {
+        const match = supportedPaths.find((key: SupportedAPI) =>
+          this.distanceApiUrls?.includes(key)
+        )
+        if (match && this.distanceApiUrls) {
+          const apiConfig = supportedAPIPaths[match]
+          const path = apiConfig.getPath(this.distanceApiUrls, match)
+          const data = await this.$axios.$get(path)
+
+          // Special treatment for SPICE data that returns an array of predicted distances for future times, in 1-sec increments.
+          if (match === '/spice_data/getRangefromT1/') {
+            this.updateSPICEData(apiConfig as SPICEAPIConfig, data, 0)
+          } else {
+            this.apiDistance = apiConfig.getDistance(data, 0)
+          }
+        }
+      } catch (e) {
+        console.error(e)
+        this.showError = true
+      }
+    },
+
+    /**
+     * Special logic for SPICE data that can be live-updated.
+     * Automatically cycles through the data array, and
+     * automatically makes more requests for more data when needed.
+     */
+    async updateSPICEData(
+      apiConfig: SPICEAPIConfig,
+      data: SPICEPlanetsResponse,
+      index: number
+    ): Promise<void> {
+      this.apiDistance = apiConfig.getDistance(data, index)
+      const next = index + 1
+
+      if (next < data?.items?.length) {
+        this.timeout = setTimeout(this.updateSPICEData.bind(this, apiConfig, data, next), 1000)
+      } else if (this.distanceApiUrls) {
+        const nextData = await this.$axios.$get(
+          apiConfig.getPath(this.distanceApiUrls, '/spice_data/getRangefromT1/')
+        )
+        this.updateSPICEData(apiConfig, nextData, 0)
+      }
+    }
+  }
+})
+</script>

package/src/components/MissionDetailStats/MissionDetailStats.stories.js

@@ -0,0 +1,95 @@
+import MissionDetailStats, { statuses, clockTypes } from './MissionDetailStats.vue'
+import MissionDetailStatsMini from './MissionDetailStatsMini.vue'
+import MissionDetailStatsMicro from './MissionDetailStatsMicro.vue'
+import { distanceTypes } from './DistanceStats.vue'
+
+export default {
+  title: 'WWW/MissionDetail/MissionDetailStats',
+  component: MissionDetailStats,
+  subcomponents: { MissionDetailStatsMini, MissionDetailStatsMicro },
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="mt-20"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/,
+  argTypes: {
+    status: {
+      control: { type: 'select' },
+      options: Object.keys(statuses)
+    },
+    clockType: {
+      control: { type: 'select' },
+      options: Object.keys(clockTypes)
+    },
+    distanceType: {
+      control: {
+        type: 'select'
+      },
+      options: Object.keys(distanceTypes).concat([''])
+    }
+  }
+}
+
+export const MissionDetailStatsData = {
+  showClock: true,
+  showDistance: true,
+  clockType: 'countdown',
+  startDateTime: '2021-02-18T20:55:00+00:00',
+  distanceType: 'earth',
+  distanceValue: 4986444,
+  distanceApiUrls: '',
+  displayDate: 'Oct. 1, 2020',
+  missionTypes: [{ missionType: 'Landers/Rovers' }],
+  missionTargets: [{ target: 'Mars' }],
+  status: 'future'
+}
+
+export const Full = {
+  args: MissionDetailStatsData,
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    components: { MissionDetailStats },
+    template: '<MissionDetailStats v-bind="args" />'
+  })
+}
+
+export const Mini = {
+  args: {
+    showClock: MissionDetailStatsData.showClock,
+    showDistance: MissionDetailStatsData.showDistance,
+    clockType: MissionDetailStatsData.clockType,
+    startDateTime: '2021-02-18T20:55:00+00:00',
+    distanceType: MissionDetailStatsData.distanceType,
+    distanceValue: MissionDetailStatsData.distanceValue
+  },
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    components: { MissionDetailStatsMini },
+    template: '<MissionDetailStatsMini v-bind="args" />'
+  })
+}
+
+export const Micro = {
+  args: {
+    showClock: MissionDetailStatsData.showClock,
+    clockType: MissionDetailStatsData.clockType,
+    startDateTime: '2021-02-18T20:55:00+00:00'
+  },
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    components: { MissionDetailStatsMicro },
+    template: '<MissionDetailStatsMicro v-bind="args" />'
+  })
+}

package/src/components/MissionDetailStats/MissionDetailStats.test.js

@@ -0,0 +1,23 @@
+import { mount } from '@vue/test-utils'
+
+import MissionDetailStats from './MissionDetailStats.vue'
+
+describe('MissionDetailStats', () => {
+  test('renders with partial data', () => {
+    mount(MissionDetailStats, {
+      propsData: {
+        showClock: false,
+        showDistance: false,
+        clockType: 'countdown',
+        startDateTime: null,
+        distanceType: '',
+        distanceValue: null,
+        distanceApiUrls: '',
+        displayDate: null,
+        missionTypes: [],
+        missionTargets: [],
+        status: 'draft'
+      }
+    })
+  })
+})