keplergl / keplergl/kepler.gl

[Bug] injectComponents Destroy Map State & KeplerReducer

Open
#2,221 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
12k
Forks
2k
Avg merge
1d 5h
Merged PRs (30d)
66

Description

**Describe the bug**
Hi everyone.

I use ^3.0.0-alpha.0 version

The Imported KepleGl component in playing ok and i can render all the data.
However im trying to use injectComponents in order to update the map points tooltip so i can add a custom button in there and use this instance to load the map. Whem im trying to do that im getting errors.

My code ->

```typescript
const KeplerGl = injectComponents([hoverLayers as never]);
```

```typescript
state.keplerGl}
width={windowDimension.width}
height={windowDimension.height}
/>
```

And the Hover layers component is

```typescript
import React from "react";
import { LayerHoverInfoFactory } from "@kepler.gl/components";
const CustomLayerHoverInfoFactory = () => {
const LayerHoverInfo = (props: any) => {
const { data, layer, fieldsToShow } = props;

if (!data || !layer) {
return null;
}
return

HI
;
};
return LayerHoverInfo;
};
const hoverLayers = [LayerHoverInfoFactory, CustomLayerHoverInfoFactory];
export default hoverLayers;
```

State & Reducers

```typescript
const customizedKeplerGlReducer = keplerGlReducer.initialState({ ...state });

export default combineReducers({
keplerGl: customizedKeplerGlReducer,
app: appReducer,
polling: pollingReducer,
realTime: realTimeReducer,
simulations: simualtionsReducer,
});
```

and i get the next Error:

`
Cannot read properties of undefined (reading 'visState')
`

This is the redux actions history when starting the applicaiton with the original KeplerGL instance

image

And This is the redux actions history when starting the applicaiton with the injectComponents isntance.

image

What i find wierd is the register & delete entry actions.

image

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the failure with the injectComponents setup and compare the Redux action histories for the original and injected KeplerGl instances. Start at injectComponents, LayerHoverInfoFactory, and keplerGlReducer initialization, then trace the register and delete actions around the undefined visState error. Done means the injected hover component initializes without destroying map state and the custom tooltip can render.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.