lucos_search_component

Web Component for searching lucOS data

Technologies used

• ES Modules
• Web Components

Usage

Include the following in your javascript:

import 'lucos_search_component';

Search

Searches all items available in lucos_arachne

Include the following in your html:

<span is="lucos-search">
	<select multiple>
		<option selected>https://contacts.l42.eu/people/2</option>
		<option selected>https://eolas.l42.eu/metadata/place/2/</option>
		<option selected>https://media-metadata.l42.eu/tracks/13713</option>
	</select>
</span>

Selected options use the item's URI as their value.

The following attributes can be added to the lucos-search span:

• data-api-key [required] — a valid API key for the production instance of lucos_arachne, as generated by lucos_creds.
• data-types — A comma separated list of item types to search for (defaults to all types).
• data-exclude_types — A comma separated list of item types to exclude from the search (ignored if data-types is set).
• data-is-contact — Filter results to contacts only ("true") or non-contacts only ("false"). Omitting the attribute applies no filter. Composes with data-types when both are set.
• data-label-override-zxx — Override the displayed label for the https://eolas.l42.eu/metadata/language/zxx/ entry in both the dropdown and selected lozenge. Has no effect on whether zxx appears in the list — that depends on whether zxx is present in the search index. Only meaningful when data-types="Language".
• data-common — A comma separated list of item URIs to pin in a "Common" group at the top of the list, above the normal results. Only meaningful when data-types="Language".
• data-preload — If present, all options are loaded upfront rather than fetched on search. Suitable for small, finite datasets such as languages.
• data-create — Boolean presence attribute. When present, enables inline creation of new entities: if the user types a name with no matching arachne result, they can pick "Add new <type>: <name>…" from the dropdown. On form submit, the created entry is serialised as a name-only value ([name] set, [uri] omitted) so the consumer can route it to a create-on-write path. Opt-in per instance — controlled-vocabulary fields (e.g. language, offence) must not set this; only open entity types (e.g. Person) should allow inline creation. The [uri] + [name] serialisation for existing arachne-selected entries is unaffected.

Language selector

To use lucos-search as a language selector (the replacement for the removed lucos-lang component):

<span is="lucos-search"
    data-api-key="..."
    data-types="Language"
    data-label-override-zxx="Instrumental / No Language"
    data-common="https://eolas.l42.eu/metadata/language/en/,https://eolas.l42.eu/metadata/language/ga/,https://eolas.l42.eu/metadata/language/zxx/"
    data-preload>
    <select multiple>
        <option selected value="https://eolas.l42.eu/metadata/language/en/">English</option>
    </select>
</span>

Selected options use the language's full URI as their value (e.g. https://eolas.l42.eu/metadata/language/en/).

Migrating from lucos-lang

lucos-lang has been removed in v2.0.0. Use lucos-search with data-types="Language" instead.

Key differences:

• Values are URIs, not ISO codes. lucos-lang stored ISO 639 codes (e.g. en, ga). lucos-search stores full URIs (e.g. https://eolas.l42.eu/metadata/language/en/). Update any stored values and form handling accordingly.
• data-common takes URIs, not codes. Pass full language URIs instead of ISO codes.
• Use data-label-override-zxx instead of data-no-lang. To show a custom label for the zxx (No linguistic content) entry, set data-label-override-zxx="My Label". The data-no-lang attribute has been removed in v2.0.0.

Manual Testing

Expects a .env file in the root directory with the following environment variables:

• KEY_LUCOS_ARACHNE - an API for lucos_arachne, as set by lucos_creds

(The .env file can be automatically generated using the command scp -P 2202 "creds.l42.eu:${PWD##*/}/development/.env" ., assuming the correct credentials are in place)

Run:

npm run example

This uses webpack to build the javascript and then opens a html page which includes the web component