API

<oe-axes>

Attributes

Name	Description	Type	Default
x-step	The step size for the x-axis	Seconds \| undefined
y-step	The step size for the y-axis	Hertz \| undefined
x-title	The text to show next to the x-axis	string	"Time (Seconds)"
y-title	The text to show next to the y-axis	string	"Frequency (KHz)"
x-title-visible	Whether to show/hide the x-axis title	boolean	true
y-title-visible	Whether to show/hide the y-axis title	boolean	true
x-axis	Shows/hides x-axis labels and ticks	boolean	true
y-axis	Shows/hides y-axis labels and ticks	boolean	true
x-grid	Shows/hides x-axis labels and grid lines	boolean	true
y-grid	Shows/hides y-axis labels and grid lines	boolean	true

Properties

Name	Attribute	Description	Type	Default
labelPadding			EmUnit	0.25
tickSize			EmUnit	0.75
titleOffset			EmUnit	0.25
xStepOverride	x-step	The step size for the x-axis	Seconds \| undefined
yStepOverride	y-step	The step size for the y-axis	Hertz \| undefined
xTitle	x-title	The text to show next to the x-axis	string	"Time (Seconds)"
yTitle	y-title	The text to show next to the y-axis	string	"Frequency (KHz)"
showXTitle	x-title-visible	Whether to show/hide the x-axis title	boolean	true
showYTitle	y-title-visible	Whether to show/hide the y-axis title	boolean	true
showXAxis	x-axis	Shows/hides x-axis labels and ticks	boolean	true
showYAxis	y-axis	Shows/hides y-axis labels and ticks	boolean	true
showXGrid	x-grid	Shows/hides x-axis labels and grid lines	boolean	true
showYGrid	y-grid	Shows/hides y-axis labels and grid lines	boolean	true
spectrogram			SpectrogramComponent
wrappedElement			Readonly
emUnitFontSize			Size
unitConverter			UnitConverter
labelPadding			Size
tickSize			Size
titleOffset			Size
fontCanvas			HTMLCanvasElement

Slots

Name	Description
(default)	A spectrogram element to add axes to

CSS Shadow Parts

Name	Description
tick	Apply styles to both x and y tick lines
x-tick	Apply styles to only the x axis tick lines
y-tick	Apply styles to only the y axis tick lines
grid	Apply styles to both x and y grid lines
x-grid	Apply styles to only the x grid lines
y-grid	Apply styles to only the y grid lines
label	Apply styles to both x and y labels
x-label	Apply styles to only the x axis label
y-label	Apply styles to only the x axis label
legend	Apply styles to both the x and y legends
x-legend	Apply styles to only the x axis legend
y-legend	Apply styles to only the x axis legend

<oe-data-source>

Attributes

Name	Description	Type	Default
src	A remote JSON or CSV file to use as the data source	string \| undefined
for	A verification grid component that the derived page fetcher callback will be applied to	string
local	Whether to allow for local file inputs through a system UI dialog	boolean	false
random	Randomly sample rows from a local or remote data source	boolean	false

Properties

Name	Attribute	Description	Type	Default
columnNamespace			"oe_"	"oe_"
pageSize			10	10
src	src	A remote JSON or CSV file to use as the data source	string \| undefined
for	for	A verification grid component that the derived page fetcher callback will be applied to	string
local	local	Whether to allow for local file inputs through a system UI dialog	boolean	false
random	random	Randomly sample rows from a local or remote data source	boolean	false
canDownload			boolean	false
fileName			string \| undefined
fileInput			HTMLInputElement
dataFetcher			DataSourceFetcher \| undefined
verificationGrid			VerificationGridComponent \| undefined
decisionHandler

Methods

Name	Parameters	Description	Return
downloadResults			Promise
resultRows			Promise>

CSS Shadow Parts

Name	Description
file-picker	A css target to style the file picker button

<oe-classification>

Attributes

Name	Description	Type	Default
tag		Tag
true-shortcut	A shortcut key that when pressed will trigger a true classification decision to be emitted	string \| undefined
false-shortcut	A shortcut key that when pressed will trigger a false classification decision to be emitted	string \| undefined
disabled	Disables the decision button and prevents decision events from firing	boolean	false

Properties

Name	Attribute	Description	Type	Default
tag	tag		Tag
trueShortcut	true-shortcut	A shortcut key that when pressed will trigger a true classification decision to be emitted	string \| undefined
falseShortcut	false-shortcut	A shortcut key that when pressed will trigger a false classification decision to be emitted	string \| undefined
trueDecisionButton			HTMLButtonElement
falseDecisionButton			HTMLButtonElement
derivedTrueShortcut			string \| undefined
derivedFalseShortcut			string \| undefined
decisionEventName			"decision"	"decision"
injector			VerificationGridInjector	{ colorService: decisionColor, }
disabled	disabled	Disables the decision button and prevents decision events from firing	boolean	false
selectionMode		The selection mode of the verification grid	SelectionObserverType	"desktop"
shouldEmitNext			boolean	true
keyboardHeldDown			boolean	false
keyUpHandler
keyDownHandler

Methods

Name

Parameters

Description

Return

shortcutKeys

KeyboardShortcut[]

handleShortcutKey

Name	Description	Type
event		KeyboardEvent

void

isShortcutKey

Name	Description	Type
event		KeyboardEvent

Readonly

emitDecision

Name	Description	Type
value		Decision[]

void

Events

Name	Description
decision

Slots

Name	Description
(default)	Additional content to be displayed in the decision groups title

CSS Shadow Parts

Name	Description
true-decision-button	Styling selector to target the true decision button
false-decision-button	Styling selector to target the false decision button

<oe-decision>

Attributes

Name	Description	Type	Default
disabled	Disables the decision button and prevents decision events from firing	boolean	false

Properties

Name	Attribute	Description	Type	Default
decisionEventName			"decision"	"decision"
injector			VerificationGridInjector	{ colorService: decisionColor, }
disabled	disabled	Disables the decision button and prevents decision events from firing	boolean	false
selectionMode		The selection mode of the verification grid	SelectionObserverType	"desktop"
shouldEmitNext			boolean	true
keyboardHeldDown			boolean	false
keyUpHandler
keyDownHandler

Methods

Name

Parameters

Description

Return

handleShortcutKey

Name	Description	Type
event		KeyboardEvent

void

isShortcutKey

Name	Description	Type
event		KeyboardEvent

Readonly

shortcutKeys

KeyboardShortcut[]

emitDecision

Name	Description	Type
value		Decision[]

void

Events

Name	Description
decision

<oe-verification>

Attributes

Name	Description	Type	Default
verified		DecisionOptions
additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
shortcut	A keyboard key that when pressed will act as a click event on the button	string	""
disabled	Disables the decision button and prevents decision events from firing	boolean	false

Properties

Name	Attribute	Description	Type	Default
verified	verified		DecisionOptions
additionalTags	additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
shortcut	shortcut	A keyboard key that when pressed will act as a click event on the button	string	""
decisionButton			HTMLButtonElement
decisionEventName			"decision"	"decision"
injector			VerificationGridInjector	{ colorService: decisionColor, }
disabled	disabled	Disables the decision button and prevents decision events from firing	boolean	false
selectionMode		The selection mode of the verification grid	SelectionObserverType	"desktop"
shouldEmitNext			boolean	true
keyboardHeldDown			boolean	false
keyUpHandler
keyDownHandler

Methods

Name

Parameters

Description

Return

shortcutKeys

KeyboardShortcut[]

handleShortcutKey

Name	Description	Type
event		KeyboardEvent

void

isShortcutKey

Name	Description	Type
event		KeyboardEvent

Readonly

emitDecision

Name	Description	Type
value		Decision[]

void

Events

Name	Description
decision

Slots

Name	Description
(default)	Additional content to be displayed in the decision button

CSS Shadow Parts

Name	Description
decision-button	The button that triggers the decision

<oe-indicator>

Properties

Name	Attribute	Description	Type	Default
spectrogram			SpectrogramComponent \| undefined
wrappedElement			Readonly
unitConverter			UnitConverter \| undefined
computedTimePx			ReadonlySignal

Methods

Name	Parameters	Description	Return
handleSlotChange			void

Slots

Name	Description
(default)	A spectrogram component to add an indicator to

CSS Shadow Parts

Name	Description
indicator-line	A css target to style the indicator line
seek-icon	A css target to style the seek icon underneath the indicator line

<oe-info-card>

Attributes

Name	Description	Type	Default
default-lines	Number of subject key/values pairs to show before the "Show More" button is clicked	number	3

Properties

Name	Attribute	Description	Type	Default
model			SubjectWrapper \| undefined
defaultLines	default-lines	Number of subject key/values pairs to show before the "Show More" button is clicked	number	3
showExpanded			boolean	false
identityStrategy			InfoCardTemplate
numberStrategy			InfoCardTemplate
urlStrategy

<undefined>

Properties

Name	Attribute	Description	Type	Default
logger			ILogger \| undefined

Methods

Name	Parameters	Description	Return
doThing			void

<oe-media-controls>

A simple media player with play/pause and seek functionality that can be used with the open ecoacoustics spectrograms and components.

Attributes

Name	Description	Type	Default
for	A DOM selector to target the spectrogram element	string	""
playIconPosition		PreferenceLocation	"default"

Properties

Name	Attribute	Description	Type	Default
recursiveAxesSearch
for	for	A DOM selector to target the spectrogram element	string	""
playIconPosition	playIconPosition		PreferenceLocation	"default"
logger			ILogger	{ log: console.log, }
axesElement			AxesComponent \| null \| undefined
spectrogramElement			SpectrogramComponent \| null \| undefined
playHandler
keyDownHandler

Methods

Name

Parameters

Description

Return

toggleAudio

Name	Description	Type
keyboardShortcut

void

isSpectrogramPlaying

boolean

Slots

Name	Description
play-icon	The icon to display when the media is stopped
pause-icon	The icon to display when the media is playing

CSS Shadow Parts

Name	Description
play-icon	Styling applied to the play icon (including default)
pause-icon	Styling applied to the pause icon (including default)

<oe-progress-bar>

Attributes

Name	Description	Type	Default
history-head	Where the verification head is at	number	0
total	The total number of items in the data set	number \| undefined
completed	The completion head	number	0

Properties

Name	Attribute	Description	Type	Default
historyHead	history-head	Where the verification head is at	number	0
total	total	The total number of items in the data set	number \| undefined
completed	completed	The completion head	number	0

<oe-spectrogram>

Attributes

Name	Description	Type	Default
window		RenderWindow \| undefined
paused	Whether the spectrogram is paused	boolean	true
src	The source of the audio file	string	""
scaling	The aspect ratio of the spectrogram stretch should scale without aspect ratio natural should scale with the correct aspect ratio to fill the container it is in. One dimension will be constrained by the container, the other by the aspect ratio. original will set the spectrogram to the native resolution of the FFT output. It will not scale the image at all.	SpectrogramCanvasScale	"stretch"
window-size	The size of the fft window	number	512
window-function	The window function to use for the spectrogram	WindowFunctionName	"hann"
window-overlap	The amount of overlap between fft windows	number	0
mel-scale	A boolean attribute representing if the spectrogram should be shown in mel-scale	boolean	false
color-map	A color map to use for the spectrogram	string	""
offset	An offset (seconds) from the start of a larger audio recording	number	0
brightness	An increase in brightness	number	0
contrast	A scalar multiplier that should be applied to fft values	number	1

Properties

Name	Attribute	Description	Type	Default
playEventName			"play"	"play"
domRenderWindow	window		RenderWindow \| undefined
paused	paused	Whether the spectrogram is paused	boolean	true
src	src	The source of the audio file	string	""
scaling	scaling	The aspect ratio of the spectrogram stretch should scale without aspect ratio natural should scale with the correct aspect ratio to fill the container it is in. One dimension will be constrained by the container, the other by the aspect ratio. original will set the spectrogram to the native resolution of the FFT output. It will not scale the image at all.	SpectrogramCanvasScale	"stretch"
windowSize	window-size	The size of the fft window	number	512
windowFunction	window-function	The window function to use for the spectrogram	WindowFunctionName	"hann"
windowOverlap	window-overlap	The amount of overlap between fft windows	number	0
melScale	mel-scale	A boolean attribute representing if the spectrogram should be shown in mel-scale	boolean	false
colorMap	color-map	A color map to use for the spectrogram	string	""
offset	offset	An offset (seconds) from the start of a larger audio recording	number	0
brightness	brightness	An increase in brightness	number	0
contrast	contrast	A scalar multiplier that should be applied to fft values	number	1
slotElements			Array
mediaElement			HTMLMediaElement
canvas			HTMLCanvasElement
audio			Signal
currentTime			Signal
renderCanvasSize			Signal
renderWindow			Signal
fftSlice			TwoDSlice \| undefined
unitConverters			Signal
audioHelper				new AudioHelper()
audioContext				new AudioContext()
highAccuracyTimeBuffer				new SharedArrayBuffer(Float32Array.BYTES_PER_ELEMENT)
currentTimeBuffer				new Float32Array(this.highAccuracyTimeBuffer)
doneFirstRender			boolean	false
spectrogramOptions			SpectrogramOptions
possibleWindowSizes			ReadonlyArray
possibleWindowOverlaps			ReadonlyArray
renderedSource			string
nextRequestId			number \| null	null

Methods

Name

Parameters

Description

Return

hasSource

boolean

renderSpectrogram

void

regenerateSpectrogram

void

regenerateSpectrogramOptions

void

resetSettings

void

play

Name	Description	Type
keyboardShortcut

void

pause

Name	Description	Type
keyboardShortcut

void

stop

void

Events

Name	Description
loading
loaded

Loading
Finished

Slots

Name	Description
(default)	A `` element to provide the audio source

<oe-verification-grid-settings>

Properties

Name	Description	Type
settings		VerificationGridSettings
gridSize	An internal representation of the verification grids size	number \| undefined
verificationGrid		VerificationGridComponent \| undefined
fullscreenChangeHandler

<oe-verification-grid-tile>

Attributes

Name	Description	Type	Default
hidden	Hides a grid tile. This is useful for virtual paging so if you have a grid of tiles where not all have a source, you can hide the ones that do not have a source instead of destroying them completely as they might be used in the future when paging back in history or the grid size is increased.	boolean	false

Properties

Name	Attribute	Description	Type	Default
selectedEventName			"selected"	"selected"
model			SubjectWrapper
settings			VerificationGridSettings
injector			VerificationGridInjector
hidden	hidden	Hides a grid tile. This is useful for virtual paging so if you have a grid of tiles where not all have a source, you can hide the ones that do not have a source instead of destroying them completely as they might be used in the future when paging back in history or the grid size is increased.	boolean	false
showKeyboardShortcuts			boolean	false
selected			boolean	false
index		The index position of the tile within a verification grid that is used to determine the selection keyboard shortcut associated with the grid tile	number	0
requiredTags			Tag[]
spectrogram			SpectrogramComponent \| undefined
contentsWrapper			HTMLDivElement
keyDownHandler
loadingHandler
loadedHandler
playHandler
loaded			boolean	false
shortcuts			string[]	[]

Methods

Name

Parameters

Description

Return

resetSettings

void

addDecision

Name	Description	Type
decision		Decision

removeDecision

Name	Description	Type
decision		Decision

Events

Name	Description
loaded

Loaded

Slots

Name	Description
(default)	The template to be rendered inside the grid tile

CSS Custom Properties

Name	Description
--decision-color	The border color that is applied when a decision is being shown
--selected-border-size	The size of the border when a decision is being shown

<oe-verification-help-dialog>

Attributes

Name	Description	Type	Default
decisionElements		DecisionComponent[]
selectionBehavior		SelectionObserverType
verificationTasksCount		number
classificationTasksCount		number

Properties

Name	Attribute	Type	Default
decisionElements	decisionElements	DecisionComponent[]
selectionBehavior	selectionBehavior	SelectionObserverType
verificationTasksCount	verificationTasksCount	number
classificationTasksCount	classificationTasksCount	number
showRememberOption		boolean	true
helpDialogElement		HTMLDialogElement
dialogPreferenceElement		HTMLInputElement \| undefined
open		boolean
hasVerificationTask		boolean
hasClassificationTask		boolean

Methods

Name

Parameters

Description

Return

showModal

Name	Description	Type
showRememberOption

Events

Name	Description
open	Dispatched when the dialog is opened
close	Dispatched when the dialog is closed

<oe-verification-grid>

Attributes

Name	Description	Type	Default
grid-size	The number of items to display in a single grid	number	8
selection-behavior	The selection behavior of the verification grid	SelectionObserverType	"default"
get-page	A callback function that returns a page of recordings	PageFetcher \| undefined

Properties

Name	Attribute	Description	Type	Default
decisionMadeEventName			"decision-made"	"decision-made"
loadedEventName			"loaded"	"loaded"
settings			VerificationGridSettings	{ showAxes: signal(true), showMediaControls: signal(true), isFullscreen: signal(false), }
injector			VerificationGridInjector	{ colorService: decisionColor, }
gridSize	grid-size	The number of items to display in a single grid	number	8
selectionBehavior	selection-behavior	The selection behavior of the verification grid	SelectionObserverType	"default"
getPage	get-page	A callback function that returns a page of recordings	PageFetcher \| undefined
historyHead			number	0
verificationDecisionElements		selector for oe-verification elements	VerificationComponent[]
classificationDecisionElements		selector for oe-classification elements	ClassificationComponent[]
gridItemTemplate			HTMLTemplateElement \| undefined
gridTiles			NodeListOf
helpDialog			VerificationHelpDialogComponent
gridContainer			HTMLDivElement
decisionsContainer			HTMLSlotElement
skipButton			DecisionComponent
currentSubSelection			SubjectWrapper[]	[]
currentPage		The array of subjects that are currently displayed in grid tiles	SubjectWrapper[]	[]
pagedItems			number
decisionElements		A computed selector for all oe-verification and oe-classification elements	DecisionComponentUnion[]
keydownHandler
keyupHandler
blurHandler
intersectionHandler
selectionHandler
decisionHandler
intersectionObserver				new IntersectionObserver(this.intersectionHandler)
subjectHistory			SubjectWrapper[]	[]
verificationBuffer			SubjectWrapper[]	[]
requiredClassificationTags			Tag[]	[]
hiddenTiles			number	0
decisionsDisabled			boolean	false
showingSelectionShortcuts			boolean	false
selectionHead			number \| null	null
doneRenderBoxInit			boolean	false
highlight			HighlightSelection	{ start: { x: 0, y: 0 }, current: { x: 0, y: 0 }, highlighting: false, elements: [], }
paginationFetcher			GridPageFetcher \| undefined
effectivePageSize		A count of the number of tiles currently visible on the screen	number

Methods

Name	Parameters	Description	Return
isViewingHistory			boolean
resetSpectrogramSettings			void
isHelpDialogOpen			boolean

Events

Name	Description

decision	Emits information about the decision that was made
loaded	Emits when all the spectrograms have been loaded

Slots

Name	Description
(default)	A template element that will be used to create each grid tile
(default)	Decision elements that will be used to create the decision buttons
data-source	An `oe-data-source` element that provides the data