CEDAR Artifact Viewer — DEPRECATED

Warning

This repository was frozen on 2026-08-20 and is no longer maintained. Do not add new dependencies on this web component.

Use CEDAR OpenView for artifact viewing. Form rendering and metadata entry are provided by the CEDAR Embeddable Editor within the maintained CEDAR frontends.

The source and build instructions below are retained for historical reference.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4420/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

To build as web component and push to cedar-component-distribution

cedarcli build this

or

ng build --configuration=production
cat dist/cedar-artifact-viewer/{runtime,polyfills,main}.js > \
{$CEDAR_HOME}/cedar-component-distribution/cedar-artifact-viewer/cedar-artifact-viewer-{$CEDAR_VERSION}.js

To load in your app as web component

<script src="https://component.metadatacenter.org/cedar-artifact-viewer/cedar-artifact-viewer-{$CEDAR_VERSION}.js" type="text/javascript"></script>   

Follow the instructions for using web components for your environment.

Resources

The embedding application should place the language files under /assets/i18n-cav.

To use the cedar-form web component in your app

Here is an example of how you would call it from your Angular app to display a CEDAR field, element or template:

  <cedar-artifact-viewer
    [config]="cavConfig"
    [templateObject]="template"
  ></cedar-artifact-viewer>

If you want to show an instance, you need to pass in both the template and the instance:

    <cedar-artifact-viewer
      [config]="cavConfig"
      [templateObject]="template"
      [instanceObject]="instance"
    ></cedar-artifact-viewer>

using parameters:

1. instance - The CEDAR JSON-LD instance to view
2. template - the CEDAR Template, Template-element or Template-field to be used
3. cavConfig - config object. Possible values are:

Name	Type	Default Value	Description
showTemplateData	boolean	false	Show template JSON below the form
showInstanceData	boolean	false	Show instance JSON below the form
defaultLanguage	str	en	Default language code for UI labels
fallbackLanguage	str	en	Fallback language code for UI labels
sampleTemplateLocationPrefix	URL	None	URL to the sample templates. One possible value is http://localhost:4240/cedar-embeddable-editor-sample-templates/
loadSampleTemplateName	str	None	Which sample template should be loaded
showSampleTemplateLinks	boolean	false	Show sample template chooser in header and below the form
expandedSampleTemplateLinks	boolean	false	Expand sample template chooser below the form
showHeader	boolean	false	Show app header
showFooter	boolean	false	Show app footer
terminologyIntegratedSearchUrl	URL	None	URL for CEDAR integrated search endpoint. One possible value is: https://terminology.metadatacenter.orgx/bioportal/integrated-search