Add natural language search

.github/workflows/deploy-branch.yml

@@ -0,0 +1,60 @@
+name: Deploy Branch Preview
+on:
+  push:
+    branches-ignore:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    env:
+      SEMANTIC_SEARCH_API_URL: ${{ secrets.SEMANTIC_SEARCH_API_URL }}
+    steps:
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+
+      - uses: actions/checkout@v4
+
+      - name: Get branch name
+        id: branch-name
+        run: |
+          if [ "${{ github.event_name }}" = "pull_request" ]; then
+            echo "branch_name=${{ github.head_ref }}" >> $GITHUB_OUTPUT
+          else
+            echo "branch_name=${{ github.ref_name }}" >> $GITHUB_OUTPUT
+          fi
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build for preview
+        run: npm run build -- --pathPrefix="/stac-browser/preview/${{ steps.branch-name.outputs.branch_name }}" --historyMode=hash --semanticSearchApiUrl="${{ env.SEMANTIC_SEARCH_API_URL }}"
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: dist
+          exclude_assets: "report.html"
+          user_name: "STAC Browser CI"
+          user_email: github@developmentseed.org
+          destination_dir: preview/${{ steps.branch-name.outputs.branch_name }}
+          publish_branch: gh-pages-preview
+
+      - name: Comment PR
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const url = `https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/preview/${{ steps.branch-name.outputs.branch_name }}/`;
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: `🚀 **Preview deployed!**\n\nYour changes are now available at: ${url}\n\nThis preview will be automatically updated on each push to this branch.`
+            });

README.md

@@ -16,7 +16,7 @@ It's not officially supported, but you may also be able to use it for
 certain _OGC API - Records_ and _OGC API - Features_ compliant servers.
 
 **Please note that STAC Browser is currently with limited funding for both maintenance, bug fixes and improvements. This means issues and PRs may be addressed very slowly.
-If you care about STAC Browser and have some funds to support the future of STAC Browser, please contact matthias@mohr.ws**
+If you care about STAC Browser and have some funds to support the future of STAC Browser, please contact <matthias@mohr.ws>**
 
 **Table of Contents:**
 
@@ -37,6 +37,7 @@ If you care about STAC Browser and have some funds to support the future of STAC
       - [Translation](#translation)
     - [Customize through root catalog](#customize-through-root-catalog)
     - [Custom extensions](#custom-extensions)
+    - [Natural Language Search](#natural-language-search)
   - [Docker](#docker)
   - [Contributing](#contributing)
     - [Adding a new language](#adding-a-new-language)
@@ -269,6 +270,48 @@ STAC Browser supports some non-standardized extensions to the STAC specification
    Add a `name` field and it will be used as title in the tab header, the same applies for the core Asset Object.
 3. A link with relation type `icon` and a Browser-supported media type in any STAC entity will show an icon in the header and the lists of Catalogs, Collections and Items.
 
+### Natural Language Search
+
+STAC Browser supports natural language search functionality that allows users to search for STAC items using descriptive queries in natural language (e.g., "satellite images of forests in California from 2023").
+
+To enable natural language search:
+
+1. **Configure the API URL**: Set the `semanticSearchApiUrl` option in your configuration file:
+
+```javascript
+// config.js
+module.exports = {
+  // ... other config options
+  semanticSearchApiUrl: "https://your-semantic-search-api.com",
+  // ... other config options
+};
+```
+
+2. **API Requirements**: Your semantic search API should accept POST requests to `/items/search` with the following format:
+
+```json
+{
+  "query": "your natural language query",
+  "limit": 10
+}
+```
+
+And return results in this format:
+
+```json
+{
+  "results": {
+    "items": [
+      // Array of STAC items
+    ]
+  }
+}
+```
+
+3. **User Interface**: Once configured, users will see the "Natural Language Query" search interface where they can enter descriptive queries.
+
+**Note**: Natural language search is disabled by default. The feature will only appear in the interface when `semanticSearchApiUrl` is configured with a valid API URL.
+
 ## Docker
 
 You can use the Docker to work with STAC Browser. Please read [Docker documentation](docs/docker.md) for more details.

config.js

@@ -48,5 +48,6 @@ module.exports = {
     requestQueryParameters: {},
     socialSharing: ['email', 'bsky', 'mastodon', 'x'],
     preprocessSTAC: null,
-    authConfig: null
+    authConfig: null,
+    semanticSearchApiUrl: false,
 };

src/components/ApiCapabilitiesMixin.js

@@ -73,6 +73,9 @@ export default {
     canFilterFreeText() {
       return this.supportsConformance(this.conformances.FreeText);
     },
+    canSupportNaturalLanguage() {
+      return true;
+    },
     cql() {
       if (!this.supportsConformance(this.conformances.CqlFilters)) {
         return null;

src/components/Map.vue

@@ -11,6 +11,7 @@
       <l-tile-layer v-for="xyz of xyzLinks" ref="xyzOverlays" :key="xyz.url" layerType="overlay" v-bind="xyz" />
       <LWMSTileLayer v-for="wms of wmsLinks" ref="wmsOverlays" :key="wms.url" layerType="overlay" v-bind="wms" />
       <l-geo-json v-if="geojson" ref="geojson" :geojson="geojson" :options="{onEachFeature: showPopup}" :optionsStyle="{color: secondaryColor, weight: secondaryWeight}" />
+      <l-geo-json v-if="intersectsPolygon" ref="intersectsLayer" :geojson="intersectsPolygon" :options="{onEachFeature: showIntersectsPopup}" :optionsStyle="{color: '#3B82F6', weight: 2, fillColor: '#3B82F6', fillOpacity: 0.15, opacity: 0.8, dashArray: '5, 5'}" @ready="onIntersectsLayerReady" />
     </l-map>
     <b-popover
       v-if="popover && selectedItem" placement="left" triggers="manual" :show="selectedItem !== null"
@@ -180,6 +181,15 @@ export default {
         }
       }
       return wmsLinks;
+    },
+    naturalLanguageDescription() {
+      return this.naturalLanguageExplanation;
+    },
+    intersectsPolygon() {
+      if (this.stacLayerData && this.stacLayerData.intersects) {
+        return this.stacLayerData.intersects;
+      }
+      return null;
     }
   },
   watch: {
@@ -428,6 +438,12 @@ export default {
         this.$refs.geojson.mapObject.bringToFront();
       }
     },
+    onIntersectsLayerReady() {
+      const layer = this.$refs.intersectsLayer && this.$refs.intersectsLayer.mapObject;
+      if (layer && this.map) {
+        this.fitBounds(layer);
+      }
+    },
     fitBounds(layer, noPadding = false) {
       let fitOptions = {
         padding: noPadding ? [0,0] : [90,90],
@@ -452,6 +468,10 @@ export default {
       }
       layer.bindPopup(html);
     },
+    showIntersectsPopup(feature, layer) {
+      const html = `<h3>${this.$t('search.naturalLanguageSearchArea')}</h3><p>${this.$t('search.naturalLanguageSearchAreaDescription')}</p>`;
+      layer.bindPopup(html);
+    },
     addBoundsSelector() {
       this.areaSelect = L.areaSelect({ // eslint-disable-line 
         width: 300,