Displaying outputs of projects

[stephenwf]

At the moment there are a handful of ways to display outputs of projects. These are not very configurable, and were created to accommodate as many variations of capture model and project that could be created.

Existing methods

The existing methods use one of 2 strategies for rendering the outputs of a project.

1. Displaying the full structured document produced by a capture model
2. Transforming the structured document produced by a capture model into another format

The document tab

🐛 View the JSON for this request.

{
  "id": "f2ecf786-535e-44ca-ac0b-ba551a153900",
  "type": "entity",
  "label": "Project with selector",
  "properties": {
    "test": [
      {
        "id": "95b4b166-e3f0-48e7-b5fa-20b71d0b9cf7",
        "type": "text-field",
        "label": "test",
        "value": "",
        "selector": {
          "id": "a7f64abf-9c6f-4589-bd70-a32af9c556b4",
          "type": "box-selector",
          "state": null
        }
      },
      {
        "id": "45f673a2-1f48-4cc0-b787-025c7a281753",
        "type": "text-field",
        "label": "test",
        "value": "TEST ",
        "revises": "95b4b166-e3f0-48e7-b5fa-20b71d0b9cf7",
        "selector": {
          "id": "f2bd5161-6af5-4a88-9b00-dd20606e46a2",
          "type": "box-selector",
          "state": {
            "x": 746,
            "y": 1205,
            "width": 1075,
            "height": 165
          }
        },
        "revision": "0df82c7a-7b7c-464a-9c79-c6fedca7c238"
      }
    ]
  },
  "immutable": true
}

This tab tries to show the nested nature of models, along with their selectors, in a compact view. It's intended to work for any valid capture model created. The current document view is not as clear as it could be, and we recognise this. However we should always have a method for viewing complex capture models that can't be viewed in another bespoke way.

If you look at the JSON below, you will see some of the complexity that is hidden in this document view - like the single revision made to one of the fields. The model tab can both show canonical documents but also (document + my in progress work) which is also important for users to see.

Below is the original design for this expandable panel. It was originally designed to open into a wider panel.

Some clear improvements to this document view:

• Being able to open into a wider/fuller view
• Compacting selectors
• Interactivity (clicking on regions, highlighting on deep zoom)
• Collapsible sections
• Machine created annotations (like OCR correction) are not suited for display in this UI.

There was also some designs for using this same "document" view to visualise individual contributes from a user in a clear way, alongside other details about the revision. This view was envisioned as an overview of an image in a project, with a clear overview of contributions, reviews.

The annotation tab

🐛 View the JSON for this request.

```json { "id": "http://localhost:8888/s/stephen/madoc/api/canvases/9669/models?format=w3c-annotation", "label": "Project with selector", "type": "AnnotationPage", "items": [ { "id": "http://localhost:8888/s/stephen/madoc/api/canvases/9669/models/45f673a2-1f48-4cc0-b787-025c7a281753", "type": "Annotation", "motivation": "painting", "body": { "type": "TextualBody", "value": "TEST " }, "madoc:id": 9669, "target": "https://iiif.wellcomecollection.org/presentation/b18035723/canvases/b18035723_0005.JP2#xywh=746,1205,1075,165" } ] } ```

The annotation tab is an attempt at fitting the complex data captured inside of a capture model into the W3C and Open annotation specifications, and more specifically annotations that are supported in viewers such as Mirador.

The problem is that not all data can be represented in this way. If a piece of data does not have a box selector, there is no target for this selector (and would not be shown by viewers currently). Additionally, if an "Entity" such as a person does have a selector, then we need to find some text to associate with it, for the annotation.

Some other problems arise when you have more than one project for a single resource. At the moment we add an extra click for the user, where they can choose a project and see the annotations.

This becomes more complicated when we don't know if a resource has annotations on one or any of the projects. We've managed to work around this, but still a challenge when presenting this data early in the UI.

The transcription tab

The JSON for this is just a simple plaintext field, sent as part of the canvas

The transcription tab is for plain text only and can be populated from a capture model that is set up correctly. Alternatively you can create a "Transcription project" with the model set up for you, and the outputs of that project will appear in this panel.

The transcription tab will only show one part of a capture model (typically this is the WHOLE capture model, but is not required) so this is also a "lossy" way of viewing contributions.

The transcription tab could also be used to display OCR correction fields, with extra features such as highlighting text to reveal it on the image.

Future methods

We are gathering feedback at this point on how best to display the outputs of projects, and ideas and suggestions are very welcome. There are some existing projects that we can learn from. I've put together a few below (and may expand based on feedback)

Rich entities

One way to improve displaying outputs would be to create components that can be filled with slices of a model. For example, in the National Library of Wales crowdsourcing project (Madoc 1.0) people tagged in this photograph were displayed in a grid, where you could click on each one to see more information that was captured.

(Image from the National Library of Wales crowdsourcing project)

This was built specifically for this capture model and use-case, but this type of UI may be possible (maybe using page blocks).

How to customise?

We need to make sure that projects have the opportunity to use these templates and layouts. A flow similar to the bottom may be a way to go. Where we create some layouts for best displaying outputs, and then they can be assigned to a project.

These layouts could be showing the image front and centre, or maybe always show bounding boxes for areas of interest - or perhaps moving the image to a thumbnail in the corner and showing the transcribed text in the main view. It could also configure the Rich entities, like in the NLW example.

This would be a quick way to choose a layout. If a project required something more - then page blocks would be the best option beyond that. Its very likely that these layouts would be simply configuring page blocks anyway!