@fiftyone/plugins#

State#

pluginsLoaderAtom#

Name

Type

Description

pluginsLoaderAtom

Union< 'loading' , 'error' , 'ready' >

 
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

`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.

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:
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.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. Users open the sample modal with the grid’s explicit open-modal control.

  • "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, the sample-selection checkbox, or the explicit open-modal control.

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.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.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'
IN THIS ARTICLE