Annotations

<Clover.Annotations /><clover-annotations>10 kB added to a page with a Root, gzipped28 kB added to a page with a <clover-root>, styles included, gzipped

The resource’s annotations, by layer and by Canvas: to read, to find on the Canvas, and to hide from it.


<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>


<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json">
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>

API reference

Inside a Root<clover-root>, it lists every Canvas’s annotations, and those of pages the Root’s annotations adds, by layer (AnnotationPages that share a label) and then by Canvas; with none, it renders nothing. An image’s own annotations, such as those of one image of a choice (an X-ray beside the natural light), are listed under it and drawn while it is the image chosen. Pressing one finds it on the Canvas, choosing its image if need be, and shows its layer again if it was hidden; the eye at the end of a layer’s heading hides the layer there, and lights the entries it hides while it is pointed at or focused. A still image’s OCR (supplementing text on its lines or words) is neither listed nor drawn: a search finds in it and draws its hits. A transcription of the whole page, captions and a recording’s text show as ever. In a box that scrolls, the Canvases in view come to its top as the reader moves. Where a layer gives the same words as separate annotations, one per language, it lists one language at a time, offered by their codes in its header: the Root’s language to start, else the reader’s. Its other props, and its ref, go to its element.

Prop	Type	Default	Description
`scope`	`"view" \| "all"`	`"all"`	Every Canvas’s annotations, all fetched as it shows, or the view’s.
`renderEntry`	`(entry: AnnotationEntry) => ReactNode`	—	Your own rendering of an entry’s content.
`headingLevel`	`number`	`3`	Its first headings: one below the heading over it.
`as`	element type	`"div"`	The element to render.
`className`	`string`	—	Added to `clover-annotations`.

`<clover-annotations>`

The annotations, by layer and then by Canvas: each to pick, which frames it on the Body, with its region pictured.

Name	Type	Default	Description
`scope`	`"view" \| "all"`	`all`	Every Canvas's annotations, or only the view's.
`heading-level`	`number`	`3`	The level of its layers' titles, one under the heading it sits beneath. Past 6, each names what it heads instead.
`.renderEntry`	`((entry: { id: string; canvasId: string; annotation: Record<string, unknown> }) => Node \| string \| null \| undefined) \| null`	—	Your own drawing of an annotation's content: a node or text, in place of its bodies. A new node each time.

Examples

On a recording

On a recording, each annotation shows when it starts, and pressing it goes there. These follow the defendants through the film, in two layers; its captions are the Transcript’s.


<Clover.Root iiifContent="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>


<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/manifest.json">
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>

In several languages

Where a page gives its words once per language, a transcription and its translation, each an annotation of its own, Annotations offers their languages by code and lists one at a time. It starts on the Root’s language, here Arabic, and Arabic text is written right to left. Where the Root offers the languages to read the resource in (About’s), the set offers none of its own and follows that one choice. This manuscript’s English is Ariela Marcus-Sells’s translation.


<Clover.Root
  iiifContent="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
  language="ar"
>
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>


<clover-root
  iiif-content="https://iiif-maktaba.dc.library.northwestern.edu/dc8ff749-adad-42a7-81e0-0eb473ef88a5.json"
  language="ar">
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>

Pages of your own

Give the Root annotations, an AnnotationPage or AnnotationCollection of your own, and its annotations are listed with the Manifest’s.


<Clover.Root iiifContent={url} annotations={annotationPageUrl}>
  <Clover.Body />
  <Clover.Annotations />
</Clover.Root>


<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/paged/manifest.json"
  annotations="https://example.org/annotation-page.json"
>
  <clover-body></clover-body>
  <clover-annotations></clover-annotations>
</clover-root>

Your own rendering

Use renderEntry.renderEntry to draw an entry’s content yourself, from its read bodies or the annotation as published. The entry keeps its picture, its link, its button and its highlight.


const renderEntry = (entry) =>
  entry.bodies
    .filter((body) => body.value)
    .map((body, index) => (
      <p key={index} lang={body.language}>
        {body.value}
      </p>
    ));
 
<Clover.Annotations renderEntry={renderEntry} />;


<clover-annotations></clover-annotations>
 
<script type="module">
  document.querySelector("clover-annotations").renderEntry = (entry) => {
    const bodies = document.createDocumentFragment();
    for (const body of entry.bodies.filter((each) => each.value)) {
      const paragraph = document.createElement("p");
      if (body.language) paragraph.lang = body.language;
      paragraph.textContent = body.value;
      bodies.append(paragraph);
    }
    return bodies;
  };
</script>

Previous versions

Clover 3.x › Viewer › Information Panel

The Annotations tab is now this part, placed anywhere.
Captions are the Transcript’s.
annotationTabLabel is a Tab<clover-tab> of your own.