Code example generation for search page

package.json

@@ -51,6 +51,7 @@
     "v-clipboard": "^3.0.0-next.1",
     "vue": "^2.6.12",
     "vue-chartjs": "^5.2.0",
+    "vue-highlightjs": "^1.3.3",
     "vue-i18n": "^8.28.2",
     "vue-multiselect": "^2.1.6",
     "vue-read-more-smooth": "^0.1.8",

src/StacBrowser.vue

@@ -35,6 +35,10 @@ import {
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-vue/dist/bootstrap-vue.css";
 
+import VueHighlightJS from "vue-highlightjs";
+import 'highlight.js/lib/languages/python';
+import 'highlight.js/styles/github.css';
+
 import ErrorAlert from './components/ErrorAlert.vue';
 import StacHeader from './components/StacHeader.vue';
 
@@ -49,8 +53,9 @@ import { getBest, prepareSupported } from './locale-id';
 Vue.use(AlertPlugin);
 Vue.use(ButtonGroupPlugin);
 Vue.use(ButtonPlugin);
-Vue.use(BadgePlugin);
+Vue.use(BadgePlugin)
 Vue.use(CardPlugin);
+Vue.use(VueHighlightJS);
 Vue.use(LayoutPlugin);
 Vue.use(SpinnerPlugin);
 
@@ -392,4 +397,4 @@ export default {
 @import '~bootstrap-vue/src/index.scss';
 @import "./theme/page.scss";
 @import "./theme/custom.scss";
-</style>
+</style>

src/components/CodeBox.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="codebox">
+    <pre v-highlightjs>
+      <code :class="language" :id="componentId">{{ code }}</code>
+    </pre>
+    <CopyButton variant="primary" :copyText="code">{{ $t('copy') }}</CopyButton>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "CodeBox",
+    components: {
+      CopyButton: () => import("./CopyButton.vue")
+    },
+    props: {
+      code: {
+        type: String,
+        default: "",
+      },
+
+      language: {
+        type: String,
+        default: "",
+      },
+    },
+    data() {
+      return {
+        componentId: `${this.language}Content`
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  .codebox {
+    border: 1px solid #ccc;
+    padding: 16px;
+    border-radius: 8px;
+  }
+  .codebox button {
+    background-color: #007BFF;
+    color: #FFF;
+    padding: 5px 15px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .codebox button:hover {
+    background-color: #0056b3;
+  }
+  .codebox pre, .codebox code {
+    padding: 0;
+    margin: 0;
+  }
+
+</style>

src/components/SearchCode.vue

@@ -0,0 +1,109 @@
+<template>
+  <b-tabs>
+    <b-tab title="Python">
+      <CodeBox :code="pythonCode" language="python" />
+    </b-tab>
+    <b-tab title="Javascript">
+      <CodeBox :code="javascriptCode" language="javascript" />
+    </b-tab>
+  </b-tabs>
+</template>
+
+  <script>
+    import { BTabs, BTab } from 'bootstrap-vue';
+    export default {
+      name: "SearchCode",
+      components: {
+        BTab,
+        BTabs,
+        CodeBox: () => import('./CodeBox.vue'),
+      },
+      props: {
+        catalogHref: {
+          type: String,
+          default: '',
+        },
+        filters: {
+          type: Object,
+          default() {
+             return {};
+           },
+        },
+      },
+      data() {
+        return {
+          componentId: `${this.language}Content`,
+          pythonCode: null,
+          javascriptCode: null,
+          rCode: null
+        };
+      },
+      watch: {
+        filters: {
+          deep: true,
+          handler() {
+            this.updateCode();
+          }
+        }
+      },
+      created() {
+        this.updateCode();
+      },
+      methods: {
+        dedent(str) {
+          const lines = str.split('\n').map(line => line.trim());
+          return lines.join('\n').trim();
+        },
+        filterString() {
+          let obj = this.filters || {};
+          for (let key in obj) {
+            if (obj[key] === null || (Array.isArray(obj[key]) && obj[key].length === 0)) {
+              delete obj[key];
+            }
+          }
+          return JSON.stringify(obj);
+        },
+        generatePython() {
+          return this.dedent(`from pystac_client import Client
+
+          # Connect to STAC API
+          stac_endpoint = '${this.catalogHref}'
+          client = Client.open(stac_endpoint)
+
+          # Build query
+          query = ${this.filterString()}
+
+          # Perform search
+          search_result = client.search(query)`);
+        },
+        generateJavascript() {
+          return this.dedent(`// Define the STAC API endpoint
+          const STAC_ENDPOINT = '${this.catalogHref}';
+
+          // Define your search parameters
+          const searchParams = ${this.filterString()};
+
+          // Perform the search
+          fetch(STAC_ENDPOINT, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(searchParams)
+          })
+          .then(response => response.json())
+          .then(data => {
+            console.log("STAC search results:", data);
+          })
+          .catch(error => {
+            console.error("Error fetching STAC data:", error);
+          });`);
+        },
+        updateCode() {
+          this.pythonCode = this.generatePython();
+          this.javascriptCode = this.generateJavascript();
+        }
+      },
+    };
+  </script>
+
+  <style scoped>
+  </style>

src/components/SearchFilter.vue

@@ -112,13 +112,17 @@
       <b-card-footer>
         <b-button type="submit" variant="primary">{{ $t('submit') }}</b-button>
         <b-button type="reset" variant="danger" class="ml-3">{{ $t('reset') }}</b-button>
+        <b-button type="button" variant="info" class="ml-3" v-b-modal.code>{{ $t('exampleCode') }}</b-button>
       </b-card-footer>
     </b-card>
+    <b-modal id="code" :title="$t('exampleCode')" size="lg">
+      <SearchCode :filters="query" :catalogHref="searchLink.href" />
+    </b-modal>
   </b-form>
 </template>
 
 <script>
-import { BBadge, BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormRadioGroup } from 'bootstrap-vue';
+import { BBadge, BDropdown, BDropdownItem, BForm, BFormGroup, BFormInput, BFormCheckbox, BFormRadioGroup, BModal, VBModal } from 'bootstrap-vue';
 import Multiselect from 'vue-multiselect';
 import { mapGetters, mapState } from "vuex";
 import refParser from '@apidevtools/json-schema-ref-parser';
@@ -176,12 +180,17 @@ export default {
     BFormInput,
     BFormCheckbox,
     BFormRadioGroup,
+    BModal,
     QueryableInput: () => import('./QueryableInput.vue'),
     Loading,
     Map: () => import('./Map.vue'),
+    SearchCode: () => import('../components/SearchCode.vue'),
     SortButtons: () => import('./SortButtons.vue'),
     Multiselect
   },
+  directives: {
+    'b-modal': VBModal
+  },
   mixins: [
     ApiCapabilitiesMixin,
     DatePickerMixin
@@ -202,6 +211,10 @@ export default {
     value: {
       type: Object,
       default: () => ({})
+    },
+    searchLink: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {

src/locales/en/texts.json

@@ -94,6 +94,7 @@
     "serverError": "The server encountered an issue. @:errors.contactProvider",
     "unauthorized": "The request lacks credentials, e.g. an API token. Please provide your credentials and try again."
   },
+  "exampleCode": "Example Code",
   "featureExperimental": "This feature is still experimental and may give unexpected results!",
   "fullscreen": {
     "exit": "Exit Fullscreen",

src/views/Search.vue

@@ -7,13 +7,15 @@
         <b-tabs v-model="activeSearch">
           <b-tab v-if="collectionSearch" :title="$t('search.tabs.collections')">
             <SearchFilter
-              :parent="parent" title="" :value="collectionFilters" type="Collections"
+              :parent="parent" title="" :value="collectionFilters" :searchLink="searchLink"
+              type="Collections"
               @input="setFilters"
             />
           </b-tab>
           <b-tab v-if="itemSearch" :title="$t('search.tabs.items')">
             <SearchFilter
-              :parent="parent" title="" :value="itemFilters" type="Global"
+              :parent="parent" title="" :value="itemFilters" :searchLink="searchLink"
+              type="Global"
               @input="setFilters"
             />
           </b-tab>
@@ -25,9 +27,11 @@
         <b-alert v-else-if="data === null" variant="info" show>{{ $t('search.modifyCriteria') }}</b-alert>
         <b-alert v-else-if="results.length === 0" variant="warning" show>{{ $t('search.noItemsFound') }}</b-alert>
         <template v-else>
-          <div id="search-map" v-if="itemCollection">
-            <Map :stac="stac" :stacLayerData="itemCollection" scrollWheelZoom popover />
-          </div>
+          <b-col class="right">
+            <div id="search-map" v-if="itemCollection">
+              <Map :stac="stac" :stacLayerData="itemCollection" scrollWheelZoom popover />
+            </div>
+          </b-col>
           <Catalogs
             v-if="isCollectionSearch" :catalogs="results" collectionsOnly
             :pagination="pagination" :loading="loading" @paginate="loadResults"
@@ -102,7 +106,7 @@ export default {
       itemFilters: {},
       collectionFilters: {},
       activeSearch: 0,
-      selectedCollections: {}
+      selectedCollections: {},
     };
   },
   computed: {
@@ -242,7 +246,6 @@ export default {
       this.loading = true;
       try {
         this.link = Utils.addFiltersToLink(link, this.filters, this.itemsPerPage);
-
         let key = this.isCollectionSearch ? 'collections' : 'features';
         let response = await stacRequest(this.$store, this.link);
         if (response) {