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 \| undefined
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_"
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 \| undefined
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-decision>

Attributes

Name	Description	Type	Default
additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	Disables the decision button and prevents decision events from firing	boolean	false
tag	A tag which a verification decision is being applied to	Tag \| undefined
shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined
verified	Clicking the button will verify or reject a tags annotation	boolean \| undefined
skip	Adds "SKIP" to the verification column when	boolean \| undefined
unsure	Adds "UNSURE" to the verification column when downloaded	boolean \| undefined

Properties

Name	Attribute	Description	Type	Default
decisionEventName			"decision"	"decision"
additionalTags	additional-tags	Value that will be added to the oe-additional-tags column	Tag[]	[]
disabled	disabled	Disables the decision button and prevents decision events from firing	boolean	false
tag	tag	A tag which a verification decision is being applied to	Tag \| undefined
shortcut	shortcut	A keyboard key that when pressed will act as a click event on the button	string \| undefined
verified	verified	Clicking the button will verify or reject a tags annotation	boolean \| undefined
skip	skip	Adds "SKIP" to the verification column when	boolean \| undefined
unsure	unsure	Adds "UNSURE" to the verification column when downloaded	boolean \| undefined
highlighted			boolean	false
decisionIndex			number	0
selectionMode		The selection mode of the verification grid	SelectionObserverType	"desktop"
decisionButton			HTMLButtonElement
keyboardHeldDown			boolean	false
shouldEmitNext			boolean	true
verificationDecision			VerificationDecision
keyUpHandler
keyDownHandler

Methods

Name	Parameters	Description	Return
classificationModels			Classification[]
isShowingDecisionColor			boolean

Events

Name	Description
decision

Slots

Name	Description
(default)	The text/content of the decision

CSS Shadow Parts

Name	Description
decision-button	The button that triggers the decision

<oe-indicator>

Properties

Name	Type	Default
spectrogram	SpectrogramComponent \| undefined
wrappedElement	Readonly
xPos	number	0
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
defaultLines	default-lines	Number of subject key/values pairs to show before the "Show More" button is clicked	number	3
model			DecisionWrapper \| undefined
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-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()
doneFirstRender			boolean	false
spectrogramOptions			SpectrogramOptions
possibleWindowSizes			ReadonlyArray
possibleWindowOverlaps			ReadonlyArray
renderedSource			string
nextRequestId			number \| null	null
playStartedAt			DOMHighResTimeStamp \| 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

Events

Name	Description
loading
loaded

Loading
Finished

Slots

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

<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
model			DecisionWrapper
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			number	0
decisionIndex			number \| undefined
spectrogram			SpectrogramComponent \| undefined
contentsWrapper			HTMLDivElement
keyDownHandler
loadingHandler
loadedHandler
playHandler
loaded			boolean	false
shortcuts			string[]	[]
showingHighlight			boolean
selectedEventName			"selected"	"selected"

Methods

Name	Parameters	Description	Return
resetSettings			void

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

Properties

Name	Attribute	Type	Default
decisionElements	decisionElements	DecisionComponent[]
selectionBehavior	selectionBehavior	SelectionObserverType
showRememberOption		boolean	true
helpDialogElement		HTMLDialogElement
dialogPreferenceElement		HTMLInputElement \| undefined
open		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
auto-page	Automatically advance to the next page after a decision is made	boolean	true
pre-fetch	Pre-fetch the next page of recordings	boolean	true

Properties

Name	Attribute	Description	Type	Default
loadedEventName			"loaded"	"loaded"
decisionMadeEventName			"decision-made"	"decision-made"
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
autoPage	auto-page	Automatically advance to the next page after a decision is made	boolean	true
preFetch	pre-fetch	Pre-fetch the next page of recordings	boolean	true
spectrogramElements			TemplateResult<1> \| TemplateResult<1>[] \| undefined
historyHead			number	0
decisionElements			DecisionComponent[] \| undefined
gridItemTemplate			HTMLTemplateElement
gridTiles			NodeListOf
helpDialog			VerificationHelpDialogComponent
gridContainer			HTMLDivElement
decisionsContainer			HTMLSlotElement
currentSubSelection			DecisionWrapper[]	[]
pagedItems			number
keydownHandler
keyupHandler
blurHandler
intersectionHandler
selectionHandler
decisionHandler
intersectionObserver				new IntersectionObserver(this.intersectionHandler)
decisions			DecisionWrapper[]	[]
undecidedTiles			DecisionWrapper[]	[]
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

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