0f3522eea6
<!-- .github/pull_request_template.md --> ## Description <!-- Provide a clear description of the changes in this PR --> ## DCO Affirmation I affirm that all code in every commit of this pull request conforms to the terms of the Topoteretes Developer Certificate of Origin.
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import classNames from 'classnames';
|
|
import { useCallback, useEffect, useState } from 'react';
|
|
import { Spacer, Stack, Text } from 'ohmy-ui';
|
|
import { LoadingIndicator } from '@/ui/App';
|
|
import { IFrameView, SearchView } from '@/ui/Partials';
|
|
import { getExplorationGraphUrl } from '@/modules/exploration';
|
|
import styles from './Explorer.module.css';
|
|
|
|
interface ExplorerProps {
|
|
dataset: { name: string };
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export default function Explorer({ dataset, className, style }: ExplorerProps) {
|
|
const [error, setError] = useState<Error | null>(null);
|
|
const [graphHtml, setGraphHtml] = useState<string | null>(null);
|
|
|
|
const exploreData = useCallback(() => {
|
|
getExplorationGraphUrl(dataset)
|
|
.then((graphHtml) => {
|
|
setError(null);
|
|
setGraphHtml(graphHtml);
|
|
})
|
|
.catch((error) => {
|
|
setError(error);
|
|
});
|
|
}, [dataset]);
|
|
|
|
useEffect(() => {
|
|
exploreData();
|
|
}, [exploreData]);
|
|
|
|
return (
|
|
<Stack
|
|
gap="6"
|
|
style={style}
|
|
orientation="horizontal"
|
|
className={classNames(styles.explorerContent, className)}
|
|
>
|
|
<div className={styles.graphExplorer}>
|
|
{error ? (
|
|
<Text color="red">{error.message}</Text>
|
|
) : (
|
|
<>
|
|
{!graphHtml ? (
|
|
<Spacer horizontal="2" wrap>
|
|
<LoadingIndicator />
|
|
</Spacer>
|
|
) : (
|
|
<IFrameView src="http://127.0.0.1:8000/api/v1/visualize" />
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className={styles.chat}>
|
|
<SearchView />
|
|
</div>
|
|
</Stack>
|
|
)
|
|
}
|