@duncan that is the first troubleshoot step I did, update to latest sdk and follow that example, but it is still not working
import React, { useState, useEffect, useRef } from ‘react’;
import QuickSightEmbedding from ‘amazon-quicksight-embedding-sdk’;
import { useGetQsSearchbarUrlQuery } from ‘services/nextgen’;
import { useLocalization } from ‘features/localization/localizationSlice’;
import { Can, services } from ‘features/permissions’;
import { useCurrentCompany } from ‘features/company/companySlice’;
import styles from ‘./Insights.module.scss’;
const Searchbar = () => {
const localization = useLocalization();
const searchbarContainerRef = useRef(null);
const searchbarFrameRef = useRef(null);
const currentCompany = useCurrentCompany();
const searchbarUrl = useGetQsSearchbarUrlQuery({ companyId: currentCompany.id });
const [qSession, setQSession] = useState(null);
const [embedQSearchBar, setEmbedQSearchBar] = useState(null);
const onLoad = () => {
// console.debug(‘searchbar - onLoad’);
searchbarContainerRef.current.style.display = ‘block’;
setTimeout(() => {
searchbarContainerRef.current.style.height = ‘80px’;
}, 10);
setTimeout(() => {
searchbarFrameRef.current.style.height = ‘80px’;
searchbarFrameRef.current.style.opacity = 1;
}, 100);
};
const onError = payload => {
// console.debug(‘searchbar - onError’, payload);
//searchbarContainerRef.current.style.display = ‘none’;
//searchbarContainerRef.current.style.height = ‘0px’;
//searchbarFrameRef.current.style.opacity = 0;
};
const onOpen = () => {
// console.debug(‘searchbar - onOpen’);
};
const onClose = () => {
// console.debug(‘searchbar - onClose’);
searchbarFrameRef.current.style.height = ‘80px’;
};
useEffect(() => {
// console.debug(‘searchbar - currentCompany change’);
setQSession();
}, [currentCompany]);
useEffect(() => {
const initializeEmbeddingContext = async () => {
try {
const embeddingContext = await QuickSightEmbedding.createEmbeddingContext();
setEmbedQSearchBar(() => embeddingContext.embedQSearchBar);
console.log(‘Embedding context initialized:’, embeddingContext);
} catch (error) {
console.error(‘Error initializing embedding context:’, error);
}
};
initializeEmbeddingContext();
}, );
useEffect(() => {
const embedSearchbar = async () => {
if (!embedQSearchBar) {
return;
}
const frameDiv = searchbarFrameRef.current;
// console.debug('searchbar - embed sdk - before', { searchbarUrl, qSession, frameDiv });
if (!qSession && frameDiv && searchbarUrl.data) {
console.log('Embedding search bar with URL:', searchbarUrl.data);
const options = {
url: searchbarUrl.data,
container: frameDiv,
width: '100%',
onLoad: onLoad,
onError: onError,
onOpen: onOpen,
onClose: onClose,
onChange: (changeEvent, metadata) => {
console.log('Qsearch option change:', changeEvent.eventName, metadata);
},
};
const contentOptions = {
locale: localization.locale || 'en-US',
hideTopicName: false,
allowTopicSelection: true,
onMessage: async (messageEvent, experienceMetadata) => {
console.log("Q Search Event:", messageEvent.eventName, experienceMetadata);
}
};
try {
const session = await embedQSearchBar(options, contentOptions);
setQSession(session);
console.log('Search bar embedded successfully:', session);
} catch (error) {
console.error('Error embedding QuickSight search bar:', error);
}
}
};
embedSearchbar();
}, [searchbarUrl.data, embedQSearchBar]); // Added dependencies
useEffect(() => {
setQSession(null);
}, [currentCompany]);
return (
<div className={styles.searchbarContainer} ref={searchbarContainerRef}>
<div className={styles.searchbarFrame} ref={searchbarFrameRef} />
</div>
);
};
export default Searchbar;
