kepler.gl 3.1.0-alpha.6 → 3.1.0

package/src/ai-assistant/src/components/ai-assistant-config.tsx

@@ -14,23 +14,9 @@ import {
 } from '@kepler.gl/components';
 import {AiAssistantConfig} from '../index';
 import ApiKey from '../icons/api-key';
-import {testApiKey} from 'react-ai-assist';
-
-const PROVIDER_MODELS = {
-  openai: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo-0125', 'gpt-3.5-turbo'],
-  google: ['gemini-1.5-flash', 'gemini-1.5-pro', 'gemini-1.0-pro'],
-  ollama: [
-    'qwen2.5-coder',
-    'llama3.2',
-    'llama3.1',
-    'llama3.1:70b',
-    'qwen2',
-    'llava',
-    'mistral',
-    'gemma2',
-    'phi3.5'
-  ]
-};
+import {testApiKey} from '@openassistant/core';
+import PROVIDER_MODELS from '../config/models.json';
+import {useLocalStorage} from 'usehooks-ts';
 
 type ThemeProps = {theme: any};
 
@@ -140,12 +126,27 @@ function AiAssistantConfigFactory(RangeSlider: ReturnType<typeof RangeSliderFact
   const AiAssistantConfig: React.FC<
     AiAssistantConfigProps & WrappedComponentProps & ThemeProps
   > = ({intl, aiAssistantConfig, updateAiAssistantConfig}) => {
-    const [provider, setProvider] = useState(aiAssistantConfig.provider || 'openai');
-    const [model, setModel] = useState(aiAssistantConfig.model || PROVIDER_MODELS[provider][0]);
-    const [apiKey, setApiKey] = useState(aiAssistantConfig.apiKey || '');
-    const [temperature, setTemperature] = useState(aiAssistantConfig.temperature || 0.8);
-    const [topP, setTopP] = useState(aiAssistantConfig.topP || 0.8);
-    const [baseUrl, setBaseUrl] = useState(aiAssistantConfig.baseUrl || 'http://localhost:11434');
+    const [provider, setProvider] = useLocalStorage(
+      'ai-assistant-provider',
+      aiAssistantConfig.provider || 'openai'
+    );
+    const [model, setModel] = useLocalStorage(
+      'ai-assistant-model',
+      aiAssistantConfig.model || PROVIDER_MODELS[provider][0]
+    );
+    const [apiKey, setApiKey] = useLocalStorage(
+      'ai-assistant-api-key',
+      aiAssistantConfig.apiKey || ''
+    );
+    const [temperature, setTemperature] = useLocalStorage(
+      'ai-assistant-temperature',
+      aiAssistantConfig.temperature || 0.8
+    );
+    const [topP, setTopP] = useLocalStorage('ai-assistant-top-p', aiAssistantConfig.topP || 0.8);
+    const [baseUrl, setBaseUrl] = useLocalStorage(
+      'ai-assistant-base-url',
+      aiAssistantConfig.baseUrl || 'http://localhost:11434'
+    );
     const [connectionError, setConnectionError] = useState(false);
     const [errorMessage, setErrorMessage] = useState('');
     const [isRunning, setIsRunning] = useState(false);
@@ -188,29 +189,45 @@ function AiAssistantConfigFactory(RangeSlider: ReturnType<typeof RangeSliderFact
 
     const onStartChat = async () => {
       setIsRunning(true);
-      const {success, service} = await testApiKey({
-        modelProvider: provider,
-        modelName: model,
-        apiKey: apiKey,
-        baseUrl: baseUrl
-      });
-      const errorMessage = !success
-        ? service === 'ollama'
-          ? 'Connection failed: maybe invalid Ollama Base URL'
-          : 'Connection failed: maybe invalid API Key'
-        : '';
-      setConnectionError(!success);
-      setErrorMessage(errorMessage);
-      updateAiAssistantConfig({
-        provider: provider,
-        model: model,
-        apiKey: apiKey,
-        baseUrl: baseUrl,
-        isReady: success,
-        temperature: temperature,
-        topP: topP
-      });
-      setIsRunning(false);
+      try {
+        const timeoutPromise = new Promise((_, reject) => {
+          setTimeout(() => reject(new Error('Connection timeout after 15 seconds')), 15000);
+        });
+
+        const testPromise = testApiKey({
+          modelProvider: provider,
+          modelName: model,
+          apiKey: apiKey,
+          baseUrl: baseUrl
+        });
+
+        const result = (await Promise.race([testPromise, timeoutPromise])) as {
+          success: boolean;
+          service: string;
+        };
+        const {success, service} = result;
+        const errorMessage = !success
+          ? service === 'ollama'
+            ? 'Connection failed: maybe invalid Ollama Base URL'
+            : 'Connection failed: maybe invalid API Key'
+          : '';
+        setConnectionError(!success);
+        setErrorMessage(errorMessage);
+        updateAiAssistantConfig({
+          provider: provider,
+          model: model,
+          apiKey: apiKey,
+          baseUrl: baseUrl,
+          isReady: success,
+          temperature: temperature,
+          topP: topP
+        });
+      } catch (error) {
+        setConnectionError(true);
+        setErrorMessage(error instanceof Error ? error.message : 'Connection failed');
+      } finally {
+        setIsRunning(false);
+      }
     };
 
     return (

package/src/ai-assistant/src/config/models.json

@@ -0,0 +1,32 @@
+{
+  "deepseek": ["deepseek-chat", "deepseek-reasoner"],
+  "openai": [
+    "o1-mini",
+    "o1-preview",
+    "o1",
+    "gpt-4o",
+    "gpt-4o-mini",
+    "gpt-3.5-turbo-0125",
+    "gpt-3.5-turbo"
+  ],
+  "google": ["gemini-2.0-flash-exp", "gemini-1.5-flash", "gemini-1.5-pro", "gemini-1.0-pro"],
+  "ollama": [
+    "deepseek-r1",
+    "deepseek-r1:14b",
+    "deepseek-r1:32b",
+    "deepseek-r1:70b",
+    "deepseek-r1:671b",
+    "phi4",
+    "qwen2.5-coder",
+    "qwq",
+    "llama3.3",
+    "llama3.2",
+    "llama3.1",
+    "llama3.1:70b",
+    "qwen2",
+    "llava",
+    "mistral",
+    "gemma2",
+    "phi3.5"
+  ]
+}

package/src/ai-assistant/src/constants.ts

@@ -2,18 +2,23 @@
 // Copyright contributors to the kepler.gl project
 
 export const TASK_LIST =
-  '1. Show dataset/layer/variable info.\n2. Change the basemap style.\n3. Load data from url.\n4. Create a map layer using variable.\n5. Filter the data of a variable.\n6. Create a histogram.';
+  '1. Show dataset/layer/variable info.\n2. Change the basemap style.\n3. Load data from url.\n4. Create a map layer using variable.\n5. Create a histogram.\n6. Create a scatter plot with regression line.\n7. Classify the data of a variable.\n8. Spatial join two datasets.';
 
 export const WELCOME_MESSAGE = `Hi, I am Kepler.gl AI Assistant!\nHere are some tasks I can help you with:\n\n${TASK_LIST}`;
 
 export const INSTRUCTIONS = `You are a Kepler.gl AI Assistant that can answer questions and help with tasks of mapping and spatial data analysis.
 
+Here are the tasks that you can help with:
+${TASK_LIST}
+
 When responding to user queries:
 1. Analyze if the task requires one or multiple function calls
 2. For each required function:
    - Identify the appropriate function to call
    - Determine all required parameters
    - If parameters are missing, ask the user to provide them
+   - Please ask the user to confirm the parameters
+   - If the user doesn't agree, try to provide variable functions to the user
    - Execute functions in a sequential order
 
 You can execute multiple functions to complete complex tasks, but execute them one at a time in a logical sequence. Always validate the success of each function call before proceeding to the next one.
@@ -52,4 +57,4 @@ export const ASSISTANT_NAME = 'kepler-gl-ai-assistant';
 
 export const ASSISTANT_DESCRIPTION = 'A Kepler.gl AI Assistant';
 
-export const ASSISTANT_VERSION = '0.0.1-9';
+export const ASSISTANT_VERSION = '0.0.2';

package/src/ai-assistant/src/reducers/index.ts

@@ -8,7 +8,7 @@ import {
   SET_START_SCREEN_CAPTURE,
   SET_SCREEN_CAPTURED
 } from '../actions';
-import {MessageModel} from 'react-ai-assist';
+import {MessageModel} from '@openassistant/core';
 
 export type AiAssistantConfig = {
   isReady: boolean;
@@ -24,7 +24,7 @@ export type AiAssistantConfig = {
 const initialConfig: AiAssistantConfig = {
   isReady: false,
   provider: 'openai',
-  model: 'gpt-4o-mini',
+  model: 'gpt-4o',
   apiKey: '',
   baseUrl: 'http://localhost:11434',
   temperature: 1.0,

package/src/ai-assistant/src/tools/basemap-functions.tsx

@@ -13,7 +13,7 @@ import {
   CustomFunctionOutputProps,
   ErrorCallbackResult,
   RegisterFunctionCallingProps
-} from 'react-ai-assist';
+} from '@openassistant/core';
 
 export function basemapFunctionDefinition(
   context: CustomFunctionContext<ActionHandler<typeof mapStyleChange> | MapStyle>

package/src/ai-assistant/src/tools/filter-function.tsx

@@ -14,7 +14,7 @@ import {
   CustomFunctionOutputProps,
   ErrorCallbackResult,
   RegisterFunctionCallingProps
-} from 'react-ai-assist';
+} from '@openassistant/core';
 import {checkDatasetNotExists, checkFieldNotExists} from './utils';
 import {getDefaultFilter, getFilterProps, updateFilterPlot} from '@kepler.gl/utils';
 import {RangeFilterFactory, appInjector} from '@kepler.gl/components';
@@ -174,31 +174,35 @@ async function filterCallback({
 const RangeFilterComponent = appInjector.get(RangeFilterFactory);
 
 function FilterMessage({output}: CustomFunctionCall) {
-  const outputData = output.data as OutputDataProps;
+  const outputData = output.data as OutputDataProps | undefined;
 
   // run this when the component is mounted
   useEffect(() => {
-    outputData.createOrUpdateFilter(
+    outputData?.createOrUpdateFilter(
       outputData.filter.id,
       outputData.datasetId,
       outputData.fieldName,
       outputData.filter.value
     );
-  }, [outputData, outputData.filter]);
+  }, [outputData]);
 
   const filters = useSelector(state => {
     // @ts-ignore TODO: fix this: we need to get the updated filters from the visState, but nicely
     return state.demo.keplerGl.map.visState.filters;
   });
 
-  const filter = filters.find(f => f.id === outputData.filter.id);
+  const filter = filters.find(f => f.id === outputData?.filter.id);
 
-  const onSetFilter = value => outputData.setFilter(outputData.filterIdx, 'value', value);
+  const onSetFilter = value => outputData?.setFilter(outputData.filterIdx, 'value', value);
 
   const onSetFilterPlot = (newProp, valueIndex) => {
-    outputData.setFilterPlot(outputData.filterIdx, newProp, valueIndex);
+    outputData?.setFilterPlot(outputData.filterIdx, newProp, valueIndex);
   };
 
+  if (!outputData) {
+    return <div>Something went wrong, filter not created.</div>;
+  }
+
   return (
     filter && (
       <div>

package/src/ai-assistant/src/tools/layer-creation-function.tsx

@@ -11,7 +11,7 @@ import {
   CustomFunctionOutputProps,
   ErrorCallbackResult,
   RegisterFunctionCallingProps
-} from 'react-ai-assist';
+} from '@openassistant/core';
 import {checkDatasetNotExists, checkFieldNotExists, interpolateColor} from './utils';
 import {findDefaultLayer} from '@kepler.gl/reducers';
 import React, {useEffect} from 'react';

package/src/ai-assistant/src/tools/layer-style-function.tsx

@@ -8,7 +8,7 @@ import {
   CustomFunctionContext,
   CustomFunctionOutputProps,
   ErrorCallbackResult
-} from 'react-ai-assist';
+} from '@openassistant/core';
 import {ActionHandler, layerVisualChannelConfigChange} from '@kepler.gl/actions';
 import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
 

package/src/ai-assistant/src/tools/loadurl-function.tsx

@@ -18,7 +18,7 @@ import {
   CustomFunctionOutputProps,
   ErrorCallbackResult,
   RegisterFunctionCallingProps
-} from 'react-ai-assist';
+} from '@openassistant/core';
 
 export function loadUrlFunctionDefinition(
   context: CustomFunctionContext<ActionHandler<typeof loadFiles> | Loader[] | object>

package/src/ai-assistant/src/tools/utils.ts

@@ -5,7 +5,17 @@ import interpolate from 'color-interpolate';
 
 import {Layer} from '@kepler.gl/layers';
 import {Datasets, KeplerTable} from '@kepler.gl/table';
+import {SpatialJoinGeometries} from '@openassistant/geoda';
+import {ALL_FIELD_TYPES} from '@kepler.gl/constants';
+import {AddDataToMapPayload, ProtoDataset, ProtoDatasetField} from '@kepler.gl/types';
 
+/**
+ * Check if the dataset exists
+ * @param datasets The kepler.gl datasets
+ * @param datasetName The name of the dataset
+ * @param functionName The name of the function
+ * @returns The result of the check
+ */
 export function checkDatasetNotExists(
   datasets: Datasets,
   datasetName: string,
@@ -26,6 +36,13 @@ export function checkDatasetNotExists(
   return null;
 }
 
+/**
+ * Check if the field exists
+ * @param dataset The kepler.gl dataset
+ * @param fieldName The name of the field
+ * @param functionName The name of the function
+ * @returns The result of the check
+ */
 export function checkFieldNotExists(dataset: KeplerTable, fieldName: string, functionName: string) {
   const field = dataset.fields.find(f => f.name === fieldName);
   if (!field) {
@@ -43,6 +60,12 @@ export function checkFieldNotExists(dataset: KeplerTable, fieldName: string, fun
   return null;
 }
 
+/**
+ * Interpolate the colors from the original colors with the given number of colors
+ * @param originalColors The original colors
+ * @param numberOfColors The number of colors
+ * @returns The interpolated colors
+ */
 export function interpolateColor(originalColors: string[], numberOfColors: number) {
   if (originalColors.length === numberOfColors) {
     return originalColors;
@@ -57,6 +80,13 @@ export function interpolateColor(originalColors: string[], numberOfColors: numbe
   return hexColors;
 }
 
+/**
+ * Get the values from a dataset for a variable
+ * @param datasets
+ * @param datasetName
+ * @param variableName
+ * @returns {number[]}
+ */
 export function getValuesFromDataset(
   datasets: Datasets,
   datasetName: string,
@@ -72,6 +102,33 @@ export function getValuesFromDataset(
   return [];
 }
 
+/**
+ * Get the x and y values from a dataset for a scatterplot
+ * @param datasets
+ * @param datasetName
+ * @param xVariableName
+ * @param yVariableName
+ * @returns {x: number[], y: number[]}
+ */
+export function getScatterplotValuesFromDataset(
+  datasets: Datasets,
+  datasetName: string,
+  xVariableName: string,
+  yVariableName: string
+): {x: number[]; y: number[]} {
+  const xValues = getValuesFromDataset(datasets, datasetName, xVariableName);
+  const yValues = getValuesFromDataset(datasets, datasetName, yVariableName);
+  return {x: xValues, y: yValues};
+}
+
+/**
+ * Highlight the rows in a dataset
+ * @param datasets The kepler.gl datasets
+ * @param layers The kepler.gl layers
+ * @param datasetName The name of the dataset
+ * @param selectedRowIndices The indices of the rows to highlight
+ * @param layerSetIsValid The function to set the layer validity
+ */
 export function highlightRows(
   datasets: Datasets,
   layers: Layer[],
@@ -91,11 +148,17 @@ export function highlightRows(
     selectLayers.forEach(layer => {
       layer.formatLayerData(datasets);
       // trigger a re-render using layerSetIsValid() to update the top layer
-      layerSetIsValid(selectLayers[0], true);
+      layerSetIsValid(layer, true);
     });
   }
 }
 
+/**
+ * Get the dataset context, which is used to provide the dataset information to the AI assistant
+ * @param datasets The kepler.gl datasets
+ * @param layers The kepler.gl layers
+ * @returns The dataset context
+ */
 export function getDatasetContext(datasets: Datasets, layers: Layer[]) {
   const context = 'Please remember the following dataset context:';
   const dataMeta = Object.values(datasets).map((dataset: KeplerTable) => ({
@@ -104,7 +167,154 @@ export function getDatasetContext(datasets: Datasets, layers: Layer[]) {
     fields: dataset.fields.map(field => ({[field.name]: field.type})),
     layers: layers
       .filter(layer => layer.config.dataId === dataset.id)
-      .map(layer => ({id: layer.id, label: layer.config.label, type: layer.type}))
+      .map(layer => ({
+        id: layer.id,
+        label: layer.config.label,
+        type: layer.type,
+        geometryMode: layer.config.columnMode,
+        // get the valid geometry columns as string
+        geometryColumns: Object.fromEntries(
+          Object.entries(layer.config.columns)
+            .filter(([, value]) => value !== null)
+            .map(([key, value]) => [
+              key,
+              typeof value === 'object' && value !== null
+                ? Object.fromEntries(Object.entries(value).filter(([, v]) => v !== null))
+                : value
+            ])
+        )
+      }))
   }));
   return `${context}\n${JSON.stringify(dataMeta)}`;
 }
+
+/**
+ * Get the geometries from a dataset
+ * @param datasets The kepler.gl datasets
+ * @param layers The kepler.gl layers
+ * @param layerData The layer data
+ * @param datasetName The name of the dataset
+ * @returns The geometries
+ */
+export function getGeometriesFromDataset(
+  datasets: Datasets,
+  layers: Layer[],
+  layerData: any[],
+  datasetName: string
+): SpatialJoinGeometries {
+  const datasetId = Object.keys(datasets).find(dataId => datasets[dataId].label === datasetName);
+  if (!datasetId) return [];
+  const dataset = datasets[datasetId];
+
+  // get the index of the layer
+  const layerIndex = layers.findIndex(layer => layer.config.dataId === dataset.id);
+  if (layerIndex === -1) return [];
+
+  const geometries = layerData[layerIndex];
+
+  return geometries?.data;
+}
+
+/**
+ * Save the data as a new dataset by joining it with the left dataset
+ * @param datasets The kepler.gl datasets
+ * @param datasetName The name of the left dataset
+ * @param data The data to save
+ * @param addDataToMap The function to add the data to the map
+ */
+export function saveAsDataset(
+  datasets: Datasets,
+  datasetName: string,
+  data: Record<string, number[]>,
+  addDataToMap: (data: AddDataToMapPayload) => void
+) {
+  // find datasetId from datasets
+  const datasetId = Object.keys(datasets).find(dataId => datasets[dataId].label === datasetName);
+  if (!datasetId) return;
+
+  const leftDataset = datasets[datasetId];
+  const numRows = leftDataset.length;
+
+  const fields: ProtoDatasetField[] = [
+    // New fields from data
+    ...Object.keys(data).map((fieldName, index) => ({
+      name: fieldName,
+      id: `${fieldName}_${index}`,
+      displayName: fieldName,
+      type: determineFieldType(data[fieldName][0])
+    })),
+    // Existing fields from leftDataset
+    ...leftDataset.fields.map((field, index) => ({
+      name: field.name,
+      id: field.id || `${field.name}_${index}`,
+      displayName: field.displayName,
+      type: field.type
+    }))
+  ];
+
+  // Pre-calculate data values array
+  const dataValues = Object.values(data);
+
+  const rows = Array(numRows)
+    .fill(null)
+    .map((_, rowIdx) => [
+      // New data values
+      ...dataValues.map(col => col[rowIdx]),
+      // Existing dataset values
+      ...leftDataset.fields.map(field => leftDataset.getValue(field.name, rowIdx))
+    ]);
+
+  // create new dataset
+  const newDatasetName = `${datasetName}_joined`;
+  const newDataset: ProtoDataset = {
+    info: {
+      id: newDatasetName,
+      label: newDatasetName
+    },
+    data: {
+      fields,
+      rows
+    }
+  };
+
+  addDataToMap({datasets: [newDataset], options: {autoCreateLayers: true, centerMap: true}});
+}
+
+/**
+ * Helper function to determine field type
+ * @param value The value to determine the field type
+ * @returns The field type
+ */
+function determineFieldType(value: unknown): keyof typeof ALL_FIELD_TYPES {
+  return typeof value === 'number'
+    ? Number.isInteger(value)
+      ? ALL_FIELD_TYPES.integer
+      : ALL_FIELD_TYPES.real
+    : ALL_FIELD_TYPES.string;
+}
+
+export function highlightRowsByColumnValues(
+  datasets: Datasets,
+  layers: Layer[],
+  datasetName: string,
+  columnName: string,
+  selectedValues: unknown[],
+  layerSetIsValid: (layer: Layer, isValid: boolean) => void
+) {
+  const datasetId = Object.keys(datasets).find(dataId => datasets[dataId].label === datasetName);
+  if (!datasetId) return;
+  const dataset = datasets[datasetId];
+  if (dataset) {
+    // get the values of the column
+    const values = Array.from({length: dataset.length}, (_, i) => dataset.getValue(columnName, i));
+    // create a dict using the values
+    const valueDict = values.reduce((acc, value, index) => {
+      acc[value] = index;
+      return acc;
+    }, {});
+    // need to fix the type error of value here
+    const selectedIndices = selectedValues.map(value => valueDict[value as any]);
+    // highlight the rows
+    highlightRows(datasets, layers, datasetName, selectedIndices, layerSetIsValid);
+  }
+}

package/src/cloud-providers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kepler.gl/cloud-providers",
   "author": "Shan He <shan@uber.com>",
-  "version": "3.1.0-alpha.6",
+  "version": "3.1.0",
   "description": "kepler.gl constants used by kepler.gl components, actions and reducers",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
     "umd"
   ],
   "dependencies": {
-    "@kepler.gl/types": "3.1.0-alpha.6",
+    "@kepler.gl/types": "3.1.0",
     "react": "^18.2.0"
   },
   "nyc": {

package/src/common-utils/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kepler.gl/common-utils",
   "author": "Shan He <heshan0131@gmail.com>",
-  "version": "3.1.0-alpha.6",
+  "version": "3.1.0",
   "description": "kepler.gl common utils",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,8 +30,8 @@
     "umd"
   ],
   "dependencies": {
-    "@kepler.gl/constants": "3.1.0-alpha.6",
-    "@kepler.gl/types": "3.1.0-alpha.6",
+    "@kepler.gl/constants": "3.1.0",
+    "@kepler.gl/types": "3.1.0",
     "d3-array": "^2.8.0",
     "global": "^4.3.0",
     "h3-js": "^3.1.0",