I am attempting to use the DataSourceComponent to listen for selection changes on a data source. This works but I want to isolate the listener to certain events. For example, I only want this to be triggered when a user searches on my data source from the OOTB Search widget. I have the searchWidgetId and assumed the widgetId prop of the DataSourceComponent would handle this, but it doesn't honor that. Any selection made on this data source from any widget triggers the querySelectableDataSources from the onSelectionChange callback.
Below is the relevant functions and full JSX at this point. Any help is appreciated!
const getFeatureLayerDataSource = (dsId: string) => {
const dataSource = dataSourceManager.getDataSource(dsId);
if (dataSource) {
return dataSource as FeatureLayerDataSource;
}
return null
};
const constructFeature = (ds: FeatureLayerDataSource, record: DataRecord): ISelectedFeature => {
const feature = {
dsId: ds.id,
attributes: record.getData(),
geometry: record.getGeometry(),
oidFieldName: record.dataSource.getIdField(),
popupTemplate: ds.getPopupInfo()
}
return feature
};
const doQuery = () => {
// conditions to exit out of the querySelectableDataSources function
if (mapClickQuery["geometry"]) {
// This can get called when a user clicks on the map, exit out of the function
return false;
}
return true;
};
const querySelectableDataSources = (dsId: string) => {
// This function is called when the widget is loaded
// To return all the fields, ensure that each data source in the useDataSources
// object in the app config has a property of "fields: ['*']"
// This should be set in the settings implementation
// It's also called when the data source selections are changed
// Intended to handle selections from the search widget
// Check doQuery to determine if we should proceed with the query
if (!doQuery()) {
return;
}
const dsLoaded = dataSourceManager.getDataSource(dsId);
if (dsLoaded) {
const featureDataSource = getFeatureLayerDataSource(dsId);
const selectedRecords = dsLoaded.getSelectedRecords();
if (selectedRecords.length > 0) {
const selectedFeature = constructFeature(featureDataSource, selectedRecords[0]);
dispatchSelectionChange([selectedFeature]);
}
}
}
const dispatchSelectionChange = (selectedRecords: ISelectedFeature[]) => {
setIsRecordSelected(selectedRecords.length > 0);
props.dispatch(appActions.widgetStatePropChange(props.widgetId, "selection", selectedRecords));
}
return (
<div css={style}>
<div className="imagery-viewer">
</div>
<JimuMapViewComponent
useMapWidgetId={props.useMapWidgetIds?.[0]}
onActiveViewChange={activeViewChangeHandler}
/>
{tryCreateDataSourcesFinished ? (
<>
{props.useDataSources.map((useDataSource, index) => (
<DataSourceComponent
key={index}
useDataSource={useDataSource}
widgetId={props.config.searchWidgetId}
onSelectionChange={() => querySelectableDataSources(useDataSource.dataSourceId)}
/>
))}
{isRecordSelected ? (
<div className="imagery-viewer-header jimu-widget">
<ImagePopup {...props} jimuMapView={jimuMapView} />
</div>
) : (
<div className="imagery-viewer-header">{errorMessage ? (errorMessage) : (props.config.noSelectionMessage)}</div>
)}
<UserOptions {...props} />
</>
) : (
<Loading />
)}
</div>
);
