WIP

WIP with Vue

more progress with Vue

more WIP

docs/available-imagery-products.md

@@ -0,0 +1,18 @@
+# Available Imagery Products
+
+<div id="page-container" class="rst-content">
+ <div class="section">
+ <category-selector
+ v-bind:categories="categories"
+ v-bind:selected-category="selectedCategory"
+ v-bind:select-category="selectCategory">
+ </category-selector>
+ <p id="imagery-products">
+ <measurement-container 
+ v-for="measurement in measurements" 
+ :key="measurement.title" 
+ :measurement="measurement">
+ </measurement-container> 
+ </p>
+ </div>
+</div>

docs/css/style.css

@@ -21,4 +21,55 @@ th {
 }
 .tocbase .toctree-l3.current {
  background: #bdbdbd;
+}
+
+.source {
+ border: 1px solid #ccc;
+}
+
+/* Imagery Products Styles */
+#page-container h2 {
+ margin: 10px 10px 20px 0;
+}
+#page-container h3 {
+ margin: 10px 10px 10px 0;
+}
+#page-container h4 {
+ margin: 0px 10px 10px 0;
+}
+
+.category-selector {
+ margin: 15px 0;
+}
+.category-selector select {
+ font-size: 16px;
+}
+
+.measurement-container h3 {
+ cursor: pointer;
+}
+.measurement-container h3:hover {
+ color: #666;
+}
+
+.source-container {
+ margin: 5px;
+ padding: 10px;
+}
+
+.layer-table.docutils {
+ border-collapse: collapse;
+ width: 100%;
+}
+.layer-table.docutils tr td {
+ padding: 6px;
+}
+
+.layer-table td, .layer-table th {
+ border: 1px solid #ddd;
+ padding: 4px;
+}
+
+.monospace {
+ font-family:'Courier New', Courier, monospace;
 }

docs/javascript/imagery-products.js

@@ -0,0 +1,180 @@
+Vue.component('category-selector', {
+ props: ['categories', 'selectCategory'],
+ template: `
+ <div class="category-selector">
+ <select class="category-selector" v-on:change="selectCategory($event)">
+ <option 
+ v-for="category in categories" 
+ :value="category.title" 
+ :key="category.title">
+ {{ category.title }}
+ </option>
+ </select>
+ </div>
+ `
+})
+
+Vue.component('layer-row', {
+ props: ['layer'],
+ template: `
+ <tr>
+ <td> {{ layer.platform }} </td>
+ <td> {{ layer.instrument }} </td>
+ <td> {{ layer.title }} <br/> <a v-bind:href="getUrl(layer.id)" target="_blank"> {{layer.id}} </a> </td>
+ <td> {{ layer.period }} </td>
+ <td> {{ layer.format }} </td>
+ <td> {{ layer.startDate }} - {{layer.endDate}} </td>
+ <td class="monospace"> {{ layer.product }}</td>
+ </tr>`,
+ methods: {
+ getUrl: function (id) {
+ return `https://worldview.earthdata.nasa.gov/?l=Reference_Labels_15m(hidden),Reference_Features_15m(hidden),Coastlines_15m,${id},MODIS_Terra_CorrectedReflectance_TrueColor&lg=true`
+ } 
+ }
+})
+
+Vue.component('source-container', {
+ props: ['layers'],
+ template: `
+ <div class="source-container">
+ <table class="layer-table docutils">
+ <thead>
+ <tr> <th v-for="title in columnTitles"> {{title}} </th> </tr>
+ </thead>
+ <tbody>
+ <layer-row v-for="layer in layers" :layer="layer"></layer-row>
+ </tbody>
+ </table>
+ </div>`,
+ data: function () {
+ return { 
+ columnTitles: [ 'Platform', 'Instrument', 'Name / Identifier', 'Period', 'Format', 'Temporal Range', 'Product'] 
+ }
+ }
+})
+
+Vue.component('measurement-container', {
+ props: ['measurement'],
+ template: `
+ <div class="measurement-container">
+ <h3 v-on:click="toggleExpanded()"> {{expandSymbol}} {{ measurement.title }} </h3>
+ <div v-if="isExpanded">
+ <source-container :layers="measurement.layers"> </source-container>
+ </div>
+ </div>`,
+ data: function () {
+ return {
+ isExpanded: false,
+ expandSymbol: '+'
+ }
+ },
+ methods: {
+ toggleExpanded: function () {
+ this.isExpanded = !this.isExpanded
+ this.expandSymbol = this.isExpanded ? '-' : '+'
+ }
+ }
+})
+
+$(document).ready(() => { 
+
+ let allLayers = {};
+ let allMeasurements = {};
+ let allCategories = {};
+ let selectedCategory = 'All';
+
+ function getMeasurementsForCategory(category) { 
+ const keys = allCategories[category].measurements;
+ const mForCategory = {}
+ keys.forEach(key => {
+ const measurement = allMeasurements[key]
+ measurement.layers = [];
+ mForCategory[key] = measurement;
+ });
+
+ Object.keys(allLayers).forEach(key => {
+ const layer = allLayers[key];
+ let { layergroup } = layer; 
+ if (!layergroup) {
+ layergroup = 'Other';
+ }
+ if (layergroup === 'Reference') {
+ layergroup = 'Reference Map'
+ }
+ if (!mForCategory[layergroup]) {
+ console.error(layergroup);
+ return;
+ }
+ mForCategory[layergroup].layers.push(layer); 
+ });
+
+ return Object.keys(mForCategory).map(key => mForCategory[key]);
+ }
+
+ function getDate (layer, key) {
+ if (!layer[key]) {
+ return key === 'endDate' && layer['startDate'] ? 'Present' : '';
+ }
+ const { period, inactive } = layer;
+ const date = period === 'subdaily' ? layer[key] : layer[key].split('T')[0];
+ return (key === 'endDate' && !inactive) ? 'Present' : date;
+ }
+
+ function formatLayers (layers) {
+ Object.keys(layers).map(id => {
+ const layer = layers[id];
+ const projections = Object.keys(layer.projections);
+ const startDate = getDate(layer, 'startDate');
+ const endDate = getDate(layer, 'endDate');
+ const format = (layer.format || ' / ').split('/')[1];
+ const product = (layer.conceptIds || []).map(({shortName}) => shortName).join(', ');
+ const [ platform, instrument ] = (layer.subtitle || ' / ').split('/');
+
+ layers[id] = {
+ ...layer,
+ projections,
+ format,
+ product,
+ startDate,
+ endDate,
+ platform,
+ instrument,
+ }
+ });
+ return layers;
+ }
+
+ function main( data ) {
+ allLayers = formatLayers(data.layers);
+ allMeasurements = data.measurements;
+ allCategories = data.categories["science disciplines"];
+ const measurements = getMeasurementsForCategory(selectedCategory);
+
+ const app = new Vue({
+ el: '#page-container',
+ data: {
+ measurements: measurements,
+ categories: allCategories, 
+ selectedCategory: selectedCategory,
+ },
+ methods: {
+ selectCategory: function(event) {
+ const category = event.target.options[event.target.options.selectedIndex].text
+ this.measurements = getMeasurementsForCategory(category);
+ this.selectedCategory = category;
+ }
+ }
+ });
+
+ }
+
+ const requestSettings = {
+ url: "https://worldview.sit.earthdata.nasa.gov/config/wv.json",
+ type: "GET",
+ crossDomain: true,
+ dataType: "json",
+ success: main
+ }
+ $.ajax(requestSettings);
+
+});

mkdocs.yml

@@ -3,14 +3,17 @@ site_name: Global Imagery Browse Services (GIBS)
 nav:
  - 'index.md'
  - Available Visualizations: visualization-layers.md
+ - Available Imagery Products: available-imagery-products.md
  - Access Basics: visualization-services.md
  - Access Advanced Topics: api-advanced-topics.md
  - Accessing via GIS Applications: gis-usage.md
  - Accessing via Map Libraries and Scripts: map-library-usage.md
 extra_css:
  - css/style.css
 extra_javascript:
+ - https://cdn.jsdelivr.net/npm/vue@2
  - javascript/overrides.js
+ - javascript/imagery-products.js
 theme:
  name: 'rtd-dropdown'
 markdown_extensions: