KAI UI

A Vue.js component library for use in Kurrawong tools.

Contents

• Install
• Components
• Development
• License

Install

To add kai-ui to your project, simply run:

npm install @kurrawongai/kai-ui

or

pnpm add @kurrawongai/kai-ui

You may also need to import KAI-UI's stylesheet ("kai-ui/kai-ui.css").

Components

Editor

A base Monaco code editor with support for multiple languages, including RDF languages.

OpenLayers Map

An interactive OpenLayers Map that supports loading WKT & geoJSON features.

Supported Languages

• CSS
• HTML
• Java
• JavaScript
• JSON
• Markdown
• N3
• N-Quads
• N-Triples
• Python
• SHACL
• SPARQL
• TriG
• Turtle
• TypeScript
• XML
• YAML

Props

prop	description	type	required	default
languages	What languages are available to choose from	string[], see above for supported languages		all are enabled by default
hideToolbar	Hides the tool bar at the top of the editor	boolean		false
options	Monaco editor options	See the available options from Monaco		{ automaticLayout: true, minimap: { enabled: false }, stickyScroll: { enabled: false }, scrollBeyondLastLine: false, }
hideLanguage	Hides the language selector	boolean		false
hideTheme	Hides the theme selector	boolean		false
hideCopyButton	Hides the copy button	boolean		false
hideClearButton	Hides the clear button	boolean		false
hideUploadButton	Hides the upload button	boolean		false
hideDownloadButton	Hides the download selector	boolean		false
disableDrag	Disabled drag and drop	boolean		false
readonly	Sets the editor to read only. Also hides the upload & clear buttons	boolean		false
downloadFilename	Sets the name of the file for download	string		"output"
directDownload	Downloads the file directly instead of a popup for renaming the downloaded file name	boolean		false
class	Passthrough for applying CSS classes	string

Models

model	description	type	required	default
-	The value or content of the editor	string
language	The current language of the editor	string, see above		"text"
theme	The color theme of the editor	"light" | "dark" | "system"		"system"

OpenLayers Map

An interactive OpenLayers Map that supports loading WKT & geoJSON features.

Props

prop	description	type	required	default
center	Where to center the map	number[], array of 2 coordinates		[133.7751, -25.2744] (Australia)
zoom	Zoom level	number		4
rotation	Map rotation	number		0
projection	Projection to use, make sure this matches the data	string		'EPSG:4326'
focusSourceRef	Passed through to vue3-openlayers	Sources.OlSourceVector		null
layers	Layers of GeoJSON FeatureCollections to include in the map on load	{ type: "FeatureCollection"; title: string; features: { type: "Feature"; name: string; wkt?: string; geoJSON?: any; }[]; mapStyle?: MapStyle; }[] see drawStyle type for MapStyleOptions		[]
loading	Display a "Loading" modal on the map, useful when loading data	boolean		false
drawEnabled	Enable "Draw mode", allowing the user to draw on the Map	boolean		false
mapStyle	Sets the default layer styles for view, hover & select states	{ style?: MapStyleOptions; hoverStyle?: MapStyleOptions; selectStyle?: MapStyleOptions; } see drawStyle type for MapStyleOptions		see consts.ts for default styles
drawStyle	Sets the layer style for drawing geometries	{ strokeWidth?: number; strokeColor?: string; fillColor?: string; pointRadius?: number; pointStrokeWidth?: number; pointStrokeColor?: string; pointFillColor?: string; }		see consts.ts for default styles

Events

event	description	parameters
select	Fired when the user selects (clicks) a feature	feature
hover	Fired when the user hovers over a feature	feature
drawstart	Fired when the user starts drawing	feature
drawend	Fired when a feature is fully drawn by the user	feature

Graph Diagram

A reactive node-edge graph diagram that renders data from RDF.

Props

prop	description	type	required	default
data	The RDF data to load & display	string	✓
options	Options for customisation	See the options table below
graphOptions	Additional options from Unovis' graph to pass through	See the available options from Unovis		{ nodeSize: 30, linkWidth: 2, nodeFill: () => ... // colours nodes using style options below, linkArrow: true, forceLayoutSettings: { linkDistance: 80, linkStrength: 0.45, charge: -1000, forceXStrength: 0.15, forceYStrength: 0.4, }, nodeSelectionHighlightMode: GraphNodeSelectionHighlightMode.GreyoutNonConnected, }
class	Passthrough for applying CSS classes	string

Options

prop	description	type	required	default
format	The format of the RDF data to display	"application/ld+json" | "jsonld" | "text/turtle" | "ttl" | "application/trig" | "trig" | "application/n-triples" | "nt" | "application/n-quads" | "nq" | "text/n3" | "n3" | "application/rdf+xml" | "rdf"		"text/turtle"
prefixes	A map of prefixes to generate curies - e.g. {"sdo": "https://schema.org/", ...}	Record<string, string>		A small object of default prefixes are supplied to extend upon
predicates	An array of predicate IRIs to filter by	string[]
labels	An array of labelling predicates which will label nodes instead of IRIs	string[]
query	A SPARQL CONSTRUCT query to filter results	string
style		{ node?: string; literal?: string; bnode?: string; nodeBorderColor?: string; }

Models

model	description	type	required	default
showLabels	Flag whether to display labels for nodes & edges	boolean		false

Development

To install:

pnpm install

To run locally:

pnpm dev

License

This code is available for reuse according to the BSD 3-Clause License.

© 2025 KurrawongAI