Visualizer Integration
How to embed our visualizer in your application.
Visualization engine allows the user to visualize, explore, and interact with Deep Lake datasets. In addition to using through the Activeloop UI or in Python, the Activeloop visualizer can also be embedded into your application.
To embed into your html page, you can use our iframe integration:
<iframe src="https://app.activeloop.ai/visualizer/iframe?url=hub://activeloop/imagenet-train" width="800px" height="600px">
iframe URL:
https://app.activeloop.ai/visualizer/iframe?url=hub://$org/$ds&{checkpoint=$checkpoint}&{vs=$visualizer_state}&{token=$token}Params:
url - The url of the dataset
vs - Visualizer state, which can be obtained from the platform url
token - User token, for private datasets. If the value is
ask then the UI will be populated for entering the token
checkpoint - Dataset checkpoint
query - Query string to apply on the datasetTo have more fine grained control, you can embed the visualizer using Javascript:
<div id='container'></div>
<script src="https://app.activeloop.ai/visualizer/vis.js"></script>
<script>
let container = document.getElementById('container')
window.vis.visualize("hub://activeloop/imagenet-train", null, null, container, null)
</script>
or to visualize private datasets with authentication
<div id='container'></div>
<script src="https://app.activeloop.ai/visualizer/vis.js"></script>
<script>
let container = document.getElementById('container')
window.vis.visualize("hub://org/private", null, null, container, {
requireSignin: true
})
</script>
Interface
Below you can find definitions of the arguments.
/// ds - Dataset url
/// commit - optional commit id
/// state - optional initial state of the visualizer
/// container - HTML element serving as container for visualizer elements
/// options - optional Visualization options
static visualize(
ds: string,
commit: string | null = null,
state: string | null = null,
container: HTMLElement,
options: VisOptions | null
): Promise<Vis>;
/// backlink - Show backlink to platform button
/// singleSampleView - Enable single sample view through enter key
/// requireSignin - Requires signin to get access token
/// token - Token id
/// gridMode - Canvas vs Grid
/// queryString - Query to apply on the iframe
export type VisOptions = {
backlink?: Boolean
singleSampleView?: Boolean
requireSignin?: Boolean
token: string | null
gridMode?: "canvas" | "grid"
queryString?: string
}
This
visualize returns Promise<Vis> which can be used to dynamically change the visualizer state. Vis supports only query functions for nowclass Vis
{
/// Asynchronously runs a query and resolves the promise when query completed.
/// In case of error in query, rejects the promise.
query(queryString: string): Promise<void>
}