Integrate Geo-Copilot to VEDA UI Exploration Page

.env

@@ -4,6 +4,7 @@ [email protected]
 
 API_RASTER_ENDPOINT='https://staging.openveda.cloud/api/raster'
 API_STAC_ENDPOINT='https://staging.openveda.cloud/api/stac'
+GEO_COPILOT_ENDPOINT=https://veda-search-poc.azurewebsites.net/score
 
 # If the app is being served in from a subfolder, the domain url must be set.
 # For example, if the app is served from /mysite:
@@ -13,4 +14,3 @@ API_STAC_ENDPOINT='https://staging.openveda.cloud/api/stac'
 GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f88hX8RZ4Qef7qBsTtDqxjTSkg/viewform?embedded=true'
 
 SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE'
-

.stylelintrc.json

@@ -21,4 +21,4 @@
     "app/scripts/styles/continuum/utils.ts",
     "**/*.d.ts"
   ]
-}
+}

app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx

@@ -220,6 +220,7 @@ function CustomAoI({
     // selected, the trash method doesn't do anything. So, in this case, we
     // trigger the delete for the whole feature.
     const selectedFeatures = mbDraw.getSelected()?.features;
+
     if (
       mbDraw.getMode() === DIRECT_SELECT &&
       selectedFeatures.length &&

app/scripts/components/exploration/components/geo-copilot/geo-copilot-control.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {faRobot} from  '@fortawesome/free-solid-svg-icons';
+
+import useMaps from '$components/common/map/hooks/use-maps';
+import { SelectorButton } from '$components/common/map/style/button';
+import useThemedControl from '$components/common/map/controls/hooks/use-themed-control';
+
+interface GeoCoPilotControlProps {
+  showGeoCoPilot: () => void;
+  setMap: (any) => void;
+}
+
+export function GeoCoPilotComponent({onClick}: {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}) {
+  return (
+    <SelectorButton
+      tipContent='Chat with Geo-Copilot'
+      tipProps={{ placement: 'left' }}
+      onClick={onClick}
+    >
+      <FontAwesomeIcon icon={faRobot} />
+    </SelectorButton>
+  );
+}
+
+export function GeoCoPilotControl(props: GeoCoPilotControlProps) {
+  const {showGeoCoPilot, setMap} = props;
+  // Show conversation modal
+  const {main} = useMaps();
+  setMap(main);
+
+  useThemedControl(() => <GeoCoPilotComponent onClick={showGeoCoPilot} />, {
+    position: 'top-right'
+  });
+  return null;
+}

app/scripts/components/exploration/components/geo-copilot/geo-copilot-interaction.ts

@@ -0,0 +1,68 @@
+import axios from 'axios';
+
+interface GeoCoPilotInteractionQuery {
+  question: string;
+  chat_history: any;
+  content: any;
+}
+
+const GEOCOPILOT_ENDPOINT = process.env.GEO_COPILOT_ENDPOINT;
+
+const ERROR_RESPONSE = {
+  "dataset_ids": [],
+  "summary": "An unexpected error occurred with this request. Please ask another question.",
+  "date_range": {'start_date': '', 'end_date': ''},
+  "bbox":{},
+  "action": "error",
+  "explanation":
+  {
+      "validation": "",
+      "verification":[]
+  },
+  "query": ''
+};
+
+/**
+ * Gets the asset urls for all datasets in the results of a STAC search given by
+ * the input parameters.
+ *
+ * @param params Dataset search request parameters
+ * @param opts Options for the request (see Axios)
+ * @returns Promise with the asset urls
+ */
+export async function askGeoCoPilot(
+  {
+    question,
+    chat_history,
+    content
+  }: GeoCoPilotInteractionQuery,
+  setSystemResponse: (answer: any, content: any) => void
+){
+  ERROR_RESPONSE['query'] = question;
+
+  if (!GEOCOPILOT_ENDPOINT) {
+    setSystemResponse(ERROR_RESPONSE, content);
+    return;
+  }
+
+  await axios.post(
+    GEOCOPILOT_ENDPOINT,
+    {
+      'question': question,
+      'chat_history': chat_history
+    }
+  ).then((answer) => {
+    const extractedAnswer = JSON.parse(answer.data.answer);
+    ERROR_RESPONSE['summary'] = extractedAnswer['summary'] || ERROR_RESPONSE['summary']
+    if (extractedAnswer.explanation?.verification)
+      content[content.length - 1].explanations = extractedAnswer.explanation.verification;
+    setSystemResponse(JSON.parse(answer.data.answer), content);
+  }).catch((error) => {
+    setSystemResponse(ERROR_RESPONSE, content);
+  });
+}
+
+
+// Returns the full geolocation url based on centroid (lat, lon) and mapboxaccesstoken
+export const geolocationUrl = (centroid, mapboxAccessToken) =>
+  `https://api.mapbox.com/geocoding/v5/mapbox.places/${centroid[0]},${centroid[1]}.json?access_token=${mapboxAccessToken}`;

app/scripts/components/exploration/components/geo-copilot/geo-copilot-system-dialog.tsx

@@ -0,0 +1,189 @@
+import React, {useEffect, useState} from 'react';
+import axios from 'axios';
+
+
+import { Button } from '@devseed-ui/button';
+import {
+  CollecticonHandThumbsUp,
+  CollecticonHandThumbsDown,
+  CollecticonLink,
+  CollecticonChevronUpTrailSmall,
+  CollecticonChevronDownTrailSmall,
+  CollecticonCalendarRange,
+  CollecticonMarker,
+  CollecticonMap,
+
+} from '@devseed-ui/collecticons';
+
+import centroid from '@turf/centroid';
+import { AllGeoJSON, Feature, Polygon } from '@turf/helpers';
+
+import styled from 'styled-components';
+import { geolocationUrl } from './geo-copilot-interaction';
+
+const DialogContent = styled.div`
+  width: fit-content;
+  max-width: 75%;
+  min-width: 25%;
+  background: white;
+  padding: 1em;
+  margin: 1em 0 1em 1em;
+  margin-right: auto;
+  border-radius: 10px;
+`;
+
+const DialogInteraction = styled.div`
+  font-size: 0.6rem;
+  display: flex;
+`;
+
+const ButtonContent = styled.span`
+  font-size: 0.6rem;
+`;
+
+const ShowHideDetail = styled.div`
+  margin-left: auto;
+`;
+
+const AnswerDetails = styled.div`
+  font-size: 0.6rem;
+  padding: 2em;
+  background: #f6f7f8;
+  border-radius: 10px;
+`;
+
+const AnswerDetailsIcon = styled.div`
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-left: 4px;
+  }
+`;
+
+const AnswerDetailsItem = styled.div`
+  margin-bottom: 6px;
+
+  p {
+    font-size: 0.7rem;
+    margin-left: 12px;
+  }
+`;
+
+export interface GeoCoPilotModalProps {
+    summary: string;
+    dataset_ids: any;
+    bbox: any;
+    date_range: any;
+    explanation: any;
+}
+
+export function GeoCoPilotSystemDialogComponent({summary, dataset_ids, bbox, dateRange, explanation}: {
+    summary: string;
+    dataset_ids: any;
+    bbox: any;
+    dateRange: any;
+    explanation: any;
+}) {
+  const [showDetails, setShowDetails] = useState(false);
+  const [location, setLocation] = useState("");
+
+  useEffect(() => {
+    const fetchGeolocation = async (center) => {
+      try {
+        const response = await axios.get(geolocationUrl(center, process.env.MAPBOX_TOKEN));
+        setLocation(response.data.features[2].place_name);  // assuming 'features' is the array in the API response
+      } catch (error) {
+        console.error("Reverse geocoding failed.", error);
+      }
+    };
+
+    if (Object.keys(bbox).length > 0) {
+      bbox.features = bbox.features as Feature<Polygon>[];
+      const center = centroid(bbox as AllGeoJSON).geometry.coordinates;
+      console.log(bbox);
+      fetchGeolocation(center);
+    }
+  }, [bbox]);
+
+  const updateShowDetails = () => {
+    setShowDetails(!showDetails);
+  };
+
+  const copyURL = () => {
+    navigator.clipboard.writeText(document.URL);
+  };
+
+  return (
+    <DialogContent>
+      <div>{summary}</div>
+      {/*Content*/}
+      {explanation &&
+        <DialogInteraction>
+          <div>
+            <Button size='small'>
+              <CollecticonHandThumbsUp size={10} />
+            </Button>
+            <Button size='small'>
+              <CollecticonHandThumbsDown size={10} />
+            </Button>
+          </div> |
+          {/*Interaction*/}
+          <div>
+            <Button size='small'>
+              <CollecticonLink size={10} />
+              <ButtonContent onClick={copyURL}>Copy Map Link</ButtonContent>
+            </Button>
+          </div>
+          {/*Summary*/}
+          <ShowHideDetail onClick={updateShowDetails}>
+            <Button size='small'>
+              {showDetails ?
+              <>
+                <ButtonContent>Hide Details</ButtonContent>
+                <CollecticonChevronUpTrailSmall size={10} />
+              </> :
+              <>
+                <ButtonContent>Show Details</ButtonContent>
+                <CollecticonChevronDownTrailSmall size={10} />
+              </>}
+            </Button>
+          </ShowHideDetail>
+        </DialogInteraction>}
+      {showDetails &&
+        <AnswerDetails>
+          <AnswerDetailsItem>
+            <AnswerDetailsIcon>
+              <CollecticonMarker size={10} /><span>Location</span>
+            </AnswerDetailsIcon>
+            <p>{location}</p>
+          </AnswerDetailsItem>
+          <AnswerDetailsItem>
+            <AnswerDetailsIcon>
+              <CollecticonCalendarRange size={10} /><span>Timeframe</span>
+            </AnswerDetailsIcon>
+            <p>{`${dateRange.start_date} > ${dateRange.end_date}`}</p>
+          </AnswerDetailsItem>
+          <AnswerDetailsItem>
+            <AnswerDetailsIcon>
+              <CollecticonMap size={10} /><span>Map layers</span>
+            </AnswerDetailsIcon>
+            <p>{dataset_ids.join(", ")}</p>
+          </AnswerDetailsItem>
+        </AnswerDetails>}
+    </DialogContent>
+  );
+}
+
+export function GeoCoPilotSystemDialog(props: GeoCoPilotModalProps) {
+    const {summary, dataset_ids, bbox, date_range, explanation} = props;
+    return (
+      <GeoCoPilotSystemDialogComponent
+        summary={summary}
+        dataset_ids={dataset_ids}
+        bbox={bbox}
+        dateRange={date_range}
+        explanation={explanation}
+      />
+    );
+}