merge master

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

CHANGELOG.md

@@ -15,6 +15,32 @@ Each version should:
 Ref: http://keepachangelog.com/en/0.3.0/
 -->
 
+## [3.1.7] - May 14 2025
+
+- 014059b97 [fix] fixes for raster tile layer (#3102)
+- 518c515d1 [feat] loading indicator improvements for tiled layers (#3097)
+- e290f281e [fix] fix for getFieldsFromTile regression (#3099)
+- 7087ffe15 [fix] fix tooltip crashing for trip layer (#3103)
+- a231ebfc1 [fix] fix for image export with effects (#3105)
+- da38e26b9 [chore] Update Comments in actions (#3098)
+- 21aac1c85 [fix] fixes for custom input (#3095)
+- 271b8cc98 [fix] fix types publishing for table module (#3096)
+- 3d3bb9b54 [chore] add cdnUrl option to application config (#3093)
+- 9cdf73ea4 [Bug] remove layer item z-index (#3091)
+
+## [3.1.6] - May 8 2025
+
+- 33203a6de [fix] fix loading indicotor not hidden regression (#3088)
+- 913176bb6 [bug] fix lodash imports regression (#3089)
+
+## [3.1.5] - May 8 2025
+
+- 223d14b60 [chore] ts fixes
+- 3570ac429 [feat] Raster Tile Layer - development in progress (#3048)
+- 07e5beae2 [chore] import add tileset dialog styling (#3085)
+- 6568c0c94 [Feat] Add Spatial Data Analysis tools to AI Assistants (#3057)
+- fd08fa1a9 [Chore] export more kepler-gl prop selector (#3081)
+
 ## [3.1.4] - May 5 2025
 
 - 03b8ea0a9 [Chore] Use clonedeep in interaction config load (#3080)

docs/user-guides/c-types-of-layers/README.md

@@ -102,3 +102,17 @@ Supported URL templates:
 - pmtiles (https://your-cdn/filename.pmtiles)
 
 [Back to table of contents](../README.md)
+
+## Raster Tile Layer
+
+Raster layers are used to show satellite and aerial imagery. They allow you to work interactively directly with massive, image collections stored in .pmtiles (in raster format) or Cloud Optimized GeoTIFF format.
+
+Supported URL templates:
+
+- Users can reference remote **.pmtiles files in raster format** for raster layers by supplying a direct link to the file.
+
+- **Cloud-Optimized GeoTIFFs (COG)** can also be used in raster layers by providing standardized Spatio-Temporal Asset Catalog (STAC) metadata.
+    - The metadata file must be a valid *STAC Item* or *STAC Collection*, version 1.0.0 or higher.
+    - Raster data referenced in STAC assets should be Cloud-Optimized GeoTIFFs and need to be publicly accessible via HTTPS.
+    - STAC item and collections *must have Electro-Optical and Raster extensions*, and at least one asset must have both eo:bands and raster:bands information. common_name must be provided in eo:bands and data_type must be provided in raster:bands.
+    - Users must use their own instances of raster tile servers, such as Titiler. [TODO: add instructions]

examples/demo-app/esbuild.config.mjs

@@ -135,6 +135,8 @@ function addAliases(externals, args) {
     resolveAlias['@openassistant/geoda'] = join(LIB_DIR, '../openassistant/packages/geoda/src');
     resolveAlias['@openassistant/duckdb'] = join(LIB_DIR, '../openassistant/packages/duckdb/src');
     resolveAlias['@openassistant/common'] = join(LIB_DIR, '../openassistant/packages/common/src');
+    resolveAlias['@openassistant/osm'] = join(LIB_DIR, '../openassistant/packages/osm/src');
+    resolveAlias['@openassistant/utils'] = join(LIB_DIR, '../openassistant/packages/utils/src');
     resolveAlias['@kepler.gl/ai-assistant'] = join(SRC_DIR, 'ai-assistant/src');
   }
 

examples/demo-app/package.json

@@ -16,6 +16,7 @@
     "@carto/toolkit": "0.0.1-rc.18",
     "@emotion/is-prop-valid": "^1.2.1",
     "@kepler.gl/actions": "^3.1.0",
+    "@kepler.gl/ai-assistant": "^3.1.0",
     "@kepler.gl/cloud-providers": "^3.1.0",
     "@kepler.gl/components": "^3.1.0",
     "@kepler.gl/constants": "^3.1.0",
@@ -30,8 +31,8 @@
     "@loaders.gl/csv": "^4.3.2",
     "@loaders.gl/json": "^4.3.2",
     "@loaders.gl/parquet": "^4.3.2",
-    "@openassistant/core": "^0.0.7",
-    "@openassistant/ui": "^0.0.7",
+    "@openassistant/core": "^0.4.0",
+    "@openassistant/ui": "^0.4.0",
     "@types/classnames": "^2.3.1",
     "@types/keymirror": "^0.1.1",
     "apache-arrow": ">=15.0.0",

examples/demo-app/src/app.tsx

@@ -1,23 +1,24 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {useCallback, useEffect, useRef, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import styled, {ThemeProvider, StyleSheetManager} from 'styled-components';
 import Window from 'global/window';
 import {connect, useDispatch} from 'react-redux';
 import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
+import {useSelector} from 'react-redux';
 import isPropValid from '@emotion/is-prop-valid';
-
+import {WebMercatorViewport} from '@deck.gl/core';
 import {ScreenshotWrapper} from '@openassistant/ui';
 import {
-  messages as aiAssistantMessages,
   setStartScreenCapture,
-  setScreenCaptured
+  setScreenCaptured,
+  AiAssistantPanel,
+  setMapBoundary
 } from '@kepler.gl/ai-assistant';
 import {panelBorderColor, theme} from '@kepler.gl/styles';
-import {useSelector} from 'react-redux';
 import {ParsedConfig} from '@kepler.gl/types';
 import {getApplicationConfig} from '@kepler.gl/utils';
 import {SqlPanel} from '@kepler.gl/duckdb';
@@ -139,6 +140,17 @@ const StyledResizeHandle = styled(PanelResizeHandle)`
   cursor: row-resize;
 `;
 
+const StyledVerticalResizeHandle = styled(PanelResizeHandle)`
+  background-color: ${panelBorderColor};
+  width: 4px;
+  height: 100%;
+  cursor: row-resize;
+
+  &:hover {
+    background-color: #555;
+  }
+`;
+
 const App = props => {
   const [showBanner, toggleShowBanner] = useState(false);
   const {params: {id, provider} = {}, location: {query = {}} = {}} = props;
@@ -150,6 +162,11 @@ const App = props => {
   const isSqlPanelOpen = useSelector(
     state => duckDbPluginEnabled && state?.demo?.keplerGl?.map?.uiState.mapControls.sqlPanel?.active
   );
+
+  const isAiAssistantPanelOpen = useSelector(
+    state => state?.demo?.keplerGl?.map?.uiState.mapControls.aiAssistant?.active
+  );
+
   const prevQueryRef = useRef<number>(null);
 
   useEffect(() => {
@@ -202,6 +219,20 @@ const App = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  /**
+   * Update map boundary when view state changes, used by ai-assistant to
+   * get data from vector tiles when map boundary changes
+   */
+  const onViewStateChange = useCallback(
+    viewState => {
+      const viewport = new WebMercatorViewport(viewState);
+      const nw = viewport.unproject([0, 0]);
+      const se = viewport.unproject([viewport.width, viewport.height]);
+      dispatch(setMapBoundary(nw, se));
+    },
+    [dispatch]
+  );
+
   const _setStartScreenCapture = useCallback(
     flag => {
       dispatch(setStartScreenCapture(flag));
@@ -567,19 +598,6 @@ const App = props => {
     );
   }, [dispatch]);
 
-  const combinedMessages = useMemo(() => {
-    return Object.keys(messages).reduce(
-      (acc, language) => ({
-        ...acc,
-        [language]: {
-          ...(messages[language] || {}),
-          ...(aiAssistantMessages[language] || {})
-        }
-      }),
-      {}
-    );
-  }, []);
-
   const _loadSampleData = useCallback(() => {
     // _loadPointData();
     // _loadGeojsonData();
@@ -631,31 +649,44 @@ const App = props => {
               <Announcement onDisable={_disableBanner} />
             </Banner>
             <div style={CONTAINER_STYLE}>
-              <PanelGroup direction="vertical">
-                <Panel defaultSize={isSqlPanelOpen ? 60 : 100}>
-                  <AutoSizer>
-                    {({height, width}) => (
-                      <KeplerGl
-                        mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
-                        id="map"
-                        getState={keplerGlGetState}
-                        width={width}
-                        height={height}
-                        cloudProviders={CLOUD_PROVIDERS}
-                        localeMessages={combinedMessages}
-                        onExportToCloudSuccess={onExportFileSuccess}
-                        onLoadCloudMapSuccess={onLoadCloudMapSuccess}
-                        featureFlags={DEFAULT_FEATURE_FLAGS}
-                      />
+              <PanelGroup direction="horizontal">
+                <Panel defaultSize={isAiAssistantPanelOpen ? 70 : 100}>
+                  <PanelGroup direction="vertical">
+                    <Panel defaultSize={isSqlPanelOpen ? 60 : 100}>
+                      <AutoSizer>
+                        {({height, width}) => (
+                          <KeplerGl
+                            mapboxApiAccessToken={CLOUD_PROVIDERS_CONFIGURATION.MAPBOX_TOKEN}
+                            id="map"
+                            getState={keplerGlGetState}
+                            width={width}
+                            height={height}
+                            cloudProviders={CLOUD_PROVIDERS}
+                            localeMessages={messages}
+                            onExportToCloudSuccess={onExportFileSuccess}
+                            onLoadCloudMapSuccess={onLoadCloudMapSuccess}
+                            featureFlags={DEFAULT_FEATURE_FLAGS}
+                            onViewStateChange={onViewStateChange}
+                          />
+                        )}
+                      </AutoSizer>
+                    </Panel>
+
+                    {isSqlPanelOpen && (
+                      <>
+                        <StyledResizeHandle />
+                        <Panel defaultSize={40} minSize={20}>
+                          <SqlPanel initialSql={query.sql || ''} />
+                        </Panel>
+                      </>
                     )}
-                  </AutoSizer>
+                  </PanelGroup>
                 </Panel>
-
-                {isSqlPanelOpen && (
+                {isAiAssistantPanelOpen && (
                   <>
-                    <StyledResizeHandle />
-                    <Panel defaultSize={40} minSize={20}>
-                      <SqlPanel initialSql={query.sql || ''} />
+                    <StyledVerticalResizeHandle />
+                    <Panel defaultSize={30} minSize={20}>
+                      <AiAssistantPanel />
                     </Panel>
                   </>
                 )}

examples/demo-app/src/components/load-data-modal/load-remote-map.js

@@ -6,11 +6,11 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
+import {validateUrl} from '@kepler.gl/common-utils';
 import {Button} from '@kepler.gl/components';
 import {FormattedMessage} from '@kepler.gl/localization';
 
 import {CORS_LINK} from '../../constants/default-settings';
-import {validateUrl} from '../../utils/url';
 
 const propTypes = {
   onLoadRemoteMap: PropTypes.func.isRequired

examples/demo-app/src/factories/map-control.js

@@ -4,13 +4,13 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import {AiAssistantControlFactory, AiAssistantManagerFactory} from '@kepler.gl/ai-assistant';
 import {
   withState,
   MapControlFactory,
   EffectControlFactory,
   EffectManagerFactory
 } from '@kepler.gl/components';
+import {AiAssistantControlFactory} from '@kepler.gl/ai-assistant';
 
 import {BannerMapPanel, SampleMapPanel} from '../components/map-control/map-control';
 import SqlPanelControlFactory from '../components/map-control/sql-panel-control';
@@ -58,44 +58,36 @@ const StyledMapControlOverlay = styled.div`
 CustomMapControlFactory.deps = [
   EffectControlFactory,
   EffectManagerFactory,
-  AiAssistantControlFactory,
-  AiAssistantManagerFactory,
   SqlPanelControlFactory,
+  AiAssistantControlFactory,
   ...MapControlFactory.deps
 ];
 function CustomMapControlFactory(
   EffectControl,
   EffectManager,
-  AiAssistantControl,
-  AiAssistantManager,
   SqlPanelControl,
+  AiAssistantControl,
   ...deps
 ) {
   const MapControl = MapControlFactory(...deps);
   const actionComponents = [
     ...(MapControl.defaultActionComponents ?? []),
     EffectControl,
-    AiAssistantControl,
-    SqlPanelControl
+    SqlPanelControl,
+    AiAssistantControl
   ];
 
   const CustomMapControl = props => {
     const showEffects = Boolean(props.mapControls?.effect?.active);
-    const showAiAssistant = Boolean(props.mapControls?.aiAssistant?.active);
     return (
-      <StyledMapControlOverlay
-        top={props.top}
-        rightPanelVisible={showEffects || showAiAssistant}
-        fullHeight={showAiAssistant}
-      >
+      <StyledMapControlOverlay top={props.top} rightPanelVisible={showEffects}>
         <StyledMapControlPanel>
           {<BannerMapPanel {...props} />}
           {!props.isExport && props.currentSample ? <SampleMapPanel {...props} /> : null}
           <MapControl {...props} top={0} actionComponents={actionComponents} />
         </StyledMapControlPanel>
         <StyledMapControlContextPanel>
           {showEffects ? <EffectManager /> : null}
-          {showAiAssistant ? <AiAssistantManager /> : null}
         </StyledMapControlContextPanel>
       </StyledMapControlOverlay>
     );