React to change in selection on data source from custom widget

AlejandroMari1

Hello! I'm trying to understand how can I "listen" for changes on a data source selection on a custom widget that were made on a different widget.

I have a feature layer data source. From one custom widget, I get hold of that that source I select some features. 

From a different custom widget, I want to listen on that change so I can render information appropriately.

This is my render function:

render() {
    const { dataSource } = this.state;
    const useDataSource = this.props.useDataSources && this.props.useDataSources[0]
    let query: FeatureLayerQueryParams = {
        where: "1=1",
        returnGeometry: false,
        outFields: ["*"]
    };
    return (
        <div>
            <DataSourceComponent
                useDataSource={useDataSource}
                query={dataSource ? query : null}
                widgetId={this.props.widgetId}
                onDataSourceCreated={this.onDataSourceCreated}
                // onQueryStatusChange={this.onQueryStatusChange}
                onDataSourceInfoChange={this.onDataSourceInfoChange}
                onCreateDataSourceFailed={this.onCreateDataSourceFailed}
            >
                {this.renderTheSubComponent}
            </DataSourceComponent>
        </div>
    )
}
onDataSourceCreated = (dataSource: QueriableDataSource): void => {
    this.setState({ dataSource: dataSource });
}

None of the callbacks there are called when the selection is changed. ComponentDidUpdate also doesn't get called, so my component never receives the selection.

Other OOTB widgets (like the List widget) are properly reacting to selection changes, so I'm positive the selection is properly done.

Any help will be appreciated.

Alejandro

AlejandroMari1

Thanks @Anonymous User for your detailed response. Much appreciated.

That works, in my code the onDataSourceInfoChange also gets called now whenever the data selection changes (I don't know why it wasn't before, something must have been wrong in my code).

I've also noticed is that the child component of the <DataSourceComponent> also gets triggered every time the selection changes.

Example:

updateChild = (ds?: QueriableDataSource, dsInfo?: IMDataSourceInfo) => {
    const selectedProjects = ds.getSelectedRecords(); // Will contain the selected records.
}

render() { 
	return (<div>
		{<DataSourceComponent widgetId={this.props.id} useDataSource={this.props.useDataSources[0]}
          onDataSourceCreated={this.onDs} 
          onDataSourceInfoChange={this.dataChanged}
          queryCount>
			{this.updateChild}
		}
      </DataSourceComponent>
	</div>)
}