[fix] Line layer is not displayed for between hex ids

src/components/src/index.ts

@@ -369,6 +369,7 @@ export type {
   LayerTypeListItemType
 } from './side-panel/layer-panel/layer-type-list-item';
 export type {SingleColorPaletteProps} from './side-panel/layer-panel/single-color-palette';
+export type {SupportedColumnModeConfig} from './side-panel/layer-panel/layer-column-mode-config';
 export type {MapManagerProps} from './side-panel/map-manager';
 export type {LayerGroupColorPickerProps} from './side-panel/map-style-panel/map-layer-group-color-picker';
 export type {LayerGroupSelectorProps} from './side-panel/map-style-panel/map-layer-selector';

src/components/src/side-panel/layer-panel/layer-column-mode-config.tsx

@@ -79,7 +79,7 @@ const ConfigPanesContainer = styled.div`
 interface FieldOption extends MinimalField {
   fieldIdx: number;
 }
-type ColumnModeConfig = {
+export type SupportedColumnModeConfig = {
   key: string;
   label: string;
   columns: LayerColumns;
@@ -93,8 +93,8 @@ export type ColumnModeConfigProps = {
     mode: {key: string; label: string; columns: any},
     selected: boolean
   ) => JSX.Element;
-  selectColumnMode: (mode: ColumnModeConfig) => void;
-  getHelpHandler?: (mode: ColumnModeConfig) => (() => void) | null;
+  selectColumnMode: (mode: SupportedColumnModeConfig) => void;
+  getHelpHandler?: (mode: SupportedColumnModeConfig) => (() => void) | null;
 };
 
 ColumnModeConfigFactory.deps = [PanelHeaderActionFactory];

src/layers/src/arc-layer/arc-layer.ts

@@ -14,9 +14,8 @@ import {BrushingExtension} from '@deck.gl/extensions';
 import {GeoArrowArcLayer} from '@kepler.gl/deckgl-arrow-layers';
 import {FilterArrowExtension} from '@kepler.gl/deckgl-layers';
 import {ArcLayer as DeckArcLayer} from '@deck.gl/layers';
-import {h3ToGeo} from 'h3-js';
 
-import {hexToRgb, DataContainerInterface, ArrowDataContainer} from '@kepler.gl/utils';
+import {hexToRgb, maybeHexToGeo, DataContainerInterface, ArrowDataContainer} from '@kepler.gl/utils';
 import ArcLayerIcon from './arc-layer-icon';
 import {isLayerHoveredFromArrow, createGeoArrowPointVector, getFilteredIndex} from '../layer-utils';
 import {
@@ -139,33 +138,6 @@ const DEFAULT_COLUMN_MODE = COLUMN_MODE_POINTS;
 const brushingExtension = new BrushingExtension();
 const arrowCPUFilterExtension = new FilterArrowExtension();
 
-export function getPositionFromHexValue(token) {
-  const pos = h3ToGeo(token);
-
-  if (Array.isArray(pos) && pos.every(Number.isFinite)) {
-    return [pos[1], pos[0]];
-  }
-  return null;
-}
-
-function maybeHexToGeo(
-  dc: DataContainerInterface,
-  d: {index: number},
-  lat: LayerColumn,
-  lng: LayerColumn
-) {
-  // lat or lng column could be hex column
-  // we assume string value is hex and try to convert it to geo lat lng
-  const latVal = dc.valueAt(d.index, lat.fieldIdx);
-  const lngVal = dc.valueAt(d.index, lng.fieldIdx);
-
-  return typeof latVal === 'string'
-    ? getPositionFromHexValue(latVal)
-    : typeof lngVal === 'string'
-    ? getPositionFromHexValue(lngVal)
-    : null;
-}
-
 function isOtherFieldString(columns, allFields, key) {
   const field = allFields[columns[key].fieldIdx];
   return field && field.type === 'string';

src/layers/src/line-layer/line-layer.ts

@@ -21,7 +21,7 @@ import {
   LayerColumn
 } from '@kepler.gl/types';
 import {default as KeplerTable} from '@kepler.gl/table';
-import {DataContainerInterface} from '@kepler.gl/utils';
+import {DataContainerInterface, maybeHexToGeo} from '@kepler.gl/utils';
 
 export type LineLayerVisConfigSettings = {
   opacity: VisConfigNumber;
@@ -157,21 +157,32 @@ export const linePosAccessor =
           return [start.get(0), start.get(1), 0, end.get(2), end.get(3), 0];
         };
       case COLUMN_MODE_NEIGHBORS:
-        return d => [
-          dc.valueAt(d.index, lng.fieldIdx),
-          dc.valueAt(d.index, lat.fieldIdx),
-          alt?.fieldIdx > -1 ? dc.valueAt(d.index, alt.fieldIdx) : 0
-        ];
+        return d => {
+          const startPos = maybeHexToGeo(dc, d, lat, lng);
+          // only return source point if columnMode is COLUMN_MODE_NEIGHBORS
+
+          return [
+            startPos ? startPos[0] : dc.valueAt(d.index, lng.fieldIdx),
+            startPos ? startPos[1] : dc.valueAt(d.index, lat.fieldIdx),
+            alt?.fieldIdx > -1 ? dc.valueAt(d.index, alt.fieldIdx) : 0
+          ];
+        };
       default:
         // COLUMN_MODE_POINTS
-        return d => [
-          dc.valueAt(d.index, lng0.fieldIdx),
-          dc.valueAt(d.index, lat0.fieldIdx),
-          alt0 && alt0.fieldIdx > -1 ? dc.valueAt(d.index, alt0.fieldIdx) : 0,
-          dc.valueAt(d.index, lng1.fieldIdx),
-          dc.valueAt(d.index, lat1.fieldIdx),
-          alt1 && alt1?.fieldIdx > -1 ? dc.valueAt(d.index, alt1.fieldIdx) : 0
-        ];
+        return d => {
+          // lat or lng column could be hex column
+          // we assume string value is hex and try to convert it to geo lat lng
+          const startPos = maybeHexToGeo(dc, d, lat0, lng0);
+          const endPos = maybeHexToGeo(dc, d, lat1, lng1);
+          return [
+            startPos ? startPos[0] : dc.valueAt(d.index, lng0.fieldIdx),
+            startPos ? startPos[1] : dc.valueAt(d.index, lat0.fieldIdx),
+            alt0 && alt0.fieldIdx > -1 ? dc.valueAt(d.index, alt0.fieldIdx) : 0,
+            endPos ? endPos[0] : dc.valueAt(d.index, lng1.fieldIdx),
+            endPos ? endPos[1] : dc.valueAt(d.index, lat1.fieldIdx),
+            alt1 && alt1?.fieldIdx > -1 ? dc.valueAt(d.index, alt1.fieldIdx) : 0
+          ];
+        };
     }
   };
 

src/utils/src/index.ts

@@ -48,6 +48,7 @@ export {
   getTimelineFromAnimationConfig,
   getTimelineFromFilter
 } from './time';
+export {maybeHexToGeo, getPositionFromHexValue} from './position-utils';
 
 export {
   datasetColorMaker,

src/utils/src/position-utils.ts

@@ -0,0 +1,35 @@
+// SPDX-License-Identifier: MIT
+// Copyright contributors to the kepler.gl project
+
+import {h3ToGeo} from 'h3-js';
+
+import {LayerColumn} from '@kepler.gl/types';
+
+import {DataContainerInterface} from './data-container-interface';
+
+export function getPositionFromHexValue(token) {
+  const pos = h3ToGeo(token);
+
+  if (Array.isArray(pos) && pos.every(Number.isFinite)) {
+    return [pos[1], pos[0]];
+  }
+  return null;
+}
+
+export function maybeHexToGeo(
+  dc: DataContainerInterface,
+  d: {index: number},
+  lat: LayerColumn,
+  lng: LayerColumn
+) {
+  // lat or lng column could be hex column
+  // we assume string value is hex and try to convert it to geo lat lng
+  const latVal = dc.valueAt(d.index, lat.fieldIdx);
+  const lngVal = dc.valueAt(d.index, lng.fieldIdx);
+
+  return typeof latVal === 'string'
+    ? getPositionFromHexValue(latVal)
+    : typeof lngVal === 'string'
+    ? getPositionFromHexValue(lngVal)
+    : null;
+}