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