# @fiftyone/plugins ## State ### pluginsLoaderAtom | Name | Type | Description | |-------------------|------------------------------------------------------|---------------| | pluginsLoaderAtom | `Union<` `'loading'` `,` `'error'` `,` `'ready'` `>` | | ```typescript const [pluginsLoaderAtom, setPluginsLoaderAtom] = useRecoilState(fos.pluginsLoaderAtom); ``` ## Hooks ### useActivePlugins ### @fiftyone/plugins.useActivePlugins(type, ctx) * **Arguments:** * **type** (`TType`) * **ctx** (`Record`) * **Return type:** `Array<` `>` ### usePlugin ### @fiftyone/plugins.usePlugin(type) * **Arguments:** * **type** (`TType`) * **Return type:** `Array<` `>` ### usePluginComponent ### @fiftyone/plugins.usePluginComponent(name, ctx) * **Arguments:** * **name** (`string`) * **ctx** (`Record`) * **Return type:** `plugins.fiftyone.plugins.ComponentRegistration` `<` `Any` `>` Returns a component plugin by name if it’s available for the given `ctx`. **Returns** The plugin component or ```typescript `undefined` ``` ### usePluginDefinition ### @fiftyone/plugins.usePluginDefinition(name) * **Arguments:** * **name** (`string`) * **Return type:** `plugins.fiftyone.plugins.PluginDefinition` Get a plugin definition by name. **Returns** The plugin definition ### usePluginSettings ### @fiftyone/plugins.usePluginSettings(pluginName, defaults) * **Arguments:** * **pluginName** (`string`) * **defaults** (`Partial`) * **Return type:** `plugins.fiftyone.plugins.T` ### usePlugins ### @fiftyone/plugins.usePlugins() * **Return type:** `Object` A react hook for loading the plugin system. ## Functions ### createSampleRendererMediaContext ### @fiftyone/plugins.createSampleRendererMediaContext(sample, selectedMediaField) * **Arguments:** * **sample** (`TSample`) * **selectedMediaField** (`string`) * **Return type:** `plugins.fiftyone.plugins.SampleRendererMediaContext` Builds normalized media metadata used for sample renderer matching and render context. ### createSampleRendererRenderContext ### @fiftyone/plugins.createSampleRendererRenderContext(sample, selectedMediaField, dataset, schema, surface) * **Arguments:** * **sample** (`TSample`) * **selectedMediaField** (`string`) * **dataset** (`Dataset`) * **schema** (`Schema`) * **surface** (`SampleRendererSurface`) * **Return type:** `plugins.fiftyone.plugins.SampleRendererRenderContext` `<` `plugins.fiftyone.plugins.TSample` `>` Creates the full render context passed to sample renderer components. ### getAbsolutePluginPath ### @fiftyone/plugins.getAbsolutePluginPath(name, path) * **Arguments:** * **name** (`string`) * **path** (`string`) * **Return type:** `string` Get the absolute path to a file within a plugin directory. **Returns** An absolute path to the file ### getByType ### @fiftyone/plugins.getByType(type) * **Arguments:** * **type** (`TType`) * **Return type:** `Array<` `>` Get a list of plugins match the given `type`. **Returns** A list of plugins ### getCategoryForPanel ### @fiftyone/plugins.getCategoryForPanel(panel) * **Arguments:** * **panel** (`Union`) * **Return type:** `plugins.fiftyone.plugins.CategoryID` ### getCategoryLabel ### @fiftyone/plugins.getCategoryLabel(category) * **Arguments:** * **category** (`CategoryID`) * **Return type:** `string` ### getComponent ### @fiftyone/plugins.getComponent(name) * **Arguments:** * **name** (`string`) * **Return type:** `FunctionComponent < T >` `<` `plugins.fiftyone.plugins.T` `>` Returns the component registered under the given name. ### getMatchingSampleRenderer ### @fiftyone/plugins.getMatchingSampleRenderer(registrations, ctx) * **Arguments:** * **registrations** (`Array`) * **ctx** (`SampleRendererMatchContext`) * **Return type:** `plugins.fiftyone.plugins.TRegistration` Returns the highest-priority renderer registration that supports the given context. ### getPluginDefinition ### @fiftyone/plugins.getPluginDefinition(name) * **Arguments:** * **name** (`string`) * **Return type:** `plugins.fiftyone.plugins.PluginDefinition` Get a plugin definition by name. **Returns** The plugin definition ### getSampleRendererComponent ### @fiftyone/plugins.getSampleRendererComponent(registration, surface, canonicalComponent) * **Arguments:** * **registration** (`SampleRendererRegistrationLike`) * **surface** (`SampleRendererSurface`) * **canonicalComponent** (`FunctionComponent`) * **Return type:** `FunctionComponent < SampleRendererProps >` `<` `plugins.fiftyone.plugins.SampleRendererProps` `>` Selects the renderer component to use for the current surface. ### getSampleRendererGridSlotComponent ### @fiftyone/plugins.getSampleRendererGridSlotComponent(registration, slot) * **Arguments:** * **registration** (`SampleRendererRegistrationLike`) * **slot** (`'grid-header-after-resource-count'`) * **Return type:** `FunctionComponent < >` `<` `Any` `>` Returns the configured grid slot component when grid rendering is enabled. ### hasSampleRendererSource ### @fiftyone/plugins.hasSampleRendererSource(media) * **Arguments:** * **media** ([`SampleRendererMediaContext`](#fiftyone-plugins.SampleRendererMediaContext)) * **Return type:** `boolean` Returns whether a renderer can receive a file URL or logical reference. ### isSampleRendererModalPersistent ### @fiftyone/plugins.isSampleRendererModalPersistent(registration) * **Arguments:** * **registration** (`SampleRendererRegistrationLike`) * **Return type:** `boolean` Returns whether a renderer opts into persisting across sample navigation in the modal. ### loadPlugins ### @fiftyone/plugins.loadPlugins() * **Return type:** `Promise < void >` `<` `void` `>` ### registerComponent ### @fiftyone/plugins.registerComponent(registration) * **Arguments:** * **registration** * **Return type:** `void` Adds a plugin to the registry. This is called by the plugin itself. ### safePluginActivator ### @fiftyone/plugins.safePluginActivator(plugin, ctx) * **Arguments:** * **plugin** ([`PluginComponentRegistration`](#fiftyone-plugins.PluginComponentRegistration)) * **ctx** (`any`) * **Return type:** `boolean` a utility for safely calling plugin defined activator functions ### subscribeToRegistry ### @fiftyone/plugins.subscribeToRegistry(handler) * **Arguments:** * **handler** (`RegistryEventHandler`) Subscribe to plugin registry’s “subscribe” and “unsubscribe” event. **Returns** A function to unsubscribe > ### @fiftyone/plugins.subscribeToRegistry(handler) > * **Return type:** > `void` ### unregisterComponent ### @fiftyone/plugins.unregisterComponent(name) * **Arguments:** * **name** (`string`) * **Return type:** `void` Remove a plugin from the registry. ### usingRegistry ### @fiftyone/plugins.usingRegistry() * **Return type:** `plugins.fiftyone.plugins.PluginComponentRegistry` ## Types ### PluginComponentRegistrationByType ### *class* @fiftyone/plugins.PluginComponentRegistrationByType() #### Properties | Name | Type | Description | |--------|-------------------------------------------------------------------------|---------------| | 1 | `plugins.fiftyone.plugins.PlotRegistration` `<` `Any` `>` | | | 2 | `plugins.fiftyone.plugins.PanelRegistration` `<` `Any` `>` | | | 3 | `plugins.fiftyone.plugins.ComponentRegistration` `<` `Any` `>` | | | 4 | `plugins.fiftyone.plugins.SampleRendererRegistration` `<` `unknown` `>` | | ### *class* @fiftyone/plugins.ComponentRegistration() ### ComponentRegistration ### *class* @fiftyone/plugins.GridConfig() ### GridConfig Grid-specific renderer behavior, including enablement and optional override. the renderer or pass through to the host grid. Defaults to `"renderer"`. Use `"passthrough"` for non-interactive previews that should behave like native grid tiles. A renderer that mixes interactive and non-interactive regions may opt into passthrough and call `stopPropagation()` only from the interactive regions.” > “GridConfig.enabled”,”`boolean`”,”Enables the sample renderer on the grid surface. Grid rendering is disabled unless this is explicitly set to `true`.” : “GridConfig.overrideComponent”,”`React.FunctionComponent < SampleRendererProps >` `<` `plugins.fiftyone.plugins.SampleRendererProps` `>`”,”Optional component used only on the grid surface. When omitted, the renderer’s canonical component is used in both the grid and modal.” : “GridConfig.slots”,”`Partial < Record >` `<` `Record < SampleRendererGridSlot , React.FunctionComponent >` `>`”,”Components rendered in named grid slots while this renderer is active.” ### *class* @fiftyone/plugins.MatchMedia() ### MatchMedia Declarative media matchers used to determine renderer compatibility. | Name | Type | Description | |-----------------------|-----------------------|---------------| | MatchMedia.extensions | `Array<` `string` `>` | | | MatchMedia.mediaTypes | `Array<` `string` `>` | | | MatchMedia.mimeTypes | `Array<` `string` `>` | | ### *class* @fiftyone/plugins.MediaReferenceDescriptor() ### MediaReferenceDescriptor A reference-backed sample’s media identity, as one key: the id of the media source its media comes from, then coordinates of the kind’s own choosing. The source itself is recorded once on the dataset. | Name | Type | Description | |------------------------------|----------|---------------| | MediaReferenceDescriptor.key | `string` | | ### *class* @fiftyone/plugins.ModalConfig() ### ModalConfig Modal-specific renderer behavior. supports. The renderer must derive all per-sample state from `ctx` (or key its own internal subtrees).” ### *class* @fiftyone/plugins.PanelOptions() ### PanelOptions Defaults to `false`.” : “PanelOptions.alpha”,”`boolean`”,”Whether the plugin is in alpha. This is used to highlight alpha plugins. Defaults to `false`.” : “PanelOptions.beta”,”`boolean`”,”Whether the plugin is in beta. This is used to highlight beta plugins. Defaults to `false`.” : “PanelOptions.category”,”`plugins.fiftyone.plugins.CategoryID`”,”The category of the plugin. Defaults to `custom`.” : “PanelOptions.helpMarkdown”,”`string`”,”Markdown help text for the plugin.” “PanelOptions.isNew”,”`boolean`”,”Whether the plugin is new. This is used to highlight new plugins. Defaults to `false`.” : “PanelOptions.priority”,”`number`”,”Priority of the panel as it shows up in panel selector dropdown. Panels are sorted by priority in ascending order.” : “PanelOptions.surfaces”,”`Union<` `'grid'` `,` `'modal'` `,` `'portal'` `,` `'grid modal'` `,` `'grid portal'` `,` `'modal portal'` `,` `'grid modal portal'` `>`”,”Surfaces where plugin is made available. If this is not provided, the plugin will be available in grid only.” ### *class* @fiftyone/plugins.PanelRegistration() ### PanelRegistration ### *class* @fiftyone/plugins.PlotRegistration() ### PlotRegistration ### *class* @fiftyone/plugins.PluginActivator() ### PluginActivator ### *class* @fiftyone/plugins.PluginComponentRegistration() ### PluginComponentRegistration ### *class* @fiftyone/plugins.SampleRendererGridClickBehavior() ### SampleRendererGridClickBehavior Controls how otherwise-unhandled grid-tile activation events are routed. - `"renderer"` (default) keeps click and context-menu events inside the sample renderer. The grid draws no open-modal control of its own, so a renderer on this mode owes its users an affordance that calls `ctx.openModal` — otherwise the tile has no route to the sample modal. - `"passthrough"` allows those events to bubble to the host grid, where a normal tile click opens the sample modal. Renderer-owned interactive regions can still call `stopPropagation()` to retain their interactions. This option does not disable pointer events or affect hover behavior, renderer-owned controls, or the sample-selection checkbox. Union of `'renderer'`, `'passthrough'` ### *class* @fiftyone/plugins.SampleRendererGridSlot() ### SampleRendererGridSlot ### *class* @fiftyone/plugins.SampleRendererMatchContext() ### SampleRendererMatchContext Context used to evaluate whether a sample renderer supports a sample. | Name | Type | Description | |------------------------------------|-------------------------------------------------------|---------------| | SampleRendererMatchContext.media | `plugins.fiftyone.plugins.SampleRendererMediaContext` | | | SampleRendererMatchContext.sample | `plugins.fiftyone.plugins.TSample` | | | SampleRendererMatchContext.surface | `plugins.fiftyone.plugins.SampleRendererSurface` | | ### *class* @fiftyone/plugins.SampleRendererMediaContext() ### SampleRendererMediaContext Normalized media attributes derived from a sample and selected media field. | Name | Type | Description | |-------------------------------------------|-----------------------------------------------------------------------------|---------------| | SampleRendererMediaContext.extension | `Union<` `string` `,` `null` `>` | | | SampleRendererMediaContext.field | `string` | | | SampleRendererMediaContext.isNative | `boolean` | | | SampleRendererMediaContext.mediaReference | `Union<` `plugins.fiftyone.plugins.MediaReferenceDescriptor` `,` `null` `>` | | | SampleRendererMediaContext.mediaType | `Union<` `string` `,` `null` `>` | | | SampleRendererMediaContext.mimeType | `Union<` `string` `,` `null` `>` | | | SampleRendererMediaContext.path | `Union<` `string` `,` `null` `>` | | | SampleRendererMediaContext.url | `Union<` `string` `,` `null` `>` | | ### *class* @fiftyone/plugins.SampleRendererOptions() ### SampleRendererOptions Configuration for registering and selecting a sample renderer. | Name | Type | Description | |--------------------------------|-----------------------------------------------------------------------------------------------|---------------| | SampleRendererOptions.grid | `plugins.fiftyone.plugins.GridConfig` | | | SampleRendererOptions.modal | `plugins.fiftyone.plugins.ModalConfig` | | | SampleRendererOptions.priority | `number` | | | SampleRendererOptions.supports | `Union<` `plugins.fiftyone.plugins.MatchMedia` `,` `( ctx : SampleRendererMatchContext )` `>` | | ### *class* @fiftyone/plugins.SampleRendererProps() ### SampleRendererProps Props shape received by sample renderer React components. | Name | Type | Description | |-------------------------------------------|--------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------| | SampleRendererProps.ctx | `plugins.fiftyone.plugins.SampleRendererRenderContext` `<` `plugins.fiftyone.plugins.SampleRendererSampleLike` `>` | | | SampleRendererProps.isGridActive | `boolean` | Whether a grid renderer is both mounted and unobscured by the modal. | | SampleRendererProps.onRetainedBytesChange | `(` `retainedBytes` `:` `number` `)` | | ### *class* @fiftyone/plugins.SampleRendererRegistration() ### SampleRendererRegistration | Name | Type | Description | |----------------------------|------------------------------------------------------------------------------------------------------|---------------| | SampleRendererRegistration | `plugins.fiftyone.plugins.BaseSampleRendererRegistration` `<` `plugins.fiftyone.plugins.TSample` `>` | | ### *class* @fiftyone/plugins.SampleRendererRenderContext() ### SampleRendererRenderContext Full context passed to sample renderer components at render time. ### *class* @fiftyone/plugins.SampleRendererSampleLike() ### SampleRendererSampleLike | Name | Type | Description | |--------------------------------------|-----------------------------------|---------------| | SampleRendererSampleLike.frameNumber | `Union<` `number` `,` `null` `>` | | | SampleRendererSampleLike.frameRate | `Union<` `number` `,` `null` `>` | | | SampleRendererSampleLike.sample | `Object` | | | SampleRendererSampleLike.urls | `Union<` `Any` `,` `readonly` `>` | | ## Enums ### Categories | Name | Value | |---------|---------| | Analyze | | | Curate | | | Custom | | | Import | | ### PluginComponentType The type of plugin component. - `Panel` - A panel that can be added to `@fiftyone/spaces` - `Plot` - **deprecated** - A plot that can be added as a panel - `SampleRenderer` - A custom renderer for non-native sample media | Name | Value | |----------------|---------| | Component | | | Panel | | | Plot | | | SampleRenderer | | ## Variables ### SAMPLE_RENDERER_GRID_SLOT Stable slots exposed by the grid surface for renderer-owned controls. | Name | Type | Description | |-----------------------------|--------------------------------------|---------------| | HEADER_AFTER_RESOURCE_COUNT | `'grid-header-after-resource-count'` | |