@fiftyone/spaces#

Hooks#

usePanel#

@fiftyone/spaces.usePanel(name, predicate)#
Arguments:

  • name (SpaceNodeType())

  • predicate (( panel : PluginComponentRegistration )())

Return type:

Union< undefined , plugins.fiftyone.spaces.PluginComponentRegistration() >

usePanelCloseEffect#

@fiftyone/spaces.usePanelCloseEffect(panelId)#
Arguments:

  • panelId ()

usePanelContext#

@fiftyone/spaces.usePanelContext()#
Return type:

plugins.fiftyone.spaces.PanelContextType()

usePanelId#

@fiftyone/spaces.usePanelId()#
Return type:

string

usePanelLoading#

@fiftyone/spaces.usePanelLoading(id)#
Arguments:

  • id (string())

Return type:

[ boolean , ( loading : boolean ,  id : string ) ]

Get and set loading state of a panel

Note: id is optional if hook is used within the component of a panel.

usePanelState#

@fiftyone/spaces.usePanelState(defaultState, id, local, scope)#
Arguments:

  • defaultState (T())

  • id (string())

  • local (boolean())

  • scope (string())

Return type:

Array< Union< undefined , plugins.fiftyone.spaces.T() , SetterOrUpdater < T > > >

Get and set state of a panel

Note: id is optional if hook is used within the component of a panel.

usePanelStateByIdCallback#

@fiftyone/spaces.usePanelStateByIdCallback(callback, local, scope)#
Arguments:

  • callback (( panelId : string ,  panelState : T ,  args :  )())

  • local (boolean())

  • scope (string())

Get a callback function that can be used to update the panel state.

Returns

A callback function that can be used to update the panel state. The callback is called with the panelId, panelState, and args.

Example:

const resolvePanelState = (panelId, panelState, args) => {
  const [countInc] = args;
  // do something with the panelState
  const count = panelState.count + countInc;
  return { ...panelState, count };
};
const local = true; // true = local state, false = global state
const setPanelState = usePanelStateByIdCallback(resolvePanelState, local, scope);
const usePanelId = usePanelId();
const countInc = 10;
setPanelState("panelId", panelState, [countInc]);

      .. js:function:: panelStateByIdCallback


         :param args:
         :type args: [ panelId ,  ]
         :rtype: ``Promise < void >`` ``<`` ``void`` ``>``

Returns a function that will run the callback that was passed when calling this hook. Useful for accessing Recoil state in response to events.

usePanelStateCallback#

@fiftyone/spaces.usePanelStateCallback(callback, local, scope)#
Arguments:

  • callback (( panelState : T )())

  • local (boolean())

  • scope (string())

Can only be used within a panel component

@fiftyone/spaces.panelStateCallback()#
Arguments:

  • args ([ ]())

Return type:

Promise < void > < void >

Returns a function that will run the callback that was passed when calling this hook. Useful for accessing Recoil state in response to events.

usePanelStateLazy#

@fiftyone/spaces.usePanelStateLazy(local, scope)#
Arguments:

  • local (boolean())

  • scope (string())

Lazily read panel state on demand

Returns

a state resolver function which return promise that resolves to the current state of a panel

@fiftyone/spaces.panelStateLazy()#
Return type:

Promise < any > < any >

usePanelStatePartial#

@fiftyone/spaces.usePanelStatePartial(key, defaultState, local, scope)#
Arguments:

  • key (string())

  • defaultState (T())

  • local (boolean())

  • scope (string())

Return type:

Array< any >

Get partial state of current panel (i.e. property of an object state)

Should only be used within a panel component whose state is an object or

an array

usePanelTabAutoPosition#

@fiftyone/spaces.usePanelTabAutoPosition()#
@fiftyone/spaces.panelTabAutoPosition()#
Arguments:

  • e (SortableEvent())

Return type:

Promise < void > < void >

usePanelTitle#

@fiftyone/spaces.usePanelTitle(id)#
Arguments:

  • id (string())

Return type:

readonly

Get and set title of a panel

Note: id is optional if hook is used within the component of a panel.

usePanels#

@fiftyone/spaces.usePanels(predicate)#
Arguments:

  • predicate (( panel : PluginComponentRegistration )())

Return type:

Array< plugins.fiftyone.spaces.PluginComponentRegistration() < Any > >

Hook to get all panels registered in the app, optionally filtered by a predicate.

usePanelsState#

@fiftyone/spaces.usePanelsState()#
Return type:

[ plugins.fiftyone.spaces.PanelsStateObject() , ( newPanelsState : PanelsStateObject ) ]

Get and set multiple panels state

useReactivePanel#

@fiftyone/spaces.useReactivePanel(name)#
Arguments:
Return type:

Union< undefined , plugins.fiftyone.spaces.PluginComponentRegistration() >

useSetCustomPanelState#

@fiftyone/spaces.useSetCustomPanelState(local)#
Arguments:

  • local ()

useSetPanelCloseEffect#

@fiftyone/spaces.useSetPanelCloseEffect(panelId)#
Arguments:

  • panelId ()

useSetPanelStateById#

@fiftyone/spaces.useSetPanelStateById(local, scope)#
Arguments:

  • local (boolean())

  • scope ()

Returns a function that will run the callback that was passed when calling this hook. Useful for accessing Recoil state in response to events.

useSpaceNodes#

@fiftyone/spaces.useSpaceNodes(spaceId)#
Arguments:

  • spaceId (string())

Return type:

Array< plugins.fiftyone.spaces.default() >

useSpaces#

@fiftyone/spaces.useSpaces(id, defaultState)#
Arguments:
Return type:

Object

Functions#

PanelSkeleton#

@fiftyone/spaces.PanelSkeleton()#
Return type:

Element

SpacesRoot#

@fiftyone/spaces.SpacesRoot(props)#
Arguments:
Return type:

Element

getNodes#

@fiftyone/spaces.getNodes(node)#
Arguments:

  • node (default())

Return type:

Array< plugins.fiftyone.spaces.SpaceNode() >

spaceNodeFromJSON#

@fiftyone/spaces.spaceNodeFromJSON(json, parent)#
Arguments:
Return type:

plugins.fiftyone.spaces.default()

warnPanelNotFound#

@fiftyone/spaces.warnPanelNotFound(name)#
Arguments:
Return type:

null

Types#

class @fiftyone/spaces.AddPanelButtonProps()#

AddPanelButtonProps#

Name

Type

Description

AddPanelButtonProps.node

plugins.fiftyone.spaces.SpaceNode()

AddPanelButtonProps.spaceId

string
class @fiftyone/spaces.AddPanelItemProps()#

AddPanelItemProps#

Name

Type

Description

AddPanelItemProps.Icon

React.ComponentType

AddPanelItemProps.label

string

AddPanelItemProps.name

plugins.fiftyone.spaces.SpaceNodeType()

AddPanelItemProps.node

plugins.fiftyone.spaces.SpaceNode()

AddPanelItemProps.onClick

( )

AddPanelItemProps.showAlpha

boolean

AddPanelItemProps.showBeta

boolean

AddPanelItemProps.showNew

boolean

AddPanelItemProps.spaceId

string
class @fiftyone/spaces.PanelIconProps()#

PanelIconProps#

Name

Type

Description

PanelIconProps.name

plugins.fiftyone.spaces.SpaceNodeType()
class @fiftyone/spaces.PanelProps()#

PanelProps#

Name

Type

Description

PanelProps.isModalPanel

boolean

PanelProps.node

plugins.fiftyone.spaces.SpaceNode()

PanelProps.spaceId

string
class @fiftyone/spaces.PanelStateParameter()#

PanelStateParameter#

Name

Type

Description

PanelStateParameter.local

boolean

PanelStateParameter.panelId

string

PanelStateParameter.scope

string
class @fiftyone/spaces.PanelStatePartialParameter()#

PanelStatePartialParameter#

class @fiftyone/spaces.PanelTabProps()#

PanelTabProps#

Name

Type

Description

PanelTabProps.active

boolean

PanelTabProps.node

plugins.fiftyone.spaces.SpaceNode()

PanelTabProps.spaceId

string
class @fiftyone/spaces.PanelsCloseEffect()#

PanelsCloseEffect#

class @fiftyone/spaces.PanelsStateObject()#

PanelsStateObject#

class @fiftyone/spaces.SpaceNodeJSON()#

SpaceNodeJSON#

Name

Type

Description

SpaceNodeJSON.activeChild

SpaceNodeJSON.children

Array< plugins.fiftyone.spaces.SpaceNodeJSON() >

SpaceNodeJSON.id

SpaceNodeJSON.layout

SpaceNodeJSON.pinned

SpaceNodeJSON.sizes

Array< number >

SpaceNodeJSON.type
class @fiftyone/spaces.SpaceNodeType()#

SpaceNodeType#

Union of EnumType(), string()

class @fiftyone/spaces.SpaceProps()#

SpaceProps#

Name

Type

Description

SpaceProps.archetype

Union< 'grid' , 'modal' >

SpaceProps.id

string

SpaceProps.node

plugins.fiftyone.spaces.SpaceNode()
class @fiftyone/spaces.SpacesRootProps()#

SpacesRootProps#

Name

Type

Description

SpacesRootProps.defaultState

plugins.fiftyone.spaces.SpaceNodeJSON()

SpacesRootProps.id

string
class @fiftyone/spaces.SplitPanelButtonProps()#

SplitPanelButtonProps#

Name

Type

Description

SplitPanelButtonProps.layout

plugins.fiftyone.spaces.Layout()

SplitPanelButtonProps.node

plugins.fiftyone.spaces.SpaceNode()

SplitPanelButtonProps.spaceId

string

Enums#

Layout#

Name

Value

Horizontal

Vertical

SPACE_TYPES#

Name

Value

EMPTY

PANEL_CONTAINER